mteacher/src/views/liveActive/liveRoomList.vue

<template>
  <div class="live-room" style="min-height: 100vh; overflow: hidden">
    <!-- 78 -->
    <van-sticky
      offset-top="0"
      style="height: 44px; width: 100%"
      :style="{ height: params.liveState != '1' ? '78px' : '44px' }"
    >
      <van-tabs
        v-model="params.liveState"
        color="#01C1B5"
        line-width="16px"
        line-height="4px"
        class="van-hairline--bottom"
        @change="onSearch"
      >
        <van-tab name="1" title="直播中"></van-tab>
        <van-tab name="0" title="未开始"> </van-tab>
        <van-tab name="2" title="已结束"> </van-tab>
      </van-tabs>

      <div
        v-if="params.liveState != '1'"
        class="titleWrap week"
        style="height: 22px; line-height: 22px; padding: 13px 0.28rem"
        @click="showCalendar = true"
      >
        <!-- <div class="calendar">
          <div>{{ params.startTime }}~{{ params.endTime }}</div>
        </div> -->
        <van-row style="color: #01c1b5">
          <van-col span="10" class="flex">
            <img
              src="./images/icon_calendar.png"
              style="width: 14px; height: 14px; margin-right: 8px"
            />
            {{ params.startTime }}</van-col
          >
          <van-col span="4" class="flex" style="height: 22px">
            <span class="calendar-line"></span>
          </van-col>
          <van-col span="10" class="flex">
            <img
              src="./images/icon_calendar.png"
              style="width: 14px; height: 14px; margin-right: 8px"
            />
            {{ params.endTime }}
          </van-col>
        </van-row>
      </div>
    </van-sticky>

    <van-calendar
      v-model="showCalendar"
      :minDate="minDate"
      color="#01C1B5"
      :default-date="[
        dayjs(params.startTime).toDate(),
        dayjs(params.endTime).toDate(),
      ]"
      type="range"
      @confirm="onConfirm"
      :first-day-of-week="1"
      get-container="body"
    />

    <van-list
      v-model="loading"
      v-if="dataShow"
      style="margin-top: 0.15rem"
      key="ing"
      :finished="finished"
      finished-text=" "
      :immediate-check="false"
      @load="getList()"
    >
      <div v-for="(item, index) in dataList" :key="index">
        <live-room :item="item" />
      </div>
    </van-list>
    <m-empty v-else msg="暂无数据" />
  </div>
</template>

<script>
import liveRoom from "./model/liveRoom";
import MEmpty from "@/components/MEmpty";
import { queryPageStudent } from "./api";
import dayjs from "dayjs";

