web/pages/mine/index.vue

<template>
  <div class="page" id="page">
    <div class="top-title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
      <div class="top-container">
        <n-icon :component="MdContact" size="40" style="vertical-align: middle" />
        <span>{{t('common.navigate.UserCenter')}}</span>
      </div>
    </div>

    <div class="page-nav-container wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
      <div class="nav-txt">
        <n-breadcrumb separator=">">
          <n-breadcrumb-item> <n-icon :component="MdHome" /><router-link to="/home">{{t('common.navigate.home')}}</router-link> </n-breadcrumb-item>
          <n-breadcrumb-item> <n-icon :component="MdContact" />{{t('common.navigate.UserCenter')}} </n-breadcrumb-item>
        </n-breadcrumb>
      </div>
    </div>

    <div class="user-container">
      <div class="container" v-if="pcShow">
        <div class="user-main">
          <div class="left">
            <img src="@/assets/images/avatar.png" alt="avatar" />
            <!-- <n-image width="96" src="@/assets/images/avatar.png">
              <template #error>
                <n-icon :size="96" :component="MdImage"></n-icon>
              </template>
            </n-image> -->
            <div class="name">{{ user?.name }}</div>
            <ul>
              <template v-for="(item, index) in tabList" :key="item.value">
                <li :class="{ 'active-li': currentTab.index == index }" v-if="!(item.value == 2&&lang!='zh-CN')" @click="handleTab(item, index)">
                  {{ item.label }}
                </li>
              </template>
            </ul>
          </div>
          <div class="right">
            <div class="sub-title">
              <span>{{ currentTab.title }}</span>
              <div class="search" v-if="currentTab.index == 1">
                <n-input v-model:value="researchBriefReportId" clearable :placeholder="t('myInfo.orderSearch')">
                  <template #prefix>
                    <span class="bqfl-iconfont icon-sousuo color80"></span>
                  </template>
                </n-input>
                <n-button class="btn" type="primary" color="#18A058" @click="handleSearch"> {{t('myInfo.search')}} </n-button>
              </div>
            </div>
            <div class="content">
              <UserInfo v-if="currentTab.index == 0"></UserInfo>
              <OrderList ref="orderRef" v-if="currentTab.index == 1"></OrderList>
              <DownList v-if="currentTab.index == 2&&lang=='zh-CN'"></DownList>
            </div>
          </div>
        </div>
      </div>
      <div class="mobile-container" v-if="!pcShow">
        <n-tabs justify-content="space-evenly" type="line" size="large" class="custom-tabs" :name="currentTab.index">
          <n-tab-pane v-for="(item, index) in tabList" :name="index" :tab="item.label" :key="item.value">
            <UserInfo isMobile v-if="index == 0"></UserInfo>
            <OrderList ref="orderRef" isMobile v-if="index == 1"></OrderList>
            <DownList isMobile v-if="index == 2&&lang=='zh-CN'"></DownList>
          </n-tab-pane>
        </n-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "#imports";
import { ref, reactive, onMounted, computed, watch } from "vue";
import {
  NIcon,
  NBreadcrumb,
  NBreadcrumbItem,
  NButton,
  NInput,
  NImage,
  NTabs,
  NTabPane,
  createDiscreteApi,
} from "naive-ui";
import { MdContact, MdHome, MdImage } from "@vicons/ionicons4";
import UserInfo from "./modules/user-info.vue";
import OrderList from "./modules/order.vue";
import DownList from "./modules/down.vue";
import { useUserStore } from "@/store/user";
import { useRouter, useRoute } from "vue-router";
import ClientOnly from "@duannx/vue-client-only";
const { t } = useI18n();
const userStore = useUserStore();
const lang = userStore.getLang;
const route = useRoute();
const pcShow = ref<boolean>(true);
const user = computed(() => userStore.getUserInfo);

const tabList = reactive<object[]>([
  {
    label: t('myInfo.myInformation'),
    value: 0,
    name: "user",
  },
  {
    label: t('myInfo.myOrders'),
    value: 1,
    name: "order",
  },
  {
    label: t('myInfo.myDownload'),
    value: 2,
    name: "down",
  },
]);
interface currentTabObj {
  index?: number;
  title?: string;
}
const currentTab = reactive<currentTabObj>({
  index: 0,
  title: t('myInfo.myInformation'),
});

const researchBriefReportId = ref("");
const orderRef = ref();
const isShow = ref(false);

watch(
  () => route.params.active,
  (val) => {
    currentTab.index = val || 0;
    currentTab.title = t('myInfo.myInformation');
  }
);

const handleTab = (item: any, index: number) => {
  if (currentTab.index == index) {
    return false;
  }
  currentTab.index = index;
  currentTab.title = item.label;
};

const handleSearch = () => {
  orderRef.value.searchData(researchBriefReportId.value);
};
// onMounted(async () => {
// pcShow.value = !isMobile();
isShow.value = true;
currentTab.index = route.params.active || 0;
currentTab.title = t('myInfo.myInformation');
// });
</script>

<style lang="scss">
.user-container {
  background: #ffffff;

  .user-main {
    display: flex;
    flex-wrap: wrap;
    height: 800px;
    border-radius: 16px;
    box-shadow: 0 0 10px 10px #f3f3f3;

    .left {
      width: 250px;
      height: 100%;
      padding: 25px 0;
      background: #f8f8f8;
      border-radius: 16px 0px 0px 16px;
      text-align: center;

      .n-image {
        border-radius: 50%;
      }

      .name {
        margin-bottom: 35px;
        font-size: 18px;
        color: #1a1a1a;
        line-height: 44px;
      }

      ul {
        padding: 0;

        li {
          margin: 0;
          list-style: none;
          padding: 0;

          p {
            padding: 0;
            margin: 0;
          }
        }
      }

      li {
        position: relative;
        height: 75px;
        line-height: 75px;
        cursor: pointer;
      }

      .active-li {
        color: #18a058;
        font-weight: bold;
        background-color: #fff;

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          content: "";
          width: 6px;
          height: 100%;
          border-left: 6px solid #18a058;
        }
      }
    }

    .right {
      flex: 1;
      height: 100%;
      padding: 50px 50px 50px 70px;

      .sub-title {
        display: flex;
        padding-bottom: 15px;
        font-size: 24px;
        font-weight: bold;
        color: #1a1a1a;
        border-bottom: 1px solid #e6e6e6;
      }

      .search {
        display: flex;
        width: 500px;
        height: 60px;
        margin-left: auto;
        border-radius: 8px;

        .n-input {
          height: 100%;
          border-radius: 8px 0 0 8px;

          .n-input__input-el {
            height: 100%;
          }
        }

        .btn {
          width: 80px;
          height: 60px;
          border-radius: 0;
        }
      }

      .content {
        height: calc(100% - 75px);
        padding-top: 30px;
      }
    }
  }

  .mobile-container {
    .custom-tabs {
      .n-tab-pane {
        padding: 20px;
      }
    }
  }
}
</style>