BUG 30376

src/mods/conv/AppPhotoReport/AppPhotoReport.vue

@@ -15,12 +15,15 @@
             </div>
           </div>
         </div>
-        <div class="photo-item__bottom">
+        <div class="photo-item__bottom flex">
-          <i :class="'status-' + item.eventStatus"></i>
+          <div class="flex fill">
-          <span :class="'status-' + item.eventStatus">{{ item.statusName }}</span>
+            <i :class="'status-' + item.eventStatus"></i>
+            <span :class="'status-' + item.eventStatus">{{ item.statusName }}</span>
+          </div>
+          <div class="color-red" @click.stop="handleDelete(item.id)">删除</div>
         </div>
       </div>
-      <AiEmpty v-if="!list.length"></AiEmpty>
+      <AiEmpty v-if="!list.length"/>
     </div>
     <div class="btn-wrapper">
       <div class="btn" @click="toReport" hover-class="text-hover">我要上报</div>
@@ -29,178 +32,193 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+import {mapState} from 'vuex'
-  export default {
-    name:"AppPhotoReport",
-    appName:"随手拍",
-    data () {
-      return {
-        list: [],
-        pageShow: false,
-        current: 1,
-        total: 0,
-        isMore: false
-      }
-    },
 
-    computed: {
+export default {
-      ...mapState(['user'])
+  name: "AppPhotoReport",
-    },
+  appName: "随手拍",
-
+  data() {
-    onLoad () {
+    return {
-      this.$loading()
+      list: [],
-      this.$dict.load(['clapEventStatus']).then(() => {
+      pageShow: false,
-        this.getList()
+      current: 1,
-      })
+      total: 0,
-
+      isMore: false
-      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()
-        })
-      }
-    },
-
-    onReachBottom() {
-      this.getList()
     }
+  },
+
+  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 {
+.photo-list {
-    padding: 24px 0 150px 0;
+  padding: 24px 0 150px 0;
 
-    .photo-item {
+  .photo-item {
-      width: 686px;
+    width: 686px;
-      margin: 0 auto 24px;
+    margin: 0 auto 24px;
-      background: #FFFFFF;
+    background: #FFFFFF;
-      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
-      border-radius: 16px;
+    border-radius: 16px;
 
-      .photo-item__top {
+    .photo-item__top {
-        padding: 32px;
+      padding: 32px;
-        text-align: justify;
+      text-align: justify;
 
-        h2 {
+      h2 {
-          margin-bottom: 32px;
+        margin-bottom: 32px;
-          line-height: 1.4;
+        line-height: 1.4;
-          color: #333333;
+        color: #333333;
-          font-size: 32px;
+        font-size: 32px;
-          font-weight: 600;
+        font-weight: 600;
-          overflow : hidden;
+        overflow: hidden;
-          text-overflow: ellipsis;
+        text-overflow: ellipsis;
-          display: -webkit-box;
+        display: -webkit-box;
-          -webkit-line-clamp: 2;
+        -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
+        -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 {
+      .photo-item__top--info-item {
         display: flex;
         align-items: center;
-        height: 104px;
-        padding: 0 32px;
-        border-top: 1px solid #DDDDDD;
 
-        i {
+        &:last-child {
-          width: 8px;
+          margin-bottom: 8px;
-          height: 8px;
+        }
-          margin-right: 8px;
+
-          border-radius: 50%;
+        label {
-          background: #FF883C;
+          margin-right: 32px;
+          color: #999999;
+          font-size: 26px;
         }
 
         span {
-          color: #FF883C;
+          color: #333333;
-          font-size: 28px;
+          font-size: 26px;
-          background: transparent!important;
-        }
-
-        .status-1 {
-          color: #1AAAFF;
-          background: #1AAAFF;
-        }
-
-        .status-2 {
-          color: #42D784;
-          background: #42D784;
-        }
-
-        .status-3 {
-          color: #FF4466;
-          background: #FF4466;
         }
       }
     }
+
+    .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;
+      }
+
+      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>