yuanqu_ui/pages/order/come.vue

<template>
  <view>
	  <!-- 顶部选填情况 -->
	<step-bar :steps="steps" :datainfo="datainfo" :fixeda="fixedflag" :reservatType="yktypes"></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)">

				<!-- <block v-if="showflag"> -->
					<view class="yttit" v-if="ite.val!=2&&ite.val!=3">{{ite.tit}}</view>
					<view class="ytsbox boxb" v-if="ite.val==0" >
						<!-- 日历 -->
						<lunc-calendar ref="calendar" :showLunar="false" :configWeek="configWeek" :configHoliday="configHoliday" :firstDayOfWeek="firstDayOfWeek" :showMonthBg="false" :showShrink="true" :signList="signList"
							@dayChange="dayChange" weekType="" @monthChange="monthChange" @getIsSelDayFn="getIsSelDayFn" @shrinkClick="shrinkClick">
						</lunc-calendar>
						<view class="ytime">
							<view class="ytimea">
								<view class="ytimel">选择时间</view>
								<view class="lread" @click="getTimeFn(1)">
									<view class="lreadl">
										<image :src="choseimg" v-if="timeType==1"></image>
										<image :src="nchoseimg" v-else></image>
									</view>
									<view class="tit">上午</text></view>
								</view>
								<view class="lread" @click="getTimeFn(2)">
									<view class="lreadl">
										<image :src="choseimg" v-if="timeType==2"></image>
										<image :src="nchoseimg" v-else></image>
									</view>
									<view class="tit">下午</text></view>
								</view>
							</view>
							<view class="ytimeb">
								<view class="list" :class="[ite.reservatConfigStatus=='Y'?'box3':'box1',timeid==ite.reservatConfigTimeId?'box2':'']" v-for="(ite,idx) in timeList" :key="idx" @click="getChose(ite)">
									<view class="tit">{{typeFn(ite.reservatConfigTimeBegin)}}-{{typeFn(ite.reservatConfigTimeEnd)}}</view>
									<view class="txt">{{ite.reservatConfigStatus=='Y'?'可预约':'已约满'}}</view>
								</view>
							</view>
						</view>
					</view>
					
					<view class="ytsbox" v-if="ite.val==1" >
						<uni-forms-item label="人员类型" required name="visitName">
							<view class="flexc ytchose">
								<view class="lread" @click="yktypes=1">
									<view class="lreadl">
										<image :src="choseimg" v-if="yktypes==1"></image>
										<image :src="nchoseimg" v-else></image>
									</view>
									<view class="tit">团队</text></view>
								</view>
								<view class="lread" @click="yktypes=2">
									<view class="lreadl">
										<image :src="choseimg" v-if="yktypes==2"></image>
										<image :src="nchoseimg" v-else></image>
									</view>
									<view class="tit">散客</text></view>
								</view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="单位名称" required name="visitUnitName" v-if="yktypes==1">
							<uni-easyinput :inputBorder="false"  v-model="datainfo.visitUnitName" placeholder="请输入单位名称">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="参观人数" required >
							<view class=" ytchose">
								<view class="flexc">
									<image :src="downimg" class="numbtn" @click="_calcValue('minus')"></image>
										<input  type="number"	v-model="inputValue" class="numinp" />
									<image :src="upimg" class="numbtn" @click="_calcValue('plus')"></image>
								</view>
								
							</view>
							</uni-easyinput>
						</uni-forms-item>
						<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 label="是否接待" required name="visitName" v-if="yktypes==1">
							<view class="flexc ytchose">
								<view class="lread" @click="getisReceptionFn">
									<view class="lreadl">
										<image :src="choseimg" v-if="isReception=='Y'"></image>
										<image :src="nchoseimg" v-else></image>
									</view>
									<view class="tit">是</text></view>
								</view>
								<view class="lread" @click="isReception='N'">
									<view class="lreadl">
										<image :src="choseimg" v-if="isReception=='N'"></image>
										<image :src="nchoseimg" v-else></image>
									</view>
									<view class="tit">否</text></view>
								</view>
							</view>
						</uni-forms-item>
						</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>
				<!-- </block> -->
				
				
				
			</view>
			
		</uni-forms>
		
		<view class="ybtn flexcc" @click="getSubmit">提交预约</view>
		<!-- <view class="ybtn btn1 flexcc" v-else>提交预约</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 "@/components/order/stepbar.vue"
	import luncCalendar from "@/components/lunc-calendar/lunc-calendar.vue"
	import {getCalendarList,getReservatAdd,getConfigList} from "@/api/mine/order.js"
  export default {
	  components:{stepBar,luncCalendar},
	data(){
		return{
			
			choseimg:require("@/static/images/order/comes/chose.png"),
			nchoseimg:require("@/static/images/order/comes/nchosec.png"),
			downimg:require("@/static/images/order/comes/down.png"),
			upimg:require("@/static/images/order/comes/add.png"),
			checkflag:false,
			yktypes:1,//人员类型 1:团队 2:散客
			isReception:'Y',//是否需要接待 N:不需要 Y:需要
			//status:  填写状态  0:未填   1:在填  2:填完
			steps:[{tit:'预约时间',status:1,val:0},{tit:'信息登记',status:0,val:1},{tit:'等待审核',status:0,val:2},{tit:'审核结果',status:0,val:3}],
			fixedflag:true,
			rules: {
				// 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,
			disabled:false,
			intype:0,
			datainfo:{},
			inputValue:1,
			step:1,
			min:1,
			signList: [],
			configWeek:[],
			configHoliday:'Y',
			firstDayOfWeek:'sunday',
			dayflag:false,
			month:'',
			year:'',
			kaTime:'',
			changetime:'',//改变的日期
			timeday:'',//选择的日期
			visitDate:'',
			showflag:false,
			id:'',
			timeType:1,//1: AM 2: PM",
			timeList:[],//时间段
			timeid:'',
			jdryflag:true,//当前时间段是否能接待
		}
	},
	watch:{
		intype(val){
			var data=this.datainfo;
			if(val!=0){
				if(data.visitDate&&data.visitTime) this.steps[0].status=2;
				else if(!data.visitDate||!data.visitTime) this.steps[0].status=0;
			}
			if(val!=1){
				if(this.yktypes==1){
					if(this.inputValue&&data.visitPhone&&data.visitName&&data.visitUnitName) this.steps[1].status=2;
					else if(!this.inputValue||!data.visitPhone||!data.visitName||!data.visitUnitName) this.steps[1].status=0;
				}else{
					if(this.inputValue&&data.visitPhone&&data.visitName) this.steps[1].status=2;
					else if(!this.inputValue||!data.visitPhone) this.steps[1].status=0;
				}
				
			}
		}
	},
	onLoad: function(e) {
		// this.id=e.id;
		this.id='881659';
		this.time();
		this.getCalendarList();
		this.getConfigList()
	},
	methods:{
		_calcValue(type) {
			// if (this.disabled) {
			// 	return;
			// }
			const scale = this._getDecimalScale();
			let value = this.inputValue * scale;
			let step = this.step * scale;
			if (type === "minus") {
				value -= step;
				if (value < (this.min * scale)) {
					return;
				}
				if (value > (this.max * scale)) {
					value = this.max * scale
				}
			}
		
			if (type === "plus") {
				value += step;
				if (value > (this.max * scale)) {
					return;
				}
				if (value < (this.min * scale)) {
					value = this.min * scale
				}
			}
		
			this.inputValue = (value / scale).toFixed(String(scale).length - 1);
		},
		_getDecimalScale() {
		
			let scale = 1;
			// 浮点型
			if (~~this.step !== this.step) {
				scale = Math.pow(10, String(this.step).split(".")[1].length);
			}
			return scale;
		},
		typeFn(data){
			return data?data.substring(0,5):''
		},
		getChose(ite){
			if(ite.reservatConfigStatus=='Y'){
				this.timeid=ite.reservatConfigTimeId;
				this.datainfo.visitTime=ite.reservatConfigTimeBegin+'-'+ite.reservatConfigTimeEnd;
				this.datainfo.reservatConfigTimeId=ite.reservatConfigTimeId;
				// 判断当前时间段是否有接待员
				if(ite.receptionPersonnelType=='N'){
					this.jdryflag=true
				}else{
					this.jdryflag=false
					this.isReception='N'
				}
				
			}
		},
		getisReceptionFn(){
			if(this.jdryflag){
				this.isReception='Y'
			}else{
				this.$toast('当前时间段暂无预约人员')
			}
		},
		getTimeFn(type){
			if(type==1){
				this.timeType=1;
				this.timeList=this.amList;
			}else{
				this.timeType=2;
				this.timeList=this.pmList;
			}
		},
		getConfigList(){
			getConfigList().then(res=>{
				if(res.code==200){
					if(res.rows&&res.rows.length){
						var week=res.rows[0].reservatConfigWeek;
						var weeka=week.split(',');
						var weekarr=[]
						weeka.forEach(ite=>{
							weekarr.push(Number(ite))
						})
						this.configWeek=weekarr;
						this.configHoliday=res.rows[0].reservatConfigHoliday;
					}
				}
			})
		},
		getCalendarList(itime){
			var time=this.kaTime
			if(itime){
				time=itime
			}
			var params={
				reservatConfigDate:time
			}
			getCalendarList(params).then(res=>{
				if(res.code==200){
					if(res.data&&res.data.signList){
						this.signList=res.data.signList;
					}
				}
			})
		},
		getInFn(idx){
			this.intype=idx;
			this.steps[idx].status=1
		},
		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.year=y;
			this.month=m;
		},
		clearboth(){
			// var time=this.datainfo.visitDate
			this.datainfo={};
			this.steps[0].status=1;
			this.steps[1].status=0;
			this.steps[2].status=0;
			this.steps[3].status=0;
			this.timeid='';
			this.inputValue=1;
			this.timeType=1;
			this.timeday='';
			this.timeList=[];
			this.jdryflag=true
			// this.datainfo.visitDate=time;
			// 获取预约时间
			this.signList=[];
			this.getCalendarList(this.changetime)
		},
		getSubmit(){
			var that=this;
			// that.clearboth()
			// console.log(this.datainfo)
			// return
			if(!this.dayflag){
				this.$toast('当前日期不可预约')
				return
			}
			if(!this.datainfo.visitDate){
				this.$toast('请选择预约日期')
				return
			}
			if(!this.datainfo.visitTime){
				this.$toast('请选择时间')
				return
			}
			var str='预约成功'
			if(this.yktypes==1){
				str='提交成功,请等待审核'
				if(!this.datainfo.visitUnitName){
					this.$toast('请输入单位名称')
					return
				}
				if(this.inputValue==0){
					this.$toast('请输入参观人数')
					return
				}
			}else{
				if(this.inputValue==0){
					this.$toast('请输入参观人数')
					return
				}
			}
			if(this.inputValue<0){
				this.$toast('请输入正确的参观人数')
				return
			}
			if(!this.datainfo.visitName){
				this.$toast('请输入联系人')
				return
			}
			var phone=this.datainfo.visitPhone
			if(!phone){
				this.$toast('请输入联系电话')
				return
			}
			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 (phone && !regphone.test(phone)) {
				that.$toast("请输入正确的手机号")
				return
			}
			// that.clearboth()
			// console.log(this.datainfo)
			// return
			this.$refs.form.validate().then(res => {
				var params={};
				params=this.datainfo
				if(this.yktypes==1){
					params.isReception=this.isReception;
				}else{
					params.isReception=''
					params.visitUnitName=''
				}
				params.visitNum=this.inputValue;
				params.reservatType=this.yktypes;
				// console.log(params)
				// return
				getReservatAdd(params).then(res=>{
					if(res.code==200){
						this.$toast(str)
						setTimeout(function(){
							// 团队审核
							if(that.yktypes==1){ //团队
								that.clearboth()
							}else{ //散客
								// 个人直接跳详情页
								var id=res.data
								that.$tab.navigateTo('/a/code?id='+id)
							}
						},1500)
					}else{
						this.$toast(res.msg)
					}
				})
			})
			
		},
		dayChange(e){
			// if(e.daySign&&e.daySign.length){
			// 	var daySign=e.daySign[0];
			// 	this.amList=daySign.amList||[];
			// 	this.pmList=daySign.pmList||[];
			// 	if(this.reservatConfigType==1){
			// 		this.timeList=this.amList;
			// 	}else if(this.reservatConfigType==2){
			// 		this.timeList=this.pmList;
			// 	}
			// 	this.timeid='';
			// 	this.datainfo.visitDate=daySign.date;
			// 	this.datainfo.visitTime='';
			// }
		},
		monthChange(e){
			var y=e.year;
			var m=e.month;
			if(y==this.year&&m==this.month){
				this.getCalendarList()
				this.changetime='';
			}else{
				var time=y + '-' + m + '-' + '01'
				this.changetime=time
				this.getCalendarList(time)
			}
		},
		// 选中的日期
		getIsSelDayFn(e){
			if(e.sign&&e.sign.length&&this.timeday!=e.date){
				this.timeday=e.date;
				if(this.configWeek.indexOf(e.week)!=-1 || e.isHoliday&&this.configHoliday=='N'){
					this.dayflag=false;
				}else{
					if(e.sign&&e.sign.length){
						var sign=JSON.parse(JSON.stringify(e.sign))
						var signes=JSON.parse(JSON.stringify(sign[0]));
						var amList=JSON.parse(JSON.stringify(signes.amList))||[];
						var pmList=JSON.parse(JSON.stringify(signes.pmList))||[];
						this.jdryflag=true;
						if(this.timeType==1){
							this.timeList=amList;
						}else{
							this.timeList=pmList;
						}
						this.amList=amList
						this.pmList=pmList
						this.timeid='';
						var y=e.year;
						var m=e.month;
						var d=e.day;
						this.datainfo.visitDate=y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
						this.datainfo.visitTime='';
						if(signes.title=='可预约'){
							this.dayflag=true;
						}else{
							this.dayflag=false;
						}
						
					}	
				}
			}
			
		},
		shrinkClick(e){
			console.log(e,3)
		},
	},
	
  }
