sfms3.0-uniapp/src/mycomponents/common/comMessage.vue

<template name="show-modal">
  <view>
    <u-modal v-model="show" :title-style="{ color: 'red' }" :title="title" :showTitle="false" :showConfirmButton="false" ref="modal">
      <view class="" style="width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 10rpx">
        <view class="" style=""> 版本号 : {{ version }} </view>
      </view>
      <view class="slot-content">
        <slot name="icon">
          <image class="icon" :src="icon" />
        </slot>
        <slot name="content">
          <rich-text class="content" :nodes="content"> </rich-text>
        </slot>
        <view class="split_line"></view>
        <slot name="button">
          <view class="uni-flex uni-row u-col-center space-between" style="width: 100%; height: 48px">
            <view v-if="showCancelButton" class="cance_button" @tap="cancelClose">
              <text :style="{ color: cancelColor }">{{ cancelText }}</text>
            </view>
            <u-line direction="col" length="100%"></u-line>
            <view v-if="showConfirmButton" class="confirm_button" @tap="confirmClose">
              <text :style="{ color: confirmColor }">{{ confirmText }}</text>
              <text v-if="showConfirmCountdown">({{ seconds }}s关闭)</text>
            </view>
          </view>
        </slot>
      </view>
    </u-modal>
  </view>
</template>

<script setup lang="ts">
/**
 * modal 模态框
 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作
 * */
import { ref, getCurrentInstance, onMounted } from 'vue'

const timer = ref(null)
const show = ref(false) // 是否显示
const iconType = ref('消息')
const icon = ref('../../static/icons/error-circle.svg')
const title = ref('')
const content = ref('') // 提示内容
const cancelText = ref('取消') // 取消按钮的文字
const confirmText = ref('确定') // 确认按钮文字
const showCancel = ref(true) //  是否显示取消按钮，默认为 true
const confirmColor = ref('#007aff') // 确定按钮颜色
const cancelColor = ref(null) // 取消按钮颜色
const showConfirmButton = ref(true) // 是否显示确认按钮
const showConfirmCountdown = ref(true) // 是否显示确定倒计时
const showCancelButton = ref(true) // 是否显示取消按钮
const showClose = ref(false)
const confirm = ref(false) // 为 true 时，表示用户点击了确定按钮
const cancel = ref(false) // 为 true 时，表示用户点击了取消
const isDisabled = ref(true) // 为 true 时，表示用户可以点击，反之则不可以
const seconds = ref(0)
const success = ref(() => {})
const version = ref('')
const modal = ref(null)
// onMounted(() => {
//   const systemInfo = uni.getSystemInfoSync()
//   // #ifdef H5
//   version.value = systemInfo.appVersion
//   console.log(systemInfo.appVersion, '版本号')
//   // #endif

//   // #ifdef APP
//   version.value = systemInfo.appWgtVersion
//   // #endif
// })
const getVersionCode = () => {
  const systemInfo = uni.getSystemInfoSync()
  // #ifdef H5
  version.value = systemInfo.appVersion
  console.log(systemInfo.appVersion, '版本号')
  // #endif

  // #ifdef APP
  version.value = systemInfo.appWgtVersion
  // #endif
}
const open = () => {
  getVersionCode()
  show.value = true
  isDisabled.value = true
}
const close = () => {
  show.value = false
  isDisabled.value = false
}
const confirmClose = () => {
  if (!isDisabled.value) return
  isDisabled.value = false
  // console.log('确定点击')
  if (show.value) {
    show.value = false
    clearInterval(timer.value) // 清空timer
    if(modal.value){
      modal.value.popupClose()
    }
    success.value({
      // cancel: false,
      confirm: true
    })
  }
}
const cancelClose = () => {
  if (!isDisabled.value) return
  isDisabled.value = false
  clearInterval(timer.value) // 清空timer
  show.value = false
  success.value({
    // cancel: true,
    confirm: false
  })
}
// 打开消息弹框(确定+倒计时)
const showMessage = (mContent, callback) => {
  showConfirmCountdownModal('消息', mContent, callback)
}
// 打开成功弹框(确定+倒计时)
const showSuccessMessage = (mContent, callback) => {
  showConfirmCountdownModal('成功', mContent, callback)
}
// 打开失败弹框(确定）
const showErrorMessage = (mContent, callback) => {
  showConfirmModal('失败', mContent, callback)
}

// 显示崩溃消息(无确定）
const showBreakMessage = (mContent, callback) => {
  showNoButtonModal('失败', mContent, callback)
}

