feat: 搜索页静态开发

src/locale/en.json

@@ -3,5 +3,9 @@
   "tabbar.income": "Income",
   "tabbar.mine": "Mine",
   "home.vip": "VIP Membership",
+  "search.placeholder": "Search",
+  "search.filterPrice": "All Price",
+  "search.filterCategory": "Category",
+  "search.filterSellers": "Best Sellers",
   "app.name": "En Title"
 }

src/locale/index.ts

@@ -11,7 +11,7 @@ const messages = {
 }
 
 const i18n = createI18n({
-  locale: uni.getLocale(), // 获取已设置的语言，fallback 语言需要再 manifest.config.ts 中设置
+  locale: uni.getLocale() === 'bn' ? 'bn' : 'en', // 获取已设置的语言，fallback 语言需要再 manifest.config.ts 中设置
   messages,
   allowComposition: true,
 })

src/pages/index/index.vue

@@ -10,7 +10,7 @@
 </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'
@@ -28,6 +28,13 @@ const paging = ref(null)
 // 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
 useZPaging(paging)
 
+// 搜索
+function toSearch() {
+  uni.navigateTo({
+    url: '/pages/search/search',
+  })
+}
+
 // 轮播图
 const current = ref<number>(0)
 const swiperList = ref([
@@ -44,7 +51,6 @@ function onChange(e) {
 }
 
 // 新品列表
-
 const newProducts = ref([
   {
     image: 'https://picsum.photos/260?random=1',

src/pages/search/search.vue

@@ -11,7 +11,9 @@
 // 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
 // eslint-disable-next-line unused-imports/no-unused-imports
 import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import { useQueue } from 'wot-design-uni'
 import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+import { t } from '@/locale'
 
 defineOptions({
   name: 'Index', // 首页
@@ -23,6 +25,64 @@ useZPaging(paging)
 
 // 搜索关键词
 const keyword = ref('')
+
+const { closeOutside } = useQueue()
+const value1 = ref<number>(0)
+const value2 = ref<number>(0)
+const value3 = ref<number>(0)
+
+const option1 = ref<Record<string, any>[]>([
+  { label: t('search.filterPrice'), value: 0 },
+])
+const option2 = ref<Record<string, any>[]>([
+  { label: t('search.filterCategory'), value: 0 },
+])
+const option3 = ref<Record<string, any>[]>([
+  { label: t('search.filterSellers'), value: 0 },
+])
+
+function handleChange1({ value }) {
+  console.log(value)
+}
+function handleChange2({ value }) {
+  console.log(value)
+}
+function handleChange3({ value }) {
+  console.log(value)
+}
+// 新品列表
+const newProducts = ref([
+  {
+    image: 'https://picsum.photos/260?random=1',
+    title: 'Chanel Rouge Coco Shine…',
+    price: '123',
+    sold: 100,
+  },
+  {
+    image: 'https://picsum.photos/260?random=2',
+    title: 'Chanel Rouge Coco Shine…',
+    price: '123',
+    sold: 100,
+  },
+  {
+    image: 'https://picsum.photos/260?random=3',
+    title: 'Chanel Rouge Coco Shine…',
+    price: '123',
+    sold: 100,
+  },
+  {
+    image: 'https://picsum.photos/260?random=4',
+    title: 'Chanel Rouge Coco Shine…',
+    price: '123',
+    sold: 100,
+  },
+  {
+    image: 'https://picsum.photos/260?random=5',
+    title: 'Chanel Rouge Coco Shine…',
+    price: '123',
+    sold: 100,
+  },
+])
 // 搜索结果
 const dataList = ref([])
 function queryList(pageNo, pageSize) {
@@ -40,17 +100,77 @@ 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" @click="closeOutside">
     <template #top>
-      <wd-navbar left-text="返回" right-text="设置" left-arrow>
+      <wd-navbar :bordered="false" safe-area-inset-top placeholder fixed>
         <template #title>
-          <view class="search-box">
-            <wd-search v-model="keyword" hide-cancel placeholder-left />
+          <view class="content">
+            <view class="back">
+              <wd-icon name="thin-arrow-left" size="36rpx" />
+            </view>
+            <input v-model.trim="keyword" class="search-input" type="text" :placeholder="$t('search.placeholder')">
+            <wd-icon name="search" custom-class="search-icon" color="#999" size="32rpx" />
           </view>
         </template>
       </wd-navbar>
+      <wd-drop-menu>
+        <wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
+        <wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" />
+        <wd-drop-menu-item v-model="value3" :options="option3" @change="handleChange3" />
+      </wd-drop-menu>
     </template>
+    <view class="px-25rpx pb-24rpx">
+      <view class="flex flex-wrap gap-20rpx">
+        <product v-for="(item, index) in newProducts" :key="index" :height="340" :item="item" />
+        <view />
+      </view>
+    </view>
   </z-paging>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep() {
+  .wd-navbar__title {
+    margin: 0;
+    max-width: 100%;
+    .content {
+      position: relative;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding: 19rpx 25rpx 19rpx 0;
+      .back {
+        padding: 0 25rpx;
+      }
+      .search-input {
+        box-sizing: border-box;
+        flex: 1;
+        height: 72rpx;
+        text-align: left;
+        background: rgba(245, 245, 245, 0.6);
+        border-radius: 8rpx;
+        border: 1px solid #efefef;
+        font-size: 28rpx;
+        padding-left: 22rpx;
+        padding-right: 64rpx;
+        font-weight: normal;
+        &:active {
+          border-color: rgba(230, 27, 40, 0.65);
+        }
+        &:focus-within {
+          border-color: rgba(230, 27, 40, 0.65) !important;
+        }
+        &:focus-visible {
+          border-color: rgba(230, 27, 40, 0.65) !important;
+        }
+      }
+      .search-icon {
+        position: absolute;
+        right: 42rpx;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}
+</style>

src/style/index.scss

@@ -13,6 +13,7 @@ page {
   font-size: 28rpx;
   // 修改按主题色
   --wot-color-theme: #e61b28;
+  --wot-navbar-height: 110rpx;
 
   // 修改按钮背景色
   // --wot-button-primary-bg-color: green;