bandhuBuy-uniapp/src/pages/search/search.vue

<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 { useQueue } from 'wot-design-uni'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
import { categoryList, getList } from '@/api/product'
import { t } from '@/locale'
import { goBack } from '@/utils/page'

defineOptions({
  name: 'SearchPage', // 搜索
})
// 获取屏幕边界到安全区域距离
const systemInfo = uni.getSystemInfoSync()
const safeAreaInsets = systemInfo.safeAreaInsets
// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)

// 搜索关键词
const formData = ref<any>({
  storeName: '',
  prices: 0,
  cateId: 0,
  sortWay: 0, // 3=销量升序,4=销量降序
})

const { closeOutside } = useQueue()

const option1 = ref<Record<string, any>[]>([
  { label: t('home.priceTab.allPrice'), value: 0 },
  {
    label: t('home.priceTab.300spot'),
    value: 300,
    minPrice: 0,
    maxPrice: 300,
  },
  {
    label: t('home.priceTab.500spot'),
    value: 500,
    minPrice: 300,
    maxPrice: 500,
  },
  {
    label: t('home.priceTab.1000spot'),
    value: 1000,
    minPrice: 500,
    maxPrice: 1000,
  },
  {
    label: t('home.priceTab.2000spot'),
    value: 2000,
    minPrice: 1000,
    maxPrice: 2000,
  },
])

const option2 = ref<Record<string, any>[]>([
  { label: t('search.filterCategory'), value: 0 },
])
async function getCategoryList() {
  const res = await categoryList({ page: 1, size: 20 })
  console.log(res)
  option2.value = [...option2.value, ...res.data.list.map((i: any) => ({ label: i.name, value: i.id }))]
}

// 搜索结果
const dataList = ref([])
async function queryList(pageNo: number, pageSize: number) {
  try {
    const currentTab = option1.value.find((i: any) => i.value === formData.value.prices) || option1.value[0]
    console.log(currentTab)
    const minPrice = currentTab?.minPrice ?? undefined
    const maxPrice = currentTab?.maxPrice ?? undefined
    const params = {
      page: pageNo,
      size: pageSize,
      storeName: formData.value.storeName,
      cateId: formData.value.cateId ? formData.value.cateId : undefined,
      sortWay: formData.value.sortWay === 1 ? 3 : formData.value.sortWay === -1 ? 4 : 0,
      minPrice,
      maxPrice,
    }
    const res = await getList(params)
    paging.value.complete(res.data.list)
  }
  catch (err) {
    console.log(err)
    paging.value.complete(false)
  }
}

onLoad(() => {
  getCategoryList()
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList" @click="closeOutside">
    <template #top>
      <view class="bg-white" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
        <wd-navbar :bordered="false">
          <template #title>
            <view class="content">
              <view class="back">
                <wd-icon name="thin-arrow-left" size="32rpx" @click="goBack" />
              </view>
              <input v-model.trim="formData.storeName" class="search-input" type="text" :placeholder="$t('search.placeholder')" @confirm="queryList(1, 20)">
              <wd-icon name="search" custom-class="search-icon" color="#999" size="32rpx" />
            </view>
          </template>
        </wd-navbar>
        <view class="flex bg-white text-center">
          <wd-drop-menu class="flex-1">
            <wd-drop-menu-item v-model="formData.prices" :options="option1" @change="queryList(1, 20)" />
          </wd-drop-menu>
          <wd-drop-menu class="flex-1">
            <wd-drop-menu-item v-model="formData.cateId" :options="option2" @change="queryList(1, 20)" />
          </wd-drop-menu>
          <view class="flex-1">
            <wd-sort-button v-model="formData.sortWay" :title="t('search.filterSellers')" @change="queryList(1, 20)" />
          </view>
        </view>
      </view>
    </template>
    <view class="px-24rpx pb-24rpx">
      <view class="grid grid-cols-2 gap-22rpx">
        <product v-for="(item, index) in dataList" :key="index" :height="340" :item="item" />
      </view>
    </view>
  </z-paging>
</template>

<style>
page {
  background: #fff;
}
</style>

<style lang="scss" scoped>
:deep() {
  .wd-navbar__title {
    margin: 0;
    max-width: 100%;
    .content {
      box-sizing: border-box;
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 19rpx 25rpx 19rpx 0;
      .back {
        padding: 0 25rpx;
      }
      .search-input {
        flex: 1;
        height: 100%;
        text-align: left;
        background: rgba(245, 245, 245, 0.6);
        border-radius: 8rpx;
        border: 1px solid #efefef;
        font-size: 28rpx;
        padding: 16rpx 64rpx 16rpx 22rpx;
        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>