<template>
|
<view style="width: 100%;height:var(--window-bottom);">
|
<!-- 图片 -->
|
<div class="picture">
|
<img class="picture_img" src="../img/aaa.png" alt="">
|
</div>
|
|
<!-- 标题/价格 -->
|
<div class="caption">
|
<div class="price">
|
<div class="price_style">
|
<div class="price_txt1">￥{{pacById.price || ""}}</div>
|
<div class="price_txt2">起</div>
|
<div class="price_txt3">￥{{pacById.yuanjia}}</div>
|
</div>
|
<div>
|
<div class="price_txt4">共{{pacById.proNumber}}项检查项</div>
|
</div>
|
</div>
|
|
<div class="title">
|
<div>
|
<span class="title_txt">{{pacById.pacName}}</span>
|
</div>
|
<!-- <div class="title_style" @click="shareToggle">
|
<img class="title_img" src="https://ltpeis.xaltjdkj.cn:5502/static/fenxiang.png" alt="">
|
<span class="title_txt1">分享</span>
|
</div> -->
|
</div>
|
</div>
|
|
<div class="bj"></div>
|
|
<!-- 服务 -->
|
<!-- <div class="service">
|
<div>
|
<span class="service_txt1">服务</span>
|
</div>
|
<div class="service">
|
<img class="service_img" src="https://ltpeis.xaltjdkj.cn:5502/static/duigou.png" alt="">
|
<span class="service_txt1">一键改约</span>
|
</div>
|
<div class="service">
|
<img class="service_img" src="https://ltpeis.xaltjdkj.cn:5502/static/duigou.png" alt="">
|
<span class="service_txt1">未使用可退</span>
|
</div>
|
<div class="service">
|
<img class="service_img" src="https://ltpeis.xaltjdkj.cn:5502/static/duigou.png" alt="">
|
<span class="service_txt1">专业医护</span>
|
</div>
|
</div> -->
|
|
<!-- 使用人群 -->
|
<div class="use">
|
|
<div class="introduction_txt">套餐简介</div>
|
|
<div class="use_style1">
|
<span class="use_txt">使用人群</span>
|
</div>
|
<div class="use_cent">{{pacById.pacRemark}}</div>
|
<div class="use_style">
|
<div class="use_style2">
|
<img class="use_img" src="https://ltpeis.xaltjdkj.cn:5502/static/1.png" alt="">
|
<span class="use_text">中青年</span>
|
</div>
|
<div class="use_style2">
|
<img class="use_img" src="https://ltpeis.xaltjdkj.cn:5502/static/2.png" alt="">
|
<span class="use_text">中老年</span>
|
</div>
|
<div class="use_style2">
|
<img class="use_img" src="https://ltpeis.xaltjdkj.cn:5502/static/3.png" alt="">
|
<span class="use_text">防癌筛查</span>
|
</div>
|
</div>
|
</div>
|
|
<!--套餐项目 -->
|
|
<!-- <uni-section title="套餐项目" type="line">
|
<uni-list v-for="(item,index) in proList" :key="index">
|
<uni-list-item title="item.proName" />
|
<uni-list-item title="列表文字" rightText="右侧文字" />
|
<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
|
</uni-list>
|
</uni-section> -->
|
<!-- <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
|
<uni-tr>
|
<uni-th width="25" align="center">项目</uni-th>
|
<uni-th width="55" align="center">包含项目</uni-th>
|
<uni-th width="40" align="center">检查意义</uni-th>
|
</uni-tr>
|
<uni-tr v-for="(item,index) in proList" :key="index">
|
<uni-td>{{item.proName}}</uni-td>
|
<uni-td>
|
<view class="name">{{item.allSonProName}}</view>
|
</uni-td>
|
<uni-td align="center">{{item.proMeaning}}</uni-td>
|
</uni-tr>
|
</uni-table> -->
|
|
<view class="order-bottom">
|
<div class="characteristic">
|
<span class="characteristic_txt">套餐项目</span>
|
</div>
|
<view class="total">
|
<view class="status" v-for="(item, index) in pacById.tjProjectList" :key="index">
|
<view class="small">
|
|
</view>
|
<view class="name">
|
{{item.proName}}
|
</view>
|
<view class="price2">
|
￥{{item.proPrice}}
|
</view>
|
</view>
|
</view>
|
</view>
|
|
|
<!-- <view>
|
<uni-section title="购买使用流程" type="line" padding>
|
<uni-steps :options="list1" :active="active" />
|
</uni-section> -->
|
|
<!-- <button type="primary" size="mini" style="margin: 30px 10px; width: 100px;" @click="change">改变状态</button> -->
|
<!-- </view> -->
|
<view class="all">
|
<view class="zysx">
|
体检前注意事项
|
</view>
|
<view class="center">
|
1、如您有抽血项目,体检当天早晨请空腹到店,体检前一晚8点之后不可再进食(可少量饮水)。</br>
|
2、无性生活史的女性及孕妇请勿做妇科检查。</br>
|
3、备孕期女性或孕妇禁止做各类放射检查。</br>
|
4、以上为一般体检套餐的注意事项,如您的体检项目比较特殊,请提前咨询在线客服或拨打客服电话了解400-0000-000。
|
</view>
|
|
<div class="warm">
|
<div><text style="color: #A20048;">温馨提示：</text>该套餐内所含体检项目的具体预约和使用过程中如果有其他问题，请提前咨询门店，由此给您带来的不便敬请谅解</div>
|
</div>
|
</view>
|
<!-- 底部弹窗 -->
|
<view class="example-body box">
|
|
<uni-popup ref="popup" type="bottom" background-color="#fff" style="height: 200px;" class="popup">
|
<div >
|
<img class="text_img" src="../img/text.png" alt="">
|
</div>
|
<view class="box2">
|
<view class="box_name">{{pacById.pacName}}</view>
|
<view style="display: flex;align-items: flex-end;">
|
<div class="box_pic">￥{{pacById.price}}</div>
|
<div class="box_qi">起</div>
|
<!-- <div class="price_txt3">￥{{pacById.yuanjia}}</div> -->
|
</view>
|
<view style="display: flex;">
|
<view class="geren" @click="tiaozhuan(pacById.pacId)">
|
<view style="margin-top: 4px;margin-left: 4px;">个人预约</view>
|
</view>
|
<view class="tuandui" @click="timetiaozhuan">
|
<view style="margin-top: 4px;margin-left: 4px;">团队预约</view>
|
</view>
|
</view>
|
</view>
|
|
|
</uni-popup>
|
</view>
|
|
<!-- 购物车 -->
|
<uni-goods-nav class="shopping" :fill="true" :options="Options" :button-group="btnGroup" @click="onClick"
|
@buttonClick="buttonClick" />
|
<!-- 分享 -->
|
<!-- <uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
|
<uni-popup-share></uni-popup-share>
|
</uni-popup> -->
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
getprojectListByPacId
|
} from "@/api/system/package";
|
import {
|
addMyCart,
|
getIsPay
|
} from "@/api/system/cart";
|
export default {
|
data() {
|
return {
|
active: 0,
|
list1: [{
|
title: '选择套餐'
|
}, {
|
title: '预约时间'
|
}, {
|
title: '到店体检'
|
}, {
|
title: '查询报告'
|
}],
|
pacById: {},
|
proList: [],
|
Options: [{
|
icon: 'cart',
|
text: '购物车',
|
}, ],
|
btnGroup: [{
|
text: '加入购物车',
|
backgroundColor: '#FE368E',
|
color: '#fff'
|
},
|
{
|
text: '立即预约',
|
backgroundColor: '#E30165',
|
color: '#fff'
|
},
|
]
|
}
|
},
|
|
onLoad(option) {
|
this.getPacById(option.pacId);
|
},
|
methods: {
|
shareToggle() {
|
this.$refs.share.open()
|
},
|
getPacById(pacId) {
|
uni.showLoading({
|
title: '请稍等！'
|
})
|
getprojectListByPacId(pacId).then((response) => {
|
if (response.code == 200) {
|
uni.hideLoading()
|
this.pacById = response.data
|
if (this.pacById.pacRemark == null) {
|
this.pacById.pacRemark = "无"
|
}
|
this.proList = response.data.tjProjectList
|
this.proList.forEach(item => {
|
if (item.proMeaning == null) {
|
item.proMeaning = ""
|
}
|
})
|
}
|
|
});
|
},
|
|
buttonClick(e) {
|
getIsPay().then((res) => {
|
if (res) {
|
if (e.content.text == "加入购物车") {
|
let data = {
|
goodsId: this.pacById.pacId,
|
}
|
addMyCart(data).then(res => {
|
this.$modal.msgSuccess("添加成功")
|
})
|
|
} else if (e.content.text == "立即预约") {
|
// uni.navigateTo({
|
// url: `../physicalAppointment/physicalAppointment?pacId=${this.pacById.pacId}`
|
// })
|
this.toggle();
|
}
|
} else {
|
uni.navigateTo({
|
url: `/pages/login`
|
})
|
}
|
|
})
|
|
},
|
toggle(type) {
|
this.type = type
|
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
|
this.$refs.popup.open(type)
|
},
|
onClick() {
|
uni.navigateTo({
|
url: `../cart/cart`
|
})
|
},
|
tiaozhuan(pacId) {
|
uni.navigateTo({
|
url: `../physicalAppointment/physicalAppointment?pacId=${pacId}`
|
})
|
},
|
timetiaozhuan(pacId) {
|
let pac = {
|
pacId: this.pacById.pacId,
|
pacName: this.pacById.pacName
|
};
|
uni.navigateTo({
|
url: '../timeappointment/timeappointment?pac=' + encodeURIComponent(JSON.stringify(pac))
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.box2 {
|
height: 200px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
align-items: flex-start;
|
margin-left: 10px;
|
padding-top: 40px;
|
}
|
|
.geren {
|
width: 300rpx;
|
height: 96rpx;
|
background: #F4F5F8;
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
margin-left: 25rpx;
|
margin-right: 25rpx;
|
line-height: 86rpx;
|
text-align: center;
|
|
}
|
|
.tuandui {
|
width: 300rpx;
|
height: 96rpx;
|
background: #D8EDFF;
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
line-height: 86rpx;
|
text-align: center;
|
}
|
|
.small {
|
width: 6rpx;
|
height: 32rpx;
|
background: #FD6397;
|
border-radius: 0rpx 8rpx 8rpx 0rpx;
|
margin-top: 11rpx;
|
}
|
|
.warm {
|
width: 96%;
|
height: 120px;
|
color: LightSlateGray;
|
margin-left: 10px;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #65686A;
|
line-height: 44rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
margin-top: 10rpx;
|
}
|
|
.order-bottom {
|
margin-top: 10rpx;
|
padding: 0 31.25rpx;
|
height: auto;
|
overflow: hidden;
|
background: #fff;
|
}
|
|
.order-bottom .total {
|
/* height: 130rpx; */
|
padding-top: 20rpx;
|
border-bottom: 1px solid #f4f4f4;
|
}
|
|
.order-bottom .total .status {
|
display: flex;
|
width: 642rpx;
|
height: 80rpx;
|
font-size: 30rpx;
|
// color: #b4282d;
|
padding: 15rpx 0rpx;
|
border: 2rpx solid #f4f4f4;
|
background-color: #f4f4f4;
|
margin-top: 15rpx;
|
}
|
|
.order-bottom .total .status .name {
|
width: 501rpx;
|
height: 100rpx;
|
margin: 5rpx 0rpx;
|
margin-left: 20rpx;
|
line-height: 50rpx;
|
}
|
|
.order-bottom .total .status .price2 {
|
width: 102rpx;
|
height: 43rpx;
|
font-family: D-DIN-PRO, D-DIN-PRO;
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #9496A2;
|
line-height: 42rpx;
|
text-align: right;
|
font-style: normal;
|
text-transform: none;
|
margin-right: 39rpx;
|
}
|
|
.caption {
|
margin-top: 46rpx;
|
}
|
|
/* 弹框容器 */
|
.popup {
|
position: relative; /* 父级需设为相对定位 */
|
width: 80%;
|
margin: 100px auto; /* 弹框居中 */
|
background: #fff;
|
padding: 20px;
|
}
|
|
.text_img{
|
width: 262rpx;
|
height: 197rpx;
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
position: absolute;
|
top: -50px; /* 图片高度的一半（假设图片高度100px） */
|
left: 50%; /* 水平居中起点 */
|
transform: translateX(-50%); /* 向左偏移50%宽度 */
|
|
z-index: 999; /* 确保图片在弹框上方 */
|
}
|
|
.bottom-list .t-b-1 {
|
border: 1px solid #f0f0f0;
|
width: 100%;
|
height: auto;
|
font-size: 14px;
|
text-align: center;
|
}
|
|
.bottom-list .t-b-2 {
|
border: 1px solid #f0f0f0;
|
width: 100%;
|
height: auto;
|
text-align: center;
|
}
|
|
.protext {
|
size: 10px;
|
}
|
|
.Package_txt {
|
font-size: 16px;
|
margin-bottom: 10px;
|
}
|
|
|
.picture {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.picture_img {
|
width: 750rpx;
|
height: 750rpx;
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
}
|
|
.price {
|
display: flex;
|
align-items: flex-end;
|
justify-content: space-between;
|
}
|
|
.price_style {
|
display: flex;
|
align-items: flex-end;
|
}
|
|
.price_txt1 {
|
// width: 186rpx;
|
height: 70rpx;
|
font-family: D-DIN-PRO, D-DIN-PRO;
|
font-weight: 500;
|
font-size: 64rpx;
|
color: #E30165;
|
line-height: 42rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
padding-left: 24rpx;
|
}
|
|
.price_txt2 {
|
width: 30rpx;
|
height: 60rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #E30165;
|
line-height: 42rpx;
|
text-align: right;
|
font-style: normal;
|
text-transform: none;
|
margin-left: 10rpx;
|
}
|
|
.price_txt3 {
|
width: 109rpx;
|
height: 60rpx;
|
font-family: D-DIN-PRO, D-DIN-PRO;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #C3C3C4;
|
line-height: 42rpx;
|
text-align: left;
|
font-style: normal;
|
text-decoration-line: line-through;
|
text-transform: none;
|
margin-left: 10rpx;
|
}
|
|
.price_txt4 {
|
width: 173rpx;
|
height: 60rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #65686A;
|
line-height: 42rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
|
}
|
|
.title {
|
margin-top: 6px;
|
margin-bottom: 20px;
|
margin-left: 15px;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.title_txt {
|
width: 215rpx;
|
height: 34rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #373E58;
|
line-height: 42rpx;
|
text-align: right;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
.bj {
|
width: 750rpx;
|
height: 16rpx;
|
background: #F4F5F8;
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
}
|
|
.title_style {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.title_img {
|
width: 20px;
|
height: 20px;
|
}
|
|
.title_txt1 {
|
font-size: 12px;
|
color: #838383;
|
font-weight: 400;
|
}
|
|
.service {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
}
|
|
.service_txt1 {
|
font-size: 14px;
|
font-weight: 600;
|
}
|
|
.service_img {
|
width: 15px;
|
height: 15px;
|
margin-right: 2px;
|
}
|
|
|
.introduction_txt {
|
width: 168rpx;
|
height: 32rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: bold;
|
font-size: 32rpx;
|
color: #373E58;
|
line-height: 45rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
margin: 50rpx 25rpx;
|
}
|
|
.use {
|
margin-left: 24rpx;
|
// height: 200px;
|
// border-bottom: 2px solid #f0f0f0;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
// flex-direction: column;
|
// margin-top: 20px;
|
}
|
|
.use_style1 {
|
width: 702rpx;
|
height: 66rpx;
|
background: linear-gradient(90deg, #FFF5F5 0%, #FFE4F1 100%);
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
}
|
|
.use_txt {
|
width: 120rpx;
|
height: 66rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #A20048;
|
line-height: 66rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
padding-left: 30rpx;
|
}
|
|
.use_text {
|
width: 104rpx;
|
height: 26rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #373E58;
|
line-height: 42rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
.use_cent {
|
margin-top: 25rpx;
|
;
|
padding-top: 25rpx;
|
padding-left: 30rpx;
|
width: 702rpx;
|
height: 122rpx;
|
background: #F4F5F8;
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #464F72;
|
line-height: 40rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
.use_style {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
flex-wrap: nowrap;
|
}
|
|
.use_style2 {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
margin: 0 8px;
|
}
|
|
.use_img {
|
width: 90px;
|
height: 90px;
|
}
|
|
.characteristic {
|
width: 702rpx;
|
height: 66rpx;
|
background: linear-gradient(90deg, #FFF5F5 0%, #FFE4F1 100%);
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
margin-top: 26rpx;
|
}
|
|
.characteristic_txt {
|
width: 120rpx;
|
height: 66rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #A20048 !important;
|
line-height: 66rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
padding-left: 30rpx;
|
}
|
|
.all {
|
margin-left: 24rpx;
|
}
|
|
.zysx {
|
width: 702rpx;
|
height: 66rpx;
|
background: linear-gradient(90deg, #FFF5F5 0%, #FFE4F1 100%);
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #A20048;
|
line-height: 66rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
padding-left: 30rpx;
|
margin-top: 40rpx;
|
}
|
|
.center {
|
width: 652rpx;
|
height: 338rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #65686A;
|
line-height: 48rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
margin-left: 20rpx;
|
margin-top: 40rpx;
|
}
|
|
.characteristic_txt {
|
font-size: 16px;
|
color: #838383;
|
}
|
|
.shopping {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: var(--window-bottom);
|
}
|
|
.box_name{
|
width: 100%;
|
height: 34rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #373E58;
|
line-height: 42rpx;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
// margin-left: 260rpx;
|
}
|
|
.box_pic{
|
margin-left: 230rpx;
|
// width: 161rpx;
|
height: 59rpx;
|
font-family: D-DIN-PRO, D-DIN-PRO;
|
font-weight: 500;
|
font-size: 54rpx;
|
color: #F5981F;
|
line-height: 42rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
}
|
.box_qi{
|
width: 30rpx;
|
height: 50rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #F5981F;
|
line-height: 42rpx;
|
text-align: right;
|
font-style: normal;
|
text-transform: none;
|
}
|
</style>
|
