套餐对比、专家定制

main
yanzai 11 months ago
parent b64f539826
commit 2abe719b8d

@ -55,6 +55,9 @@
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) => {
//
@ -308,10 +311,7 @@
}
};
const select_drawer_ref = ref(null);
const selectDrawerRef = (e) => {
select_drawer_ref.value = e;
};
onShow(() => {
$store.setDuoXuanYi({});
@ -326,6 +326,7 @@
})
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) {
@ -343,6 +344,10 @@
multipleList.value = item.duo_xuan_yi;
return;
}
if(item.type_id=zhuangjianType.value){
TiShiPopupRef.value.open();
return
}
toDetail();
};
@ -425,6 +430,14 @@
}
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>
@ -526,17 +539,18 @@
<text class="combo_true_price_icon_wrapper">¥</text>
<text class="combo_true_price_number_wrapper">{{ i.price }}</text>
</view>
<view class="combo_original_price_wrapper">¥{{ i.original_price }}</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 @click="contrastClick(i)" class="combo_pick_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 class="combo_buy_button_wrapper" @click="buyClick(i)"></view>
</view>
</view>
<view class="combo_line_wrapper"></view>
@ -605,56 +619,8 @@
</view>
</view>
</uni-popup>
<uni-drawer :ref="selectDrawerRef" mode="right">
<view>
<scroll-view scroll-y="true">
<view>
<view class="select_group_wrapper">
<view class="text-30rpx bold">套餐价格</view>
<view class="select_group_line_wrapper mt-20rpx">
<view v-for="(val, index) in combo_select['combo_price']" :key="index"
@click.stop="selectItemClick(index, 'combo_price')"
class="min-w-31% mx-1% mb-20rpx">
<view
class="box-border px-20rpx py-20rpx text-22rpx center line-height-[1] rounded-5rpx"
:class="{
'!bg-#239EA3 !text-#fff':
selectKey == 'screen' && priceIndex == index,
'!text-#747474 !bg-#e0e0e0':
selectKey == 'screen' && priceIndex != index,
}">{{ val.name }}</view>
</view>
</view>
</view>
<view class="select_group_wrapper">
<view class="text-30rpx bold">体检项目(多选)</view>
<view class="select_group_line_wrapper mt-20rpx">
<view v-for="(val, index) in combo_select['combo_item']" :key="index"
@click.stop="selectItemClick(val.id, 'combo_item')"
class="min-w-31% mx-1% mb-20rpx">
<view
class="box-border px-20rpx py-20rpx text-22rpx center line-height-[1] rounded-5rpx"
:class="{
'!bg-#239EA3 !text-#fff':
selectKey == 'screen' && projectIds.includes(val.id),
'!text-#747474 !bg-#e0e0e0':
selectKey == 'screen' && !projectIds.includes(val.id),
}">{{ val.name }}</view>
</view>
</view>
</view>
<view class="around">
<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>
</scroll-view>
</view>
</uni-drawer>
<uni-popup ref="popup_new" mask-background-color="transparent" :animation="false" :mask-click="false">
<view class="pt-292rpx w-full h-100vh">
<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>
@ -689,12 +655,57 @@
@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;
@ -803,6 +814,13 @@
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;
@ -917,7 +935,7 @@
box-shadow: 0rpx -1rpx 1rpx 0rpx rgba(0, 0, 0, 0.1);
margin: 0 auto;
position: relative;
z-index: 999;
z-index: 998;
}
.select_item_icon_wrapper {
@ -1029,7 +1047,7 @@
}
.user_wrapper {
height: 80rpx;
height: 60rpx;
padding-left: 40rpx;
padding-right: 20rpx;
margin-right: 20rpx;
@ -1045,11 +1063,11 @@
align-items: center;
justify-content: space-between;
width: 710rpx;
height: 100rpx;
height: 90rpx;
background: #d8edf2;
margin: 0 auto;
position: relative;
z-index: 999;
background-color: #fff;
margin-left: 20rpx;
margin-right: 20rpx;
@ -1148,4 +1166,5 @@
background-color: #009da5;
color: #fff;
}
</style>

