dz-app/pages/index/components/news-tab.vue

<template>
    <index-title-wrap title="通关指南">
        <view class="bg-white mx-card">
            <uv-tabs :current="current" :list="tabs" :scrollable="false" @change="current=$event.index"/>
            <view class="p-20 grid grid-cols-2 gap-20">
                <view v-for="n in typedNews" class="news-tab-item flex items-center rounded-lg"
                      :style="{'--bg': n.bg}" @click="handleClick(n)">
                    <view class="pl-15">
                        <uv-text size="14" type="main" bold :text="n.subType"/>
                        <uv-text type="tips" size="12" :text="n.description" margin="3px 0 0 0"/>
                    </view>
                </view>
            </view>
        </view>
    </index-title-wrap>
</template>

<script>
export default {
    name: "news-tab"
}
</script>

<script setup>
import {ref, computed, onMounted} from 'vue'
import _ from 'lodash'
import mxConst from "@/common/mxConst";
import mxConfig from "@/common/mxConfig";
import IndexTitleWrap from "@/pages/index/components/index-title-wrap.vue";
import {getMainList} from '@/api/webApi/career-news'
import {useTransfer} from "@/hooks/useTransfer";
import {combineOssFile} from "@/utils";

const {transferTo} = useTransfer()
const current = ref(0)
const news = ref([])
const bgPool = [
    ['ie-guide-1.png', 'ie-guide-2.png', 'ie-guide-3.png', 'ie-guide-4.png'],
    ['ie-guide-5.png', 'ie-guide-6.png', 'ie-guide-7.png'],
    ['ie-guide-8.png']
]

const groupedNews = computed(() => _.groupBy(news.value, n => n.type))
const tabs = computed(() => _.keys(groupedNews.value).map(name => ({name})))
const currentType = computed(() => _.get(tabs.value, `[${current.value}].name`))
const typedNews = computed(() => {
    if (!currentType.value) return []
    const currentNews = groupedNews.value[currentType.value]
    return currentNews.map((n, i) => {
        const bgConfigs = bgPool[current.value % bgPool.length]
        const bg = bgConfigs[i % bgConfigs.length]
        return {...n, bg: `url(${getAssetsImage(bg)})`}
    })
})

onMounted(() => getList())

function handleClick(item) {
    const ids = item.refIds?.split(',')
    if (ids.length === 1) {
        const next = {id: item.refIds}
        transferTo(mxConst.routes.newsDetail, next)
    } else if (ids.length > 1) {
        const next = {title: item.subType, ids: item.refIds}
        transferTo(mxConst.routes.newsGroup, next)
    } else {
        throw new Error('Please check getMainList.rows.refIds')
    }
}

async function getList() {
    const {rows} = await getMainList()
    news.value = rows
}

const getAssetsImage = (name) => {
    // 因为动态的css变量不会自动适配router.base, 打开后面的注释可达成。
    const routerBase = mxConfig.ossFileBase || __uniConfig.router.base || '/'
    return combineOssFile(`${routerBase}static/home/${name}`)
}

</script>

<style scoped lang="scss">
.news-tab-item {
    height: 75px;
    background-repeat: repeat;
    background-size: cover;
    background-image: var(--bg);
    background-position: 8px -12px;
}
</style>