326 lines
12 KiB
Vue
326 lines
12 KiB
Vue
<template>
|
||
<view class="pad-x160">
|
||
<!-- 状态栏 -->
|
||
<status-nav :navBarTitle="'订单详情'"></status-nav>
|
||
<!-- 容器 -->
|
||
<container-subgroup>
|
||
<view slot="content">
|
||
<!-- 订单类型 -->
|
||
<block v-if="loading">
|
||
<view class="bacf6 radius20 mar-s20 fon30 line-h50 pad30">
|
||
<view class="disjbac">
|
||
<view>订单编号</view>
|
||
<view class="bold">{{orderInfo.coding}}</view>
|
||
</view>
|
||
<view class="disjbac">
|
||
<view>下单时间</view>
|
||
<view class="bold">{{orderInfo.created_at}}</view>
|
||
</view>
|
||
<view class="disjbac">
|
||
<view>订单状态</view>
|
||
<view class="bold">
|
||
<view v-if="orderInfo.status=='waiting'" class="colf8">待付款</view>
|
||
<view v-if="orderInfo.status=='paid'" class="colf8">待发货</view>
|
||
<view v-if="orderInfo.status=='shipped'" style="color: #61cf00;">待收货</view>
|
||
<view v-if="orderInfo.status=='completed'" class="col0">已完成</view>
|
||
<view v-if="orderInfo.status=='closed'" class="col9">已取消</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 订单信息 -->
|
||
<view class="bacf6 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.sku_cover" class="flexs" mode="aspectFill" style="width: 224rpx; height: 224rpx;"></image>
|
||
<view class="width100 disjb fc" style="height: 224rpx;">
|
||
<view class="fon28 col3 bold clips2">{{item.spu_name}}</view>
|
||
<view class="orderDetail-sku disac fw" v-if="item.spec_info.length">
|
||
<view class="mar-y40" v-for="(item2,index2) in item.spec_info" :key="index2">{{item2}}</view>
|
||
</view>
|
||
<view class="mar-s10">
|
||
<view class="colf8 fon32 bold disjbac width100"><span>￥{{item.price}}</span><span class="fon28 col6 mar-z20 font4">x{{item.num}}</span></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fon28 disjbac mar-s40 mar-x20">
|
||
<view class="col6">共{{allNum}}件</view>
|
||
<view class="colf8 bold">共计：{{orderInfo.original_price}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 物流信息 -->
|
||
<view v-if="orderInfo.address!='自提'" class="bacf6 radius20 mar-s20 fon28 pad30">
|
||
<view class="bold">物流信息</view>
|
||
<view class="bold col3 mar-s40 fon26 disjbac">
|
||
<view>{{orderInfo.express_name}}：{{orderInfo.express_number||'暂无快递单号'}}</view>
|
||
<view v-if="orderInfo.express_number" @tap="copyCont">复制</view>
|
||
</view>
|
||
</view>
|
||
<!-- 地址信息 -->
|
||
<view v-if="orderInfo.address!='自提'" class="bacf6 radius20 mar-s20 pad30">
|
||
<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="bacf6 radius20 mar-s20 pad30">
|
||
<view class="disjbac">
|
||
<view>配送方式</view>
|
||
<view>自提</view>
|
||
</view>
|
||
<view class="fon26 col3 disjbac mar-s30">
|
||
<view>
|
||
<view class="fon28 col3 bold mar-x20">{{appletName}}</view>
|
||
<view class="fon24 col9">{{goAddress}}</view>
|
||
</view>
|
||
<!-- 立即导航 -->
|
||
<view @tap="goThere(goAddress)" class="disjcac fc col0 fon24">
|
||
<i class="icon icon-navigate-now " style="font-size: 50rpx;"></i>
|
||
<view>立即导航</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 金额详情 -->
|
||
<view class="bacf6 radius20 mar-s20 fon30 col0 line-h60 pad30">
|
||
<view class="disjbac">
|
||
<view>商品总金额</view>
|
||
<view class="colf8">￥{{orderInfo.original_price}}</view>
|
||
</view>
|
||
<view class="disjbac">
|
||
<view>折扣优惠</view>
|
||
<view class="colf8">0</view>
|
||
</view>
|
||
<view class="disjbac" v-if="orderInfo.address!='自提'">
|
||
<view>快递费用</view>
|
||
<view class="colf8">{{orderInfo.freight}}</view>
|
||
</view>
|
||
<view class="disjbac">
|
||
<view class="width100" style="text-align: right;">实付：</view>
|
||
<view class="colf8 flexs bold">￥{{orderInfo.price}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部导航 -->
|
||
<view class="posixzy disja fe bacf pad-sx20 pad-y40">
|
||
<!-- 取消订单 -->
|
||
<view @tap="cancleEv" v-if="orderInfo.status=='paid' || orderInfo.status=='waiting'" class="order-btn">取消订单</view>
|
||
<!-- 立即支付 -->
|
||
<view @tap="paymentEv" v-if="orderInfo.status=='waiting'" class="order-btn" style="background-color: #f83030;color: #FFFFFF;">立即支付</view>
|
||
<!-- 确认收获 -->
|
||
<view @tap="confirmReceipt(orderInfo.id)" v-if="orderInfo.status=='shipped'" class="order-btn" style="background-color: #000000;color: #FFFFFF;">确认收货</view>
|
||
<!-- 再次购买 -->
|
||
<view @tap="againBuy" v-if="orderInfo.status=='completed' || orderInfo.status=='closed'" class="order-btn" style="background-color: #f83030;color: #FFFFFF;">再次购买</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</container-subgroup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusHNH:uni.getStorageSync('statusHNH'),
|
||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
loading:false,
|
||
isExpress:true,
|
||
switchQuan:true,
|
||
showQuan:false,
|
||
express:'',
|
||
orderInfo:'',//订单信息
|
||
addressInfo:'',//地址信息
|
||
allPrice:0,//共计
|
||
allNum:0,//共
|
||
times:0,//点击次数
|
||
appletName:'佩丽饰品',
|
||
goAddress:'四川省成都市青羊区草堂东路88号',
|
||
isHeyan:false,
|
||
canvasQrPath: '',
|
||
text: 'hello',
|
||
size: 162,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
timer:null,
|
||
daoTime:'',
|
||
timerDao:null,
|
||
orderId:''//订单id
|
||
}
|
||
},
|
||
onShareAppMessage(res) {
|
||
var shareObj = {
|
||
title: '', // 默认是小程序的名称(可以写slogan等)
|
||
path: `/pagesB/orderDetail/orderDetail?id=${this.orderId}&invite_code=${uni.getStorageSync('invite_code')}}` // 默认是当前页面，必须是以‘/’开头的完整路径
|
||
};
|
||
return shareObj;
|
||
},
|
||
onUnload() {
|
||
uni.setStorageSync('isorderDetail',1);
|
||
},
|
||
onLoad(options) {
|
||
this.orderId = options.id;
|
||
if(uni.getStorageSync('phone_active')){
|
||
this.$toolAll.tools.clearShare();
|
||
this.checkInfo(this.orderId);
|
||
} else {
|
||
uni.setStorageSync('outside',2);
|
||
uni.setStorageSync('existCode',options.invite_code);
|
||
uni.setStorageSync('transientUrl',`/pagesB/orderDetail/orderDetail?id=${options.id}`);
|
||
uni.navigateTo({
|
||
url:'/pages/login/login'
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
confirmReceipt(id){//确认收货事件
|
||
this.$requst.post('/api/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);
|
||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||
},
|
||
make(index){
|
||
this.isHeyan = true;
|
||
this.text = `${this.orderInfo.coding}H${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('/api/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);
|
||
}
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||
},3000)
|
||
},
|
||
cancleEv(){//取消订单
|
||
this.times++;
|
||
if(this.times==2){
|
||
this.$requst.post('/api/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 this.$toolAll.tools.showToast(res.msg);
|
||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||
} 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('/api/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('/api/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);
|
||
|
||
})
|
||
}
|
||
});
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
}).catch(err=>{this.$toolAll.tools.showToast(err.msg);})
|
||
}
|
||
},
|
||
checkInfo(id){//查询订单信息
|
||
this.$requst.post('/api/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=>{
|
||
// 共多少件，总计
|
||
if(narr.is_score==0){
|
||
this.allPrice += item.price*item.num;
|
||
} else {
|
||
this.allPrice += item.score*item.num;
|
||
}
|
||
this.allNum += item.num;
|
||
})
|
||
this.orderInfo = narr;
|
||
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;
|
||
}
|
||
})
|
||
},
|
||
// 再次购买事件
|
||
againBuy(){
|
||
let newList = [];
|
||
this.orderInfo.skus.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'});
|
||
},
|
||
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.657707,//要去的纬度-地址
|
||
longitude: 104.036007,//要去的经度-地址,
|
||
name: val,
|
||
address: val
|
||
})
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|