294 lines
9.2 KiB
Vue
294 lines
9.2 KiB
Vue
<template>
|
||
<view class="main" v-if="apiShow">
|
||
<view class="cont flex">
|
||
<view class="cont_order_type">
|
||
<view class="cont_order_type_name">{{orderDetails.statustext}}</view>
|
||
<view class="cont_order_type_desc" v-if="orderDetails.orderStatusMsg && orderDetails.status != 5">{{orderDetails.orderStatusMsg}}</view>
|
||
</view>
|
||
<view class="cont_service">
|
||
<image class="cont_service_img" src="../../static/order/service.png" mode="widthFix"></image>
|
||
<view class="cont_service_name">联系客服</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cont paddom">
|
||
<view class="cont_title cont_border">商品信息<text>共{{orderDetails.totalcartNum}}件</text></view>
|
||
<view class="cont_shop" v-for="(item,index) in orderInfoList" :key="index">
|
||
<view class="cont_shop_l">
|
||
<view class="cont_shop_img">
|
||
<image class="cont_shop_imgUrl" :src="item.image" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cont_shop_text">
|
||
<view class="cont_shop_title"><text>{{item.storeName}}</text></view>
|
||
<view class="cont_shop_desc">单价:<text class="cont_shop_desc_price">{{item.price}}</text></view>
|
||
<view class="cont_shop_desc">数量:{{item.cartNum}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="cont_shop_r">
|
||
<view class="cont_shop_payment">实付:<text class="cont_shop_payment_price">{{item.totalPrice}}</text></view>
|
||
<view class="cont_shop_addcart">再来一件</view>
|
||
</view>
|
||
</view>
|
||
<view class="cont_shop_border"></view>
|
||
<view class="cont_shop_item">
|
||
<view class="cont_shop_item_name">商品金额</view>
|
||
<view class="cont_shop_item_value"><text class="cont_shop_item_value_price">{{orderDetails.proTotalPrice}}</text></view>
|
||
</view>
|
||
<view class="cont_shop_item">
|
||
<view class="cont_shop_item_name">配送费</view>
|
||
<view class="cont_shop_item_value"><text class="cont_shop_item_value_price">{{orderDetails.freightPrice}}</text></view>
|
||
</view>
|
||
<view class="cont_shop_item">
|
||
<view class="cont_shop_item_name">满减券</view>
|
||
<view class="cont_shop_item_value cont_shop_item_color">-<text class="cont_shop_item_value_price">{{orderDetails.couponPrice}}</text></view>
|
||
</view>
|
||
<view class="cont_shop_border"></view>
|
||
<view class="cont_shop_total">实付:<text>{{orderDetails.payPrice}}</text></view>
|
||
</view>
|
||
<view class="cont paddom">
|
||
<view class="cont_title cont_border">配送信息</view>
|
||
<view class="cont_shop_user">
|
||
<view class="cont_shop_user_name">地址:</view>
|
||
<view class="cont_shop_user_desc">
|
||
<view class="cont_shop_user_detal">{{orderDetails.userAddress}}</view>
|
||
<view class="cont_shop_user_tel">{{orderDetails.realName}}，{{orderDetails.userPhone}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="cont_shop_user" v-if="orderDetails.payTime !== null">
|
||
<view class="cont_shop_user_name">时间:</view>
|
||
<view class="cont_shop_user_desc">
|
||
<view class="cont_shop_user_detal">{{orderDetails.payTime}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="cont_shop_user" v-if="orderDetails.mark !== null">
|
||
<view class="cont_shop_user_name">备注:</view>
|
||
<view class="cont_shop_user_desc">
|
||
<view class="cont_shop_user_detal">{{orderDetails.mark}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cont paddom">
|
||
<view class="cont_title cont_border">订单信息</view>
|
||
<view class="cont_shop_item" @click="copyText()">
|
||
<view class="cont_shop_item_name">订单编号</view>
|
||
<view class="cont_shop_item_value">{{orderDetails.orderId}}<text class="cont_shop_item_copy">复制</text></view>
|
||
</view>
|
||
<view class="cont_shop_item">
|
||
<view class="cont_shop_item_name">下单时间</view>
|
||
<view class="cont_shop_item_value">{{orderDetails.createTime}}</view>
|
||
</view>
|
||
<view class="cont_shop_item">
|
||
<view class="cont_shop_item_name">支付方式</view>
|
||
<view class="cont_shop_item_value">{{orderDetails.payTypeStr}}</view>
|
||
</view>
|
||
</view>
|
||
<view style="height: 200rpx;"></view>
|
||
<view class="footer">
|
||
<view class="footer_l">
|
||
<block v-if="orderDetails.status == 2 || orderDetails.status == 3 || orderDetails.status == 5">
|
||
<view class="more_text" @click.stop="more_arr()">更多</view>
|
||
<view class="more_open" v-if="openShow">
|
||
<view class="more_cont">
|
||
<view class="more_item more_border">分享</view>
|
||
<view class="more_item" @click.stop="remove(item)">删除订单</view>
|
||
</view>
|
||
<view class="more_j"></view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="footer_r">
|
||
<view class="footer_btn" v-if="orderDetails.status == 0" @click.stop="cancel()">取消订单</view>
|
||
<view class="footer_btn" v-if="orderDetails.status == 1" @click.stop="confirmReceipt()">确认收货</view>
|
||
<view class="footer_btn" v-if="orderDetails.status == 2" @click="evaluate()">去评价</view>
|
||
<view class="footer_btn" v-if="orderDetails.status == 2" @click.stop="assDetail()">申请售后</view>
|
||
<view class="footer_btn footer_btn_bcg">再来一单</view>
|
||
</view>
|
||
</view>
|
||
<view class="openShow" v-if="openShow" @click="more_arr()"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import NP from 'number-precision';
|
||
import { loads } from '@/utils/index.js'
|
||
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
|
||
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
|
||
import { storeToRefs } from 'pinia';//实现解构付值
|
||
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
|
||
import { orderdetail,ordercancel,orderdel,ordertake } from "@/server/api.js"
|
||
const counterStore = useCounterStore(); // 使用 Store
|
||
const { proxy } = getCurrentInstance();
|
||
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
|
||
const { storeId } = storeToRefs(counterStore);
|
||
const orderId = ref("");
|
||
const orderDetails = ref({});
|
||
const orderInfoList = ref([]);
|
||
const apiShow = ref(false);
|
||
const openShow = ref(false);
|
||
const evaluate = () =>{
|
||
// uni.navigateTo({
|
||
// url:`/order/orderevallist/orderevallist?type=0`
|
||
// })
|
||
uni.navigateTo({
|
||
url:`/order/editeval/editeval?orderNo=${orderDetails.value.orderId}`
|
||
})
|
||
}
|
||
const assDetail=()=>{
|
||
uni.navigateTo({
|
||
url:`/order/assedit/assedit?orderId=${orderDetails.value.orderId}`
|
||
})
|
||
};
|
||
const more_arr = ()=>{
|
||
openShow.value = !openShow.value
|
||
}
|
||
const copyText = () =>{
|
||
uni.setClipboardData({
|
||
data:'订单编号:'+orderDetails.value.orderId,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'success',
|
||
});
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '复制失败',
|
||
icon: 'none',
|
||
});
|
||
}
|
||
})
|
||
}
|
||
const api_orderdetail=()=>{
|
||
loads('', true)
|
||
apiShow.vaue = false;
|
||
return orderdetail(orderId.value).then(({data}) => {
|
||
uni.hideLoading();
|
||
apiShow.value = true;
|
||
let statustext = "";
|
||
if(data.status == 0){
|
||
statustext = "待支付"
|
||
}else if(data.status == 1){
|
||
statustext = "待收货"
|
||
}else if(data.status == 2){
|
||
statustext = "已收货，待评价"
|
||
}else if(data.status == 3){
|
||
statustext = "已完成"
|
||
}else if(data.status == 4){
|
||
statustext = "备货中"
|
||
}else{
|
||
statustext = "已取消"
|
||
}
|
||
data.orderInfoList.forEach(item => {item.totalPrice = NP.round(NP.times(item.cartNum, item.price),2)})
|
||
data.totalcartNum = data.orderInfoList.reduce((sum, item) => sum + item.cartNum, 0);
|
||
data.statustext = statustext;
|
||
orderDetails.value = data;
|
||
orderInfoList.value = data.orderInfoList
|
||
}).catch(({message}) => {
|
||
apiShow.value = false;
|
||
uni.hideLoading();
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false,
|
||
success: () => {
|
||
uni.navigateBack({
|
||
delta:1
|
||
})
|
||
}
|
||
})
|
||
})
|
||
}
|
||
//确认收货
|
||
const confirmReceipt = ()=>{
|
||
ordertake(orderDetails.value.id).then(({message}) => {
|
||
uni.showToast({
|
||
title:message,
|
||
icon:'success',
|
||
success: () => {
|
||
setTimeout(()=>{
|
||
api_orderdetail();
|
||
},1400)
|
||
}
|
||
})
|
||
}).catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
//删除订单
|
||
const remove = ()=>{
|
||
uni.showModal({
|
||
content:"您确定要删除当前订单吗？",
|
||
confirmText:'确定',
|
||
confirmColor:'#F14D48',
|
||
success: ({confirm}) => {
|
||
if (confirm) {
|
||
orderdel(orderDetails.value.id).then(({message}) => {
|
||
uni.showToast({
|
||
title:message,
|
||
icon:'success',
|
||
success: () => {
|
||
setTimeout(()=>{
|
||
openShow.value = false;
|
||
api_orderdetail();
|
||
},1400)
|
||
}
|
||
})
|
||
}).catch(({message}) => {
|
||
openShow.value = false;
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
//取消订单
|
||
const cancel = ()=>{
|
||
uni.showModal({
|
||
content:"您确定要取消当前订单吗？",
|
||
confirmText:'确定',
|
||
confirmColor:'#F14D48',
|
||
success: ({confirm}) => {
|
||
if (confirm) {
|
||
ordercancel(orderDetails.value.id).then(({message}) => {
|
||
uni.showToast({
|
||
title:message,
|
||
icon:'success',
|
||
success: () => {
|
||
setTimeout(()=>{
|
||
api_orderdetail();
|
||
},1400)
|
||
}
|
||
})
|
||
}).catch(({message}) => {
|
||
uni.showModal({
|
||
content:message,
|
||
showCancel: false
|
||
})
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
onLoad((options) => {
|
||
if(options.orderId){
|
||
orderId.value = options.orderId
|
||
api_orderdetail();
|
||
}
|
||
});
|
||
onShow(() => {});
|
||
onReady(()=>{})
|
||
onPullDownRefresh(()=>{
|
||
api_orderdetail();
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
onReachBottom(()=>{})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './style.scss';
|
||
</style> |