460 lines
12 KiB
Vue
460 lines
12 KiB
Vue
<template>
|
||
<div class="container">
|
||
<!-- 顶部 -->
|
||
<div class="top">
|
||
<div></div>
|
||
<div>
|
||
<i class="el-icon-user-solid"></i>
|
||
<span>被征收人姓名：胡伯钧</span>
|
||
</div>
|
||
<div>
|
||
<i class="el-icon-postcard"></i>
|
||
<span>身份证号码：330901197603064256</span>
|
||
</div>
|
||
</div>
|
||
<!-- 图片跳转 -->
|
||
<div class="middle">
|
||
<div @click="QRcode()"></div>
|
||
<div @click="evaluate()"></div>
|
||
<div @click="compensate()"></div>
|
||
</div>
|
||
<!-- 背景图 -->
|
||
<div class="background" @click="handle()">
|
||
<img src="../assets/image/background.png" alt="" />
|
||
</div>
|
||
<!-- 标题 -->
|
||
<el-card>
|
||
<div class="content">
|
||
<!-- 曙光一村 -->
|
||
<div>
|
||
<div>
|
||
<img src="../assets/image/window.png" alt="" />
|
||
</div>
|
||
<span>曙光一村地块</span>
|
||
<div>
|
||
<img src="../assets/image/xieyi.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<!-- 征收信息 -->
|
||
<div>
|
||
<div class="flex">
|
||
<img src="../assets/image/01zhushuju_hangzhengquyu@3x.png" alt="" />
|
||
<span>项目所在区域：{{ this.source.region }}</span>
|
||
</div>
|
||
<div class="flex">
|
||
<img src="../assets/image/bumenguanli-3@3x.png" alt="" />
|
||
<span>征收部门：{{ this.source.section }}</span>
|
||
</div>
|
||
<div class="flex">
|
||
<img src="../assets/image/yanchurili@3x.png" alt="" />
|
||
<span>所属年份：{{ this.source.date }}</span>
|
||
</div>
|
||
<div class="flex">
|
||
<img src="../assets/image/918caidan_wenjian@3x.png" alt="" />
|
||
<span
|
||
>征收决定号：<span style="color:blue">{{
|
||
this.source.number
|
||
}}</span></span
|
||
>
|
||
</div>
|
||
</div>
|
||
<!-- 分户评估结果 -->
|
||
<div>
|
||
<div>
|
||
<div>
|
||
<img src="../assets/image/pingu.png" alt="" />
|
||
</div>
|
||
<span>分户评估结果</span>
|
||
<div @click="evaluate()">
|
||
<img src="../assets/image/jiantou.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div></div>
|
||
<div>
|
||
<div class="flex">
|
||
<span> 评估报告编号：</span>
|
||
<span>{{ this.source.bianhao }}</span>
|
||
</div>
|
||
<div class="flex">
|
||
<span>被征收房屋地址：</span>
|
||
<span>{{ this.source.address }}</span>
|
||
</div>
|
||
<div class="flex">
|
||
<span> 评估总金额：</span>
|
||
<span style="color:red">{{ this.source.totalMoney }} </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 补偿协议 -->
|
||
<div>
|
||
<div>
|
||
<div>
|
||
<img src="../assets/image/xy.png" alt="" />
|
||
</div>
|
||
<span>补偿协议</span>
|
||
<div @click="compensate()">
|
||
<img src="../assets/image/jiantou.png" alt="" />
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div></div>
|
||
<div>
|
||
<div class="flex">
|
||
<span>协议编号：</span>
|
||
<span>{{ this.source.bianhao }}</span>
|
||
</div>
|
||
<div class="flex">
|
||
<span>被征收房屋地址：</span>
|
||
<span>{{ this.source.address }}</span>
|
||
</div>
|
||
<div class="flex">
|
||
<span>补偿方式：</span>
|
||
<span>{{ this.source.style }}</span>
|
||
</div>
|
||
<div class="flex">
|
||
<span>合计补偿资金：</span>
|
||
<span style="color:red">{{ this.source.money }} </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
<!-- 图片跳转 -->
|
||
<div>
|
||
<img src="../assets/image/zhengshou.png" alt="" />
|
||
</div>
|
||
<!-- 征收政策 -->
|
||
<div>
|
||
<span>征收政策</span>
|
||
<div>
|
||
<div>共8条</div>
|
||
<div>查看全部</div>
|
||
</div>
|
||
<el-card>
|
||
<div>宁波市住房和城乡建设委员会关于开展</div>
|
||
<div class="flex">
|
||
<div>
|
||
<span>发布时间：</span>
|
||
<span>2021-9-1</span>
|
||
</div>
|
||
<div>
|
||
<span>区域：</span>
|
||
<span>全大市</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/util'
|
||
export default {
|
||
data() {
|
||
return {
|
||
source: {
|
||
region: '海曙区',
|
||
section: '宁海县房屋征收管理中心',
|
||
date: 2019,
|
||
number: '海政发[2021]',
|
||
bianhao: '044',
|
||
address: '宁波市江北区泗洲街16号404',
|
||
totalMoney: '180234元',
|
||
style: '产权调换',
|
||
money: '180257元',
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
const servicecode = 'fwzs'
|
||
const date = new Date()
|
||
const fwzspwd = 'fwzspwd'
|
||
const ticket = this.$route.query.ticket
|
||
const dd = date
|
||
.getMonth()
|
||
.toString()
|
||
.padStart(2, '0')
|
||
console.log(13, dd)
|
||
const time =
|
||
date.getFullYear() +
|
||
'' +
|
||
this.pad(date.getMonth() + 1, 2) +
|
||
this.pad(date.getDate(), 2) +
|
||
this.pad(date.getHours(), 2) +
|
||
this.pad(date.getMinutes(), 2) +
|
||
this.pad(date.getSeconds(), 2)
|
||
const sign = this.$md5(servicecode + fwzspwd + time)
|
||
var url = `https://appapi.zjzwfw.gov.cn/sso/servlet/simpleauth?method=ticketValidation&servicecode=${servicecode}&time=${time}&sign=${sign}&st=${ticket}&datatype=datatype`
|
||
// 第一次请求
|
||
const data = request({
|
||
url: url,
|
||
})
|
||
console.log(1, data)
|
||
// 第二次请求
|
||
const datatype = {
|
||
result: '0',
|
||
token: '1231231231232asdasd',
|
||
}
|
||
const token = 'token'
|
||
const url2 = `https://appapi.zjzwfw.gov.cn/sso/servlet/simpleauth?method=getUserInfo&servicecode=${servicecode}&time=${time}&sign=${sign}&token=${token}&datatype=${datatype}`
|
||
const data2 = request({
|
||
url: url2,
|
||
})
|
||
console.log(2, data2)
|
||
},
|
||
methods: {
|
||
handle() {
|
||
console.log('评估页面跳转')
|
||
},
|
||
pad(num, n) {
|
||
var tbl = []
|
||
var len = n - num.toString().length
|
||
if (len <= 0) return num
|
||
if (!tbl[len]) tbl[len] = new Array(len + 1).join('0')
|
||
return tbl[len] + num
|
||
},
|
||
QRcode() {
|
||
console.log('跳转二维码页面')
|
||
},
|
||
// 跳转评估页面
|
||
evaluate() {
|
||
this.$router.push('/evaluate')
|
||
},
|
||
// 跳转协议页面
|
||
compensate() {
|
||
this.$router.push('/compensate')
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.container {
|
||
background-color: #f0f9fb;
|
||
background: url('../assets/image/3.png') no-repeat;
|
||
background-size: 100%;
|
||
.top {
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: 100px;
|
||
> :nth-child(1) {
|
||
height: 30px;
|
||
background-size: auto 100%;
|
||
background-image: url('../assets/image/person.png');
|
||
z-index: 99;
|
||
background-repeat: no-repeat;
|
||
}
|
||
}
|
||
.middle {
|
||
margin: 0 10px;
|
||
background-color: #ffffff;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
padding: 10px;
|
||
height: 100px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
> div {
|
||
height: 100%;
|
||
width: 32%;
|
||
background-size: 100% auto;
|
||
background-repeat: no-repeat;
|
||
}
|
||
> :nth-child(1) {
|
||
background: url('../assets/image/middle1.png') no-repeat;
|
||
background-size: auto 100%;
|
||
}
|
||
> :nth-child(2) {
|
||
background: url('../assets/image/middle2.png') no-repeat;
|
||
background-size: auto 100%;
|
||
}
|
||
> :nth-child(3) {
|
||
background: url('../assets/image/middle3.png') no-repeat;
|
||
background-size: auto 100%;
|
||
}
|
||
}
|
||
.background {
|
||
margin: 0 10px;
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
> .el-card {
|
||
margin: 10px;
|
||
padding: 0;
|
||
::v-deep.el-card__body {
|
||
padding: 0;
|
||
}
|
||
.content {
|
||
background-color: #ffffff;
|
||
> :nth-child(1) {
|
||
background: url('../assets/image/3.png') no-repeat;
|
||
background-size: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 10px 0;
|
||
> :nth-child(1) {
|
||
width: 20%;
|
||
text-align: left;
|
||
img {
|
||
width: 80%;
|
||
}
|
||
}
|
||
> span {
|
||
width: 50%;
|
||
}
|
||
> :nth-child(3) {
|
||
text-align: right;
|
||
img {
|
||
width: 50%;
|
||
}
|
||
}
|
||
}
|
||
// 征收信息
|
||
> :nth-child(2) {
|
||
> div {
|
||
margin-bottom: 10px;
|
||
}
|
||
img {
|
||
width: 5%;
|
||
}
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
// height: 100px;
|
||
padding-left: 10px;
|
||
.flex {
|
||
> :nth-child(2) {
|
||
width: 90%;
|
||
}
|
||
}
|
||
}
|
||
// 分户评估结果
|
||
> :nth-child(3) {
|
||
padding: 10px;
|
||
> :nth-child(1) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 15px 0;
|
||
align-items: center;
|
||
> :nth-child(1) {
|
||
width: 13%;
|
||
text-align: left;
|
||
img {
|
||
width: 80%;
|
||
}
|
||
}
|
||
> span {
|
||
width: 65%;
|
||
color: blue;
|
||
}
|
||
> :nth-child(3) {
|
||
text-align: right;
|
||
img {
|
||
width: 50%;
|
||
}
|
||
}
|
||
}
|
||
> :nth-child(2) {
|
||
display: flex;
|
||
// padding: 10px;
|
||
> :nth-child(1) {
|
||
width: 10%;
|
||
background: url('../assets/image/shuxian0.png') no-repeat;
|
||
background-size: auto 100%;
|
||
background-position: center;
|
||
}
|
||
> :nth-child(2) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 90%;
|
||
> div {
|
||
margin: 10px 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 补偿协议
|
||
> :nth-child(4) {
|
||
padding: 10px;
|
||
> :nth-child(1) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 15px 0;
|
||
align-items: center;
|
||
> :nth-child(1) {
|
||
width: 13%;
|
||
text-align: left;
|
||
img {
|
||
width: 80%;
|
||
}
|
||
}
|
||
> span {
|
||
width: 65%;
|
||
color: blue;
|
||
}
|
||
> :nth-child(3) {
|
||
text-align: right;
|
||
img {
|
||
width: 50%;
|
||
}
|
||
}
|
||
}
|
||
> :nth-child(2) {
|
||
display: flex;
|
||
> :nth-child(1) {
|
||
width: 10%;
|
||
background: url('../assets/image/shuxian.png') no-repeat;
|
||
background-size: auto 100%;
|
||
background-position: center;
|
||
}
|
||
> :nth-child(2) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 90%;
|
||
> div {
|
||
margin: 10px 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 图片跳转
|
||
> :nth-child(5) {
|
||
margin: 10px;
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
// 征收政策
|
||
> :nth-child(6) {
|
||
margin: 10px;
|
||
> :nth-child(2) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 10px 0;
|
||
}
|
||
> .el-card {
|
||
padding: 10px;
|
||
::v-deep.el-card__body {
|
||
padding: 0;
|
||
}
|
||
.flex {
|
||
> div {
|
||
margin: 10px 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|