zhjwxt/uniapp/components/custom-modal/example.vue

<template>
  <view class="container">
    <fui-button @click="showSuccessModal = true" text="显示成功弹窗"></fui-button>
    <fui-button @click="showConfirmModal = true" text="显示确认弹窗"></fui-button>
    <fui-button @click="showCustomModal = true" text="显示自定义弹窗"></fui-button>
    
    <!-- 成功弹窗示例 -->
    <custom-modal 
      :show="showSuccessModal" 
      width="600"
      @cancel="handleModalCancel"
    >
      <fui-icon name="checkbox-fill" :size="108" color="#09BE4F"></fui-icon>
      <text class="fui-title">购买成功</text>
      <text class="fui-descr">成功购买一张月卡，可免费阅读30天</text>
      
      <template #buttons>
        <fui-button 
          text="我知道了" 
          width="240rpx" 
          height="72rpx" 
          :size="28" 
          radius="36rpx" 
          background="#FFB703"
          borderWidth="0" 
          :margin="['0','0','24rpx']" 
          @click="handleButtonClick('success_confirm')"
        />
      </template>
    </custom-modal>
    
    <!-- 确认弹窗示例 -->
    <custom-modal 
      :show="showConfirmModal" 
      width="500"
      @cancel="handleModalCancel"
    >
      <fui-icon name="warning-fill" :size="108" color="#FF6B35"></fui-icon>
      <text class="fui-title">确认删除</text>
      <text class="fui-descr">删除后无法恢复，确定要继续吗？</text>
      
      <template #buttons>
        <fui-button 
          text="取消" 
          width="200rpx" 
          height="72rpx" 
          :size="28" 
          radius="36rpx" 
          background="#F5F5F5"
          color="#333"
          borderWidth="0" 
          :margin="['0','0','12rpx']" 
          @click="handleButtonClick('confirm_cancel')"
        />
        <fui-button 
          text="确定删除" 
          width="200rpx" 
          height="72rpx" 
          :size="28" 
          radius="36rpx" 
          background="#FF6B35"
          borderWidth="0" 
          @click="handleButtonClick('confirm_delete')"
        />
      </template>
    </custom-modal>
    
    <!-- 自定义内容弹窗示例 -->
    <custom-modal 
      :show="showCustomModal" 
      width="700"
      :showClose="false"
      @cancel="handleModalCancel"
    >
      <view class="custom-content">
        <text class="custom-title">支付二维码</text>
        <view class="custom-form">
          <fui-qrcode :value="qrcode"></fui-qrcode>
        </view>
      </view>
      
      <template #buttons>
        <view class="button-row">
          <fui-button 
            text="发送二维码给用户"
            width="200rpx" 
            height="72rpx" 
            :size="28" 
            radius="36rpx" 
            background="#007AFF"
            borderWidth="0" 
            @click="handleButtonClick('custom_submit')"
          />
        </view>
      </template>
    </custom-modal>
  </view>
</template>

<script>
import CustomModal from './custom-modal.vue'

export default {
  components: {
    CustomModal
  },
  data() {
    return {
      showSuccessModal: false,
      showConfirmModal: false,
      showCustomModal: false,
      qrcode: 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET',
      formData: {
        name: '',
        phone: ''
      }
    }
  },
  methods: {
    // 处理弹窗取消事件
    handleModalCancel(type) {
      console.log('弹窗取消:', type)
      this.showSuccessModal = false
      this.showConfirmModal = false
      this.showCustomModal = false
    },
    
    // 处理按钮点击事件
    handleButtonClick(action) {
      console.log('按钮点击:', action)
      
      switch(action) {
        case 'success_confirm':
          this.showSuccessModal = false
          uni.showToast({
            title: '确认成功',
            icon: 'success'
          })
          break
          
        case 'confirm_cancel':
          this.showConfirmModal = false
          break
          
        case 'confirm_delete':
          this.showConfirmModal = false
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
          break
          
        case 'custom_cancel':
          this.showCustomModal = false
          break
          
        case 'custom_submit':
          if (!this.formData.name || !this.formData.phone) {
            uni.showToast({
              title: '请填写完整信息',
              icon: 'none'
            })
            return
          }
          
          this.showCustomModal = false
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          })
          
          // 重置表单
          this.formData = {
            name: '',
            phone: ''
          }
          break
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.fui-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin: 20rpx 0;
}

.fui-descr {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin: 0 0 30rpx 0;
  line-height: 1.5;
}

.custom-content {
  width: 100%;
  padding: 20rpx;
}

.custom-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  display: block;
  margin-bottom: 30rpx;
}

.custom-form {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40rpx;
}
</style>