shangjia1.1/pages/store/modify_password/modify_password.vue

<template>
	<view class="body">
		<view class="wrap">
			<u--form :model="form" :rules="rules" ref="uForm">
				<u-form-item label-width="160" :label-position="labelPosition" label="手机号" prop='userInfo.phone'>
					<u--input :password-icon="true" :border="border" placeholder=""
						v-model="form.userInfo.phone"></u--input>
				</u-form-item>

				<u-form-item label="" prop="userInfo.code">
					<u--input placeholder='请输入验证码' maxlength="6" type='number' v-model="form.userInfo.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-item label-width="160" :label-position="labelPosition" label="新密码" prop='userInfo.password'>
					<u--input :password-icon="true" type="password" :border="border" placeholder="请输入新密码"
						v-model="form.password"></u--input>
				</u-form-item>

				<view class="desc">
					<view class="notice">
						密码6-18位英文字母，数字或字符
					</view>
					<view class="forget">
						忘记密码？
					</view>
				</view>
				<u-form-item label-width="160" :label-position="labelPosition" label="确认密码" prop="userInfo.re_password">
					<u--input :password-icon="true" type="password" :border="border" placeholder="请再次输入新密码确认"
						v-model="form.re_password"></u--input>
				</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 {
		data() {
			return {
				form: {
					userInfo: {
						phone: "",
						password: "",
						re_password: "",
						code: ""
					}
				},
				timeTick: 0,
				border: false,
				labelPosition: 'top',
				errorType: ['message'],
				rules: {
					'userInfo.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'],
						},
					],
					'userInfo.re_password': {
						required: true,
						message: '请再次输入密码',
						trigger: 'blur',
					},
					'userInfo.code': {
						required: true,
						message: '请输入验证码',
						trigger: 'blur',
					},
				},

			}
		},
		onLoad() {
			that = this
			_this = that
			// let userData = uni.getStorageSync(getApp().globalData.config.userDataKey)
			// _this.form.mobile = userData.mobile
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		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.changePassword',
							mobile: _this.form.mobile,
							code: that.form.code,
							password: that.form.password,
							re_password: that.form.re_password,
						}).then(res => {
							if (res.data.ret == 200) {
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: '密码修改成功'
								});
							}
						});
					}
				});
			}
		},
	}
</script>

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