nsgk_mobile/src/views/notice/attestationDetail.vue

<template>
  <div class="app-container">
    <navBar title="鉴证详情" background="0" positionType="fixed"></navBar>
<!--    <p class="title">{{attestationDetail.projectName}}成交公示</p>-->
    <div class="block_box">
      <div class="block_tt"><i></i>鉴证详情信息</div>
      <van-cell title="鉴证书编号" :value="attestationDetail.jzsNumOne+'第'+attestationDetail.jzsNumTwo+'号'" />
      <van-cell title="项目名称" :value="attestationDetail.projectName" />
      <van-cell title="项目编号" :value="attestationDetail.projectCode" />

      <van-cell title="标的物情况" :value="attestationDetail.szCondition" />
      <van-cell title="转出面积（数量）" :value="attestationDetail.allCount+attestationDetail.allCountUnit" />
      <van-cell title="转出期限" :value="attestationDetail.outStartEndTime" />
      <van-cell title="确权机构" :value="attestationDetail.organization" />
      <van-cell title="权证编号" :value="attestationDetail.warrantCode" />
      <van-cell title="转出方式" :value="attestationDetail.rollout" />
      <van-cell title="交易方式" :value="attestationDetail.dealType" />
      <van-cell title="交易底价" :value="attestationDetail.price+attestationDetail.unit" />
      <van-cell title="成交金额" >
        <template slot="default"><p style="color: #c60000;">{{attestationDetail.dealMoneySum}}元</p></template>
      </van-cell>
      <van-cell title="合同签署日期" :value="attestationDetail.contractDate" />
      <van-cell title="合同编号" :value="attestationDetail.contractCode" />
      <van-cell title="附记" :value="attestationDetail.jzsRemark" />

    </div>
    <div class="block_box gnbg">
      <div class="block_tt"><i></i>转出方信息</div>
<!--      <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }"></van-divider>-->
      <van-cell title="转出方" :value="attestationDetail.outName" />
      <van-cell title="法定代表人" :value="attestationDetail.legalPerson" />
    </div>

    <div class="block_box orbg">
      <div class="block_tt"><i style="background-color: #FD683F"></i>受让方信息</div>
<!--      <van-divider :style="{ borderColor: '#FD683F', padding: '0 16px' }">受让方信息</van-divider>-->
      <van-cell title="受让方" :value="attestationDetail.inName" />
      <van-cell title="单位性质" :value="attestationDetail.companyNature" />
      <van-cell title="法定代表人" :value="attestationDetail.realname" />
    </div>

    <p class="btm_p">农村产权交易鉴证书</p>
    <p class="btm_p">{{attestationDetail.jzsSignDate}}</p>
<!--      <van-cell title=" " :value="'农村产权交易鉴证书'" />-->
<!--      <van-cell title=" " :value="attestationDetail.jzsSignDate" />-->
    <div style="height: 2vh;"></div>
  </div>
</template>

<script>
import { AttestationDetail } from "@/api/notice/index";
import navBar from "@/components/common/nav_bar.vue";
export default {
  name: "noticeDetail",
  components: { navBar },
  data() {
    return {
      attestationDetail:''
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    //成交公告集合
    getDetail(){
      console.log(this.$route.query.id)
      AttestationDetail(this.$route.query.id).then(response => {
        console.log(response)
        this.attestationDetail = response.data;
        //转出方式字典
        this.getDicts("rollout_type").then(res => {
          this.attestationDetail.rollout = this.selectDictLabel(res.data,response.data.rollout);
        });
        //交易方式字典
        this.getDicts("deal_type").then(res => {
          this.attestationDetail.dealType = this.selectDictLabel(res.data,response.data.dealType);
        });
        //面积单位字典
        this.getDicts("area_unit").then(res => {
          this.attestationDetail.allCountUnit = this.selectDictLabel(res.data,response.data.allCountUnit);
        });
        //成交价格字典
        this.getDicts("price_unit").then(res => {
          this.attestationDetail.unit = this.selectDictLabel(res.data,response.data.unit);
        });
        //公司性质字典
        this.getDicts("company_nature").then(res => {
          this.attestationDetail.companyNature = this.selectDictLabel(res.data,response.data.companyNature);
        });
      });
    },

  },
};
</script>

<style scoped lang="scss">
.app-container {
  background-color: #F4F8FB;
  height: calc(100vh - 0Px);
  overflow-y: scroll;
}
.btm_p{
  text-align: center;
  font-size: 16PX;
  color: #91979C;
  margin-top: 1vh;
}
.block_box{
  width: 94%;
  margin: 3vw auto;
  background: #ffffff;
  padding: 3vw 0;
  border-radius: 15Px;
  overflow: hidden;
  .block_tt{
    font-size: 20Px;
    display: flex;
    align-items: center;
    padding: 1.6vh 3vw;
    line-height: 1;
    font-weight: bold;
    i{
      display: block;
      width: 4Px;
      height: 16Px;
      background: #0CBEA6;
      margin-right: 5PX;
      border-radius: 5PX;
    }
    /*border-left: 3Px solid #0CBEA6;*/
  }
}
.gnbg{
  background: #ffffff linear-gradient(rgba(13,188,170,.28),#ffffff) no-repeat;
  background-size: 100% 50Px;
}
.orbg{
  background: #ffffff linear-gradient(rgba(253,104,63,.28),#ffffff) no-repeat;
  background-size: 100% 50Px;
}
.title{
  font-size: 0.5rem;
  margin-bottom: 0.5rem;
}
.van-row{
  margin-bottom: 0.4rem;
}
.van-col{
  font-size: 0.4rem;
  color: #666666;
}
</style>