站内信信息展示

TUIKit/components/TUIChat/index.vue

@@ -76,6 +76,8 @@
             :placeholder="TUITranslateService.t('TUIChat.请输入消息')"
             :inputToolbarDisplayType="inputToolbarDisplayType"
             @changeToolbarDisplayType="changeToolbarDisplayType"
+            
+     
           />
         </template>
       </div>
@@ -111,7 +113,7 @@ import { isPC, isWeChat, isUniFrameWork, isMobile, isApp } from '../../utils/env
 import { ToolbarDisplayType } from '../../interface';
 import TUIChatConfig from './config';
 // @Start uniapp use Chat only
-import { onLoad, onUnload } from '@dcloudio/uni-app';
+import { onLoad, onUnload,onNavigationBarButtonTap } from '@dcloudio/uni-app';
 import { initChat, logout } from './entry-chat-only.ts';
 
 onLoad((options) => {
@@ -141,7 +143,12 @@ const messageInputRef = ref();
 const messageListRef = ref<InstanceType<typeof MessageList>>();
 const headerExtensionList = ref<ExtensionInfo[]>([]);
 const featureConfig = TUIChatConfig.getFeatureConfig();
-const ht = uni.getSystemInfoSync().windowHeight
+
+onNavigationBarButtonTap((e) => {
+  if (isGroup.value) {
+    handleGroup();
+  }
+});
 
 
 onMounted(() => {
@@ -214,6 +221,9 @@ const handleEditor = (message: IMessageModel, type: string) => {
 
 const handleGroup = () => {
   headerExtensionList.value[0].listener.onClicked({ groupID: groupID.value });
+  uni.navigateTo({
+          url: `/TUIKit/components/TUIGroup/index`
+        });
 };
 
 function changeToolbarDisplayType(type: ToolbarDisplayType) {

TUIKit/components/TUIContact/indexsea.vue

@@ -5,7 +5,7 @@
       :class="['tui-contact', !isPC && 'tui-contact-h5']"
     >
       <div :class="['tui-contact-left', !isPC && 'tui-contact-h5-left']" :style="{height:ht+'px'}" >
-        <ContactSearch />
+        <ContactSearch @cancel="cancel" />
         <ContactList :class="['tui-contact-left-list', !isPC && 'tui-contact-h5-left-list']" />
       </div>
       <div
@@ -43,7 +43,9 @@
       require: true,
     }
   });
-  
+  const cancel=(item)=>{
+    emits('switchConversation', item);
+  }
   const displayTypeRef = ref<string>(props.displayType || 'contactList');
   const isShowSelectFriend = ref(false);
   const isShowContactList = ref(true);

api/home.js

@@ -36,7 +36,20 @@ export function getCategory(parent_id = 0) {
     loading: false,
   });
 }
-
+/**
+ * 获取首页商品分类
+ * @param pagesize
+ * @param page
+ * @param keyword
+ * @param category_id
+ */
+export function getbendi(data) {
+  return http.request({
+    url: `goods/goods/bendi`,
+    method: Method.GET,
+    data
+  });
+}
 /**
  * 获取热门关键词
  * @param num

api/members.js

@@ -291,6 +291,41 @@ export function getUserimInfo() {
     needToken: true,
   });
 }
+
+/**
+ * 获取站内信的数据
+ * @returns {AxiosPromise}
+ */
+export function getMember(params) {
+  return http.request({
+    url: "/message/member",
+    method: Method.GET,
+    needToken: true,
+    data:params
+  });
+}
+/**
+ * 获取站内信已读状态修改
+ */
+export function getMemberstate(params) {
+  return http.request({
+    url: "/message/member/read",
+    method: Method.POST,
+    needToken: true,
+    data:params
+  });
+}
+/**
+ * 获取站内信删除
+ */
+export function getMemberdelete(params) {
+  return http.request({
+    url: "/message/member/delete",
+    method: Method.POST,
+    needToken: true,
+    data:params
+  });
+}
 /**
  * 获取当前用户的预存款
  * @returns {AxiosPromise}

config/api.js

@@ -9,7 +9,8 @@ const dev = {
 
 	common: "http://192.168.1.200:8890",
 	buyer: "http://192.168.1.200:8888",
-	vlog: "http://192.168.1.86:8099"
+	vlog: "http://192.168.1.200:8099",
+	web: "http://192.168.1.200:8099",
 
 };
 // 生产环境
@@ -18,7 +19,7 @@ const prod = {
 	// buyer: "https://buyer-api.pickmall.cn",
 	common: "http://192.168.1.200:8890",
 	buyer: "http://192.168.1.200:8888",
-	vlog: "http://192.168.1.86:8099"
+	vlog: "http://192.168.1.200:8099",
 };
 
 //默认生产环境

package-lock.json

@@ -236,6 +236,11 @@
         "@babel/helper-validator-identifier": "^7.25.9"
       }
     },
+    "@dcloudio/uni-app": {
+      "version": "2.0.2-4050720250324001",
+      "resolved": "https://registry.npmmirror.com/@dcloudio/uni-app/-/uni-app-2.0.2-4050720250324001.tgz",
+      "integrity": "sha512-3hqUSmRQnclnG9bCcjxWsAy5A7fmBOKNZ2BbzmoPihGQVY5HvLDsDZp7VK3ZA6d7l80kAhMM/8ayceT0fWN0oQ=="
+    },
     "@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -1143,6 +1148,11 @@
         "sdp": "^3.2.0"
       }
     },
+    "ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w=="
+    },
     "yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -1,8 +1,10 @@
 {
     "dependencies": {
+        "@dcloudio/uni-app": "^2.0.2-4050720250324001",
         "@tencentcloud/chat-uikit-uniapp": "^2.4.3",
         "@vue/runtime-core": "^3.5.13",
         "unplugin-vue2-script-setup": "^0.11.4",
-        "vue": "^3.2.0"
+        "vue": "^3.2.0",
+        "ws": "^8.18.1"
     }
 }

pages.json

@@ -535,6 +535,15 @@
 				"navigationBarTextStyle": "white",
 				"navigationBarBackgroundColor": "#181b27"
 			}
+		},
+		{
+			"path": "pages/tabbar/im/details/index",
+			"style": {
+				"navigationBarTitleText": "消息详情",
+				"navigationBarTextStyle": "white",
+				"navigationBarBackgroundColor": "#181b27"
+				
+			}
 		}
 	],
 	"subPackages": [
@@ -1192,22 +1201,27 @@
 				{
 					"path": "components/TUIChat/index",
 					"style": {
-						"navigationBarTitleText": "腾讯云 IM",
-						"app-plus": {
-							"softinputMode": "adjustResize",
-							"titleNView": {
-								"buttons": [{
-									"type": "menu"
-								}]
-							}
-						},
-						"h5": {
-							"titleNView": {
-								"buttons": []
+					  "navigationBarTitleText": "腾讯云 IM",
+					  "app-plus": {
+						"softinputMode": "adjustResize",
+						"titleNView": {
+						  "buttons": [
+							{
+							  "type": "menu"
+							//   "click": "handleMenuClick" // 绑定点击事件
 							}
+						  ]
 						}
+					  },
+					  "h5": {
+						"titleNView": {
+							"buttons": [{
+								"type": "menu"
+							  }]
+						}
+					  }
 					}
-				},
+				  },
 				// 集成 chat 组件，必须配置该路径: 视频播放
 				{
 					"path": "components/TUIChat/video-play",
@@ -1235,7 +1249,7 @@
 				{
 					"path": "components/TUIGroup/index",
 					"style": {
-						"navigationBarTitleText": "腾讯云 IM4",
+						"navigationBarTitleText": "群管理",
 						"app-plus": {
 							"titleNView": {
 								"backButton": true // 显示返回按钮
@@ -1284,7 +1298,7 @@
 				"text": "消息"
 			},
 			{
-				"pagePath": "pages/me/me",
+				"pagePath": "pages/tabbar/user/my",
 				"text": "我的"
 			}
 		],

pages/mine/set/personMsg.vue

@@ -32,7 +32,7 @@
 			<view class="submit" @click="submit">保存</view>
 			<view class="submit light" @click="showModalDialog">退出登录</view>
 		</div>
-		<u-modal show-cancel-button v-model="quitShow" @confirm="confirm" :confirm-color="lightColor" :async-close="true"
+		<u-modal show-cancel-button v-model="quitShow" @confirm="confirm" :confirm-color="lightColor" :async-close="true"
 		  :content="userInfo.id ? '确定要退出登录么？' : '确定要返回登录么？'"></u-modal>
 		<m-city :provinceData="region" headTitle="区域选择" ref="cityPicker" @funcValue="getpickerParentValue"
 			pickerSize="4"></m-city>
@@ -44,7 +44,7 @@
 	} from "@/api/members.js";
 	import {
 		upload
-	} from "@/api/common.js";
+	} from "@/api/common.js";
 	import { logout } from "@/api/login";
 	import storage from "@/utils/storage.js";
 	import uFormItem from "@/uview-ui/components/u-form-item/u-form-item.vue";
@@ -55,8 +55,8 @@
 			"m-city": gkcity
 		},
 		data() {
-			return {
-				quitShow:false,
+			return {
+				quitShow:false,
 				userInfo:{},
 				lightColor: this.$lightColor, //高亮颜色
 				form: {
@@ -90,35 +90,35 @@
 			};
 		},
 		onShow() {
-			console.log('personMSg')
-			this.userInfo = this.$options.filters.isLogin();
+			console.log('personMSg')
+			this.userInfo = this.$options.filters.isLogin();
 			console.log(this.userInfo)
 		},
-		methods: {
-			showModalDialog() {
-			  this.quitShow = true;
-			},
-			clear() {
-			  storage.setAccessToken("");
-			  storage.setRefreshToken("");
-			  storage.setUserInfo({});
-			  // 清理vlog信息
-			  storage.setVlogToken("")
-			  storage.setVlogUserInfo({})
-			  this.$options.filters.navigateToLogin("redirectTo");
-			},
-			/**
-			 * 确认退出
-			 * 清除缓存重新登录
-			 */
-			async confirm() {
-			  await logout();
-			  this.clear();
+		methods: {
+			showModalDialog() {
+			  this.quitShow = true;
+			},
+			clear() {
+			  storage.setAccessToken("");
+			  storage.setRefreshToken("");
+			  storage.setUserInfo({});
+			  // 清理vlog信息
+			  storage.setVlogToken("")
+			  storage.setVlogUserInfo({})
+			  this.$options.filters.navigateToLogin("redirectTo");
+			},
+			/**
+			 * 确认退出
+			 * 清除缓存重新登录
+			 */
+			async confirm() {
+			  await logout();
+			  this.clear();
 			},
 			/**
 			 * 退出登录
 			 */
-			quiteLoginOut() {
+			quiteLoginOut() {
 				console.log(this.$options)
 				this.$options.filters.quiteLoginOut();
 			},
@@ -260,18 +260,18 @@
 
 	.form {
 		background-color: #ffffff;
-	}
-	.bottom{
-	  position: fixed;
-	  bottom: 40px;
-	  display: flex;
-	  align-items: center;
-	  width: 100%;
-	  >.submit{
-	    background: $light-color;
-	    color: #fff;
-	    width: 40%;
-	  }
-	
+	}
+	.bottom{
+	  position: fixed;
+	  bottom: 40px;
+	  display: flex;
+	  align-items: center;
+	  width: 100%;
+	  >.submit{
+	    background: $light-color;
+	    color: #fff;
+	    width: 40%;
+	  }
+	
 	}
 </style>

pages/tabbar/home/template/tpl_shop.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="layout">
+    <div v-for="item in list" :key="item.id" class="shop" @click="handleClick(item)">
+      <div class="pl_img">
+        <img :src="item.thumbnail" alt="" />
+        <div class="price" style="font-size: 20px">
+          <div>价格:{{ item.price }}￥</div>
+          <div>限量:{{ item.geQuantity }}</div>
+        </div>
+      </div>
+      <div style="font-size: 15px">
+        <div style="padding: 5px">{{ item.sellingPoint }}</div>
+        <div style="padding: 5px">
+          {{ item.district }} {{ item.storeAddressDetail }}
+        </div>
+      </div>
+    </div>
+    <uni-load-more :status="loadMoreStatus" :showIcon="true"></uni-load-more>
+  </div>
+</template>
+<script>
+import * as API_home from "@/api/home";
+export default {
+  props: ["res"],
+  data() {
+    return {
+      list: [],
+      pageSize: 5,
+      pageNumber: 1,
+      state: false, // 状态
+      loadMoreStatus: "more", // 加载更多状态
+    };
+  },
+  mounted() {
+    this.getlist();
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  beforeDestroy() {
+    window.removeEventListener("scroll", this.handleScroll);
+  },
+  methods: {
+    getlist() {
+      const param = {
+        pageSize: this.pageSize,
+        pageNumber: this.pageNumber,
+      };
+      API_home.getbendi(param).then((res) => {
+        this.total = res.data.result.total;
+
+        this.list = res.data.result.records;
+        if (res.data.result.records.length < this.pageSize) {
+          this.loadMoreStatus = "noMore";
+        } else {
+          this.loadMoreStatus = "more";
+        }
+      });
+    },
+    handleClick(item) {
+      uni.navigateTo({
+        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
+      });
+    },
+    handleScroll() {
+      const currentHeight = window.scrollY;
+      const totalHeight = document.body.scrollHeight;
+      if (this.total == this.list.length) {
+        this.loadMoreStatus = "noMore";
+        return;
+      }
+      if (window.innerHeight + currentHeight >= totalHeight) {
+        this.loadMoreStatus = "loading";
+
+        this.pageSize += 5;
+        this.getlist();
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+
+.layout {
+  height: 100%;
+  background: #fff;
+  // display: flex;
+  // justify-content: space-between;
+}
+.shop {
+  border: 1px solid #eee;
+}
+.pl_img {
+  position: relative;
+  height: 180px;
+  width: calc(100% - 10px);
+  padding: 10px;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  .price {
+    width: calc(100% - 30px);
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    background-color: rgba(217, 217, 217, 0.4);
+    color: red;
+    display: flex;
+    justify-content: space-between;
+    padding: 5px;
+    // margin: 0 10px
+    // opacity: 1;
+  }
+}
+</style>

pages/tabbar/home/views.vue

@@ -18,6 +18,7 @@
       <leftTwoRightOne v-if="item.type == 'leftTwoRightOne'" :res="item.options" />
       <topOneBottomTwo v-if="item.type == 'topOneBottomTwo'" :res="item.options" />
       <topTwoBottomOne v-if="item.type == 'topTwoBottomOne'" :res="item.options" />
+  
       
 
       <flexThree v-if="item.type == 'flexThree'" :res="item.options"  />
@@ -30,7 +31,7 @@
       <activity v-if="item.type == 'activity'" :res="item.options" />
       <Talent v-if="item.type == 'talent'" :res="item.options" :model="item" />
       <goods v-if="item.type == 'goods'" :res="item.options" />
-
+      <shop v-if="item.type == 'shop'" :res="item.options" />
       <group v-if="item.type == 'group'" :res="item.options" />
       <!-- <joinGroup v-if="item.type == 'joinGroup'" :res="item.options" /> -->
       <!-- <integral v-if="item.type == 'integral'" :res="item.options" /> -->
@@ -61,6 +62,7 @@ import tpl_group from "@/pages/tabbar/home/template/tpl_group"; //
 import tpl_goods from "@/pages/tabbar/home/template/tpl_goods"; //商品分类以及分类中的商品
 import Talent from "@/pages/tabbar/home/template/Talent"; //达人店
 import tpl_activity from "@/pages/tabbar/home/template/tpl_activity"; //活动
+import tpl_shop from "@/pages/tabbar/home/template/tpl_shop"; //活动
 // 结束引用组件
 import { getFloorData ,getFloorgetBendi} from "@/api/home"; //获取楼层装修接口
 import permision from "@/js_sdk/wa-permission/permission.js"; //权限工具类
@@ -97,6 +99,7 @@ export default {
     group: tpl_group,
     Talent,
     activity: tpl_activity,
+    shop:tpl_shop
     // spike: tpl_spike,
     // joinGroup: tpl_join_group,
     // integral: tpl_integral,

pages/tabbar/im/details/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="conent">
+    <div class="marng">
+      {{ item.title }}
+    </div>
+    <div class="cen">
+      {{ item.content }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 定义一个变量来存储接收到的信息
+      item: {},
+    };
+  },
+  onLoad(options) {
+    // 解码并解析传递过来的 JSON 字符串
+    const item = JSON.parse(decodeURIComponent(options.item));
+    console.log("接收到的信息:", item);
+    this.item = item;
+    // 可以在这里使用接收到的信息进行后续操作
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.conent {
+  padding: 16px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.marng {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
+}
+.cen {
+  font-size: 16px;
+  color: #666;
+}
+</style>

pages/tabbar/im/index.vue

@@ -1,45 +1,84 @@
 <template>
   <div style="height: 100%">
     <div class="jolkp">
-      <div class="fan" :style="{ marginRight: statue == 0 ? '56%' : '70%' }">
-        <span @click="hui(0)">消息</span>
+      <div class="fan" :style="{ marginRight: statue == 0 ? '50%' : '50%' }">
+        <div
+          @click="hui(0)"
+          :style="{ marginTop: '35px', color: '#fff' }"
+          v-if="statue == 1 || 6"
+        >
+          <
+        </div>
       </div>
       <!-- <TUIContact v-else-if="statue==1"  :stu="2" /> -->
-      <div @click="hui(1)" class="jolkp_h" v-if="statue == 0"></div>
-      <div @click="fnkiopl" class="jolkp_l"></div>
+      <div
+        @click="hui(6)"
+        class="jolkp_z"
+        v-if="statue == 0 || 6"
+        :style="{ marginTop: '40px' }"
+      >
+        <div class="tiole">{{ tole }}</div>
+      </div>
+
+      <div
+        @click="hui(1)"
+        class="jolkp_h"
+        v-if="statue == 0 || 6"
+        :style="{ marginTop: '35px' }"
+      ></div>
+      <div
+        @click="fnkiopl"
+        class="jolkp_l"
+        :style="{ marginTop: '35px' }"
+      ></div>
       <!-- 弹出框 -->
-      <div v-if="isPopupVisible" class="popup">
+      <div v-if="isPopupVisible" class="popup" ref="popup">
         <ul>
           <li @click="handleAddFriend">添加好友/群聊</li>
           <li @click="handleMenu()">发起群聊</li>
-          <li>扫一扫</li>
+          <li @click="handleScan">扫一扫</li>
         </ul>
       </div>
     </div>
-
-    <div class="three">
-      <div class="con">
-        <div class="three_div1"></div>
-        <div class="title">点赞</div>
-      </div>
-      <div class="con">
-        <div class="three_div2"></div>
-        <div class="title">关注</div>
-      </div>
-
-	  <div class="con">
-        <div class="three_div3"></div>
-        <div class="title">评论</div>
-      </div>
-    </div>
     <!-- 搜索添加 -->
-    <TUIContactsea v-if="statue == 2" />
+    <TUIContactsea v-if="statue == 2" @switchConversation="hui" />
     <!-- 联系人 -->
-    <TUIContact v-else-if="statue == 1"   style="height: 100%;" />
+    <TUIContact v-else-if="statue == 1" style="height: 100%" />
     <SelectFriend v-else-if="statue == 3" @con="confn" />
     <SelectFriendqlioa v-else-if="statue == 4" @concen="concen" />
+    <!-- 站内信数据 -->
+    <!-- <div > -->
+    <scroll-view
+      @scrolltolower="lowerBottom"
+      scroll-y="true"
+      v-else-if="statue == 6"
+      class="znx"
+    >
+      <div
+        @touchstart="startLongPress(item, index)"
+        @touchend="endLongPress(item, index)"
+        @click="torut(item)"
+        v-for="(item, index) in meList"
+        :key="item.id"
+        class="tui-conversation-item"
+      >
+        <div :style="{ transform: 'translateX(' + swipeStates[index] + 'px)' }">
+          {{ item.title }}
+        </div>
+        <div class="content">{{ item.createTime }}</div>
+        <div
+          class="delete-button"
+          @click="deleteMessage(index)"
+          v-if="swipeStates[index] <= -50"
+        >
+          删除
+        </div>
+      </div>
+    </scroll-view>
+
+    <!-- </div> -->
     <!-- 会话 -->
-    <TUIConversation style="height: 100%;" v-else />
+    <TUIConversation style="height: 100%" v-else />
   </div>
 </template>
 
@@ -55,7 +94,12 @@ import SelectFriend from "@/TUIKit/components/TUIContact/select-friend/index.vue
 import SelectFriendqlioa from "@/TUIKit/components/TUIGroup/index.vue";
 import TUICore, { ExtensionInfo, TUIConstants } from "@tencentcloud/tui-core";
 import storage from "@/utils/storage.js";
-import { getUserimInfo } from "@/api/members";
+import {
+  getUserimInfo,
+  getMember,
+  getMemberstate,
+  getMemberdelete,
+} from "@/api/members";
 TUIChatKit.init();
 let vueVersion = 2;
 // vueVersion = 3;
@@ -73,9 +117,19 @@ export default {
   },
   data() {
     return {
-      statue: 0, //1联系人 2添加好友/群聊 0对话记录 3建群  4群名称
+      statue: 0, // 0对话记录  1联系人 2添加好友/群聊  3建群  4群名称  6站内信
       isPopupVisible: false, // 控制弹出框的显示与隐藏
       isq: false,
+      popupRef: null, // 新增，用于保存弹窗的引用
+      meList: [],
+      swipeStates: [],
+      startX: 0,
+      tole: 0, //已读未读
+      cleartime: null,
+      pageSize: 20,
+      pageNumber: 1,
+      total: 0,
+      loadMoreStatus: "more", // 加载更多状态
     };
   },
   created() {},
@@ -107,21 +161,86 @@ export default {
         });
       });
   },
-  mounted() {},
+  mounted() {
+    this.getMembermethod();
+    this.setTime();
+    // 监听全局点击事件
+    document.addEventListener("click", (event) =>
+      this.handleGlobalClick(event)
+    );
+    // 监听滚动事件
+  },
+  beforeDestroy() {
+    // 移除全局点击事件
+    document.removeEventListener("click", this.handleGlobalClick);
+    // 清除定时器
+    clearTimeout(this.cleartime);
+    // 移除滚动事件监听
+  },
   methods: {
+    lowerBottom() {
+      if(this.total>=this.meList.length){
+        this.pageSize+=10;
+        this.getMembermethod();
+      }
+    },
+    setTime() {
+      const th = this;
+      this.cleartime = setTimeout(() => {
+        this.getMembermethod();
+        th.setTime(); //递归调用setTime函数，实现每10秒执行一次getMembermethod函数的效果
+      }, 10000);
+    },
+    torut(item) {
+      // 将 item 对象转换为 JSON 字符串，以便在 URL 中传递
+      const itemJson = encodeURIComponent(JSON.stringify(item));
+      // 使用 uni.navigateTo 方法跳转到详情页，并传递信息
+      uni.navigateTo({
+        url: `/pages/tabbar/im/details/index?item=${itemJson}`,
+      });
+      getMemberstate({ messageId: item.messageId }).then((res) => {
+        this.getMembermethod();
+      });
+    },
     //完成跳转群名
     confn() {
-      this.statue = 4;
+      // this.statue = 0;
+      this.isPopupVisible = false;
     },
     concen() {
       this.statue = 0;
-      this.isPopupVisible = false;
     },
     hui(index) {
       this.statue = index;
     },
     fnkiopl() {
       this.isPopupVisible = !this.isPopupVisible;
+      this.popupRef = this.$refs.popup;
+    },
+    handleGlobalClick(event) {
+      if (this.isPopupVisible && event.target._prevClass != "jolkp_l") {
+        this.isPopupVisible = false;
+      }
+    },
+   
+    getMembermethod() {
+      const param = {
+        pageSize: this.pageSize,
+        pageNumber: this.pageNumber,
+      };
+      getMember(param).then((res) => {
+        this.total = res.data.result.total;
+        if (this.pageNumber === 1) {
+          this.meList = res.data.result.records;
+        } else {
+          this.meList = this.meList.concat(res.data.result.records);
+        }
+        this.swipeStates = new Array(this.meList.length).fill(0);
+        this.tole = this.meList.filter(
+          (item) => item.status === "UN_READY"
+        ).length;
+        
+      });
     },
     handleMenu() {
       const fn = [
@@ -143,19 +262,38 @@ export default {
       this.statue = 2;
       this.isPopupVisible = false;
     },
-
-    // // 打开会话列表
-    // openConversationList() {
-    // 	uni.navigateTo({
-    // 		url: '/TUIKit/components/TUIConversation/index'
-    // 	});
-    // },
-    // // 打开联系人
-    // openContact() {
-    // 	uni.navigateTo({
-    // 		url: '/TUIKit/components/TUIContact/index'
-    // 	});
-    // },
+    handleScan() {
+      this.isPopupVisible = false;
+      uni.scanCode({
+        success: (res) => {
+          console.log("扫码结果:", res);
+          this.statue=0
+          // 可以在这里添加处理扫码结果的逻辑
+        },
+        fail: (err) => {
+          console.error("扫码失败:", err);
+          this.statue=0
+        },
+      });
+    },
+    startLongPress(item, index) {
+      this.longPressTimer = setTimeout(() => {
+        uni.showModal({
+          title: "确认删除",
+          content: "确定要删除这条消息吗？",
+          success: (res) => {
+            if (res.confirm) {
+              getMemberdelete({ messageId: item.messageId }).then((res) => {
+                this.getMembermethod();
+              });
+            }
+          },
+        });
+      }, 2000);
+    },
+    endLongPress() {
+      clearTimeout(this.longPressTimer);
+    },
   },
 };
 </script>
@@ -191,7 +329,7 @@ page {
   /* 背景图不重复 */
   background-repeat: no-repeat;
   margin-top: 35px;
-  margin-right: 20px;
+  margin-right: 10px;
 }
 
 .jolkp_h {
@@ -205,7 +343,24 @@ page {
   margin-top: 35px;
   margin-right: 20px;
 }
+.jolkp_z {
+  width: 2rem;
+  height: 1.5rem;
+  background-image: url("@/static/im/znx.png");
+  /* 让背景图覆盖整个元素 */
+  background-size: cover;
+  /* 背景图不重复 */
+  background-size: 100% 100%;
 
+  margin-top: 35px;
+  margin-right: 20px;
+}
+.tiole {
+  margin-top: -10px;
+  margin-left: 105%;
+  color: #fff;
+  font-size: 14px;
+}
 .popup {
   position: absolute;
   top: 65px;
@@ -238,10 +393,20 @@ page {
   height: "100%";
   font-size: 18px;
   display: flex;
-  align-items: end;
+
   padding: 5px;
 }
-
+@media screen and (device-width: 393px) and (device-height: 851px) and (-webkit-device-pixel-ratio: 3) {
+  .fan {
+    margin-right: 56% !important;
+    width: 10%;
+    height: "100%";
+    font-size: 18px;
+    display: flex;
+    margin-top: 85%;
+    padding: 5px;
+  }
+}
 .three {
   width: 100%;
   height: 10%;
@@ -250,10 +415,10 @@ page {
   align-items: center;
   background: rgb(255, 255, 255);
 }
-.con{
-	width: 100%;
-	height: 100%;
-	display: flex;
+.con {
+  width: 100%;
+  height: 100%;
+  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -270,7 +435,7 @@ page {
 }
 
 .three_div2 {
-	width: 40%;
+  width: 40%;
   height: 3rem;
   background-image: url("@/static/im/hy.png");
   background-size: 100% 100%;
@@ -285,5 +450,52 @@ page {
   background-repeat: no-repeat;
   width: 40%;
 }
+.tui-conversation-item {
+  /* height: 10%; */
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid #d9d9d9;
+  width: 98%;
+  margin-top: 10px;
+  position: relative;
+}
+.content {
+  display: flex;
+  flex: 1;
+  padding-left: 8px;
+  justify-content: end;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.left {
+  position: relative;
+  width: 36px;
+  height: 36px;
+}
 
+.znx {
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow-y: auto;
+}
+.delete-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100px;
+  background-color: red;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
 </style>