446 lines
16 KiB
Vue
446 lines
16 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">
|
||
<div class="gridImg" style="background:#1897FB;">
|
||
<van-image
|
||
:src="require('@/assets/img/scan.png')"
|
||
class="gridImgBg"
|
||
/>
|
||
<span class="baseFont" style="padding-top: 5px;">扫一扫</span>
|
||
</div>
|
||
<div
|
||
@click="gotoProject('pg')"
|
||
class="gridImg"
|
||
style="background:#F1AE4B;"
|
||
>
|
||
<van-image
|
||
:src="require('@/assets/img/evaluation.png')"
|
||
class="gridImgBg"
|
||
/>
|
||
<span class="baseFont" style="padding-top: 5px;">查评估结果</span>
|
||
</div>
|
||
<div
|
||
@click="gotoProject('xy')"
|
||
class="gridImg"
|
||
style="background:#16D7ED;"
|
||
>
|
||
<van-image
|
||
:src="require('@/assets/img/compensation.png')"
|
||
class="gridImgBg"
|
||
/>
|
||
<span class="baseFont" style="padding-top: 5px;">查补偿协议</span>
|
||
</div>
|
||
</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">
|
||
<!-- window图标 -->
|
||
<div style="display: flex;align-items: center;">
|
||
<div class="projectIcon">
|
||
<van-image
|
||
:src="require('@/assets/img/project.png')"
|
||
style="width: 25px;height: 25px;"
|
||
/>
|
||
</div>
|
||
<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-list>
|
||
<div
|
||
:key="assess.id"
|
||
@click="gotoProject('pg', item.prjId)"
|
||
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"
|
||
@click="gotoProject('xy', item.prjId)"
|
||
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"
|
||
>共{{ data.policiesRegulationsLists.totalCount }}条</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="centerMagin" style="padding-bottom: 20px">
|
||
<div class="protocolBox">
|
||
<!-- 遍历内容 -->
|
||
<van-list>
|
||
<div
|
||
:key="item.id"
|
||
@click="pageJump(item.id)"
|
||
class="protocolList"
|
||
v-for="(item, i) in data.policiesRegulationsLists.list"
|
||
>
|
||
<!-- 非最后一行 -->
|
||
<div
|
||
class="protocolLine"
|
||
v-if="i != data.policiesRegulationsLists.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.publicTime }}</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.publicTime }}</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 { mgop } from "@aligov/jssdk-mgop";
|
||
import { SetTicket } from "@/common/util//tools";
|
||
export default {
|
||
name: "home",
|
||
data() {
|
||
return {
|
||
data: {
|
||
idCard: "加载中...",
|
||
userName: "加载中...",
|
||
policiesRegulationsLists: {
|
||
totalCount: 0
|
||
}
|
||
},
|
||
ticket: "8a1188527bda7a4d017c0bf804381ed5-ticket"
|
||
};
|
||
},
|
||
async created() {
|
||
this.onInit();
|
||
console.log("this", this);
|
||
this.setLocationAplus();
|
||
SetTicket(this.$route.query.ticket || this.ticket);
|
||
},
|
||
methods: {
|
||
// 获取数据
|
||
onInit() {
|
||
mgop({
|
||
api: "mgop.kykj.houseexpropriat.getprjlist",
|
||
host: "https://mapi.zjzwfw.gov.cn/",
|
||
dataType: "JSON",
|
||
type: "POST",
|
||
data: {
|
||
ticket: this.$route.query.ticket || this.ticket
|
||
},
|
||
appKey: "es4b8zmz+2001833218+dehllx",
|
||
onSuccess: data => {
|
||
console.log("首页数据", data);
|
||
if (data.data && data.data.success == true) {
|
||
this.data = data.data.data;
|
||
// 埋点
|
||
this.setZwUserAplus(this.data.idCard, this.data.userName);
|
||
} else {
|
||
var errorCodes = [6001, 6501];
|
||
// 跳转到政务系统;
|
||
if (errorCodes.indexOf(data.data.bizCode) > -1) {
|
||
window.location.replace(
|
||
"https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=fwzs"
|
||
);
|
||
} else console.log("用户无数据，不展示");
|
||
}
|
||
},
|
||
onFail: err => {
|
||
console.log("用户无数据，不展示");
|
||
}
|
||
});
|
||
},
|
||
// 跳转项目详情
|
||
gotoProject(type, id) {
|
||
this.$router.push({
|
||
name: "projectSelect",
|
||
params: {
|
||
type: type,
|
||
ticket: this.$route.query.ticket || this.ticket,
|
||
prjId: id || ""
|
||
}
|
||
});
|
||
},
|
||
// 加载项目数统计信息
|
||
onLoadStatistic() {
|
||
apis.projectStatistics().then(({ result }) => {
|
||
this.statistics = result;
|
||
});
|
||
},
|
||
// 政策信息页面跳转
|
||
pageJump(id) {
|
||
this.$router.push({
|
||
name: "policyInfo",
|
||
params: { ticket: this.ticket, id: id }
|
||
});
|
||
},
|
||
setZwUserAplus(Userid, userName) {
|
||
// 设置用户信息埋点
|
||
aplus_queue.push({
|
||
action: "aplus.setMetaInfo",
|
||
arguments: ["_hold", "BLOCK"]
|
||
});
|
||
aplus_queue.push({
|
||
action: "aplus.setMetaInfo",
|
||
arguments: ["_user_nick", userName] // this.userInfoData.username],
|
||
});
|
||
aplus_queue.push({
|
||
action: "aplus.setMetaInfo",
|
||
arguments: ["_user_id", Userid]
|
||
});
|
||
aplus_queue.push({
|
||
action: "aplus.setMetaInfo",
|
||
arguments: ["_hold", "START"]
|
||
});
|
||
},
|
||
setLocationAplus() {
|
||
ZWJSBridge.onReady(() => {
|
||
console.log("初始化完成后，执行bridge方法");
|
||
ZWJSBridge.getUserType()
|
||
.then(result1 => {
|
||
console.log("getUserType():" + JSON.stringify(result1));
|
||
console.log("result1.userType:" + result1.userType);
|
||
//经纬度
|
||
ZWJSBridge.getLocation()
|
||
.then(result2 => {
|
||
console.log("getLocation():" + JSON.stringify(result2));
|
||
console.log("result2.longitude:" + result2.longitude);
|
||
console.log("result2.latitude:" + result2.latitude);
|
||
aplus_queue.push({
|
||
action: "aplus.sendPV",
|
||
arguments: [
|
||
{
|
||
is_auto: false
|
||
},
|
||
{
|
||
isMini: true,
|
||
miniAppId: "2001833218", //'应用开发管理平台-应用 ID
|
||
miniAppName: "房屋征收",
|
||
long: result2.longitude,
|
||
lati: result2.latitude,
|
||
userType: result1.userType
|
||
}
|
||
]
|
||
});
|
||
})
|
||
.catch(error => {
|
||
console.log(error);
|
||
});
|
||
})
|
||
.catch(error => {
|
||
console.log(error);
|
||
});
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|