VAVABUY/components/simpleAgreementModal.vue

<template>
  <Popup ref="popup" isClose mode="center" class="pop">
    <template #content>
      <scroll-view class="content-scroll" scroll-y>
        <rich-text
          :nodes="formatContent(content)"
          class="rich-content"
        ></rich-text>
      </scroll-view>
    </template>
    <template #footer>
      <view class="submit_btn" @click="close">
        <trans _t="我知道了" />
      </view>
    </template>
  </Popup>
</template>

<script setup>
import { ref, watch } from "vue";
import Popup from "./popup.vue";
import { OTHER_ABOUT } from "@/api";

const props = defineProps({
  type: {
    type: String,
    default: "agree",
  },
});

const emit = defineEmits(["close"]);

const popup = ref(null);
const content = ref("");

const getDetail = async (type) => {
  try {
    const res = await OTHER_ABOUT(type);
    content.value = res.data;
    popup.value.open();
  } catch (error) {}
};

const formatContent = (html) => {
  if (!html) return "";
  return html
    .replace(/<script[^>]*?>.*?<\/script>/gi, "")
    .replace(/onerror\s*=/gi, "")
    .replace(/javascript:/gi, "");
};

// 打开弹窗
const open = (type) => {
  getDetail(type);
};

// 关闭弹窗
const close = () => {
  content.value = "";
  popup.value.close();
  emit("close");
};

defineExpose({ open, close });
</script>

<style lang="less" scoped>
@import url("@/style.less");

:deep(.u-popup__content) {
  width: 92%;
}

.submit_btn {
  height: 38px;
  padding: 16rpx 30rpx;
  background-color: var(--black);
  color: var(--light);
  .flex_center();
  border-radius: 16rpx;
  .size(24rpx);
}

.content-scroll {
  flex: 1;
  min-width: 80vw;
  // padding: 16px 20px;
  min-height: 30vh;
  max-height: 60vh;
  box-sizing: border-box;

  .rich-content {
    font-size: 15px;
    line-height: 1.6;
    color: #333;

    :deep(p) {
      margin-bottom: 12px;
    }

    :deep(a) {
      color: #409eff;
      text-decoration: none;
    }

    :deep(img) {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>