dvcp_v2_wxcp_app/library/project/saas/AppPropagandaStatistics/calendarInfo.vue

<template>
  <div class="calendarInfo">
    <div class="calendar">
      <uni-calendar :insert="true" :selected="selected" :lunar="false" @bindDateChange="setDate" @change="change" @monthSwitch="changeMonth"/>
    </div>
    
    <div class="dailyMatters">
      <div v-if="list && list.length">
        <div>
          <div v-for="(item, index) in list.slice(0,3)" :key="index" :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}" class="daily_item">
            <div>{{ item.createTime.substring(10, 16) }}</div>
            <div>{{ item.taskTitle }}</div>
          </div>
        </div>
        <div v-show="show">
          <div v-for="(item, index) in list.slice(3, list.length)" :key="index" 
           :class="{'color1': index % 4 == 3,'color2': index % 4 == 0,'color3': index % 4 == 1,'color4': index % 4 == 2 }" class="daily_item">
            <div>{{ item.createTime.substring(10, 16) }}</div>
            <div>{{ item.taskTitle }}</div>
          </div>
        </div>
        <div class="readMore" v-show="!show && list.length > 3" @click="show = true">查看更多</div>
      </div>
      <AiEmpty description="暂无宣发" v-else></AiEmpty>
    </div>
  </div>
</template>

<script>
import  uniCalendar  from "./uni-calendar/uni-calendar.vue"
export default {
  data() {
    return {
      date: '',
      selected: [{date: ''}],
      list: [],
      show: false,
      calendarList: {},
      year: '',
      month: '',
      day: '',
      yyyyMM: '',
    }
  },
  components: {
    uniCalendar
  },
  created() {
    this.getNowDay()
    this.getData()
  },
  methods: {
    // 切换月
    changeMonth(e) {
      if(e.month<=9) {
        this.yyyyMM = e.year + '0' + e.month
        
      } else if(e.month > 9) {
        this.yyyyMM = e.year + e.month
      }
      this.month = e.month
      this.getData()
    },
    // 切换日
    change(val) {
      this.date = val.fulldate
      this.day = val.date
      this.getData()
    },

    setDate(v) {
      this.yyyyMM = v.detail.value.replace('-', '')
      this.getData()
    },

    getNowDay() {
      const date = new Date()
      this.year = date.getFullYear()
      this.month = date.getMonth() + 1
      this.day = date.getDate()
    },
    
    toGroup() {
      uni.navigateTo({url: './groupSendResident'})
    },
    getData() {
      this.$http.post(`/app/appmasssendingtask/statisticsCalendar`, null, {
        params: {
          yyyyMM: this.yyyyMM,
        },
      })
      .then((res) => {
        if (res?.data) {
          this.calendarList = res.data;
          let arr = Object.keys(res.data).map(key => (res.data[key]))
          this.list = arr[this.day - 1]?.taskList
          let calList = arr.filter(item=> (item.taskList && item.taskList.length > 0))
          this.selected = calList.map(item=> {
            if(item.day>=1 && item.day<=9) {
              if(this.month>=1 && this.month <=9) {
                return {
                  date: this.year + '-' + '0' + this.month + '-' + '0' + item.day
                }
              } else {
                return {
                  date: this.year + '-' + this.month + '-' + '0' + item.day
                }
              }
            } else if(item.day> 9) {
              if(this.month > 9) {
                return {
                  date: this.year + '-' + this.month + '-' + item.day
                }
              } else {
                return {
                  date: this.year + '-' + '0' + this.month + '-' + item.day
                }
              }
            }
          })
        }
      });
    },
  },
  onShow() {
    document.title = '宣发日历'
  },
}
</script>

<style lang="scss" scoped>
.calendarInfo {
  ::v-deep .uni-calendar-item__weeks-box-circle {
    top: 77%;
    right: 45%;
    border-radius: 12px;
  }
  ::v-deep .uni-calendar__header {
    height: 76px;
    justify-content: space-around;
    border-bottom-style: none;
  }
  ::v-deep .uni-calendar__weeks-day {
    border-bottom-style: none;
  }
  ::v-deep .uni-calendar__weeks-day-text,
  ::v-deep .uni-calendar__header-text,
  ::v-deep .uni-calendar-item__weeks-box-text {
    font-size: 28px;
  }
  ::v-deep .uni-calendar__header-btn {
    width: 16px;
    height: 16px;
    border-left-color: #5297FF;
    border-top-color: #5297FF;
  }
  ::v-deep .uni-calendar__backtoday {
    display: none
  }

  ::v-deep .calendarInfo .calendar {
    height: 750px !important;
  }

  .calendar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 750px;
  }

  .dailyMatters {
    padding: 750px 30px 30px 30px;
    box-sizing: border-box;
    .daily_item {
      background: #FFF;
      padding: 30px 20px 30px 50px;
      margin-bottom: 30px;
      border-radius: 0px 16px 16px 0px;
      
      div:first-child {
        color: #999999;
        margin-bottom: 20px;
      }
    }
    .color1 {
      border-left: 6px solid #3AA0FF;
    }
    .color2 {
      border-left: 6px solid #50CB74;
    }
    .color3 {
      border-left: 6px solid #9D73D9;
    }
    .color4 {
      border-left: 6px solid #435289;
    }

    .readMore {
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #3F8DF5;
    }
  }
}
</style>