名片夹删除名片

assets/css/otherpage/user/userCard.scss

@@ -12,7 +12,7 @@
   position: relative;
 
   .userList {
-    padding: 0 pxtovw(10);
+    padding-left: pxtovw(10);
 
     .cell {
       height: pxtovw(80);
@@ -87,8 +87,9 @@
           }
         }
         .addTime {
-          margin-top: 15px;
+          margin-top: pxtovw(15);
           align-self: flex-start;
+          margin-right: pxtovw(10);
 
           p {
             height: pxtovw(17);

pages/otherpage/user/card.vue

@@ -9,21 +9,33 @@
         infinite-scroll-immediate-check="true"
         v-if="userList.length > 0"
       >
-        <div class="cell" v-for="(item, index) in userList" :key="'userList' + index" @click="openDialog(item)">
-          <div class="userImg" :class="calcUserVip(item)">
-            <img :src="item.iconUrl" alt="">
-          </div>
-
-          <div class="right">
-            <div class="userInfo">
-              <p class="name">{{item.nickname || ''}}</p>
-              <p class="tips">{{item.company || ''}} {{item.title}}</p>
+        <mt-cell-swipe
+          v-for="(item, index) in userList" :key="'userList' + index"
+          :right="[
+            {
+              content: '删除',
+              style: { background: 'red', color: '#fff', display:'table-cell',verticalAlign:'middle'},
+              handler: () => deleteItem(item)
+            }
+            ]">
+          <div slot="title" class="cell"
+            @click="openDialog(item)">
+            <div class="userImg" :class="calcUserVip(item)">
+              <img :src="item.iconUrl" alt="">
             </div>
-            <div class="addTime">
-              <p>{{item.processTimeName || ''}}</p>
+
+            <div class="right">
+              <div class="userInfo">
+                <p class="name">{{item.nickname || ''}}</p>
+                <p class="tips">{{item.company || ''}} {{item.title}}</p>
+              </div>
+              <div class="addTime">
+                <p>{{item.processTimeName || ''}}</p>
+              </div>
             </div>
           </div>
-        </div>
+        </mt-cell-swipe>
+
       </div>
       <div v-else-if="!loadingPage" class="noneList">
         <p>暂无名片</p>
@@ -68,13 +80,14 @@
    * 名片夹
    */
   import Vue from 'vue'
-  import { InfiniteScroll, Loadmore } from 'mint-ui';
+  import { InfiniteScroll, Loadmore, CellSwipe, MessageBox } from 'mint-ui';
   import MintUI from 'mint-ui';
   import "mint-ui/lib/style.css";
 
   Vue.use(InfiniteScroll);
   Vue.use(MintUI);
   Vue.component(Loadmore.name, Loadmore);
+  Vue.component(CellSwipe.name, CellSwipe);
 
   export default {
     name: 'UserCard',
@@ -131,9 +144,9 @@
       openDialog(selectedItem) {
         this.showToast = true
         this.selectedItem = selectedItem
-        this.userData.forEach(item=>{
+        this.userData.forEach(item => {
           item.value = ''
-          item.value = selectedItem[item.name] || ''
+          item.value = selectedItem[ item.name ] || ''
         })
         this.userData = [ ...this.userData ]
       },
@@ -177,13 +190,43 @@
       },
 
       calcUserVip(item) {
-        const {isVip, vipTypeID} = item
-        return {['vip'+vipTypeID]: isVip}
+        const { isVip, vipTypeID } = item
+        return { [ 'vip' + vipTypeID ]: isVip }
+      },
+      deleteItem(item) {
+        console.log(item)
+        const { nameCardId=0, nickname} = item
+        MessageBox.confirm(`将从您的名片夹中移除 ${nickname} 的名片`).then(action => {
+          let loading = this.$loading({
+            title: "删除中..."
+          })
+          this.$axios.post('/api/nameCard/delete', {
+            nameCardId
+          }).then(res => {
+            if (Number(res.data.status) === 1) {
+              loading && loading.close()
+              this.$toast('删除成功！')
+              this.refresh()
+            } else {
+              loading && loading.close()
+            }
+          }).catch((e) => {
+            loading && loading.close()
+          })
+        }).catch(e=>{
+
+        });
       }
     },
 
   }
 </script>
+<style lang="scss">
+  .mint-cell-swipe-buttongroup {
+    display: table;
+  }
+</style>
+
 <style lang="scss" scoped>
   @import '../../../assets/css/otherpage/user/userCard.scss';
 </style>