优化页面

2025-06-19 22:27:00 +08:00
parent b73ddb0370
commit bcaa54bec8
115 changed files with 1273 additions and 353 deletions
--- a/TUIKit/components/TUIChat/chat-header/index.vue
+++ b/TUIKit/components/TUIChat/chat-header/index.vue
@@ -1,44 +1,43 @@
 <template>
  <div class="Navigation">
-    <div class="Navigation-name">
-      {{ Title }}
+    <div class="Navigationcontent">
+      <image
+        @click="Returnfunc"
+        style="width: 46rpx;height: 46rpx;;"
+        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
+        mode="scaleToFill"
+        class="Navigation-return"
+      />
+      <div class="Navigation-name">
+        {{ Title }}
+      </div>
+      <div></div>
    </div>
-    <image
-      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Navigationimg.png"
-      mode="scaleToFill"
-      class="Navigationimg"
-    />
-    <image
-      @click="Returnfunc"
-      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
-      mode="scaleToFill"
-      class="Return"
-    />
  </div>
 </template>

 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from '../../../adapter-vue';
+import { onMounted, onUnmounted, ref } from "../../../adapter-vue";
 import {
  TUIStore,
  StoreName,
  IConversationModel,
  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine';
-import { TUIGlobal } from '@tencentcloud/universal-api';
-import { onLoad, onNavigationBarButtonTap } from '@dcloudio/uni-app';
+} from "@tencentcloud/chat-uikit-engine";
+import { TUIGlobal } from "@tencentcloud/universal-api";
+import { onLoad, onNavigationBarButtonTap } from "@dcloudio/uni-app";

-const emits = defineEmits(['openGroupManagement']);
-const props = defineProps(['isGroup']);
+const emits = defineEmits(["openGroupManagement"]);
+const props = defineProps(["isGroup"]);

 const currentConversation = ref<IConversationModel>();
 const typingStatus = ref(false);
-const Title = ref('Global'); // 初始化为默认标题
+const Title = ref("Global"); // 初始化为默认标题

 // #ifdef APP-PLUS
 onNavigationBarButtonTap(() => {
  if (props.isGroup) {
-    emits('openGroupManagement');
+    emits("openGroupManagement");
  }
 });

