zhangyan
/
hainan_2024
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

套餐详情页

Browse Source
main
yanzai 11 months ago
parent 151797cc82
commit 005d4bdc62
3 changed files with 577 additions and 2 deletions
Show Stats Download Patch File Download Diff File

7
h5/pages.json
Unescape Escape View File

@ -104,6 +104,13 @@
"navigationBarBackgroundColor": "#239EA3", "navigationBarBackgroundColor": "#239EA3",
"navigationBarTextStyle": "white" "navigationBarTextStyle": "white"
} }
},{
"path": "pages/main/tj/tjxq_new",
"style": {
"navigationBarTitleText": "套餐详情",
"navigationBarBackgroundColor": "#239EA3",
"navigationBarTextStyle": "white"
}
}, },
{ {
"path": "pages/main/questionnaire/index", "path": "pages/main/questionnaire/index",

567
h5/pages/main/tj/tjxq_new.vue
Unescape Escape View File

@ -0,0 +1,567 @@
<script setup>
import DraggableButton from "@/pages/components/goHome.vue";
/**
* name：
* user：sa0ChunLuyu
* date：2024年9月11日 19:24:50
*/
import {
ref
} from "vue";
import {
$api,
$response,
$image
} from "@/api";
import {
onShow
} from "@dcloudio/uni-app";
import {
useStore
} from "@/store";
const $store = useStore();
// groupId
let comboInfo = ref({}); // 套餐详情
let selectIds = ref([]); // 选中自选ID
let wj = ref(""); //
let itemsInfo = ref({}); // 自选项目详情
let comboId = ref(""); // 套餐id
let personId = ref(""); // 患者id
let groupId = ref(""); // 团检id
let tabIndex = ref(-1); // 标签索引
let total_original_price=ref(0);
let totalPrice = ref(0); // 总折扣价格
let groupInfo = ref({}); // 团检信息
let status = ref(0); // 1个检套餐 2个检自选 3团检套餐 4团检自选
let buyText = ref("立即购买"); // 购买按钮文字
let notice = ref({}); // 体检须知
let losePrice = ref(0); // 剩余金额
let popupTip = ref(null); // 剩余额度提示弹窗
let contentInfo=ref([])//详情信息
let active_keshi=ref([]);
let popupXuZhi=ref(null);
const GetReadmeDetails = async () => {
const response = await $api("GetReadme");
$response(response, () => {
notice.value = response.data || false;
if (tabIndex.value == 0) {
let num = 5;
buyText.value = "0" + num;
tabIndex.value = 1;
let timer = setInterval(() => {
num--;
buyText.value = "0" + num;
if (num == 0) {
buyText.value = "立即购买";
clearInterval(timer);
}
}, 1000);
return;
}
uni.hideLoading();
});
};
const $props = defineProps({
comboId: {
type: String,
default: "",
},
personId: {
type: String,
default: "",
},
groupId: {
type: String,
default: "",
},
itemIds: {
type: String,
default: "",
},
wj: {
type: String,
default: "",
},
});
const opendDetail=(index)=>{
if(active_keshi.value.indexOf(index)!== -1){
active_keshi.value.splice(active_keshi.value.indexOf(index), 1);
}else{
active_keshi.value.push(index)
}
}
const mountedAction = async () => {
selectIds.value = $props.itemIds ? $props.itemIds.split(",") : [];
wj.value = $props.wj || "";
comboId.value = $props.comboId || "";
personId.value = $store.getUser().person_id || "";
groupId.value = $props.groupId || "";
// 团检空项目 - 套餐列表 - 套餐详情 - 自选 - 弹剩余额度提醒 - 团检详情
// ｜
// 自选 - 弹推荐套餐/剩余额度提醒 - 团检详情
// 团检有项目 - 团检详情 - 自选 - 团检详情
// comboId && person_id
// 个检 - 套餐列表 - 套餐详情 - 自选 - 个检详情
// ｜
// 自选 - 弹推荐套餐 - 个检详情
if (groupId.value) {
if (comboId.value) {
// 团检套餐
status.value = 3;
} else {
// 团检自选
status.value = 4;
}
} else {
if (comboId.value) {
// 个检套餐
status.value = 1;
} else {
// 个检自选
status.value = 2;
}
}
console.log(status.value, "1个检套餐 2个检自选 3团检套餐 4团检自选");
uni.showLoading({
title: "加载中",
});
getBuyInfo(); // 获取购买信息
};
const buy = async (step=0) => {
if (step == 1) {
if (losePrice.value > 0 && groupId.value.length>0) {
popupTip.value.open("center"); // 弹剩余额度提醒
return;
}
await GetReadmeDetails();
popupXuZhi.value.open();
}
if (step == 2) {
$store.setBuyInfo({
combo_id: comboId.value,
person_id: personId.value,
group_id: groupId.value,
item_ids: selectIds.value,
hospital: $store.save_info.hospital,
duo_xuan_yi: $store.getDuoXuanYi(),
wj: wj.value,
});
if (!!$store.yytjInfo.doctor_name) {
$store.setYytjInfo({
doctor_name: $store.yytjInfo.doctor_name,
doctor_date: $store.yytjInfo.doctor_date,
doctor_id:$store.yytjInfo.doctor_id
});
} else {
$store.setYytjInfo({});
}
uni.setStorageSync("yytjInfoS", {});
uni.navigateTo({
url: "/pages/main/tjyy/tjyy",
});
}
};
const getBuyInfo = async () => {
// 获取购买信息
let obj = {
item_ids: selectIds.value,
combo_id: comboId.value,
hospital: $store.save_info.hospital,
person_id: personId.value,
group_id: groupId.value,
duo_xuan_yi: $store.getDuoXuanYi(),
wj: wj.value,
};
const response = await $api("BuyInfo", obj);
$response(response, () => {
uni.hideLoading();
if (groupId.value && response.data.group_info.length) {
// 团检
groupInfo.value = response.data.group_info[0];
if (response.data.group_info[0].items?.length) {
status.value = 3;
}
if(groupInfo.value.items?.length){
contentInfo.value.push(groupInfo.value.items)
groupInfo.value.itemscount=0;
let itemscount=0
groupInfo.value.items.forEach((v,i)=>{
if(v.keshi_name!="材料费")
itemscount=itemscount+v.children.length
})
groupInfo.value.itemscount=itemscount
}
}
losePrice.value = response.data.lose_price;
comboInfo.value = response.data.combo_info;
if(comboInfo.value.items?.length){
contentInfo.value.push(comboInfo.value.items)
}
itemsInfo.value = response.data.items_info;
if(itemsInfo.value.items?.length){
contentInfo.value.push(itemsInfo.value.items)
itemsInfo.value.itemscount=0;
let itemscount=0
itemsInfo.value.items.forEach((v,i)=>{
if(v.keshi_name!="材料费")
itemscount=itemscount+v.children.length
})
itemsInfo.value.itemscount=itemscount
}
totalPrice.value = response.data.true_price;
total_original_price.value=response.data.original_price
tabIndex.value = 0;
contentInfo.value=contentInfo.value.flat()
});
};
const addCombo = () => {
// 增加项目
let itemIds = $props.itemIds ? $props.itemIds : "";
let query = "?comboId=" + comboId.value + "&itemIds=" + itemIds;
if (groupId.value) {
query += "&groupId=" + groupId.value;
}
if($props.wj){
query +="&wj="+$props.wj
}
uni.navigateTo({
url: "/pages/main/tj/tjzx_new?" + query,
});
};
const config_ref = ref(null);
const configRef = (e) => {
if (!config_ref.value) {
config_ref.value = e;
mountedAction();
}
};
const toreadme=()=>{
GetReadmeDetails();
popupTip.value.close()
}
onShow(() => {
if (!!config_ref.value) {
mountedAction();
}
});
</script>
<template>
<uni-popup ref="popupTip">
<view
class="mb-70rpx bg-#fff text-center box-border pt-80rpx pb-50rpx px-65rpx w-90vw rounded-15rpx"
>
<view
class="w-full text-center text-##090909 text-26rpx line-height-[50rpx]"
>您还剩余
{{ losePrice }}
元体检额度尚未使用，确认提交后剩余体检额度将无法使用!</view
>
<view class="mt-50rpx between">
<button
type="primary"
@click="toreadme()"
class="w-196rpx h-68rpx center text-#fff text-24rpx !bg-#239EA3 rounded-8rpx"
>
我想好了
</button>
<button
@click="popupTip.close()"
class="w-196rpx h-68rpx center text-#239EA3 text-24rpx !bg-#D9F3F2 rounded-8rpx"
>
我再想想
</button>
</view>
</view>
</uni-popup>
<DraggableButton />
<view>
<view v-if="!!$store.config">
<view :ref="configRef"></view>
</view>
</view>
<view class=" " v-if="[1,2].indexOf(status) !== -1">
<!-- 1个检套餐 显示套餐信息 -->
<view class="combo_name_row" >
<text v-if="status==2"> 项目自选 </text>
<text v-if="status==1">{{ comboInfo.combo_name }}</text>
</view>
</view>
<view class="px-30rpx box-border comboInfo">
<view v-if="status != 1 && status!=2" class="pt-35rpx rounded-15rpx px-10rpx bg-#fff pb-30rpx box-border b-0 b-t-1 b-solid b-#E1ECEE">
<view class="px-15rpx pt-10rpx">
<!-- 2个检自选 和 3团检套餐 4团检自选 都要显示头像和名字 -->
<view class="flex items-center">
<image src="@/static/assets/userm.png" class="w-70rpx h-70rpx mr-35rpx" />
<view class="flex items-center grow">
<text class="text-#707070 text-24rpx">您好，</text>
<text class="text-#0E0E0E text-32rpx">{{
groupId ? groupInfo.name : $store.getUser().name
}}</text>
</view>
</view>
<view v-if="status != 2" class="text-24rpx mt-40rpx">
<!-- 3团检套餐 4团检自选 都要显示单位部门等信息 -->
<view class="pb-30rpx">
<text class="text-#8B8B8B">单位名称：</text>
<text>{{ groupInfo.group_name }}</text>
</view>
<view class="pb-30rpx">
<text class="text-#8B8B8B">部门名称：</text>
<text>{{ groupInfo.bumen_name }}</text>
</view>
<view class="pb-30rpx" v-if="groupInfo.combo_name || comboInfo?.combo_name">
<text class="text-#8B8B8B">套餐名称：</text>
<text>{{ groupInfo.combo_name || comboInfo?.combo_name }}</text>
</view>
<view>
<text class="text-#8B8B8B">体检额度：</text>
<text>{{ groupInfo.tongshou_xiane }}</text>
</view>
</view>
</view>
</view>
<view class="pb-150rpx">
<view class="flex items-center justify-around px-30rpx pl-150rpx pt-30rpx">
<view>
<text class="text-30rpx text-#2E2E2E">套餐项目</text>
<span v-if="status==1 && JSON.stringify(comboInfo) !== '{}'" class="combo_tag_wrapper" >{{ comboInfo?.tags[0]?.text }}</span>
<span v-if="status==2" class="combo_tag_wrapper">{{ itemsInfo?.itemscount }}</span>
</view>
</view>
<view class="mt--10rpx bg-#fff py-40rpx px-14rpx box-border flex-col flex">
<!-- 套餐内容 -->
<view v-if="contentInfo.length>0" class="mb-20rpx">
<!-- 套餐项目 -->
<view class="flex h-58rpx bg-#239ea3 mb-26rpx text-#fff text-26rpx rounded-10rpx">
<view class="min-w-220rpx max-w-220rpx keshi_name_k">体检流程</view>
<view class="grow center">检查项目</view>
</view>
<view v-for="(val, index) in contentInfo" :key="index">
<view v-if="val.keshi_name != '材料费'">
<view class="flex h-58rpx bg-#E6F5F6 text-#333 text-27rpx rounded-10rpx mt-10rpx">
<view class="min-w-250rpx max-w-250rpx keshi_name_k ">{{index+1}}.{{ val.keshi_name }}</view>
<view class="grow center">{{ val.children.length }}个项目</view>
<view class="grow center xiangqingbutton" @click="opendDetail(index)">查看详情<span style="font-size: 12rpx;">>></span></view>
</view>
<view v-if="active_keshi.indexOf(index)!== -1">
<view class="xian mt-10rpx "></view>
<view class=" bg-#FBFBFB text-#000 text-24rpx rounded-10rpx p-20rpx little_item_k " v-for="(v, i) in val.children"
:key="i">
<view style="display: flex; align-items: center;">
<view class="break-all box-border ">
{{ v.name }}
</view>
<view class="wenhao">?</view>
</view>
<view class="grow text-20rpx text-#E95513 mt-10rpx box-border">{{ v.desc || "-" }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<uni-popup ref="popupXuZhi">
<view class="tishi_main">
<!-- 体检须知 -->
<view class="text-#2E2E2E text-30rpx font-900 text-center">
体检须知
</view>
<view class="text-28rpx text-#2E2E2E">
<image class="w-5rpx h-26rpx" src="@/static/assets/slices/tjcol2x.png"></image>
体检须知
</view>
<view class="flex flex-justify-around text-#111111 text-28rpx pt-24rpx pb-50rpx">
<view class="flex flex-col flex-items-center">
<image class="w-80rpx h-80rpx" src="@/static/assets/slices/xgtc.png"></image>
选购套餐
</view>
<view class="pt-25rpx">
<image class="w-30rpx h-30rpx" src="@/static/assets/slices/lt.png"></image>
</view>
<view class="flex flex-col flex-items-center">
<image class="w-80rpx h-80rpx" src="@/static/assets/slices/yytj.png"></image>
预约体检
</view>
<view class="pt-25rpx">
<image class="w-30rpx h-30rpx" src="@/static/assets/slices/lt.png"></image>
</view>
<view class="flex flex-col flex-items-center">
<image class="w-80rpx h-80rpx" src="@/static/assets/slices/qwty.png"></image>
前往体检
</view>
<view class="pt-25rpx">
<image class="w-30rpx h-30rpx" src="@/static/assets/slices/lt.png"></image>
</view>
<view class="flex flex-col flex-items-center">
<image class="w-80rpx h-80rpx" src="@/static/assets/slices/lqbg.png"></image>
领取报告
</view>
</view>
<view class="pb-20rpx text-28rpx text-#2E2E2E">
<image class="w-5rpx h-26rpx" src="@/static/assets/slices/tjcol2x.png"></image>
体检注意事项
</view>
<view v-html="notice.content" class="text-20rpx" style="line-height: 40rpx;"></view>
<view class="tishi_button" @click="buy(2)" >我已知晓</view>
</view>
</uni-popup>
</view>
<view class="fixed bottom-0 h-150rpx left-0 w-full bg-gradient-to-r from-#02b4bd to-#ABD7D7 p-30rpx box-border between">
<view class="grow">
<view class="flex items-end" v-if="comboId != 0">
<text class="original_price_wrapper">¥ {{ total_original_price }}</text>
</view>
<view class="flex items-end">
<text class="text-42rpx text-#ED6907 mr-20rpx font-bold">¥{{
totalPrice
}}</text>
</view>
</view>
<view class="flex">
<button @click="addCombo()" class="button bgcolor_huang">
增加项目
</button>
<button @click="buy(1)" class="button">
立即支付
</button>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.comboInfo {
position: relative;
z-index: 1;
background-color: #fff;
min-height: calc(100vh - 200rpx);
.active {
color: #239ea3;
font-weight: bold;
position: relative;
&::after {
content: "";
width: 26rpx;
height: 3rpx;
background-color: #239ea3;
position: absolute;
left: 50%;
bottom: -10rpx;
transform: translateX(-50%);
}
}
}
</style>
<style scoped>
.combo_name_row{
text-align: center;
background-color: #EEF7F7;
color: #009FA8;
font-size: 28rpx;
height: 80rpx;
line-height: 80rpx;
}
.keshi_name_k{
line-height: 58rpx;
padding-left: 30rpx;
}
.xian{
height: 6rpx;
border-radius: 6rpx;
background-color: #B0E0E2;
}
.combo_tag_wrapper {
padding-left: 13rpx;
padding-right: 13rpx;
height: 28rpx;
line-height: 28rpx;
border-radius: 5rpx;
font-weight: 900;
font-size: 18rpx;
color: #47abd8;
margin: 10rpx 8rpx 10rpx 10rpx;
border: 3rpx solid #009FA8;
}
.little_item_k{
border-bottom: 1px solid #ccc;
}
.wenhao{
height: 18rpx;
width: 18rpx;
background-color: #009FA8;
line-height: 18rpx;
border-radius: 18rpx;
color: #fff;
text-align: center;
font-size: 14rpx;
margin-left: 10rpx;
}
.xiangqingbutton{
color:#009FA8;
font-size: 17rpx;
}
.button {
color: #00828e;
background-color: #fff;
height: 58rpx;
line-height: 58rpx;
text-align: center;
width: 174rpx;
border-radius: 58rpx;
margin-right: 20rpx;
font-size: 29rpx;
}
.bgcolor_huang{
background-color: #FF6D00;
color: #fff;
}
.original_price_wrapper {
font-weight: bolder;
font-size: 18rpx;
color: #333;
line-height: 1;
text-decoration-line: line-through;
}
.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: 20rpx auto 10rpx auto;
}
</style>

5
h5/pages/main/tj/tjzx_new.vue
Unescape Escape View File

@ -523,7 +523,7 @@
</view> </view>
<view style="z-index: 999;" <view style="z-index: 999;"
class="fixed bottom-0 left-0 w-100% h-150rpx bg-gradient-to-r from-#7fcfd3 to-#aad7d7 px-20rpx py-30rpx box-border items-center flex justify-between"> class="fixed bottom-0 left-0 w-100% h-150rpx bg-gradient-to-r from-#02b4bd to-#ABD7D7 px-20rpx py-30rpx box-border items-center flex justify-between">
<view style="position: relative;" class="w-110rpx h-129rpx ml-60rpx mt-5rpx" @click="openPopupItemList()"> <view style="position: relative;" class="w-110rpx h-129rpx ml-60rpx mt-5rpx" @click="openPopupItemList()">
<image class="w-110rpx h-129rpx" src="@/static/assets/buy/xiong.png" mode="widthFix" /> <image class="w-110rpx h-129rpx" src="@/static/assets/buy/xiong.png" mode="widthFix" />
<view class="yuandian"> <view class="yuandian">
@ -558,8 +558,9 @@
line-height: 58rpx; line-height: 58rpx;
text-align: center; text-align: center;
width: 174rpx; width: 174rpx;
border-radius: 24rpx; border-radius: 58rpx;
margin-right: 20rpx; margin-right: 20rpx;
font-size: 29rpx;
} }
.popupItemList-content { .popupItemList-content {

Write Preview
Loading…
Cancel
Save