yfs/components/detail-button/detail-button.vue

<!-- 修改为水平滚动的按钮布局 -->
<template>
  <view class="ft-fixed">
    <scroll-view class="button-scroll" scroll-x show-scrollbar="false" enhanced>
      <view class="button-container">
        <!-- 按钮1 -->
        <view v-if="checkVisible(1)" class="btn common_bg column center"
          :style="{ backgroundImage: `url(${$img1('common/chouBtn1.png')})` }" @click="handleButtonClick(1)">
        </view>

        <!-- 按钮3 -->
        <view v-if="checkVisible(3)" class="btn common_bg column center"
          :style="{ backgroundImage: `url(${$img1('common/chouBtn3.png')})` }" @click="handleButtonClick(3)">
        </view>

        <!-- 按钮5 -->
        <view v-if="checkVisible(5)" class="btn common_bg column center"
          :style="{ backgroundImage: `url(${$img1('common/chouBtn5.png')})` }" @click="handleButtonClick(5)">
        </view>

        <!-- 按钮10 (仅在无限模式显示) -->
        <view v-if="isWuxian && checkVisible(10)" class="btn common_bg column center"
          :style="{ backgroundImage: `url(${$img1('common/chouBtn10.png')})` }" @click="handleButtonClick(10)">
        </view>
        <!-- 无限抽 -->
        <view v-if="isWuxian && checkVisible(-1)" class="btn common_bg column center"
          style="background-color: #333333;border-radius: 15rpx;color: #CDEF27;font-size: 24rpx;font-family: PingFangSC, PingFang SC;letter-spacing: 2rpx;"
          @click="handleButtonClick(-1)">
          {{ wxtext }}
        </view>
        <!-- 全部按钮 (仅在非无限模式显示) -->
        <view v-if="!isWuxian && checkVisible(0) && pageData.goods && pageData.goods.type != 5"
          class="btn common_bg column center" :style="{ backgroundImage: `url(${$img1('common/chouBtnAll.png')})` }"
          @click="handleButtonClick(0)">
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'DetailButton',
  props: {
    pageData: {
      type: Object,
      default: () => ({})
    },
    isWuxian: {
      type: Boolean,
      default: false
    },
    checkButtonVisible: {
      type: Function,
      default: null
    }
  },
  data() {
    return { wxtext: '十连抽' };
  },
  methods: {
    handleButtonClick(num) {
      console.log(num);

      if (num == -1) {

        this.$emit('button-wx-click', [0, buyNum]);
        if (this.wxtext == "十连抽") {
          this.wxtext = "停止";
        } else {
          this.wxtext = "十连抽";
        }
        return;
      }
      // 如果是"全部"按钮，使用商品剩余库存数量
      let buyNum = num === 0 ? this.pageData.goods.goodslist_surplus_stock : num;
      this.$emit('button-click', [0, buyNum]);
    },
    checkVisible(num) {
      if (num == -1) {
        if (this.pageData != null && this.pageData.limitInfo != null) {
          if (this.pageData.limitInfo.user_test == 2) {
            return true;
          }
        }
        return false;
      }
      if (num == 1) {
        return true;
      }
      if (this.pageData != null && this.pageData.limitInfo != null) {
        let limitInfo = this.pageData.limitInfo;
        if (limitInfo.global_limit > 0) {
          if (num == 0) {
            return false;
          }
          if (limitInfo.user_global_remaining < num) {
            return false;
          }
        } else if (limitInfo.daily_limit > 0) {
          if (num == 0) {
            return false;
          }
          if (limitInfo.user_daily_remaining < num) {
            return false;
          }
        }

      }
      if (this.pageData.goods != null) {
        if (this.pageData.goods.quanju_xiangou > 0) {
          if (num == 0) {
            return false;
          }
          if (this.pageData.goods.quanju_xiangou < num) {
            return false;
          }
        } else
          if (this.pageData.goods.daily_xiangou > 0) {
            if (num == 0) {
              return false;
            }
            if (this.pageData.goods.daily_xiangou < num) {
              return false;
            }
          }
      }
      if (this.isWuxian) {
        return true; // 无限模式所有按钮都显示
      } else {
        if (num === 0) {
          // "全部"按钮只在有显示条件时显示
          return this.getBtnXianShi(0);
        } else {
          return this.getBtnXianShi(num);
        }
      }
    },
    getBtnXianShi(num) {
      // 如果父组件提供了判断方法，则使用父组件的方法
      if (this.checkButtonVisible) {
        return this.checkButtonVisible(num);
      }

      // 复用原页面的显示逻辑
      if (!this.pageData || !this.pageData.goods) return false;

      // 默认判断逻辑
      if (num === 0) return true;

      // 示例：可以根据实际业务逻辑补充条件
      if (this.pageData.goods.goodslist_surplus_stock < num) return false;
      return true;
    }
  }
}
</script>

<style lang="scss" scoped>
.ft-fixed {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #FFFFFF;
  padding-top: 20rpx;
  padding-bottom: 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.button-scroll {
  width: 100%;
  white-space: nowrap;

  &::-webkit-scrollbar {
    display: none;
  }
}

.button-container {
  display: inline-flex;
  // padding: 0 30rpx;
  min-width: 100%;
  justify-content: space-evenly;
  align-items: center;
}

.btn {
  width: 120rpx;
  height: 68rpx;
  position: relative;
  margin: 0 12rpx;
  flex-shrink: 0;
  background-size: 100% 100% !important;
  transition: transform 0.15s ease;

  &:active {
    transform: scale(0.95);
  }

  >view {
    white-space: nowrap;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 52rpx;
    color: #FFFFFF;
    position: relative;
    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
  }
}
</style>