zhihuixiaoyuan2-ui/work/pages/order/addorde.vue

<template>
  <view>
	  <!-- 顶部选填情况 -->
	<step-bar :steps="steps" :datainfo="datainfo" :fixeda="fixedflag"></step-bar>
	<view class="ytbox" :style="fixedflag?'padding-top: 152rpx;':''">
		<uni-forms ref="form" class="ytforms" :rules="rules" :modelValue="datainfo">
			<view v-for="(ite,idx) in steps" :key="idx" @click="getInFn(ite.val)">
				<!-- <view class="yttit" v-if="ite.val==0" >{{ite.tit}}</view> -->
				<!-- <view class="ytsbox" v-if="ite.val==0" >
					<uni-forms-item label="姓名" required name="teacherName">
						<uni-easyinput :inputBorder="false" v-model="datainfo.teacherName" placeholder="来访者真实姓名">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="手机号" required name="teacherPhone">
						<uni-easyinput :inputBorder="false" @blur.stop="getBlur" type="number" v-model="datainfo.teacherPhone" placeholder="请确保手机号真实准确，以便接收短信通知">
						</uni-easyinput>
					</uni-forms-item>
				</view> -->
				<!-- 选完老师才有下面的信息 -->
				
					<view class="yttit" v-if="ite.val!=0">{{ite.tit}}</view>
					<view class="ytsbox boxb" v-if="ite.val==1" >
						<!-- 日历 -->
						<lunc-calendar ref="calendar" :showLunar="false" :firstDayOfWeek="firstDayOfWeek" :showMonthBg="false" :showShrink="true" :signList="signList"
							@dayChange="dayChange" weekType="" @monthChange="monthChange" @shrinkClick="shrinkClick">
						</lunc-calendar>
					</view>
					<view class="ytsbox boxa" v-if="ite.val==2" >
						<view class="ytst flext">
							<image :src="tipimg"></image>工作日上午
							<block v-if="amBegin">{{amBegin}}-{{amEnd}} </block>
							<block v-else>暂无预约时间</block>
							; 下午
							<block v-if="pmBegin">{{pmBegin}}-{{pmEnd}}</block>
							<block v-else>暂无预约时间</block>
						</view>
						<view class="flexc ytime">
							<view class="timebtn">
								<picker range-key='dictLabel' :disabled="disabled"  :value="timeidx" :range="timerange" @change="bindTimeChangea">
									<view class="flex1 " :class="timetype?'co16 fw f16':'coa f14'">{{timetype||'请选择'}}</view>
								</picker>
							</view>
							<image :src="rowline" class="rowline"></image>
							<view class="timebtn" >
								<picker mode ="time" :start="start" :end="endtime?endtime:end" :value="starttime" @change="bindTimeChangeb">
									<view class="flex1 " :class="starttime?'co16 fw f16':'coa f14'">{{starttime||'请选择时间'}}</view>
								</picker>
							</view>
							<image :src="rowline" class="rowline"></image>
							<view class="timebtn" >
								<picker mode ="time" :start="starttime?starttime:start" :end="end" :value="endtime" @change="bindTimeChangec">
									<view class="flex1" :class="endtime?'co16 fw f16':'coa f14'">{{endtime||'请选择时间 '}}</view>
								</picker>
							</view>
							
						</view>
					</view>
					<view class="ytsbox" v-if="ite.val==3" >
						<uni-forms-item label="姓名" required name="visitName">
							<uni-easyinput :inputBorder="false" v-model="datainfo.visitName" placeholder="来访者真实姓名">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="手机号" required name="visitPhone">
							<uni-easyinput :inputBorder="false" type="number" v-model="datainfo.visitPhone" placeholder="请确保手机号真实准确，以便接收短信通知">
							</uni-easyinput>
						</uni-forms-item>
						
						</uni-forms-item>
						<uni-forms-item label="身份证号"  name="visitIdCard">
							<uni-easyinput :inputBorder="false" type="number" v-model="datainfo.visitIdCard" placeholder="选填"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="来访事由" required name="visitReason">
							<view class="matab">
								<view class="list" :class="checkidx==idx?'act':''" v-for="(ite,idx) in matterlist" :key='idx' @click="getCheck(idx)">{{ite.tit}}</view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="补充事由"  name="visitRemark">
							<textarea placeholder="若无选项，可补充填写"  v-model="datainfo.visitRemark" placeholder-style="color:#aaa;" :auto-height="autoHeight"  ></textarea>
						</uni-forms-item>
					</view>
				
				
				
				
			</view>
			
		</uni-forms>
		
		<view class="ybtn flexcc" @click="getSubmit" v-if="showflag">提交预约</view>
		<view class="ybtn btn1 flexcc" v-else>提交预约</view>
		<view class="tipbox">
			<view class="tiptit flexc">
				<image :src="tipimg"></image>温馨提示：
			</view>
			<view class="tiptxt">1、每日来访人数有限制，周六、周日不可预约</view>
			<view class="tiptxt">2、请务必确保您与被访者的手机号码准确无误；</view>
			<view class="tiptxt">3、预约后需得到被访者同意方可扫码进入，请注意短信接收通畅。</view>
		</view>
		  <!-- 日历 -->
		  
		  <!-- 来访时间 -->
		  
		  <!-- 来访者信息 -->
		  <!-- <picker range-key='dictLabel'  :value="xkindex" :range="classval" @change='bindDateChangeb'>
		  	<uni-forms-item label="班级" required name="className">
		  		<view class="f16  flex1 txr" :class="datainfo.className?'co16':'coa'">
		  			{{datainfo.className||"请选择班级"}}
		  		</view>
		  	</uni-forms-item>
		  </picker> -->
		  <!-- 被访者信息 -->
		  
	</view>
  </view>
