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="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 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>
        <div class="myChoose" @click="onmyChoose">
          <!--  -->
          <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>
    </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:
                    myselectedId === item.id || youselectedId === 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">{{
                      list == mylist ? item.anchorId : item.disPlayId
                    }}</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>
  <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>
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,
  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";
import TimeFormatting from "@/components/TimeFormatting";
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) {
        console.log("mylist", res.data);
        mylist.value = res.data;
      }
    });
    //获取对方的可邀请列表
    request({
      url: "pk/listUninvitedPublishedAnchorsByUserId",
      method: "POST",
      data: {
        userId: currentConversation.value.userProfile.userID,
      },
      userInfo: true,
    }).then((res) => {
      if (res.code === 200) {
        console.log("youlist", res.data);
        youlist.value = res.data;
      }
    });
    // ````````````````````````
  },
});
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 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 = () => {
  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 {
  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;
}
.titlecss{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50rpx;
}
.title {
  font-size: 40rpx;
  color: #313131;
  text-align: center;
  font-weight: bold;
}
.close{
  margin-right: 40rpx;
  margin-top: -30rpx;
}
.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 {
  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;
  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 {
  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: 600rpx;
  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;
}
.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>