yuanqu_ui/pages/order/info.vue

<template>
  <view class="ysec">
    <uni-forms ref="form" :value="user" >
		<view class="yttit">信息开门</view>
		<view class="ysecbox">
			<uni-forms-item name="username" label="姓名">
			  <uni-easyinput :inputBorder="false"  v-model="username" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item name="phonenumber" label="手机号码">
			  <uni-easyinput :inputBorder="false" type="number"  v-model="phonenumber" placeholder="请输入手机号码" />
			</uni-forms-item>
			<uni-forms-item name="code" label="验证码">
			  <uni-easyinput :inputBorder="false" v-model="code" placeholder="请输入验证码" />
					<view class="line flex0"></view>
					<view v-if="timefalg" class="code act">{{time}}秒</view>
					<view v-else @click="getCode" class="code">获取验证码</view>
			</uni-forms-item>
		</view>
      
      <view class="rbtn" @click="submit">开门</view>
    </uni-forms>
	<!-- 列表 -->
	<view class="searchlist" v-if="listflag">
		<y-list :datalist="list" :wtdt="wtdt" :type="type" @getDetail='getDetail'></y-list>
	</view>
	
  </view>
</template>

<script>
	import * as base64 from "base-64"
	import { getReservatList } from "@/api/mine/order.js"
	import {sendSmsFn} from "@/api/login.js"
	import yList from "@/components/order/list.vue"
  export default {
	  components:{yList},
    data() {
      return {
		timefalg:false,
		time:'',
		username:'',
		phonenumber:'17856919066',
		code:'',
		newcode:'',//验证码1419
		user:{},
		list:[],
		type:'1',
		pageSize: 10,
		pageNum: 1,
		reachflag: true,
		wtdt:'',
		listflag:false,
		backflag:false
      }
    },
    onReady() {
    },
	onLoad:function(){
		// uni.$on('refreshrelist',(e) => {
		// 	this.reachflag=true;
		// 	this.pageNum=1;
		// 	this.list=[];
		// 	this.backflag=true;
		// 	this.getDataFn();
		// })
	},
	onUnload() {
		uni.$off('refreshrelist')
	},
	// 上拉触底加载更多触发事件
	onReachBottom() {
		// if (this.reachflag) {
		// 	this.pageNum++
		// 	this.getDataFn()
		// }
	},
    methods: {
		submit() {
			var that = this;
			if (!this.username) {
				that.$toast("请输入姓名")
				return
			}
			if (!this.phonenumber ) {
				that.$toast("请输入手机号")
				return
			}
			if (!this.code) {
				that.$toast("请输入验证码")
				return
			}
			// if(this.code!=this.newcode){
			// 	that.$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 (this.phonenumber && !regphone.test(this.phonenumber)) {
				that.$toast("请输入正确的手机号")
				return
			}
			that.timefalg=false;
			that.time=60;
			clearInterval(that.timer)
			// this.getDataFn()
		},
		// getDetail(data){
		// 	var s=base64.encode(data)
		// 	this.$tab.navigateTo('/a/code?id='+s)
		// },
		getCode(){
			var that=this;
			if (!this.phonenumber ) {
				that.$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 (this.phonenumber && !regphone.test(this.phonenumber)) {
				that.$toast("请输入正确的手机号")
				return
			}
			that.$toast("发送成功")
			that.newcode='1234'
			that.time=60;
			that.timefalg=true;
			that.setTimein()
			return
			
			sendSmsFn(this.phonenumber).then(res=>{
				if (res.code == 200) {
					// 发送验证码
					that.$toast("发送成功")
					that.newcode=res.msg
					that.time=60;
					that.timefalg=true;
					that.setTimein()
				} else {
					that.$toast(res.msg)
				}
				// 判断是不是对等的
				// that.getCodesend(that.phonenumber)
			})
		},
		// 验证码倒计时
		setTimein(){
			var that=this;
			clearInterval(that.timer)
			that.timer=setInterval(()=>{
				if(that.time<=1){
					that.timefalg=false;
					that.time=60;
					clearInterval(that.timer)
				}
				that.time=that.time-1;
			},1000)
		},
		// getDataFn(){
		// 	var params={
		// 		visitPhone:this.phonenumber,
		// 		pageSize:this.pageSize,
		// 		pageNum: this.pageNum,
		// 	}
		// 	getReservatList(params).then(res=>{
		// 		if(res.code==200){
		// 			var list=res.rows;
		// 			this.listflag=true;
		// 			if(list&&list.length){
		// 				var len=list.length;
		// 				if(len==1&&!this.backflag&&this.pageNum==1){
		// 					var id=list[0].reservatId
		// 					this.$tab.navigateTo('/pages/order/comedetail?id='+base64.encode(id))
		// 				}else{
		// 					if (res.rows.length < this.pageSize) {
		// 						this.reachflag = false
		// 						this.wtdt = '到底了~';
		// 					} else {
		// 						var num = parseInt(res.rows.length) + parseInt(this.pageSize) * parseInt(this.pageNum -	1)
		// 						if (num < res.total) {
		// 							this.reachflag = true
		// 							this.wtdt = '上拉加载更多'
		// 						} else {
		// 							this.reachflag = false
		// 							this.wtdt = '到底了~';
		// 						}
		// 					}
		// 					if (this.pageNum == 1) {
		// 						this.list = res.rows;
		// 					} else {
		// 						this.list = this.list.concat(res.rows)
		// 					}
		// 				}
		// 			}else{
		// 				this.$toast('暂无预约信息')
		// 			}
		// 		}else{
		// 			this.$toast(res.msg)
		// 		}
		// 	})
		// },
      
    }
  }
</script>

<style lang="scss">
  // page {
  //   background-color: #f5f5f5;
  // }
  .ysec{padding-top: 10rpx; 
	.rbtn{width: 680rpx;height: 90rpx;background: $com-cd3;border-radius: 42rpx;text-align: center;line-height: 90rpx;font-size: 28rpx;font-weight: bold;color: #FFFEFE;margin: 70rpx auto 0;}
	.yttit{font-size: 28rpx;font-weight: bold;background-color: #f1f1f1;color: $com-cd3;min-height: 72rpx;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;}
	}
	.ysecbox{padding:0 34rpx;background: #ffffff;}
  }
  .searchlist{
	  padding: 0 30rpx;margin-top: 30rpx;
  }
  .line{width: 2rpx;height: 24rpx;background: #CDCDCD;margin: 0 24rpx;}
	.code{font-size: 26rpx;color: $com-cd3;font-weight: 500;
		&.act{color: #666666;}
	} 
.ysec /deep/ .uni-forms .uni-forms-item{padding: 20rpx 16rpx 20rpx;border-bottom: 2rpx solid #E6E6E6;margin-bottom: 0;}
.ysec /deep/ .uni-forms-item__label{flex: 0 0 auto;width: auto !important;font-size: 28rpx;font-weight: bold;position: relative;color: #343434;}
.ysec /deep/ .uni-textarea-placeholder{font-size: 28rpx;color: #DDDDDD !important;}
.ysec /deep/ .uni-easyinput__placeholder-class{font-size: 28rpx;color: #DDDDDD;}
.ysec /deep/ .uni-forms-item__content{display: flex;align-items: center;flex-direction: row;}
.ysec /deep/ .uni-easyinput{flex: 1;text-align: right;}
.ysec /deep/  .uni-forms-item:last-child{border-bottom: none;}
.ysec /deep/ .uni-easyinput__content-input{font-size: 28rpx;}
 .ysec /deep/ .uni-forms-item__error{margin-top:20rpx;left: auto;right: 0;}
</style>