123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <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>
|