事件上报
This commit is contained in:
liuye
@@ -28,7 +28,7 @@ export default {
|
||||
onLoad(query) {
|
||||
if (query.type !== '0') {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '社区公约'
|
||||
title: query.type == 4 ? '社区公约' : '党员阵地'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<div class="AppEnteringCommunity">
|
||||
<div class="AppPartyEnteringCommunity">
|
||||
<div class="header" :class="[isFixed ? 'header-active' : '']">
|
||||
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
|
||||
<div class="nav-bar"><h2 v-text="`社区`"/></div>
|
||||
<div class="nav-bar">
|
||||
<h2>进村</h2>
|
||||
</div>
|
||||
</div>
|
||||
<header>
|
||||
<image src="/static/img/top-bg.png"/>
|
||||
@@ -27,18 +29,17 @@
|
||||
<div class="card-item" hover-class="text-hover" @click="$linkTo('./AppCommunityInfo?type=4')">
|
||||
<image src="https://cdn.cunwuyun.cn/pingchang/sqgy.png"/>
|
||||
</div>
|
||||
<!-- <div class="card-item" hover-class="text-hover"-->
|
||||
<!-- @click="linkTo('/mods/AppCreditPoints/AppIntegralRanking', 'idNumber')">-->
|
||||
<!-- <image src="/static/img/jfph.png"/>-->
|
||||
<!-- </div>-->
|
||||
<div class="card-item" hover-class="text-hover" @click="$linkTo('./AppCommunityInfo?type=5')">
|
||||
<image src="https://cdn.cunwuyun.cn/pingchang/dyzd.png"/>
|
||||
</div>
|
||||
<div class="card-item" hover-class="text-hover"
|
||||
@click="linkTo('/mods/AppVillagerDiscussion/AppVillagerDiscussion', 'idNumber')">
|
||||
@click="$linkTo('/mods/AppVillagerDiscussion/AppVillagerDiscussion')">
|
||||
<image src="https://cdn.cunwuyun.cn/pingchang/jmys.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="banner" @click="linkTo('/mods/AppCreditPoints/AppCpSupermarket', 'idNumber')">-->
|
||||
<!-- <image src="/static/img/jf-banner.png" class="banner"/>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="banner" @click="linkTo('/mods/AppCreditPoints/AppCpSupermarket', 'idNumber')">
|
||||
<image src="/static/img/jf-banner.png" class="banner"/>
|
||||
</div> -->
|
||||
<tempalte v-if="publicList.length">
|
||||
<div class="title-wrap">
|
||||
<span class="title">三务公开</span>
|
||||
@@ -64,7 +65,7 @@
|
||||
</div>
|
||||
</tempalte>
|
||||
<div class="title-wrap" v-if="activityList.length">
|
||||
<span class="title">居民活动</span>
|
||||
<span class="title">专题活动</span>
|
||||
<div class="right">
|
||||
<span class="title-more" @click="$linkTo('/mods/AppVillageActivity/AppVillageActivity')">更多活动</span>
|
||||
<u-icon name="arrow-right" size="28" color="#999999"></u-icon>
|
||||
@@ -84,7 +85,22 @@
|
||||
</div>
|
||||
<AiEmpty v-if="!activityList.length"></AiEmpty>
|
||||
</scroll-view>
|
||||
<u-gap/>
|
||||
<div class="title-wrap">
|
||||
<span class="title">乡村相册</span>
|
||||
</div>
|
||||
<div class="album-list">
|
||||
<div
|
||||
class="album"
|
||||
v-for="(item, index) in albumList"
|
||||
hover-class="text-hover"
|
||||
:key="index"
|
||||
@click="$linkTo('/mods/AppPhotoAlbum/AppPhotoAlbum?type=' + item.type + '&name=' + item.name + '&url=' + item.coverImg)">
|
||||
<image :src="item.coverImg"/>
|
||||
<div class="total">共{{ item.total }}张</div>
|
||||
<div class="desc">{{ item.name }}</div>
|
||||
</div>
|
||||
<AiEmpty style="width: 100%" v-if="!albumList.length"></AiEmpty>
|
||||
</div>
|
||||
<AiLogin ref="login"/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -92,8 +108,8 @@
|
||||
import {mapActions, mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "AppEnteringCommunity",
|
||||
appName: "社区",
|
||||
name: "AppPartyEnteringCommunity",
|
||||
appName: "党建社区",
|
||||
customNavigation: true,
|
||||
data() {
|
||||
return {
|
||||
@@ -103,20 +119,27 @@ export default {
|
||||
areaName: '',
|
||||
areaId: '',
|
||||
$areaId: '',
|
||||
albumList: [],
|
||||
activityList: [],
|
||||
publicList: [],
|
||||
moduleId: "",
|
||||
isInit: false
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.areaId = this.$mp.query.areaId || this.$areaId
|
||||
this.areaName = this.$mp.query.areaName || this.$areaName
|
||||
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
||||
this.autoLogin()
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getActiveList()
|
||||
this.getName()
|
||||
this.getAlbumList()
|
||||
this.getActiveList()
|
||||
})
|
||||
uni.$on('update', () => {
|
||||
this.getAlbumList()
|
||||
})
|
||||
},
|
||||
|
||||
@@ -161,14 +184,17 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
updateUserInfo() {
|
||||
if (this.areaId.endsWith('000')) {
|
||||
this.$dialog.alert({
|
||||
content: '请选择村'
|
||||
}).then(() => {
|
||||
})
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
this.$instance.post("/app/appwechatuser/updateById", {
|
||||
id: this.user.id,
|
||||
homeArea: this.areaId,
|
||||
@@ -216,11 +242,26 @@ export default {
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getActiveList()
|
||||
this.getAlbumList()
|
||||
this.getPublicList()
|
||||
uni.setStorageSync('areaId', this.areaId)
|
||||
uni.setStorageSync('areaName', this.areaName)
|
||||
})
|
||||
},
|
||||
|
||||
getAlbumList() {
|
||||
this.$instance.post(`/app/appvillagepicturealbum/queryAlbumMenu?areaId=${this.areaId}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.albumList = res.data.map(v => {
|
||||
return {
|
||||
...v,
|
||||
coverImg: `${this.$cdn}/dvcp/album/album${v.type}.png`
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getActiveList() {
|
||||
this.$instance.post(`/app/appvillageactivityinfo/listUp`, null, {
|
||||
params: {
|
||||
@@ -243,8 +284,8 @@ export default {
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '欢迎使用数字乡村治理服务一体化平台~',
|
||||
path: `/pages/AppEnteringCommunity/AppEnteringCommunity`
|
||||
title: '欢迎使用数字党建平昌~',
|
||||
path: `/pages/AppPartyEnteringCommunity/AppPartyEnteringCommunity`
|
||||
}
|
||||
},
|
||||
|
||||
@@ -255,7 +296,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.AppEnteringCommunity {
|
||||
.AppPartyEnteringCommunity {
|
||||
min-height: 100%;
|
||||
background: #F3F6F9;
|
||||
|
||||
@@ -427,6 +468,67 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.album-list {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
.album {
|
||||
position: relative;
|
||||
width: 218px;
|
||||
height: 240px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.total {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
z-index: 2;
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
border-radius: 8px;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.desc {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 12px;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-news {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px;
|
||||
@@ -543,67 +645,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.album-list {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
.album {
|
||||
position: relative;
|
||||
width: 218px;
|
||||
height: 240px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.total {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
z-index: 2;
|
||||
width: 74px;
|
||||
height: 40px;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
border-radius: 8px;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.desc {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 12px;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
font-weight: 600;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .AiArea {
|
||||
padding-top: 64px;
|
||||
height: 88px;
|
||||
|
Before Width: | Height: | Size: 970 B After Width: | Height: | Size: 970 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
215
src/project/wuxi/AppPhotoReport/AppPhotoReport.vue
Normal file
215
src/project/wuxi/AppPhotoReport/AppPhotoReport.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="photo-list">
|
||||
<div class="photo-list__wrapper">
|
||||
|
||||
<div class="photo-item" v-for="(item, index) in list" :key="index">
|
||||
<u-swipe-action @content-click="$linkTo('./PhotoDetail?id=' + item.id)" :index="item.id"
|
||||
:options="itemOptions" @click="handleDelete">
|
||||
<div class="photo-item__top">
|
||||
<h2>{{ item.content }}</h2>
|
||||
<div class="photo-item__top--info">
|
||||
<div class="photo-item__top--info-item">
|
||||
<label>事件类型</label>
|
||||
<span>{{ item.groupName }}</span>
|
||||
</div>
|
||||
<div class="photo-item__top--info-item">
|
||||
<label>所属网格</label>
|
||||
<span>{{ item.girdName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="photo-item__bottom flex">
|
||||
<div class="flex fill">
|
||||
<i :class="'status-' + item.eventStatus"></i>
|
||||
<span :class="'status-' + item.eventStatus">{{ item.statusName }}</span>
|
||||
</div>
|
||||
<AiEvaluation :bid="item.id" v-if="item.eventStatus>1">
|
||||
<div class="itemBtn">去评价</div>
|
||||
<div slot="finish" class="finish">已评价</div>
|
||||
</AiEvaluation>
|
||||
</div>
|
||||
</u-swipe-action>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length"/>
|
||||
</div>
|
||||
<div class="btn-wrapper">
|
||||
<div class="btn" @click="toReport" hover-class="text-hover">我要上报</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: "AppPhotoReport",
|
||||
appName: "事件上报",
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
current: 1,
|
||||
total: 0,
|
||||
itemOptions: [
|
||||
{text: '删除', style: {backgroundColor: '#f46'}}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
onLoad() {
|
||||
this.$dict.load(['clapEventStatus'])
|
||||
},
|
||||
methods: {
|
||||
toReport() {
|
||||
this.$linkTo('./PhotoForm')
|
||||
},
|
||||
getList() {
|
||||
if (this.current == 1) {
|
||||
//当current=1时,意味着重新刷新数据
|
||||
} else if (this.list.length >= this.total && this.total > 0) {
|
||||
return //当数据总量和列表总量一样时,不用再加载数据
|
||||
}
|
||||
this.$loading()
|
||||
this.$instance.post(`/app/appclapeventinfo/listByWxApplet`, null, {
|
||||
params: {
|
||||
current: this.current, size: 15
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
const list = res.data.records.map(v => ({...v, statusName: this.$dict.getLabel('clapEventStatus', v.eventStatus)}))
|
||||
this.list = this.current == 1 ? list : [this.list, list].flat()
|
||||
this.total = res.data.total
|
||||
this.current++
|
||||
}
|
||||
}).finally(() => uni.hideLoading())
|
||||
},
|
||||
handleDelete(ids) {
|
||||
this.$dialog.confirm({content: "是否要进行删除?"}).then(() => {
|
||||
this.$instance.post("/app/appclapeventinfo/delete", null, {
|
||||
params: {ids}
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$u.toast("删除成功!")
|
||||
this.current = 1
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => 0)
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.photo-list {
|
||||
padding: 24px 0 150px 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;
|
||||
|
||||
.photo-item__top {
|
||||
padding: 32px;
|
||||
text-align: justify;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.4;
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.photo-item__top--info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
label {
|
||||
margin-right: 32px;
|
||||
color: #999999;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #333333;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photo-item__bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 104px;
|
||||
padding: 0 32px;
|
||||
border-top: 1px solid #DDDDDD;
|
||||
|
||||
i {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-right: 8px;
|
||||
border-radius: 50%;
|
||||
background: #FF883C;
|
||||
}
|
||||
|
||||
.itemBtn {
|
||||
border: 1px solid #4181FF;
|
||||
border-radius: 8px;
|
||||
color: #4181FF;
|
||||
padding: 8px 22px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.finish {
|
||||
color: #42D784;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #FF883C;
|
||||
font-size: 28px;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.status-1 {
|
||||
color: #1AAAFF;
|
||||
background: #1AAAFF;
|
||||
}
|
||||
|
||||
.status-2 {
|
||||
color: #42D784;
|
||||
background: #42D784;
|
||||
}
|
||||
|
||||
.status-3 {
|
||||
color: #FF4466;
|
||||
background: #FF4466;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
181
src/project/wuxi/AppPhotoReport/PhotoDetail.vue
Normal file
181
src/project/wuxi/AppPhotoReport/PhotoDetail.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="photo-detail">
|
||||
<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="info.groupName"/>
|
||||
<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="fill 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>
|
||||
<u-gap height="24"/>
|
||||
<AiGroup title="处理详情" v-if="info.eventStatus > 1" description noBorder labelColor="#999">
|
||||
<AiItem label="处理结果" top-label :value="result.doExplain"/>
|
||||
<AiItem label="照片" top-label>
|
||||
<div class="flex wrap">
|
||||
<image class="fill imageItem" v-for="(item, index) in result.files" @click="preview(item.url)" :key="index" :src="item.url"/>
|
||||
</div>
|
||||
<span v-if="!result.files.length">暂无照片</span>
|
||||
</AiItem>
|
||||
</AiGroup>
|
||||
<u-gap height="24"/>
|
||||
<u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/>
|
||||
<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"/>
|
||||
<u-gap height="48"/>
|
||||
</AiStep>
|
||||
</AiGroup>
|
||||
<AiEvaluation v-if="currentTab=='1'" :bid="info.id" type="show"/>
|
||||
<AiEvaluation v-if="info.eventStatus > 1" v-model="evaluation" class="fixed-bottom bg-fff" :bid="info.id">
|
||||
<div class="bottomBtn">去评价</div>
|
||||
</AiEvaluation>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
appName: "事件上报详情",
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
result: {},
|
||||
currentTab: 0,
|
||||
evaluation: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
detailStatus: v => {
|
||||
const status = !v.evaluation.id ? v.info.eventStatus : 'evaluation'
|
||||
return {
|
||||
cls: 'status-' + status,
|
||||
label: !v.evaluation.id ? v.$dict.getLabel('clapEventStatus', v.info.eventStatus) : "已评价"
|
||||
}
|
||||
},
|
||||
process() {
|
||||
const list = this.info.processList
|
||||
if (this.evaluation.id) {
|
||||
const {id, createUserName, score, createTime: doTime, rateText: doExplain} = this.evaluation
|
||||
list.splice(0, 0, {
|
||||
id, doTime, doExplain,
|
||||
systemExplain: `${createUserName}完成评价 (${score}星评价)`
|
||||
})
|
||||
}
|
||||
return list
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getInfo()
|
||||
},
|
||||
onLoad(query) {
|
||||
this.getInfo(query.id)
|
||||
this.$dict.load(['clapEventStatus'])
|
||||
},
|
||||
methods: {
|
||||
getInfo(id = this.info.id) {
|
||||
this.$loading()
|
||||
this.$instance.post(`/app/appclapeventinfo/queryDetailById?id=${id}`).then(res => {
|
||||
if (res?.data) {
|
||||
this.info = res.data
|
||||
if (res.data.eventStatus > 1) {
|
||||
this.result = res.data.processList[0]
|
||||
}
|
||||
}
|
||||
}).finally(() => this.$hideLoading())
|
||||
},
|
||||
previewResult(url) {
|
||||
uni.previewImage({
|
||||
urls: this.result.files.map(v => v.url),
|
||||
current: url
|
||||
})
|
||||
},
|
||||
|
||||
preview(url) {
|
||||
uni.previewImage({
|
||||
urls: this.info.files.map(v => v.url),
|
||||
current: url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.photo-detail {
|
||||
padding: 32px 0 160px;
|
||||
margin-bottom: 60px;
|
||||
background: #fff;
|
||||
|
||||
h2 {
|
||||
line-height: 1.3;
|
||||
margin-bottom: 26px;
|
||||
color: #333333;
|
||||
text-align: justify;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
::v-deep.stepTitle {
|
||||
min-height: 44px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.stepTime {
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.stepContent {
|
||||
color: #343D65;
|
||||
}
|
||||
|
||||
.status-name {
|
||||
width: 96px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
background: #FF883C;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
border-radius: 8px;
|
||||
|
||||
&.status-1, &.status-evaluation {
|
||||
background: #1AAAFF;
|
||||
}
|
||||
|
||||
&.status-2 {
|
||||
background: #42D784;
|
||||
}
|
||||
|
||||
&.status-3 {
|
||||
background: #FF4466;
|
||||
}
|
||||
}
|
||||
|
||||
.imageItem {
|
||||
min-width: 30%;
|
||||
height: 30vw;
|
||||
flex-shrink: 0;
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
330
src/project/wuxi/AppPhotoReport/PhotoForm.vue
Normal file
330
src/project/wuxi/AppPhotoReport/PhotoForm.vue
Normal file
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div class="album">
|
||||
<div class="form-item__group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>事件类型</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiSelect :list="dictList" v-model="form.groupId" placeholder="请选择"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item form-item__textarea">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>事件描述</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<textarea v-model="form.content" :maxlength="500" placeholder="请简要描述事件…"></textarea>
|
||||
<!-- <u-input style="width: 100%;" :height="200" v-model="value" type="textarea" :maxlength="500" :border="border" placeholder="请简要描述事件…" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item__group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>上报位置</h2>
|
||||
</div>
|
||||
<div class="form-item__right" @click="chooseAddress">
|
||||
<span v-if="form.address">{{ form.address }}</span>
|
||||
<i v-else>请选择</i>
|
||||
<u-icon name="arrow-right" color="#ddd"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>所属网格</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<AiPagePicker type="gird" v-model="form.girdId" :params="{formType:2}" @select="handleSelectGrid" nodeKey="id">
|
||||
<AiMore v-model="form.girdName"/>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item__group">
|
||||
<div class="form-item form-item__imgs">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i style="opacity: 0;">*</i>
|
||||
<h2>图片上传</h2>
|
||||
<span>(最多9张)</span>
|
||||
</div>
|
||||
<AiUploader v-model="form.files" :limit="9"></AiUploader>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item__group">
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>姓名</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<input placeholder="请输入" v-model="form.name" :maxlength="20"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>联系方式</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<input placeholder="请输入" v-model="form.phone" :maxlength="11"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-wrapper">
|
||||
<div class="btn" hover-class="text-hover" @click="submit">提交</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
appName: "上报事件",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
content: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
address: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
groupId: '',
|
||||
groupName: '',
|
||||
girdName: '',
|
||||
girdId: '',
|
||||
files: []
|
||||
},
|
||||
dictList: [],
|
||||
flag: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user'])
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.getDict()
|
||||
this.form.phone = this.user.phone
|
||||
this.form.name = this.user.realName || ''
|
||||
},
|
||||
|
||||
methods: {
|
||||
chooseAddress() {
|
||||
uni.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success: () => {
|
||||
uni.chooseLocation({
|
||||
success: res => {
|
||||
this.form.address = res.address
|
||||
this.form.lat = res.latitude
|
||||
this.form.lng = res.longitude
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
this.$dialog.confirm({
|
||||
content: '您未授权定位权限，无法选择位置'
|
||||
}).then(() => {
|
||||
wx.openSetting({
|
||||
success: res => {
|
||||
if (!res.authSetting['scope.userLocation']) {
|
||||
this.$dialog.alert({
|
||||
content: '您未授权定位权限，无法选择位置'
|
||||
}).then(() => {
|
||||
})
|
||||
} else {
|
||||
console.log('设置定位权限')
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getDict() {
|
||||
this.$instance.post(`/app/appclapeventgroup/list?current=1&size=100000`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.dictList = res.data.records.map(v => {
|
||||
return {
|
||||
value: v.id,
|
||||
label: v.groupName
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
if (!this.form.groupId) {
|
||||
return this.$toast('请选择事件类型')
|
||||
}
|
||||
|
||||
if (!this.form.content) {
|
||||
return this.$toast('请输入事件描述')
|
||||
}
|
||||
if (!this.form.address) {
|
||||
return this.$toast('请选择上报位置')
|
||||
}
|
||||
|
||||
if (!this.form.name) {
|
||||
return this.$toast('请输入上报人姓名')
|
||||
}
|
||||
|
||||
if (!this.form.phone) {
|
||||
return this.$toast('请输入上报人联系方式')
|
||||
}
|
||||
if (!this.form.girdId) {
|
||||
return this.$toast('请选择所属网格')
|
||||
}
|
||||
if (this.flag) return
|
||||
this.flag = true
|
||||
|
||||
this.$loading()
|
||||
this.$instance.post(`/app/appclapeventinfo/addOrUpdate`, {
|
||||
...this.form,
|
||||
openid: this.user.openid,
|
||||
portrait: this.user.avatarUrl,
|
||||
files: this.form.files,
|
||||
groupName: this.dictList.filter(v => v.value === this.form.groupId)[0].label
|
||||
}).then(res => {
|
||||
this.$hideLoading()
|
||||
this.flag = false
|
||||
if (res.code == 0) {
|
||||
uni.$emit('update')
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: './PhotoResult?id=' + res.data.id
|
||||
})
|
||||
}, 400)
|
||||
}
|
||||
this.$hideLoading()
|
||||
})
|
||||
},
|
||||
handleSelectGrid(v) {
|
||||
this.form.girdName = v.girdName
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.album {
|
||||
padding-bottom: 140px;
|
||||
|
||||
.form-item__group {
|
||||
margin-bottom: 24px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding-left: 32px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 128px;
|
||||
padding-right: 28px;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.form-item__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
|
||||
span {
|
||||
max-width: 400px;
|
||||
margin-right: 8px;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 32px;
|
||||
color: #FF4466;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0 4px;
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.form-item__imgs, &.form-item__textarea {
|
||||
.form-item__wrapper {
|
||||
display: block;
|
||||
height: auto;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.form-item__title {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.form-item__right {
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
src/project/wuxi/AppPhotoReport/PhotoResult.vue
Normal file
64
src/project/wuxi/AppPhotoReport/PhotoResult.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="result">
|
||||
<image src="/static/img/result.png" />
|
||||
<h2>上报成功！</h2>
|
||||
<div class="result-btn" hover-class="text-hover" @click="back">前往查看</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
appName:"上报事件",
|
||||
data () {
|
||||
return {
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
this.id = query.id
|
||||
},
|
||||
|
||||
methods: {
|
||||
back () {
|
||||
uni.redirectTo({
|
||||
url: './PhotoDetail?id=' + this.id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.result {
|
||||
min-height: 100vh;
|
||||
padding-top: 160px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
|
||||
image {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 32px 0 80px;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-btn {
|
||||
width: 320px;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background: #4181FF;
|
||||
color: #fff;
|
||||
font-size: 34px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user