|
@@ -13,6 +13,8 @@
|
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
|
import { useQueue } from 'wot-design-uni'
|
|
import { useQueue } from 'wot-design-uni'
|
|
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
|
|
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'
|
|
import { goBack } from '@/utils/page'
|
|
|
|
|
|
defineOptions({
|
|
defineOptions({
|
|
@@ -27,83 +29,84 @@ const paging = ref(null)
|
|
useZPaging(paging)
|
|
useZPaging(paging)
|
|
|
|
|
|
// 搜索关键词
|
|
// 搜索关键词
|
|
-const keyword = ref('')
|
|
|
|
|
|
+const formData = ref<any>({
|
|
|
|
+ storeName: '',
|
|
|
|
+ prices: 0,
|
|
|
|
+ cateId: 0,
|
|
|
|
+ sortWay: 0, // 3=销量升序,4=销量降序
|
|
|
|
+})
|
|
|
|
|
|
const { closeOutside } = useQueue()
|
|
const { closeOutside } = useQueue()
|
|
-const value1 = ref<number>(0)
|
|
|
|
-const value2 = ref<number>(0)
|
|
|
|
-const value3 = ref<number>(0)
|
|
|
|
|
|
|
|
const option1 = ref<Record<string, any>[]>([
|
|
const option1 = ref<Record<string, any>[]>([
|
|
- { label: 'All Price', value: 0 },
|
|
|
|
-])
|
|
|
|
-const option2 = ref<Record<string, any>[]>([
|
|
|
|
- { label: 'Category', value: 0 },
|
|
|
|
-])
|
|
|
|
-const option3 = ref<Record<string, any>[]>([
|
|
|
|
- { label: 'Best Sellers', 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,
|
|
|
|
- },
|
|
|
|
|
|
+ { label: t('home.priceTab.allPrice'), value: 0 },
|
|
{
|
|
{
|
|
- image: 'https://picsum.photos/260?random=2',
|
|
|
|
- title: 'Chanel Rouge Coco Shine…',
|
|
|
|
- price: '123',
|
|
|
|
- sold: 100,
|
|
|
|
|
|
+ label: t('home.priceTab.300spot'),
|
|
|
|
+ value: 300,
|
|
|
|
+ minPrice: 0,
|
|
|
|
+ maxPrice: 300,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- image: 'https://picsum.photos/260?random=3',
|
|
|
|
- title: 'Chanel Rouge Coco Shine…',
|
|
|
|
- price: '123',
|
|
|
|
- sold: 100,
|
|
|
|
|
|
+ label: t('home.priceTab.500spot'),
|
|
|
|
+ value: 500,
|
|
|
|
+ minPrice: 300,
|
|
|
|
+ maxPrice: 500,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- image: 'https://picsum.photos/260?random=4',
|
|
|
|
- title: 'Chanel Rouge Coco Shine…',
|
|
|
|
- price: '123',
|
|
|
|
- sold: 100,
|
|
|
|
|
|
+ label: t('home.priceTab.1000spot'),
|
|
|
|
+ value: 1000,
|
|
|
|
+ minPrice: 500,
|
|
|
|
+ maxPrice: 1000,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- image: 'https://picsum.photos/260?random=5',
|
|
|
|
- title: 'Chanel Rouge Coco Shine…',
|
|
|
|
- price: '123',
|
|
|
|
- sold: 100,
|
|
|
|
|
|
+ label: t('home.priceTab.2000spot'),
|
|
|
|
+ value: 2000,
|
|
|
|
+ minPrice: 1000,
|
|
|
|
+ maxPrice: 2000,
|
|
},
|
|
},
|
|
])
|
|
])
|
|
|
|
+
|
|
|
|
+const option2 = ref<Record<string, any>[]>([
|
|
|
|
+ { label: 'All Category', 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([])
|
|
const dataList = ref([])
|
|
-function queryList(pageNo, pageSize) {
|
|
|
|
- // 此处请求仅为演示,请替换为自己项目中的请求
|
|
|
|
- setTimeout(() => {
|
|
|
|
- dataList.value = [
|
|
|
|
- { title: '123' },
|
|
|
|
- { title: '123' },
|
|
|
|
- { title: '123' },
|
|
|
|
- { title: '12345' },
|
|
|
|
- ]
|
|
|
|
- paging.value.complete(dataList.value)
|
|
|
|
- }, 1000)
|
|
|
|
|
|
+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.storeName.value.sortWay === 1 ? 3 : formData.value.storeName.value.sortWay === -1 ? 4 : 0,
|
|
|
|
+ minPrice,
|
|
|
|
+ maxPrice,
|
|
|
|
+ }
|
|
|
|
+ const res = await getList(params)
|
|
|
|
+ paging.value.complete(res.data.list)
|
|
|
|
+ }
|
|
|
|
+ catch {
|
|
|
|
+ paging.value.complete(false)
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+onLoad(() => {
|
|
|
|
+ getCategoryList()
|
|
|
|
+})
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
- <z-paging ref="paging" refresher-only use-page-scroll @query="queryList" @click="closeOutside">
|
|
|
|
|
|
+ <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList" @click="closeOutside">
|
|
<template #top>
|
|
<template #top>
|
|
<view class="bg-white" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
|
|
<view class="bg-white" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
|
|
<wd-navbar :bordered="false">
|
|
<wd-navbar :bordered="false">
|
|
@@ -112,22 +115,27 @@ function queryList(pageNo, pageSize) {
|
|
<view class="back">
|
|
<view class="back">
|
|
<wd-icon name="thin-arrow-left" size="32rpx" @click="goBack" />
|
|
<wd-icon name="thin-arrow-left" size="32rpx" @click="goBack" />
|
|
</view>
|
|
</view>
|
|
- <input v-model.trim="keyword" class="search-input" type="text" :placeholder="$t('search.placeholder')">
|
|
|
|
|
|
+ <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" />
|
|
<wd-icon name="search" custom-class="search-icon" color="#999" size="32rpx" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
</wd-navbar>
|
|
</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>
|
|
|
|
|
|
+ <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="Best Sellers" @change="queryList(1, 20)" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
<view class="px-24rpx pb-24rpx">
|
|
<view class="px-24rpx pb-24rpx">
|
|
<view class="grid grid-cols-2 gap-22rpx">
|
|
<view class="grid grid-cols-2 gap-22rpx">
|
|
- <product v-for="(item, index) in newProducts" :key="index" :height="340" :item="item" />
|
|
|
|
- <view />
|
|
|
|
|
|
+ <product v-for="(item, index) in dataList" :key="index" :height="340" :item="item" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</z-paging>
|