kuaiyidian-HD/package1/other/custom.vue

<template>
	<view>
		<uni-section class="mb-10" title="历史订单" type="line">
			<view class="example-body">
				<uni-datetime-picker border='false' 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" @change="change"></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== null ?'暂无': '￥'+item.totalAmount "
						thumbnail="https://jewel-shop.oss-cn-beijing.aliyuncs.com/c09dfa8c61c949f8b0dbb8f041d5a501.png">
						<view class="uni-body">
							<text class="cardText">店铺：</text>
							{{ item.shopName== null ?'暂无': item.shopName }}
						</view>
						<view class="uni-body">
							<text class="cardText"> 采购额：</text>
							<text class="priceText"> {{ item.realAmount== null ?'暂无': item.realAmount}}</text>
							<text decode class="cardText"> {{ '&nbsp;&nbsp;&nbsp;&nbsp; 欠款： ' }}</text>
							<text class="priceText">{{ item.noEarn== null ?'暂无': item.noEarn}}</text>
						</view>
						<view class="uni-body">
							<text class="cardText"> 订单状态：</text>
							{{ item.status == '0' ?'待抢单' :item.status == '1' ?'待取货' :item.status == '2' ?'作废':item.status == '3' ?'待送达' :item.status == '4' ?'已完成' :item.status == '5' ?'下游客户待退货' :item.status == '00' ?'退货待抢单' :item.status == '01' ?'退货待取货' :item.status == '03' ?'退货待送达' :item.status == '04' ?'待确认退货' :item.status == '6' ?'待配货' :'挂单'}}
						</view>
						<!-- <view class="floatRight"> 采购退货</view> -->
						<view class="floatRight" @tap="kehuList(item.id)">查看详情</view>
					</uni-card>
				</li>
			</ul>
		</view>
		<uni-fab ref="fab" :content="content" :horizontal="horizontal"
			@trigger="trigger" />
	</view>
</template>

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

	export default {
		computed: mapState(['userId', 'mobile']),
		data() {
			return {
				range: [],
				name: '',
				shopList: [],
				list: ['采购单', '退货单'],
				current: 0,
				userId: '',
				shopId: '',
				bList: [],
				query: {
					startDate: '',
					endDate: ''
				},
				horizontal: 'right',
				content: [{
					iconPath: '/static/images/tabbar/home.png',
					selectedIconPath: '/static/images/tabbar/home-sel.png',
					text: '我的',
					active: false
				},{
					iconPath: '/static/images/tabbar/home.png',
					selectedIconPath: '/static/images/tabbar/home-sel.png',
					text: '退出登录',
					active: false
				}],
			}
		},
		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]
			
		},
		onShow(){
			this.getShopList()
			this.getAllList()
		},
		onLoad(option){
			if(option.saleId !='' && option.userId == uni.getStorageSync('userId')){
				this.kehuList(option.saleId)
			}
		},
		methods: {
			sectionChange(index) {
				this.current = index
				this.bList = []
				if (index == 0) {
					this.getAllList()
				}
				if (index == 1) {
					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
						}
					})
				})
			},
			trigger(e) {
				let that = this;
				if(e.index == 0){ //我的
					uni.navigateTo({
						url: `/pages/index/shopInfo`
					})
				}else{ //退出登录
					uni.showModal({
						title: "提示",
						content: "确定退出登录吗？",
						success: function(res) {
							if (res.confirm) {
								that.tui.request("/oauth2/logout", "POST", {}, false, false).then((res) => {
									if (res.code == 200) {
										that.tui.toast("退出登录成功")
										uni.clearStorage();
										uni.navigateTo({
											url: '/pages/login/login'
										})
									} else {
										that.tui.toast(res.message)
									}
								
								})
							}
						}
					})
				}
			},
			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(e) {
				if(e.length == 0){
					this.query.startDate = ''
					this.query.endDate = ''
				}else{
					this.query.startDate = this.range[0]
					this.query.endDate = this.range[1]
				}
				
				this.sectionChange(this.current)
			},
			kehuList(id){
				uni.navigateTo({
					url: '/package1/other/customDetail?id='+id
				})
			},
			//门店下拉选择
			change(e){
				this.getAllList()
			},
			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;
			}
		}
	}
</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>