|
|
@@ -0,0 +1,221 @@
|
|
|
+<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>
|
