|
|
<script setup>
|
|
|
import DraggableButton from "@/pages/components/goHome.vue";
|
|
|
import PriceRange from "@/common/PriceRange.vue";
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2024年8月7日 20:05:05
|
|
|
*/
|
|
|
import {
|
|
|
ref,
|
|
|
computed,
|
|
|
nextTick
|
|
|
} from "vue";
|
|
|
import {
|
|
|
$image,
|
|
|
$api,
|
|
|
$response
|
|
|
} from "@/api";
|
|
|
import {
|
|
|
onShow,
|
|
|
onLoad
|
|
|
} from "@dcloudio/uni-app";
|
|
|
import {
|
|
|
useStore
|
|
|
} from "@/store";
|
|
|
const $store = useStore();
|
|
|
|
|
|
const $props = defineProps({
|
|
|
groupId: {
|
|
|
type: String,
|
|
|
default: "",
|
|
|
},
|
|
|
});
|
|
|
|
|
|
const combo_active = ref("");
|
|
|
const person_active = ref("");
|
|
|
let tabs_active_id=ref(false); //激活tabsid
|
|
|
let popup = ref(null);
|
|
|
let popup_new = ref(null);
|
|
|
let selectKey = ref(""); // 整个选择的key
|
|
|
let sortIndex = ref(0); // 排序的索引
|
|
|
let comboIndex = ref(null); // 套餐类型索引
|
|
|
let sort_price_index=ref(null)
|
|
|
let sort_salecount_index=ref(null)
|
|
|
let crowdIndex = ref(null); // 适用人群索引
|
|
|
let priceIndex = ref(null); // 套餐价格索引
|
|
|
let projectIds = ref([]); // 项目id集合
|
|
|
let screenObj = ref({}); // 筛选条件
|
|
|
let combo_select = ref({}); // 套餐筛选条件
|
|
|
let comboIds = ref([]); // 套餐对比列表
|
|
|
let popupMultiple = ref(false); // 多选弹窗
|
|
|
let multipleList = ref([]); // 多选列表
|
|
|
let multipleIndex = ref(0); // 多选索引
|
|
|
let itemIds = ref([]); // 项目id集合
|
|
|
let itemId = ref(""); // 项目id
|
|
|
let comboId = ref(""); // 套餐id
|
|
|
let price_max_min=ref([]);
|
|
|
let zhuangjianType=ref(18);
|
|
|
let TiShiPopupRef=ref(null);//提示弹窗
|
|
|
let SelectedComboInfo=ref(null);//选中的套餐信息
|
|
|
|
|
|
const selectItemClick = async (index, key) => {
|
|
|
// 选择套餐条件
|
|
|
let data = combo_select.value;
|
|
|
if (selectKey.value == "sort_list") {
|
|
|
combo_list.value.list = []
|
|
|
if (sortIndex.value == index) {
|
|
|
sortIndex.value = 0;
|
|
|
} else {
|
|
|
sortIndex.value = index;
|
|
|
}
|
|
|
screenObj.value.combo_sort = data[selectKey.value][index]?.id;
|
|
|
} else if (selectKey.value == "sort_sale_count") {
|
|
|
//清除综合排序
|
|
|
sortIndex.value = 0;
|
|
|
delete screenObj.value.combo_sort;
|
|
|
|
|
|
if (sort_salecount_index.value == index) {
|
|
|
sort_salecount_index.value = null;
|
|
|
delete screenObj.value.sort_sale_count;
|
|
|
} else {
|
|
|
sort_salecount_index.value = index;
|
|
|
screenObj.value.sort_sale_count = data[selectKey.value][index]?.id;
|
|
|
}
|
|
|
} else if (selectKey.value == "sort_price") {
|
|
|
//清除综合排序
|
|
|
sortIndex.value = 0;
|
|
|
delete screenObj.value.combo_sort;
|
|
|
|
|
|
if (sort_price_index.value == index) {
|
|
|
sort_price_index.value = null;
|
|
|
delete screenObj.value.sort_price;
|
|
|
} else {
|
|
|
sort_price_index.value = index;
|
|
|
screenObj.value.sort_price = data[selectKey.value][index]?.id;
|
|
|
}
|
|
|
} else {
|
|
|
if (key == "combo_price") {
|
|
|
if (priceIndex.value == index) {
|
|
|
priceIndex.value = null;
|
|
|
return;
|
|
|
}
|
|
|
priceIndex.value = index;
|
|
|
} else {
|
|
|
if (projectIds.value?.includes(index)) {
|
|
|
projectIds.value.splice(projectIds.value.indexOf(index), 1);
|
|
|
} else {
|
|
|
projectIds.value.push(index);
|
|
|
}
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
await getComboList();
|
|
|
popup.value.close();
|
|
|
};
|
|
|
const selectDone = async () => {
|
|
|
if (priceIndex.value === null) {
|
|
|
delete screenObj.value.combo_price;
|
|
|
} else {
|
|
|
screenObj.value.combo_price =
|
|
|
combo_select.value["combo_price"][priceIndex.value]?.id;
|
|
|
}
|
|
|
if (projectIds.value.length) {
|
|
|
screenObj.value.combo_item = projectIds.value;
|
|
|
} else {
|
|
|
delete screenObj.value.combo_item;
|
|
|
}
|
|
|
await getComboList();
|
|
|
popup_new.value.close();
|
|
|
};
|
|
|
|
|
|
const remake = () => {
|
|
|
// 重置筛选
|
|
|
delete screenObj.value.combo_price;
|
|
|
delete screenObj.value.combo_item;
|
|
|
delete screenObj.value.price_range
|
|
|
delete screenObj.value.combo_crowd
|
|
|
delete screenObj.value.combo_type
|
|
|
price_max_min.value=[0,combo_list.value.price_max];
|
|
|
priceIndex.value = null;
|
|
|
projectIds.value = [];
|
|
|
comboIndex.value=null
|
|
|
crowdIndex.value=null
|
|
|
};
|
|
|
const getComboSelect = async () => {
|
|
|
uni.showLoading();
|
|
|
const response = await $api("GetComboSort");
|
|
|
uni.hideLoading();
|
|
|
$response(response, async () => {
|
|
|
combo_select.value = response.data;
|
|
|
combo_select.value.sort_sale_count=[{id:1,name:"销量从低到高"},{id:2,name:"销量从高到低"}]
|
|
|
combo_select.value.sort_price=[{id:1,name:"价格从低到高"},{id:2,name:"价格从高到低"}]
|
|
|
if ("sort_list" in combo_select.value) {
|
|
|
selectKey.value = "sort_list";
|
|
|
sortIndex.value = 0;
|
|
|
}
|
|
|
await getComboList();
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const combo_list = ref({
|
|
|
list: [],
|
|
|
hospital: {
|
|
|
id: 1,
|
|
|
},
|
|
|
doctor: {
|
|
|
id: 0,
|
|
|
},
|
|
|
info: {
|
|
|
name: "",
|
|
|
},
|
|
|
});
|
|
|
|
|
|
const combo_list_computed = computed(() => {
|
|
|
let list = [];
|
|
|
for (let i in combo_list.value.list) {
|
|
|
let push = false;
|
|
|
if (!combo_active.value) {
|
|
|
push = true;
|
|
|
} else {
|
|
|
if (combo_list.value.list[i].combo_type === combo_active.value) {
|
|
|
push = true;
|
|
|
}
|
|
|
}
|
|
|
if (!!push) {
|
|
|
if (!person_active.value) {
|
|
|
push = true;
|
|
|
} else {
|
|
|
if (combo_list.value.list[i].person_type === person_active.value) {
|
|
|
push = true;
|
|
|
} else {
|
|
|
push = false;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
if (!!push) {
|
|
|
list.push(combo_list.value.list[i]);
|
|
|
}
|
|
|
}
|
|
|
return list;
|
|
|
});
|
|
|
let combo_list_k = ref(null)
|
|
|
const getComboList = async (e) => {
|
|
|
uni.showLoading();
|
|
|
let obj = {
|
|
|
doctor: $store.save.doctor,
|
|
|
hospital: hospital_active.value,
|
|
|
search: e?.value,
|
|
|
keshi_name: keshi_name.value
|
|
|
};
|
|
|
if ($store.getCheckupTypeId()) {
|
|
|
let b = $store.getCheckupTypeId();
|
|
|
console.log();
|
|
|
if (Object.keys(b).length != 0) {
|
|
|
screenObj.value.checkup_type_id = b.id;
|
|
|
}
|
|
|
}
|
|
|
if (screenObj.value) {
|
|
|
obj = Object.assign(obj, screenObj.value);
|
|
|
}
|
|
|
|
|
|
const response = await $api("ComboList", obj);
|
|
|
uni.hideLoading();
|
|
|
$response(response, () => {
|
|
|
combo_list.value = response.data;
|
|
|
price_max_min.value=combo_list.value.price_max_min
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const contrastClick = async (item) => {
|
|
|
if (comboIds.value.includes(item.combo_id)) {
|
|
|
comboIds.value.splice(comboIds.value.indexOf(item.combo_id), 1);
|
|
|
} else {
|
|
|
if (comboIds.value.length < 3) {
|
|
|
comboIds.value.push(item.combo_id);
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: "最多对比3个套餐",
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
$store.setComboContrast(comboIds.value);
|
|
|
};
|
|
|
|
|
|
const hospital_active = ref(0);
|
|
|
const checkHospital = () => {
|
|
|
let hospital_id = $store.save.hospital;
|
|
|
comboIds.value = $store.getComboContrast() || [];
|
|
|
if (!hospital_id) {
|
|
|
hospital_id = $store.config.hospital[0].id;
|
|
|
}
|
|
|
hospital_active.value = hospital_id;
|
|
|
$store.saveInfo({
|
|
|
hospital: hospital_id,
|
|
|
});
|
|
|
getComboSelect();
|
|
|
};
|
|
|
|
|
|
const tabPatients = () => {
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/user/choose/choose",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const open = (key) => {
|
|
|
if (key) {
|
|
|
// 点击三个筛选条件
|
|
|
selectKey.value = key;
|
|
|
popup.value.close();
|
|
|
popup_new.value.close();
|
|
|
let time = setTimeout(() => {
|
|
|
popup.value.open("top");
|
|
|
clearTimeout(time);
|
|
|
}, 400);
|
|
|
} else {
|
|
|
// 点击筛选
|
|
|
popup.value.close();
|
|
|
popup_new.value.close();
|
|
|
selectKey.value = "screen";
|
|
|
|
|
|
let time = setTimeout(() => {
|
|
|
|
|
|
popup_new.value.open("top");
|
|
|
clearTimeout(time);
|
|
|
}, 400);
|
|
|
|
|
|
// if (screenObj.value.combo_price) {
|
|
|
// priceIndex.value = combo_select.value["combo_price"].findIndex(
|
|
|
// (item) => item.id == screenObj.value.combo_price
|
|
|
// );
|
|
|
// } else {
|
|
|
// priceIndex.value = null;
|
|
|
// }
|
|
|
|
|
|
// if (screenObj.value.combo_item?.length) {
|
|
|
// projectIds.value = [...screenObj.value.combo_item];
|
|
|
// } else {
|
|
|
// projectIds.value = [];
|
|
|
// }
|
|
|
}
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const config_ref = ref(null);
|
|
|
const configRef = (e) => {
|
|
|
if (!config_ref.value) {
|
|
|
config_ref.value = e;
|
|
|
checkHospital();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
onShow(() => {
|
|
|
$store.setDuoXuanYi({});
|
|
|
itemIds.value = [];
|
|
|
if (!!config_ref.value) {
|
|
|
checkHospital();
|
|
|
}
|
|
|
});
|
|
|
let keshi_name = ref(null);
|
|
|
onLoad((e) => {
|
|
|
keshi_name.value = e.keshi_name
|
|
|
})
|
|
|
|
|
|
const buyClick = async (item) => {
|
|
|
SelectedComboInfo.value=item
|
|
|
let checkup_type_id = $store.getCheckupTypeId();
|
|
|
console.log("----", checkup_type_id.id);
|
|
|
if (checkup_type_id.id == "" || checkup_type_id.id == undefined) {
|
|
|
$store.setCheckupTypeId({
|
|
|
id: item.checkup_type_id
|
|
|
});
|
|
|
}
|
|
|
comboId.value = item.combo_id;
|
|
|
if (item.duo_xuan_yi.length > 0) {
|
|
|
popupMultiple.value.open("center");
|
|
|
multipleIndex.value = 0;
|
|
|
itemIds.value = [];
|
|
|
$store.setDuoXuanYi([]);
|
|
|
itemId.value = "";
|
|
|
multipleList.value = item.duo_xuan_yi;
|
|
|
return;
|
|
|
}
|
|
|
if(item.type_id=zhuangjianType.value){
|
|
|
TiShiPopupRef.value.open();
|
|
|
return
|
|
|
}
|
|
|
toDetail();
|
|
|
};
|
|
|
|
|
|
const nextItemClick = () => {
|
|
|
if (!itemId.value) {
|
|
|
uni.$lu.toast("请选择项目");
|
|
|
return;
|
|
|
}
|
|
|
itemIds.value.push({
|
|
|
item_id: itemId.value,
|
|
|
zu_name: multipleList.value[multipleIndex.value]["0"]["zu_name"],
|
|
|
});
|
|
|
if (multipleIndex.value == multipleList.value.length - 1) {
|
|
|
toDetail();
|
|
|
return;
|
|
|
}
|
|
|
itemId.value = "";
|
|
|
multipleIndex.value = multipleIndex.value + 1;
|
|
|
};
|
|
|
|
|
|
const toDetail = () => {
|
|
|
// 跳转到套餐详情
|
|
|
let query = "?comboId=" + comboId.value;
|
|
|
if ($props.groupId) {
|
|
|
// 团检把团检ID加上
|
|
|
query += "&groupId=" + $props.groupId;
|
|
|
}
|
|
|
$store.setDuoXuanYi(itemIds.value);
|
|
|
// 个检只要套餐ID
|
|
|
// 预约 跳转到个检/团检套餐详情
|
|
|
popupMultiple.value.close();
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/main/tj/tjxq" + query,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const toRouter = () => {
|
|
|
if (!comboIds.value.length) {
|
|
|
uni.showToast({
|
|
|
title: "请先选择套餐",
|
|
|
icon: "none",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/main/combo/tcdb",
|
|
|
});
|
|
|
};
|
|
|
const ComboTypeClickFunc=(id)=>{
|
|
|
if(comboIndex.value==id){
|
|
|
comboIndex.value=null
|
|
|
delete screenObj.value.combo_type
|
|
|
}else{
|
|
|
comboIndex.value=id
|
|
|
screenObj.value.combo_type=comboIndex.value
|
|
|
}
|
|
|
|
|
|
}
|
|
|
const ComboCrowdClickFunc=(id)=>{
|
|
|
if(crowdIndex.value==id){
|
|
|
crowdIndex.value=null
|
|
|
delete screenObj.value.combo_crowd
|
|
|
}else{
|
|
|
crowdIndex.value=id
|
|
|
screenObj.value.combo_crowd=crowdIndex.value
|
|
|
}
|
|
|
}
|
|
|
const CheckItemClickFunc=(id)=>{
|
|
|
if (projectIds.value?.includes(id)) {
|
|
|
projectIds.value.splice(projectIds.value.indexOf(id), 1);
|
|
|
} else {
|
|
|
projectIds.value.push(id);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
const getHuaKuaiValue=(value)=>{
|
|
|
screenObj.value.price_range=value
|
|
|
price_max_min.value=value
|
|
|
console.log(price_max_min.value);
|
|
|
}
|
|
|
const tabsClickFunc=(value)=>{
|
|
|
tabs_active_id.value=value
|
|
|
if(value==1){
|
|
|
comboIndex.value=zhuangjianType.value //设置筛选套餐类型为专家
|
|
|
screenObj.value.combo_type=comboIndex.value
|
|
|
}else{
|
|
|
comboIndex.value=''
|
|
|
delete screenObj.value.combo_type
|
|
|
}
|
|
|
getComboList();
|
|
|
}
|
|
|
</script>
|
|
|
<template>
|
|
|
<DraggableButton />
|
|
|
<view style="background-color: #d8eef3; padding-top: 20rpx;">
|
|
|
<view v-if="!!$store.config">
|
|
|
<view :ref="configRef"></view>
|
|
|
</view>
|
|
|
|
|
|
<view class="header_wrapper">
|
|
|
<view @click="toRouter"
|
|
|
class="center fixed pt-10rpx box-border left-40rpx bottom-5% rounded-full w-110rpx h-110rpx bg-#239EA3 flex-col">
|
|
|
<uni-badge :text="comboIds.length" absolute="rightTop" size="small">
|
|
|
<image src="@/static/assets/slices/duibi.png" mode="widthFix" class="w-42rpx" />
|
|
|
</uni-badge>
|
|
|
<text class="text-22rpx text-#fff -mt-5rpx">对比</text>
|
|
|
</view>
|
|
|
|
|
|
<view v-if="!!combo_list.hospital.id" class="hospital_wrapper">
|
|
|
<view class="hospital_icon_wrapper">
|
|
|
<image src="@/static/assets/dingwei@2x.png"></image>
|
|
|
</view>
|
|
|
<view class="hospital_name_wrapper">{{combo_list.hospital.name}}</view>
|
|
|
<view class="hospital_select_wrapper">
|
|
|
<image src="@/static/assets/gengduo@2x.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="!!combo_list.info.name" class="user_wrapper" @click="tabPatients()">
|
|
|
<view class="user_title_wrapper">体检人：</view>
|
|
|
<view class="user_name_wrapper">{{ combo_list.info.name }}</view>
|
|
|
<view v-if="combo_list.info.count > 1" class="user_choose_wrapper">
|
|
|
<image src="@/static/assets/qiehuan@2x.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="bg-#d8edf2" style="margin-top: -10rpx;">
|
|
|
<uni-search-bar class="search" radius="100" placeholder="请输入关键字搜索" @clear="getComboList()"
|
|
|
@cancel="getComboList()" @confirm="getComboList" />
|
|
|
</view>
|
|
|
<view class="top_button_row">
|
|
|
<view @click="tabsClickFunc(0)" :class="['top_button',{'top_button_active':tabs_active_id==false}]">选择套餐</view>
|
|
|
<view @click="tabsClickFunc(1)" :class="['top_button',{'top_button_active':tabs_active_id==true}]">专家定制</view>
|
|
|
<view class="top_button">项目自选</view>
|
|
|
</view>
|
|
|
<view class="select_wrapper flex" v-if="selectKey">
|
|
|
<template v-for="(value, key, index) in combo_select" :key="index">
|
|
|
<view @click="open(key)" class="flex-1 center text-#2f2f2f text-26rpx line-height-[1]"
|
|
|
v-if="key != 'combo_price' && key != 'combo_item' && key != 'combo_type' && key != 'combo_crowd'" :class="{
|
|
|
'!text-#239EA3': selectKey == key,
|
|
|
}">
|
|
|
<view v-if="key == 'sort_list'">
|
|
|
{{ value[sortIndex]?.name || "综合排序" }}
|
|
|
</view>
|
|
|
<view v-if="key == 'sort_sale_count'">
|
|
|
{{ value[sort_salecount_index]?.name || "按销量" }}
|
|
|
</view>
|
|
|
<view v-if="key == 'sort_price'">
|
|
|
{{ value[sort_price_index]?.name || "按价格" }}
|
|
|
</view>
|
|
|
<view class="select_item_icon_wrapper">
|
|
|
<image src="@/static/assets/xuanzegengduo@2x.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<view @click="open()" :class="{
|
|
|
'!text-#239EA3': selectKey == 'screen',
|
|
|
}" class="mx-20rpx center text-#2f2f2f text-26rpx">
|
|
|
<view>筛选</view>
|
|
|
<view class="select_item_icon2_wrapper">
|
|
|
<image src="@/static/assets/shaixuan@2x.png"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="list_wrapper" ref="combo_list_k">
|
|
|
<view class="combo_wrapper" v-for="(i, k) in combo_list_computed" :key="k">
|
|
|
<view style="display: flex;">
|
|
|
<view class="combo_info_wrapper">
|
|
|
<view class="combo_content_wrapper">
|
|
|
<view style="display: flex;">
|
|
|
<view class="combo_name_wrapper">{{ i.name }}
|
|
|
</view>
|
|
|
<view v-if="i.is_hot">
|
|
|
<image style="height: 32rpx;width: 24rpx;" src="@/static/assets/buy/huomiao.jpg"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="combo_tags_wrapper">
|
|
|
<view class="combo_tag_wrapper" v-for="(ii, kk) in i.tag" :key="kk"
|
|
|
:style="{ color: ii.text_color, background: '#fff',}">
|
|
|
{{ ii.text }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="combo_desc_wrapper">
|
|
|
{{ i.tags2?.join(" | ") }}
|
|
|
</view>
|
|
|
<view class="combo_price_wrapper">
|
|
|
<view class="combo_price_box_wrapper">
|
|
|
<view class="combo_true_price_wrapper">
|
|
|
<text class="combo_true_price_icon_wrapper">¥</text>
|
|
|
<text class="combo_true_price_number_wrapper">{{ i.price }}</text>
|
|
|
</view>
|
|
|
<view v-if="i.type_id!=zhuangjianType" class="combo_original_price_wrapper">¥{{ i.original_price }}</view>
|
|
|
<view v-if="i.type_id==zhuangjianType" class="combo_original_price_wrapper2">预存款</view>
|
|
|
</view>
|
|
|
<!-- <view class="combo_count_wrapper">已售{{ i.count }}</view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="combo_button_wrapper">
|
|
|
<view v-if="i.type_id!=zhuangjianType" @click="contrastClick(i)" class="combo_pick_button_wrapper">
|
|
|
{{comboIds.includes(i.combo_id) ? "已加入" : "对比"}}
|
|
|
</view>
|
|
|
<view class="combo_buy_button_wrapper" @click="buyClick(i)">选择</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="combo_line_wrapper"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<uni-popup ref="popupMultiple" class="w-full">
|
|
|
<view class="rounded-10rpx px-20rpx pb-55rpx box-border bg-#fff w-95vw">
|
|
|
<view class="center relative pt-40rpx pb-30rpx text-36rpx rounded-t-15rpx box-border">
|
|
|
<text class="line-height-[1] text-32rpx">请选择</text>
|
|
|
<uni-icons @click="popupMultiple.close()" type="closeempty" color="#A6A6A6" size="26"
|
|
|
class="absolute right-40rpx"></uni-icons>
|
|
|
</view>
|
|
|
<view class="bg-#F8F8F8 px-20rpx box-border rounded-10rpx">
|
|
|
<view v-for="(item, index) in multipleList[multipleIndex]['item_list']" :key="index"
|
|
|
@click="itemId = item.item_id"
|
|
|
class="px-20rpx box-border b-b-1 b-#EAEAEA b-solid bs between h-100rpx">
|
|
|
<text class="text-#000000 text-30rpx">{{ item.item_name }}</text>
|
|
|
<view class="center">
|
|
|
<text class="text-#EC3D15 text-20rpx mt-10rpx mr-5rpx">¥</text>
|
|
|
<text class="text-#EC3D15 text-32rpx mb-0">{{ item.price }}</text>
|
|
|
<uni-icons class="ml-28rpx" color="#239EA3"
|
|
|
:type="itemId == item.item_id ? 'checkbox-filled' : 'circle'" size="30"></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="text-#239EA3 text-28rpx my-45rpx text-center">当前套餐包含一个可自由{{
|
|
|
multipleList[multipleIndex]["item_list"].length
|
|
|
}}选1的体检项目，请<br />根据您的实际情况自行选择。</view>
|
|
|
<view class="w-270rpx h-80rpx bg-#239EA3 center text-#F8F8F8 text-30rpx rounded-10rpx mx-auto"
|
|
|
@click="nextItemClick()">{{
|
|
|
multipleIndex == multipleList.length - 1 ? "确定" : "下一项"
|
|
|
}}</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
<uni-popup ref="popup" mask-background-color="transparent" :animation="false">
|
|
|
<view class="pt-330rpx w-full h-100vh" @click="popup.close()">
|
|
|
<view class="bg-[rgba(0,0,0,0.3)] h-100%">
|
|
|
<view class="bg-#fff" :class="
|
|
|
selectKey != 'sort_list'
|
|
|
? 'flex pt20rpx px10rpx pb0 box-border flex-wrap'
|
|
|
: ''
|
|
|
">
|
|
|
<view v-for="(val, index) in combo_select[selectKey]" :key="index"
|
|
|
@click.stop="selectItemClick(index)" :class="{
|
|
|
'min-w-23% mx-1% mb-20rpx': selectKey != 'sort_list',
|
|
|
}">
|
|
|
<uni-list-item v-if="selectKey == 'sort_list'">
|
|
|
<template v-slot:body>
|
|
|
<text class="text-26rpx" :class="{
|
|
|
'!text-#239EA3': sortIndex == index,
|
|
|
}">{{ val.name }}</text>
|
|
|
</template>
|
|
|
</uni-list-item>
|
|
|
<view v-else
|
|
|
class="box-border px-28rpx py-20rpx text-26rpx center line-height-[1] rounded-5rpx"
|
|
|
:class="{
|
|
|
'!bg-#239EA3 !text-#fff':
|
|
|
(selectKey == 'sort_sale_count' && sort_salecount_index == index) ||
|
|
|
(selectKey == 'sort_price' && sort_price_index == index),
|
|
|
'!text-#747474 !bg-#e0e0e0':
|
|
|
(selectKey == 'sort_sale_count' && sort_salecount_index != index) ||
|
|
|
(selectKey == 'sort_price' && sort_price_index != index),
|
|
|
}">{{ val.name }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
<uni-popup ref="popup_new" mask-background-color="transparent" :animation="false" :is-mask-click="true" >
|
|
|
<view class="pt-292rpx w-full h-100vh" >
|
|
|
<view class="bg-[rgba(0,0,0,0.3)] h-100%">
|
|
|
<view class="popup_new_main">
|
|
|
<view class="shaixuan_title">套餐类型</view>
|
|
|
<view style="display: flex;flex-wrap: wrap; ">
|
|
|
<view v-for="(item,index) in combo_select.combo_type" @click="ComboTypeClickFunc(item.id)" :class="['shaixuan_button',{'shaixuan_button_active': comboIndex==item.id}]">
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="shaixuan_title">价格区间</view>
|
|
|
<PriceRange @huakuaiValue="getHuaKuaiValue" :step="combo_list.step" :rangDate="price_max_min" :rangMax="combo_list.price_max" :dataInfo="combo_list.price_range"></PriceRange>
|
|
|
<view style="margin-top: -70rpx;">
|
|
|
<view class="shaixuan_title">适用人群</view>
|
|
|
<view style="display: flex;flex-wrap: wrap; ">
|
|
|
<view v-for="(item,index) in combo_select.combo_crowd" @click="ComboCrowdClickFunc(item.id)" :class="['shaixuan_button',{'shaixuan_button_active': crowdIndex==item.id}]">
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view >
|
|
|
<view class="shaixuan_title">体检项目</view>
|
|
|
<view style="display: flex;flex-wrap: wrap; ">
|
|
|
<view v-for="(item,index) in combo_select.combo_item" @click="CheckItemClickFunc(item.id)" :class="['shaixuan_button',{'shaixuan_button_active': projectIds.includes(item.id)}]">
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="around" style="margin-top: 40rpx;">
|
|
|
<view class="w-40% text-26rpx h-60rpx center rounded-full bg-#239EA3 text-#fff"
|
|
|
@click="remake()">重置</view>
|
|
|
<view class="w-40% text-26rpx h-60rpx center rounded-full bg-#239EA3 text-#fff"
|
|
|
@click="selectDone()">确定</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style=";height: 100%;" @click="popup_new.close()"></view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
<uni-popup ref="TiShiPopupRef" style="z-index: 999;">
|
|
|
<view class="tishi_main">
|
|
|
<view class="tishi_title">套餐须知</view>
|
|
|
<view class="tishi_title2">专家定制套餐</view>
|
|
|
<view class="tishi_content">此套餐收费{{SelectedComboInfo.price}}元为预存款，可根据现场定制套餐后实际价格多退少补。</view>
|
|
|
<view class="tishi_button" @click="toDetail()">我已知晓</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
<style scoped>
|
|
|
.tishi_main{
|
|
|
background-color: #fff;
|
|
|
padding: 40rpx 50rpx;
|
|
|
width:600rpx;
|
|
|
border-radius: 40rpx;
|
|
|
}
|
|
|
.tishi_button{
|
|
|
width: 365rpx;
|
|
|
background-color: #009da5;
|
|
|
color:#fff;
|
|
|
text-align: center;
|
|
|
padding-top: 10rpx;
|
|
|
padding-bottom: 10rpx;
|
|
|
border-radius: 40rpx;
|
|
|
margin: 40rpx auto 10rpx auto;
|
|
|
}
|
|
|
.tishi_title{
|
|
|
text-align: center;
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 600;
|
|
|
color:#2b2827;
|
|
|
}
|
|
|
.tishi_title2{
|
|
|
font-size: 28rpx;
|
|
|
margin-top: 30rpx;
|
|
|
font-weight: 600;
|
|
|
color:#3a3635;
|
|
|
border-left: 3px solid #009da5;
|
|
|
padding-left: 5rpx;
|
|
|
}
|
|
|
.tishi_content{
|
|
|
font-size: 28rpx;
|
|
|
margin-top: 30rpx;
|
|
|
color:#474241;
|
|
|
}
|
|
|
.select_done_wrapper {
|
|
|
color: #ffffff;
|
|
|
background: #239ea3;
|
|
|
width: calc(100% - 60rpx);
|
|
|
margin: 50rpx auto 0;
|
|
|
height: 50rpx;
|
|
|
line-height: 50rpx;
|
|
|
text-align: center;
|
|
|
border-radius: 6rpx;
|
|
|
}
|
|
|
|
|
|
.select_group_item_wrapper {
|
|
|
padding: 10rpx 20rpx;
|
|
|
border: 1rpx solid #239ea3;
|
|
|
font-size: 22rpx;
|
|
|
margin: 20rpx 20rpx 0 0;
|
|
|
border-radius: 6rpx;
|
|
|
color: #239ea3;
|
|
|
}
|
|
|
|
|
|
.select_group_item_wrapper.active {
|
|
|
color: #ffffff;
|
|
|
background: #239ea3;
|
|
|
}
|
|
|
|
|
|
.select_group_line_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.select_group_wrapper {
|
|
|
margin: 20rpx;
|
|
|
}
|
|
|
|
|
|
.list_wrapper {
|
|
|
padding-top: 30rpx;
|
|
|
height: calc(100vh - 100rpx - 10rpx - 70rpx - 80rpx - 30rpx - 30rpx);
|
|
|
width: 750rpx;
|
|
|
overflow-y: auto;
|
|
|
padding-bottom: 30rpx;
|
|
|
margin: 0 auto;
|
|
|
overflow-x: hidden;
|
|
|
-ms-overflow-style: none;
|
|
|
scrollbar-width: none;
|
|
|
overflow: -moz-scrollbars-none;
|
|
|
overflow-y: scroll;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
.list_wrapper::-webkit-scrollbar {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.combo_line_wrapper {
|
|
|
width: 710rpx;
|
|
|
height: 1rpx;
|
|
|
background: #e1ecee;
|
|
|
margin: 26rpx 0rpx 0rpx 0;
|
|
|
}
|
|
|
|
|
|
.combo_pick_button_wrapper {
|
|
|
width: 160rpx;
|
|
|
height: 60rpx;
|
|
|
background: #e1ecee;
|
|
|
border-radius: 30rpx;
|
|
|
font-weight: 400;
|
|
|
font-size: 28rpx;
|
|
|
color: #239ea3;
|
|
|
text-align: center;
|
|
|
line-height: 60rpx;
|
|
|
}
|
|
|
|
|
|
.combo_buy_button_wrapper {
|
|
|
width: 160rpx;
|
|
|
height: 60rpx;
|
|
|
background: #239ea3;
|
|
|
border-radius: 30rpx;
|
|
|
font-weight: 400;
|
|
|
font-size: 28rpx;
|
|
|
color: #ffffff;
|
|
|
text-align: center;
|
|
|
line-height: 60rpx;
|
|
|
}
|
|
|
|
|
|
.combo_button_wrapper {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
|
|
|
}
|
|
|
|
|
|
.combo_count_wrapper {
|
|
|
font-weight: 500;
|
|
|
font-size: 18rpx;
|
|
|
color: #8b8b8b;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.combo_original_price_wrapper {
|
|
|
font-weight: 500;
|
|
|
font-size: 18rpx;
|
|
|
color: #8b8b8b;
|
|
|
line-height: 1;
|
|
|
text-decoration-line: line-through;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
.combo_original_price_wrapper2 {
|
|
|
font-weight: 500;
|
|
|
font-size: 18rpx;
|
|
|
color: #8b8b8b;
|
|
|
line-height: 1;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
|
|
|
.combo_true_price_wrapper {
|
|
|
font-weight: 500;
|
|
|
font-size: 18rpx;
|
|
|
color: #ec3d15;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.combo_true_price_number_wrapper {
|
|
|
font-size: 38rpx;
|
|
|
}
|
|
|
|
|
|
.combo_price_wrapper {
|
|
|
display: flex;
|
|
|
align-items: end;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 21rpx;
|
|
|
}
|
|
|
|
|
|
.combo_price_box_wrapper {
|
|
|
display: flex;
|
|
|
align-items: end;
|
|
|
}
|
|
|
|
|
|
.combo_wrapper {
|
|
|
/* height: 196rpx; */
|
|
|
width: calc(750rpx - 80rpx);
|
|
|
margin: 0 auto;
|
|
|
background-color: #fff;
|
|
|
padding: 0rpx 40rpx 30rpx 40rpx;
|
|
|
}
|
|
|
|
|
|
.combo_tags_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-top: 13rpx;
|
|
|
}
|
|
|
|
|
|
.combo_desc_wrapper {
|
|
|
font-weight: 500;
|
|
|
font-size: 20rpx;
|
|
|
color: #8b8b8b;
|
|
|
line-height: 1;
|
|
|
margin-top: 18rpx;
|
|
|
}
|
|
|
|
|
|
.combo_tag_wrapper {
|
|
|
padding-left: 13rpx;
|
|
|
padding-right: 13rpx;
|
|
|
height: 30rpx;
|
|
|
line-height: 30rpx;
|
|
|
border-radius: 5rpx;
|
|
|
font-weight: 400;
|
|
|
font-size: 18rpx;
|
|
|
color: #47abd8;
|
|
|
margin: 10rpx 8rpx 10rpx 0rpx;
|
|
|
border: 1rpx solid #009da5;
|
|
|
}
|
|
|
|
|
|
.combo_name_wrapper {
|
|
|
font-weight: 400;
|
|
|
font-size: 32rpx;
|
|
|
color: #0e0e0e;
|
|
|
line-height: 32rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.combo_content_wrapper {
|
|
|
margin-left: 30rpx;
|
|
|
width: calc(750rpx - 190rpx - 30rpx - 20rpx - 55rpx);
|
|
|
}
|
|
|
|
|
|
.combo_info_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
width: 750rpx;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
.combo_cover_wrapper {
|
|
|
width: 190rpx;
|
|
|
height: 190rpx;
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
|
|
|
.combo_cover_wrapper image {
|
|
|
width: 190rpx;
|
|
|
height: 190rpx;
|
|
|
display: block;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.select_item_line_wrapper {
|
|
|
position: absolute;
|
|
|
width: 95rpx;
|
|
|
height: 10rpx;
|
|
|
background: linear-gradient(to bottom, #ffffff00, #1b9a9f);
|
|
|
border-radius: 5rpx;
|
|
|
bottom: 0;
|
|
|
left: 50%;
|
|
|
transform: translateX(calc(-50% - 8px));
|
|
|
opacity: 0;
|
|
|
}
|
|
|
|
|
|
.select_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
width: 750rpx;
|
|
|
height: 80rpx;
|
|
|
background: #eef7f7;
|
|
|
box-shadow: 0rpx -1rpx 1rpx 0rpx rgba(0, 0, 0, 0.1);
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
z-index: 998;
|
|
|
}
|
|
|
|
|
|
.select_item_icon_wrapper {
|
|
|
width: 18rpx;
|
|
|
height: 9rpx;
|
|
|
margin-left: 9rpx;
|
|
|
filter: grayscale(100%);
|
|
|
}
|
|
|
|
|
|
.select_item_icon_wrapper image {
|
|
|
width: 18rpx;
|
|
|
height: 9rpx;
|
|
|
display: block;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.select_item_icon2_wrapper {
|
|
|
width: 26rpx;
|
|
|
height: 23rpx;
|
|
|
margin-left: 7rpx;
|
|
|
}
|
|
|
|
|
|
.select_item_icon2_wrapper image {
|
|
|
width: 26rpx;
|
|
|
height: 23rpx;
|
|
|
display: block;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.select_item_name_wrapper {
|
|
|
font-weight: 400;
|
|
|
font-size: 26rpx;
|
|
|
color: #2f2f2f;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.select_item_wrapper {
|
|
|
width: 25%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
height: 80rpx;
|
|
|
}
|
|
|
|
|
|
.select_item_wrapper.active .select_item_name_wrapper {
|
|
|
color: #239ea3;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.select_item_wrapper.active .select_item_icon_wrapper {
|
|
|
filter: grayscale(0%);
|
|
|
}
|
|
|
|
|
|
.select_item_wrapper.active .select_item_line_wrapper {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
.doctor_name_wrapper {
|
|
|
font-weight: 400;
|
|
|
font-size: 24rpx;
|
|
|
line-height: 1;
|
|
|
color: #ffffff;
|
|
|
border-bottom: 1rpx solid #ffffff;
|
|
|
}
|
|
|
|
|
|
.doctor_tip_wrapper {
|
|
|
font-weight: 400;
|
|
|
font-size: 22rpx;
|
|
|
line-height: 1;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.doctor_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
width: 710rpx;
|
|
|
height: 70rpx;
|
|
|
background: #239ea3;
|
|
|
border-radius: 15rpx 15rpx 0rpx 0rpx;
|
|
|
padding-left: 24rpx;
|
|
|
}
|
|
|
|
|
|
.user_choose_wrapper {
|
|
|
width: 50rpx;
|
|
|
height: 50rpx;
|
|
|
margin-left: 30rpx;
|
|
|
}
|
|
|
|
|
|
.user_choose_wrapper image {
|
|
|
width: 50rpx;
|
|
|
height: 50rpx;
|
|
|
display: block;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.user_title_wrapper {
|
|
|
font-weight: 400;
|
|
|
font-size: 26rpx;
|
|
|
color: #fff;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.user_name_wrapper {
|
|
|
font-weight: 400;
|
|
|
font-size: 26rpx;
|
|
|
color: #fff;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.user_wrapper {
|
|
|
height: 60rpx;
|
|
|
padding-left: 40rpx;
|
|
|
padding-right: 20rpx;
|
|
|
margin-right: 20rpx;
|
|
|
background: #009ea7;
|
|
|
border-radius: 40rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.header_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
width: 710rpx;
|
|
|
height: 90rpx;
|
|
|
background: #d8edf2;
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
|
|
|
background-color: #fff;
|
|
|
margin-left: 20rpx;
|
|
|
margin-right: 20rpx;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
|
|
|
.hospital_wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
width: 40%;
|
|
|
}
|
|
|
|
|
|
.hospital_icon_wrapper {
|
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
|
|
margin-left: 20rpx;
|
|
|
}
|
|
|
|
|
|
.hospital_icon_wrapper image {
|
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
|
|
display: block;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.hospital_name_wrapper {
|
|
|
font-weight: 400;
|
|
|
font-size: 28rpx;
|
|
|
color: #484747;
|
|
|
margin-left: 9rpx;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
|
|
|
.hospital_select_wrapper {
|
|
|
width: 24rpx;
|
|
|
height: 14rpx;
|
|
|
margin-left: 19rpx;
|
|
|
}
|
|
|
|
|
|
.hospital_select_wrapper image {
|
|
|
width: 24rpx;
|
|
|
height: 14rpx;
|
|
|
display: block;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
|
|
|
.popup_new_main {
|
|
|
background-color: #fff;
|
|
|
border-radius: 0rpx 0rpx 20rpx 20rpx;
|
|
|
padding: 40rpx 20rpx 20rpx 20rpx;
|
|
|
}
|
|
|
|
|
|
.top_button_row {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding-left: 20rpx;
|
|
|
padding-right: 20rpx;
|
|
|
}
|
|
|
|
|
|
.top_button {
|
|
|
color: #666;
|
|
|
background-color: #fff;
|
|
|
padding: 6rpx 40rpx;
|
|
|
border-radius: 15rpx;
|
|
|
margin-top: -6rpx;
|
|
|
margin-bottom: 8rpx;
|
|
|
font-size: 28rpx;
|
|
|
width: 140rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.top_button_active {
|
|
|
background-color: #009ea7;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.search {}
|
|
|
|
|
|
.shaixuan_title {
|
|
|
font-size: 26rpx;
|
|
|
margin-top: 20rpx;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
|
|
|
.shaixuan_button {
|
|
|
font-size: 24rpx;
|
|
|
padding-left: 10rpx;
|
|
|
background-color: #ccc;
|
|
|
margin: 10rpx;
|
|
|
padding: 5rpx 10rpx;
|
|
|
border-radius: 5rpx;
|
|
|
background-color: #f3f3f3;
|
|
|
color: #1e1a19;
|
|
|
}
|
|
|
.shaixuan_button_active{
|
|
|
background-color: #009da5;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
</style> |