160 lines
3.7 KiB
Vue
160 lines
3.7 KiB
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>
|