优化页面

2025-05-30 22:04:45 +08:00
parent c747f9625c
commit 050ceedd59
66 changed files with 1215 additions and 190 deletions
--- a/TUIKit/components/TUIChat/index.vue
+++ b/TUIKit/components/TUIChat/index.vue
@@ -133,22 +133,22 @@ import { initChat, logout } from "./entry-chat-only.ts";
 import { isEnabledMessageReadReceiptGlobal } from "./utils/utils";
 import OfflinePushInfoManager from "./offlinePushInfoManager/index";
 import { TUIChatService } from "@tencentcloud/chat-uikit-engine";
-import { useCounterStore } from '@/stores/counter'
-const counter = useCounterStore()
+import { useCounterStore } from "@/stores/counter";
+import request from "@/components/request";
+import generateMsgId from "../../../components/generateMsgId.js";
+const counter = useCounterStore();

 let myitem = ref();
 let youritem = ref();
+let MessageListinfo = ref();
 onLoad((options) => {
  initChat(options);
-  if (options.myitem) {
-    myitem.value = JSON.parse(options.myitem);
-    counter.$patch({ myitem:myitem.value })
-    youritem.value = JSON.parse(options.youritem);
-    counter.$patch({ youritem:youritem.value })
-    setTimeout(() => {
-      sendCustomMessage(myitem, youritem);
-    }, 1000);
-  }
+  myitem.value = JSON.parse(options.myitem);
+  youritem.value = JSON.parse(options.youritem);
+  counter.$patch({ youritem: youritem.value });
+  setTimeout(() => {
+    sendCustomMessage(myitem.value, youritem.value);
+  }, 1000);
 });

 onUnload(() => {
@@ -200,12 +200,17 @@ TUIStore.watch(StoreName.CONV, {
 });

 function sendCustomMessage(myitem, youritem) {
+  const keyid = generateMsgId();
  const payload = {
    data: JSON.stringify({
      businessID: "pk",
      title: "PK邀请",
      buttonText1: "接受邀请",
      buttonText2: "拒绝邀请",
+      keyid: keyid,
+      myitem: counter.myitem.id,
+      btnDisplay: true,
+      mytitle: "等待对方接受邀请",
    }),
    description: "邀请参加PK",
    extension: "邀请参加PK",
@@ -218,7 +223,6 @@ function sendCustomMessage(myitem, youritem) {
    payload,
    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
  };
-
  const offlinePushInfoCreateParams = {
    conversation: currentConversation.value,
    payload: options.payload,
@@ -227,15 +231,36 @@ function sendCustomMessage(myitem, youritem) {
  const sendMessageOptions = {
    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
  };
-  TUIChatService.sendCustomMessage(options, sendMessageOptions);
-  TUIChatService.getMessageList().then((res) => {
-    console.log("消息列表···································",res);
+  TUIChatService.sendCustomMessage(options, sendMessageOptions).then((res) => {
+    const messagein = request({
+      url: "chat/add",
+      method: "POST",
+      data: {
+        messageInfo: JSON.stringify(res.data.message),
+        keyId: keyid,
+      },
+      userInfo: false,
+    });
+  });
+
+  const messageList = request({
+    url: "pk/createPkRecord",
+    method: "POST",
+    data: {
+      pkIdA: youritem.id,
+      pkIdB: myitem.id,
+      userIdA: youritem.senderId,
+      userIdB: myitem.senderId,
+      pkTime: youritem.pkTime,
+      status: 0,
+    },
+    userInfo: false,
  });
  myitem.value = null;
  youritem.value = null;
  currentConversation.value = null;
 }
-//`````````````````````````````````````````````````````````````````````
+//`````````````````````````````````````````````````````````````````````标记
 const isInputToolbarShow = computed<boolean>(() => {
  return isUniFrameWork ? inputToolbarDisplayType.value !== "none" : true;
 });
--- a/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="custom">
-  <!-- `````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
+    <!-- `````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
    <template v-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE">
      <div>
        <h1>
@@ -9,18 +9,14 @@
            v-if="extension.hyperlinks_text"
            :href="extension.hyperlinks_text.value"
            target="view_window"
-          >{{ extension.hyperlinks_text.key }}</a>
+            >{{ extension.hyperlinks_text.key }}</a
+          >
        </h1>
        <ul v-if="extension.item && extension.item.length > 0">
-          <li
-            v-for="(item, index) in extension.item"
-            :key="index"
-          >
-            <a
-              v-if="isUrl(item.value)"
-              :href="item.value"
-              target="view_window"
-            >{{ item.key }}</a>
+          <li v-for="(item, index) in extension.item" :key="index">
+            <a v-if="isUrl(item.value)" :href="item.value" target="view_window">{{
+              item.key
+            }}</a>
            <p v-else>
              {{ item.key }}
            </p>
@@ -39,10 +35,7 @@
            :key="index"
            class="evaluate-list-item"
          >
-            <Icon
-              :file="star"
-              class="file-icon"
-            />
+            <Icon :file="star" class="file-icon" />
          </li>
        </ul>
        <article>{{ customData.comment }}</article>
@@ -50,13 +43,8 @@
    </template>
    <!-- `````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER">
-      <div
-        class="order"
-        @click="openLink(customData.link)"
-      >
-        <img
-          :src="customData.imageUrl"
-        >
+      <div class="order" @click="openLink(customData.link)">
+        <img :src="customData.imageUrl" />
        <main>
          <h1>{{ customData.title }}</h1>
          <p>{{ customData.description }}</p>
@@ -68,22 +56,27 @@
    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.LINK">
      <div class="textLink">
        <p>{{ customData.text }}</p>
-        <a
-          :href="customData.link"
-          target="view_window"
-        >{{
+        <a :href="customData.link" target="view_window">{{
          TUITranslateService.t("message.custom.查看详情>>")
        }}</a>
      </div>
    </template>
    <!-- `························································标记······················································ -->
    <template v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.PK">
-      <div class="pk">
-      <h1>{{ customData.title }}</h1>
-      <div class="button-group">
-        <button class="buttonAccept">{{ customData.buttonText1 }}</button>
-        <button class="buttonRefuse">{{ customData.buttonText2 }}</button>
+      <div class="pk" v-if="customData.myitem !== counter.myitem.id">
+        <h1>{{ customData.title }}</h1>
+        <div class="button-group" v-if="customData.btnDisplay === true">
+          <button @click="handleAccept(status.agree, customData)" class="buttonAccept">
+            {{ customData.buttonText1 }}
+          </button>
+          <button @click="handleAccept(status.refuse, customData)" class="buttonRefuse">
+            {{ customData.buttonText2 }}
+          </button>
+        </div>
      </div>
+
+      <div class="pk" v-else>
+        <h1>{{ customData.mytitle }}</h1>
      </div>
    </template>
    <!-- ``````````````````````````````````````````````````````````````````````````````````````````````````````````````` -->
@@ -95,29 +88,44 @@
 </template>

 <script lang="ts" setup>
-import { watchEffect, ref } from '../../../../adapter-vue';
-import { TUITranslateService, IMessageModel } from '@tencentcloud/chat-uikit-engine';
-import { isUrl, JSONToObject } from '../../../../utils/index';
-import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant';
-import { ICustomMessagePayload } from '../../../../interface';
-import Icon from '../../../common/Icon.vue';
-import star from '../../../../assets/icon/star-light.png';
+import { watchEffect, ref } from "../../../../adapter-vue";
+import { TUITranslateService, IMessageModel } from "@tencentcloud/chat-uikit-engine";
+import { isUrl, JSONToObject } from "../../../../utils/index";
+import { CHAT_MSG_CUSTOM_TYPE } from "../../../../constant";
+import { ICustomMessagePayload } from "../../../../interface";
+import Icon from "../../../common/Icon.vue";
+import star from "../../../../assets/icon/star-light.png";
+import { isEnabledMessageReadReceiptGlobal } from "../../../TUIChat/utils/utils";
 import TUIChatEngine, {
  TUIStore,
  StoreName,
  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine';
-import { useCounterStore } from '@/stores/counter'
-const counter = useCounterStore()
+} from "@tencentcloud/chat-uikit-engine";
+import { useCounterStore } from "@/stores/counter";
+import request from "@/components/request";
+import { Message } from "@tencentcloud/chat";
+// import message from '@tencentcloud/chat-uikit-uniapp/locales/en/message';
+const counter = useCounterStore();
+
+const status = { agree: 1, refuse: 2 };

 interface Props {
  messageItem: IMessageModel;
  content: any;
 }
 //```````````````````````````````````````````````````
-// TUIChatService.getMessageList().then(() => {

-// });
+
+function handleAccept(status: number, customData: ICustomMessagePayload) {
+  console.log(custom.value);
+  console.log(message.value);
+  message.value.payload.title = "Hello Tencent";
+  TUIChatService.modifyMessage(message.value).then((res) => {
+    console.log(res);
+  }).catch((err) => {
+    console.log(err);
+  });
+}
 //```````````````````````````````````````````````````
 const props = withDefaults(defineProps<Props>(), {
  messageItem: undefined,
@@ -128,14 +136,13 @@ const custom = ref();
 const message = ref<IMessageModel>();
 const extension = ref();
 const customData = ref<ICustomMessagePayload>({
-  businessID: '',
+  businessID: "",
 });
-
 watchEffect(() => {
  custom.value = props.content;
  message.value = props.messageItem;
  const { payload } = props.messageItem;
-  customData.value = payload.data || '';
+  customData.value = payload.data || "";
  customData.value = JSONToObject(payload.data);
  if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
    extension.value = JSONToObject(payload.extension);
@@ -145,9 +152,7 @@ const openLink = (url: any) => {
  window.open(url);
 };
 </script>
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
 <style lang="scss" scoped>
@import "../../../../assets/styles/common";

@@ -214,56 +219,55 @@ a {
      height: 67px;
    }
  }
-// `````````````````````````````````````````````````````````````````````
-.pk{
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  background-color: #f5f5f5;
-  border-radius: 10px;
-  padding: 20px;
-  box-sizing: border-box;
-  h1{
-    font-size: 18px;
-    color: #333;
-    margin-bottom: 10px;
-  }
-  .button-group{
+  // `````````````````````````````````````````````````````````````````````
+  .pk {
    display: flex;
+    flex-direction: column;
+    align-items: center;
    justify-content: center;
-    .buttonAccept{  
-    width: 40%;
-    height: 60rpx;
-    background-color: #84ff0055;
+    height: 100%;
+    background-color: #f5f5f5;
    border-radius: 10px;
-    border: 2px solid #26ff00;
-    color: #fff;
-    font-size: 16px;
-    text-align: center;
-    line-height: 60rpx;
-    margin-bottom: 10px;
-    border: none;
-    cursor: pointer;
-  } 
-  .buttonRefuse{
-    width: 40%;
-    height: 60rpx;
-    background-color: #ff000078;
-    border: 2px solid #ff0000;
-    border-radius: 10px;
-    color: #fff;
-    font-size: 16px;
-    line-height: 60rpx;
-    text-align: center;
-    margin-bottom: 10px;
-    border: none;
-    cursor: pointer;
+    padding: 20px;
+    box-sizing: border-box;
+    h1 {
+      font-size: 18px;
+      color: #333;
+      margin-bottom: 10px;
+    }
+    .button-group {
+      display: flex;
+      justify-content: center;
+      .buttonAccept {
+        width: 40%;
+        height: 60rpx;
+        background-color: #84ff0055;
+        border-radius: 10px;
+        border: 2px solid #26ff00;
+        color: #fff;
+        font-size: 16px;
+        text-align: center;
+        line-height: 60rpx;
+        margin-bottom: 10px;
+        border: none;
+        cursor: pointer;
+      }
+      .buttonRefuse {
+        width: 40%;
+        height: 60rpx;
+        background-color: #ff000078;
+        border: 2px solid #ff0000;
+        border-radius: 10px;
+        color: #fff;
+        font-size: 16px;
+        line-height: 60rpx;
+        text-align: center;
+        margin-bottom: 10px;
+        border: none;
+        cursor: pointer;
+      }
+    }
  }
-  }
-  
-}
- //`````````````````````````````````````````````````````````````````````````````````` 
+  //``````````````````````````````````````````````````````````````````````````````````
 }
 </style>
--- a/TUIKit/interface.ts
+++ b/TUIKit/interface.ts
@@ -63,6 +63,10 @@ export interface ICustomMessagePayload {
  price?: string;
  // Hyperlink custom message related fields
  text?: string;
+  myitem?: any;
+  mytitle?: string;
+  keyid?: string;
+  btnDisplay?: boolean;
 }

 export interface IGroupApplication {