add:新增搜索页面和卡片组件

src/pages/pet-manual/components/CardList.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface ListItem {
+  img: string
+  title: string
+  desc: string
+  time: string
+}
+const props = defineProps<{
+  cardList: ListItem[]
+}>()
+</script>
+
+<template>
+  <view
+    v-for="(item, index) in props.cardList" :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>
+</template>
+
+<style scoped>
+
+</style>

src/pages/pet-manual/index.vue

@@ -1,4 +1,5 @@
 <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'
@@ -102,6 +103,20 @@ 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>
@@ -110,61 +125,78 @@ function handleClickType(item: TypeItem) {
   <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"
+        v-model="searchValue"
+        placeholder="请搜索你想要的内容"
+        bg-color="white" clear-button="auto"
+        :cancel-button="isSearch ? 'none' : 'auto'"
+        :radius="20"
+        @focus="handleSearchFocus"
       />
     </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 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>
-      </scroll-view>
+      </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 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>
-        </view>
+        </scroll-view>
       </view>
+      <CardList :card-list="listModel" />
     </view>
   </view>
 </template>