160 lines
3.5 KiB
Vue
160 lines
3.5 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view style="padding: 20px;">
|
||
<u--form
|
||
labelPosition="left"
|
||
labelWidth="100px"
|
||
:model="form"
|
||
:rules="rules"
|
||
ref="formRef"
|
||
>
|
||
<u-form-item
|
||
label="用户姓名"
|
||
prop="name"
|
||
borderBottom
|
||
:required="true"
|
||
>
|
||
<u--input
|
||
v-model="form.name"
|
||
placeholder="请输入用户姓名"
|
||
border="none"
|
||
></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="用户昵称"
|
||
prop="nickname"
|
||
borderBottom
|
||
:required="false"
|
||
>
|
||
<u--input
|
||
v-model="form.nickname"
|
||
placeholder="请输入用户昵称"
|
||
border="none"
|
||
></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="手机号码"
|
||
prop="telephone"
|
||
borderBottom
|
||
:required="true"
|
||
>
|
||
<u--input
|
||
v-model="form.telephone"
|
||
placeholder="请输入手机号码"
|
||
border="none"
|
||
></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="用户性别"
|
||
prop="gender"
|
||
borderBottom
|
||
:required="false"
|
||
>
|
||
<u-radio-group v-model="form.gender">
|
||
<u-radio
|
||
:customStyle="{marginRight: '16px'}"
|
||
v-for="(item, index) in genderOptions"
|
||
:key="index"
|
||
:label="item.label"
|
||
:name="item.value"
|
||
>
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</u-form-item>
|
||
</u--form>
|
||
<view style="margin-top: 20px;">
|
||
<u-button :loading="btnLoading" type="primary" @click="submit" text="提交"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getInfo } from '@/common/request/api/login'
|
||
import { updateCurrentUser } from '@/common/request/api/vadmin/auth/user.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
btnLoading: false,
|
||
form: {
|
||
name: "",
|
||
nickname: "",
|
||
telephone: "",
|
||
gender: ""
|
||
},
|
||
rules: {
|
||
name: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写姓名',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
telephone: [
|
||
{
|
||
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'],
|
||
}
|
||
]
|
||
},
|
||
genderOptions: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.$store.dispatch('getDicts', ["sys_vadmin_gender"]).then(result => {
|
||
this.genderOptions = result.sys_vadmin_gender
|
||
})
|
||
// this.resetForm()
|
||
this.getUser()
|
||
},
|
||
onReady() {
|
||
//onReady 为uni-app支持的生命周期之一
|
||
this.$refs.formRef.setRules(this.rules)
|
||
},
|
||
methods: {
|
||
resetForm() {
|
||
this.form = {
|
||
name: "",
|
||
nickname: "",
|
||
telephone: "",
|
||
gender: ""
|
||
}
|
||
},
|
||
getUser() {
|
||
getInfo().then(res => {
|
||
this.form = res.data
|
||
})
|
||
},
|
||
submit(ref) {
|
||
this.$refs.formRef.validate().then(res => {
|
||
this.btnLoading = true
|
||
updateCurrentUser(this.form).then(res => {
|
||
this.$store.dispatch('UpdateInfo', res.data)
|
||
this.$modal.msgSuccess("更新成功");
|
||
}).finally(() => {
|
||
this.btnLoading = false
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #ffffff;
|
||
}
|
||
</style>
|