事件上报

2023-05-05 14:02:08 +08:00
parent 19cfe66262
commit 82169094e4
9 changed files with 912 additions and 81 deletions
--- a/src/mods/conv/score/AppIntegralApply/add.vue
+++ b/src/mods/conv/score/AppIntegralApply/add.vue
@@ -61,7 +61,7 @@ export default {
      forms: {
        phone: '',
        auditTime: '',
-        // applyIntegralType: '',
+        applyIntegralType: '',
        applyIntegralTypeValue: '',
        description: '',
        applyFiles: [],
--- a/src/project/wuxi/AppPartyEnteringCommunity/AppCommunityInfo.vue
+++ b/src/project/wuxi/AppPartyEnteringCommunity/AppCommunityInfo.vue
@@ -28,7 +28,7 @@ export default {
  onLoad(query) {
    if (query.type !== '0') {
      uni.setNavigationBarTitle({
-        title: '社区公约'
+        title: query.type == 4 ? '社区公约' : '党员阵地'
      })
    }

--- a/src/project/wuxi/AppPartyEnteringCommunity/AppPartyEnteringCommunity.vue
+++ b/src/project/wuxi/AppPartyEnteringCommunity/AppPartyEnteringCommunity.vue
@@ -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;
--- a/src/project/wuxi/AppPartyEnteringCommunity/custom.png
+++ b/src/project/wuxi/AppPartyEnteringCommunity/custom.png
--- a/src/project/wuxi/AppPartyEnteringCommunity/custom_selected.png
+++ b/src/project/wuxi/AppPartyEnteringCommunity/custom_selected.png
--- a/src/project/wuxi/AppPhotoReport/AppPhotoReport.vue
+++ b/src/project/wuxi/AppPhotoReport/AppPhotoReport.vue
@@ -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>
--- a/src/project/wuxi/AppPhotoReport/PhotoDetail.vue
+++ b/src/project/wuxi/AppPhotoReport/PhotoDetail.vue
@@ -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>
--- a/src/project/wuxi/AppPhotoReport/PhotoForm.vue
+++ b/src/project/wuxi/AppPhotoReport/PhotoForm.vue
@@ -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>
--- a/src/project/wuxi/AppPhotoReport/PhotoResult.vue
+++ b/src/project/wuxi/AppPhotoReport/PhotoResult.vue
@@ -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>