feat :1.商品详情页面

src/pages/product/details.vue

@@ -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>

src/static/images/category/collect.svg

@@ -0,0 +1,7 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.75317 4.65807C11.076 4.29652 12.5102 5.35265 12.9566 7.01873C13.4029 8.68398 12.6928 10.3276 11.3701 10.69C10.0481 11.0514 8.61388 9.99527 8.16664 8.32929C7.72032 6.66404 8.43044 5.02044 9.75317 4.65807Z" stroke="#333333" stroke-width="1.51667"/>
+<path d="M21 19.4126C21 16.8361 18.1264 14.746 14.5834 14.746C11.0394 14.746 8.16669 16.8361 8.16669 19.4126C8.16669 21.99 11.0403 24.0793 14.5834 24.0793C18.1273 24.0793 21 21.99 21 19.4126Z" stroke="#333333" stroke-width="1.51667"/>
+<path d="M24.0319 9.51906C22.8362 9.10397 21.4522 9.93347 20.9428 11.3706C20.4324 12.8083 20.9893 14.3102 22.1858 14.7254C23.3817 15.1397 24.7655 14.311 25.2742 12.873C25.7846 11.4352 25.2277 9.93334 24.0319 9.51906Z" stroke="#333333" stroke-width="1.51667"/>
+<path d="M7.30863 11.5828C6.62109 9.99698 5.13019 9.14815 3.97842 9.68666C2.82722 10.224 2.45066 11.9447 3.13904 13.5303C3.82632 15.1152 5.31831 15.9647 6.46868 15.4276C7.61987 14.8902 7.99618 13.1686 7.30863 11.5828Z" stroke="#333333" stroke-width="1.51667"/>
+<path d="M18.0508 4.42103C16.6932 4.22721 15.4019 5.45389 15.1667 7.16263C14.9314 8.87136 15.8401 10.4128 17.1985 10.6074C18.5553 10.8021 19.8466 9.57457 20.0826 7.86666C20.3179 6.15876 19.4084 4.61568 18.0508 4.42103Z" stroke="#333333" stroke-width="1.51667"/>
+</svg>