|
@@ -2,7 +2,7 @@
|
|
|
import { StaticUrl, VITE_OSS_BASE_URL } from '@/config'
|
|
import { StaticUrl, VITE_OSS_BASE_URL } from '@/config'
|
|
|
import router from '@/router'
|
|
import router from '@/router'
|
|
|
|
|
|
|
|
-const props = defineProps<{ categoryList: Api.xsbCategories[] }>()
|
|
|
|
|
|
|
+const props = defineProps<{ categoryList: Api.xsbCategories[], swiper: Api.xsbAdvertInfo[] }>()
|
|
|
|
|
|
|
|
const emit = defineEmits(['changeNav'])
|
|
const emit = defineEmits(['changeNav'])
|
|
|
|
|
|
|
@@ -11,17 +11,11 @@ const { ScrollDown } = storeToRefs(useSysXsbStore())
|
|
|
const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
|
|
const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
|
|
|
const { name } = storeToRefs(useAddressStore())
|
|
const { name } = storeToRefs(useAddressStore())
|
|
|
const { topNavActive, leftActive } = storeToRefs(useSysXsbStore())
|
|
const { topNavActive, leftActive } = storeToRefs(useSysXsbStore())
|
|
|
-const current = ref(0)
|
|
|
|
|
-const swiperList = ref([
|
|
|
|
|
- 'https://wot-ui.cn/assets/redpanda.jpg',
|
|
|
|
|
- 'https://wot-ui.cn/assets/capybara.jpg',
|
|
|
|
|
- 'https://wot-ui.cn/assets/panda.jpg',
|
|
|
|
|
- 'https://wot-ui.cn/assets/moon.jpg',
|
|
|
|
|
- 'https://wot-ui.cn/assets/meng.jpg',
|
|
|
|
|
-])
|
|
|
|
|
|
|
+const swiperList = computed(() => props.swiper)
|
|
|
const navActive = ref(0)
|
|
const navActive = ref(0)
|
|
|
const classfiylist = computed(() => props.categoryList.slice(0, 10))
|
|
const classfiylist = computed(() => props.categoryList.slice(0, 10))
|
|
|
const swiperClassList = computed(() => props.categoryList.slice(10, props.categoryList.length))
|
|
const swiperClassList = computed(() => props.categoryList.slice(10, props.categoryList.length))
|
|
|
|
|
+
|
|
|
const navList = ref([
|
|
const navList = ref([
|
|
|
{ title: '为你推荐' },
|
|
{ title: '为你推荐' },
|
|
|
{ title: '疯狂折扣' },
|
|
{ title: '疯狂折扣' },
|
|
@@ -57,6 +51,9 @@ function handleCommonClass(item: Api.xsbCategories) {
|
|
|
function handleSwiperClick(e: { index: number, item: Api.xsbCategories }) {
|
|
function handleSwiperClick(e: { index: number, item: Api.xsbCategories }) {
|
|
|
handleCommonClass(e.item)
|
|
handleCommonClass(e.item)
|
|
|
}
|
|
}
|
|
|
|
|
+function handleGo(e: { index: number, item: Api.xsbAdvertInfo }) {
|
|
|
|
|
+ console.log(e, '跳转消息')
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|
|
@@ -111,7 +108,9 @@ function handleSwiperClick(e: { index: number, item: Api.xsbCategories }) {
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="px24rpx -mt180rpx">
|
|
<view class="px24rpx -mt180rpx">
|
|
|
- <wd-swiper v-model:current="current" :autoplay="false" :list="swiperList" :height="138" :indicator="false" />
|
|
|
|
|
|
|
+ <wd-swiper
|
|
|
|
|
+ :autoplay="false" :list="swiperList" :height="138" :indicator="false" value-key="advertImg" @click="handleGo"
|
|
|
|
|
+ />
|
|
|
<view class="mt20rpx">
|
|
<view class="mt20rpx">
|
|
|
<wd-card title="" custom-class="card-zt">
|
|
<wd-card title="" custom-class="card-zt">
|
|
|
<view class="px24rpx pt24rpx">
|
|
<view class="px24rpx pt24rpx">
|
|
@@ -147,28 +146,34 @@ function handleSwiperClick(e: { index: number, item: Api.xsbCategories }) {
|
|
|
<view class="mt20rpx">
|
|
<view class="mt20rpx">
|
|
|
<image :src="`${VITE_OSS_BASE_URL}2025/12/6671332ceef64985858aa8b548027bd3.png`" class="h236rpx w-full" />
|
|
<image :src="`${VITE_OSS_BASE_URL}2025/12/6671332ceef64985858aa8b548027bd3.png`" class="h236rpx w-full" />
|
|
|
</view>
|
|
</view>
|
|
|
- <scroll-view scroll-x class="mb20rpx mt20rpx whitespace-nowrap">
|
|
|
|
|
- <view class="flex items-center">
|
|
|
|
|
- <view v-for="item, idx in navList" :key="idx" class="relative mr44rpx" @click="handleChangeNav(idx)">
|
|
|
|
|
- <image v-show="idx == 2" :src="`${StaticUrl}/chaozhi.png`" class="relative z-2 h-29.06rpx w-105.34rpx" />
|
|
|
|
|
- <text
|
|
|
|
|
- v-show="idx != 2" class="relative z-2 text-32rpx"
|
|
|
|
|
- :class="[navActive == idx ? 'text-36rpx font-semibold' : '']"
|
|
|
|
|
- >
|
|
|
|
|
- {{ item.title }}
|
|
|
|
|
- </text>
|
|
|
|
|
- <view
|
|
|
|
|
- v-show="navActive == idx"
|
|
|
|
|
- class="nav-line absolute bottom-0rpx left-50% z-1 h18rpx w80rpx rounded-10rpx -translate-x-50%"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <view class="my20rpx">
|
|
|
|
|
+ <scroll-view scroll-x class="whitespace-nowrap">
|
|
|
|
|
+ <view class="h40rpx flex items-center">
|
|
|
|
|
+ <view v-for="item, idx in navList" :key="idx" class="relative mr44rpx" @click="handleChangeNav(idx)">
|
|
|
|
|
+ <image v-if="idx == 2" :src="`${StaticUrl}/chaozhi.png`" class="relative z-2 h-29.06rpx w-105.34rpx" />
|
|
|
|
|
+ <text
|
|
|
|
|
+ v-show="idx != 2" class="relative z-2 text-32rpx"
|
|
|
|
|
+ :class="[navActive == idx ? 'text-36rpx font-semibold' : '']"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ item.title }}
|
|
|
|
|
+ </text>
|
|
|
|
|
+ <view
|
|
|
|
|
+ v-show="navActive == idx"
|
|
|
|
|
+ class="nav-line absolute bottom-0rpx left-50% z-1 h18rpx w80rpx rounded-10rpx -translate-x-50%"
|
|
|
|
|
+ />
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
|
|
+ </scroll-view>
|
|
|
|
|
+ </view>
|
|
|
<view class="mt20rpx">
|
|
<view class="mt20rpx">
|
|
|
<view class="flex items-center">
|
|
<view class="flex items-center">
|
|
|
<scroll-view scroll-y type="custom">
|
|
<scroll-view scroll-y type="custom">
|
|
|
<grid-view type="masonry" cross-axis-count="2" main-axis-gap="10" cross-axis-gap="10">
|
|
<grid-view type="masonry" cross-axis-count="2" main-axis-gap="10" cross-axis-gap="10">
|
|
|
- <wd-swiper v-model:current="current" :autoplay="false" :list="swiperList" :height="231" />
|
|
|
|
|
|
|
+ <wd-swiper
|
|
|
|
|
+ :autoplay="false" :list="[
|
|
|
|
|
+ `${StaticUrl}/xsb-swiper1.png`,
|
|
|
|
|
+ ]" :height="231"
|
|
|
|
|
+ />
|
|
|
<view
|
|
<view
|
|
|
v-for="it in 20" :key="it" class="overflow-hidden rounded-16rpx bg-white pb16rpx"
|
|
v-for="it in 20" :key="it" class="overflow-hidden rounded-16rpx bg-white pb16rpx"
|
|
|
@click="handleCommonName('xsb-goods')"
|
|
@click="handleCommonName('xsb-goods')"
|
|
@@ -221,4 +226,7 @@ function handleSwiperClick(e: { index: number, item: Api.xsbCategories }) {
|
|
|
.content {
|
|
.content {
|
|
|
height: calc(100vh - var(--window-top) - 80rpx);
|
|
height: calc(100vh - var(--window-top) - 80rpx);
|
|
|
}
|
|
}
|
|
|
|
|
+.nav-line{
|
|
|
|
|
+ background: linear-gradient( 90deg, #9ED605 0%, rgba(158,214,5,0.7) 43%, rgba(158,214,5,0.2) 79%, rgba(158,214,5,0) 100%);
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|