hengmei-two/pagesA/myOrder/myOrder.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'订单管理'" :statusTitle="true"></status-nav>
		<!-- 自定义二级分类 -->
		<view class="isTopf bacf pad-zy30" :style="{top:statusHeight+'px'}">
			<scroll-view scroll-x>
				<view id="daoh" class="disjbac pad-s20">
					<view @tap="chooseNav(indexn)" class="posir pad-s20 pad-zy20 pad-x30 flexs mar-y10" style="text-align: center;" :class="activeIndex==indexn?'activeD':''" :style="{color:activeIndex==indexn?'#3875F6':'#000000'}" v-for="(itemn,indexn) in statusList" :key="indexn">{{itemn}}</view>
				</view>
			</scroll-view>
		</view>
		<view :style="{paddingTop:(statusHeight+12+chuTop)+'px'}" class="pad-sx20 pad-zy32 pad-x180">
			<view v-if="orderList.length!=0" v-for="(item,index) in orderList" :key="index" class="radius20 bacf pad20 mar-x20 order-item-box">
				<view @tap="goDetail(item.id)" class="bbot disjbac pad-x20 mar-x20"><view class="fon28 col3 bold">{{item.isShop==0?'商城订单':'积分商城订单'}}</view>
					<view v-if="item.is_only==0 && item.open_one==1 && item.is_group_make==1 && item.open_one_success==0" class="fon24 col9">{{item.group_make_end_at}}</view>
					<view v-else class="fon24 col9">{{item.establish}}</view>
				</view>
				<view @tap="goDetail(item.id)" class="disjbac fon24">
					<view class="col3">订单号：{{item.orderNum}}</view>
					<view v-if="item.virtual_check==0" class="bold" :class="(item.orderStatus==1 || item.orderStatus==2 || item.orderStatus==3) ? 'colf8':'col9'">{{item.status_text}}</view>
					<view v-if="item.virtual_check==1" class="bold col9">{{item.status_text}}</view>
				</view>
				<view v-for="(itemc,indexc) in item.childrenList" :key="indexc" class="fon26 col3 disjbac pad-sx50 disjbac bbot posir" :style="{paddingBottom:itemc.is_virtual!=0?'70rpx':'50rpx'}">
					<image lazy-load @tap="goDetail(item.id)" :src="itemc.imgSrc" class="flexs" mode="aspectFill"></image>
					<view @tap="goDetail(item.id)" class="width100 disjb fc" style="height: 166rpx;">
						<view>
							<view class="fon28 col3 bold clips2">{{itemc.title}}</view>
							<view class="order-sy">{{itemc.sku_name}}</view>
						</view>
						<view class="disjbac mar-s10">
							<view class="colf8 fon32 bold"><span v-if="item.isShop==0">￥</span><span v-else>积分：</span>{{itemc.price}}<span class="fon28 col6 mar-z20 font4">x{{itemc.num}}</span></view>
							<view @tap.stop="make(index,indexc)" v-if="itemc.is_virtual!=0 && itemc.check_type=='frontend' && itemc.not_check_num!=0 && item.orderStatus!=1" class="order-btn">线下核销</view>
							<view v-if="itemc.is_virtual!=0 && itemc.check_type!='frontend'" class="order-btn" style="background-color: #CCCCCC;">线上核销</view>
						</view>
					</view>
					<view v-if="itemc.is_virtual!=0 && itemc.not_check_num!=0" class="mar-s10 posia col6" style="bottom: 20rpx; right: 0rpx;">待核验 x{{itemc.not_check_num}}</view>
				</view>
				<!-- <view class="fon28 col3 pad-s20 disjbac">
					<view class="flexs"><span v-if="item.isShop==0">合计：<span v-if="item.is_only!=1">{{item.total}}</span><span v-if="item.is_only==1">{{item.total}}</span> +<span v-if="item.coin!=0">{{item.coin}}孔雀币</span></span><span v-else>合计积分：{{item.total}}</span></view> 
					<view class="width100 disac" style="justify-content: flex-end;">
						<view @tap="transferFrame(index)" v-if="item.orderStatus != 0 && item.orderStatus != 5" class="order-cancle">取消订单</view>
						<view @tap="payMentEv(index)" v-if="item.orderStatus == 1" class="order-btn">付款</view>
						<view @tap="isHeyan=true" v-if="item.orderStatus == 3" class="order-btn">线下核销</view>
						<view class="order-btn">单人拼团</view>
						<view @tap="confirmReceipt(item.id)" v-if="item.orderStatus == 4" class="order-btn">确认收货</view>
					</view>
				</view> -->
				<view class="fon28 col3">
					<view class="mar-sx20 disjbac">
						<view>
							<view class="" v-if="1===2">
								<!-- <view v-if="item.is_only==0 && item.open_one==1 && item.is_group_make==1 && item.open_one_success==0" class="posir disjcac flexs" style="color: #010101;font-size: 24rpx;"> -->
								<view v-if="item.is_only==0 && item.group.surplus > 0 && item.status_text=='待拼成'" class="posir disjcac flexs" style="color: #010101;font-size: 24rpx;">
									<image src="../../static/public/weix.png" mode="" class="flexs" style="width: 50rpx;height: 50rpx;"></image>
									邀请拼单
									<button open-type="share" 
										:data-title="item.childrenList[0].title"
										:data-is_activity="item.childrenList[0].is_activity"
										:data-imgsrc="item.childrenList[0].imgSrc"
										:data-id="item.childrenList[0].spu_activity_id || item.childrenList[0].sku_id"
										class="posia-op">邀请拼单</button>
								</view>
							</view>
						</view>
						<view>
							<span v-if="item.isShop==0">合计：<span v-if="item.is_only!=1">{{item.total}}</span><span v-if="item.is_only==1">{{item.total}}</span> <span v-if="item.coin!=0">+{{item.coin}}孔雀币</span></span><span v-else>合计积分：{{item.total}}</span>
						</view>
					</view> 
					<view class="disjbac" v-if="item.group">
						<view class="width100 disje">
							<view class="" v-if="item.group">
								<view v-if="item.group.surplus > 0 && item.status_text=='待拼成'">
									<view @tap="comeing(item.orderNum)" v-if="item.is_only==0 && item.open_one==1 && item.is_group_make==1 && item.open_one_success==0" class="order-btn mar-y20">直接免拼</view>
								</view>
							</view>
							<view @tap="transferFrame(index)" v-if="item.orderStatus != 0 && item.orderStatus != 5 && item.virtual_check==0 && item.orderStatus!=5" class="order-cancle">取消订单</view>
							<view @tap="payMentEv(index)" v-if="item.orderStatus == 1" class="order-btn">付款</view>
							<!-- <view class="order-btn" v-if="item.is_only==1">单人拼团</view> -->
							<view v-if="item.group.surplus > 0 && item.status_text=='待拼成'" class="order-btn" style="background-color: #38CE51;position: relative;">
								邀请拼单
								<button open-type="share"
									:data-title="item.childrenList[0].title"
									:data-is_activity="item.childrenList[0].is_activity"
									:data-imgsrc="item.childrenList[0].imgSrc"
									:data-id="item.childrenList[0].spu_activity_id || item.childrenList[0].sku_id"
									class="posia-op">邀请拼单</button>
							</view>
							<view @tap="confirmReceipt(item.id)" v-if="item.orderStatus == 4 && item.group.surplus == 0" class="order-btn">确认收货</view>
						</view>
					</view>
					<view class="disjbac" v-else>
						<view class="width100 disje">
							<view class="" v-if="item.group">
								<view v-if="item.group.surplus > 0">
									<view @tap="comeing(item.orderNum)" v-if="item.is_only==0 && item.open_one==1 && item.is_group_make==1 && item.open_one_success==0" class="order-btn mar-y20">直接免拼</view>
								</view>
							</view>
							<view @tap="transferFrame(index)" v-if="item.orderStatus != 0 && item.orderStatus != 5 && item.virtual_check==0 && item.orderStatus!=5" class="order-cancle">取消订单</view>
							<view @tap="payMentEv(index)" v-if="item.orderStatus == 1" class="order-btn">付款</view>
							<!-- <view class="order-btn" v-if="item.is_only==1">单人拼团</view> -->
							<view @tap="confirmReceipt(item.id)" v-if="item.orderStatus == 4" class="order-btn">确认收货</view>
						</view>
					</view>
					
				</view>
			</view>
			<nothing-page v-if="orderList.length==0" :content="`暂无更多订单列表`"></nothing-page>
		</view>
		<!-- 待核验弹框 -->
		<view v-if="isHeyan" @tap="isHeyan=false" class="disjcac tc posAll" style="z-index: 3;" catchtouchmove="return">
			<view class="bacf width100 radius20 pad30 posir" style="margin: 0 128rpx;" @tap.stop="isHeyan=true">
				<view class="fon28 col3">订单二维码</view>
				<view class="mar-sx30">
					<yz-qr ref="qrPath" :text="text" :size="qsize" :colorDark="colorDark" :colorLight="colorLight"></yz-qr>
					<!-- <image src="/static/public/member-head.png" class="order-hx-img" mode="aspectFill"></image> -->
				</view>
				<view class="fon24 col3">
					<view class=" mar-s40 mar-x20">工作人员扫码核销订单</view>
					<view>订单未完成前请勿出示二维码</view> 
				</view>
				<image @tap.stop="closeEv" src="/static/public/closequan.png" class="posia heyan-close" mode=""></image>
			</view>
		</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>
		<!-- 底部tab -->
		<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='-1'></foot-tab>
	</view>
