You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
667 lines
16 KiB
667 lines
16 KiB
<template>
|
|
<view class="page__view">
|
|
|
|
<navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#FFFFFF" />
|
|
|
|
<view class="main">
|
|
|
|
<view class="flex address" v-if="addressData">
|
|
<addressView :data="addressData" :showIcon="true" :enableCopy="true"></addressView>
|
|
</view>
|
|
|
|
<template v-if="orderData">
|
|
|
|
<view class="card detail">
|
|
<view class="flex card-top">
|
|
<view class="title">订单详情</view>
|
|
<view :class="['flex', 'status', `status-${status}`]">{{ statusDesc }}</view>
|
|
</view>
|
|
<view class="card-main">
|
|
<view class="flex product" v-for="item in orderData.appletOrderProductList" :key="item.id">
|
|
<image class="img" :src="getCoverImg(item.image)" mode="scaleToFill"></image>
|
|
<view class="info">
|
|
<view class="row">{{ item.productName }}</view>
|
|
<view class="flex row">
|
|
<view class="row-label">产品类型：</view>
|
|
<!-- todo: check key -->
|
|
<view class="row-content">{{ getTypeDesc(item.type) || '--' }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">产品内容：</view>
|
|
<!-- todo: check key -->
|
|
<view class="row-content">{{ item.content || '--' }}</view>
|
|
</view>
|
|
<view class="flex price">
|
|
<text class="price-label">价格：</text>
|
|
<text class="price-unit">¥</text><text class="price-value">{{ item.price }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex row card-bottom">
|
|
<view class="row-label">总价格</view>
|
|
<view class="flex row-content price">¥<text class="price-value">{{ orderData.orderAmount }}</text></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="orderData.process && orderData.process.length" class="card service">
|
|
<view class="flex card-top">
|
|
<view class="title">售后信息</view>
|
|
</view>
|
|
<view class="card-main">
|
|
<uv-steps
|
|
current="0"
|
|
direction="column"
|
|
dot
|
|
activeColor="#10A934"
|
|
inactiveColor="#C6C6C6"
|
|
>
|
|
<uv-steps-item
|
|
v-for="(item, index) in orderData.process"
|
|
:key="item.id"
|
|
>
|
|
<template #title>
|
|
<view class="flex step-header">
|
|
<view :class="['step-title', index == 0 ? 'highlight' : '']">{{ item.title }}</view>
|
|
<view class="step-time">{{ item.createTime }}</view>
|
|
</view>
|
|
</template>
|
|
<template #desc>
|
|
<view class="step-desc">{{ item.text }}</view>
|
|
</template>
|
|
</uv-steps-item>
|
|
</uv-steps>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card info">
|
|
<view class="flex card-top">
|
|
<view class="title">订单信息</view>
|
|
</view>
|
|
<view class="card-main">
|
|
<view class="flex row">
|
|
<view class="row-label">订单编号</view>
|
|
<view class="row-content">{{ orderData.orderNo }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">下单时间</view>
|
|
<view class="row-content">{{ $dayjs(orderData.orderDate).format('YYYY-MM-DD HH:mm') }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<view class="notice">
|
|
<view class="notice-header">下单须知</view>
|
|
<view class="notice-content">
|
|
<uv-parse :content="configList['order_instructions']"></uv-parse>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex bottom" v-if="[0, 1, 2, 3, 4].includes(status)">
|
|
<view class="flex bar">
|
|
<button plain class="flex flex-column btn btn-service" open-type="contact">
|
|
<image class="btn-service-icon" src="@/pages_order/static/order/icon-service.png" mode="widthFix"></image>
|
|
<view>联系客服</view>
|
|
</button>
|
|
<view class="flex cols">
|
|
<!-- 待支付 -->
|
|
<template v-if="status == 0">
|
|
<view class="flex col price">
|
|
<view class="price-label">合计</view>
|
|
<text class="price-unit">¥</text><text class="price-value">{{ orderData.orderAmount }}</text>
|
|
</view>
|
|
<button class="flex col btn btn-primary" @click="onPay">立即支付</button>
|
|
</template>
|
|
<!-- 待发货 -->
|
|
<template v-else-if="status == 1">
|
|
<button class="flex col btn" @click="onApplyService">申请售后</button>
|
|
<!-- 自采检测 -->
|
|
<template v-if="detectProduct && detectProduct.subscribeType == 0">
|
|
<button class="flex col btn btn-primary" @click="onDetectModify">修改</button>
|
|
</template>
|
|
</template>
|
|
<!-- 待收货 -->
|
|
<template v-else-if="status == 2">
|
|
<button class="flex col btn" @click="onApplyService">申请售后</button>
|
|
<!-- 检测 subscribeType: 0自采，1上门，2到店，3已取消 -->
|
|
<template v-if="detectProduct">
|
|
<!-- 自采检测 -->
|
|
<template v-if="detectProduct.subscribeType == 0">
|
|
<button class="flex col btn btn-primary" @click="onDetectSendBack">线上回寄试剂盒</button>
|
|
</template>
|
|
<template v-else>
|
|
<button class="flex col btn btn-primary" @click="onDetectBook">检测预约</button>
|
|
</template>
|
|
</template>
|
|
<!-- 其他商品 -->
|
|
<template v-else>
|
|
<button class="flex col btn btn-primary" @click="onConfirmReceipt">确认收货</button>
|
|
</template>
|
|
</template>
|
|
<!-- 待评价 -->
|
|
<template v-else-if="status == 3">
|
|
<button class="flex col btn" @click="onApplyService">申请售后</button>
|
|
<button class="flex col btn btn-primary" @click="onComment">立即评价</button>
|
|
</template>
|
|
<!-- 已完成 -->
|
|
<template v-else-if="status == 4">
|
|
<button class="flex col btn" @click="onApplyService">申请售后</button>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<payPopup ref="payPopup" @paySuccess="getData"></payPopup>
|
|
<serviceSelectPopup ref="serviceSelectPopup"></serviceSelectPopup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import addressView from '@/pages_order/address/addressView.vue'
|
|
import payPopup from '@/pages_order/order/payPopup.vue'
|
|
import serviceSelectPopup from '@/pages_order/applyService/serviceSelectPopup.vue'
|
|
|
|
// 订单状态 0待支付 1待发货 2待收货 3待评价 4已完成
|
|
const STATUS_AND_DESC_MAPPING = {
|
|
0: '待支付',
|
|
1: '待发货',
|
|
2: '待收货',
|
|
3: '待评价',
|
|
4: '已完成',
|
|
5: '售后',
|
|
}
|
|
|
|
// 产品类型（0营养剂，1预约，2课程）
|
|
const TYPE_AND_DESC_MAPPING = {
|
|
0: '营养剂',
|
|
1: '检测',
|
|
2: '课程',
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
addressView,
|
|
payPopup,
|
|
serviceSelectPopup,
|
|
},
|
|
data() {
|
|
return {
|
|
id: null,
|
|
addressData: null,
|
|
orderData: null,
|
|
}
|
|
},
|
|
computed: {
|
|
status() {
|
|
const { orderStatus, afterSales } = this.orderData || {}
|
|
|
|
if (afterSales) {
|
|
return 5
|
|
}
|
|
|
|
return orderStatus
|
|
},
|
|
statusDesc() {
|
|
return STATUS_AND_DESC_MAPPING[this.status]
|
|
},
|
|
detectProduct() {
|
|
const { appletOrderProductList } = this.orderData || {}
|
|
|
|
if (appletOrderProductList?.length == 1 && appletOrderProductList?.[0]?.type == 1) { // type: 产品类型（0营养剂，1预约，2课程）
|
|
return appletOrderProductList[0]
|
|
}
|
|
|
|
return null
|
|
},
|
|
},
|
|
onShow() {
|
|
console.log('onShow')
|
|
|
|
if (!this.id) {
|
|
return
|
|
}
|
|
|
|
this.getData()
|
|
|
|
},
|
|
onLoad(arg) {
|
|
this.id = arg.id
|
|
|
|
this.getData()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
try {
|
|
const result = await this.$fetch('detailOrder', { id: this.id })
|
|
|
|
const {
|
|
customerName,
|
|
customerPhone,
|
|
deliveryAddressDetail,
|
|
...orderData
|
|
} = result
|
|
|
|
this.addressData = {
|
|
name: customerName,
|
|
phone: customerPhone,
|
|
detail: deliveryAddressDetail,
|
|
}
|
|
|
|
this.orderData = orderData
|
|
|
|
} catch (err) {
|
|
|
|
}
|
|
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
getTypeDesc(type) {
|
|
return TYPE_AND_DESC_MAPPING[type]
|
|
},
|
|
getCoverImg(image) {
|
|
return image?.split?.(',')?.[0] || ''
|
|
},
|
|
onPay() {
|
|
|
|
const {
|
|
id,
|
|
title,
|
|
orderAmount
|
|
} = this.orderData
|
|
|
|
|
|
const obj = {
|
|
id,
|
|
title,
|
|
orderAmount,
|
|
}
|
|
|
|
this.$refs.payPopup.open(obj)
|
|
|
|
},
|
|
async onConfirmReceipt() {
|
|
try {
|
|
|
|
await this.$fetch('confirmOrder', { id: this.orderData.id })
|
|
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '确认收货成功',
|
|
});
|
|
|
|
this.getData()
|
|
|
|
} catch (err) {
|
|
|
|
}
|
|
},
|
|
onComment() {
|
|
this.$utils.navigateTo(`/pages_order/comment/commentWrite?orderId=${this.orderData.id}`)
|
|
},
|
|
onApplyService() {
|
|
|
|
console.log('orderData', this.orderData)
|
|
|
|
const {
|
|
id,
|
|
appletOrderProductList,
|
|
} = this.orderData
|
|
|
|
|
|
const obj = {
|
|
id,
|
|
appletOrderProductList: appletOrderProductList.map(item => ({ ...item, statusDesc: this.statusDesc })),
|
|
}
|
|
|
|
this.$refs.serviceSelectPopup.open(obj)
|
|
},
|
|
onDetectModify() {
|
|
// todo
|
|
},
|
|
onDetectSendBack() {
|
|
// todo
|
|
},
|
|
onDetectBook() {
|
|
// todo
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.page__view {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background-color: $uni-bg-color;
|
|
position: relative;
|
|
|
|
/deep/ .nav-bar__view {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.main {
|
|
padding: calc(var(--status-bar-height) + 144rpx) 32rpx 224rpx 32rpx;
|
|
}
|
|
|
|
.address {
|
|
padding: 24rpx 32rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.card {
|
|
margin-top: 40rpx;
|
|
padding: 32rpx;
|
|
background: #FAFAFF;
|
|
border: 2rpx solid #FFFFFF;
|
|
border-radius: 32rpx;
|
|
|
|
&-top {
|
|
margin-bottom: 32rpx;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
line-height: 1.4;
|
|
color: #252545;
|
|
}
|
|
|
|
.status {
|
|
display: inline-flex;
|
|
min-width: 120rpx;
|
|
padding: 6rpx 0;
|
|
box-sizing: border-box;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
color: #252545;
|
|
background: #F3F3F3;
|
|
border-radius: 12rpx;
|
|
|
|
&-0 {
|
|
color: #FF860E;
|
|
background: #FFF4E9;
|
|
}
|
|
|
|
&-1 {
|
|
color: #2799E0;
|
|
background: #EEF7FD;
|
|
}
|
|
|
|
&-2 {
|
|
color: #7D27E0;
|
|
background: #F5EEFD;
|
|
}
|
|
|
|
&-5 {
|
|
color: #E53C29;
|
|
background: #FDE7E5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.row {
|
|
justify-content: space-between;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 1.4;
|
|
|
|
&-label {
|
|
flex: none;
|
|
color: #8B8B8B;
|
|
}
|
|
|
|
&-content {
|
|
color: #393939;
|
|
}
|
|
}
|
|
|
|
&.detail {
|
|
|
|
.product {
|
|
margin-bottom: 32rpx;
|
|
column-gap: 24rpx;
|
|
|
|
.img {
|
|
flex: none;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
padding: 24rpx 32rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 32rpx;
|
|
|
|
.row {
|
|
margin-bottom: 16rpx;
|
|
justify-content: flex-start;
|
|
column-gap: 4rpx;
|
|
}
|
|
|
|
.price {
|
|
justify-content: flex-start;
|
|
column-gap: 8rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
|
|
&-label {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #8B8B8B;
|
|
}
|
|
|
|
&-unit {
|
|
font-size: 24rpx;
|
|
color: #7451DE;
|
|
}
|
|
|
|
&-value {
|
|
font-size: 32rpx;
|
|
color: #7451DE;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-bottom {
|
|
.price {
|
|
column-gap: 8rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
color: #7451DE;
|
|
|
|
&-value {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.info {
|
|
.row + .row {
|
|
margin-top: 32rpx;
|
|
}
|
|
}
|
|
|
|
&.service {
|
|
|
|
.step {
|
|
|
|
&-header {
|
|
justify-content: flex-start;
|
|
column-gap: 24rpx;
|
|
padding-left: 24rpx;
|
|
}
|
|
|
|
&-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
line-height: 1.4;
|
|
color: #000000;
|
|
|
|
&.highlight {
|
|
font-weight: 500;
|
|
color: #10A934;
|
|
}
|
|
}
|
|
|
|
&-time {
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
color: #8B8B8B;
|
|
}
|
|
|
|
&-desc {
|
|
padding: 16rpx 0 16rpx 24rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
color: #777777;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.notice {
|
|
margin-top: 40rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
|
|
&-header {
|
|
font-size: 28rpx;
|
|
line-height: 1.4;
|
|
color: #393939;
|
|
}
|
|
|
|
&-content {
|
|
margin-top: 24rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
color: #BABABA;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
|
|
width: 100vw;
|
|
// height: 200rpx;
|
|
padding: 24rpx 40rpx;
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
align-items: flex-start;
|
|
|
|
.bar {
|
|
width: 100%;
|
|
column-gap: 32rpx;
|
|
}
|
|
|
|
.btn {
|
|
background: transparent;
|
|
border: none;
|
|
|
|
&-service {
|
|
flex: none;
|
|
row-gap: 4rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
line-height: 1.1;
|
|
color: #999999;
|
|
|
|
&-icon {
|
|
width: 52rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cols {
|
|
flex: 1;
|
|
column-gap: 32rpx;
|
|
|
|
.col {
|
|
flex: 1;
|
|
}
|
|
|
|
.btn {
|
|
padding: 14rpx 0;
|
|
box-sizing: border-box;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 36rpx;
|
|
line-height: 1.4;
|
|
color: #252545;
|
|
border: 2rpx solid #252545;
|
|
border-radius: 41rpx;
|
|
|
|
&-primary {
|
|
padding: 16rpx 0;
|
|
color: #FFFFFF;
|
|
background-image: linear-gradient(to right, #4B348F, #845CFA);
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
column-gap: 8rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
line-height: 1.4;
|
|
|
|
&-label {
|
|
color: #626262;
|
|
}
|
|
|
|
&-unit,
|
|
&-value {
|
|
font-weight: 500;
|
|
color: #7451DE;
|
|
|
|
.highlight {
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
|
|
&-value {
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|