feat: 修改日语，注册添加电话

lxf

2025-04-21 0d5daf444d5b2338bf5c2a19630bd0333a6b852a

 src/page/userCenter/index.vue

@@ -1,274 +1,298 @@
<template>
    <div class="userCenter">
        <assets-head :goHome="goHome">
            <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 class="userCenter">
    <assets-head :goHome="goHome">
      <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">{{ TITLE }}{{ $t("欢迎来到") }}</div>
      <p class="">{{ $t("全球最大的区块链资产平台") }}</p>
      <div class="btnBox">
        <div class="btn btnBackground" @click="$router.push('/register')">
          {{ $t("注册") }}
        </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>
            </div>
        <div class="btn btnMain" @click="$router.push('/login')">
          {{ $t("登录") }}
        </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>
      </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>
      </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>
  </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'
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'
                }
            ],
            safeList: [
                {
                    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')
            })
  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",
        },
        loginOut() {
            this.$store.commit('user/SET_OUT')
         this.$router.push('/home')
            setStorage('popNotice', false)
        {
          name: this.$t("计价方式"),
          icon: require("@/assets/image/userCenter/jisuan.png"),
          url: "/exchangeRate",
        },
        getIdentify() {
            _getIdentify().then(data => {
                this.status = data.status
                this.name = data.name
            })
        {
          name: this.$t("在线客服"),
          icon: require("@/assets/image/userCenter/kefu.png"),
          url: "/customerService",
        },
        tokefu() {
            this.$router.push('/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",
        },
      ],
      safeList: [
        {
          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");
      this.$router.push("/home");
      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;
  font-size: 26px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.top {
    padding: 0 32px;
  padding: 0 32px;

    p {
        color: #868D9A;
    }
  p {
    color: #868d9a;
  }
}

.content {
    font-size: 30px;
  font-size: 30px;
}

.custom {
    width: 44px;
    height: 44px;
  width: 44px;
  height: 44px;

    img {
        width: 100%;
        height: 100%;
    }
  img {
    width: 100%;
    height: 100%;
  }
}

.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom: 22px;
  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;
  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;
    }
  .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;
  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;
  color: #868d9a;
  margin-top: 34px;
  text-align: center;
  padding: 0 13%;
  display: flex;
  justify-content: center;
}

.userInfo {
    padding: 32px 32px 44px 32px;
  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;

    .imgBox {
        width: 96px;
        height: 96px;

        img {
            width: 100%;
            height: 100%;
        }
    p {
      margin-bottom: 10px;
      font-size: 36px;
      font-weight: 700;
    }

    .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;
        }
    span {
      color: #868d9a;
      font-size: 22px;
    }
  }
}
</style>
</style>