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, toPage } 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: '',
  price: 0,
  cateId: 0,
  sort: 'SALES_DESC',
})

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,
  },
  {
    label: t('home.priceTab.3000spot'),
    value: 3000,
    minPrice: 2000,
    maxPrice: 3000,
  },
])

const option2 = ref<Record<string, any>[]>([
  { label: t('search.filterCategory'), value: 0 },
])

const option3 = ref<Record<string, any>[]>([
  { label: t('search.filterSellers'), value: 'SALES_DESC' },
  { label: t('search.filterSellers1'), value: 'CREATE_DESC' },
])
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.price) || option1.value[0]
    // console.log(currentTab)
    // const minPrice = currentTab?.minPrice ?? undefined
    // const maxPrice = currentTab?.maxPrice ?? undefined
    const params = {
      page: pageNo,
      size: pageSize,
      price: formData.value.price || undefined,
      sort: formData.value.sort,
      storeName: formData.value.storeName,
      cateId: formData.value.cateId ? formData.value.cateId : undefined,
      // 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="bg-white text-center">
          <wd-drop-menu>
            <wd-drop-menu-item v-model="formData.price" :options="option1" @change="queryList(1, 20)" />
            <wd-drop-menu-item v-model="formData.cateId" :options="option2" @change="queryList(1, 20)" />
            <wd-drop-menu-item v-model="formData.sort" :options="option3" @change="queryList(1, 20)" />
          </wd-drop-menu>
        </view>
      </view>
    </template>
    <view class="mt-24rpx px-24rpx pb-24rpx">
      <view class="grid grid-cols-2 gap-20rpx">
        <Product
          v-for="(item, index) in dataList"
          :key="index"
          width="100%"
          :height="340"
          :item="item"
          @item-click="toPage({ url: '/pages/productDetail/productDetail', params: { productId: item.productId } })"
        />
      </view>
    </view>
  </z-paging>
</template>

<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%);
      }
    }
  }
  .wd-drop-menu__list {
    background: none;
    .wd-drop-menu__item-title::after {
      width: 60% !important;
    }
  }
  .wd-sort-button--line {
    .wd-sort-button__left::after {
      width: 90% !important;
    }
  }
}
</style>