dvcp_v2_wxcp_app/src/apps/AppMeetingNotice/AppMeetingNotice.vue

<template>
  <div class="meeting">
    <template v-if="isList">
      <ai-top-fixed>
        <u-grid :col="3" :border="false">
          <u-grid-item v-for="(item,index) in grid" :key="index" :custom-style="{padding:'14px 0'}"
                       @click="handleClick(index)">
            <u-icon :name="item.icon" :size="64"></u-icon>
            <view class="label">{{item.label}}</view>
          </u-grid-item>
        </u-grid>
      </ai-top-fixed>
      <div class="body">
        <header>待参加的会议</header>
        <template v-if="meetingList.length">
          <div class="card" v-for="(item,index) in meetingList" :key="index" @click="detail(item)">
            <header>{{item.title}}</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>{{item.userName}}</span>
            </u-row>
            <u-gap height="20"></u-gap>
            <u-row class="info">
              <span>会议地点：</span>
              <span>{{item.address}}</span>
            </u-row>
            <div class="tag" :style="{background:'url(' + $cdn + tag(item.joinStatus) + ')'}"></div>
          </div>
        </template>
        <template v-else>
          <ai-empty/>
        </template>
      </div>
      <u-divider bg-color="#F5F5F5" v-if="meetingList.length">已经到底啦</u-divider>
      <ai-add @add="add"/>
    </template>
    <component v-else :is="comp" :params="params"></component>
  </div>
</template>

<script>
  import AiEmpty from "../../components/AiEmpty";
  import AiTopFixed from "../../components/AiTopFixed";
  import AiAdd from "../../components/AiAdd";
  import {addMeeting, belongToMe, detail, meetingList} from './components'

  export default {
    name: "AppMeetingNotice",
    appName: "会议通知",
    components: {AiEmpty, AiTopFixed, AiAdd, addMeeting, belongToMe, detail, meetingList},
    data() {
      return {
        meetingList: [],
        isList: true,
        comp: "",
        params: null,
      }
    },
    created() {
      this.$dict.load("meetingNoticeBefore", "meetingNoticeAfter", "meetStatus");
    },
    computed: {
      grid() {
        return [
          {
            icon: this.$cdn + "/common/iconlshy.png",
            label: "历史会议"
          },
          {
            icon: this.$cdn + "/common/iconwfqd.png",
            label: "我发起的"
          },
          {
            icon: this.$cdn + "/common/iconcgx.png",
            label: "草稿箱"
          }
        ]
      }
    },
    methods: {
      tag(status) {
        return {
          "0": "common/1wqr.png",
          "1": "common/1yqr.png",
          "2": "common/1yqj.png",
        }[status]
      },
      detail({id}) {
        this.comp = "detail";
        this.params = id;
        this.isList = false;
      },
      getData() {
        this.$http.post("/app/appmeetinginfo/list", null, {
          params: {
            listType: "1",
            meetingStatus: "1|2",
            size: 999
          }
        }).then(res => {
          if (res && res.data) {
            this.meetingList = res.data.records
          }
        })
      },
      handleClick(index) {
        this.params = index;
        this.isList = false;
        if (index == 0 || index == 2) {
          this.comp = "meetingList";
        } else if (index == 1) {
          this.comp = "belongToMe";
        }
      },
      add() {
        this.isList = false;
        this.comp = "addMeeting";
      }
    },

    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()))
      }
    },

    onShow() {
      this.getData()
    }
  }
</script>

<style lang="scss" scoped>
  .meeting {
    min-height: 100%;
    background: #F5F5F5;
    padding-bottom: 48px;

    .label {
      font-size: 28px;
      font-weight: 400;
      color: #333333;
      line-height: 48px;
      margin-top: 8px;
    }

    .body {
      box-sizing: border-box;
      padding: 40px 32px;

      & > header {
        font-size: 36px;
        font-weight: 600;
        color: #333333;
        margin-bottom: 38px;
      }

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

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

        & > header {
          font-size: 32px;
          font-weight: 600;
          color: #333333;
        }

        .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 {
          & > span:first-child {
            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;
        }
      }
    }

    ::v-deep .content {
      padding: 0 !important;
    }
  }
</style>