617 lines
16 KiB
Vue
617 lines
16 KiB
Vue
<template>
|
||
<layout class="orderInfo">
|
||
<uv-navbar
|
||
:fixed="false"
|
||
title="订单详情"
|
||
left-arrow
|
||
@leftClick="goBack"
|
||
/>
|
||
<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"
|
||
:class="'order-status-'+ orderInfoData.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> -->
|
||
<view
|
||
v-for="(item, index) in orderInfoData.cartInfo"
|
||
class="order-evaluate"
|
||
:class="{evaluateBtn: orderInfoData._status._type == 3}"
|
||
>
|
||
<goods
|
||
list
|
||
link
|
||
interval
|
||
desc="3"
|
||
showAction
|
||
model
|
||
:purchase="item.cartNum"
|
||
:data="item.productInfo"
|
||
>
|
||
<template #price>
|
||
￥{{ item.truePrice }}
|
||
</template>
|
||
</goods>
|
||
<view
|
||
v-if="orderInfoData.status == 2 && item.isReply === 0"
|
||
@tap.stop="toEvaluate(item)"
|
||
class="order-actions-primary order-evaluate-btn"
|
||
>去评价
|
||
</view>
|
||
</view>
|
||
<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.cost }}</view>
|
||
</view>
|
||
<view class="info-cell ">
|
||
<view class="info-cell-label">优惠：</view>
|
||
<view class="info-cell-value">¥{{ orderInfoData.couponPrice }}</view>
|
||
</view>
|
||
<view class="info-cell ">
|
||
<view class="info-cell-label">运费：</view>
|
||
<view class="info-cell-value">¥{{ orderInfoData.totalPostage }}</view>
|
||
</view>
|
||
<view class="info-cell ">
|
||
<view class="info-cell-label">总计：</view>
|
||
<view class="info-cell-value">¥{{ orderInfoData.payPrice }}</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"
|
||
@click="setData(orderInfoData.orderId,'复制成功')"
|
||
>
|
||
复制
|
||
</view>
|
||
|
||
</view>
|
||
<view class="info-cell">
|
||
<view class="info-cell-label">
|
||
创建时间
|
||
</view>
|
||
<view class="info-cell-value">
|
||
{{ $timeFormat(orderInfoData.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="info-cell"
|
||
v-if="orderInfoData.status > 0"
|
||
>
|
||
<view class="info-cell-label">
|
||
付款时间
|
||
</view>
|
||
<view class="info-cell-value">
|
||
{{ $timeFormat(orderInfoData.payTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="info-cell"
|
||
v-if="orderInfoData.deliveryTime"
|
||
>
|
||
<view class="info-cell-label">
|
||
发货时间
|
||
</view>
|
||
<view class="info-cell-value">
|
||
{{ $timeFormat(orderInfoData.deliveryTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||
</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">
|
||
<view class="no-express" v-if="expressData.length === 0">暂无轨迹信息</view>
|
||
<uv-steps
|
||
v-else
|
||
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 === 99"
|
||
>
|
||
<!-- 待发货 -->
|
||
<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(orderInfoData.cartInfo[0])"-->
|
||
<!-- >-->
|
||
<!-- 去评价-->
|
||
<!-- </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>
|
||
<!-- 支付弹窗 -->
|
||
<PayPopup
|
||
ref="payPopupRef"
|
||
@confrim="paySucess"
|
||
/>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, unref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { orderCancel, orderDelete, orderExpress, orderInfo, orderTake } from '@/api/order'
|
||
import { orderReStatus } from '@/config'
|
||
import { useRouter } from "@/hooks/useRouter";
|
||
import { useShearPlate } from "@/hooks/useShearPlate";
|
||
import { useGlobalProperties } from "@/hooks";
|
||
import PayPopup from "@/components/PayPopup/index.vue";
|
||
|
||
const {$timeFormat} = useGlobalProperties()
|
||
|
||
const {getParams, push, goBack} = useRouter()
|
||
|
||
const orderInfoData = ref(null)
|
||
const orderInfoStatusMsg = ref('')
|
||
const expressData = ref(null)
|
||
|
||
const {setData} = useShearPlate();
|
||
|
||
|
||
const handleOrderInfo = async (option) => {
|
||
const res = await orderInfo(option)
|
||
orderInfoData.value = res
|
||
res.status = res.paid === 1 && res.status === 0 ? 99 : res.status
|
||
handleMsg(res.status)
|
||
if (res._status._type > 1) {
|
||
const express = await orderExpress({
|
||
orderCode: orderInfoData.value.orderId,
|
||
shipperCode: orderInfoData.value.deliverySn,
|
||
logisticCode: orderInfoData.value.deliveryId,
|
||
})
|
||
expressData.value = express.traces.reverse()
|
||
}
|
||
}
|
||
|
||
|
||
const handleOrderTake = async () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认收货',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
let option = {
|
||
uni: orderInfoData.value.orderId,
|
||
}
|
||
const res = await orderTake(option)
|
||
uni.showToast({
|
||
title: '收货成功',
|
||
duration: 2000
|
||
});
|
||
handleOrderInfo({
|
||
key: option.uni
|
||
})
|
||
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
|
||
const handlePay = () => {
|
||
openPay(orderInfoData.value.orderId)
|
||
// push({url: '/pages/selectPlay/selectPlay'}, {
|
||
// data: {
|
||
// key: orderInfoData.value.unique,
|
||
// orderId: orderInfoData.value.orderId,
|
||
// }
|
||
// })
|
||
}
|
||
|
||
// 返回列表
|
||
const goList = ()=>{
|
||
let status = 0
|
||
switch (orderInfoData.value.status){
|
||
case -1:
|
||
status = -1
|
||
break
|
||
case 0:
|
||
status = 0
|
||
break
|
||
case 99:
|
||
status = 1
|
||
break
|
||
default:
|
||
status = orderInfoData.value.status +1
|
||
}
|
||
push({url: '/pages/orderList/orderList'}, {
|
||
data: {
|
||
type: status
|
||
}
|
||
})
|
||
}
|
||
|
||
// 去评价
|
||
const toEvaluate = (item) => {
|
||
push({url: '/pages/evaluate/evaluate'}, {
|
||
data: {
|
||
unique: item.unique,
|
||
}
|
||
})
|
||
}
|
||
|
||
const toSelectRefundGood = () => {
|
||
push({url: '/pages/selectRefundGood/selectRefundGood'}, {
|
||
data: {
|
||
orderId: orderInfoData.value.orderId,
|
||
id: orderInfoData.value.id,
|
||
status: orderInfoData.value.status === 99?0:orderInfoData.value.status
|
||
}
|
||
})
|
||
}
|
||
|
||
const handleMsg = (status) => {
|
||
orderInfoStatusMsg.value = orderReStatus[status]
|
||
}
|
||
|
||
|
||
const handleDelete = async () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认删除订单',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
await orderDelete({
|
||
uni: orderInfoData.value.orderId
|
||
})
|
||
uni.showToast({
|
||
title: '已删除',
|
||
duration: 2000
|
||
});
|
||
setTimeout(()=>{
|
||
goList()
|
||
},2000)
|
||
} else if (res.cancel) {
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
const handleCancel = async () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认取消订单',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
await orderCancel({
|
||
id: orderInfoData.value.orderId
|
||
})
|
||
uni.showToast({
|
||
title: '已取消',
|
||
duration: 2000
|
||
});
|
||
setTimeout(()=>{
|
||
goList()
|
||
},2000)
|
||
} else if (res.cancel) {
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// ============================== 支付相关 ===============================
|
||
const payPopupRef = ref()
|
||
|
||
function openPay(orderId) {
|
||
unref(payPopupRef).show(orderId)
|
||
}
|
||
|
||
|
||
function paySuccess() {
|
||
push({url: '/pages/payStatus/index?type=1'})
|
||
}
|
||
|
||
|
||
onLoad((options) => {
|
||
const params = getParams(options)
|
||
handleOrderInfo({
|
||
key: params.orderId
|
||
})
|
||
})
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.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;
|
||
padding-left: 50rpx;
|
||
background-size: 40rpx 40rpx;
|
||
background-position: left center;
|
||
background-repeat: no-repeat;
|
||
|
||
.image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
&.order-status-0,&.order-status--1 {
|
||
background-image: url("../../static/images/icon-order-info-1.png");
|
||
}
|
||
|
||
&.order-status-1, &.order-status-99 {
|
||
background-image: url("../../static/images/icon-order-info-2.png");
|
||
}
|
||
|
||
&.order-status-2, &.order-status-3 {
|
||
background-image: url("../../static/images/icon-order-info-4.png");
|
||
}
|
||
}
|
||
|
||
.order-date {
|
||
height: 33rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
}
|
||
|
||
.order-infos {
|
||
margin: 0 40rpx;
|
||
padding: 40rpx 0 20rpx;
|
||
|
||
&:after {
|
||
content: '';
|
||
}
|
||
}
|
||
|
||
.no-express{
|
||
font-size: 26rpx;
|
||
padding: 20rpx 14rpx 30rpx;
|
||
}
|
||
</style>
|