<template>
|
<div>
|
<div class="content">
|
<div class="information">
|
<div v-if="userInfo.icon">
|
<span>头像：</span>
|
<span><img class="usericon" :src="userInfo.icon" /></span>
|
</div>
|
<div>
|
<span>昵称：</span>
|
<span>{{ userInfo.name }}</span>
|
</div>
|
<div>
|
<span>微信认证：</span>
|
<span v-if="weChatState" class="primaryTxt">已认证</span>
|
<span v-else class="warningTxt">未认证</span>
|
<p v-if="!weChatState" class="modify" @click="goBindWeChat">去认证</p>
|
</div>
|
<div>
|
<span>绑定手机：</span>
|
<span v-if="userInfo.phoneNumber">{{ userInfo.phoneNumber }}</span>
|
<span v-if="!userInfo.phoneNumber" class="warningTxt">未绑定</span>
|
<p
|
v-if="userInfo.phoneNumber"
|
class="modify"
|
@click="
|
() => {
|
isPlace = true;
|
}
|
"
|
>
|
更换手机号
|
</p>
|
<p
|
v-if="!userInfo.phoneNumber"
|
class="modify"
|
@click="
|
() => {
|
isPlace = true;
|
}
|
"
|
>
|
绑定手机号
|
</p>
|
</div>
|
</div>
|
<div class="wrapImg">
|
<img src="" class="autoImg" alt="" />
|
</div>
|
</div>
|
<!-- 更换手机号模态框 -->
|
<el-dialog
|
title="绑定手机号"
|
:visible="isPlace"
|
width="600px"
|
:before-close="handleClose"
|
>
|
<el-form
|
:key="formKey"
|
:model="replacePhone"
|
ref="form"
|
label-position="left"
|
:rules="rules"
|
label-width="130px"
|
>
|
<el-form-item label="手机号：" prop="phone">
|
<el-input
|
v-model="replacePhone.phone"
|
placeholder="请输入手机号"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="图形验证码：" prop="imgCode">
|
<div class="flex">
|
<el-input
|
v-model="replacePhone.imgCode"
|
placeholder="请输入图形验证码"
|
></el-input>
|
<div class="imgCodeBox">
|
<img :src="imgCode" alt="" @click="getImgCapcha" />
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="短信验证码：" prop="verificationCode">
|
<div class="flex">
|
<el-input
|
v-model="replacePhone.verificationCode"
|
placeholder="请输入短信验证码"
|
></el-input>
|
<div class="imgCodeBox">
|
<el-button
|
style="width: 100%"
|
@click="getVerifyCode"
|
:disabled="countDown != 0"
|
>{{
|
countDown == 0
|
? "获取短信验证码"
|
: "验证码(" + countDown + "s)"
|
}}</el-button
|
>
|
</div>
|
</div>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="replace">确 定</el-button>
|
</span>
|
</el-dialog>
|
<div class="title">
|
用户类型
|
<span> THE USER TYPES </span>
|
</div>
|
<div class="content">
|
<div class="information">
|
<div>
|
<span>用户类型：</span>
|
<span>{{ userInfo.role == "Teacher" ? "教师" : "学生" }}</span>
|
</div>
|
<div>
|
<span>教师认证：</span>
|
<span class="primaryTxt" v-if="userInfo.role == 'Teacher'"
|
>已认证</span
|
>
|
<span v-else>未认证</span>
|
<p
|
class="modify"
|
v-if="userInfo.role == 'Teacher'"
|
@click="toTeacherRegister"
|
>
|
修改信息
|
</p>
|
</div>
|
<div v-if="userInfo.role == 'Teacher'">
|
<span style="width: 150px">电子书剩余申请次数：</span>
|
<span> {{ electronicSampleBookapplyNum }}次 </span>
|
</div>
|
<div v-if="userInfo.role == 'Teacher'">
|
<span style="width: 150px">纸质书剩余申请次数：</span>
|
<span> {{ paperSampleBookapplyNum }}次 </span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { mapState } from "vuex";
|
export default {
|
computed: {
|
...mapState(["userInfo"]),
|
},
|
data() {
|
return {
|
isPlace: false,
|
formKey: 0, // 解决form 表单，验证表单状态不清空问题
|
rules: {
|
phone: [
|
{ required: true, message: "请输入手机号", trigger: "blur" },
|
{
|
pattern:
|
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
|
message: "请输入正确手机号",
|
trigger: "blur",
|
},
|
],
|
imgCode: [
|
{ required: true, message: "请输入图形验证码", trigger: "blur" },
|
{ min: 4, max: 4, message: "请输入 4 位验证码", trigger: "blur" },
|
],
|
verificationCode: [
|
{ required: true, message: "请输入短信验证码", trigger: "blur" },
|
],
|
},
|
imgCode: "",
|
replacePhone: {
|
phone: "",
|
imgCode: "",
|
verificationCode: "",
|
},
|
countDown: 0, // 验证码倒计时秒数
|
weChatState: false, // 微信认证状态
|
electronicSampleBookapplyNum: 0,
|
paperSampleBookapplyNum: 0,
|
};
|
},
|
created() {
|
this.getImgCapcha();
|
this.getElectronicSampleBookapplyNum();
|
this.getPaperSampleBookapplyNum();
|
this.getWechatAuthenticationState();
|
this.getUserInfo();
|
|
if (!this.userInfo.phoneNumber) {
|
this.$confirm(
|
"检测到您还未绑定手机号，绑定手机号后当前账号即可使用手机号进行登录！",
|
"温馨提示",
|
{
|
confirmButtonText: "绑定手机号",
|
cancelButtonText: "关闭",
|
type: "warning",
|
}
|
)
|
.then(() => {
|
this.isPlace = true;
|
})
|
.catch(() => {});
|
}
|
},
|
methods: {
|
toTeacherRegister() {
|
this.$parent.changeSelected("1");
|
},
|
|
getUserInfo() {
|
this.MG.identity.getCurrentAppUser().then((res) => {
|
if (res) {
|
let teacherRole = res.roleLinks.find(
|
(item) => item.role.refCode == "teacher"
|
);
|
let teacherInfo = res.infoList.find(
|
(item) => item.type == "teacherInfo"
|
);
|
let wechatInfo = res.infoList.find((item) => item.type == "WeChat");
|
let studentInfo = res.infoList.find((item) => item.type == "Default");
|
let phoneInfo = res.secretList.find(
|
(item) => item.type == "MobilePhone"
|
);
|
if (teacherRole && teacherInfo) {
|
let data = {};
|
try {
|
data = JSON.parse(teacherInfo.data);
|
} catch (error) {
|
data = {};
|
}
|
this.$store.dispatch("setUserInfo", {
|
...data,
|
name: data.fullName,
|
phoneNumber: phoneInfo?.credential,
|
role: "Teacher",
|
roleId: teacherRole.role.id,
|
});
|
} else if (wechatInfo) {
|
this.$store.dispatch("setUserInfo", {
|
...wechatInfo,
|
phoneNumber: phoneInfo?.credential,
|
role: "Student",
|
});
|
} else if (studentInfo) {
|
this.$store.dispatch("setUserInfo", {
|
...studentInfo,
|
phoneNumber: phoneInfo?.credential,
|
role: "Student",
|
});
|
}
|
}
|
});
|
},
|
replace() {
|
this.$refs.form.validate((val) => {
|
let query = {
|
phoneNumber: this.replacePhone.phone,
|
phoneCaptcha: this.replacePhone.verificationCode,
|
};
|
|
this.MG.identity.userSetPhoneNumber(query).then((res) => {
|
if (res == "验证码过期或错误") {
|
this.$message({
|
message: res + ",请稍后重试",
|
type: "error",
|
});
|
} else if (res == "此手机号码已被其它账号绑定") {
|
this.$message({
|
message: res + ",请更换其他手机号。",
|
type: "error",
|
});
|
} else {
|
this.$message({
|
message: res,
|
type: "success",
|
});
|
this.$store.dispatch("setUserInfo", {
|
...this.userInfo,
|
phoneNumber: this.replacePhone.phone,
|
});
|
this.isPlace = false;
|
}
|
});
|
});
|
},
|
// 获取图形验证码
|
getImgCapcha() {
|
this.MG.identity.getImgCode().then((res) => {
|
this.imgCode = "data:image/png;base64," + res;
|
});
|
},
|
// 发送短信验证码
|
getVerifyCode() {
|
let validateFieldList = [];
|
this.$refs.form.validateField(["phone", "imgCode"], (val) => {
|
// 由于 validateField 验证会触发多次，当每次验证通过后都往数组里添加一条数据。
|
if (!val) {
|
validateFieldList.push("通过");
|
}
|
// 此处 2 为验证字段的数量
|
if (validateFieldList.length == 2) {
|
this.MG.identity
|
.getPhoneCode({
|
phoneNumber: this.replacePhone.phone,
|
imageCaptcha: this.replacePhone.imgCode,
|
appRefCode: this.config.appRefCode,
|
})
|
.then((res) => {
|
if (
|
res == "验证码发送成功" ||
|
res == "验证码发送频繁请稍后再试"
|
) {
|
this.$message({
|
message: res,
|
type: "success",
|
});
|
// 开启短信验证倒计时
|
this.getSecond(90);
|
} else {
|
this.$message({
|
message: res,
|
type: "error",
|
});
|
this.getImgCapcha();
|
}
|
});
|
}
|
});
|
},
|
// 验证码倒计时
|
getSecond(time) {
|
if (!this.timer) {
|
this.countDown = time;
|
this.timer = setInterval(() => {
|
this.countDown--;
|
if (this.countDown == 0) {
|
clearInterval(this.timer);
|
this.timer = null;
|
}
|
}, 1000);
|
}
|
},
|
handleClose(done) {
|
// 恢复默认值
|
for (const key in this.replacePhone) {
|
this.replacePhone[key] = "";
|
}
|
this.formKey++;
|
this.isPlace = false;
|
},
|
// 获取微信认证状态
|
getWechatAuthenticationState() {
|
this.MG.identity.checkBuildingWeChat({}).then((res) => {
|
if (res) {
|
this.weChatState = true;
|
} else {
|
this.weChatState = false;
|
this.$confirm(
|
"您还未绑定微信，为了您能正常使用中国农业大学出版社公众号样书申请服务，请使用微信扫码绑定！",
|
"温馨提示",
|
{
|
confirmButtonText: "去扫码绑定微信",
|
cancelButtonText: "关闭",
|
type: "warning",
|
}
|
)
|
.then(() => {
|
this.goBindWeChat();
|
})
|
.catch(() => {});
|
}
|
});
|
},
|
goBindWeChat() {
|
this.$router.push({
|
path: "/bindWeChat",
|
});
|
},
|
//电子书剩余申请次数
|
getElectronicSampleBookapplyNum() {
|
this.MG.app
|
.getTicketResult({
|
ticketRefCodeOrGuid: "electronicSampleBookapplyNum",
|
roleId: this.userInfo.roleId,
|
})
|
.then((res) => {
|
this.electronicSampleBookapplyNum = res.totalCount - res.usedCount;
|
});
|
},
|
//纸质书剩余申请次数
|
getPaperSampleBookapplyNum() {
|
this.MG.app
|
.getTicketResult({
|
ticketRefCodeOrGuid: "paperSampleBookapplyNum",
|
roleId: this.userInfo.roleId,
|
})
|
.then((res) => {
|
this.paperSampleBookapplyNum = res.totalCount - res.usedCount;
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.content {
|
padding: 40px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.wrapImg {
|
position: relative;
|
width: 100px;
|
height: 100px;
|
border-radius: 50%;
|
}
|
.information {
|
display: inline-block;
|
color: #666;
|
div {
|
span {
|
display: inline-block;
|
width: 130px;
|
line-height: 50px;
|
}
|
& > span:nth-child(2) {
|
color: #333;
|
}
|
p {
|
display: inline-block;
|
}
|
}
|
.modify {
|
color: #e50021;
|
border-bottom: 1px solid #e50021;
|
cursor: pointer;
|
}
|
}
|
}
|
.imgCodeBox {
|
margin-left: 20px;
|
height: 40px;
|
width: 140px;
|
cursor: pointer;
|
img {
|
width: 140px;
|
height: 100%;
|
}
|
}
|
.title {
|
font-size: 18px;
|
font-weight: 700;
|
letter-spacing: 1.8px;
|
line-height: 36px;
|
padding-left: 40px;
|
background: #d8f7e6;
|
line-height: 60px;
|
color: #00873c;
|
span {
|
font-size: 16px;
|
font-weight: 500;
|
}
|
}
|
|
.usericon {
|
width: 60px;
|
height: 60px;
|
vertical-align: middle;
|
border-radius: 50%;
|
}
|
</style>
|
