nsgk_mobile/src/views/lawEnforcement/scheme/schemeDetail.vue

<template>
  <div class="app-container">
    <van-nav-bar
      title="案件详情"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main_box">
      <van-cell>
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxfa.png" size="20"></van-icon>
          <span class="custom-title">方案公开<i class="bgBlue"></i></span>
        </template>
      </van-cell>
      <van-cell title="方案名称：" :label="schemeOption.schemeName" />
      <van-cell title="检查方式：" :value="schemeOption.checkMethod" />
      <van-cell title="检查部门：" :value="schemeOption.checkDepartment" />
      <van-cell title="检查时间：" :value="schemeOption.checkStartDate" />
      <van-cell title="检查类型：" :value="schemeOption.checkType" />
      <van-cell title="检查事项：" :label="schemeOption.checkList" />
      <van-cell title="方案描述：" :label="schemeOption.checkContent" />

    </div>

    <div class="main_box" style="margin-top: 10px;">
      <van-cell>
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_zxry.png" size="20"></van-icon>
          <span class="custom-title">执行人员<i class="bgBlue"></i></span>
        </template>
      </van-cell>
      <div class="peopleList">
        <van-row>
          <van-col :span="4">序号</van-col>
          <van-col :span="10">经办人姓名</van-col>
          <van-col :span="10">执法证号</van-col>
        </van-row>

        <van-row v-for="(item,index) in schemeOption.tenforceSchemeHandlerList">
          <van-col :span="4">{{index+1}}</van-col>
          <van-col :span="10">{{item.name}}</van-col>
          <van-col :span="10">{{item.enforceNum}}</van-col>
        </van-row>
      </div>
    </div>

    <div class="main_box2">
      <van-cell>
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_ajxx.png" size="20"></van-icon>
          <span class="custom-title">审批列表<i class="bgBlue"></i></span>
        </template>
      </van-cell>

      <van-row v-for="(item,index) in schemeOption.historicActivityList">
        <van-col :span="4">
          <p class="index">{{index+1}}</p>
          <div class="indexBorder" :class="{'indexCenter':index==0 ? false : true}">
            <p class="ssT" v-if="index>0"></p>
            <p class="yq"></p>
            <p class="ss" v-if="schemeOption.historicActivityList.length != index+1"></p>
          </div>
        </van-col>
        <van-col :span="20">
          <van-cell :title="item.activityName" center>
            <template #label>
              <p>{{item.time}}</p>
            </template>
            <template #default>
              <p style="color: #999999;">{{item.assigneeName == null ? '(空)' : item.assigneeName}}</p>
              <p style="color: #666666;">
                <span
                  class="bq"
                  :style="{
                    background:item.comment == '提交申请' ? 'rgba(29,111,233,0.2)' : item.comment == '同意' ? 'rgba(29,204,128,0.2)' :  item.comment == '自动结束' ? 'rgba(255,166,62,0.2)' : '',
                    color:item.comment == '提交申请' ? '#1D6FE9' : item.comment == '同意' ? '#1DCC80' :  item.comment == '自动结束' ? '#FFA63E' : ''
                  }"
                >
                  {{item.comment}}
                </span>
              </p>
            </template>
          </van-cell>
        </van-col>
      </van-row>

    </div>
  </div>
