ieplus-app/src/pagesMain/pages/index/components/index-guide.vue

<template>
  <view class="mt-32 mx-30">
    <ie-card title="通关指南">
      <view class="wrap mt-20 bg-white rounded-15">
        <uv-tabs :current="current" :list="tabs" :scrollable="false" @change="handleChange"></uv-tabs>
        <view class="p-30 grid grid-cols-2 gap-x-20 gap-y-20 justify-items-center">
          <view class="w-full justify-items-center relative h-150" v-for="(item, index) in contentList" :key="item.id"
            @click="handleClick(item)">
            <ie-image :is-oss="true" :src="item.image" class="w-full h-full" :round="10" bg-color="transparent" />
            <view class="absolute inset-0 h-full z-1 flex flex-col items-start justify-center box-border pl-16">
              <view v-if="item.subType" class="text-28 text-fore-title font-bold">{{ item.subType }}</view>
              <view v-if="item.description" class="mt-6 text-20 text-fore-light">{{ item.description }}</view>
            </view>
          </view>
        </view>
      </view>
    </ie-card>
  </view>
</template>
<script lang="ts" setup>
import { getNewsMainList } from '@/api/modules/news';
import { Guide } from '@/types/news';
import config from '@/config';
import { useUserStore } from '@/store/userStore';
import { useTransferPage } from '@/hooks/useTransferPage';
const userStore = useUserStore();
const { transferTo } = useTransferPage();

const current = ref(0);
const newsList = ref<Guide[]>([]);
const bgPool = [
  ['ie-guide-5.png', 'ie-guide-6.png', 'ie-guide-7.png'],
  ['ie-guide-1.png', 'ie-guide-2.png', 'ie-guide-3.png', 'ie-guide-4.png'],
  ['ie-guide-8.png']
]
const tabs = computed(() => {
  const set = new Set();
  if (!newsList.value.length) {
    return [];
  }
  newsList.value.forEach(item => {
    set.add(item.type);
  });
  return Array.from(set).map(type => ({ name: type }));
});
const contentList = computed(() => {
  return newsList.value.filter(news => news.type === tabs.value[current.value].name).map((item, index) => {
    const bgPoolIndex = current.value % bgPool.length;
    return {
      ...item,
      image: '/guide/' + bgPool[bgPoolIndex][index % bgPool[bgPoolIndex].length]
    }
  });
});

const handleChange = (e: any) => {
  current.value = e.index;
}

const emit = defineEmits<{
  detail: [id: number | string, title: string, url: string|undefined]
}>();

const handleClick = async (data: Guide) => {
  emit('detail', data.refIds, data.subType, data.url);
}

const loadData = () => {
  getNewsMainList().then(res => {
    newsList.value = res.rows;
  });
}
onLoad(() => {
  loadData();
});
</script>
<style lang="scss" scoped>
.wrap {
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
}
</style>