party-admin/inspur-ui/src/views/meeting_pad.vue

<template>
  <div>
    <div class="display-row nav">
      <div class="display-row">
        <el-image :src="logo" fit="fit" class="icon-32" />
        <div class="title" style="margin-left:4px">灯塔智慧党建-控制端</div>
      </div>
      <div class="logout" @click="logout">
        退出登录
      </div>
    </div>
    <div class="left-bar display-cloumn">
      <div v-for="item,index in menulist" @click="menuClick(index)">
        <div v-if="index==menuIndex" class="display-row memu_item" style="background: rgba(202, 0, 1, 0.102);">
          <svg-icon :icon-class="item.icon" class="menu-icon"
            style="margin-left: 12px;margin-right:4px;color: #CA0001;" />
          <div style="flex:auto;" class="menu_title_selected">
            {{item.name}}
          </div>
          <div style="width:2px;height: 35px;background-color: #CA0001;"></div>
        </div>
        <div v-else class="display-row memu_item">
          <svg-icon :icon-class="item.icon" class="menu-icon"
            style="margin-left: 12px;margin-right:4px;color: #545454;" />
          <div style="flex:auto;" class="menu_title">
            {{item.name}}
          </div>
        </div>
      </div>
    </div>
    <div class="content-class">
      <div class="display-row" style="flex-wrap: wrap;padding-top: 16px;padding-left: 16px;   height: 102%;overflow-y: auto;align-content: flex-start;" @scroll="handleScroll">
        <div v-for="item,index in meetingList" class="content-item display-cloumn"
          style="margin-right:16px;margin-bottom: 16px;padding: 12px;justify-content: space-between;">
          <div class="display-row">
            <div style="flex: auto;justify-content: space-between;" class="display-cloumn">
              <div class="item-title two-lines">
                {{ item.title }}
              </div>
              <div class="display-row" style="align-items: center;">
                <img :src="weizhiImg" style="width:13px;height:13px;margin-right: 4px;" />
                <div class="time-font ">{{ item.address }}</div>
              </div>
            </div>
            <div style="margin-left: 7px;">
              <!-- <el-image :src="logo" style="width:107px;height:60px;" /> -->
              <image-preview :src="item.picsPath+'_400.png'" :width="107" :height="60" :key="item.picsPath"
                style="border-radius: 0;" />
            </div>
          </div>
          <div class="display-row" style="align-items: center;">
            <div style="flex: auto;" class="time-font">
              {{item.beginTime}}
            </div>
            <div class="item-btn" @click="joinMeeting(item)">
              进入会议
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
  import {
    listMeeting
  } from "@/api/partywork/meeting";
  import {
    getList
  } from "@/api/system/table_list";

  import logoImg from '@/assets/logo/party.png';
  import locImg from '@/assets/images/weizhi.png';

  export default {
    name: "Login",
    data() {
      return {
        logo: logoImg,
        weizhiImg: locImg,
        loading: true,
        total: 0,
        menulist: [{
          icon: "zbdydh",
          name: "支部党员大会",
          path: ""
        }, {
          icon: "zbwyh",
          name: "支部委员会",
          path: ""
        }, {
          icon: "dxzh",
          name: "党小组会",
          path: ""
        }, {
          icon: "detail1",
          name: "党课",
          path: ""
        }],
        menuIndex: 0,
        meetingList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 15,
          beginTime: null,
          endTime: null,
          address: null,
          host: null,
          fromOrg: null,
          title: null,
          describe: null,
          meetingResult: null,
          fileList: null,
          picsPath: null,
          file: null,
          sort: null,
          attendanceStatus: null,
          isMobile: null,
          djOrgid: null,
          isPush: null,
          content: null,
          thumb: null,
          type: 1,
        }
      };
    },
    watch: {

    },
    created() {
      this.getList();
    },
    methods: {
      menuClick(index) {
        this.menuIndex = index;
        this.queryParams.type = index + 1;
        this.getList();
      },
      joinMeeting(row) {
        let meetingId = row.id;
        this.$router.push({
          path: "/party_work/meeting/info_pad",
          query: {
            meetingId: meetingId,
          }
        });

      },
      handleScroll(event) {
        // 获取div元素
        const { target } = event;

        // 计算滚动位置是否到达底部
        if (target.scrollHeight - target.scrollTop <= target.clientHeight) {
          this.loadMore();
        }
      },
      loadMore(){
        console.log("loadMore");
        if(this.total <= this.meetingList.length){
          console.log("不拉数据")
          return;
        }
        this.queryParams.pageNum = this.queryParams.pageNum+1;
        this.loading = true;
        listMeeting(this.queryParams).then(response => {
          console.log(response.rows);
          this.meetingList.push(...response.rows);
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询党员会议列表 */
      getList() {
        this.loading = true;
        this.queryParams.pageNum = 1;
        listMeeting(this.queryParams).then(response => {
          this.meetingList = response.rows;
          console.log(this.meetingList);
          this.total = response.total;
          this.loading = false;
        });
      },
      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            /*location.href = '/index';*/
            this.$router.push("/login_pad")
          })
        }).catch(() => {});
      },
    }
  };
</script>

<style lang="scss" scoped>
  .display-row {
    display: flex;
    flex-direction: row;
  }

  .content-class {
    position: fixed;
    left: 120px;
    right: 0;
    bottom: 0;
    top: 42px;
  }

  .two-lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }

  .left-bar {
    position: fixed;
    left: 0;
    top: 42px;
    bottom: 0;
    width: 120px;
    box-sizing: border-box;
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    border-color: #D8D8D8;
  }


  .menu_title {
    font-family: Source Han Sans;
    font-size: 12px;
    font-weight: normal;
    line-height: 12px;
    letter-spacing: 0px;
    color: #545454;

  }

  .memu_item {
    align-items: center;
    justify-content: center;
    height: 45px;
  }

  .menu_title_selected {
    font-family: 思源黑体;
    font-size: 12px;
    font-weight: bold;
    line-height: 12px;
    letter-spacing: 0px;

    color: #CA0001;

  }

  .time-font {
    font-size: 10px;
    font-weight: normal;
    line-height: 12px;
    letter-spacing: 0.01em;
    color: #86909C;
  }

  .nav {
    height: 42px;
    width: 100vw;
    background: #CA0001;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: fixed;
    left: 0;
    top: 0;
  }

  .icon-32 {
    width: 16px;
    height: 16px;
  }

  .display-cloumn {
    display: flex;
    flex-direction: column;
  }

  .display-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .menu-icon {
    width: 13px;
    height: 13px;
  }

  .icon_32 {}

  .logout {
    font-family: Source Han Sans;
    font-size: 12px;
    font-weight: normal;
    line-height: 12px;
    letter-spacing: 0px;
    color: #FFFFFF;
  }

  .title {
    font-family: Alimama DongFangDaKai;
    font-size: 16px;
    font-weight: normal;
    line-height: 16px;
    letter-spacing: -1px;

    // font-variation-settings: "opsz" auto;
    color: #FFE59E;
  }

  .content-item {
    width: calc((100% - 48px)/3);
    aspect-ratio: 259/128;
    //height: 128px;
    border-radius: 4px;
    background: #FFFFFF;
    border: 1px solid #E5E8EF;
  }

  .item-btn {
    width: 64px;
    height: 28px;
    line-height: 28px;
    border-radius: 2px;
    opacity: 1;
    font-family: 思源黑体;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    border: 1px solid #4E5969;
    color: #4E5969;
  }

  .item-title {
    font-family: 思源黑体;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0px;
    color: #1D2129;
  }
</style>