177 lines
4.7 KiB
Vue
177 lines
4.7 KiB
Vue
<template>
|
||
<view class="container">
|
||
<u--form :model="form" :rules="rules" ref="uForm" labelWidth="80">
|
||
<u-form-item label="账户名" prop="nickName">
|
||
<u-input v-model="form.nickName" placeholder="请输入账户名" clearable />
|
||
</u-form-item>
|
||
<u-form-item label="手机号" prop="phone">
|
||
<u-input v-model="form.phone" placeholder="请输入手机号" clearable />
|
||
</u-form-item>
|
||
<!-- <u-form-item label="验证码" prop="code" labelWidth="80" borderBottom>
|
||
<u-input v-model="form.code" placeholder="请填写验证码" clearable>
|
||
<template slot="suffix">
|
||
<u-code ref="uCode" @change="codeChange" seconds="20" @start="disabled1 = true"
|
||
@end="disabled1 = false"></u-code>
|
||
<u-button @tap="getCode" :text="tips" type="primary" size="mini"
|
||
:disabled="disabled1"></u-button>
|
||
</template>
|
||
</u-input>
|
||
</u-form-item> -->
|
||
<u-form-item label="密码" prop="password">
|
||
<u-input v-model="form.password" password type="password" clearable placeholder="请输入密码" />
|
||
</u-form-item>
|
||
<u-form-item label="确认密码" prop="rePassword">
|
||
<u-input v-model="form.rePassword" password type="password" clearable placeholder="请再次输入密码" />
|
||
</u-form-item>
|
||
<u-form-item label="渠道码" prop="agencyId">
|
||
<u-input v-model="form.agencyId" placeholder="请输入渠道码" clearable />
|
||
</u-form-item>
|
||
</u--form>
|
||
<view style="padding: 50rpx;">
|
||
<u-button shape="circle" type="primary" @click="submit">进入</u-button>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
updateUserById
|
||
} from '@/api/index.js'
|
||
import {
|
||
mapState
|
||
} from 'vuex'
|
||
export default {
|
||
computed: {
|
||
...mapState(['userInfo'])
|
||
},
|
||
data() {
|
||
return {
|
||
disabled1: false,
|
||
tips: '',
|
||
form: {
|
||
nickName: '',
|
||
phone: '',
|
||
code: '',
|
||
agencyId: '',
|
||
password: '',
|
||
rePassword: ''
|
||
},
|
||
rules: {
|
||
nickName: [{
|
||
required: true,
|
||
message: '请输入账户名',
|
||
trigger: ['blur', 'change']
|
||
}],
|
||
// 字段名称
|
||
phone: [{
|
||
required: true,
|
||
message: '请输入手机号',
|
||
trigger: ['change', 'blur'],
|
||
},
|
||
{
|
||
// 自定义验证函数，见上说明
|
||
validator: (rule, value, callback) => {
|
||
// uni.$u.test.mobile()就是返回true或者false的
|
||
return uni.$u.test.mobile(value);
|
||
},
|
||
message: '手机号码不正确',
|
||
trigger: ['change', 'blur'],
|
||
}
|
||
],
|
||
code: {
|
||
type: 'string',
|
||
required: true,
|
||
len: 6,
|
||
message: '请填写6位验证码',
|
||
trigger: ['blur']
|
||
},
|
||
password: [{
|
||
required: true,
|
||
message: '请输入密码',
|
||
trigger: ['blur', 'change']
|
||
}],
|
||
rePassword: [{
|
||
required: true,
|
||
message: '请再次输入密码',
|
||
trigger: ['blur', 'change']
|
||
}],
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
if (!this.userInfo) {
|
||
uni.reLaunch({
|
||
// #ifdef H5
|
||
url: '/pages/login/login',
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
url: '/pages/entry/entry'
|
||
// #endif
|
||
})
|
||
}
|
||
},
|
||
onReady() {
|
||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
methods: {
|
||
submit() {
|
||
this.$refs.uForm.validate().then(async res => {
|
||
if (this.form.password !== this.form.rePassword) {
|
||
return uni.$u.toast('两次密码不一致，请重新输入')
|
||
}
|
||
const res1 = await updateUserById({
|
||
...this.userInfo,
|
||
...this.form
|
||
})
|
||
if (!res1.success) return
|
||
uni.showToast({
|
||
title: '操作成功',
|
||
icon: 'success',
|
||
duration: 1500,
|
||
success() {
|
||
uni.reLaunch({
|
||
// #ifdef H5
|
||
url: '/pages/home/h5/h5',
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
url: '/pages/home/mini/mini'
|
||
// #endif
|
||
})
|
||
}
|
||
})
|
||
}).catch(errors => {
|
||
// uni.$u.toast('校验失败')
|
||
})
|
||
},
|
||
codeChange(text) {
|
||
this.tips = text;
|
||
},
|
||
getCode() {
|
||
if (this.$refs.uCode.canGetCode) {
|
||
// 模拟向后端请求验证码
|
||
uni.showLoading({
|
||
title: '正在获取验证码'
|
||
})
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
uni.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}, 2000);
|
||
} else {
|
||
uni.$u.toast('倒计时结束后再发送');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container {
|
||
padding: 30rpx;
|
||
}
|
||
</style> |