165 lines
3.4 KiB
Vue
165 lines
3.4 KiB
Vue
<template>
|
|
<div class="myReply">
|
|
<template>
|
|
<AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item)">
|
|
<template #custom>
|
|
<div class="card-top">
|
|
<div class="titles">{{ item.content }}</div>
|
|
|
|
<div class="types">
|
|
<span class="label label1">事件类型</span>
|
|
<span class="types-right">{{ item.groupName }}</span>
|
|
</div>
|
|
|
|
<div class="gards">
|
|
<div class="label">所属网格</div>
|
|
<div class="gards-right">{{ item.girdName }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status" :class="item.eventStatus == 0 ? 'status1':'status2'" v-if="item.eventStatus">
|
|
<span class="icon"></span>
|
|
<span>
|
|
{{ $dict.getLabel('clapEventStatus', item.eventStatus) }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</AiCard>
|
|
|
|
<AiEmpty v-if="!datas.length"></AiEmpty>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'myReply',
|
|
components: {},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
datas: [],
|
|
current: 1,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
},
|
|
watch: {},
|
|
onLoad() {
|
|
this.getList()
|
|
},
|
|
onShow() {
|
|
document.title = '我的上报'
|
|
},
|
|
methods: {
|
|
getList() {
|
|
this.$http
|
|
.post(`/app/appclapeventinfo/list`, null, {
|
|
params: {
|
|
size: 10,
|
|
current: this.current,
|
|
openId: this.user.openId,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
|
|
this.pages = res.data.pages
|
|
this.$forceUpdate()
|
|
}
|
|
})
|
|
},
|
|
|
|
goDetail(item) {
|
|
uni.navigateTo({ url: `./detail?id=${item.id}&isMine=1` })
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.uni-page-body {
|
|
height: 100%;
|
|
}
|
|
.myReply {
|
|
height: 100%;
|
|
::v-deep .AiTopFixed .content {
|
|
padding: 0;
|
|
}
|
|
::v-deep .AiCard {
|
|
background: none;
|
|
padding: 24px 30px 0;
|
|
|
|
.start {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
|
|
.card-top {
|
|
padding: 32px;
|
|
.titles {
|
|
margin-bottom: 34px;
|
|
font-size: 32px;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 1.4;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.types,
|
|
.gards {
|
|
margin-top: 8px;
|
|
font-size: 26px;
|
|
display: flex;
|
|
|
|
.types-right,
|
|
.gards-right {
|
|
color: #333333;
|
|
width: calc(100% - 120px);
|
|
}
|
|
|
|
.label {
|
|
width: 120px;
|
|
}
|
|
.label1 {
|
|
width: 120px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.status {
|
|
padding: 32px;
|
|
border-top: 1px solid #dddddd;
|
|
.icon {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
vertical-align: middle;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
.status1 {
|
|
color: #ff883c;
|
|
.icon {
|
|
background: #ff883c;
|
|
}
|
|
}
|
|
|
|
.status2 {
|
|
color: #42d784;
|
|
.icon {
|
|
background: #42d784;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|