193 lines
6.9 KiB
Vue
193 lines
6.9 KiB
Vue
<template>
|
||
<view class="pad-x170" v-if="isLoading">
|
||
<status-nav :ifReturn="true" navBarTitle="订单详情" :marginBottom="0" :backTag="backTag"></status-nav>
|
||
<!-- 收件人信息 -->
|
||
<view class="settlement-content pad-zy20 border-box">
|
||
<!-- 订单简介 -->
|
||
<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
|
||
<view class="order-info pad-zy20 border-box">
|
||
<view class="flex mar-s20">
|
||
<text>订单编号</text>
|
||
<text>{{orderDetail.coding}}</text>
|
||
</view>
|
||
<view class="flex mar-s20">
|
||
<text>下单时间</text>
|
||
<text>{{orderDetail.created_at}}</text>
|
||
</view>
|
||
<view class="flex mar-s20">
|
||
<text>订单状态</text>
|
||
<text>{{orderDetail.status_text}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 订单信息 -->
|
||
<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
|
||
<view class="title">订单信息</view>
|
||
<view class="shop-slide-list">
|
||
<view class="shop-slide-item">
|
||
<view class="item border-box background-white flex" v-for="(item,index) in orderDetail.skus" :key="index">
|
||
<view class="shop-img radius30">
|
||
<image :src="item.spu_cover" mode="widthFix"></image>
|
||
</view>
|
||
<view class="shop-txt">
|
||
<view class="shop-txt-top">
|
||
<view class="title font30 clips1">{{item.spu_name}}</view>
|
||
<view class="specs font24 color-66 mar-sx10 clips2">规格：{{item.sku_name}}</view>
|
||
</view>
|
||
<view class="shop-txt-bottom flex">
|
||
<!-- 商品价格 -->
|
||
<view class="price font30 color-red">￥{{item.price}}<text class="font24 color-66">x{{item.num}}</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 收货信息 -->
|
||
<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
|
||
<view class="title">收货信息</view>
|
||
<view class="addressee-info mar-s20 flex">
|
||
<view class="txt">
|
||
<view class="font30 mar-x10">{{orderDetail.address_info.name}}<text>{{orderDetail.address_info.phone}}</text></view>
|
||
<text class="font24 color-8c">{{orderDetail.address_info.province_str}}{{orderDetail.address_info.city_str}}{{orderDetail.address_info.county_str}}{{orderDetail.address_info.address}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 物流信息 -->
|
||
<view class="section background-white radius30 mar-x40 pad-all25 border-box font30" v-if="orderDetail.express_name!==''">
|
||
<view class="title">物流信息</view>
|
||
<view class="addressee-info mar-s20 flex">
|
||
<view class="txt" style="width: 100%;">
|
||
<view class="font30 mar-x10">{{orderDetail.express_name}}</view>
|
||
<view class="txt-coding font24 flex" style="margin-top: 10rpx;">
|
||
<text class="color-8c">快递单号：{{orderDetail.express_number}}</text>
|
||
<view class="copy_btn" @tap="copyEV">复制查询</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 付款信息 -->
|
||
<view class="section background-white radius30 mar-x40 pad-all25 border-box font30" v-if="orderDetail.status!=='waiting'">
|
||
<view class="pay-info">
|
||
<view class="flex">
|
||
<text>商品总金额</text>
|
||
<text class="color-red">{{orderDetail.original_price}}</text>
|
||
</view>
|
||
<view class="flex mar-s20">
|
||
<text>折扣优惠</text>
|
||
<text class="color-red">{{coupon_vip_price>0?coupon_vip_price:0}}</text>
|
||
</view>
|
||
<view class="flex mar-s20">
|
||
<text>积分抵扣</text>
|
||
<text class="color-red">{{orderDetail.score_deduction_money>0?orderDetail.score_deduction_money:0}}</text>
|
||
</view>
|
||
<view class="pay-actual mar-s30 flex">实付款:<text class="color-red font36">{{priceAll>0?'￥'+ priceAll:0}}</text></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 尾部 -->
|
||
<view class="pull-btn background-white border-box" style="box-shadow: 0 -9rpx 21rpx rgba(0,0,0,.1);">
|
||
<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="cancleEv(orderDetail.coding)" v-if="orderDetail.status == 'waiting' || orderDetail.status == 'paid'">取消订单</view>
|
||
<view class="btn border-box background-orange color-ff font36 radius30 flex" @tap="affirmEv(orderDetail.id)" v-if="orderDetail.status == 'shipped'">确认收货</view>
|
||
<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="buyAgain" v-if="orderDetail.status == 'completed' || orderDetail.status == 'closed'">再次购买</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {getCartInfo} from '@/jsFile/public-api.js';
|
||
import {mapState} from 'vuex'//引入mapState
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderDetail:{}, //订单详情
|
||
flag:true,
|
||
isLoading:false,
|
||
id:0, //订单id
|
||
coupon_vip_price:'', //折扣优惠
|
||
priceAll:'', //实际付款
|
||
backTag:'',
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
if(op.id){this.id = op.id;}
|
||
if(op.backTag){this.backTag = op.backTag;}
|
||
this.getOrderDetail();
|
||
},
|
||
methods: {
|
||
// 查询订单详情
|
||
getOrderDetail(){
|
||
uni.showLoading({
|
||
title:'加载中'
|
||
});
|
||
this.$requst.get('/api/user/order-detail',{id:this.id}).then(res=>{
|
||
if(res.code==0){
|
||
console.log(res,'订单详情')
|
||
this.orderDetail = res.data;
|
||
this.coupon_vip_price = this.$toolAll.tools.addXiaoShu(parseFloat(res.data.discount_money) + parseFloat(res.data.coupon_price));
|
||
this.priceAll = this.$toolAll.tools.addXiaoShu(parseFloat(res.data.balance) + parseFloat(res.data.wechat));
|
||
}
|
||
uni.hideLoading();
|
||
this.isLoading = true;
|
||
})
|
||
},
|
||
|
||
// 取消订单
|
||
cancleEv(coding){
|
||
let params = {
|
||
order_coding: coding //订单号
|
||
}
|
||
this.$requst.post('/api/order/cancel',params).then(res=>{
|
||
if(res.code==0) {
|
||
this.$toolAll.tools.showToast('取消订单成功(*^▽^*)');
|
||
uni.navigateTo({
|
||
url:'/pagesA/order/order'
|
||
})
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 确认收货
|
||
affirmEv(id){
|
||
let params = {
|
||
order_id: id //订单号
|
||
}
|
||
this.$requst.post('/api/order/accepted',params).then(res=>{
|
||
if(res.code==0) {
|
||
this.$toolAll.tools.showToast('确认收货成功(*^▽^*)');
|
||
uni.navigateTo({
|
||
url:'/pagesA/order/order'
|
||
})
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 再次购买
|
||
buyAgain(index){
|
||
let buyList = [];
|
||
let newArr = this.orderDetail;
|
||
newArr.skus.forEach(item=>{
|
||
let obj = {
|
||
sku_coding: item.coding,
|
||
num: item.num
|
||
}
|
||
buyList.push(obj);
|
||
})
|
||
uni.setStorageSync('buyList',buyList);
|
||
uni.navigateTo({
|
||
url:'/pages/cart/settlement'
|
||
})
|
||
},
|
||
// 复制查询
|
||
copyEV(){
|
||
this.$toolAll.tools.clickCopy(this.orderDetail.express_number);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style> |