yuanqu_ui/pages/order/come.vue

<template>
  <view class="yybox">
	  <nav-bar navtit="来访预约"></nav-bar>
	  <view class="yydet">
		  <!-- 顶部选填情况 -->
		  <view class="flex0">
			  <step-bar :steps="barsteps" :datainfo="datainfo" :fixeda="fixedflag" ></step-bar>  
		  </view>
		<view class="ytbox">
			<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="ytsbox">
						<view class="yttit">{{ite.tit}}</view>
					
						<block  v-if="ite.val==0" >
							<!-- 日历 :configWeek="configWeek" :configHoliday="configHoliday" :firstDayOfWeek="firstDayOfWeek" :signList="signList" @monthChange="monthChange" @getIsSelDayFn="getIsSelDayFn"   @shrinkClick="shrinkClick"-->
							<lunc-calendar ref="calendar" :configWeek="configWeek" :showLunar="false"  :showMonthBg="false" :showShrink="true" 
								@dayChange="dayChange"   weekType="" >
							</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 class="ytime">
								<view class="ytimel">选择时间</view>
								<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 ytimea">
									<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> -->
						</block>
						
						<view v-if="ite.val==1" class="pt5">
							<uni-forms-item label="人数" required name="visitNum">
								<!-- <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 :inputBorder="false" type="number" v-model="datainfo.visitNum" placeholder="请输入人数">
								</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="appointmentSite">
								<!-- jluly -->
								<view class="flexc flex1">
									<picker class="pickbox" range-key='dictLabel' :disabled="disabled"  :value="adridx" :range="adrlist" @change="bindTimeChangea">
										<view class="flex1 " :class="adrtype?'co16 fw5 f14':'cod f14'">{{adrtype||'请选择'}}</view>
									</picker>
								</view>
								
							</uni-forms-item>
							<uni-forms-item label="来访事由" required name="visitReason">
								<uni-easyinput :inputBorder="false" v-model="datainfo.visitReason" 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 label="补充事由"  name="visitRemark">
								<textarea placeholder="可补充填写"  v-model="datainfo.visitRemark" placeholder-style="color:#aaa;" :auto-height="autoHeight"  ></textarea>
							</uni-forms-item>
						</view>
						<view class="pt12 pb18"  v-if="ite.val==2">
							<view class="facea flexccc" @click="getFaceFn">
								<image :src="faceimg"></image>
								<view>点击进行面容认证</view>
							</view>
							<view class="facetip">面容认证仅能由<text>林涵宇</text>本人完成</view>
							<view class="flexcc">
								<view class="flexccc facetips">
									<image :src="ftipa"></image>
									<view>避免遮挡</view>
								</view>
								<view class="flexccc facetips">
									<image :src="ftipb"></image>
									<view>光线充足</view>
								</view>
								<view class="flexccc facetips">
									<image :src="ftipc"></image>
									<view>正对手机</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				
			</uni-forms>
			
			<view class="ybtn flexcc" @click="getSubmit">确认提交</view>
		</view>
	  </view>
	  
	
  </view>
</template>

