@ -31,6 +31,7 @@
let personId = ref ( "" ) ; / / 患 者 i d
let groupId = ref ( "" ) ; / / 团 检 i d
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 团 检 自 选
@ -38,6 +39,9 @@
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" ) ;
@ -83,7 +87,13 @@
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 || "" ;
@ -125,16 +135,17 @@
getBuyInfo ( ) ; / / 获 取 购 买 信 息
} ;
const buy = ( ) => {
const buy = async ( step = 0 ) => {
if ( tabIndex. value == 0 ) {
if ( step == 1 ) {
if ( losePrice . value > 0 && groupId . value . length > 0 ) {
popupTip . value . open ( "center" ) ; / / 弹 剩 余 额 度 提 醒
return ;
}
GetReadmeDetails ( ) ;
await GetReadmeDetails ( ) ;
popupXuZhi . value . open ( ) ;
}
if ( tabIndex. value == 1 && buyText . value == "立即购买" ) {
if ( step == 2 ) {
$store . setBuyInfo ( {
combo _id : comboId . value ,
person _id : personId . value ,
@ -162,7 +173,6 @@
const getBuyInfo = async ( ) => {
/ / 获 取 购 买 信 息
console . log ( "看看有没有hospital" , $store . save _info ) ;
let obj = {
item _ids : selectIds . value ,
combo _id : comboId . value ,
@ -182,6 +192,7 @@
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 ) => {
@ -193,8 +204,12 @@
}
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 ) => {
@ -204,8 +219,10 @@
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 ( )
} ) ;
} ;
@ -275,55 +292,17 @@
< view :ref ="configRef" > < / view >
< / view >
< / view >
< view 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 class = "pt-35rpx rounded-15rpx px-10rpx bg-#fff pb-30rpx box-border b-0 b-t-1 b-solid b-#E1ECEE" >
< view class = "flex w-full" v-if ="status == 1" >
<!-- 1 个检套餐 显示套餐信息 -- >
< image v -if = " comboInfo.img " :src ="$image(comboInfo.img)" class = "w-190rpx h-190rpx mr-37rpx" mode = "widthFix" / >
< view class = "flex flex-col grow" >
< text > { { comboInfo . combo _name } } < / text >
< view class = "mt-13rpx mb-18rpx" >
< uni -tag v -for = " ( val , i ) in comboInfo.tags " :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 +
';'
" / >
< / view >
< view v-if ="comboInfo.tags2?.length" >
< text v -for = " ( val , i ) in comboInfo.tags2 " :key ="i"
class = "text-#8B8B8B text-20rpx line-height-[1] px-5rpx b-0 b-solid b-#8B8B8B"
: class = "i == comboInfo.tags2?.length - 1 ? 'b-r-0' : 'b-r-2'" > { { val } } < / 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" > { {
comboInfo . price
} } < / text >
< text class = "text-18rpx text-#878787 line-through" > { {
comboInfo . original _price
} } < / text >
< text class = "text-18rpx text-#878787 ml-auto mr-55rpx" > 已售 { { comboInfo . sale _count } } < / text >
< / view >
< / view >
< / view >
< view v-if ="status == 1" class="mt-25rpx pt-25rpx b-0 b-t-1 b-solid b-#E1ECEE bettween flex-col text-24rpx" >
<!-- 1 个检套餐显示 -- >
< view >
< text class = "text-#8B8B8B" > 适用人群 : < / text >
< text class = "text-#0E0E0E" > { { comboInfo . crowd _name } } < / text >
< / view >
< view >
< text class = "text-#8B8B8B" > 适用院区 : < / text >
< text class = "text-#0E0E0E" > { { comboInfo . hospital _name } } < / text >
< / view >
< / view >
< view v-if ="status != 1" class="px-15rpx pt-10rpx" >
< 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" / >
@ -355,169 +334,119 @@
< / view >
< / view >
< / view >
< view class = "pb- 30 0rpx">
< view class = "flex items-center justify-around px-30rpx m t-30rpx">
< text v -if = " status = = 1 | | status = = 3 " @ click = "tabIndex = 0" : class = "tabIndex == 0 ? 'active' : ''"
class = "text-30rpx text-#2E2E2E" > 套餐内容 < / text >
< text v -else @ click = "tabIndex = 0" : class = "tabIndex == 0 ? 'active' : ''"
class = "text-30rpx text-#2E2E2E" > 自选内容 < / text >
< text @click ="GetReadmeDetails" : class = "tabIndex == 1 ? 'active' : ''"
class = "text-30rpx text-#2E2E2E" > 体检须知 < / text >
< view class = "pb- 15 0rpx">
< view class = "flex items-center justify-around px-30rpx pl-150rpx p t-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 v-if ="tabIndex == 0" class="mt-2 0rpx bg-#fff py-40rpx px-14rpx box-border flex-col flex">
< view class = "mt--1 0rpx bg-#fff py-40rpx px-14rpx box-border flex-col flex">
<!-- 套餐内容 -- >
< view v-if ="co mboInfo?.items?.length " class="mb-20rpx">
< view v-if ="co ntentInfo.length>0 " class="mb-20rpx">
<!-- 套餐项目 -- >
< view class = "text-#2E2E2E text-30rpx center mb-20rpx" > 套餐项目 ( { { comboInfo ? . tags [ 0 ] ? . text } } ) < / view >
< view class = "flex h- 67rpx bg-#239ea3 text-#fff text-26rpx rounded-10rpx">
< view class = "min-w- 155rpx max-w-155rpx center b-0 b-r-4 b-solid b-#fff"> 检查项目 < / view >
< view class = "grow center" > 检查 指标意义 < / view >
< 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 co mboInfo?.items " :key ="index" >
< view v-for ="(val, index) in co ntentInfo " :key ="index" >
< view v-if ="val.keshi_name != '材料费'" >
< view class = "flex h-55rpx bg-#9f9f9f text-#fff text-24rpx rounded-10rpx mt-10rpx" >
< view class = "min-w-155rpx max-w-155rpx center b-0 b-r-4 b-solid b-#fff" > < / view >
< view class = "grow center" > { { val . keshi _name } } ( { { val . children . length } } ) < / view >
< 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 class = "flex bg-#efefef text-#000 text-24rpx rounded-10rpx mt-10rpx" v -for = " ( v , i ) in val.children "
: key = "i" >
< view
class = "min-w-155rpx break-all max-w-155rpx center b-0 b-r-4 b-solid b-#fff p-10rpx box-border text-center" >
{ { v . name } }
< 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 class = "grow center p-10rpx box-border" > { {
v . desc || "-"
} } < / view >
< / view >
< / view >
< / view >
< / view >
<!-- 团检内自带的项目 -- >
< view v-if ="groupInfo?.items?.length" class="mb-20rpx" >
<!-- 套餐 -- >
< view class = "text-#2E2E2E text-30rpx center mb-20rpx" > 套餐项目 ( { { groupInfo . itemscount } } 项 ) < / view >
< view class = "flex h-67rpx bg-#239ea3 text-#fff text-26rpx rounded-10rpx" >
< view class = "min-w-155rpx max-w-155rpx center b-0 b-r-4 b-solid b-#fff" > 检查项目 < / view >
< view class = "grow center" > 检查指标意义 < / view >
< / view >
< view v-for ="(val, index) in groupInfo?.items" :key ="index" >
< view v-if ="val.keshi_name != '材料费'" >
< view class = "flex h-55rpx bg-#9f9f9f text-#fff text-24rpx rounded-10rpx mt-10rpx" >
< view class = "min-w-155rpx max-w-155rpx center b-0 b-r-4 b-solid b-#fff" > < / view >
< view class = "grow center" > { { val . keshi _name } } ( { { val . children . length } } ) < / 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 = "flex bg-#efefef text-#000 text-24rpx rounded-10rpx mt-10rpx" v -for = " ( v , i ) in val.children "
: key = "i" >
< view
class = "min-w-155rpx break-all max-w-155rpx center b-0 b-r-4 b-solid b-#fff p-10rpx box-border text-center" >
{ { v . name } }
< / view >
< view class = "grow center p-10rpx box-border" > { {
v . desc || "-"
} } < / view >
< view class = "pt-25rpx" >
< image class = "w-30rpx h-30rpx" src = "@/static/assets/slices/lt.png" > < / image >
< / view >
< / view >
< / view >
< / view >
< view v-if ="itemsInfo.items?.length" >
<!-- 自选 -- >
< view class = "text-#2E2E2E text-30rpx center mb-20rpx" > 自选项目 ( { { itemsInfo . itemscount } } 项 ) < / view >
< view class = "flex h-67rpx bg-#239ea3 text-#fff text-26rpx rounded-10rpx" >
< view class = "min-w-155rpx max-w-155rpx center b-0 b-r-4 b-solid b-#fff" > 检查项目 < / view >
< view class = "grow center" > 检查指标意义 < / view >
< / view >
< view v-for ="(val, index) in itemsInfo.items" :key ="index" >
< view v-if ="val.keshi_name != '材料费'" >
< view class = "flex h-55rpx bg-#9f9f9f text-#fff text-24rpx rounded-10rpx mt-10rpx" >
< view class = "min-w-155rpx max-w-155rpx center b-0 b-r-4 b-solid b-#fff" > < / view >
< view class = "grow center" > { { val . keshi _name } } ( { { val . children . length } } ) < / 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 = "flex bg-#efefef text-#000 text-24rpx rounded-10rpx mt-10rpx" v -for = " ( v , i ) in val.children "
: key = "i" >
< view
class = "min-w-155rpx break-all max-w-155rpx center b-0 b-r-4 b-solid b-#fff p-10rpx box-border text-center" >
{ { v . name } }
< / view >
< view class = "grow center p-10rpx box-border" > { { v . desc || "-" } } < / 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 >
< / view >
< / view >
< view v-if ="tabIndex == 1" >
<!-- 体检须知 -- >
< view style = "box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04)"
class = "rounded-15rpx mt-20rpx bg-#fff py-40rpx px-30rpx box-border flex-col flex" >
< view class = "text-#2E2E2E text-30rpx font-500 text-center" >
体检须知
< / view >
< view class = "text-30rpx 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 class = "pb-20rpx text-28rpx text-#2E2E2E" >
< image class = "w-5rpx h-26rpx" src = "@/static/assets/slices/tjcol2x.png" > < / image >
体检注意事项
< / view >
< / view >
< view class = "pb-40rpx text-30rpx text-#2E2E2E" >
< image class = "w-5rpx h-26rpx" src = "@/static/assets/slices/tjcol2x.png" > < / image >
体检注意事项
< / view >
< view v-html ="notice.content" class="text-28rpx" style="line-height: 50rpx;" > < / view >
< view v-html ="notice.content" class="text-20rpx" style="line-height: 40rpx;" > < / view >
< view class = "tishi_button" @click ="buy(2)" > 我已知晓 < / view >
< / view >
< / view >
< / u n i - p o p u p >
< / view >
< view class = "fixed bottom-0 left-0 w-full bg-#fff p-30rpx box-border between">
< 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 = "text-18rpx text-#878787" > 套餐价格 < / text >
< text class = "text-21rpx text-#ED6907 mx-20rpx ml-56rpx" > ¥ { { comboInfo . price } } < / text >
< / view >
< view class = "flex items-end" >
< text class = "text-18rpx text-#878787" > 自选项目价格 < / text >
< text class = "text-21rpx text-#ED6907 mx-20rpx" > ¥ { { itemsInfo . price || 0 } } < / text >
< / view >
< view class = "flex items-end" >
< text class = "text-18rpx text-#ED6907" > 合计费用 < / text >
< text class = "text-24rpx text-#ED6907 ml-20rpx mr-5rpx" > ¥ < / text >
< text class = "text-36rpx text-#ED6907 mr-20rpx font-bold" > { {
< 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 = "b g-#ED6907 text-30rpx text-#fff rounded-l-full px-34rpx w-200rpx h-full ">
< button @click ="addCombo()" class = "button bgcolor_huang" >
增加项目
< / button >
< button @click ="buy( )" class = "bg-#239EA3 text-30rpx text-#fff rounded-r-full px-34rpx w-200rpx h-full ">
{ { buyText } }
< button @click ="buy(1)" class = "button" >
立即支付
< / button >
< / view >
< / view >
@ -527,17 +456,9 @@
. comboInfo {
position : relative ;
z - index : 1 ;
& : : after {
content : "" ;
width : 100 % ;
height : 50 rpx ;
background - color : # 239 ea3 ;
position : absolute ;
left : 0 ;
top : 0 ;
z - index : - 1 ;
}
background - color : # fff ;
min - height : calc ( 100 vh - 200 rpx ) ;
. active {
color : # 239 ea3 ;
@ -556,4 +477,91 @@
}
}
}
< / style >
< style scoped >
. combo _name _row {
text - align : center ;
background - color : # EEF7F7 ;
color : # 009 FA8 ;
font - size : 28 rpx ;
height : 80 rpx ;
line - height : 80 rpx ;
}
. keshi _name _k {
line - height : 58 rpx ;
padding - left : 30 rpx ;
}
. xian {
height : 6 rpx ;
border - radius : 6 rpx ;
background - color : # B0E0E2 ;
}
. combo _tag _wrapper {
padding - left : 13 rpx ;
padding - right : 13 rpx ;
height : 28 rpx ;
line - height : 28 rpx ;
border - radius : 5 rpx ;
font - weight : 900 ;
font - size : 18 rpx ;
color : # 47 abd8 ;
margin : 10 rpx 8 rpx 10 rpx 10 rpx ;
border : 3 rpx solid # 009 FA8 ;
}
. little _item _k {
border - bottom : 1 px solid # ccc ;
}
. wenhao {
height : 18 rpx ;
width : 18 rpx ;
background - color : # 009 FA8 ;
line - height : 18 rpx ;
border - radius : 18 rpx ;
color : # fff ;
text - align : center ;
font - size : 14 rpx ;
margin - left : 10 rpx ;
}
. xiangqingbutton {
color : # 009 FA8 ;
font - size : 17 rpx ;
}
. button {
color : # 00828 e ;
background - color : # fff ;
height : 58 rpx ;
line - height : 58 rpx ;
text - align : center ;
width : 174 rpx ;
border - radius : 58 rpx ;
margin - right : 20 rpx ;
font - size : 29 rpx ;
}
. bgcolor _huang {
background - color : # FF6D00 ;
color : # fff ;
}
. original _price _wrapper {
font - weight : bolder ;
font - size : 18 rpx ;
color : # 333 ;
line - height : 1 ;
text - decoration - line : line - through ;
}
. tishi _main {
background - color : # fff ;
padding : 40 rpx 50 rpx ;
width : 600 rpx ;
border - radius : 40 rpx ;
}
. tishi _button {
width : 365 rpx ;
background - color : # 009 da5 ;
color : # fff ;
text - align : center ;
padding - top : 10 rpx ;
padding - bottom : 10 rpx ;
border - radius : 40 rpx ;
margin : 20 rpx auto 10 rpx auto ;
}
< / style >