car_net_wxapp/wx/pages/binding/index.vue

<template>
	<view class="binding">
		<!-- header -->
		<cu-custom bgColor="bg-gradual-blue" isBack><view slot="content">设备绑定</view></cu-custom>
		<!-- section -->
		<van-cell-group>
			<van-field label="姓名" :error-message="err.name" @change="onChange($event, 'name')" :value="value.name" required placeholder="请输入用户名" />
			<van-field label="电话" :error-message="err.tel" @change="onChange($event, 'tel')" :value="value.tel" required placeholder="请输入电话" />
			<van-field
				v-if="yan"
				:value="value.yan"
				:error-message="err.yan"
				@change="onChange($event, 'yan')"
				center
				clearable
				required
				label="短信验证码"
				placeholder="请输入短信验证码"
				use-button-slot
			>
				<van-button @click="sendfunc" :disabled="time" slot="button" size="small" type="primary">{{time ? time+"s" : "发送验证码"}}</van-button>
			</van-field>
			<van-field :error-message="err.car" @change="onChange($event, 'car')" label="车型" :value="value.car" required placeholder="请输入车型" />
			<van-field label="车牌号码" @change="onChange($event, 'code')" :value="value.code" :error-message="err.code" required placeholder="请输入车牌号码" />
		</van-cell-group>
		<button @click="onClick" style="height: 80rpx;" class="cu-btn margin  bg-green  block ">申请绑定</button>
		<!-- footer -->
		<!-- 功能工具 -->
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
import Dialog from '@/wxcomponents/vant/dist/dialog/dialog';
export default {
	data() {
		return {
			value: {
				name: '',
				tel: '',
				yan: '',
				car: '',
				code: ''
			},
			err: {
			name: '',
			tel: '',
			yan: '',
			car: '',
			code: ''
			},
			yan: true,
			timer:null,
			time:0
		}
	},
	onLoad() {},
	beforeDestroy() {
		clearInterval(this.timer);
	},
	methods: {
		// 请求验证码
		sendfunc(){
		this.time=60;
		clearInterval(this.timer)
          this.timer=setInterval(()=>{
			  this.time= this.time-1;
			  if(this.time<=0) clearInterval(this.timer);
		  },1000)
		},
		// 双向绑定
		onChange(e,name){
		  var value = JSON.parse(JSON.stringify(this.value));
		  value[name]=e.detail;
		  this.value=value;
		},
		// 验证
		yanfunc() {
			var value = JSON.parse(JSON.stringify(this.value));
			var err = JSON.parse(JSON.stringify(this.err));
			console.log(value);
			// 去空格 并且 清空错误集
			Object.keys(value).forEach(item => {
				value[item] = value[item].trim();
				err[item] = '';
			});
			// 判断
			if (!value.name) err.name = '姓名不能为空';
			var telreg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			if (!value.tel) {
				err.tel = '电话不能为空';
			} else {
				if (!telreg.test(value.tel)) err.tel = '电话格式不正确';
			}
			if (!value.yan && this.yan) err.yan = '验证码不能为空';
			if (!value.car) err.car = '车型不能为空';
			if (!value.code) err.code = '车牌号码不能为空';
			this.value = value;
			this.err = err;
			return Object.keys(err).some(item => err[item]);
		},
		// 提交
		onClick() {
			if (this.yanfunc()) {
				Dialog.alert({ message: '请检查所填数据!' }).then(() => {});
				return false;
			}
		}
	}
};
</script>

<style lang="scss" scoped></style>