</template>
<script>
import { getTopDeptId , schemeDetail } from "@/api/lawEnforcement/index";
import law from "@/components/common/law_footer";
export default {
  name: "index",
  components: {
    law
  },
  data() {
    return {
      showBankType:false,
      showPayeeType:false,
      showPicker:false,
      form:{},

      bankType:'',
      payeeType:'',
      value:'',

      schemeOption:[]

    };
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail(){
      schemeDetail(this.$route.query.id).then(response => {
        this.schemeOption = response.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.app-container {
  padding: 0;
}
.van-uploader {
  padding: 15PX;
}
/deep/ .van-nav-bar--fixed{
  background: url("../../../../static/images/lawEnforcement/head_bg.png") 100%;
}
/deep/ .van-nav-bar .van-icon{
  color: #ffffff;
}
/deep/ .van-nav-bar__title{
  color: #ffffff;
}
/deep/ .van-tabs__nav--complete{
  padding: 0;
  border: none;
  height: auto;
}
/deep/ .van-tabs__nav--card .van-tab{
  border: none;
}
/deep/ .van-tabs--card>.van-tabs__wrap{
  height: auto;
  margin-top: 10PX;
}
/deep/ .van-tabs__nav--card .van-tab.van-tab--active{
  background: transparent;
  .van-tab__text{
    width: 56PX;
    height: 56PX;
    line-height: 56PX;
  }
  .finish,.ongoing,.notStarted{
    padding: 15PX 0;
  }
}
/deep/ .van-tab__text{
  display: block;
  width: 44PX;
  height: 44PX;
  background: #FFF;
  border-radius: 50%;
  border: 1px solid #C9C9C9;
  color: #C9C9C9;
  text-align: center;
  padding: 0;
  p{
    line-height: 1;
  }
}
.finish{
  border-radius: 50%;
  border: 1px solid #1DCC80;
  color: #1DCC80;
  padding: 10PX 0;
  height: 100%;
}
.ongoing{
  border-radius: 50%;
  border: 1px solid #1D6FE9;
  color: #1D6FE9;
  padding: 10PX 0;
  height: 100%;
}
.notStarted{
  padding: 10PX 0;
  height: 100%;
}
.typeBox{
  width: 44PX;
  height: 44PX;
  background: #ffffff;
  text-align: center;
  font-size: 14PX;
  border-radius: 50%;
  border: 1px solid #1DCC80;
  color: #1DCC80;
  margin: 0 auto;
  padding: 10PX 0px;
  line-height: 1;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.noActive{
  border: 1px solid #1D6FE9;
  color: #1D6FE9;
}
.doActive{
  border: 1px solid #C9C9C9;
  color: #C9C9C9;
}
.active{
  width: 56PX;
  height: 56PX;
  padding: 15PX 0px;
}
/deep/ .van-radio--horizontal{
  margin-left: 0.32rem;
  margin-right: 0;
}
.peopleList{
  padding-right: 3%;
  margin-top: 10PX;
  .van-row{
    margin-bottom: 10PX;
    .van-col{
      text-align: center;
      font-size: 14PX;
    }
    &:first-child{
      .van-col{
        color: #1D6FE9;
      }
    }
  }
}
.cf{
  padding: 0 3%;
  margin-top: 20PX;
  margin-bottom: 20PX;
  .van-row{
    background: #F0F3F5;
    .van-col{
      padding: 5PX 0;
      font-size: 12PX!important;
      text-align: center;
      p{
        color: #1D6FE9;
      }
    }
    &:first-child{
      background: transparent;
    }
  }
}
.main_title{
  font-size: 0.4rem;
  color: #1D6FE9;
  margin: 0.2rem 6%;
  margin-top: 0;
  position: relative;
}
.main_box{
  width: 96%;
  margin: 0 auto;
  border-radius: 6PX;
  box-shadow: 0PX 3PX 6PX 0PX rgba(0,0,0,0.16);
  overflow: hidden;
  background-color: #FFF;
  margin-top: 10PX;
  .van-icon{
    vertical-align: middle;
  }
  .custom-title{
    font-size: 17PX;
    color: #333333;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    margin-left: 5PX;
  }
  .tap{
    color: #1D6FE9;
  }
  .bgBlue{
    display: block;
    position: absolute;
    width: 17PX;
    height: 17PX;
    border-radius: 50%;
    background-color: rgba(29,111,233,0.26);
    top: -2PX;
    right: -8PX;
  }
}
.submitButton{
  width: 80%;
  margin: 0 auto;
  background-color: #1D6FE9;
}

.addFamily{
  position: absolute;
  top: -2px;
  right: 0;
  border-radius: 50%;
}
.main_box2{
  width: 96%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 6PX;
  overflow: hidden;
  margin-top: 10PX;
  margin-bottom: 20PX;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  .van-icon{
    vertical-align: middle;
  }
  .custom-title{
    font-size: 17PX;
    color: #333333;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    margin-left: 5PX;
  }
  .tap{
    color: #1D6FE9;
  }
  .bgBlue{
    display: block;
    position: absolute;
    width: 17PX;
    height: 17PX;
    border-radius: 50%;
    background-color: rgba(29,111,233,0.26);
    top: -2PX;
    right: -8PX;
  }
  .van-col{
    height: 76PX;
    position: relative;
  }
  .van-row:nth-child(2n){
    background: rgba(29,111,233,0.1);
  }
  /deep/ .van-cell{
    background: transparent;
  }
  .bq{
    display: inline-block;
    padding: 4PX 10PX;
    border-radius: 5PX;
  }
  .index{
    background: #1D6FE9;
    color: #ffffff;
    text-align: center;
    width: 20PX;
    height: 20PX;
    line-height: 20PX;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .indexCenter{
    top: 0!important;
  }
  .indexBorder{
    width: 10PX;
    position: absolute;
    right: 0;
    top: calc(50% - 5PX);
    .yq{
      height: 10PX;
      width: 10PX;
      background: #C9C9C9;
      border-radius: 50%;
    }
    .ss{
      height: 33PX;
      width: 2PX;
      background: #C9C9C9;
      position: relative;
      left: 4PX;
    }
    .ssT{
      height: 33PX;
      width: 2PX;
      background: #C9C9C9;
      position: relative;
      left: 4PX;
    }
  }
}
.splcTit{
  font-size: 17PX;
  text-align: center;
  margin-top: 25PX;
  margin-bottom: 5PX;
}
</style>