kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

居民上报

Browse Source
This commit is contained in:
liuye
2024-07-18 15:06:20 +08:00
parent 41a4560aba
commit 7952757394
4 changed files with 240 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/project/weiyang/AppPhotoReport/AppPhotoReport.vue
View File

@@ -27,7 +27,7 @@
<i :class="'status-' + item.eventStatus"></i>
<span :class="'status-' + item.eventStatus">{{ item.statusName }}</span>
</div>
<AiEvaluation :bid="item.id" v-if="item.eventStatus>1">
<AiEvaluation :bid="item.id" v-if="item.eventStatus>1" >
<div class="itemBtn">去评价</div>
<div slot="finish" class="finish">已评价</div>
</AiEvaluation>
@@ -36,8 +36,11 @@
</div>
<AiEmpty v-if="!list.length"/>
</div>
<div class="btn-wrapper">
<!-- <div class="btn-wrapper">
<div class="btn" @click="toReport" hover-class="text-hover">我要上报</div>
</div> -->
<div class="footer" @click="toReport">
<div class="btn">我要上报</div>
</div>
</div>
</template>
@@ -133,50 +136,46 @@ export default {
}
}
.photo-list__wrapper {
padding: 16px 0 252px 0;
}
.photo-item {
width: 686px;
margin: 0 32px 24px;
background: #FFFFFF;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
border-radius: 16px;
overflow: hidden;
width: calc(100% - 64px);
margin: 0 0 32px 32px;
.photo-item__top {
padding: 32px;
padding: 32px 32px 24px 32px;
text-align: justify;
h2 {
margin-bottom: 32px;
line-height: 1.4;
color: #333333;
width: 100%;
line-height: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 32px;
font-weight: 600;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 24px;
}
.photo-item__top--info-item {
// display: flex;
// align-items: center;
&:last-child {
margin-bottom: 8px;
}
line-height: 40px;
font-family: PingFangSC-Regular;
font-size: 28px;
margin-bottom: 8px;
label {
display: inline-block;
margin-right: 32px;
color: #999999;
font-size: 26px;
margin-right: 24px;
color: #999;
}
span {
display: inline-block;
color: #333333;
font-size: 26px;
color: #333;
}
}
}
@@ -187,22 +186,23 @@ export default {
height: 104px;
padding: 0 32px;
border-top: 1px solid #DDDDDD;
font-family: PingFangSC-Regular;
font-size: 24px;
line-height: 40px;
i {
width: 8px;
height: 8px;
margin-right: 8px;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 16px;
border-radius: 50%;
background: #FF883C;
}
.itemBtn {
border: 1px solid #4181FF;
border-radius: 8px;
border-radius: 4px;
color: #4181FF;
padding: 8px 22px;
padding: 8px 24px;
}
.finish {
@@ -232,5 +232,30 @@ export default {
}
}
}
::v-deep .u-swipe-action {
border-radius: 16px;
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: #F4F5FA;
padding: 64px 64px 68px 64px;
z-index: 9;
.btn {
width: calc(100% - 128px);
line-height: 88px;
background: #026AF2;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #FFF;
text-align: center;
}
}
}
</style>

159
src/project/weiyang/AppPhotoReport/PhotoDetail.vue
View File

