wallet_app/src/views/dapp/index.vue

<template>
  <div class="container">
    <div class="head-bg" />
    <div class="head-nav-bar">探索</div>

    <div class="search-box">
      <svg-icon class="search-icon" name="search" />
      <van-field v-model="searchValue" placeholder="输入DApp名称或网址" />
    </div>
    <van-skeleton-image v-if="slidesList.length == 0" style="width: 90%;" class="swipe-box" />
    <van-swipe v-else class="swipe-box" :autoplay="3000" lazy-render>
      <van-swipe-item v-for="item in slidesList" :key="item.id">
        <div class="swipe-item">
          <van-image class="swipe-image" :src="item.pic" />
        </div>
      </van-swipe-item>

      <template #indicator="{ active, total }">
        <div class="custom-indicator">
          <div
            v-for="item in total"
            :key="item"
            class="custom-indicator-item"
            :class="{ active: item === active + 1 }"
          />
        </div>
      </template>
    </van-swipe>

    <van-tabs class="tabs-wrapper-card" type="card" @change="onTabsWrapperCard">
      <van-tab
        v-for="(item, index) in tabsAppConfig"
        :title="item.title"
        :key="index"
      >
        <div class="tabs-content-body">
          <div
            v-for="cItem in item.children"
            class="tabs-content-item"
            @click="handleVisitDapp(cItem)"
          >
            <van-image class="tabs-content-item-icon" round :src="cItem.logo" />
            <span>{{ cItem.name }}</span>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <van-skeleton v-if="chainTypes.length == 0" title :row="6" />
    <van-tabs
      v-else
      v-model="activeTab"
      @change="onTabChange"
      class="tabs-wrapper"
    >
      <!-- 全部 -->
      <van-tab title="全部" name="ALL">
        <template #default>
          <div class="tab-box">
            <div v-for="group in groupedList" :key="group.chain">
              <div class="tab-box-label">{{ group.chain }}</div>
              <div
                class="tab-box-list"
                v-for="item in group.items"
                :key="item.id"
                @click="handleVisitDapp(item)"
              >
                <van-image
                  class="tab-box-list-img"
                  :src="item.logo || defaultImg"
                  round
                />
                <div class="tab-box-ri">
                  <div class="tab-box-ri-title">
                    <text>{{ item.name }}</text>
                    <svg-icon
                      v-if="item.is_hot == 1"
                      class="hot-icon"
                      name="hot"
                    />
                    <svg-icon
                      v-if="item.is_hot == 1"
                      class="rm-icon"
                      name="rm"
                    />
                  </div>
                  <div class="tab-box-ri-cont">
                    {{ item.desc || item.chain + "链上的应用" }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </van-tab>

      <!-- 单链标签 -->
      <van-tab
        v-for="chain in chainTypes"
        :title="chain"
        :name="chain"
        :key="chain"
      >
        <template #default>
          <div class="tab-box">
            <div class="tab-box-label">{{ chain }}</div>
            <div
              class="tab-box-list"
              v-for="item in filteredList"
              :key="item.id"
              @click="handleVisitDapp(item)"
            >
              <van-image
                class="tab-box-list-img"
                :src="item.logo || defaultImg"
                round
              />
              <div class="tab-box-ri">
                <div class="tab-box-ri-title">
                  <text>{{ item.name }}</text>
                  <svg-icon
                    v-if="item.is_hot == 1"
                    class="hot-icon"
                    name="hot"
                  />
                  <svg-icon v-if="item.is_hot == 1" class="rm-icon" name="rm" />
                </div>
                <div class="tab-box-ri-cont">
                  {{ item.desc || item.chain + "链上的应用" }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { dappSlides, dappList } from "@/api/path/dapp.api";
import { useSystemStore } from "@/stores/modules/systemStore";
import { useWalletStore } from "@/stores/modules/walletStore";
import { openDapp } from "@/composables/dAppView";
import { cryptoEncode } from "@/utils/crypto";

const systemStore = useSystemStore();
const walletStore = useWalletStore();

const slidesList = ref([]);
const tabsAppConfig = ref([
  {
    title: "热门推荐",
    children: [],
  },
  {
    title: "浏览记录",
    children: [],
  },
]);
const rawList = ref([]); // 全部后端返回的数据
const activeTab = ref("ALL"); // 当前选中的 tab：ALL 或 chain 名
const searchValue = ref("");

// 获取轮播图
const getdappSlides = async () => {
  const res = await dappSlides();
  slidesList.value = res.data.list;
};
// 热门推荐
const gethotlist = async () => {
  const res = await dappList({ is_hot: 1 });
  tabsAppConfig.value[0].children = res.data.list;
};

// 从数据中提取所有链类型（比如 ETH、BSC、TRON、ACC…）
const chainTypes = computed(() => {
  const types = rawList.value.map((item) => item.chain);
  return [...new Set(types)];
});

// “全部”模式下：按链分组
const groupedList = computed(() => {
  const groups = {};
  for (const item of rawList.value) {
    if (!groups[item.chain]) {
      groups[item.chain] = [];
    }
    groups[item.chain].push(item);
  }
  const sortedChains = Object.keys(groups).sort((a, b) => {
    return a === "ACC" ? -1 : b === "ACC" ? 1 : 0;
  });

  return sortedChains.map((chain) => ({
    chain,
    items: groups[chain],
  }));
});

// 单链模式
const filteredList = computed(() => {
  return rawList.value.filter((item) => item.chain === activeTab.value);
});

// tab 切换时触发
const onTabChange = (name) => {
  activeTab.value = name;
};
// 获取列表
const getdappList = async () => {
  const res = await dappList();
  rawList.value = res.data.list;
};

// 热门推荐 浏览记录切换
const onTabsWrapperCard = (name) => {
  if (name == 1) loadHistoryList();
};

//保存数据
const handleVisitDapp = (item) => {
  const history = systemStore.DAPP_CACHE_KEY;
  const filtered = history.filter((i) => i.id !== item.id);
  filtered.unshift(item);
  const newHistory = filtered.slice(0, 6);
  systemStore.DAPP_CACHE_KEY = newHistory;

  const dapp = cryptoEncode(
    JSON.stringify({
      address: walletStore.account,
      privateKey: walletStore.privateKey,
    })
  );
  openDapp(item.url, { dapp });
};
const loadHistoryList = () => {
  const history = systemStore.DAPP_CACHE_KEY;
  tabsAppConfig.value[1].children = history;
};

onMounted(async () => {
  getdappSlides();
  gethotlist();
  getdappList();
  loadHistoryList(); // 加载浏览记录
});
</script>

<style lang="less" scoped>
.container {
  height: calc(100vh - 50px);
  overflow: hidden;
}
.container::-webkit-scrollbar {
  width: 0;
}
.head-bg {
  .fn-head-bg();
}
.head-nav-bar {
  width: 100%;
  height: 26px;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  font-weight: 500;
  font-size: 19px;
  color: #000000;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  height: 33px;
  margin: 15px 17px 0 17px;
  border-radius: 23px 23px 23px 23px;
  background-color: #e3edfd;
  color: #95a9ed;
  .search-icon {
    height: 25px;
    width: 25px;
    margin-left: 6px;
  }
  :deep(.van-cell) {
    flex: 1;
    font-size: 15px;
    margin: 0 6px;
    padding: 0 !important;
    background: #e3edfd !important;
    line-height: 25px !important;
    width: initial !important;
    box-sizing: border-box;
  }
  :deep(.van-field__control) {
    color: #95a9ed !important;
  }
  :deep(.van-field__control::placeholder) {
    color: #95a9ed;
  }
}

.swipe-box {
  height: 180px;
  margin: 17px 17px 0 17px;
  border-radius: 17px 17px 17px 17px;
  .swipe-item {
    height: 160px;
    width: 100%;
    border-radius: 17px 17px 17px 17px;
    overflow: hidden;
  }
  .swipe-image {
    height: 160px;
    width: 100%;
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .active {
      background: @theme-color1;
    }
  }
  .custom-indicator-item {
    display: flex;
    width: 15px;
    height: 2px;
    background: @theme-color2;
    border-radius: 5px 5px 5px 5px;
    margin: 0 2px;
  }
}

.tabs-wrapper-card {
  height: 130px;
  margin-top: 40px;
  :deep(.van-tabs__nav) {
    padding: 3px;
    background: #f2f2f2;
    border: 0px;
  }
  :deep(.van-tabs__nav--card) {
    border-radius: 32px 32px 32px 32px;
  }
  :deep(.van-tab--active) {
    border-radius: 32px 32px 32px 32px;
    color: @theme-color1 !important;
    background-color: @bg-color1;
  }
  :deep(.van-tab--card) {
    color: @font-color2;
    border-right: 0px;
  }
}

.tabs-content-body {
  display: flex;
  width: 100%;
  padding: 20px 0 0 17px;
  overflow: auto;
  box-sizing: border-box;
  .tabs-content-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
    min-width: 50px;
    font-size: 12px;
    margin-right: 26px;
    span {
      margin-top: 4px;
    }

    .tabs-content-item-icon {
      width: 42px;
      height: 42px;
    }
  }
}
.tabs-content-body::-webkit-scrollbar {
  height: 0;
}

.tabs-wrapper {
  padding: 0 12px;
  :deep(.van-tabs__nav) {
    background: transparent;
  }
  :deep(.van-tab) {
    border-bottom: 1px solid #d8d8d8;
  }
  :deep(.van-tabs__line) {
    height: 1px;
    width: 58px;
  }
  :deep(.van-tabs__wrap) {
    height: 30px;
  }
  :deep(.van-tab--active) {
    color: @theme-color1;
  }
  :deep(.van-tabs__line) {
    background: @theme-color1 !important;
  }

  .tab-box {
    padding: 16px 10px 0px;
    height: calc(100vh - 590px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .tab-box-label {
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      font-size: 15px;
      color: #000000;
      margin-bottom: 12px;
    }
    .tab-box-list {
      display: flex;
      margin-bottom: 17px;
      align-items: center;
      .tab-box-list-img {
        width: 42px;
        height: 42px;
        margin-right: 9px;
        flex-shrink: 0;
      }
      .tab-box-ri {
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 500;
        font-size: 15px;
        color: @font-color2;
        .hot-icon {
          width: 15px;
          height: 15px;
          margin-right: 4px;
          position: relative;
          top: -3px;
        }
        .rm-icon {
          width: 33px;
          height: 15px;
        }
        .tab-box-ri-cont {
          margin-top: 3px;
          font-weight: 400;
          font-size: 12px;
          color: #8d8d8d;
        }
      }
    }
  }
}
</style>