HS_MZAP/src/views/activityMan/placeactivity/placeActivityInfo.vue

<template>
  <van-nav-bar
    fixed
    title="场所活动"
    left-text=""
    left-arrow
    @click-left="onClickLeft"
  />
  <van-loading size="16px" v-if="isLoading">加载中...</van-loading>
  <div class="main" v-if="!isLoading">
    <div class="banner">
      <h2>扎实提升“三力”</h2>
      <h2>深入推进“三化”</h2>
      <h2>坚持“三个思维”</h2>
    </div>
    <div class="info">
      <p>活动名称：{{ placeActivity.activityName }}</p>
      <p>场所名称：{{ placeActivity.siteName.name }}</p>
      <p>发起人：{{ placeActivity.reporter.name }}</p>
      <p>参会人数：{{ placeActivity.participantsNum }}</p>
      <p>已知人员名单：{{ placeActivity.knownList.name }}</p>
      <p>活动地点：{{ placeActivity.place }}</p>
      <p>详细地址：{{ placeActivity.placeDel }}</p>
      <p>活动时间：{{ placeActivity.activityTime }}</p>
      <p>安全预案：<span style="color: #6892ff">活动申请书</span></p>
      <p>主题内容：{{ placeActivity.subjectContent }}</p>
    </div>
    <van-button type="primary" class="btn-sub">审核</van-button>
  </div>
</template>
  
  <script>
import { ref } from "vue";
import placeActivityServer from "@/api/placeActivity/placeActivityServer";
import UserManage from "@/api/user/UserManage";
import { useRoute } from "vue-router";
export default {
  setup() {
    const onClickLeft = () => {
      history.back();
    };
    // 加载
    let isLoading = ref(true);
    // 活动信息
    const placeActivity = ref({
      id: "",
      activityName: "",
      siteName: {
        id: "",
        name: "",
      },
      activityTime: "",
      participantsNum: "",
      knownList: {
        id: "",
        name: "",
      },
      subjectContent: "",
      reporter: {
        id: "",
        name: "",
      },
      participation: "",
      place: "",
      placeDel: "",
      sourceFunds: "",
      safetyPlan: "",
      activityPerson: {
        id: "",
        name: "",
      },
      phone: "",
      state: "",
      assessment: "",
    });
    let route = useRoute();
    new placeActivityServer().queryById(route.query.id).then((data) => {
      placeActivity.value = data;
      let ids = data.knownList.id.split(",");
      placeActivity.value.knownList.name = "";
      ids.forEach((item) => {
        new UserManage().queryById(item).then((data) => {
          placeActivity.value.knownList.name += data.name + ",";
        });
      });
      isLoading.value = false;
    });
    return {
      onClickLeft,
      placeActivity,
      isLoading,
    };
  },
};
</script>
  
<style lang="less">
.main {
  background: #fff;
  position: relative;
  top: 40px;
}
.banner {
  background-color: #36a7f3;
  padding: 20px 50px 40px 50px;
  color: #fff;
  h2 {
    &:nth-child(1) {
      margin-top: 0px;
      text-align: left;
    }
    &:nth-child(2) {
      text-align: center;
    }
    &:nth-child(3) {
      text-align: right;
    }
  }
}
.info {
  position: relative;
  width: 86vw;
  // height: 120px;
  margin: 10px auto;
  padding: 10px;
  background: #fff;
  border-radius: 20px;
  top: -50px;
  font-size: 14px;
}
.btn-sub {
  width: 90%;
  border-radius: 20px;
  margin-left: 5%;
}
.van-loading {
  text-align: center;
  margin-top: 80px;
}
</style>