chat-app/src/components/x-confirm/index.vue

<script setup>
import  {ref,nextTick} from 'vue'
import WdPopup from "@/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue";
import TmButton from "@/uni_modules/tmui/components/tm-button/tm-button.vue";
import {language} from "@/uni_modules/tmui/tool/lib/language"
const confirmState=ref(false)
const cancel=ref(true)
let onConfirm=null
let onCancel=null
const confirm=ref(true)
const contentText=ref('')
const imageRef=ref('')
const confirmLabel=ref(language('components.confirm.confirmText'))
const cancelLabel=ref(language('components.confirm.cancelText'))
const sendCancel=()=>{
  confirmState.value=false
  if (typeof onCancel==='function'){
    onCancel()
  }
}
const sendConfirm=()=>{
  confirmState.value=false
  if (typeof onConfirm==='function'){
    onConfirm()
  }
}
const showConfirm=({content,image,onConfirm:confirm,onCancel:cancel,confirmText,cancelText})=>{
  confirmState.value=true
  contentText.value=content
  imageRef.value = image?image:''
  onConfirm=confirm
  onCancel=cancel
  confirmLabel.value = confirmText || confirmLabel.value
  cancelLabel.value = cancelText || cancelLabel.value
}
defineExpose({
  showConfirm
})
</script>
<template>
  <wd-popup custom-style="border-radius: 16rpx;" modal-style="background-color: #000000;opacity: 0.6;" v-model="confirmState">
    <div class="flex flex-col w-[640rpx]">
      <div v-if="imageRef===''" class="flex justify-center items-center h-[288rpx] text-[32rpx] font-bold text-[#1A1A1A]">
        {{contentText}}
      </div>
      <div v-else class="flex flex-col items-center h-[456rpx] text-[32rpx] font-bold text-[#1A1A1A]" >
        <div class="wrap1 mt-[32rpx] mb-[44rpx]" >
          <img :src="imageRef" alt="">
        </div>
        <div class="mb-[56rpx]" > {{contentText}} </div>
      </div>
      <div class="flex flex-grow border-t-solid border-[#E7E7E7] border-1rpx text-[32rpx]">
        <div class="flex justify-center items-center text-[#1A1A1A]">
          <tm-button
            @click="sendCancel"
            :width="319"
            @touchstart="cancel=false"
            @touchend="cancel=true"
            :fontSize="32"
            :height="112"
            :margin="[0]"
            :font-color="'#1A1A1A'"
            :transprent="cancel"
            text
            :label="cancelLabel"></tm-button>
        </div>
        <div class="h-[112rpx] w-[1rpx] bg-[#E7E7E7]"></div>
        <div class="flex justify-center items-center text-[#CF3050]">
          <tm-button
            @click="sendConfirm"
            @touchstart="confirm=false"
            @touchend="confirm=true"
            :width="319"
            :fontSize="32"
            :transprent="confirm"
            :height="112"
            :margin="[0]"
            :font-color="'#46299D'"
            text
            :label="confirmLabel"></tm-button>
        </div>
      </div>
    </div>
  </wd-popup>
</template>
<style scoped lang="scss">
.wrap1 {
      img {
        width: 381.59rpx;
        height: 280.14rpx;
      }
    }
</style>