MoeNovaClient/pages/crowdFunding/components/productSpecifications/productSpecifications.vue

<template>
  <view class="action-sheet-container" v-if="visible" @click="handleMaskClick">
    <view class="action-sheet-mask"  @click="hide"></view>
    <view class="action-sheet" :class="{ 'action-sheet-show': animationShow }" @click.stop>
      <!-- 可滚动内容区 -->
      <view class="action-sheet-scroll">
        <!-- 顶部价格与支持人数 -->
        <view class="sheet-header" v-if="currentReward">
          <view class="sheet-price">￥{{ currentReward.price }}</view>
          <view class="sheet-support">已支持{{ currentReward.sold_count }}份</view>
        </view>

        <!-- 商品卡片 -->
        <view class="sheet-product-card" v-if="currentReward">
          <view class="product-info">
            <view style="display: flex">
              <view class="product-title two-omit">{{title + ' ' + currentReward.title }}</view>
              <view class="product-time">
                （预计发货时间 {{ currentReward.delivery_year }}年{{ currentReward.delivery_month }}月）
              </view>
            </view>
            <image class="product-img" :src="currentReward.images[0]" mode="aspectFill" />
            <view class="product-detail" v-for="(d, i) in currentReward.description.split('\\n')" :key="i">{{ d }}</view>
             <view class="product-detail">发货方式：{{ currentReward.delivery_method }}</view>
            <view class="product-detail">限购：{{ currentReward.limit_count === 0 ? '不限' : currentReward.limit_count + '份' }}</view>
            <view class="product-detail" v-if="currentReward.is_early_bird">早鸟档，限量{{ currentReward.early_bird_limit }}，截止{{ currentReward.early_bird_end_time }}</view> 
          </view>
        </view>

        <!-- 规格选择 -->
        <view class="sheet-spec-area">
          <view class="spec-title">
            选择回报
            <text class="spec-count">共{{ specList.length }}个</text>
          </view>
          <view class="spec-list">
            <view class="spec-item" v-for="(spec, idx) in specList" :key="idx"
              :class="{ selected: selectedSpecIndex === idx }" @click="selectSpec(idx)">
              {{ spec }}
            </view>
          </view>
        </view>
      </view>
      <!-- 底部按钮 -->
      <view class="action-sheet-confirm-btn blick-btn-animation" @click="handleConfirm">立即购买支持</view>
      <view class="action-sheet-line"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: "productSpecifications",
  props: {
    rewards: {
      type: Array,
      default: () => {
        return [];
      }
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      animationShow: false,
      selectedSpecIndex: 0, // 默认选中第一个规格
    };
  },
  computed: {
    // 当前选中的回报档
    currentReward() {
      return this.rewards && this.rewards.length > 0
        ? this.rewards[this.selectedSpecIndex]
        : null;
    },
    // 规格名列表
    specList() {
      return this.rewards.map(r => r.title);
    }
  },
  methods: {
    // 显示ActionSheet
    show() {
      this.visible = true;
      setTimeout(() => {
        this.animationShow = true;
      }, 10);
    },

    // 隐藏ActionSheet
    hide() {
      this.animationShow = false;
      setTimeout(() => {
        this.visible = false;
      }, 300); // 动画持续时间
    },

    selectSpec(idx) {
      this.selectedSpecIndex = idx;
    },

    handleConfirm() {
      this.$emit("confirm", {
        selectedReward: this.currentReward,
        selectedSpecIndex: this.selectedSpecIndex
      });
      this.hide();
    },
    
    // 处理遮罩点击
    handleMaskClick() {
      if (this.maskClosable) {
        this.$emit("cancel");
        this.hide();
      }
    },
  },
};
</script>

<style lang="scss">
.action-sheet-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;

  .action-sheet-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .action-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    background: #f2f6f2;
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
    padding: 0 32rpx;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding-top: 40rpx;

    &.action-sheet-show {
      transform: translateY(0);
    }

    .sheet-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 0 0 0;

      .sheet-price {
        font-size: 44rpx;
        font-weight: bold;
        color: #1F1F1F;
      }

      .sheet-support {
        font-size: 24rpx;
        color: #b2b2b2;
      }
    }

    .sheet-product-card {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      background: #f8faf8;
      border-radius: 16rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
      padding: 24rpx 24rpx 18rpx 24rpx;
      margin: 24rpx 0 0 0;
      position: relative;
      min-height: 160rpx;

      .product-img {
        width: 92rpx;
        height: 92rpx;
        border-radius: 8rpx;
        margin-right: 18rpx;
        flex-shrink: 0;
        margin-top: 2rpx;
        margin: 10rpx 0;
      }

      .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .product-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #1F1F1F;
          line-height: 1.2;
          margin-bottom: 2rpx;
          margin-top: 2rpx;
          max-width: 340rpx;
          word-break: break-all;
          display: inline-block;
          max-width: 300rpx;
        }

        .product-time {
          font-size: 22rpx;
          color: #b2b2b2;
          margin-bottom: 8rpx;
          margin-top: 0;
          text-align: left;
          font-weight: normal;
        }

        .product-detail {
          font-size: 22rpx;
          color: #b2b2b2;
          margin-top: 2rpx;
          line-height: 1.2;
          text-align: left;
          padding: 10rpx 0;
        }
      }

      .product-checkbox {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        right: 18rpx;
        top: 18rpx;
        background: transparent;
      }
    }

    .sheet-spec-area {
      background: #fff;
      border-radius: 20rpx;
      margin: 32rpx 0 0 0;
      padding: 24rpx 24rpx 32rpx 24rpx;

      .spec-title {
        font-size: 28rpx;
        color: #1F1F1F;
        font-weight: bold;
        margin-bottom: 18rpx;
        display: flex;
        align-items: baseline;

        .spec-count {
          color: #b2b2b2;
          font-size: 22rpx;
          font-weight: normal;
          margin-left: 12rpx;
        }
      }

      .spec-list {
        display: grid;
        flex-direction: row;
        gap: 18rpx;

        .spec-item {
          padding: 12rpx 20rpx;
          border-radius: 12rpx;
          border-radius: 6rpx;
          border: 3rpx solid #1F1F1F;
          color: #1F1F1F;
          font-size: 28rpx;
          background: #fff;
          text-align: center;
          transition: all 0.2s;
          box-shadow: none;
          font-weight: 500;
          overflow: hidden;
          position: relative;
          left: 0;
          top: 0;

          &.selected {
            background: linear-gradient(-90deg, rgba(172, 249, 52, 0.5) 0%, rgba(172, 249, 52, 0) 100%);

            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              right: 0;
              width: 0;
              height: 0;
              border-top: 8rpx solid transparent;
              border-left: 8rpx solid transparent;
              border-right: 8rpx solid #1F1F1F;
              border-bottom: 8rpx solid #1F1F1F;
            }
          }
        }
      }
    }

    .action-sheet-confirm-btn {
      font-family: "PingFang SC-bold";
      font-weight: 400;
      font-size: 32rpx;
      color: #ACF934;
      width: 626rpx;
      height: 88rpx;
      background: #1F1F1F;
      border-radius: 58rpx;
      margin:16rpx auto;
      margin-top: 16rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

   
    }

    .action-sheet-line {
      position: absolute;
      top: 16rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 62rpx;
      height: 8rpx;
      background: #d1ded1;
      border-radius: 224rpx;
    }
  }

  .action-sheet-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 70vh;
    padding: 0;
  }
}
</style>