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.
230 lines
5.1 KiB
230 lines
5.1 KiB
<template>
|
|
<view>
|
|
<view class="card">
|
|
<view class="flex card-header" style="justify-content: space-between;">
|
|
<view>订单详情</view>
|
|
<view :class="['tag', `tag-${data.status}`]">
|
|
{{ statusDesc }}
|
|
</view>
|
|
</view>
|
|
<view class="flex member" v-for="item in members" :key="item.id">
|
|
<view class="info">
|
|
<view class="flex info-top">
|
|
<view>{{ item.name }}</view>
|
|
<view>{{ getTypeDesc(item.type) }}</view>
|
|
<view class="light">{{ getTypeTips(item.type) }}</view>
|
|
</view>
|
|
<view class="info-bottom">{{ item.idNo }}</view>
|
|
</view>
|
|
<view class="flex price">¥<view class="highlight">{{ item.price }}</view></view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row-label">总价格</view>
|
|
<view class="row-content">
|
|
<view class="flex total-price">
|
|
<view>¥</view>
|
|
<view class="highlight">{{ totalPrice }}</view>
|
|
<view class="light" v-if="data.discount">
|
|
{{ `优惠（${data.discount}）` }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card">
|
|
<view class="card-header">联系人信息</view>
|
|
<view class="row">
|
|
<view class="row-label">真实姓名</view>
|
|
<view class="row-content">{{ data.name }}</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row-label">手机号码</view>
|
|
<view class="row-content">{{ data.phone }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="card order">
|
|
<view class="card-header">订单信息</view>
|
|
<view class="row">
|
|
<view class="row-label">订单编号</view>
|
|
<view class="row-content">{{ data.orderNo }}</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row-label">下单时间</view>
|
|
<view class="row-content">{{ data.createTime }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
const ORDER_STATUS_AND_DESC_MAPPING = {
|
|
0: '待支付',
|
|
1: '已支付',
|
|
2: '已完成',
|
|
}
|
|
const MEMBER_TYPE_AND_DESC_MAPPING = {
|
|
0: '成人',
|
|
1: '青少年',
|
|
2: '儿童',
|
|
}
|
|
const MEMBER_TYPE_AND_TIPS_MAPPING = {
|
|
0: '(18周岁以上)',
|
|
1: '(14周岁以上)',
|
|
2: '(14周岁以下)',
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
statusDesc() {
|
|
const { status } = this.data
|
|
return ORDER_STATUS_AND_DESC_MAPPING[status]
|
|
},
|
|
productPackage() {
|
|
const { time, product } = this.data
|
|
const { timeOptions } = product || {}
|
|
|
|
return timeOptions?.find?.(item => item.id === time) || {}
|
|
},
|
|
totalPrice() {
|
|
const { adults, teenager, child } = this.data
|
|
|
|
const { adultsPrice, teenagerPrice, childPrice } = this.productPackage
|
|
|
|
let total = 0
|
|
|
|
adults && (total += adults * (adultsPrice || 0))
|
|
teenager && (total += teenager * (teenagerPrice || 0))
|
|
child && (total += child * (childPrice || 0))
|
|
|
|
return total
|
|
},
|
|
members() {
|
|
const { members } = this.data
|
|
const { adultsPrice, teenagerPrice, childPrice } = this.productPackage
|
|
|
|
return members?.map?.(item => {
|
|
const { type } = item
|
|
|
|
let price = 0
|
|
|
|
switch(type) {
|
|
case 0: // 成年
|
|
price = adultsPrice
|
|
break
|
|
case 1: // 青少年
|
|
price = teenagerPrice
|
|
break
|
|
case 2: // 儿童
|
|
price = childPrice
|
|
break
|
|
}
|
|
|
|
return { ...item, price }
|
|
})
|
|
},
|
|
},
|
|
methods: {
|
|
getTypeDesc(type) {
|
|
return MEMBER_TYPE_AND_DESC_MAPPING[type]
|
|
},
|
|
getTypeTips(type) {
|
|
return MEMBER_TYPE_AND_TIPS_MAPPING[type]
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
@import '../styles/style.scss';
|
|
|
|
@import '../styles/tag.scss';
|
|
|
|
.member {
|
|
margin-top: 16rpx;
|
|
justify-content: space-between;
|
|
padding: 24rpx;
|
|
background: #F9F9F9;
|
|
border-radius: 24rpx;
|
|
|
|
.info {
|
|
&-top {
|
|
justify-content: space-between;
|
|
column-gap: 24rpx;
|
|
font-size: 32rpx;
|
|
color: #181818;
|
|
|
|
.light {
|
|
font-size: 24rpx;
|
|
color: #8B8B8B;
|
|
}
|
|
}
|
|
|
|
&-bottom {
|
|
font-size: 28rpx;
|
|
color: #9B9B9B;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
column-gap: 4rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #FF4800;
|
|
|
|
.highlight {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.row {
|
|
margin-top: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
&-label {
|
|
font-size: 26rpx;
|
|
color: #8B8B8B;
|
|
}
|
|
|
|
&-content {
|
|
font-size: 28rpx;
|
|
color: #393939;
|
|
}
|
|
}
|
|
|
|
.order {
|
|
.row {
|
|
margin-top: 32rpx;
|
|
}
|
|
}
|
|
|
|
.total-price {
|
|
column-gap: 8rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #FF4800;
|
|
|
|
.highlight {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.light {
|
|
font-size: 22rpx;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
</style>
|