532 lines
13 KiB
Vue
532 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<layout class="orderInfo">
|
|||
|
|
<uv-navbar
|
|||
|
|
:fixed="false"
|
|||
|
|
title="订单详情"
|
|||
|
|
left-arrow
|
|||
|
|
@leftClick="$onClickLeft"
|
|||
|
|
/>
|
|||
|
|
<view v-if="orderInfoData">
|
|||
|
|
<view class="orderInfo-header background-warp">
|
|||
|
|
<view class="background">
|
|||
|
|
<image
|
|||
|
|
class="image"
|
|||
|
|
src="@/static/images/order-info-bg.png"
|
|||
|
|
mode="widthFix"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="background-content page-space">
|
|||
|
|
<view class="order-status-info">
|
|||
|
|
<view class="order-status">
|
|||
|
|
<!-- <image
|
|||
|
|
class="image"
|
|||
|
|
src="@/static/images/kjzq.png"
|
|||
|
|
/> -->
|
|||
|
|
<view>{{ orderInfoStatusMsg }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="order-date">
|
|||
|
|
{{ orderInfoData._status._msg }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="address noBorder">
|
|||
|
|
<view class="address-icon">
|
|||
|
|
|
|||
|
|
<image
|
|||
|
|
class="image"
|
|||
|
|
src="@/static/images/icon-location.png"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="address-main">
|
|||
|
|
<view class="address-header">
|
|||
|
|
<view class="address-name">{{ orderInfoData.realName }}</view>
|
|||
|
|
<view class="address-phone">{{ orderInfoData.userPhone }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="address-content">
|
|||
|
|
<view class="address-desc">{{ orderInfoData.userAddress }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="page-space">
|
|||
|
|
|
|||
|
|
<view class="order-goods page-card mb-20">
|
|||
|
|
<!-- <view class="order-header">
|
|||
|
|
<view class="order-logo">
|
|||
|
|
<image
|
|||
|
|
class="image"
|
|||
|
|
src="@/static/images/flashKilling.png"
|
|||
|
|
alt=""
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<goods
|
|||
|
|
list
|
|||
|
|
interval
|
|||
|
|
desc="3"
|
|||
|
|
showAction
|
|||
|
|
model
|
|||
|
|
purchase="x3"
|
|||
|
|
:data="item.productInfo"
|
|||
|
|
v-for="(item, index) in orderInfoData.cartInfo"
|
|||
|
|
>
|
|||
|
|
<template
|
|||
|
|
#action
|
|||
|
|
v-if="orderInfoData.status == 2 && item.isReply > 0"
|
|||
|
|
>
|
|||
|
|
<uv-button
|
|||
|
|
type="primary"
|
|||
|
|
text="去评价"
|
|||
|
|
size="small"
|
|||
|
|
@tap="toEvaluate(item)"
|
|||
|
|
></uv-button>
|
|||
|
|
</template>
|
|||
|
|
</goods>
|
|||
|
|
|
|||
|
|
<view class="order-infos infos mb-20 infos-right border-top">
|
|||
|
|
<view class="info-cell">
|
|||
|
|
<view class="info-cell-label">总价：</view>
|
|||
|
|
<view class="info-cell-value">¥{{ orderInfoData.payPrice }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-cell ">
|
|||
|
|
<view class="info-cell-label">优惠：</view>
|
|||
|
|
<view class="info-cell-value">¥{{ orderInfoData.deductionPrice }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-cell ">
|
|||
|
|
<view class="info-cell-label">运费：</view>
|
|||
|
|
<view class="info-cell-value">¥{{ orderInfoData.freightPrice }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-cell ">
|
|||
|
|
<view class="info-cell-label">总计：</view>
|
|||
|
|
<view class="info-cell-value">¥{{ orderInfoData.totalPrice }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="mb-20 card">
|
|||
|
|
<view class="card-head">
|
|||
|
|
<view class="card-title">
|
|||
|
|
订单信息
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="card-content">
|
|||
|
|
<view class="infos">
|
|||
|
|
<view class="info-cell">
|
|||
|
|
<view class="info-cell-label">
|
|||
|
|
订单编号
|
|||
|
|
</view>
|
|||
|
|
<view class="info-cell-value">
|
|||
|
|
{{ orderInfoData.orderId }}
|
|||
|
|
</view>
|
|||
|
|
<view class="info-cell-operation">
|
|||
|
|
复制
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="info-cell">
|
|||
|
|
<view class="info-cell-label">
|
|||
|
|
创建时间
|
|||
|
|
</view>
|
|||
|
|
<view class="info-cell-value">
|
|||
|
|
{{ orderInfoData.createTime }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="info-cell"
|
|||
|
|
v-if="orderInfoData.status > 0"
|
|||
|
|
>
|
|||
|
|
<view class="info-cell-label">
|
|||
|
|
创建时间
|
|||
|
|
</view>
|
|||
|
|
<view class="info-cell-value">
|
|||
|
|
{{ orderInfoData.payTime }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="info-cell"
|
|||
|
|
v-if="orderInfoData.status >= 1"
|
|||
|
|
>
|
|||
|
|
<view class="info-cell-label">
|
|||
|
|
发货时间
|
|||
|
|
</view>
|
|||
|
|
<view class="info-cell-value">
|
|||
|
|
<!-- {{ orderInfoData.payTime }} -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="mb-20 card"
|
|||
|
|
v-if="orderInfoData.status > 1"
|
|||
|
|
>
|
|||
|
|
<view class="card-head">
|
|||
|
|
<view class="card-title">
|
|||
|
|
物流信息
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="card-content "
|
|||
|
|
v-if="expressData"
|
|||
|
|
>
|
|||
|
|
<view class="paddingH-10">
|
|||
|
|
<uv-steps
|
|||
|
|
current="0"
|
|||
|
|
direction="column"
|
|||
|
|
activeColor="#EE6D46"
|
|||
|
|
inactiveColor="#E5E5E5"
|
|||
|
|
>
|
|||
|
|
<uv-steps-item
|
|||
|
|
v-for="(item, index) in expressData"
|
|||
|
|
:key="index"
|
|||
|
|
:title="item.acceptStation"
|
|||
|
|
:desc="item.acceptTime"
|
|||
|
|
></uv-steps-item>
|
|||
|
|
</uv-steps>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bottom-bar-bg"></view>
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
class="order-actions bottom-bar"
|
|||
|
|
v-if="orderInfoData.status == 0"
|
|||
|
|
>
|
|||
|
|
<!-- 未支付 -->
|
|||
|
|
<view class="order-actions-left">
|
|||
|
|
</view>
|
|||
|
|
<view class="order-actions-btns">
|
|||
|
|
<view
|
|||
|
|
class="order-actions-delete"
|
|||
|
|
@tap="handleCancel"
|
|||
|
|
>
|
|||
|
|
取消订单
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="order-actions-primary"
|
|||
|
|
@tap="handlePay"
|
|||
|
|
>
|
|||
|
|
立即付款
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
class="order-actions bottom-bar"
|
|||
|
|
v-if="orderInfoData.status == 0"
|
|||
|
|
>
|
|||
|
|
<!-- 待发货 -->
|
|||
|
|
<view class="order-actions-left">
|
|||
|
|
</view>
|
|||
|
|
<view class="order-actions-btns">
|
|||
|
|
<view
|
|||
|
|
class="order-actions-delete"
|
|||
|
|
@tap="toSelectRefundGood(orderInfoData)"
|
|||
|
|
>
|
|||
|
|
申请退款
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="order-actions bottom-bar"
|
|||
|
|
v-if="orderInfoData.status == 1"
|
|||
|
|
>
|
|||
|
|
<!-- 已发货 待收货 -->
|
|||
|
|
<view class="order-actions-left">
|
|||
|
|
</view>
|
|||
|
|
<view class="order-actions-btns">
|
|||
|
|
<view
|
|||
|
|
class="order-actions-delete"
|
|||
|
|
@tap="toSelectRefundGood(orderInfoData)"
|
|||
|
|
>
|
|||
|
|
申请退款
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="order-actions-primary"
|
|||
|
|
@tap="handleOrderTake"
|
|||
|
|
>
|
|||
|
|
确认收货
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
class="order-actions bottom-bar"
|
|||
|
|
v-if="orderInfoData.status == 2"
|
|||
|
|
>
|
|||
|
|
<!-- 待评价 -->
|
|||
|
|
<view class="order-actions-left">
|
|||
|
|
</view>
|
|||
|
|
<view class="order-actions-btns">
|
|||
|
|
<view
|
|||
|
|
class="order-actions-primary"
|
|||
|
|
@tap="toSelectRefundGood(orderInfoData)"
|
|||
|
|
>
|
|||
|
|
申请售后
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="order-actions-primary"
|
|||
|
|
@tap="toEvaluate"
|
|||
|
|
>
|
|||
|
|
去评价
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
class="order-actions bottom-bar"
|
|||
|
|
v-if="orderInfoData.status == 3"
|
|||
|
|
>
|
|||
|
|
<!-- 已完成 -->
|
|||
|
|
<view class="order-actions-left">
|
|||
|
|
</view>
|
|||
|
|
<view class="order-actions-btns">
|
|||
|
|
<view
|
|||
|
|
class="order-actions-delete"
|
|||
|
|
@tap="handleDelete"
|
|||
|
|
>
|
|||
|
|
删除订单
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="order-actions-primary"
|
|||
|
|
@tap="toSelectRefundGood(orderInfoData)"
|
|||
|
|
>
|
|||
|
|
申请售后
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 退款中 -->
|
|||
|
|
<view
|
|||
|
|
class="order-actions bottom-bar"
|
|||
|
|
v-if="orderInfoData.status == 5"
|
|||
|
|
>
|
|||
|
|
<view class="order-actions-left">
|
|||
|
|
</view>
|
|||
|
|
<view class="order-actions-btns">
|
|||
|
|
<view class="order-actions-primary">
|
|||
|
|
查看订单
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 已退款 -->
|
|||
|
|
<!-- <view
|
|||
|
|
class="order-actions bottom-bar"
|
|||
|
|
v-if="orderInfoData.status == 6"
|
|||
|
|
>
|
|||
|
|
<view class="order-actions-left">
|
|||
|
|
</view>
|
|||
|
|
<view class="order-actions-btns">
|
|||
|
|
<view class="order-actions-primary">
|
|||
|
|
查看订单
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<!-- 退款 -->
|
|||
|
|
<!-- <view
|
|||
|
|
class="order-actions bottom-bar"
|
|||
|
|
v-if="orderInfoData.status == 7"
|
|||
|
|
>
|
|||
|
|
<view class="order-actions-left">
|
|||
|
|
</view>
|
|||
|
|
<view class="order-actions-btns">
|
|||
|
|
<view class="order-actions-primary">
|
|||
|
|
查看订单
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</layout>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
import { navigateTo, back } from '@/utils/router'
|
|||
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|||
|
|
import { useMainStore } from '@/store/store'
|
|||
|
|
import { orderCancel, orderInfo, orderTake, orderDelete, orderExpress } from '@/api/order'
|
|||
|
|
import { orderReStatus } from '@/config'
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
const orderInfoData = ref(null)
|
|||
|
|
const orderInfoStatusMsg = ref('')
|
|||
|
|
const expressData = ref(null)
|
|||
|
|
|
|||
|
|
|
|||
|
|
const handleOrderInfo = async (option) => {
|
|||
|
|
const res = await orderInfo(option)
|
|||
|
|
orderInfoData.value = res
|
|||
|
|
handleMsg(res.status)
|
|||
|
|
if (res._status._type > 1) {
|
|||
|
|
const express = await orderExpress({
|
|||
|
|
orderCode: orderInfoData.value.orderId,
|
|||
|
|
shipperCode: orderInfoData.value.deliverySn,
|
|||
|
|
logisticCode: orderInfoData.value.deliveryId,
|
|||
|
|
})
|
|||
|
|
console.log("gxs --> % handleOrderInfo % express:\n", express)
|
|||
|
|
expressData.value = express.traces.reverse()
|
|||
|
|
}
|
|||
|
|
console.log("--> % handleOrderInfo % res:\n", res)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
const handleOrderTake = async () => {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确认收货',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
let option = {
|
|||
|
|
uni: orderInfoData.value.orderId,
|
|||
|
|
}
|
|||
|
|
const res = await orderTake(option)
|
|||
|
|
handleOrderInfo({
|
|||
|
|
key: option.orderId
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
// console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
const handlePay = () => {
|
|||
|
|
|
|||
|
|
navigateTo({
|
|||
|
|
url: '/pages/selectPlay/selectPlay',
|
|||
|
|
query: {
|
|||
|
|
key: orderInfoData.value.unique,
|
|||
|
|
orderId: orderInfoData.value.orderId,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
const toEvaluate = (item) => {
|
|||
|
|
navigateTo({
|
|||
|
|
url: '/pages/evaluate/evaluate',
|
|||
|
|
query: {
|
|||
|
|
unique: item.unique,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const toSelectRefundGood = () => {
|
|||
|
|
navigateTo({
|
|||
|
|
url: '/pages/selectRefundGood/selectRefundGood',
|
|||
|
|
query: {
|
|||
|
|
orderId: orderInfoData.value.orderId,
|
|||
|
|
id: orderInfoData.value.id,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleMsg = (status) => {
|
|||
|
|
orderInfoStatusMsg.value = orderReStatus[status]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
const handleDelete = async () => {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确认删除订单',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
await orderDelete({
|
|||
|
|
id: orderInfoData.value.orderId
|
|||
|
|
})
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleCancel = async () => {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确认取消订单',
|
|||
|
|
success: async (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
await orderCancel({
|
|||
|
|
id: data.value.orderId
|
|||
|
|
})
|
|||
|
|
data.value = null
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '已取消',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
console.log('用户点击取消');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onLoad((option) => {
|
|||
|
|
handleOrderInfo({
|
|||
|
|
key: option.orderId
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.orderList {
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-header {}
|
|||
|
|
|
|||
|
|
.order-status-info {
|
|||
|
|
padding: 50rpx 0;
|
|||
|
|
|
|||
|
|
|
|||
|
|
.order-status {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 42rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.image {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-date {
|
|||
|
|
height: 33rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-infos {
|
|||
|
|
margin: 0 40rpx;
|
|||
|
|
padding: 40rpx 0 20rpx;
|
|||
|
|
|
|||
|
|
&:after {
|
|||
|
|
content: '';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|