301 lines
9.8 KiB
Vue
301 lines
9.8 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<!-- 状态栏 -->
|
|||
|
|
<status-nav :titleVal="'自主预约'" :statusTitle="true"></status-nav>
|
|||
|
|
<!-- 自定义二级分类 -->
|
|||
|
|
<!-- 列表 -->
|
|||
|
|
<view :style="{paddingTop: statusHNH+'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>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusHNH:uni.getStorageSync('statusHNH'),
|
|||
|
|
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
|||
|
|
timeCurrent:0,
|
|||
|
|
dataList:[],//日期
|
|||
|
|
dataTD:[],//时间段
|
|||
|
|
isShowT:false,
|
|||
|
|
category:'',
|
|||
|
|
lname:'',//联系人姓名
|
|||
|
|
lphone:'',//联系方式
|
|||
|
|
lmsg:'',//留言信息
|
|||
|
|
isZhuan:false,
|
|||
|
|
xialCurrent:0,
|
|||
|
|
xialone:['植发','脱发'],
|
|||
|
|
categoryT:'',
|
|||
|
|
isZhuanT:false,
|
|||
|
|
xialCT:0,
|
|||
|
|
xialTwo:['杨幂','周星驰'],
|
|||
|
|
type_id:'',//预约类别ID
|
|||
|
|
gday:'',//日期
|
|||
|
|
dtId:[],//暂存禁选时间段ID
|
|||
|
|
zanTimeD:[],//暂存时间段
|
|||
|
|
zanDay:[],//暂存日期
|
|||
|
|
dangId:'',//当前预约时间段ID
|
|||
|
|
btnCon:'立即提交'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.$toolAll.tools.isLogin()
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.category = this.xialone[0]
|
|||
|
|
this.categoryT = this.xialTwo[0]
|
|||
|
|
this.checkZParmas()
|
|||
|
|
// this.$toolAll.tools.weekDate()
|
|||
|
|
},
|
|||
|
|
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){
|
|||
|
|
this.type_id = res.data.types[0].id
|
|||
|
|
res.data.types.forEach(item=>{
|
|||
|
|
let ycateObj = {
|
|||
|
|
id:item.id,
|
|||
|
|
title:item.title,
|
|||
|
|
max:item.max
|
|||
|
|
}
|
|||
|
|
this.xialone.push(ycateObj)
|
|||
|
|
})
|
|||
|
|
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>
|