yogaApp/pages/components/member-card-scroll.vue

<template>
  <view class="member-card-scroll">
    <scroll-view
        class="card-scroll"
        scroll-x="true"
        scroll-with-animation
        :show-scrollbar="false"
        @scroll="onScroll"
    >
      <view class="card-scroll-inner" :style="innerStyle">
        <view
            v-for="(card, index) in cards"
            :key="card.id || index"
            class="card-item"
            @click="onCardClick(card, index)"
        >
          <member-card
              :card="card"
              :size="size"
              :selectable="selectable"
              :selected="selectable && highlightIndex === index"
          />
<!--          v-if="selectable && !isCardUsable(card)"-->
          <view  class="unusable-tip">
            <text v-if=" card.status == 'ACTIVE'" style="color:#00a89b;" >正常</text>
            <text v-else style="color: #ff6b6b;">{{ getUnusableReason(card) }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 指示器 -->
    <view v-if="cards && cards.length > 1" class="indicator">
      <view
          v-for="(card, index) in cards"
          :key="index"
          class="dot"
          :class="{ active: index === currentIndex }"
      ></view>
    </view>
  </view>
</template>

<script>
import MemberCard from './member-card.vue';

export default {
  name: 'MemberCardScroll',
  components: { MemberCard },
  props: {
    cards: { type: Array, default: () => [] },
    size: { type: String, default: 'mini' },
    center: { type: Boolean, default: false },
    selectable: { type: Boolean, default: false },
    deductType: { type: String, default: 'COUNT' },
    deductCount: { type: Number, default: 1 },
    deductAmount: { type: Number, default: 0 },
    // 默认卡片ID（后端可标记某张卡为默认卡）
    defaultCardId: { type: [String, Number], default: null },
    // 是否自动选中第一张可用卡（弹窗场景设为 false）
    autoSelect: { type: Boolean, default: true }
  },
  data() {
    return {
      selectedIndex: -1,
      currentIndex: 0,
      screenWidthRpx: 750
    };
  },
  computed: {
    highlightIndex() {
      if (this.selectedIndex >= 0) {
        return this.selectedIndex;
      }
      if (this.selectable && this.defaultCard) {
        return this.cards.findIndex(c => c.id === this.defaultCard.id);
      }
      return -1;
    },
    selectedCard() {
      return this.selectedIndex >= 0 ? this.cards[this.selectedIndex] : null;
    },
    // 默认卡：后端指定的 defaultCardId，或第一张可用卡
    defaultCard() {
      if (this.defaultCardId != null) {
        const card = this.cards.find(c => c.id === this.defaultCardId);
        if (card && this.isCardUsable(card)) return card;
      }
      return this.cards.find(card => this.isCardUsable(card)) || null;
    },
    // 有效卡：用户选中的卡，没选就用默认卡
    effectiveCard() {
      return this.selectedCard || this.defaultCard;
    },
    // 卡片宽度映射（与 member-card.vue 保持一致）
    cardWidthRpx() {
      const map = { large: 690, small: 440, mini: 380 };
      return map[this.size] || 380;
    },
    // 动态计算首尾 padding
    innerStyle() {
      if (!this.center) {
        return { paddingLeft: '20rpx', paddingRight: '20rpx' };
      }
      const padding = Math.max(0, (this.screenWidthRpx - this.cardWidthRpx) / 2);
      return {
        paddingLeft: padding + 'rpx',
        paddingRight: padding + 'rpx'
      };
    }
  },
  watch: {
    cards: {
      immediate: true,
      handler() {
        this.initSelected();
      }
    },
    defaultCardId() {
      this.initSelected();
    }
  },
  created() {
    this.screenWidthRpx = 750;
  },
  methods: {
    onScroll(e) {
      const scrollLeft = e.detail.scrollLeft;
      const sysInfo = uni.getSystemInfoSync();
      const screenWidth = sysInfo.windowWidth;
      const rpxRatio = screenWidth / 750;
      const cardWidthPx = this.cardWidthRpx * rpxRatio;
      const gapPx = 20 * rpxRatio;

      const paddingRpx = this.center
          ? Math.max(0, (750 - this.cardWidthRpx) / 2)
          : 20;
      const paddingPx = paddingRpx * rpxRatio;

      const centerX = scrollLeft + screenWidth / 2;
      let index = Math.round(
          (centerX - paddingPx - cardWidthPx / 2) / (cardWidthPx + gapPx)
      );
      index = Math.max(0, Math.min(index, this.cards.length - 1));

      // ✅ 只更新 currentIndex，用于指示器显示当前位置
      // ✅ 不再修改 selectedIndex，选中卡只由点击/默认卡决定
      this.currentIndex = index;
    },

    initSelected() {
      if (!this.selectable) return;
      if (!this.autoSelect) {
        this.selectedIndex = -1;
        return;
      }
      if (this.defaultCardId != null) {
        const idx = this.cards.findIndex(c => c.id === this.defaultCardId);
        if (idx >= 0 && this.isCardUsable(this.cards[idx])) {
          this.selectedIndex = idx;
          return;
        }
      }
      const idx = this.cards.findIndex(card => this.isCardUsable(card));
      this.selectedIndex = idx;
    },

    onCardClick(card, index) {
      this.currentIndex = index;
      if (this.selectable) {
        if (!this.isCardUsable(card)) {
          uni.showToast({ title: this.getUnusableReason(card), icon: 'none' });
          return;
        }
        this.selectedIndex = index;
        this.$emit('select', { card, index });
      } else {
        this.$emit('card-click', { card, index });
      }
    },

    isCardUsable(card) {
      if (!card) return false;
      // ✅ 只有 ACTIVE 才可用
      if (card.status && card.status !== 'ACTIVE') return false;
      if (card.expireDate) {
        const now = new Date();
        const expire = new Date(card.expireDate.replace(/-/g, '/'));
        if (now > expire) return false;
      }
      if (card.type === 'count') {
        const available = (card.remainingCount || 0) - (card.frozenCount || 0);
        if (available < this.deductCount) return false;
      } else if (card.type === 'total_fee') {
        const available = (card.remainingTotalFee || 0) - (card.frozenAmount || 0);
        if (available < this.deductAmount) return false;
      }
      return true;
    },

    getUnusableReason(card) {
      if (card.status && card.status == 'ACTIVE') {
        return '卡片已激活';
      }
      if (card.status && card.status == 'INACTIVE') {
        return '卡片未激活';
      }
      if (card.status && card.status == 'EXPIRED') {
        return '卡片已过期';
      }
      if (card.status && card.status == 'SUSPENDED') {
        return '卡片已暂停';
      }
      if (card.status && card.status == 'DEPLETED') {
        return '卡片额度已用完';
      }
      if (card.expireDate) {
        const now = new Date();
        const expire = new Date(card.expireDate.replace(/-/g, '/'));
        if (now > expire) return '卡片已过期';
      }
      if (card.type === 'count') {
        const available = (card.remainingCount || 0) - (card.frozenCount || 0);
        if (available < this.deductCount) return '剩余次数不足';
      }
      else if (card.type === 'total_fee') {
        const available = (card.remainingTotalFee || 0) - (card.frozenAmount || 0);
        if (available < this.deductAmount) return '余额不足';
      }

      return '不可用';
    },

    // 对外方法：获取有效卡（用于提交预约）  
    getEffectiveCard() {
      return this.effectiveCard;
    },

    isManuallySelected() {
      return this.selectedIndex >= 0;
    },

    getSelected() {
      return { card: this.selectedCard, index: this.selectedIndex };
    },

    isSelectedValid() {
      return this.selectedIndex >= 0 && this.isCardUsable(this.selectedCard);
    }
  }
};
</script>

<style lang="scss" scoped>
.member-card-scroll {
  width: 100%;
}
.card-scroll {
  width: 100%;
  white-space: nowrap;
}
.card-scroll-inner {
  display: inline-block;
  white-space: nowrap;
  font-size: 0;
}
.card-item {
  display: inline-block;
  vertical-align: top;
  margin-right: 20rpx;
  position: relative;
  font-size: 28rpx;
}
.card-item:last-child {
  margin-right: 0;
}
.unusable-tip {
  margin-top: 8rpx;
  font-size: 22rpx;

  text-align: center;
}
.indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
}
.dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #ddd;
  margin: 0 6rpx;
  transition: all 0.3s;
  &.active {
    width: 24rpx;
    border-radius: 6rpx;
    background: #00a89b;
  }
}
</style>