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.
648 lines
16 KiB
648 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-${orderData.status}`]">{{ statusDesc }}</view>
|
|
</view>
|
|
<view class="card-main">
|
|
<view class="flex product" v-for="item in orderData.productList" :key="item.id">
|
|
<image class="img" :src="item.url" mode="scaleToFill"></image>
|
|
<view class="info">
|
|
<view class="row">{{ item.name }}</view>
|
|
<view class="flex row">
|
|
<view class="row-label">产品类型：</view>
|
|
<view class="row-content">{{ item.type }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">产品内容：</view>
|
|
<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.toFixed(2) }}</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.amount.toFixed(2) }}</text></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="orderData.status == 5" 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.serviceRecords"
|
|
: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.desc }}</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.number }}</view>
|
|
</view>
|
|
<view class="flex row">
|
|
<view class="row-label">下单时间</view>
|
|
<view class="row-content">{{ $dayjs(orderData.createTime).format('YYYY-MM-DD HH:mm') }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<view class="notice">
|
|
<view class="notice-header">下单须知</view>
|
|
<view class="notice-content">
|
|
<!-- todo: 替换配置项key -->
|
|
<uv-parse :content="configList['config_agreement']"></uv-parse>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex bottom" v-if="orderData && [0,1,2,3,4].includes(orderData.status)">
|
|
<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="orderData.status == 0">
|
|
<view class="flex col price">
|
|
<view class="price-label">合计</view>
|
|
<text class="price-unit">¥</text><text class="price-value">{{ orderData.amount.toFixed(2) }}</text>
|
|
</view>
|
|
<button class="flex col btn btn-primary" @click="onPay">立即支付</button>
|
|
</template>
|
|
<!-- todo: check 体检套餐 → 检测预约 -->
|
|
<!-- 待发货 -->
|
|
<template v-else-if="orderData.status == 1">
|
|
<button class="flex col btn" @click="onApplyService">申请售后</button>
|
|
</template>
|
|
<!-- 待收货 -->
|
|
<template v-else-if="orderData.status == 2">
|
|
<button class="flex col btn" @click="onApplyService">申请售后</button>
|
|
<button class="flex col btn btn-primary" @click="onConfirmReceipt">确认收货</button>
|
|
</template>
|
|
<!-- 待评价 -->
|
|
<template v-else-if="orderData.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="orderData.status == 4">
|
|
<button class="flex col btn" @click="onApplyService">申请售后</button>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
|
|
<payPopup ref="payPopup" @submitted="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'
|
|
|
|
const STATUS_AND_DESC_MAPPING = {
|
|
0: '待支付',
|
|
1: '待发货',
|
|
2: '待收货',
|
|
3: '待评价',
|
|
4: '已完成',
|
|
5: '售后',
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
addressView,
|
|
payPopup,
|
|
serviceSelectPopup,
|
|
},
|
|
data() {
|
|
return {
|
|
id: null,
|
|
addressData: null,
|
|
orderData: null,
|
|
}
|
|
},
|
|
computed: {
|
|
statusDesc() {
|
|
return STATUS_AND_DESC_MAPPING[this.orderData?.status]
|
|
},
|
|
},
|
|
onShow() {
|
|
console.log('onShow')
|
|
|
|
if (!this.id) {
|
|
return
|
|
}
|
|
|
|
this.getData()
|
|
|
|
},
|
|
onLoad(arg) {
|
|
console.log('onLoad')
|
|
this.id = arg.id
|
|
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
async getData() {
|
|
console.log('fetch data')
|
|
// todo: fetch data by id
|
|
|
|
this.addressData = {
|
|
id: '001',
|
|
name: '郑文锦',
|
|
phone: '18108341643',
|
|
area: ['海南省', '海口市', '秀英区'],
|
|
address: '秀英街道5单元183室',
|
|
// id: '006',
|
|
// name: '何炜',
|
|
// phone: '18108341643',
|
|
// area: ['新疆维吾尔自治区', '乌鲁木齐市', '沙依巴克区'],
|
|
// address: '新疆维吾尔自治区乌鲁木齐市沙依巴克区仓房沟片区街道4单元50室',
|
|
}
|
|
|
|
this.orderData = {
|
|
id: '001',
|
|
url: '/pages_order/static/index/recommend-pic.png',
|
|
title: '月度装定制营养包',
|
|
amount: 688,
|
|
productList: [
|
|
{
|
|
id: '0011',
|
|
url: '/pages_order/static/index/medicine-1.png',
|
|
name: '月度装定制营养包',
|
|
type: '保健品',
|
|
content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
|
|
price: 688.00,
|
|
count: 1,
|
|
countDesc: '1月装',
|
|
customized: true,
|
|
},
|
|
{
|
|
id: '0012',
|
|
url: '/pages_order/static/index/medicine-2.png',
|
|
name: '月度装定制营养包',
|
|
type: '保健品',
|
|
content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
|
|
price: 688.00,
|
|
count: 1,
|
|
countDesc: '1月装',
|
|
free: true,
|
|
},
|
|
{
|
|
id: '0013',
|
|
url: '/pages_order/static/index/medicine-3.png',
|
|
name: '月度装定制营养包',
|
|
type: '保健品',
|
|
content: '控糖精华萃 x30颗、膳食纤维 ×30颗',
|
|
price: 688.00,
|
|
count: 1,
|
|
countDesc: '1月装',
|
|
free: true,
|
|
},
|
|
],
|
|
serviceRecords: [
|
|
{
|
|
id: '003',
|
|
title: '退款成功',
|
|
desc: '平台已为您退款，具体到账时间请查询支付账户',
|
|
createTime: '2025-04-20 12:00',
|
|
},
|
|
{
|
|
id: '002',
|
|
title: '等待审核',
|
|
desc: '您的服务单已申请成功，待售后审核',
|
|
createTime: '2025-04-20 12:00',
|
|
},
|
|
{
|
|
id: '001',
|
|
title: '提交申请',
|
|
desc: '包装破损',
|
|
createTime: '2025-04-20 12:00',
|
|
},
|
|
],
|
|
userName: '周小艺',
|
|
phone: '15558661691',
|
|
number: 'BH872381728321983929',
|
|
createTime: '2025-04-28 08:14',
|
|
status: 5,
|
|
}
|
|
|
|
console.log('addressData', this.addressData)
|
|
console.log('orderData', this.orderData)
|
|
},
|
|
onPay() {
|
|
|
|
const {
|
|
id,
|
|
title,
|
|
amount
|
|
} = this.orderData
|
|
|
|
|
|
const obj = {
|
|
title,
|
|
orderId: id,
|
|
amount,
|
|
}
|
|
|
|
this.$refs.payPopup.open(obj)
|
|
|
|
},
|
|
onConfirmReceipt() {
|
|
// todo: fetch confirm
|
|
|
|
this.getData()
|
|
},
|
|
onComment() {
|
|
this.$utils.navigateTo(`/pages_order/comment/commentWrite?id=${this.orderData.id}`)
|
|
},
|
|
onApplyService() {
|
|
|
|
const {
|
|
id,
|
|
productList,
|
|
} = this.orderData
|
|
|
|
|
|
const obj = {
|
|
id,
|
|
productList,
|
|
}
|
|
|
|
this.$refs.serviceSelectPopup.open(obj)
|
|
},
|
|
},
|
|
}
|
|
</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;
|
|
|
|
column-gap: 32rpx;
|
|
width: 100vw;
|
|
height: 200rpx;
|
|
padding: 24rpx 40rpx;
|
|
background: #FFFFFF;
|
|
box-sizing: border-box;
|
|
|
|
.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>
|