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>
</template>

<script>
	import * as base64 from "base-64"
	import { getOpenDzFn,sendSmskmFn } from "@/api/mine/order.js"
  export default {
	  components:{},
    data() {
      return {
		timefalg:false,
		time:'',
		username:'',
		phonenumber:'',
		code:'',
		user:{},
		equipmentName:"",//设备id
      }
    },
    onReady() {
    },
	onLoad:function(e){
		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;
  // }
  .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>