update:增加政策详情页面

This commit is contained in:
2021-09-15 09:34:19 +08:00
parent c293293aac
commit 3a77cda79a
3 changed files with 193 additions and 91 deletions

View File

@@ -51,6 +51,13 @@ export default new Router({
name: "evaluteResult", name: "evaluteResult",
component: () => component: () =>
import ("../views/pdf/evaluteResult") import ("../views/pdf/evaluteResult")
},
// 政策详情页面
{
path: "/policyInfo",
name: "policyInfo",
component: () =>
import ("../views/policyInfo/policyInfo")
} }
] ]
}); });

View File

@@ -7,19 +7,28 @@
</div> </div>
<div> <div>
<div class="baseInfo"> <div class="baseInfo">
<van-image :src="require('@/assets/img/renyuanliebiao.png')" class="baseImg" /> <van-image
:src="require('@/assets/img/renyuanliebiao.png')"
class="baseImg"
/>
<span class="baseFont">被征收人姓名</span> <span class="baseFont">被征收人姓名</span>
<span class="baseFont">{{ data.userName }}</span> <span class="baseFont">{{ data.userName }}</span>
</div> </div>
<div class="baseInfo"> <div class="baseInfo">
<van-image :src="require('@/assets/img/credentials_icon.png')" class="baseImg" /> <van-image
:src="require('@/assets/img/credentials_icon.png')"
class="baseImg"
/>
<span class="baseFont">身份证号码</span> <span class="baseFont">身份证号码</span>
<span class="baseFont">{{ data.idCard }}</span> <span class="baseFont">{{ data.idCard }}</span>
</div> </div>
</div> </div>
<div> <div>
<div class="gridBg centerMagin"> <div class="gridBg centerMagin">
<van-image :src="require('@/assets/img/scan.png')" class="gridImg" /> <van-image
:src="require('@/assets/img/scan.png')"
class="gridImg"
/>
<van-image <van-image
:src="require('@/assets/img/evaluation .png')" :src="require('@/assets/img/evaluation .png')"
@click="gotoProject('pg')" @click="gotoProject('pg')"
@@ -34,18 +43,27 @@
</div> </div>
</div> </div>
<div class="centerMagin"> <div class="centerMagin">
<van-image :src="require('@/assets/img/government.png')" class="bigImg" /> <van-image
:src="require('@/assets/img/government.png')"
class="bigImg"
/>
</div> </div>
<van-list> <van-list>
<div :key="item.prjId" v-for="(item) in data.prjList"> <div :key="item.prjId" v-for="item in data.prjList">
<div class="centerMagin"> <div class="centerMagin">
<div class="project"> <div class="project">
<div> <div>
<van-image :src="require('@/assets/img/project.png')" class="projectIcon" /> <van-image
<span class="projectTitle">{{item.name}}</span> :src="require('@/assets/img/project.png')"
class="projectIcon"
/>
<span class="projectTitle">{{ item.name }}</span>
</div> </div>
<div class="projectRight"> <div class="projectRight">
<van-image :src="require('@/assets/img/menu_yhxy.png')" class="projectRightIcon" /> <van-image
:src="require('@/assets/img/menu_yhxy.png')"
class="projectRightIcon"
/>
<span class="projectRightFont">{{ item.currentState }}</span> <span class="projectRightFont">{{ item.currentState }}</span>
</div> </div>
</div> </div>
@@ -89,14 +107,19 @@
class="projectCenterImg" class="projectCenterImg"
/> />
<span class="projectCenterFont">征收决定号</span> <span class="projectCenterFont">征收决定号</span>
<span class="projectCenterFont" style="color: #3883f1">{{ item.zsjdh }}</span> <span class="projectCenterFont" style="color: #3883f1">{{
item.zsjdh
}}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="centerMagin"> <div class="centerMagin">
<div class="assess"> <div class="assess">
<div> <div>
<van-image :src="require('@/assets/img/assess_1.png')" class="assessIcon" /> <van-image
:src="require('@/assets/img/assess_1.png')"
class="assessIcon"
/>
<span class="assessTitle">分户评估结果</span> <span class="assessTitle">分户评估结果</span>
</div> </div>
<!-- <div> <!-- <div>
@@ -104,28 +127,39 @@
</div>--> </div>-->
</div> </div>
<van-list> <van-list>
<div :key="assess.id" class="assessCenter1" v-for="(assess) in item.fhpgList"> <div
:key="assess.id"
class="assessCenter1"
v-for="assess in item.fhpgList"
>
<div class="assessBox"> <div class="assessBox">
<span class="projectCenterFont">评估报告编号</span> <span class="projectCenterFont">评估报告编号</span>
<span class="projectCenterFont"> <span class="projectCenterFont">
{{ {{ assess.assessmentNo }}
assess.assessmentNo
}}
</span> </span>
</div> </div>
<div class="assessBox"> <div class="assessBox">
<span class="projectCenterFont" style="width: 40%">被征收房屋地址</span> <span class="projectCenterFont" style="width: 40%"
<span class="projectCenterFont protocolTitle">{{ assess.houseAddress }}</span> >被征收房屋地址</span
>
<span class="projectCenterFont protocolTitle">{{
assess.houseAddress
}}</span>
</div> </div>
<div class="assessBox"> <div class="assessBox">
<span class="projectCenterFont">评估总金额</span> <span class="projectCenterFont">评估总金额</span>
<span class="projectTitle" style="color: red">¥{{ assess.countValue }}</span> <span class="projectTitle" style="color: red"
>¥{{ assess.countValue }}</span
>
</div> </div>
</div> </div>
</van-list> </van-list>
<div class="assess"> <div class="assess">
<div> <div>
<van-image :src="require('@/assets/img/assess_2.png')" class="assessIcon" /> <van-image
:src="require('@/assets/img/assess_2.png')"
class="assessIcon"
/>
<span class="assessTitle">补偿协议</span> <span class="assessTitle">补偿协议</span>
</div> </div>
<!-- <div> <!-- <div>
@@ -133,25 +167,34 @@
</div>--> </div>-->
</div> </div>
<van-list> <van-list>
<div :key="protocol.id" class="assessCenter2" v-for="(protocol) in item.bcxyList"> <div
:key="protocol.id"
class="assessCenter2"
v-for="protocol in item.bcxyList"
>
<div class="assessBox"> <div class="assessBox">
<span class="projectCenterFont">协议编号</span> <span class="projectCenterFont">协议编号</span>
<span class="projectCenterFont">{{ protocol.xyNo }}</span> <span class="projectCenterFont">{{ protocol.xyNo }}</span>
</div> </div>
<div class="assessBox"> <div class="assessBox">
<span class="projectCenterFont" style="width: 40%">被征收房屋地址</span> <span class="projectCenterFont" style="width: 40%"
<span class="projectCenterFont protocolTitle">{{ protocol.houseAddress }}</span> >被征收房屋地址</span
>
<span class="projectCenterFont protocolTitle">{{
protocol.houseAddress
}}</span>
</div> </div>
<div class="assessBox"> <div class="assessBox">
<span class="projectCenterFont">补偿方式</span> <span class="projectCenterFont">补偿方式</span>
<span class="projectCenterFont">{{ protocol.switchProductionWay }}</span> <span class="projectCenterFont">{{
protocol.switchProductionWay
}}</span>
</div> </div>
<div class="assessBox"> <div class="assessBox">
<span class="projectCenterFont">合计补偿资金</span> <span class="projectCenterFont">合计补偿资金</span>
<span <span class="projectTitle" style="color: red"
class="projectTitle" >¥{{ protocol.summationShouldCompensateMoney }}</span
style="color: red" >
>¥{{ protocol.summationShouldCompensateMoney }}</span>
</div> </div>
</div> </div>
</van-list> </van-list>
@@ -160,7 +203,10 @@
</div> </div>
</van-list> </van-list>
<div class="centerMagin"> <div class="centerMagin">
<van-image :src="require('@/assets/img/expropriationPolicy.png')" class="bigImg" /> <van-image
:src="require('@/assets/img/expropriationPolicy.png')"
class="bigImg"
/>
</div> </div>
<div class="centerMagin"> <div class="centerMagin">
<span class="projectTitle" style="color: #202020">征收政策</span> <span class="projectTitle" style="color: #202020">征收政策</span>
@@ -173,12 +219,15 @@
</div> </div>
</div> </div>
<div class="centerMagin" style="padding-bottom: 20px"> <div class="centerMagin" style="padding-bottom: 20px">
<div class="protocolBox"> <div class="protocolBox" @click="pageJump()">
<van-list :finished="finished" @load="onLoad" v-model="loading"> <van-list :finished="finished" @load="onLoad" v-model="loading">
<div :key="item.id" class="protocolList" v-for="(item, i) in list"> <div :key="item.id" class="protocolList" v-for="(item, i) in list">
<div class="protocolLine" v-if="i != list.length - 1"> <div class="protocolLine" v-if="i != list.length - 1">
<div class="font14 protocolTitle">{{ item.title }}</div> <div class="font14 protocolTitle">{{ item.title }}</div>
<div class="assessBox" style="padding-left: 5px; padding-right: 5px"> <div
class="assessBox"
style="padding-left: 5px; padding-right: 5px"
>
<div> <div>
<span class="font11">发布时间</span> <span class="font11">发布时间</span>
<span class="font11">{{ item.publish_date }}</span> <span class="font11">{{ item.publish_date }}</span>
@@ -191,7 +240,10 @@
</div> </div>
<div style="padding-bottom: 10px" v-else> <div style="padding-bottom: 10px" v-else>
<div class="font14 protocolTitle">{{ item.title }}</div> <div class="font14 protocolTitle">{{ item.title }}</div>
<div class="assessBox" style="padding-left: 5px; padding-right: 5px"> <div
class="assessBox"
style="padding-left: 5px; padding-right: 5px"
>
<div> <div>
<span class="font11">发布时间</span> <span class="font11">发布时间</span>
<span class="font11">{{ item.publish_date }}</span> <span class="font11">{{ item.publish_date }}</span>
@@ -211,14 +263,14 @@
</template> </template>
<script> <script>
import './home.css'; import "./home.css";
import { apis } from '@/common/apis'; import { apis } from "@/common/apis";
import { token } from '@/common/token'; import { token } from "@/common/token";
import request from '@/common/util'; import request from "@/common/util";
import { mgop } from '@aligov/jssdk-mgop'; import { mgop } from "@aligov/jssdk-mgop";
export default { export default {
name: 'home', name: "home",
data() { data() {
return { return {
// apidata: { // apidata: {
@@ -281,29 +333,29 @@ export default {
// amount: "0", // amount: "0",
// }, // },
data: {}, data: {},
total: '8', total: "8",
list: [ list: [
{ {
id: 11, id: 11,
area: '全大市', area: "全大市",
title: '宁波市住房和城乡建设委员会开展关于住房的政策', title: "宁波市住房和城乡建设委员会开展关于住房的政策",
publish_date: '2021年09月05日', publish_date: "2021年09月05日"
}, },
{ {
id: 22, id: 22,
area: '全大市', area: "全大市",
title: '宁波市住房和城乡建设委员会开展关于住房的政策', title: "宁波市住房和城乡建设委员会开展关于住房的政策",
publish_date: '2021年09月05日', publish_date: "2021年09月05日"
}, },
{ {
id: 33, id: 33,
area: '全大市', area: "全大市",
title: '宁波市住房和城乡建设委员会开展关于住房的政策', title: "宁波市住房和城乡建设委员会开展关于住房的政策",
publish_date: '2021年09月05日', publish_date: "2021年09月05日"
}, }
], ],
loading: false, loading: false,
finished: true, finished: true
}; };
}, },
created() { created() {
@@ -313,58 +365,58 @@ export default {
onLoad() {}, onLoad() {},
onInit() { onInit() {
mgop({ mgop({
api: 'mgop.kykj.houseexpropriat.getprjlist', // 必须 api: "mgop.kykj.houseexpropriat.getprjlist", // 必须
host: 'https://mapi.zjzwfw.gov.cn/', host: "https://mapi.zjzwfw.gov.cn/",
dataType: 'JSON', dataType: "JSON",
type: 'GET', type: "GET",
appKey: 'es4b8zmz+2001833218+dehllx', // 必须 appKey: "es4b8zmz+2001833218+dehllx", // 必须
onSuccess: (data) => { onSuccess: data => {
console.log('data', data); console.log("data", data);
},
onFail: (err) => {
console.log(err, 'err');
}, },
onFail: err => {
console.log(err, "err");
}
}); });
let apidata = { let apidata = {
success: true, success: true,
code: 200, code: 200,
message: '请求成功', message: "请求成功",
data: { data: {
userName: '张三丰', userName: "张三丰",
idCard: '341203199206303411', idCard: "341203199206303411",
prjList: [ prjList: [
{ {
prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4', prjId: "936d98a8-2c8f-410f-b126-68a7568f60c4",
name: '项目名称', name: "项目名称",
area: '海曙区', area: "海曙区",
zsbm: '宁波市海曙区房屋征收管理服务中心', zsbm: "宁波市海曙区房屋征收管理服务中心",
year: 2021.0, year: 2021.0,
zsjdh: '海政发[2021]513号', zsjdh: "海政发[2021]513号",
currentState: '项目报结', currentState: "项目报结",
fhpgList: [ fhpgList: [
{ {
prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4', prjId: "936d98a8-2c8f-410f-b126-68a7568f60c4",
id: 'a400583e-ae93-444f-8a20-4c4731b0cc13', id: "a400583e-ae93-444f-8a20-4c4731b0cc13",
assessmentNo: '0513', assessmentNo: "0513",
houseAddress: '高桥镇', houseAddress: "高桥镇",
countValue: '137654.00', countValue: "137654.00"
}, }
], ],
bcxyList: [ bcxyList: [
{ {
prjId: '936d98a8-2c8f-410f-b126-68a7568f60c4', prjId: "936d98a8-2c8f-410f-b126-68a7568f60c4",
id: 'bf21b302-8059-462d-985f-ce7452c4d5b4', id: "bf21b302-8059-462d-985f-ce7452c4d5b4",
xyNo: '海政发2021513-0513-1', xyNo: "海政发2021513-0513-1",
houseAddress: '高桥镇', houseAddress: "高桥镇",
switchProductionWay: '货币补偿', switchProductionWay: "货币补偿",
summationShouldCompensateMoney: '137654.00', summationShouldCompensateMoney: "137654.00"
}, }
], ]
}, }
], ]
}, },
extras: null, extras: null,
timestamp: 1631261808797, timestamp: 1631261808797
}; };
if (apidata.code == 200) { if (apidata.code == 200) {
this.data = apidata.data; this.data = apidata.data;
@@ -379,11 +431,11 @@ export default {
// }); // });
}, },
gotoProject(type) { gotoProject(type) {
this.$router.push({ name: 'projectSelect', params: { type: type } }); this.$router.push({ name: "projectSelect", params: { type: type } });
}, },
onLogin() { onLogin() {
// this.loading = true; // this.loading = true;
let form = { account: 'zgbqc', password: '111qqqqq' }; let form = { account: "zgbqc", password: "111qqqqq" };
apis apis
.login(form) .login(form)
.finally(() => { .finally(() => {
@@ -397,7 +449,7 @@ export default {
this.onLoadUserInfo(); this.onLoadUserInfo();
this.onLoadStatistic(); this.onLoadStatistic();
}) })
.catch((err) => { .catch(err => {
debugger; debugger;
// this.$toast(err); // this.$toast(err);
}); });
@@ -420,11 +472,13 @@ export default {
var tbl = []; var tbl = [];
var len = n - num.toString().length; var len = n - num.toString().length;
if (len <= 0) return num; if (len <= 0) return num;
if (!tbl[len]) tbl[len] = new Array(len + 1).join('0'); if (!tbl[len]) tbl[len] = new Array(len + 1).join("0");
return tbl[len] + num; return tbl[len] + num;
}, },
}, // 页面跳转
pageJump() {
this.$router.push("/policyInfo");
}
}
}; };
</script> </script>

View File

@@ -0,0 +1,41 @@
<template>
<div class="container">
<div class="title">{{ info.title }}</div>
<div class="date">{{ info.date }}</div>
<hr />
<p class="content">{{ info.content }}</p>
<p class="content">{{ info.content }}</p>
</div>
</template>
<script>
export default {
data() {
return {
info: {
title: "国有土地征收详情与政策",
date: "2021-9-5",
content: `第一条 为了规范国有土地上房屋征收与补偿活动,维护公共利益,保障被征收房屋所有权人的合法权益,制定本条例<br/>
第二条 市、县级人民政府有关部门应当依照本条例的规定和本级人民政府规定的职责分工,互相配合,保障房屋征收与补偿工作的顺利进行`
}
};
}
};
</script>
<style lang="less" scoped>
.container {
padding: 20px;
font-size: 14px;
.title {
text-align: center;
font-weight: bolder;
}
.date {
text-align: center;
margin: 10px 0;
}
.content {
text-indent: 2em;
line-height: 2.5;
}
}
</style>