great_mobileui/center/order.vue

<template>
	<view class="pages">
		<u-navbar
			title="我的订单"
			:placeholder="true"
			:autoBack="false"
			 @leftClick="leftClick"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="tabs-wrap">
			<u-tabs 
			:list="tabsList" 
			lineColor="#EE0D0D" 
			:current="tabsCurrent"
			:activeStyle="{color:'#EE0D0D','font-weight': '600','font-size':'30rpx'}"
			:inactiveStyle="{color:'#7F7F7F'}"
			itemStyle="width:20%;box-sizing:border-box;padding:24rpx"
			@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>遵义《伟大转折》演艺中心</text>
							<text>待支付</text>
						</view>
						<view class="info u-flex u-col-top">
							<image class="img" :src="item.showImg||staticUrl+'/img/newsdetails-banner.png'"></image>
							<view class="text">
								<view class="name">《伟大转折》-【成人票】</view>
								<view class="time">2023-11–03 14:00-16:00</view>
								<view class="position">5排6座</view>
								<view class="statistics">
									<text>共1张</text>
									<text class="label">合计：</text>
									<text class="price">¥120.00</text>
								</view>
							</view>
						</view>
						<view class="btn-wrap u-flex u-row-right">
							<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>
			</mescroll-body>
		</view>
		<u-toast ref="uToast"></u-toast>
		<tabbar :tabbarIndexProps="1" />
	</view>
</template>

