qianzhi-message/TUIKit/components/TUIConversation/index.vue

<template>
  <div>
    <div
      class="tui-conversation"
      @click="handleClickConv"
      @touchstart="handleTouchStart"
      @touchend="handleTouchEnd"
    >
      <div class="header">
        <div class="item" @click="group">
          <img
            src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/img/jhq.png"
            style="width: 60px; height: 60px"
          />
          <span class="title">资源聚合群</span>
        </div>
        <div class="item" @click="book">
          <img
            src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/img/txl.png"
            style="width: 60px; height: 60px"
          />
          <span class="title">通讯录</span>
        </div>
        <div class="item" @click="interactive">
          <div class="count" v-if="hdxsCount > 0">{{ hdxsCount }}</div>
          <img
            src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/img/hdxx.png"
            style="width: 60px; height: 60px"
          />
          <span class="title">互动消息</span>
        </div>
        <div class="item" @click="serviceNotice">
          <div class="count" v-if="fwCount > 0">{{ fwCount }}</div>
          <img
            src="https://directpurchase-oss-dev.oss-cn-chengdu.aliyuncs.com/wx/static/img/fwtz.png"
            style="width: 60px; height: 60px"
          />
          <span class="title">服务通知</span>
        </div>
      </div>
      <!--     
      <TUISearch searchType="global" />
      <ConversationHeader v-if="isShowConversationHeader" ref="headerRef" />
      <ConversationNetwork /> -->

      <ConversationList
        ref="conversationListDomRef"
        class="tui-conversation-list"
        @handleSwitchConversation="handleSwitchConversation"
        @getPassingRef="getPassingRef"
      />
    </div>
    <div></div>
  </div>
</template>
<script lang="ts" setup>
import { TUIStore, StoreName, TUIChatService } from "@tencentcloud/chat-uikit-engine";
import { TUIGlobal } from "@tencentcloud/universal-api";
import { ref, onMounted } from "../../adapter-vue";
// import TUISearch from "../TUISearch/index.vue";
import ConversationList from "./conversation-list/index.vue";
import * as msgApi from "@/api/message/index";
// import ConversationHeader from "./conversation-header/index.vue";
import ConversationNetwork from "./conversation-network/index.vue";
import { onHide, onShow, onLoad } from "@dcloudio/uni-app";
// #ifdef MP-WEIXIN
// uniapp packaged mini-programs are integrated by default, and the default initialization entry file is imported here
// TUIChatKit init needs to be encapsulated because uni vue2 will report an error when compiling H5 directly through conditional compilation
import "./entry.ts";
// #endif
const centerDialogVisibl = ref(false);
const emits = defineEmits(["handleSwitchConversation"]);
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);
onLoad((option) => {
  initCount();
  initCountServer();
});
const hdxsCount = ref("");
const fwCount = ref("");
async function initCount() {
  let res = await msgApi.default.nuRead(1);
  hdxsCount.value = res.data;
}
async function initCountServer() {
  let res = await msgApi.default.nuRead(3);
  fwCount.value = res.data;
}
TUIStore.watch(StoreName.CONV, {
  totalUnreadCount: (count: number) => {
    totalUnreadCount.value = count;
  },
});

TUIStore.watch(StoreName.CUSTOM, {
  isShowConversationHeader: (showStatus: boolean) => {
    isShowConversationHeader.value = showStatus !== false;
  },
});

const interactive = () => {
  TUIGlobal?.navigateTo({
    url: "/pages/message/interactive",
  });
};
const serviceNotice = () => {
  TUIGlobal?.navigateTo({
    url: "/pages/message/serviceNotice",
  });
};
const group = () => {
  TUIGlobal?.navigateTo({
    url: "/pages/group/index",
  });
};

const book = () => {
  TUIGlobal?.navigateTo({
    url: "/TUIKit/components/TUIContact/index",
  });
};

function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}
const spuInfo = ref();
const handleSwitchConversation = async (conversationID: string) => {
  let spuId = getQueryString("spuId");
  let share = getQueryString("share");
  if (spuId && share === "1") {
    let res = await msgApi.default.getSupplyDetails({ spuId: spuId });
    console.log(res);
    spuInfo.value = res.data;
    uni.showModal({
      title: "提示",
      content: `是否确认分享给该好友`,
      success: function (res) {
        if (res.confirm) {
          console.log("用户点击确定");
          let promise = TUIChatService.sendCustomMessage({
            payload: {
              data: JSON.stringify({
                saleType: spuInfo.value.saleType,
                id: spuInfo.value.id,
                // 订单类消息标识字段
                businessID: "order",
                // 订单标题
                title: spuInfo.value.title,
                // 订单描述
                description: spuInfo.value.spuDesc,
                // 订单价格
                price: spuInfo.value.lowestPrice,
                // 订单 url
                link: "https://buy.cloud.tencent.com/avc?ver=ultimate",
                // 订单封面图
                imageUrl: spuInfo.value.pic,
                unit: spuInfo.value.unit,
              }),
              description: "",
              extension: "",
            },
          });
          console.log("promise", promise);

          TUIGlobal?.navigateTo({
            url: "/TUIKit/components/TUIChat/index",
          });
          emits("handleSwitchConversation", conversationID);
        } else if (res.cancel) {
          console.log("用户点击取消");
        }
      },
    });
  } else {
    TUIGlobal?.navigateTo({
      url: "/TUIKit/components/TUIChat/index",
    });
    emits("handleSwitchConversation", conversationID);
  }
};

const closeChildren = () => {
  headerRef?.value?.closeChildren();
  conversationListDomRef?.value?.closeChildren();
};

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) {
    // Swipe right
    turn = "right";
  } else if (x - touchX.value < -50 && Math.abs(y - touchY.value) < 50) {
    // Swipe left
    turn = "left";
  }
  if (y - touchY.value > 50 && Math.abs(x - touchX.value) < 50) {
    // Swipe down
    turn = "down";
  } else if (y - touchY.value < -50 && Math.abs(x - touchX.value) < 50) {
    // Swipe up
    turn = "up";
  }
  // Operate according to the direction
  if (turn === "down" || turn === "up") {
    closeChildren();
  }
};

const getPassingRef = (ref) => {
  ref.value = conversationListDomRef.value;
};
</script>
<style lang="less" scoped>
.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
  color: #333333;
  margin-top: 10rpx;
}
.count {
  position: absolute;
  right: 0px;
  top: -4px;
  width: 18px;
  height: 18px;
  background: red;
  text-align: center;
  color: white;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 10px;
}
</style>
<style lang="scss" scoped src="./style/index.scss"></style>