</template>

<script>
	import yzQr from '@/components/yz-qr/yz-qr.vue';
	export default {
		components:{
			yzQr
		},
		data() {
			return {
				chuTop:'',//导航高度
				activeIndex:'',
				statusList:['全部','待付款','待发货','待核验','待收货','已完成'],
				// 取消订单原因
				reasonList:[
					{title:'不想要了/买多了/买错了',isActive:true},
					{title:'地址信息填写错误',isActive:false},
					{title:'其他原因',isActive:false},
				],
				isHeyan:false,//是否线下审核
				isCancle:false,//是否取消订单
				orderList:[],
				zanList:[],//暂存列表数据
				page:1,
				size:10,
				total:'',//总数
				isZanw:true,
				tag:'',//默认全部 waiting=待付款 paid=已付款待发货 shipped=已发货 completed=已完成 check=待核验
				current:0,//选中的订单
				remarks:'',//原因
				times:0,//点击次数
				canvasQrPath: '',
				text: '',
				qsize: 162,
				colorDark: '#000000',
				colorLight: '#ffffff',
				timer:null,
				zanArr:[],
				timeList:[],
				orderInfo:{},
				checkGrounpId:0,
			}
		},
		computed: {
			// 底部标题
			titleList() {
				return this.$store.state.titleList 
			},
			// 底部图标
			imgList() {
				return this.$store.state.imgList
			},
			statusHeight() {
				return this.$store.state.statusHeight
			}
		},
		onShareAppMessage(res) {
			var shareObj = {
		　　　　	title: res.target.dataset.title, // 默认是小程序的名称(可以写slogan等)
		　　　　	path: `/pagesB/shopDetail/shopDetail?id=${res.target.dataset.id}&category_id=0&is_activity=${res.target.dataset.is_activity}&share_id=${uni.getStorageSync('userId')}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　	imageUrl: res.target.dataset.imgsrc//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		　	};
		　　return shareObj;
		// 　　return false;
		},
		onReachBottom() {
			if(this.total!=this.orderList.length){
				this.page++
				this.checkList(this.activeIndex)//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多记录','none',1000)
				this.isZanw = false
			}
		},
		onUnload() {
			this.closeEv();
		},
		onShow() {
			// 禁用小程序分享
			this.$toolAll.tools.disableShareEv();
			this.checkZT(this.activeIndex);
			this.checkList(this.activeIndex);
		},
		onLoad(options) {
			options.index==undefined ? this.activeIndex = 0 : this.activeIndex = options.index;
			const query = wx.createSelectorQuery()
			query.select('#daoh').boundingClientRect((rect) => {
				// console.log('状态栏+标题栏：',rect);
				this.chuTop = rect.height
			}).exec()
		},
		methods: {
			comeing(coding){
				this.$requst.post('user/open-one',{order_coding:coding}).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('免拼成功');
						this.checkList(this.activeIndex);
					}
				})
			},
			make(index,index2){
				this.isHeyan = true;
				this.text = `${this.orderList[index].orderNum}H${this.orderList[index].childrenList[index2].id}`;
				let params = {
					order_coding:this.orderList[index].orderNum,
					id:this.orderList[index].childrenList[index2].id,
					not_check_num:this.orderList[index].childrenList[index2].not_check_num
				}
				this.timer = setInterval(()=>{
					this.$requst.post('order/check-result',params).then(res=>{
						if(res.code==0){
							if(res.data.result==1){
								this.isHeyan = false;
								this.$toolAll.tools.showToast('已完成');
								this.checkList(this.activeIndex);
								clearInterval(this.timer);
							}
						}
					})
				},3000)
				// var that = this;
				// setTimeout(function() {
				// 	that.canvasQrPath = that.$refs.qrPath.canvasQrPath;
				// 	console.log('获取二维码地址:', that.canvasQrPath)
				// }, 1000)
			},
			closeEv(){
				this.isHeyan = false;
				clearInterval(this.timer);
			},
			checkZT(index){
				if(index==0){this.tag=""}
				if(index==1){this.tag="waiting"}
				if(index==2){this.tag="paid"}
				if(index==3){this.tag="check"}
				if(index==4){this.tag="shipped"}
				if(index==5){this.tag="completed"}
			},
			chooseNav(index){
				this.page =1;
				this.activeIndex = index;
				this.checkZT(index);
				this.checkList(index);
			},
			checkList(index){//查询订单列表
				this.$requst.post('user/order',{page:this.page,size:this.size,tag:this.tag}).then(res=>{
					if(res.code==0){
						if(this.page==1) {
							uni.pageScrollTo({//回到顶部
								scrollTop: 0,
								duration: 0
							});
							this.orderList = [];
							this.zanArr = [];
							this.timeList = [];
						}
						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" && item.has_virtual==1) {
								// 	statusNum = 3;
								// }
								if(item.status=="paid") {
								 	statusNum = 2;
								}
								if(item.status=="check")  statusNum = 3;
								if(item.status=="shipped") statusNum = 4;
								if(item.status=="completed") statusNum = 5;
								let nprice = '';
								if(item.is_score==0) nprice = this.$toolAll.tools.addXiaoShu(item.price/100);
								if(item.is_score==1) nprice = item.score;
								let nchildren = [];
								item.skus.forEach(items=>{
									let childrenPrice = '';
									if(item.is_score==0) childrenPrice = items.price/100
									if(item.is_score==1) childrenPrice = items.score
									let objs = {
										id:items.id,
										imgSrc:this.$http + items.spu_cover,
										title:items.spu_name,
										sku_name:items.sku_name,
										price:childrenPrice,
										num:items.num,
										not_check_num:items.not_check_num,
										check_type:items.check_type,
										is_virtual:items.is_virtual,
										activity_type:items.activity_type,
										is_activity:items.is_activity,
										spu_id:items.spu_id,
										spu_activity_id:items.spu_activity_id,
									}
									nchildren.push(objs);
								})
								let expiredTime = '';
								// 当前时间
								let currentTime = new Date().getTime();
								if(item.group.expired_at){
									// 结束时间
									expiredTime = this.$toolAll.tools.timeToTimestamp(item.group.expired_at);
								}
								let obj = {
									id:item.id,
									establish:item.created_at,//创建时间
									orderNum:item.coding,//订单号
									childrenList:nchildren,
									orderStatus:statusNum,//1 待付款，2 待发货，3 待核验，4 待收货，5 交易已完成
									isShop:item.is_score,//0 商城订单,1 积分商城订单
									total: nprice,//合计
									coin:item.coin,//孔雀币
									is_only:item.is_only,//是否单独购买,1、单独购买
									virtual_check:item.virtual_check,
									open_one:item.open_one,
									open_one_success:item.open_one_success,
									is_group_make:item.is_group_make,
									group_make_end_at:item.group_make_end_at,
									group_id:item.group_id,
									status_text: item.group!=null && item.status_text!='已完成' &&  item.status_text!='待付款' ? (item.group.surplus > 0 ? ((expiredTime-currentTime)>0 ? '待拼成' : '已拼成') : item.status_text) : item.status_text,//订单状态文字描述
									group:item.group//拼团商品信息
								}
								this.zanArr.push(obj);
							})
							this.zanArr.forEach((item,index)=>{
								if(item.group_make_end_at!='' && item.group_make_end_at!=null) {
									let obj = {
										id:item.id, 
										time:item.group_make_end_at,
										nIndex:index
									}
									this.timeList.push(obj);
								}
							})
							if(this.timeList!=0){
								uni.showToast({
									title:'加载中...',
									icon:'none',
									duration:100000
								})
								this.timer = setInterval(()=>{//定时器
									if(this.timeList.length!=0){
										this.timeList.forEach((item,index)=>{
											if(item.id==this.zanArr[item.nIndex].id){
												let endTime = new Date(this.timeList[index].time).getTime();//把结束时间转时间戳
												let startTime = new Date().getTime() + 1000;//请求接口的时间递增，即：开始时间
												if(startTime - endTime >=0) {//如果开始时间的时间戳 - 结束时间的时间戳 >= 0 活动结束
													// this.checkList(this.activeIndex);
												} else {
													// 继续进行倒计时
													this.zanArr[item.nIndex].group_make_end_at = this.$toolAll.tools.dayTime(this.timeList[index].time,startTime);
												}
											}
										})
									}
								},1000)
								setTimeout(()=>{
									uni.hideToast();
									this.orderList = this.zanArr;
									// this.search_result = true;
								},1000)
							} else {
								uni.hideToast();
								this.orderList = this.zanArr;
							}
							this.zanList = this.orderList;
							if(index==0) {
								this.orderList = this.zanList;
							} else if(index==3){
								
							} else {
								this.orderList = this.zanList.filter(item=>{
									return item.orderStatus==index;
								});
							}
						}
					}
				})
			},
			payMentEv(index){//付款
				this.$requst.post('order/pay',{order_coding:this.orderList[this.current].orderNum}).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('order/paid',{order_coding:this.orderList[this.current].orderNum}).then(res=>{
									if(res.code==0){
										this.$toolAll.tools.showToast('付款成功');
										this.checkList(this.activeIndex)
									} else this.$toolAll.tools.showToast(res.msg);
									
								})
							}
						});
					}
				})
			},
			hexiaoEv(){//核销事件
				this.$requst.post('order/check').then(res=>{
					if(res.code==0){
						
					}
				})
			},
			transferFrame(index){//调起取消原因弹框
				this.isCancle = true;
				this.current = index;
				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('order/cancel',{order_coding:this.orderList[this.current].orderNum,remarks:this.remarks}).then(res=>{
						if(res.code==0){
							this.isCancle = false;
							this.orderList.splice(this.current,1);
							this.page = 1;
							this.checkList(this.activeIndex);
							this.$toolAll.tools.showToast('取消成功');
							this.times = 0;
						} else this.$toolAll.tools.showToast(res.msg);
					})
				}
			},
			confirmReceipt(id){//确认收货事件
				this.$requst.post('order/accepted',{order_id:id}).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('收货成功');
						this.checkList(this.activeIndex);
					} else this.$toolAll.tools.showToast(res.msg);
				})
			},
			goDetail(id){//去订单详情
				uni.navigateTo({
					url:`/pagesB/orderDetail/orderDetail?id=${id}`
				})
			}
		}
	}
</script>

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