yuanqu_ui/pages/order/info.vue

<template>
	<view :style="'padding-top:'+nvaHeight+'px;padding-bottom:40rpx'">
		<view class="navbox">
			<uni-nav-bar  title="扫码开门" color="#ffffff"   :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
			</uni-nav-bar>
		</view>
		<!-- 主体 -->
		<image :src="navbg" class="navbg"></image>
		<view class="yymain">
			<image :src="tlogo" class="tlogo"></image>
			<view class="ysec">
			  <uni-forms ref="form" :value="user" >
					<view class="yttit">填写信息</view>
					<view class="ynum flexcc">
						<view class="ynlist">
							<image :src="tabaimg" class="ynimg"></image>
							<view class="yntit">扫描二维码</view>
							<image :src="line" class="ynline"></image>
						</view>
						<view class="ynlist">
							<image :src="tabbimg" class="ynimg"></image>
							<view class="yntit">填写信息</view>
							<image :src="line" class="ynline"></image>
						</view>
						<view class="ynlist">
							<image :src="tabcimg" class="ynimg"></image>
							<view class="yntit">点击开门</view>
						</view>
					</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>
				<view class="rtip">※ 温馨提示：请按流程完善信息后即可开门</view>
				<image :src="flogo" class="flogo"></image>
			  </uni-forms>
			</view>
		</view>
	</view>
</template>

<script>
	import * as base64 from "base-64"
	import { getOpenDzFn,sendSmskmFn } from "@/api/mine/order.js"
  export default {
	  components:{},
    data() {
      return {
		navbg:require("@/static/images/navbg.png"),
		tabaimg:require("@/static/images/order/one.png"),
		tabbimg:require("@/static/images/order/two.png"),
		tabcimg:require("@/static/images/order/three.png"),
		tlogo:require("@/static/images/order/tlogo.png"),
		flogo:require("@/static/images/order/flogo.png"),
		line:require("@/static/images/order/line.png"),
		timefalg:false,
		time:'',
		username:'',
		phonenumber:'',
		code:'',
		user:{},
		equipmentName:"",//设备id,
		nvaHeight:44,
		backgroundColor: "transparent",
      }
    },
    onReady() {
    },
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		if (scrollTop > 0) {
			this.backgroundColor = '#0491FD'
		} else {
			this.backgroundColor = 'transparent'
		}
	},
	onLoad:function(e){
		var type=e.adr;
		if(type==1){
			this.equipmentName='后门抓拍一体机1';
		}
		uni.getSystemInfo({
			success: (e) => {
				this.nvaHeight = Number(e.statusBarHeight)+44;
			}
		})
		// this.equipmentName=e.adr;
	},
    methods: {
		submit() {
			var that = this;
			if (!this.username) {
				that.$toast("请输入姓名")
				return
			}
			if (!this.phonenumber) {
				that.$toast("请输入手机号")
				return
			}
			if (!this.code) {
				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)
			var params={
				"equipmentName":this.equipmentName,
				"loginName":this.username,
				"phoneNumber":this.phonenumber,
				"code": this.code
			}
			getOpenDzFn(params).then(res=>{
				if(res.code==200){
					that.$toast('已开门');
					that.code='';
				}
			})
		},
		// 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
			}
			var params={
				username:this.phonenumber
			}
			sendSmskmFn(params).then(res=>{
				if (res.code == 200) {
					// 发送验证码
					that.$toast("发送成功")
					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)
		},
    }
  }
</script>

<style lang="scss">
  // page {
  //   background-color: #f5f5f5;
  // }
  .navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
  .navbg{width: 100%;height: 692rpx;}	
  .yymain{flex: 1;z-index: 2;position: relative;padding: 24rpx 34rpx;}
  .tlogo{width: 506rpx;height: 168rpx;margin-bottom: 36rpx;}
  .flogo{width: 254rpx;height: 68rpx;margin: 0 auto;}
.ynum{margin-bottom: 24rpx;
	.ynlist{flex: 1;position: relative;display: flex;flex-direction: column;align-items: center;padding: 20rpx 0;
		.ynimg{width: 42rpx;height: 42rpx;margin-bottom: 12rpx;}
		.yntit{font-weight: 500;font-size: 24rpx;color: #0391FD;}
		.ynline{width: 102rpx;height: 18rpx;position: absolute;right: 0;transform: translateX(51rpx);}
	}
	
}
  .rtip{font-weight: 500;margin-bottom: 48rpx;text-align: center;
font-size: 20rpx;
color: #0391FD;}
  .ysec{border-radius: 14rpx;background-color: #ffffff;padding: 8rpx 28rpx 40rpx;
	.rbtn{width: 100%;height: 90rpx;background: $com-cd3;border-radius: 14rpx;text-align: center;line-height: 90rpx;font-size: 28rpx;font-weight: bold;color: #FFFEFE;margin: 70rpx auto 20rpx;}
	.yttit{font-size: 28rpx;font-weight: bold;color: #161616;;min-height: 72rpx;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;}
	}
	// .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: 8rpx 26rpx 8rpx;margin-bottom: 0;border: 2rpx solid #0391FD;margin-bottom: 24rpx;border-radius: 6rpx;}
.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>