代码提交
This commit is contained in:
黄少君
@ -1,23 +1,26 @@
|
||||
<template>
|
||||
<layout class="orderInfo">
|
||||
<uv-navbar
|
||||
:fixed="false"
|
||||
title="订单详情"
|
||||
left-arrow
|
||||
@leftClick="$onClickLeft"
|
||||
:fixed="false"
|
||||
title="订单详情"
|
||||
left-arrow
|
||||
@leftClick="goList"
|
||||
/>
|
||||
<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"
|
||||
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">
|
||||
<view
|
||||
class="order-status"
|
||||
:class="'order-status-'+ orderInfoData.status"
|
||||
>
|
||||
<!-- <image
|
||||
class="image"
|
||||
src="@/static/images/kjzq.png"
|
||||
@ -32,8 +35,8 @@
|
||||
<view class="address-icon">
|
||||
|
||||
<image
|
||||
class="image"
|
||||
src="@/static/images/icon-location.png"
|
||||
class="image"
|
||||
src="@/static/images/icon-location.png"
|
||||
/>
|
||||
</view>
|
||||
<view class="address-main">
|
||||
@ -60,45 +63,47 @@
|
||||
/>
|
||||
</view>
|
||||
</view> -->
|
||||
<goods
|
||||
list
|
||||
interval
|
||||
desc="3"
|
||||
showAction
|
||||
model
|
||||
purchase="x3"
|
||||
:data="item.productInfo"
|
||||
v-for="(item, index) in orderInfoData.cartInfo"
|
||||
<view
|
||||
v-for="(item, index) in orderInfoData.cartInfo"
|
||||
class="order-evaluate"
|
||||
:class="{evaluateBtn: orderInfoData._status._type == 3}"
|
||||
>
|
||||
<template
|
||||
#action
|
||||
v-if="orderInfoData.status == 2 && item.isReply > 0"
|
||||
<goods
|
||||
list
|
||||
interval
|
||||
desc="3"
|
||||
showAction
|
||||
model
|
||||
:purchase="item.cartNum"
|
||||
:data="item.productInfo"
|
||||
>
|
||||
<uv-button
|
||||
type="primary"
|
||||
text="去评价"
|
||||
size="small"
|
||||
@tap="toEvaluate(item)"
|
||||
></uv-button>
|
||||
</template>
|
||||
</goods>
|
||||
|
||||
<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.payPrice }}</view>
|
||||
<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.deductionPrice }}</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.freightPrice }}</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.totalPrice }}</view>
|
||||
<view class="info-cell-value">¥{{ orderInfoData.payPrice }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -118,7 +123,10 @@
|
||||
<view class="info-cell-value">
|
||||
{{ orderInfoData.orderId }}
|
||||
</view>
|
||||
<view class="info-cell-operation">
|
||||
<view
|
||||
class="info-cell-operation"
|
||||
@click="setData(orderInfoData.orderId,'复制成功')"
|
||||
>
|
||||
复制
|
||||
</view>
|
||||
|
||||
@ -128,37 +136,37 @@
|
||||
创建时间
|
||||
</view>
|
||||
<view class="info-cell-value">
|
||||
{{ orderInfoData.createTime }}
|
||||
{{ $timeFormat(orderInfoData.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="info-cell"
|
||||
v-if="orderInfoData.status > 0"
|
||||
class="info-cell"
|
||||
v-if="orderInfoData.status > 0"
|
||||
>
|
||||
<view class="info-cell-label">
|
||||
创建时间
|
||||
付款时间
|
||||
</view>
|
||||
<view class="info-cell-value">
|
||||
{{ orderInfoData.payTime }}
|
||||
{{ $timeFormat(orderInfoData.payTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="info-cell"
|
||||
v-if="orderInfoData.status >= 1"
|
||||
class="info-cell"
|
||||
v-if="orderInfoData.deliveryTime"
|
||||
>
|
||||
<view class="info-cell-label">
|
||||
发货时间
|
||||
</view>
|
||||
<view class="info-cell-value">
|
||||
<!-- {{ orderInfoData.payTime }} -->
|
||||
{{ $timeFormat(orderInfoData.deliveryTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="mb-20 card"
|
||||
v-if="orderInfoData.status > 1"
|
||||
class="mb-20 card"
|
||||
v-if="orderInfoData.status >= 1"
|
||||
>
|
||||
<view class="card-head">
|
||||
<view class="card-title">
|
||||
@ -166,21 +174,23 @@
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="card-content "
|
||||
v-if="expressData"
|
||||
class="card-content "
|
||||
v-if="expressData"
|
||||
>
|
||||
<view class="paddingH-10">
|
||||
<view class="no-express" v-if="expressData.length === 0">暂无轨迹信息</view>
|
||||
<uv-steps
|
||||
current="0"
|
||||
direction="column"
|
||||
activeColor="#EE6D46"
|
||||
inactiveColor="#E5E5E5"
|
||||
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"
|
||||
v-for="(item, index) in expressData"
|
||||
:key="index"
|
||||
:title="item.acceptStation"
|
||||
:desc="item.acceptTime"
|
||||
></uv-steps-item>
|
||||
</uv-steps>
|
||||
</view>
|
||||
@ -190,22 +200,22 @@
|
||||
<view class="bottom-bar-bg"></view>
|
||||
|
||||
<view
|
||||
class="order-actions bottom-bar"
|
||||
v-if="orderInfoData.status == 0"
|
||||
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"
|
||||
class="order-actions-delete"
|
||||
@tap="handleCancel"
|
||||
>
|
||||
取消订单
|
||||
</view>
|
||||
<view
|
||||
class="order-actions-primary"
|
||||
@tap="handlePay"
|
||||
class="order-actions-primary"
|
||||
@tap="handlePay"
|
||||
>
|
||||
立即付款
|
||||
</view>
|
||||
@ -213,38 +223,38 @@
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="order-actions bottom-bar"
|
||||
v-if="orderInfoData.status == 0"
|
||||
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)"
|
||||
class="order-actions-delete"
|
||||
@tap="toSelectRefundGood(orderInfoData)"
|
||||
>
|
||||
申请退款
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-actions bottom-bar"
|
||||
v-if="orderInfoData.status == 1"
|
||||
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)"
|
||||
class="order-actions-delete"
|
||||
@tap="toSelectRefundGood(orderInfoData)"
|
||||
>
|
||||
申请退款
|
||||
</view>
|
||||
<view
|
||||
class="order-actions-primary"
|
||||
@tap="handleOrderTake"
|
||||
class="order-actions-primary"
|
||||
@tap="handleOrderTake"
|
||||
>
|
||||
确认收货
|
||||
</view>
|
||||
@ -252,46 +262,46 @@
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="order-actions bottom-bar"
|
||||
v-if="orderInfoData.status == 2"
|
||||
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)"
|
||||
class="order-actions-primary"
|
||||
@tap="toSelectRefundGood(orderInfoData)"
|
||||
>
|
||||
申请售后
|
||||
</view>
|
||||
<view
|
||||
class="order-actions-primary"
|
||||
@tap="toEvaluate"
|
||||
>
|
||||
去评价
|
||||
</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"
|
||||
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"
|
||||
class="order-actions-delete"
|
||||
@tap="handleDelete"
|
||||
>
|
||||
删除订单
|
||||
</view>
|
||||
<view
|
||||
class="order-actions-primary"
|
||||
@tap="toSelectRefundGood(orderInfoData)"
|
||||
class="order-actions-primary"
|
||||
@tap="toSelectRefundGood(orderInfoData)"
|
||||
>
|
||||
申请售后
|
||||
</view>
|
||||
@ -300,8 +310,8 @@
|
||||
|
||||
<!-- 退款中 -->
|
||||
<view
|
||||
class="order-actions bottom-bar"
|
||||
v-if="orderInfoData.status == 5"
|
||||
class="order-actions bottom-bar"
|
||||
v-if="orderInfoData.status === 5"
|
||||
>
|
||||
<view class="order-actions-left">
|
||||
</view>
|
||||
@ -343,26 +353,38 @@
|
||||
|
||||
</view>
|
||||
</layout>
|
||||
<!-- 支付弹窗 -->
|
||||
<PayPopup
|
||||
ref="payPopupRef"
|
||||
@confrim="paySucess"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { navigateTo, back } from '@/utils/router'
|
||||
import { ref, unref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useMainStore } from '@/store/store'
|
||||
import { orderCancel, orderInfo, orderTake, orderDelete, orderExpress } from '@/api/order'
|
||||
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({
|
||||
@ -370,10 +392,8 @@ const handleOrderInfo = async (option) => {
|
||||
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)
|
||||
}
|
||||
|
||||
|
||||
@ -387,12 +407,14 @@ const handleOrderTake = async () => {
|
||||
uni: orderInfoData.value.orderId,
|
||||
}
|
||||
const res = await orderTake(option)
|
||||
toast({
|
||||
title: '收货成功'
|
||||
})
|
||||
handleOrderInfo({
|
||||
key: option.orderId
|
||||
key: option.uni
|
||||
})
|
||||
|
||||
} else if (res.cancel) {
|
||||
// console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -400,34 +422,40 @@ const handleOrderTake = async () => {
|
||||
}
|
||||
|
||||
|
||||
|
||||
const handlePay = () => {
|
||||
openPay(orderInfoData.value.orderId)
|
||||
// push({url: '/pages/selectPlay/selectPlay'}, {
|
||||
// data: {
|
||||
// key: orderInfoData.value.unique,
|
||||
// orderId: orderInfoData.value.orderId,
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
navigateTo({
|
||||
url: '/pages/selectPlay/selectPlay',
|
||||
query: {
|
||||
key: orderInfoData.value.unique,
|
||||
orderId: orderInfoData.value.orderId,
|
||||
// 返回列表
|
||||
const goList = ()=>{
|
||||
push({url: '/pages/orderList/orderList'}, {
|
||||
data: {
|
||||
type: orderInfoData.value.status === 99?1:orderInfoData.value.status+1,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 去评价
|
||||
const toEvaluate = (item) => {
|
||||
navigateTo({
|
||||
url: '/pages/evaluate/evaluate',
|
||||
query: {
|
||||
push({url: '/pages/evaluate/evaluate'}, {
|
||||
data: {
|
||||
unique: item.unique,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const toSelectRefundGood = () => {
|
||||
navigateTo({
|
||||
url: '/pages/selectRefundGood/selectRefundGood',
|
||||
query: {
|
||||
push({url: '/pages/selectRefundGood/selectRefundGood'}, {
|
||||
data: {
|
||||
orderId: orderInfoData.value.orderId,
|
||||
id: orderInfoData.value.id,
|
||||
status: orderInfoData.value.status === 99?0:orderInfoData.value.status
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -444,10 +472,16 @@ const handleDelete = async () => {
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await orderDelete({
|
||||
id: orderInfoData.value.orderId
|
||||
uni: orderInfoData.value.orderId
|
||||
})
|
||||
uni.showToast({
|
||||
title: '已删除',
|
||||
duration: 2000
|
||||
});
|
||||
setTimeout(()=>{
|
||||
goList()
|
||||
},2000)
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -468,28 +502,41 @@ const handleCancel = async () => {
|
||||
duration: 2000
|
||||
});
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
// ============================== 支付相关 ===============================
|
||||
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: option.orderId
|
||||
key: params.orderId
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="scss">
|
||||
.orderList {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.order-header {}
|
||||
.order-header {
|
||||
}
|
||||
|
||||
.order-status-info {
|
||||
padding: 50rpx 0;
|
||||
@ -502,12 +549,28 @@ onLoad((option) => {
|
||||
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 {
|
||||
@ -516,8 +579,6 @@ onLoad((option) => {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.order-infos {
|
||||
@ -528,4 +589,9 @@ onLoad((option) => {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.no-express{
|
||||
font-size: 26rpx;
|
||||
padding: 20rpx 14rpx 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user