v1.0
This commit is contained in:
hupeng
531
pages/orderInfo/orderInfo.vue
Normal file
531
pages/orderInfo/orderInfo.vue
Normal file
@ -0,0 +1,531 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user