@@ -65,7 +64,7 @@ function Returnfunc() {
 }

 const setChatHeaderContent = (content: string | undefined) => {
-  Title.value = content || 'Global'; // 确保默认值存在
+  Title.value = content || "Global"; // 确保默认值存在
 };

 onMounted(() => {
@@ -100,44 +99,35 @@ function onCurrentConversationUpdated(conversation: IConversationModel) {
 function onTypingStatusUpdated(status: boolean) {
  typingStatus.value = status;
  if (typingStatus.value) {
-    setChatHeaderContent(TUITranslateService.t('TUIChat.对方正在输入...'));
+    setChatHeaderContent(TUITranslateService.t("TUIChat.对方正在输入..."));
  } else {
    setChatHeaderContent(currentConversation.value?.getShowName());
  }
 }
 </script>
 <style>
-.Return {
-  width: 46rpx;
-  height: 46rpx;
-  position: absolute;
-  top: 110rpx;
-  left: 40rpx;
-  z-index: 999;
-  font-weight: bold;
-}
-.Navigationimg {
-  width: 100%;
-  height: 240rpx;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-}
-.Navigation-name{
-  position: absolute;
-  top: 110rpx;
-  left: 320rpx;
+.Navigation-name {
  font-size: 36rpx;
  color: #000000;
  font-weight: bold;
 }
-.Navigation{
+.Navigation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 240rpx;
+  background-image: url("https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Navigationimg.png");
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
 }
-</style>
+.Navigationcontent{
+  width: 80%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 60rpx;
+}
+</style>
--- a/TUIKit/components/TUIChat/index.vue
+++ b/TUIKit/components/TUIChat/index.vue
@@ -168,7 +168,7 @@ onUnmounted(() => {
  reset();
 });
 //发送自定义消息
-
+//············································标记3············································
 let currentConversation = ref();

 TUIStore.watch(StoreName.CONV, {
--- a/TUIKit/components/TUIChat/message-input-toolbar/evaluate/CustomMessage.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/evaluate/CustomMessage.vue
@@ -10,11 +10,76 @@
    @onDialogShow="onDialogShow"
    @onDialogClose="onDialogClose"
  >
-    <div>
-      <div class="container"></div>
+    <div class="popup">
+      <div class="container">
+        <div class="title">PK邀请</div>
+        <div class="yourChoose" @click="onyourChoose">
+          <view class="yourChoose-item">选择你要邀请的对手</view>
+        </div>
+        <div class="vstext">
+            <div class="Vtext">V</div>
+            <div class="Stext">S</div>
+        </div>
+        <div class="myChoose" @click="onmyChoose">
+          <view class="yourChoose-item">选择你要参与PK的信息</view>
+        </div>
+      </div>
      <button class="send-btn" @click="submitEvaluate">发送邀请</button>
    </div>
  </ToolbarItemContainer>
+  <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
+    <view class="popup-content">
+      <view class="popup-title">
+        <view class="popup-text">点击选择您要参与的主播</view>
+        <view v-if="list.length !== 0">
+        <scroll-view show-scrollbar="false" scroll-y="true" class="scroll">
+          
+          <view class="card" v-for="(item, index) in list" :key="index">
+            <view
+              class="card-content"
+              @click="Select(item.id, index)"
+              :style="{
+                background: selectedId === item.id ? '#b8ff8c74' : '#ffffff',
+              }"
+            >
+              <view class="Avatarimg">
+                <image class="avatar" :src="item.anchorIcon" mode="scaleToFill" />
+              </view>
+              <view class="NameMoney">
+                <view class="TimeMoney">
+                  <view class="NameMoney_Name">{{ item.anchorId }}</view>
+                </view>
+                <view class="TimeMoney_Time">
+                  <view class="pkTimeimg">
+                    <image
+                      style="width:31.49rpx; height:31.49rpx;margin-top:3rpx"
+                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/time.png"
+                      mode="scaleToFill"
+                    />
+                  </view>
+                  <!-- <view>{{ TimeFormatting(item.pkTime) }}</view> -->
+                  <view class="goldimg">
+                    <image
+                      style="width:31.49rpx; height:31.49rpx;margin-top:4rpx"
+                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
+                      mode="scaleToFill"
+                    />
+                  </view>
+                  <view class="goldnb">{{ item.coin }}K</view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+        <view class="noData" v-if="list.length === 0">您还没有可参与的主播PK，快去新建一个吧！</view>
+      </view>
+      <view class="popup-btn">
+        <button class="invite" type="primary" @click="invite()">邀请</button>
+        <button class="cancel" type="default" @click="close()">取消</button>
+      </view>
+    </view>
+  </uni-popup>
 </template>

 <script setup>
@@ -30,9 +95,11 @@ import TUIChatEngine, {
 } from "@tencentcloud/chat-uikit-engine";
 import { isEnabledMessageReadReceiptGlobal } from "../../utils/utils";
 import OfflinePushInfoManager from "../../offlinePushInfoManager/index";
+import { useCounterStore } from "@/stores/counter";
+import request from "@/components/request";
+const counter = useCounterStore();

-const evaluateIcon =
-  TUIChatConfig.getTheme() === "dark" ? InvitationDark : InvitationLight;
+const evaluateIcon = TUIChatConfig.getTheme() === "dark" ? InvitationDark : InvitationLight;
 const emits = defineEmits(["onDialogPopupShowOrHide"]);
 const onDialogShow = () => {
  emits("onDialogPopupShowOrHide", true);
@@ -43,54 +110,239 @@ const onDialogClose = () => {
 ///``````````````````````````````````````````````````````````````````````````````````````
 const currentConversation = ref();

+const mylist = ref([]);
+const youlist= ref([]);
 TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation) => {
    currentConversation.value = conversation;
+    //获取自己的可邀请列表
+    request({
+      url: "pk/queryMyCanUsePkData",
+      method: "POST",
+      data: {
+        userId:counter.myitem.id,
+      },
+      userInfo: true,
+    }).then((res) => {
+      if (res.code === 200) {
+        mylist.value = res.data;
+      }
+    });
+    //获取对方的可邀请列表
+    request({
+      url: "pk/listUninvitedPublishedAnchorsByUserId",
+      method: "POST",
+      data: {
+        userId:currentConversation.value.userProfile.userID,
+      },
+      userInfo: true,
+    }).then((res) => {
+      if (res.code === 200) {
+        youlist.value = res.data;
+      }
+    });
+    // ````````````````````````
  },
 });
 const container = ref();
-///``````````````````````````````````````标记``````````````````````````````````````````````
+const list = ref([]);
+const popup = ref();
+//选择对方pk信息（打开弹窗）
+function onyourChoose(){
+  popup.value.open("center");
+  list.value = youlist.value;
+}
+//选择自己的pk信息（打开弹窗）
+function onmyChoose(){
+  popup.value.open("center");
+  list.value = mylist.value;
+}
+//弹窗选中
+const selectedId = ref(null);
+function Select(item ,index){
+  selectedId.value = item;
+};
+//确定邀请
+function invite(){}
+//关闭弹窗
+function close(){
+  popup.value.close();
+}
+///``````````````````````````````````````标记3``````````````````````````````````````````````
 const submitEvaluate = () => {
-  const payload = {
-    data: JSON.stringify({
-      businessID: "pk",
-      title: "PK邀请",
-      buttonText1: "接受邀请",
-      buttonText2: "拒绝邀请",
-    }),
-    description: "邀请参加PK",
-    extension: "邀请参加PK",
-  };

-  //`````````````````````````````````````````````````````
-  const options = {
-    to:
-      currentConversation?.value?.groupProfile?.groupID ||
-      currentConversation?.value?.userProfile?.userID,
-    conversationType: currentConversation?.value?.type,
-    payload,
-    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
-  };
+  // const payload = {
+  //   data: JSON.stringify({
+  //     businessID: "pk",
+  //     title: "PK邀请",
+  //     buttonText1: "接受邀请",
+  //     buttonText2: "拒绝邀请",
+  //   }),
+  //   description: "邀请参加PK",
+  //   extension: "邀请参加PK",
+  // };

-  const offlinePushInfoCreateParams = {
-    conversation: currentConversation.value,
-    payload: options.payload,
-    messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
-  };
-  const sendMessageOptions = {
-    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
-  };
-  TUIChatService.sendCustomMessage(options, sendMessageOptions);
-  // close dialog after submit evaluate
-  container?.value?.toggleDialogDisplay(false);
+  // //`````````````````````````````````````````````````````
+  // const options = {
+  //   to:
+  //     currentConversation?.value?.groupProfile?.groupID ||
+  //     currentConversation?.value?.userProfile?.userID,
+  //   conversationType: currentConversation?.value?.type,
+  //   payload,
+  //   needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  // };
+
+  // const offlinePushInfoCreateParams = {
+  //   conversation: currentConversation.value,
+  //   payload: options.payload,
+  //   messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
+  // };
+  // const sendMessageOptions = {
+  //   offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
+  // };
+  // TUIChatService.sendCustomMessage(options, sendMessageOptions);
+  // // close dialog after submit evaluate
+  // container?.value?.toggleDialogDisplay(false);
 };
 </script>

 <style scoped>
+.popup{
+  height: 750rpx;
+  background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
+  background-position: center;
+}
 .container {
-  height: 300rpx;
+  height: 650rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.title{
+  font-size: 40rpx;
+  color: #313131;
+  text-align: center;
+  margin-top: 40rpx;
+  font-weight: bold;
+}
+.yourChoose{
+  width: 80%;
+  height: 150rpx;
+  margin-top: 40rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10rpx;
+  background-color: #ffffff;
+}
+.myChoose{
+  width: 80%;
+  height: 150rpx;
+  margin-top: 40rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10rpx;
+  background-color: #ffffff;
+}
+.yourChoose-item{
+  font-size: 30rpx;
+  color: #313131;
+  font-weight: bold;
+}
+.vstext {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 90%;
+  margin-top: 40rpx;
+}
+.Vtext {
+  font-size: 45.8rpx;
+  color: #f0836c;
+  font-weight: bold;
+  font-style: italic;
+}
+.Stext {
+  font-size: 45.8rpx;
+  color: #58d8db;
+  font-weight: bold;
+  font-style: italic;
 }
 .send-btn {
  margin-bottom: 100rpx;
 }
+.popup-content {
+  width: 750rpx;
+  height: 700rpx;
+  background-repeat: no-repeat;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
+  background-position: center;
+}
+.popup-title {
+  font-size: 30rpx;
+  margin-top: 50rpx;
+  text-align: center;
+}
+.popup-btn {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 50rpx;
+}
+.popup-text {
+  color: #161616;
+  font-size: 36.26rpx;
+  font-weight: bold;
+  margin-bottom: 30rpx;
+}
+.card-content {
+  /* width: 445rpx; */
+  width: 100%;
+  height: 100rpx;
+  background-color: #ffffff;
+  /* border: 2px solid #afafaf; */
+  border-radius: 10rpx;
+  display: flex;
+  align-items: center;
+  font-size: 28rpx;
+  color: rgb(127, 127, 127);
+  margin-top: 20rpx;
+}
+.scroll {
+  width: 500rpx;
+  height: 400rpx;
+  border-radius: 10px;
+  /* background-color: #fff; */
+}
+.popup-text {
+  color: #161616;
+  font-size: 36.26rpx;
+  font-weight: bold;
+  margin-bottom: 30rpx;
+}
+.card-content {
+  /* width: 445rpx; */
+  width: 100%;
+  height: 100rpx;
+  background-color: #ffffff;
+  /* border: 2px solid #afafaf; */
+  border-radius: 10rpx;
+  display: flex;
+  align-items: center;
+  font-size: 28rpx;
+  color: rgb(127, 127, 127);
+  margin-top: 20rpx;
+}
+.createModule {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 998;
+  width: 100vw;
+}
 </style>
--- a/TUIKit/components/TUIChat/message-input-toolbar/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
@@ -40,12 +40,12 @@
            v-if="featureConfig.InputVideo"
            videoSourceType="camera"
          />
-          <template v-if="currentExtensionList.length > 0">
+          <!-- <template v-if="currentExtensionList.length > 0">
            <div
              v-for="(extension, index) in currentExtensionList.slice(0, slicePos)"
              :key="index"
            >
-              <!-- <ToolbarItemContainer
+              <ToolbarItemContainer
                v-if="extension"
                :iconFile="genExtensionIcon(extension)"
                :title="genExtensionText(extension)"
@@ -53,9 +53,9 @@
                iconHeight="25px"
                :needDialog="false"
                @onIconClick="onExtensionClick(extension)"
-              /> -->
+              />
            </div>
-          </template>
+          </template> -->
          <template v-if="neededCountFirstPage === 1">
            <Words
              v-if="featureConfig.InputQuickReplies"
@@ -65,10 +65,10 @@
              v-if="featureConfig.InputEvaluation"
              @onDialogPopupShowOrHide="handleSwiperDotShow"
            /> -->
-            <!-- <CustomMessage
+            <CustomMessage
              v-if="featureConfig.InputCustomMessage"
              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            /> -->
+            />
          </template>
          <template v-if="neededCountFirstPage > 1">
            <Words
@@ -79,10 +79,10 @@
              v-if="featureConfig.InputEvaluation"
              @onDialogPopupShowOrHide="handleSwiperDotShow"
            /> -->
-            <!-- <CustomMessage
+            <CustomMessage
              v-if="featureConfig.InputCustomMessage"
              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            /> -->
+            />
          </template>
        </swiper-item>
        <swiper-item
@@ -123,10 +123,10 @@
              @onDialogPopupShowOrHide="handleSwiperDotShow"
            /> -->
            <!-- ···························标记······························· -->
-            <!-- <CustomMessage
+            <CustomMessage
              v-if="featureConfig.InputCustomMessage"
              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            /> -->
+            />
          </template>
        </swiper-item>
      </swiper>
--- a/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
@@ -94,9 +94,6 @@ import TUIChatEngine, {
  TUIChatService,
 } from "@tencentcloud/chat-uikit-engine";
 import { useCounterStore } from "@/stores/counter";
-import request from "@/components/request";
-import { Message } from "@tencentcloud/chat";
-import TencentCloudChat from "@tencentcloud/chat";
 // import message from '@tencentcloud/chat-uikit-uniapp/locales/en/message';
 const counter = useCounterStore();

@@ -109,7 +106,7 @@ interface Props {

 function handleAccept(customData: ICustomMessagePayload) {
  const customDatainfo = JSON.stringify(customData);
-  uni.redirectTo({
+  uni.navigateTo({
        url: `/pages/PKMessageprocessing/PKMessageprocessing?customData=${customDatainfo}`,
      });
 }