431 lines
15 KiB
Vue
431 lines
15 KiB
Vue
<template>
|
||
<div>
|
||
<div class="page">
|
||
<div class="topBox">
|
||
<div class="titleBox">
|
||
<div class="font">被征收人信息查询</div>
|
||
</div>
|
||
<div>
|
||
<div class="baseInfo">
|
||
<van-image :src="require('@/assets/img/renyuanliebiao.png')" class="baseImg" />
|
||
<span class="baseFont">被征收人姓名：</span>
|
||
<span class="baseFont">{{ data.userName }}</span>
|
||
</div>
|
||
<div class="baseInfo">
|
||
<van-image :src="require('@/assets/img/credentials_icon.png')" class="baseImg" />
|
||
<span class="baseFont">身份证号码：</span>
|
||
<span class="baseFont">{{ data.idCard }}</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="gridBg centerMagin">
|
||
<van-image :src="require('@/assets/img/scan.png')" class="gridImg" />
|
||
<van-image
|
||
:src="require('@/assets/img/evaluation .png')"
|
||
@click="gotoProject('pg')"
|
||
class="gridImg"
|
||
/>
|
||
<van-image
|
||
:src="require('@/assets/img/compensation.png')"
|
||
@click="gotoProject('xy')"
|
||
class="gridImg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="centerMagin">
|
||
<van-image :src="require('@/assets/img/government.png')" class="bigImg" />
|
||
</div>
|
||
<van-list>
|
||
<div :key="item.prjId" v-for="(item) in data.prjList">
|
||
<div class="centerMagin">
|
||
<div class="project">
|
||
<div>
|
||
<van-image :src="require('@/assets/img/project.png')" class="projectIcon" />
|
||
<span class="projectTitle">{{item.name}}</span>
|
||
</div>
|
||
<div class="projectRight">
|
||
<van-image :src="require('@/assets/img/menu_yhxy.png')" class="projectRightIcon" />
|
||
<span class="projectRightFont">{{ item.currentState }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="projectCenter centerMagin">
|
||
<div class="projectCenterBox">
|
||
<div class="projectCenterInfo">
|
||
<div class="projectCenterInfo">
|
||
<van-image
|
||
:src="require('@/assets/img/project_area.png')"
|
||
class="projectCenterImg"
|
||
/>
|
||
<span class="projectCenterFont">项目所在区域：</span>
|
||
<span class="projectCenterFont">{{ item.area }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="projectCenterInfo">
|
||
<div class="projectCenterInfo">
|
||
<van-image
|
||
:src="require('@/assets/img/project_dep.png')"
|
||
class="projectCenterImg"
|
||
/>
|
||
<span class="projectCenterFont">征收部门：</span>
|
||
<span class="projectCenterFont">{{ item.zsbm }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="projectCenterInfo">
|
||
<div class="projectCenterInfo">
|
||
<van-image
|
||
:src="require('@/assets/img/project_year.png')"
|
||
class="projectCenterImg"
|
||
/>
|
||
<span class="projectCenterFont">所属年份：</span>
|
||
<span class="projectCenterFont">{{ item.year }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="projectCenterInfo">
|
||
<div class="projectCenterInfo">
|
||
<van-image
|
||
:src="require('@/assets/img/project_no.png')"
|
||
class="projectCenterImg"
|
||
/>
|
||
<span class="projectCenterFont">征收决定号：</span>
|
||
<span class="projectCenterFont" style="color: #3883f1">{{ item.zsjdh }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="centerMagin">
|
||
<div class="assess">
|
||
<div>
|
||
<van-image :src="require('@/assets/img/assess_1.png')" class="assessIcon" />
|
||
<span class="assessTitle">分户评估结果</span>
|
||
</div>
|
||
<!-- <div>
|
||
<van-image :src="require('@/assets/img/skip.png')" class="assessRightIcon" round />
|
||
</div>-->
|
||
</div>
|
||
<van-list>
|
||
<div :key="assess.id" class="assessCenter1" v-for="(assess) in item.fhpgList">
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont">评估报告编号：</span>
|
||
<span class="projectCenterFont">
|
||
{{
|
||
assess.assessmentNo
|
||
}}
|
||
</span>
|
||
</div>
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont" style="width: 40%">被征收房屋地址：</span>
|
||
<span class="projectCenterFont protocolTitle">{{ assess.houseAddress }}</span>
|
||
</div>
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont">评估总金额：</span>
|
||
<span class="projectTitle" style="color: red">¥{{ assess.countValue }}</span>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
<div class="assess">
|
||
<div>
|
||
<van-image :src="require('@/assets/img/assess_2.png')" class="assessIcon" />
|
||
<span class="assessTitle">补偿协议</span>
|
||
</div>
|
||
<!-- <div>
|
||
<van-image :src="require('@/assets/img/skip.png')" class="assessRightIcon" round />
|
||
</div>-->
|
||
</div>
|
||
<van-list>
|
||
<div :key="protocol.id" class="assessCenter2" v-for="(protocol) in item.bcxyList">
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont">协议编号：</span>
|
||
<span class="projectCenterFont">{{ protocol.xyNo }}</span>
|
||
</div>
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont" style="width: 40%">被征收房屋地址：</span>
|
||
<span class="projectCenterFont protocolTitle">{{ protocol.houseAddress }}</span>
|
||
</div>
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont">补偿方式：</span>
|
||
<span class="projectCenterFont">{{ protocol.switchProductionWay }}</span>
|
||
</div>
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont">合计补偿资金：</span>
|
||
<span
|
||
class="projectTitle"
|
||
style="color: red"
|
||
>¥{{ protocol.summationShouldCompensateMoney }}</span>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
<div class="centerMagin">
|
||
<van-image :src="require('@/assets/img/expropriationPolicy.png')" class="bigImg" />
|
||
</div>
|
||
<div class="centerMagin">
|
||
<span class="projectTitle" style="color: #202020">征收政策</span>
|
||
<div class="assessBox" style="padding-left: 5px; padding-right: 5px">
|
||
<span class="font11" style="color: #2c2b2b">共{{ total }}条</span>
|
||
<!-- <div>
|
||
<span class="font11">查看全部</span>
|
||
<van-icon color="#1989fa" name="arrow" />
|
||
</div>-->
|
||
</div>
|
||
</div>
|
||
<div class="centerMagin" style="padding-bottom: 20px">
|
||
<div class="protocolBox">
|
||
<van-list :finished="finished" @load="onLoad" v-model="loading">
|
||
<div :key="item.id" class="protocolList" v-for="(item, i) in list">
|
||
<div class="protocolLine" v-if="i != list.length - 1">
|
||
<div class="font14 protocolTitle">{{ item.title }}</div>
|
||
<div class="assessBox" style="padding-left: 5px; padding-right: 5px">
|
||
<div>
|
||
<span class="font11">发布时间：</span>
|
||
<span class="font11">{{ item.publish_date }}</span>
|
||
</div>
|
||
<div>
|
||
<span class="font11">区域：</span>
|
||
<span class="font11">{{ item.area }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding-bottom: 10px" v-else>
|
||
<div class="font14 protocolTitle">{{ item.title }}</div>
|
||
<div class="assessBox" style="padding-left: 5px; padding-right: 5px">
|
||
<div>
|
||
<span class="font11">发布时间：</span>
|
||
<span class="font11">{{ item.publish_date }}</span>
|
||
</div>
|
||
<div>
|
||
<span class="font11">区域：</span>
|
||
<span class="font11">{{ item.area }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import './home.css';
|
||
import { apis } from '@/common/apis';
|
||
import { token } from '@/common/token';
|
||
import request from '@/common/util';
|
||
import { mgop } from '@aligov/jssdk-mgop';
|
||
|
||
export default {
|
||
name: 'home',
|
||
data() {
|
||
return {
|
||
// apidata: {
|
||
// success: true,
|
||
// code: 200,
|
||
// message: '请求成功',
|
||
// data: {
|
||
// prjList: [
|
||
// {
|
||
// prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
|
||
// area: '海曙区',
|
||
// zsbm: '宁波市海曙区房屋征收管理服务中心',
|
||
// year: 2021.0,
|
||
// zsjdh: '海政发[2021]513号',
|
||
// currentState: '项目报结',
|
||
// fhpgList: [
|
||
// {
|
||
// prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
|
||
// assessmentNo: '0513',
|
||
// houseAddress: '高桥镇',
|
||
// countValue: '137654.00',
|
||
// },
|
||
// ],
|
||
// bcxyList: [
|
||
// {
|
||
// prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
|
||
// xyNo: '海政发2021513-0513-1',
|
||
// houseAddress: '高桥镇',
|
||
// summationShouldCompensateMoney: '137654.00',
|
||
// },
|
||
// ],
|
||
// },
|
||
// ],
|
||
// idCard: '330203199904044544身份证号码',
|
||
// userName: '姓名',
|
||
// },
|
||
// extras: null,
|
||
// timestamp: 1631256680049,
|
||
// },
|
||
// user: {
|
||
// name: "加载中...",
|
||
// identityId: "加载中...",
|
||
// },
|
||
// project: {
|
||
// name: "加载中...",
|
||
// area: "加载中...",
|
||
// department: "加载中...",
|
||
// year: "加载中...",
|
||
// num: "加载中...",
|
||
// },
|
||
// assess: {
|
||
// num: "",
|
||
// address: "加载中...",
|
||
// amount: "加载中...",
|
||
// },
|
||
// retrievalProtocol: {
|
||
// num: "",
|
||
// address: "加载中...",
|
||
// compensation: "加载中...",
|
||
// amount: "0",
|
||
// },
|
||
data: {},
|
||
total: '8',
|
||
list: [
|
||
{
|
||
id: 11,
|
||
area: '全大市',
|
||
title: '宁波市住房和城乡建设委员会开展关于住房的政策',
|
||
publish_date: '2021年09月05日',
|
||
},
|
||
{
|
||
id: 22,
|
||
area: '全大市',
|
||
title: '宁波市住房和城乡建设委员会开展关于住房的政策',
|
||
publish_date: '2021年09月05日',
|
||
},
|
||
{
|
||
id: 33,
|
||
area: '全大市',
|
||
title: '宁波市住房和城乡建设委员会开展关于住房的政策',
|
||
publish_date: '2021年09月05日',
|
||
},
|
||
],
|
||
loading: false,
|
||
finished: true,
|
||
};
|
||
},
|
||
created() {
|
||
this.onInit();
|
||
},
|
||
methods: {
|
||
onLoad() {},
|
||
onInit() {
|
||
mgop({
|
||
api: 'mgop.kykj.houseexpropriat.getprjlist', // 必须
|
||
host: 'https://mapi.zjzwfw.gov.cn/',
|
||
dataType: 'JSON',
|
||
type: 'GET',
|
||
appKey: 'es4b8zmz+2001833218+dehllx', // 必须
|
||
onSuccess: (data) => {
|
||
console.log('data', data);
|
||
},
|
||
onFail: (err) => {
|
||
console.log(err, 'err');
|
||
},
|
||
});
|
||
let apidata = {
|
||
success: true,
|
||
code: 200,
|
||
message: '请求成功',
|
||
data: {
|
||
userName: '张三丰',
|
||
idCard: '341203199206303411',
|
||
prjList: [
|
||
{
|
||
prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
|
||
name: '项目名称',
|
||
area: '海曙区',
|
||
zsbm: '宁波市海曙区房屋征收管理服务中心',
|
||
year: 2021.0,
|
||
zsjdh: '海政发[2021]513号',
|
||
currentState: '项目报结',
|
||
fhpgList: [
|
||
{
|
||
prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
|
||
id: 'a400583e-ae93-444f-8a20-4c4731b0cc13',
|
||
assessmentNo: '0513',
|
||
houseAddress: '高桥镇',
|
||
countValue: '137654.00',
|
||
},
|
||
],
|
||
bcxyList: [
|
||
{
|
||
prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4',
|
||
id: 'bf21b302-8059-462d-985f-ce7452c4d5b4',
|
||
xyNo: '海政发2021513-0513-1',
|
||
houseAddress: '高桥镇',
|
||
switchProductionWay: '货币补偿',
|
||
summationShouldCompensateMoney: '137654.00',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
},
|
||
extras: null,
|
||
timestamp: 1631261808797,
|
||
};
|
||
if (apidata.code == 200) {
|
||
this.data = apidata.data;
|
||
}
|
||
// this.onLogin();
|
||
//获取当前数据
|
||
// apis.getprjdata({ ticket: this.$route.query.ticket }).then((prjdata) => {
|
||
// debugger;
|
||
// console.log(prjdata);
|
||
// this.user.name = prjdata.data.UserName;
|
||
// this.user.identityId = prjdata.data.IdCard;
|
||
// });
|
||
},
|
||
gotoProject(type) {
|
||
this.$router.push({ name: 'projectSelect', params: { type: type } });
|
||
},
|
||
onLogin() {
|
||
// this.loading = true;
|
||
let form = { account: 'zgbqc', password: '111qqqqq' };
|
||
apis
|
||
.login(form)
|
||
.finally(() => {
|
||
debugger;
|
||
// this.loading = false;
|
||
})
|
||
.then(({ result }) => {
|
||
token.value = result.token;
|
||
// this.$root.replace('/');
|
||
debugger;
|
||
this.onLoadUserInfo();
|
||
this.onLoadStatistic();
|
||
})
|
||
.catch((err) => {
|
||
debugger;
|
||
// this.$toast(err);
|
||
});
|
||
},
|
||
onLoadUserInfo() {
|
||
apis.account().then(({ result }) => {
|
||
for (let key in result) {
|
||
if (this.user.hasOwnProperty(key)) {
|
||
this.user[key] = result[key];
|
||
}
|
||
}
|
||
});
|
||
},
|
||
onLoadStatistic() {
|
||
apis.projectStatistics().then(({ result }) => {
|
||
this.statistics = result;
|
||
});
|
||
},
|
||
padStart(num, n) {
|
||
var tbl = [];
|
||
var len = n - num.toString().length;
|
||
if (len <= 0) return num;
|
||
if (!tbl[len]) tbl[len] = new Array(len + 1).join('0');
|
||
return tbl[len] + num;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|