332 lines
8.1 KiB
Vue
332 lines
8.1 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div style="padding:10px">
|
||
<div :class="this.type == 'pg' ? 'proTopBoxpg' : 'proTopBoxxy'">
|
||
<div class="proCenterBox">
|
||
<div class="proCenterInfo">
|
||
<van-image
|
||
:src="require('@/assets/img/expropriated_person.png')"
|
||
class="proCenterImg"
|
||
/>
|
||
<div>
|
||
<div>
|
||
<span>被征收人姓名：</span>
|
||
<span style="color:#626262;">{{ info.userName }}</span>
|
||
</div>
|
||
<div>
|
||
<span>身份证号：</span>
|
||
<span style="color:#626262;">{{ setIdCard(info.idCard) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="proCenterFlex">
|
||
<div class="proCenterFlexFont">请选择您的征收项目</div>
|
||
<van-icon color="#9da2a3" name="arrow-down" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="proList">
|
||
<van-list>
|
||
<!-- 跳转项目详情 -->
|
||
<div
|
||
:key="item.prjId"
|
||
class="proListBox shadow"
|
||
v-for="item in info.prjList"
|
||
@click="gotoDetail(item.prjId)"
|
||
>
|
||
<div class="proAreaBox">
|
||
<div class="proArea">{{ item.area }}</div>
|
||
<div v-if="item.currentState == '补偿协议签订阶段'">
|
||
· {{ item.currentState }}
|
||
</div>
|
||
<div style="color:#179D5C" v-else>· {{ item.currentState }}</div>
|
||
</div>
|
||
<div class="proAreaBox">
|
||
<div class="proTitleBox">{{ item.name }}</div>
|
||
</div>
|
||
<van-divider style="margin:8px 0;" />
|
||
<div class="proDateBox">
|
||
<div>{{ item.createRecordTime }}</div>
|
||
</div>
|
||
</div>
|
||
</van-list>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { changeBottomStyle } from "@/olderMode/1.js";
|
||
import $ from "jquery";
|
||
export default {
|
||
data() {
|
||
return {
|
||
type: "",
|
||
// 初始数据
|
||
info: {
|
||
userName: "无数据",
|
||
idCard: "无数据",
|
||
prjList: [
|
||
{
|
||
area: "无数据",
|
||
currentState: "无数据",
|
||
zsbm: "无数据",
|
||
year: "无数据",
|
||
name: "无数据",
|
||
createRecordTime: "无数据"
|
||
}
|
||
]
|
||
}
|
||
};
|
||
},
|
||
created() {
|
||
if (sessionStorage.getItem("mode") == "older") {
|
||
changeBottomStyle();
|
||
}
|
||
this.onInit();
|
||
},
|
||
mounted() {
|
||
if (sessionStorage.getItem("mode") == "older") {
|
||
$(".container").addClass("old_container");
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取数据
|
||
onInit() {
|
||
this.type =
|
||
this.$route.params.type || window.sessionStorage.getItem("type");
|
||
if (this.$route.params.type) {
|
||
window.sessionStorage.setItem("type", this.$route.params.type);
|
||
}
|
||
let result = JSON.parse(window.sessionStorage.getItem("homeData"));
|
||
// console.log("啊", result);
|
||
if (result.data.success) {
|
||
this.info = result.data.data;
|
||
|
||
if (result.data.data.prjList.length == 0) {
|
||
this.$message({
|
||
message: "无征收项目",
|
||
duration: 3000,
|
||
type: "info",
|
||
center: true
|
||
});
|
||
}
|
||
} else {
|
||
let code = [6001, 6501];
|
||
if (code.indexOf(result.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);
|
||
}
|
||
}
|
||
},
|
||
setIdCard(id) {
|
||
return id == "无数据"
|
||
? id
|
||
: id.substr(0, 6) + "********" + id.substr(14, 4);
|
||
},
|
||
// 页面跳转
|
||
gotoDetail(id) {
|
||
if (window.sessionStorage.getItem("type") == "pg") {
|
||
// 评估结果一级页面
|
||
this.$router.push({
|
||
name: "evalute",
|
||
params: {
|
||
prjId: id
|
||
}
|
||
});
|
||
} else if (window.sessionStorage.getItem("type") == "xy") {
|
||
// 协议结果页面
|
||
this.$router.push({
|
||
name: "reportAgreement",
|
||
params: {
|
||
prjId: id
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.container {
|
||
.proTopBoxpg {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background: url(../../assets/img/zspg.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 90px;
|
||
}
|
||
.proTopBoxxy {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background: url(../../assets/img/zsxy.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 90px;
|
||
}
|
||
.proCenterBox {
|
||
overflow: hidden;
|
||
width: 95%;
|
||
margin-top: 78px;
|
||
border-radius: 6px;
|
||
background: rgba(248, 253, 255, 1);
|
||
box-shadow: 1px 1px 3px rgb(202, 201, 201);
|
||
.proCenterInfo {
|
||
display: flex;
|
||
padding-top: 20px;
|
||
// align-items: center;
|
||
> :nth-child(2) {
|
||
> div:nth-child(2) {
|
||
margin-top: 10px;
|
||
span:nth-child(2) {
|
||
padding-top: 1px;
|
||
}
|
||
}
|
||
}
|
||
.proCenterImg {
|
||
width: 45px;
|
||
height: 45px;
|
||
padding-right: 10px;
|
||
padding-left: 15px;
|
||
}
|
||
span {
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #09a4fa;
|
||
}
|
||
}
|
||
.proCenterFlex {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding-top: 15px;
|
||
margin-bottom: 15px;
|
||
div {
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 25px;
|
||
height: 25px;
|
||
color: #9da2a3;
|
||
}
|
||
}
|
||
}
|
||
|
||
.proList {
|
||
/* position: absolute; */
|
||
/* top: 230px; */
|
||
bottom: 0;
|
||
overflow-y: scroll;
|
||
width: 100%;
|
||
.proListBox {
|
||
margin: 15px 20px;
|
||
border-radius: 3px;
|
||
background-color: #fff;
|
||
.proAreaBox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px;
|
||
font-size: 16px;
|
||
> :nth-child(n + 2) {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 25px;
|
||
height: 25px;
|
||
color: #09a4fa;
|
||
}
|
||
.proArea {
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 25px;
|
||
height: 25px;
|
||
padding: 3px 17px;
|
||
color: #fff;
|
||
border-radius: 4px;
|
||
background: #09a4fa;
|
||
}
|
||
.proTitleBox {
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
line-height: 20px;
|
||
overflow: hidden;
|
||
height: 20px;
|
||
margin-left: 10px;
|
||
padding-left: 7px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
color: #252525;
|
||
border-left: 3px solid #09a4fa;
|
||
}
|
||
}
|
||
.proDateBox {
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
padding-right: 10px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
.shadow {
|
||
-webkit-box-shadow: rgb(189, 189, 189) 0 0 3px;
|
||
-moz-box-shadow: rgb(189, 189, 189) 0 0 3px;
|
||
box-shadow: rgb(189, 189, 189) 0 0 3px;
|
||
}
|
||
}
|
||
}
|
||
.old_container {
|
||
.proCenterInfo {
|
||
.proCenterImg {
|
||
margin-top: 10px;
|
||
}
|
||
span {
|
||
font-size: 20px !important;
|
||
}
|
||
> div:nth-child(2) {
|
||
> :nth-child(2) {
|
||
display: flex;
|
||
span:nth-child(1) {
|
||
white-space: nowrap;
|
||
}
|
||
span:nth-child(2) {
|
||
word-break: break-all;
|
||
line-height: 36px;
|
||
margin-top: -3px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.proCenterFlexFont {
|
||
font-size: 18px !important;
|
||
}
|
||
|
||
.proArea,
|
||
.proTitleBox {
|
||
font-size: 22px !important;
|
||
}
|
||
.proTitleBox {
|
||
height: unset !important;
|
||
line-height: unset !important;
|
||
}
|
||
.proAreaBox {
|
||
> :nth-child(n + 2) {
|
||
font-size: 18px !important;
|
||
}
|
||
}
|
||
.proDateBox {
|
||
font-size: 18px !important;
|
||
}
|
||
}
|
||
</style>
|