30874

src/project/saas/AppResidentDocument/AppResidentDocument.vue

@@ -16,26 +16,34 @@
       </u-search>
     </div>
     <div class="dataes" v-if="datas.length">
-      <div class="datass" v-for="(item, index) in datas" :key="index" @click="toDetailCard(item)">
-        <div class="left">
-          <img :src="item.photo" alt="" v-if="item.photo"/>
-          <img src="./components/img/4.png" alt="" v-else/>
-        </div>
-        <div class="right">
-          <div class="rightTop">
-            <span class="name">{{ item.name }}</span>
-            <span class="btn" v-if="item.doRight == 1">
-            <!-- <span class="btn"> -->
-              <img src="./components/img/edit-icon.png" alt="" @click.stop="edit(item.id)">
-              <img src="./components/img/del-icon.png" alt="" @click.stop="del(item.id)">
-            </span>
+      <u-swipe-action
+        :show="item.show"
+        :index="index"
+        v-for="(item, index) in datas"
+        :key="item.id"
+        @click="onClick"
+        @open="onOpen"
+        disabled="item.doRight !== '1'"
+        @content-click="toDetailCard(item)"
+        :options="options">
+        <div class="datass">
+          <div class="left">
+            <img :src="item.photo" alt="" v-if="item.photo"/>
+            <img src="./components/img/4.png" alt="" v-else/>
           </div>
-          <div class="rightBottom">
-            <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</span>
-            <span>{{ item.phone }}</span>
+          <div class="right">
+            <div class="rightTop">
+              <span class="name">{{ item.name }}</span>
+              <span class="btn" v-if="item.doRight == 1">
+              </span>
+            </div>
+            <div class="rightBottom">
+              <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</span>
+              <span>{{ item.phone }}</span>
+            </div>
           </div>
         </div>
-      </div>
+		  </u-swipe-action>
     </div>
     <div class="empty" v-if="!datas.length && isMore">
       <img src="https://cdn.cunwuyun.cn/dvcp/h5/no-data.png" alt="">
@@ -72,7 +80,21 @@
         currentTabs: 0,
         areaId: '',
         isMore: false,
-        areaName: ''
+        areaName: '',
+				options: [
+					{
+						text: '编辑',
+						style: {
+							backgroundColor: '#007aff'
+						}
+					},
+					{
+						text: '删除',
+						style: {
+							backgroundColor: '#dd524d'
+						}
+					}
+				]
       }
     },
 
@@ -84,13 +106,31 @@
       this.areaId = this.user.areaId
       this.areaName = this.user.areaName
       this.getList()
-      uni.$on('reload', res => {
+      uni.$on('reload', () => {
         this.current = 1
         this.getList()
       })
     },
 
     methods: {
+      onClick (index, i) {
+				if (i == 1) {
+          this.del(this.datas[index].id)
+				} else {
+				  this.datas[index].show = false
+					this.edit(this.datas[index].id)
+				}
+      },
+
+			onOpen (index) {
+				this.datas[index].show = true
+				this.datas.map((val, i) => {
+					if(index != i) {
+            this.datas[i].show = false
+          }
+				})
+			},
+
       getList() {
         this.$loading()
         this.$http.post('/app/appresident/list', null, {
@@ -102,7 +142,17 @@
           }
         }).then((res) => {
           if (res.code == 0) {
-            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records.map(v => {
+              return {
+                ...v,
+                show: false
+              }
+            })] : res.data.records.map(v => {
+              return {
+                ...v,
+                show: false
+              }
+            })
 
             this.pages = res.data.pages