575 lines
14 KiB
Vue
575 lines
14 KiB
Vue
<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 ? t("man") : t("woman") }}
|
||
<!-- gj男/女 -->
|
||
</div>
|
||
<div class="Country">{{ ArticleDetailsA.country }}</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="time">
|
||
{{ t("PKTime") + TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
|
||
<!-- gjPK时间 -->
|
||
</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">
|
||
{{t('GoldCoin') }}
|
||
<!-- gj金币 -->
|
||
<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">
|
||
{{ t('session') }}
|
||
<!-- gj场次 -->
|
||
<div class="gold-num">{{ PkIDInfodata.pkNumber+t('match') }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="Remarks">{{ t('Note')+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 ? t("man") : t("woman")}}
|
||
<!-- gj男/女 -->
|
||
</div>
|
||
<div class="Country">{{ ArticleDetailsB.country }}</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="time">
|
||
{{ t("PKTime") + TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
|
||
<!-- gjPK时间 -->
|
||
</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">
|
||
{{t('GoldCoin') }}
|
||
<!-- gj金币 -->
|
||
<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">
|
||
{{ t('session') }}
|
||
<!-- gj场次 -->
|
||
<div class="gold-num">{{ PkIDInfodata.pkNumber+t('match') }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="Remarks">{{ t('Note')+ArticleDetailsB.remark }}</div>
|
||
<!-- gj备注 -->
|
||
</div>
|
||
<!-- btn -->
|
||
<div
|
||
class="btn"
|
||
v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId != info.id"
|
||
>
|
||
<div class="messagebtn-left" @click="agree()">{{ t('agree') }}</div>
|
||
<!-- gj同意 -->
|
||
<div class="messagebtn-right" @click="refuse()">{{ t('Refuse') }}</div>
|
||
<!-- gj拒绝 -->
|
||
</div>
|
||
<div v-if="PkIDInfodata.pkStatus === 1" class="messageHint">{{ t('HaveAgreedToTheInvitation') }}</div>
|
||
<!-- gj已同意 -->
|
||
<div v-if="PkIDInfodata.pkStatus === 2" class="messageHint">{{ t('HaveRefusedTheInvitation') }}</div>
|
||
<!-- gj已拒绝 -->
|
||
<div
|
||
v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId == info.id"
|
||
class="messageHint"
|
||
>
|
||
{{ t('WaitForTheOtherPartyResponse') }}
|
||
<!-- gj等待对方响应 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 弹窗 -->
|
||
<!-- 同意邀请提示 -->
|
||
<el-dialog v-model="agreedialog" center :title="t('Hint')" width="400" align-center>
|
||
<div class="dialog-content">
|
||
<div class="dialog-content-text">
|
||
<div>{{ t('AfterASuccessfulInvitationThePKCannotBeModifiedOrDeletedPleaseOperateWithCaution') }}</div>
|
||
<!-- gj邀请成功后，PK不可修改或删除，请谨慎操作 -->
|
||
</div>
|
||
<!-- -->
|
||
<div class="myanchor-dialog-btn">
|
||
<div class="remindermyAnchorDialogReset" @click="agreedialog = false">{{ t('Cancel') }}</div>
|
||
<!-- gj取消 -->
|
||
<div class="remindermyAnchorDialogConfirm" @click="agreedialogConfirm"> {{ t('Confirm') }}
|
||
<!-- gj确认 --></div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 拒绝邀请提示 -->
|
||
<el-dialog v-model="refusedialog" center :title="t('Hint')" width="400" align-center>
|
||
<!-- gj提示 -->
|
||
<div class="dialog-content">
|
||
<!-- -->
|
||
<div class="dialog-content-text">
|
||
<div> {{ t('AreYouSureYouWantToDeclineThisInvitation') }}
|
||
<!-- gj确定拒绝邀请？ --></div>
|
||
</div>
|
||
|
||
<div class="myanchor-dialog-btn">
|
||
<div class="remindermyAnchorDialogReset" @click="refusedialog = false">{{ t('Cancel') }}</div>
|
||
<!-- gj取消 -->
|
||
<div class="remindermyAnchorDialogConfirm" @click="refusedialogConfirm"> {{ t('Confirm') }}</div>
|
||
<!-- gj确认 -->
|
||
</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";
|
||
//
|
||
import { useI18n } from "vue-i18n";
|
||
const { t } = useI18n();
|
||
window["$t"] = t;
|
||
//
|
||
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(t('AgreeToSuccess'));
|
||
//gj同意成功
|
||
PkIDInfodata.value.pkStatus = 1;
|
||
agreedialog.value = false;
|
||
})
|
||
.catch((err) => {});
|
||
}
|
||
|
||
//确认拒绝
|
||
function refusedialogConfirm() {
|
||
updatePkRecordStatus({
|
||
id: newValitem.value.payload.customData.id,
|
||
pkStatus: 2,
|
||
})
|
||
.then(() => {
|
||
ElMessage.success(t('RefuseSuccess'));
|
||
//gj拒绝成功
|
||
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>
|
||
.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: 14px;
|
||
}
|
||
.gold-num {
|
||
font-size: 14px;
|
||
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>
|