</template>

<script>
	import stepBar from "@/work/components/stepbar/stepbar.vue"
	import luncCalendar from "@/work/components/lunc-calendar/lunc-calendar.vue"
	import {getDictionaryFn} from '@/api/mine/register.js'
	import {getSubscribe,getReservatAdd} from "@/api/mine/order.js"
  export default {
	  components:{stepBar,luncCalendar},
	data(){
		return{
			tipimg:require('@/work/static/order/tip.png'),
			rowline:require('@/work/static/order/rowline.png'),
			//status:  填写状态  0:未填   1:在填  2:填完
			steps:[{tit:'被访信息',status:1,val:0,show:false},{tit:'来访日期',status:0,val:1,show:true},{tit:'来访时间',status:0,val:2,show:true},{tit:'来访信息',status:0,val:3,show:true}],
			fixedflag:true,
			rules: {
				teacherName: {rules: [{required: true,errorMessage: '请输入被访者姓名',}]},
				teacherPhone: {rules: [{required: true,errorMessage: '请输入被访者联系方式'},{pattern:"^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$",errorMessage: '请输入正确的联系方式'}]},
				visitName: {rules: [{required: true,errorMessage: '请输入来访者姓名',}]},
				visitPhone: {rules: [{required: true,errorMessage: '请输入来访者联系方式'},{pattern:"^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$",errorMessage: '请输入正确的联系方式'}]},
			},
			autoHeight:true,
			matterlist:[{tit:'接送学生',val:0},{tit:'办事',val:1},{tit:'会议',val:2},{tit:'其他',val:3},],
			timerange:[{dictLabel:'上午',dictValue:'0'},{dictLabel:'下午',dictValue:'1'}],
			disabled:false,
			timeidx:0,
			timetype:'',
			intype:0,
			datainfo:{
				'teacherName':'',
				'teacherPhone':'',
				'visitName':'',
				'visitPhone':'',
				'visitIdCard':'',
				'visitReason':'',
				'visitRemark':'',
			},
			start:'',
			end:'',
			starttime:'',
			endtime:'',
			
			signList: [],
			firstDayOfWeek:'sunday',
			kaTime:'',
			visitDate:'',
			checkidx:-1,
			showflag:false,
			tenantId:'',
			amBegin:'',
			amEnd: '',
			
			pmBegin: '',
			pmEnd: '',
			id:'',
		}
	},
	watch:{
		intype(val){
			var data=this.datainfo;
			if(val!=0){
				if(data.teacherName&&data.teacherPhone) this.steps[0].status=2;
				else if(!data.teacherName&&!data.teacherPhone) this.steps[0].status=0;
			}
			if(val!=1){
				if(this.visitDate) this.steps[1].status=2;
				else if(!this.visitDate) this.steps[1].status=0;
			}
			if(val!=2){
				if(this.starttime&&this.endtime) this.steps[2].status=2;
				else if(!this.starttime&&!this.endtime) this.steps[2].status=0;
			}
			if(val!=3){
				if(data.visitName&&data.visitPhone&&data.visitReason) this.steps[3].status=2;
				else if(!data.visitName&&!data.visitPhone&&!data.visitReason) this.steps[3].status=0;
			}
		}
	},
	onLoad: function(e) {
		// this.id=e.id;
		this.id=this.$store.state.user.tenantId;
		this.datainfo.teacherPhone=this.$store.state.user.phonenumber
		this.datainfo.teacherName=this.$store.state.user.name
		this.time();
		this.init()
	},
	methods:{
		// 获取老师是否有时间
		getBlur(){
			var phone=this.datainfo.teacherPhone;
			if(phone){
				let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!regphone.test(phone)){
					this.$toast('请输入正确的手机号')
					return
				}
				this.getTime(this.kaTime)
			}	
		},
		getTime(data){
			var phone=this.datainfo.teacherPhone;
			var params={
				teacherPhone:phone,
				visitDate:data
			}
			getSubscribe(params).then(res=>{
				if(res.code==200){
					this.showflag=true;
					this.getInFn(1)
					
					this.signList=res.data.signList;
					this.starttime='';
					this.endtime='';
					var amBegin=res.data.reservatConfigTimeAmBegin;
					var amEnd=res.data.reservatConfigTimeAmEnd;
					var pmBegin=res.data.reservatConfigTimePmBegin;
					var pmEnd=res.data.reservatConfigTimePmEnd;
					this.amBegin=amBegin?amBegin.substring(0,5):'';
					this.amEnd=amEnd?amEnd.substring(0,5):'';
					this.pmBegin=pmBegin?pmBegin.substring(0,5):'';
					this.pmEnd=pmEnd?pmEnd.substring(0,5):'';
					if(amBegin&&pmBegin){
						this.timetype='上午'
						this.start=this.amBegin;
						this.end=this.amEnd;
						
					}else if(amBegin&&!pmBegin){
						this.disabled=true;
						this.timetype='上午'
						this.start=this.amBegin;
						this.end=this.amEnd;
					}else if(!amBegin&&pmBegin){
						this.disabled=true;
						this.timetype='下午'
						this.start=this.pmBegin;
						this.end=this.pmEnd;
					}
					if(res.data.signList&&res.data.signList.length){
						var newArr=res.data.signList;
						Object.keys(newArr).some((key) => {
							if (newArr[key].date == ('' + data)) {
								var tit=newArr[key].title
								if(tit=='可预约'){
									this.dayflag=true;
									this.visitDate=newArr[key].date;
									this.steps[1].status=2;
								}else{
									this.dayflag=false;
								}
								return true;
							}
						})
						
					}
				}else{
					this.showflag=false;
					this.$toast(res.msg)
				}
			})
		},
		getInFn(idx){
			this.intype=idx;
			this.steps[idx].status=1
		},
		init(){
			//来访事由
			getDictionaryFn('lf_reason').then(res=>{
				if(res.code==200){
					this.matterlist = res.data.map(v => {
						return {
							tit: v.dictLabel,
							val: v.dictValue
						}
					})
				}
			})
		},
		getCheck(idx){
			this.checkidx=idx;
			this.datainfo.visitReason=this.matterlist[idx].tit;
		},
		time() {
			var date = new Date();
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			var d = date.getDate();
			var h = date.getHours();
			var min = date.getMinutes();
			var s = date.getSeconds();
			var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
			var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
			var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
				'0' + s) : s);
			this.kaTime = yearStr
			this.getTime(yearStr)
		},
		bindTimeChangea(e){
			var val=e.detail.value;
			this.timetype=this.timerange[val].dictLabel;
			var tval=this.timerange[val].dictValue;
			if(tval==0){
				this.start=this.amBegin||'';
				this.end=this.amEnd||'';
			}else if(tval==1){
				this.start=this.pmBegin||'';
				this.end=this.pmEnd||'';
			}
			this.starttime='';
			this.endtime='';
		},
		bindTimeChangeb(e){
			var val=e.detail.value;
			this.starttime=val;
		},
		bindTimeChangec(e){
			var val=e.detail.value;
			this.endtime=val
		},
		clearboth(){
			this.datainfo={};
			this.steps[0].status=2;
			this.steps[1].status=2;
			this.steps[2].status=0;
			this.steps[3].status=0;
			
			this.disabled=false;
			this.intype=0;
			this.starttime='';
			this.endtime='';
			this.checkidx=-1;
		},
		getSubmit(){
			// this.$tab.navigateTo('/pages/order/comedetail?id=1702226196231749634')
			var that=this;
			if(!this.dayflag){
				this.$toast('当前时间不可预约')
				return
			}
			if(!this.starttime){
				this.$toast('请选择开始时间')
				return
			}
			if(!this.endtime){
				this.$toast('请选择结束时间')
				return
			}
			if(this.datainfo.visitIdCard){
				let _IDRe18 =
					/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
				let _IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
				// 校验身份证：
				if (_IDRe18.test(this.datainfo.visitIdCard) || _IDre15.test(this.datainfo.visitIdCard)) {
					
				}else{
					this.$toast('请输入正确身份证号')
					return
				}
			}
			if(!this.datainfo.visitReason){
				this.$toast('请选择来访事由')
				return
			}
			
			this.$refs.form.validate().then(res => {
				var params=this.datainfo;
				params.visitTime=this.starttime+':00'+'-'+this.endtime+':00'
				params.visitDate=this.visitDate
				params.tenantId=this.id;
				getReservatAdd(params).then(res=>{
					if(res.code==200){
						this.$toast('提交成功，请等待审核')
						setTimeout(function(){
							uni.$emit('refreshdatalist')
							uni.navigateBack({
								delta:1
							})
							// that.clearboth()
						},1500)
						
					}else{
						this.$toast(res.msg)
					}
				})
			})
			
		},
		dayChange(e){
			if(e.daySign&&e.daySign.length){
				var daySign=e.daySign[0];
				this.visitDate=daySign.date
				if(daySign.title=='可预约'){
					this.dayflag=true;
				}else{
					this.dayflag=false;
				}
			}
		},
		monthChange(e){
			var y=e.year;
			var m=e.month;
			var time=y + '-' + m + '-' + '01'
			this.getTime(time)
		},
		shrinkClick(e){
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.ytbox /deep/ .uni-forms .uni-forms-item{padding: 20rpx 16rpx 20rpx;border-bottom: 2rpx solid #E6E6E6;margin-bottom: 0;}
.ytbox /deep/ .uni-forms-item__label{flex: 0 0 auto;width: auto !important;font-size: 30rpx;font-weight: bold;position: relative;color: #343434;}
.ytbox /deep/ .uni-forms-item__label .is-required{position: absolute;right: 0;color: #F10C31;margin-top: 16rpx;}
.ytbox /deep/ uni-textarea{flex: 1;width: auto;text-align: right;}
.ytbox /deep/ .uni-textarea-placeholder{font-size: 28rpx;color: #DDDDDD !important;}
.ytbox /deep/ .uni-easyinput__placeholder-class{font-size: 28rpx;color: #DDDDDD;}
.ytbox /deep/ .uni-forms-item__content{display: flex;align-items: center;flex-direction: row;}
.ytbox /deep/ .uni-easyinput{flex: 1;text-align: right;}
.ytsbox /deep/  .uni-forms-item:last-child{border-bottom: none;}
.ytbox /deep/ .uni-easyinput__content-input{font-size: 30rpx;}
 .ytbox /deep/ .uni-forms-item__error{margin-top:20rpx;left: auto;right: 0;}
.ytbox{padding: 0rpx 0rpx 60rpx;box-sizing: border-box;min-height: auto;overflow: auto;
	.ytforms{}
	.yttit{font-size: 30rpx;font-weight: bold;background-color: #f1f1f1;
color: #161616;min-height: 76rpx;display: flex;align-items: center;padding: 0rpx 60rpx;box-sizing: border-box;position: relative;
		&::before{content: '';width: 6rpx;height: 34rpx;background: #4775EA;border-radius: 4rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 34rpx;}
	}
	.ytsbox{background-color: #ffffff;padding: 0 32rpx;
		&.boxa{padding: 24rpx 48rpx;}
		&.boxb{padding-bottom:10rpx;}
		.matab{display: flex;align-items: center;flex-wrap: nowrap;overflow: auto;position: absolute;left: 0;right: -48rpx;
			.list{min-width:126rpx;height: 56rpx;background: #F0F0F0;border-radius: 28rpx;font-size: 28rpx;font-weight: 500;
color: #666666;text-align: center;line-height: 56rpx;padding: 0 24rpx;box-sizing: border-box;margin-left:16rpx;flex: 0 0 auto;
			&.act{background-color: #4775EA;color: #ffffff;}
}
		}
		
		.ytst{font-size: 28rpx;font-weight: bold;color: #4775EA;margin-bottom: 28rpx;
			image{width: 20rpx;height: 24rpx;margin-right: 16rpx;flex: 0 0 auto;margin-top: 6rpx;}
		}
		.ytime{padding: 10rpx 0;
			.rowline{width: 64rpx;height: 20rpx;margin: 0 10rpx;flex: 0 0 auto;}
			.timebtn{flex: 1;height: 70rpx;border: 2rpx solid #4775EA;
border-radius: 14rpx;text-align: center;line-height: 70rpx;box-sizing: border-box;}
		}	
	}
	
	// 按钮
	.ybtn{width: 684rpx;height: 90rpx;background: #4775EA;border-radius: 42rpx;margin: 60rpx auto 0;font-size: 32rpx;font-weight: 500;color: #FFFFFF;
		&.btn1{background-color: #9a9c9e;}
	}
	// 提示
	.tipbox{
		padding:34rpx 50rpx 0;
		.tiptit{font-size: 26rpx;font-weight: bold;color: #343434;margin-bottom: 20rpx;
			image{width: 26rpx;height: 32rpx;margin-right: 18rpx;}
		}
		.tiptxt{font-size: 26rpx;font-weight: 500;color: #666666;}
	}
}




</style>