268 lines
9.6 KiB
Vue
268 lines
9.6 KiB
Vue
<template>
|
||
<view :class="orderDetail.status == 'completed'||orderDetail.status == 'shipped'?'pad-x150':'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 class="flex mar-s20" v-if="orderDetail.status=='closed'">
|
||
<text>取消原因</text>
|
||
<text>{{orderDetail.close_reason}}</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" v-if="orderDetail.status == 'waiting' || orderDetail.status == 'paid'">取消订单</view>
|
||
<view class="order-btns-bg flex" v-if="orderDetail.status == 'shipped'">
|
||
<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="refundEv">客服售后</view>
|
||
<view class="btn border-box background-orange color-ff font36 radius30 flex" @tap="affirmEv(orderDetail.id)">确认收货</view>
|
||
</view>
|
||
<view class="order-btns-bg flex" v-if="orderDetail.status == 'completed'">
|
||
<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="refundEv">客服售后</view>
|
||
<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="buyAgain">再次购买</view>
|
||
</view>
|
||
<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="buyAgain" v-if="orderDetail.status == 'closed'">再次购买</view>
|
||
|
||
</view>
|
||
<!-- 取消原因 -->
|
||
<view class="pull-bg" style="background-color: rgba(0,0,0,.3);" v-show="isOpen" @tap="closeEdit"></view>
|
||
<view class="vip-box-bg border-box" v-if="isOpen">
|
||
<view class="vip-box radius20 background-white font30">
|
||
<view class="title">取消理由</view>
|
||
<view class="cancle-reason">
|
||
<view class="item flex" v-for="(item,index) in cancleReason" :key="index" @tap="chooseEv(index)">
|
||
<label class="radio"><radio :checked="index==reasonIndex" color="#febf00"/></label>
|
||
<view class="txt font28">{{item.value}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="submit-btn font36 background-orange radius30 mar-s60 flex" @tap="submitEdit">取消订单</view>
|
||
<view class="close-btn" @tap="closeEdit">
|
||
<image src="/static/icon/close-btn.png" mode="widthFix"></image>
|
||
</view>
|
||
</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:'',
|
||
isOpen:false,
|
||
cancleReason:[], //取消理由
|
||
reasonIndex:0, //理由位置
|
||
}
|
||
},
|
||
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;
|
||
})
|
||
},
|
||
|
||
// 获取取消订单原因
|
||
getCancleReason(){
|
||
this.$requst.post('/api/order/cancellation-reason-all').then(res=>{
|
||
if(res.code==0) {
|
||
console.log(res,'取消订单原因');
|
||
this.cancleReason = res.data.list;
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 取消订单
|
||
cancleEv(){
|
||
this.isOpen =true;
|
||
// 获取取消订单原因
|
||
this.getCancleReason();
|
||
},
|
||
// 选择取消原因
|
||
chooseEv(index){
|
||
if(index!==this.reasonIndex){
|
||
this.reasonIndex = index;
|
||
}
|
||
},
|
||
// 关闭弹窗
|
||
closeEdit(){
|
||
this.isOpen = false;
|
||
},
|
||
// 确认取消订单
|
||
submitEdit(){
|
||
let params = {
|
||
order_coding: this.orderDetail.coding, //订单号
|
||
remarks:this.cancleReason[this.reasonIndex].value, //取消原因
|
||
}
|
||
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)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 联系客服退款
|
||
refundEv(){
|
||
this.$requst.get('/api/index/base-config').then(res=>{
|
||
if(res.code==0) {
|
||
console.log(res,'客服电话');
|
||
this.$toolAll.tools.countCustomer(res.data.customer_service_tel,res.data.customer_service_after_tel);
|
||
} 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> |