|
|
@@ -1,6 +1,5 @@
|
|
|
<route lang="json5">
|
|
|
{
|
|
|
- layout: 'tabbar',
|
|
|
style: {
|
|
|
navigationStyle: 'custom',
|
|
|
navigationBarTitleText: '%product.details%',
|
|
|
@@ -8,45 +7,120 @@
|
|
|
}
|
|
|
</route>
|
|
|
<template>
|
|
|
- <view class="w-full h-[100vh]" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
|
|
|
- <wd-navbar
|
|
|
- style="background-color: transparent"
|
|
|
- :title="t('product.details')"
|
|
|
- left-arrow
|
|
|
- fixed
|
|
|
- safeAreaInsetTop
|
|
|
- @click-left="handleClickLeft"
|
|
|
- >
|
|
|
+ <!-- :style="{ marginTop: safeAreaInsets?.top + 'px' }" -->
|
|
|
+ <view class="w-full h-[100vh] box-border">
|
|
|
+ <wd-navbar :bordered="false" fixed safeAreaInsetTop @click-left="handleClickLeft">
|
|
|
+ <template #left>
|
|
|
+ <view class="w-68rpx h-68rpx rounded-full bg-white flex justify-center items-center">
|
|
|
+ <wd-icon name="thin-arrow-left" size="18" />
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
<template #right>
|
|
|
- <wd-icon name="search" size="18" />
|
|
|
+ <view
|
|
|
+ class="w-68rpx h-68rpx overflow-hidden rounded-full bg-white flex justify-center items-center"
|
|
|
+ >
|
|
|
+ <image class="w-56rpx h-56rpx" :src="collect" alt=""></image>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
</wd-navbar>
|
|
|
+
|
|
|
+ <view class="w-full relative">
|
|
|
+ <wd-swiper
|
|
|
+ class="w-full aspect-[3/4] object-cover"
|
|
|
+ :list="swiperList"
|
|
|
+ :autoplay="false"
|
|
|
+ :indicator="false"
|
|
|
+ height="1000rpx"
|
|
|
+ v-model:current="current"
|
|
|
+ @click="handleClick"
|
|
|
+ @change="onChange"
|
|
|
+ ></wd-swiper>
|
|
|
+ <view
|
|
|
+ class="overflow-hidden flex space-x-8rpx box-border p-8rpx mx-auto absolute bottom-48rpx left-1/2 -translate-x-1/2 z-100 bg-white rounded-8rpx"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in swiperList.slice(0, 6)"
|
|
|
+ :key="index"
|
|
|
+ class="w-100rpx h-100rpx relative shrink-0"
|
|
|
+ >
|
|
|
+ <wd-img width="100%" height="100%" :src="item" @click="previewImage(index)" />
|
|
|
+ <view
|
|
|
+ v-show="index === 5 && swiperListNumber"
|
|
|
+ @click="previewImage(index)"
|
|
|
+ class="w-full h-full leading-58px absolute top-0 left-0 text-center text-28rpx font-semibold text-white bg-[#000]/[0.4] z-500"
|
|
|
+ >
|
|
|
+ + {{ swiperListNumber }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="w-full box-border px-32rpx">
|
|
|
+ <view class="flex justify-between items-center py-24rpx">
|
|
|
+ <span class="text-[#333] font-semibold text-xl line-clamp-1">
|
|
|
+ {{ 'Light Brown Jacket' }}
|
|
|
+ </span>
|
|
|
+ <span class="text-[#ff4c1b] font-semibold text-base">USD 84.00</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <h1 class="font-semibold text-base">{{ 'Description' }}</h1>
|
|
|
+ <p class="line-clamp-2 text-sm text-[#666]">
|
|
|
+ <span class="">
|
|
|
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem ipsum dolor
|
|
|
+ sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
|
+ </span>
|
|
|
+ <span class="text-[#ff4c1b] underline">red more</span>
|
|
|
+ </p>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { t } from '@/locale'
|
|
|
- import search from '@/static/images/category/search.svg'
|
|
|
- const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
|
+ import collect from '@/static/images/category/collect.svg'
|
|
|
+ // const { safeAreaInsets } = uni.getSystemInfoSync()
|
|
|
type childrenObj = {
|
|
|
name: string
|
|
|
imageUrl: string
|
|
|
}
|
|
|
- const categoryIndex = ref(0)
|
|
|
- const categoryChildrenList = ref([])
|
|
|
+ const categoryIndex = ref<number>(0)
|
|
|
|
|
|
function handleClickLeft() {
|
|
|
uni.navigateBack()
|
|
|
}
|
|
|
|
|
|
- function handleSelectItem(idx: number, children: Array<childrenObj>) {
|
|
|
- categoryIndex.value = idx
|
|
|
- categoryChildrenList.value = children
|
|
|
+ const current = ref<number>(0)
|
|
|
+
|
|
|
+ const swiperList = ref<string[]>([
|
|
|
+ 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
|
|
|
+ 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
|
|
|
+ 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
|
|
|
+ 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
|
|
|
+ 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
|
|
|
+ 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
|
|
|
+ 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
|
|
|
+ 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
|
|
|
+ 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
|
|
|
+ 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
|
|
|
+ // 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
|
|
|
+ ])
|
|
|
+
|
|
|
+ const swiperListNumber = computed(() =>
|
|
|
+ swiperList.value.length > 6 ? swiperList.value.length - 6 : 0,
|
|
|
+ )
|
|
|
+
|
|
|
+ function handleClick(e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ function onChange(e) {
|
|
|
+ console.log(e)
|
|
|
}
|
|
|
|
|
|
- function goToDlite(uid: string) {
|
|
|
- uni.switchTab({
|
|
|
- url: '/pages/index/index',
|
|
|
+ function previewImage(current: number) {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: swiperList.value,
|
|
|
+ current,
|
|
|
+ loop: true,
|
|
|
+ indicator: 'number',
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -58,6 +132,14 @@
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
::v-deep .wd-navbar {
|
|
|
- background-color: transparent;
|
|
|
+ background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .wd-swiper__track {
|
|
|
+ --wot-swiper-radius: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-color {
|
|
|
+ color: #ff4c1b;
|
|
|
}
|
|
|
</style>
|
