web-fusion/src/components/pk-mini/chat/MiniPKMessage.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>