yzdyh-h5/src/views/Birds/index.vue

<template>
  <van-tabs v-if="model" ref="tabsRef" v-model:active="active" scrollspy sticky class="birds">
    <van-tab title="前言" :name="0">
      <img class="birds__title" src="@/assets/images/birds/icon_pre_bird@2x-min.png" />
      <div class="birds__preface">
        <div v-html="model.preface" />
      </div>

      <div class="birds__bg b0" :style="{ background: '#FFFDF5' }" />
    </van-tab>

    <van-tab v-for="item in model.list" :title="item.label" :key="item.id" :name="item.id">
      <img class="birds__title" :src="item.labelImg" />

      <div v-if="item.info" class="birds__info">
        <p :style="{ color: item.infoColor }" v-html="item.info" />
      </div>

      <div class="birds-cards">
        <div
          v-for="subItem in item.list"
          :key="subItem.id"
          class="birds-card"
          @click="handleCard(item.id, subItem.id)"
        >
          <div class="birds-card__img">
            <van-image lazy-load fit="cover" width="100%" height="100%" :src="subItem.imgs[0]" />
          </div>
          <p class="birds-card__title limit-line">{{ subItem.title }}</p>
          <p class="birds-card__subtitle limit-line">{{ subItem.author }}</p>
        </div>
      </div>

      <div
        v-if="item.bgColor"
        :class="['birds__bg', `b${item.id}`]"
        :style="{ background: item.bgColor }"
      />
    </van-tab>

    <van-tab title="结语">
      <img class="birds__title" src="@/assets/images/birds/icon_end_bird@2x-min.png" />
      <div class="birds__preface">
        <div v-html="model.epilogue" :style="{ color: '#533D23' }" />
      </div>

      <div class="birds__bg b0" :style="{ background: '#FFFDF5' }" />
    </van-tab>
  </van-tabs>

  <div v-if="loading" class="loading-page">
    <van-loading color="#52c1ff" :size="48" />
  </div>
</template>

<script lang="ts">
export default {
  name: 'birds'
}
</script>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { TabsInstance } from 'vant'
import { useBirdsStore } from '@/stores/birds'

const route = useRoute()
const router = useRouter()
const active = ref(0)
const loading = ref(true)
const birds = useBirdsStore()
const tabsRef = ref<TabsInstance>()
const model = computed(() => birds.data.find((item) => item.id === Number(route.params.id)))

onMounted(() => {
  setTimeout(() => {
    tabsRef.value?.scrollTo(Number(route.params.secondId))

    loading.value = false
  }, 500)
})

const handleCard = (pId: number, id: number) => {
  router.push({
    name: 'birds-detail',
    params: {
      id: route.params.id,
      sid: pId,
      detailId: id
    }
  })
}
</script>

<style lang="scss">
@import './index.scss';
</style>