update:pdf底部信息位置调整,评估详情加载提示,首页内容换行问题

This commit is contained in:
2021-09-28 08:55:48 +08:00
parent 6c21c8b36e
commit 413d436897
5 changed files with 561 additions and 294 deletions

View File

@@ -1,304 +1,277 @@
<template>
<div
class="page"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
>
<div class="page">
<div class="topBox">
<div class="titleBox">
<div class="font">被征收人信息查询</div>
<div class="topBox">
<div class="titleBox">
被征收人信息查询
</div>
<div class="baseInfo">
<van-image :src="require('@/assets/img/renyuanliebiao.png')" />
<span>被征收人姓名</span>
<span>{{ data.userName }}</span>
</div>
<div class="baseInfo">
<van-image :src="require('@/assets/img/credentials_icon.png')" />
<span>身份证号码</span>
<span>{{ setIdCard(data.idCard) }}</span>
</div>
<!-- 三张背景图 -->
<div class="gridBg centerMagin">
<div class="gridImg" style="background:#1897FB;">
<van-image :src="require('@/assets/img/scan.png')" />
<span class="baseFont">扫一扫</span>
</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">{{ setIdCard(data.idCard) }}</span>
</div>
<div
@click="gotoProject('pg')"
class="gridImg"
style="background:#F1AE4B;"
>
<van-image :src="require('@/assets/img/evaluation.png')" />
<span class="baseFont">查评估结果</span>
</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
@click="gotoProject('xy')"
class="gridImg"
style="background:#16D7ED;"
>
<van-image :src="require('@/assets/img/compensation.png')" />
<span class="baseFont">查补偿协议</span>
</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>
<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">
</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="project">
<!-- window图标 -->
<div>
<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 class="projectCenter centerMagin">
<!-- 项目内容 -->
<div class="projectCenterBox">
<div class="projectCenterInfo">
<div class="projectCenterInfo">
<van-image
:src="require('@/assets/img/menu_yhxy.png')"
class="projectRightIcon"
:src="require('@/assets/img/project_area.png')"
class="projectCenterImg"
/>
<span class="projectRightFont">{{ item.currentState }}</span>
<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="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 class="centerMagin">
<!-- 分户评估结果部分 -->
<div class="assess">
<div>
<van-image
:src="require('@/assets/img/assess_1.png')"
class="assessIcon"
/>
<span class="assessTitle">分户评估结果</span>
</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>
<!-- 分户评估遍历内容 -->
<van-list>
<div
:key="assess.id"
@click="toEvaluate(assess.id, assess.type)"
class="assessCenter1"
v-for="assess in item.fhpgList"
>
<div class="assessBox">
<span class="projectCenterFont">评估报告编号</span>
<span class="projectCenterFont">{{
assess.assessmentNo
}}</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 }}
<div class="assessBox">
<span class="projectCenterFont">被征收房屋地址</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>
<div class="centerMagin">
<!-- 分户评估结果部分 -->
<div class="assess">
<div>
<van-image
:src="require('@/assets/img/assess_1.png')"
class="assessIcon"
/>
<span class="assessTitle">分户评估结果</span>
<!-- 补偿协议遍历内容 -->
<van-list>
<div
:key="protocol.id"
@click="toAgreement()"
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">被征收房屋地址</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
:key="assess.id"
@click="toEvaluate(assess.id, assess.type)"
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">被征收房屋地址</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-list>
<div
:key="protocol.id"
@click="toAgreement()"
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">被征收房屋地址</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>
</van-list>
</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
</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>
</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"
class="protocolLine"
v-if="i != data.policiesRegulationsLists.list.length - 1"
>
<!-- 非最后一行 -->
<div class="font14 protocolTitle">{{ item.title }}</div>
<div
class="protocolLine"
v-if="i != data.policiesRegulationsLists.list.length - 1"
class="assessBox"
style="padding-left: 5px; padding-right: 5px"
>
<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>
<span class="font11">发布时间</span>
<span class="font11">{{ item.publicTime }}</span>
</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>
<span class="font11">区域</span>
<span class="font11">{{ item.area }}</span>
</div>
</div>
</div>
</van-list>
</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>
</template>
<script>
import "./home.css";
import { apis } from "@/common/apis";
import { mgop } from "@aligov/jssdk-mgop";
import { SetTicket } from "@/common/util//tools";
@@ -306,7 +279,7 @@ export default {
name: "home",
data() {
return {
loading: true,
loading: false,
data: {
idCard: "加载中...",
userName: "加载中...",
@@ -343,26 +316,28 @@ export default {
]
}
]
},
ticket: "8a1189367c22b456017c25bb119c2039-ticket"
}
};
},
created() {
this.onInit();
console.log("this", this);
this.setLocationAplus();
SetTicket(this.$route.query.ticket || this.ticket);
SetTicket(this.$route.query.ticket);
},
methods: {
// 获取数据
onInit() {
if (!this.$route.query.ticket == "") {
this.loading = true;
}
mgop({
api: "mgop.kykj.houseexpropriat.getprjlist",
host: "https://mapi.zjzwfw.gov.cn/",
dataType: "JSON",
type: "POST",
data: {
ticket: this.$route.query.ticket || this.ticket
ticket: this.$route.query.ticket
},
appKey: "es4b8zmz+2001833218+dehllx",
onSuccess: data => {
@@ -390,7 +365,7 @@ export default {
setIdCard(id) {
return id == "加载中..."
? id
: id.substr(0, 6) + "XXXXXXXX" + id.substr(14, 4);
: id.substr(0, 6) + "********" + id.substr(14, 4);
},
// 跳转项目详情
gotoProject(type) {
@@ -491,3 +466,305 @@ export default {
}
};
</script>
<style lang="less" scoped>
.page {
border-radius: 6px;
background: #f2fbfd;
}
.topBox {
overflow: hidden;
width: 100%;
height: 225px;
background: url(../assets/img/bg.png);
background-size: 100% 225px;
.titleBox {
display: flex;
align-items: center;
justify-content: center;
width: 173px;
height: 36px;
margin: 15px 0 15px 0;
border-radius: 0 22px 22px 0;
background: rgba(6, 63, 142, 0.66);
font-family: PingFangSC-Semibold, PingFang SC;
font-size: 16px;
font-weight: 600;
color: #fff;
}
}
.baseInfo {
display: flex;
.van-image {
width: 22px;
height: 21px;
padding-right: 10px;
padding-left: 31px;
}
span {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 20px;
height: 20px;
color: #fff;
}
}
.baseFont {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 20px;
height: 20px;
color: #fff;
}
.centerMagin {
margin-top: 10px;
margin-right: 12px;
margin-left: 10px;
}
.gridBg {
display: flex;
overflow: hidden;
align-items: center;
justify-content: space-around;
height: 120px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.28);
}
.gridImg {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 90px;
height: 80px;
margin: 12px 6px;
padding-top: 5px;
border-radius: 10px;
.van-image {
width: 38px;
height: 35px;
}
span {
padding-top: 5px;
}
}
.bigImg {
width: 100%;
}
.project {
display: flex;
align-items: center;
justify-content: space-between;
height: 41px;
margin-top: 10px;
margin-right: 12px;
margin-left: 10px;
padding-right: 0;
padding-left: 0;
background: url(../assets/img/project_bg.png);
background-size: 100% 41px;
}
.project > div:nth-child(1) {
display: flex;
align-items: center;
width: 50%;
height: 100%;
span {
white-space: nowrap;
overflow: hidden;
}
}
.projectIcon {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 100%;
margin-right: 10px;
border-radius: 5px 0 0;
background: #3284cd;
}
/* 项目名字 */
.projectTitle {
font-family: PingFangSC-Semibold, PingFang SC;
font-size: 16px;
font-weight: 600;
line-height: 20px;
height: 20px;
vertical-align: middle;
color: #fff;
}
.projectRight {
display: flex;
align-items: center;
height: 27px;
opacity: 0.82;
border-radius: 13px 0 0 17px;
background: #24bca3;
}
/* 项目名字旁边小字 */
.projectRightFont {
font-family: PingFangSC-Semibold, PingFang SC;
font-size: 12px;
line-height: 14px;
padding-right: 5px;
color: #fff;
}
.projectRightIcon {
width: 17px;
height: 17px;
margin-right: 3px;
margin-left: 8px;
}
.projectCenter {
/* height: 440px; */
padding-bottom: 35px;
background: #fff;
box-shadow: 0 2px 6px 1px rgba(212, 212, 212, 0.5);
}
.projectCenterBox {
padding: 8px 0;
}
.projectCenterInfo {
display: flex;
align-items: center;
padding-top: 5px;
width: 100%;
}
/* 项目内容小图标 */
.projectCenterImg {
width: 15px;
height: 15px;
padding: 0 10px;
}
/* 项目内容文字 */
.projectCenterFont {
font-family: PingFangSC-Regular, PingFang SC;
font-size: 14px;
font-weight: 400;
line-height: 20px;
/* height: 12px; */
color: #2c2b2b;
}
.assess {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 25px;
padding-right: 0;
padding-left: 0;
}
.assessIcon {
width: 24px;
height: 24px;
margin-right: 10px;
vertical-align: middle;
background: #2468f2;
}
/* 分户,协议标题 */
.assessTitle {
font-family: PingFangSC-Regular, PingFang SC;
font-size: 16px;
font-weight: 400;
line-height: 20px;
height: 20px;
color: #2468f2;
}
.assessRightIcon {
width: 24px;
height: 24px;
background: #2468f2;
}
.assessBox {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 12px;
}
.assessBox > span:nth-child(1) {
white-space: nowrap;
}
.assessCenter1 {
margin: 15px 10px;
border-left: 2px solid #24bca3;
}
.assessCenter2 {
margin: 15px 10px;
border-left: 2px solid #ff5959;
}
.protocolTitle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 政策的发布时间和区域 */
.font11 {
font-family: PingFangSC-Regular, PingFang SC;
font-size: 12px;
font-weight: 400;
line-height: 11px;
height: 11px;
color: #9da2a3;
}
.protocolBox {
border-radius: 4px;
background: #fff;
box-shadow: 0 2px 5px 0 rgba(168, 168, 168, 0.5);
}
/* .font14 {
font-family: PingFangSC-Regular, PingFang SC;
font-size: 14px;
font-weight: 400;
line-height: 20px;
height: 20px;
color: #202020;
} */
.protocolList {
padding: 20px 21px 0 20px;
}
.protocolLine {
padding-bottom: 10px;
border-bottom: 1px dashed rgba(168, 168, 168, 0.5);
}
</style>

View File

@@ -23,9 +23,7 @@
</template>
<script>
// import pdf from "vue-pdf";
import { mgop } from "@aligov/jssdk-mgop";
import $ from "jquery";
export default {
components: {},
data() {
@@ -40,18 +38,7 @@ export default {
created() {
this.onInit();
},
mounted() {
if (
650 >=
$(".container")
.css("height")
.substr(0, 5)
) {
$(".bottomContent").addClass("absolute");
} else {
$(".absolute").removeClass("absolute");
}
},
mounted() {},
methods: {
onInit() {
if (this.$route.params.id) {
@@ -144,6 +131,7 @@ export default {
bottom: 0px;
}
.bottomContent {
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
width: 100%;

View File

@@ -146,7 +146,7 @@ export default {
setIdCard(id) {
return id == "无数据"
? id
: id.substr(0, 6) + "XXXXXXXX" + id.substr(14, 4);
: id.substr(0, 6) + "********" + id.substr(14, 4);
},
// 页面跳转
gotoDetail(id) {

View File

@@ -88,19 +88,20 @@ export default {
},
created() {
this.onInit();
this.$nextTick(() => {
if (
650 >=
$(".container")
.css("height")
.substr(0, 5)
) {
$(".bottomContent").addClass("absolute");
} else {
$(".absolute").removeClass("absolute");
}
});
},
mounted() {
if (
650 >=
$(".container")
.css("height")
.substr(0, 5)
) {
$(".bottomContent").addClass("absolute");
} else {
$(".absolute").removeClass("absolute");
}
},
mounted() {},
methods: {
onInit() {
if (!window.sessionStorage.getItem("projectId")) {

View File

@@ -74,6 +74,7 @@ import $ from "jquery";
export default {
data() {
return {
loading: true,
info: {
houseAddress: "地址",
valuationMethodText: "价值录入",
@@ -125,9 +126,9 @@ export default {
},
appKey: "es4b8zmz+2001833218+dehllx",
onSuccess: data => {
this.$store.dispatch("GET_DATA", data);
console.log("分户评估", data);
if (data.data.success) {
this.loading = false;
const { data: res } = data.data;
this.info = res;
} else {