<template>
|
<div class="personalCenterPage">
|
<div class="person_user">
|
<div class="setInfo">
|
<img src="@/assets/images/personalCenter/setting_23.png" alt="" class="infoImg"/>
|
<span @click="setUserInfo()">个人信息</span>
|
</div>
|
<div class="user_info">
|
<div class="userIcon">
|
<img v-if="userInfo.icon" :src="userInfo.icon" alt="" class="icon" />
|
<img
|
v-else
|
src="@/assets/images/personalCenter/default_avatar.png"
|
alt=""
|
class="icon"
|
/>
|
<img
|
src="@/assets/images/personalCenter/renzheng_icon3.png"
|
alt=""
|
class="auth"
|
/>
|
</div>
|
|
<div class="userName">
|
<p class="name">
|
{{ userInfo.name }}
|
</p>
|
<div class="role">
|
{{ userInfo.role == "Teacher" ? "已认证教师" : "未认证教师" }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 列表 -->
|
<div class="listBox">
|
<div class="info-list">
|
<div class="title">常用功能</div>
|
<div class="listCon">
|
<div
|
v-for="(item, index) in functionData"
|
:key="index"
|
@click="tab(item.name)"
|
class="listItem"
|
>
|
<img :src="item.icon" alt="" class="itemImg"/>
|
<div class="listName">
|
{{ item.title }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="info-list">
|
<div class="title">其他功能</div>
|
<div class="listCon">
|
<div
|
v-for="(item, index) in otherFunctionData"
|
:key="index"
|
@click="tab(item.name)"
|
class="listItem"
|
>
|
<img :src="item.icon" alt="" class="itemImg"/>
|
<div class="listName">
|
{{ item.title }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<Footer />
|
</div>
|
</template>
|
|
<script>
|
import Vue from "vue";
|
import Footer from "@/components/footer/footer";
|
import { mapState } from "vuex";
|
import myConfig from "@/assets/js/config";
|
import { Toast, Dialog } from "vant";
|
Vue.use(Toast);
|
Vue.use(Dialog);
|
export default {
|
data() {
|
return {
|
teacherRole: "",
|
functionData: [
|
{
|
name: "teacherCertificate",
|
title: "教师认证",
|
icon: require("@/assets/images/personalCenter/jiaoshirenzheng3.png")
|
},
|
{
|
name: "collection",
|
title: "我的收藏",
|
icon: require("@/assets/images/personalCenter/wodeshoucang3.png")
|
},
|
{
|
name: "myShoppingCart",
|
title: "购物车",
|
icon: require("@/assets/images/personalCenter/shoppingCart3.png")
|
},
|
{
|
name: "myOrder",
|
title: "我的订单",
|
icon: require("@/assets/images/personalCenter/order3.png")
|
},
|
{
|
name: "myApplyBook",
|
title: "我的申请",
|
icon: require("@/assets/images/personalCenter/shenqing3.png")
|
},
|
{
|
name: "myTextBook",
|
title: "我的教材",
|
icon: require("@/assets/images/personalCenter/jiaocai3.png")
|
},
|
{
|
name: "",
|
title: "我的课程",
|
icon: require("@/assets/images/personalCenter/kecheng3.png")
|
},
|
{
|
name: "",
|
title: "我的班级",
|
icon: require("@/assets/images/personalCenter/banji3.png")
|
}
|
],
|
otherFunctionData: [
|
{
|
name: "aboutUs",
|
title: "教师客服",
|
icon: require("@/assets/images/personalCenter/jiaoshikefu3.png")
|
},
|
{
|
name: "/protocol?type=1",
|
title: "用户服务协议",
|
icon: require("@/assets/images/personalCenter/xieyi3.png")
|
},
|
{
|
name: "protocol",
|
title: "教师认证服务条款",
|
icon: require("@/assets/images/personalCenter/tiaokuan3.png")
|
},
|
{
|
name: "testLogin",
|
title: "退出登录",
|
icon: require("@/assets/images/personalCenter/tuichu3.png")
|
},
|
{
|
name: "unsubscribe",
|
title: "注销账号",
|
icon: require("@/assets/images/personalCenter/zhuxiao3.png")
|
}
|
]
|
};
|
},
|
computed: {
|
...mapState(["userInfo"])
|
},
|
components: {
|
Footer
|
},
|
created() {
|
console.log(this.userInfo);
|
this.getUserRoleMine();
|
},
|
methods: {
|
getUserRoleMine() {
|
let that = this;
|
that.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 == "basicInfo" || item.type == "Default"
|
);
|
let phoneInfo = res.secretList.find(
|
item => item.type == "MobilePhone"
|
);
|
if (teacherRole && teacherInfo) {
|
this.$store.dispatch("setUserInfo", {
|
...teacherInfo,
|
phoneNumber: phoneInfo?.credential,
|
icon: wechatInfo?.icon,
|
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,
|
icon: wechatInfo?.icon,
|
phoneNumber: phoneInfo?.credential,
|
role: "Student"
|
});
|
}
|
}
|
});
|
},
|
tab(name) {
|
if (name == "testLogin") {
|
this.tool.delCookie(myConfig.tokenKey);
|
this.tool.delCookie(myConfig.userInfoKey);
|
localStorage.removeItem(myConfig.userInfoKey);
|
this.$store.dispatch("setUserInfo", {});
|
this.$router.push({
|
path: "index"
|
});
|
} else if (name == "unsubscribe") {
|
Dialog.confirm({
|
title: "警告",
|
message: "账号注销之后无法重新注册，请谨慎操作！！！",
|
confirmButtonText: "仍要注销",
|
cancelButtonText: "取消"
|
})
|
.then(() => {
|
this.MG.identity.unsubscribeAppuser().then(res => {
|
this.tool.delCookie(myConfig.tokenKey);
|
this.tool.delCookie(myConfig.userInfoKey);
|
localStorage.removeItem(myConfig.userInfoKey);
|
this.$router.push({
|
path: "index"
|
});
|
});
|
})
|
.catch(() => {
|
// on cancel
|
});
|
} else if (name) {
|
this.$router.push({
|
path: name,
|
query: {
|
formMine: 1
|
}
|
});
|
} else {
|
Toast("建设中");
|
}
|
},
|
setUserInfo() {
|
this.$router.push({
|
path: "personInfor"
|
});
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.personalCenterPage {
|
height: 100vh;
|
padding-bottom: 50px;
|
background: #f4f7fb;
|
position: relative;
|
}
|
.person_user {
|
height: 250px;
|
background: url("../../assets/images/personalCenter/bg_my.png");
|
background-size: 100% 100%;
|
padding: 15px;
|
}
|
.setInfo {
|
text-align: right;
|
margin-top: 10px;
|
}
|
.setInfo .infoImg {
|
margin-right: 5px;
|
width:17px;
|
height:16px;
|
}
|
.user_info {
|
display: flex;
|
}
|
.userIcon {
|
position: relative;
|
padding: 0 10px;
|
}
|
|
.icon {
|
width: 100px;
|
height: 100px;
|
border-radius: 50%;
|
}
|
|
.auth {
|
position: absolute;
|
top: 80px;
|
right: 18px;
|
width:17px;
|
height:17px;
|
}
|
.userName {
|
margin-top: 20px;
|
margin-left: 10px;
|
}
|
.userName .name {
|
font-size: 18px;
|
font-weight: bold;
|
}
|
.userName .role {
|
margin-top: 10px;
|
width: 85px;
|
text-align: center;
|
color: #fff;
|
padding: 5px;
|
background: linear-gradient(90deg, #5ea1ff 0%, #2e70ff 100%);
|
border-radius: 3px 3px 3px 3px;
|
}
|
.listBox {
|
padding: 15px 15px 60px 15px;
|
position: absolute;
|
top: 50px;
|
padding-top: 100px;
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f4f7fb 100%);
|
}
|
.info-list {
|
background: #fff;
|
margin-top: 20px;
|
border-radius: 10px;
|
}
|
.info-list .title {
|
font-size: 18px;
|
font-weight: bold;
|
padding: 20px;
|
}
|
.listCon {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.listItem {
|
width: calc(100% / 4);
|
text-align: center;
|
padding: 0 15px 20px 15px;
|
}
|
.listItem .itemImg{
|
width:24px;
|
height:24px;
|
}
|
.listName {
|
margin-top: 15px;
|
}
|
</style>
|
