|
@@ -1,238 +0,0 @@
|
|
|
-<script setup lang="ts">
|
|
|
|
|
-import { StaticUrl, VITE_OSS_BASE_URL } from '@/config'
|
|
|
|
|
-import router from '@/router'
|
|
|
|
|
-import xsbTabbar from '@/subPack-xsb/components/xsbTabbar/index.vue'
|
|
|
|
|
-
|
|
|
|
|
-const { ScrollDown } = storeToRefs(useSysXsbStore())
|
|
|
|
|
-definePage({
|
|
|
|
|
- name: 'xsb-home',
|
|
|
|
|
- islogin: false,
|
|
|
|
|
- style: {
|
|
|
|
|
- navigationStyle: 'custom',
|
|
|
|
|
- backgroundColor: '#9ED605',
|
|
|
|
|
- backgroundColorTop: '#9ED605',
|
|
|
|
|
- navigationBarTitleText: '星闪豹首页',
|
|
|
|
|
- backgroundColorBottom: '#fff',
|
|
|
|
|
- },
|
|
|
|
|
-})
|
|
|
|
|
-const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
|
|
|
|
|
-const { name } = storeToRefs(useAddressStore())
|
|
|
|
|
-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 navActive = ref(0)
|
|
|
|
|
-const classfiylist = ref([
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/shu.png` },
|
|
|
|
|
-])
|
|
|
|
|
-const swiperClassList = ref([
|
|
|
|
|
- { title: '露营季', icon: `${StaticUrl}/zhi.png` },
|
|
|
|
|
- { title: '方便菜', icon: `${StaticUrl}/zhi.png` },
|
|
|
|
|
- { title: '日用清洁', icon: `${StaticUrl}/zhi.png` },
|
|
|
|
|
- { title: '个护美妆', icon: `${StaticUrl}/zhi.png` },
|
|
|
|
|
- { title: '轻食沙拉', icon: `${StaticUrl}/zhi.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/zhi.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/zhi.png` },
|
|
|
|
|
- { title: '蔬菜豆品', icon: `${StaticUrl}/zhi.png` },
|
|
|
|
|
-])
|
|
|
|
|
-const navList = ref([
|
|
|
|
|
- { title: '为你推荐' },
|
|
|
|
|
- { title: '疯狂折扣' },
|
|
|
|
|
- { title: '' },
|
|
|
|
|
- { title: '地道特产' },
|
|
|
|
|
- { title: '预售' },
|
|
|
|
|
-])
|
|
|
|
|
-const textArray = ref([
|
|
|
|
|
- '这是一条消息提示信息',
|
|
|
|
|
- '这是第二条消息',
|
|
|
|
|
- '这是第三条消息',
|
|
|
|
|
-])
|
|
|
|
|
-
|
|
|
|
|
-function handleChangeNav(idx: number) {
|
|
|
|
|
- navActive.value = idx
|
|
|
|
|
-}
|
|
|
|
|
-onPageScroll((e) => {
|
|
|
|
|
- if (e.scrollTop >= 80) {
|
|
|
|
|
- ScrollDown.value = true
|
|
|
|
|
- }
|
|
|
|
|
- else {
|
|
|
|
|
- ScrollDown.value = false
|
|
|
|
|
- }
|
|
|
|
|
-})
|
|
|
|
|
-function handleCommonName(name: string) {
|
|
|
|
|
- router.push({ name })
|
|
|
|
|
-}
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<template>
|
|
|
|
|
- <view class="page-xsb">
|
|
|
|
|
- <wd-navbar
|
|
|
|
|
- title=""
|
|
|
|
|
- :custom-style="`background-color:${ScrollDown ? 'var(--them-color)' : 'transparent !important'}`"
|
|
|
|
|
- :bordered="false" :z-index="99" safe-area-inset-top left-arrow fixed @click-left="router.replaceAll({ name: 'smqjh-home' })"
|
|
|
|
|
- >
|
|
|
|
|
- <template #left>
|
|
|
|
|
- <view class="h-full flex items-center">
|
|
|
|
|
- <wd-icon name="arrow-left" size="22px" color="#fff" />
|
|
|
|
|
- <view class="ml10rpx flex items-center" @click.stop="router.push({ name: 'common-selectAddress' })">
|
|
|
|
|
- <image :src="`${StaticUrl}/location.png`" class="h33.8rpx w29rpx" />
|
|
|
|
|
- <view class="ml10rpx max-w-280rpx truncate text-32rpx text-white">
|
|
|
|
|
- {{ name }}
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </template>
|
|
|
|
|
- </wd-navbar>
|
|
|
|
|
- <view
|
|
|
|
|
- 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">
|
|
|
|
|
- <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="['霸王茶姬', '牛奶', '洗衣机']" 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>
|
|
|
|
|
- <scroll-view scroll-x class="mb20rpx mt20rpx h44rpx whitespace-nowrap">
|
|
|
|
|
- <view class="h-full flex items-center">
|
|
|
|
|
- <view v-for="item in 10" :key="item" class="mr32rpx h-full flex items-center justify-center rounded-22rpx bg-[rgba(255,255,255,.5)] px16rpx text-24rpx">
|
|
|
|
|
- {{ item }}苹果
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="px24rpx -mt180rpx">
|
|
|
|
|
- <wd-swiper v-model:current="current" :autoplay="false" :list="swiperList" :height="138" :indicator="false" />
|
|
|
|
|
- <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">
|
|
|
|
|
- <image
|
|
|
|
|
- :src="item.icon"
|
|
|
|
|
- class="h100rpx w100rpx"
|
|
|
|
|
- />
|
|
|
|
|
- <view class="mt12rpx text-24rpx text-#222">
|
|
|
|
|
- {{ item.title }}
|
|
|
|
|
- </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="title"
|
|
|
|
|
- image-mode="aspectFit"
|
|
|
|
|
- />
|
|
|
|
|
- </view>
|
|
|
|
|
- </wd-card>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="mt20rpx">
|
|
|
|
|
- <wd-notice-bar direction="vertical" :text="textArray" :delay="3" color="#222222" background-color="#fff">
|
|
|
|
|
- <template #prefix>
|
|
|
|
|
- <view class="mr20rpx">
|
|
|
|
|
- <wd-icon name="sound" size="22px" color="var(--them-color)" />
|
|
|
|
|
- </view>
|
|
|
|
|
- </template>
|
|
|
|
|
- </wd-notice-bar>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="mt20rpx">
|
|
|
|
|
- <image
|
|
|
|
|
- :src="`${VITE_OSS_BASE_URL}2025/12/6671332ceef64985858aa8b548027bd3.png`"
|
|
|
|
|
- class="h236rpx w-full"
|
|
|
|
|
- />
|
|
|
|
|
- </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>
|
|
|
|
|
- </view>
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
- <view class="mt20rpx">
|
|
|
|
|
- <view class="flex items-center">
|
|
|
|
|
- <scroll-view scroll-y type="custom">
|
|
|
|
|
- <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" />
|
|
|
|
|
- <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 :src="`${VITE_OSS_BASE_URL}2025/11/9d42892888304abf85487deea0271f62.png`" class="h344rpx w344rpx" />
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="mt20rpx px20rpx">
|
|
|
|
|
- <view class="text-left text-28rpx font-semibold">
|
|
|
|
|
- <view v-for="i in 2" :key="i" class="mr5px inline-block">
|
|
|
|
|
- <wd-tag type="primary">
|
|
|
|
|
- 新品{{ i }}
|
|
|
|
|
- </wd-tag>
|
|
|
|
|
- </view>
|
|
|
|
|
- 海湾高盐特大白虾200g
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="mt12rpx text-22rpx text-#AAAAAA">
|
|
|
|
|
- 已售5999
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <view class="mt10rpx flex items-center justify-between">
|
|
|
|
|
- <view>
|
|
|
|
|
- <view class="mt20rpx flex items-end text-#FF4D3A font-semibold">
|
|
|
|
|
- <view class="text-24rpx">
|
|
|
|
|
- ¥
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="text-36rpx line-height-[36rpx]">
|
|
|
|
|
- 1.395
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <image
|
|
|
|
|
- :src="`${StaticUrl}/cart-yes.png`"
|
|
|
|
|
- class="h52rpx w52rpx"
|
|
|
|
|
- />
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </grid-view>
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <xsbTabbar />
|
|
|
|
|
- </view>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
|
|
-
|
|
|
|
|
-</style>
|
|
|