增加聊天功能

pageChat/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <view class="min-page bg-f7 color-333 u-font-28">
+    <up-sticky>
+      <view class="top u-flex u-row-between u-col-center">
+        <view style="width: 420rpx;">
+          <up-search
+            v-model="query.key"
+            placeholder="搜索群名称"
+            :showAction="false"
+            @clear="throttleSearch"
+            @change="throttleSearch"
+          ></up-search>
+        </view>
+        <view class="u-flex u-col-center" @click="clearAllmsg">
+          <text class="color-666 u-m-r-12">清空未读</text>
+          <image src="/pageChat/static/clear.png" class="clear"></image>
+        </view>
+      </view>
+    </up-sticky>
+    <view class="list">
+      <up-swipe-action>
+        <up-swipe-action-item
+          :options="options1"
+          v-for="(item, index) in list"
+          v-model:show="item.showOptions"
+          @click="optionsClick($event, item, index)"
+          :key="item.id"
+        >
+          <view class="item u-flex" @click="toDetail(item)">
+            <view class="u-flex avatar">
+              <up-avatar
+                size="118rpx"
+                :src="item.avatar"
+                shape="square"
+                round="8rpx"
+              ></up-avatar>
+              <view class="bandage" v-if="item.unread_count > 0">{{
+                item.unread_count >= 99 ? "99" : item.unread_count
+              }}</view>
+            </view>
+            <view class="u-flex-1 u-flex u-row-between u-p-l-14">
+              <view style="max-width: 364rpx">
+                <view class="color-000 u-line-1">{{ item.name }}</view>
+                <view class="u-m-t-28 u-line-1 u-font-24 color-999"
+                  >{{ item.msg }}</view
+                >
+              </view>
+              <view class="color-333 u-font-24">{{ item.send_time }}</view>
+            </view>
+          </view>
+        </up-swipe-action-item>
+      </up-swipe-action>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import * as chatApi from "@/http/php/chat";
+import { ref, reactive } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+
+// 使用 reactive 创建响应式对象
+const options1 = reactive([
+  {
+    text: "删除",
+    style: {
+      backgroundColor: "#f56c6c",
+      color: "#fff",
+    },
+  },
+]);
+
+function optionsClick(e, item, index) {
+  if (e.index == 0) {
+    //删除
+
+    chatApi
+      .sessionlistdel({
+        session_id: item.session_id,
+      })
+      .then((res) => {
+        if (res) {
+          uni.showToast({
+            title: "删除成功",
+            icon: "none",
+            duration: 1000,
+          });
+          list.value.splice(index, 1);
+          setTimeout(() => {
+            getList();
+          }, 1000);
+        }
+      });
+  }
+}
+
+const list = ref([]);
+let allList = [];
+
+const query = reactive({
+  key: "",
+});
+
+function throttle(fn, delay) {
+  let timer = null;
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+}
+
+//使用节流函数
+const throttleSearch = throttle(search, 500);
+function search() {
+  list.value = allList
+    .filter((v) => v.name.includes(query.key.trim()))
+    .map((v) => {
+      return {
+        ...v,
+        showOptions: false,
+      };
+    });
+}
+async function getList() {
+  const res = await chatApi.messageSessionList({});
+  allList = (res.list || []).filter((v) => !v.is_del);
+  search();
+}
+
+async function clearAllmsg() {
+  uni.showModal({
+    title: "提示",
+    content: "确定要清空所有未读消息吗？",
+    success: async (res) => {
+      if (res.confirm) {
+        const res = await chatApi.messageMarkReadAll({
+          session_ids: list.value.map((v) => v.session_id).join(","),
+        });
+        if (res) {
+          uni.showToast({
+            title: "清空成功",
+            icon: "none",
+            duration: 2000,
+          });
+          setTimeout(() => {
+            getList();
+          }, 1000);
+        }
+      }
+    },
+  });
+}
+
+function toDetail(item) {
+  if (!item.is_th) {
+    return uni.showToast({
+      title: "你已不在该群内",
+      icon: "none",
+      duration: 1500,
+    });
+  }
+  uni.navigateTo({
+    url:
+      "/pageChat/chat" +
+      `?group_id=${item.group_id}&session_id=${item.session_id}`,
+  });
+}
+
+const messageUnreadCount = ref(0);
+onShow(() => {
+  getList();
+  // 获取未读消息总数
+  chatApi.messageUnreadCount({}).then((res) => {
+    console.log(res);
+    messageUnreadCount.value = res.total;
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.top {
+  padding: 32rpx 28rpx;
+  background-color: #fff;
+}
+.clear {
+  width: 38rpx;
+  height: 38rpx;
+}
+.list {
+  padding: 36rpx 28rpx;
+  .item {
+    padding: 32rpx 28rpx;
+    background-color: #fff;
+    border-radius: 16rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 16rpx;
+    .avatar {
+      position: relative;
+      .bandage {
+        position: absolute;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        background: #ff1c1c;
+        font-size: 24rpx;
+        color: #ffffff;
+        width: 38rpx;
+        height: 38rpx;
+        text-align: center;
+        line-height: 38rpx;
+        right: -10rpx;
+        top: -10rpx;
+      }
+    }
+  }
+}
+</style>