1
李凌
2025-09-12 0cf2a49d80c8d4ffba2df32f530f498a2c94458e
src/views/my/index.vue
@@ -1,112 +1,105 @@
<template>
  <section class="my-index" >
    <fx-header  :title="$t('my')">
     <!-- <template v-slot:right>
  <section class="my-index">
    <fx-header :title="$t('my')">
      <!-- <template v-slot:right>
        <van-icon name="service-o" size="24" @click="$router.push('/customerService')"></van-icon>
      </template> -->
    </fx-header>
   <!-- <div>
      <assets-head title="">
            <template v-slot:right>
              <van-icon name="service-o" size="24" @click="$router.push('/customerService')"></van-icon>
            </template>
      </assets-head>
   </div> -->
    <div class="px-8 mt-4">
      <h1 class="text-2xl font-bold title" v-if="!(userStore.userInfo && userStore.userInfo.token)">{{
        $t('welcome')
        }}&nbsp;{{ $title }}!
      </h1>
      <p class="sub-text" v-if="!(userStore.userInfo && userStore.userInfo.token)">{{ $t('全球最大的区块链资产平台') }}</p>
      <p class="w-full flex mt-4 gap-x-4" v-if="!(userStore.userInfo && userStore.userInfo.token)">
        <van-button class="flex-1" @click="onRoute('/register')">{{ $t('register') }}</van-button>
        <van-button class="flex-1" type="primary" color="#f7b600" @click="onRoute('/login')">{{ $t('login')
          }}</van-button>
      </p>
      <div class="mt-4 flex items-start" v-else>
        <img class="w-24 h-24" src="@/assets/image/avatar.png" alt="avatar" />
        <div class="ml-5 pt-1 flex flex-col justify-center">
          <div class="font-bold text-lg name" style="width: 200px;overflow-wrap: break-word;">{{ userStore.userInfo && userStore.userInfo.username }}</div>
          <div class="text-sm text-gray-400 mt-5 flex items-center id-text">
            ID:{{ userStore.userInfo && userStore.userInfo.usercode }}<img class="w-8 h-8 ml-4"
              src="@/assets/image/idcopy.png" alt="id" @click="copy" /></div>
          <div class="flex items-center justify-start mt-5">
            <div class="label pl-2 pr-2"
              :class="{ 'red': status == 0 || status == 3, 'yellow': status == 1, 'green': status == 2 }">
              {{ status == 0 ? $t('notCertified') :
                status == 1 ? $t('reviewing') : status == 2 ? $t('verified') : status == 3 ?
                  $t('noPassView') : '' }}
            </div>
            <div class="label pl-2 pr-2 ml-3" :class="{ 'green': kycHighStatus == 2 }">
              {{ kycHighStatus == 2 ? $t('高级用户') : $t('普通用户') }}
            </div>
         <div class="pl-2 pr-2 ml-3" style="font-size: 12px;">{{$t('信用分')}} : {{userdata.creditScore}}</div>
          </div>
        </div>
      </div>
    </div>
    <template v-if="(userStore.userInfo && userStore.userInfo.token)">
      <van-divider :style="{ borderColor: '#ddd' }" hairline />
      <div class="mt-10 px-8" v-if="(userStore.userInfo && userStore.userInfo.token)">
        <div class="title_s font-bold">{{ t('快捷入口') }}</div>
        <div class="flex flex-start items-start">
          <div class="label_item flex flex-col items-center justify-center mt-8" @click="onRoute('/safety')">
            <img src="@/assets/imgs/my/安全.png" alt="">
            <div>{{ t('安全') }}</div>
          </div>
