dy-admin-manager/src/views/littleArtistCamp/models/artistClock.vue

<template>
  <el-dialog
    width="500px"
    :title="activeRow.username || ''"
    :visible.sync="lookVisible"
    :before-close="onClose"
  >
    <div class="days-list">
      <div
        class="days-block"
        v-for="(item, index) in trainingList"
        :key="index"
      >
        <div
          class="days-item"
          :class="[
            item.isFinish == 0 ? 'close' : '',
            item.isFinish == 1 ? 'check' : '',
          ]"
        >
          <div v-if="item.isFinish > -1" style="font-size: 12px">打卡{{ item.singleDayTrainingDuration }}分钟</div>
          <img
            v-if="item.isFinish == 0"
            class="clock-img"
            src="../images/icon_close.png"
            alt=""
          />
          <img
            v-if="item.isFinish == 1"
            class="clock-img"
            src="../images/icon_check.png"
            alt=""
          />
          <img
            v-if="item.isFinish == -1"
            class="clock-img"
            src="../images/icon_check_disabled.png"
            alt=""
          />
          <p class="date">{{ item.trainingDate  }}</p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getUserTrainingTime } from "../api";
import dayjs from "dayjs";
export default {
  data() {
    return {
      lookVisible: false,
      activeRow: { username: null },
      trainingList: [],
    };
  },
  methods: {
    async openDioag(row) {
      this.activeRow = row;
      try {
        const res = await getUserTrainingTime({ userId: row.id, campId: row.campId });
        this.trainingList = res.data;
        this.trainingList.forEach((item) => {
          item.trainingDate = dayjs(item.trainingDate).format("M月D日");
          item.singleDayTrainingDuration = Math.floor(item.playTime / 60)
        });
      } catch (e) {
        console.log(e);
      }
      this.lookVisible = true;
    },
    onClose() {
      this.lookVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.flex-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
// .artistClock {
//   background: url("../images/clock_bg.png") no-repeat center top #f8f9fc;

.days-list {
  display: flex;
  flex-wrap: wrap;
}
.days-block {
  width: 20%;
  text-align: center;
  margin-top: 10px;
}
.days-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  padding: 10px 0;
  width: 94%;
  height: 100px;
  background: linear-gradient(180deg, #f0f0f0 0%, #d3d3d3 100%);
  box-shadow: 0px 6px 4px 0px rgba(125, 125, 125, 0.14);
  border-radius: 0.06rem;
  p {
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    margin-top: 5px;
  }
  .clock-img {
    width: 29px;
    height: 29px;
    margin-top: 5px;
    margin-bottom: 3px;
  }
}
.close {
  background: linear-gradient(180deg, #ffccbb 0%, #ff9d8b 100%);
  box-shadow: 0px 6px 4px 0px rgba(255, 160, 139, 0.29);
}
.check {
  background: linear-gradient(180deg, #a1ee99 0%, #b9de66 100%);
  box-shadow: 0px 6px 4px 0px rgba(83, 160, 75, 0.14);
}
</style>