优化页面

TUIKit/components/TUIChat/message-input-toolbar/evaluate/CustomMessage.vue

@@ -12,16 +12,95 @@
   >
     <div class="popup">
       <div class="container">
-        <div class="title">PK邀请</div>
+        <div class="titlecss">
+          <div></div>
+          <div class="title">PK邀请</div>
+          <div class="close" @click="onClose">
+            <image
+            style="width: 40rpx; height: 40rpx;"
+              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Fork.png"
+              mode="scaleToFill"
+            />
+          </div>
+        </div>
+
         <div class="yourChoose" @click="onyourChoose">
-          <view class="yourChoose-item">选择你要邀请的对手</view>
+          <!--  -->
+          <view v-if="youselfdata == null" class="yourChoose-item"
+            >选择你要邀请的对手</view
+          >
+          <!--  -->
+          <view v-else class="Echo">
+            <view class="EchoIcon">
+              <image
+                style="width: 100rpx; height: 100rpx; border-radius: 50%"
+                :src="youselfdata.anchorIcon"
+                mode="scaleToFill"
+              />
+            </view>
+            <view class="EchoNameandTime">
+              <view class="EchoName">{{ youselfdata.anchorId }}</view>
+              <view class="EchoTimeandGold">
+                <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(youselfdata.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">{{ youselfdata.coin }}K</view>
+              </view>
+            </view>
+          </view>
         </div>
         <div class="vstext">
-            <div class="Vtext">V</div>
-            <div class="Stext">S</div>
+          <div class="Vtext">V</div>
+          <div class="Stext">S</div>
         </div>
         <div class="myChoose" @click="onmyChoose">
-          <view class="yourChoose-item">选择你要参与PK的信息</view>
+          <!--  -->
+          <view class="yourChoose-item" v-if="myinfodata == null"
+            >选择你要参与PK的信息</view
+          >
+          <!--  -->
+          <view v-else class="Echo">
+            <view class="EchoIcon">
+              <image
+                style="width: 100rpx; height: 100rpx; border-radius: 50%"
+                :src="myinfodata.anchorIcon"
+                mode="scaleToFill"
+              />
+            </view>
+            <view class="EchoNameandTime">
+              <view class="EchoName">{{ myinfodata.anchorId }}</view>
+              <view class="EchoTimeandGold">
+                <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(myinfodata.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">{{ myinfodata.coin }}K</view>
+              </view>
+            </view>
+          </view>
         </div>
       </div>
       <button class="send-btn" @click="submitEvaluate">发送邀请</button>
@@ -38,7 +117,10 @@
                 class="card-content"
                 @click="Select(item.id, index)"
                 :style="{
-                  background: selectedId === item.id ? '#b8ff8c74' : '#ffffff',
+                  background:
+                    myselectedId === item.id || youselectedId === item.id
+                      ? '#b8ff8c74'
+                      : '#ffffff',
                 }"
               >
                 <view class="Avatarimg">
@@ -46,7 +128,9 @@
                 </view>
                 <view class="NameMoney">
                   <view class="TimeMoney">
-                    <view class="NameMoney_Name">{{ item.anchorId }}</view>
+                    <view class="NameMoney_Name">{{
+                      list == mylist ? item.anchorId : item.disPlayId
+                    }}</view>
                   </view>
                   <view class="TimeMoney_Time">
                     <view class="pkTimeimg">
@@ -56,7 +140,7 @@
                         mode="scaleToFill"
                       />
                     </view>
-                    <!-- <view>{{ TimeFormatting(item.pkTime) }}</view> -->
+                    <view>{{ TimeFormatting(item.pkTime) }}</view>
                     <view class="goldimg">
                       <image
                         style="width: 31.49rpx; height: 31.49rpx; margin-top: 4rpx"
@@ -76,11 +160,21 @@
         >
       </view>
       <view class="popup-btn">
-        <button class="invite" type="primary" @click="invite()">邀请</button>
+        <button class="invite" type="primary" @click="invite()">确定</button>
         <button class="cancel" type="default" @click="close()">取消</button>
       </view>
     </view>
   </uni-popup>
+  <uni-popup ref="popups" type="center" border-radius="10px 10px 0 0">
+    <view class="popup-Hintcontent">
+      <view class="popup-text">提示</view>
+      <view class="popup-texts">邀请成功后的pk不可修改，不可删除，请谨慎操作！</view>
+      <view class="popup-btn">
+        <button class="invite" type="primary" @click="inviteHint">确认</button>
+        <button class="cancel" type="default" @click="closeHint">取消</button>
+      </view>
+    </view>
+  </uni-popup>
 </template>
 
 <script setup>
@@ -88,6 +182,7 @@ import TUIChatConfig from "../../config";
 import ToolbarItemContainer from "../toolbar-item-container/index.vue";
 import InvitationDark from "../../../../assets/icon/InvitationDark.png";
 import InvitationLight from "../../../../assets/icon/InvitationLight.png";
+import generateMsgId from "@/components/generateMsgId.js";
 import { ref } from "vue";
 import TUIChatEngine, {
   TUIStore,
@@ -98,9 +193,11 @@ import { isEnabledMessageReadReceiptGlobal } from "../../utils/utils";
 import OfflinePushInfoManager from "../../offlinePushInfoManager/index";
 import { useCounterStore } from "@/stores/counter";
 import request from "@/components/request";
+import TimeFormatting from "@/components/TimeFormatting";
 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);
@@ -112,7 +209,7 @@ const onDialogClose = () => {
 const currentConversation = ref();
 
 const mylist = ref([]);
-const youlist= ref([]);
+const youlist = ref([]);
 TUIStore.watch(StoreName.CONV, {
   currentConversation: (conversation) => {
     currentConversation.value = conversation;
@@ -121,11 +218,12 @@ TUIStore.watch(StoreName.CONV, {
       url: "pk/queryMyCanUsePkData",
       method: "POST",
       data: {
-        userId:counter.myitem.id,
+        userId: counter.myitem.id,
       },
       userInfo: true,
     }).then((res) => {
       if (res.code === 200) {
+        console.log("mylist", res.data);
         mylist.value = res.data;
       }
     });
@@ -134,76 +232,189 @@ TUIStore.watch(StoreName.CONV, {
       url: "pk/listUninvitedPublishedAnchorsByUserId",
       method: "POST",
       data: {
-        userId:currentConversation.value.userProfile.userID,
+        userId: currentConversation.value.userProfile.userID,
       },
       userInfo: true,
     }).then((res) => {
       if (res.code === 200) {
+        console.log("youlist", res.data);
         youlist.value = res.data;
       }
     });
     // ````````````````````````
   },
 });
-const container = ref();
 const list = ref([]);
 const popup = ref();
 //选择对方pk信息（打开弹窗）
-function onyourChoose(){
+function onyourChoose() {
   popup.value.open("center");
   list.value = youlist.value;
 }
 //选择自己的pk信息（打开弹窗）
-function onmyChoose(){
+function onmyChoose() {
   popup.value.open("center");
   list.value = mylist.value;
 }
 //弹窗选中
-const selectedId = ref(null);
-function Select(item ,index){
-  selectedId.value = item;
-};
-
+const myselectedId = ref(null);
+const youselectedId = ref(null);
+const youselectedindex = ref(null);
+const myselectedindex = ref(null);
+function Select(item, index) {
+  if (list.value == mylist.value) {
+    myselectedId.value = item;
+    myselectedindex.value = index;
+  } else if (list.value == youlist.value) {
+    youselectedId.value = item;
+    youselectedindex.value = index;
+  }
+}
+//关闭弹窗
+function close() {
+  popup.value.close();
+  if (list.value == mylist.value) {
+    myselectedId.value = null;
+    myselectedindex.value = null;
+  } else if (list.value == youlist.value) {
+    youselectedId.value = null;
+    youselectedindex.value = null;
+  }
+}
+//确认
+const myinfodata = ref(null);
+const youselfdata = ref(null);
+function invite() {
+  if (list.value == mylist.value) {
+    if (myselectedindex.value == null) {
+      uni.showToast({
+        title: "请选择您要邀请的对手",
+        icon: "none",
+        duration: 3000,
+      });
+      return;
+    } else {
+      myinfodata.value = list.value[myselectedindex.value];
+      popup.value.close();
+    }
+  } else if (list.value == youlist.value) {
+    if (youselectedindex.value == null) {
+      uni.showToast({
+        title: "请选择您要参与的PK信息",
+        icon: "none",
+        duration: 3000,
+      });
+      return;
+    } else {
+      youselfdata.value = list.value[youselectedindex.value];
+      popup.value.close();
+    }
+  }
+}
+//关闭弹窗
+const container = ref();
+function onClose() {
+  container?.value?.toggleDialogDisplay(false);
+}
 ///``````````````````````````````````````标记3``````````````````````````````````````````````
+const popups = ref();
 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 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);
+  popups.value.open("center");
 };
+function closeHint() {
+  popups.value.close();
+}
+const inviteHint =()=> {
+  request({
+    url: "pk/createPkRecord",
+    method: "POST",
+    data: {
+      pkIdA: youselfdata.value.id,
+      pkIdB: myinfodata.value.id,
+      userIdA: youselfdata.value.senderId,
+      userIdB: myinfodata.value.senderId,
+      pkTime: youselfdata.value.pkTime,
+      pkNumber: youselfdata.value.pkNumber,
+      anchorIdA: youselfdata.value.anchorId,
+      anchorIdB: myinfodata.value.anchorId,
+      anchorIconA: youselfdata.value.anchorIcon,
+      anchorIconB: myinfodata.value.anchorIcon,
+      piIdA: youselfdata.value.id,
+      piIdB: myinfodata.value.id,
+    },
+    userInfo: true,
+  }).then((res) => {
+    if (res.code === 200) {
+      const keyid = generateMsgId();
+      const payload = {
+        data: JSON.stringify({
+          businessID: "pk",
+          keyid: keyid,
+          myitem: myinfodata.value.id,
+          pkIdA: youselfdata.value.id,
+          pkIdB: myinfodata.value.id,
+          userIdA: youselfdata.value.senderId,
+          userIdB: myinfodata.value.senderId,
+          pkTime: youselfdata.value.pkTime,
+          pkNumber: youselfdata.value.pkNumber,
+          id: res.data.id,
+          link: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pk.png",
+          btnDisplay: true,
+        }),
+        description: "邀请参加PK",
+        extension: "邀请参加PK",
+      };
+      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).then((res) => {
+        const messagein = request({
+          url: "chat/add",
+          method: "POST",
+          data: {
+            messageInfo: JSON.stringify(res.data.message),
+            keyId: keyid,
+          },
+          userInfo: true,
+        });
+      });
+      myinfodata.value = null;
+      youselfdata.value = null;
+      currentConversation.value = null;
+      myselectedId.value = null;
+      myselectedindex.value = null;
+      youselectedId.value = null;
+      youselectedindex.value = null;
+      list.value = [];
+      container?.value?.toggleDialogDisplay(false);
+
+    } else {
+      uni.showToast({
+        title: res.msg,
+        icon: "none",
+        duration: 3000,
+      });
+    }
+  });
+}
+
 </script>
 
 <style scoped>
-.popup{
+.popup {
   height: 750rpx;
   background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
   background-position: center;
@@ -214,38 +425,78 @@ const submitEvaluate = () => {
   flex-direction: column;
   align-items: center;
 }
-.title{
+.titlecss{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 50rpx;
+}
+.title {
   font-size: 40rpx;
   color: #313131;
   text-align: center;
-  margin-top: 40rpx;
   font-weight: bold;
 }
-.yourChoose{
+.close{
+  margin-right: 40rpx;
+  margin-top: -30rpx;
+}
+.yourChoose {
   width: 80%;
   height: 150rpx;
   margin-top: 40rpx;
   display: flex;
-  justify-content: center;
+  /* justify-content: center; */
   align-items: center;
   border-radius: 10rpx;
   background-color: #ffffff;
 }
-.myChoose{
+.myChoose {
   width: 80%;
   height: 150rpx;
   margin-top: 40rpx;
   display: flex;
-  justify-content: center;
+  /* justify-content: center; */
   align-items: center;
   border-radius: 10rpx;
   background-color: #ffffff;
 }
-.yourChoose-item{
+.yourChoose-item {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 150rpx;
   font-size: 30rpx;
   color: #313131;
   font-weight: bold;
 }
+.Echo {
+  display: flex;
+  align-items: center;
+}
+.EchoIcon {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  margin-left: 20rpx;
+}
+.EchoNameandTime {
+  display: flex;
+  flex-direction: column;
+}
+.EchoName {
+  font-size: 30rpx;
+  color: #313131;
+  margin-left: 20rpx;
+  font-weight: bold;
+}
+.EchoTimeandGold {
+  display: flex;
+  align-items: center;
+  margin-left: 20rpx;
+  margin-top: 20rpx;
+}
 .vstext {
   display: flex;
   justify-content: center;
@@ -266,10 +517,16 @@ const submitEvaluate = () => {
   font-style: italic;
 }
 .send-btn {
-  margin-bottom: 100rpx;
+  width: 80%;
+  margin-bottom: 70rpx;
+  border-radius: 50rpx;
+  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
+  color: #ffffff;
+  font-size: 30rpx;
+  font-weight: bold;
 }
 .popup-content {
-  width: 750rpx;
+  width: 600rpx;
   height: 700rpx;
   background-repeat: no-repeat;
   border-radius: 10px;
@@ -362,7 +619,7 @@ const submitEvaluate = () => {
   display: flex;
   margin-left: 5rpx;
 }
-.noData{
+.noData {
   width: 500rpx;
   height: 400rpx;
   border-radius: 10px;
@@ -428,4 +685,24 @@ const submitEvaluate = () => {
   border-bottom-right-radius: 50rpx;
   border: 1rpx solid #03aba8;
 }
+.popup-Hintcontent{
+  width: 600rpx;
+  height: 500rpx;
+  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-texts{
+  margin-left: 50rpx;
+  color: #7e7e7e;
+  font-size: 26rpx;
+  margin-right: 50rpx;
+  margin-top: 70rpx;
+  margin-bottom: 70rpx;
+}
 </style>

TUIKit/components/TUIChat/message-input-toolbar/evaluate/popupinvite.vue

@@ -1,81 +0,0 @@
-<template>
-  <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>
-export default {
-  data() {
-    return {
-      title: "Hello",
-    };
-  },
-  onLoad() {
-    // 页面加载时执行
-  },
-  methods: {
-    //确定邀请
-    invite() {},
-    //关闭弹窗
-    close() {
-      popup.value.close();
-    },
-  },
-};
-</script>
-
-<style scoped>
-/* 样式定义 */
-</style>

TUIKit/components/TUIChat/message-input-toolbar/index.vue

@@ -7,7 +7,7 @@
     ]"
   >
     <div v-if="props.displayType === 'emojiPicker'">
-      <EmojiPickerDialog />
+      <!-- <EmojiPickerDialog /> -->
     </div>
 
     <div v-else class="barTool">
@@ -50,6 +50,7 @@
         /> -->
       </div>
       <div class="barToolItem">
+      <!-- ···············································标记··············································· -->
         <CustomMessage
           v-if="featureConfig.InputCustomMessage"
           @onDialogPopupShowOrHide="handleSwiperDotShow"
@@ -66,7 +67,7 @@
       @cancel="onUserSelectorCancel"
     />
 
-    <popupinvite ref="popupinviteRef" />
+    <!-- <popupinvite ref="popupinviteRef" /> -->
   </div>
 </template>
 <script setup lang="ts">
@@ -273,7 +274,8 @@ const handleSwiperDotShow = (showStatus: boolean) => {
   display: flex;
   flex-wrap: wrap;
   .barToolItem {
-    margin-bottom: 10rpx;
+    margin-bottom: 30rpx;
+    margin-top: 30rpx;
     width: 25%;
   }
 }