com.kasite.client.uniapp.patient/pages/st1/components/richTextModal/richTextModal.vue

<template>
  <!-- 底部弹窗样式 -->
  <view class="bottom_modal_mask" @click="handle('cancel')" v-if="modalData.styleType == 'bottom' && nodes.length > 0">
    <view class="bottom_modal" @click.stop="doNothing">
      <image class="bottom_modal_img" :src="iconUrl.cha" @click="handle('cancel')" v-if="modalData.showCancelBtn || false"></image>
      <view class="bottom_modal_tit" v-if="modalData.title">
        {{ modalData.title || "" }}
      </view>
      <view class="bottom_modal_con" :style="{ textAlign: modalData.contentAlign || 'justify' }">
        <rich-text :nodes="nodes" space="nbsp"></rich-text>
      </view>
      <view class="bottom_modal_btn_list">
        <view class="bottom_modal_btn_item cancelColor" :style="{ color: modalData.cancelColor || '#999' }" @click="handle('cancel')" v-if="modalData.showCancel">
          {{ modalData.cancelText || "取消" }}
        </view>
        <view class="bottom_modal_btn_item" @click="handle('confirm')" :style="{ color: modalData.confirmColor || 'var(--dominantColor)' }">
          {{ modalData.confirmText || "确定" }}
        </view>
      </view>
    </view>
  </view>
  <!-- 居中弹窗样式 -->
  <view class="modal_mask" @click="handle('cancel')" v-if="modalData.styleType != 'bottom' && nodes.length > 0">
    <view class="modal" @click.stop="doNothing">
      <image class="modal_img" :src="iconUrl.cha" @click="handle('cancel')" v-if="modalData.showCancelBtn || false"></image>
      <view class="modal_tit" v-if="modalData.title">
        {{ modalData.title || "" }}
      </view>

      <view class="modal_con" :style="{ textAlign: modalData.contentAlign || 'justify' }">
        <rich-text :nodes="nodes" space="nbsp"></rich-text>
      </view>
      <view class="modal_btn_list">
        <view class="modal_btn_item cancelColor" :style="{ color: modalData.cancelColor || '#999' }" @click="handle('cancel')" v-if="modalData.showCancel">
          {{ modalData.cancelText || "取消" }}
        </view>
        <view class="modal_btn_item" @click="handle('confirm')" :style="{ color: modalData.confirmColor || 'var(--dominantColor)' }">
          {{ modalData.confirmText || "确定" }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { common } from '@/utils';
import icon from '@/utils/icon';
import { ArticleDetail } from '@/pagesAdmin/article/service/article';

const props = withDefaults(defineProps<{
  modalData: {
    showModal?: boolean;
    title?: string;
    content?: string;
    node?: string; // 兼容旧逻辑
    contentAlign?: string;
    styleType?: string;
    articleId?: string;
    showCancel?: boolean;
    cancelText?: string;
    cancelColor?: string;
    confirmColor?: string;
    confirmText?: string;
    showCancelBtn?: boolean;
  }
}>(), {
  modalData: () => ({})
});

const emit = defineEmits(['cancel', 'confirm', 'noData']);

const nodes = ref('');
const iconUrl = ref(icon)

onMounted(async () => {
  let content = '';
  // 判断是否有传文章id 有传的是否查询传进来的文章id展示
  if (!props.modalData.node && props.modalData.articleId) {
    let queryData = {
      Status: 1,
      Id: props.modalData.articleId
    };
    try {
      let { resp } = await ArticleDetail(queryData);
      if (!common.isEmpty(resp) && resp[0].Content != "") {
        content = unescape(resp[0].Content);
      }
    } catch (e) {
      console.error(e);
    }
  } else if (props.modalData.content != '') {
    content = props.modalData.content || props.modalData.node || '';
  }
  
  if (common.isEmpty(content)) {
    emit('noData', {});
    return;
  }
  nodes.value = content;
});

const handle = (type: string) => {
  if (type == 'cancel') {
    emit('cancel', {});
  }
  if (type == 'confirm') {
    emit('confirm', {});
  }
};

const doNothing = () => {
  return;
};
</script>

<style lang="scss" scoped>
/* 底部弹窗样式 */
.bottom_modal_mask {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
}
.bottom_modal {
  width: 100%;
  min-height: 200upx;
  border-radius: 20upx 20upx 0 0;
  background-color: #fff;
  position: absolute;
  padding-top: 30upx;
  left: 0;
  bottom: 0;
}
.bottom_modal_tit {
  text-align: center;
  font-weight: 500;
  font-size: 34upx;
  overflow: hidden;
}
.bottom_modal_img {
  width: 35upx;
  height: 35upx;
  right: 20upx;
  top: 30upx;
  bottom: 0;
  position: absolute;
}
.bottom_modal_con {
  font-size: 30upx;
  margin: 30upx;
  line-height: 1.4em;
  max-height: 800upx;
  overflow: auto;
}
.bottom_modal_btn_list {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #eee;
}
.bottom_modal_btn_item {
  width: 100%;
  height: 100upx;
  text-align: center;
  line-height: 100upx;
  font-size: 34upx;
}
/* 居中弹窗样式 */
.modal_mask {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal {
  width: 600upx;
  min-height: 200upx;
  border-radius: 20upx;
  background-color: #fff;
  position: relative;
  padding-top: 30upx;
}
.modal_tit {
  text-align: center;
  font-weight: 500;
  font-size: 34upx;
  overflow: hidden;
}
.modal_img {
  width: 35upx;
  height: 35upx;
  right: 20upx;
  top: 30upx;
  bottom: 0;
  position: absolute;
}
.modal_con {
  font-size: 30upx;
  margin: 30upx;
  line-height: 1.4em;
  max-height: 800upx;
  overflow: auto;
}
.modal_btn_list {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #eee;
}
.modal_btn_item {
  width: 100%;
  height: 100upx;
  text-align: center;
  line-height: 100upx;
  font-size: 34upx;
}
.cancelColor {
  border-right: 1px solid #eee;
}
</style>