frontend-uniapp/src/pages/feed-plan/index.vue

<script setup lang="ts">
// const searchValue = ref('')
import bg from '@/static/image/feed-plan/bg.png'
import circle from '@/static/image/feed-plan/circle.png'
import message from '@/static/image/feed-plan/message.png'
import ToolFun from '@/utils'

interface ListItem {
  img: string
  title: string
  desc: string
  time: string
}
interface Item {
  content: string
}
interface DotStyle {
  backgroundColor: string
  selectedBackgroundColor: string
  selectedBorder: string
  border: string
}
interface TypeItem {
  name: string
  isClick: boolean
}
const titleName = ref<string>('喂养计划')
const listModel = ref<ListItem[]>([
  {
    img: bg,
    title: '猫咪食物禁忌',
    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
    time: '2025年1月1日',
  },
  {
    img: bg,
    title: '猫咪食物禁忌',
    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
    time: '2025年1月1日',
  },
  {
    img: bg,
    title: '猫咪食物禁忌',
    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
    time: '2025年1月1日',
  },
  {
    img: bg,
    title: '猫咪食物禁忌',
    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
    time: '2025年1月1日',
  },
  {
    img: bg,
    title: '猫咪食物禁忌',
    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
    time: '2025年1月1日',
  },
  {
    img: bg,
    title: '猫咪食物禁忌',
    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
    time: '2025年1月1日',
  },
  {
    img: bg,
    title: '猫咪食物禁忌',
    desc: '1 饮食不慎 2 寄生虫\n 3 病毒感染 4 细菌和毒素感染',
    time: '2025年1月1日',
  },
])
const safeHeight = ToolFun.getSafeHeight()
const searchValue = ref<string>('')

const info = ref<Item[]>([
  { content: '内容 A' },
  { content: '内容 B' },
  { content: '内容 C' },
])

const current = ref<number>(0)

const dotStyle = ref<DotStyle>({
  backgroundColor: '#DCDCDC',
  selectedBackgroundColor: '#0052D9',
  selectedBorder: 'none',
  border: 'none',
})

function change(e: CustomEvent<{ current: number }>): void {
  current.value = e.detail.current
}

const typeList = ref<TypeItem[]>([
  { name: '趣味科普', isClick: true },
  { name: '科学喂养', isClick: false },
  { name: '科学喂养', isClick: false },
  { name: '科学喂养', isClick: false },
])

function handleClickType(item: TypeItem) {
  typeList.value.forEach(i => (i.isClick = false))
  item.isClick = true
}
</script>

<template>
  <TitleBar :title-name="titleName" />

  <view class="flex flex-col bg-[#F5F6F7] overflow-y-auto" :style="`height:calc(100vh - ${safeHeight}px)`">
    <view class="mx-[6px]">
      <uni-search-bar
        v-model="searchValue" :focus="true" bg-color="white" clear-button="auto" cancel-button="none" :radius="20"
      />
    </view>
    <view class="ml-4 mt-4 text-[20px] font-600">
      热门推荐
    </view>
    <view class="mx-4 mt-4">
      <uni-swiper-dot :info="info" :current="current" field="content" mode="dot" :dots-styles="dotStyle">
        <swiper class="swiper-box" @change="change">
          <swiper-item v-for="(item, index) in info" :key="index" style="background: rgba(0, 0, 0, 0.20)">
            <view class="swiper-item">
              {{ item.content }}
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <view class="ml-4 mt-5 text-[20px] font-600">
      养宠贴士
    </view>
    <view class="mx-4">
      <scroll-view class="scroll mt-2" scroll-x="auto">
        <view class="group h-[40px] mt-1">
          <view
            v-for="(item, index) in typeList" :key="index" class="item h-[30px] w-[28%] rounded-15px relative" style="border: 1px solid #E7E7E7"
            @tap="handleClickType(item)"
          >
            <view v-if="item.isClick">
              <image :src="message" class="absolute w-full" style="height: calc(100% + 5px)" />
              <image :src="circle" class="w-[14px] h-[14px] absolute right-2 top-[-4px]" />
            </view>
            <view class="w-full h-full flex items-center justify-center text-[14px] z-20 relative font-600" :class="item.isClick ? 'type_select_span' : 'type_span'">
              {{ item.name }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view
      v-for="(item, index) in listModel" :key="index" class="bg-[white] rounded-md shadow-lg mx-4 mb-4 w-[calc(100% - 32px)] mt-3"
    >
      <view class="flex">
        <image class="w-28 h-28 rounded-l-md" :src="item.img" />
        <view class="p-4">
          <view class="text-[14px]">
            {{ item.title }}
          </view>
          <view class="mt-2 text-[11px] text-[#999] whitespace-pre-line">
            {{ item.desc }}
          </view>
          <view class="mt-3 text-[10px] text-[#D8D8D8]">
            {{ item.time }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.scroll{
  box-sizing: border-box;
  .group{
    white-space: nowrap;
    .item{
      display: inline-block;
      margin-right: 10px;
    }
  }
}
.type_span{
  color:#999
}
.type_select_span{
  color:#FFF
}
</style>