</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-bottom: 46rpx;}
.ytforms{
	.yttit{font-size: 30rpx;font-weight: bold;background-color: #f1f1f1;
color: $com-cd3;min-height: 76rpx;display: flex;align-items: center;padding: 0rpx 60rpx;box-sizing: border-box;position: relative;
		&::before{content: '';width: 6rpx;height: 34rpx;background: $com-cd3;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;}
		
		.ytime{padding:60rpx 0 0;
			.ytimea{display: flex;align-items: center;margin-bottom: 32rpx;
				.ytimel{font-size: 30rpx;font-weight: bold;color: #161616;flex:1;}
			}
			.ytimeb{
				display: flex;align-items: center;flex-wrap: wrap;
				.list{
					width: 216rpx;
					height: 120rpx;
					display: flex;align-items: center;justify-content: center;flex-direction: column;
					border-radius:6rpx;margin-bottom: 30rpx;margin-right: 18rpx;box-sizing: border-box;
					&:nth-of-type(3n){margin-right: 0;}
					&.box1{background: #F3F3F3;
						view{color: #AAAAAA;}
					}
					&.box2{border: 1px solid $com-cd3 !important;
						.tit{color: $com-cd3 !important;}
					}
					&.box3{border: 1px solid #DADADA;
					}
					view{font-size: 28rpx;font-weight: 500;color: #161616;font-family: PingFang SC;}
					.tit{margin-bottom: 6rpx;}
				}
			}
		}
		.ytchose{flex: 1; display: flex;align-items: center;justify-content: flex-end;
			.numbtn{width: 32rpx;height: 32rpx;flex: 0 0 auto;}
			.numinp{margin: 0 28rpx;width: 124rpx;height: 56rpx;background: #FFFFFF;border: 2rpx solid #D32C26;border-radius: 2rpx;text-align: center;box-sizing: border-box;}
		}
	}
	
	
	.lread{
		display: flex;align-items: flex-start;justify-content: center;margin-left: 40rpx;
		.lreadl{padding-top: 4rpx;
			image{width: 28rpx;height: 28rpx;margin-right: 26rpx;}
		}
		.tit{font-size: 28rpx;font-weight: 500;color: #666666;
		}
	}
}
// 按钮
	.ybtn{width: 684rpx;height: 90rpx;background: $com-cd3;border-radius: 42rpx;margin: 60rpx auto 0;font-size: 32rpx;font-weight: 500;color: #FFFFFF;
		&.btn1{background-color: #9a9c9e;}
	}



</style>