// 打开疑问弹框(取消+确定）
const showQuestionMessage = (mContent, callback) => {
  showSelectModal('疑问', mContent, callback)
}

// 打开警告弹框(确定+倒计时)
const showWarningMessage = (mContent, callback) => {
  showConfirmCountdownModal('警告', mContent, callback)
}

// 打开失败弹框(确定+倒计时)
const showConfirmCountdownFailModal = (mContent, callback) => {
  showConfirmCountdownModal('失败', mContent, callback)
}

// 打开消息弹框(确定）
const showConfirmMessageModal = (mContent, callback) => {
  showConfirmModal('消息', mContent, callback)
}

// 打开成功弹框(确定）
const showConfirmSuccessModall = (mContent, callback) => {
  showConfirmModal('成功', mContent, callback)
}

// 打开警告弹框(确定）
const showConfirmWarningModal = (mContent, callback) => {
  showConfirmModal('警告', mContent, callback)
}

// 打开疑问弹框(确定）
const showConfirmQuestionModal = (mContent, callback) => {
  showConfirmModal('疑问', mContent, callback)
}

// 初始化弹框并打开(确定）
const showNoButtonModal = (mIconType, mContent, callback) => {
  showModal({
    iconType: mIconType,
    content: mContent,
    showConfirmButton: false,
    showCancelButton: false,
    success(res) {
      if (callback != undefined) {
        if (res.confirm == true) {
          callback(true)
        } else {
          callback(false)
        }
      }
    }
  })
}
// 初始化弹框并打开(确定）
const showConfirmModal = (mIconType, mContent, callback) => {
  console.log(11)
  showModal({
    iconType: mIconType,
    content: mContent,
    showCancelButton: false,
    success(res) {
      console.log(11, res)
      if (callback != undefined) {
        if (res.confirm == true) {
          callback(true)
        } else {
          callback(false)
        }
      }
    }
  })
}

// 打开消息弹框(取消+确定）
const showSelectMessageModal = (mContent, callback) => {
  showSelectModal('消息', mContent, callback)
}

// 打开成功弹框(取消+确定）
const showSelectSuccessModal = (mContent, callback) => {
  showSelectModal('成功', mContent, callback)
}

// 打开失败弹框(取消+确定）
const showSelectFailModal = (mContent, callback) => {
  showSelectModal('失败', mContent, callback)
}

// 打开警告弹框(取消+确定）
const showSelectWarningModal = (mContent, callback) => {
  showSelectModal('警告', mContent, callback)
}

// 初始化弹框并打开(取消+确定）
const showSelectModal = (mIconType, mContent, callback) => {
  showModal({
    iconType: mIconType,
    content: mContent,
    success(res) {
      if (callback != undefined) {
        if (res.confirm == true) {
          callback(true)
          console.log('用户点击确定')
        } else {
          callback(false)
          console.log('用户点击取消')
        }
      }
    }
  })
}

// 打开疑问弹框(确定+倒计时)
const showConfirmCountdownQuestionModal = (mContent, callback) => {
  showConfirmCountdownModal('疑问', mContent, callback)
}

// 初始化弹框并打开(确定+倒计时)
const showConfirmCountdownModal = (mIconType, mContent, callback) => {
  showModal({
    iconType: mIconType,
    content: mContent,
    showCancelButton: false,
    showConfirmCountdown: true,
    success(res) {
      if (callback != undefined) {
        if (res.confirm == true) {
          callback(true)
        } else {
          callback(false)
        }
      }
    }
  })
}

// 打开消息弹框(取消+确定+倒计时)
const showSelectCountdownMessageModal = (mContent, callback) => {
  showSelectCountdownModal('消息', mContent, callback)
}

// 打开成功弹框(取消+确定+倒计时)
const showSelectCountdownSuccessModal = (mContent, callback) => {
  showSelectCountdownModal('成功', mContent, callback)
}

// 打开失败弹框(取消+确定+倒计时)
const showSelectCountdownFailModal = (mContent, callback) => {
  showSelectCountdownModal('失败', mContent, callback)
}

// 打开警告弹框(取消+确定+倒计时)
const showSelectCountdownWarningModal = (mContent, callback) => {
  showSelectCountdownModal('警告', mContent, callback)
}

// 打开疑问弹框(取消+确定+倒计时)
const showSelectCountdownQuestionModal = (mContent, callback) => {
  showSelectCountdownModal('疑问', mContent, callback)
}

