三会一课

src/apps/AppCountryAlbum/detail.vue

@@ -27,17 +27,21 @@
         <div class="time-select">
           <span>{{item.name}}</span>
           <u-icon name="arrow-down" color="#333" size="16" />
+          <span class="edit-btn" @click="editClick(editText)">{{editText}}</span>
         </div>
         <div class="img-list">
           <div class="img-item" v-for="(e, indexs) in item.list" :key="indexs">
             <p>{{e.createUserName}} 上传</p>
             <img :src="e.url" alt="" @click.stop="previewImage(item.list, e.url)">
+            <span class="cir-icon" v-if="editText== '取消' && !i.isCheked" @click="checkImg(e, index, indexs)"></span>
+            <u-icon name="checkmark-circle-fill" color="#26f" size="40" class="del-icon" @click="delSelect(e, index, indexs)" v-if="editText== '取消' && i.isCheked"></u-icon>
           </div>
         </div>
       </div>
     </div>
     
-    <div class="footer-btn" @click="uploadImg">上传图片</div>
+    <div class="footer-btn" @click="uploadImg" v-if="editText == '编辑' ">上传图片</div>
+    <div class="footer-btn" @click="del" v-if="editText == '取消' ">确定</div>
   </div>
 </template>
 
@@ -52,6 +56,8 @@ export default {
       fileList: [],
       numInfo: {},
       params: {},
+      editText: '编辑',
+      delIds: []
     }
   },
   computed: { ...mapState(['user']) },
@@ -66,6 +72,42 @@ export default {
   },
 
   methods: {
+    del() {
+      if(!this.ids) {
+        return this.$u.toast('请先选中需要删除的照片')
+      }
+      var id = this.ids.jion(',')
+      this.$confirm('确定删除这些相片?').then(() => {
+        this.$http.post(`/app/appvillagepicturealbum/deleteForWx?id=${id}`).then((res) => {
+          if (res.code == 0) {
+            this.$u.toast('删除成功！')
+            this.list = []
+            this.getList()
+            this.editClick('取消')
+          }
+        })
+      })
+    },
+    editClick(text) {
+      this.editText = text == '编辑' ? '取消' : '编辑'
+      this.delIds = []
+      if(text == '取消') {
+        this.list = []
+        this.getList()
+      }
+    },
+    checkImg(row, index, indexs) {
+      this.list[index].list[indexs].isCheked = true
+      this.delIds.push(row.id)
+    },
+    delSelect(row, index, indexs) {
+      this.list[index].list[indexs].isCheked = false
+      this.delIds.map((item, i) => {
+        if(item == row.id) {
+          this.delIds.splice(i, 1)
+        }
+      })
+    },
     previewImage(images, img) {
       uni.previewImage({
         urls: images.map(v => v.url),
@@ -80,12 +122,17 @@ export default {
         }
       }).then(res => {
         if (res.code == 0) {
-           this.list = Object.keys(res.data).map(v => {
+          this.list = Object.keys(res.data).map(v => {
             return {
               name: v,
               list: res.data[v]
             }
           })
+          this.list.map((item) => {
+            item.list.map((e) => {
+              e.isCheked = false
+            })
+          })
         }
       })
     },
@@ -228,10 +275,23 @@ export default {
     font-family: PingFangSC-Semibold, PingFang SC;
     font-weight: 600;
     color: #333;
+    position: relative;
     span{
       display: inline-block;
       margin-right: 16px;
     }
+    .edit-btn{
+      display: inline-block;
+      color: #26f;
+      font-weight: 400;
+      width: 200px;
+      text-align: right;
+      line-height: 88px;
+      position: absolute;
+      font-size: 32px;
+      right: 18px;
+      top: 20px;
+    }
   }
   .img-list{
     overflow: hidden;
@@ -256,6 +316,20 @@ export default {
         color: #FFF;
         line-height: 36px;
       }
+      .del-icon{
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+      .cir-icon{
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: 4px solid #ccc;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
     }
   }
   .footer-btn{