xusfood_client/shopping/order.vue

<template>
	<view class="pages">
		<u-navbar
			title="我的订单"
			:autoBack="true"
			 @leftClick="leftClick"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="tabs-wrap">
			<u-tabs 
			:list="tabsList" 
			lineColor="#00A447" 
			:current="tabsCurrent"
			 :activeStyle="{color:'#333','font-weight': '600','font-size':'30rpx'}"
			 :inactiveStyle="{color:'#999'}"
			@click="tabsClick"></u-tabs>
		</view>
		<view class="page-wrap">
			<mescroll-body class="" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
				<view class="order">
					<view v-for="(item,index) in orderListWithClass" class="order-item" 
						:class="item.class"
						@click="goOrderDetails(item.id)" :key="item.id">
						<view class="top u-flex u-row-between">
							<text>订单号：{{item.orderNum||''}}</text>
							<text class="status">{{item.status|filterOrderState}}</text>
						</view>
						<view class="center">
							<view v-for="goods in item.detailList" :key="goods.id" class="goods u-flex u-row-between">
								<view class="left u-flex">
									<u--image :showLoading="true" :src="goods.mainImg" width="128rpx" height="128rpx"></u--image>
									<view class="text">
										<view class="name ellipsis-2">{{goods.goodsName}}</view>
										<view class="specification ellipsis-1">规格：{{goods.specification}}</view>
									</view>
								</view>
								<view class="right">
									<u-icon name="arrow-right" color="#999" size="24"></u-icon>
									<text class="price red">¥ <text class="price-num">{{goods.price}} </text></text>
									<view class="quantity red">x {{goods.quantity}}</view>
								</view>
							</view>
						</view>
						<view class="order-price red">合计金额: ¥ {{item.orderPrice}}</view>
						<view class="bottom u-flex u-row-between">
							<view class="left"></view>
							<view class="right u-flex">
								<view 
									class="btn"
									:class="btn.class"
									@click.stop="clickEven(btn.fun,item)"
									v-for="(btn,index) in statusBtn[item.status]" :key="index">
									{{btn.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{
			
		},
		data() {
			return {
				hasfetch:false,
				tabsCurrent:1,
				tabsList:[
					{name:'全部',status:'',},
					{name:'待付款',status:'0',},
					{name:'待发货',status:'1',},
					{name:'待收货',status:'2'},
					{name:'待评价',status:'3'},
					{name:'退款/售后',status:'7'}
				],
				status:'',
				dataList:[{status:0},{status:1},{status:2},{status:3},{status:4}],
				statusBtn:{
					0:[{name:'取消订单',fun:'cancelOrder',class:''},{name:'去支付',fun:'pay',class:'red'}],
					1:[{name:'申请退款',fun:'refund',class:'green'}],
					2:[{name:'查看物流',fun:'logistics',class:''},{name:'确认收货',fun:'confirmReceipt',class:'green'}],
					3:[{name:'查看物流',fun:'logistics',class:''},{name:'评价',fun:'evaluate',class:'green'}],
					// 4:[{name:'查看物流',fun:'logistics',class:''},{name:'评价',fun:'evaluate',class:'green'}],
					5:[{name:'查看退款',fun:'viewRefund',class:'green'}],
					// 6:[{name:'查看退款',fun:'viewRefund',class:'green'}],
					7:[{name:'查看退款',fun:'viewRefund',class:'green'}]
				}
			}
		},
		computed: {
		  orderListWithClass() {
		      return this.dataList.map(order => {
		        return {
		          ...order,
		          class: {
		            1: 'status-1',
		            2: 'status-2',
		            3: 'status-3',
		            4: 'status-4',
		            5: 'status-5',
		            6: 'status-6',
		            7: 'status-7',
		            8: 'status-8'
		          }[order.status] || ''
		        }
		      })
		    }
		},
		onLoad(page) {
			// console.log('page',page);
			const status = page.status;
			const index = this.tabsList.findIndex(item => item.status === status);
			this.tabsCurrent = index || 0;
		},
		onShow() {
			this.hasfetch&&this.reloadList()
		},
		methods: {
			leftClick(){
				// uni.$u.route('/center/center', {
				// 	type: 'reLaunch'
				// });
			},
			/*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				// 此处可以继续请求其他接口
				// if(page.num == 1){
				// 	// 请求其他接口...
				// }
			
				// 如果希望先请求其他接口,再触发upCallback,可参考以下写法
				// if(!this.hasTypeId){
				// 	this.shopNewsType();
				// 	return // 此处return,先获取xx
				// }
			
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条

				let params = {
					pageNum : page.num,
					pageSize :  page.size,
					status : this.tabsList[this.tabsCurrent].status,
					// status : this.tabsList[this.tabsCurrent].status,
				}
				// console.log('this.params',params);
				this.$u.api.orderList(params).then(data => {
					this.hasfetch = true;
					console.log('data',JSON.parse(JSON.stringify(data)));
					// 接口返回的当前页数据列表 (数组)
					let curPageData = data.data.rows;
					// console.log('curPageData',JSON.parse(JSON.stringify(curPageData)));
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length; 
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					// let totalPage =  data.data.data.totalPage; 
					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
					let totalSize = data.data.total; 
					// 接口返回的是否有下一页 (true/false)
					// let hasNext = data.xxx; 
					// console.log('totalPage',totalPage,'curPageLen',curPageLen);
					//设置列表数据
					if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList = this.dataList.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					// this.mescroll.endByPage(curPageLen, totalPage); 
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					this.mescroll.endBySize(curPageLen, totalSize); 
				}).catch(err => {
					this.mescroll.endErr()
					console.log(err)
				});	
			
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			},
			tabsClick(item){
				// this.status = item.status;
				this.tabsCurrent = item.index;
				this.reloadList()
				// console.log('item',item);
			},
			goOrderDetails(id){
				uni.$u.route('/shopping/orderdetails', {
					id: id
				});
			},
			pay(item){
				console.log('pay',item);
			},
			clickEven(fun,item){
				// console.log('fun',fun);
				let funObj = {
				  pay: this.pay,
				  logistics:this.logistics,
				  evaluate:this.evaluate,
				  refund:this.refund,
				  cancelOrder:this.cancelOrder,
				  viewRefund:this.viewRefund
				};
				// console.log('funObj[fun]',funObj[fun]);
				if (fun in funObj) {
				  funObj[fun](item);
				}
			},
			pay(item){
				console.log('pay',item);
				uni.$u.route('/shopping/pay', {
					orderId: item.id,
					// openid: that.vuex_wechatOpenid,
					payAmount:item.orderPrice
				});
			},
			logistics(item){
				// console.log('logistics',item);
				uni.$u.route('/shopping/distribution', {
					orderId: item.id
				});
			},
			evaluate(item){
				// console.log('logistics',item);
				uni.$u.route('/shopping/evaluate', {
					id: item.id
				});
			},
			refund(item){
				// console.log('logistics',item);
				uni.$u.route('/shopping/refund', {
					id: item.id
				});
			},
			cancelOrder(item){
				let that = this;
				// console.log('logistics',item);
				this.$u.api.cancelOrder({orderId:item.id}).then(res=>{
					this.$refs.uToast.show({
						message:res.msg,
						complete() {
							that.reloadList();
						}
					});
					// uni.$u.toast(res.msg);
					console.log('res',res.data);
				}).catch(err=>{
					console.log('cancelOrder',err);
				})
			},
			viewRefund(item){
				uni.$u.route('/shopping/viewRefund', {
					id: item.id
				});
			}
		}
	}
</script>
<style>
page{
	background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.tabs-wrap{
	background-color: #fff;
	margin-bottom: 10rpx;
}
.list-item{
	overflow: hidden;
	width: 48%;
	margin-bottom: 30rpx;
	background-color: #fff;
	.image-wrap{
		margin-bottom: 20rpx;
	}
}
.order-item{
	margin-bottom: 20rpx;
	background-color: #fff;
	padding: 30rpx 20rpx;
	border-radius: 8rpx;
	.top{
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		border-bottom: 0.5px solid #eee;
		.status{font-size: 24rpx;}
	}
	.center{
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 0.5px solid #eee;
		.goods{
			padding: 20rpx 0;
			&:not(:last-child){
				border-bottom: 0.5px solid #eee;
			}
		}
		.text{
			margin-left: 20rpx;
			.specification{
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				margin-top: 16rpx;
			}
		}
		.right{
			text-align: right;
			/deep/.u-icon{
				margin-bottom: 10rpx;
				justify-content: flex-end;
			}
		}
	}
	.order-price{
		text-align: right;
		margin-bottom: 20rpx;
		font-weight: 600;
	}
	.bottom{
		font-size: 24rpx;
		.left{color: #333;}
		.right{
			.btn{
				padding: 12rpx 20rpx;
				border: 1px solid #333;
				text-align: center;
				margin-left: 20rpx;
				border-radius: 28rpx;
				&.red{border-color: #FF3C3F;}
				&.green{color: #00A447;border-color: #00A447;}
			}
		}
	}
	&.status-0{.status{color:#FF3C3F;}}
	&.status-1{.status{color:#FF3C3F;}}
	&.status-2{.status{color:#0099EB;}}
	&.status-3{.status{color:#00A447;}}
	&.status-4{.status{color:#FF3C3F;}}
	&.status-5{.status{color:#FF3C3F;}}
	&.status-6{.status{color:#FF3C3F;}}
	&.status-7{.status{color:#FFB100;}}
}
</style>