HS_MZAP/src/views/activityMan/selfMeetingReport/selfMeetingInfo.vue

<template>
  <van-nav-bar
    fixed
    title="私设聚会点"
    left-text=""
    left-arrow
    @click-left="onClickLeft"
  />
  <van-loading size="16px" v-show="isLoading">加载中...</van-loading>
  <div class="main" v-show="!isLoading">
    <div class="banner">
      <img src="../../../../public/loginbg/banner.jpg" alt="" />
    </div>
    <div class="info">
      <p class="miniTitle">详细信息</p>
      <van-cell-group>
        <van-field
          v-model="inputForm.placeSelectName"
          center
          readonly
          label="地点:"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.placeDel"
          center
          label="详细地址:"
          readonly
          input-align="right"
          right-icon="location"
        />
      </van-cell-group>

      <van-cell-group>
        <van-field
          v-model="inputForm.frequency"
          center
          label="频次:"
          input-align="right"
          readonly
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.partyTime"
          center
          readonly
          label="时间:"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="inputForm.relatedPersons.name"
          center
          readonly
          label="相关人:"
          input-align="right"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field label="内容:" input-align="right">
          <template #input>
            <span v-show="inputForm.content == ''">无</span>
            <span
              v-show="inputForm.content != ''"
              style="color: #36a7f3"
              @click="open"
              >查看内容</span
            >
          </template>
        </van-field>
      </van-cell-group>
    </div>
    <van-button
      v-if="inputForm.assessment == 0"
      type="primary"
      class="btn-sub"
      @click="update"
      >审核</van-button
    >
  </div>
  <!-- 富文本编辑器 -->
  <van-popup v-model:show="showReport"
    >
    <!-- <wang-editor ref="contentEditor" v-model="inputForm.content" /> -->
    <div v-html="inputForm.content" class="showhtml"></div>
  </van-popup>
</template>
    
    <script>
import { ref, nextTick } from "vue";
import { useRoute } from "vue-router";
import PrivatePartyPointService from "@/api/privateparty/PrivatePartyPointService";
import UserManage from "@/api/user/UserManage";
// 富文本编辑器
import WangEditor from "@/components/editor/WangEditor";
export default {
  components: { WangEditor },
  setup() {
    const onClickLeft = () => {
      history.back();
    };
    // 加载
    let isLoading = ref(true);
    // 私设聚会点信息
    let inputForm = ref({
      id: "",
      place: "320900",
      placeSelectName: "盐城市",
      placeSelectType3: "320900",
      placeSelectType4: "",
      placeSelectType5: "",
      placeSelectType6: "",
      placeDel: "",
      frequency: "",
      partyTime: "",
      relatedPersons: {
        id: "",
        name: "",
      },
      content: "",
      state: "0",
      assessment: "0",
    });
    // 获取信息
    let route = useRoute();
    // 富文本
    let contentEditor = ref(null);
    const showReport = ref(false);
    new PrivatePartyPointService().queryById(route.query.id).then((data) => {
      inputForm.value = data;
      let ids = data.relatedPersons.id.split(",");
      inputForm.value.relatedPersons.name = "";
      ids.forEach((item) => {
        new UserManage().queryById(item).then((data) => {
          inputForm.value.relatedPersons.name += data.name + ",";
        });
      });
      isLoading.value = false;
    });
    // 打开富文本
    const open = () => {
      showReport.value = true;
      nextTick(() => {
        if (contentEditor.value != null) {
          contentEditor.value.init(inputForm.value.content);
        }
      });
    };
    // 审核通过
    const update = () => {
      xm.showConfirm({
        title: "审核",
        message: "确定审核所选项吗?",
      }).then((result) => {
        if (result == "ok") {
          inputForm.value.assessment = 1;
          new PrivatePartyPointService().save(inputForm.value).then((res) => {
            if (res.status == 200 || res.statusText == "OK") {
              xm.showToast({
                message: "已审核",
              });
            }
            onClickLeft();
          });
        }
      });
    };
    return {
      onClickLeft,
      inputForm,
      isLoading,
      update,
      contentEditor,
      showReport,
      open,
    };
  },
};
</script>
    
<style lang="less">
.btn-sub {
  width: 90%;
  border-radius: 20px;
  margin-left: 5%;
  margin-bottom: 40px;
}
.van-popup--center {
  width: 98% !important;
  border-radius: 10px;
  height: 70vh;
  overflow: auto;
}
.showhtml {
  width: 94%;
  padding: 10px;
}
</style>