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="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[active].data" @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,

    };
  },
  mounted() {
    this.get_list()

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

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

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

  },
};
</script>

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

.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;
}
</style>