qianzhi-message/TUIKit-House/components/TUIConversation/merChantSideIndex.vue

<template>
  <div>
    <div
      class="tui-conversation"
      @click="handleClickConv"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
    >
      <div
        style="
          display: flex;
          flex-direction: row;
          align-items: center;
          background: white;
        "
      >
        <TUISearch searchType="global" />
        <image
          @click="popus = true"
          src="https://qianzhiy-applet.oss-rg-china-mainland.aliyuncs.com/h5/newImages/gd.png"
          mode="scaleToFill"
          style="width: 30px; height: 30px"
        />
        <chunLei-popups
          v-model="popus"
          :popData="data"
          @tapPopup="tapPopup"
          :x="344"
          :y="20"
          placement="top-end"
        >
        </chunLei-popups>
      </div>

      <!-- <div style="background: #fff">
        <div style="display: flex; flex-direction: row; align-items: center">
          <div class="header" @click="myGourp">我的群聊</div>
          <div class="header" @click="createGroup">创建粉丝群</div>
        </div>
      </div> -->

      <!-- <ConversationHeader
      v-if="isShowConversationHeader"
      ref="headerRef"
    /> -->
      <ConversationNetwork />
      <ConversationList
        ref="conversationListDomRef"
        class="tui-conversation-list"
        @handleSwitchConversation="handleSwitchConversation"
        @handleSwitchConversationObj="handleSwitchConversationObj"
        @getPassingRef="getPassingRef"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as MesApi from "../../../api/message";
import {
  TUIStore,
  StoreName,
  TUIConversationService,
} from "@tencentcloud/chat-uikit-engine";
import { TUIGlobal } from "@tencentcloud/universal-api";
import { ref } from "../../adapter-vue";
import TUISearch from "../TUISearch/index.vue";
import ConversationList from "./conversation-list/index.vue";
import ConversationHeader from "./conversation-header/index.vue";
import ConversationNetwork from "./conversation-network/index.vue";
import { onHide } from "@dcloudio/uni-app"; // 该方法只能用在父组件内，子组件内不生效

import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";

const emits = defineEmits(["handleSwitchConversation"]);
const popus = ref(false);
const data = ref([
  {
    id: 1,
    title: "我的粉丝群",
    icon: "https://qianzhiy-applet.oss-rg-china-mainland.aliyuncs.com/h5/newImages/common/wdfsq.png",
  },
  {
    id: 2,
    title: "创建粉丝群",
    icon: "https://qianzhiy-applet.oss-rg-china-mainland.aliyuncs.com/h5/newImages/common/cjfsq.png",
  },
]);
const totalUnreadCount = ref(0);
const headerRef = ref<typeof ConversationHeader>();
const conversationListDomRef = ref<typeof ConversationList>();
const touchX = ref<number>(0);
const touchY = ref<number>(0);
const isShowConversationHeader = ref<boolean>(true);

TUIStore.watch(StoreName.CONV, {
  totalUnreadCount: (count: number) => {
    totalUnreadCount.value = count;
  },
});

TUIStore.watch(StoreName.CUSTOM, {
  isShowConversationHeader: (showStatus: boolean) => {
    isShowConversationHeader.value = showStatus !== false;
  },
});
const tapPopup = (val) => {
  if (val.id == 1) {
    myGourp();
  } else {
    createGroup();
  }
  console.log(val);
};
const handleSwitchConversation = (conversationID: string) => {
  let companyUserId =
    conversationID[3] === "C"
      ? conversationID.substring(4)
      : conversationID.substring(3);
  TUIGlobal?.navigateTo({
    url:
      "/TUIKit-House/components/TUIChat/index?shopUserId=" +
      uni.getStorageSync("userId") +
      "&recruitUserId=" +
      companyUserId,
  });

  emits("handleSwitchConversation", conversationID);
};

const closeChildren = () => {
  headerRef?.value?.closeChildren();
  conversationListDomRef?.value?.closeChildren();
};
const shopInfo = ref({});
const myGourp = () => {
  TUIGlobal?.navigateTo({
    url: "/TUIKit-House/components/TUIContact/index",
  });
};
const createGroup = async () => {
  const ownerAccount = uni.getStorageSync("id");
  // TUIConversationService.switchConversation(
  //   "GROUP17527216214421942041809035223041"
  // );
  let res = await MesApi.default.getInfoByUserId();
  if (res.code == 200) {
    shopInfo.value = res.data;
    let create = await MesApi.default.createGroup({
      shopId: res.data.id,
      ownerAccount: ownerAccount,
      agentType: uni.getStorageSync("agentType"),
    });
    console.log(create);
    if (create.code == 200) {
      TUIConversationService.switchConversation(`GROUP${create.data.groupId}`);
      uni.$u.toast(create.msg);
    } else {
      uni.$u.toast(create.msg);
    }
  }
};

const handleClickConv = () => {
  closeChildren();
};

onHide(closeChildren);

const handleTouchStart = (e: any) => {
  touchX.value = e.changedTouches[0].clientX;
  touchY.value = e.changedTouches[0].clientY;
};

const handleTouchEnd = (e: any) => {
  const x = e.changedTouches[0].clientX;
  const y = e.changedTouches[0].clientY;
  let turn = "";
  if (x - touchX.value > 50 && Math.abs(y - touchY.value) < 50) {
    // 右滑
    turn = "right";
  } else if (x - touchX.value < -50 && Math.abs(y - touchY.value) < 50) {
    // 左滑
    turn = "left";
  }
  if (y - touchY.value > 50 && Math.abs(x - touchX.value) < 50) {
    // 下滑
    turn = "down";
  } else if (y - touchY.value < -50 && Math.abs(x - touchX.value) < 50) {
    // 上滑
    turn = "up";
  }
  // 根据方向进行操作
  if (turn === "down" || turn === "up") {
    closeChildren();
  }
};

const getPassingRef = (ref) => {
  ref.value = conversationListDomRef.value;
};
</script>

<style lang="scss" scoped>
.header {
  height: 25px;
  background: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 0px 10px 10px 10px;
}
</style>
<style lang="scss" scoped src="./style/index.scss"></style>