vue实现个人信息查看和密码修改功能实现个人信息查看和密码修改功能
下面一段代码给大家介绍vue实现个人信息查看和密码修改功能，具体代码如下所述：
//用了element组件，自己要加载和引入
<template>
<div class="all-container">
<div class="all-container-padding bg" >
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="基本信息" name="first">
<el-form :model="userlist" :rules="rules" ref="EditorUserForms">
<el-form-item label="头像" prop="avatar_url" :label-width="formLabelWidth">
<el-upload class="avatar-uploader" action="//shujiaoke.oss-cn-hangzhou.aliyuncs.com" :before-upload="beforeupload" :data="uploadParm" :show-file-
list="false" :on-success="handleUpSuccess">
<img v-if="userlist.avatar_url" :src="userlist.avatar_url" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon " style="width:80px;height:80px;"></i>
</el-upload>
</el-form-item>
<el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
<el-col :span="8"> <el-input v-model="userlist.username" disabled ></el-input></el-col>
</el-form-item>
<el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
<el-col :span="8"> <el-input v-model="userlist.phone" placeholder="请输入电话"></el-input></el-col>
</el-form-item>
<el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
<el-col :span="8"> <el-input v-model="userlist.email" placeholder="请输入邮箱"></el-input></el-col>
</el-form-item>
<el-form-item label="用户角色" prop="full_name" :label-width="formLabelWidth">
<el-col :span="8">
<el-input v-model="userlist.full_name" disabled ></el-input>
</el-col>
</el-form-item>
</el-form>
<div class="grid-content bg-purple">
<el-button type="primary" @click="EditorUserClick('userlist')" >保存</el-button>
</div>
</el-tab-pane>
<el-tab-pane label="修改密码" name="second">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="原密码" prop="pass" :label-width="formLabelWidth">
<el-col :span="8"> <el-input v-model="ruleForm.pass" placeholder="请输入原密码" type="password"></el-input></el-col>
</el-form-item>
<el-form-item label="新密码" prop="newpass" :label-width="formLabelWidth">
<el-col :span="8"><el-input v-model="ruleForm.newpass" placeholder="请输入新密码" id="newkey" type="password"></el-input></el-col>
</el-form-item>
<el-form-item label="重复新密码" prop="checknewpass" :label-width="formLabelWidth">
<el-col :span="8"> <el-input v-model="ruleForm.checknewpass" placeholder="请再次输入新密码" id='newkey1' type="password"></el-input></el-col>
</el-form-item>
</el-form>
<div class="grid-content bg-purple">
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
//这些不要在意，这些是我们自定义的接口，用的时候就直接拿来了
import {fetchAll,fetchByID,fetchList,postData,putData,deleteByID,deleteAllByID,guid,bytesToSize} from "@/api/dbhelper";
//这一步很重要，一般我们直接从后台拿过来输出来会是在data里面，但是我发现却在store里面，这里就要用到vuex
import { mapGetters } from "vuex";
export default {
data() {
/*****检验两次密码是否一致***/
var validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
if (this.ruleForm.checknewpass !== "") {
this.$refs.ruleForm.validateField("checknewpass");
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
评论0