feat: 新增删除联系人

src/App.vue

@@ -52,7 +52,6 @@ export default defineComponent({
       connect();
     })
 
-
     watch(() => connectionState.error, () => {
       if (connectionState.error) {
         connect();

src/db/ChatMessageDB.ts

@@ -48,4 +48,15 @@ export default class ChatMessageDB extends MyAppDatabase {
       })
       .toArray()
   }
+
+  deleteMsgGroup(masterId: string, targetId: string) {
+    this.chatMessage
+      .filter((item) => {
+        return (
+          item.masterId === masterId &&
+          (item.from === item.masterId ? item.target : item.from) === targetId
+        )
+      })
+      .delete()
+  }
 }

src/import-png.d.ts

 declare module '*.png';
-declare module '*.jpg';
\ No newline at end of file
+declare module '*.jpg';
+

src/long-press.d.ts

+declare module '*longPress'

src/main.ts

@@ -2,7 +2,15 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import 'tailwindcss/tailwind.css'
-import { NoticeBar, Popup, Search, Swipe, SwipeItem, Toast } from 'vant'
+import {
+  NoticeBar,
+  Popup,
+  Search,
+  Swipe,
+  SwipeItem,
+  Toast,
+  Popover,
+} from 'vant'
 import '@/assets/styles/style.less'
 import { Quasar } from 'quasar'
 import quasarConfig from './plugins/quasar-config'
@@ -18,6 +26,7 @@ import '@quasar/extras/fontawesome-v5/fontawesome-v5.css'
 import '@quasar/extras/ionicons-v4/ionicons-v4.css'
 // import '@quasar/extras/mdi-v4/mdi-v4.css'
 import '@quasar/extras/eva-icons/eva-icons.css'
+import longPress from '@/plugins/longPress'
 
 createApp(App)
   .use(router)
@@ -27,5 +36,7 @@ createApp(App)
   .use(Popup)
   .use(Search)
   .use(Toast)
+  .use(Popover)
+  .use(longPress)
   .use(Quasar, quasarConfig)
   .mount('#app')

src/plugins/longPress.js

+//全局注册长按指令插件
+export default {
+  install: (app) => {
+    let optionData = getOptionData(app)
+    if (optionData.option) {
+      app.directive('longpress', optionData.option)
+    } else {
+      console.warn(
+        '您的vue版本[' +
+        optionData.version +
+        ']尚不能支持[longpress]指令插件！',
+      )
+    }
+  },
+}
+
+//获取指令注册属性参数
+function getOptionData(app) {
+  //获取vue版本号
+  var version = app.version
+  if (Number(version.split('.')[0]) === 3) {
+    //输出vue3的指令注册option
+    return {
+      version,
+      option: {
+        beforeMount(el, binding) {
+          bindFunction(el, binding)
+        },
+        unmounted(el) {
+          unBindFunction(el)
+        },
+      },
+    }
+  } else if (Number(version.split('.')[0]) === 2) {
+    //输出vue2的指令注册option
+    return {
+      version,
+      option: {
+        bind: bindFunction,
+        unbind: unBindFunction,
+      },
+    }
+  }
+  return { version, option: null }
+}
+
+//注册指令执行函数
+function bindFunction(el, binding) {
+
+  // 确保指令入参是个函数
+  if (typeof binding.value !== 'function') {
+    // 如果指令入参不是函数则输出警告
+    console.warn(
+      `[longpress:] provided expression is not a function, but has to be`,
+    )
+  }
+
+  // 定时器指针
+  let pressTimer = null
+
+  // 操作计时函数
+  let start = (e) => {
+    if (e.type === 'click' && e.button !== 0) {
+      return
+    }
+
+    if (pressTimer === null) {
+      pressTimer = setTimeout(() => {
+        //长按1秒之后，执行函数
+        binding.value()
+      }, 1000)
+    }
+  }
+
+  // 销毁计时器
+  let cancel = () => {
+    if (pressTimer !== null) {
+      clearTimeout(pressTimer)
+      pressTimer = null
+    }
+  }
+
+  //定义监听销毁的函数
+  el.unbindEventListener = () => {
+    //销毁所有的监听
+    el.removeEventListener('mousedown', start)
+    el.removeEventListener('touchstart', start)
+    el.removeEventListener('click', cancel)
+    el.removeEventListener('mouseout', cancel)
+    el.removeEventListener('touchend', cancel)
+    el.removeEventListener('touchcancel', cancel)
+  }
+
+  // 监听到这些事件时候，产生定时器
+  el.addEventListener('mousedown', start)
+  el.addEventListener('touchstart', start)
+  // 监听到这些事件时候，移除定时器
+  el.addEventListener('click', cancel)
+  el.addEventListener('mouseout', cancel)
+  el.addEventListener('touchend', cancel)
+  el.addEventListener('touchcancel', cancel)
+}
+
+//注销指令执行函数
+function unBindFunction(el) {
+  if (el.unbindEventListener) {
+    el.unbindEventListener()
+  }
+}

