<template>
|
<view>
|
|
<view class="box">
|
<view class="name">{{pacById.pacName || ""}}</view>
|
<view class="miaoshu">套餐描述：{{pacById.pacRemark || ""}}</view>
|
<view class="feiyong">
|
<div class="xian">
|
<span class="currency">￥</span>{{pacById.price || ""}}<span class="qi">起</span>
|
</div>
|
<div class="yuan">￥{{pacById.price || ""}}</div>
|
</view>
|
</view>
|
<view class="cen">
|
|
</view>
|
<!-- 列表 -->
|
<!-- <uni-list>
|
<uni-list-item title="体检人员" link to="/pagesA/Examiner/Examiner"></uni-list-item>
|
<text style="margin-left: 20px;">{{dataList.cusName}}</text>
|
<uni-list-item title="体检日期" link="navigateTo"
|
:to="`/pagesA/date/date?pacId=`+pacById.pacId"></uni-list-item>
|
<text style="margin-left: 20px;">{{data1List}}</text>
|
<uni-list-item title="增加体检项目" link to="/pages/vue/index/index" @click="onClick($event,1)"></uni-list-item>
|
</uni-list> -->
|
<view class="form">
|
<view class="form-item" @click="perop()">
|
<text class="label">体检人员</text>
|
<input class="input" placeholder="请输入体检人员" v-model="dataList.cusName" />
|
<uni-icons type="right" size="15" style="margin-top: 8rpx;margin-left: 260rpx;"></uni-icons>
|
|
</view>
|
<view class="form-item" @click="history(pacById.pacId)">
|
<text class="label">体检日期</text>
|
<input class="input" placeholder="请输入体检日期" v-model="data1List" />
|
<uni-icons type="right" size="15" style="margin-top: 8rpx;margin-left: 260rpx;"></uni-icons>
|
|
</view>
|
<view class="form-item" @click="onClick($event,1)">
|
<text class="label">增加项目</text>
|
<uni-icons type="plus" size="20" color="#E30165"
|
style="margin-top: 4rpx;margin-left: 26rpx;"></uni-icons>
|
</view>
|
|
</view>
|
|
<scroll-view class="content" scroll-y>
|
<!-- 套餐项目 -->
|
<view class="card1">
|
<view class="card1_header">套餐内项目</view>
|
|
<view class="Package" :is-shadow="false" v-for="(item,index) in proList" :key="index">
|
<view class="Package1">
|
<view class="small">
|
|
</view>
|
<view class="card1_Package">
|
{{item.proName}}
|
</view>
|
</view>
|
|
<view class="card1_char">
|
{{item.allSonProName}}
|
</view>
|
</view>
|
<!-- <uni-card :is-shadow="false" v-for="(item,index) in proList" :key="index">
|
<view class="card-item">
|
<text>{{index+1}}、{{item.proName}}</text>
|
<text>{{item.allSonProName}}</text>
|
</view>
|
</uni-card> -->
|
</view>
|
|
<!-- 底部 -->
|
<view class="bottom-section">
|
<view class="price-section">
|
<image class="card-img" src="../img/aaa.png" mode="aspectFill"></image>
|
|
<div class="bottom_txt_sty">
|
<view class="bottom_txt1">路泰体检中心西安曲江分院</view>
|
<div class="txt_sty">
|
<text class="sty_txt1">营业中</text>
|
<div class="sty_txt2">周一至周日00:00-23:59</div>
|
</div>
|
</div>
|
</view>
|
|
<view class="bottom_txt2">
|
<view class="bottom_txt3">详细地址：西安市雁塔区陕商投资大厦</view>
|
<view class="bottom_txt3">联系电话：18629386153</view>
|
</view>
|
|
|
<!-- <uni-card :is-shadow="false"> -->
|
<!-- <div class="bottom_style">
|
<div class="bottom_txt_sty">
|
<text class="bottom_txt1">路泰体检中心西安曲江分院</text>
|
<div class="bottom_txt4">路泰</div>
|
</div>
|
<text class="bottom_txt2">详细地址：西安市雁塔区陕商投资大厦</text>
|
<view class="price-section">
|
<text>合计：</text>
|
<span class="bottom_txt5">￥{{pacById.price || ""}}</span>
|
</view>
|
</div> -->
|
<!-- </uni-card> -->
|
</view>
|
|
<!-- 按钮 -->
|
|
</scroll-view>
|
<view class="button-section" v-if="disapley==true">
|
<button class="btn" type="primary" @click="payment">立即支付</button>
|
</view>
|
<view class="button-section" v-else>
|
<button class="btn" type="primary" @click="payment2">立即预约</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getprojectListByPacId
|
} from "@/api/system/package";
|
import {
|
prepay,
|
reservation,
|
submit,
|
getIsPay
|
} from "@/api/system/cart";
|
import {
|
CLIENT_RENEG_LIMIT
|
} from "tls";
|
export default {
|
data() {
|
return {
|
orderId: 0,
|
data1List: "",
|
dataList: {
|
cusName: "",
|
},
|
pacId: "",
|
pacId: {
|
pacId: "",
|
},
|
disapley: false,
|
pacById: {},
|
proList: [],
|
showRight: false,
|
showLeft: false,
|
active: 1,
|
list: [{
|
title: '选择套餐'
|
}, {
|
title: '预约时间'
|
}, {
|
title: '选择加项'
|
}, {
|
title: '确认信息'
|
}],
|
single: '',
|
datetimesingle: '',
|
range: ['2023-01-30', '2023-01-30'],
|
datetimerange: [],
|
start: Date.now() - 1000000000,
|
end: Date.now() + 1000000000
|
}
|
},
|
onLoad(option) {
|
this.getPacById(option.pacId);
|
this.pacId = option.pacId
|
},
|
onShow() {
|
let _this = this;
|
uni.$on('updateNote', function(data) {
|
_this.dataList = data;
|
})
|
uni.$on('time', function(data1) {
|
_this.data1List = data1
|
})
|
},
|
watch: {
|
datetimesingle(newval) {},
|
range(newval) {},
|
datetimerange(newval) {}
|
},
|
mounted() {
|
setTimeout(() => {
|
this.datetimesingle = Date.now() - 2 * 24 * 3600 * 1000
|
this.single = '2023-1-30'
|
this.datetimerange = ["2023-01-30 0:01:10", "2023-01-30 23:59:59"]
|
}, 3000)
|
},
|
methods: {
|
history(pacId) {
|
uni.navigateTo({
|
url: `/pagesA/date/date?pacId=${pacId}`
|
})
|
},
|
perop() {
|
uni.navigateTo({
|
url: `/pagesA/Examiner/Examiner`
|
})
|
},
|
tiaozhuan(pacId) {
|
uni.navigateTo({
|
url: `../date/date?pacId=${pacId}`
|
})
|
},
|
toggle(type) {
|
this.type = type
|
this.$refs.popup.open(type)
|
},
|
getPacById(pacId) {
|
getIsPay().then((res) => {
|
this.disapley = res.msg
|
})
|
getprojectListByPacId(pacId).then((response) => {
|
this.pacById = response.data
|
this.pacId = this.pacById.pacId;
|
this.proList = response.data.tjProjectList
|
});
|
},
|
confirm() {},
|
change(e) {
|
this.single = e
|
},
|
changeLog(e) {},
|
maskClick(e) {},
|
onClick(e) {
|
uni.navigateTo({
|
url: `/pages/vue/index/index`
|
})
|
|
this.$modal.showToast('该项目正在建设中');
|
},
|
onNavigationBarButtonTap(e) {
|
if (this.showLeft) {
|
this.$refs.showLeft.close()
|
} else {
|
this.$refs.showLeft.open()
|
}
|
},
|
onBackPress() {
|
if (this.showRight || this.showLeft) {
|
this.$refs.showLeft.close()
|
this.$refs.showRight.close()
|
return true
|
}
|
},
|
payment2() {
|
if (this.dataList.cusName != "") {
|
if (this.data1List) {
|
let data = {
|
pacId: this.pacId,
|
idCard: this.dataList.cusIdcard,
|
name: this.dataList.cusName,
|
reservationTime: this.data1List,
|
phoe: this.dataList.cusPhone,
|
marriage: this.dataList.cusMarryStatus,
|
nation: this.dataList.connect,
|
}
|
reservation(data).then(res => {
|
if (res.msg == "您已成功预约,无需再约") {
|
this.$modal.showToast('已预约，请先取消再重新预约');
|
} else if (res.data) {
|
this.$modal.msgSuccess("预约成功");
|
uni.navigateTo({
|
url: '/pagesB/mine/myReservation/myReservation'
|
});
|
}
|
})
|
} else {
|
this.$modal.showToast('请选择体检日期');
|
}
|
} else {
|
this.$modal.showToast('请选择体检人员');
|
}
|
},
|
payment(pacId) {
|
if (this.dataList.cusName != "") {
|
if (this.data1List) {
|
let data = {
|
pacId: this.pacId,
|
idCard: this.dataList.cusIdcard,
|
name: this.dataList.cusName,
|
reservationTime: this.data1List,
|
phoe: this.dataList.cusPhone,
|
marriage: this.dataList.cusMarryStatus,
|
nation: this.dataList.connect,
|
}
|
reservation(data).then(res => {
|
if (res.msg == "您已成功预约,无需再约") {
|
this.$modal.showToast('已预约，请先取消再重新预约');
|
}
|
if (res.data) {
|
this.cartId = res.data
|
if (this.cartId != "") {
|
let data = {
|
reservationId: this.cartId,
|
price: this.pacById.price
|
}
|
submit(data).then((res) => {
|
const orderId = res.data.orderId
|
if (res.data.orderId) {
|
let data = {
|
orderId: res.data.orderId
|
}
|
prepay(data).then(res => {
|
if (res.code === 200) {
|
const payParam = res.data;
|
uni.requestPayment({
|
timeStamp: payParam.timeStamp,
|
nonceStr: payParam.nonceStr,
|
package: payParam.packageValue,
|
signType: payParam.signType,
|
paySign: payParam.paySign,
|
success: function(res) {
|
uni.redirectTo({
|
url: '/pagesB/mine/myReservation/myReservation?status=2&orderId=' +
|
orderId
|
});
|
},
|
fail: function(res) {
|
uni.redirectTo({
|
url: '../payResult/payResult?status=0&orderId=' +
|
orderId
|
});
|
},
|
complete: function(res) {}
|
})
|
} else {
|
util.showErrorToast(res.errmsg);
|
}
|
})
|
}
|
})
|
}
|
}
|
})
|
} else {
|
this.$modal.showToast('请选择体检日期');
|
}
|
} else {
|
this.$modal.showToast('请选择体检人员');
|
}
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
// 定义变量
|
$primary-color: #FF6A7B;
|
$background-color: #F5F5F5;
|
$text-color: #333333;
|
$secondary-text-color: #666666;
|
$border-color: #E5E5E5;
|
$card-background: #F7F7F7;
|
|
// 全局页面样式
|
page {
|
background-color: $background-color;
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
|
|
}
|
|
.content {
|
flex: 1;
|
overflow: auto;
|
padding-bottom: 68rpx;
|
}
|
|
// 头部套餐信息
|
.box {
|
width: 750rpx;
|
height: 328rpx;
|
background: linear-gradient(#F8D6DC 0%, #FFFFFF 100%);
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
// padding: 57rpx 33rpx 0;
|
}
|
|
.name {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: bold;
|
font-size: 32rpx;
|
color: #E30165;
|
line-height: 42rpx;
|
padding-top: 57rpx;
|
margin-left: 33rpx;
|
}
|
|
.miaoshu {
|
font-size: 28rpx;
|
color: #565860;
|
line-height: 44rpx;
|
margin: 40rpx 0 40rpx 34rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
}
|
|
.feiyong {
|
display: flex;
|
align-items: baseline;
|
margin-bottom: 20rpx;
|
margin-left: 33rpx;
|
|
.xian {
|
margin-right: 32rpx;
|
font-weight: 500;
|
font-size: 54rpx;
|
color: #E30165;
|
line-height: 42rpx;
|
display: flex;
|
align-items: baseline;
|
|
.currency {
|
font-family: D-DIN-PRO, D-DIN-PRO;
|
font-size: 36rpx;
|
}
|
|
.qi {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
margin-left: 8rpx;
|
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #E30165;
|
line-height: 42rpx;
|
|
}
|
}
|
|
.yuan {
|
font-family: D-DIN-PRO, D-DIN-PRO;
|
text-decoration-line: line-through;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #C3C3C4;
|
line-height: 42rpx;
|
}
|
}
|
|
|
.form-item {
|
height: 82rpx;
|
padding: 30rpx 0rpx 20rpx 53rpx;
|
display: flex;
|
margin-bottom: 30rpx;
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
}
|
|
.label {
|
width: 120rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #373E58;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
.input {
|
width: 240rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #9496A2;
|
text-align: right;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
.card1_header {
|
width: 702rpx;
|
height: 66rpx;
|
line-height: 66rpx;
|
padding-left: 30rpx;
|
background: linear-gradient(90deg, #FFF5F5 0%, #FFE4F1 100%);
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
color: #A20048;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
}
|
|
|
.cen {
|
width: 750rpx;
|
height: 8rpx;
|
background: #F4F5F8;
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
}
|
|
// 列表样式（体检人员、日期、增加项目）
|
.uni-list {
|
background-color: #fff;
|
margin: 10px 0;
|
|
.uni-list-item {
|
padding: 15px;
|
border-bottom: 1px solid $border-color;
|
font-size: 16px;
|
color: $text-color;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.uni-list-item__extra {
|
color: $secondary-text-color;
|
}
|
}
|
|
text {
|
margin: 10px 15px;
|
font-size: 14px;
|
color: $secondary-text-color;
|
}
|
}
|
|
// 套餐内项目
|
.card1 {
|
// margin: 10px 0;
|
padding: 15px;
|
background-color: #fff;
|
|
>text {
|
font-size: 16px;
|
font-weight: 500;
|
color: $text-color;
|
position: relative;
|
padding-left: 15px;
|
margin-bottom: 10px;
|
display: block;
|
|
&:before {
|
content: '';
|
position: absolute;
|
left: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 6px;
|
height: 6px;
|
background-color: $primary-color;
|
border-radius: 50%;
|
}
|
}
|
|
.uni-card {
|
margin-top: 10px;
|
padding: 10px;
|
background-color: $card-background;
|
border-radius: 4px;
|
}
|
|
.card-item {
|
display: flex;
|
flex-direction: column;
|
|
text {
|
font-size: 14px;
|
color: $text-color;
|
line-height: 20px;
|
|
&:first-child {
|
font-weight: 500;
|
}
|
|
&:last-child {
|
color: $secondary-text-color;
|
}
|
}
|
}
|
}
|
|
.Package {
|
margin-top: 26rpx;
|
}
|
|
.Package1 {
|
width: 642rpx;
|
height: 80rpx;
|
display: flex;
|
background: #F4F5F8;
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
margin-left: 28rpx;
|
}
|
|
.card1_Package {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #373E58;
|
line-height: 80rpx;
|
font-style: normal;
|
text-transform: none;
|
padding-left: 30rpx;
|
|
}
|
|
.small {
|
width: 6rpx;
|
height: 32rpx;
|
background: #FD6397;
|
border-radius: 0rpx 8rpx 8rpx 0rpx;
|
margin-top: 25rpx;
|
}
|
|
.card1_char {
|
width: 612rpx;
|
height: 110rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #65686A;
|
line-height: 42rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
margin: 24rpx 0;
|
margin-left: 58rpx;
|
}
|
|
// 底部样式
|
.bottom-section {
|
width: 702rpx;
|
height: 270rpx;
|
background: linear-gradient(90deg, #FFFFFF 0%, #FCFFFE 100%);
|
box-shadow: 0rpx 0rpx 12rpx 1rpx rgba(127, 153, 177, 0.09);
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
margin: 32rpx 24rpx ;
|
}
|
|
.price-section {
|
// overflow: hidden;
|
display: flex;
|
}
|
|
.card-img {
|
width: 96rpx;
|
height: 96rpx;
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
margin-top: 48rpx;
|
margin-left: 32rpx;
|
// margin-bottom: 126rpx;
|
margin-right: 24rpx;
|
}
|
|
.bottom_txt_sty {
|
margin-top: 54rpx;
|
height: 100rpx;
|
border-bottom: 1px solid #F2F3F2;
|
}
|
|
.bottom_txt1 {
|
width: 384rpx;
|
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-bottom: 20rpx;
|
}
|
|
.txt_sty {
|
display: flex;
|
}
|
|
.sty_txt1 {
|
width: 86rpx;
|
height: 30rpx;
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
border: 1rpx solid #419FFD;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #419FFD;
|
line-height: 34rpx;
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
|
}
|
|
.sty_txt2 {
|
height: 24rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #9496A2;
|
line-height: 34rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
margin-left: 14rpx;
|
}
|
|
.bottom_txt2 {
|
width: 457rpx;
|
height: 64rpx;
|
margin-top: 12rpx;
|
margin-left: 152rpx;
|
margin-bottom: 42rpx;
|
}
|
|
.bottom_txt3 {
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #565860;
|
line-height: 38rpx;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
}
|
|
.bottom_txt4 {
|
font-size: 12px;
|
color: #fff;
|
background-color: $primary-color;
|
padding: 2px 6px;
|
border-radius: 2px;
|
}
|
|
/* 固定底部容器 */
|
.button-section {
|
position: fixed;
|
/* 固定定位 */
|
bottom: 0;
|
/* 贴紧底部 */
|
left: 0;
|
/* 横向铺满 */
|
right: 0;
|
display: flex;
|
/* 启用Flex布局 */
|
justify-content: space-around;
|
/* 按钮等间距分布 */
|
align-items: center;
|
padding: 20rpx;
|
background: #fff;
|
/* 背景色 */
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
/* 顶部阴影分隔线 */
|
z-index: 999;
|
/* 确保按钮在顶层 */
|
}
|
|
/* 适配全面屏底部安全区域 */
|
@media (device-aspect-ratio: 9/16) {
|
.fixed-bottom {
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
}
|
}
|
|
/* 按钮样式 */
|
.btn {
|
flex: 1;
|
/* 等宽按钮 */
|
margin: 0 10rpx;
|
/* 按钮间距 */
|
background: #FE368E;
|
color: white;
|
border-radius: 50rpx;
|
font-size: 28rpx;
|
}
|
|
|
// 按钮样式
|
// .button-section {
|
// width: 100%;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// padding: 10px 0;
|
// bottom:20rpx
|
// }
|
|
// button {
|
// width: 90%;
|
// padding: 12px;
|
// background-color: $primary-color;
|
// color: #fff;
|
// border: none;
|
// border-radius: 20px;
|
// font-size: 16px;
|
// font-weight: 500;
|
// }
|
</style>
|
