dvcp_v2_wxcp_app/src/apps/AppMeetingNotice/meetingList.vue

<template>
  <div class="meeting-list">
    <div class="card" v-for="(item,index) in list" :key="index" @click="detail(item)">
      <header>
        <span>{{ item.title }}</span>
        <span>
          <span v-if="index==2">保存于</span>
          {{ item.createTime }}</span>
      </header>
      <u-row justify="between">
        <div class="time">
          <span>{{ item.startTime|format }}</span>
          <span>{{ item.startTime|formatDate(0) }}年{{ item.startTime|formatDate(1) }}月{{ item.startTime|formatDate(2) }}日 周{{ item.startTime|formatWeek }}</span>
        </div>
        <div class="arrow"></div>
        <div class="time">
          <span>{{ item.endTime|format }}</span>
          <span>{{ item.endTime|formatDate(0) }}年{{ item.endTime|formatDate(1) }}月{{ item.endTime|formatDate(2) }}日 周{{ item.endTime|formatWeek }}</span>
        </div>
      </u-row>
      <u-row class="info">
        <span>发起人员：</span>
        <span v-text="item.userName"/>
      </u-row>
      <u-gap height="20"></u-gap>
      <u-row class="info">
        <span>会议地点：</span>
        <span>{{ item.address }}</span>
      </u-row>
      <div class="tag" v-if="item.status!=0" :style="{background:'url(' + $cdn + tag(item.status) +')'}"></div>
    </div>
    <u-loadmore :status="status" v-if="list.length"/>
    <AiEmpty v-if="!list.length"></AiEmpty>

  </div>
</template>

<script>

export default {
  name: "meetingList",
  props: {
    params: {
      type: [String, Number, Object],
    }
  },
  data() {
    return {
      list: [],
      current: 1,
      index: null,
      status: "加载更多",
    }
  },

  onLoad(opt) {
    this.index = opt.index
    
    this.getData();
    uni.$on('updateList', () => {
      this.current = 1
      this.getData()
    })
  },
  onShow() {
    document.title = this.index == 0 ? "历史会议" : "草稿箱"
  },

  methods: {
    detail({id}) {
      let url
      if (this.index == 2) {
        url = "/apps/AppMeetingNotice/addMeeting?id=" + id
      } else {
        url = "/apps/AppMeetingNotice/detail?id=" + id
      }
      uni.navigateTo({url})
    },
    tag(status) {
      return {
        "1": 'common/1wks.png',
        "2": 'common/1jxz.png',
        "3": 'common/1yqx.png',
        "4": 'common/1yjs.png'
      }[status]
    },
    getData() {
      this.$http.post("/app/appmeetinginfo/list", null, {
        params: {
          listType: this.index == 0 ? "2" : '0',
          meetingStatus: this.index == 0 ? "4" : "0",
          size: 10,
          current: this.current,
        }
      }).then(res => {
        if (res && res.data) {
          if (this.current > 1 && this.current > res.data.pages) {
            this.status = "已经到底啦"
          }
          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
        }
      })
    },
  },

  onReachBottom() {
    this.current++;
    this.getData();
  },

  filters: {
    format(date) {
      return date.split(" ")[1].substr(0, 5)
    },
    formatDate(date, index) {
      return date.split(" ")[0].split("-")[index]
    },
    formatWeek(date) {
      return "日一二三四五六".charAt((new Date(date.split(" ")[0]).getDay()))
    }
  },
}
</script>

<style lang="scss" scoped>
.meeting-list {
  min-height: 100%;
  background-color: #F5F5F5;
  box-sizing: border-box;
  padding: 32px;

  .card {
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 32px;
    border-radius: 8px;
    margin-bottom: 32px;
    position: relative;

    &:last-child {
      margin-bottom: 0;
    }

    & > header {
      width: 95%;
      font-size: 32px;
      font-weight: 600;
      color: #333333;
      display: flex;
      flex-direction: column;

      & > span:last-child {
        font-size: 28px;
        font-weight: 400;
        color: #999999;
        margin-top: 10px;
      }
    }

    .time {
      display: flex;
      flex-direction: column;
      margin: 46px 0;

      & > span:first-child {
        font-size: 60px;
        font-weight: 600;
        color: #333333;
        line-height: 84px;
      }

      & > span:last-child {
        font-size: 22px;
        color: #333333;
      }
    }

    .arrow {
      width: 28px;
      height: 68px;
      overflow: hidden;
      position: relative;
      transform: rotate(180deg);

      &:before, &:after {
        content: "";
        width: 50px;
        height: 50px;
        position: absolute;
        transform: scaleY(1.3) translate(30%, -40px) rotate(45deg);
      }

      &:before {
        top: 59px;
        background-color: #CCCCCC;
      }

      &:after {
        left: 7px;
        top: 59px;
        background-color: #FFFFFF;
      }
    }

    .info {
      flex-wrap: nowrap;

      & > span:first-child {
        flex-shrink: 0;
        font-size: 30px;
        color: #999999;
      }

      & > span:last-child {
        font-size: 30px;
        color: #343D65;
      }
    }

    .tag {
      width: 112px;
      height: 112px;
      background-repeat: no-repeat !important;
      background-size: 100% 100% !important;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}
</style>