fix: 修改弹窗

2025-06-20 15:10:27 +08:00
parent fa745b73c2
commit 2afc95d531
324 changed files with 643 additions and 622 deletions
--- a/TUIKit/components/TUIChat/message-input-toolbar/evaluate/CustomMessage.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/evaluate/CustomMessage.vue
@@ -27,6 +27,60 @@
      <button class="send-btn" @click="submitEvaluate">发送邀请</button>
    </div>
  </ToolbarItemContainer>
+  <uni-popup class="popupcss" 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>
@@ -149,9 +203,6 @@ const submitEvaluate = () => {
 </script>

 <style scoped>
-.popupcss {
-  
-}
 .popup{
  height: 750rpx;
  background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
--- a/TUIKit/components/TUIChat/message-input-toolbar/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
@@ -10,126 +10,51 @@
      <EmojiPickerDialog />
    </div>

-    <div v-else>
-      <swiper
-        :class="['message-input-toolbar-swiper']"
-        :indicator-dots="isSwiperIndicatorDotsEnable"
-        :autoplay="false"
-        :circular="false"
-      >
-        <swiper-item
-          :class="[
-            'message-input-toolbar-list',
-            'message-input-toolbar-h5-list',
-            'message-input-toolbar-uni-list',
-          ]"
+    <div v-else class="barTool">
+      <div class="barToolItem">
+        <ImageUpload v-if="featureConfig.InputImage" imageSourceType="camera" />
+      </div>
+      <div class="barToolItem">
+        <ImageUpload v-if="featureConfig.InputImage" imageSourceType="album" />
+      </div>
+      <div class="barToolItem">
+        <VideoUpload v-if="featureConfig.InputVideo" videoSourceType="album" />
+      </div>
+      <div class="barToolItem">
+        <VideoUpload v-if="featureConfig.InputVideo" videoSourceType="camera" />
+      </div>
+      <!-- <template v-if="currentExtensionList.length > 0">
+        <div
+          v-for="(extension, index) in currentExtensionList.slice(0, slicePos)"
+          :key="index"
        >
-          <ImageUpload
-            v-if="featureConfig.InputImage"
-            imageSourceType="camera"
+          <ToolbarItemContainer
+            v-if="extension"
+            :iconFile="genExtensionIcon(extension)"
+            :title="genExtensionText(extension)"
+            iconWidth="25px"
+            iconHeight="25px"
+            :needDialog="false"
+            @onIconClick="onExtensionClick(extension)"
          />
-          <ImageUpload
-            v-if="featureConfig.InputImage"
-            imageSourceType="album"
-          />
-          <VideoUpload
-            v-if="featureConfig.InputVideo"
-            videoSourceType="album"
-          />
-          <VideoUpload
-            v-if="featureConfig.InputVideo"
-            videoSourceType="camera"
-          />
-          <!-- <template v-if="currentExtensionList.length > 0">
-            <div
-              v-for="(extension, index) in currentExtensionList.slice(0, slicePos)"
-              :key="index"
-            >
-              <ToolbarItemContainer
-                v-if="extension"
-                :iconFile="genExtensionIcon(extension)"
-                :title="genExtensionText(extension)"
-                iconWidth="25px"
-                iconHeight="25px"
-                :needDialog="false"
-                @onIconClick="onExtensionClick(extension)"
-              />
-            </div>
-          </template> -->
-          <template v-if="neededCountFirstPage === 1">
-            <Words
-              v-if="featureConfig.InputQuickReplies"
-              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            />
-            <!-- <Evaluate
-              v-if="featureConfig.InputEvaluation"
-              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            /> -->
-            <CustomMessage
-              v-if="featureConfig.InputCustomMessage"
-              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            />
-          </template>
-          <template v-if="neededCountFirstPage > 1">
-            <Words
-              v-if="featureConfig.InputQuickReplies"
-              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            />
-            <!-- <Evaluate
-              v-if="featureConfig.InputEvaluation"
-              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            /> -->
-            <CustomMessage
-              v-if="featureConfig.InputCustomMessage"
-              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            />
-          </template>
-        </swiper-item>
-        <swiper-item
-          v-if="neededCountFirstPage <= 1"
-          :class="[
-            'message-input-toolbar-list',
-            'message-input-toolbar-h5-list',
-            'message-input-toolbar-uni-list',
-          ]"
-        >
-          <div
-            v-for="(extension, index) in currentExtensionList.slice(slicePos)"
-            :key="index"
-          >
-            <ToolbarItemContainer
-              v-if="extension"
-              :iconFile="genExtensionIcon(extension)"
-              :title="genExtensionText(extension)"
-              iconWidth="25px"
-              iconHeight="25px"
-              :needDialog="false"
-              @onIconClick="onExtensionClick(extension)"
-            />
-          </div>
-          <template v-if="neededCountFirstPage === 1">
-            <Words
-              v-if="featureConfig.InputQuickReplies"
-              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            />
-          </template>
-          <template v-else>
-            <Words
-              v-if="featureConfig.InputQuickReplies"
-              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            />
-            <!-- <Evaluate
-              v-if="featureConfig.InputEvaluation"
-              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            /> -->
-            <!-- ···························标记······························· -->
-            <CustomMessage
-              v-if="featureConfig.InputCustomMessage"
-              @onDialogPopupShowOrHide="handleSwiperDotShow"
-            />
-          </template>
-        </swiper-item>
-      </swiper>
+        </div>
+      </template> -->
+      <div class="barToolItem">
+        <Words
+          v-if="featureConfig.InputQuickReplies"
+          @onDialogPopupShowOrHide="handleSwiperDotShow"
+        />
+        <!-- <Evaluate
+          v-if="featureConfig.InputEvaluation"
+          @onDialogPopupShowOrHide="handleSwiperDotShow"
+        /> -->
+      </div>
+      <div class="barToolItem">
+        <CustomMessage
+          v-if="featureConfig.InputCustomMessage"
+          @onDialogPopupShowOrHide="handleSwiperDotShow"
+        />
+      </div>
    </div>

    <UserSelector
