mbPortalSite/src/views/currentSystem/companyDynamics/companyDynamics.vue

<template>
  <div class="t-container">
    <!-- 停水公告 -->
    <div class="content">
      <div class="mian" v-if="ishowDetails">
        <Notice
          :records="result.records"
          title="停水公告"
          @toDetail="toDetail"
        ></Notice>
        <Pagination />
      </div>
      <div class="datails" v-else>
        <Details :detailObj="detailObj" @backFn="backFn"></Details>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index.vue";
import Notice from "@/components/notice/index.vue";
import Details from "./detail.vue";
import { getCurrentPage } from "@/api/currentpage";
export default {
  components: {
    Pagination,
    Notice,
    Details,
  },
  data() {
    return {
      // 是否展示详情页
      ishowDetails: true,
      // 返回的公告总数据
      result: {},
      // 详情页数据
      detailObj: {},
      /* 
        moduleType        0公司动态 1信息公开
        moduleFunction    0公司动态 1办事公开 2停水通知 3政策法规  
      */
      moduleType: 0,
      moduleFunction: 0,
    };
  },
  mounted() {
    // 请求停水列表数据与详情
    this.getCurrentPage();
  },
  methods: {
    // 获取数据
    getCurrentPage() {
      let data = { moduleType: this.moduleType, moduleFunction: this.moduleFunction };
      getCurrentPage(data).then((res) => {
        console.log("lz", res);
        if (res.code === 1) {
          this.result = res.result;
        }
      });
    },
    // 点击标题
    toDetail(proId) {
      this.ishowDetails = false;
      this.result.records.forEach((item) => {
        if (item.id === proId) {
          this.detailObj = item;
        }
      });
      // console.log(this.detailObj.content);
    },
    backFn() {
      this.ishowDetails = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.t-container {
  width: 100%;
}
ul {
  min-height: 50vh;
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    position: relative;
    margin: 20px 0 20px 10px;
    .l::before {
      content: "";
      position: absolute;
      left: -8px;
      top: 8px;
      width: 4px;
      height: 4px;
      background: #000;
      border-radius: 50%;
    }
  }
}
</style>