<template>
|
<div class="userCenter">
|
<!-- <assets-head>
|
<van-icon
|
class="font-45"
|
@click="tokefu"
|
:name="require(`@/assets/image/customer.png`)"
|
:badge="`${unreadMsg_num}`"
|
>
|
</van-icon>
|
</assets-head> -->
|
<div class="top" v-if="!userInfo.token">
|
<div class="title textColor">{{ $t("欢迎来到") }}{{ TITLE }}</div>
|
<p class="">{{ $t("全球最大的区块链资产平台") }}</p>
|
<div class="btnBox">
|
<div class="btn btnBackground" @click="$router.push('/register')">
|
{{ $t("注册") }}
|
</div>
|
<div class="btn btnMain" @click="$router.push('/login')">
|
{{ $t("登录") }}
|
</div>
|
</div>
|
</div>
|
<div class="userInfo" v-else>
|
<div class="imgBox">
|
<img :src="require(`@/assets/theme/${theme}/image/Group.png`)" alt="" />
|
</div>
|
<div class="info">
|
<p class="textColor">{{ status === 2 ? name : userInfo.username }}</p>
|
<span>ID:{{ userInfo.usercode }}</span>
|
<span>{{$t('账户')}}:{{ userInfo.email }}</span>
|
</div>
|
</div>
|
<div class="content">
|
<list-box
|
v-if="userInfo.token"
|
:title="$t('安全')"
|
:listData="safeList"
|
></list-box>
|
<list-box
|
v-if="userInfo.token"
|
:title="$t('用户')"
|
:status="status"
|
:listData="userList"
|
></list-box>
|
<list-box :title="$t('通用')" :listData="list"> </list-box>
|
<list-box :title="$t('更多')" :listData="moreList"></list-box>
|
<!-- <list-box v-if="!userInfo.token" :listData="moniList"></list-box> -->
|
<div v-if="$store.state.user.userInfo.token">
|
<div class="outBtn tabBackground textColor" @click="loginOut">
|
{{ $t("退出") }}
|
</div>
|
<!-- <div class="tips">
|
{{
|
$t(
|
"请不要透漏密码、短信和谷歌验证码给任何人，包括交易所的工作人员。"
|
)
|
}}
|
</div> -->
|
</div>
|
</div>
|
<Footer></Footer>
|
</div>
|
</template>
|
|
<script>
|
import assetsHead from "@/components/assets-head";
|
import listBox from "./listBox.vue";
|
import { mapGetters } from "vuex";
|
import { _getIdentify } from "@/API/fund.api";
|
import { setStorage } from "@/utils/utis";
|
import { _getUnreadMsg } from "@/API/im.api";
|
export default {
|
props: {},
|
components: {
|
assetsHead,
|
listBox,
|
},
|
computed: {
|
...mapGetters({
|
userInfo: "user/userInfo",
|
theme: "home/theme",
|
}),
|
},
|
data() {
|
return {
|
goHome: true,
|
status: -1, //身份认证状态
|
list: [
|
{
|
name: this.$t("语言"),
|
icon: require("@/assets/image/userCenter/yuyan.png"),
|
url: "/language",
|
},
|
{
|
name: this.$t("计价方式"),
|
icon: require("@/assets/image/userCenter/jisuan.png"),
|
url: "/exchangeRate",
|
},
|
// {
|
// name: this.$t("在线客服"),
|
// icon: require("@/assets/image/userCenter/kefu.png"),
|
// url: "/customerService",
|
// },
|
// {
|
// name: this.$t('主题模式'),
|
// icon: require('@/assets/image/userCenter/theme.png'),
|
// url: '/themeModel'
|
// }
|
],
|
moreList: [
|
{
|
name: this.$t("帮助中心"),
|
icon: require("@/assets/image/userCenter/help.png"),
|
url: "/helpCenter",
|
},
|
{
|
name: this.$t("关于我们"),
|
icon: require("@/assets/image/userCenter/about.png"),
|
url: "/TermsOfService",
|
},
|
// {
|
// name: this.$t("下载APP"),
|
// icon: require("@/assets/image/logo.png"),
|
// url: "/",
|
// },
|
],
|
safeList: [
|
{
|
name: this.$t("我的"),
|
icon: require("@/assets/image/userCenter/about.png"),
|
url: "/profile",
|
},
|
{
|
name: this.$t("安全"),
|
icon: require("@/assets/image/userCenter/security.png"),
|
url: "/safety",
|
},
|
{
|
name: this.$t("修改密码"),
|
icon: require("@/assets/image/userCenter/password.png"),
|
url: "/changePassword",
|
},
|
],
|
userList: [
|
// {
|
// name: this.$t("邀请推广"),
|
// icon: require("@/assets/image/userCenter/share.png"),
|
// url: "/promote",
|
// },
|
{
|
name: this.$t("账变记录"),
|
icon: require("@/assets/image/userCenter/record.png"),
|
url: "/accountChange",
|
},
|
{
|
name: this.$t("身份认证"),
|
icon: require("@/assets/image/userCenter/identity.png"),
|
url: "/certificationCenter",
|
},
|
],
|
moniList: [
|
{
|
name: this.$t("试用账户"),
|
icon: require("@/assets/image/userCenter/testDemo.png"),
|
url: "/test",
|
},
|
],
|
name: "", //实名认证的真实名字
|
unreadMsg_num: "",
|
};
|
},
|
mounted() {
|
if (this.userInfo.token) {
|
this.getIdentify();
|
this.fetchUnread();
|
}
|
},
|
methods: {
|
fetchUnread() {
|
// 获取未读
|
_getUnreadMsg().then((unread_num) => {
|
this.unreadMsg_num = unread_num * 1 > 0 ? unread_num * 1 : "";
|
//console.log('\n *** \n'+unread_num*1+'\n *** \n')
|
});
|
},
|
loginOut() {
|
this.$store.commit("user/SET_OUT");
|
setStorage("popNotice", false);
|
},
|
getIdentify() {
|
_getIdentify().then((data) => {
|
this.status = data.status;
|
this.name = data.name;
|
});
|
},
|
tokefu() {
|
this.$router.push("/customerService");
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.userCenter {
|
font-size: 26px;
|
width: 100%;
|
box-sizing: border-box;
|
overflow: hidden;
|
}
|
|
.top {
|
padding: 0 32px;
|
|
p {
|
color: #868d9a;
|
}
|
}
|
|
.content {
|
font-size: 30px;
|
}
|
|
.custom {
|
width: 44px;
|
height: 44px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.title {
|
font-weight: 700;
|
font-size: 52px;
|
margin-top: 54px;
|
margin-bottom: 22px;
|
}
|
|
.btnBox {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 44px;
|
margin-bottom: 35px;
|
|
.btn {
|
color: #fff;
|
width: 364px;
|
height: 88px;
|
line-height: 88px;
|
font-size: 35px;
|
border-radius: 8px;
|
text-align: center;
|
}
|
}
|
|
.outBtn {
|
height: 88px;
|
line-height: 88px;
|
text-align: center;
|
font-size: 32px;
|
border-radius: 10px;
|
margin: 0 32px;
|
margin-top: 44px;
|
}
|
|
.tips {
|
color: #868d9a;
|
margin-top: 34px;
|
text-align: center;
|
padding: 0 13%;
|
display: flex;
|
justify-content: center;
|
}
|
|
.userInfo {
|
padding: 32px 32px 44px 32px;
|
display: flex;
|
|
.imgBox {
|
width: 96px;
|
height: 96px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.info {
|
margin-left: 22px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
|
p {
|
margin-bottom: 10px;
|
font-size: 36px;
|
font-weight: 700;
|
}
|
|
span {
|
color: #868d9a;
|
font-size: 22px;
|
}
|
}
|
}
|
</style>
|
