435 lines
11 KiB
Vue
435 lines
11 KiB
Vue
<template>
|
||
<div class="chat-message-mini-pk" :class="{ compact: compact }">
|
||
<!-- 卡片区域（相对定位容器，VS 绝对叠在中间） -->
|
||
<div class="pk-cards">
|
||
<!-- 用户A -->
|
||
<div class="userA">
|
||
<div class="genderAndCountry">
|
||
<div class="gender" :style="{ background: ArticleDetailsA.sex == 1 ? '#59D8DB' : '#F3876F' }">
|
||
{{ ArticleDetailsA.sex == 1 ? $t('pkMini.man') : $t('pkMini.woman') }}
|
||
</div>
|
||
<div class="Country">{{ ArticleDetailsA.country }}</div>
|
||
</div>
|
||
<div class="time">
|
||
{{ $t('pkMini.PKTime') + 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">
|
||
{{ $t('pkMini.GoldCoin') }}
|
||
<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('pkMini.session') }}
|
||
<div class="gold-num">{{ PkIDInfodata.pkNumber + $t('pkMini.match') }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="Remarks">{{ $t('pkMini.Note') + ArticleDetailsA.remark }}</div>
|
||
</div>
|
||
|
||
<!-- VS 叠在两卡片中间缝 -->
|
||
<div class="messageVS">
|
||
<img class="messageVS-img" src="@/assets/pk-mini/messageVS.png" alt="" />
|
||
</div>
|
||
|
||
<!-- 用户B -->
|
||
<div class="userB">
|
||
<div class="genderAndCountry">
|
||
<div class="gender" :style="{ background: ArticleDetailsB.sex == 1 ? '#59D8DB' : '#F3876F' }">
|
||
{{ ArticleDetailsB.sex == 1 ? $t('pkMini.man') : $t('pkMini.woman') }}
|
||
</div>
|
||
<div class="Country">{{ ArticleDetailsB.country }}</div>
|
||
</div>
|
||
<div class="time">
|
||
{{ $t('pkMini.PKTime') + 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">
|
||
{{ $t('pkMini.GoldCoin') }}
|
||
<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('pkMini.session') }}
|
||
<div class="gold-num">{{ PkIDInfodata.pkNumber + $t('pkMini.match') }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="Remarks">{{ $t('pkMini.Note') + ArticleDetailsB.remark }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 按钮 -->
|
||
<div class="btn" v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId != info.id">
|
||
<div class="messagebtn-left" @click="agree()">{{ $t('pkMini.agree') }}</div>
|
||
<div class="messagebtn-right" @click="refuse()">{{ $t('pkMini.Refuse') }}</div>
|
||
</div>
|
||
<div v-if="PkIDInfodata.pkStatus === 1" class="messageHint">{{ $t('pkMini.HaveAgreedToTheInvitation') }}</div>
|
||
<div v-if="PkIDInfodata.pkStatus === 2" class="messageHint">{{ $t('pkMini.HaveRefusedTheInvitation') }}</div>
|
||
<div v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId == info.id" class="messageHint">
|
||
{{ $t('pkMini.WaitForTheOtherPartyResponse') }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 同意邀请提示弹窗 -->
|
||
<el-dialog v-model="agreedialog" center :title="$t('pkMini.Hint')" width="400" align-center>
|
||
<div class="dialog-content">
|
||
<div class="dialog-content-text">
|
||
<div>{{ $t('pkMini.AfterASuccessfulInvitationThePKCannotBeModifiedOrDeletedPleaseOperateWithCaution') }}</div>
|
||
</div>
|
||
<div class="myanchor-dialog-btn">
|
||
<div class="remindermyAnchorDialogReset" @click="agreedialog = false">{{ $t('pkMini.Cancel') }}</div>
|
||
<div class="remindermyAnchorDialogConfirm" @click="agreedialogConfirm">{{ $t('pkMini.Confirm') }}</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 拒绝邀请提示弹窗 -->
|
||
<el-dialog v-model="refusedialog" center :title="$t('pkMini.Hint')" width="400" align-center>
|
||
<div class="dialog-content">
|
||
<div class="dialog-content-text">
|
||
<div>{{ $t('pkMini.AreYouSureYouWantToDeclineThisInvitation') }}</div>
|
||
</div>
|
||
<div class="myanchor-dialog-btn">
|
||
<div class="remindermyAnchorDialogReset" @click="refusedialog = false">{{ $t('pkMini.Cancel') }}</div>
|
||
<div class="remindermyAnchorDialogConfirm" @click="refusedialogConfirm">{{ $t('pkMini.Confirm') }}</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, onMounted } from 'vue'
|
||
import { queryPkRecord, pkArticleDetail, updatePkRecordStatus } from '@/api/pk-mini'
|
||
import { getPromiseStorage } from '@/utils/pk-mini/storage'
|
||
import { TimestamptolocalTime } from '@/utils/pk-mini/timeConversion'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const props = defineProps({
|
||
item: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
compact: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
const info = ref({})
|
||
const PkIDInfodata = ref({})
|
||
const ArticleDetailsA = ref({})
|
||
const ArticleDetailsB = ref({})
|
||
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(() => {})
|
||
}
|
||
|
||
function refusedialogConfirm() {
|
||
updatePkRecordStatus({
|
||
id: newValitem.value.payload.customData.id,
|
||
pkStatus: 2
|
||
}).then(() => {
|
||
ElMessage.success('拒绝成功')
|
||
PkIDInfodata.value.pkStatus = 2
|
||
refusedialog.value = false
|
||
}).catch(() => {})
|
||
}
|
||
|
||
function agree() {
|
||
agreedialog.value = true
|
||
}
|
||
|
||
function refuse() {
|
||
refusedialog.value = true
|
||
}
|
||
|
||
watch(() => props.item, (newVal) => {
|
||
newValitem.value = newVal
|
||
queryPkRecord({ id: newVal.payload.customData.id }).then((res) => {
|
||
PkIDInfodata.value = res
|
||
}).catch(() => {})
|
||
|
||
pkArticleDetail({
|
||
id: newVal.payload.customData.pkIdA,
|
||
userId: info.value.id,
|
||
from: 2
|
||
}).then((res) => {
|
||
ArticleDetailsA.value = res
|
||
}).catch(() => {})
|
||
|
||
pkArticleDetail({
|
||
id: newVal.payload.customData.pkIdB,
|
||
userId: info.value.id,
|
||
from: 2
|
||
}).then((res) => {
|
||
ArticleDetailsB.value = res
|
||
}).catch(() => {})
|
||
}, { immediate: true })
|
||
|
||
onMounted(() => {
|
||
getPromiseStorage('user').then((res) => {
|
||
info.value = res
|
||
}).catch(() => {})
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.chat-message-mini-pk {
|
||
width: 560px;
|
||
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);
|
||
padding: 15px 0;
|
||
}
|
||
.pk-cards {
|
||
position: relative;
|
||
width: 90%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.messageVS {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 67px;
|
||
height: 67px;
|
||
z-index: 2;
|
||
pointer-events: none;
|
||
}
|
||
.messageVS-img {
|
||
width: 67px;
|
||
height: 67px;
|
||
}
|
||
.userA {
|
||
width: 100%;
|
||
background-color: #c0e8e8;
|
||
border-radius: 20px 20px 0 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-bottom: 15px;
|
||
}
|
||
.genderAndCountry {
|
||
width: 90%;
|
||
height: 30px;
|
||
margin-top: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.gender {
|
||
font-size: 14px;
|
||
padding: 5px 20px;
|
||
background-color: #999;
|
||
border-radius: 20px;
|
||
color: #fff;
|
||
}
|
||
.Country {
|
||
font-size: 14px;
|
||
padding: 5px 20px;
|
||
background-color: #e4f9f9;
|
||
border-radius: 20px;
|
||
color: #03aba8;
|
||
margin-left: 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, .sessions {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.gold-img, .sessions-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;
|
||
}
|
||
.userB {
|
||
width: 100%;
|
||
background-color: #f8e4e0;
|
||
border-radius: 0 0 20px 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-bottom: 15px;
|
||
}
|
||
.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;
|
||
cursor: pointer;
|
||
transition: all 0.4s ease;
|
||
}
|
||
.messagebtn-left:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
|
||
}
|
||
.messagebtn-right {
|
||
width: 100px;
|
||
height: 50px;
|
||
background-color: #4fcacd;
|
||
border-radius: 10px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
cursor: pointer;
|
||
transition: all 0.4s ease;
|
||
}
|
||
.messagebtn-right:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
|
||
}
|
||
.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;
|
||
border-radius: 100px;
|
||
border: 1px solid #4fcacd;
|
||
cursor: pointer;
|
||
}
|
||
.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;
|
||
border-radius: 100px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 紧凑模式：适配 PK 大厅 350px 窄聊天框 */
|
||
.compact.chat-message-mini-pk {
|
||
width: 300px;
|
||
padding: 10px 0;
|
||
}
|
||
.compact .pk-cards {
|
||
width: 92%;
|
||
}
|
||
.compact .userA {
|
||
border-radius: 12px 12px 0 0;
|
||
padding-bottom: 10px;
|
||
}
|
||
.compact .userB {
|
||
border-radius: 0 0 12px 12px;
|
||
padding-bottom: 10px;
|
||
}
|
||
.compact .messageVS {
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
.compact .messageVS-img {
|
||
width: 44px;
|
||
height: 44px;
|
||
}
|
||
</style>
|