<script>
	import navBar from "@/components/toptab/navbar.vue"
	import stepBar from "@/components/order/stepbar.vue"
	import luncCalendar from "@/components/lunc-calendar/lunc-calendar.vue"
	import {getDictionaryFn} from "@/api/mine/register.js"
	import {getReservatTime,getReservatAdd,getConfigList} from "@/api/mine/order.js"
  export default {
	  components:{stepBar,luncCalendar,navBar},
	data(){
		return{
			
			tipimg:require('@/static/images/order/come/tip.png'),
			rowline:require('@/static/images/order/come/rowline.png'),
			faceimg:require('@/static/images/order/come/faceimg.png'),
			ftipa:require('@/static/images/order/come/ftipa.png'),
			ftipb:require('@/static/images/order/come/ftipb.png'),
			ftipc:require('@/static/images/order/come/ftipc.png'),
			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"),
			adrlist:[],
			adrtype:'',
			adridx:-1,
			amList:[],
			pmList:[],
			timeType:1,//1: AM 2: PM",
			timeList:[],//时间段
			timeid:'',
			//status:  填写状态  0:未填   1:在填  2:填完 {tit:'面容认证',status:0,val:2}
			barsteps:[{tit:'信息填写',status:1,val:0},{tit:'等待审核',status:0,val:1},{tit:'审核成功',status:0,val:2},{tit:'已完成',status:0,val:3}],
			steps:[{tit:'预约日期',status:1,val:0},{tit:'信息填写',status:0,val:1}],
			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:'',
			id:'',
			
			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.init()
		this.getReservatTime();
		// this.getConfigList()
	},
	methods:{
		bindTimeChangea(e){
			var val=e.detail.value;
			this.adrtype=this.adrlist[val].dictLabel
			this.datainfo.appointmentSite=this.adrlist[val].dictValue
		},
		getFaceFn(){
			this.$tab.navigateTo('/pages/order/face')
		},
		init(){
			// 记录来源
			getDictionaryFn('jluly').then(res=>{
				if(res.code==200){
					this.adrlist = res.data.map(v => {
						return {
							dictLabel: v.dictLabel,
							dictValue: v.dictValue
						}
					})
				}
			})
		},
		getReservatTime(itime){
			getReservatTime().then(res=>{
				if(res.code==200){
					var data=res.rows;
					var amList=[],pmList=[]
					data.forEach(ite=>{
						if(ite.reservatConfigType==1){
							amList.push(ite)
						}else if(ite.reservatConfigType==2){
							pmList.push(ite)
						}
					})
					if(amList.length){
						this.timeList=amList;
						this.timeType=1
					}else{
						this.timeList=pmList;
						this.timeType=2
					}
					this.amList=amList
					this.pmList=pmList
				}
			})
		},
		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.datainfo.visitDate=yearStr;
			this.year=y;
			this.month=m;
		},
		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'
				// }
			}
		},
		getTimeFn(type){
			if(type==1){
				this.timeType=1;
				this.timeList=this.amList;
			}else{
				this.timeType=2;
				this.timeList=this.pmList;
			}
		},
		clearboth(){
			var time=this.datainfo.visitDate
			this.datainfo={};
			this.datainfo.visitDate=time;
			this.timeid='';
			this.adrtype='';
			
			// this.getReservatTime(this.changetime)
		},
		getSubmit(){
			var that=this;
			if(!this.datainfo.visitDate){
				this.$toast('请选择预约日期')
				return
			}
			if(!this.datainfo.visitTime){
				this.$toast('请选择时间')
				return
			}
			var str='预约成功'
			// if(this.inputValue==0){
			// 	this.$toast('请输入参观人数')
			// 	return
			// }
			// if(this.inputValue<0){
			// 	this.$toast('请输入正确的参观人数')
			// 	return
			// }
			if(!this.datainfo.visitNum){
				this.$toast('请输入人数')
				return
			}
			if(this.datainfo.visitNum<1){
				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
			}
			if(!this.adrtype){
				this.$toast('请选择来访地点')
				return
			}
			if(!this.datainfo.visitReason){
				this.$toast('请输入来访事由')
				return
			}
			// that.clearboth()
			// console.log(this.datainfo)
			// return
			this.$refs.form.validate().then(res => {
				var params={};
				params=this.datainfo
				getReservatAdd(params).then(res=>{
					if(res.code==200){
						this.$toast(str)
						setTimeout(function(){
							that.clearboth()
						},1500)
					}else{
						this.$toast(res.msg)
					}
				})
			})
			
		},
		dayChange(e){
			console.log(e,1)
			this.datainfo.visitDate=e.date;
		},
		getIsSelDayFn(e){
			// this.datainfo.visitDate=e.date;
		},
		
		
		
		getInFn(idx){
			// this.intype=idx;
			// this.steps[idx].status=1
		},
		// 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;
		// 			}
		// 		}
		// 	})
		// },
		// getisReceptionFn(){
		// 	if(this.jdryflag){
		// 		this.isReception='Y'
		// 	}else{
		// 		this.$toast('当前时间段暂无预约人员')
		// 	}
		// },
		// _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;
		// },
		// 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.getReservatTime()
		// 		this.changetime='';
		// 	}else{
		// 		var time=y + '-' + m + '-' + '01'
		// 		this.changetime=time
		// 		this.getReservatTime(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: 144rpx !important;font-size: 28rpx;font-weight: bold;position: relative;color: #343434;text-align-last: justify;}
.ytbox /deep/ .uni-forms-item__label text{flex: 1;}
.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: 28rpx;}
 .ytbox /deep/ .uni-forms-item__error{margin-top:20rpx;left: auto;right: 0;}
 
 .ytbox{width: 684rpx;margin: 0 auto;padding-bottom: 44rpx;padding-top: 24rpx;position: relative;flex: 1;overflow: auto;}
.ytforms{
	.yttit{font-size: 28rpx;font-weight: bold;margin-bottom: 10rpx;
color: #161616;display: flex;align-items: center;padding: 0rpx 26rpx;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: 0rpx;}
	}
	.ytsbox{background-color: #ffffff;padding: 32rpx 28rpx 0;border-radius: 14rpx;margin-bottom: 24rpx;
		&.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: 196rpx;
					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;}
				}
			}
		}
		// .ytime{padding:20rpx 0 46rpx;
		// 	.ytimel{font-size: 28rpx;font-weight: bold;color: #161616;flex:1;position: relative;padding-left: 26rpx;margin-bottom: 32rpx;
		// 		&::before{content: '';width: 6rpx;height: 34rpx;background: $com-cd3;border-radius: 4rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 0rpx;}
		// 	}
		// 	.ytst{font-size: 26rpx;font-weight: 500;color: #666666;margin-bottom: 28rpx;
		// 		image{width: 24rpx;height: 24rpx;margin-right: 8rpx;flex: 0 0 auto;margin-top: 6rpx;}
		// 	}
		// 	.ytimea{padding: 10rpx 0 0;
		// 		.rowline{width: 64rpx;height: 20rpx;margin: 0 10rpx;flex: 0 0 auto;}
		// 		.timebtn{flex: 1;height: 70rpx;border: 2rpx solid #0391FD;
		// 	border-radius: 14rpx;text-align: center;line-height: 70rpx;box-sizing: border-box;}
		// 	}
		// }
		.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 #0391FD;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: 14rpx;margin: 56rpx auto 0;font-size: 28rpx;font-weight: 500;color: #FFFFFF;
		&.btn1{background-color: #9a9c9e;}
	}
.pickbox{flex: 1;text-align: right;font-weight: 500;font-size: 28rpx;color: #161616;}

// 面容
.facea{width: 100%;height: 174rpx;background: #FFFFFF;border-radius: 14rpx;border: 2rpx dashed #DADADA;margin-bottom: 46rpx;
	image{width: 64rpx;height: 64rpx;margin-bottom: 14rpx;}
	view{font-weight: 500;color: #AAAAAA;font-size: 26rpx;}
}
.facetip{text-align: center;font-weight: 500;font-size: 22rpx;color: #666666;margin-bottom: 50rpx;
	text{color: $com-cd3;font-weight: 500;padding: 0 4rpx;}
}
.facetips{width: 188rpx;
	image{width: 98rpx;height: 98rpx;margin-bottom: 20rpx;}
	view{font-weight: 500;font-size: 22rpx;color: #828CA7;}
}
</style>