HS_MZAP/src/views/activityMan/religiousConference/religiousConferenceInfo.vue

<template>
  <van-nav-bar
      fixed
      title="负责人会议上报情况"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      :style="{ 'background-color': selectColor }"
    />
    <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="info.placeSelectName"
            readonly
            label="会议地点:"
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="info.venueDetailed"
            center
            readonly
            label="详细地址:"
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="info.meetingTime"
            center
            readonly
            label="会议时间:"
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="info.siteName.name"
            center
            readonly
            label="会议场所:"
            input-align="right"
          />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="info.participants.name"
            center
            readonly
            label="参会人员:"
            input-align="right"
          />
        </van-cell-group>
        
        <p class="miniTitle">会议议题：</p>
          <div v-html="info.meetingTopics" class="showhtml"> </div>
      </div>
      <van-button
        v-if="info.assessment == 0"
        type="primary"
        class="btn-sub"
        @click="update"
        >审核</van-button
      >
    </div> 
  </template>
    
    <script>
  import { ref, onMounted } from "vue";
  import religiousConferenceService from "@/api/religiousConference/religiousConferenceService";  
  import UserManage from "@/api/user/UserManage";
  import { useRoute } from "vue-router";
  import $base from "@/utils/config";
  
  export default {
    setup() {
      // 导航栏颜色
      const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
      const onClickLeft = () => {
        history.back();
      };
      // 加载
      let isLoading = ref(true);
      // 活动信息
      const info = ref({    
        siteName:{id:"",name:""},
        participants:{id:"",name:""},
        meetingTopics:"",  
      });
      // 文件
      let fileList = ref([]);
      let route = useRoute();
      onMounted(() => {
        new religiousConferenceService().queryById(route.query.id).then((data) => {
          info.value = data;
     
          let ids = data.participants.id.split(",");
          info.value.participants.name = "";
          ids.forEach((item) => {
            new UserManage().queryById(item).then((data) => {
              info.value.participants.name += data.name + ",";
            });
          });

          isLoading.value = false;
        });
      });
      // 审核通过
      const update = () => {
        isLoading.value = true;
        info.value.assessment = 1;
        new religiousConferenceService().save(info.value).then((res) => {

          isLoading.value = false;
          window.xm.showToast({
             message:"审核成功!"
          })
          history.back();
        });
      };
      return {
        // 导航栏颜色
        selectColor,
        onClickLeft,
        info,
        fileList,
        isLoading,
        update,
      };
    },
  };
  </script>
    
    <style lang="less">
    .van-cell__value .van-field__right-icon .van-icon-location {
    color: #36a7f3 !important;
  }
  .btn-sub {
    width: 90%;
    border-radius: 20px;
    margin-left: 5%;
    margin-bottom: 40px;
    margin-top: -100px;
  }
  .van-loading {
    text-align: center;
    margin-top: 80px;
  }
  .van-popup--center {
    width: 98% !important;
  }
  .showhtml{
    width: 94%;
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 10px;
  }
  </style>