431 lines
16 KiB
HTML
431 lines
16 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
|
|
.info {
|
|
position: relative;
|
|
margin: 0 0 10px 0;
|
|
font-size: 14px;
|
|
box-shadow: 0 2px 10px rgb(125 126 128 / 16%);
|
|
padding: 12px;
|
|
background-color: white;
|
|
}
|
|
|
|
.avatar {
|
|
width: 34%;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.other_info {
|
|
font-size: 18px;
|
|
line-height: 34px;
|
|
}
|
|
|
|
.label {
|
|
border-left: 5px #1867b0 solid;
|
|
border-radius: 4px;
|
|
padding-left: 6px;
|
|
margin: 10px 0px;
|
|
}
|
|
|
|
.van-tabs__content {
|
|
background-color: white;
|
|
}
|
|
|
|
.van-tab__pane, .van-tab__pane-wrapper {
|
|
padding: 20px;
|
|
}
|
|
|
|
.label_text {
|
|
color: grey;
|
|
line-height: 24px;
|
|
white-space: break-spaces;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.van-tabs__content {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.time_info .van-button {
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
width: 90px;
|
|
}
|
|
|
|
.time_info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.van-empty {
|
|
width: 100%;
|
|
}
|
|
|
|
.time_info:nth-of-type(1) {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.apply_pop {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #f6f7f9;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.footer {
|
|
background-color: white;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 60px;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
left: 0;
|
|
}
|
|
|
|
.footer .van-button {
|
|
height: 34px;
|
|
border-radius: 6px;
|
|
width: 90% !important;
|
|
}
|
|
|
|
img {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
|
|
<van-nav-bar
|
|
title="心理咨询预约"
|
|
left-arrow
|
|
placeholder
|
|
fixed
|
|
@click-left="window.history.back()">
|
|
</van-nav-bar>
|
|
|
|
<div class="info">
|
|
<div style="display: flex; align-items: center;">
|
|
<!--头像-->
|
|
<div class="avatar">
|
|
<van-image width="80"
|
|
:src="CREATE_PREVIEW_URL(doctorData.avatar)"></van-image>
|
|
</div>
|
|
<!--其他信息-->
|
|
<div class="other_info">
|
|
<div>
|
|
{{doctorData.username}}
|
|
</div>
|
|
<div>
|
|
{{doctorData.sex}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<van-tabs v-model="active" :style="'height: ' + (window.screen.height - 46 - 40 - 84 - 24 - 44) + 'px'">
|
|
<van-tab title="预约时段">
|
|
<van-list
|
|
v-model="mLoading"
|
|
:finished="finished"
|
|
:finished-text="timeData.length > 0 ? '没有更多了' : ''"
|
|
@load="getDataByDoctorId">
|
|
<div v-if="timeData.length > 0" class="time_info" v-for="item in timeData">
|
|
<div style="color: #1867b0">{{getFormatTime(item)}}</div>
|
|
<div>
|
|
<van-button @click="apply(item)" :color="item.className" size="small">{{item.title}}</van-button>
|
|
</div>
|
|
</div>
|
|
</van-list>
|
|
<van-empty
|
|
v-if="mLoading === false && timeData.length === 0"
|
|
class="custom-image"
|
|
image="/none.svg"
|
|
description="抱歉，此咨询师暂时没有进行排班哦">
|
|
</van-empty>
|
|
</van-tab>
|
|
<van-tab title="咨询师简介">
|
|
<div class="label" style="margin-top: 20px">简介</div>
|
|
<pre class="label_text">{{doctorData.introduce ? doctorData.introduce : '暂无数据，该资料待补充'}}</pre>
|
|
<div class="label">擅长方向</div>
|
|
<pre class="label_text">{{doctorData.specialty ? doctorData.specialty : '暂无数据，该资料待补充'}}</pre>
|
|
<div class="label" style="margin-top: 20px">工作理念</div>
|
|
<pre class="label_text">{{doctorData.workingIdeal ? doctorData.workingIdeal : '暂无数据，该资料待补充'}}</pre>
|
|
</van-tab>
|
|
</van-tabs>
|
|
|
|
<van-popup v-model="show" class="apply_pop" position="right">
|
|
<van-nav-bar
|
|
title="预约信息"
|
|
left-arrow
|
|
placeholder
|
|
fixed
|
|
@click-left="show = false">
|
|
</van-nav-bar>
|
|
<van-form ref="addForm" :show-error-message="false" input-align="right">
|
|
<van-cell-group inset class="mt10">
|
|
<van-field readonly
|
|
:value="chooseData.startTime"
|
|
label="开始时间"></van-field>
|
|
<van-field readonly
|
|
:value="chooseData.endTime"
|
|
label="结束时间"></van-field>
|
|
</van-cell-group>
|
|
|
|
<van-cell-group inset class="mt10" v-if="chooseData.doctorUser">
|
|
<van-field readonly
|
|
:value="chooseData.username"
|
|
label="咨询师姓名"></van-field>
|
|
<van-field readonly
|
|
:value="chooseData.mobile"
|
|
label="咨询师电话"></van-field>
|
|
</van-cell-group>
|
|
|
|
<van-cell-group inset class="mt10">
|
|
<van-field readonly
|
|
value="${@shiro.getPrincipalProperty('username')}"
|
|
label="预约人姓名"></van-field>
|
|
<van-field readonly
|
|
value="${@shiro.getPrincipalProperty('loginname')}"
|
|
label="预约人工号"></van-field>
|
|
<van-field readonly
|
|
value="${@shiro.getPrincipalProperty('unit').getName()}"
|
|
label="预约人单位"></van-field>
|
|
<!-- <van-field :rules="[{ required: true, message: '请填写手机号' }]"
|
|
required placeholder="请填写手机号"
|
|
type="tel"
|
|
v-model=chooseData.userMobile
|
|
label="预约人电话"></van-field>-->
|
|
</van-cell-group>
|
|
<van-cell-group inset class="mt10">
|
|
|
|
<div v-if="chooseData.askType">
|
|
<van-field v-model="appointmentAskTypeText" label="咨询方式" @click="appointmentAskTypeShow = true"
|
|
required :rules="[{ required: true, message: '请选择咨询方式' }]"
|
|
placeholder="请选择咨询方式"></van-field>
|
|
<van-popup v-model:show="appointmentAskTypeShow" position="bottom" round>
|
|
<van-picker show-toolbar :columns="askTypeArray" @confirm="askTypeConfirm"
|
|
@cancel="appointmentAskTypeShow = false">
|
|
</van-picker>
|
|
</van-popup>
|
|
</div>
|
|
|
|
<van-field
|
|
v-model="appointmentUserNote"
|
|
rows="3"
|
|
autosize
|
|
label="预约备注"
|
|
type="textarea"
|
|
placeholder="您可以输入预约备注"
|
|
></van-field>
|
|
</van-cell-group>
|
|
</van-form>
|
|
<div class="footer">
|
|
<van-button @click="doSubmit()" color="#1867b0">提交预约</van-button>
|
|
</div>
|
|
</van-popup>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
function getQueryVariable(variable) {
|
|
var query = window.location.search.substring(1);
|
|
var vars = query.split("&");
|
|
for (var i = 0; i < vars.length; i++) {
|
|
var pair = vars[i].split("=");
|
|
if (pair[0] == variable) {
|
|
return pair[1];
|
|
}
|
|
}
|
|
return '';
|
|
}
|
|
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
mixins: [mobileMixins],
|
|
data() {
|
|
return {
|
|
appointmentAskTypeShow: false,
|
|
askTypeList: [],
|
|
askTypeArray: [],
|
|
show: false,
|
|
doctorId: '',
|
|
doctorData: {},
|
|
active: 0,
|
|
timeData: [],
|
|
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
|
chooseData: {
|
|
userMobile: null
|
|
},
|
|
appointmentUserNote: '',
|
|
appointmentAskTypeText: '',
|
|
appointmentAskTypeValue: '',
|
|
typeId: '',
|
|
}
|
|
},
|
|
methods: {
|
|
askTypeConfirm(val) {
|
|
this.$set(this, "appointmentAskTypeText", val.text)
|
|
this.$set(this, "appointmentAskTypeValue", val.value)
|
|
this.appointmentAskTypeShow = false
|
|
},
|
|
async doSubmit() {
|
|
/* if (!this.chooseData.userMobile.trim()) {
|
|
this.$toast.fail("请填写手机号");
|
|
return
|
|
}*/
|
|
if (!this.appointmentAskTypeValue) {
|
|
this.$toast.fail("请选择咨询方式");
|
|
return
|
|
}
|
|
const valid = await vant.Dialog.confirm({
|
|
title: '提示',
|
|
message: '您确认提交吗？',
|
|
confirmButtonColor: '#1867b0'
|
|
})
|
|
if (valid) {
|
|
this.$toast.loading('提交中...')
|
|
const params = {
|
|
appointmentUserNote: this.appointmentUserNote,
|
|
appointmentAskTypeValue: this.appointmentAskTypeValue,
|
|
userMobile: this.chooseData.userMobile,
|
|
id: this.chooseData.id,
|
|
isAdd: true,
|
|
}
|
|
const resp = await $.post('/mobile/psychologyPro/doApply', params)
|
|
if (resp.code === 0) {
|
|
vant.Dialog.alert({
|
|
title: '提示',
|
|
message: '您已预约成功！',
|
|
confirmButtonColor: '#1867b0'
|
|
}).then(() => {
|
|
location.replace('/mobile/psychologyPro/myApplyList')
|
|
});
|
|
} else if (resp.code === 1) {
|
|
this.$toast.error(resp.msg)
|
|
} else if (resp.code === 2) {
|
|
this.$toast.error(resp.msg)
|
|
}
|
|
}
|
|
},
|
|
async apply(o) {
|
|
if (o.title !== '可预约') {
|
|
return
|
|
}
|
|
|
|
//查询最近半年有没有预约3次，半年内不超过3次
|
|
const {data: applyNum} = await $.post("/platform/psychology/appointmentApply/getAppointmentApplyNum")
|
|
if (applyNum) {
|
|
this.$toast("您半年内已预约三次暂时无法在预约")
|
|
return
|
|
}
|
|
|
|
|
|
this.askTypeArray = []
|
|
if (o.askType) {
|
|
const array = JSON.parse(o.askType)
|
|
this.askTypeList.map(o => {
|
|
if (array.includes(o.code)) {
|
|
this.askTypeArray.push({text: o.name, value: o.code})
|
|
}
|
|
})
|
|
}
|
|
if (this.askTypeArray && this.askTypeArray.length === 1) {
|
|
this.appointmentAskTypeText = this.askTypeArray[0].text
|
|
this.appointmentAskTypeValue = this.askTypeArray[0].value
|
|
}
|
|
this.chooseData = o
|
|
// this.$set(this.chooseData, "userMobile", "${@shiro.getPrincipalProperty('mobile')}")
|
|
this.show = true
|
|
},
|
|
getFormatTime(o) {
|
|
const simpleStartDate = moment(o.startTime).format('YYYY-MM-DD')
|
|
const simpleStartHour = moment(o.startTime).format('HH:mm')
|
|
const simpleEndHour = moment(o.endTime).format('HH:mm')
|
|
const dayNameOfWeek = this.dayNames[new Date(simpleStartDate).getDay()]
|
|
return simpleStartDate + ' ' + dayNameOfWeek + ' ' + simpleStartHour + '至' + simpleEndHour
|
|
},
|
|
async pageData() {
|
|
this.pageForm.doctorId = this.doctorId
|
|
const resp = await $.post('/mobile/psychologyPro/pageData', this.pageForm)
|
|
if (resp.code === 0) {
|
|
if (this.doctorId !== '') {
|
|
this.doctorData = resp.data[0]
|
|
} else {
|
|
this.tableData = resp.data
|
|
}
|
|
}
|
|
},
|
|
async getDataByDoctorId() {
|
|
this.mLoading = true
|
|
this.pageForm.id = this.doctorId
|
|
this.pageForm.typeId = this.typeId
|
|
const resp = await $.post('/mobile/psychologyPro/getDataByDoctorId', this.pageForm)
|
|
if (resp.code === 0) {
|
|
const userId = "${@shiro.getPrincipalProperty('id')}"
|
|
const record = resp.data.list.find(v => v.appointmentUser === userId)
|
|
if (record) {
|
|
resp.data.list.forEach(v => {
|
|
if (new Date().getTime() > v.startTimeTs) {
|
|
v.className = 'gray'
|
|
v.title = '不可预约'
|
|
} else {
|
|
if (v.appointmentUser === userId) {
|
|
v.className = 'gray'
|
|
v.title = '我已预约'
|
|
} else {
|
|
v.className = 'gray'
|
|
v.title = '不可预约'
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
resp.data.list.forEach(v => {
|
|
if (new Date().getTime() > v.startTimeTs) {
|
|
v.className = 'gray'
|
|
v.title = '不可预约'
|
|
} else {
|
|
if (!v.appointmentUser) {
|
|
v.className = '#1867b0'
|
|
v.title = '可预约'
|
|
} else if (v.appointmentUser === userId) {
|
|
v.className = 'gray'
|
|
v.title = '我已预约'
|
|
} else {
|
|
v.className = 'gray'
|
|
v.title = '不可预约'
|
|
}
|
|
}
|
|
})
|
|
}
|
|
this.timeData = this.timeData.concat(resp.data.list)
|
|
if (this.timeData.length === resp.data.totalCount) {
|
|
this.finished = true
|
|
} else {
|
|
this.pageForm.pageNumber++
|
|
}
|
|
}
|
|
this.mLoading = false
|
|
},
|
|
},
|
|
async created() {
|
|
this.doctorId = getQueryVariable('doctorId')
|
|
this.typeId = getQueryVariable('typeId')
|
|
this.askTypeList = await getDictOptions("psychology_asktype")
|
|
await this.pageData()
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|