1. 个人信息
自定义页面 路径 /people/info.do对应模版 people/info.htm
[!tip] 注意这里的路径变化，
people/*.do，会员登录之后操作的页面需要用people/定义，同时文件info.htm也推荐放在模版文件夹中的people目录
HTML
<div id="app" v-cloak>
<!--表单-start-->
<el-main>
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right"
size="small">
<el-row
:gutter="0"
justify="start" align="top">
<el-col :span="12">
<el-form-item label="用户名" prop="peopleName">
<el-input
v-model="form.peopleName"
:disabled="true"
:readonly="false"
:clearable="true"
placeholder="请输入用户名">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="会员类别" prop="puLevel">
<el-select v-model="form.puLevel"
@visible-change="puLevelOptionsGet"
:filterable="false"
:disabled="true"
:multiple="false" :clearable="true"
placeholder="请选择会员类别">
<el-option v-for='item in puLevelOptions' :key="item.dictValue"
:value="item.dictValue"
:label="item.dictLabel"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row
:gutter="0"
justify="start" align="top">
<el-col :span="12">
<el-form-item label="手机号" prop="peoplePhone">
<el-input
v-model="form.peoplePhone"
:disabled="true"
:readonly="false"
:clearable="true"
placeholder="请输入手机号">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="身份证号" prop="puCard">
<el-input
v-model="form.puCard"
:disabled="false"
:readonly="false"
:clearable="true"
placeholder="请输入身份证号">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row
:gutter="0"
justify="start" align="top">
<el-col :span="12">
<el-form-item label="真实姓名" prop="puRealName">
<el-input
v-model="form.puRealName"
:disabled="false"
:readonly="false"
:clearable="true"
placeholder="请输入真实姓名">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="生日" prop="puBirthday">
<el-date-picker
v-model="form.puBirthday"
placeholder="请选择生日" :readonly="false"
:disabled="false"
:editable="true"
:clearable="true"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row
:gutter="0"
justify="start" align="top">
<el-col :span="12">
</el-col>
<el-col :span="12">
</el-col>
</el-row>
<el-form-item label="用户头像" prop="puIcon">
<el-upload
:file-list="form.puIcon"
:action="ms.base+'/file/upload.do'"
:on-remove="puIconhandleRemove"
:style="{width:''}"
:limit="1"
:disabled="false"
:data="{uploadPath:'/people/user','isRename':true,'appId':true}"
:on-success="puIconBasicPicSuccess"
:on-exceed="puIconhandleExceed"
accept="image/*"
list-type="picture-card">
<div slot="tip" >最多上传1张头像</div>
</el-upload>
</el-form-item>
</el-form>
</el-main>
<el-header >
<el-button type="primary" icon="iconfont icon-baocun" size="mini" @click="save()"
:loading="saveDisabled">保存
</el-button>
</el-header>
<!--表单-stop-->
</div>
JavaScript
<script>
var form = new Vue({
el: '#app',
data: function () {
return {
loading: false,
saveDisabled: false,
//表单数据
form: {
// 用户名
peopleName: '',
// 密码
peoplePassword: '',
// 手机号
peoplePhone: '',
// 邮箱
// peopleMail: '',
// 真实姓名
puRealName: '',
// 生日
puBirthday: '',
// 身份证号
puCard: '',
// 会员类别
puLevel: '',
// 审核状态
peopleState: 0,
// 用户头像
puIcon: '',
// 介绍
introduce: '',
},
puIcon: null,
puLevelOptions: [],
rules: {
// 用户名
peopleName: [{"required": true, "message": "用户名不能为空"}, {
"min": 0,
"max": 20,
"message": "用户名长度必须为0-20"
}],
// 密码
peoplePassword: [],
// 手机号
peoplePhone: [{"required": true, "message": "手机号不能为空"}, {
"pattern": /^1[34578]\d{9}$/,
"message": "手机号格式不匹配"
}, {"min": 11, "max": 11, "message": "手机号长度必须为11位"}],
// 真实姓名
puRealName: [{"min": 0, "max": 20, "message": "真实姓名长度必须为0-20"}],
// 邮箱
peopleMail: [{
"pattern": "^([a-z0-9A-Z]+[-|\\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-zA-Z]{2,}$",
"message": "邮箱格式不匹配"
}, {
"min": 1,
"max": 50,
"message": "邮箱长度必须为1-50"
}],
},
}
},
watch: {},
computed: {},
methods: {
//上传超过限制
puIconhandleExceed: function (files, fileList) {
this.$notify({
title: '当前最多上传1张头像',
type: 'warning'
});
},
//puIcon文件上传完成回调
puIconBasicPicSuccess: function (response, file, fileList) {
if (response.result) {
this.puIcon = response.data;
this.form.puIcon = [];
this.form.puIcon.push({url: file.url, path: response.data, uid: file.uid});
} else {
this.$notify({
title: response.msg,
type: 'warning'
});
}
},
puIconhandleRemove: function (file, files) {
var index = -1;
index = this.form.puIcon.findIndex(function (text) {
return text == file;
});
if (index != -1) {
this.form.puIcon.splice(index, 1);
}
},
//保存
save: function () {
var that = this;
//请求update接口
var url = "/people/user/update.do"
this.$refs.form.validate(function (valid) {
if (valid) {
that.saveDisabled = true;
var data = JSON.parse(JSON.stringify(that.form));
data.puIcon = that.puIcon;
for (key in data) {
if (!data[key]) {
delete data[key];
}
}
ms.http.post(url, data).then(function (data) {
if (data.result) {
that.$notify({
title: "成功",
message: "保存成功",
type: 'success'
});
} else {
that.$notify({
title: "错误",
message: data.msg,
type: 'warning'
});
}
that.saveDisabled = false;
});
} else {
return false;
}
})
},
//获取当前用户
get: function () {
var that = this;
this.loading = true
ms.http.get("/people/user/info.do").then(function (res) {
that.loading = false
if (res.result && res.data) {
that.form = res.data;
that.puIcon = that.form.puIcon;
if (that.puIcon) {
that.form.puIcon = [{url: that.puIcon, path: that.puIcon, uid: ""}];
}
}
});
},
//获取puLevel数据源
puLevelOptionsGet: function () {
var that = this;
ms.http.get(ms.base + '/mdiy/dict/list.do', {dictType: '用户等级类型', pageSize: 99999}).then(function (res) {
that.puLevelOptions = res.data.rows;
});
},
},
created: function () {
var that = this;
this.puLevelOptionsGet();
this.get();
},
mounted: function () {
}
});
</script>