|
|
|
@ -1,8 +1,31 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<view class="g_pb_24">
|
|
|
|
<view class="g_pb_24">
|
|
|
|
<div style="width: calc(100vw - 20px);margin: 10px auto;border-radius: 8px;">
|
|
|
|
<div style="width: calc(100vw - 20px);margin: 10px auto;border-radius: 8px;overflow: hidden;">
|
|
|
|
<div v-for="(item, index) in machineList" :key="index" class="customitem imitems g_bg_f">
|
|
|
|
<div
|
|
|
|
<Tooltip ref="tooltipRef" color="white" :isSelf="true" :top="150">
|
|
|
|
v-for="(item, index) in machineList"
|
|
|
|
|
|
|
|
:key="index"
|
|
|
|
|
|
|
|
class="slide-container"
|
|
|
|
|
|
|
|
@touchstart="touchStart($event, index)"
|
|
|
|
|
|
|
|
@touchmove="touchMove($event, index)"
|
|
|
|
|
|
|
|
@touchend="touchEnd($event, index)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<!-- 操作按钮区域 -->
|
|
|
|
|
|
|
|
<view class="slide-actions">
|
|
|
|
|
|
|
|
<view
|
|
|
|
|
|
|
|
class="action-btn top-btn"
|
|
|
|
|
|
|
|
@click="topMessage(item, index)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{{ item.stickTop ? "取消置顶" : "置顶消息" }}
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view
|
|
|
|
|
|
|
|
class="action-btn delete-btn"
|
|
|
|
|
|
|
|
@click="deleteMessage(item, index)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
不显示
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 内容区域 -->
|
|
|
|
|
|
|
|
<div class="customitem imitems g_bg_f slide-content" :style="{ transform: `translateX(${slideOffsets[index] || 0}px)` }">
|
|
|
|
<div class="g_flex_row_start" hover-class="thover" style="padding: 12px 16px" @click="goChatPage(item)" :style="{ backgroundColor: item.stickTop ? '#f5f5f5' : '#fff' }">
|
|
|
|
<div class="g_flex_row_start" hover-class="thover" style="padding: 12px 16px" @click="goChatPage(item)" :style="{ backgroundColor: item.stickTop ? '#f5f5f5' : '#fff' }">
|
|
|
|
<div
|
|
|
|
<div
|
|
|
|
class="g_flex_none"
|
|
|
|
class="g_flex_none"
|
|
|
|
@ -92,17 +115,7 @@
|
|
|
|
<div class="g_fs_14 g_ell_1" style="color: #999; font-size: 12px" v-if="!item.lastMessage">暂无新消息</div>
|
|
|
|
<div class="g_fs_14 g_ell_1" style="color: #999; font-size: 12px" v-if="!item.lastMessage">暂无新消息</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<template #content>
|
|
|
|
</div>
|
|
|
|
<view class="g_fs_16" style="">
|
|
|
|
|
|
|
|
<view class="g_flex_column_center g_h_32" @click="topMessage(item, index)">
|
|
|
|
|
|
|
|
<view>{{ item.stickTop ? "取消置顶" : "置顶消息" }} </view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="g_flex_column_center g_h_32" @click="deleteMessage(item, index)">
|
|
|
|
|
|
|
|
<view>不显示</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
@ -134,10 +147,13 @@
|
|
|
|
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, defineEmits, defineProps } from "vue";
|
|
|
|
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, defineEmits, defineProps } from "vue";
|
|
|
|
const props = defineProps({});
|
|
|
|
const props = defineProps({});
|
|
|
|
const G = getCurrentInstance().appContext.app.config.globalProperties.G;
|
|
|
|
const G = getCurrentInstance().appContext.app.config.globalProperties.G;
|
|
|
|
import Tooltip from "./Tooltip.vue";
|
|
|
|
|
|
|
|
const tooltipRef = ref(null);
|
|
|
|
|
|
|
|
let firstLoad = ref(false);
|
|
|
|
let firstLoad = ref(false);
|
|
|
|
const machineList = ref([]);
|
|
|
|
const machineList = ref([]);
|
|
|
|
|
|
|
|
// 滑动相关变量
|
|
|
|
|
|
|
|
const slideOffsets = ref({}); // 存储每个item的滑动偏移量
|
|
|
|
|
|
|
|
const touchStartX = ref({}); // 触摸起始X坐标
|
|
|
|
|
|
|
|
const touchStartY = ref({}); // 触摸起始Y坐标
|
|
|
|
|
|
|
|
const actionWidth = 160; // 操作按钮总宽度
|
|
|
|
onMounted(async () => {
|
|
|
|
onMounted(async () => {
|
|
|
|
uni.$on("updateConversationList", () => {
|
|
|
|
uni.$on("updateConversationList", () => {
|
|
|
|
console.log("监听到事件");
|
|
|
|
console.log("监听到事件");
|
|
|
|
@ -303,6 +319,45 @@ const goChatPage = async (_item) => {
|
|
|
|
url: "/root/NEUIKit/index?item=" + _item.conversationId,
|
|
|
|
url: "/root/NEUIKit/index?item=" + _item.conversationId,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
// 触摸开始
|
|
|
|
|
|
|
|
const touchStart = (e, index) => {
|
|
|
|
|
|
|
|
touchStartX.value[index] = e.touches[0].clientX;
|
|
|
|
|
|
|
|
touchStartY.value[index] = e.touches[0].clientY;
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 触摸移动
|
|
|
|
|
|
|
|
const touchMove = (e, index) => {
|
|
|
|
|
|
|
|
const currentX = e.touches[0].clientX;
|
|
|
|
|
|
|
|
const currentY = e.touches[0].clientY;
|
|
|
|
|
|
|
|
const diffX = currentX - touchStartX.value[index];
|
|
|
|
|
|
|
|
const diffY = currentY - touchStartY.value[index];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 只处理水平滑动
|
|
|
|
|
|
|
|
if (Math.abs(diffX) > Math.abs(diffY)) {
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
let offset = diffX + (slideOffsets.value[index] || 0);
|
|
|
|
|
|
|
|
// 限制滑动范围
|
|
|
|
|
|
|
|
offset = Math.max(-actionWidth, Math.min(0, offset));
|
|
|
|
|
|
|
|
slideOffsets.value[index] = offset;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 触摸结束
|
|
|
|
|
|
|
|
const touchEnd = (e, index) => {
|
|
|
|
|
|
|
|
const offset = slideOffsets.value[index] || 0;
|
|
|
|
|
|
|
|
// 根据滑动距离决定是否展开或收起
|
|
|
|
|
|
|
|
if (offset < -actionWidth / 2) {
|
|
|
|
|
|
|
|
slideOffsets.value[index] = -actionWidth;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
slideOffsets.value[index] = 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 重置滑动状态
|
|
|
|
|
|
|
|
const resetSlide = (index) => {
|
|
|
|
|
|
|
|
slideOffsets.value[index] = 0;
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* 置顶或取消置顶会话
|
|
|
|
* 置顶或取消置顶会话
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
@ -314,7 +369,6 @@ const topMessage = async (_item, _index) => {
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
G.nim.V2NIMConversationService.stickTopConversation(_item.conversationId, true);
|
|
|
|
G.nim.V2NIMConversationService.stickTopConversation(_item.conversationId, true);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log("tooltipRef.value", tooltipRef.value);
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
uni.showToast({
|
|
|
|
uni.showToast({
|
|
|
|
title: error,
|
|
|
|
title: error,
|
|
|
|
@ -322,10 +376,7 @@ const topMessage = async (_item, _index) => {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
console.log("errorerror", error);
|
|
|
|
console.log("errorerror", error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
tooltipRef.value[_index].close();
|
|
|
|
resetSlide(_index);
|
|
|
|
|
|
|
|
|
|
|
|
// let res1 = await G.nim.V2NIMConversationService.getStickTopConversationList();
|
|
|
|
|
|
|
|
// console.log("res1res1", res1);
|
|
|
|
|
|
|
|
};
|
|
|
|
};
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* 删除会话
|
|
|
|
* 删除会话
|
|
|
|
@ -350,7 +401,7 @@ const deleteMessage = async (_item, _index) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
tooltipRef.value[_index].close();
|
|
|
|
resetSlide(_index);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
onUnmounted(() => {
|
|
|
|
onUnmounted(() => {
|
|
|
|
uni.$off("updateConversationList");
|
|
|
|
uni.$off("updateConversationList");
|
|
|
|
@ -379,4 +430,47 @@ onUnmounted(() => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.slide-container {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
// overflow: hidden;
|
|
|
|
|
|
|
|
// border-radius: 8px;
|
|
|
|
|
|
|
|
// margin-bottom: 8px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.slide-actions {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.action-btn {
|
|
|
|
|
|
|
|
width: 80px;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.top-btn {
|
|
|
|
|
|
|
|
background-color: #999;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.delete-btn {
|
|
|
|
|
|
|
|
background-color: #f5222d;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.slide-content {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
transition: transform 0.3s ease;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|