kuangshan-project/src/views/zaoquan/yiqing/yiqing-fanninglist.vue

<template>
  <div class="page">
    <!-- 日期选择 -->
    <!-- <div class="time" v-if="List.length != 0">
      <div class="title">{{List[6].date.split("-")[0] + "年" + List[6].date.split("-")[1] + "月"}}</div>
      <div class="box">
        <div class="item" v-for="(item,index) in List" @click="change_day(item,index)" :key="index">
          <div class="text">周{{item.week.substring(item.week.length - 1)}}</div>
          <div class="num" :style="index==active?'backgroundColor:#00A1E6;':''">{{item.date.split("-")[2]}}</div>
        </div>
      </div>
    </div> -->
    <div class="time_box">
      <div class="icon" @click="icon_left()">
        <van-icon name="arrow-left" />
      </div>
      <div class="title">{{year}}年{{ ('0' + month).substr(-2) }}月</div>
      <div class="icon" @click="icon_right()">
        <van-icon name="arrow" />
      </div>
    </div>

    <!-- 近期填写人员列表 -->
    <div class="content">
      <div class="title">
        <div class="name">姓名</div>
        <div class="full">工作单位</div>
        <div class="icon"></div>
      </div>
      <div class="list" v-if="List.length != 0">
        <div
          class="item"
          v-for="(item, index) in List"
          @click="go_detail(item.id)"
          :key="index"
        >
          <div class="name">{{ item.name }}</div>
          <div class="full">{{ item.work_unit }}</div>
          <div class="icon">
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: [],

      active: 6,

      title: "",
      year: 0,
      month: 0,
    };
  },
  mounted() {

    document.body.style.backgroundColor = "#00A1E9"; //背景色

    this.year = new Date().getFullYear();
    this.month = new Date().getMonth() + 1;

    console.log(this.year + '-' + ('0' + this.month).substr(-2))
    this.get_list(this.year,this.month);


  },
  methods: {
    get_list(year,month) {
      this.$http
        .post(
          "http://zaoquan.nxjiewei.com:8011/api/workbench/person_register/get_nearly_a_week_list",
          {
            year:year,
            month:month
          }
        )
        .then((res) => {
          console.log(res.data.data)
          this.List = res.data.data;
        });
    },

    change_day(item, index) {
      this.active = index;
      // console.log(item.date)
    },
    go_detail(id) {
      this.$router.push(`/zaoquan/yiqing/yiqing-fanningdetail?id=` + id);
    },

    icon_left() {
      //判断month
      if (this.month == 1) {
        this.year = this.year - 1;
        this.month = 12;
      } else {
        this.month = this.month - 1;
      }

      console.log(this.year,this.month)
      this.get_list(this.year,this.month)

    },
    icon_right() {
      //判断month
      if (this.month == 12) {
        this.year = this.year + 1;
        this.month = 1;
      } else {
        this.month = this.month + 1;
      }

      // console.log(this.year+'-'+('0' + this.month).substr(-2))
      console.log(this.year,this.month)
      this.get_list(this.year,this.month)


    },
  },
};
</script>

<style scoped>
.page {
  box-sizing: border-box;
  padding: 15px 5px;
}

.time {
  width: 350px;
  background-color: #fff;
  border-radius: 10px;

  box-sizing: border-box;
  padding: 20px 0;
}
.time .title {
  text-align: center;
  line-height: 40px;
  margin-bottom: 5px;
}
.time .box {
  display: flex;
  justify-content: space-around;
}
.time .box .item {
  text-align: center;
  font-size: 12px;
}
.time .box .item .text {
  color: #999999;
  margin-bottom: 5px;
}
.time .box .item .num {
  padding: 5px;
  border-radius: 50%;

  background-color: #cdeefd;
}

.content {
  margin-top: 15px;
  box-sizing: border-box;
  padding: 10px;

  width: 350px;
  background-color: #fff;
  border-radius: 10px;
}
.content .title {
  display: flex;
  justify-content: space-between;
  color: #009de7;
  font-size: 16px;
  text-align: center;

  padding: 10px 0;
  border-bottom: 1px solid #e7e7e7;
}
.content .title .name {
  width: 60px;
}
.content .title .full {
  width: 220px;
}
.content .title .icon {
  width: 20px;
}
.content .list {
}
.content .list .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #e7e7e7;
}

.content .list .item .name {
  width: 60px;
}
.content .list .item .full {
  width: 220px;
}
.content .list .item .icon {
  width: 20px;
  text-align: right;
  padding-top: 5px;
}

.time_box {
  display: flex;
  justify-content: space-around;
  align-items: center;

  box-sizing: border-box;
  padding: 0 10px;

  width: 350px;
  background-color: #fff;
  border-radius: 10px;

  height: 50px;
  background-color: #fff;
}
.time_box .icon {
  padding-top: 5px;
  width: 50px;
  text-align: center;
  color: #00a1e9;
}
.time_box .title {
}
</style>