perry-mall/pagesA/myOrder/myOrder.vue

<template>
	<view class="pad-x20">
		<!-- 状态栏 -->
		<status-nav :navBarTitle="'我的订单'"></status-nav>
		<view :style="{paddingTop: statusBarHeight +'px'}">
			<!-- 导航栏 -->
			<view style="position: sticky;z-index: 10;" :style="{ top: statusBarHeight +'px'}">
				<swiper-tab id="tab" :list="navList" v-model="current" @input="clickTab" itemColor="#000000" lineColor="#000000"></swiper-tab>
			</view>
			<swiper :style="{ height: swiperHeight - statusBarHeight +'px'}" class="pad-zy30 fon30" :current="current" @change="swiperChange">
				<swiper-item v-for="(item,index) in navList.length" :key="index">
					<scroll-view scroll-y @scrolltolower="scrollBottomEv" style="height: 100%;">
						<!-- 列表数据 -->
						<view class="radius20 mar-s20 bacf6" v-for="(item1,index1) in orderList[index]" :key="index1">
							<view @tap="goDetail(item1.id)" class="disjbac col0 fon30 pad30" style="border-bottom: 1rpx solid #d3d3d3;">
								<view>订单号：{{item1.coding}}</view>
								<view class="" :style="{color: ['','#f83030','#f83030','#61cf00','#8c8c9b','#8c8c9b'][item1.status]}">{{['','待付款','待发货','待收货','已完成','已取消'][item1.status]}}</view>
							</view>
							<view v-for="(item2,index2) in item1.skuList" :key="index2" class="fon26 col3 disjbac pad-sx50 mar-zy30 disjbac borbot posir">
								<image @tap="goDetail(item1.id)" :src="item2.sku_cover" class="flexs mar-y20 radius30" style="width: 224rpx;height: 224rpx;" mode="aspectFill"></image>
								<view @tap="goDetail(item1.id)" class="width100 disjb fc" style="height: 224rpx;">
									<view class="fon28 col3 bold clips2 line-h50">{{item2.spu_name}}</view>
									<view class="disac fw">
										<view class="order-sy mar-y40" v-for="(item3,index3) in item2.spec_info" :key="index3">{{item3}}</view>
									</view>
									<view class="colpeili disjbac"><span class="order-price">￥{{item2.price}}</span><span class="fon24">x{{item2.num}}</span></view>
								</view>
							</view>
							<view class="colpeili pad30 disjbac" style="border-top: 1rpx solid #d3d3d3;">
								<view class="order-price">合计：{{item1.totalPrice}}</view> 
								<view class="disjbac">
									<!-- 取消订单 -->
									<view @tap="transferFrame(index1)" v-if="item1.status==1 || item1.status==2" class="order-btn">取消订单</view>
									<!-- 立即支付 -->
									<view @tap="payMentEv(item1.coding)" v-if="item1.status==1" class="order-btn" style="background-color: #f83030;color: #FFFFFF;">立即支付</view>
									<!-- 确认收获 -->
									<view @tap="confirmReceipt(item1.id)" v-if="item1.status==3" class="order-btn" style="background-color: #000000;color: #FFFFFF;">确认收货</view>
									<!-- 再次购买 -->
									<view @tap="againBuy(index1)" v-if="item1.status==4 || item1.status==5" class="order-btn">再次购买</view>
								</view>
							</view>
						</view>
						<!-- 暂无更多数据 -->
						<pitera v-if="total==orderList[current].length"></pitera>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 取消订单弹框 -->
		<view v-if="isCancle" @tap.stop="isCancle=false" class="posAll">
			<view class="bacf posixzy order-cancle-tk" @tap.stop="isCancle=true">
				<view>
					<view class="bbot pad-sx20 posir">
						<view class="fon28 bold col3 width100" style="text-align: center;">取消订单</view>
						<image class="posia order-close-btn" @tap.stop="isCancle=false" src="/static/public/cha-close.png" mode="aspectFill"></image>
					</view>
					<view class="pad-zy32 pad-sx20 col5b">
						<view class="fon24 linh40">
							<view>温馨提示：</view>
							<view>订单取消需要提交工作人员审核，商品金额将原路径返还账户，订单一旦取消，系统无法恢复。</view>
						</view>
						<view @tap.stop="chooseReason(indexy)" v-for="(itemy,indexy) in reasonList" :key="indexy" class="disac mar-s40">
							<image v-if="itemy.isActive" src="/static/public/chooseFS.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
							<image v-else src="/static/public/cancle-FS.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
							<view class="mar-z20 fon28">{{itemy.title}}</view>
						</view>
						<!-- 确认取消按钮 -->
						<view @tap.stop="confirmEv" class="confirm-btn">确认取消</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components:{
			pitera
		},
		data() {
			return {
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 50,
				swiperHeight:uni.getSystemInfoSync().windowHeight,
				publicColor:uni.getStorageSync('publicColor'),//主题颜色
				chuTop:'',//导航高度
				navList:[{title:'全部'},{title:'待付款'},{title:'待发货'},{title:'待收货'},{title:'已完成'},{title:'已取消'}],
				// 取消订单原因
				reasonList:[
					{title:'不想要了/买多了/买错了',isActive:true},
					{title:'地址信息填写错误',isActive:false},
					{title:'其他原因',isActive:false},
				],
				isCancle:false,//是否取消订单
				orderList:[[],[],[],[],[],[]],
				zanList:[],//暂存列表数据
				page:1,
				size:200,
				total:'',//总数
				isZanw:true,
				tag:'',//默认全部 waiting=待付款 paid=已付款待发货 shipped=已发货 completed=已完成 check=待核验
				current:0,//选中的订单
				remarks:'',//原因
				times:0,//点击次数
				timer:null,
				zanArr:[],
				timeList:[],
				orderInfo:{},
				checkGrounpId:0,
				orderCoding:''//选中的订单编号
			}
		},
		onShareAppMessage(res) {
			var shareObj = {
		　　　　	title: ``, // 默认是小程序的名称(可以写slogan等)
		　　　　	path: ``, // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　	imageUrl: ''//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		　	};
		　　return shareObj;
		},
		onReady() {
			// 获取ID为tab元素的信息
			uni.createSelectorQuery().in(this).select('#tab').boundingClientRect().exec(rect => {
				this.swiperHeight = this.swiperHeight - rect[0].height
			});
		},
		onUnload() {
			uni.removeStorageSync('isorderDetail')
		},
		onShow() {
			if(uni.getStorageSync('isorderDetail')==1){
				// 调用查询事件
				this.checkList();
			}
		},
		onLoad(options) {
			options.index==undefined ? this.current = 0 : this.current = options.index;
			if(uni.getStorageSync('phone_active')){
				this.$toolAll.tools.clearShare();
				if(this.current==0){
					// 调用查询事件
					this.checkList();
				}
			} else {
				uni.setStorageSync('outside',2);
				uni.setStorageSync('existCode',options.invite_code);
				uni.setStorageSync('transientUrl',`/pagesA/myOrder/myOrder?index=0`);
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		},
		methods: {
			// 触底事件
			scrollBottomEv(){
				if(this.total!=this.orderList[this.current].length){
					this.page++
					this.checkList();
				}
			},
			// 状态判断事件
			statejubEv(){
				if(this.current == 0) this.tag = "";
				if(this.current == 1) this.tag = "waiting";
				if(this.current == 2) this.tag = "paid";
				if(this.current == 3) this.tag = "shipped";
				if(this.current == 4) this.tag = "completed";
				if(this.current == 5) this.tag = "closed";
				// 调用查询我的订单列表事件
				this.checkList();
			},
			// tab点击事件
			clickTab(index){
				this.current = index;
				this.statejubEv();
			},
			// 列表滑动事件
			swiperChange(e){
				this.current = e.detail.current;
				this.statejubEv();
			},
			checkList(){//查询我的订单列表事件
				this.$requst.post('/api/user/order',{page:this.page,size:this.size,tag:this.tag}).then(res=>{
					if(res.code==0){
						if(this.page==1) this.orderList[this.current] = [];
						// 设置总数
						this.total = res.data.total;
						if(res.data.list.length!=0){
							res.data.list.forEach(item=>{
								let statusNum = 0;
								if(item.status=="waiting") statusNum = 1;
								if(item.status=="paid") statusNum = 2;
								if(item.status=="shipped") statusNum = 3;
								if(item.status=="completed") statusNum = 4;
								if(item.status=="closed") statusNum = 5;
								let obj = {
									id:item.id,
									skuList:item.skus,
									totalPrice:item.price,
									status:statusNum,
									coding:item.coding
								}
								this.orderList[this.current].push(obj);
							})
						}
					} else this.$toolAll.tools.showToast(res.msg);
				}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
			},
			payMentEv(coding){//付款
				if(this.times==0){
					this.times++;
					this.$requst.post('/api/order/pay',{order_coding:coding}).then(res=>{
						if(res.code==0){
							uni.requestPayment({
								provider: 'wxpay',
								appId:res.data.payment_params.appId,//appId
								timeStamp: res.data.payment_params.timeStamp,//时间戳
								nonceStr: res.data.payment_params.nonceStr,//随机字符串
								package: res.data.payment_params.package,//package
								signType: res.data.payment_params.signType,//MD5
								paySign: res.data.payment_params.sign,//签名
								success:(res)=> {
									this.$requst.post('/api/order/paid',{order_coding:this.orderList[this.current][index].coding}).then(res=>{
										if(res.code==0){
											this.$toolAll.tools.showToast('付款成功');
											// 调用查询列表事件
											this.implementListEv();
										} else this.$toolAll.tools.showToast(res.msg);
										
									}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
								},
								fail:()=> {
									this.$toolAll.tools.showToast('取消支付');
									// 调用查询列表事件
									this.implementListEv();
								}
							});
						}
					})
				}
			},
			transferFrame(index){//调起取消原因弹框
				this.isCancle = true;
				this.orderCoding = this.orderList[this.current][index].coding;
				this.reasonList.forEach(item=>{
					item.isActive = false;
				})
				this.reasonList[0].isActive = true;
			},
			chooseReason(index){//取消订单原因选择事件
				this.reasonList.forEach(item=>item.isActive = false);
				this.reasonList[index].isActive = true;
				this.remarks = this.reasonList[index].title;
			},
			confirmEv(){//确认取消订单事件
				if(this.times==0){
					this.times++;
					this.$toolAll.tools.showToast('正在取消...');
					this.$requst.post('/api/order/cancel',{order_coding:this.orderCoding,remarks:this.remarks}).then(res=>{
						if(res.code==0){
							this.isCancle = false;
							this.$toolAll.tools.showToast('取消成功');
							// 调用查询列表事件
							this.implementListEv();
						} else this.$toolAll.tools.showToast(res.msg);
					}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
				}
			},
			confirmReceipt(id){//确认收货事件
				this.$requst.post('/api/order/accepted',{order_id:id}).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('收货成功');
						// 调用查询列表事件
						this.implementListEv();
					} else this.$toolAll.tools.showToast(res.msg);
				}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
			},
			goDetail(id){//去订单详情
				uni.navigateTo({
					url:`/pagesB/orderDetail/orderDetail?id=${id}`
				})
			},
			// 执行查询列表事件
			implementListEv(){
				setTimeout(()=>{
					this.times = 0;
					this.page = 1;
					this.checkList();
				},2000)
			},
			// 再次购买事件
			againBuy(index){
				let newList = [];
				this.orderList[this.current][index].skuList.forEach(item=>{
					let obj = {
						id:item.spu_id,//商品id
						imgSrc:item.spu_cover,//商品图片
						coding:item.coding,//商品coding
						price:item.price,//商品价格
						num:item.num,//商品数量
						title:item.spu_name,//商品名称
					}
					newList.push(obj);
				})
				uni.setStorageSync('orderList',newList);
				uni.navigateTo({url:'/pagesA/getReadyDan/getReadyDan'});
			},
		}
	}
</script>

<style>
	.activeD::after{
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 8rpx;
		background: #3875F6;
		width: 100%;
	}
	
	.order-price{color: #f83030;}
	
</style>