309 lines
10 KiB
Vue
309 lines
10 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'自主预约'" :statusTitle="true"></status-nav>
|
||
<!-- 自定义二级分类 -->
|
||
<!-- 列表 -->
|
||
<view :style="{paddingTop: statusHeight+'px'}" class="pad-zy20">
|
||
<view class="bacf mar-s25 pad-zy20 radius20 fon28 col3 pad-x40">
|
||
<view class="disac pad-s32">
|
||
<view class="flexs mar-y20">预约类别</view>
|
||
<view @tap="openXial(0)" class="disjbac width100 radius10 pad-zy20 xiala posir">
|
||
<view>{{category}}</view>
|
||
<image :class="isZhuan?'zhuan':'nozhuan'" src="/static/public/sanj.png" mode="aspectFill"></image>
|
||
<view v-if="isZhuan" class="posia bacf radius10 xial-box">
|
||
<view class="pad-zy20 xial-item-box">
|
||
<view @tap="chooseXia(indexl)" :class="xialCurrent==indexl?'pcol pbord':''" v-for="(iteml,indexl) in xialone" :key="indexl">{{iteml.title}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class=" disac pad-s32">
|
||
<view class="flexs mar-y20">选择医生</view>
|
||
<view @tap="openXial(1)" class="disjbac width100 radius10 pad-zy20 xiala posir">
|
||
<view>{{categoryT}}</view>
|
||
<image :class="isZhuanT?'zhuan':'nozhuan'" src="/static/public/sanj.png" mode="aspectFill"></image>
|
||
<view v-if="isZhuanT" class="posia bacf radius10 xial-box">
|
||
<view class="pad-zy20 xial-item-box">
|
||
<view @tap="chooseXiaT(indext)" :class="xialCT==indext?'pcol':''" v-for="(itemt,indext) in xialTwo" :key="indext">{{itemt}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- 预约日期 -->
|
||
<view class="mar-s20 mar-x30">预约日期</view>
|
||
<scroll-view scroll-x >
|
||
<view class="disac">
|
||
<view @tap="chooseTime(index)" class="disjcac fc flexs radius20 mar-y20 yutime borbot-df" :class="item.status==0?'bcdb col3':'colc'" :style="{background:timeCurrent==index?publicColor:'',border:timeCurrent==index?`2rpx solid ${publicColor}`:''}" v-for="(item,index) in dataList" :key="index">
|
||
<view :class="timeCurrent==index?'colf':'col3'" class="bold fon28">{{item.title}}</view>
|
||
<view :class="timeCurrent==index?'colf':''" class="fon26 mar-s10">{{item.time}}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 时间段 -->
|
||
<view class="mar-s20 mar-x10">时 间 段</view>
|
||
<view class="disjb fw">
|
||
<view @tap="chooseTD(indextd)" :style="{background:itemtd.tdStatus?publicColor:'',border:itemtd.tdStatus?`2rpx solid ${publicColor}`:''}" :class="itemtd.num==0?'bcdb':''" class="tc radius10 mar-x30 col3 timed borbot-df" v-for="(itemtd,indextd) in dataTD" :key="indextd">
|
||
<view :class="itemtd.tdStatus?'colf':''">{{itemtd.ttime}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 联系人 -->
|
||
<view class="disac mar-s30">
|
||
<view class="mar-y20 flexs titlel">联 系 人</view>
|
||
<view class="width100 radius10 pad-zy20 borbot-cc height-68">
|
||
<input v-model="lname" maxlength="10" class="fon28 height-68" type="text" placeholder="请填写联系人姓名"/>
|
||
</view>
|
||
</view>
|
||
<!-- 联系方式 -->
|
||
<view class="disac mar-s20">
|
||
<view class="mar-y20 flexs titlel">联系方式</view>
|
||
<view class="width100 radius10 pad-zy20 borbot-cc height-68">
|
||
<input v-model="lphone" maxlength="11" class="fon28 height-68" type="text" placeholder="请输入联系电话"/>
|
||
</view>
|
||
</view>
|
||
<!-- 留言信息 -->
|
||
<view class="dis mar-s20">
|
||
<view class="mar-y20 flexs mar-s20 titlel">留言信息</view>
|
||
<view class="width100 radius10 pad20 borbot-cc" style="height: 300rpx;">
|
||
<textarea v-model="lmsg" class="fon28" maxlength="500" style="height: 300rpx;width: auto;" placeholder="请填写内容"/>
|
||
</view>
|
||
</view>
|
||
<!-- 立即提交底部按钮 -->
|
||
<view @tap="submit" class="fon30 radius20 tc colf bold0 btnl" :style="{background:publicColor}">{{btnCon}}</view>
|
||
</view>
|
||
<!-- 弹框 -->
|
||
<pu-po :isShowT="isShowT" :isCenter="true" :contentVal="'提交成功！等待审核'" :comfrimVal="'好的'" @comfirmev="comfirmev"></pu-po>
|
||
</view>
|
||
<!-- 底部客服 -->
|
||
<public-customer :nright="20"></public-customer>
|
||
<!-- 用户信息授权，手机号授权 -->
|
||
<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
timeCurrent:0,
|
||
dataList:[],//日期
|
||
dataTD:[],//时间段
|
||
isShowT:false,
|
||
lname:'',//联系人姓名
|
||
lphone:'',//联系方式
|
||
lmsg:'',//留言信息
|
||
isZhuan:false,
|
||
xialCurrent:0,
|
||
xialone:[],
|
||
category:'',
|
||
categoryT:'',
|
||
isZhuanT:false,
|
||
xialCT:0,
|
||
xialTwo:['杨幂','周星驰'],
|
||
type_id:'',//预约类别ID
|
||
gday:'',//日期
|
||
dtId:[],//暂存禁选时间段ID
|
||
zanTimeD:[],//暂存时间段
|
||
zanDay:[],//暂存日期
|
||
dangId:'',//当前预约时间段ID
|
||
btnCon:'立即提交'
|
||
}
|
||
},
|
||
computed: {
|
||
// 主题颜色
|
||
publicColor() {
|
||
return this.$store.state.publicColor
|
||
},
|
||
statusHeight() {
|
||
return this.$store.state.statusHeight
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.category = this.xialone[0]
|
||
this.categoryT = this.xialTwo[0]
|
||
if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
|
||
this.checkZParmas();
|
||
this.lphone = uni.getStorageSync('phone');
|
||
}
|
||
},
|
||
methods: {
|
||
gtimeD(id,gday){
|
||
this.$requst.post('user/appointment-period-full',{type_id:id,day:gday}).then(res=>{
|
||
// console.log('查询预约分类某天已约满的时间段：',res);
|
||
if(res.code==0){
|
||
this.dtId = res.data
|
||
this.dataTD = []
|
||
if(this.dtId.length!=0){
|
||
this.zanTimeD.forEach((item,index)=>{
|
||
let newNum = 1
|
||
let newTdStatus = false
|
||
this.dtId.forEach(item1=>{
|
||
if(item.id==item1.id){
|
||
newNum = 0
|
||
newTdStatus = false
|
||
}
|
||
})
|
||
let tdObj = {
|
||
id:item.id,
|
||
ttime:item.ttime,
|
||
num:newNum,
|
||
status:item.status,
|
||
tdStatus:newTdStatus
|
||
}
|
||
this.dataTD.push(tdObj)
|
||
})
|
||
} else {
|
||
this.zanTimeD.forEach(item=>{
|
||
let tdObj = {
|
||
id:item.id,
|
||
ttime:item.ttime,
|
||
num:1,
|
||
status:item.status,
|
||
tdStatus:false
|
||
}
|
||
this.dataTD.push(tdObj)
|
||
})
|
||
}
|
||
}
|
||
},error=>{})
|
||
},
|
||
checkZParmas(){//查询参数
|
||
this.$requst.post('user/appointment-parameters',{page:1,size:20}).then(res=>{
|
||
// console.log('查询自主预约列表：',res);
|
||
if(res.code==0){
|
||
this.gtimeD(res.data.types[0].id,res.data.days[0].day)
|
||
// 预约类别
|
||
if(res.data.types.length!=0){
|
||
res.data.types.forEach(item=>{
|
||
let ycateObj = {
|
||
id:item.id,
|
||
title:item.title,
|
||
max:item.max
|
||
}
|
||
this.xialone.push(ycateObj)
|
||
})
|
||
this.type_id = this.xialone[0].id
|
||
this.category = this.xialone[0].title
|
||
}
|
||
//预约日期
|
||
if(res.data.days.length!=0){
|
||
this.gday = res.data.days[0].day
|
||
this.zanDay = res.data.days
|
||
res.data.days.forEach(item=>{
|
||
let arr = item.day.split('-')
|
||
let newDay = arr[1]+'月'+arr[2]+'日'
|
||
let dayObj = {
|
||
title:item.week,
|
||
time:newDay,
|
||
status:item.status
|
||
}
|
||
this.dataList.push(dayObj)
|
||
})
|
||
}
|
||
// 时间段
|
||
if(res.data.times.length!=0){
|
||
res.data.times.forEach((item,index)=>{
|
||
let tdObj = {
|
||
id:item.id,
|
||
ttime:item.name,
|
||
status:item.status,
|
||
}
|
||
// this.dataTD.push(tdObj)
|
||
this.zanTimeD.push(tdObj)
|
||
})
|
||
}
|
||
|
||
}
|
||
},error=>{})
|
||
},
|
||
submit(){
|
||
if(!this.lname){
|
||
this.$toolAll.tools.showToast('请输入联系人姓名')
|
||
} else if(!this.lphone){
|
||
this.$toolAll.tools.showToast('请输入联系电话')
|
||
} else if(this.$toolAll.tools.isPhone(this.lphone)){
|
||
this.$toolAll.tools.showToast('请输入正确的联系电话')
|
||
} else if(!this.dangId){
|
||
this.$toolAll.tools.showToast('请选择时间段')
|
||
} else {
|
||
let parmas = {
|
||
type_id:this.type_id,//预约类型ID
|
||
day:this.gday,//预约日期，如：2021-08-11
|
||
period_id:this.dangId,//预约时间段ID
|
||
user_name:this.lname,//联系人姓名
|
||
user_phone:this.lphone,//联系人电话
|
||
remarks:this.lmsg//预约留言信息，（500字以内）
|
||
}
|
||
if(this.btnCon=='立即提交'){
|
||
this.btnCon = "正在提交..."
|
||
this.$requst.post('user/appointment-apply',parmas).then(res=>{
|
||
// console.log('提交预约申请：',res);
|
||
if(res.code==0){
|
||
this.isShowT = true
|
||
wx.requestSubscribeMessage({
|
||
tmplIds: ['uvGd7RqaegheGU-uVxR-uM3y2MadZeMOHdQaNiiWm8U'],
|
||
success: (res)=> {
|
||
console.log('res',res);
|
||
this.isShowT = true
|
||
}
|
||
})
|
||
} else {
|
||
this.btnCon = "立即提交"
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
},error=>{})
|
||
}
|
||
}
|
||
},
|
||
comfirmev(){
|
||
this.isShowT = false
|
||
uni.navigateBack({delta:1})
|
||
},
|
||
goYu(){//去预约
|
||
uni.navigateTo({
|
||
url:''
|
||
})
|
||
},
|
||
chooseTime(index){
|
||
if(this.dataList[index].status!=0){
|
||
this.timeCurrent = index
|
||
this.gday = this.zanDay[index].day
|
||
this.gtimeD(this.type_id,this.gday)
|
||
}
|
||
},
|
||
chooseTD(index){//时间段选择事件
|
||
if(this.dataTD[index].num!=0){
|
||
this.dangId = this.zanTimeD[index].id
|
||
this.dataTD.forEach(item=>{//发现为true的改为false，即控制单选，注释就表示多选
|
||
if(item.tdStatus==true) item.tdStatus = false
|
||
})
|
||
this.dataTD[index].tdStatus = !this.dataTD[index].tdStatus
|
||
}
|
||
},
|
||
openXial(index){
|
||
if(index==0) {
|
||
this.isZhuanT = false
|
||
this.isZhuan = !this.isZhuan
|
||
}
|
||
if(index==1) {
|
||
this.isZhuan = false
|
||
this.isZhuanT = !this.isZhuanT
|
||
}
|
||
},
|
||
chooseXia(index){//预约类别选择事件
|
||
this.xialCurrent = index
|
||
this.category = this.xialone[index].title
|
||
this.type_id = this.xialone[index].id
|
||
this.gtimeD(this.type_id,this.gday)
|
||
},
|
||
chooseXiaT(index){
|
||
this.xialCT = index
|
||
this.categoryT = this.xialTwo[index]
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|