ソースを参照

fix: 商详中拼团轮播展示

liangan 4 週間 前
コミット
a2fb3a1169
1 ファイル変更43 行追加30 行削除
  1. 43 30
      src/pages/productDetail/productDetail.vue

+ 43 - 30
src/pages/productDetail/productDetail.vue

@@ -222,8 +222,17 @@ async function queryDetail() {
 // 查询商品拼团信息
 async function queryPinkInfo() {
   const res = await pinkList({ cid: detail.value.cid })
-  console.log(res)
-  pinkInfo.value = res.data.list
+  if (res.code === '200') {
+    const result = []
+    // 循环截取:每次从 i 开始,取 maxLength 个元素
+    for (let i = 0; i < res.data.list.length; i += 3) {
+      const subArr = res.data.list.slice(i, i + 3)
+      result.push(subArr)
+    }
+    console.log(result)
+
+    pinkInfo.value = result
+  }
 }
 
 // 设置默认规格选择
@@ -415,7 +424,7 @@ onShow(async () => {
       </view>
       <image src="/static/images/buy-flow.png" class="w-full" mode="widthFix" />
     </view>
-    <view v-if="pinkInfo && pinkInfo.length" class="bg-white p-24rpx">
+    <view v-if="pinkInfo && pinkInfo.length" class="bg-white px-24rpx pt-24rpx">
       <view
         class="mb-20rpx flex items-center before:h-45rpx before:w-8rpx before:rounded-4rpx before:bg-#FF3778 before:content-empty"
       >
@@ -423,37 +432,41 @@ onShow(async () => {
           {{ $t('productDetail.ongoingGroup') }}
         </text>
       </view>
-      <view class="flex flex-col gap-24rpx">
-        <view v-for="(item, index) in pinkInfo" :key="index" class="flex items-center justify-between">
-          <view class="flex items-center">
-            <view>
-              <!-- 头像组 最多五个 -->
-              <view class="mr-16rpx min-w-220rpx flex items-center">
-                <view
-                  v-for="(e, i) in item.successAvatar.slice(0, 5)"
-                  :key="i"
-                  :style="{ marginLeft: i !== 0 ? '-20rpx' : '0', zIndex: 10 - i }"
-                  class="h-56rpx w-56rpx overflow-hidden border-2rpx border-white rounded-full border-solid"
-                >
-                  <image :src="e ? e : '/static/images/default-avatar.png'" class="h-full w-full" mode="aspectFill" />
+      <swiper autoplay vertical circular class="h-240rpx">
+        <swiper-item v-for="(list, y) in pinkInfo" :key="y">
+          <view class="flex flex-col gap-24rpx">
+            <view v-for="(item, index) in list" :key="index" class="flex items-center justify-between">
+              <view class="flex items-center">
+                <view>
+                  <!-- 头像组 最多五个 -->
+                  <view class="mr-16rpx min-w-220rpx flex items-center">
+                    <view
+                      v-for="(e, i) in item.successAvatar.slice(0, 5)"
+                      :key="i"
+                      :style="{ marginLeft: i !== 0 ? '-20rpx' : '0', zIndex: 10 - i }"
+                      class="h-56rpx w-56rpx overflow-hidden border-2rpx border-white rounded-full border-solid"
+                    >
+                      <image :src="e ? e : '/static/images/default-avatar.png'" class="h-full w-full" mode="aspectFill" />
+                    </view>
+                  </view>
+                </view>
+                <view>
+                  <view class="text-28rpx">
+                    {{ $t('productDetail.need') }}
+                    <text class="text-[var(--wot-color-theme)]">
+                      {{ item.totalNum - item.remainNum }}
+                    </text>
+                    {{ $t('productDetail.more') }}
+                  </view>
                 </view>
               </view>
-            </view>
-            <view>
-              <view class="text-28rpx">
-                {{ $t('productDetail.need') }}
-                <text class="text-[var(--wot-color-theme)]">
-                  {{ item.remainNum }}
-                </text>
-                {{ $t('productDetail.more') }}
-              </view>
+              <wd-button size="small" @click="openSku('join', item.id, item.orderId)">
+                {{ $t('productDetail.joinGroup') }}
+              </wd-button>
             </view>
           </view>
-          <wd-button size="small" @click="openSku('join', item.id, item.orderId)">
-            {{ $t('productDetail.joinGroup') }}
-          </wd-button>
-        </view>
-      </view>
+        </swiper-item>
+      </swiper>
     </view>
     <view class="bg-white p-24rpx">
       <view