138 lines
5.5 KiB
Vue
138 lines
5.5 KiB
Vue
<template>
|
|
<view>
|
|
<status-container titlet="订单详情" returnc="#FFFFFF">
|
|
<view slot="content" style="margin-top: -20rpx;" v-if="orderDetail">
|
|
<view class="bacf disjcac fc pad-sx40 boxshow2">
|
|
<view v-if="orderDetail.status=='waiting'" class="fon28 mar-x20">待付款</view>
|
|
<view v-if="orderDetail.status=='shipped' || orderDetail.status=='paid'" class="fon28 mar-x20">待收货</view>
|
|
<view v-if="orderDetail.status=='completed'" class="fon28 mar-x20">已完成</view>
|
|
<view @tap="goPay" v-if="orderDetail.status=='waiting'" class="fon26 radius30 disjcac" style="background-color:#f37717;border: 2rpx solid #f37717;color: #FFFFFF;width: 204rpx;height: 62rpx;">去付款</view>
|
|
<view @tap="confirmReceipt(orderDetail.id)" v-if="orderDetail.status=='shipped' || orderDetail.status=='paid'" class="fon26 radius30 disjcac" style="border: 2rpx solid #f37717;color: #f37717;border-color:#f37717;width: 204rpx;height: 62rpx;">确认收货</view>
|
|
</view>
|
|
<view class="bacf mar-s20 pad-x20 boxshow2">
|
|
<view @tap="$toolAll.tools.goPage(`/pagesB/shop-detail/shop-detail?id=${item.spu_id}`)" class="bbot disac pad30 col26" v-for="(item,index) in orderDetail.skus" :key="index">
|
|
<image class="flexs mar-y20" :src="item.spu_cover" style="width: 192rpx;height: 134rpx;" mode="aspectFill" lazy-load></image>
|
|
<view class="fon24 width100 disjbac fc" style="height: 134rpx;">
|
|
<view class="dis width100">
|
|
<view class="clips2 width100">{{item.spu_name}}</view>
|
|
<view class="mar-z50 flexs">x{{item.num}}</view>
|
|
</view>
|
|
<view class="width100 disje">
|
|
<view class="">实付：￥{{item.price}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="col26 fon24 line-h46 pad-zy30 pad-sx20 bbot">
|
|
<view class="">订单编号：<span style="color:#707070;">{{orderDetail.coding}}</span></view>
|
|
<view class="">下单时间：<span style="color:#707070;">{{orderDetail.created_at}}</span></view>
|
|
<view class="">支付时间：<span style="color:#707070;">{{orderDetail.paid_at || '-'}}</span></view>
|
|
<view class="">快递公司：<span style="color:#707070;">{{orderDetail.express_name || '-'}}</span></view>
|
|
<view class="">快递单号：<span style="color:#707070;">{{orderDetail.express_number || '-'}}</span></view>
|
|
</view>
|
|
<view class="col26 fon24 line-h46 pad-zy30 pad-sx20 bbot">
|
|
<view class="disjbac">订单总额<span class="colb">￥{{orderDetail.original_price}}</span></view>
|
|
<view class="disjbac">运费<span class="colb">+￥{{orderDetail.freight}}</span></view>
|
|
<!-- <view class="disjbac">优惠券抵扣<span class="colb">-￥{{orderDetail.coupon_price}}</span></view> -->
|
|
<view class="disjbac">积分抵扣<span class="colb" >-￥{{orderDetail.score_deduct_price}}</span></view>
|
|
</view>
|
|
<view class="col26 fon24 line-h46 pad-zy30 pad-s30 pad-x20">
|
|
<view class="disjbac">实付金额<span class="colb">￥{{orderDetail.price}}</span></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</status-container>
|
|
<dynamic-frame ref="refFrame" :showType="showType" :tipsTitle="tipsTitle"></dynamic-frame>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import dynamicFrame from '@/components/dynamic-frame.vue';
|
|
export default {
|
|
components:{dynamicFrame},
|
|
data() {
|
|
return {
|
|
orderDetail:'',
|
|
flag:true,
|
|
showType:-1,
|
|
tipsTitle:'提示信息',
|
|
}
|
|
},
|
|
onLoad(op) {
|
|
this.getOrderDetail(op.id);
|
|
},
|
|
methods: {
|
|
// 按钮点击
|
|
clickBtn(index){
|
|
this.tipsTitle = index==2?'物流信息':'提示信息';
|
|
this.showType = [2,3,1][index];
|
|
this.$refs.refFrame.ifLogistics = true;
|
|
this.$refs.refFrame.ifAnimated = true;
|
|
},
|
|
// 获取订单详情
|
|
getOrderDetail(id){
|
|
this.$requst.get('/api/user/order-detail',{id}).then(res=>{
|
|
if(res.code==0){
|
|
this.orderDetail = res.data;
|
|
}
|
|
})
|
|
},
|
|
// 确认收货
|
|
confirmReceipt(id){
|
|
this.$requst.post('/api/order/accepted',{order_id:id}).then(res=>{
|
|
if(res.code==0){
|
|
this.clickBtn(0);
|
|
this.getOrderDetail(id);
|
|
}
|
|
})
|
|
},
|
|
// 去支付
|
|
goPay(){
|
|
if(this.flag){
|
|
this.flag = false;
|
|
this.$requst.post('/api/order/pay',{order_coding:this.orderDetail.coding}).then(res=>{
|
|
if(res.code==0){
|
|
let info = res.data;
|
|
if(info.status!='completed'){
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
appId:info.payment_params.appId,//appId
|
|
timeStamp: info.payment_params.timeStamp,//时间戳
|
|
nonceStr: info.payment_params.nonceStr,//随机字符串
|
|
package: info.payment_params.package,//package
|
|
signType: info.payment_params.signType,//MD5
|
|
paySign: info.payment_params.sign,//签名
|
|
success:(result)=> {
|
|
this.$requst.post('/api/order/paid',{order_coding:this.orderDetail.coding}).then(res=>{
|
|
if(res.code==0){
|
|
this.clickBtn(1);
|
|
this.getOrderDetail(this.orderDetail.id);
|
|
} else this.$toolAll.tools.showToast(res.msg);
|
|
})
|
|
},
|
|
fail:()=> {
|
|
this.$toolAll.tools.showToast('支付已取消o(╥﹏╥)o');
|
|
},
|
|
complete:()=> {
|
|
this.flag = true;
|
|
}
|
|
});
|
|
} else {
|
|
this.$toolAll.tools.showToast('支付成功(*^▽^*)');
|
|
setTimeout(()=>{
|
|
uni.navigateTo({
|
|
url:'/pagesA/my-order/my-order'
|
|
})
|
|
},1000)
|
|
}
|
|
} else {
|
|
this.flag = true;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|