|
@@ -11,7 +11,9 @@
|
|
// 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
|
|
// 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
|
|
// eslint-disable-next-line unused-imports/no-unused-imports
|
|
// eslint-disable-next-line unused-imports/no-unused-imports
|
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
|
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 useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
|
|
|
|
+import { t } from '@/locale'
|
|
|
|
|
|
defineOptions({
|
|
defineOptions({
|
|
name: 'Index', // 首页
|
|
name: 'Index', // 首页
|
|
@@ -23,6 +25,64 @@ useZPaging(paging)
|
|
|
|
|
|
// 搜索关键词
|
|
// 搜索关键词
|
|
const keyword = ref('')
|
|
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([])
|
|
const dataList = ref([])
|
|
function queryList(pageNo, pageSize) {
|
|
function queryList(pageNo, pageSize) {
|
|
@@ -40,17 +100,77 @@ function queryList(pageNo, pageSize) {
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<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>
|
|
<template #top>
|
|
- <wd-navbar left-text="返回" right-text="设置" left-arrow>
|
|
|
|
|
|
+ <wd-navbar :bordered="false" safe-area-inset-top placeholder fixed>
|
|
<template #title>
|
|
<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>
|
|
</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>
|
|
</template>
|
|
</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>
|
|
</z-paging>
|
|
</template>
|
|
</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>
|