kuaiyidian-HD/pages/other/custom.vue

<template>
	<view>
		<uni-section class="mb-10" title="历史订单" type="line">
			<view class="example-body">
				<uni-datetime-picker v-model="range" type="daterange" @change="dateChange" />
			</view>
			<view class="shop-choose">
				<view class="shop-name">
					门店
				</view>
				<uni-data-select style="width: 100%" v-model="shopId" :localdata="shopList"></uni-data-select>
			</view>
		</uni-section>
		<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
		<view class="ulList" v-if="bList.length > 0">
			<ul>
				<li v-for="(item,index ) in bList" :key="index">
					<uni-card :title="item.id" :sub-title="item.createTime" :extra="'￥'+item.totalAmount"
						thumbnail="https://jewel-shop.oss-cn-beijing.aliyuncs.com/c09dfa8c61c949f8b0dbb8f041d5a501.png">
						<view class="uni-body">
							<text class="cardText">销售员：</text>
							{{ item.createBy }}
						</view>
						<view class="uni-body">
							<text class="cardText"> 营业额：</text>
							<text class="priceText"> {{ item.realAmount }}</text>
							<text decode class="cardText"> {{ '&nbsp;&nbsp;&nbsp;&nbsp; 欠款： ' }}</text>
							<text class="priceText">{{ item.noEarn }}</text>
						</view>
						<view class="uni-body">
							<text class="cardText"> 订单状态：</text>
							{{
                item.status == 1 ? '拣货中' : item.status == 2 ? '已预定' : item.status == 3 ? '已作废' : item.status == 4 ? '已取货' : '已送达'
              }}
						</view>
						<view class="floatRight"> 采购退货</view>
						<view class="floatRight">物流信息</view>
					</uni-card>
				</li>
			</ul>
		</view>
		<view class="mine" @click="gotoInfo">我的</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		computed: mapState(['userId', 'mobile']),
		data() {
			return {
				range: ['2023-10-1', '2023-10-2'],
				name: '',
				shopList: [],
				list: ['采购单', '退货单'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				current: 0,
				userId:'',
				shopId: '',
				bList: [],
				query: {
					startDate: '',
					endDate: ''
				}
			}
		},
		created() {
			uni.hideHomeButton()  //左上角HOME按钮
			const date = this.formatDate(new Date(), 'YYYY-MM-DD')
			this.query.startDate = date
			this.query.endDate = date
			this.range = [date, date]
			this.getShopList()
			this.getAllList()
		},
		methods: {
			sectionChange(index) {
				console.log(index)
				this.current = index
				this.bList = []
				if (index == 0) {
					this.getAllList()
				}
				if (index == 1) {
					this.getList()
				}
				if (index == 2) {
					this.getReturnList()
				}
			},
			getShopList() {
				this.tui.request('/app/shop/getAllShopByCustomer', 'get', {}, false, true, false).then(res => {
					if (res.code !== 200) return
					this.shopList = res.result.map((v) => {
						return {
							text: v.shopName,
							value: v.id
						}
					})
				})
			},
			getList() {
				this.tui.request('/app/sale/listAll', 'post', {
					remarkSR:2,
					shopId: this.shopId,
					searchDateVo: this.query
				}, false, false, false).then(res => {
					if (res.code !== 200) return
					this.bList = res.result
				})
			},
			getAllList() {
				this.tui.request('/app/sale/listAll', 'post', {
					remarkSR:2,
					shopId: this.shopId,
					searchDateVo: this.query
				}, false, false, false).then(res => {
					if (res.code !== 200) return
					this.bList = res.result.saleList
				})
			},
			getReturnList() {
				this.tui.request('/app/sale/listAll', 'post', {
					remarkSR:3,
					shopId: this.shopId,
					searchDateVo: this.query
				}, false, false, false).then(res => {
					if (res.code !== 200) return
					this.bList = res.result.returnSaleList
				})
			},
			dateChange() {
				console.log(this.range)
				this.query.startDate = this.range[0]
				this.query.endDate = this.range[1]
				this.sectionChange(this.current)
			},
			formatDate(date, fmt) {
				var o = {
					'M+': date.getMonth() + 1, //月份
					'D+': date.getDate(), //日
					'H+': date.getHours(), //小时
					'm+': date.getMinutes(), //分
					's+': date.getSeconds(), //秒
					'q+': Math.floor((date.getMonth() + 3) / 3), //季度
					'S': date.getMilliseconds() //毫秒
				};
				if (/(Y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
				for (var k in o)
					if (new RegExp('(' + k + ')').test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k])
							.length)));
				return fmt;
			},
			gotoInfo() {
				uni.navigateTo({
					url: `/pages/index/shopInfo`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.example-body {}

	.shop-choose {
		padding: 25rpx 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.shop-name {
			flex-basis: 150rpx;
		}
	}

	.ulList {
		margin-top: 20upx;

		ul {
			li {
				font-size: 12px;

				.floatRight {
					float: right;
					padding: 14rpx;
					color: $u-primary;
					font-size: 26upx;
				}

				.cardText {
					font-size: 12px;
				}

				.priceText {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.mine {
		position: fixed;
		bottom: 120upx;
		right: 20upx;
		width: 88upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		border-radius: 88upx;
		color: #fff;
		background-color: $u-primary;
	}

	.mine:active {
		opacity: .8;
	}
</style>