@ -1,26 +1,36 @@
<script setup>
import DraggableButton from "@/pages/components/goHome.vue";
/**
import DraggableButton from "@/pages/components/goHome.vue";
/**
* name
* usertcdb
* date2024年9月26日 19:26:00
*/
import { ref } from "vue";
import { $api, $response, $image } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";
const $store = useStore();
import {
ref
} from "vue";
import {
$api,
$response,
$image
} from "@/api";
import {
onShow
} from "@dcloudio/uni-app";
import {
useStore
} from "@/store";
const $store = useStore();
let comboIds = ref([]); //
let newComboIds = ref([]); //
let comboIds = ref([]); //
let newComboIds = ref([]); //
const mountedAction = () => {
const mountedAction = () => {
comboIds.value = $store.getComboContrast() || [];
newComboIds.value = $store.getComboContrast() || [];
getdbAxios();
};
const comboInfo = ref(false);
const getdbAxios = async () => {
};
const comboInfo = ref(false);
const getdbAxios = async () => {
uni.showLoading({
title: "加载中",
});
@ -33,22 +43,22 @@ const getdbAxios = async () => {
console.log(response.data, "response.data");
uni.hideLoading();
});
};
const clickdb = async () => {
};
const clickdb = async () => {
$store.setComboContrast(comboIds.value);
uni.navigateTo({
url: "/pages/buy/contrast/contrast",
});
};
const config_ref = ref(null);
const configRef = (e) => {
};
const config_ref = ref(null);
const configRef = (e) => {
if (!config_ref.value) {
config_ref.value = e;
mountedAction();
}
};
};
const selectClick = (id, status) => {
const selectClick = (id, status) => {
console.log(comboIds.value.indexOf(id));
if (status) {
//
@ -65,27 +75,23 @@ const selectClick = (id, status) => {
} else {
newComboIds.value.push(id);
}
};
};
onShow(() => {
onShow(() => {
if (!!config_ref.value) {
mountedAction();
}
});
});
</script>
<template>
<DraggableButton />
<view>
<view style="background-color: #c4d7db;min-height: calc(100vh - 100rpx);">
<view v-if="!!$store.config">
<view :ref="configRef"></view>
</view>
<view class="p-20rpx">
<view
style="border-bottom: 1px solid #e1ecee"
class="flex w-full pb-50rpx mt-50rpx relative"
v-for="(obj, f) in comboInfo"
:key="f"
>
<view class="p-20rpx main_k">
<view class=" taocan flex w-full pb-50rpx mt-20rpx relative"
v-for="(obj, f) in comboInfo" :key="f">
<view class="flex flex-items-center pl-30rpx pr-10rpx pt-10rpx">
<!-- <uni-icons
@click="selectClick(obj.combo_id)"
@ -97,14 +103,8 @@ onShow(() => {
></uni-icons> -->
</view>
<view
class="w-48rpx h-48rpx rounded-15rpx bg-#F9E7E7 absolute flex flex-items-center flex-justify-center right-50rpx top-30px"
>
<uni-icons
@click="selectClick(obj.combo_id, 1)"
type="trash-filled"
color="#D70F0F"
size="25"
></uni-icons>
class="w-48rpx h-48rpx rounded-15rpx absolute flex flex-items-center flex-justify-center right-50rpx top-30px">
<uni-icons @click="selectClick(obj.combo_id, 1)" type="trash" color="#e95513" size="25"></uni-icons>
</view>
<!-- 1个检套餐 显示套餐信息 -->
<!-- <image
@ -114,57 +114,65 @@ onShow(() => {
mode="widthFix"
/> -->
<view class="flex flex-col grow">
<text>{{ obj.name }}</text>
<view class="mt-13rpx mb-18rpx">
<uni-tag
v-for="(val, i) in obj.tag"
:key="i"
size="small"
:inverted="true"
:text="val.text"
<text style="font-weight: 700;color: #3e3a39;">{{ obj.name }}</text>
<view class="mt-13rpx mb-0rpx">
<uni-tag v-for="(val, i) in obj.tag" :key="i" size="small" :inverted="true" :text="val.text"
class="mr-8rpx"
:custom-style="
'background-color:' +
val.color +
';border-color:' +
val.color +
'; color:' +
val.text_color +
';'
"
/>
:custom-style="'background-color:' +val.color + ';border-color:' + val.color + '; color:' + val.text_color + ';' " />
</view>
<view v-if="obj.tags2?.length">
<text
v-for="(val, i) in obj.tags2"
:key="i"
class="text-#8B8B8B text-20rpx line-height-[1] px-5rpx b-0 b-solid b-#8B8B8B"
:class="i == obj.tags2?.length - 1 ? 'b-r-0' : 'b-r-2'"
>{{ val }}</text
>
<view v-if="obj.tags?.length">
<text v-for="(val, i) in obj.tags" :key="i"
class="text-#8B8B8B text-20rpx line-height-[1] px-5rpx b-0 b-solid b-#8B8B8B biaoqian"
:class="i == obj.tags?.length - 1 ? 'b-r-0' : 'b-r-2'">{{ val.text }}</text>
</view>
<view class="mt-20rpx w-full flex items-end">
<text class="text-18rpx text-#EC3D15">¥</text>
<text class="text-38rpx text-#EC3D15 mx-10rpx -mb-8rpx">{{
obj.price
}}</text>
<text class="text-18rpx text-#878787 line-through">{{
obj.original_price
}}</text>
<text class="text-22rpx text-#EC3D15">¥</text>
<text style="font-weight: 600;"
class="text-38rpx text-#EC3D15 mx-10rpx -mb-8rpx">{{obj.price }}</text>
<text class="text-18rpx text-#878787 line-through">
{{obj.original_price}}
</text>
<!-- <text class="text-18rpx text-#878787 ml-auto mr-55rpx"
>已售{{ obj.saleCount }}</text> -->
</view>
</view>
</view>
</view>
<view
@click="clickdb"
class="h-110rpx bg-#239EA3 text-#fff text-32rpx flex flex-justify-center flex-items-center absolute bottom-0 w-100%"
>
<view style="display: flex;width: 100%; justify-content: center;">
<view @click="clickdb"
class="start_button">
开始对比
</view>
</view>
</view>
</view>
</template>
<style scoped></style>
<style scoped>
.biaoqian {
color: #009da5;
margin: 10rpx 8rpx 10rpx 0rpx;
border: 1rpx solid #009da5;
border-radius: 6rpx;
}
.main_k {
background-color: #fff;
border-radius: 0rpx 0rpx 20rpx 20rpx;
padding: 20rpx 20rpx 20rpx 20rpx;
}
.taocan:not(:nth-last-child(2)) {
border-bottom: 1px solid #5eb7b8
}
.start_button{
background-color: #009da5;
color:#fff;
text-align: center;
width: 266rpx;
height: 54rpx;
line-height: 54rpx;
border-radius: 26rpx;
margin-top: 40rpx;
margin-bottom: 40rpx;
}
</style>
Loading…
Cancel
Save