@@ -140,40 +65,44 @@
      @submit="onUserSelectorSubmit"
      @cancel="onUserSelectorCancel"
    />
+
+    <popupinvite ref="popupinviteRef" />
  </div>
 </template>
 <script setup lang="ts">
-import { ref, onUnmounted, onMounted } from '../../../adapter-vue';
+import { ref, onUnmounted, onMounted } from "../../../adapter-vue";
 import TUIChatEngine, {
  IConversationModel,
  TUIStore,
  StoreName,
  TUIReportService,
-} from '@tencentcloud/chat-uikit-engine';
-import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
-import ImageUpload from './image-upload/index.vue';
-import VideoUpload from './video-upload/index.vue';
-import Evaluate from './evaluate/index.vue';
-import Words from './words/index.vue';
-import ToolbarItemContainer from './toolbar-item-container/index.vue';
-import EmojiPickerDialog from './emoji-picker/emoji-picker-dialog.vue';
-import UserSelector from './user-selector/index.vue';
-import TUIChatConfig from '../config';
-import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
-import { ToolbarDisplayType } from '../../../interface';
-import OfflinePushInfoManager, { PUSH_SCENE } from '../offlinePushInfoManager/index';
-import CustomMessage from "./evaluate/CustomMessage.vue"
+} from "@tencentcloud/chat-uikit-engine";
+import TUICore, { ExtensionInfo, TUIConstants } from "@tencentcloud/tui-core";
+import ImageUpload from "./image-upload/index.vue";
+import VideoUpload from "./video-upload/index.vue";
+import Evaluate from "./evaluate/index.vue";
+import Words from "./words/index.vue";
+import ToolbarItemContainer from "./toolbar-item-container/index.vue";
+import EmojiPickerDialog from "./emoji-picker/emoji-picker-dialog.vue";
+import UserSelector from "./user-selector/index.vue";
+import TUIChatConfig from "../config";
+import { enableSampleTaskStatus } from "../../../utils/enableSampleTaskStatus";
+import { ToolbarDisplayType } from "../../../interface";
+import OfflinePushInfoManager, {
+  PUSH_SCENE,
+} from "../offlinePushInfoManager/index";
+import CustomMessage from "./evaluate/CustomMessage.vue";
+import popupinvite from "./evaluate/popupinvite.vue";

 interface IProps {
  displayType: ToolbarDisplayType;
 }

