528 lines
14 KiB
Vue
528 lines
14 KiB
Vue
<template>
|
||
<div class="Detail">
|
||
<div class="header-top">
|
||
<div class="avatars" v-if="data.name">{{ data.name.substring(data.name.length, data.name.length - 2) }}</div>
|
||
|
||
<div class="right">
|
||
<div class="names">{{ data.name }}的上报</div>
|
||
|
||
<div class="times">2021-05-06 13:45</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header-middle">
|
||
<div class="titles">世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多</div>
|
||
|
||
<span class="status status0">待处理</span>
|
||
|
||
<div class="card">
|
||
<span class="card-left">事件类型</span>
|
||
<span class="card-right">聚众闹事</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<span class="card-left">所属网格</span>
|
||
<span class="card-right">聚众闹事</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<span class="card-left">联系方式</span>
|
||
<span class="card-right">聚众闹事</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<span class="card-left">上报地址</span>
|
||
<span class="card-right">
|
||
<span>{{ data.corpId }}</span>
|
||
<u-icon name="phone-fill" color="#3D94FB"></u-icon>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<span class="card-left">上报地址</span>
|
||
<span class="card-right">广东省中关村世纪花园北一组广东省中关村世纪花园北一组</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<span class="card-left">上报来源</span>
|
||
<span class="card-right">三角湖居民社群 李毅 小程序填报三角湖居民社群 李毅 小程序填报三角湖居民社群 李毅 小程序填报</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<span class="card-left">照片</span>
|
||
</div>
|
||
|
||
<img src="./components/yan.jpg" alt="" v-for="(item, i) in 4" :key="i" />
|
||
</div>
|
||
|
||
<div class="header-bottom">
|
||
<div class="line"></div>
|
||
|
||
<div class="plan">
|
||
<div class="nav">
|
||
<span>办理进度</span>
|
||
<span>(待受理)</span>
|
||
</div>
|
||
|
||
<div class="cards">
|
||
<div class="cardss">
|
||
<!-- v-for="(item, index) in data.processNodes" :key="index" -->
|
||
<div class="cardss-left">
|
||
<span v-if="data.name">
|
||
李伟民
|
||
<!-- {{ data.name.split(',')[0].substring(data.name.split(',')[0].length - 2, data.name.split(',')[0].length) }} -->
|
||
</span>
|
||
|
||
<img src="./components/1.png" class="avatarIcon" alt="" />
|
||
</div>
|
||
|
||
<div class="cardss-right">
|
||
<div class="cardsss-right-left">
|
||
<div class="cardssss-right-left-top">
|
||
<span>李维民</span>
|
||
<span style="margin-left: 26px">
|
||
111
|
||
<!-- {{ item.status == 0 ? '驳回' : '通过' }} -->
|
||
</span>
|
||
</div>
|
||
|
||
<!-- <div class="cardssss-right-left-bottom" v-if="item.auditName.split(',').length > 3">
|
||
<span v-for="(items, i) in item.auditName.split(',')" :key="i" v-if="i < 3" style="margin-left: 5px">
|
||
<span> {{ items }} </span>
|
||
</span>
|
||
<span>...</span>
|
||
</div>
|
||
<div class="cardssss-right-left-bottom" v-else>{{ item.auditName }}</div> -->
|
||
</div>
|
||
|
||
<div class="cardees-right-right" v-if="">2021-12-17</div>
|
||
</div>
|
||
|
||
<div class="lines"></div>
|
||
</div>
|
||
|
||
<div class="cardes-msg-top">1111</div>
|
||
|
||
<div class="imgs">
|
||
<img src="./components/yan.jpg" alt="" v-for="(e, i) in 4" :key="i" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cards">
|
||
<div class="cardss">
|
||
<!-- v-for="(item, index) in data.processNodes" :key="index" -->
|
||
<div class="cardss-left">
|
||
<span v-if="data.name">
|
||
李伟民
|
||
<!-- {{ data.name.split(',')[0].substring(data.name.split(',')[0].length - 2, data.name.split(',')[0].length) }} -->
|
||
</span>
|
||
|
||
<img src="./components/1.png" class="avatarIcon" alt="" />
|
||
</div>
|
||
|
||
<div class="cardss-right">
|
||
<div class="cardsss-right-left">
|
||
<div class="cardssss-right-left-top">
|
||
<span>李维民</span>
|
||
<span style="margin-left: 26px">
|
||
111
|
||
<!-- {{ item.status == 0 ? '驳回' : '通过' }} -->
|
||
</span>
|
||
</div>
|
||
|
||
<!-- <div class="cardssss-right-left-bottom" v-if="item.auditName.split(',').length > 3">
|
||
<span v-for="(items, i) in item.auditName.split(',')" :key="i" v-if="i < 3" style="margin-left: 5px">
|
||
<span> {{ items }} </span>
|
||
</span>
|
||
<span>...</span>
|
||
</div>
|
||
<div class="cardssss-right-left-bottom" v-else>{{ item.auditName }}</div> -->
|
||
</div>
|
||
|
||
<div class="cardees-right-right" v-if="">2021-12-17</div>
|
||
</div>
|
||
|
||
<div class="lines"></div>
|
||
</div>
|
||
|
||
<div class="cardes-msg-top">1111</div>
|
||
|
||
<div class="imgs">
|
||
<img src="./components/yan.jpg" alt="" v-for="(e, i) in 4" :key="i" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cards">
|
||
<div class="cardss">
|
||
<!-- v-for="(item, index) in data.processNodes" :key="index" -->
|
||
<div class="cardss-left">
|
||
<span v-if="data.name">
|
||
李伟民
|
||
<!-- {{ data.name.split(',')[0].substring(data.name.split(',')[0].length - 2, data.name.split(',')[0].length) }} -->
|
||
</span>
|
||
|
||
<img src="./components/1.png" class="avatarIcon" alt="" />
|
||
</div>
|
||
|
||
<div class="cardss-right">
|
||
<div class="cardsss-right-left">
|
||
<div class="cardssss-right-left-top">
|
||
<span>李维民</span>
|
||
<span style="margin-left: 26px">
|
||
111
|
||
<!-- {{ item.status == 0 ? '驳回' : '通过' }} -->
|
||
</span>
|
||
</div>
|
||
|
||
<!-- <div class="cardssss-right-left-bottom" v-if="item.auditName.split(',').length > 3">
|
||
<span v-for="(items, i) in item.auditName.split(',')" :key="i" v-if="i < 3" style="margin-left: 5px">
|
||
<span> {{ items }} </span>
|
||
</span>
|
||
<span>...</span>
|
||
</div>
|
||
<div class="cardssss-right-left-bottom" v-else>{{ item.auditName }}</div> -->
|
||
</div>
|
||
|
||
<div class="cardees-right-right" v-if="">2021-12-17</div>
|
||
</div>
|
||
|
||
<div class="lines"></div>
|
||
</div>
|
||
|
||
<div class="cardes-msg-top">1111</div>
|
||
|
||
<div class="imgs">
|
||
<img src="./components/yan.jpg" alt="" v-for="(e, i) in 4" :key="i" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fixedBtn">
|
||
<div class="status00">
|
||
<div class="columns" @click="toTransfer">
|
||
<img src="./components/22.png" alt="" />
|
||
<span class="hint">转交事件</span>
|
||
</div>
|
||
|
||
<div class="columns" @click="toReject">
|
||
<img src="./components/22.png" alt="" />
|
||
<span class="hint">拒绝受理</span>
|
||
</div>
|
||
|
||
<div class="doIt" @click="ToMyDoIt">我来受理</div>
|
||
</div>
|
||
|
||
<!-- <div class="endDoIt">我已办结</div> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Detail',
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
data: {},
|
||
id: '',
|
||
}
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
onLoad(o) {
|
||
this.id = o.id
|
||
this.$dict.load('realityStatus').then(() => {
|
||
this.getDetail()
|
||
})
|
||
},
|
||
onShow() {},
|
||
methods: {
|
||
getDetail() {
|
||
this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.id}`).then((res) => {
|
||
if (res?.data) {
|
||
this.data = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
toTransfer() {
|
||
console.log('转交事件')
|
||
uni.navigateTo({ url: `./Transfer?id=${this.id}` })
|
||
},
|
||
|
||
toReject() {
|
||
console.log('拒绝受理')
|
||
uni.navigateTo({ url: `./Reject?id=${this.id}` })
|
||
},
|
||
|
||
ToMyDoIt() {
|
||
console.log('我来受理')
|
||
uni.navigateTo({ url: `./DoThings?id=${this.id}` })
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
uni-page-body {
|
||
height: 100%;
|
||
}
|
||
.Detail {
|
||
height: 100%;
|
||
background: #fff;
|
||
|
||
.header-top {
|
||
display: flex;
|
||
margin: 26px 0 14px 0;
|
||
padding: 0 32px;
|
||
.avatars {
|
||
width: 80px;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
background: #4e8eee;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
text-align: center;
|
||
font-size: 28px;
|
||
font-weight: 500;
|
||
margin-right: 16px;
|
||
}
|
||
.right {
|
||
.names {
|
||
font-size: 32px;
|
||
font-weight: 500;
|
||
}
|
||
.times {
|
||
margin-top: 10px;
|
||
font-size: 28px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.header-middle {
|
||
padding: 0 32px;
|
||
.titles {
|
||
margin: 32px 0;
|
||
line-height: 1.4;
|
||
word-break: break-all;
|
||
font-size: 40px;
|
||
font-weight: 600;
|
||
}
|
||
.status {
|
||
display: inline-block;
|
||
margin-bottom: 14px;
|
||
padding: 4px 8px;
|
||
font-size: 26px;
|
||
color: #ffffff;
|
||
border-radius: 8px;
|
||
}
|
||
.status0 {
|
||
background: #ff883c;
|
||
}
|
||
|
||
.status1 {
|
||
background: #1aaaff;
|
||
}
|
||
|
||
.status2 {
|
||
background: #42d784;
|
||
}
|
||
|
||
.status3 {
|
||
background: #ff4466;
|
||
}
|
||
|
||
.card {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 34px 0;
|
||
border-bottom: 1px solid #ddd;
|
||
.card-left {
|
||
width: 46%;
|
||
font-size: 32px;
|
||
color: #999999;
|
||
}
|
||
.card-right {
|
||
font-size: 32px;
|
||
.u-icon {
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
img {
|
||
width: 225px;
|
||
height: 226px;
|
||
margin-right: 8px;
|
||
}
|
||
img:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
.header-bottom {
|
||
padding-bottom: 80px;
|
||
.line {
|
||
height: 16px;
|
||
background: #f3f6f9;
|
||
}
|
||
|
||
.plan {
|
||
padding: 0 32px;
|
||
.nav {
|
||
padding: 26px 0;
|
||
}
|
||
|
||
.cards {
|
||
position: relative;
|
||
padding-bottom: 80px;
|
||
.cardss {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.cardss-left {
|
||
position: relative;
|
||
width: 80px;
|
||
height: 80px;
|
||
text-align: center;
|
||
line-height: 80px;
|
||
color: #fff;
|
||
background: #197df0;
|
||
border: 1px solid #dddddd;
|
||
border-radius: 50%;
|
||
font-size: 28px;
|
||
z-index: 9;
|
||
// img {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// border-radius: 50%;
|
||
// }
|
||
.avatarIcon {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 38px;
|
||
height: 38px;
|
||
}
|
||
}
|
||
.cardss-right {
|
||
width: calc(100% - 110px);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.cardsss-right-left {
|
||
.cardssss-right-left-top {
|
||
width: 300px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
font-size: 32px;
|
||
}
|
||
.cardssss-right-left-bottom {
|
||
margin-top: 10px;
|
||
font-size: 28px;
|
||
color: #666666;
|
||
}
|
||
}
|
||
.cardees-right-right {
|
||
font-size: 28px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.lines {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 40px;
|
||
width: 4px;
|
||
height: 100%;
|
||
background: #eeeeee;
|
||
}
|
||
}
|
||
.cardes-msg-top {
|
||
font-size: 28px;
|
||
color: #343d65;
|
||
margin-top: 10px;
|
||
margin-left: 110px;
|
||
}
|
||
|
||
.imgs {
|
||
margin-top: 10px;
|
||
margin-left: 110px;
|
||
img {
|
||
width: 136px;
|
||
height: 136px;
|
||
border-radius: 4px;
|
||
margin-right: 12px;
|
||
}
|
||
img:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
.cards:last-child {
|
||
.lines {
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fixedBtn {
|
||
background: #fff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
z-index: 999;
|
||
.status00 {
|
||
display: flex;
|
||
|
||
.columns {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 22%;
|
||
padding: 16px 0;
|
||
img {
|
||
width: 44px;
|
||
height: 42px;
|
||
}
|
||
.hint {
|
||
margin-top: 4px;
|
||
font-size: 28px;
|
||
color: #666666;
|
||
}
|
||
}
|
||
.doIt {
|
||
width: 56%;
|
||
background: #3975c6;
|
||
text-align: center;
|
||
height: 112px;
|
||
line-height: 112px;
|
||
|
||
font-size: 36px;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.endDoIt {
|
||
background: #3975c6;
|
||
text-align: center;
|
||
padding: 34px 0;
|
||
|
||
font-size: 32px;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|