feat: 搜索页面

src/components/product/product.vue

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-const props = defineProps({
+defineOptions({
+  name: 'Product', // 商品组件
+})
+defineProps({
   item: {
     type: Object,
     required: true,

src/pages-sub/demo/index.vue

@@ -1,27 +0,0 @@
-<route lang="json5" type="page">
-{
-  style: {
-    navigationStyle: 'default',
-    navigationBarTitleText: '分包页面 标题',
-  },
-}
-</route>
-
-<script lang="ts" setup>
-// code here
-</script>
-
-<template>
-  <view class="text-center">
-    <view class="m-8">
-      http://localhost:9000/#/pages-sub/demo/index
-    </view>
-    <view class="text-green-500">
-      分包页面demo
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-//
-</style>

src/pages.json

@@ -51,15 +51,6 @@
         "navigationStyle": "custom"
       }
     },
-    {
-      "path": "pages/index/index copy",
-      "type": "home",
-      "layout": "tabbar",
-      "style": {
-        "navigationStyle": "custom",
-        "navigationBarTitleText": "首页"
-      }
-    },
     {
       "path": "pages/about/about",
       "type": "page",
@@ -100,6 +91,14 @@
         "navigationStyle": "custom",
         "navigationBarTitleText": "首页"
       }
+    },
+    {
+      "path": "pages/search/search",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "subPackages": []

src/pages/index/index copy.vue

@@ -1,93 +0,0 @@
-<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
-<route lang="json5" type="home">
-{
-  layout: 'tabbar',
-  style: {
-    // 'custom' 表示开启自定义导航栏，默认 'default'
-    navigationStyle: 'custom',
-    navigationBarTitleText: '首页',
-  },
-}
-</route>
-
-<script lang="ts" setup>
-import PLATFORM from '@/utils/platform'
-
-defineOptions({
-  name: 'Home',
-})
-
-// 获取屏幕边界到安全区域距离
-let safeAreaInsets
-let systemInfo
-
-// #ifdef MP-WEIXIN
-// 微信小程序使用新的API
-systemInfo = uni.getWindowInfo()
-safeAreaInsets = systemInfo.safeArea
-  ? {
-      top: systemInfo.safeArea.top,
-      right: systemInfo.windowWidth - systemInfo.safeArea.right,
-      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
-      left: systemInfo.safeArea.left,
-    }
-  : null
-// #endif
-
-// #ifndef MP-WEIXIN
-// 其他平台继续使用uni API
-systemInfo = uni.getSystemInfoSync()
-safeAreaInsets = systemInfo.safeAreaInsets
-// #endif
-const author = ref('菲鸽')
-const description = ref(
-  'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
-)
-// 测试 uni API 自动引入
-onLoad(() => {
-  console.log('项目作者:', author.value)
-})
-
-console.log('index')
-</script>
-
-<template>
-  <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
-    <view class="mt-4 text-center text-4xl text-[#d14328]">
-      unibest
-    </view>
-    <view class="mb-8 mt-2 text-center text-2xl">
-      最好用的 uniapp 开发模板
-    </view>
-
-    <view class="m-auto mb-2 max-w-100 text-justify indent text-4">
-      {{ description }}
-    </view>
-    <view class="mt-4 text-center">
-      作者：
-      <text class="text-green-500">
-        菲鸽
-      </text>
-    </view>
-    <view class="mt-4 text-center">
-      官网地址：
-      <text class="text-green-500">
-        https://unibest.tech
-      </text>
-    </view>
-    <view class="mt-6 h-1px bg-#eee" />
-    <view class="mt-8 text-center">
-      当前平台是：
-      <text class="text-green-500">
-        {{ PLATFORM.platform }}
-      </text>
-    </view>
-    <view class="mt-4 text-center">
-      模板分支是：
-      <text class="text-green-500">
-        i18n
-      </text>
-    </view>
-  </view>
-  <tabbar />
-</template>

src/pages/index/index.vue

@@ -10,6 +10,9 @@
 </route>
 
 <script lang="ts" setup>
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
 
 defineOptions({
@@ -114,31 +117,22 @@ function queryList(pageNo, pageSize) {
 </script>
 
 <template>
-  <z-paging
-    ref="paging"
-    refresher-only
-    use-page-scroll
-    @query="queryList"
-  >
+  <z-paging ref="paging" refresher-only use-page-scroll @query="queryList">
     <template #top>
       <view
         class="flex items-center justify-between bg-white pb-40rpx pl-42rpx pr-34rpx pt-26rpx"
         :style="{ paddingTop: `${safeAreaInsets?.top + 13}px` }"
       >
-        <image
-          src="/static/header-logo.png"
-          class="h-54rpx w-250rpx"
-        />
+        <image src="/static/header-logo.png" class="h-54rpx w-250rpx" />
         <view class="flex items-center">
-          <wd-icon custom-class="mr-20rpx" name="search1" size="38rpx" />
+          <wd-icon custom-class="mr-20rpx" name="search1" size="38rpx" @click="toSearch" />
           <wd-icon name="notification" size="38rpx" />
         </view>
       </view>
     </template>
     <wd-swiper
       v-model:current="current"
-      :list="swiperList"
-      autoplay
+      :list="swiperList" autoplay
       :indicator="{ type: 'fraction' }"
       indicator-position="bottom-right"
       @click="handleClick"
@@ -148,48 +142,33 @@ function queryList(pageNo, pageSize) {
       <view class="flex items-end justify-between pb-22rpx pt-24rpx">
         <view class="flex items-center justify-between">
           <view class="flex flex-col items-center">
-            <image
-              src="/static/index/home-vip.png"
-              class="h-100rpx w-100rpx"
-            />
+            <image src="/static/index/home-vip.png" class="h-100rpx w-100rpx" />
             <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
               {{ $t('home.vip') }}
             </view>
           </view>
           <view class="flex flex-col items-center">
-            <image
-              src="/static/index/home-vip.png"
-              class="h-100rpx w-100rpx"
-            />
+            <image src="/static/index/home-vip.png" class="h-100rpx w-100rpx" />
             <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
               {{ $t('home.vip') }}
             </view>
           </view>
         </view>
         <view class="flex flex-col items-center">
-          <image
-            src="/static/index/home-vip.png"
-            class="h-112rpx w-112rpx"
-          />
+          <image src="/static/index/home-vip.png" class="h-112rpx w-112rpx" />
           <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
             {{ $t('home.vip') }}
           </view>
         </view>
         <view class="flex items-center justify-between">
           <view class="flex flex-col items-center">
-            <image
-              src="/static/index/home-vip.png"
-              class="h-100rpx w-100rpx"
-            />
+            <image src="/static/index/home-vip.png" class="h-100rpx w-100rpx" />
             <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
               {{ $t('home.vip') }}
             </view>
           </view>
           <view class="flex flex-col items-center">
-            <image
-              src="/static/index/home-vip.png"
-              class="h-100rpx w-100rpx"
-            />
+            <image src="/static/index/home-vip.png" class="h-100rpx w-100rpx" />
             <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
               {{ $t('home.vip') }}
             </view>
@@ -202,11 +181,7 @@ function queryList(pageNo, pageSize) {
         </view>
         <scroll-view scroll-x>
           <view class="flex items-center gap-22rpx pb-24rpx">
-            <product
-              v-for="(item, index) in newProducts"
-              :key="index"
-              :item="item"
-            />
+            <product v-for="(item, index) in newProducts" :key="index" :item="item" />
           </view>
         </scroll-view>
       </view>
@@ -217,12 +192,7 @@ function queryList(pageNo, pageSize) {
           </block>
         </wd-tabs>
         <view class="flex flex-wrap gap-22rpx">
-          <product
-            v-for="(item, index) in newProducts"
-            :key="index"
-            :height="340"
-            :item="item"
-          />
+          <product v-for="(item, index) in newProducts" :key="index" :height="340" :item="item" />
           <view />
         </view>
       </view>

src/pages/search/search.vue

@@ -0,0 +1,56 @@
+<route lang="json5">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+
+defineOptions({
+  name: 'Index', // 首页
+})
+// z-paging
+const paging = ref(null)
+// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
+useZPaging(paging)
+
+// 搜索关键词
+const keyword = ref('')
+// 搜索结果
+const dataList = ref([])
+function queryList(pageNo, pageSize) {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  setTimeout(() => {
+    dataList.value = [
+      { title: '123' },
+      { title: '123' },
+      { title: '123' },
+      { title: '12345' },
+    ]
+    paging.value.complete(dataList.value)
+  }, 1000)
+}
+</script>
+
+<template>
+  <z-paging ref="paging" refresher-only use-page-scroll @query="queryList">
+    <template #top>
+      <wd-navbar left-text="返回" right-text="设置" left-arrow>
+        <template #title>
+          <view class="search-box">
+            <wd-search v-model="keyword" hide-cancel placeholder-left />
+          </view>
+        </template>
+      </wd-navbar>
+    </template>
+  </z-paging>
+</template>
+
+<style lang="scss" scoped></style>