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

<template>
  <div>
    <div v-if="shows">
      <van-nav-bar
        title="填报列表"
        left-arrow
        left-text="返回"
        @click-left="onClickLeft"
      />
    </div>
    <div class="contents" v-for="item in xinxi" :key="item.id">
      <div class="contents_headers_img">
        <img src="../../../assets/images/zaoquan/yiqing/日期.png" alt="" />
        <span>{{item.clock_in_time}}</span>
      </div>
      <!-- <div class="contents_one">
        <img src="../../../assets/images/zaoquan/yiqing/定位.png" alt="" />
        <p>宁夏自治区灵武市枣泉煤矿东大门</p>
      </div> -->
      <div class="contents_two">
        <div class="contents_three">
          <div class="contents_four">
            <span>姓名</span>
            <span class="contents_four_span">{{item.name}}</span>
          </div>
          <div class="contents_five">
            <span>是否接种疫苗</span>
            <span class="contents_five_span">{{item.vaccination}}</span>
          </div>
        </div>
        <div class="contents_three">
          <div class="contents_four">
            <span class="sizes">部门</span>
            <span class="contents_four_span">{{item.section}}</span>
          </div>
          <div class="contents_five">
            <span class="sizes">是否做过核酸检测</span>
            <span class="contents_five_span">{{item.nucleic_acid_test}}</span>
          </div>
        </div>
        <div class="contents_three">
          <div class="contents_four">
            <span class="sizes">体温</span>
            <span class="contents_four_span">{{item.temperature}}</span>
          </div>
        </div>
        <div v-if="showdiv == item.vaccination">
          <p class="contents_six">未接种疫苗原因</p>
          <p class="contents_serve">{{item.not_vaccination_cause}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getAllUrlParams} from '../../../plugins/url-encapsulation.js'
export default {
  data() {
    return {
      shows: true,
      showdiv:"未接种",
      xinxi:[],
      yimiao:"",
      hesuan:""
    };
  },
  methods: {
    getxinxi(){
      this.$http.post("http://zaoquan.nxjiewei.com:8011/api/workbench/epidemic_situation/clock_in_list",{
        staff_num:this.mobile
      }).then(res=>{
        // console.log(res);
        this.xinxi=res.data.data.data
      })
    },
    onClickLeft() {
      window.history.back();
    },
  },
  mounted() {
    document.body.style.backgroundColor = "#39f"; //背景色
    this.token = getAllUrlParams(window.location.href).token;
    this.mobile = getAllUrlParams(window.location.href).mobile;
    // console.log(this.mobile);
    // console.log(this.token);
    this.getxinxi()
  },
};
</script>

<style scoped>
>>> .van-nav-bar {
  background: #39f;
}
>>> .van-nav-bar__title {
  color: #fff;
}
>>> .van-nav-bar .van-icon {
  color: #fff;
}
>>> .van-nav-bar__text {
  color: #fff;
}
[class*="van-hairline"]:after {
  border: none;
}
.contents {
  width: 92%;
  margin: 0 auto 10px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid transparent;
}
.contents_one {
  width: 95%;
  margin: 5px auto;
  padding-bottom: 10px;
  display: flex;
  justify-content: left;
  border-bottom: 1px solid #f0f0f0;
}
.contents_one > img {
  width: 30px;
  height: 30px;
}
.contents_one > p {
  font-size: 14px;
  margin-left: 15px;
  margin-top: 5px;
  color: #00a1e9;
}
.contents_headers_img {
  width: 50%;
  height: 30px;
  margin-top: 10px;
  line-height: 22px;
  background: #39f;
  border-radius: 0px 5px 5px 0px;
  display: flex;
  justify-content: left;
}
.contents_headers_img > img {
  width: 18px;
  height: 18px;
  margin-left: 10px;
  margin-top: 6px;
}
.contents_headers_img > span {
  font-size: 14px;
  color: #fff;
  margin-top: 5px;
  margin-left: 5px;
}
.contents_two {
  width: 95%;
  margin: 5px auto;
  padding-bottom: 10px;
}
.contents_three {
  margin: 5px auto;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-wrap: wrap;
}
.contents_four {
  width: 50%;
}
.contents_five {
  width: 50%;
}
.contents_four_span {
  margin-left: 8px;
  color: #9b9b9b;
  font-size: 14px;
}
.contents_five_span {
  float: right;
  color: #9b9b9b;
  font-size: 14px;
}
.contents_six {
  margin: 5px auto;
  font-size: 14px;
}
.contents_serve {
  color: #9b9b9b;
  font-size: 14px;
}
.sizes{
  font-size: 14px;
}
</style>