WXL (wul)
2026-05-08 f9902f7a3b79d22bde9f199263ac36de26816470
src/views/outsideChainxjnew.vue
@@ -1,56 +1,49 @@
<template>
  <div class="questionnaire">
    <!-- <div class="CONTENT">
      <div class="title">景宁人民医院医护知识宣教</div>
      <div class="preview-left">
        <div v-html="richText"></div>
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-content">
        <i class="el-icon-loading loading-icon"></i>
        <div class="loading-text">宣教内容加载中,请稍候...</div>
      </div>
    </div>
    </div> -->
    <div class="CONTENT">
      <div class="preview-left">
        <div class="toptitle">
          <div class="title">
    <!-- 正常内容 -->
    <div v-else>
      <div class="CONTENT">
        <div class="preview-left">
          <div class="toptitle">
            <div class="title">
              {{ taskname ? taskname : "医护知识宣教" }}
            </div>
            <div style="font-size: 22px; margin-bottom: 20px; line-height: 1.5">
              {{
                kcb
                  ? kcb
                  : "亲爱的患者-家属,我们是医护人员,为了更好地了解您的康复情况,请您抽一点宝贵时间,观看这份宣教资讯。"
              }}
              <!-- 亲爱的患者/家属您好,为了更好的了解您出院后的康复情况,给您适当及时的健康指导,请您抽一点宝贵时间,完成这份出院随访问卷调查。 -->
            </div>
          </div>
          <el-divider></el-divider>
          <div v-html="richText"></div>
          <div
            style="
              text-align: center;
              padding-top: 50px;
              font-size: 24px;
              color: #175997;
              font-weight: 600;
              margin-bottom: 10px;
            "
          >
            {{
              taskname
                ? taskname
                : "医护知识宣教"
              jsy
                ? jsy
                : "生活上要劳逸结合,注意休息和营养,适当锻炼,戒烟限酒,保持心情舒畅,定期复诊。那本次宣教内容就到这里,祝您身体健康!"
            }}
          </div>
          <div style="font-size: 22px; margin-bottom: 20px; line-height: 1.5">
            {{
              kcb
                ? kcb
                : "亲爱的患者-家属,我们是医护人员,为了更好地了解您的康复情况,请您抽一点宝贵时间,观看这份宣教资讯。"
            }}
            <!-- 亲爱的患者/家属您好,为了更好的了解您出院后的康复情况,给您适当及时的健康指导,请您抽一点宝贵时间,完成这份出院随访问卷调查。 -->
          </div>
        </div>
        <el-divider></el-divider>
        <div v-html="richText"></div>
        <div
          style="
            text-align: center;
            padding-top: 50px;
            font-size: 24px;
            color: #175997;
            font-weight: 600;
            margin-bottom: 10px;
          "
        >
          {{
            jsy
              ? jsy
              : "生活上要劳逸结合,注意休息和营养,适当锻炼,戒烟限酒,保持心情舒畅,定期复诊。那本次宣教内容就到这里,祝您身体健康!"
          }}
        </div>
        <!-- <div style="font-size: 20px">
          {{
            jsy
              ? jsy
              : "生活上要劳逸结合,注意休息和营养,适当锻炼,戒烟限酒,保持心情舒畅,定期复诊。那本次宣教内容就到这里,祝您身体健康!"
          }}
        </div> -->
      </div>
    </div>
  </div>
@@ -87,6 +80,7 @@
      taskname: "",
      kcb: "",
      jsy: "",
      loading: true, // 新增:加载状态
    };
  },
