优化代码
This commit is contained in:
pengxiaolong
533
src/components/chatMessage/miniPKMessage.vue
Normal file
533
src/components/chatMessage/miniPKMessage.vue
Normal file
@@ -0,0 +1,533 @@
|
||||
<template>
|
||||
<div class="chat-message-mini-pk">
|
||||
<!-- 用户A -->
|
||||
<div class="userA">
|
||||
<!-- -->
|
||||
<div class="Avatar">
|
||||
<img class="AvatarImg" :src="ArticleDetailsA.anchorIcon" alt="" />
|
||||
<div class="name">{{ ArticleDetailsA.anchorId }}</div>
|
||||
</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 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>
|
||||
<!-- vs -->
|
||||
<div class="messageVS">
|
||||
<img class="messageVS-img" src="../../assets/messageVS.png" alt="" />
|
||||
</div>
|
||||
<!-- 用户B -->
|
||||
<div class="userB">
|
||||
<!-- -->
|
||||
<div class="Avatar">
|
||||
<img class="AvatarImg" :src="ArticleDetailsB.anchorIcon" alt="" />
|
||||
<div class="name">{{ ArticleDetailsB.anchorId }}</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="genderAndCountry">
|
||||
<div
|
||||
class="gender"
|
||||
:style="{
|
||||
background: ArticleDetailsB.sex == 1 ? '#59D8DB' : '#F3876F',
|
||||
}"
|
||||
>
|
||||
{{ ArticleDetailsB.sex == 1 ? "男" : "女" }}
|
||||
</div>
|
||||
<div class="Country">{{ ArticleDetailsB.country }}</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="time">
|
||||
PK时间(本地时间):{{ TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
|
||||
</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>
|
||||
<!-- btn -->
|
||||
<div class="btn" 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>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<!-- 同意邀请提示 -->
|
||||
<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;
|
||||
});
|
||||
}
|
||||
|
||||
//确认拒绝
|
||||
function refusedialogConfirm() {
|
||||
updatePkRecordStatus({
|
||||
id: newValitem.value.payload.customData.id,
|
||||
pkStatus: 2,
|
||||
}).then(() => {
|
||||
ElMessage.success("拒绝成功");
|
||||
PkIDInfodata.value.pkStatus = 2;
|
||||
refusedialog.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
//同意邀请
|
||||
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);
|
||||
});
|
||||
pkArticleDetail({
|
||||
id: newVal.payload.customData.pkIdA,
|
||||
userId: info.value.id,
|
||||
from: 2,
|
||||
}).then((res) => {
|
||||
ArticleDetailsA.value = res;
|
||||
console.log("ArticleDetailsA", res);
|
||||
});
|
||||
pkArticleDetail({
|
||||
id: newVal.payload.customData.pkIdB,
|
||||
userId: info.value.id,
|
||||
from: 2,
|
||||
}).then((res) => {
|
||||
ArticleDetailsB.value = res;
|
||||
console.log("ArticleDetailsB", res);
|
||||
});
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
getPromiseStorage("user").then((res) => {
|
||||
info.value = res;
|
||||
});
|
||||
});
|
||||
onUpdated(() => {
|
||||
// 组件更新后执行
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// 组件销毁前执行
|
||||
});
|
||||
const refname = ref("");
|
||||
watch(refname, async (newQuestion, oldQuestion) => {
|
||||
// 变化后执行
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-message-mini-pk {
|
||||
width: 325px;
|
||||
height: 820px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.messageVS {
|
||||
width: 67px;
|
||||
height: 67px;
|
||||
margin-top: -33.5px;
|
||||
margin-bottom: -33.5px;
|
||||
z-index: 2;
|
||||
}
|
||||
.messageVS-img {
|
||||
width: 67px;
|
||||
height: 67px;
|
||||
}
|
||||
.userA {
|
||||
width: 90%;
|
||||
height: 335px;
|
||||
background-color: #c0e8e8;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.Avatar {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.AvatarImg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.name {
|
||||
width: calc(100% - 60px);
|
||||
margin-left: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.genderAndCountry {
|
||||
width: 90%;
|
||||
height: 30px;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.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 {
|
||||
width: 90%;
|
||||
height: 20px;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
.PKinformation {
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.gold {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.gold-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.sessions-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
.gold-num {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.Remarks {
|
||||
width: 90%;
|
||||
height: 90px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.sessions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.sessions-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.userB {
|
||||
width: 90%;
|
||||
height: 315px;
|
||||
background-color: #f8e4e0;
|
||||
border-bottom-left-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.btn {
|
||||
margin-top: 20px;
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.messageHint {
|
||||
margin-top: 20px;
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
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;
|
||||
}
|
||||
/* 弹窗 */
|
||||
.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>
|
||||
Reference in New Issue
Block a user