589 lines
14 KiB
Vue
589 lines
14 KiB
Vue
<template>
|
||
<div class="pk-message">
|
||
<div class="pk-message-left">
|
||
<div class="left-content">
|
||
<div class="AvatarandName">
|
||
<div class="Avatar">
|
||
<img class="AvatarImg" :src="ArticleDetailsA.anchorIcon" alt="" />
|
||
</div>
|
||
<div class="information">
|
||
<div class="name">{{ ArticleDetailsA.anchorId }}</div>
|
||
|
||
<div class="genderAndCountry">
|
||
<div
|
||
class="gender"
|
||
:style="{
|
||
background: ArticleDetailsA.sex == 1 ? '#59D8DB' : '#F3876F',
|
||
}"
|
||
>
|
||
{{ ArticleDetailsA.sex == 1 ? "男" : "女" }}
|
||
</div>
|
||
<div class="Country">{{ ArticleDetailsA.country }}</div>
|
||
</div>
|
||
<div class="time">
|
||
PK时间(本地时间):{{ TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="PKinformation">
|
||
<div class="gold">
|
||
<img
|
||
class="gold-img"
|
||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
|
||
alt=""
|
||
/>
|
||
<div class="sessions-content">
|
||
金币：
|
||
<div class="gold-num">{{ ArticleDetailsA.coin }}K</div>
|
||
</div>
|
||
</div>
|
||
<div class="sessions">
|
||
<img
|
||
class="sessions-img"
|
||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
|
||
alt=""
|
||
/>
|
||
<div class="sessions-content">
|
||
场次：
|
||
<div class="gold-num">{{ PkIDInfodata.pkNumber }}场</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="Remarks">备注：{{ ArticleDetailsA.remark }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="pk-message-center">
|
||
<img class="messageVS" src="../../assets/messageVS.png" alt="" />
|
||
<div
|
||
class="messagebtn"
|
||
v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId != info.id"
|
||
>
|
||
<div class="messagebtn-left" @click="agree()">同意</div>
|
||
<div class="messagebtn-right" @click="refuse()">拒绝</div>
|
||
</div>
|
||
|
||
<div v-if="PkIDInfodata.pkStatus === 1" class="messageHint">已同意邀请</div>
|
||
|
||
<div v-if="PkIDInfodata.pkStatus === 2" class="messageHint">已拒绝邀请</div>
|
||
|
||
<div
|
||
v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId == info.id"
|
||
class="messageHint"
|
||
>
|
||
等待对方回应（如果已经回应请刷新页面）
|
||
</div>
|
||
</div>
|
||
<div class="pk-message-right">
|
||
<div class="right-content">
|
||
<div class="AvatarandName">
|
||
<div class="informationright">
|
||
<div class="nameright">{{ ArticleDetailsB.anchorId }}</div>
|
||
<div class="genderAndCountry">
|
||
<div class="Country">{{ ArticleDetailsB.country }}</div>
|
||
<div
|
||
class="gender"
|
||
:style="{
|
||
background: ArticleDetailsB.sex == 1 ? '#59D8DB' : '#F3876F',
|
||
}"
|
||
>
|
||
{{ ArticleDetailsB.sex == 1 ? "男" : "女" }}
|
||
</div>
|
||
</div>
|
||
<div class="time">
|
||
PK时间(本地时间):{{ TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
|
||
</div>
|
||
</div>
|
||
<div class="Avatar">
|
||
<img class="AvatarImg" :src="ArticleDetailsB.anchorIcon" alt="" />
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="PKinformation">
|
||
<div class="gold">
|
||
<img
|
||
class="gold-img"
|
||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
|
||
alt=""
|
||
/>
|
||
<div class="sessions-content">
|
||
金币：
|
||
<div class="gold-num">{{ ArticleDetailsB.coin }}K</div>
|
||
</div>
|
||
</div>
|
||
<div class="sessions">
|
||
<img
|
||
class="sessions-img"
|
||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
|
||
alt=""
|
||
/>
|
||
<div class="sessions-content">
|
||
场次：
|
||
<div class="gold-num">{{ PkIDInfodata.pkNumber }}场</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="Remarks">备注：{{ ArticleDetailsB.remark }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 同意邀请提示 -->
|
||
<el-dialog v-model="agreedialog" center title="提示" width="400" align-center>
|
||
<div class="dialog-content">
|
||
<div class="dialog-content-text">
|
||
<div>
|
||
邀请成功后的pk不可修改，不可删除，请谨慎操作！
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="myanchor-dialog-btn">
|
||
<div class="remindermyAnchorDialogReset" @click="agreedialog = false">取消</div>
|
||
<div class="remindermyAnchorDialogConfirm" @click="agreedialogConfirm">
|
||
确认
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 拒绝邀请提示 -->
|
||
<el-dialog v-model="refusedialog" center title="提示" width="400" align-center>
|
||
<div class="dialog-content">
|
||
<!-- -->
|
||
<div class="dialog-content-text">
|
||
<div>
|
||
您确定要拒绝该邀请吗？
|
||
</div>
|
||
</div>
|
||
|
||
<div class="myanchor-dialog-btn">
|
||
<div class="remindermyAnchorDialogReset" @click="refusedialog = false">取消</div>
|
||
<div class="remindermyAnchorDialogConfirm" @click="refusedialogConfirm">
|
||
确认
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref, // 响应式基础
|
||
watch, // 侦听器
|
||
onMounted, // 组件挂载完成后执行
|
||
onUpdated, // 组件更新后执行
|
||
onUnmounted, // 组件销毁前执行
|
||
} from "vue";
|
||
import { queryPkRecord, pkArticleDetail,updatePkRecordStatus} from "@/api/account";
|
||
import {
|
||
setStorage,
|
||
getStorage,
|
||
getPromiseStorage,
|
||
clearStorage,
|
||
} from "@/utils/storage.js";
|
||
import { TimestamptolocalTime } from "@/utils/timeConversion.js";
|
||
import { ElMessage } from "element-plus";
|
||
const props = defineProps({
|
||
item: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
});
|
||
const info = ref({}); // 用户信息
|
||
const PkIDInfodata = ref({}); //pk信息
|
||
const ArticleDetailsA = ref({}); //pK文章详情A
|
||
const ArticleDetailsB = ref({}); //pk文章详情B
|
||
const agreedialog = ref(false); //同意邀请提示
|
||
const refusedialog = ref(false); //拒绝邀请提示
|
||
const newValitem = ref({});
|
||
|
||
|
||
//确认同意
|
||
function agreedialogConfirm(){
|
||
updatePkRecordStatus({
|
||
id: newValitem.value.payload.customData.id,
|
||
pkStatus: 1,
|
||
}).then(() => {
|
||
ElMessage.success("同意成功");
|
||
PkIDInfodata.value.pkStatus = 1;
|
||
agreedialog.value = false
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
//确认拒绝
|
||
function refusedialogConfirm(){
|
||
updatePkRecordStatus({
|
||
id: newValitem.value.payload.customData.id,
|
||
pkStatus: 2,
|
||
}).then(() => {
|
||
ElMessage.success("拒绝成功");
|
||
PkIDInfodata.value.pkStatus = 2;
|
||
refusedialog.value = false
|
||
}).catch((err) => {});
|
||
}
|
||
|
||
//同意邀请
|
||
const agree = () => {
|
||
agreedialog.value = true;
|
||
};
|
||
//拒绝邀请
|
||
const refuse = () => {
|
||
refusedialog.value = true;
|
||
};
|
||
|
||
//监听props传值
|
||
watch(
|
||
() => props.item,
|
||
(newVal) => {
|
||
console.log(newVal);// 用户可以替换为自己的方法
|
||
newValitem.value = newVal
|
||
queryPkRecord({
|
||
id: newVal.payload.customData.id,
|
||
}).then((res) => {
|
||
PkIDInfodata.value = res;
|
||
console.log("PkIDInfodata", res);
|
||
}).catch((err) => {});
|
||
pkArticleDetail({
|
||
id: newVal.payload.customData.pkIdA,
|
||
userId: info.value.id,
|
||
from: 2,
|
||
}).then((res) => {
|
||
ArticleDetailsA.value = res;
|
||
console.log("ArticleDetailsA", res);
|
||
}).catch((err) => {});
|
||
pkArticleDetail({
|
||
id: newVal.payload.customData.pkIdB,
|
||
userId: info.value.id,
|
||
from: 2,
|
||
}).then((res) => {
|
||
ArticleDetailsB.value = res;
|
||
console.log("ArticleDetailsB", res);
|
||
}).catch((err) => {});
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
|
||
onMounted(() => {
|
||
getPromiseStorage("user").then((res) => {
|
||
info.value = res;
|
||
}).catch((err) => {});
|
||
});
|
||
onUpdated(() => {
|
||
// 组件更新后执行
|
||
});
|
||
onUnmounted(() => {
|
||
// 组件销毁前执行
|
||
});
|
||
const refname = ref("");
|
||
watch(refname, async (newQuestion, oldQuestion) => {
|
||
// 变化后执行
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.pk-message {
|
||
width: 1100px;
|
||
height: 273px;
|
||
border-radius: 16px;
|
||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.pk-message-left {
|
||
width: 50%;
|
||
height: 100%;
|
||
background-image: url("../../assets/pkMessageleft.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
.pk-message-center {
|
||
width: 300px;
|
||
height: 100%;
|
||
margin-left: -150px;
|
||
margin-right: -150px;
|
||
z-index: 2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.messageVS {
|
||
width: 67px;
|
||
height: 67px;
|
||
}
|
||
.messagebtn {
|
||
width: 100%;
|
||
height: 50px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.messageHint {
|
||
width: 100%;
|
||
height: 50px;
|
||
color: #999;
|
||
font-size: 20px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
font-weight: bold;
|
||
}
|
||
.messagebtn-left {
|
||
width: 100px;
|
||
height: 50px;
|
||
background-color: #f0836c;
|
||
border-radius: 10px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
transition: all 0.4s ease;
|
||
}
|
||
.messagebtn-left:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
|
||
}
|
||
.messagebtn-left:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
.messagebtn-right {
|
||
width: 100px;
|
||
height: 50px;
|
||
background-color: #4fcacd;
|
||
border-radius: 10px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
transition: all 0.4s ease;
|
||
}
|
||
.messagebtn-right:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
|
||
}
|
||
.messagebtn-right:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
.pk-message-right {
|
||
width: 50%;
|
||
height: 100%;
|
||
background-image: url("../../assets/pkMessageright.png");
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
justify-content: end;
|
||
}
|
||
/* */
|
||
.left-content {
|
||
width: 470px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.right-content {
|
||
width: 470px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.AvatarandName {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
}
|
||
.Avatar {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
background-color: #dadada;
|
||
}
|
||
.AvatarImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
.information {
|
||
width: 350px;
|
||
height: 100px;
|
||
}
|
||
.informationright {
|
||
width: 350px;
|
||
height: 100px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: end;
|
||
}
|
||
.name {
|
||
width: 100%;
|
||
height: 25px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
white-space: nowrap; /* 防止换行 */
|
||
overflow: hidden; /* 隐藏溢出内容 */
|
||
text-overflow: ellipsis;
|
||
}
|
||
.nameright {
|
||
width: 100%;
|
||
height: 25px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: end;
|
||
white-space: nowrap; /* 防止换行 */
|
||
overflow: hidden; /* 隐藏溢出内容 */
|
||
text-overflow: ellipsis;
|
||
}
|
||
.genderAndCountry {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
}
|
||
.gender {
|
||
font-size: 14px;
|
||
padding: 5px 20px 5px 20px;
|
||
background-color: #999;
|
||
border-radius: 20px;
|
||
color: #fff;
|
||
}
|
||
.Country {
|
||
font-size: 14px;
|
||
padding: 5px 20px 5px 20px;
|
||
background-color: #e4f9f9;
|
||
border-radius: 20px;
|
||
color: #03aba8;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
.time {
|
||
margin-top: 10px;
|
||
font-size: 18px;
|
||
color: #999;
|
||
}
|
||
.PKinformation {
|
||
width: 70%;
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
.gold {
|
||
display: flex;
|
||
}
|
||
.gold-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.sessions {
|
||
margin-left: 10px;
|
||
display: flex;
|
||
}
|
||
.sessions-img {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
.sessions-content {
|
||
font-size: 20px;
|
||
color: #999;
|
||
display: flex;
|
||
}
|
||
.gold-num {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-left: 5px;
|
||
}
|
||
.Remarks {
|
||
width: 70%;
|
||
font-size: 18px;
|
||
color: #999;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.dialog-content {
|
||
width: 100%;
|
||
height: 300px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.dialog-content-text{
|
||
width: 90%;
|
||
height: 200px;
|
||
background-color: #C0E8E8;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #03aba8;
|
||
border: 1px solid #03aba8;
|
||
}
|
||
.myanchor-dialog-btn {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
margin-top: 20px;
|
||
}
|
||
.remindermyAnchorDialogReset {
|
||
width: 150px;
|
||
height: 40px;
|
||
margin-top: 30px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
background: linear-gradient(0deg, #e4ffff, #ffffff);
|
||
color: #03aba8;
|
||
font-size: 18px;
|
||
transition: all 0.4s ease;
|
||
border-radius: 100px;
|
||
border: 1px solid #4fcacd;
|
||
}
|
||
.remindermyAnchorDialogReset:hover {
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.1);
|
||
opacity: 0.8;
|
||
}
|
||
.remindermyAnchorDialogReset:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
|
||
.remindermyAnchorDialogConfirm {
|
||
width: 150px;
|
||
height: 40px;
|
||
margin-top: 30px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
background: linear-gradient(0deg, #4fcacd, #5fdbde);
|
||
color: #ffffff;
|
||
font-size: 18px;
|
||
transition: all 0.4s ease;
|
||
border-radius: 100px;
|
||
}
|
||
.remindermyAnchorDialogConfirm:hover {
|
||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||
transform: scale(1.1);
|
||
opacity: 0.8;
|
||
}
|
||
.remindermyAnchorDialogConfirm:active {
|
||
transition: all 0.1s ease;
|
||
transform: scale(0.95) !important;
|
||
}
|
||
</style>
|