buddhism/components/bottom-button/bottom-button.vue

<template>
  <view class="bottom-button" :class="buttonClass" @click="handleClick">
    <text class="button-text">{{ title }}</text>
  </view>
</template>

<script>
  export default {
    name: 'BottomButton',
    props: {
      // 按钮标题
      title: {
        type: String,
        default: '确认',
      },
      // 按钮类型：primary(主要), secondary(次要), danger(危险)
      type: {
        type: String,
        default: 'primary',
        validator: value => ['primary', 'secondary', 'danger'].includes(value),
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false,
      },
      // 自定义样式类
      customClass: {
        type: String,
        default: '',
      },
    },
    computed: {
      buttonClass() {
        return [
          'bottom-button',
          `bottom-button--${this.type}`,
          {
            'bottom-button--disabled': this.disabled,
          },
          this.customClass,
        ]
      },
    },
    methods: {
      handleClick() {
        if (this.disabled) {
          return
        }
        this.$emit('click')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .bottom-button {
    position: fixed;
    bottom: 40rpx;
    left: 75rpx;
    width: 600rpx;
    height: 100rpx;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: all 0.3s ease;

    .button-text {
      color: #ffffff;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
    }

    // 主要按钮样式（默认）
    &--primary {
      background-color: #8b2e2e;
      box-shadow: 0 8rpx 20rpx rgba(139, 46, 46, 0.3);

      &:active {
        background-color: #7a2a2a;
        transform: translateX(-50%) scale(0.98);
      }
    }

    // 次要按钮样式
    &--secondary {
      background-color: #f5f0e7;
      border: 2rpx solid #8b2e2e;
      box-shadow: 0 4rpx 12rpx rgba(139, 46, 46, 0.1);

      .button-text {
        color: #8b2e2e;
      }

      &:active {
        background-color: #f0ebe0;
        transform: translateX(-50%) scale(0.98);
      }
    }

    // 危险按钮样式
    &--danger {
      background-color: #dc3545;
      box-shadow: 0 8rpx 20rpx rgba(220, 53, 69, 0.3);

      &:active {
        background-color: #c82333;
        transform: translateX(-50%) scale(0.98);
      }
    }

    // 禁用状态
    &--disabled {
      background-color: #cccccc !important;
      box-shadow: none !important;
      cursor: not-allowed;

      .button-text {
        color: #999999;
      }

      &:active {
        transform: translateX(-50%) !important;
      }
    }
  }
</style>