<script>
	import tabbar from "../components/tabbar.vue";
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{
			tabbar
		},
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				goodsKey:1,
				hasfetch:false,
				tabsCurrent:1,
				tabsList:[
					{name:'全部',status:'',},
					{name:'待支付',status:'0',badge:{isDot:false,value:null}},
					{name:'待使用',status:'1',badge:{isDot:false,value:null}},
					{name:'已完成',status:'2',badge:{isDot:false,value:null}},
					{name:'售后',status:'3',badge:{isDot:false,value:null}}
				],
				status:'',
				dataList:[{id:1,status:2}],
				statusBtn:{
					0:[{name:'取消订单',fun:'cancelOrder',class:''},{name:'去支付',fun:'pay',class:'red'}],
					1:[{name:'申请退款',fun:'refund',class:''}],
					2:[{name:'取消订单',fun:'cancelOrder',class:''},{name:'去支付',fun:'pay',class:'red solid'}],
					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:'logistics',class:''}],
					// ,{name:'查看评价',fun:'viewEvaluate',class:'green'}
					7:[{name:'查看退款',fun:'viewRefund',class:'green'}]
				},
				orderBadge:{
					noPayNum:0,
					deliverNum:0,
					collectNum:0,
					commentNum:0,
					refundNum:0,
				},
			}
		},
		computed: {
		  orderListWithClass() {
		      return this.dataList.map(order => {
				  // let spliceData = order.detailList.splice(0,2);
				  
				  // let moreData = order.detailList.splice(2,order.detailList.length);
				  // let moreData = order.detailList.slice(2);
				  // if(order.detailList.length>2){
					 //  moreData =  order.detailList;
				  // }
		        return {
		          ...order,
				  // spliceData:spliceData,
				  // moreData:moreData,
				  // showMore:false,
		          class: {
					0: 'status-0',
		            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?index:0;
			
		},
		onShow() {
			setTimeout(()=>{
				this.hasfetch&&this.reloadList()
			},500);
			this.statisticsOrder();
		},
		methods: {
			leftClick(){
				uni.reLaunch({url: '/center/center'});
			},
			/*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.statisticsOrder();
				// 此处可以继续请求其他接口
				// 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('/center/orderdetails', {
					id: id
				});
			},
			toggleMore(item,index){
				// console.log('toggleMore',item);
				this.orderListWithClass[index].showMore = !this.orderListWithClass[index].showMore
				this.goodsKey++;
			},
			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,
				  confirmReceipt:this.confirmReceipt,
				  viewEvaluate:this.viewEvaluate
				};
				// 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
				});
			},
			comment(orderId,orderDetailId,goodsId){
				uni.$u.route('/shopping/addcomment', {
					orderId,
					orderDetailId,
					goodsId
				});
			},
			viewComment(orderDetailId,goodsId,goods){
				uni.$u.route('/shopping/viewcomment', {
					orderDetailId,
					goodsId,
					goods:JSON.stringify(goods)
				});
			},
			refund(item){
				// console.log('logistics',item);
				uni.$u.route('/shopping/refund', {
					id: item.id
				});
			},
			cancelOrder(item){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确认取消吗！',
				    success: res => {
				        if (res.confirm) {
				            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);
				            })
				        }
				    }
				});
				// console.log('logistics',item);
				
			},
			viewRefund(item){
				uni.$u.route('/shopping/viewRefund', {
					orderId: item.id
				});
			},
			confirmReceipt(item){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确认收货吗！',
				    success: res => {
				        if (res.confirm) {
				            this.$u.api.confirmReceipt({orderId:item.id}).then(res=>{
								uni.showToast({
									title:res.msg,
									duration:2000,
									complete() {
										that.reloadList();
									}
								});
				            	console.log('res',res.data);
				            }).catch(err=>{
				            	console.log('confirmReceipt',err);
				            })
				        }
				    }
				})
			},
			viewEvaluate(item){
				uni.$u.route('/shopping/orderdetails', {
					id: item.id
				});
			},
			statisticsOrder(){
				this.$u.api.statisticsOrder().then(res=>{
					let data = res.data || {};
					this.orderBadge = Object.assign(this.orderBadge,data);
					let {noPayNum,deliverNum,collectNum,commentNum,refundNum} = res.data;
					let noPayNumindex = this.tabsList.findIndex(item => item.status == 0);

						this.tabsList[1].badge.isDot = false;
						this.tabsList[1].badge.value = noPayNum;


						this.tabsList[2].badge.isDot = false;
						this.tabsList[2].badge.value = deliverNum;


						this.tabsList[3].badge.isDot = false;
						this.tabsList[3].badge.value = collectNum;


						this.tabsList[4].badge.isDot = false;
						this.tabsList[4].badge.value = commentNum;


						this.tabsList[5].badge.isDot = false;
						this.tabsList[5].badge.value = refundNum;

					// console.log('statisticsOrder',res.data);
					// console.log('this.orderBadge',this.orderBadge);
					}).catch(err=>{
					console.log('memberInfo',err.data);
				})
			}
		}
	}
</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: #FFFFFF;
	box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221,221,221,0.5);
	border-radius: 20rpx;
	padding: 32rpx;
	.top{
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		line-height: 36rpx;
		margin-bottom: 36rpx;
	}
	.info{
		margin-bottom: 30rpx;
		.img{
			width: 180rpx;
			height: 160rpx;
		}
		.text{
			font-size: 24rpx;
			font-weight: 400;
			color: #7F7F7F;
			padding-left: 26rpx;
			flex: 1;
			.name{
				font-size: 28rpx;
				font-weight: bold;
				color: #363636;
				margin-bottom: 20rpx;
			}
			.time{
				margin-bottom: 20rpx;
			}
			.position{
				margin-bottom: 20rpx;
			}
			.statistics{
				text-align: right;
			}
			.label{
				font-size: 24rpx;
				font-weight: 400;
				color: #363636;
				margin-left: 10rpx;
			}
			.price{
				font-size: 32rpx;
				font-weight: bold;
				color: #ED0000;
			}
		}
	}
	.btn-wrap{
		
	}
	.btn{
		padding: 12rpx 40rpx;
		border: 1px solid #E5E5E5;
		color: #7F7F7F;
		text-align: center;
		border-radius: 8rpx;
		font-size: 24rpx;
		&.red{border-color: #ED0000;color: #ED0000;}
		&.red.solid{border-color: #ED0000;background-color:#ED0000;color: #fff;}
		&.green{color: #00A447;border-color: #00A447;}
		&:not(:first-child){
			margin-left: 20rpx;
		}
	}
	&.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>