<template> <view> <!-- 状态栏 --> <status-nav :titleVal="'订单详情'" :statusTitle="true"></status-nav> <view :style="{paddingTop: statusHNH+'px'}" class="pad-zy30" style="padding-bottom: 150rpx;"> <!-- 订单类型 --> <block v-if="loading"> <view class="bacf radius20 mar-s20 fon28" style="padding: 27rpx 20rpx;"> <view class="disjbac"> <view class="bold">{{['商城订单','积分商城订单'][orderInfo.is_score]}}</view> <view v-if="orderInfo.status=='waiting'" class="colf8 bold">待付款</view> <view v-if="orderInfo.status=='paid' && orderInfo.has_virtual!=1" class="colf8 bold">待发货</view> <view v-if="orderInfo.status=='shipped' && orderInfo.has_virtual!=1" class="colf8 bold">待收货</view> <view v-if="orderInfo.status=='completed'" class="col9 bold">已完成</view> <view v-if="orderInfo.virtual_check==0 && orderInfo.has_virtual==1" class="colf8 bold">待核验</view> <view v-if="orderInfo.virtual_check==1 && orderInfo.has_virtual==1" class="col9 bold">已核验</view> <view v-if="orderInfo.status=='closed'" class="col9 bold">订单已取消</view> </view> <view class="bold col3 mar-s40 mar-x20">订单号:{{orderInfo.coding}}</view> <view class="fon24 col9" v-if="orderInfo.is_only==0 && orderInfo.open_one==1 && orderInfo.is_group_make==1 && orderInfo.open_one_success==0 ">{{daoTime}}</view> <view class="fon24 col9" v-else>{{orderInfo.created_at}}</view> </view> <!-- 物流信息 --> <view class="bacf radius20 mar-s20 fon28" style="padding: 27rpx 20rpx;"> <view class="bold">物流信息</view> <view class="bold col3 mar-s40 fon26 disjbac"> <view>{{orderInfo.express_name}}:{{orderInfo.express_number||'暂无快递单号'}}</view> <view @tap="copyCont">复制</view> </view> </view> <!-- 地址信息 --> <view v-if="orderInfo.address!='自提'" class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;"> <view class="bold">收件人信息</view> <view class="fon26 col3"> <view class="fon28 col3 bold" style="margin: 52rpx 0 20rpx 0;">{{addressInfo.userName}}<span class="mar-z10">{{addressInfo.userPhone}}</span></view> <view class="fon24 col9">{{addressInfo.userAddress}}</view> </view> </view> <view v-else class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;"> <view class="bold">商家地址信息</view> <view class="fon26 col3 disjbac mar-s30"> <view> <view class="fon28 col3 bold mar-x20">恒美植发</view> <view class="fon24 col9">{{goAddress}}</view> </view> <!-- 立即导航 --> <image @tap="goThere(goAddress)" src="/static/public/daoh.png" class="there" mode="aspectFill"></image> </view> </view> <!-- 订单信息 --> <view class="bacf radius20 mar-s20 orderDetail-box"> <view v-for="(item,index) in orderInfo.skus" :key="index" class="fon26 col3 disjbac pad-sx50 disjbac bbot"> <image :src="item.spu_cover" class="flexs" mode="aspectFill"></image> <view class="width100"> <view class="fon28 col3 bold clips2">{{item.spu_name}}</view> <view class="orderDetail-sku">{{item.sku_name}}</view> <view class="disjbac mar-s10"> <view class="colf8 fon32 bold"><span v-if="orderInfo.is_score==0">¥{{item.price/100}}</span><span v-else>积分:{{item.score}}</span><span class="fon28 col6 mar-z20 font4">x{{item.num}}</span></view> <view @tap.stop="make(index)" v-if="orderInfo.virtual_check==0 && orderInfo.has_virtual==1 && item.check_type=='frontend'" class="order-btn">线下核销</view> <view v-if="orderInfo.virtual_check==0 && orderInfo.has_virtual==1 && item.check_type!='frontend'" class="order-btn" style="background-color: #CCCCCC;">线上核销</view> </view> </view> </view> <view class="fon28 disjbac mar-s40 mar-x20"> <view class="col6">共{{allNum}}件</view> <view class="colf8 bold">共计:{{allPrice}}</view> </view> </view> <!-- 快递费用 --> <view v-if="isExpress" class="bacf radius20 mar-s20 disjbac pad-sx27-zy20"> <view class="bold">快递费用</view> <view class="fon28 colf8 bold">¥{{orderInfo.freight}}.00</view> </view> <!-- 消费 --> <view class="fon28 col3 consumption-box">消费:<span class="fon36 bold colf8"><span v-if="orderInfo.is_score==0">¥{{orderInfo.price/100}}</span><span v-else>{{orderInfo.score}}积分</span> <span v-if="orderInfo.coin!=0">+{{orderInfo.coin}}孔雀币</span></span></view> <view class="disjbac posixzy bacf orderDetail-bottom-box"> <view class="posir"> <image src="/static/public/weix.png" mode=""></image> <view class="fon28 col3">分享</view> <button open-type="share" class="posia-op"></button> </view> <view @tap="comeing(orderInfo.coding)" v-if="orderInfo.is_only==0 && orderInfo.open_one==1 && orderInfo.is_group_make==1 && orderInfo.open_one_success==0 " class="orderInfo-btn">直接免拼</view> <!-- 待付款 --> <view class="disac paid-btn-box" v-if="orderInfo.status=='waiting'"> <view @tap="cancleEv">取消订单</view> <view @tap="paymentEv">立即支付</view> </view> <!-- 待发货 --> <view class="disac paid-btn-box" v-if="orderInfo.status=='paid' && orderInfo.virtual_check==0"> <view @tap="cancleEv">取消订单</view> </view> <!-- 确认收货 --> <view @tap="confirmReceipt(orderInfo.id)" class="orderInfo-btn" v-if="orderInfo.status=='shipped'">确认收货</view> </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="size" :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> </block> </view> <!-- 弹框授权 --> <empower @buttonH="buttonH" :vision="vision" :isWhere="2"></empower> <!-- 弹框 --> <auth-phone v-if="isShowP"></auth-phone> </view> </template> <script> import yzQr from '@/components/yz-qr/yz-qr.vue'; export default { components:{ yzQr }, data() { return { statusHNH:uni.getStorageSync('statusHNH'), publicColor:uni.getStorageSync('publicColor'),//主题颜色 loading:false, isExpress:true, switchQuan:true, showQuan:false, express:'韵达快递:2983625984729', orderInfo:'',//订单信息 addressInfo:'',//地址信息 allPrice:0,//共计 allNum:0,//共 times:0,//点击次数 goAddress:'四川省成都市青羊区青羊大道213号', isHeyan:false, canvasQrPath: '', text: 'hello', size: 162, colorDark: '#000000', colorLight: '#ffffff', timer:null, daoTime:'', timerDao:null, vision:false, isShowP:false, } }, onShareAppMessage(res) { var ya = this; let maiOjb = { e:6,//内容分享 t:new Date().getTime()//当前时间戳 } this.$toolAll.tools.maiDian(maiOjb) var shareObj = { title: '成都恒美毛发', // 默认是小程序的名称(可以写slogan等) path: `/pages/tabbar/pagehome/pagehome?invite_code=${uni.getStorageSync('invite_code')}}` // 默认是当前页面,必须是以‘/’开头的完整路径 }; return shareObj; }, onUnload() { this.closeEv(); }, onShow() { this.$toolAll.tools.isLogin(); }, onLoad(options) { if(uni.getStorageSync('is_active')!=1){this.vision = true;} if(options.invite_code!='' && options.invite_code!=undefined){ this.loginEv(options.invite_code); } else if(options.source_code!='' && options.source_code!=undefined){ this.loginEv('',options.source_code,options.channel); } this.checkInfo(options.id); }, methods: { loginEv(invite_code='',source='',channel=''){ uni.login({ provider: 'weixin', success: (res)=> { if (res.code) { var params = { code:res.code, invite_code:invite_code,//用户邀请码 source_code:source, channel:channel } this.$requst.post('user/login',params).then(res => { if(res.data.token!=''){ if(res.data.is_active==0) { this.haveImg = false; this.vision = true; } } },error => {}) } }, }); }, buttonH(e){//授权成功 this.haveImg = e if(e) { this.vision = false this.isShowP = true } }, comeing(coding){ this.$requst.post('user/open-one',{order_coding:coding}).then(res=>{ if(res.code==0){ this.$toolAll.tools.showToast('免拼成功'); this.checkInfo(this.orderInfo.id); } }) }, confirmReceipt(id){//确认收货事件 this.$requst.post('order/accepted',{order_id:id}).then(res=>{ if(res.code==0){ this.$toolAll.tools.showToast('收货成功'); this.checkInfo(this.orderInfo.id); } else this.$toolAll.tools.showToast(res.msg); }) }, make(index){ this.isHeyan = true; this.text = `${this.orderInfo.coding},${this.orderInfo.skus[index].id}`; let params = { order_coding:this.orderInfo.coding, id:this.orderInfo.skus[index].id, not_check_num:this.orderInfo.skus[index].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.checkInfo(this.orderInfo.id); clearInterval(this.timer); } } }) },3000) }, closeEv(){ this.isHeyan = false; clearInterval(this.timer); clearInterval(this.timerDao); }, cancleEv(){//取消订单 this.times++; if(this.times==2){ this.$requst.post('order/cancel',{order_coding:this.orderInfo.coding}).then(res=>{ if(res.code==0){ this.$toolAll.tools.showToast('取消订单成功'); this.checkInfo(this.orderInfo.id); this.times = 0; } }) } else { setTimeout(()=>{ this.times = 0; },1500) this.$toolAll.tools.showToast('双击即可取消订单'); } }, paymentEv(){//立即支付 if(this.times==0){ this.$toolAll.tools.showToast('正在调起支付','loading',1500) this.times++; this.$requst.post('order/pay',{order_coding:this.orderInfo.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('order/paid',{order_coding:this.orderInfo.coding}).then(res=>{ if(res.code==0){ this.times = 0; this.$toolAll.tools.showToast('支付成功'); this.checkInfo(this.orderInfo.id); } else this.$toolAll.tools.showToast(res.msg); }) } }); } }) } }, checkInfo(id){//查询订单信息 this.$requst.post('user/order-detail',{id:id}).then(res=>{ if(res.code==0){ this.allPrice = 0; this.allNum = 0; let narr = res.data; narr.skus.forEach(item=>{ item.spu_cover = this.$http + item.spu_cover; // 共多少件,总计 if(narr.is_score==0){ this.allPrice += item.price*item.num; } else { this.allPrice += item.score*item.num; } this.allNum += item.num; }) if(narr.is_score==0){//商城订单的总计 this.allPrice = this.allPrice/100; } else {//积分订单的总计 this.allPrice = this.allPrice; } this.orderInfo = narr; if(this.orderInfo.group_make_end_at!=null){ this.daoTime = this.$toolAll.tools.dayTime(this.orderInfo.group_make_end_at,new Date().getTime()); this.timerDao = setInterval(()=>{ if(new Date().getTime()-new Date().getTime(this.orderInfo.group_make_end_at)>0){ this.checkInfo(this.orderInfo.id); clearInterval(this.timerDao) } else { this.daoTime = this.$toolAll.tools.dayTime(this.orderInfo.group_make_end_at,new Date().getTime()); } },1000) } let naddress = this.orderInfo.address.split(','); if(naddress[0]!='自提'){ let nphone = this.$toolAll.tools.hideMPhone(naddress[1].trim()) this.addressInfo = { userName:naddress[0].trim(), userPhone:nphone, userAddress:naddress[2].trim() } } this.loading = true; } }) }, copyCont(){//复制快递单号 if(this.times==0){ this.times++; if(this.orderInfo.express_number!=null){ this.$toolAll.tools.clickCopy(this.orderInfo.express_number); this.$toolAll.tools.showToast('复制快递单号成功'); } else this.$toolAll.tools.showToast('暂无可查询的快递信息'); setTimeout(()=>{ this.times = 0; },2000) } }, goThere(val){//去这里 wx.getLocation({//获取当前经纬度 type: 'wgs84', //返回可以用于wx.openLocation的经纬度,官方提示bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息 success: function (res) { wx.openLocation({//使用微信内置地图查看位置。 latitude: 30.67554,//要去的纬度-地址 longitude: 104.010642,//要去的经度-地址 name: val, address: val }) } }) }, } } </script> <style> page { background-color: #F5F5F5; } </style>