|
|
@@ -1,221 +0,0 @@
|
|
|
-<script setup lang="ts">
|
|
|
-import CardList from '@/pages/pet-manual/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>(false)
|
|
|
-function handleSearchFocus() {
|
|
|
- isSearch.value = false
|
|
|
-}
|
|
|
-const historyList = ref<{ name: string }[]>([
|
|
|
- { name: '猫' },
|
|
|
- { name: '狗' },
|
|
|
- { name: '烘培粮' },
|
|
|
-])
|
|
|
-
|
|
|
-const findList = ref<{ name: string }[]>([
|
|
|
- { name: '宠物吃饭慢' },
|
|
|
- { name: '猫咪尿闭怎么办' },
|
|
|
-])
|
|
|
-</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' : 'auto'"
|
|
|
- :radius="20"
|
|
|
- @focus="handleSearchFocus"
|
|
|
- />
|
|
|
- </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>
|
