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:18%;box-sizing:border-box;padding:20rpx 15rpx"
			@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) in orderListWithClass" class="order-item" 
						:class="item.class"
						@click="goOrderDetails(item)" :key="item.id">
						<view class="top u-flex u-row-between">
							<text>{{item.theatreName}}</text>
							<text>{{item.status|filterOrderState}}</text>
						</view>
						<view class="info u-flex u-col-top">
							<image class="img" :src="item.performImg"></image>
							<view class="text">
								<view class="name">{{item.performName}} - {{item.goodsName}}</view>
								<view class="time">{{item.performDate}} {{item.performTimeStart}}</view>
								<!-- <view class="position">{{item.performDate}}</view> -->
								<view class="statistics">
									<text>共{{item.viewerNum}}张</text>
									<text class="label">合计：</text>
									<text class="price">¥{{item.realPrice}}</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].filter(b => !b.condition || b.condition(item))" 
							    :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";
	// #ifdef H5
	import wxH5 from "weixin-jsapi";
	// #endif
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{
			tabbar
		},
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				goodsKey:1,
				hasfetch:false,
				tabsCurrent:1,
				tabsList:[
					{name:'全部',status:null,},
					{name:'待支付',status:'0',badge:{isDot:false,value:null}},
					{name:'待使用',status:'3',badge:{isDot:false,value:null}},
					{name:'已完成',status:'7',badge:{isDot:false,value:null}},
					{name:'已改签',status:'10',badge:{isDot:false,value:null}},
					{name:'售后',status:'4,5,6',badge:{isDot:false,value:null}}
				],
				status:'',
				dataList:[],
				statusBtn:{// 状态(0待支付，2超时取消，3支付完成，待使用，4退款中，5己退款，6退款失败，7己使用，8己超期 9关闭）
					0:[{name:'取消订单',fun:'cancelOrder',class:''},{name:'去支付',fun:'pay',class:'red'}],
					1:[],
					2:[],
					3:[{name:'改签',fun:'rebook',class:'',condition: (item) => item.allowReSubmit === 1},{name:'查看原订单',fun:'viewOldOrder',class:'',condition: (item) => !!item.orgOrderId},{name:'出示二维码',fun:'goOrderDetails',class:'red'}],
					//,{name:'评价',fun:'evaluate',class:'green'}
					4:[],
					5:[],
					6:[],
					// ,{name:'查看评价',fun:'viewEvaluate',class:'green'}
					7:[],
					8:[],
					9:[],
					10:[{name:'查看新订单',fun:'viewNewOrder',class:'red'}]
				},
				orderBadge:{
					noPayNum:0,
					deliverNum:0,
					collectNum:0,
					commentNum:0,
					refundNum:0,
				},
				templateIdList:[],//微信小程序订阅消息
			}
		},
		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;
			
			this.getTemplateIdList();//获取模板列表
			
		},
		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 = {
					source:1,
					pageNum : page.num,
					pageSize :  page.size,
					statusIn : this.tabsList[this.tabsCurrent]?.status||'',
					userid:this.vuex_member_info.id
					// 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(item){
				uni.$u.route('/center/orderdetails', {
					id: item.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,
				  goOrderDetails:this.goOrderDetails,
				  evaluate:this.evaluate,
				  refund:this.refund,
				  cancelOrder:this.cancelOrder,
				  viewRefund:this.viewRefund,
				  confirmReceipt:this.confirmReceipt,
				  viewEvaluate:this.viewEvaluate,
				  rebook:this.rebook,
				  viewNewOrder:this.viewNewOrder,
				  viewOldOrder:this.viewOldOrder,
				};
				// console.log('funObj[fun]',funObj[fun]);
				if (fun in funObj) {
				  funObj[fun](item);
				}
			},
			getTemplateIdList(){
				this.$u.api.templateIdList({templateLabel:'order_pay'}).then(res=>{
					console.log('getTemplateIdList',res.data);
					this.templateIdList = res.data.list.map(item=>{
						return item.templateId
					});
					// if(this.templateIdList.length>0){
					// 	this.templateEven();
					// }
				}).catch(err=>{
					console.log('getTemplateIdList',err);
				})
			},
			pay(item){
				console.log('pay',item);
				// #ifdef H5
				this.gotoPay(item.id);
				// #endif
				// #ifdef MP
				this.setTemplate(item.id);
				// #endif
				// uni.$u.route('/shopping/pay', {
				// 	orderId: item.id,
				// 	// openid: that.vuex_wechatOpenid,
				// 	payAmount:item.orderPrice
				// });
			},
			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('/center/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
				});
			},
			rebook(item){
				// console.log('rebook',item);
				uni.$u.route('pages/ticketlist',{performId:item.performId,orderId:item.id,fromPage:'rebook'})
			},
			viewOldOrder(item){
				console.log('viewOldOrder',item.orgOrderId);
				uni.$u.route('/center/orderdetails', {
					id: item.orgOrderId
				});
			},
			viewNewOrder(item){
				console.log('viewNewOrder',item.newOrderId);
				uni.$u.route('/center/orderdetails', {
					id: item.newOrderId
				});
			},
			// 设置小程序订阅消息
			setTemplate(orderId) {
				let that = this;
				console.log('templateIdList',this.templateIdList);
				uni.requestSubscribeMessage({  
					tmplIds: that.templateIdList,  
					success (res) {  
						// that.gotoPay();
						console.log("success:",res);  
					},  
					fail (res) {  
						console.log("fail:",res);  
					},  
					complete (res) {  
						that.gotoPay(orderId);
						console.log("complete:",res);  
					}  
				})  
			},
			gotoPay(orderId){
				this.$u.api.gotoPay({orderId:orderId,openid:''}).then(res=>{
					this.payResult = res.data.payInfo;
					this.payResult.package = res.data.payInfo.packageValue;
					// #ifdef H5
					this.initConfig(this.payResult)
					// #endif 
					// #ifdef MP
					this.wxPay()
					// #endif
					// if(this.params.paymentMode==1||this.params.paymentMode==4){
					// 	this.wxPay()
					// }else{
					// 	uni.$u.route('/shopping/paysuccess');
					// }
					console.log('gotoPayres',res.data);
				}).catch(err=>{
					this.paypass = '';
					this.checkPassShow = false;
					console.log('gotoPay',err);
				})				
			},
			wxPay(){
				let that = this;
				uni.requestPayment({
					... this.payResult,
				    "provider": "wxpay", 
				    "orderInfo": {
				        // "appid": "wx499********7c70e",  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
				        // "noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
				        // "package": "Sign=WXPay",        // 固定值
				        // "partnerid": "148*****52",      // 微信支付商户号
				        // "prepayid": "wx202254********************fbe90000", // 统一下单订单号 
				        // "timestamp": 1597935292,        // 时间戳（单位：秒）
				        // "sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
				    },
				    success(res) {
						setTimeout(()=>{
							this.tabsCurrent = 2;
							this.reloadList();
						},1500)
						// that.payQuery();
					},
				    fail(e) {
						console.log('wxPayfail',e);
					}
				})				
			},
			payQuery(){
				let that = this;
				let retryCount = 0;
				let maxRetryCount = 5; // 设置最大重试次数
				let interval = 2000; // 设置间隔时间为2秒
				let timeout = 10000; // 设置超时时间为10秒
				let timer;
				uni.showLoading({
					title:'支付结果查询中'
				})
				timer = setInterval(() => {
					retryCount++;
					if (retryCount > maxRetryCount || retryCount * interval > timeout) {
						clearInterval(timer);
						  uni.hideLoading();
						console.log("支付查询超时或达到最大重试次数");
						// 在这里添加超时或达到最大重试次数的处理逻辑
						this.reloadList()
					} else {
						console.log("第" + retryCount + "次查询");
						// 调用查询支付状态的方法
						// 如果支付状态为成功，则清除定时器并处理成功的逻辑
						// 如果支付状态为失败，则清除定时器并处理失败的逻辑
						this.$u.api.payQuery({orderId:this.orderId}).then(res=>{
							// 0-未支付 1-已支付 2-支付中 3-支付失败 4-支付退款
							let payStatus = res.data.payStatus;
							if(payStatus===1){
								uni.$u.route('/center/paysuccess');
							}else if(payStatus===0||payStatus===2){
								this.payQuery()
							}else if(payStatus===3){
								uni.toast('支付失败')
							}
							clearInterval(timer);
						}).catch(err=>{
							console.log('payQuery',err);
						}).finally(()=>{
							uni.hideLoading()
						})
					}
				}, interval);
			},
			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);
				})
			},
			/**
			 * 公众号微信支付
			 */
			initConfig() {
				// #ifdef H5
				let that = this
				wxH5.config({
					debug: false, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false, 
					appId: that.payResult.appId, // 必填，公众号的唯一标识 
					timestamp: that.payResult.timeStamp, // 必填，生成签名的时间戳     
					nonceStr: that.payResult.nonceStr, // 必填，生成签名的随机串 
					signature: that.payResult.paySign, // 必填，签名 
					jsApiList: ['chooseWXPay', 'checkJsApi'] // 必填，需要使用的JS接口列表 
				})
				wxH5.ready(() => {
					wxH5.chooseWXPay({
						timestamp: that.payResult.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符     
						nonceStr: that.payResult.nonceStr, // 支付签名随机串，不长于 32 位         
						package: that.payResult.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）     
						signType: 'SHA1', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'     
						paySign: that.payResult.paySign, // 支付签名     
						success: () => {
							setTimeout(()=>{
								that.tabsCurrent = 2;
								that.reloadList();
							},1500)
							// that.payQuery();
						},
						fail: (e) => {
							uni.$u.route('/center/order', {
								status: 0
							});
							console.log('wxPayfail', e);
						},
						cancel: () => {
							uni.$u.route('/center/order', {
								status: 0
							});
							that.cansubmit = true;
						}
					})
				})
				// #endif
			}
		}
	}
</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;
	content-visibility: auto;
	contain-intrinsic-size: 346rpx;
	.top{
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		line-height: 36rpx;
		margin-bottom: 36rpx;
	}
	.info{
		margin-bottom: 30rpx;
		.img{
			width: 180rpx;
			height: 160rpx;
			border-radius: 12rpx;
		}
		.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>