删除聊天框

src/pages/chat.vue

@@ -36,6 +36,7 @@
                     @blur="message = $event.detail.value"
                     @input="message = $event.detail"
                     @confirm="confirm"
+                    clearable
                 />
 
                 <img

src/pages/news.vue

@@ -1,13 +1,19 @@
 <config>
 {
     "navigationBarTitleText": "消息中心",
-    "navigationStyle": "default"
+    "navigationStyle": "default",
+    "usingComponents": {
+        "van-swipe-cell": "/vant/swipe-cell/index"
+    }
 }
 </config>
 <template>
     <div>
         <block v-for="item in list" :key="item.id">
-            <news-info :info="item" :dot="item.unread"></news-info>
+            <van-swipe-cell :right-width="65">
+                <news-info :info="item" :dot="item.unread"></news-info>
+                <div slot="right" class="del" @click="closeNews(item)">删除</div>
+            </van-swipe-cell>
         </block>
 
         <!-- 
@@ -52,13 +58,39 @@ export default {
                     }
                 });
             }
+        },
+        closeNews(info) {
+            wx.showModal({
+                content: '确定要删除该聊天记录吗？',
+                confirmColor: this.$colors.prim,
+                success: res => {
+                    if (res.confirm) {
+                        this.$http.post('/topic/del/' + info.id).then(res => {
+                            this.toast('删除成功', 'success');
+                            setTimeout(() => {
+                                this.loginMethods();
+                            }, 1000);
+                        });
+                    }
+                }
+            });
         }
     }
 };
 </script>
-
 <style lang="less" scoped>
 /deep/ .van-empty {
     padding-top: 80px !important;
 }
+
+.del {
+    background-color: @red;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 12px;
+    width: 65px;
+}
 </style>

src/styles/common.less

@@ -12,6 +12,7 @@
 @border3: #dfe1e6;
 @border4: #f2f6fc;
 @bg: #f5f7fa;
+@red:#FD4D49;
 .flex1 {
     flex-grow: 1;
 }