|
|
@@ -2,7 +2,7 @@
|
|
|
import { StaticUrl, VITE_OSS_BASE_URL } from '@/config'
|
|
|
import router from '@/router'
|
|
|
|
|
|
-const props = defineProps<{ categoryList: Api.xsbCategories[], swiper: Api.xsbAdvertInfo[], hotText: Api.xsbSearchTerm[], recommendText: Api.xsbSearchTerm[] }>()
|
|
|
+const props = defineProps<{ categoryList: Api.xsbCategories[], swiper: Api.xsbAdvertInfo[], hotText: Api.xsbSearchTerm[], recommendText: Api.xsbSearchTerm[], loading: boolean }>()
|
|
|
|
|
|
const emit = defineEmits(['changeNav'])
|
|
|
|
|
|
@@ -43,9 +43,7 @@ function handleScroll(e: UniHelper.ScrollViewOnScrollEvent) {
|
|
|
onMounted(() => {
|
|
|
ScrollDown.value = false
|
|
|
})
|
|
|
-function handleCommonName(name: string) {
|
|
|
- router.push({ name })
|
|
|
-}
|
|
|
+
|
|
|
function handleCommonClass(item: Api.xsbCategories) {
|
|
|
topNavActive.value = item.code
|
|
|
leftActive.value = item.children[0].code
|
|
|
@@ -83,23 +81,25 @@ function handleGo(e: { index: number, item: Api.xsbAdvertInfo }) {
|
|
|
class="header-linear h320rpx px24rpx"
|
|
|
:style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
|
|
|
>
|
|
|
- <view class="h60rpx w-full flex items-center justify-between rounded-40rpx bg-white pr6rpx" @click="router.push({ name: 'xsb-search' })">
|
|
|
- <view class="flex items-center pb14rpx pl24rpx pt16rpx">
|
|
|
- <wd-icon name="search" size="14" color="#ccc" />
|
|
|
- <view class="search ml12rpx h-full w-full overflow-hidden">
|
|
|
- <wd-notice-bar
|
|
|
- :text="hotText.map((it) => it.searchName)" custom-class="notice-bar" color="#ccc"
|
|
|
- background-color="#fff" direction="vertical"
|
|
|
- />
|
|
|
+ <wd-skeleton theme="image" :loading="loading" :row-col="[{ height: '30px', width: '100%' }]">
|
|
|
+ <view class="h60rpx w-full flex items-center justify-between rounded-40rpx bg-white pr6rpx" @click="router.push({ name: 'xsb-search' })">
|
|
|
+ <view class="flex items-center pb14rpx pl24rpx pt16rpx">
|
|
|
+ <wd-icon name="search" size="14" color="#ccc" />
|
|
|
+ <view class="search ml12rpx h-full w-full overflow-hidden">
|
|
|
+ <wd-notice-bar
|
|
|
+ :text="hotText.map((it) => it.searchName)" custom-class="notice-bar" color="#ccc"
|
|
|
+ background-color="#fff" direction="vertical"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="h50rpx w96rpx flex items-center justify-center rounded-26rpx bg-[var(--them-color)] text-24rpx text-white font-semibold"
|
|
|
+ >
|
|
|
+ 搜索
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view
|
|
|
- class="h50rpx w96rpx flex items-center justify-center rounded-26rpx bg-[var(--them-color)] text-24rpx text-white font-semibold"
|
|
|
- >
|
|
|
- 搜索
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <scroll-view scroll-x class="mb20rpx mt20rpx h44rpx whitespace-nowrap">
|
|
|
+ </wd-skeleton>
|
|
|
+ <scroll-view v-if="recommendText.length" scroll-x class="mb20rpx mt20rpx h44rpx whitespace-nowrap">
|
|
|
<view class="h-full flex items-center">
|
|
|
<view
|
|
|
v-for="item in recommendText"
|
|
|
@@ -111,30 +111,63 @@ function handleGo(e: { index: number, item: Api.xsbAdvertInfo }) {
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
- <view class="px24rpx -mt180rpx">
|
|
|
- <wd-swiper
|
|
|
- :autoplay="false" :list="swiperList" :height="138" :indicator="false" value-key="advertImg" @click="handleGo"
|
|
|
- />
|
|
|
+
|
|
|
+ <view class="px24rpx" :class="[recommendText.length ? '-mt180rpx' : '-mt240rpx']">
|
|
|
+ <wd-skeleton theme="image" :loading="loading" :row-col="[{ height: '138px', width: '100%' }]">
|
|
|
+ <wd-swiper
|
|
|
+ :autoplay="false" :list="swiperList" :height="138" :indicator="false" value-key="advertImg" @click="handleGo"
|
|
|
+ />
|
|
|
+ </wd-skeleton>
|
|
|
<view class="mt20rpx">
|
|
|
<wd-card title="" custom-class="card-zt">
|
|
|
- <view class="px24rpx pt24rpx">
|
|
|
- <view class="grid grid-cols-5 gap-x-38rpx gap-y-24rpx">
|
|
|
- <view v-for="item, index in classfiylist" :key="index" @click="handleCommonClass(item)">
|
|
|
- <image :src="item.icon" class="h100rpx w100rpx" />
|
|
|
- <view class="mt12rpx text-24rpx text-#222">
|
|
|
- {{ item.name }}
|
|
|
+ <view :class="[loading ? 'p24rpx' : '']">
|
|
|
+ <wd-skeleton
|
|
|
+ :loading="loading"
|
|
|
+ theme="image" :row-col="[
|
|
|
+ [
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ { width: '48px', height: '48px' },
|
|
|
+ ],
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <view class="px24rpx pt24rpx">
|
|
|
+ <view class="grid grid-cols-5 gap-x-38rpx gap-y-24rpx">
|
|
|
+ <view v-for="item, index in classfiylist" :key="index" @click="handleCommonClass(item)">
|
|
|
+ <image :src="item.icon" class="h100rpx w100rpx" />
|
|
|
+ <view class="mt12rpx text-24rpx text-#222">
|
|
|
+ {{ item.name }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="swiper-img swiper pb20rpx">
|
|
|
- <wd-swiper
|
|
|
- :list="swiperClassList" :indicator="{ type: 'dots-bar' }" height="80"
|
|
|
- :display-multiple-items="5" :autoplay="false" :loop="false"
|
|
|
- custom-indicator-class="custom-indicator-class" value-key="icon" text-key="name"
|
|
|
- image-mode="aspectFit"
|
|
|
- @click="handleSwiperClick"
|
|
|
- />
|
|
|
+
|
|
|
+ <view class="swiper-img swiper pb20rpx">
|
|
|
+ <wd-swiper
|
|
|
+ :list="swiperClassList" :indicator="{ type: 'dots-bar' }" height="80"
|
|
|
+ :display-multiple-items="5" :autoplay="false" :loop="false"
|
|
|
+ custom-indicator-class="custom-indicator-class" value-key="icon" text-key="name"
|
|
|
+ image-mode="aspectFit"
|
|
|
+ @click="handleSwiperClick"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </wd-skeleton>
|
|
|
</view>
|
|
|
</wd-card>
|
|
|
</view>
|
|
|
@@ -180,7 +213,6 @@ function handleGo(e: { index: number, item: Api.xsbAdvertInfo }) {
|
|
|
/>
|
|
|
<view
|
|
|
v-for="it in 20" :key="it" class="overflow-hidden rounded-16rpx bg-white pb16rpx"
|
|
|
- @click="handleCommonName('xsb-goods')"
|
|
|
>
|
|
|
<view class="relative h344rpx">
|
|
|
<image
|