zhangzl
/
nsgk_mobile


			
							<template>
  <div>
    <van-nav-bar
      left-arrow
      title="证书查看"
      fixed
      placeholder
      @click-left="$router.back()"
    >
    </van-nav-bar>


    <van-tabs color="#1D6FE9" :lazy-render="false" v-model="activeName" swipeable animated sticky title-active-color="#1D6FE9">
      <van-tab title="规划许可证" key="0">
        <div class="planningPermit-wrap wrap-root">
          <div class="planningPermit-first">
            <div class="permit-main section">
              <div class="details_first_main part">
                <div class="details_first_title title">中华人民共和国</div>
                <div class="details_first_title title">乡村建设规划许可证</div>
                <div class="details_first_page no-label">乡字第 <i class="no">{{this.licenseForm.licensePermit.licenseKey}}</i> 号</div>
                <div class="details_first_cont content">根据《中华人民共和国土地管理法》《中华人民共和国城乡规划法》和国家有关规定，经审核，本建设工程符合国土空间规划和用途管制要求，颁发此证。</div>
                <div class="licence_first_jg label" style="padding-top: 3.5rem;">填发机关:&nbsp;&nbsp;&nbsp;{{this.licenseForm.licensePermit.issuingAuthority}}</div>
                <div class="licence_first_time label">日 期:&nbsp;&nbsp;&nbsp;{{this.licenseForm.licensePermit.issueDate}}</div>
              </div>
            </div>

            <div class="details_page section">
              <div class="details_page_main part">
                <table>
                  <tr>
                    <td style="width: 2.6rem;">建设单位(个人)</td> <td >{{this.licenseForm.licensePermit.constructionUnit}}</td>
                  </tr>
                  <tr>
                    <td>建设项目名称</td> <td>{{this.licenseForm.licensePermit.constructionUnit}}</td>
                  </tr>
                  <tr>
                    <td>建设位置</td> <td>{{this.licenseForm.licensePermit.constructionLocation}}</td>
                  </tr>
                  <tr>
                    <td>建设规模</td> <td>{{ this.licenseForm.licensePermit.constructionScale }}</td>
                  </tr>
                  <!--                <tr>
                                    <td>{{ this.licenseForm.licenseRatification.west }}</td><td>{{ this.licenseForm.licenseRatification.north }}</td>
                                  </tr>-->
                  <tr>
                    <td>附图及附件名称</td>
                    <td>
                      <ul class="list">
                        <li v-for="file in attachmentList" class="list__item-content">
                          {{file.fileName}}
                        </li>
                      </ul>
                    </td>
                  </tr>
                </table>
                <div class="details_first_title title" style="text-align: left; padding-top: 0.2rem; padding-bottom: 0.2rem; font-size: 0.52rem; line-height: 0.8rem;">遵守事项</div>
                <ul class="list" style="padding: 0.1rem 0.1rem; font-size: 0.35rem; line-height: 0.6rem;">
                  <li>一、 本证是经自然资源主管部门依法审核，在乡、村庄规划区内有关建设工程符合国土空间规划和用途管制要求的法律凭证。</li>
                  <li>二、 依法应当取得本证，但未取得本证或违反本证规定的，均属违法行为。</li>
                  <li>三、 未经发证机关审核同意，本证的各项规定不得随意变更。</li>
                  <li>四、 自然资源主管部门依法有权查验本证，建设单位（个人）有责任提交查验。</li>
                  <li>五、 本证所需附图及附件由发证机关依法确定，与本证具有同等法律效力。</li>
                </ul>
              </div>
            </div>
          </div>

          <div class="planningPermit-two" style="display: block; overflow: hidden;">
            <div class="details_page">
              <table>
                <tr>
                  <td style="width: 1rem; height: 12rem;">宅<br />基<br />地<br />坐<br />落<br />平<br />面<br />位<br />置<br />图</td>
                  <td>
                    <RawImageCarousel :images="locationPlanList" url-label="url" name-label="fileName" style="width: 100%; height: 100%;" v-if="locationPlanList.length > 0"></RawImageCarousel>
                  </td>
                </tr>
                <tr>
                  <td>备注</td>
                  <td>图中需载明宅基地的具体位置、长宽、四至，并标明与永久性参照物的具体距离。</td>
                </tr>
              </table>
              <ul class="list" style="padding: 0.6rem 0.1rem 0.1rem; width: 92%; margin:0 auto;">
                <li>填写说明：</li>
                <li>1.编号规则:编号数字共16位，前6位数字按照《中华人民共和国行政区划代码》（详见民政部网站www.mca.gov.cn）执行；7-9位数字表示街道（地区）办事处、镇、乡（苏木），按GB/T10114的规定执行；10-13位数字代表证书发放年份；14-16位数字代表证书发放序号。</li>
                <li>2.批准书有效期:指按照本省（区、市）宅基地管理有关规定，宅基地申请批准后农户必须开工建设的时间。</li>
              </ul>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="宅基地批准书" key="1">
        <div class="licenceAround-wrap wrap-root">
          <div class="licence_first_page section" style="padding-top: 0.5rem;">
            <div class="details_first_title title">农村宅基地批准书</div>
            <div class="number-title no-sub-label" >
              农宅字 <i class="no">{{this.licenseForm.licenseRatification.approvalNumber}}</i>号
            </div>
            <div class="licence_first_main" style="border:1px solid #000000;  padding: 2rem 0.4rem;">
              <div class="content">
                根据《中华人民共和国土地管理法》规定，本项农村村民宅基地用地  业经有权机关批准，特发此书。
                请严格按照本批准书要求使用宅基地。
              </div>
              <div class="ft_jg label" style="padding-top: 2.5rem;">填发机关:&nbsp;&nbsp;&nbsp;{{this.licenseForm.licenseRatification.issuingAuthority}}</div>
              <div class="ft_time label">填发时间:&nbsp;&nbsp;&nbsp;{{this.licenseForm.licenseRatification.issueDate}}</div>
            </div>
          </div>

          <div class="licence_two_page section" style="margin-top: 0.5rem;">
            <div class="details_first_title title">农村宅基地批准书（存根）</div>
            <div class="number-title no-sub-label">
              农宅字 <i class="no">{{this.licenseForm.licenseRatification.approvalNumber}}</i> 号
            </div>
            <div class="licence_two_main">
              <table>
                <tr>
                  <td style="width: 2.6rem;">申请人姓名</td> <td colspan="8">{{this.licenseForm.licenseRatification.memberName}}</td>
                </tr>
                <tr>
                  <td>批准用地面积</td> <td colspan="8">{{this.licenseForm.licenseRatification.landArea}} 平方米</td>
                </tr>
                <tr>
                  <td>其中：房基占地</td> <td colspan="8">{{this.licenseForm.licenseRatification.fjzdmj}} 平方米</td>
                </tr>
                <tr>
                  <td>土地所有权人</td> <td colspan="8">{{this.licenseForm.licenseRatification.landOwner}}</td>
                </tr>
                <tr>
                  <td>土地用途</td> <td colspan="8">{{ formatDict(options.land_use, licenseForm.licenseRatification.landUse) }}</td>
                </tr>
                <tr>
                  <td>土地坐落<br/>(详见附图)</td> <td colspan="8">{{ this.licenseForm.licenseRatification.location }}</td>
                </tr>
                <tr>
                  <td rowspan="2">四  至</td>
                  <td style="width: 1.2rem;">东</td><td colspan="3">{{ this.licenseForm.licenseRatification.east }}</td>
                  <td style="width: 1.2rem;">南</td><td colspan="3">{{ this.licenseForm.licenseRatification.south }}</td>
                </tr>
                <tr>
                  <td style="width: 1.2rem;">西</td><td colspan="3">{{ this.licenseForm.licenseRatification.west }}</td>
                  <td style="width: 1.2rem;">北</td><td colspan="3">{{ this.licenseForm.licenseRatification.north }}</td>
                </tr>
                <tr>
                  <td>批准书有效期</td><td colspan="8">{{this.licenseForm.licenseRatification.startTime +'至'+this.licenseForm.licenseRatification.endTime }}</td>
                </tr>
                <tr style="height: 2rem;" >
                  <td colspan="9" style="text-align: left;">备注:</td>
                </tr>
              </table>
            </div>
          </div>

          <div class="licence_three_page section" style="margin-top: 0.5rem;">
            <div  class="number-title no-sub-label">
              农宅字 <i class="no">{{this.licenseForm.licenseRatification.approvalNumber}}</i> 号
            </div>
            <table>
              <tr>
                <td style="width: 2.6rem;">申请人姓名</td> <td colspan="8">{{this.licenseForm.licenseRatification.memberName}}</td>
              </tr>
              <tr>
                <td>批准用地面积</td> <td colspan="8">{{this.licenseForm.licenseRatification.landArea}} 平方米</td>
              </tr>
              <tr>
                <td>房基占地面积</td> <td colspan="8">{{this.licenseForm.licenseRatification.fjzdmj}} 平方米</td>
              </tr>
              <tr>
                <td>土地所有权人</td> <td colspan="8">{{this.licenseForm.licenseRatification.landOwner}}</td>
              </tr>
              <tr>
                <td>土地用途</td> <td colspan="8">{{ formatDict(options.land_use, licenseForm.licenseRatification.landUse) }} </td>
              </tr>
              <tr>
                <td>土地坐落<br/>(详见附图)</td> <td  colspan="8">{{ this.licenseForm.licenseRatification.location }}</td>
              </tr>
              <tr>
                <td rowspan="2">四  至</td>
                <td style="width: 1.2rem;">东</td><td colspan="3">{{ this.licenseForm.licenseRatification.east }}</td>
                <td style="width: 1.2rem;">南</td><td colspan="3">{{ this.licenseForm.licenseRatification.south }}</td>
              </tr>
              <tr>
                <td style="width: 1.2rem;">西</td><td colspan="3">{{ this.licenseForm.licenseRatification.west }}</td>
                <td style="width: 1.2rem;">北</td><td colspan="3">{{ this.licenseForm.licenseRatification.north }}</td>
              </tr>
              <tr>
                <td>批准书有效期</td><td colspan="8">{{this.licenseForm.licenseRatification.startTime +'至'+this.licenseForm.licenseRatification.endTime }}</td>
              </tr>
              <tr style="height: 2rem;">
                <td colspan="9" style="text-align: left;">备注:</td>
              </tr>
            </table>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <onlineHomeIndex :current="1"></onlineHomeIndex>
  </div>
