feat: 新增拼团

2026-09-23 10:29:41 +08:00
parent f7b9e66172
commit 67f8b3f352
33 changed files with 7491 additions and 858 deletions
@@ -0,0 +1,199 @@
+<template>
+  <!-- 可直接参与的拼团弹窗 -->
+  <up-popup :show="show" mode="bottom" :round="16" :closeOnClickOverlay="true"
+    @close="$emit('update:show', false)">
+    <view class="joinable_popup_container">
+      <!-- 头部 -->
+      <view class="joinable_popup_header">
+        <text class="joinable_popup_title">可直接参与的拼团</text>
+        <view class="joinable_popup_close" @click="$emit('update:show', false)">
+          <u-icon name="close" size="18" color="#71737c"></u-icon>
+        </view>
+      </view>
+
+      <!-- 拼团列表 -->
+      <scroll-view scroll-y class="joinable_popup_body">
+        <view class="joinable_popup_list">
+          <view class="joinable_team_item" v-for="(team, idx) in list" :key="team.teamId || team.id || idx">
+            <!-- 头像区域（叠层） -->
+            <view class="joinable_avatar_wrap">
+              <image class="joinable_avatar avatar_main" :src="team.avatar1" mode="aspectFill"></image>
+              <image class="joinable_avatar avatar_sub" :src="team.avatar2" mode="aspectFill"></image>
+            </view>
+            <!-- 昵称 -->
+            <text class="joinable_name">{{ team.nickname }}</text>
+            <!-- 倒计时 -->
+            <text class="joinable_countdown">{{ team.countdownText }}</text>
+            <!-- 去拼团按钮 -->
+            <view class="joinable_btn" @click="$emit('join', team)">
+              <text class="joinable_btn_text">去拼团</text>
+            </view>
+          </view>
+          <!-- 列表为空 -->
+          <view v-if="!list || list.length === 0" class="joinable_empty">
+            <text class="joinable_empty_text">暂无可参与的拼团</text>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </up-popup>
+</template>
+
+<script>
+export default {
+  name: "product-joinable-popup",
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    list: {
+      type: Array,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.joinable_popup_container {
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border-radius: 32rpx 32rpx 0 0;
+  padding-bottom: env(safe-area-inset-bottom);
+  max-height: 80vh;
+
+  .joinable_popup_header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    padding: 36rpx 40rpx 24rpx;
+    border-bottom: 1rpx solid #f2f2f2;
+
+    .joinable_popup_title {
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #1a1a1a;
+    }
+
+    .joinable_popup_close {
+      position: absolute;
+      right: 40rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 48rpx;
+      height: 48rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .joinable_popup_body {
+    flex: 1;
+    max-height: calc(80vh - 120rpx);
+
+    .joinable_popup_list {
+      padding: 0 40rpx;
+
+      .joinable_team_item {
+        display: flex;
+        align-items: center;
+        padding: 24rpx 0;
+        border-bottom: 1rpx solid #f6f6f6;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        // 头像叠层
+        .joinable_avatar_wrap {
+          position: relative;
+          width: 80rpx;
+          height: 56rpx;
+          flex-shrink: 0;
+
+          .joinable_avatar {
+            width: 56rpx;
+            height: 56rpx;
+            border-radius: 50%;
+            border: 2rpx solid #ffffff;
+            background-color: #e6e6e6;
+            position: absolute;
+            top: 0;
+
+            &.avatar_main {
+              left: 0;
+              z-index: 2;
+            }
+
+            &.avatar_sub {
+              left: 24rpx;
+              z-index: 1;
+            }
+          }
+        }
+
+        // 昵称
+        .joinable_name {
+          flex: 1;
+          font-size: 28rpx;
+          color: #333333;
+          font-weight: 500;
+          margin-left: 12rpx;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        // 倒计时
+        .joinable_countdown {
+          font-size: 22rpx;
+          color: #999999;
+          margin: 0 20rpx 0 12rpx;
+          white-space: nowrap;
+          flex-shrink: 0;
+        }
+
+        // 去拼团按钮
+        .joinable_btn {
+          background: linear-gradient(90deg, #8a3bf8 0%, #742af5 100%);
+          border-radius: 28rpx;
+          padding: 0 24rpx;
+          height: 56rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          transition: opacity 0.2s;
+
+          &:active {
+            opacity: 0.82;
+          }
+
+          .joinable_btn_text {
+            color: #ffffff;
+            font-size: 26rpx;
+            font-weight: bold;
+          }
+        }
+      }
+
+      // 空列表占位
+      .joinable_empty {
+        padding: 80rpx 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .joinable_empty_text {
+          font-size: 28rpx;
+          color: #cccccc;
+        }
+      }
+    }
+  }
+}
+</style>