@@ -1,26 +1,26 @@
<template>
<div class="photo-detail">
<u-navbar back-icon-color="#000" title="事件上报" title-color="#000" title-width="300" title-size="32"
<u-navbar back-icon-color="#000" title="居民上报" title-color="#000" title-width="300" title-size="32"
:title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
<div class="header-content-bg">
<img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
</div>
<AiGroup noBorder>
<h2>{{ info.content }}</h2>
<div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
</AiGroup>
<AiGroup description noBorder labelColor="#999">
<AiItem label="事件来源" :value="$dict.getLabel('residentEventSource', info.eventSource)"/>
<AiItem label="事件类型" :value="info.groupName"/>
<AiItem label="所属网格" :value="info.girdName"/>
<AiItem label="上报时间" :value="info.createTime"/>
<AiItem label="照片" top-label>
<div class="flex wrap">
<image class="imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
</div>
<span v-if="!info.files.length">暂无照片</span>
</AiItem>
</AiGroup>
<div class="border-r">
<AiGroup noBorder description abelColor="#999">
<h2>{{ info.content }}</h2>
<div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
<AiItem label="事件来源" :value="$dict.getLabel('residentEventSource', info.eventSource)"/>
<AiItem label="事件类型" :value="info.groupName"/>
<AiItem label="所属网格" :value="info.girdName"/>
<AiItem label="上报时间" :value="info.createTime"/>
<AiItem label="照片" top-label>
<div class="flex wrap">
<image class="imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
</div>
<span v-if="!info.files.length">暂无照片</span>
</AiItem>
</AiGroup>
</div>
<!-- <u-gap height="24"/>
<AiGroup title="处理详情" v-if="info.eventStatus > 1" description noBorder labelColor="#999">
<AiItem label="处理结果" top-label :value="result.doExplain"/>
@@ -33,28 +33,33 @@
</AiGroup> -->
<!-- <u-gap height="24"/> -->
<!-- <u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/> -->
<div class="tab-content">
<div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)" :class="currentTab == index ? 'active' : ''">{{ item.name }}
<span class="active-line" v-if="currentTab == index"/>
<div class="border-r pad-b252">
<div class="tab-content">
<div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)" :class="currentTab == index ? 'active' : ''">{{ item.name }}
<span class="active-line" v-if="currentTab == index"/>
</div>
</div>
<u-gap height="24"/>
<AiGroup noBorder v-if="currentTab=='0'">
<AiStep v-for="(item,i) in process" :key="item.id" :index="i">
<div class="start">
<div class="fill stepTitle" v-text="item.systemExplain"/>
<div class="color-999 mar-r32 stepTime" v-text="item.doTime"/>
</div>
<div v-if="item.doExplain" class="stepContent mar-t8" v-text="item.doExplain"/>
<div class="imgs">
<img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index" @click="previewImage(item.files, e.url)"/>
</div>
<u-gap height="48"/>
</AiStep>
</AiGroup>
</div>
<u-gap height="24"/>
<AiGroup noBorder v-if="currentTab=='0'">
<AiStep v-for="(item,i) in process" :key="item.id" :index="i">
<div class="flex start">
<div class="fill stepTitle" v-text="item.systemExplain"/>
<div class="color-999 mar-r32 stepTime" v-text="item.doTime"/>
</div>
<div v-if="item.doExplain" class="stepContent mar-t8" v-text="item.doExplain"/>
<div class="imgs">
<img :src="e.url" alt="" v-for="(e, index) in item.files" :key="index" @click="previewImage(item.files, e.url)"/>
</div>
<u-gap height="48"/>
</AiStep>
</AiGroup>
<AiEvaluation v-if="currentTab=='1' && showEvaluation" :bid="info.id" type="show"/>
<AiEvaluation v-if="info.eventStatus > 1 && showEvaluation" v-model="evaluation" class="fixed-bottom bg-fff" :bid="info.id">
<div class="bottomBtn">去评价</div>
<div class="footer">
<div class="btn">去评价</div>
</div>
</AiEvaluation>
</div>
</template>
@@ -154,9 +159,9 @@ export default {
<style lang="scss">
.photo-detail {
padding: 32px 0 160px;
margin-bottom: 60px;
background: #fff;
// padding: 32px 0 160px;
// margin-bottom: 60px;
// background: #fff;
.header-content-bg {
width: 100%;
position: fixed;
@@ -166,28 +171,63 @@ export default {
height: 592px;
}
}
.border-r {
width: calc(100% - 64px);
margin: 0 0 32px 32px;
background-color: #fff;
border-radius: 16px;
}
.pad-b252 {
padding-bottom: 252px;
}
::v-deep .AiGroup {
padding: 32px 0 32px 32px;
box-sizing: border-box;
background-color: none!important;
}
h2 {
width: calc(100% - 32px);
line-height: 1.3;
margin-bottom: 26px;
color: #333333;
text-align: justify;
font-size: 40px;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 36px;
color: #333;
letter-spacing: 0;
line-height: 56px;
margin-bottom: 16px;
}
::v-deep.stepTitle {
min-height: 44px;
::v-deep .normal {
line-height: 44px;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 32px;
color: #333;
}
::v-deep .topLabel {
border-bottom: 0!important;
}
::v-deep .stepTitle {
line-height: 44px;
font-family: PingFangSC-Regular;
font-size: 32px;
color: #333;
margin-bottom: 8px;
}
.stepTime {
line-height: 44px;
line-height: 40px;
font-family: PingFangSC-Regular;
font-size: 28px;
color: #999;
margin-bottom: 16px;
}
.stepContent {
color: #343D65;
line-height: 40px;
font-family: PingFangSC-Regular;
font-size: 28px;
color: #333;
margin-bottom: 16px;
}
.status-name {
@@ -265,5 +305,26 @@ export default {
color: #333;
}
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: #F4F5FA;
padding: 64px 64px 68px 64px;
z-index: 9;
.btn {
width: calc(100% - 128px);
line-height: 88px;
background: #026AF2;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #FFF;
text-align: center;
}
}
}
</style>

80
src/project/weiyang/AppPhotoReport/PhotoForm.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="album">
<u-navbar back-icon-color="#000" title="事件上报" title-color="#000" title-width="300" title-size="32"
<u-navbar back-icon-color="#000" title="居民上报" title-color="#000" title-width="300" title-size="32"
:title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
<div class="header-content-bg">
<img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
@@ -45,7 +45,7 @@
</div>
</div>
<div class="form-item">
<div class="form-item__wrapper">
<div class="form-item__wrapper form-gird">
<div class="form-item__title">
<i>*</i>
<h2>所属网格</h2>
@@ -95,8 +95,11 @@
</div>
</div>
</div>
<div class="btn-wrapper">
<!-- <div class="btn-wrapper">
<div class="btn" hover-class="text-hover" @click="submit">提交</div>
</div> -->
<div class="footer" @click="submit">
<div class="btn">保存</div>
</div>
<AiLogin ref="login"/>
</div>
@@ -253,9 +256,9 @@ export default {
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.album {
padding-bottom: 140px;
padding-bottom: 252px;
.header-content-bg {
width: 100%;
position: fixed;
@@ -268,20 +271,23 @@ export default {
.form-item__group {
margin-bottom: 24px;
background: #fff;
width: calc(100% - 64px);
margin: 16px 0 32px 32px;
border-radius: 16px;
}
.form-item {
padding-left: 32px;
position: relative;
.form-item__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 128px;
padding-right: 28px;
border-bottom: 1px solid #DDDDDD;
border-bottom: 1px solid #DDD;
position: relative;
line-height: 44px;
padding: 34px 32px 34px 0;
input {
flex: 1;
height: 100%;
@@ -292,7 +298,7 @@ export default {
.form-item__right {
display: flex;
align-items: center;
font-size: 32px;
font-size: 28px;
span {
max-width: 400px;
@@ -305,7 +311,7 @@ export default {
i {
margin-right: 8px;
color: #999999;
color: #999;
}
}
}
@@ -319,22 +325,29 @@ export default {
.form-item__title {
display: flex;
align-items: center;
font-family: PingFangSC-Regular;
font-size: 32px;
color: #333;
i {
font-size: 32px;
color: #FF4466;
position: absolute;
left: -14px;
font-family: PingFangSC-Regular;
font-size: 32px;
color: #F46;
}
span {
font-size: 28px;
color: #999999;
color: #999;
}
h2 {
padding: 0 4px;
font-weight: 600;
font-weight: 400;
font-size: 32px;
color: #333333;
color: #333;
}
}
@@ -352,21 +365,50 @@ export default {
}
.form-item__title {
padding: 32px 0;
// padding: 32px 0;
margin-bottom: 16px;
}
.form-item__right {
padding-left: 18px;
// padding-left: 18px;
}
}
}
.form-gird {
padding-bottom: 64px!important;
}
.tips {
font-size: 24px;
color: #f46;
line-height: 36px;
position: absolute;
bottom: 8px;
left: 22px;
bottom: 16px;
}
::v-deep .AiMore {
.u-icon__label {
font-size: 28px!important;
}
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: #F4F5FA;
padding: 64px 64px 68px 64px;
z-index: 9;
.btn {
width: calc(100% - 128px);
line-height: 88px;
background: #026AF2;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #FFF;
text-align: center;
}
}
}
</style>

25
src/project/weiyang/AppPhotoReport/PhotoResult.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="result">
<u-navbar back-icon-color="#000" title="事件上报" title-color="#000" title-width="300" title-size="32"
<u-navbar back-icon-color="#000" title="居民上报" title-color="#000" title-width="300" title-size="32"
:title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
<div class="header-content-bg">
<img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
<image src="/static/img/result.png" class="success-img" />
<h2>上报成功！</h2>
<div class="result-btn" hover-class="text-hover" @click="back">前往查看</div>
</div>
<image src="/static/img/result.png" />
<h2>上报成功！</h2>
<div class="result-btn" hover-class="text-hover" @click="back">前往查看</div>
</div>
</template>
@@ -41,21 +41,16 @@
<style lang="scss">
.result {
min-height: 100vh;
padding-top: 160px;
box-sizing: border-box;
text-align: center;
background: #fff;
.header-content-bg {
width: 100%;
position: fixed;
z-index: -1;
img {
width: 100%;
height: 592px;
}
height: 592px;
background-image: url('https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png');
background-size: 100%;
}
image {
.success-img {
padding-top: 80px;
width: 220px;
height: 220px;
}