|
|
<script setup>
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2023年5月30日 13:41:25
|
|
|
*/
|
|
|
import {
|
|
|
ref
|
|
|
} from 'vue'
|
|
|
import {
|
|
|
$image,
|
|
|
$response,
|
|
|
OrderInfoAction,
|
|
|
} from '@/api'
|
|
|
import {
|
|
|
onShow
|
|
|
} from '@dcloudio/uni-app'
|
|
|
const $props = defineProps({
|
|
|
id: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
}
|
|
|
});
|
|
|
onShow(() => {
|
|
|
OrderInfo()
|
|
|
})
|
|
|
const buy_info = ref(false)
|
|
|
const order_info = ref(false)
|
|
|
const OrderInfo = async () => {
|
|
|
const response = await OrderInfoAction({
|
|
|
id: $props.id
|
|
|
})
|
|
|
$response(response, () => {
|
|
|
let info = response.data.info
|
|
|
buy_info.value = JSON.parse(info.buy_info)
|
|
|
order_info.value = info
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const tab_active = ref(0)
|
|
|
const tabChange = (type) => {
|
|
|
tab_active.value = type
|
|
|
}
|
|
|
</script>
|
|
|
<template>
|
|
|
<view>
|
|
|
<view class="top_line_wrapper"></view>
|
|
|
<view v-if="!!buy_info">
|
|
|
<view class="top_info_wrapper">
|
|
|
<view class="tab_wrapper">
|
|
|
<view @click="tabChange(0)" class="tab_item_wrapper" :class="[
|
|
|
tab_active === 0 ? 'tab_item_text_active_wrapper' : ''
|
|
|
]">
|
|
|
<view class="tab_item_text_wrapper">项目详情</view>
|
|
|
<view class="tab_item_line_wrapper"></view>
|
|
|
</view>
|
|
|
<view @click="tabChange(1)" class="tab_item_wrapper" :class="[
|
|
|
tab_active === 1 ? 'tab_item_text_active_wrapper' : ''
|
|
|
]">
|
|
|
<view class="tab_item_text_wrapper">订单详情</view>
|
|
|
<view class="tab_item_line_wrapper"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="center_show_wrapper">
|
|
|
<view v-if="tab_active === 0">
|
|
|
<view v-if="buy_info.items.length > 0" class="items_items_wrapper">
|
|
|
<view class="title_wrapper">
|
|
|
<view class="title_line_wrapper"></view>
|
|
|
<view class="title_text_wrapper">自选项目</view>
|
|
|
</view>
|
|
|
<view class="items_list_wrapper">
|
|
|
<view class="items_list_item_wrapper" v-for="(i,k) in buy_info.items" :key="k">
|
|
|
<view class="items_list_item_text_wrapper">{{ k+1 }}.{{ i.name }}</view>
|
|
|
<view class="items_list_item_right_wrapper">
|
|
|
<view class="items_list_item_price_wrapper">￥{{ Number(i.price).toFixed(2) }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="buy_info.items.length > 0" class="list_break_wrapper"></view>
|
|
|
<view v-if="!!buy_info.combo && !!buy_info.combo.id" class="combo_items_wrapper">
|
|
|
<view class="title_wrapper">
|
|
|
<view class="title_line_wrapper"></view>
|
|
|
<view class="title_text_wrapper">{{ buy_info.combo.name }}</view>
|
|
|
</view>
|
|
|
<view class="items_list_wrapper">
|
|
|
<view class="items_list_item_wrapper" v-for="(i,k) in buy_info.combo.items" :key="k">
|
|
|
<view class="items_list_item_text_wrapper">{{ k+1 }}.{{ i.name }}</view>
|
|
|
<view class="items_list_item_price_wrapper">￥{{ Number(i.price).toFixed(2) }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="!!buy_info.group && !!buy_info.group.id" class="combo_items_wrapper">
|
|
|
<view class="title_wrapper">
|
|
|
<view class="title_line_wrapper"></view>
|
|
|
<view class="title_text_wrapper">团检项目</view>
|
|
|
</view>
|
|
|
<view class="items_list_wrapper">
|
|
|
<view class="items_list_item_wrapper" v-for="(i,k) in buy_info.group.items" :key="k">
|
|
|
<view class="items_list_item_text_wrapper">{{ k+1 }}.{{ i.name }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="tab_active === 1" class="readme_wrapper">
|
|
|
<view class="readme_box_wrapper">
|
|
|
<view v-if="!!order_info" class="done_info_wrapper">
|
|
|
<view class="combo_line_wrapper">
|
|
|
<view class="combo_line_title_wrapper">体检人：</view>
|
|
|
<view class="combo_line_content_wrapper">{{ order_info.name }}</view>
|
|
|
</view>
|
|
|
<view class="combo_line_wrapper">
|
|
|
<view class="combo_line_title_wrapper">证件号码：</view>
|
|
|
<view class="combo_line_content_wrapper">{{ order_info.id_number }}</view>
|
|
|
</view>
|
|
|
<view class="combo_line_wrapper">
|
|
|
<view class="combo_line_title_wrapper">预约单号：</view>
|
|
|
<view class="combo_line_content_wrapper">{{ order_info.show }}</view>
|
|
|
</view>
|
|
|
<view class="combo_line_wrapper">
|
|
|
<view class="combo_line_title_wrapper">体检单号：</view>
|
|
|
<view class="combo_line_content_wrapper">{{ order_info.appointment_number }}</view>
|
|
|
</view>
|
|
|
<view class="combo_line_wrapper">
|
|
|
<view class="combo_line_title_wrapper">预约时间：</view>
|
|
|
<view class="combo_line_content_wrapper">{{ order_info.appointment_time }}</view>
|
|
|
</view>
|
|
|
<view class="combo_line_wrapper">
|
|
|
<view class="combo_line_title_wrapper">类型：</view>
|
|
|
<view class="combo_line_content_wrapper">{{ Number(order_info.type) === 1 ? '个检' : '团检' }}</view>
|
|
|
</view>
|
|
|
<view class="combo_price_wrapper">
|
|
|
<view class="combo_price_title_wrapper">订单金额：</view>
|
|
|
<view class="combo_price_content_wrapper">
|
|
|
<text>￥{{ Number(order_info.price).toFixed(2) }}</text>
|
|
|
<text
|
|
|
v-if="Number(order_info.price) !== Number(order_info.true_price)">(测试：{{ Number(order_info.true_price).toFixed(2) }})</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="tab_active === 0" class="bottom_wrapper">
|
|
|
<view class="bottom_box_wrapper">
|
|
|
<view class="bottom_count_wrapper">
|
|
|
<view>合计</view>
|
|
|
</view>
|
|
|
<view class="bottom_line_wrapper"></view>
|
|
|
<view class="bottom_price_wrapper">
|
|
|
<view class="bottom_price_price_wrapper">
|
|
|
<view class="bottom_price_price_icon_wrapper">￥</view>
|
|
|
{{ Number(order_info.price).toFixed(2) }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="blank_wrapper"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="blank_wrapper"></view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<style>
|
|
|
page {
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
.combo_price_content_wrapper {
|
|
|
color: #FF0000;
|
|
|
}
|
|
|
|
|
|
.combo_price_title_wrapper {
|
|
|
color: #000000;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.combo_line_content_wrapper {
|
|
|
color: #000000;
|
|
|
}
|
|
|
|
|
|
.combo_line_title_wrapper {
|
|
|
color: #666666;
|
|
|
}
|
|
|
|
|
|
.combo_line_wrapper,
|
|
|
.combo_price_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 24rpx;
|
|
|
color: #666666;
|
|
|
line-height: 1;
|
|
|
height: 50rpx;
|
|
|
line-height: 50rpx;
|
|
|
margin-left: 25rpx;
|
|
|
}
|
|
|
|
|
|
.combo_break_wrapper {
|
|
|
width: 559rpx;
|
|
|
height: 1rpx;
|
|
|
background: #0BBACF;
|
|
|
margin: 26rpx auto 30rpx;
|
|
|
}
|
|
|
|
|
|
.combo_name_wrapper {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
color: #0BBACF;
|
|
|
line-height: 1;
|
|
|
margin-top: 36rpx;
|
|
|
margin-left: 58rpx;
|
|
|
}
|
|
|
|
|
|
.top_info_wrapper {
|
|
|
position: fixed;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.clear_button_text_wrapper {
|
|
|
margin-left: 21rpx;
|
|
|
}
|
|
|
|
|
|
.clear_button_wrapper {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
right: 30rpx;
|
|
|
transform: translateY(-50%);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
color: #7D7D7D;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.clear_button_icon_wrapper image {
|
|
|
width: 24rpx;
|
|
|
height: 26rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.clear_button_icon_wrapper {
|
|
|
width: 24rpx;
|
|
|
height: 26rpx;
|
|
|
}
|
|
|
|
|
|
.items_list_item_del_wrapper image {
|
|
|
width: 24rpx;
|
|
|
height: 26rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.items_list_item_del_wrapper {
|
|
|
width: 24rpx;
|
|
|
height: 26rpx;
|
|
|
margin-right: 13rpx;
|
|
|
}
|
|
|
|
|
|
.items_list_item_right_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.list_break_wrapper {
|
|
|
width: 750rpx;
|
|
|
height: 14rpx;
|
|
|
background: #F3F3F3;
|
|
|
}
|
|
|
|
|
|
.bottom_button_next_wrapper {
|
|
|
width: 50%;
|
|
|
background: #ff6201;
|
|
|
}
|
|
|
|
|
|
.bottom_button_items_wrapper {
|
|
|
width: 50%;
|
|
|
}
|
|
|
|
|
|
.bottom_button_next_long_wrapper {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.readme_box_wrapper {
|
|
|
width: 680rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #000000;
|
|
|
line-height: 52rpx;
|
|
|
margin: 20rpx auto 0;
|
|
|
}
|
|
|
|
|
|
.center_show_wrapper {
|
|
|
position: fixed;
|
|
|
bottom: calc(150rpx + var(--safe-area-inset-bottom));
|
|
|
top: 100rpx;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
overflow-y: auto;
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.readme_wrapper {
|
|
|
height: calc(100% - 100rpx);
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.bottom_price_price_icon_wrapper {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.bottom_price_price_wrapper {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: 800;
|
|
|
color: #F02E50;
|
|
|
line-height: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
.bottom_price_original_price_wrapper {
|
|
|
font-size: 22rpx;
|
|
|
font-weight: 800;
|
|
|
text-decoration: line-through;
|
|
|
color: #444444;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.bottom_button_wrapper {
|
|
|
width: 320rpx;
|
|
|
height: 68rpx;
|
|
|
background: #0BBACF;
|
|
|
border-radius: 34rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 24rpx;
|
|
|
color: #FFFFFF;
|
|
|
line-height: 68rpx;
|
|
|
text-align: center;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.bottom_price_wrapper {
|
|
|
text-align: right;
|
|
|
margin-right: 30rpx;
|
|
|
width: 200rpx;
|
|
|
}
|
|
|
|
|
|
.bottom_line_wrapper {
|
|
|
width: 1rpx;
|
|
|
height: 53rpx;
|
|
|
background: #dedede;
|
|
|
}
|
|
|
|
|
|
.bottom_count_wrapper {
|
|
|
width: 169rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
color: #000000;
|
|
|
line-height: 40rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.bottom_box_wrapper {
|
|
|
height: 120rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
width: calc(100% - 50rpx);
|
|
|
}
|
|
|
|
|
|
.bottom_wrapper {
|
|
|
position: fixed;
|
|
|
width: 750rpx;
|
|
|
background: #ffffff;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
|
|
|
.items_list_item_price_wrapper {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
color: #F02E50;
|
|
|
line-height: 1;
|
|
|
position: absolute;
|
|
|
left: 500rpx;
|
|
|
}
|
|
|
|
|
|
.items_list_item_text_wrapper {
|
|
|
margin-left: 22rpx;
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
color: #222222;
|
|
|
line-height: 1;
|
|
|
max-width: 450rpx;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.items_list_item_wrapper {
|
|
|
width: 690rpx;
|
|
|
height: 94rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
border-bottom: 1rpx solid #EBEBEB;
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.title_text_wrapper {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
color: #222222;
|
|
|
line-height: 1;
|
|
|
margin-left: 15rpx;
|
|
|
}
|
|
|
|
|
|
.items_items_wrapper {
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.combo_items_wrapper {
|
|
|
background: #ffffff;
|
|
|
}
|
|
|
|
|
|
.title_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
height: 95rpx;
|
|
|
width: 750rpx;
|
|
|
background: #ffffff;
|
|
|
border-bottom: 2rpx solid #EBEBEB;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.title_line_wrapper {
|
|
|
width: 7rpx;
|
|
|
height: 27rpx;
|
|
|
border-radius: 999rpx;
|
|
|
margin-left: 30rpx;
|
|
|
}
|
|
|
|
|
|
.combo_items_wrapper>.title_wrapper>.title_line_wrapper {
|
|
|
background: #0bbacf;
|
|
|
}
|
|
|
|
|
|
.items_items_wrapper>.title_wrapper>.title_line_wrapper {
|
|
|
background: #fa7c2f;
|
|
|
}
|
|
|
|
|
|
.tab_item_line_wrapper {
|
|
|
width: 43rpx;
|
|
|
height: 6rpx;
|
|
|
background: #0BBACF;
|
|
|
border-radius: 3rpx;
|
|
|
margin: 0 auto;
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
.tab_item_wrapper {
|
|
|
height: 88rpx;
|
|
|
width: 200rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.tab_item_text_wrapper {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
color: #3F3F3F;
|
|
|
line-height: 83rpx;
|
|
|
}
|
|
|
|
|
|
.tab_wrapper {
|
|
|
width: 750rpx;
|
|
|
height: 88rpx;
|
|
|
background: #FFFFFF;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
margin-top: 13rpx;
|
|
|
}
|
|
|
|
|
|
.tab_item_text_active_wrapper>.tab_item_text_wrapper {
|
|
|
color: #0BBACF;
|
|
|
}
|
|
|
|
|
|
.tab_item_text_active_wrapper>.tab_item_line_wrapper {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
.combo_info_wrapper {
|
|
|
height: 125rpx;
|
|
|
background: #ffffff;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.combo_info_name_wrapper {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
color: #222222;
|
|
|
line-height: 1;
|
|
|
margin-top: 29rpx;
|
|
|
margin-left: 39rpx;
|
|
|
max-width: 600rpx;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.combo_info_tag_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 19rpx;
|
|
|
margin-left: 39rpx;
|
|
|
}
|
|
|
|
|
|
.combo_tag_sex_wrapper {
|
|
|
padding-left: 10rpx;
|
|
|
padding-right: 10rpx;
|
|
|
height: 28rpx;
|
|
|
border: 1px solid;
|
|
|
border-radius: 6rpx;
|
|
|
font-size: 20rpx;
|
|
|
font-weight: 500;
|
|
|
line-height: 28rpx;
|
|
|
text-align: center;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
|
|
|
.combo_tag_sex_all_wrapper {
|
|
|
color: #8EC363;
|
|
|
border-color: #8EC363;
|
|
|
}
|
|
|
|
|
|
.combo_tag_sex_nan_wrapper {
|
|
|
color: #5FCAEA;
|
|
|
border-color: #5FCAEA;
|
|
|
}
|
|
|
|
|
|
.combo_tag_sex_nv_wrapper {
|
|
|
color: #EF7389;
|
|
|
border-color: #EF7389;
|
|
|
}
|
|
|
</style> |