From cfcf2c12ea822d527653c985f0eb252b09501777 Mon Sep 17 00:00:00 2001
From: shijingjing <1789544664@qq.com>
Date: Tue, 15 Nov 2022 13:42:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E5=BF=83=E6=84=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppPhotoReport/AppPhotoReport.vue         | 249 +++++++++++++
 .../pingchang/AppPhotoReport/PhotoDetail.vue  | 167 +++++++++
 .../pingchang/AppPhotoReport/PhotoForm.vue    | 331 ++++++++++++++++++
 .../pingchang/AppPhotoReport/PhotoResult.vue  |  64 ++++
 4 files changed, 811 insertions(+)
 create mode 100644 src/project/pingchang/AppPhotoReport/AppPhotoReport.vue
 create mode 100644 src/project/pingchang/AppPhotoReport/PhotoDetail.vue
 create mode 100644 src/project/pingchang/AppPhotoReport/PhotoForm.vue
 create mode 100644 src/project/pingchang/AppPhotoReport/PhotoResult.vue

diff --git a/src/project/pingchang/AppPhotoReport/AppPhotoReport.vue b/src/project/pingchang/AppPhotoReport/AppPhotoReport.vue
new file mode 100644
index 0000000..250a72f
--- /dev/null
+++ b/src/project/pingchang/AppPhotoReport/AppPhotoReport.vue
@@ -0,0 +1,249 @@
+<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: [],
+      pageShow: false,
+      current: 1,
+      total: 0,
+      isMore: false,
+      itemOptions: [
+        {text: '删除', style: {backgroundColor: '#f46'}}
+      ]
+    }
+  },
+
+  computed: {
+    ...mapState(['user'])
+  },
+
+  onLoad() {
+    this.$loading()
+    this.$dict.load(['clapEventStatus']).then(() => {
+      this.getList()
+    })
+
+    uni.$on('update', () => {
+      this.current = 1
+      this.isMore = false
+
+      this.getList()
+    })
+  },
+
+  methods: {
+    toReport() {
+      this.$linkTo('./PhotoForm')
+    },
+
+    getList() {
+      if (this.isMore) return
+
+      this.$instance.post(`/app/appclapeventinfo/listByWxApplet`, null, {
+        params: {
+          current: this.current,
+          size: 15
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.total = res.data.total
+          if (this.current > 1) {
+            this.list = [...this.list, ...res.data.records].map(v => {
+              return {
+                ...v,
+                statusName: this.$dict.getLabel('clapEventStatus', v.eventStatus)
+              }
+            })
+          } else {
+            this.list = res.data.records.map(v => {
+              return {
+                ...v,
+                statusName: this.$dict.getLabel('clapEventStatus', v.eventStatus)
+              }
+            })
+          }
+          uni.hideLoading()
+          this.pageShow = true
+          if (res.data.records.length < 15) {
+            this.isMore = true
+
+            return false
+          }
+
+          this.current = this.current + 1
+        } else {
+          uni.hideLoading()
+        }
+      }).catch(() => {
+        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.isMore = false
+            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>
diff --git a/src/project/pingchang/AppPhotoReport/PhotoDetail.vue b/src/project/pingchang/AppPhotoReport/PhotoDetail.vue
new file mode 100644
index 0000000..b1ae503
--- /dev/null
+++ b/src/project/pingchang/AppPhotoReport/PhotoDetail.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="photo-detail" v-if="pageShow">
+    <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.girdName"/>
+      <AiItem label="上报时间" :value="info.createTime"/>
+      <AiItem label="照片" top-label>
+        <image v-for="(item, index) in info.files" @click="preview(item.url)" :key="index" :src="item.url"/>
+        <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>
+        <image v-for="(item, index) in result.files" @click="preview(item.url)" :key="index" :src="item.url"/>
+        <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 {
+      pageShow: false,
+      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
+    }
+  },
+  onLoad(query) {
+    this.$loading()
+    this.$dict.load(['clapEventStatus']).then(() => {
+      this.getInfo(query.id)
+    })
+  },
+  methods: {
+    getInfo(id) {
+      this.$instance.post(`/app/appclapeventinfo/queryDetailById?id=${id}`).then(res => {
+        if (res.code === 0) {
+          this.info = res.data
+          if (res.data.eventStatus > 1) {
+            this.result = res.data.processList[0]
+          }
+          this.$nextTick(() => {
+            this.pageShow = true
+          })
+        }
+      }).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;
+    }
+  }
+}
+</style>
diff --git a/src/project/pingchang/AppPhotoReport/PhotoForm.vue b/src/project/pingchang/AppPhotoReport/PhotoForm.vue
new file mode 100644
index 0000000..30dc6ca
--- /dev/null
+++ b/src/project/pingchang/AppPhotoReport/PhotoForm.vue
@@ -0,0 +1,331 @@
+<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>
diff --git a/src/project/pingchang/AppPhotoReport/PhotoResult.vue b/src/project/pingchang/AppPhotoReport/PhotoResult.vue
new file mode 100644
index 0000000..ddcca7f
--- /dev/null
+++ b/src/project/pingchang/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>