519 lines
14 KiB
Vue
519 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<div class="content">
|
||
<h3>选择医院</h3>
|
||
<div class="item" @click="show = true">
|
||
<div v-if="!hospital">点击选择医院</div>
|
||
<div v-else>{{ hospital }}</div>
|
||
<div><u-icon name="arrow-right"></u-icon></div>
|
||
</div>
|
||
|
||
<h3 style="margin-top: 20px">检查类型</h3>
|
||
<div class="item" @click="showPropup = true">
|
||
<div v-if="!checkType">点击选择检查类型</div>
|
||
<div v-else>{{ checkType }}</div>
|
||
<div><u-icon name="arrow-right"></u-icon></div>
|
||
</div>
|
||
|
||
<h3 style="margin-top: 20px">体检时间</h3>
|
||
<div class="item" @click="handleShowTime">
|
||
<div v-if="!healthTime">点击选择时间</div>
|
||
<div v-else>{{ healthTime }}</div>
|
||
<div><u-icon name="arrow-right"></u-icon></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 选择医院 -->
|
||
<u-picker
|
||
:show="show"
|
||
:columns="[hospitalList]"
|
||
keyName="hospitalName"
|
||
@cancel="show = false"
|
||
@confirm="confirmHospital"
|
||
></u-picker>
|
||
|
||
<!-- 检查类型 -->
|
||
<u-popup :show="showPropup" :round="10" mode="bottom" closeable @close="showPropup = false">
|
||
<div class="propup-content">
|
||
<h3>请选择套餐</h3>
|
||
<div class="title-wrapper">
|
||
<div class="title title-tip" v-if="!checkType">
|
||
<div>请选择</div>
|
||
<div class="line"></div>
|
||
</div>
|
||
<div v-else>
|
||
<div class="title">{{ checkType }}</div>
|
||
<div class="line"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div
|
||
class="list-item"
|
||
:class="{ active: active == index }"
|
||
v-for="(item, index) in checkTypeList"
|
||
:key="index"
|
||
@click="handleCheckType(item, index)"
|
||
>
|
||
{{ item.text }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cont-title" v-if="checkTypeContent">
|
||
<div class="cont">{{ checkTypeContent }}</div>
|
||
<div v-if="showIcon" class="cont-icon" @click="showIcon = false">
|
||
<div style="margin-right: 3px">展开</div>
|
||
<div>
|
||
<u-icon name="arrow-down" color="#1989fa" size="16" />
|
||
</div>
|
||
</div>
|
||
<div v-else class="cont-icon" @click="showIcon = true">
|
||
<div style="margin-right: 3px">收起</div>
|
||
<div>
|
||
<u-icon name="arrow-up" color="#1989fa" size="16" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cont-line"></div>
|
||
|
||
<div v-show="!showIcon" class="contList-wrapper">
|
||
<div class="contList-item" v-for="(item, index) in checkTypeContentList" :key="index">
|
||
<div class="cont-title">{{ item.combinName }}</div>
|
||
<div>项目内容：{{ item.combinContent }}</div>
|
||
<div>
|
||
项目价格：
|
||
<span style="color: red">{{ item.combinPrice }}元</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn" v-if="checkType">
|
||
<u-button type="primary" text="确认套餐" size="small" @click="showPropup = false"></u-button>
|
||
</div>
|
||
</div>
|
||
</u-popup>
|
||
|
||
<!-- 体检时间 -->
|
||
<u-calendar :show="showTime" mode="single" @confirm="confirmTime" @close="showTime = false"></u-calendar>
|
||
|
||
<div v-if="healthTime" class="reservation-number">当天剩余可预约人数：{{ reservationNumber }}人</div>
|
||
|
||
<div class="content" v-if="hospitalInfo.hospitalName">
|
||
<h3>医院信息</h3>
|
||
<div class="hospital-name">{{ hospitalInfo.hospitalName }}</div>
|
||
<div>地址: {{ hospitalInfo.address }}</div>
|
||
<div>营业时间: 周一至周五 {{ hospitalInfo.businessEnd }}-{{ hospitalInfo.businessHours }}</div>
|
||
<div>负责人: {{ hospitalInfo.responsible }}</div>
|
||
<div>联系方式: {{ hospitalInfo.telPhone }}</div>
|
||
</div>
|
||
|
||
<div style="margin: 30px 60px" v-if="hospital && checkType && healthTime && reservationNumber != 0">
|
||
<u-button type="primary" text="确定预约" shape="circle" size="small" @click="handleSave"></u-button>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/config'
|
||
import Crypoto from '@/utils/aescbc'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isLoading: false,
|
||
token: uni.getStorageSync('tjToken'),
|
||
idcard: '',
|
||
active: null,
|
||
// 医院列表
|
||
hospitalList: [],
|
||
// 选择的医院
|
||
hospital: '',
|
||
// 医院信息
|
||
hospitalInfo: {},
|
||
// 体检时间
|
||
healthTime: '',
|
||
show: false,
|
||
showTime: false,
|
||
columns: [],
|
||
showPropup: false,
|
||
setMealId: '',
|
||
// 检查类型
|
||
checkType: '',
|
||
// 检查类型-列表
|
||
checkTypeList: [],
|
||
// 检查类型-内容
|
||
checkTypeContent: '',
|
||
checkTypeContentList: [],
|
||
showIcon: false,
|
||
reservationNumber: 0,
|
||
isDisabled: true
|
||
}
|
||
},
|
||
onLoad(opt) {
|
||
opt = JSON.parse(opt.params)
|
||
console.log('🚀 ~ onLoad ~ opt:', opt)
|
||
this.idcard = opt.idcard
|
||
},
|
||
mounted() {
|
||
this.getHospitalList()
|
||
this.getCheckType()
|
||
},
|
||
methods: {
|
||
// 获取医院列表 app/gethospital
|
||
getHospitalList() {
|
||
const cry = new Crypoto()
|
||
const params = {
|
||
token: this.token,
|
||
idcard: cry.encrypt(this.idcard)
|
||
}
|
||
console.log('🚀 ~ getHospitalList ~ params:', params)
|
||
uni.request({
|
||
url: config.tjBaseUrl + '/app/gethospital',
|
||
method: 'post',
|
||
data: params,
|
||
header: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
token: this.token
|
||
},
|
||
success: res => {
|
||
res = res.data
|
||
console.log('🚀 ~ getHospitalList ~ res:', res)
|
||
if (res.res == 1) {
|
||
this.hospitalList = res.obj
|
||
// this.columns 双层数组, 将医院列表push到columns中
|
||
this.columns.push(this.hospitalList)
|
||
console.log('🚀 ~ getHospitalList ~ this.hospitalList:', this.hospitalList)
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log('🚀 ~ getHospitalList ~ err:', err)
|
||
}
|
||
})
|
||
},
|
||
// 获取检查类型
|
||
getCheckType() {
|
||
const cry = new Crypoto()
|
||
const params = {
|
||
token: this.token,
|
||
idcard: cry.encrypt(this.idcard)
|
||
}
|
||
console.log('🚀 ~ getCheckType ~ params:', params)
|
||
uni.request({
|
||
url: config.tjBaseUrl + '/app/getPhysicalExamination',
|
||
method: 'post',
|
||
data: params,
|
||
header: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
token: this.token
|
||
},
|
||
success: res => {
|
||
res = res.data
|
||
console.log('🚀 ~ getCheckType ~ res:', res)
|
||
if (res.res == 1) {
|
||
this.checkTypeList = res.obj
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log('🚀 ~ getCheckType ~ err:', err)
|
||
}
|
||
})
|
||
},
|
||
// 确认医院
|
||
confirmHospital(e) {
|
||
console.log('🚀 ~ confirmHospital ~ e:', e)
|
||
this.hospital = e.value[0].hospitalName
|
||
this.hospitalInfo = e.value[0]
|
||
console.log('🚀 ~ confirmHospital ~ this.hospitalInfo:', this.hospitalInfo)
|
||
if (this.hospitalInfo.id) this.isDisabled = false
|
||
this.show = false
|
||
},
|
||
// 选择检查类型
|
||
handleCheckType(item, index) {
|
||
console.log('🚀 ~ handleCheckType ~ item:', item)
|
||
this.active = index
|
||
this.checkType = item.text
|
||
this.getCheckTypeContent(item)
|
||
},
|
||
// 获取套餐内容
|
||
getCheckTypeContent(item) {
|
||
const params = {
|
||
token: this.token,
|
||
checkId: item.id,
|
||
combType: 2
|
||
}
|
||
console.log('🚀 ~ getCheckTypeContent ~ params:', params)
|
||
uni.request({
|
||
url: config.tjBaseUrl + '/app/getexamination',
|
||
method: 'post',
|
||
data: params,
|
||
header: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
token: this.token
|
||
},
|
||
success: res => {
|
||
res = res.data
|
||
console.log('🚀 ~ getCheckTypeContent ~ res:', res)
|
||
if (res.res == 1) {
|
||
this.setMealId = res.obj.tibean[0].id
|
||
this.checkTypeContent = res.obj.tibean[0].combName
|
||
this.checkTypeContentList = res.obj.tibeanson
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log('🚀 ~ getCheckTypeContent ~ err:', err)
|
||
}
|
||
})
|
||
},
|
||
handleShowTime() {
|
||
if (this.isDisabled) {
|
||
uni.showToast({
|
||
title: '请选择医院',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
this.showTime = true
|
||
}
|
||
},
|
||
getCurrentDate() {
|
||
const date = new Date()
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
return `${year}-${month}-${day}`
|
||
},
|
||
// 确认时间
|
||
confirmTime(e) {
|
||
console.log('🚀 ~ confirmTime ~ e:', e)
|
||
const today = this.getCurrentDate()
|
||
if (e[0] == today) {
|
||
uni.showToast({
|
||
title: '不可以预约今天',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.healthTime = e[0]
|
||
this.showTime = false
|
||
this.getReservationNumber()
|
||
},
|
||
// 获取当天剩余可预约人数
|
||
getReservationNumber() {
|
||
const params = {
|
||
token: this.token,
|
||
hosId: this.hospitalInfo.id,
|
||
phyAppontTime: this.healthTime,
|
||
type: '2'
|
||
}
|
||
console.log('🚀 ~ getReservationNumber ~ params:', params)
|
||
uni.request({
|
||
url: config.tjBaseUrl + '/app/getphyappointnum',
|
||
method: 'post',
|
||
data: params,
|
||
header: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
token: this.token
|
||
},
|
||
success: res => {
|
||
res = res.data
|
||
console.log('🚀 ~ getReservationNumber ~ res:', res)
|
||
if (res.res == 1) {
|
||
this.reservationNumber = res.obj
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log('🚀 ~ getReservationNumber ~ err:', err)
|
||
}
|
||
})
|
||
},
|
||
// 确定预约 phyappoint
|
||
handleSave() {
|
||
if (this.isLoading) {
|
||
// 提示
|
||
uni.showToast({
|
||
title: '请勿重复提交',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
this.isLoading = true
|
||
const cry = new Crypoto()
|
||
const params = {
|
||
hospitalId: this.hospitalInfo.id,
|
||
setMealId: this.setMealId,
|
||
phyAppontTime: this.healthTime,
|
||
setMealType: '2',
|
||
combName: this.checkTypeContent,
|
||
// token: this.token
|
||
}
|
||
console.log('🚀 ~ handleSave ~ params:', params)
|
||
console.log('🚀 ~ handleSave ~ params:', cry.encrypt(JSON.stringify(params)))
|
||
|
||
uni.request({
|
||
url: config.tjBaseUrl + '/app/phyappoint',
|
||
method: 'post',
|
||
data: { encryptedData: cry.encrypt(JSON.stringify(params)), token: this.token },
|
||
// data: params,
|
||
header: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
token: this.token
|
||
},
|
||
success: res => {
|
||
res = res.data
|
||
console.log('🚀 ~ handleSave ~ res:', res)
|
||
if (res.res == 1) {
|
||
uni.setStorageSync('appoint', true)
|
||
uni.showToast({
|
||
title: '预约成功',
|
||
icon: 'success'
|
||
})
|
||
uni.reLaunch({
|
||
url: '/pages/HealthExaminationApp/myAppointment/bookSuccessfully'
|
||
})
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log('🚀 ~ handleSave ~ err:', err)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
margin: 10px;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
background: #fff;
|
||
|
||
h3 {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.hospital-wrapper {
|
||
/* display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: center; */
|
||
margin-bottom: 20px;
|
||
}
|
||
.item {
|
||
padding: 0 15px;
|
||
width: calc(100% -30px);
|
||
height: 50px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #f5f5f5;
|
||
border-radius: 50px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.hospital-name {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
color: #1989fa;
|
||
line-height: 35px;
|
||
}
|
||
}
|
||
.propup-content {
|
||
height: 500px;
|
||
padding: 20px;
|
||
|
||
.title-wrapper {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.title {
|
||
margin-top: 20px;
|
||
color: #333;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.title-tip {
|
||
color: #999;
|
||
}
|
||
|
||
.line {
|
||
margin: 10px 0;
|
||
width: 42px;
|
||
height: 2px;
|
||
background: #1989fa;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.list-item {
|
||
margin-right: 10px;
|
||
color: #333;
|
||
|
||
&.active {
|
||
color: #1989fa;
|
||
}
|
||
}
|
||
|
||
.cont-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
color: #1989fa;
|
||
font-size: 16px;
|
||
|
||
.cont-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.cont-line {
|
||
margin-top: 6px;
|
||
width: 100%;
|
||
height: 1px;
|
||
background: #ccc;
|
||
}
|
||
|
||
.contList-wrapper {
|
||
max-height: 300px;
|
||
overflow: auto;
|
||
}
|
||
.contList-item {
|
||
margin: 10px 0;
|
||
color: #333;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
word-break: break-all;
|
||
overflow: auto;
|
||
|
||
.cont-title {
|
||
font-size: 16px;
|
||
color: #1989fa;
|
||
line-height: 30px;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
// 固定左下方
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 20px;
|
||
/* width: 80px; */
|
||
}
|
||
}
|
||
.reservation-number {
|
||
height: 20px;
|
||
margin: 10px;
|
||
margin-top: 0;
|
||
padding: 10px;
|
||
color: #999;
|
||
background: #fff;
|
||
border-radius: 5px;
|
||
font-size: 15px;
|
||
/* text-align: start; */
|
||
}
|
||
</style>
|