李凌
2025-10-15 7fc6bfe900790ec7c92bce85d5b20a95fbc06e65
src/views/my/index.vue
@@ -7,107 +7,183 @@
    </assets-head>
    <div class="px-8 mt-4">
      <h1 class="text-2xl font-bold title" v-if="!(userStore.userInfo && userStore.userInfo.token)">{{
        $t('welcome')
          $t('welcome')
        }}&nbsp;{{ $title }}!
      </h1>
      <p class="sub-text" v-if="!(userStore.userInfo && userStore.userInfo.token)">{{ $t('全球最大的区块链资产平台') }}</p>
      <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" round @click="onRoute('/register')">{{ $t('register') }}</van-button>
        <van-button class="flex-1" type="primary" round color="#f7b600" @click="onRoute('/login')">{{ $t('login')
          }}</van-button>
        <van-button class="flex-1" type="primary" round 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>
        <img class="w-24 h-24" src="@/assets/image/avatar.png" alt="avatar"/>
        <div class="ml-5 pt-1">
          <div class="font-bold text-lg name flex-centerY" style="width: 200px;overflow-wrap: break-word;">{{
              userStore.userInfo &&
              userStore.userInfo.username
            }}
            <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 class="text-sm text-gray mt-5 flex " style="font-size: 13px">
            UID:{{ 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>
      <!--      <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('/cryptos/accountChange')">-->
      <!--            <img src="@/assets/imgs/my/记录.png" alt="">-->
      <!--            <div>{{ t('账变记录') }}</div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="flex-centerY" style="margin: 20px 20px;margin-top: 40px">
        <div @click="onRoute('/advancedCtf')" class="flexY-center" style="flex: 1">
          <img src="@/assets/img/img_7.png" style="width: 20px;height: 20px">
          <div style="font-size: 12px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" class="text-gray mt-2" >
            {{ $t('高级认证') }}
          </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 @click="onRoute('/certificationCenter')" class="flexY-center" style="flex: 1">
          <img src="@/assets/img/img_8.png" style="width: 20px;height: 20px">
          <div style="font-size: 12px" class="text-gray mt-2">
            {{ $t('authVerify') }}
          </div>
        </div>
        <div @click="onRoute('/safety')" class="flexY-center" style="flex: 1">
          <img src="@/assets/img/img_9.png" style="width: 20px;height: 20px">
          <div style="font-size: 12px" class="text-gray mt-2">
            {{ $t('安全') }}
          </div>
        </div>
        <div @click="onRoute('/cryptos/accountChange')" class="flexY-center" style="flex: 1">
          <img src="@/assets/img/img_2.png" style="width: 20px;height: 20px">
          <div style="font-size: 12px" class="text-gray mt-2">
            {{ $t('账变记录') }}
          </div>
        </div>
      </div>
    </template>
    <div style="width: 100%;height: 1px;background: #eee"></div>
    <template v-for="(item, index) in cellList" :key="index">
      <van-divider :style="{ borderColor: '#ddd' }" hairline />
      <!--      <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 class="title_s font-bold">{{ item.title }}</div>-->
        <div class="flex-centerY flex-position-between" style="padding: 10px 0" v-for="(_item, _index) in item.list"
             :key="_index" @click="onRoute(_item.path)">
          <!--            <img :src="_item.icon" alt="">-->
          <div style="font-size: 14px;color:#999">{{ _item.title }}</div>
          <van-icon name="arrow" style="font-size: 14px;color:#999"/>
        </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 />-->
    <!--      <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">
        <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 class="flex-centerY flex-position-between" style="padding: 10px 15px"
           @click="onRoute('/certificationCenter')">
        <!--            <img :src="_item.icon" alt="">-->
        <div style="font-size: 14px;color:#999">{{ $t('authVerify') }}</div>
        <div class="flex-centerY">
          <div style="font-size: 14px"
               :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>
          <van-icon name="arrow" style="font-size: 14px;color:#999"/>
        </div>
      </div>
<!--      {{ $t('信用分') }} : {{ userdata.creditScore }}-->
      <div class="flex-centerY flex-position-between" style="padding: 10px 15px" @click="loginOut">
        <!--            <img :src="_item.icon" alt="">-->
        <div style="font-size: 14px;color:#999">{{ $t('信用分') }}</div>
        <div class="flex-centerY" style="font-size: 14px;color:#f14b3f">
          {{ userdata.creditScore }}
          <van-icon name="arrow" style="font-size: 14px;color:#999"/>
        </div>
      </div>
      <div class="flex-centerY flex-position-between" style="padding: 10px 15px" @click="loginOut">
        <!--            <img :src="_item.icon" alt="">-->
        <div style="font-size: 14px;color:#f14b3f">{{ $t('loginOut') }}</div>
        <van-icon name="arrow" style="font-size: 14px;color:#999"/>
      </div>
      <!--      <van-divider :style="{ borderColor: '#ddd' }" hairline />-->
      <!--      <div class="px-4 mt-4">-->
      <!--        <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>
  </section>
</template>
<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 { useUserStore } from '@/store/user';
import { useI18n } from "vue-i18n";
import {reactive, onMounted, ref, computed} from 'vue';
import {useRouter} from 'vue-router';
import {
  _getIdentify,
  _getKycHighLevel,
  _logOut,
  _info,
  _customer,
  _getContractBySymbolType
} from "@/service/user.api.js";
import {useUserStore} from '@/store/user';
import {useI18n} from "vue-i18n";
import useClipboard from "vue-clipboard3";
import { showToast } from "vant";
import {showToast} from "vant";
import addBankIcon from '@/assets/image/userCenter/addBank.png'
import store from '@/store/store'
const { t } = useI18n()
const { toClipboard } = useClipboard();
const {t} = useI18n()
const {toClipboard} = useClipboard();
const router = useRouter()
const userStore = useUserStore()
@@ -117,18 +193,38 @@
const userdata = ref({})
const tabs = [
  { icon: new URL('@/assets/imgs/my/my_1a.png', import.meta.url), icon2: new URL('@/assets/imgs/my/my_1b.png', import.meta.url), title: t('authVerify'), path: '/certificationCenter' },
  { icon: new URL('@/assets/imgs/my/my_1a.png', import.meta.url), icon2: new URL('@/assets/imgs/my/my_1b.png', import.meta.url), title: t('高级认证'), path: '/advancedCtf' },
  { icon: new URL('@/assets/imgs/my/my_2a.png', import.meta.url), icon2: new URL('@/assets/imgs/my/my_2b.png', import.meta.url), title: t('安全'), path: '/safety' },
  { icon: new URL('@/assets/imgs/my/my_3a.png', import.meta.url), icon2: new URL('@/assets/imgs/my/my_3b.png', import.meta.url), title: t('账变记录'), path: '/cryptos/accountChange' },
  {
    icon: new URL('@/assets/imgs/my/my_1a.png', import.meta.url),
    icon2: new URL('@/assets/imgs/my/my_1b.png', import.meta.url),
    title: t('authVerify'),
    path: '/certificationCenter'
  },
  {
    icon: new URL('@/assets/imgs/my/my_1a.png', import.meta.url),
    icon2: new URL('@/assets/imgs/my/my_1b.png', import.meta.url),
    title: t('高级认证'),
    path: '/advancedCtf'
  },
  {
    icon: new URL('@/assets/imgs/my/my_2a.png', import.meta.url),
    icon2: new URL('@/assets/imgs/my/my_2b.png', import.meta.url),
    title: t('安全'),
    path: '/safety'
  },
  {
    icon: new URL('@/assets/imgs/my/my_3a.png', import.meta.url),
    icon2: new URL('@/assets/imgs/my/my_3b.png', import.meta.url),
    title: t('账变记录'),
    path: '/cryptos/accountChange'
  },
]
const tabs2 = [
  { title: t('language'), path: '/language' },
  { title: t('onLineService'), path: '/customerService' },
  { title: t('计价方式'), path: '/cryptos/exchangeRate' },
  { title: t('AddPaymentMethod'), path: '/payMentMethod/list' },
  { title: t('帮助中心'), path: '/helpCenter' },
  { title: t('关于我们'), path: '/aboutUs' },
  {title: t('language'), path: '/language'},
  {title: t('onLineService'), path: '/customerService'},
  {title: t('计价方式'), path: '/cryptos/exchangeRate'},
  {title: t('AddPaymentMethod'), path: '/payMentMethod/list'},
  {title: t('帮助中心'), path: '/helpCenter'},
  {title: t('关于我们'), path: '/aboutUs'},
]
// 跳转
@@ -145,9 +241,11 @@
}
onMounted(() => {
  if (userStore.userInfo && userStore.userInfo.token) {
    getIdentify()
    getKycHighLevel()
    getinfo()
  } else {
    router.push('/login')
  }
@@ -164,14 +262,35 @@
      // },
      {
        title: t('universal'), list: [
          { icon: new URL('../../assets/image/assets-center/language.png', import.meta.url), title: t('language'), path: '/language' },
          { icon: new URL('../../assets/image/assets-center/onLineService.png', import.meta.url), title: t('onLineService'), path: '/customerService' },
          { icon: new URL('../../assets/image/assets-center/authVerify.png', import.meta.url), title: t('authVerify'), path: '/certificationCenter', show: true },
          { icon: new URL('../../assets/image/assets-center/AdvancedCertification.png', import.meta.url), title: t('高级认证'), path: '/advancedCtf', show: true },
          {
            icon: new URL('../../assets/image/assets-center/language.png', import.meta.url),
            title: t('language'),
            path: '/language'
          },
          {
            icon: new URL('../../assets/image/assets-center/onLineService.png', import.meta.url),
            title: t('onLineService'),
            path: '/customerService'
          },
          // { icon: new URL('../../assets/image/assets-center/authVerify.png', import.meta.url), title: t('authVerify'), path: '/certificationCenter', show: true },
          // { icon: new URL('../../assets/image/assets-center/AdvancedCertification.png', import.meta.url), title: t('高级认证'), path: '/advancedCtf', show: true },
          // { icon: 'todo-list-o', title: t('账变记录'), path: '/cryptos/accountChange' },
          { icon: new URL('../../assets/image/assets-center/valuation.png', import.meta.url), title: t('计价方式'), path: '/cryptos/exchangeRate' },
          { icon: new URL('../../assets/image/assets-center/AddPaymentMethod.png', import.meta.url), title: t('AddPaymentMethod'), path: '/payMentMethod/list' },
          { icon: new URL('../../assets/image/assets-center/help.png', import.meta.url), title: t('帮助中心'), path: '/helpCenter' },
          {
            icon: new URL('../../assets/image/assets-center/valuation.png', import.meta.url),
            title: t('计价方式'),
            path: '/cryptos/exchangeRate'
          },
          {
            icon: new URL('../../assets/image/assets-center/AddPaymentMethod.png', import.meta.url),
            title: t('AddPaymentMethod'),
            path: '/payMentMethod/list'
          },
          {
            icon: new URL('../../assets/image/assets-center/help.png', import.meta.url),
            title: t('帮助中心'),
            path: '/helpCenter'
          },
          {title: t('关于我们'), path: '/aboutUs'},
        ]
      }
    ]
@@ -179,9 +298,17 @@
    return [
      {
        title: t('universal'), list: [
          { icon: new URL('../../assets/image/assets-center/help.png', import.meta.url), title: t('language'), path: '/language' },
          {
            icon: new URL('../../assets/image/assets-center/help.png', import.meta.url),
            title: t('language'),
            path: '/language'
          },
          // { icon: 'gold-coin-o', title: t('计价方式'), path: '/cryptos/exchangeRate' },
          { icon: new URL('../../assets/image/assets-center/aboutUs.png', import.meta.url), title: t('onLineService'), path: '/customerService' },
          {
            icon: new URL('../../assets/image/assets-center/aboutUs.png', import.meta.url),
            title: t('onLineService'),
            path: '/customerService'
          },
        ]
      },
@@ -218,6 +345,7 @@
    status.value = data.status
  })
}
// 当前用户等级
const getKycHighLevel = () => {
  _getKycHighLevel().then((data) => {
@@ -345,7 +473,7 @@
.name {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}
.yellow {
@@ -380,4 +508,4 @@
  height: 20px;
  margin-right: 10px;
}
</style>
</style>