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