<!--          <div class="label_item flex flex-col items-center justify-center mt-8" @click="onRoute('/changePassword')">
            <img src="@/assets/imgs/my/密码.png" alt="">
            <div>{{ t('修改密码') }}</div>
          </div> -->
          <div class="label_item flex flex-col items-center justify-center mt-8"
            @click="onRoute('/cryptos/accountChange')">
            <img src="@/assets/imgs/my/记录.png" alt="">
            <div>{{ t('账变记录') }}</div>
          </div>
          <!-- <div class="label_item flex flex-col items-center justify-center mt-8"
            @click="onRoute('/certificationCenter')">
            <img src="@/assets/imgs/my/身份认证.png" alt="">
            <div>{{ t('authVerify') }}</div>
          </div> -->
        </div>
      </div>
    </template>
    <template v-for="(item, index) in cellList" :key="index">
      <van-divider :style="{ borderColor: '#ddd' }" hairline />
      <div class="mt-10 px-8">
        <div class="title_s font-bold">{{ item.title }}</div>
        <div class="flex flex-start items-start flex-wrap">
          <div class="label_item flex flex-col items-center justify-center mt-8" v-for="(_item, _index) in item.list"
            :key="_index" @click="onRoute(_item.path)">
            <img :src="_item.icon" alt="">
            <div>{{ _item.title }}</div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="userStore.userInfo && userStore.userInfo.token">
      <van-divider :style="{ borderColor: '#ddd' }" hairline />
      <van-cell-group :border="false">
        <van-cell is-link="is-link" center="center" :title="t('关于我们')" @click="onRoute('/aboutUs')">
          <template #icon>
            <img class="cell-img" src="../../assets/image/assets-center/aboutUs.png" />
          </template>
        </van-cell>
      </van-cell-group>
    </template>
    <template v-if="userStore.userInfo && userStore.userInfo.token">
      <van-divider :style="{ borderColor: '#ddd' }" hairline />
      <div class="px-4 mt-4">
    <!-- 未登录 -->
    <template v-if="!(userStore.userInfo && userStore.userInfo.token)">
      <div class="px-8 mt-4">
        <h1 class="text-2xl font-bold title">
          {{
            $t('welcome')
          }}&nbsp;{{ $title }}!
        </h1>
        <p class="sub-text">{{ $t('全球最大的区块链资产平台') }}</p>
        <p class="w-full flex mt-4 gap-x-4">
          <van-button type="primary" class="flex-1" round color="#f7b600" @click="loginOut">{{ $t('loginOut')
            }}</van-button>
          <van-button class="flex-1" @click="onRoute('/register')">{{ $t('register') }}</van-button>
          <van-button class="flex-1" type="primary" color="#f7b600" @click="onRoute('/login')">{{ $t('login')
          }}</van-button>
        </p>
      </div>
      <template v-for="(item, index) in cellList" :key="index">
        <van-divider :style="{ borderColor: '#ddd' }" hairline />
        <div class="mt-10 px-8">
          <div class="title_s font-bold">{{ item.title }}</div>
          <div class="flex flex-start items-start flex-wrap">
            <div class="label_item flex flex-col items-center justify-center mt-8" v-for="(_item, _index) in item.list"
              :key="_index" @click="onRoute(_item.path)">
              <img :src="_item.icon" alt="">
              <div>{{ _item.title }}</div>
            </div>
          </div>
        </div>
      </template>
    </template>
    <!-- 已登录 -->
    <template v-else>
      <div class="px-8 mt-4">
        <div class="mt-4 flex items-start card">
          <img class="w-24 h-24" src="@/assets/image/avatar.png" alt="avatar" />
          <div class="ml-5 pt-1 flex flex-col justify-center">
            <div class="font-bold text-lg name" style="width: 200px;overflow-wrap: break-word;">
              {{ userStore.userInfo &&
                userStore.userInfo.username }}
            </div>
            <div class="text-sm text-gray-400 mt-5 flex items-center id-text">
              ID:{{ userStore.userInfo && userStore.userInfo.usercode }}
              <img class="w-8 h-8 ml-4" src="@/assets/image/idcopy.png" alt="id" @click="copy" />
            </div>
            <div class="flex items-center justify-start mt-5">
              <div class="label pl-2 pr-2"
                :class="{ 'red': status == 0 || status == 3, 'yellow': status == 1, 'green': status == 2 }">
                {{ status == 0 ? $t('notCertified') :
                  status == 1 ? $t('reviewing') : status == 2 ? $t('verified') : status == 3 ?
                    $t('noPassView') : '' }}
              </div>
              <div class="label pl-2 pr-2 ml-3" :class="{ 'green': kycHighStatus == 2 }">
                {{ kycHighStatus == 2 ? $t('高级用户') : $t('普通用户') }}
              </div>
              <div class="pl-2 pr-2 ml-3" style="font-size: 12px;">{{ $t('信用分') }} : {{ userdata.creditScore }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="card mx-8 mt-10">
        <van-cell-group :border="false">
          <van-cell is-link="is-link" class="mb-10" center="center" :title="t('安全')" @click="onRoute('/safety')">
            <template #icon>
              <img class="cell-img" src="@/assets/imgs/my/安全.png" />
            </template>
          </van-cell>
          <van-cell is-link="is-link" class="mb-10" center="center" :title="t('账变记录')"
            @click="onRoute('/cryptos/accountChange')">
            <template #icon>
              <img class="cell-img" src="@/assets/imgs/my/记录.png" />
            </template>
          </van-cell>
          <template v-for="(item, index) in cellList" :key="index">
            <van-cell is-link="is-link" class="mb-10" center="center" :title="_item.title" @click="onRoute(_item.path)"
              v-for="(_item, _index) in item.list" :key="_index">
              <template #icon>
                <img class="cell-img" :src="_item.icon" />
              </template>
            </van-cell>
          </template>
          <van-cell is-link="is-link" center="center" :title="t('关于我们')" @click="onRoute('/aboutUs')">
            <template #icon>
              <img class="cell-img" src="../../assets/image/assets-center/aboutUs.png" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="px-4 mt-10">
        <p class="w-full flex mt-4 gap-x-4">
          <van-button type="primary" class="flex-1" round color="#f7b600" @click="loginOut">
            {{ $t('loginOut') }}</van-button>
        </p>
      </div>
    </template>
@@ -116,7 +109,7 @@
<script setup>
import { reactive, onMounted, ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { _getIdentify, _getKycHighLevel, _logOut,_info ,_customer } from "@/service/user.api.js";
import { _getIdentify, _getKycHighLevel, _logOut, _info, _customer } from "@/service/user.api.js";
import { useUserStore } from '@/store/user';
import { useI18n } from "vue-i18n";
import useClipboard from "vue-clipboard3";
@@ -154,22 +147,22 @@
  ]
})
const onRoute = (path) => {
  if(path=='/customerService'){
     if(customer_service_url.value){
        window.location.href = customer_service_url.value;
     }else{
        router.push(path)
     }
  }else{
     router.push(path)
  if (path == '/customerService') {
    if (customer_service_url.value) {
      window.location.href = customer_service_url.value;
    } else {
      router.push(path)
    }
  } else {
    router.push(path)
  }
}
onMounted(() => {
  if (userStore.userInfo && userStore.userInfo.token) {
    getIdentify()
    getKycHighLevel()
   getinfo()
   getcustomer()
    getinfo()
    // getcustomer() // 这个接口用不了
  }
})
const cellList = computed(() => {
@@ -225,8 +218,8 @@
}
const getcustomer = () => {
  _customer().then((data) => {
   customer_service_url.value = data.customer_service_url
   console.log(customer_service_url);
    customer_service_url.value = data.customer_service_url
    console.log(customer_service_url);
  }).catch(error => {
    console.error('Error fetching data:', error);
  });
@@ -260,33 +253,20 @@
<style lang="scss" scoped>
:deep(.van-cell-group__title) {
  // background: $main2_background !important;
  background: $inp-b !important;
  padding: 12px 16px;
}
:deep(.van-cell-group) {
  background: $input_background;
  .van-icon {
    display: flex;
    align-items: center;
  }
}
:deep(.van-cell) {
  // background: $mainBgColor;
  // border-bottom: 1px solid $border_color;
  &:hover {
    // background: $mainBgColor;
  }
}
:deep(.van-cell-group__title) {
  background: $mainBgColor;
}
:deep(.van-nav-bar__content) {
  // background: $mainBgColor;
}
:deep(.van-icon) {
@@ -301,8 +281,8 @@
  border: none;
}
:deep(.van-grid-item__content) {
  // background: $selectSymbol_background;
:deep(.van-cell) {
  background-color: $input_background;
}
:deep(.van-grid-item__text) {
@@ -313,7 +293,12 @@
.my-index {
  padding-bottom: 60px;
  // background: $mainbgWhiteColor;
  .card {
    background-color: $input_background;
    padding: 2.125rem;
    border-radius: 1rem;
  }
  .title_s {
    font-size: 16px;
@@ -322,9 +307,11 @@
  .label_item {
    width: 33%;
    font-size: 12px;
   div{
      text-align: center;
   }
    div {
      text-align: center;
    }
    img {
      width: 32%;
      margin-bottom: 3px;