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.
171 lines
3.6 KiB
171 lines
3.6 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 data.orderPersonList" :key="item.id">
|
|
<view class="info">
|
|
<view class="flex info-top">
|
|
<view>{{ item.name }}</view>
|
|
<view>{{ item.period || '' }}</view>
|
|
<view class="light">{{ item.periodDesc || '' }}</view>
|
|
</view>
|
|
<view class="info-bottom">{{ item.cerNo }}</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">{{ data.payAmount }}</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.id }}</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: '已完成',
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
statusDesc() {
|
|
const { status } = this.data
|
|
return ORDER_STATUS_AND_DESC_MAPPING[status]
|
|
},
|
|
},
|
|
methods: {
|
|
},
|
|
}
|
|
</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>
|