kuangshan-project/src/views/ningdongyunying/yiqing/yiqing-bumen.vue

<template>
  <div class="page">
    <!-- <h1>未接种</h1> -->
    <div v-if="shows">
      <van-nav-bar
        title="未接种疫苗详情"
        left-arrow
        left-text="返回"
        @click-left="onClickLeft"
      />
    </div>
    <!-- <div class="contents">
      <div class="contents1">姓名</div>
      <div class="contents2">部门</div>
      <div class="contents3">原因</div>
    </div>
    <div class="contents_one" v-for="item in xinxi" :key="item">
      <div class="contents_one1">{{item.name}}</div>
      <div class="contents_one2">{{item.section_fullname}}</div>
      <div class="contents_one3">{{item. not_vaccination_cause}}</div>
    </div> -->
    <div class="contents_table">
      <h3>部门详情未接种疫苗</h3>
      <div class="list">
        <div class="item" style="border-bottom:2px solid #009FE8;">
            <div class="name">姓名</div>
            <div class="full">部门</div>
            <div class="reason">原因</div>
        </div>
        <div class="item"  v-for="item in xinxi" :key="item">
            <div class="name">{{item.name}}</div>
            <div class="full">{{item.section_fullname}}</div>
            <div class="reason">{{item. not_vaccination_cause}}</div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";
export default {
  data() {
    return {
      shows: false,
      xinxi:[],
      itsname:""
    };
  },
  mounted() {
    document.body.style.backgroundColor = "#fff"; //背景色
    this.token = getAllUrlParams(window.location.href).token;
    this.tabbar=Boolean(getAllUrlParams(window.location.href).tabbar) ;
    this.shows=this.tabbar
    this.names = getAllUrlParams(window.location.href).its;
    console.log(decodeURIComponent(this.names));
    this.itsname= getAllUrlParams(window.location.href).itsname;
    console.log(decodeURIComponent(this.itsname));
    this.getxinxi()
  },
  methods: {
    onClickLeft() {
      window.history.back();
    },
    getxinxi(){
        this.$http.post("http://ningdongyunying.nxjiewei.com:8011/api/workbench/epidemic_situation/get_not_vaccination_list",{
            section_fullname:decodeURIComponent(this.names),
            // vaccination_first:decodeURIComponent(this.itsname)
        }).then(res=>{
            console.log(res);
            this.xinxi=res.data.data.not_nat_section_list
        })
    }
  },
};
</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;
}
.page{
  min-height: 100%;
  background-color: #3399FF;

  box-sizing: border-box;
  padding: 20px 0;
}

.contents {
  display: flex;
  justify-content: left;
  width: 90%;
  margin: 12px auto;
  padding-bottom: 5px;
  font-size: 18px;
  border-bottom: 3px solid #39f;
}
.contents1 {
  width: 20%;
  color: #39f;
}
.contents2 {
  width: 30%;
  color: #39f;
}
.contents3 {
  width: 50%;
  color: #39f;
}
.contents_one {
  display: flex;
  justify-content: left;
  width: 90%;
  margin: 12px auto;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.contents_one1 {
  width: 20%;
}
.contents_one2 {
  width: 30%;
}
.contents_one3 {
  width: 50%;
}



.contents_table {
  width: 350px;
  min-height: 90vh;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;

  padding-bottom: 10px;
  margin-bottom: 30px;
}
.contents_table > h3 {
  text-align: center;
  padding-top: 10px;
  margin-bottom: 15px;
}


.list{
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 13px;
}
.list .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  box-sizing: border-box;
  padding: 5px 0;
}
.list .item:nth-child(2n){
  background-color: #f0f0f0;
}
.list .item .name{
  width: 80px;
  text-align: center;
}
.list .item .full{
  width: 80px;
  text-align: center;
}
.list .item .reason{
  width: 150px;
  text-align: center;
}


</style>