You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
522 lines
22 KiB
522 lines
22 KiB
<template>
|
|
<div style="margin-left: 30px; padding-bottom: 50px">
|
|
<div style="display: flex; align-items: center">
|
|
<div class="dvied"></div>
|
|
<div style="font-weight: bold; color: #333333; font-size: 18px; margin-left: 10px">个人中心</div>
|
|
</div>
|
|
<div style="display: flex; width: 80%">
|
|
<div class="userclass" style="border: 1px solid #dcdfe6; margin-top: 30px">
|
|
<div
|
|
style="
|
|
background: #f5f7fa;
|
|
height: 45px;
|
|
color: #909399;
|
|
line-height: 45px;
|
|
border-bottom: 1px solid #dcdfe6;
|
|
margin-bottom: 30px;
|
|
"
|
|
>
|
|
<p class="userclassp">个人资料</p>
|
|
</div>
|
|
<!-- <el-divider></el-divider> -->
|
|
<div style="padding: 0 20px; font-size: 14px; margin-bottom: 30px" class="baseinfo">
|
|
<div style="text-align: center">
|
|
<userAvatar :user="userinform" />
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 10px;
|
|
height: 35px;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div style="display: flex; align-items: center">
|
|
<img src="/assets/personal/yonghu.png" alt="" />
|
|
<p style="color: #1a1a1a; margin-left: 10px">用户ID</p>
|
|
</div>
|
|
<p style="color: #666666">{{ userinform.userName }}</p>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 10px;
|
|
height: 35px;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div style="display: flex; align-items: center">
|
|
<img src="/assets/personal/shoujitianchong.png" alt="" />
|
|
<p style="color: #1a1a1a; margin-left: 10px">手机号码</p>
|
|
</div>
|
|
<p style="color: #666666">{{ userinform.phonenumber }}</p>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 10px;
|
|
height: 35px;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div style="display: flex; align-items: center">
|
|
<img src="/assets/personal/youxiang.png" alt="" />
|
|
<p style="color: #1a1a1a; margin-left: 10px">用户邮箱</p>
|
|
</div>
|
|
<p style="color: #666666">{{ userinform.email }}</p>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 10px;
|
|
height: 35px;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div style="display: flex; align-items: center">
|
|
<img src="/assets/personal/fuwuleixing.png" alt="" />
|
|
<p style="color: #1a1a1a; margin-left: 10px">用户类型</p>
|
|
</div>
|
|
<p style="color: #666666">{{ userType }}</p>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 10px;
|
|
height: 35px;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div style="display: flex; align-items: center">
|
|
<img src="/assets/personal/rili.png" alt="" />
|
|
<p style="color: #1a1a1a; margin-left: 10px">创建日期</p>
|
|
</div>
|
|
<p style="color: #666666">{{ userinform.createTime }}</p>
|
|
</div>
|
|
<el-divider></el-divider>
|
|
</div>
|
|
</div>
|
|
<div class="basedata" style="border: 1px solid #dcdfe6; margin-top: 30px; width: 688px; height: 430px">
|
|
<div
|
|
style="
|
|
background: #f5f7fa;
|
|
height: 45px;
|
|
color: #909399;
|
|
line-height: 45px;
|
|
border-bottom: 1px solid #dcdfe6;
|
|
margin-bottom: 30px;
|
|
"
|
|
>
|
|
<p class="userclassp">基本资料</p>
|
|
</div>
|
|
<el-tabs type="card" style="">
|
|
<el-tab-pane label="用户信息">
|
|
<el-form
|
|
ref="form"
|
|
:model="userinform"
|
|
:rules="rules"
|
|
label-width="80px"
|
|
style="padding: 0 20px"
|
|
class="changePassword"
|
|
>
|
|
<el-form-item label="用户昵称" prop="nickName">
|
|
<el-input v-model="userinform.nickName" size="mini" />
|
|
</el-form-item>
|
|
<el-form-item label="手机号码" prop="phonenumber">
|
|
<el-input v-model="userinform.phonenumber" maxlength="11" size="mini" />
|
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model="userinform.email" maxlength="50" size="mini" />
|
|
</el-form-item>
|
|
<el-form-item label="性别" v-if="userinform.companyStatus != 2">
|
|
<el-radio-group v-model="userinform.sex">
|
|
<el-radio label="0">男</el-radio>
|
|
<el-radio label="1">女</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item class="inforbtn" style="text-align: right">
|
|
<el-button size="mini" @click="submit">保存</el-button>
|
|
<!-- <el-button
|
|
style="background: #ebedf0; color: #808080; border: none"
|
|
size="mini"
|
|
@click="close"
|
|
>关闭</el-button
|
|
> -->
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="企业简介" v-if="userinform.companyStatus == 2">
|
|
<el-form
|
|
ref="companyInfoForm"
|
|
:model="companyInfoForm"
|
|
:rules="companyInfoFormRules"
|
|
label-width="80px"
|
|
style="padding: 0 20px"
|
|
>
|
|
<el-form-item label="公司简介" prop="companyDesc">
|
|
<el-input :rows="8" type="textarea" v-model="companyInfoForm.companyDesc" size="mini" />
|
|
</el-form-item>
|
|
|
|
<el-form-item class="inforbtn" style="text-align: right">
|
|
<el-button size="mini" @click="saveCom">保存</el-button>
|
|
<!-- <el-button
|
|
style="background: #ebedf0; color: #808080; border: none"
|
|
size="mini"
|
|
@click="passclose"
|
|
>关闭</el-button
|
|
> -->
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="修改密码">
|
|
<el-form
|
|
ref="passform"
|
|
:model="passform"
|
|
:rules="passrules"
|
|
label-width="80px"
|
|
style="padding: 0 20px"
|
|
class="changePassword"
|
|
>
|
|
<!-- <el-form-item label="旧密码" prop="oldPassword">
|
|
<el-input
|
|
v-model="passform.oldPassword"
|
|
placeholder="请输入旧密码"
|
|
type="password"
|
|
size="mini"
|
|
/>
|
|
</el-form-item> -->
|
|
<!-- uuid字段sex -->
|
|
<el-form-item label="手机号" prop="phonenumber">
|
|
<el-input v-model="passform.phonenumber" disabled placeholder="请输入手机号" size="mini" />
|
|
</el-form-item>
|
|
<el-form-item label="验证码" prop="remark" class="passphone">
|
|
<el-input
|
|
style="width: 390px; margin-right: 10px"
|
|
v-model="passform.remark"
|
|
placeholder="请输入验证码"
|
|
size="mini"
|
|
></el-input>
|
|
<el-button size="mini" @click="sendCode" :disabled="isSending || countdown > 0">
|
|
{{
|
|
isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '发送验证码'
|
|
}}
|
|
</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="新密码" prop="password">
|
|
<el-input
|
|
v-model="passform.password"
|
|
placeholder="请输入新密码"
|
|
type="password"
|
|
size="mini"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="确认密码" prop="checkPass">
|
|
<el-input
|
|
v-model="passform.checkPass"
|
|
placeholder="请确认密码"
|
|
type="password"
|
|
size="mini"
|
|
show-password
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item class="inforbtn" style="text-align: right" label-width="100px">
|
|
<el-button size="mini" @click="passsubmit">保存</el-button>
|
|
<!-- <el-button
|
|
style="background: #ebedf0; color: #808080; border: none"
|
|
size="mini"
|
|
@click="passclose"
|
|
>关闭</el-button
|
|
> -->
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
<div class="basedata" style="border: 1px solid #dcdfe6; margin-top: 30px; width: 95%">
|
|
<div
|
|
style="
|
|
background: #f5f7fa;
|
|
height: 45px;
|
|
color: #909399;
|
|
line-height: 45px;
|
|
border-bottom: 1px solid #dcdfe6;
|
|
"
|
|
>
|
|
<p class="userclassp">升级认证</p>
|
|
</div>
|
|
<div style="padding: 33px 48px">
|
|
<userUpgrade :user="userinform" v-if="userGetFlag" @setTip="setTip" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import store from '@/store'
|
|
import userAvatar from './userAvatar'
|
|
import userUpgrade from './userUpgrade'
|
|
import { updateUserProfile, updateUserPwd, getUserProfile, saveCompanyInfo } from '@/api/system/user'
|
|
import { encrypt, decrypt } from '@/util/encrypt'
|
|
import { getCodeUserLogin } from '@/api/system/login'
|
|
import { changePasswd } from '@/api/system/user'
|
|
export default {
|
|
data() {
|
|
const equalToPassword = (rule, value, callback) => {
|
|
if (this.passform.password !== value) {
|
|
callback(new Error('两次输入的密码不一致'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
return {
|
|
isSending: false,
|
|
countdown: 0,
|
|
companyInfoForm: {
|
|
companyDesc: '',
|
|
applyId: '',
|
|
},
|
|
companyInfoFormRules: {
|
|
companyDesc: [{ required: true, message: '公司简介', trigger: 'blur' }],
|
|
},
|
|
userGetFlag: false,
|
|
userType: '普通用户',
|
|
// userinform:{nickName:'',phonenumber:'',email:'',sex:''},
|
|
passform: {},
|
|
// 修改信息表单校验
|
|
rules: {
|
|
nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
|
|
email: [
|
|
{ required: true, message: '邮箱地址不能为空', trigger: 'blur' },
|
|
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
|
|
],
|
|
phonenumber: [
|
|
{ required: true, message: '手机号码不能为空', trigger: 'blur' },
|
|
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' },
|
|
],
|
|
},
|
|
// 修改密码表单校验
|
|
passrules: {
|
|
phonenumber: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
|
|
remark: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
|
|
// oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
|
|
password: [
|
|
{ required: true, message: '新密码不能为空', trigger: 'blur' },
|
|
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
|
|
],
|
|
checkPass: [
|
|
{ required: true, message: '确认密码不能为空', trigger: 'blur' },
|
|
{ required: true, validator: equalToPassword, trigger: 'blur' },
|
|
],
|
|
},
|
|
}
|
|
},
|
|
components: { userAvatar, userUpgrade },
|
|
computed: {
|
|
...mapGetters(['userinform', 'token']),
|
|
},
|
|
mounted() {
|
|
if (this.token) {
|
|
this.getUser()
|
|
}
|
|
// userinform:{nickName:'',phonenumber:'',email:'',sex:''},
|
|
// let {nickName,phonenumber,email,sex}=this.userinform
|
|
// this.userinform={nickName,phonenumber,email,sex}
|
|
this.passform.phonenumber = this.$store.getters.userinform.phonenumber
|
|
},
|
|
methods: {
|
|
setTip(val) {
|
|
this.companyInfoForm.companyDesc = val.dec
|
|
this.companyInfoForm.applyId = val.applyId
|
|
},
|
|
getUser() {
|
|
this.userGetFlag = false
|
|
this.userType = '普通用户'
|
|
getUserProfile().then((response) => {
|
|
this.user = response.data
|
|
this.roleGroup = response.roleGroup
|
|
this.postGroup = response.postGroup
|
|
this.userGetFlag = true
|
|
if (this.user.companyStatus == 2) {
|
|
if (this.user.testerStatus == 2) {
|
|
this.userType = '认证测试公司'
|
|
} else {
|
|
this.userType = '认证公司'
|
|
}
|
|
} else {
|
|
if (this.user.testerStatus == 2) {
|
|
this.userType = '个人测试者'
|
|
} else {
|
|
this.userType = '普通用户'
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//提交修改信息
|
|
submit() {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
const data = {
|
|
userId: this.userinform.userId,
|
|
email: this.userinform.email,
|
|
nickName: this.userinform.nickName,
|
|
phonenumber: this.userinform.phonenumber,
|
|
}
|
|
const userInfo = JSON.parse(JSON.stringify(this.userinform))
|
|
userInfo.email = this.userinform.email
|
|
userInfo.nickName = this.userinform.nickName
|
|
userInfo.phonenumber = this.userinform.phonenumber
|
|
updateUserProfile(data).then((response) => {
|
|
this.$message.success('修改成功')
|
|
store.commit('SET_USERINFORM', userInfo)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
close() {
|
|
this.$router.push({ path: '/console' })
|
|
},
|
|
//提交修改密码
|
|
passsubmit() {
|
|
this.$refs.passform.validate((valid) => {
|
|
if (valid) {
|
|
// updateUserPwd(this.passform.oldPassword, this.passform.newPassword).then(response => {
|
|
const data = {
|
|
phonenumber: this.passform.phonenumber,
|
|
remark: this.passform.remark,
|
|
password: encrypt(this.passform.password),
|
|
checkPass: encrypt(this.passform.checkPass),
|
|
sex: this.passform.sex,
|
|
nickName: this.$store.getters.userinform.nickName,
|
|
userName: this.$store.getters.userinform.userName,
|
|
}
|
|
changePasswd(data).then((response) => {
|
|
if (response.code == 200) {
|
|
this.$message.success('修改成功')
|
|
this.passform = {}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
passclose() {
|
|
this.$router.push({ path: '/console' })
|
|
// this.passform={}
|
|
},
|
|
saveCom() {
|
|
this.$refs['companyInfoForm'].validate((valid) => {
|
|
if (valid) {
|
|
this.companyInfoForm.userId = this.$store.getters.userId
|
|
saveCompanyInfo(this.companyInfoForm).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message.success('修改成功')
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
sendCode() {
|
|
if (!/^1[34578]\d{9}$/.test(this.passform.phonenumber)) {
|
|
return this.$message.error('请输入正确的手机号码')
|
|
}
|
|
if (this.countdown > 0 || this.isSending) {
|
|
return // 防止重复点击发送
|
|
}
|
|
this.isSending = true
|
|
this.startCountdown()
|
|
|
|
setTimeout(() => {
|
|
// 假设发送成功后将isSending重置为false
|
|
this.isSending = false
|
|
}, 100) // 这里使用2秒的延迟来模拟发送过程，你需要替换为实际的发送逻辑
|
|
// 验证码接口
|
|
getCodeUserLogin(this.passform.phonenumber).then((res) => {
|
|
this.isSending = false
|
|
if (res.code == 200) {
|
|
this.passform.sex = res.uuid
|
|
this.$message.success('短信发送成功，请注意查收')
|
|
}
|
|
})
|
|
},
|
|
startCountdown() {
|
|
this.countdown = 60
|
|
const timer = setInterval(() => {
|
|
this.countdown--
|
|
if (this.countdown <= 0) {
|
|
clearInterval(timer)
|
|
}
|
|
}, 1000)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.changePassword >>> .el-input--mini .el-input__inner {
|
|
height: 40px;
|
|
}
|
|
.passphone >>> .el-input {
|
|
margin-right: 0 !important;
|
|
width: 476px !important;
|
|
}
|
|
.passphone >>> .el-button {
|
|
height: 40px;
|
|
border: none;
|
|
background: #0066eb;
|
|
border-radius: 0px 2px 2px 0px !important;
|
|
color: #FFFFFF;
|
|
}
|
|
.dvied {
|
|
width: 4px;
|
|
height: 18px;
|
|
background: #0054a7;
|
|
}
|
|
.userclass {
|
|
width: 380px;
|
|
/* height: 510px; */
|
|
background: #ffffff;
|
|
border-radius: 4px;
|
|
margin: 20px 30px 20px 0;
|
|
/* border: 1px solid rgb(220, 220, 220); */
|
|
border-radius: 5px;
|
|
}
|
|
.userclassp {
|
|
font-weight: bold;
|
|
color: #5c5a5a;
|
|
margin: 0px 0 0 20px;
|
|
}
|
|
.el-divider--horizontal {
|
|
margin: 15px 0 30px 0;
|
|
}
|
|
.baseinfo >>> .el-divider--horizontal {
|
|
margin: 10px 0;
|
|
}
|
|
.inforbtn {
|
|
width: 300px;
|
|
}
|
|
.inforbtn >>> .el-button {
|
|
width: 90px;
|
|
height: 34px;
|
|
background: #0066EB;
|
|
border-radius: 4px;
|
|
color: #ffffff;
|
|
}
|
|
.el-tag {
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.basedata >>> .el-tabs--card > .el-tabs__header .el-tabs__nav {
|
|
border-radius: 0;
|
|
}
|
|
</style>
|
|
|