|
|
@@ -2,12 +2,18 @@
|
|
|
<div>
|
|
|
<el-row>
|
|
|
<el-col :span="6">
|
|
|
- <div class="fl-left avatar-box">
|
|
|
+ <div class="fl-left avatar-box">
|
|
|
<div class="user-card">
|
|
|
- <el-avatar :size="160" :src="userInfo.headerImg" shape="square" @click.native="openChooseImg"></el-avatar>
|
|
|
+ <el-avatar
|
|
|
+ class="user-avatar"
|
|
|
+ :size="160"
|
|
|
+ :src="userInfo.headerImg"
|
|
|
+ shape="square"
|
|
|
+ @click.native="openChooseImg"
|
|
|
+ ></el-avatar>
|
|
|
<div class="user-personality">
|
|
|
<p class="nickname">{{userInfo.nickName}}</p>
|
|
|
- <p>我是个性签名</p>
|
|
|
+ <p class="person-info">这个家伙很懒，什么都没有留下</p>
|
|
|
</div>
|
|
|
<div class="user-information">
|
|
|
<ul>
|
|
|
@@ -35,15 +41,31 @@
|
|
|
<ul>
|
|
|
<li>
|
|
|
<p class="title">密保手机</p>
|
|
|
- <p class="desc">已绑定手机:1245678910 <a href="#">立即修改</a></p>
|
|
|
+ <p class="desc">
|
|
|
+ 已绑定手机:1245678910
|
|
|
+ <a href="#">立即修改</a>
|
|
|
+ </p>
|
|
|
</li>
|
|
|
<li>
|
|
|
<p class="title">密保邮箱</p>
|
|
|
- <p class="desc">已绑定邮箱：[email protected]<a href="#">立即修改</a></p>
|
|
|
+ <p class="desc">
|
|
|
+ 已绑定邮箱：[email protected]
|
|
|
+ <a href="#">立即修改</a>
|
|
|
+ </p>
|
|
|
</li>
|
|
|
<li>
|
|
|
<p class="title">密保问题</p>
|
|
|
- <p class="desc">未设置密保问题 <a href="#">去设置</a></p>
|
|
|
+ <p class="desc">
|
|
|
+ 未设置密保问题
|
|
|
+ <a href="#">去设置</a>
|
|
|
+ </p>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <p class="title">修改密码</p>
|
|
|
+ <p class="desc">
|
|
|
+ 修改个人密码
|
|
|
+ <a href="#" @click="showPassword=true">修改密码</a>
|
|
|
+ </p>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</el-tab-pane>
|
|
|
@@ -52,53 +74,119 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
- <ChooseImg ref="chooseImg" @enter-img="enterImg"/>
|
|
|
- <!-- <div>用户ID：{{userInfo.uuid}}</div>-->
|
|
|
- <!-- <div>用户昵称：{{userInfo.nickName}}</div>-->
|
|
|
- <!-- <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>-->
|
|
|
+ <ChooseImg ref="chooseImg" @enter-img="enterImg" />
|
|
|
+
|
|
|
+ <el-dialog :visible.sync="showPassword" @close="clearPassword" title="修改密码" width="360px">
|
|
|
+ <el-form :model="pwdModify" :rules="rules" label-width="80px" ref="modifyPwdForm">
|
|
|
+ <el-form-item :minlength="6" label="原密码" prop="password">
|
|
|
+ <el-input show-password v-model="pwdModify.password"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :minlength="6" label="新密码" prop="newPassword">
|
|
|
+ <el-input show-password v-model="pwdModify.newPassword"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :minlength="6" label="确认密码" prop="confirmPassword">
|
|
|
+ <el-input show-password v-model="pwdModify.confirmPassword"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="dialog-footer" slot="footer">
|
|
|
+ <el-button @click="showPassword=false">取 消</el-button>
|
|
|
+ <el-button @click="savePassword" type="primary">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import ChooseImg from "@/components/chooseImg";
|
|
|
-import {setUserInfo} from "@/api/user"
|
|
|
-import { mapGetters, mapMutations } from 'vuex'
|
|
|
-const path = process.env.VUE_APP_BASE_API
|
|
|
+import { setUserInfo,changePassword } from "@/api/user";
|
|
|
+
|
|
|
+import { mapGetters, mapMutations } from "vuex";
|
|
|
+const path = process.env.VUE_APP_BASE_API;
|
|
|
export default {
|
|
|
- name: 'Person',
|
|
|
- data(){
|
|
|
+ name: "Person",
|
|
|
+ data() {
|
|
|
return {
|
|
|
- path:path,
|
|
|
- activeName: 'second',
|
|
|
-
|
|
|
- }
|
|
|
+ path: path,
|
|
|
+ activeName: "second",
|
|
|
+ showPassword: false,
|
|
|
+ pwdModify: {},
|
|
|
+ rules: {
|
|
|
+ password: [
|
|
|
+ { required: true, message: "请输入密码", trigger: "blur" },
|
|
|
+ { min: 6, message: "最少6个字符", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ newPassword: [
|
|
|
+ { required: true, message: "请输入新密码", trigger: "blur" },
|
|
|
+ { min: 6, message: "最少6个字符", trigger: "blur" }
|
|
|
+ ],
|
|
|
+ confirmPassword: [
|
|
|
+ { required: true, message: "请输入确认密码", trigger: "blur" },
|
|
|
+ { min: 6, message: "最少6个字符", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (value !== this.pwdModify.newPassword) {
|
|
|
+ callback(new Error("两次密码不一致"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
},
|
|
|
components: {
|
|
|
- ChooseImg
|
|
|
- },
|
|
|
+ ChooseImg
|
|
|
+ },
|
|
|
computed: {
|
|
|
- ...mapGetters('user', ['userInfo', 'token'])
|
|
|
+ ...mapGetters("user", ["userInfo", "token"])
|
|
|
},
|
|
|
- methods:{
|
|
|
- ...mapMutations('user',['ResetUserInfo']),
|
|
|
- openChooseImg(){
|
|
|
- this.$refs.chooseImg.open()
|
|
|
- },
|
|
|
- async enterImg(url){
|
|
|
- const res = await setUserInfo({headerImg:url,ID:this.userInfo.ID})
|
|
|
- if(res.code == 0){
|
|
|
- this.ResetUserInfo({headerImg:url})
|
|
|
- this.$message({
|
|
|
- type:"success",
|
|
|
- message:"设置成功"
|
|
|
- }
|
|
|
- )
|
|
|
+ methods: {
|
|
|
+ ...mapMutations("user", ["ResetUserInfo"]),
|
|
|
+ savePassword() {
|
|
|
+ this.$refs.modifyPwdForm.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ changePassword({
|
|
|
+ username: this.userInfo.userName,
|
|
|
+ password: this.pwdModify.password,
|
|
|
+ newPassword: this.pwdModify.newPassword
|
|
|
+ }).then((res) => {
|
|
|
+ if(res.code == 0){
|
|
|
+ this.$message.success("修改密码成功！");
|
|
|
+ }
|
|
|
+ this.showPassword = false;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
}
|
|
|
- },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearPassword() {
|
|
|
+ this.pwdModify = {
|
|
|
+ password: "",
|
|
|
+ newPassword: "",
|
|
|
+ confirmPassword: ""
|
|
|
+ };
|
|
|
+ this.$refs.modifyPwdForm.clearValidate();
|
|
|
+ },
|
|
|
+ openChooseImg() {
|
|
|
+ this.$refs.chooseImg.open();
|
|
|
+ },
|
|
|
+ async enterImg(url) {
|
|
|
+ const res = await setUserInfo({ headerImg: url, ID: this.userInfo.ID });
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.ResetUserInfo({ headerImg: url });
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: "设置成功"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
handleClick(tab, event) {
|
|
|
console.log(tab, event);
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.avatar-uploader .el-upload {
|
|
|
@@ -124,67 +212,74 @@ export default {
|
|
|
height: 178px;
|
|
|
display: block;
|
|
|
}
|
|
|
- .avatar-box{
|
|
|
- box-shadow: -2px 0 20px -16px;
|
|
|
- width: 80%;
|
|
|
- height: 100%;
|
|
|
- .user-card{
|
|
|
- min-height: calc(90vh - 200px);
|
|
|
- padding: 30px 20px;
|
|
|
+.avatar-box {
|
|
|
+ box-shadow: -2px 0 20px -16px;
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ .user-avatar{
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .user-card {
|
|
|
+ min-height: calc(90vh - 200px);
|
|
|
+ padding: 30px 20px;
|
|
|
+ text-align: center;
|
|
|
+ .el-avatar {
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .user-personality {
|
|
|
+ padding: 24px 0;
|
|
|
text-align: center;
|
|
|
- .el-avatar{
|
|
|
- border-radius: 50%;
|
|
|
+ p {
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
- .user-personality{
|
|
|
- padding: 24px 0;
|
|
|
- text-align: center;
|
|
|
- p{
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- .nickname{
|
|
|
- font-size: 26px;
|
|
|
- }
|
|
|
+ .nickname {
|
|
|
+ font-size: 26px;
|
|
|
}
|
|
|
- .user-information{
|
|
|
- width: 100%;
|
|
|
+ .person-info{
|
|
|
+ margin-top: 6px;
|
|
|
+ font-size: 14px;
|
|
|
+ color:#999
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user-information {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: left;
|
|
|
+ ul {
|
|
|
+ display: inline-block;
|
|
|
height: 100%;
|
|
|
- text-align: left;
|
|
|
- ul{
|
|
|
- display: inline-block;
|
|
|
- height: 100%;
|
|
|
- li{
|
|
|
- i{
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- padding: 20px 0;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 400;
|
|
|
- color: #606266;
|
|
|
+ li {
|
|
|
+ i {
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
+ padding: 20px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #606266;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .user-addcount{
|
|
|
- ul{
|
|
|
- li{
|
|
|
- .title{
|
|
|
- padding: 10px;
|
|
|
- font-size: 18px;
|
|
|
- color: #696969;
|
|
|
- }
|
|
|
- .desc{
|
|
|
- font-size: 16px;
|
|
|
- padding: 0 10px 20px 10px ;
|
|
|
- color: #A9A9A9;
|
|
|
- a{
|
|
|
- color: rgb(64, 158, 255);
|
|
|
- float: right;
|
|
|
- }
|
|
|
+}
|
|
|
+.user-addcount {
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ .title {
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #696969;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 0 10px 20px 10px;
|
|
|
+ color: #a9a9a9;
|
|
|
+ a {
|
|
|
+ color: rgb(64, 158, 255);
|
|
|
+ float: right;
|
|
|
}
|
|
|
- border-bottom: 2px solid #f0f2f5;
|
|
|
}
|
|
|
+ border-bottom: 2px solid #f0f2f5;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+}
|
|
|
</style>
|
QM303176530