const startTime = dayjs().startOf("month").format("YYYY-MM-DD");
const endTime = dayjs().endOf("month").format("YYYY-MM-DD");
export default {
  components: { liveRoom, MEmpty },
  data() {
    const query = this.$route.query;
    const s = sessionStorage.getItem("liveRoomListTab");
    return {
      minDate: new Date(2000, 0, 1),
      showCalendar: false,
      dataList: [],
      dataLoading: false,
      dataShow: true,
      loading: false,
      finished: false,
      params: {
        endTime: endTime,
        startTime: startTime,
        page: 1,
        rows: 20,
        liveState: query.t == 0 ? "0" : s || "1",
      },
      hiddenProperty: null,
      pageStatusTimer: null, // 页面判断
    };
  },
  mounted() {
    this.hiddenProperty =
      "hidden" in document
        ? "hidden"
        : "webkitHidden" in document
        ? "webkitHidden"
        : "mozHidden" in document
        ? "mozHidden"
        : null;
    this.visibilityChangeEvent = this.hiddenProperty.replace(
      /hidden/i,
      "visibilitychange"
    );
    document.addEventListener(
      this.visibilityChangeEvent,
      this.onVisibilityChange
    );

    document.title = "直播间";
    this.getList();
  },
  methods: {
    dayjs,
    onVisibilityChange() {
      // console.log("onVisibilityChange", document[this.hiddenProperty]);
      // console.log("hidden", document.hidden);
      // console.log("visibilityState", document.visibilityState);
      if (!document[this.hiddenProperty]) {
        clearInterval(this.pageStatusTimer);
        this.onSearch();
      } else {
        this.pageStatusTimer = setInterval(() => {
          if (!document[this.hiddenProperty]) {
            clearInterval(this.pageStatusTimer);
            this.onSearch();
          }
        }, 1000);
      }
    },
    onConfirm(date) {
      let [start, end] = date;
      this.params.startTime = dayjs(start).format("YYYY-MM-DD");
      this.params.endTime = dayjs(end).format("YYYY-MM-DD");
      this.showCalendar = false;
      this.onSearch();
    },
    onSearch() {
      sessionStorage.setItem("liveRoomListTab", this.params.liveState);
      this.dateShow = true;
      this.loading = false;
      this.finished = false;
      this.params.page = 1;
      this.dataList = [];
      this.getList();
    },
    async getList() {
      try {
        if (this.dataLoading) return;
        this.dataLoading = true;
        const { startTime, endTime, ...more } = this.params;
        const tempParams = {
          ...more,
        };
        if (this.params.liveState != "1") {
          tempParams.startTime = startTime;
          tempParams.endTime = endTime;
        }
        const res = await queryPageStudent(tempParams);
        this.dataLoading = false;
        let result = res.data;
        this.loading = false;
        // 如果列表有值且，在请求在第一页时
        if (this.dataList.length > 0 && result.pageNo == 1) {
          return;
        }
        this.dataList.push(...(result.rows || []));
        if (this.params.page >= Math.ceil(result.total / this.params.rows)) {
          this.finished = true;
        }
        this.params.page++;
        if (this.dataList.length <= 0) {
          this.dataShow = false;
        } else {
          this.dataShow = true;
        }
      } catch {
        //
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.pageStatusTimer);
    document.removeEventListener(
      this.visibilityChangeEvent,
      this.onVisibilityChange
    );
  },
};
</script>

<style lang="less" scoped>
.live-room {
  /deep/.van-tabs__nav {
    background-color: #fff !important;
  }
  /deep/.van-tabs__wrap {
    // border-bottom: 1px solid #ccc;
  }
  /deep/.van-tab {
    font-size: 0.16rem;
  }
  /deep/.van-sticky {
    height: inherit !important;
    position: fixed;
    width: 100%;
  }
  /deep/.van-button--small {
    height: 28px;
  }
}
.titleWrap.week {
  background: #fff;
  justify-content: space-between;
  .calendar {
    font-size: 0.14rem;
    position: relative;
    &::after {
      right: -0.14rem;
    }
  }
  // div {
  //   display: inline-flex;
  //   flex-direction: row;
  //   align-items: center;
  //   font-size: 0.14rem;
  // }
  .active {
    color: #01c1b5;
  }
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar-line {
  display: inline-block;
  width: 25px;
  height: 2px;
  background: #d8d8d8;
}
.active.calendar::after {
  transform: rotate(-225deg) !important;
  margin-top: -2px;
}
.calendar::after {
  position: absolute;
  top: 50%;
  right: -4px;
  margin-top: -6px;
  border: 4px solid;
  border-top-color: transparent;
  border-top-style: solid;
  border-top-width: 4px;
  border-right-color: transparent;
  border-right-style: solid;
  border-right-width: 4px;
  border-bottom-color: #01c1b5;
  border-bottom-style: solid;
  border-bottom-width: 4px;
  border-left-color: #01c1b5;
  border-left-style: solid;
  border-left-width: 4px;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  border-color: transparent transparent #01c1b5 #01c1b5;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: #01c1b5;
  border-left-color: #01c1b5;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: "";
}
</style>