car_net_wxapp/wx/pages/binding/index.vue

<template>
	<view class="binding">
		<!-- header -->
		<cu-custom bgColor="bg-gradual-blue" isBack>
			<view slot="content">{{ id ? '设备换绑' : '设备绑定' }}</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 {
			id: 0,
			value: {
				name: '',
				tel: '',
				yan: '',
				car: '',
				code: ''
			},
			err: {
				name: '',
				tel: '',
				yan: '',
				car: '',
				code: ''
			},
			yan: false,
			timer: null,
			time: 0
		};
	},
	onLoad(options) {
		if (options.hasOwnProperty('value')) {
			options.value = JSON.parse(options.value);
			this.id = options.value.id;
			// name, tel, number: code, model: car,vcode:yan
			this.value = {
				name: options.value.name,
				tel: options.value.tel,
				code: options.value.number,
				car: options.value.model
			};
			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}$/;
			this.yan = this.$store.state.userInfo.tel !== options.value.tel && telReg.test(options.value.tel) ? true : false;
		}
		if (this.id == 0) this.value.tel = this.$store.state.userInfo.tel;
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},
	methods: {
		// 请求验证码
		async sendfunc() {
			var res = await this.$global.request({
				method: 'get',
				header: {
					'Content-Type': 'application/x-www-form-urlencoded',
					Authorization: uni.getStorageSync('token')
				},
				url: '/customer/vehicle/vcode/send/',
				data: { tel: this.value.tel, appid: this.$store.state.userInfo.appid }
			});
			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;
			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 (name == 'tel') {
				this.yan = this.$store.state.userInfo.tel !== e.detail && telReg.test(value.tel) ? true : false;
			}
			this.value = value;
		},
		// 验证
		yanfunc() {
			var value = JSON.parse(JSON.stringify(this.value));
			var err = JSON.parse(JSON.stringify(this.err));
			// 去空格 并且 清空错误集
			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]);
		},
		// 提交
		async onClick() {
			try {
				if (this.yanfunc()) {
					Dialog.alert({ message: '请检查所填数据!' }).then(() => {});
					return false;
				}
				var { name, tel, car, code, yan } = this.value;
				var res = await this.$global.request({
					method: this.id ? 'put' : 'post',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						Authorization: uni.getStorageSync('token')
					},
					url: this.id ? `/customer/vehicle/${this.id}/` : '/customer/vehicle/',
					data: { name, tel, number: code, model: car, vcode: yan }
				});
				uni.showToast({
					icon: 'none',
					title: '成功绑定',
					success() {
						uni.navigateBack({
							delta: 1
						});
					}
				});
			} catch (err) {
				wx.showToast({
					icon: 'none',
					title: err
				});
			}
		}
	}
};
</script>

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