随手拍
This commit is contained in:
liuye
@@ -61,9 +61,10 @@ export default {
|
|||||||
|
|
||||||
.normal {
|
.normal {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-right: 32px;
|
padding: 32px 32px 32px 0;
|
||||||
|
line-height: 44px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 112px;
|
// height: 112px;
|
||||||
|
|
||||||
.flexContent {
|
.flexContent {
|
||||||
max-width: 62vw;
|
max-width: 62vw;
|
||||||
|
|||||||
271
src/project/qujing/AppPhotoReport/AppPhotoReport.vue
Normal file
271
src/project/qujing/AppPhotoReport/AppPhotoReport.vue
Normal file
@@ -0,0 +1,271 @@
|
|||||||
|
<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>
|
||||||
|
<!-- <span class="item-type">{{ $dict.getLabel('qujingEventType', item.type) }}</span> -->
|
||||||
|
<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" :class="'status-' + item.eventStatus">
|
||||||
|
<i></i>
|
||||||
|
<span>{{ item.statusName }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="risk-level" v-if="item.judgeRiskLevel=='矛盾调解'">
|
||||||
|
<span :class="`level`+item.judgeRiskLevel">{{ $dict.getLabel('qujingRiskLevel', item.judgeRiskLevel) }}</span>
|
||||||
|
</div>
|
||||||
|
</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'])
|
||||||
|
this.$dict.load(['qujingEventStatus', 'qujingEventType', 'qujingRiskLevel'])
|
||||||
|
},
|
||||||
|
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/appclapeventinfoqujing/list`, null, {
|
||||||
|
params: {
|
||||||
|
current: this.current, size: 15, openId: this.user.openId
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
const list = res.data.records.map(v => ({...v, statusName: this.$dict.getLabel('qujingEventStatus', 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/appclapeventinfoqujing/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;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
// width: 480px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.item-type {
|
||||||
|
position: absolute;
|
||||||
|
top: 32px;
|
||||||
|
right: 32px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
line-height: 34px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #3D88F5;
|
||||||
|
background-color: #EBF3FD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
.risk-level {
|
||||||
|
padding: 32px;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 40px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
.level1 {
|
||||||
|
color: #3D88F5;
|
||||||
|
}
|
||||||
|
.level2 {
|
||||||
|
color: #52C75B;
|
||||||
|
}
|
||||||
|
.level3 {
|
||||||
|
color: #FF883C;
|
||||||
|
}
|
||||||
|
.level4 {
|
||||||
|
color: #FF3C3C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 16px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.itemBtn {
|
||||||
|
border: 1px solid #4181FF;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #4181FF;
|
||||||
|
padding: 8px 22px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.status-0 {
|
||||||
|
color: #ff883c;
|
||||||
|
i {
|
||||||
|
background: #ff883c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-1, .status-2 {
|
||||||
|
color: #1aaaff;
|
||||||
|
i {
|
||||||
|
background: #1AAAFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-3 {
|
||||||
|
color: #42d784;
|
||||||
|
i {
|
||||||
|
background: #42d784;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-4 {
|
||||||
|
color: #ff4466;
|
||||||
|
i {
|
||||||
|
background: #ff4466;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// .finish {
|
||||||
|
// color: #42D784;
|
||||||
|
// font-size: 28px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .status-1 {
|
||||||
|
// color: #1AAAFF;
|
||||||
|
// background: #1AAAFF;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .status-2 {
|
||||||
|
// color: #42D784;
|
||||||
|
// background: #42D784;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .status-3 {
|
||||||
|
// color: #FF4466;
|
||||||
|
// background: #FF4466;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
249
src/project/qujing/AppPhotoReport/PhotoDetail.vue
Normal file
249
src/project/qujing/AppPhotoReport/PhotoDetail.vue
Normal file
@@ -0,0 +1,249 @@
|
|||||||
|
<template>
|
||||||
|
<div class="photo-detail">
|
||||||
|
<AiGroup noBorder>
|
||||||
|
<h2>{{ info.content }}</h2>
|
||||||
|
<div class="status-name" :class="detailStatus.cls" v-text="detailStatus.label"/>
|
||||||
|
<div style="height:20px;"></div>
|
||||||
|
</AiGroup>
|
||||||
|
<AiGroup description noBorder labelColor="#999">
|
||||||
|
<AiItem label="事件类型" :value="info.groupName"/>
|
||||||
|
<AiItem label="所属网格" :value="info.girdName"/>
|
||||||
|
<AiItem label="上报时间" :value="info.createTime"/>
|
||||||
|
<AiItem label="照片" class="not-line">
|
||||||
|
<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" v-if="result.doExplain && info.groupName != '矛盾调解'" />
|
||||||
|
<AiGroup title="处理详情" v-if="info.eventStatus > 1 && result.doExplain" description noBorder labelColor="#999">
|
||||||
|
<AiItem label="处理结果" top-label :value="result.doExplain"/>
|
||||||
|
<AiItem label="照片" class="not-line">
|
||||||
|
<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" v-if="info.judgeName"/>
|
||||||
|
<AiGroup description noBorder labelColor="#999" v-if="info.judgeName">
|
||||||
|
<AiItem label="事件研判"><span class="risk-level" :class="`level`+info.judgeRiskLevel">{{ $dict.getLabel('qujingRiskLevel', info.judgeRiskLevel) }}</span></AiItem>
|
||||||
|
<AiItem label="当事人姓名" :value="info.judgeName"/>
|
||||||
|
<AiItem label="性别" :value="$dict.getLabel('sex', info.judgeSex)"/>
|
||||||
|
<AiItem label="联系电话" :value="info.judgePhone"/>
|
||||||
|
<AiItem label="家庭住址" :value="info.judgeAddress"/>
|
||||||
|
<AiItem label="排查内容" class="not-line">
|
||||||
|
<span v-for="(item, index) in info.judgeRiskList" :key="index">
|
||||||
|
<span v-if="index > 0">,</span>{{ $dict.getLabel('qujingRisk', item) }}
|
||||||
|
</span>
|
||||||
|
</AiItem>
|
||||||
|
</AiGroup>
|
||||||
|
<u-gap height="24" v-if="info.mediateAreaName"/>
|
||||||
|
<AiGroup description noBorder labelColor="#999" v-if="info.mediateAreaName">
|
||||||
|
<AiItem label="调解主体" :value="info.mediateAreaName" />
|
||||||
|
<AiItem label="涉及金额" :value="info.mediateAmount"/>
|
||||||
|
<AiItem label="调解员" :value="info.mediatePerson"/>
|
||||||
|
<AiItem label="参加人" :value="info.mediateMember || '无'"/>
|
||||||
|
<AiItem label="调解时间" :value="info.mediateDate"/>
|
||||||
|
<AiItem label="调处思路、措施及主要过程" :value="info.mediateInfo"/>
|
||||||
|
<AiItem label="调处结果" class="not-line" value="调解成功" />
|
||||||
|
</AiGroup>
|
||||||
|
<u-gap height="24" />
|
||||||
|
<u-tabs :list="evaluation && evaluation.id ? [{name:'办理进度'},{name:'我的评价'}] : [{name:'办理进度'}] " :current="currentTab" @change="v=>currentTab=v"/>
|
||||||
|
<u-gap height="24" bg-color="#fff" />
|
||||||
|
<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 == 3" 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('qujingEventStatus', 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.id = query.id
|
||||||
|
this.getInfo()
|
||||||
|
this.$dict.load(['qujingEventStatus', 'qujingDoStatus', 'qujingEventType', 'sex', 'qujingRisk', 'qujingRiskLevel'])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getInfo() {
|
||||||
|
this.$loading()
|
||||||
|
this.$instance.post(`/app/appclapeventinfoqujing/queryDetailById?id=${this.id}`).then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.info = res.data
|
||||||
|
if (res.data.eventStatus > 1) {
|
||||||
|
this.result = res.data.processList[0]
|
||||||
|
}
|
||||||
|
if(this.info.judgeRisk) {
|
||||||
|
this.info.judgeRiskList = this.info.judgeRisk.split(',')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).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;
|
||||||
|
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;
|
||||||
|
// }
|
||||||
|
|
||||||
|
&.status-0 {
|
||||||
|
background: #ff883c;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-1, &.status-2, &.status-evaluation{
|
||||||
|
background: #1aaaff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-3 {
|
||||||
|
background: #42d784;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-4 {
|
||||||
|
background: #ff4466;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.imageItem {
|
||||||
|
min-width: 30%;
|
||||||
|
height: 30vw;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
|
||||||
|
&:nth-of-type(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.not-line {
|
||||||
|
.AiItem {
|
||||||
|
.normal {
|
||||||
|
border: none!important;
|
||||||
|
min-height: 112px!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .AiGroup {
|
||||||
|
.groupHeader {
|
||||||
|
padding-top: 16px!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.level1 {
|
||||||
|
color: #3D88F5;
|
||||||
|
}
|
||||||
|
.level2 {
|
||||||
|
color: #52C75B;
|
||||||
|
}
|
||||||
|
.level3 {
|
||||||
|
color: #FF883C;
|
||||||
|
}
|
||||||
|
.level4 {
|
||||||
|
color: #FF3C3C;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
333
src/project/qujing/AppPhotoReport/PhotoForm.vue
Normal file
333
src/project/qujing/AppPhotoReport/PhotoForm.vue
Normal file
@@ -0,0 +1,333 @@
|
|||||||
|
<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: '',
|
||||||
|
girdCode: '',
|
||||||
|
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/appclapeventgroupqujing/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/appclapeventinfoqujing/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) {
|
||||||
|
console.log(v)
|
||||||
|
this.form.girdName = v.girdName
|
||||||
|
this.form.girdCode = v.girdCode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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/qujing/AppPhotoReport/PhotoResult.vue
Normal file
64
src/project/qujing/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