first commit
This commit is contained in:
@@ -0,0 +1,430 @@
|
||||
<!--#
|
||||
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>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,259 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
|
||||
/*.info {*/
|
||||
/* position: relative;*/
|
||||
/* width: 88%;*/
|
||||
/* margin: 20px auto;*/
|
||||
/* font-size: 14px;*/
|
||||
/* box-shadow: 0 2px 10px rgb(125 126 128 / 16%);*/
|
||||
/* padding: 12px;*/
|
||||
/* border-radius: 10px;*/
|
||||
/* background-color: white;*/
|
||||
/*}*/
|
||||
|
||||
/*.avatar {*/
|
||||
/* width: 28%;*/
|
||||
/*}*/
|
||||
|
||||
/*.other_info {*/
|
||||
/* width: 72%;*/
|
||||
/* line-height: 22px;*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: column;*/
|
||||
/* justify-content: space-between;*/
|
||||
/*}*/
|
||||
|
||||
/*.desc {*/
|
||||
/* overflow: hidden;*/
|
||||
/* white-space: nowrap;*/
|
||||
/* text-overflow: ellipsis;*/
|
||||
/*}*/
|
||||
|
||||
/*img {*/
|
||||
/* border-radius: 10px;*/
|
||||
/*}*/
|
||||
|
||||
/*.van-dropdown-menu__item {*/
|
||||
/* flex: auto;*/
|
||||
/*}*/
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.therapist-card {
|
||||
background: white;
|
||||
margin: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f1f3f5;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid #f8f9fa;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.gender {
|
||||
font-size: 13px;
|
||||
color: #868e96;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 13px;
|
||||
color: #868e96;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title i {
|
||||
margin-right: 8px;
|
||||
color: #adb5bd;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
font-size: 14px;
|
||||
color: #495057;
|
||||
line-height: 1.7;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar
|
||||
title="心理咨询师列表"
|
||||
left-arrow
|
||||
placeholder
|
||||
fixed
|
||||
@click-left="window.history.back()">
|
||||
</van-nav-bar>
|
||||
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="pageForm.typeId" :options="typeList"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
|
||||
<div style="height: calc(100vh - 50px - 46px - 50px );overflow-y: auto">
|
||||
<div class="therapist-card" v-for="item in tableData" :key="item.id" @click="toApply(item)">
|
||||
<div class="card-header">
|
||||
<img :src="CREATE_PREVIEW_URL(item.avatar)" alt="任瑞" class="avatar"
|
||||
onerror="this.src='https://via.placeholder.com/80'">
|
||||
<div class="info">
|
||||
<div class="name">{{item.username}}</div>
|
||||
<div>
|
||||
<span class="gender female"><i class="fa fa-venus"></i> {{item.sex}}</span>
|
||||
</div>
|
||||
<div class="unit">{{item.unitName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="section">
|
||||
<div class="section-title"><i class="fa fa-graduation-cap"></i>简介</div>
|
||||
<div class="section-content">
|
||||
{{item.introduce}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title"><i class="fa fa-heart"></i>擅长领域</div>
|
||||
<div class="section-content">{{item.specialty}}</div>
|
||||
</div>
|
||||
|
||||
<div class="section" v-if="item.workingIdeal">
|
||||
<div class="section-title"><i class="fa fa-quote-left"></i>工作理念</div>
|
||||
<div class="section-content">{{item.workingIdeal}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--咨询师列表-->
|
||||
<!-- <div class="info" @click="toApply(item)" v-for="item in tableData" style="margin-bottom: 20px">-->
|
||||
<!-- <div style="display: flex;">-->
|
||||
<!-- <!–头像–>-->
|
||||
<!-- <div class="avatar">-->
|
||||
<!-- <van-image width="80" :src="CREATE_PREVIEW_URL(item.avatar)"></van-image>-->
|
||||
<!-- </div>-->
|
||||
<!-- <!–其他信息–>-->
|
||||
<!-- <div class="other_info">-->
|
||||
<!-- <div>-->
|
||||
<!-- <span style="font-size: 20px">{{item.username}} </span>-->
|
||||
<!-- <span style="color: grey">{{item.sex}} </span> -->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <!– <div>-->
|
||||
<!-- <span style="color: grey">职称：</span>{{item.jobTitle}}-->
|
||||
<!-- </div>–>-->
|
||||
|
||||
<!-- <div class="desc">-->
|
||||
<!-- <span style="color: grey">擅长方向：</span>{{item.specialty}}-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <span style="color: grey">简介：</span>{{item.introduce}}-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <van-empty v-if="tableData.length==0" class="custom-image" image="/none.svg"-->
|
||||
<!-- description="暂无数据">-->
|
||||
<!-- </van-empty>-->
|
||||
|
||||
<div>
|
||||
<van-tabbar v-model="tarBarActive">
|
||||
<van-tabbar-item icon="home-o" replace url="/mobile/psychologyPro/entrance">心理咨询预约</van-tabbar-item>
|
||||
<van-tabbar-item icon="manager-o" replace url="/mobile/psychologyPro/myApplyList">我的预约</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
tarBarActive: 0,
|
||||
typeList: [
|
||||
{text: '时间不限', value: 'no'},
|
||||
{text: '本周', value: 'thisWeek'},
|
||||
{text: '下周', value: 'nextWeek'},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doSearch() {
|
||||
this.tableData = []
|
||||
this.pageData()
|
||||
},
|
||||
async pageData() {
|
||||
const resp = await $.post('/mobile/psychologyPro/pageData', this.pageForm)
|
||||
if (resp.code === 0) {
|
||||
this.tableData = resp.data
|
||||
}
|
||||
},
|
||||
toApply(o) {
|
||||
location.href = '/mobile/psychologyPro/apply?doctorId=' + o.userid + '&typeId=' + this.pageForm.typeId
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.$set(this.pageForm, "typeId", this.typeList[0].value)
|
||||
await this.pageData()
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,481 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.list-card {
|
||||
background: #FFFFFF;
|
||||
width: 92%;
|
||||
margin: 0px auto 20px;
|
||||
box-shadow: 0 2px 10px rgb(125 126 128 / 16%);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.van-dropdown-menu__bar {
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
line-height: 30px;
|
||||
padding: 8px 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
text-align: right;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.cancel-button .van-button {
|
||||
height: 24px !important;
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
|
||||
.apply_pop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f6f7f9;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.van-doc-card {
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 8px 12px #ebedf0;
|
||||
line-height: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.van-card-header {
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
box-sizing: border-box;
|
||||
color: #0e78c5;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.van-card-body {
|
||||
padding: 0px 10px 0px 10px
|
||||
}
|
||||
|
||||
.van-doc-card > div:first-child {
|
||||
border: 2px #0e78c5 solid;
|
||||
width: 26px;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.label {
|
||||
border-left: 5px #1867b0 solid;
|
||||
border-radius: 4px;
|
||||
padding-left: 6px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.label_text {
|
||||
color: grey;
|
||||
line-height: 24px;
|
||||
white-space: break-spaces;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.apply_pop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f6f7f9;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar
|
||||
title="我的预约记录"
|
||||
left-arrow
|
||||
placeholder
|
||||
fixed
|
||||
@click-left="window.history.back()"
|
||||
></van-nav-bar>
|
||||
|
||||
<div class="search-fixed">
|
||||
<van-dropdown-menu>
|
||||
<van-dropdown-item v-model="pageForm.year" :options="yearList"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
<van-dropdown-item v-model="pageForm.stateId" :options="stateList"
|
||||
@change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</div>
|
||||
|
||||
<div style="margin: 60px auto">
|
||||
<van-list v-model="loading"
|
||||
:finished="finished"
|
||||
:finished-text="tableData.length>0?'没有更多了':''"
|
||||
:immediate-check="false"
|
||||
@load="pageData">
|
||||
<div v-for="o in tableData" class="list-card" @click="viewInfo(o)">
|
||||
<div class="card-head">
|
||||
心理咨询预约
|
||||
<span class="state-text">
|
||||
<van-tag size="medium" v-if="o.stateId===2330" type="success">{{o.stateName}}</van-tag>
|
||||
<van-tag size="medium" v-if="o.stateId===2320" type="error">{{o.stateName}}</van-tag>
|
||||
<van-tag size="medium" v-if="o.stateId===2310" type="warning">{{o.stateName}}</van-tag>
|
||||
</span>
|
||||
</div>
|
||||
<van-cell-group inset>
|
||||
<van-cell :border="false" title="预约人">{{o.appointmentUserName}}</van-cell>
|
||||
<van-cell :border="false" title="开始时间">{{o.startTime}}</van-cell>
|
||||
<van-cell :border="false" title="结束时间">{{o.endTime}}</van-cell>
|
||||
</van-cell-group>
|
||||
<div class="cancel-button">
|
||||
<van-button v-if="moment().unix() < moment(o.startTime).unix()" style="margin-right: 4px"
|
||||
@click.stop="update(o)" round size="small" color="#1867b0">修改
|
||||
</van-button>
|
||||
<van-button v-if="moment().unix() < moment(o.startTime).unix()"
|
||||
@click.stop="doCancel(o.id)" round size="small" color="#1867b0">取消
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
</div>
|
||||
|
||||
<van-empty v-if="mLoading==false&&tableData.length==0" class="custom-image" image="/none.svg"
|
||||
description="暂无数据">
|
||||
</van-empty>
|
||||
|
||||
<van-popup v-model="show" class="apply_pop" position="right">
|
||||
<van-nav-bar
|
||||
title="预约详细信息"
|
||||
left-arrow
|
||||
placeholder
|
||||
fixed
|
||||
@click-left="show = false"
|
||||
safe-area-inset-top></van-nav-bar>
|
||||
|
||||
<div class="van-doc-card" style="margin: 16px">
|
||||
<div></div>
|
||||
<div class="van-card-header">
|
||||
预约时间段
|
||||
</div>
|
||||
<div class="van-card-body">
|
||||
<van-cell-group>
|
||||
<van-cell title="开始时间">{{ viewData.startTime }}</van-cell>
|
||||
<van-cell title="结束时间">{{ viewData.endTime }}</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="van-doc-card" style="margin: 16px">
|
||||
<div></div>
|
||||
<div class="van-card-header">
|
||||
预约人信息
|
||||
</div>
|
||||
<div class="van-card-body">
|
||||
<van-cell-group>
|
||||
<van-cell title="姓名">{{ viewData.appointmentUserName }}</van-cell>
|
||||
<van-cell title="工号">{{ viewData.appointmentLoginName }}</van-cell>
|
||||
<van-cell title="单位">{{ viewData.appointmentUnitName }}</van-cell>
|
||||
<van-cell title="电话">{{ viewData.appointmentMobile }}</van-cell>
|
||||
<van-cell title="预约咨询方式">{{ getAskTypeName() }}</van-cell>
|
||||
<van-cell title="预约备注">{{ viewData.appointmentUserNote }}</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="van-doc-card" style="margin: 16px">
|
||||
<div></div>
|
||||
<div class="van-card-header">
|
||||
咨询师信息
|
||||
</div>
|
||||
<div class="van-card-body">
|
||||
<van-cell-group>
|
||||
<van-cell title="姓名">{{ viewData.doctorUserName || '暂无'}}</van-cell>
|
||||
<van-cell title="单位">{{ viewData.doctorUnitName || '暂无'}}</van-cell>
|
||||
<van-cell title="电话">{{ viewData.doctorMobile || '暂无'}}</van-cell>
|
||||
<van-cell title="擅长方向">{{ viewData.doctorSpecialty || '暂无'}}</van-cell>
|
||||
<van-cell title="工作理念">{{ viewData.doctorWorkingIdeal || '暂无'}}</van-cell>
|
||||
<van-cell title="咨询方式">
|
||||
<div v-if="!viewData.askType || getDoctorAskTypeName().length === 0">暂无</div>
|
||||
<div v-else>
|
||||
<div v-for="item in getDoctorAskTypeName()">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</van-cell>
|
||||
<van-cell @click="doctorIntroduceShow = true" title="咨询师简介" is-link>
|
||||
<div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-word;">
|
||||
{{ viewData.doctorIntroduce || '暂无'}}
|
||||
</div>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model:show="doctorIntroduceShow" position="bottom" round style="padding: 20px; width: auto">
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div class="label">咨询师简介</div>
|
||||
<div @click="doctorIntroduceShow = false">
|
||||
<van-icon name="cross"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="label_text">{{viewData.doctorIntroduce ? viewData.doctorIntroduce : '暂无数据，该资料待补充'}}</pre>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model="infoShow" class="apply_pop" position="right">
|
||||
<van-nav-bar
|
||||
title="预约信息"
|
||||
left-arrow
|
||||
placeholder
|
||||
fixed
|
||||
@click-left="infoShow = 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.doctorUserName"
|
||||
label="咨询师姓名"></van-field>
|
||||
<van-field readonly
|
||||
:value="chooseData.doctorMobile"
|
||||
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
|
||||
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"
|
||||
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>
|
||||
<van-tabbar v-model="tarBarActive">
|
||||
<van-tabbar-item icon="home-o" replace url="/mobile/psychologyPro/entrance">心理咨询预约</van-tabbar-item>
|
||||
<van-tabbar-item icon="manager-o" replace url="/mobile/psychologyPro/myApplyList">我的预约</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
tarBarActive: 1,
|
||||
appointmentAskTypeText: '',
|
||||
appointmentUserNote: '',
|
||||
appointmentAskTypeShow: false,
|
||||
appointmentAskTypeValue: '',
|
||||
askTypeArray: [],
|
||||
chooseData: {},
|
||||
infoShow: false,
|
||||
doctorIntroduceShow: false,
|
||||
stateList: [
|
||||
{text: '全部预约状态', value: null},
|
||||
{text: '预约中', value: 2100},
|
||||
{text: '预约成功', value: 2300},
|
||||
{text: '预约失败', value: 2200}
|
||||
],
|
||||
askTypeList: [],
|
||||
show: false,
|
||||
viewData: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update(o) {
|
||||
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 (o.appointmentAskTypeValue) {
|
||||
const type = this.askTypeList.find(x => x.code === o.appointmentAskTypeValue)
|
||||
this.appointmentAskTypeText = type ? type.name : ''
|
||||
}
|
||||
this.chooseData = o
|
||||
this.appointmentUserNote = o.appointmentUserNote
|
||||
this.$set(this.chooseData, "userMobile", "${@shiro.getPrincipalProperty('mobile')}")
|
||||
this.infoShow = true
|
||||
},
|
||||
askTypeConfirm(val) {
|
||||
this.$set(this, "appointmentAskTypeText", val.text)
|
||||
this.$set(this, "appointmentAskTypeValue", val.value)
|
||||
this.appointmentAskTypeShow = false
|
||||
},
|
||||
async doSubmit() {
|
||||
if (!this.chooseData.userMobile) {
|
||||
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: false,
|
||||
}
|
||||
const resp = await $.post('/mobile/psychologyPro/doApply', params)
|
||||
if (resp.code === 0) {
|
||||
this.$toast.success('修改成功')
|
||||
setTimeout(() => {
|
||||
location.replace('/mobile/psychologyPro/myApplyList')
|
||||
}, 1000)
|
||||
} else if (resp.code === 1) {
|
||||
this.$toast.error(resp.msg)
|
||||
} else if (resp.code === 2) {
|
||||
this.$toast(resp.msg)
|
||||
}
|
||||
}
|
||||
},
|
||||
getAskTypeName() {
|
||||
if (this.viewData.appointmentAskTypeValue) {
|
||||
const type = this.askTypeList.find(o => o.code === this.viewData.appointmentAskTypeValue + '')
|
||||
return type ? type.name : '暂无'
|
||||
} else {
|
||||
return '暂无'
|
||||
}
|
||||
},
|
||||
getDoctorAskTypeName() {
|
||||
const askTypeArray = []
|
||||
if (this.viewData.askType) {
|
||||
const array = JSON.parse(this.viewData.askType)
|
||||
this.askTypeList.map(o => {
|
||||
if (array.includes(o.code)) {
|
||||
askTypeArray.push(o)
|
||||
}
|
||||
})
|
||||
}
|
||||
return askTypeArray
|
||||
},
|
||||
async pageData() {
|
||||
this.loading = true
|
||||
const {data} = await $.get('/mobile/psychologyPro/MyPageData', this.pageForm)
|
||||
setTimeout(() => {
|
||||
this.tableData = this.tableData.concat(data.list)
|
||||
if (this.tableData.length === data.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
this.loading = false
|
||||
this.pageForm.totalCount = data.totalCount
|
||||
}, 300)
|
||||
},
|
||||
doSearch() {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.tableData = []
|
||||
this.pageData()
|
||||
},
|
||||
viewInfo(o) {
|
||||
this.viewData = o
|
||||
this.show = true
|
||||
},
|
||||
async doCancel(id) {
|
||||
const confirm = await vant.Dialog.confirm({
|
||||
title: '提示',
|
||||
message: '您确定取消此次预约吗?',
|
||||
confirmButtonColor: '#1867b0'
|
||||
})
|
||||
if (confirm === 'confirm') {
|
||||
const resp = await $.post('/mobile/psychologyPro/doCancel', {id})
|
||||
if (resp.code === 0) {
|
||||
vant.Toast.success('取消成功')
|
||||
this.doSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.pageForm.year = this.yearList[0].value
|
||||
this.pageForm.stateId = null
|
||||
this.pageData()
|
||||
this.askTypeList = await getDictOptions("psychology_asktype")
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
Reference in New Issue
Block a user