buddhism/components/custom-number-modal/custom-number-modal.vue

<template>
  <view v-if="visible" class="modal-overlay" @click="handleOverlayClick">
    <view class="modal-content" @click.stop>
      <view class="modal-header">
        <text class="modal-title">{{ title }}</text>
        <view class="modal-close" @click="handleClose">×</view>
      </view>
      <view class="modal-body">
        <view class="input-group">
          <text class="input-label">{{ label }}</text>
          <input 
            v-model="inputValue" 
            type="number" 
            :placeholder="placeholder"
            class="custom-input"
            @input="handleInput"
          />
        </view>
      </view>
      <view class="modal-footer">
        <view class="modal-btn cancel-btn" @click="handleClose">{{ cancelText }}</view>
        <view class="modal-btn confirm-btn" @click="handleConfirm">{{ confirmText }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomNumberModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '自定义人数'
    },
    label: {
      type: String,
      default: '请输入人数：'
    },
    placeholder: {
      type: String,
      default: '请输入人数'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    maxValue: {
      type: Number,
      default: 99
    }
  },
  data() {
    return {
      inputValue: ''
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.inputValue = ''
      }
    }
  },
  methods: {
    handleInput(e) {
      const value = e.detail.value
      // 只允许输入数字，且小于maxValue
      const numValue = value.replace(/[^\d]/g, "")
      if (numValue === "" || parseInt(numValue) < this.maxValue) {
        this.inputValue = numValue
      }
    },
    
    handleConfirm() {
      if (this.inputValue === "") {
        uni.showToast({
          title: "请输入人数",
          icon: "none",
        })
        return
      }
      
      const numValue = parseInt(this.inputValue)
      if (numValue >= this.maxValue) {
        uni.showToast({
          title: `人数不能大于等于${this.maxValue}`,
          icon: "none",
        })
        return
      }
      
      this.$emit('confirm', this.inputValue)
      this.handleClose()
    },
    
    handleClose() {
      this.$emit('close')
    },
    
    handleOverlayClick() {
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  width: 600rpx;
  background: #fffbf5;
  border-radius: 20rpx;
  border: 2rpx solid #c7a26d;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 50rpx 20rpx 50rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.modal-title {
  font-weight: 600;
  font-size: 36rpx;
  color: #695347;
}

.modal-close {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48rpx;
  color: #999;
  cursor: pointer;
}

.modal-body {
  padding: 40rpx 50rpx;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.input-label {
  font-size: 32rpx;
  color: #695347;
  font-weight: 500;
}

.custom-input {
  width: 460rpx;
  height: 80rpx;
  border: 2rpx solid #c7a26d;
  border-radius: 10rpx;
  padding-left: 30rpx;
  font-size: 32rpx;
  color: #695347;
  background: #ffffff;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #e0e0e0;
}

.modal-btn {
  flex: 1;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
  border-right: 1rpx solid #e0e0e0;
}

.cancel-btn:active {
  background: #e0e0e0;
}

.confirm-btn {
  background: #a24242;
  color: #ffffff;
}

.confirm-btn:active {
  background: #8a3636;
}
</style>