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

<!-- 自定义邀请消息 -->
<template>
  <ToolbarItemContainer
    ref="container"
    :iconFile="evaluateIcon"
    title="邀请"
    :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '36px' : '30px'"
    :iconHeight="isUniFrameWork ? '36px' : '30px'"
    @onDialogShow="onDialogShow"
    @onDialogClose="onDialogClose"
  >
    <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>
</template>

<script setup>
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 { ref } from "vue";
import TUIChatEngine, {
  TUIStore,
  StoreName,
  TUIChatService,
} 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 emits = defineEmits(["onDialogPopupShowOrHide"]);
const onDialogShow = () => {
  emits("onDialogPopupShowOrHide", true);
};
const onDialogClose = () => {
  emits("onDialogPopupShowOrHide", false);
};
///``````````````````````````````````````````````````````````````````````````````````````
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;
};

///``````````````````````````````````````标记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 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>
.popupcss {
  
}
.popup{
  height: 750rpx;
  background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
  background-position: center;
}
.container {
  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;
}
.Avatarimg {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background-color: #dddddd;
  margin-right: 20rpx;
  margin-left: 20rpx;
}
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.NameMoney {
  display: flex;
  flex-direction: column;
}
.TimeMoney {
  width: 300rpx;
  display: flex;
  font-weight: bold;
  font-size: 27rpx;
  color: #161616;
}
.NameMoney_Name {
  width: 400rpx;
  text-align: left;
  font-weight: bold;
  font-size: 27rpx;
  color: #161616;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.TimeMoney_Time {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}
.pkTimeimg {
  width: 31.49rpx;
  height: 31.49rpx;
  margin-right: 10rpx;
}
.goldimg {
  width: 31.49rpx;
  height: 35rpx;
  margin-left: 40rpx;
}
.goldnb {
  display: flex;
  margin-left: 5rpx;
}
.noData{
  width: 500rpx;
  height: 400rpx;
  border-radius: 10px;
  font-size: 30rpx;
  color: #999;
}
.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;
}
.popup-btn {
  display: flex;
  justify-content: space-around;
  margin-top: 50rpx;
}
.invite {
  width: 225.19rpx;
  height: 78.24rpx;
  font-size: 28.63rpx;
  line-height: 80rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
}
.cancel {
  width: 225.19rpx;
  height: 78.24rpx;
  font-size: 28.63rpx;
  line-height: 80rpx;
  margin-left: 30rpx;
  color: #03aba8;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  border: 1rpx solid #03aba8;
}
</style>