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>
  <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>
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;
};
//确定邀请
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 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: 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>