|
|
@@ -0,0 +1,315 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { StaticUrl } from '@/config'
|
|
|
+import router from '@/router'
|
|
|
+
|
|
|
+const { statusBarHeight, MenuButtonHeight } = useSysStore()
|
|
|
+definePage({
|
|
|
+ name: 'xsb-goods',
|
|
|
+ style: {
|
|
|
+ navigationStyle: 'custom',
|
|
|
+ navigationBarTitleText: '星闪豹商品详情',
|
|
|
+ },
|
|
|
+})
|
|
|
+const goodsTab = ref(0)
|
|
|
+const current = ref<number>(0)
|
|
|
+const currentDetaile = ref(0)
|
|
|
+const goodsTabList = ref([
|
|
|
+ { title: '相似商品', id: 0 },
|
|
|
+ { title: '经常一起买', id: 1 },
|
|
|
+])
|
|
|
+const goodsDetaileTabList = ref([
|
|
|
+ { title: '商品', id: 0 },
|
|
|
+ { title: '评价', id: 1 },
|
|
|
+ { title: '详情', id: 2 },
|
|
|
+ { title: '推荐', id: 3 },
|
|
|
+])
|
|
|
+const goodsTabData = ref([])
|
|
|
+const isShowTab = ref(false)
|
|
|
+const currentTabGoods = 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',
|
|
|
+])
|
|
|
+onMounted(() => {
|
|
|
+ goodsTabData.value = splitArrayToPages([{ id: 1, name: '商品' }, { id: 2, name: '商品' }, { id: 3, name: '商品' }, { id: 4, name: '商品' }, { id: 8, name: '商品' }, { id: 5, name: '商品' }, { id: 10, name: '商品' }, { id: 6, name: '商品' }, { id: 9, name: '商品' }, { id: 7, name: '商品' }, { id: 11, name: '商品' }])
|
|
|
+
|
|
|
+ console.log(goodsTabData.value, 'goodsTabData')
|
|
|
+})
|
|
|
+function splitArrayToPages<T>(arr: T[]): T[][] {
|
|
|
+ const PAGE_SIZE = 6
|
|
|
+ const MAX_PAGES = 3
|
|
|
+ const result: T[][] = []
|
|
|
+ for (let i = 0; i < Math.min(MAX_PAGES, Math.ceil(arr.length / PAGE_SIZE)); i++) {
|
|
|
+ const start = i * PAGE_SIZE
|
|
|
+ const end = start + PAGE_SIZE
|
|
|
+ result.push(arr.slice(start, end))
|
|
|
+ }
|
|
|
+ return result
|
|
|
+}
|
|
|
+onPageScroll((e) => {
|
|
|
+ if (e.scrollTop >= 315) {
|
|
|
+ isShowTab.value = true
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ isShowTab.value = false
|
|
|
+ }
|
|
|
+})
|
|
|
+function handleGoCurren(id: number) {
|
|
|
+ currentDetaile.value = id
|
|
|
+ uni.pageScrollTo({ selector: `.view-${id}` })
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view class="page-xsb">
|
|
|
+ <wd-navbar
|
|
|
+ title="商品详情" :custom-style="`background-color:${isShowTab ? '#FFF !important' : 'transparent !important'}`" :bordered="false" :z-index="99"
|
|
|
+ safe-area-inset-top left-arrow fixed @click-left="router.back()"
|
|
|
+ />
|
|
|
+ <wd-swiper v-model:current="current" :list="swiperList" autoplay :height="375">
|
|
|
+ <template #indicator="{ current: currentIndex, total }">
|
|
|
+ <view class="custom-indicator absolute bottom-60rpx right-20rpx px26rpx">
|
|
|
+ {{ currentIndex + 1 }}/{{ total }}
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </wd-swiper>
|
|
|
+ <view class="header view-0 relative z-3 rounded-t-32rpx px24rpx pt24rpx -mt30rpx">
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
+ <view class="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 class="h40rpx w40rpx" :src="`${StaticUrl}/collect-yes.png`" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-show="isShowTab" class="sticky left-0 z-99 box-border h84rpx w-full flex items-center justify-between bg-white px24rpx" :style="{ top: `${statusBarHeight + MenuButtonHeight}px` }">
|
|
|
+ <view v-for="item in goodsDetaileTabList" :key="item.id" class="relative flex items-center text-32rpx font-semibold" @click="handleGoCurren(item.id)">
|
|
|
+ {{ item.title }}
|
|
|
+ <view v-show="currentDetaile == item.id" class="line absolute left-50% h12rpx w40rpx rounded-8rpx bg-[var(--them-color)] -bottom-15rpx -translate-x-50%" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="px24rpx">
|
|
|
+ <view class="mt24rpx">
|
|
|
+ <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>
|
|
|
+ 大荔冬枣大果250g
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt16rpx text-24rpx text-#AAAAAA">
|
|
|
+ 优选产地,皮薄核小,维c满满
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx flex items-center">
|
|
|
+ <view
|
|
|
+ v-for="item in 2" :key="item"
|
|
|
+ class="mr16rpx flex items-center justify-center border-1rpx border-#BC9264 rounded-8rpx border-solid bg-[#FFF5E9] px16rpx py6rpx text-24rpx text-#BC9264 font-semibold"
|
|
|
+ >
|
|
|
+ 一口化渣{{ item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx flex items-center justify-between rounded-16rpx bg-white p24rpx">
|
|
|
+ <view class="flex items-center">
|
|
|
+ <view class="flex-shrink-0">
|
|
|
+ <view class="text-28rpx font-semibold">
|
|
|
+ 大荔冬枣
|
|
|
+ </view>
|
|
|
+ <view class="mt16rpx text-24rpx text-#AAAAAA">
|
|
|
+ 品牌
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mx24rpx">
|
|
|
+ <wd-divider vertical color="#F0F0F0" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center">
|
|
|
+ <view class="flex-shrink-0">
|
|
|
+ <view class="text-28rpx font-semibold">
|
|
|
+ 大荔冬枣
|
|
|
+ </view>
|
|
|
+ <view class="mt16rpx text-24rpx text-#AAAAAA">
|
|
|
+ 产地(以实际商品批次为准)
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mx24rpx">
|
|
|
+ <wd-divider vertical color="#F0F0F0" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center">
|
|
|
+ <view class="flex-shrink-0">
|
|
|
+ <view class="text-28rpx font-semibold">
|
|
|
+ 30天
|
|
|
+ </view>
|
|
|
+ <view class="mt16rpx text-24rpx text-#AAAAAA">
|
|
|
+ 保质期
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <wd-icon name="chevron-right" size="22px" color="#AAAAAA" />
|
|
|
+ </view>
|
|
|
+ <view class="view-1 mt20rpx flex items-center rounded-16rpx bg-white p24rpx">
|
|
|
+ <view class="w-full flex items-center justify-between">
|
|
|
+ <view class="text-32rpx font-semibold">
|
|
|
+ 评价(10万+)
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center">
|
|
|
+ <view class="mr10rpx flex items-center text-28rpx text-#FF4D3A">
|
|
|
+ <view>好评率</view>
|
|
|
+ <view class="ml5rpx font-semibold">
|
|
|
+ 99.8%
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <wd-icon name="chevron-right" size="22px" color="#AAAAAA" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt20rpx rounded-16rpx bg-white p24rpx">
|
|
|
+ <wd-tabs v-model="goodsTab">
|
|
|
+ <block v-for="item in goodsTabList" :key="item.id">
|
|
|
+ <wd-tab :title="item.title" />
|
|
|
+ </block>
|
|
|
+ </wd-tabs>
|
|
|
+ <swiper class="mt20rpx h900rpx" indicator-active-color="var(--them-color)" @change="(e) => currentTabGoods = e.detail.current">
|
|
|
+ <swiper-item
|
|
|
+ v-for="items in goodsTabData" :key="items"
|
|
|
+ class="grid grid-cols-3 items-start gap-x-16rpx gap-y-16rpx pb20rpx"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="goods in items" :key="goods"
|
|
|
+ class="box-border w204rpx border border-2rpx border-#F0F0F0 rounded-16rpx border-solid px4rpx py8rpx"
|
|
|
+ >
|
|
|
+ <image lazy-load :src="`${StaticUrl}/shu.png`" class="h188rpx w198rpx" />
|
|
|
+ <view class="mt20rpx px16rpx text-24rpx font-semibold">
|
|
|
+ 新鲜现宰杀肋排200g
|
|
|
+ </view>
|
|
|
+ <view class="mt12rpx truncate px16rpx text-24rpx text-#AAAAAA">
|
|
|
+ 维c满满,营养qweqwe
|
|
|
+ </view>
|
|
|
+ <view class="my20rpx flex items-center justify-between px16rpx">
|
|
|
+ <view class="flex items-end text-#FF4D3A font-semibold">
|
|
|
+ <view class="text-24rpx">
|
|
|
+ ¥
|
|
|
+ </view>
|
|
|
+ <view class="text-32rpx line-height-[32rpx]">
|
|
|
+ 1.395
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image :src="`${StaticUrl}/cart-yes.png`" class="h44rpx w44rpx" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="mt24rpx flex items-center justify-center">
|
|
|
+ <view v-for="item, idx in goodsTabData" :key="idx" class="mr14rpx transition-all transition-duration-400 ease-in" :class="[currentTabGoods == idx ? 'rounded-12rpx w-40rpx h12rpx bg-[var(--them-color)]' : 'w12rpx h12rpx rounded-50% bg-#F0F0F0']" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="view-2 mt20rpx bg-white">
|
|
|
+ <view class="p24rpx text-32rpx font-semibold">
|
|
|
+ 商品详情
|
|
|
+ </view>
|
|
|
+ <view class="h-200rpx">
|
|
|
+ 图片
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="view-3 mt28rpx flex items-center justify-center">
|
|
|
+ <view class="flex items-center">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/goods-recommend.png`"
|
|
|
+ class="mr12rpx h25rpx w26rpx"
|
|
|
+ />
|
|
|
+ <view class="text-36rpx text-[var(--them-color)] font-semibold">
|
|
|
+ 为你推荐
|
|
|
+ </view>
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/goods-recommend.png`"
|
|
|
+ class="ml12rpx h25rpx w26rpx"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="h180rpx" />
|
|
|
+ <view class="ios shadow-fixed fixed bottom-0 left-0 w-full rounded-t-32rpx bg-white">
|
|
|
+ <view class="flex items-center justify-between px24rpx py20rpx">
|
|
|
+ <view class="mr36rpx">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/goods-home.png`"
|
|
|
+ class="h44rpx w44rpx"
|
|
|
+ />
|
|
|
+ <view class="text-20rpx">
|
|
|
+ 首页
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mr36rpx">
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/goods-kf.png`"
|
|
|
+ class="h44rpx w44rpx"
|
|
|
+ />
|
|
|
+ <view class="text-20rpx">
|
|
|
+ 客服
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <image
|
|
|
+ :src="`${StaticUrl}/goods-cart.png`"
|
|
|
+ class="h44rpx w44rpx"
|
|
|
+ />
|
|
|
+ <view class="text-20rpx">
|
|
|
+ 购物车
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex items-center">
|
|
|
+ <view class="w220rpx">
|
|
|
+ <wd-button plain hairline block>
|
|
|
+ 加入购物车
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ <view class="ml20rpx w220rpx">
|
|
|
+ <wd-button block class="w-full">
|
|
|
+ 立即购买
|
|
|
+ </wd-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.custom-indicator {
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+.shadow-fixed{
|
|
|
+ box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.09);
|
|
|
+}
|
|
|
+.header {
|
|
|
+ background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 62%, #F6F6F6 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.page-xsb {
|
|
|
+ :deep() {
|
|
|
+ .wd-tabs__nav-item {
|
|
|
+ .wd-tabs__nav-item-text {
|
|
|
+ font-size: 32rpx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ios .wd-button{
|
|
|
+ min-width: unset !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|