pxl/tk-mini-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
pengxiaolong
2025-07-21 22:10:59 +08:00
parent 31527ba8a6
commit 7116e57fc3
157 changed files with 2793 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

633
pages/index/chat/moreMessageComponents/InvitationComponents.vue
View File

@@ -1,29 +1,622 @@
<template>
<view class="chat-more-message-invitation">
<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>
export default {
data() {
return {
}
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,
},
onLoad() {
// 页面加载时执行
},
methods: {
// 方法定义
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 {
width: 100%;
height: 100%;
border-radius: 40rpx;
}
</style>
<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>