</template>

<script>
import {selectAllLicense} from "@/api/onlineHome/homestead/houseProposer";
import onlineHomeIndex from "@/views/onlineHomeIndex";
import { attachmentFind } from "@/api/onlineHome/homestead/application";
import RawImageCarousel from "@/components/house/RawImageCarousel";

export default {
  components: {onlineHomeIndex, RawImageCarousel},
  name: "HouseLicenseDetail",
  data() {
    return {
      proposerId: null,
      licenseForm:{
        "licensePermit": {
          "searchValue": null,
          "createBy": "",
          "createTime": "",
          "updateBy": "",
          "updateTime": null,
          "proposerId": null,
          "applyProposerId": null,
          "year": "",
          "licenseKey": "",
          "issuingAuthority": "",
          "issueDate": "",
          "constructionUnit": "",
          "constructionItem": "",
          "constructionLocation": "",
          "constructionScale": "",
          "locationPlan": null
        },
        "licenseRatification": {
          "searchValue": null,
          "createBy": "",
          "createTime": '',
          "updateBy": "",
          "updateTime": null,
          "proposerId": '',
          "applyProposerId": '',
          "year": "2021",
          "approvalNumber": "",
          "issuingAuthority": "",
          "issueDate": "",
          "memberName": "",
          "landArea": 0,
          "landOwner": "",
          "landUse": "",
          "location": "",
          "east": "",
          "west": "",
          "south": "",
          "north": "",
          "startTime": "",
          "endTime": "",
          "remark": '',
          'fjzdmj': 0, // 房基占地面积
        },
      },
      activeName: 0,
      options: {
        land_use: [],
      },
      attachmentList: [],
      locationPlanList: [],
    }
  },
  created() {
    this.proposerId = this.$route.query.id;
    this.initOptions();
    this.getDetail();
  },
  methods: {
    getDetail() {
      selectAllLicense(this.proposerId).then((response) => {
        this.licenseForm = response.data;
        if(this.licenseForm.licensePermit.locationPlan)
        {
          const Host = this.$store.getters.baseRoutingUrl;
          let list = JSON.parse(this.licenseForm.licensePermit.locationPlan);
          this.locationPlanList = list.map((x) => {
            x.url = Host + x.fileUrl;
            return x;
          })
        }
        this.getAttachments();
      }).catch((e) => {
        this.$toast.fail('获取证书失败!');
      });
    },
    initOptions() {
      for(let k in this.options)
      {
        this.houseGetDicts(k).then((res) => {
          this.options[k] = res.data;
        });
      }
    },
    formatDict(dict, value) {
      return this.selectDictLabel(dict, value);
    },
    getAttachments() {
      this.attachmentList = [];
      let cond = {
        tableId: this.proposerId,
        tableName: 't_house_apply_proposer',
        fileType: 13,
      };
      attachmentFind(cond).then(resp => {
        this.attachmentList = resp.data;
      });
    },
  },
}
</script>

