program/src/pages/game_record/index.vue

<template>
  <div id="game_record_container">
    <div class="padding">
      <!--    头部-->
      <div class="header text-center">
        <view class="padding">
          <text class="title">
            {{ total }}
          </text>
        </view>
        <view>
          <text class="sub-title">
            今日累计时长
          </text>
        </view>
      </div>

      <!--    小titles -->
      <div class="line_container">
        <div>
          <text class="title">设备使用记录</text>
          <van-divider customStyle="border:.1px solid;margin:0px;"/>
        </div>
      </div>

      <!--    列表模块-->
      <van-cell-group>
        <div class="record_list">
          <van-cell is-link :title="item.name"
                    :value="item.play_time"
                    v-for="(item,index) in items"
                    :key="index"
                    @click="to_report(item.game_record_id)"
          />

        </div>
      </van-cell-group>
    </div>

    <div style="height: 2rem;"></div>

    <!--    标签筛选-->
    <view class="cu-bar tabbar foot_nonShadow">
      <van-tabs v-if="show" :active="active_date" @change="change_date" class="filter_date" line-width=58px>
        <van-tab :title="date.name" v-for="(date,index) in dates" :key="index"></van-tab>
      </van-tabs>
    </view>
    
  </div>
</template>

<script>


import {gameList} from "../../requests/game";
import {formatSeconds} from "../../utils";

var $this
export default {
  name: "game_record_container",
  components: {},
  data() {
    return {
      show:false,
      items: [],
      total: 0,
      dates: [
        {
          id: 1,
          name: "全部"
        },
        {
          id: 2,
          name: "今日",
          start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime()).getTime() / 1000),
          end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime() / 1000)
        },
        {
          id: 3,
          name: "昨日",
          start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000).getTime() / 1000),
          end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 1000).getTime() / 1000)
        },
        {
          id: 4,
          name: "近七日",
          start_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 60 * 60 * 1000).getTime() / 1000),
          end_time: Math.round(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1).getTime() / 1000)
        }
      ],
      active_date: 0
    }
  },
  methods: {
    change_date($event) {
      let $item = $this.dates[$event.mp.detail.index]
      $this.get_game_list($item)
    },
    to_report($event) {

      mpvue.navigateTo({
        url: "/pages/report/main?id=" + $event
      })
    },
    get_game_list($params = {}) {
      gameList($params).then((res) => {
          let $res = res.data;
          $this.items = $res.data.list
          $this.items.forEach(($val, $index) => {
            if ($val['play_time']) {
              $val['play_time'] = formatSeconds($val['play_time'])
            } else {
              $val.splice($index, 1)
            }
          })
          $this.total = formatSeconds($res.data.total)
        },
        (err) => {
          console.log(err)
        }
      )
    }
  },
  mounted() {
    $this.get_game_list()
    
  },
  created() {
    $this = this
    $this.show = true
  }
}
</script>

<style scoped>
.header {
  width: 100%;
  height: 100px;
}

.header .title {
  font-size: 24px;
  font-weight: 400;
  color: #000000;
  line-height: 24px;
}

.header .sub-title {
  font-size: 12px;
  font-weight: 400;
  color: #6A6A6A;
  line-height: 24px;

}

.line_container .title {
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #6C6C6C;
  line-height: 24px;
}

.filter_date {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
}

.foot_nonShadow{
      position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 1024;
}

.record_list {
  height: 490px;
  overflow-y: scroll;
}
</style>