484 lines
14 KiB
Vue
484 lines
14 KiB
Vue
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: kBank
|
||
* @Date: 2023-02-23 15:59:57
|
||
-->
|
||
<template>
|
||
<div class="page">
|
||
<topBar
|
||
v-if="topList.length > 0"
|
||
:top-list="topList"
|
||
:moren="moren"
|
||
/>
|
||
<div class="main">
|
||
<div class="user-info">
|
||
<div class="title">{{ $t('MN_F_17') }}</div>
|
||
<div class="avatar">
|
||
<el-upload
|
||
class="upload-demo"
|
||
:show-file-list="false"
|
||
:action="uploadImgUrl"
|
||
:on-success="handleAvatarSuccess"
|
||
:headers="headers"
|
||
>
|
||
<img
|
||
v-if="userInfo.headPath==''||userInfo.headPath==null"
|
||
style="width: 140px"
|
||
src="@/assets/images/avatar.png"
|
||
alt=""
|
||
>
|
||
<img
|
||
v-if="userInfo.headPath"
|
||
style="width: 140px;height: 140px"
|
||
:src="userInfo.headPath"
|
||
onerror="this.src='';this.οnerrοr=null"
|
||
alt=""
|
||
>
|
||
</el-upload>
|
||
</div>
|
||
<div class="div-boxs" v-if="userInfo.userType!=9">
|
||
<div v-if="userInfo.countryList" class="">
|
||
<span class="" style="padding-right: 20px">{{$t('MN_F_18')}}</span>
|
||
<span v-for="(item,index) in userInfo.countryList">
|
||
{{ item.shortName }}<span v-if="index+1!=userInfo.countryList.length">/</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="div-boxs" v-if="userInfo.userType!=9">
|
||
<div v-if="userInfo.vertexList" class="">
|
||
<span class="" style="padding-right: 20px">{{$t('MN_F_19')}}</span>
|
||
<span v-for="(item,index) in userInfo.vertexList">
|
||
{{ item.vertexName }}<span v-if="index+1!=userInfo.vertexList.length">/</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="div-box" v-if="userInfo.userType!=9">
|
||
<div class="">{{$t('MN_F_20')}}</div>
|
||
<div class="">{{ userInfo.userName }}</div>
|
||
</div>
|
||
<div class="div-box" v-if="userInfo.userType!=9">
|
||
<div class="">{{$t('MN_F_21')}}</div>
|
||
<div class="">{{ userInfo.nickName }}</div>
|
||
</div>
|
||
<div class="div-box">
|
||
<div class="">{{$t('MN_F_T_228')}}</div>
|
||
<div class="">{{ userInfo.userName }}</div>
|
||
</div>
|
||
<div class="div-box">
|
||
<div class="">{{$t('PER_DA_14')}}</div>
|
||
<div class="">{{ userInfo.nickName }}</div>
|
||
</div>
|
||
<div class="div-box" v-if="userInfo.userType!=9">
|
||
<div class="">{{$t('MN_F_22')}}</div>
|
||
<div class="">{{ userInfo.authority==0?$t('ENU_POPUP_TYPE_1'):$t('ENU_POPUP_TYPE_2') }}</div>
|
||
</div>
|
||
<div class="div-box">
|
||
<div class="">{{$t('w_0052')}}</div>
|
||
<div class="">{{ userInfo.phonenumber }}</div>
|
||
</div>
|
||
<div class="div-box" v-if="userInfo.userType!=9">
|
||
<div class="">{{$t('MN_F_24')}}</div>
|
||
<div class="">{{ userInfo.deptName }}</div>
|
||
</div>
|
||
<div class="div-box" v-if="userInfo.userType!=9">
|
||
<div class="">{{$t('MN_F_25')}}</div>
|
||
<div v-if="userInfo.roleList" class="">{{ userInfo.roleList[0].roleName }}</div>
|
||
</div>
|
||
<div class="div-box" v-if="userInfo.userType!=9">
|
||
<div class="">{{$t('PER_DA_9')}}</div>
|
||
<div class="">{{ userInfo.creationTime }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="user-info" style="flex: 1;margin:0 20px;">
|
||
<div class="title">{{$t('MN_F_26')}}</div>
|
||
<div class="user-nav">
|
||
<div v-for="(item,index) in userNavList" class="boxs" @click="naxIndex=index">
|
||
<div :style="naxIndex==index?'color:#C8161D':''">{{ item.name }}</div>
|
||
<div v-if="naxIndex==index" class="line" />
|
||
</div>
|
||
</div>
|
||
<div class="lines" />
|
||
<div class="content">
|
||
<div v-if="naxIndex==0">
|
||
<el-form
|
||
ref="loginForm"
|
||
:model="loginForm"
|
||
:rules="rules"
|
||
class="login-form"
|
||
auto-complete="on"
|
||
label-position="left"
|
||
>
|
||
<el-form-item :label="$t('MN_F_21')" prop="username">
|
||
<el-input
|
||
ref="username"
|
||
v-model="loginForm.username"
|
||
style="width: 600px"
|
||
clearable
|
||
:placeholder="$t('S_C_70')"
|
||
name="username"
|
||
type="text"
|
||
tabindex="1"
|
||
auto-complete="on"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('w_0052')" prop="phone">
|
||
<el-input
|
||
ref="phone"
|
||
v-model="loginForm.phone"
|
||
style="width: 600px"
|
||
clearable
|
||
:placeholder="$t('w_0052')"
|
||
name="phone"
|
||
type="text"
|
||
tabindex="1"
|
||
auto-complete="on"
|
||
max-length="11"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div v-if="naxIndex==1">
|
||
<el-form
|
||
ref="loginForm1"
|
||
:model="loginForm1"
|
||
:rules="rules"
|
||
class="login-form"
|
||
auto-complete="on"
|
||
label-position="left"
|
||
>
|
||
<el-form-item style="margin-left: 12px" :label="$t('PER_DA_37')" prop="oldPassword">
|
||
<el-input
|
||
ref="oldPassword"
|
||
v-model="loginForm1.oldPassword"
|
||
style="width: 600px"
|
||
clearable
|
||
:placeholder="$t('w_0348')"
|
||
name="username"
|
||
type="text"
|
||
tabindex="1"
|
||
show-password
|
||
auto-complete="on"
|
||
max-length="20"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item style="margin-left: 12px" :label="$t('MN_F_29')" prop="newPassword">
|
||
<el-input
|
||
ref="newPassword"
|
||
v-model="loginForm1.newPassword"
|
||
style="width: 600px"
|
||
clearable
|
||
:placeholder="$t('w_0048')"
|
||
name="phone"
|
||
type="text"
|
||
tabindex="1"
|
||
show-password
|
||
auto-complete="on"
|
||
max-length="20"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$t('MN_F_30')" prop="newPassword1">
|
||
<el-input
|
||
ref="newPassword1"
|
||
v-model="loginForm1.newPassword1"
|
||
style="width: 600px"
|
||
clearable
|
||
:placeholder="$t('w_0050')"
|
||
show-password
|
||
name="phone"
|
||
type="text"
|
||
tabindex="1"
|
||
auto-complete="on"
|
||
max-length="20"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<el-button
|
||
size="small"
|
||
class="thebtn2"
|
||
> {{ $t('ENU_P_TYPE0') }}</el-button>
|
||
<el-button
|
||
size="small"
|
||
class="thebtn1"
|
||
@click="submit"
|
||
> {{ $t('MN_F_32') }}</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Editor from '@/components/Editor'
|
||
import * as api from '@/api/translate'
|
||
import topBar from '@/components/topBar'
|
||
import { getToken } from '@/utils/auth'
|
||
export default {
|
||
components: {
|
||
Editor,
|
||
topBar
|
||
},
|
||
data() {
|
||
return {
|
||
fileList: [],
|
||
noneUploadImg: false,
|
||
uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/manage/user/center-head',
|
||
headers: {
|
||
Authorization: getToken()
|
||
},
|
||
coverList: [],
|
||
loginForm: {
|
||
username: '',
|
||
phone: ''
|
||
},
|
||
loginForm1: {
|
||
oldPassword: '',
|
||
newPassword: '',
|
||
newPassword1: ''
|
||
},
|
||
naxIndex: 0,
|
||
moren: 'userCentre',
|
||
userNavList: [{ 'name': this.$t('MN_F_26') }, { 'name': this.$t('MN_F_34') }],
|
||
topList: [
|
||
{
|
||
name: this.$t('MN_F_16'),
|
||
path: 'userCentre'
|
||
}
|
||
],
|
||
ruleForm: {
|
||
functionType: 1,
|
||
startTime: '',
|
||
endTime: '',
|
||
websiteTypes: [],
|
||
publishLocations: [],
|
||
grades: []
|
||
},
|
||
rules: {
|
||
oldPassword: [{ required: true, message: this.$t('w_0498'), trigger: 'blur' },
|
||
{ min: 6, max: 20, message: this.$t('w_0501'), trigger: 'blur' },
|
||
// { pattern: /^(?=.*\d)(?=.*[a-z]).{6,20}$/, message: '请输入6-20位，由大小写字母组合的密码' }
|
||
],
|
||
newPassword: [{ required: true, message: this.$t('w_0499'), trigger: 'blur' },
|
||
{ min: 6, max: 20, message: this.$t('w_0501'), trigger: 'blur' },
|
||
// { pattern: /^(?=.*\d)(?=.*[a-z]).{6,20}$/, message: '请输入6-20位，由大小写字母组合的密码' }
|
||
],
|
||
newPassword1: [{ required: true, message: this.$t('w_0500'), trigger: 'blur' },
|
||
{ min: 6, max: 20, message: this.$t('w_0501'), trigger: 'blur' },
|
||
// { pattern: /^(?=.*\d)(?=.*[a-z]).{6,20}$/, message: '请输入6-20位，由大小写字母组合的密码' }
|
||
],
|
||
username: [{ required: true, message: this.$t('MN_F_T_778'), trigger: 'blur' }],
|
||
phone: [{ required: true, message: this.$t('w_0053'), trigger: 'blur' },
|
||
{ pattern: /^1[3|4|5|6|7|8|9]\d{9}$/, message: this.$t('CK_KS_73') }
|
||
]
|
||
},
|
||
localList: [],
|
||
popList: [],
|
||
webList: [],
|
||
gradeList: [],
|
||
pkId: '',
|
||
funcList: [],
|
||
jsList: [],
|
||
isAdmin: false,
|
||
lookOver: false,
|
||
userInfo: {}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getUserInfo()
|
||
},
|
||
methods: {
|
||
handleAvatarSuccess(response, file, fileList) {
|
||
if (response.code == '200') {
|
||
this.$message({
|
||
message: response.msg,
|
||
type: 'success'
|
||
})
|
||
this.userInfo.headPath = response.data.url
|
||
}
|
||
},
|
||
getUserInfo() {
|
||
api.getUserInfo().then((res) => {
|
||
this.userInfo = res.data
|
||
})
|
||
},
|
||
submit() {
|
||
if (this.naxIndex == 0) {
|
||
this.$refs.loginForm.validate((valid) => {
|
||
if (valid) {
|
||
api.updateUserInfo({ 'nickName': this.loginForm.username, 'phone': this.loginForm.phone }).then((res) => {
|
||
if (res.code == '200') {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'success'
|
||
})
|
||
this.getUserInfo()
|
||
this.loginForm = {
|
||
'userName': '',
|
||
'phone': ''
|
||
}
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
if (this.naxIndex == 1) {
|
||
this.$refs.loginForm1.validate((valid) => {
|
||
if (valid) {
|
||
if (this.loginForm1.newPassword1 !== this.loginForm1.newPassword) {
|
||
this.$message({
|
||
message: this.$t('MN_F_35')
|
||
})
|
||
return
|
||
}
|
||
api.updateUserPwd({ 'oldPassword': this.loginForm1.oldPassword, 'newPassword': this.loginForm1.newPassword }).then((res) => {
|
||
if (res.code == '200') {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'success'
|
||
})
|
||
this.getUserInfo()
|
||
this.loginForm1 = {
|
||
'oldPassword': '',
|
||
'oldPassword1': '',
|
||
'newPassword': ''
|
||
}
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.upload-demo{
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|
||
::v-deep .el-form-item__error{
|
||
left: 80px;
|
||
}
|
||
.content{
|
||
padding: 20px 20px;
|
||
}
|
||
.lines{
|
||
height: 4px;
|
||
background: rgba(0,0,0,0.05);
|
||
opacity: 1;
|
||
position: absolute;
|
||
top: 108px;
|
||
width: 100%;
|
||
}
|
||
.user-info{
|
||
width: 440px;
|
||
height: 868px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
|
||
opacity: 1;
|
||
position: relative;
|
||
.user-nav{
|
||
display: flex;
|
||
.boxs{
|
||
text-align: center;
|
||
cursor: pointer;
|
||
padding: 30px 30px 10px 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
.line{
|
||
width: 60px;
|
||
height: 4px;
|
||
background: #C8161D;
|
||
border-radius: 0px 0px 0px 0px;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
.avatar{
|
||
height: 190px;
|
||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
.div-boxs{
|
||
//height: 60px;
|
||
padding:15px 20px;
|
||
line-height: 20px;
|
||
//line-height: 60px;
|
||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||
color: #000;
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-weight: 600;
|
||
flex-wrap: wrap;
|
||
}
|
||
.div-box{
|
||
padding:15px 20px;
|
||
line-height: 20px;
|
||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||
color: #000;
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-weight: 600;
|
||
flex-wrap: wrap;
|
||
}
|
||
.title{
|
||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||
color: #000;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
padding: 20px 0 10px 20px;
|
||
}
|
||
}
|
||
.page {
|
||
padding: 20px;
|
||
background: #f9f9f9;
|
||
font-size: 14px;
|
||
.main {
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
|
||
display: flex;
|
||
}
|
||
::v-deep .el-select {
|
||
width: 100%;
|
||
}
|
||
}
|
||
.footer {
|
||
height: 68px;
|
||
background: #ffffff;
|
||
box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
|
||
// margin: 0 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.thebtn1 {
|
||
background: #3181e5;
|
||
color: #ffffff;
|
||
padding: 9px 45px;
|
||
}
|
||
.thebtn2 {
|
||
background: #cccccc;
|
||
color: #ffffff;
|
||
padding: 9px 45px;
|
||
}
|
||
}
|
||
</style>
|