From 3a8c561a524467898c815a90bbcdc3d113cc022e Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Fri, 1 Mar 2024 13:46:14 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9A=8F=E6=89=8B=E6=8B=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AiItem/AiItem.vue              |   5 +-
 .../qujing/AppPhotoReport/AppPhotoReport.vue  | 271 ++++++++++++++
 .../qujing/AppPhotoReport/PhotoDetail.vue     | 249 +++++++++++++
 .../qujing/AppPhotoReport/PhotoForm.vue       | 333 ++++++++++++++++++
 .../qujing/AppPhotoReport/PhotoResult.vue     |  64 ++++
 5 files changed, 920 insertions(+), 2 deletions(-)
 create mode 100644 src/project/qujing/AppPhotoReport/AppPhotoReport.vue
 create mode 100644 src/project/qujing/AppPhotoReport/PhotoDetail.vue
 create mode 100644 src/project/qujing/AppPhotoReport/PhotoForm.vue
 create mode 100644 src/project/qujing/AppPhotoReport/PhotoResult.vue

diff --git a/src/components/AiItem/AiItem.vue b/src/components/AiItem/AiItem.vue
index 85a8e4d..d970246 100644
--- a/src/components/AiItem/AiItem.vue
+++ b/src/components/AiItem/AiItem.vue
@@ -61,9 +61,10 @@ export default {
 
   .normal {
     width: 100%;
-    padding-right: 32px;
+    padding: 32px 32px 32px 0;
+    line-height: 44px;
     box-sizing: border-box;
-    height: 112px;
+    // height: 112px;
 
     .flexContent {
       max-width: 62vw;
diff --git a/src/project/qujing/AppPhotoReport/AppPhotoReport.vue b/src/project/qujing/AppPhotoReport/AppPhotoReport.vue
new file mode 100644
index 0000000..b9c27ff
--- /dev/null
+++ b/src/project/qujing/AppPhotoReport/AppPhotoReport.vue
@@ -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>
diff --git a/src/project/qujing/AppPhotoReport/PhotoDetail.vue b/src/project/qujing/AppPhotoReport/PhotoDetail.vue
new file mode 100644
index 0000000..8e830dc
--- /dev/null
+++ b/src/project/qujing/AppPhotoReport/PhotoDetail.vue
@@ -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>
diff --git a/src/project/qujing/AppPhotoReport/PhotoForm.vue b/src/project/qujing/AppPhotoReport/PhotoForm.vue
new file mode 100644
index 0000000..cf759e0
--- /dev/null
+++ b/src/project/qujing/AppPhotoReport/PhotoForm.vue
@@ -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>
diff --git a/src/project/qujing/AppPhotoReport/PhotoResult.vue b/src/project/qujing/AppPhotoReport/PhotoResult.vue
new file mode 100644
index 0000000..43a2437
--- /dev/null
+++ b/src/project/qujing/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>