|
|
@@ -1,11 +1,11 @@
|
|
1
|
1
|
<script lang="ts" setup>
|
|
2
|
|
-import {getMerchantCategory, getSelectMerchant, getSelectMerchantSort} from "~/apis/merchant";
|
|
3
|
|
-import type {StoreResult} from "~/apis/model/storeModel";
|
|
4
|
|
-import {StoreParams} from "~/apis/model/storeModel";
|
|
|
2
|
+import { getMerchantCategory, getSelectMerchant, getSelectMerchantSort } from "~/apis/merchant";
|
|
|
3
|
+import type { StoreResult } from "~/apis/model/storeModel";
|
|
|
4
|
+import { StoreParams } from "~/apis/model/storeModel";
|
|
5
|
5
|
import CXBEmpty from "~/components/CXBEmpty/CXBEmpty.vue";
|
|
6
|
|
-import {USER_LATITUDE, USER_LONGITUDE} from "~/constants";
|
|
7
|
|
-import {getProductShare} from "~/apis/common";
|
|
8
|
|
-import {useUserStore} from "~/stores/userStore";
|
|
|
6
|
+import { USER_LATITUDE, USER_LONGITUDE } from "~/constants";
|
|
|
7
|
+import { getProductShare } from "~/apis/common";
|
|
|
8
|
+import { useUserStore } from "~/stores/userStore";
|
|
9
|
9
|
import Cache from "~/utils/cache";
|
|
10
|
10
|
const usePageStore = usePageStoreWidthOut()
|
|
11
|
11
|
const userStore = useUserStore()
|
|
|
@@ -49,11 +49,11 @@ const state = reactive({
|
|
49
|
49
|
// merchantPageInfo: {}
|
|
50
|
50
|
})
|
|
51
|
51
|
//返回顶部标识
|
|
52
|
|
-let flag=ref(false)
|
|
|
52
|
+let flag = ref(false)
|
|
53
|
53
|
|
|
54
|
54
|
const searchValue = ref('')
|
|
55
|
55
|
|
|
56
|
|
-const {windowHeight} = uni.getSystemInfoSync()
|
|
|
56
|
+const { windowHeight } = uni.getSystemInfoSync()
|
|
57
|
57
|
state.scrollHeight = windowHeight - 45
|
|
58
|
58
|
|
|
59
|
59
|
onLoad((option) => {
|
|
|
@@ -102,7 +102,7 @@ onShow(() => {
|
|
102
|
102
|
usePageStore.setPageConfig({
|
|
103
|
103
|
currentPage: {
|
|
104
|
104
|
type: 'tab',
|
|
105
|
|
- url: '/pages/store/nearby/index'
|
|
|
105
|
+ url: '/pages/store/nearby/index'
|
|
106
|
106
|
}
|
|
107
|
107
|
})
|
|
108
|
108
|
// console.log('onshow...')
|
|
|
@@ -210,8 +210,8 @@ const onRefresherRefresh = e => {
|
|
210
|
210
|
};
|
|
211
|
211
|
|
|
212
|
212
|
//小火箭滚动事件
|
|
213
|
|
-const onscroll =e=>{
|
|
214
|
|
- state.scrollTop=e.detail.scrollTop
|
|
|
213
|
+const onscroll = e => {
|
|
|
214
|
+ state.scrollTop = e.detail.scrollTop
|
|
215
|
215
|
}
|
|
216
|
216
|
|
|
217
|
217
|
function handleScrollToLower() {
|
|
|
@@ -228,15 +228,15 @@ function handleScrollToLower() {
|
|
228
|
228
|
//返回顶部事件
|
|
229
|
229
|
const scrollToTop = function () {
|
|
230
|
230
|
console.log('返回顶部');
|
|
231
|
|
- state.scrollTop=0
|
|
|
231
|
+ state.scrollTop = 0
|
|
232
|
232
|
|
|
233
|
233
|
}
|
|
234
|
234
|
//监视
|
|
235
|
|
-watch(()=>state.scrollTop,()=>{
|
|
236
|
|
- if(state.scrollTop as number > 400){
|
|
|
235
|
+watch(() => state.scrollTop, () => {
|
|
|
236
|
+ if (state.scrollTop as number > 400) {
|
|
237
|
237
|
flag.value = true
|
|
238
|
238
|
}
|
|
239
|
|
- if(state.scrollTop as number < 400){
|
|
|
239
|
+ if (state.scrollTop as number < 400) {
|
|
240
|
240
|
flag.value = false
|
|
241
|
241
|
}
|
|
242
|
242
|
})
|
|
|
@@ -251,8 +251,7 @@ watch(()=>state.scrollTop,()=>{
|
|
251
|
251
|
<!-- </nut-category>-->
|
|
252
|
252
|
<div class="flex flex-col fixed top-0 left-0 h-fit z-1 bg-white w-full">
|
|
253
|
253
|
|
|
254
|
|
- <nut-searchbar
|
|
255
|
|
- v-model="searchValue" @search="loadSelectMerchant('reload')" @clear="loadSelectMerchant( 'reload')">
|
|
|
254
|
+ <nut-searchbar v-model="searchValue" @search="loadSelectMerchant('reload')" @clear="loadSelectMerchant('reload')">
|
|
256
|
255
|
<template v-slot:rightout>
|
|
257
|
256
|
<div @tap="loadSelectMerchant('reload')">
|
|
258
|
257
|
搜索
|
|
|
@@ -262,31 +261,22 @@ watch(()=>state.scrollTop,()=>{
|
|
262
|
261
|
|
|
263
|
262
|
|
|
264
|
263
|
</div>
|
|
265
|
|
- <div class="flex pt-10 "
|
|
266
|
|
- >
|
|
|
264
|
+ <div class="flex pt-10 ">
|
|
267
|
265
|
<!-- 左侧 一级分类 -->
|
|
268
|
266
|
<div class="w-1/4">
|
|
269
|
|
- <scroll-view
|
|
270
|
|
- ref="ToTop"
|
|
271
|
|
- :scroll-y="true"
|
|
272
|
|
- :style="{ height: `${state.scrollHeight}px` }"
|
|
273
|
|
- class="w-full h-full bg-[#f8f8f8]"
|
|
274
|
|
- >
|
|
275
|
|
- <div
|
|
276
|
|
- @tap="loadAll()"
|
|
277
|
|
- :class="state.currentMerchantCategoryId == 0 ? 'bg-white font-bold' : ''"
|
|
278
|
|
- class="relative w-25 h-12 block text-sm flex justify-center items-center">
|
|
|
267
|
+ <scroll-view ref="ToTop" :scroll-y="true" :style="{ height: `${state.scrollHeight}px` }"
|
|
|
268
|
+ class="w-full h-full bg-[#f8f8f8]">
|
|
|
269
|
+ <div @tap="loadAll()" :class="state.currentMerchantCategoryId == 0 ? 'bg-white font-bold' : ''"
|
|
|
270
|
+ class="relative w-25 h-12 block text-sm flex justify-center items-center">
|
|
279
|
271
|
<div class="flex items-center gap-1">
|
|
280
|
272
|
<div class="h-4 bg-primary w-1" v-if="state.currentMerchantCategoryId == 0"></div>
|
|
281
|
273
|
<div>全部</div>
|
|
282
|
274
|
</div>
|
|
283
|
275
|
|
|
284
|
276
|
</div>
|
|
285
|
|
- <div v-for="(item, index) in state.merchantCategory" :key="index"
|
|
286
|
|
- @tap="handleCategoryChange(item)"
|
|
287
|
|
- :class="state.currentMerchantCategoryId == item.merchant_category_id ? 'bg-white font-bold' : ''"
|
|
288
|
|
- class="relative h-12 block text-sm flex justify-center items-center gap-1 w-25"
|
|
289
|
|
- >
|
|
|
277
|
+ <div v-for="(item, index) in state.merchantCategory" :key="index" @tap="handleCategoryChange(item)"
|
|
|
278
|
+ :class="state.currentMerchantCategoryId == item.merchant_category_id ? 'bg-white font-bold' : ''"
|
|
|
279
|
+ class="relative h-12 block text-sm flex justify-center items-center gap-1 w-25">
|
|
290
|
280
|
<div class="h-4 bg-primary w-1" v-if="state.currentMerchantCategoryId == item.merchant_category_id"></div>
|
|
291
|
281
|
|
|
292
|
282
|
<div>
|
|
|
@@ -303,45 +293,25 @@ watch(()=>state.scrollTop,()=>{
|
|
303
|
293
|
<div class="w-3/4 ">
|
|
304
|
294
|
<div class="fixed z-3 flex flex-col justify-center h-10 pl-3 top-10">
|
|
305
|
295
|
<nut-menu>
|
|
306
|
|
- <nut-menu-item v-model="state.menuDefaultValue"
|
|
307
|
|
- :options="state.options"
|
|
308
|
|
- @change="loadSelectMerchant('reload')"
|
|
309
|
|
- >
|
|
|
296
|
+ <nut-menu-item v-model="state.menuDefaultValue" :options="state.options" @change="loadSelectMerchant('reload')">
|
|
310
|
297
|
|
|
311
|
298
|
</nut-menu-item>
|
|
312
|
299
|
</nut-menu>
|
|
313
|
300
|
</div>
|
|
314
|
|
- <!-- 返回顶部 -->
|
|
315
|
|
- <div v-show="flag" class="back-top">
|
|
316
|
|
- <img @click="scrollToTop" class="back-TopImg" src="../../static/icon/返回顶部@2x.png" alt="">
|
|
317
|
|
- </div>
|
|
318
|
|
- <scroll-view
|
|
319
|
|
- :scroll-y="true"
|
|
320
|
|
- :style="{ height: `${state.scrollHeight -60}px` }"
|
|
321
|
|
- :scroll-top="state.scrollTop"
|
|
322
|
|
- class="flex flex-1 flex-col p-3 gap-3 mt-10"
|
|
323
|
|
- :refresher-enabled="true"
|
|
324
|
|
- refresher-background="#f5f5f5"
|
|
325
|
|
- refresher-default-style="black"
|
|
326
|
|
- :refresher-triggered="state.triggered"
|
|
327
|
|
- @scrolltolower="handleScrollToLower"
|
|
328
|
|
- @refresherpulling="onRefresherPulling"
|
|
329
|
|
- @refresherRestore="onRefresherRestore"
|
|
330
|
|
- @refresherAbort="onRefresherAbort"
|
|
331
|
|
- @refresherrefresh="onRefresherRefresh"
|
|
332
|
|
- v-if="state.merchantList && state.merchantList.length > 0"
|
|
333
|
|
- @scroll="onscroll"
|
|
334
|
|
- >
|
|
335
|
|
- <div
|
|
336
|
|
- v-for="(item, index) in state.merchantList" :key="index"
|
|
337
|
|
- @click="handleShowMerchant(item)"
|
|
338
|
|
- class="mb-3 ">
|
|
|
301
|
+ <!-- 返回顶部 -->
|
|
|
302
|
+ <div v-show="flag" class="back-top">
|
|
|
303
|
+ <img @click="scrollToTop" class="back-TopImg" src="../../static/icon/返回顶部@2x.png" alt="">
|
|
|
304
|
+ </div>
|
|
|
305
|
+ <scroll-view :scroll-y="true" :style="{ height: `${state.scrollHeight - 60}px` }" :scroll-top="state.scrollTop"
|
|
|
306
|
+ class="flex flex-1 flex-col p-3 gap-3 mt-10" :refresher-enabled="true" refresher-background="#f5f5f5"
|
|
|
307
|
+ refresher-default-style="black" :refresher-triggered="state.triggered" @scrolltolower="handleScrollToLower"
|
|
|
308
|
+ @refresherpulling="onRefresherPulling" @refresherRestore="onRefresherRestore" @refresherAbort="onRefresherAbort"
|
|
|
309
|
+ @refresherrefresh="onRefresherRefresh" v-if="state.merchantList && state.merchantList.length > 0"
|
|
|
310
|
+ @scroll="onscroll">
|
|
|
311
|
+ <div v-for="(item, index) in state.merchantList" :key="index" @click="handleShowMerchant(item)" class="mb-3 ">
|
|
339
|
312
|
<div class="flex">
|
|
340
|
313
|
<div class="flex ">
|
|
341
|
|
- <image :src="item.mer_avatar"
|
|
342
|
|
- mode="aspectFill"
|
|
343
|
|
- class="w-20 h-20 rounded-lg"
|
|
344
|
|
- ></image>
|
|
|
314
|
+ <image :src="item.mer_avatar" mode="aspectFill" class="w-20 h-20 rounded-lg"></image>
|
|
345
|
315
|
</div>
|
|
346
|
316
|
|
|
347
|
317
|
<div class="flex flex-col justify-between px-2">
|
|
|
@@ -359,8 +329,7 @@ watch(()=>state.scrollTop,()=>{
|
|
359
|
329
|
|
|
360
|
330
|
</div>
|
|
361
|
331
|
</div>
|
|
362
|
|
- <div class=" flex justify-center items-center text-[12px] text-gray-500"
|
|
363
|
|
- >
|
|
|
332
|
+ <div class=" flex justify-center items-center text-[12px] text-gray-500">
|
|
364
|
333
|
<div v-if="state.status === 'loading'">
|
|
365
|
334
|
加载中...
|
|
366
|
335
|
</div>
|
|
|
@@ -370,7 +339,7 @@ watch(()=>state.scrollTop,()=>{
|
|
370
|
339
|
</div>
|
|
371
|
340
|
</scroll-view>
|
|
372
|
341
|
<div class="flex justify-center items-center w-full h-[60%]" v-else>
|
|
373
|
|
- <CXBEmpty/>
|
|
|
342
|
+ <CXBEmpty />
|
|
374
|
343
|
|
|
375
|
344
|
</div>
|
|
376
|
345
|
</div>
|
|
|
@@ -385,29 +354,33 @@ style:
|
|
385
|
354
|
|
|
386
|
355
|
<style lang="scss">
|
|
387
|
356
|
page {
|
|
|
357
|
+ height: 100%;
|
|
388
|
358
|
overflow: hidden;
|
|
389
|
359
|
--nut-menu-item-font-size: 14px;
|
|
390
|
360
|
--nut-menu-bar-line-height: 24px;
|
|
391
|
361
|
--nut-menu-bar-box-shadow: none;
|
|
392
|
362
|
--nut-menu-item-active-text-color: #FE0032;
|
|
393
|
363
|
|
|
394
|
|
- .back-top{
|
|
395
|
|
- width: 40px;
|
|
396
|
|
- height: 40px;
|
|
397
|
|
- position: fixed;
|
|
398
|
|
- border-radius: 50%;
|
|
399
|
|
- z-index: 999;
|
|
400
|
|
- right: 15px;
|
|
401
|
|
- bottom: 60px;
|
|
402
|
|
- }
|
|
403
|
|
- .back-TopImg{
|
|
404
|
|
- width: 40px;
|
|
405
|
|
- height: 40px;
|
|
406
|
|
- border-radius: 50%;
|
|
407
|
|
- }
|
|
|
364
|
+ .back-top {
|
|
|
365
|
+ width: 40px;
|
|
|
366
|
+ height: 40px;
|
|
|
367
|
+ position: fixed;
|
|
|
368
|
+ border-radius: 50%;
|
|
|
369
|
+ z-index: 999;
|
|
|
370
|
+ right: 15px;
|
|
|
371
|
+ bottom: 60px;
|
|
|
372
|
+ }
|
|
|
373
|
+
|
|
|
374
|
+ .back-TopImg {
|
|
|
375
|
+ width: 40px;
|
|
|
376
|
+ height: 40px;
|
|
|
377
|
+ border-radius: 50%;
|
|
|
378
|
+ }
|
|
|
379
|
+
|
|
408
|
380
|
.nut-menu {
|
|
409
|
381
|
background: none !important;
|
|
410
|
382
|
}
|
|
|
383
|
+
|
|
411
|
384
|
.nut-menu__bar {
|
|
412
|
385
|
box-shadow: none !important;
|
|
413
|
386
|
border: 1px solid #FE0032;
|