// 初始化弹框并打开(取消+确定+倒计时)
const showSelectCountdownModal = (mIconType, mContent, callback) => {
  showModal({
    iconType: mIconType,
    content: mContent,
    showConfirmCountdown: true,
    success(res) {
      if (callback != undefined) {
        if (res.confirm == true) {
          callback(true)
          console.log('用户点击确定')
        } else {
          callback(false)
          console.log('用户点击取消')
        }
      }
    }
  })
}

// 初始化弹框并打开
const showModal = (data) => {
  if (data.iconType) {
    iconType.value = data.iconType
    switch (data.iconType) {
      case '消息':
        icon.value = '/static/icons/error-circle.svg'
        break
      case '成功':
        icon.value = '/static/icons/checkmark-circle.svg'
        break
      case '失败':
        icon.value = '/static/icons/close-circle.svg'
        break
      case '警告':
        icon.value = '/static/icons/warning.svg'
        break
      case '疑问':
        icon.value = '/static/icons/question-circle.svg'
        break
      default:
        break
    }
  }
  // image
  if (data.title) {
    title.value = data.title
  }
  if (data.content) {
    content.value = data.content
  } else {
    content.value = ''
  }
  if (data.cancelText) {
    cancelText.value = data.cancelText
  } else {
    cancelText.value = '取消'
  }
  if (data.confirmText) {
    confirmText.value = data.confirmText
  } else {
    confirmText.value = '确定'
  }

  if (data.showCancel === false || data.showCancel === true) {
    showCancel.value = data.showCancel
  } else {
    showCancel.value = true
  }

  if (data.confirmColor) {
    confirmColor.value = data.confirmColor
  } else {
    confirmColor.value = '#007aff'
  }

  if (data.cancelColor) {
    cancelColor.value = data.cancelColor
  } else {
    cancelColor.value = '#666F83'
  }

  if (data.showConfirmButton === false || data.showConfirmButton === true) {
    showConfirmButton.value = data.showConfirmButton
  } else {
    showConfirmButton.value = true
  }

  if (data.showConfirmCountdown === false || data.showConfirmCountdown === true) {
    showConfirmCountdown.value = data.showConfirmCountdown
  } else {
    showConfirmCountdown.value = false
  }

  if (data.showCancelButton === false || data.showCancelButton === true) {
    showCancelButton.value = data.showCancelButton
  } else {
    showCancelButton.value = true
  }
  if (data.success) {
    success.value = data.success
  } else {
    success.value = () => {}
  }
  setTimeout((res) => {
    open()
  }, 500)
  if (showConfirmCountdown.value) {
    startTimer()
  }
}

const startTimer = () => {
  seconds.value = 3
  clearInterval(timer.value)
  timer.value = setInterval(() => {
    seconds.value--
    // console.log("倒计时时间", this.seconds);
    if (seconds.value <= 0) {
      timeUp()
    }
  }, 1000)
}

const timeUp = () => {
  // clearInterval(this.timer)
  confirmClose()
}
defineExpose({
  confirmClose,
  cancelClose,
  showSuccessMessage,
  showErrorMessage,
  showBreakMessage,
  showQuestionMessage,
  showWarningMessage,
  showConfirmCountdownFailModal,
  showConfirmMessageModal,
  showConfirmSuccessModall,
  showConfirmWarningModal,
  showConfirmQuestionModal,
  showNoButtonModal,
  showConfirmModal,
  showSelectMessageModal,
  showSelectSuccessModal,
  showSelectFailModal,
  showSelectWarningModal,
  showSelectModal,
  showConfirmCountdownQuestionModal,
  showConfirmCountdownModal,
  showSelectCountdownMessageModal,
  showSelectCountdownSuccessModal,
  showSelectCountdownFailModal,
  showSelectCountdownWarningModal,
  showSelectCountdownQuestionModal,
  showMessage,
  showModal
})
</script>
<style lang="scss" scoped>
.slot-content {
  font-size: 36rpx;
  display: flex; //弹性布局
  flex-direction: column; //垂直排列
  align-items: center; //子元素居中
  // background-image: url()
}

.icon {
  width: 70rpx;
  height: 70rpx;
  opacity: 1; //透明度
  margin-top: 16px;
}

.title {
  font-size: 35rpx;
}

.content {
  width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 8px;
  margin-right: 8px;
  font-size: 32rpx;
  text-align: center;
}

.cance_button {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.confirm_button {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.confirm_text {
  // color: $uni-color-primary;
}

.def_text {
  color: $uni-color-primary;
}
</style>