152 lines
3.8 KiB
Vue
152 lines
3.8 KiB
Vue
<template>
|
|
<view :style="{ backgroundColor: '#f8f8f8' }" class="chating_container">
|
|
<chating-header
|
|
@click="pageClick"
|
|
ref="chatingHeaderRef"
|
|
/>
|
|
<chating-list
|
|
@click="pageClick"
|
|
ref="chatingListRef"
|
|
@initSuccess="initSuccess"
|
|
/>
|
|
<chating-footer
|
|
ref="chatingFooterRef"
|
|
:footerOutsideFlag="footerOutsideFlag"
|
|
@scrollToBottom="scrollToBottom"
|
|
/>
|
|
<u-loading-page :loading="initLoading"></u-loading-page>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions } from "vuex";
|
|
import {
|
|
PageEvents,
|
|
} from "@/constant";
|
|
import ChatingHeader from "./components/ChatingHeader.vue";
|
|
import ChatingFooter from "./components/ChatingFooter/index.vue";
|
|
import ChatingList from "./components/ChatingList.vue";
|
|
import { markConversationAsRead } from "@/util/imCommon";
|
|
|
|
export default {
|
|
components: {
|
|
ChatingHeader,
|
|
ChatingFooter,
|
|
ChatingList,
|
|
},
|
|
data() {
|
|
return {
|
|
listHeight: 0,
|
|
footerOutsideFlag: 0,
|
|
initLoading: true,
|
|
back2Tab: false,
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
console.log("onload");
|
|
this.setPageListener();
|
|
if (options?.back2Tab) {
|
|
this.back2Tab = JSON.parse(options.back2Tab);
|
|
}
|
|
},
|
|
onUnload() {
|
|
console.log("unload");
|
|
this.disposePageListener();
|
|
markConversationAsRead(
|
|
{
|
|
...this.$store.getters.storeCurrentConversation,
|
|
},
|
|
true
|
|
);
|
|
this.resetConversationState();
|
|
this.resetMessageState();
|
|
},
|
|
methods: {
|
|
...mapActions("message", ["resetMessageState", "deleteMessages"]),
|
|
...mapActions("conversation", ["resetConversationState"]),
|
|
scrollToBottom(isRecv = false) {
|
|
this.$refs.chatingListRef.scrollToBottom(false, isRecv);
|
|
},
|
|
pageClick(e) {
|
|
this.footerOutsideFlag += 1;
|
|
},
|
|
initSuccess() {
|
|
console.log("initSuccess");
|
|
this.initLoading = false;
|
|
},
|
|
|
|
// page event
|
|
setPageListener() {
|
|
uni.$on(PageEvents.ScrollToBottom, this.scrollToBottom);
|
|
},
|
|
disposePageListener() {
|
|
uni.$off(PageEvents.ScrollToBottom, this.scrollToBottom);
|
|
},
|
|
},
|
|
onBackPress() {
|
|
uni.switchTab({
|
|
url: "/pages/conversation/conversationList/index",
|
|
});
|
|
return true;
|
|
},
|
|
beforeDestroy() {
|
|
uni.switchTab({
|
|
url: "/pages/conversation/conversationList/index",
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chating_container {
|
|
@include colBox(false);
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background-color: #fff !important;
|
|
position: relative;
|
|
|
|
.watermark {
|
|
font-size: 16px; /* 水印文字大小 */
|
|
color: rgba(0, 0, 0, 0.2); /* 水印文字颜色，使用透明度控制可见度 */
|
|
position: absolute; /* 水印相对定位 */
|
|
transform: rotate(-45deg);
|
|
pointer-events: none; /* 防止水印文字干扰交互 */
|
|
|
|
/* 为不同的水印元素设置不同的偏移，以避免重叠 */
|
|
// transform-origin: top right;
|
|
// margin-top: 20px;
|
|
// margin-right: 20px;
|
|
}
|
|
|
|
// ::before {
|
|
// content: "Your Watermark Text"; /* 替换为你想要的水印文字 */
|
|
// font-size: 16px; /* 水印文字大小 */
|
|
// color: rgba(0, 0, 0, 0.2); /* 水印文字颜色，使用透明度控制可见度 */
|
|
// position: absolute; /* 水印相对定位 */
|
|
// top: 20px; /* 距离顶部的距离 */
|
|
// right: 20px; /* 距离右侧的距离 */
|
|
// transform: rotate(-45deg); /* 将水印旋转为倾斜状态 */
|
|
// pointer-events: none; /* 防止水印文字干扰交互 */
|
|
// z-index: -1; /* 将水印置于底层 */
|
|
// }
|
|
|
|
.mutiple_action_container {
|
|
display: flex;
|
|
border-top: 1px solid #eaebed;
|
|
background: #f0f2f6;
|
|
justify-content: space-evenly;
|
|
padding: 12px 24px;
|
|
|
|
.action_item {
|
|
@include centerBox();
|
|
flex-direction: column;
|
|
|
|
image {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|