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>