shangjia1.1/pages/store/change_phone/change_phone.vue

<template>
	<view class="body">
		<view class="wrap">
			<u--form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label-width="160" :label-position="labelPosition" label="输入新手机号">
					<u-input :password-icon="true" :border="border" placeholder="" v-model="form.mobile"></u-input>
				</u-form-item>

				<u-form-item label="" prop="code">
					<u-input placeholder='请输入验证码' maxlength="6" type='number' v-model="form.code" />
					<u-button slot="right" size="mini" @click="getCode" plain>
						<block v-if="!timeTick">
							获取验证码
						</block>
						<block v-else>
							剩余{{timeTick}}秒
						</block>
					</u-button>
				</u-form-item>
			</u--form>

			<view style="margin-top: 30rpx;">
				<u-button :disabled="false" class="button" @click="submit">提交</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	var _this, that;
	export default {
		components: {},
		data() {
			return {
				form: {},
				timeTick: 0,
				border: false,
				labelPosition: 'top',
				errorType: ['message'],
				rules: {
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur',
						},
						{
							min: 6,
							max: 18,
							message: '密码长度在6到18个字符',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html

								let reg = /^([a-zA-z0-9!@#$%%^&*()_+-=}{\[\]};'":\\\/.,<>?])+$/;

								return reg.test(value);
							},
							message: '密码必须为英文字母、数字或字符',
							trigger: ['change', 'blur'],
						},
					],
					re_password: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur',
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur',
					}],
				},

			};
		},
		onLoad() {
			that = this
			_this = that
		},
		methods: {
			getCode() {
				//获取验证码
				if (_this.form.mobile.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				if (that.timeTick > 0) {
					uni.showToast({
						title: '发送太频繁啦',
						duration: 2000
					});
					return;
				}
				// 发送验证码 
				getApp().globalData.util.request({
					s: 'Merch.User.getSMSCode',
					mobile: _this.form.mobile
				}).then(res => {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码发送成功'
					});
					that.timeTick = 60;
					// 开始倒计时
					let timeTick = setInterval(function() {
						if (that.timeTick > 0) {
							that.timeTick = that.timeTick - 1
						}
					}, 1000);

					setTimeout(function() {
						clearInterval(timeTick)
					}, 1000 * 60)
				});
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (that.form.re_password != that.form.password) {
							uni.showModal({
								title: '提示',
								content: '两次输入密码不一致'
							});
							return;
						}
						getApp().globalData.util.request({
							s: 'Merch.Mershop_Account.changeMobileAccount',
							mobile: _this.form.mobile,
							code: that.form.code,
						}).then(res => {
							if (res.data.ret == 200) {
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: '修改成功'
								});
							}
						});
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	@import "./change_phone.scss";
</style>