|
|
<template>
|
|
|
<view style="background-color: white;padding: 24rpx;">
|
|
|
<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
|
|
|
<u-form-item labelWidth="200rpx" label="原手机号" prop="userInfo.mobile" borderBottom ref="item1">
|
|
|
<u--input v-model="model1.userInfo.mobile" border="none"></u--input>
|
|
|
</u-form-item>
|
|
|
<u-form-item labelWidth="200rpx" label="新手机号" prop="userInfo.mobile" borderBottom ref="item1">
|
|
|
<u--input v-model="model1.userInfo.newmobile" border="none"></u--input>
|
|
|
</u-form-item>
|
|
|
<u-form-item labelWidth="200rpx" label="验证码" prop="userInfo.mobile" borderBottom ref="item1">
|
|
|
<view class="" style="display: flex; align-items: center; justify-content: space-between;">
|
|
|
<u--input v-model="model1.userInfo.code" placeholder="" style="width: 70vw;"></u--input>
|
|
|
<u-button text="获取验证码" @click="code" style="width: 20vw;">></u-button>
|
|
|
</view>
|
|
|
|
|
|
</u-form-item>
|
|
|
</u--form>
|
|
|
|
|
|
<view class="" style="margin-top: 60rpx;">
|
|
|
<u-button text="保存" type="primary" @click="submit"></u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
model1: {
|
|
|
userInfo: {
|
|
|
mobile: '',
|
|
|
newmobile: '',
|
|
|
code: ''
|
|
|
}
|
|
|
},
|
|
|
tips: '获取验证码',
|
|
|
rules: {
|
|
|
'userInfo.mobile': [{
|
|
|
type: 'string',
|
|
|
required: true,
|
|
|
message: '请填写手机号',
|
|
|
trigger: ['blur', 'change']
|
|
|
},
|
|
|
{
|
|
|
// 自定义验证函数,见上说明
|
|
|
validator: (rule, value, callback) => {
|
|
|
// 上面有说,返回true表示校验通过,返回false表示不通过
|
|
|
// uni.$u.test.mobile()就是返回true或者false的
|
|
|
return uni.$u.test.mobile(value);
|
|
|
},
|
|
|
message: '手机号码不正确',
|
|
|
// 触发器可以同时用blur和change
|
|
|
trigger: ['change', 'blur'],
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
submit() {
|
|
|
let p = {
|
|
|
mobile: this.model1.userInfo.newmobile,
|
|
|
captcha: this.model1.userInfo.code || 8888
|
|
|
}
|
|
|
uni.$u.http.post('/api/user/changemobile', p).then(res => {
|
|
|
uni.showToast({
|
|
|
title: res.msg,
|
|
|
icon: 'none'
|
|
|
})
|
|
|
if (res.code == 1) {
|
|
|
setTimeout(() => {
|
|
|
uni.navigateBack({
|
|
|
delta: 1
|
|
|
})
|
|
|
}, 1500)
|
|
|
}
|
|
|
|
|
|
|
|
|
})
|
|
|
},
|
|
|
code() {
|
|
|
uni.showLoading({
|
|
|
title: '正在获取验证码'
|
|
|
})
|
|
|
uni.$u.http.post('/api/sms/send', {
|
|
|
mobile: this.model1.userInfo.newmobile,
|
|
|
event: 'changemobile'
|
|
|
}).then(res => {
|
|
|
console.log(res);
|
|
|
uni.hideLoading()
|
|
|
uni.showToast({
|
|
|
title: res.msg
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
codeChange(text) {
|
|
|
this.tips = text;
|
|
|
},
|
|
|
getCode() {
|
|
|
if (this.$refs.uCode.canGetCode) {
|
|
|
// 模拟向后端请求验证码
|
|
|
uni.showLoading({
|
|
|
title: '正在获取验证码'
|
|
|
})
|
|
|
uni.$u.http.post('/api/sms/send', {
|
|
|
mobile: this.model1.userInfo.newmobile,
|
|
|
event: 'changemobile'
|
|
|
}).then(res => {
|
|
|
console.log(res);
|
|
|
})
|
|
|
// setTimeout(() => {
|
|
|
// uni.hideLoading();
|
|
|
// // 这里此提示会被this.start()方法中的提示覆盖
|
|
|
// uni.$u.toast('验证码已发送');
|
|
|
// // 通知验证码组件内部开始倒计时
|
|
|
// this.$refs.uCode.start();
|
|
|
// }, 2000);
|
|
|
} else {
|
|
|
uni.$u.toast('倒计时结束后再发送');
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
this.model1.userInfo.mobile = option.mobile
|
|
|
},
|
|
|
|
|
|
onReady() {
|
|
|
//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
|
|
|
// this.$refs.uForm.setRules(this.rules)
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
</style> |
|
|
\ No newline at end of file |
...
|
...
|
|