-const props = withDefaults(defineProps<IProps>(), {
-});
+const props = withDefaults(defineProps<IProps>(), {});

 const currentConversation = ref<IConversationModel>();
 const isGroup = ref<boolean>(false);
-const selectorShowType = ref<string>('');
+const selectorShowType = ref<string>("");
 const userSelectorRef = ref();
 const currentUserSelectorExtension = ref<ExtensionInfo | null>();
 const currentExtensionList = ref<ExtensionInfo[]>([]);
@@ -182,6 +111,8 @@ const featureConfig = TUIChatConfig.getFeatureConfig();
 const neededCountFirstPage = ref<number>(8);
 const slicePos = ref<number>(0);

+const popupinviteRef = ref(null);
+
 const computeToolbarPaging = () => {
  if (featureConfig.InputImage && featureConfig.InputVideo) {
    neededCountFirstPage.value -= 4;
@@ -193,9 +124,11 @@ const computeToolbarPaging = () => {
  neededCountFirstPage.value -= currentExtensionList.value.length;

  if (neededCountFirstPage.value === 1) {
-    isSwiperIndicatorDotsEnable.value = (featureConfig.InputEvaluation && featureConfig.InputQuickReplies);
+    isSwiperIndicatorDotsEnable.value =
+      featureConfig.InputEvaluation && featureConfig.InputQuickReplies;
  } else if (neededCountFirstPage.value < 1) {
-    isSwiperIndicatorDotsEnable.value = featureConfig.InputEvaluation || featureConfig.InputQuickReplies;
+    isSwiperIndicatorDotsEnable.value =
+      featureConfig.InputEvaluation || featureConfig.InputQuickReplies;
  }
 };

@@ -218,7 +151,10 @@ const onActiveConversationUpdate = (conversationID: string) => {
  if (conversationID !== currentConversation.value?.conversationID) {
    getExtensionList();
    computeToolbarPaging();
-    currentConversation.value = TUIStore.getData(StoreName.CONV, 'currentConversation');
+    currentConversation.value = TUIStore.getData(
+      StoreName.CONV,
+      "currentConversation"
+    );
    isGroup.value = conversationID.startsWith(TUIChatEngine.TYPES.CONV_GROUP);
  }
 };
@@ -230,13 +166,16 @@ const getExtensionList = () => {
  if (chatType === TUIConstants.TUIChat.TYPE.CUSTOMER_SERVICE) {
    params.filterVoice = true;
    params.filterVideo = true;
-    enableSampleTaskStatus('customerService');
+    enableSampleTaskStatus("customerService");
  }
  // uni-app build ios app has null in last index need to filter
  currentExtensionList.value = [
-    ...TUICore.getExtensionList(TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID, params),
+    ...TUICore.getExtensionList(
+      TUIConstants.TUIChat.EXTENSION.INPUT_MORE.EXT_ID,
+      params
+    ),
  ].filter((extension: ExtensionInfo) => {
-    if (extension?.data?.name === 'search') {
+    if (extension?.data?.name === "search") {
      return featureConfig.MessageSearch;
    }
    return true;
@@ -244,14 +183,14 @@ const getExtensionList = () => {
  reportExtension(currentExtensionList.value);
 };

-function reportExtension(extensionList:ExtensionInfo[]){
-  extensionList.forEach((extension: ExtensionInfo)=>{
+function reportExtension(extensionList: ExtensionInfo[]) {
+  extensionList.forEach((extension: ExtensionInfo) => {
    const _name = extension?.data?.name;
-    if(_name === 'voiceCall'){
-      TUIReportService.reportFeature(203, 'voice-call');
-    } else if (_name === 'videoCall') {
-      TUIReportService.reportFeature(203, 'video-call');
-    } else if(_name === 'quickRoom'){
+    if (_name === "voiceCall") {
+      TUIReportService.reportFeature(203, "voice-call");
+    } else if (_name === "videoCall") {
+      TUIReportService.reportFeature(203, "video-call");
+    } else if (_name === "quickRoom") {
      TUIReportService.reportFeature(204);
    }
  });
@@ -261,16 +200,16 @@ function reportExtension(extensionList:ExtensionInfo[]){
 const onExtensionClick = (extension: ExtensionInfo) => {
  // uniapp vue2 build wx lose listener proto
  const extensionModel = currentExtensionList.value.find(
-    targetExtension => targetExtension?.data?.name === extension?.data?.name,
+    (targetExtension) => targetExtension?.data?.name === extension?.data?.name
  );
  switch (extensionModel?.data?.name) {
-    case 'voiceCall':
+    case "voiceCall":
      onCallExtensionClicked(extensionModel, 1);
      break;
-    case 'videoCall':
+    case "videoCall":
      onCallExtensionClicked(extensionModel, 2);
      break;
-    case 'search':
+    case "search":
      extensionModel?.listener?.onClicked?.();
      break;
    default:
@@ -285,12 +224,15 @@ const onCallExtensionClicked = (extension: ExtensionInfo, callType: number) => {
      userIDList: [currentConversation?.value?.conversationID?.slice(3)],
      type: callType,
      callParams: {
-        offlinePushInfo: OfflinePushInfoManager.getOfflinePushInfo(PUSH_SCENE.CALL),
+        offlinePushInfo: OfflinePushInfoManager.getOfflinePushInfo(
+          PUSH_SCENE.CALL
+        ),
      },
    });
  } else if (isGroup.value) {
    currentUserSelectorExtension.value = extension;
-    userSelectorRef?.value?.toggleShow && userSelectorRef.value.toggleShow(true);
+    userSelectorRef?.value?.toggleShow &&
+      userSelectorRef.value.toggleShow(true);
  }
 };

@@ -305,7 +247,9 @@ const onUserSelectorSubmit = (selectedInfo: any) => {
  currentUserSelectorExtension.value?.listener?.onClicked?.({
    ...selectedInfo,
    callParams: {
-      offlinePushInfo: OfflinePushInfoManager.getOfflinePushInfo(PUSH_SCENE.CALL),
+      offlinePushInfo: OfflinePushInfoManager.getOfflinePushInfo(
+        PUSH_SCENE.CALL
+      ),
    },
  });
  currentUserSelectorExtension.value = null;
@@ -316,17 +260,21 @@ const onUserSelectorCancel = () => {
 };

 const handleSwiperDotShow = (showStatus: boolean) => {
-  isSwiperIndicatorDotsEnable.value = (neededCountFirstPage.value <= 1 && !showStatus);
-};
-</script>
-<script lang="ts">
-export default {
-  options: {
-    styleIsolation: 'shared',
-  },
+  isSwiperIndicatorDotsEnable.value =
+    neededCountFirstPage.value <= 1 && !showStatus;
 };
 </script>
+
 <style lang="scss">
-@import '../../../assets/styles/common';
-@import './style/uni';
+@import "../../../assets/styles/common";
+@import "./style/uni";
+
+.barTool {
+  display: flex;
+  flex-wrap: wrap;
+  .barToolItem {
+    margin-bottom: 10rpx;
+    width: 25%;
+  }
+}
 </style>