Files
zsxt_nbzs_h5/FrontCode2/sunshine_levy/src/views/index.vue
2021-10-14 16:22:21 +08:00

925 lines
23 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="container">
<div class="topBox">
<div class="olderVersion">
<div class="titleBox">
被征收人信息查询
</div>
<div @click="toOlderMode()" class="mode">进入老年模式</div>
</div>
<div class="baseInfo">
<img src="@/assets/img/renyuanliebiao.png" />
<span>被征收人姓名{{ data.userName }}</span>
</div>
<div class="baseInfo">
<img src="@/assets/img/credentials_icon.png" />
<span>身份证号码{{ setIdCard(data.idCard) }}</span>
</div>
<!-- 三张背景图 -->
<div class="gridBg ">
<div style="background:#1897FB;">
<img src="@/assets/img/scan.png" />
<span>扫一扫</span>
</div>
<div @click="gotoProject('pg')" style="background:#F1AE4B;">
<img src="@/assets/img/evaluation.png" />
<span>查评估结果</span>
</div>
<div @click="gotoProject('xy')" style="background:#16D7ED;">
<img src="@/assets/img/compensation.png" />
<span>查补偿协议</span>
</div>
</div>
</div>
<!-- 大背景图 -->
<div class="bigImage">
<img src="@/assets/img/government.png" />
</div>
<!-- 项目内容 -->
<div :key="item.prjId" v-for="item in data.prjList">
<div class="project">
<!-- window图标 -->
<div>
<div class="projectIcon">
<img
src="@/assets/img/project.png"
style="width: 25px;height: 25px;"
/>
</div>
<span class="projectTitle">{{ item.name }}</span>
</div>
<!-- 补偿协议图标 -->
<div class="projectRight">
<div>
<img src="@/assets/img/menu_yhxy.png" />
</div>
<span>{{ item.currentState }}</span>
</div>
</div>
<div class="projectCenter">
<!-- 项目内容 -->
<div class="projectCenterBox">
<div>
<div>
<img src="@/assets/img/project_area.png" />
<span>项目所在区域</span>
</div>
<div>{{ item.area }}</div>
</div>
<div>
<div>
<img src="@/assets/img/project_dep.png" />
<span>征收部门</span>
</div>
<div>{{ item.zsbm }}</div>
</div>
<div>
<div>
<img src="@/assets/img/project_year.png" />
<span>所属年份</span>
</div>
<div>{{ item.year }}</div>
</div>
<div>
<div>
<img src="@/assets/img/project_no.png" />
<span>征收决定号</span>
</div>
<div class="blue">{{ item.zsjdh }}</div>
</div>
</div>
<!-- 分户评估结果部分 -->
<div class="assess">
<van-image :src="require('@/assets/img/assess_1.png')" />
<span>分户评估结果</span>
</div>
<div
:key="assess.id"
@click="toEvaluate(assess.id, assess.type)"
class="assessCenter1"
v-for="assess in item.fhpgList"
>
<div>
<span>评估报告编号</span>
<span>{{ assess.assessmentNo }}</span>
</div>
<div>
<span>被征收房屋地址</span>
<span>
{{ assess.houseAddress }}
</span>
</div>
<div>
<span>评估总金额</span>
<span class="projectTitle" style="color: red"
>¥{{ assess.countValue }}</span
>
</div>
</div>
<!-- 补偿协议部分 -->
<div class="assess2">
<van-image :src="require('@/assets/img/assess_2.png')" />
<span>补偿结果</span>
</div>
<div
:key="protocol.id"
@click="toAgreement(protocol.id)"
class="assessCenter2"
v-for="protocol in item.bcxyList"
>
<div>
<span>协议编号</span>
<span>{{ protocol.xyNo }}</span>
</div>
<div>
<span>被征收房屋地址</span>
<span>
{{ protocol.houseAddress }}
</span>
</div>
<div>
<span>补偿方式</span>
<span>
{{ protocol.switchProductionWay }}
</span>
</div>
<div>
<span>合计补偿资金</span>
<span class="projectTitle" style="color: red"
>¥{{ protocol.summationShouldCompensateMoney }}</span
>
</div>
</div>
</div>
</div>
<!-- 征收政策背景图 -->
<div>
<van-image :src="require('@/assets/img/expropriationPolicy.png')" />
</div>
<!-- 征收政策部分 -->
<div class=" zszc">
<span>征收政策</span>
<span>{{ data.policiesRegulationsLists.totalCount }}</span>
</div>
<div class=" protocolBox">
<div
:key="item.id"
@click="pageJump(item.id)"
class="protocolList"
v-for="(item, i) in data.policiesRegulationsLists.list"
>
<!-- 非最后一行有边框 -->
<div
style="border-bottom: 1px dashed #E8E9EC"
v-if="i != data.policiesRegulationsLists.list.length - 1"
>
<div>{{ item.title }}</div>
<div>
<span>发布时间{{ item.publicTime }}</span>
<span>区域{{ item.area }}</span>
</div>
</div>
<!-- 最后一行无边框 -->
<div style="padding-bottom: 10px" v-else>
<div>{{ item.title }}</div>
<div>
<span>发布时间{{ item.publicTime }}</span>
<span>区域{{ item.area }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { apis } from "@/common/apis";
import { mgop } from "@aligov/jssdk-mgop";
import { SetTicket } from "@/common/util//tools";
import { changeStyle } from "@/olderMode/1.js";
import $ from "jquery";
export default {
name: "home",
data() {
return {
data: {
idCard: "加载中...",
userName: "加载中...",
policiesRegulationsLists: {
totalCount: 0,
list: [
{ title: "无数据", publicTime: "无数据", area: "无数据" },
{ title: "无数据", publicTime: "无数据", area: "无数据" },
{ title: "无数据", publicTime: "无数据", area: "无数据" }
]
},
prjList: [
{
name: "请求出错暂时没有可用数据",
currentState: "无数据",
area: "宁波市房屋建设管理办公室九号楼",
zsbm: "无数据",
year: "无数据",
zsjdh: "无数据",
fhpgList: [
{
assessmentNo: "宁波市房屋建设和建筑管理局办公室",
houseAddress: "宁波市房屋建设和建筑管理局办公室",
countValue: "无数据"
},
{
assessmentNo: "宁波市房屋建设和建筑管理局办公室",
houseAddress: "宁波市房屋建设和建筑管理局办公室",
countValue: "无数据"
}
],
bcxyList: [
{
xyNo: "无数据",
houseAddress: "宁波市房屋建设和建筑管理局办公室",
switchProductionWay: "无数据",
summationShouldCompensateMoney: "无数据"
},
{
xyNo: "无数据",
houseAddress: "宁波市房屋建设和建筑管理局办公室",
switchProductionWay: "无数据",
summationShouldCompensateMoney: "无数据"
}
]
},
{
name: "请求出错",
currentState: "无数据",
area: "无数据",
zsbm: "无数据",
year: "无数据",
zsjdh: "无数据",
fhpgList: [
{
assessmentNo: "无数据",
houseAddress: "无数据",
countValue: "无数据"
}
],
bcxyList: [
{
xyNo: "无数据",
houseAddress: "无数据",
switchProductionWay: "无数据",
summationShouldCompensateMoney: "无数据"
}
]
}
]
}
};
},
created() {
this.onInit();
console.log("this", this);
this.setLocationAplus();
SetTicket(this.$route.query.ticket);
$(".logout").css("display", "none");
if (sessionStorage.getItem("mode") == "older") {
changeStyle();
}
},
mounted() {
if (sessionStorage.getItem("mode") == "older") {
$(".container").addClass("old_container");
}
},
methods: {
// 获取数据
onInit() {
mgop({
api: "mgop.kykj.houseexpropriat.getprjlist",
host: "https://mapi.zjzwfw.gov.cn/",
dataType: "JSON",
type: "POST",
data: {
ticket: this.$route.query.ticket
},
appKey: "es4b8zmz+2001833218+dehllx",
onSuccess: data => {
console.log("首页数据", data);
window.sessionStorage.setItem("homeData", JSON.stringify(data));
if (data.data.success) {
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) {
this.$message({
message: "登录超时,请重新登录",
duration: 3000,
type: "info",
center: true
});
setTimeout(() => {
window.location.replace(
"https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=fwzs"
);
}, 3000);
} else {
this.$message({
message: "请求出错",
duration: 3000,
type: "error",
center: true
});
}
}
},
onFail: err => {
this.$notify({
title: "错误",
message: "请求失败",
duration: 3000,
type: "error"
});
}
});
},
toOlderMode() {
if (sessionStorage.getItem("mode") == "older") {
sessionStorage.setItem("mode", "normal");
$(".mode").text("进入老年模式");
$(".container").removeClass("old_container");
$(".bottomContent").removeClass("old_bottomContent");
$("#app").removeClass("old_app");
} else {
sessionStorage.setItem("mode", "older");
changeStyle();
$(".mode").text("退出老年模式");
$(".container").addClass("old_container");
}
},
setIdCard(id) {
return id == "加载中..."
? id
: id.substr(0, 6) + "********" + id.substr(14, 4);
},
// 跳转选择项目
gotoProject(type) {
$(".logout").css("display", "block");
this.$router.push({
name: "projectSelect",
params: {
type: type
}
});
},
// 直接跳转分户评估结果页面
toEvaluate(id, type) {
$(".bottomContent").removeClass("display");
$("#app").removeClass("padding");
$(".logout").css("display", "block");
this.$router.push({
name: "evaluatePage",
params: {
fhpgId: id,
type
}
});
},
// 直接跳转协议结果pdf
toAgreement(id) {
$(".bottomContent").removeClass("display");
$("#app").removeClass("padding");
$(".logout").css("display", "block");
this.$router.push({
name: "showPdf",
params: {
id
}
});
},
// 加载项目数统计信息
onLoadStatistic() {
apis.projectStatistics().then(({ result }) => {
this.statistics = result;
});
},
// 政策信息页面跳转
pageJump(id) {
$(".bottomContent").removeClass("display");
$("#app").removeClass("padding");
$(".logout").css("display", "block");
this.$router.push({
name: "policyInfo",
params: { 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>
<style lang="less" scoped>
.container {
border-radius: 6px;
background: #f6f7f8;
padding-bottom: 20px;
> div:nth-child(n + 2) {
margin: 10px 12px 0 10px;
}
}
// 最上面盒子
.topBox {
background: url(../assets/img/bg.png);
background-size: 100% auto;
background-repeat: no-repeat;
.olderVersion {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
:nth-child(2) {
background: #f82b36;
width: 124px;
height: 33px;
text-align: center;
vertical-align: middle;
line-height: 33px;
border-radius: 2px;
font-size: 18px;
font-weight: 600;
color: #ffffff;
}
}
.titleBox {
display: flex;
align-items: center;
justify-content: center;
width: 173px;
height: 36px;
border-radius: 0 22px 22px 0;
background: rgba(6, 63, 142, 0.66);
font-size: 16px;
font-weight: 600;
color: #ffffff;
}
.baseInfo {
display: flex;
margin: 5px 0;
align-items: center;
img {
height: 21px;
padding-right: 10px;
padding-left: 31px;
}
span {
color: #fff;
}
}
.gridBg {
display: flex;
align-items: center;
justify-content: space-around;
margin: 10px 12px 0 10px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.28);
> div {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 90px;
height: 80px;
margin: 20px 0 10px;
border-radius: 10px;
img {
height: 35px;
}
span {
padding-top: 5px;
font-weight: 500;
color: #fff;
}
}
}
}
// 大背景图
.bigImage {
img {
width: 100%;
}
}
// 项目部分
.project {
display: flex;
align-items: center;
justify-content: space-between;
height: 41px;
padding: unset 0;
background: url(../assets/img/project_bg.png) no-repeat;
background-position: 0 -2px;
background-size: 100% 120%;
> div:nth-child(1) {
display: flex;
align-items: center;
width: 50%;
height: 100%;
.projectIcon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px;
height: 100%;
margin-right: 10px;
border-radius: 5px 0 0;
background: #3284cd;
}
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.projectRight {
display: flex;
align-items: center;
height: 27px;
opacity: 0.82;
// background: #24bca3;
> div {
background: #24bca3;
height: 27px;
display: flex;
align-items: center;
border-radius: 13px 0 0 17px;
}
img {
width: 17px;
height: 17px;
margin-right: 3px;
margin-left: 8px;
}
span {
font-size: 12px;
font-weight: 600;
padding-right: 10px;
color: #fff;
background: #24bca3;
height: 27px;
line-height: 27px;
}
}
}
.projectTitle {
font-family: PingFangSC-Semibold, PingFang SC;
font-size: 16px;
font-weight: 600;
color: #fff;
}
.projectCenter {
padding-bottom: 25px;
background: #fff;
box-shadow: 0 2px 6px 1px rgba(212, 212, 212, 0.5);
.projectCenterBox {
> div {
display: flex;
align-items: flex-start;
padding-top: 15px;
> :nth-child(1) {
display: flex;
align-items: center;
img {
height: 22px;
padding: 0 10px;
}
:nth-child(2) {
font-weight: 400;
color: #b3b5b9;
width: 106px;
}
}
> :last-child {
color: #363a44;
width: 55%;
}
.blue {
color: #3883f1;
}
}
}
.assess {
display: flex;
align-items: center;
height: 25px;
padding: 25px 10px 0px;
.van-image {
width: 24px;
height: 24px;
margin-right: 10px;
background: #2468f2;
}
span {
font-family: PingFangSC-Regular, PingFang SC;
font-size: 16px;
font-weight: 400;
color: #2468f2;
}
}
.assessCenter1 {
margin: 25px 22px 22px;
border-left: 2px solid #24bca3;
font-weight: 400;
> div {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-left: 12px;
:nth-child(1) {
white-space: nowrap;
color: #b3b5b9;
}
:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
color: #363a44;
}
}
> :nth-child(2) {
margin: 15px 0;
}
}
.assess2 {
display: flex;
align-items: center;
height: 25px;
padding: 0px 10px 0px;
.van-image {
width: 24px;
height: 24px;
margin-right: 10px;
background: #2468f2;
}
span {
font-size: 16px;
font-weight: 400;
color: #2468f2;
}
}
.assessCenter2 {
margin: 25px 22px 22px;
border-left: 2px solid #ff5959;
font-weight: 400;
> div {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding-left: 12px;
:nth-child(1) {
white-space: nowrap;
color: #b3b5b9;
}
:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
color: #363a44;
}
}
> div:nth-child(n + 2) {
margin: 15px 0;
}
}
}
// 征收政策部分
.zszc {
span {
font-size: 16px;
font-weight: 800;
color: #202020;
display: block;
}
> span:nth-child(2) {
margin: 10px 0;
color: #2c2b2b;
font-size: 12px;
}
}
.protocolBox {
border-radius: 4px;
background: #fff;
box-shadow: 0 2px 5px 0 rgba(168, 168, 168, 0.5);
.protocolList {
padding: 0 20px;
> div {
> div:nth-child(1) {
font-size: 14px;
font-weight: 400;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 294px;
font-family: PingFangSC-Regular, PingFang SC;
color: #202020;
padding-top: 20px;
}
> div:nth-child(2) {
padding: unset 5px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
span {
font-size: 12px;
color: #9da2a3;
font-weight: 400;
line-height: 11px;
height: 11px;
}
}
}
}
}
// 老年化
.old_container {
.titleBox {
font-size: 24px;
width: 228px;
height: 41px;
}
.baseInfo {
font-size: 22px;
img {
height: 30px;
}
}
.gridBg {
font-size: 20px;
> div {
width: 110px;
height: 100px;
img {
height: 55px;
}
}
}
.project {
display: unset;
.projectTitle {
font-size: 24px;
}
> div:nth-child(1) {
display: flex;
align-items: center;
height: 41px;
padding: unset 0;
width: 100%;
background: url(../assets/img/project_bg.png);
background-position: 0 -2px;
background-size: 100% 120%;
}
> div:nth-child(2) {
margin-top: 10px;
> :nth-child(1) {
border-radius: unset !important;
}
> span {
font-size: 20px;
border-radius: 0px 13px 13px 0px;
}
}
}
.projectCenterBox {
font-size: 20px;
> div {
> :nth-child(1) {
:nth-child(2) {
width: unset !important;
white-space: nowrap;
}
}
> :last-child {
width: unset;
}
}
}
.assess {
span {
font-size: 22px;
}
}
.assessCenter1 {
font-size: 20px;
.projectTitle {
font-size: 20px;
}
}
.assess2 {
span {
font-size: 22px;
}
}
.assessCenter2 {
font-size: 20px;
.projectTitle {
font-size: 20px;
}
}
.zszc {
display: flex;
justify-content: space-between;
align-items: center;
> :nth-child(1) {
font-size: 20px;
}
> :nth-child(2) {
font-size: 18px;
}
}
.protocolList {
> div {
> :nth-child(1) {
font-size: 20px !important;
}
> :nth-child(2) {
display: block !important;
padding-top: 10px !important;
span {
font-size: 18px !important;
display: block;
height: unset !important;
line-height: 25px !important;
}
}
}
}
}
</style>