src/views/withMenu/ChatList/index.vue

@@ -5,13 +5,24 @@
         style="background-color: #F7F7FA !important;"
     />
     <div class="mx-5">
-        <ChatListItem
-            v-for="item in cardList"
+        <div
+            v-for="(item, index) in cardList"
             :key="item.masterId"
-            :unReadMsgNum="item.unreadMsgCount"
-            :id="item.masterId"
-            :latest_msg_content="item.content"
-        ></ChatListItem>
+            v-touch-hold:300="handleTouchHoldItem(index)"
+            @click.capture="handleClickItem(index)"
+        >
+            <div @click.capture="stop">
+                <van-popover @select="onSelect" :actions="actions" v-model:show="showList[index]">
+                    <template #reference>
+                        <ChatListItem
+                            :unReadMsgNum="item.unreadMsgCount"
+                            :id="item.masterId"
+                            :latest_msg_content="item.content"
+                        ></ChatListItem>
+                    </template>
+                </van-popover>
+            </div>
+        </div>
     </div>
 </template>
 <script lang="ts" setup>
@@ -24,18 +35,24 @@ import { iChatListCard } from "@/db";
 import { chatCardTimeStamp } from "@/store/chatCardStore";
 import { getUserMsg } from "@/utils/userMsg";
 import { eRole } from "@/types/roleType";
+import ChatMessageDB from "@/db/ChatMessageDB";
+
 
 const cardList = ref<iChatListCard[]>([]);
+const showList = ref<boolean[]>([]);
+const selectedIndex = ref<number>()
 
-onMounted(async () => {
+const renderList = async () => {
     const list = await ChatListCardDB.getInstance().getCardList(from)
     cardList.value = list;
+}
+
+onMounted(async () => {
+    await renderList();
 })
 
 watch(chatCardTimeStamp, async () => {
-    console.log('in chatlist', chatCardTimeStamp.value);
-    const list = await ChatListCardDB.getInstance().getCardList(from)
-    cardList.value = list;
+    await renderList();
 })
 
 const navBarTitle = computed(() => {
@@ -46,5 +63,39 @@ const navBarTitle = computed(() => {
     }
 })
 
+const actions = [
+    {
+        text: '删除对话', callback: async (item: iChatListCard) => {
+            ChatMessageDB.getInstance().deleteMsgGroup(item.masterId, item.targetId);
+            ChatListCardDB.getInstance().deleteCard(item.masterId, item.targetId);
+            await renderList();
+        }
+    },
+];
+
+function stop(e: Event) {
+    e.stopPropagation();
+}
+
+function handleTouchHoldItem(index: number) {
+    return () => {
+        showList.value[index] = true;
+        selectedIndex.value = index;
+    }
+}
+
+function handleClickItem(index: number) {
+    showList.value[index] = false;
+    console.log('click', index);
+}
+
+const onSelect = (action: typeof actions[0]) => {
+    selectedIndex.value !== undefined && action && action.callback && action.callback(cardList.value[selectedIndex.value]);
+}
 
-</script>
\ No newline at end of file
+</script>
+<style lang="less" scoped>
+/deep/ .van-popover__wrapper {
+    width: 100%;
+}
+</style>
\ No newline at end of file

tsconfig.json

@@ -31,9 +31,10 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "tests/**/*.ts",
-    "tests/**/*.tsx"
+    "tests/**/*.tsx",
+    "src/plugins/longPress.js"
   ],
   "exclude": [
     "node_modules"
   ]
-}
+}
\ No newline at end of file