|
|
|
@ -2,106 +2,158 @@
|
|
|
|
|
<el-dialog v-dialogDrag :title="$t('global.personalDetails')" :visible.sync="visible" width="470px" :before-close="doClose" class="userInfo_box">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="form_box">
|
|
|
|
|
<div class="title">名称:</div>
|
|
|
|
|
<div class="title">{{ $t('global.name') }}:</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div v-show="nameShow" class="show_box">
|
|
|
|
|
<span>{{ userInfo.name }}</span>
|
|
|
|
|
<i class="el-icon-edit" @click="switcherName" />
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="!nameShow" class="flex_box">
|
|
|
|
|
<el-input v-model="editInfo.name" placeholder="请输入名称" size="mini" class="input_box" />
|
|
|
|
|
<el-input v-model="editInfo.name" :placeholder="$t('global.enterName')" maxlength="20" size="mini" class="input_box" />
|
|
|
|
|
<div class="button_box">
|
|
|
|
|
<el-button size="mini" class="button_box" @click="saveName">{{ $t('global.save') }}</el-button>
|
|
|
|
|
<el-button size="mini" class="button_box" :disabled="!editInfo.name" @click="saveName">{{ $t('global.save') }}</el-button>
|
|
|
|
|
<el-button size="mini" class="button_box" type="text" @click="switcherName">{{ $t('global.cancel') }}</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form_box">
|
|
|
|
|
<div class="title">昵称:</div>
|
|
|
|
|
<div class="title">{{ $t('global.nickName') }}:</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div v-show="nickNameShow" class="show_box">
|
|
|
|
|
<span>{{ userInfo.nickname }}</span>
|
|
|
|
|
<i class="el-icon-edit" @click="switcherNickname" />
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="!nickNameShow" class="flex_box">
|
|
|
|
|
<el-input v-model="editInfo.nickname" placeholder="请输入昵称" size="mini" class="input_box" />
|
|
|
|
|
<el-input v-model="editInfo.nickname" :placeholder="$t('global.enterNickname')" maxlength="20" size="mini" class="input_box" />
|
|
|
|
|
<div class="button_box">
|
|
|
|
|
<el-button size="mini" class="button_box" @click="saveNickName">{{ $t('global.save') }}</el-button>
|
|
|
|
|
<el-button size="mini" class="button_box" :disabled="!editInfo.nickname" @click="saveNickName">{{ $t('global.save') }}</el-button>
|
|
|
|
|
<el-button size="mini" class="button_box" type="text" @click="switcherNickname">{{ $t('global.cancel') }}</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form_box">
|
|
|
|
|
<div class="title">手机号:</div>
|
|
|
|
|
<div class="title">{{ $t('global.mobile') }}:</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div v-show="mobileShow" class="show_box">
|
|
|
|
|
<span>{{ userInfo.mobile }}</span>
|
|
|
|
|
<i class="el-icon-edit" @click="switcherMobile" />
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="!mobileShow" class="flex_box">
|
|
|
|
|
<el-input v-model="editInfo.mobile" placeholder="请输入手机号" size="mini" class="input_box" />
|
|
|
|
|
<el-input v-model="editInfo.mobile" placeholder="验证码" size="mini" class="code_box" style="margin-top: 10px;" />
|
|
|
|
|
<el-button size="mini" style="margin-top: 10px; margin-right: 10px;" @click="sendMobileCode">发送验证码</el-button>
|
|
|
|
|
<el-input v-model="editInfo.mobile" :placeholder="$t('global.enterMobile')" maxlength="11" size="mini" class="input_box" />
|
|
|
|
|
<el-input v-model="mobileCode" :placeholder="$t('global.verificationCode')" size="mini" class="code_box" style="margin-top: 10px;" />
|
|
|
|
|
<el-button size="mini" style="margin-top: 10px; margin-right: 10px;" :disabled="mobileCodeTime != 0" @click="sendMobileCode">
|
|
|
|
|
{{ $t('global.sendCode') }}
|
|
|
|
|
<span v-if="mobileCodeTime">{{ mobileCodeTime }}</span>
|
|
|
|
|
</el-button>
|
|
|
|
|
<div class="button_box" style="margin-top: 10px;">
|
|
|
|
|
<el-button size="mini" class="button_box" @click="saveMobile">{{ $t('global.save') }}</el-button>
|
|
|
|
|
<el-button size="mini" class="button_box" :disabled="!mobileCode" @click="saveMobile">{{ $t('global.save') }}</el-button>
|
|
|
|
|
<el-button size="mini" class="button_box" type="text" @click="switcherMobile">{{ $t('global.cancel') }}</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form_box">
|
|
|
|
|
<div class="title">邮箱:</div>
|
|
|
|
|
<div class="title">{{ $t('global.email') }}:</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div v-show="emailShow" class="show_box">
|
|
|
|
|
<span>{{ userInfo.email }}</span>
|
|
|
|
|
<i class="el-icon-edit" @click="switcherEmail" />
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="!emailShow" class="flex_box">
|
|
|
|
|
<el-input v-model="editInfo.email" placeholder="请输入邮箱" size="mini" class="input_box" />
|
|
|
|
|
<el-input v-model="editInfo.mobile" placeholder="验证码" size="mini" class="code_box" style="margin-top: 10px;" />
|
|
|
|
|
<el-button size="mini" style="margin-top: 10px; margin-right: 10px;" @click="sendMobileCode">发送验证码</el-button>
|
|
|
|
|
<el-input v-model="editInfo.email" :placeholder="$t('global.enterEmail')" size="mini" class="input_box" />
|
|
|
|
|
<el-input v-model="emailCode" :placeholder="$t('global.verificationCode')" size="mini" class="code_box" style="margin-top: 10px;" />
|
|
|
|
|
<el-button size="mini" style="margin-top: 10px; margin-right: 10px;" :disabled="emailCodeTime != 0" @click="sendEmailCode">
|
|
|
|
|
{{ $t('global.sendCode') }}
|
|
|
|
|
<span v-if="emailCodeTime">{{ emailCodeTime }}</span>
|
|
|
|
|
</el-button>
|
|
|
|
|
<div class="button_box" style="margin-top: 10px;">
|
|
|
|
|
<el-button size="mini" class="button_box" @click="saveEmail">{{ $t('global.save') }}</el-button>
|
|
|
|
|
<el-button size="mini" class="button_box" :disabled="!emailCode" @click="saveEmail">{{ $t('global.save') }}</el-button>
|
|
|
|
|
<el-button size="mini" class="button_box" type="text" @click="switcherEmail">{{ $t('global.cancel') }}</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form_box">
|
|
|
|
|
<div class="title">{{ $t('global.passWord') }}:</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div v-show="passwordShow" class="show_box">
|
|
|
|
|
<span>******</span>
|
|
|
|
|
<i class="el-icon-edit" @click="switcherPassWord" />
|
|
|
|
|
</div>
|
|
|
|
|
<div v-show="!passwordShow" class="flex_box">
|
|
|
|
|
<!-- <div class="passWord_box">
|
|
|
|
|
<span>原密码:</span>
|
|
|
|
|
<el-input v-model="oldPassWord" placeholder="请输入原密码" maxlength="8" show-password size="mini" class="input_box" />
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="passWord_box">
|
|
|
|
|
<span>{{ $t('global.newPassWord') }}:</span>
|
|
|
|
|
<el-input v-model="newPassWord1" :placeholder="$t('global.enterPassWord')" maxlength="20" show-password size="mini" class="input_box" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="passWord_box">
|
|
|
|
|
<span>{{ $t('global.newPassWord') }}:</span>
|
|
|
|
|
<el-input v-model="newPassWord2" :placeholder="$t('global.enterPassWord')" maxlength="20" show-password size="mini" class="input_box" />
|
|
|
|
|
</div>
|
|
|
|
|
<span class="tip_box">{{ tip }}</span>
|
|
|
|
|
<div class="button_box" style="width: 150px;">
|
|
|
|
|
<el-button size="mini" class="button_box" @click="savePassWord">{{ $t('global.save') }}</el-button>
|
|
|
|
|
<el-button size="mini" class="button_box" type="text" @click="switcherPassWord">{{ $t('global.cancel') }}</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button type="primary" @click="doClose">{{ $t('global.confirm') }}</el-button>
|
|
|
|
|
<el-button type="primary" @click="doClose">{{ $t('global.close') }}</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// import getUserinfoName from '@/api/management/user';
|
|
|
|
|
import md5 from 'js-md5';
|
|
|
|
|
import { getInfo } from '@/api/login';
|
|
|
|
|
import { getDesignToken } from '@/utils/auth'; // 验权
|
|
|
|
|
import { getUserinfoName, getUserinfoNickname, getUserinfoMobile, getUserinfoMobileCode, getUserinfoEmailCode, getUserinfoEmail, getUserinfoPassword } from '@/api/management/user';
|
|
|
|
|
import { setInterval, clearInterval } from 'timers';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
visible: false,
|
|
|
|
|
userInfo: {
|
|
|
|
|
name: '周渊远',
|
|
|
|
|
nickname: 'zyy',
|
|
|
|
|
mobile: '15691852838',
|
|
|
|
|
email: '1787816799@qq.com'
|
|
|
|
|
name: '',
|
|
|
|
|
nickname: '',
|
|
|
|
|
mobile: '',
|
|
|
|
|
email: '',
|
|
|
|
|
passWord: ''
|
|
|
|
|
},
|
|
|
|
|
editInfo: {
|
|
|
|
|
name: '周渊远',
|
|
|
|
|
nickname: 'zyy',
|
|
|
|
|
mobile: '15691852838',
|
|
|
|
|
email: '1787816799@qq.com'
|
|
|
|
|
name: '',
|
|
|
|
|
nickname: '',
|
|
|
|
|
mobile: '',
|
|
|
|
|
email: '',
|
|
|
|
|
passWord: ''
|
|
|
|
|
},
|
|
|
|
|
nationCode: '86',
|
|
|
|
|
nameShow: true,
|
|
|
|
|
nickNameShow: true,
|
|
|
|
|
mobileShow: true,
|
|
|
|
|
emailShow: true,
|
|
|
|
|
passwordShow: true,
|
|
|
|
|
mobileCode: null,
|
|
|
|
|
emailCode: null,
|
|
|
|
|
|
|
|
|
|
oldPassWord: null,
|
|
|
|
|
newPassWord1: null,
|
|
|
|
|
newPassWord2: null,
|
|
|
|
|
|
|
|
|
|
mobileCodeTime: 0,
|
|
|
|
|
emailCodeTime: 0
|
|
|
|
|
emailCodeTime: 0,
|
|
|
|
|
|
|
|
|
|
emailTime: null,
|
|
|
|
|
mobileTime: null,
|
|
|
|
|
tip: ''
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
@ -112,75 +164,169 @@ export default {
|
|
|
|
|
methods: {
|
|
|
|
|
doShow() {
|
|
|
|
|
this.visible = true;
|
|
|
|
|
getInfo(getDesignToken()).then(response => {
|
|
|
|
|
const user = response.data;
|
|
|
|
|
this.userInfo = {
|
|
|
|
|
name: user.name,
|
|
|
|
|
nickname: user.nickname,
|
|
|
|
|
mobile: user.mobile,
|
|
|
|
|
email: user.email,
|
|
|
|
|
passWord: ''
|
|
|
|
|
};
|
|
|
|
|
this.oldPassWord = user.password;
|
|
|
|
|
this.nationCode = user.nationCode ? user.nationCode : '86';
|
|
|
|
|
}).catch(error => {
|
|
|
|
|
console.log(error, '请求个人信息失败');
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
doClose() {
|
|
|
|
|
this.visible = false;
|
|
|
|
|
},
|
|
|
|
|
switcherName() {
|
|
|
|
|
this.editInfo.name = this.userInfo.name;
|
|
|
|
|
this.nameShow = !this.nameShow;
|
|
|
|
|
},
|
|
|
|
|
async saveName() {
|
|
|
|
|
if (this.editInfo.name) {
|
|
|
|
|
// try {
|
|
|
|
|
// const res = await getUserinfoName(this.info.id, this.name);
|
|
|
|
|
// console.log(res);
|
|
|
|
|
this.userInfo.name = this.editInfo.name;
|
|
|
|
|
this.nameShow = !this.nameShow;
|
|
|
|
|
// } catch (error) {
|
|
|
|
|
// console.log(error, '错误');
|
|
|
|
|
// }
|
|
|
|
|
try {
|
|
|
|
|
await getUserinfoName(this.info.id, this.editInfo.name);
|
|
|
|
|
this.userInfo.name = this.editInfo.name;
|
|
|
|
|
this.nameShow = !this.nameShow;
|
|
|
|
|
this.$store.commit('SET_NAME', this.editInfo.name);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error, '错误');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
switcherNickname() {
|
|
|
|
|
this.editInfo.nickname = this.userInfo.nickname;
|
|
|
|
|
this.nickNameShow = !this.nickNameShow;
|
|
|
|
|
},
|
|
|
|
|
async saveNickName() {
|
|
|
|
|
if (this.editInfo.nickname) {
|
|
|
|
|
// try {
|
|
|
|
|
// const res = await getUserinfoNickname(this.info.id, this.name);
|
|
|
|
|
// console.log(res);
|
|
|
|
|
this.userInfo.name = this.editInfo.nickname;
|
|
|
|
|
this.nickNameShow = !this.nickNameShow;
|
|
|
|
|
// this.nameShow = !this.nameShow;
|
|
|
|
|
// } catch (error) {
|
|
|
|
|
// console.log(error, '错误');
|
|
|
|
|
// }
|
|
|
|
|
try {
|
|
|
|
|
await getUserinfoNickname(this.info.id, this.editInfo.nickname);
|
|
|
|
|
this.userInfo.nickname = this.editInfo.nickname;
|
|
|
|
|
this.nickNameShow = !this.nickNameShow;
|
|
|
|
|
this.$store.commit('SET_NICKNAME', this.editInfo.nickname);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error, '错误');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
switcherMobile() {
|
|
|
|
|
this.editInfo.mobile = this.userInfo.mobile;
|
|
|
|
|
this.mobileShow = !this.mobileShow;
|
|
|
|
|
},
|
|
|
|
|
async saveMobile() {
|
|
|
|
|
if (this.editInfo.mobile) {
|
|
|
|
|
// try {
|
|
|
|
|
// const res = await getUserinfoMobile(this.info.id, this.name);
|
|
|
|
|
// console.log(res);
|
|
|
|
|
this.userInfo.name = this.editInfo.mobile;
|
|
|
|
|
this.mobileShow = !this.mobileShow;
|
|
|
|
|
// } catch (error) {
|
|
|
|
|
// console.log(error, '错误');
|
|
|
|
|
// }
|
|
|
|
|
if (this.editInfo.mobile && this.mobileCode) {
|
|
|
|
|
try {
|
|
|
|
|
const params = {
|
|
|
|
|
mobile: this.editInfo.mobile,
|
|
|
|
|
nationCode: this.nationCode,
|
|
|
|
|
validCode: this.mobileCode
|
|
|
|
|
};
|
|
|
|
|
await getUserinfoMobile(this.info.id, params);
|
|
|
|
|
this.userInfo.mobile = this.editInfo.mobile;
|
|
|
|
|
this.mobileShow = !this.mobileShow;
|
|
|
|
|
this.mobileCode = '';
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error, '错误');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
sendMobileCode() {
|
|
|
|
|
|
|
|
|
|
async sendMobileCode() {
|
|
|
|
|
const param = {
|
|
|
|
|
mobile: this.editInfo.mobile,
|
|
|
|
|
nationCode: this.nationCode
|
|
|
|
|
};
|
|
|
|
|
try {
|
|
|
|
|
this.mobileCodeTime = 30;
|
|
|
|
|
this.mobileTime = setInterval(() => {
|
|
|
|
|
this.mobileCodeTime--;
|
|
|
|
|
if (this.mobileCodeTime <= 0) {
|
|
|
|
|
this.mobileCodeTime = 0;
|
|
|
|
|
clearInterval(this.mobileTime);
|
|
|
|
|
this.mobileTime = null;
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
await getUserinfoMobileCode(param);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
this.$messageBox(this.$t('global.codeFaile'));
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
switcherEmail() {
|
|
|
|
|
this.editInfo.email = this.userInfo.email;
|
|
|
|
|
this.emailShow = !this.emailShow;
|
|
|
|
|
},
|
|
|
|
|
async saveEmail() {
|
|
|
|
|
if (this.editInfo.email) {
|
|
|
|
|
// try {
|
|
|
|
|
// const res = await getUserinfoEmail(this.info.id, this.name);
|
|
|
|
|
// console.log(res);
|
|
|
|
|
this.userInfo.name = this.editInfo.email;
|
|
|
|
|
this.emailShow = !this.emailShow;
|
|
|
|
|
// } catch (error) {
|
|
|
|
|
// console.log(error, '错误');
|
|
|
|
|
// }
|
|
|
|
|
if (this.editInfo.email && this.emailCode) {
|
|
|
|
|
try {
|
|
|
|
|
const params = {
|
|
|
|
|
email: this.editInfo.email,
|
|
|
|
|
validCode: this.emailCode
|
|
|
|
|
};
|
|
|
|
|
await getUserinfoEmail(this.info.id, params);
|
|
|
|
|
this.userInfo.email = this.editInfo.email;
|
|
|
|
|
this.emailShow = !this.emailShow;
|
|
|
|
|
this.emailCode = '';
|
|
|
|
|
} catch (error) {
|
|
|
|
|
this.$messageBox('更新邮箱失败');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async sendEmailCode() {
|
|
|
|
|
try {
|
|
|
|
|
this.emailCodeTime = 30;
|
|
|
|
|
this.emailTime = setInterval(() => {
|
|
|
|
|
this.emailCodeTime--;
|
|
|
|
|
if (this.emailCodeTime <= 0) {
|
|
|
|
|
this.emailCodeTime = 0;
|
|
|
|
|
clearInterval(this.emailTime);
|
|
|
|
|
this.emailTime = null;
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
await getUserinfoEmailCode(this.editInfo.email);
|
|
|
|
|
} catch (error) {
|
|
|
|
|
this.$messageBox(this.$t('global.codeFaile'));
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
switcherPassWord() {
|
|
|
|
|
this.passwordShow = !this.passwordShow;
|
|
|
|
|
this.tip = '';
|
|
|
|
|
},
|
|
|
|
|
async savePassWord() {
|
|
|
|
|
this.tip = '';
|
|
|
|
|
if (this.newPassWord1.length <= 5 || this.newPassWord2.length <= 5) {
|
|
|
|
|
this.tip = this.$t('global.passWordLength');
|
|
|
|
|
} else {
|
|
|
|
|
this.uploadPassword();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async uploadPassword() {
|
|
|
|
|
console.log(this.newPassWord1, this.newPassWord2);
|
|
|
|
|
if (this.newPassWord1 == this.newPassWord2) {
|
|
|
|
|
// 请求更新密码
|
|
|
|
|
const param = {
|
|
|
|
|
password: md5(this.newPassWord2)
|
|
|
|
|
};
|
|
|
|
|
if (this.oldPassWord) {
|
|
|
|
|
param['oldPassword'] = this.oldPassWord;
|
|
|
|
|
}
|
|
|
|
|
try {
|
|
|
|
|
await getUserinfoPassword(this.info.id, param);
|
|
|
|
|
this.passwordShow = !this.passwordShow;
|
|
|
|
|
this.newPassWord1 = '';
|
|
|
|
|
this.newPassWord2 = '';
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error, 11);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.tip = this.$t('global.passWordSome');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -193,6 +339,13 @@ export default {
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
}
|
|
|
|
|
.tip_box{
|
|
|
|
|
height: 20px;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
color: #e47f7f;
|
|
|
|
|
}
|
|
|
|
|
.form_box{
|
|
|
|
|
width: 100%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
@ -237,6 +390,13 @@ export default {
|
|
|
|
|
line-height: 0;
|
|
|
|
|
height: 28px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.passWord_box{
|
|
|
|
|
height: 28px;
|
|
|
|
|
line-height: 28px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss">
|
|
|
|
|