buddhism/components/donate-modal/donate-modal.vue

<template>
  <view class="donate-modal" v-if="visible" @click="handleClose">
    <view class="modal-content" @click.stop>
      <!-- 弹窗标题 -->
      <view class="modal-header">
        <text class="modal-title">{{ title }}</text>
        <image class="modal-icon" :src="CommonEnum.LotusMeditation" mode="aspectFit" />
      </view>

      <!-- 输入区域 -->
      <view class="input-section">
        <input
          class="amount-input"
          :placeholder="placeholder"
          v-model="localAmount"
          type="number"
        />
        <view class="random-option" @click="toggleRandomAmount">
          <view class="radio-button">
            <image class="radio-icon" :src="CommonEnum.Refresh" mode="aspectFit" />
          </view>
          <text class="option-text">{{ randomText }}</text>
        </view>
      </view>

      <!-- 确认按钮 -->
      <view class="confirm-button" @click="handleConfirm">
        <text class="button-text">{{ confirmText }}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import CommonEnum from '../../enum/common'

  export default {
    name: 'DonateModal',
    props: {
      // 是否显示弹窗
      visible: {
        type: Boolean,
        default: false,
      },
      // 弹窗标题
      title: {
        type: String,
        default: '随喜',
      },
      // 输入框占位符
      placeholder: {
        type: String,
        default: '请输入金额',
      },
      // 随缘选项文字
      randomText: {
        type: String,
        default: '随缘',
      },
      // 确认按钮文字
      confirmText: {
        type: String,
        default: '确认行善',
      },
      // 默认金额
      defaultAmount: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        CommonEnum,
        localAmount: '',
      }
    },
    watch: {
      visible(newVal) {
        if (newVal) {
          this.localAmount = this.defaultAmount
        }
      },
      defaultAmount(newVal) {
        if (this.visible) {
          this.localAmount = newVal
        }
      },
    },
    methods: {
      // 关闭弹窗
      handleClose() {
        this.$emit('close')
      },

      // 切换随机金额选项
      toggleRandomAmount() {
        const randomAmount = Math.floor(Math.random() * 88) + 1 // 生成1-88的随机整数
        this.localAmount = randomAmount.toString()
        console.log('生成随机金额:', this.localAmount)
      },

      // 确认操作
      handleConfirm() {
        if (!this.localAmount) {
          uni.showToast({
            title: '请输入金额或点击随缘生成随机金额',
            icon: 'none',
          })
          return
        }

        // 触发确认事件
        this.$emit('confirm', {
          amount: this.localAmount,
          isRandom: false,
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .donate-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  .modal-content {
    position: fixed;
    background-color: #fffbf5;
    border-radius: 20rpx;
    padding: 40rpx;
    width: 610rpx;
    height: 386rpx;
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
    .modal-icon {
      position: absolute;
      top: 28rpx;
      right: 28rpx;
      width: 180rpx;
      height: 162rpx;
    }
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;

    .modal-title {
      width: 80rpx;
      height: 54rpx;
      font-weight: 500;
      font-size: 40rpx;
      color: #695347;
      line-height: 54rpx;
    }
  }

  .input-section {
    width: 100%;
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    gap: 20rpx;

    .amount-input {
      flex: 1;
      padding: 0 32rpx;
      font-size: 36rpx;
      color: #695347;
      width: 384rpx;
      height: 72rpx;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 1rpx solid #695347;
    }

    .random-option {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-radius: 40rpx;
      background: #fff8f0;

      &:active {
        background: rgba(191, 116, 4, 0.1);
      }

      .radio-button {
        padding: 20rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .radio-icon {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .option-text {
        font-size: 32rpx;
        color: #695347;
      }
    }
  }

  .confirm-button {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    width: 308rpx;
    height: 66rpx;
    background: #c7a26d;
    box-shadow: 2rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.3);
    border-radius: 43rpx 43rpx 43rpx 43rpx;
    border: 2rpx solid #e3d4ba;
    margin: 0 auto; /* 添加这行来居中 */

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

    .button-text {
      color: #ffffff;
      font-size: 36rpx;
      font-weight: bold;
    }
  }
</style>