199 lines
6.8 KiB
Vue
199 lines
6.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="pad-x170" v-if="isLoading">
|
|||
|
|
<status-nav :ifReturn="true" navBarTitle="订单详情" :marginBottom="0"></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">{{orderDetail.discount_money>0?orderDetail.discount_money: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
|
|||
|
|
priceAll:'', //实际付款
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(op) {
|
|||
|
|
if(op.id !== ''){
|
|||
|
|
this.id = op.id;
|
|||
|
|
}
|
|||
|
|
this.getOrderDetail();
|
|||
|
|
},
|
|||
|
|
// 分享到微信
|
|||
|
|
onShareAppMessage() {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 分享到朋友圈
|
|||
|
|
onShareTimeline(res){
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
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.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>
|