yuanqu_ui/pages/order/search.vue

<template>
  <view class="ysec">
    <uni-forms ref="form" :value="user" >
		<view class="yttit">查询预约</view>
		<view class="ysecbox">
			<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 style="padding: 20rpx 16rpx;">
			        <liu-slider-verify ref="verify" @change='change'></liu-slider-verify>
			        <!-- <view style="margin-top: 30rpx;">是否成功：{{obj && obj.state}}</view>
			        <view style="margin-top: 20rpx;">验证次数：{{obj && obj.verification}}</view> -->
			        <!-- <button style="margin-top: 30rpx;" @click="reset">重置</button> -->
			    </view>
		</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 { getReservatListNoPage } 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:'',
		phonenumber:'',
		code:'',
		newcode:'',//验证码1419
		user:{},
		list:[],
		type:'search',
		pageSize: 10,
		pageNum: 1,
		reachflag: true,
		wtdt:'',
		listflag:false,
		backflag:false,
		codeflag: 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: {
		 change(e) {
		    // console.log('验证信息：', e)
		    // console.log('验证是否成功：' + e.state)
		    // console.log('验证次数：' + e.verification)
		    this.codeflag = e.state
		},
		//重置
		reset() {
		    this.$refs.verify.initialization()
		},
		getDetail(data){
			// var s=base64.encode(data)
			this.$tab.navigateTo('/a/code?id='+data)
		},
		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
			}
			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,
			}
			getReservatListNoPage(params).then(res=>{
				this.reset()
				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('/a/code?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)
				}
			})
		},
      submit() {
		var that = this;
		this.reachflag=false;
		this.pageNum=1;
		this.list=[];
		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
		}
		if(!this.codeflag){
			that.$toast("请拖动滑块验证")
			return
		}
		this.getDataFn()
      }
    }
  }
</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>