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

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

@@ -1,26 +1,26 @@
<template> <template>
<div class="photo-detail"> <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> :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
<div class="header-content-bg"> <div class="header-content-bg">
<img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt=""> <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
</div> </div>
<AiGroup noBorder> <div class="border-r">
<h2>{{ info.content }}</h2> <AiGroup noBorder description abelColor="#999">
<div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/> <h2>{{ info.content }}</h2>
</AiGroup> <div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
<AiGroup description noBorder labelColor="#999"> <AiItem label="事件来源" :value="$dict.getLabel('residentEventSource', info.eventSource)"/>
<AiItem label="事件来源" :value="$dict.getLabel('residentEventSource', info.eventSource)"/> <AiItem label="事件类型" :value="info.groupName"/>
<AiItem label="事件类型" :value="info.groupName"/> <AiItem label="所属网格" :value="info.girdName"/>
<AiItem label="所属网格" :value="info.girdName"/> <AiItem label="上报时间" :value="info.createTime"/>
<AiItem label="上报时间" :value="info.createTime"/> <AiItem label="照片" top-label>
<AiItem label="照片" top-label> <div class="flex wrap">
<div class="flex wrap"> <image class="imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
<image class="imageItem" v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/> </div>
</div> <span v-if="!info.files.length">暂无照片</span>
<span v-if="!info.files.length">暂无照片</span> </AiItem>
</AiItem> </AiGroup>
</AiGroup> </div>
<!-- <u-gap height="24"/> <!-- <u-gap height="24"/>
<AiGroup title="处理详情" v-if="info.eventStatus > 1" description noBorder labelColor="#999"> <AiGroup title="处理详情" v-if="info.eventStatus > 1" description noBorder labelColor="#999">
<AiItem label="处理结果" top-label :value="result.doExplain"/> <AiItem label="处理结果" top-label :value="result.doExplain"/>
@@ -33,28 +33,33 @@
</AiGroup> --> </AiGroup> -->
<!-- <u-gap height="24"/> --> <!-- <u-gap height="24"/> -->
<!-- <u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/> --> <!-- <u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/> -->
<div class="tab-content"> <div class="border-r pad-b252">
<div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)" :class="currentTab == index ? 'active' : ''">{{ item.name }} <div class="tab-content">
<span class="active-line" v-if="currentTab == index"/> <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> </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> </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="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"> <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> </AiEvaluation>
</div> </div>
</template> </template>
@@ -154,9 +159,9 @@ export default {
<style lang="scss"> <style lang="scss">
.photo-detail { .photo-detail {
padding: 32px 0 160px; // padding: 32px 0 160px;
margin-bottom: 60px; // margin-bottom: 60px;
background: #fff; // background: #fff;
.header-content-bg { .header-content-bg {
width: 100%; width: 100%;
position: fixed; position: fixed;
@@ -166,28 +171,63 @@ export default {
height: 592px; 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 { h2 {
width: calc(100% - 32px); font-family: PingFangSC-SNaNpxibold;
line-height: 1.3; font-weight: 600;
margin-bottom: 26px; font-size: 36px;
color: #333333; color: #333;
text-align: justify; letter-spacing: 0;
font-size: 40px; line-height: 56px;
margin-bottom: 16px;
} }
::v-deep.stepTitle { ::v-deep .normal {
min-height: 44px; line-height: 44px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 32px; 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 { .stepTime {
line-height: 44px; line-height: 40px;
font-family: PingFangSC-Regular;
font-size: 28px;
color: #999;
margin-bottom: 16px;
} }
.stepContent { .stepContent {
color: #343D65; line-height: 40px;
font-family: PingFangSC-Regular;
font-size: 28px;
color: #333;
margin-bottom: 16px;
} }
.status-name { .status-name {
@@ -265,5 +305,26 @@ export default {
color: #333; 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> </style>

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

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

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

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