Initial commit

pages/conversation/chating/index.vue

@@ -0,0 +1,151 @@
+<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>