新增删除功能

src/apps/AppGridManagement/AddFamily.vue

@@ -117,7 +117,6 @@ export default {
     this.userId = option.id
     this.areaId = this.user.areaId
     this.areaName = this.user.areaName
-    console.log(this.userId)
   },
   onShow() {
     document.title = '新增责任家庭'

src/apps/AppGridManagement/FamilyList.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="FamilyList">
-    <div class="title">户主列表</div>
+    <div class="title">户主列表<span style="font-size: 14px; color: #2979ff;" @click="changeType" v-if="edit">修改</span><span style="font-size: 14px; color: #2979ff;" @click="edit = true" v-else>取消</span></div>
     <div class="main" v-if="list.length">
-      <ul v-for="item in list" :key="item.id">
+      <ul v-for="(item,index) in list" :key="index">
         <li>
           <div class="user">
+             <div v-if="!edit">
+              <img src="./components/img/xz.png" alt="" class="checkbox" v-if="!item.checked" @click="userClick(index)">
+              <img src="./components/img/xzh.png" alt="" class="checkbox" v-else @click="userClick(index)">
+            </div>
             <div>
               <img :src="item.photo" class="userImg" v-if="item.photo">
               <img src="./components/img/user-img.png" alt="" class="userImg" v-else>
@@ -23,7 +27,9 @@
     </div>
     <AiEmpty description="暂无数据" class="emptyWrap" v-if="!list.length"></AiEmpty>
     <div style="height:70px;"></div>
-    <div class="footer" @click="toAddFamily()">新增责任家庭</div>
+    <div class="footer" @click="toAddFamily()" v-if="edit">新增责任家庭</div>
+    <div class="footer" @click="delFamily()" v-else>删除</div>
+
   </div>
 </template>
 
@@ -34,6 +40,8 @@ export default {
       list:[],
       current:1,
       userId: '',
+      edit: true,
+      checked: true
     }
   },
   methods: {
@@ -47,6 +55,39 @@ export default {
     toAddFamily(){
       uni.navigateTo({url: `./AddFamily?id=${this.userId}`})
     },
+    userClick(index) {
+      this.list[index].checked = !this.list[index].checked
+      this.$forceUpdate()
+    },
+    // 点击删除
+    delFamily(){
+      var ids = []
+      this.list.map((item) => {
+        if(item.checked) {
+          ids.push(item.gmrId)
+        }
+      })
+
+      if(!ids.length) {
+        return this.$u.toast('请选中需要删除的家庭户主')
+      }
+      this.$confirm(`是否删除这些关联家庭信息？`).then(() => {
+        this.$http.post(`/app/appgirdmemberresident/delete?ids=${ids.join(',')}`).then((res) => {
+          if (res.code == 0) {
+            this.$u.toast('删除成功')
+            uni.$emit('updateList')
+            this.$forceUpdate()
+            this.edit = true
+          }
+        })
+      })
+    },
+    changeType() {
+      this.edit = false
+      this.list.map((item) => {
+        item.checked = false
+      })
+    }
   },
   onLoad(option) {
     this.userId = option.id
@@ -70,6 +111,8 @@ export default {
 <style lang="scss" scoped>
 .FamilyList {
   .title {
+    display: flex;
+    justify-content: space-between;
     padding: 24px 32px;
     background-color: #F3F6F9;
     font-size: 34px;
@@ -86,6 +129,12 @@ export default {
         display: flex;
         justify-content: flex-start;
         padding-top: 24px;
+          .checkbox{
+          margin-top: 20px;
+          margin-right: 32px;
+          width: 48px;
+          height: 48px;
+        }
           .userImg {
           padding-right: 32px;
           width: 80px;