308 lines
11 KiB
Vue
308 lines
11 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">{{user.name}}</span>
|
||
</div>
|
||
<div class="baseInfo">
|
||
<van-image :src="require('@/assets/img/credentials_icon.png')" class="baseImg" />
|
||
<span class="baseFont">身份证号码：</span>
|
||
<span class="baseFont">{{user.identityId}}</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')" class="gridImg" />
|
||
<van-image :src="require('@/assets/img/compensation.png')" class="gridImg" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="centerMagin">
|
||
<van-image :src="require('@/assets/img/government.png')" class="bigImg" />
|
||
</div>
|
||
<div class="centerMagin">
|
||
<div class="project">
|
||
<div>
|
||
<van-image :src="require('@/assets/img/project.png')" class="projectIcon" />
|
||
<span class="projectTitle">{{project.name}}</span>
|
||
</div>
|
||
<div class="projectRight">
|
||
<van-image :src="require('@/assets/img/menu_yhxy.png')" class="projectRightIcon" />
|
||
<span class="projectRightFont">协议签订阶段</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="projectCenter centerMagin">
|
||
<div class="projectCenterInfo">
|
||
<div class="projectCenterInfo">
|
||
<van-image :src="require('@/assets/img/project_area.png')" class="projectCenterImg" />
|
||
<span class="projectCenterFont">项目所在区域：</span>
|
||
<span class="projectCenterFont">{{project.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">{{project.department}}</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">{{project.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">{{project.num}}</span>
|
||
</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>
|
||
<div class="assessCenter1">
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont">评估报告编号：</span>
|
||
<span class="projectCenterFont">{{assess.num}}</span>
|
||
</div>
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont" style="width: 40%;">被征收房屋地址：</span>
|
||
<span class="projectCenterFont protocolTitle">{{assess.address}}</span>
|
||
</div>
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont">评估总金额：</span>
|
||
<span class="projectTitle" style="color:red">¥{{assess.amount}}</span>
|
||
</div>
|
||
</div>
|
||
<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>
|
||
<div class="assessCenter2">
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont">协议编号：</span>
|
||
<span class="projectCenterFont">{{retrievalProtocol.num}}</span>
|
||
</div>
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont" style="width: 40%;">被征收房屋地址：</span>
|
||
<span class="projectCenterFont protocolTitle">{{retrievalProtocol.address}}</span>
|
||
</div>
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont">补偿方式：</span>
|
||
<span class="projectCenterFont">{{retrievalProtocol.compensation}}</span>
|
||
</div>
|
||
<div class="assessBox">
|
||
<span class="projectCenterFont">合计补偿资金：</span>
|
||
<span class="projectTitle" style="color:red">¥{{retrievalProtocol.amount}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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';
|
||
|
||
export default {
|
||
name: 'home',
|
||
data() {
|
||
return {
|
||
user: {
|
||
name: '胡伯钧',
|
||
identityId: '3302041982893743782',
|
||
},
|
||
project: {
|
||
name: '曙光一村地块',
|
||
area: '海曙区',
|
||
department: '宁海县房屋征收管理中心',
|
||
year: '2019',
|
||
num: '海政发【2021】28号',
|
||
},
|
||
assess: {
|
||
num: '044',
|
||
address: '宁波市江北区泗洲街16号404',
|
||
amount: '180234',
|
||
},
|
||
retrievalProtocol: {
|
||
num: '044',
|
||
address: '宁波市江北区泗洲街16号404',
|
||
compensation: '产权调换',
|
||
amount: '180234',
|
||
},
|
||
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,
|
||
// user: {
|
||
// avatar: '',
|
||
// name: '',
|
||
// role: '',
|
||
// account: '',
|
||
// mobile: '',
|
||
// deptName: '',
|
||
// },
|
||
|
||
// statistics: {
|
||
// new: 0, // 新建项目总数
|
||
// signing: 0, // 正在签约项目总数
|
||
// signed: 0, // 已签约项目总数
|
||
// },
|
||
};
|
||
},
|
||
created() {
|
||
this.onInit();
|
||
},
|
||
methods: {
|
||
onLoad() {
|
||
// 异步更新数据
|
||
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
|
||
// setTimeout(() => {
|
||
// for (let i = 0; i < 3; i++) {
|
||
// this.list.push(this.list.length + 1);
|
||
// }
|
||
// // 加载状态结束
|
||
// this.loading = false;
|
||
// // 数据全部加载完成
|
||
// if (this.list.length >= 3) {
|
||
// this.finished = true;
|
||
// }
|
||
// }, 1000);
|
||
},
|
||
onInit() {
|
||
// this.onLogin();
|
||
},
|
||
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;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|