@@ -96,74 +90,78 @@
  methods: {
    // 解析urlid
    geturlinfo() {
      // let url = window.location.href;
      this.loading = true; // 开始加载
      let url = this.$route.query.p;
      // let url = 'http://218.108.11.22:8093/sf/003';
      // let urlid = this.extractLastSegmentFromUrl(url);
      geturlinfo(url).then((res) => {
        if (res.code == 200) {
          this.getQuestionnaire(
            res.data.param1,
            res.data.param2,
            res.data.param3,
            res.data.param5
          );
        }
      });
      geturlinfo(url)
        .then((res) => {
          if (res.code == 200) {
            this.getQuestionnaire(
              res.data.param1,
              res.data.param2,
              res.data.param3,
              res.data.param5
            );
          } else {
            this.loading = false; // 获取URL信息失败时关闭加载
          }
        })
        .catch(() => {
          this.loading = false; // 出错时关闭加载
        });
    },
    //     extractLastSegmentFromUrl(url) {
    //     // 找到最后一个'/'的位置
    //     const lastSlashIndex = url.lastIndexOf('/');
    //     // 如果找到了'/',截取其后的所有字符
    //     if (lastSlashIndex !== -1) {
    //         return url.substring(lastSlashIndex + 1);
    //     }
    //     // 如果没有找到'/',返回空字符串
    //     return '';
    // },
    // 获取数据
    getQuestionnaire(param1, param2, param3) {
      this.taskid = decodeURIComponent(param1);
      this.patid = decodeURIComponent(param2);
      this.taskname = decodeURIComponent(param3);
      // // let taskid =
      // //   "OFp7tn/B6x7IzKJetvGWHdSWBj7msRlnlj6am9dyuHTH6sEt4uBbVCUXs5kcF/e4O2W6vqHf2Bz9K3/evbYDmw==";
      // // let patid =
      // //   "CVk0j8O86AeCqhV5WPsBBYDg9fec0wDoDlP9imYK4wDBNIkxywZzMJEGlPagOxnq6qr2WYZo0U8MUGWRGnq8ZA==";
      // this.taskid = this.decrypt(taskid);
      // this.patid = this.decrypt(patid);
      // // this.$modal.msgSuccess("用户id为" + this.patid);
      // // this.$modal.msgSuccess("任务id为" + this.taskid);
      // let taskids = this.encrypt(this.taskid);
      // let patids = this.encrypt(this.patid);
      getExternalfollowup({ param1: this.taskid, param2: this.patid }).then(
        (res) => {
      getExternalfollowup({ param1: this.taskid, param2: this.patid })
        .then((res) => {
          if (res.code == 200) {
            this.url = res.data.script[0].richText;
            this.jsy = res.data.jsy;
            this.kcb = res.data.kcb;
            // 临时获取数据
            // 获取富文本内容
            axios
              .get(this.url)
              .then((response) => {
                console.log(response.data, "数据"); // 输出获取到的文件内容
                console.log(response.data, "数据");
                this.richText = response.data;
                this.richText = this.addStyleToImages(this.richText);
                this.loading = false; // 数据加载完成
              })
              .catch((error) => {
                console.error("Failed to fetch file:", error);
                this.loading = false; // 获取内容失败时关闭加载
              });
          } else {
            this.loading = false; // API返回错误时关闭加载
          }
        }
      );
        })
        .catch(() => {
          this.loading = false; // API调用失败时关闭加载
        });
    },
    addStyleToImages(html) {
      return html.replace(
      if (!html) return html;
      // 1. 先修复路径
      let processedHtml = html.replace(
        /\/aifollowup\/aifollowup\//g,
        "/aifollowup/"
      );
      // 2. 再修复样式
      processedHtml = processedHtml.replace(
        /<img([^>]*)style=(['"])(?:(?!\2).)*\2([^>]*)>/g,
        '<img$1style="width:100%;height:auto;"$3>'
      );
      return processedHtml;
    },
    // 加密函数
    encrypt(txt) {
@@ -224,6 +222,7 @@
  min-height: 100vh;
  margin: 0;
  padding: 0;
  .CONTENT {
    padding-top: 15px;
    padding-bottom: 15px;
@@ -236,16 +235,15 @@
    }
  }
}
.preview-left {
  margin: 10px;
  margin-bottom: 60px;
  background-color: #fff;
  border-radius: 5px;
  //   margin: 20px;
  padding: 10px;
  padding-bottom: 100px;
  height: 100%;
  // background: #ffff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
@@ -257,4 +255,66 @@
    }
  }
}
/* 新增加载样式 */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.loading-content {
  text-align: center;
  padding: 40px 60px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e4e7ed;
}
.loading-icon {
  font-size: 40px;
  color: #3769f3;
  margin-bottom: 20px;
  animation: loading-rotate 1.5s linear infinite;
  display: block;
}
.loading-text {
  font-size: 18px;
  color: #606266;
  font-weight: 500;
  margin-top: 10px;
}
@keyframes loading-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 响应式设计 */
@media (max-width: 768px) {
  .loading-content {
    padding: 30px 40px;
  }
  .loading-icon {
    font-size: 32px;
  }
  .loading-text {
    font-size: 16px;
  }
}
</style>