623 lines
17 KiB
Vue
623 lines
17 KiB
Vue
<template>
|
||
<view class="chat-more-message-invitation" @click.stop>
|
||
<!-- 对方主播 -->
|
||
<view class="chat-more-message-invitation-title">邀请对方参与PK</view>
|
||
<view class="oppositeAnchor" @click="showPopup(1)">
|
||
<view class="card" v-if="oppositselect != null">
|
||
<view class="card-select-select">
|
||
<view class="Avatarimg-select">
|
||
<image class="avatar" :src="oppositselect.anchorIcon" mode="scaleToFill" />
|
||
</view>
|
||
<view class="NameMoney">
|
||
<view class="TimeMoney">
|
||
<view class="NameMoney_Name-select">{{ oppositselect.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(oppositselect.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">{{ oppositselect.coin }}K</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="noselect" v-if="oppositselect == null"
|
||
>点击选择您要参与PK的对方主播</view
|
||
>
|
||
</view>
|
||
<view class="footervs">
|
||
<view class="footervs_left">V</view>
|
||
<view class="footervs_right">S</view>
|
||
</view>
|
||
<view class="oppositeAnchor" @click="showPopup(0)">
|
||
<view class="card" v-if="myselect != null">
|
||
<view class="card-select-select">
|
||
<view class="Avatarimg-select">
|
||
<image class="avatar" :src="myselect.anchorIcon" mode="scaleToFill" />
|
||
</view>
|
||
<view class="NameMoney">
|
||
<view class="TimeMoney">
|
||
<view class="NameMoney_Name-select">{{ myselect.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(myselect.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">{{ myselect.coin }}K</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="noselect" v-if="myselect == null">点击选择您要参与的主播</view>
|
||
</view>
|
||
<view class="Sendpkbtn" @click="sendMessage()"> 发送PK消息 </view>
|
||
</view>
|
||
<!-- 弹出框 -->
|
||
<uni-popup
|
||
class="popup"
|
||
ref="oppositepopup"
|
||
background-color="#fff"
|
||
@change="change"
|
||
border-radius="30px"
|
||
>
|
||
<view class="popup-content">
|
||
<view class="popup-title">{{
|
||
select == 1 ? "点击选择您要参与PK的对方主播" : "点击选择您要参与的主播"
|
||
}}</view>
|
||
<scroll-view
|
||
show-scrollbar="false"
|
||
scroll-y="true"
|
||
class="scroll"
|
||
v-if="list.length > 0"
|
||
>
|
||
<!-- -->
|
||
<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 class="nodata" v-if="list.length == 0">{{
|
||
select == 1 ? "对方还没有发布过pk" : "您还没有发布过pk"
|
||
}}</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="confirmpopup"
|
||
background-color="#fff"
|
||
@change="change"
|
||
border-radius="30px"
|
||
>
|
||
<view class="popup-content">
|
||
<view class="popup-title">提示</view>
|
||
<view class="popup-content-text">
|
||
<view class="popup-content-text-content">您确定要发送PK邀请消息吗？邀请成功后的pk不可修改，不可删除，请谨慎操作！</view>
|
||
</view>
|
||
<view class="popup-btn">
|
||
<button class="invite" type="primary" @click="send()">确定</button>
|
||
<button class="cancel" type="default" @click="confirmClose()">取消</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import request from "../../../../components/request.js";
|
||
import TimeFormatting from "../../../../components/TimeFormatting.js";
|
||
import { sendCustomMessage } from "../../../../components/goEasyTool/tool.js";
|
||
export default {
|
||
props: {
|
||
oppositeId: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
myId: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
nickname: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
avatar: {
|
||
type: String,
|
||
required: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
select: null, // 选择主播对象（1:对方主播，0：自己主播）
|
||
mylist: [], // 自己主播列表
|
||
oppositlist: [], // 对方主播列表
|
||
selectedId: null, // 选择的主播id
|
||
selectIndex: null, // 选择的主播索引
|
||
myselect: null, // 自己选择的主播对象
|
||
oppositselect: null, // 对方选择的主播对象
|
||
list: [], // 渲染的主播列表
|
||
};
|
||
},
|
||
created() {
|
||
this.getAnchorList(this.oppositeId);
|
||
this.getAnchorList(this.myId);
|
||
},
|
||
methods: {
|
||
//发送pk消息
|
||
send() {
|
||
request({
|
||
url: "pk/createPkRecord",
|
||
method: "POST",
|
||
data: {
|
||
pkIdA: this.oppositselect.id,
|
||
pkIdB: this.myselect.id,
|
||
userIdA: this.oppositeId,
|
||
userIdB: this.myId,
|
||
pkTime: this.oppositselect.pkTime,
|
||
pkNumber: this.oppositselect.pkNumber,
|
||
anchorIdA: this.oppositselect.anchorId,
|
||
anchorIdB: this.myselect.anchorId,
|
||
anchorIconA: this.oppositselect.anchorIcon,
|
||
anchorIconB: this.myselect.anchorIcon,
|
||
piIdA: this.oppositselect.id,
|
||
piIdB: this.myselect.id,
|
||
},
|
||
userInfo: true,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
const customData = {
|
||
id: res.data.id,
|
||
pkIdA: this.oppositselect.id,
|
||
pkIdB: this.myselect.id,
|
||
};
|
||
let order = {
|
||
customData: customData,
|
||
link: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pk.png",
|
||
text: "PK邀请消息",
|
||
};
|
||
let type = "pk";
|
||
sendCustomMessage(
|
||
this.$goeasy,
|
||
type,
|
||
this.oppositeId,
|
||
order,
|
||
this.avatar,
|
||
this.nickname
|
||
).then((res) => {
|
||
this.$emit("refreshMessage", { message: res });
|
||
});
|
||
this.$refs.confirmpopup.close();
|
||
this.$refs.oppositepopup.close();
|
||
this.myselect = null;
|
||
this.oppositselect = null;
|
||
uni.showToast({
|
||
title: "发送成功",
|
||
icon: "none",
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
confirmClose() {
|
||
this.$refs.confirmpopup.close();
|
||
},
|
||
//发送pk消息
|
||
sendMessage() {
|
||
if (this.myselect && this.oppositselect) {
|
||
this.$refs.confirmpopup.open("center");
|
||
} else {
|
||
uni.showToast({
|
||
title: "请选择相应的主播",
|
||
icon: "none",
|
||
});
|
||
}
|
||
},
|
||
//选中
|
||
Select(id, index) {
|
||
if (this.selectedId === id) {
|
||
this.selectedId = null;
|
||
this.selectIndex = null;
|
||
} else {
|
||
this.selectedId = this.selectedId === id ? null : id;
|
||
this.selectIndex = index;
|
||
}
|
||
},
|
||
//取消
|
||
close() {
|
||
this.$refs.oppositepopup.close();
|
||
},
|
||
//确定
|
||
invite() {
|
||
if (this.selectedId) {
|
||
if (this.select == 1) {
|
||
this.oppositselect = this.oppositlist[this.selectIndex];
|
||
this.selectedId = null;
|
||
this.selectIndex = null;
|
||
} else {
|
||
this.myselect = this.mylist[this.selectIndex];
|
||
this.selectedId = null;
|
||
this.selectIndex = null;
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: "请选择主播",
|
||
icon: "none",
|
||
});
|
||
}
|
||
this.$refs.oppositepopup.close();
|
||
},
|
||
TimeFormatting: TimeFormatting,
|
||
//获取主播列表
|
||
getAnchorList(id) {
|
||
request({
|
||
url: "pk/listUninvitedPublishedAnchorsByUserId",
|
||
method: "POST",
|
||
data: {
|
||
userId: id,
|
||
},
|
||
userInfo: false,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
if (id == this.myId) {
|
||
this.mylist = res.data;
|
||
console.log("mylist", this.mylist);
|
||
} else {
|
||
this.oppositlist = res.data;
|
||
console.log("oppositlist", this.oppositlist);
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
showPopup(select) {
|
||
if (select == 1) {
|
||
this.list = this.oppositlist;
|
||
} else {
|
||
this.list = this.mylist;
|
||
}
|
||
this.select = select;
|
||
this.$refs.oppositepopup.open("center");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.chat-more-message-invitation-title {
|
||
font-size: 60rpx;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
font-weight: bold;
|
||
margin-top: 70rpx;
|
||
letter-spacing: 5rpx;
|
||
font-style: italic;
|
||
background-image: linear-gradient(135deg, #4fcacd, #5fdbde); /* 渐变方向和颜色 */
|
||
-webkit-background-clip: text; /* Chrome/Safari */
|
||
background-clip: text; /* Firefox/Edge */
|
||
color: transparent; /* 文字本身透明，显示背景渐变 */
|
||
-webkit-text-fill-color: transparent; /* 兼容旧版 Webkit */
|
||
}
|
||
.chat-more-message-invitation {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
|
||
}
|
||
.oppositeAnchor {
|
||
width: 600rpx;
|
||
height: 150rpx;
|
||
background-color: rgb(255, 255, 255);
|
||
border-radius: 20rpx;
|
||
margin-top: 50rpx;
|
||
margin-bottom: 50rpx;
|
||
border: 2rpx solid #e4e4e4;
|
||
}
|
||
.footervs {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.footervs_left {
|
||
font-size: 50rpx;
|
||
color: #ff65e5;
|
||
font-weight: bold;
|
||
font-style: italic;
|
||
}
|
||
.footervs_right {
|
||
font-size: 50rpx;
|
||
color: #65e8ff;
|
||
font-weight: bold;
|
||
font-style: italic;
|
||
}
|
||
.popup-title {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
color: #000;
|
||
font-size: 40rpx;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
font-weight: bold;
|
||
margin-top: 10rpx;
|
||
}
|
||
.popup-content-text {
|
||
width: 600rpx;
|
||
height: 450rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.popup-content-text-content{
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
line-height: 70rpx;
|
||
}
|
||
.popup-content {
|
||
width: 700rpx;
|
||
height: 730rpx;
|
||
background-color: #fff;
|
||
border-radius: 30rpx;
|
||
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
|
||
background-position: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
/* card */
|
||
.scroll {
|
||
width: 600rpx;
|
||
height: 450rpx;
|
||
border-radius: 10px;
|
||
/* background-color: #f5f5f5; */
|
||
}
|
||
.scroll ::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
display: none;
|
||
}
|
||
.nodata {
|
||
width: 600rpx;
|
||
height: 450rpx;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
line-height: 450rpx;
|
||
font-size: 30rpx;
|
||
color: #999;
|
||
font-weight: bold;
|
||
}
|
||
.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;
|
||
}
|
||
.card-select-select {
|
||
width: 100%;
|
||
height: 150rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: rgb(127, 127, 127);
|
||
}
|
||
.card-select {
|
||
/* width: 445rpx; */
|
||
width: 100%;
|
||
height: 100%;
|
||
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;
|
||
}
|
||
.noselect {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
line-height: 150rpx;
|
||
font-size: 30rpx;
|
||
color: #999;
|
||
font-weight: bold;
|
||
}
|
||
.Avatarimg {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
background-color: #dddddd;
|
||
margin-right: 20rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
.Avatarimg-select {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
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; /* 显示省略号 */
|
||
}
|
||
.NameMoney_Name-select {
|
||
width: 500rpx;
|
||
text-align: left;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
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;
|
||
}
|
||
.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;
|
||
}
|
||
.Sendpkbtn {
|
||
width: 90%;
|
||
height: 100rpx;
|
||
margin-top: 50rpx;
|
||
background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
border-radius: 60rpx;
|
||
font-size: 35rpx;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
font-weight: bold;
|
||
letter-spacing: 6rpx;
|
||
}
|
||
</style>
|