|
|
<script setup>
|
|
|
import DraggableButton from "@/pages/components/goHome.vue";
|
|
|
import TabBar from "@/common/TabBar.vue";
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2024年9月11日 19:24:50
|
|
|
*/
|
|
|
import {
|
|
|
ref,
|
|
|
computed
|
|
|
} from 'vue'
|
|
|
import {
|
|
|
$api,
|
|
|
$response
|
|
|
} from '@/api'
|
|
|
import {
|
|
|
onShow
|
|
|
} from '@dcloudio/uni-app'
|
|
|
import {
|
|
|
useStore
|
|
|
} from '@/store'
|
|
|
const $store = useStore()
|
|
|
|
|
|
const combo_info = ref([null, null, null])
|
|
|
const item_info = computed(() => {
|
|
|
let item_map = [];
|
|
|
for (let i = 0; i <= 2; i++) {
|
|
|
if (!!combo_info.value[i]) {
|
|
|
for (let j = 0; j < combo_info.value[i].items.length; j++) {
|
|
|
let item_id = combo_info.value[i].items[j].id;
|
|
|
let existingItem = item_map.find(item => item.id === item_id);
|
|
|
|
|
|
if (!existingItem) {
|
|
|
item_map.push({
|
|
|
id: item_id,
|
|
|
name: combo_info.value[i].items[j].name,
|
|
|
group: combo_info.value[i].items[j].keshi_name,
|
|
|
value: [false, false, false]
|
|
|
});
|
|
|
existingItem = item_map[item_map.length - 1];
|
|
|
}
|
|
|
existingItem.value[i] = true;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
let data = item_map.filter(item => {
|
|
|
if (!same_item_show.value) return true;
|
|
|
|
|
|
const isThirdColumnValid = !!combo_info.value[2];
|
|
|
|
|
|
if (!isThirdColumnValid && item.value.length >= 2) {
|
|
|
const firstTwoSame = item.value[0] === item.value[1];
|
|
|
if (firstTwoSame) return false;
|
|
|
}
|
|
|
|
|
|
const allTrue = item.value.every(v => v === true);
|
|
|
const allFalse = item.value.every(v => v === false);
|
|
|
|
|
|
if (allTrue || allFalse) return false;
|
|
|
|
|
|
return true;
|
|
|
});
|
|
|
|
|
|
let group_map = [];
|
|
|
data.forEach(item => {
|
|
|
let group = group_map.find(g => g.group === item.group);
|
|
|
if (!group) {
|
|
|
group = { group: item.group, items: [] };
|
|
|
group_map.push(group);
|
|
|
}
|
|
|
group.items.push(item);
|
|
|
});
|
|
|
|
|
|
// 按照 keshi_paixu 的顺序排序
|
|
|
group_map.sort((a, b) => {
|
|
|
const indexA = keshi_paixu.value.indexOf(a.group);
|
|
|
const indexB = keshi_paixu.value.indexOf(b.group);
|
|
|
|
|
|
if (indexA !== -1 && indexB !== -1) {
|
|
|
return indexA - indexB;
|
|
|
}
|
|
|
if (indexA !== -1) return -1;
|
|
|
if (indexB !== -1) return 1;
|
|
|
return 0;
|
|
|
});
|
|
|
|
|
|
return group_map;
|
|
|
});
|
|
|
const base_info = computed(() => {
|
|
|
let data = [{
|
|
|
title: '体检类型',
|
|
|
value: ['-', '-', '-'],
|
|
|
show: true
|
|
|
}, {
|
|
|
title: '预约人数',
|
|
|
value: ['-', '-', '-'],
|
|
|
show: false
|
|
|
}, {
|
|
|
title: '项目数量',
|
|
|
value: ['-', '-', '-'],
|
|
|
show: true
|
|
|
}, {
|
|
|
title: '性别',
|
|
|
value: ['-', '-', '-'],
|
|
|
show: true
|
|
|
} ]
|
|
|
for (let i = 0; i <= 2; i++) {
|
|
|
if (!!combo_info.value[i]) {
|
|
|
data[0].value[i] = !!combo_info.value[i].checkup_type_name ? combo_info.value[i].checkup_type_name : '-'
|
|
|
data[1].value[i] = `${combo_info.value[i].saleCount}人`
|
|
|
data[2].value[i] = `${combo_info.value[i].item_count}个`
|
|
|
let sex = '通用'
|
|
|
if (combo_info.value[i].sex !== 0) {
|
|
|
if (combo_info.value[i].sex === 1) {
|
|
|
sex = '男'
|
|
|
} else {
|
|
|
sex = '女'
|
|
|
}
|
|
|
}
|
|
|
data[3].value[i] = sex
|
|
|
}
|
|
|
}
|
|
|
return data
|
|
|
})
|
|
|
let keshi_paixu=ref([]);
|
|
|
const getComboCompare = async () => {
|
|
|
let combo_ids = []
|
|
|
$store.getComboContrast()
|
|
|
for (let i in $store.combo_compare) {
|
|
|
if (!!$store.combo_compare[i]) {
|
|
|
combo_ids.push($store.combo_compare[i])
|
|
|
}
|
|
|
}
|
|
|
if (combo_ids.length > 0) {
|
|
|
uni.showLoading()
|
|
|
const response = await $api('ComboCompare', {
|
|
|
combo_ids
|
|
|
})
|
|
|
uni.hideLoading()
|
|
|
$response(response, () => {
|
|
|
keshi_paixu.value=response.data.keshi_paixu
|
|
|
combo_info.value = [null, null, null]
|
|
|
if (response.data.list.length > 0) {
|
|
|
combo_info.value[0] = response.data.list[0]
|
|
|
}
|
|
|
if (response.data.list.length > 1) {
|
|
|
combo_info.value[1] = response.data.list[1]
|
|
|
}
|
|
|
if (response.data.list.length > 2) {
|
|
|
combo_info.value[2] = response.data.list[2]
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const closeComboClick = (index) => {
|
|
|
let combo_id = combo_info.value[index].combo_id
|
|
|
combo_info.value[index] = null
|
|
|
let store_list = JSON.parse(JSON.stringify($store.combo_compare))
|
|
|
let select_index = store_list.indexOf(combo_id)
|
|
|
if (select_index !== -1) {
|
|
|
store_list.splice(select_index, 1)
|
|
|
}
|
|
|
$store.combo_compare = store_list
|
|
|
$store.setComboContrast(store_list)
|
|
|
}
|
|
|
|
|
|
const mountedAction = () => {
|
|
|
getComboCompare()
|
|
|
}
|
|
|
|
|
|
const config_ref = ref(null)
|
|
|
const configRef = (e) => {
|
|
|
if (!config_ref.value) {
|
|
|
config_ref.value = e
|
|
|
mountedAction()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const chooseComboClick = () => {
|
|
|
// uni.navigateBack()
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/main/combo/combo?status=1&isduibi=1'
|
|
|
})
|
|
|
}
|
|
|
const toComboClick = (index) => {
|
|
|
if (!!combo_info.value[index]) {
|
|
|
let query = "?comboId=" + combo_info.value[index].combo_id;
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/main/tj/tjxq" + query,
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
const same_item_show = ref(false)
|
|
|
const changeSwitch = () => {
|
|
|
same_item_show.value = !same_item_show.value
|
|
|
}
|
|
|
|
|
|
onShow(() => {
|
|
|
if (!!config_ref.value) {
|
|
|
mountedAction()
|
|
|
}
|
|
|
})
|
|
|
</script>
|
|
|
<template>
|
|
|
<TabBar />
|
|
|
<view>
|
|
|
<view v-if="!!$store.config">
|
|
|
<view :ref="configRef"></view>
|
|
|
</view>
|
|
|
<!-- <view class="top_background_wrapper"></view>
|
|
|
<view class="combo_list_wrapper">
|
|
|
<view class="combo_item_wrapper" v-for="(i,k) in 3" :key="k">
|
|
|
<view v-if="!!combo_info[k]">
|
|
|
<view @click="closeComboClick(k)" class="combo_close_wrapper">
|
|
|
<image src="@/static/assets/contrast/close@2x.png"></image>
|
|
|
</view>
|
|
|
<view class="combo_name_wrapper">{{ combo_info[k].name }}</view>
|
|
|
<view class="combo_price_wrapper">¥ {{ combo_info[k].price }}</view>
|
|
|
<view @click="toComboClick(k)" class="combo_choose_wrapper">立即预约</view>
|
|
|
</view>
|
|
|
<view @click="chooseComboClick()" v-else>
|
|
|
<view class="add_icon_wrapper">
|
|
|
<image src="@/static/assets/contrast/add@2x.png"></image>
|
|
|
</view>
|
|
|
<view class="add_text_wrapper">添加套餐</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
<view class="item_info_wrapper">
|
|
|
<view class="title_wrapper">基本信息</view>
|
|
|
<view class="table_wrapper">
|
|
|
<view class="table_line_wrapper" >
|
|
|
<view class="table_title_wrapper">套餐名称</view>
|
|
|
<view class="table_item_wrapper" v-for="(i,k) in 3" :key="k">
|
|
|
<view v-if="!!combo_info[k]" style="display: flex;justify-content: center; align-items: center; height: 100%; padding: 0rpx 10rpx;">
|
|
|
<view class="combo_title">{{ combo_info[k].name }}</view>
|
|
|
<view @click="closeComboClick(k)" class="combo_close_wrapper" style="margin-left: 10rpx;">
|
|
|
<image src="@/static/assets/contrast/close@2x.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view @click="chooseComboClick()" v-else>
|
|
|
<view style="color: #239EA3;" >添加套餐</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="table_line_wrapper" >
|
|
|
<view class="table_title_wrapper">价格</view>
|
|
|
<view class="table_item_wrapper" v-for="(i,k) in 3" :key="k">
|
|
|
<view v-if="!!combo_info[k]" style="display: flex;justify-content: center; align-items: center; height: 100%; padding: 0rpx 10rpx;">
|
|
|
<view class="combo_title" >{{ combo_info[k].price }}</view>
|
|
|
</view>
|
|
|
<view @click="chooseComboClick()" v-else>
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<template v-for="(i,k) in base_info">
|
|
|
<view class="table_line_wrapper" v-if="!!i.show" :key="k">
|
|
|
<view class="table_title_wrapper">{{ i.title }} </view>
|
|
|
<view class="table_item_wrapper" v-for="(ii,ik) in i.value" :key="ik">{{ ii }}</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<view class="table_line_wrapper" >
|
|
|
<view class="table_title_wrapper"></view>
|
|
|
<view class="table_item_wrapper" v-for="(i,k) in 3" :key="k">
|
|
|
<view v-if="!!combo_info[k]" style="display: flex;justify-content: center; align-items: center; height: 100%; padding: 0rpx 10rpx;">
|
|
|
<view @click="toComboClick(k)" class="combo_choose_wrapper">购买</view>
|
|
|
</view>
|
|
|
<view @click="chooseComboClick()" v-else>
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="title_line_wrapper">
|
|
|
<view class="title_wrapper">项目信息</view>
|
|
|
<view class="show_wrapper">
|
|
|
<view class="show_text_wrapper">隐藏相同项目</view>
|
|
|
<switch @change="changeSwitch" style="transform:scale(0.6)" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="table_wrapper table_large_wrapper">
|
|
|
<view class="table_large_line_wrapper" v-if="item_info.length === 0">
|
|
|
<view class="table_large_title_wrapper">
|
|
|
<view class="table_large_title_show_wrapper">
|
|
|
<view>科</view>
|
|
|
<view>室</view>
|
|
|
<view>检</view>
|
|
|
<view>查</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-for="(j,jk) in item_info" :key="jk">
|
|
|
<view class="table_large_line_wrapper" v-for="(i,k) in j.items" :key="k">
|
|
|
<view class="table_large_title_wrapper">
|
|
|
<view class="table_large_title_show2_wrapper"
|
|
|
v-if="(k + 1) === Math.min(Math.ceil(j.items.length / 2),4)">
|
|
|
<view>{{ j.group }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="table_item_wrapper table_large_item_wrapper" v-for="(ii,ik) in i.value" :key="ik">
|
|
|
<view class="table_large_text_wrapper">{{ ii ? i.name : '-' }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<style scoped>
|
|
|
.combo_title{
|
|
|
display: -webkit-box; /* 必须结合弹性盒子布局 */
|
|
|
-webkit-box-orient: vertical; /* 设置为垂直方向 */
|
|
|
overflow: hidden; /* 隐藏超出部分 */
|
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
|
-webkit-line-clamp: 2; /* 最多显示两行 */
|
|
|
line-height: 30rpx;
|
|
|
min-height: 30rpx;
|
|
|
}
|
|
|
.show_text_wrapper {
|
|
|
font-size: 14rpx;
|
|
|
color: #05050580;
|
|
|
}
|
|
|
|
|
|
.show_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 40rpx;
|
|
|
}
|
|
|
|
|
|
.title_line_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.table_large_title_wrapper {
|
|
|
font-weight: 400;
|
|
|
font-size: 20rpx;
|
|
|
color: #050505;
|
|
|
line-height: 60rpx;
|
|
|
text-align: center;
|
|
|
width: 142rpx;
|
|
|
text-align: center;
|
|
|
height: 120rpx;
|
|
|
position: relative;
|
|
|
background: #F2F2F2;
|
|
|
border-bottom: 1rpx solid #F2F2F2;
|
|
|
}
|
|
|
|
|
|
.table_large_title_show_wrapper {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
height: 100%;
|
|
|
height: 420rpx;
|
|
|
padding-top: 170rpx;
|
|
|
background: #F2F2F2;
|
|
|
z-index: 9;
|
|
|
}
|
|
|
|
|
|
.table_large_title_show2_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
line-height: 30rpx;
|
|
|
height: 100%;
|
|
|
width: calc(100% - 20rpx);
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.table_wrapper {
|
|
|
width: calc(142rpx + 182rpx + 182rpx + 182rpx);
|
|
|
margin: 27rpx auto 0;
|
|
|
border: 1rpx solid #E5E5E5;
|
|
|
border-radius: 5rpx;
|
|
|
}
|
|
|
|
|
|
.table_large_wrapper {
|
|
|
min-height: 600rpx;
|
|
|
}
|
|
|
|
|
|
.table_line_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-weight: 400;
|
|
|
font-size: 20rpx;
|
|
|
color: #050505;
|
|
|
line-height: 61rpx;
|
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
|
}
|
|
|
|
|
|
.table_large_line_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-weight: 400;
|
|
|
font-size: 20rpx;
|
|
|
color: #050505;
|
|
|
line-height: 61rpx;
|
|
|
}
|
|
|
|
|
|
.table_title_wrapper {
|
|
|
width: 142rpx;
|
|
|
height: 61rpx;
|
|
|
line-height: 61rpx;
|
|
|
text-align: center;
|
|
|
background: #F2F2F2;
|
|
|
}
|
|
|
|
|
|
.table_line_wrapper:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
|
|
|
.table_item_wrapper {
|
|
|
width: 182rpx;
|
|
|
height: 61rpx;
|
|
|
line-height: 61rpx;
|
|
|
text-align: center;
|
|
|
border-left: 1rpx solid #E5E5E5;
|
|
|
}
|
|
|
|
|
|
.table_large_item_wrapper {
|
|
|
height: 120rpx;
|
|
|
line-height: 30rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
|
}
|
|
|
|
|
|
.table_large_line_wrapper:last-child .table_large_item_wrapper {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
|
|
|
.table_large_text_wrapper {
|
|
|
width: 170rpx;
|
|
|
margin: 0 auto;
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
word-break: break-all;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.item_info_wrapper {
|
|
|
width: 730rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
|
|
|
border-radius: 5rpx;
|
|
|
margin: 0rpx auto 0;
|
|
|
overflow: hidden;
|
|
|
padding-bottom: 133rpx;
|
|
|
}
|
|
|
|
|
|
.title_wrapper {
|
|
|
width: 180rpx;
|
|
|
height: 60rpx;
|
|
|
background: linear-gradient(90deg, #EDF6F5 0%, #BBDFE1 99%);
|
|
|
border-radius: 0rpx 30rpx 30rpx 0rpx;
|
|
|
font-weight: bold;
|
|
|
font-size: 25rpx;
|
|
|
color: #123531;
|
|
|
text-align: center;
|
|
|
line-height: 60rpx;
|
|
|
margin-top: 40rpx;
|
|
|
margin-left: 20rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.combo_choose_wrapper {
|
|
|
width: 120rpx;
|
|
|
height: 50rpx;
|
|
|
background: #239EA3;
|
|
|
border-radius: 8rpx;
|
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
font-size: 24rpx;
|
|
|
color: #F1F7F7;
|
|
|
line-height: 54rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.combo_price_wrapper {
|
|
|
font-weight: 500;
|
|
|
font-size: 30rpx;
|
|
|
color: #EC3D15;
|
|
|
line-height: 1;
|
|
|
margin-top: 8rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.combo_name_wrapper {
|
|
|
width: 150rpx;
|
|
|
font-weight: bold;
|
|
|
font-size: 28rpx;
|
|
|
color: #0E0E0E;
|
|
|
line-height: 40rpx;
|
|
|
min-height:80rpx;
|
|
|
margin: 35rpx auto 0;
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 2;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
word-break: break-all;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.combo_close_wrapper {
|
|
|
|
|
|
width: 18rpx;
|
|
|
height: 19rpx;
|
|
|
top: 7rpx;
|
|
|
right: 11rpx;
|
|
|
}
|
|
|
|
|
|
.combo_close_wrapper image {
|
|
|
width: 18rpx;
|
|
|
height: 19rpx;
|
|
|
display: block;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.add_text_wrapper {
|
|
|
text-align: center;
|
|
|
font-weight: 500;
|
|
|
font-size: 24rpx;
|
|
|
color: #239EA3;
|
|
|
line-height: 1;
|
|
|
margin-top: 31rpx;
|
|
|
}
|
|
|
|
|
|
.add_icon_wrapper {
|
|
|
width: 91rpx;
|
|
|
height: 101rpx;
|
|
|
margin: 44rpx auto 0;
|
|
|
}
|
|
|
|
|
|
.add_icon_wrapper image {
|
|
|
width: 91rpx;
|
|
|
height: 101rpx;
|
|
|
display: block;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.combo_item_wrapper {
|
|
|
width: 230rpx;
|
|
|
height: 240rpx;
|
|
|
background: #F7F7F7;
|
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
|
|
|
border-radius: 10rpx;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.top_background_wrapper {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
height: 38rpx;
|
|
|
background: #239EA3;
|
|
|
z-index: 0;
|
|
|
}
|
|
|
|
|
|
.combo_list_wrapper {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
width: 730rpx;
|
|
|
height: 260rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
|
|
|
border-radius: 15rpx;
|
|
|
margin: 0 auto;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
}
|
|
|
</style> |