frontend-uniapp/pet-manual/index.vue

<script setup lang="ts">
import carousalApi from '@/api/carousal'
import CardList from '../src/components/CardList.vue'
// 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 ToolApi 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 = ToolApi.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
}
const isSearch = ref<boolean>(true)
function handleSearchFocus() {
  isSearch.value = false
}
function handleCancel() {
  isSearch.value = true
}
const historyList = ref<{ name: string }[]>([
  { name: '猫' },
  { name: '狗' },
  { name: '烘培粮' },
])

const findList = ref<{ name: string }[]>([
  { name: '宠物吃饭慢' },
  { name: '猫咪尿闭怎么办' },
])
function onLoad() {
  carousalApi.getCarousalList().then((res) => {
    console.log(res)
  })
}
onLoad()
</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"
        placeholder="请搜索你想要的内容"
        bg-color="white" clear-button="auto"
        :cancel-button="isSearch ? 'none' : 'always'"
        :radius="20"
        @focus="handleSearchFocus"
        @cancel="handleCancel"
      />
    </view>
    <view v-show="!isSearch" class="mx-4 mt-4">
      <view>
        <text class="text-[18px] font-600">
          历史记录
        </text>
        <view class="mt-4 flex gap-2 flex-wrap text-[12px] text-[#999] font-400 leading-5">
          <view v-for="(item, index) in historyList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm">
            {{ item.name }}
          </view>
        </view>
        <view class="mt-8">
          <text class="text-[18px] font-600">
            搜索发现
          </text>
          <view class="mt-4 flex gap-2 flex-wrap text-[12px] text-[#999] font-400 leading-5">
            <view v-for="(item, index) in findList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm gap-1">
              <view class="flex items-center justify-center">
                <uni-icons color="#999999" size="14" type="search" />
              </view>
              <view class="flex items-center justify-center">
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-show="isSearch">
      <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>
      <CardList :card-list="listModel" />
    </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>