<template>
|
<view class="wrap">
|
<view class="u-m-t-50 u-flex u-flex-col u-text-center">
|
<u-avatar size="150" :src="image"></u-avatar>
|
<u-button size="medium" shape="circle" class="u-m-t-40"
|
style="font-size:34rpx" @click="chooseAvatar">选择头像</u-button>
|
</view>
|
<u-form class="form" :model="model" :rules="rules" ref="uForm">
|
<u-form-item label="用户名" prop="username" label-width="120">
|
<u-input placeholder="请输入用户名" v-model="model.username" type="text"></u-input>
|
</u-form-item>
|
<u-form-item label="手机" prop="phone" label-width="120">
|
<u-input placeholder="请输入手机号码" v-model="model.phone" type="text" maxlength="11"></u-input>
|
</u-form-item>
|
<u-form-item label="昵称" prop="nickname" label-width="120">
|
<u-input placeholder="请输入昵称" v-model="model.nickname" type="text"></u-input>
|
</u-form-item>
|
<u-form-item label="姓名" prop="name" label-width="120">
|
<u-input placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
|
</u-form-item>
|
<u-form-item label="邮箱" prop="email" label-width="120">
|
<u-input placeholder="请输入电子邮箱" v-model="model.email" type="text"></u-input>
|
</u-form-item>
|
<u-form-item label="密码" prop="password" label-width="120">
|
<u-input placeholder="请输入密码" v-model="model.password" type="text"></u-input>
|
</u-form-item>
|
</u-form>
|
<view class="form-footer">
|
<u-button class="btn" type="primary" @click="submit">提交</u-button>
|
<u-button class="btn" type="default" @click="cancel">关闭</u-button>
|
</view>
|
</view>
|
</template>
|
<script>
|
import config from "../../../common/config";
|
|
/**
|
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
|
*/
|
export default {
|
data() {
|
return {
|
image: '',
|
model: {
|
avatar:undefined,
|
username:undefined,
|
phone:undefined,
|
nickname:undefined,
|
name:undefined,
|
email:undefined
|
},
|
rules: {
|
username: [
|
{
|
required: true,
|
message: '请输入姓名',
|
trigger: 'blur' ,
|
},
|
{
|
min: 2,
|
max: 32,
|
message: '姓名长度在 2 到 32 个字符',
|
trigger: ['change', 'blur'],
|
}
|
],
|
phone: [
|
{
|
validator: (rule, value, callback) => {
|
return value == '' || this.$u.test.mobile(value);
|
},
|
message: '手机号码不正确',
|
trigger: ['change','blur'],
|
}
|
],
|
password:[
|
{
|
required: true,
|
message: '请输入密码',
|
trigger: 'blur' ,
|
},
|
]
|
},
|
avatarBase64: ''
|
};
|
},
|
onLoad() {
|
this.model = this.vuex_user
|
this.model.password = undefined
|
this.image = this.vuex_config.baseUrl+this.model.avatar
|
},
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
},
|
methods: {
|
chooseAvatar() {
|
let token = this.vuex_token
|
let temp = this
|
uni.chooseImage({
|
success: (chooseImageRes) => {
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
uni.uploadFile({
|
url: temp.vuex_config.baseUrl+config.adminPath+'/sys-file/upload',
|
filePath: tempFilePaths[0],
|
name: 'file',
|
header: {Authorization:'Bearer '+token},
|
success: (res) => {
|
let result =JSON.parse(res.data)
|
temp.image = temp.vuex_config.baseUrl+result.data.url
|
temp.model.avatar = result.data.url
|
}
|
});
|
}
|
});
|
},
|
submit() {
|
this.$refs.uForm.validate(valid => {
|
if (valid) {
|
this.model.userId = this.vuex_userId
|
this.model.username = this.vuex_username
|
|
//更新用户信息
|
this.$u.api.user.updateUserInfo(this.model).then(res => {
|
let temp = this
|
uni.showModal({
|
title: '提示',
|
content: '更新用户信息成功,请重新登录.',
|
showCancel: false,
|
success: function () {
|
temp.$u.api.logout().then(res => {
|
//清空存储信息
|
temp.$u.vuex('vuex_token', '')
|
temp.$u.vuex('vuex_refresh_token', '')
|
temp.$u.vuex('vuex_username', '')
|
temp.$u.vuex('vuex_userId', '')
|
temp.$u.vuex('vuex_client_id', '')
|
temp.$u.vuex('vuex_user', {})
|
|
setTimeout(() => {
|
uni.reLaunch({
|
url: '/pages/sys/login/index'
|
});
|
}, 500);
|
|
});
|
}
|
});
|
})
|
} else {
|
this.$u.toast('您填写的信息有误，请根据提示修正。');
|
}
|
});
|
},
|
cancel() {
|
uni.navigateBack();
|
}
|
}
|
};
|
</script>
|
<style lang="scss">
|
|
</style>
|