<style scoped lang="scss">
table {
  line-height: 2rem;
  text-align: center;
  border-collapse: collapse;
  width: 96%;
  margin: 0 auto;
}
td {
  line-height: 1rem;
  border: 1px solid #000000;
  border-collapse: collapse;
  font-size: 0.35rem;
}
.planningPermit-two{
  //margin-top: 30px;
}
.wrap-root {
  color: #606266;
  .title {
    font-size: 0.55rem;
    font-weight: bold;
    text-align: center;
    line-height: 0.8rem;
  }
  .no-label {
    text-align: right;
    font-size: 0.45rem;
    line-height: 0.6rem;
    padding: 0.5rem 0 0.5rem;
  }
  .no-sub-label {
    text-align: right;
    font-size: 0.4rem;
    line-height: 0.5rem;
    padding: 0.2rem 0.1rem 0.2rem;
  }
  .no {
    text-decoration: underline;
    font-style:oblique;
  }
  .content {
    font-size: 0.45rem;
    line-height: 0.8rem;
  }
  .label {
    font-size: 0.45rem;
    text-align: right;
    line-height: 0.8rem;
    padding-right: 0.3rem;
  }

  .section {
    width: 96%;
    margin: auto;
    .part {
      width: 100%;
      padding: 1.5rem 0.35rem;
      margin: 0.5rem 0rem;
      border:1px solid #000000;
    }
  }

  .list {
    list-style: none;
    text-align: start;
    font-size: 0.35rem;
    line-height: 0.6rem;

    .list__item-content {
      font-size: 0.4rem;
      line-height: 0.6rem;
      word-break: break-all;
      padding: 0.1rem 0.2rem;
      text-align: left;
    }
  }
}
</style>