融合PK头像头像功能

src/components/pk-mini/mine/PKmessage.vue

@@ -0,0 +1,883 @@
+<template>
+  <!-- PK信息 -->
+  <div class="pk-message">
+    <el-splitter>
+      <el-splitter-panel :size="70" :min="50">
+        <div class="demo-panel">
+          <!-- PK信息列表 -->
+          <div class="pk-list" v-infinite-scroll="loadMore" v-if="list.length > 0">
+            <div class="pk-card" v-for="(item, index) in list" :key="index">
+              <div class="card-content">
+                <div class="card-avatar">
+                  <img :src="item.anchorIcon" alt="" />
+                </div>
+                <div class="personal-info">
+                  <div class="name">{{ item.anchorId }}</div>
+                  <div class="info-row">
+                    <div class="gender" :class="item.sex == 1 ? 'male' : 'female'">
+                      {{ item.sex == 1 ? '男' : '女' }}
+                    </div>
+                    <div class="country">{{ item.country }}</div>
+                    <div class="stat-item">
+                      <img class="stat-icon" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png" alt="" />
+                      <span>金币: <b>{{ item.coin }}K</b></span>
+                    </div>
+                    <div class="stat-item">
+                      <img class="stat-icon" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png" alt="" />
+                      <span>场次: <b>{{ item.pkNumber }}场</b></span>
+                    </div>
+                  </div>
+                  <div class="pk-time">PK时间（本地时间）: {{ formatTime(item.pkTime * 1000) }}</div>
+                </div>
+                <div class="card-actions">
+                  <div class="action-btn" @click="handleTop(item)">
+                    <img v-if="!item.isPin" :src="iconTopPosition" alt="置顶" />
+                    <img v-else :src="iconUnpinned" alt="取消置顶" />
+                  </div>
+                  <div class="action-btn" @click="handleEdit(item)">
+                    <img :src="iconEditor" alt="编辑" />
+                  </div>
+                  <div class="action-btn" @click="handleDelete(item)">
+                    <img :src="iconDelete" alt="删除" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="empty-tip" v-else>您还没有PK信息，快去添加吧！</div>
+        </div>
+      </el-splitter-panel>
+
+      <!-- 右侧发布新PK表单 -->
+      <el-splitter-panel :size="25" :resizable="false">
+        <div class="form-panel">
+          <div class="form-title">
+            <img class="title-icon" :src="iconEmbellish" alt="" />
+            <span>{{ isEditing ? '修改PK信息' : '发布新PK' }}</span>
+            <img class="title-icon" :src="iconEmbellish" alt="" />
+          </div>
+
+          <div class="form-content">
+            <!-- 主播名称 -->
+            <div class="form-row">
+              <el-input v-model="formData.anchorName" placeholder="请输入主播名称" @blur="handleAnchorBlur" />
+              <div class="select-anchor-btn" @click="showAnchorDialog = true">选择我的主播</div>
+            </div>
+
+            <!-- 国家 -->
+            <div class="form-row">
+              <el-select-v2
+                v-model="formData.country"
+                :options="countryOptions"
+                placeholder="请选择国家"
+                filterable
+                style="width: 100%"
+              />
+            </div>
+
+            <!-- 性别 -->
+            <div class="form-row">
+              <el-select-v2
+                v-model="formData.gender"
+                :options="genderOptions"
+                placeholder="请选择性别"
+                style="width: 100%"
+              />
+            </div>
+
+            <!-- PK时间 -->
+            <div class="form-row">
+              <el-date-picker
+                v-model="formData.pkTime"
+                type="datetime"
+                placeholder="请选择PK时间"
+                style="width: 100%"
+                format="YYYY/MM/DD HH:mm"
+                value-format="x"
+              />
+            </div>
+
+            <!-- 金币和场次 -->
+            <div class="form-row two-col">
+              <div class="col">
+                <div class="label">金币数（单位为K）</div>
+                <el-input-number v-model="formData.coin" :min="0" controls-position="right" />
+              </div>
+              <div class="col">
+                <div class="label">场次</div>
+                <el-input-number v-model="formData.pkNumber" :min="1" controls-position="right" />
+              </div>
+            </div>
+
+            <!-- 备注 -->
+            <div class="form-row">
+              <textarea v-model="formData.remark" placeholder="请输入备注（选填）" maxlength="50"></textarea>
+            </div>
+
+            <!-- 按钮 -->
+            <div class="confirm-btn" @click="handleSubmit">确认</div>
+            <div class="reset-btn" @click="handleReset">重置</div>
+            <div class="reset-btn" v-if="isEditing" @click="handleCancel">取消</div>
+          </div>
+        </div>
+      </el-splitter-panel>
+    </el-splitter>
+
+    <!-- 删除确认弹窗 -->
+    <el-dialog v-model="showDeleteDialog" title="提示" width="300" align-center>
+      <span>确认删除该主播的PK信息？</span>
+      <template #footer>
+        <el-button @click="showDeleteDialog = false">取消</el-button>
+        <el-button type="primary" @click="confirmDelete">确认</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 选择主播弹窗 -->
+    <el-dialog v-model="showAnchorDialog" title="选择我的主播" width="800" align-center>
+      <div class="anchor-dialog-content">
+        <div class="anchor-list">
+          <div
+            v-for="(item, index) in anchorLibrary"
+            :key="index"
+            class="anchor-item"
+            :class="{ selected: selectedAnchor === item }"
+            @click="selectedAnchor = item"
+          >
+            <img class="anchor-avatar" :src="item.headerIcon" alt="" />
+            <div class="anchor-info">
+              <div class="anchor-name">{{ item.anchorId }}</div>
+              <div class="anchor-meta">
+                <span class="gender" :class="item.gender == 1 ? 'male' : 'female'">
+                  {{ item.gender == 1 ? '男' : '女' }}
+                </span>
+                <span class="country">{{ item.country }}</span>
+              </div>
+            </div>
+          </div>
+          <div v-if="anchorLibrary.length === 0" class="empty-anchor">暂无主播</div>
+        </div>
+        <div class="dialog-btns">
+          <div class="reset-btn" @click="showAnchorDialog = false">取消</div>
+          <div class="confirm-btn" @click="confirmSelectAnchor">确认</div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 置顶弹窗 -->
+    <el-dialog v-model="showTopDialog" title="置顶" width="500" align-center>
+      <div class="top-dialog-content">
+        <p class="top-tip">置顶后，您的PK信息将在首页优先展示，可以获得更多曝光机会。</p>
+        <el-select-v2
+          v-model="topDuration"
+          :options="topDurationOptions"
+          placeholder="请选择置顶时长"
+          style="width: 100%"
+        />
+        <div class="dialog-btns">
+          <div class="reset-btn" @click="showTopDialog = false">取消</div>
+          <div class="confirm-btn" @click="confirmTop">确认置顶</div>
+        </div>
+      </div>
+    </el-dialog>
+
+    <!-- 取消置顶弹窗 -->
+    <el-dialog v-model="showCancelTopDialog" title="取消置顶" width="400" align-center>
+      <div class="cancel-top-content">
+        <p>确认取消置顶？取消后您的PK信息将不再优先展示。</p>
+        <div class="dialog-btns">
+          <div class="reset-btn" @click="showCancelTopDialog = false">取消</div>
+          <div class="confirm-btn" @click="confirmCancelTop">确认取消</div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import {
+  getPkInfo,
+  releasePkInfo,
+  editPkInfo,
+  delPkInfo,
+  topPkInfo,
+  cancelTopPkInfo,
+  getAnchorList,
+  getAnchorAvatar
+} from '@/api/pk-mini'
+import { getMainUserData } from '@/utils/pk-mini/storage'
+import { getCountryNamesArray } from '@/utils/pk-mini/countryUtil'
+import { TimestamptolocalTime } from '@/utils/pk-mini/timeConversion'
+import { ElMessage, ElLoading } from 'element-plus'
+
+// 导入本地图片
+import iconEditor from '@/assets/pk-mini/Editor.png'
+import iconDelete from '@/assets/pk-mini/Delete.png'
+import iconEmbellish from '@/assets/pk-mini/embellish.png'
+import iconTopPosition from '@/assets/pk-mini/topPosition.png'
+import iconUnpinned from '@/assets/pk-mini/unpinned.png'
+
+// 获取用户 ID
+function getUserId(user) {
+  return user?.id || user?.userId || user?.uid || null
+}
+
+const currentUser = ref({})
+const list = ref([])
+const page = ref(0)
+const formatTime = TimestamptolocalTime
+
+// 表单数据
+const formData = ref({
+  anchorName: '',
+  country: null,
+  gender: null,
+  pkTime: null,
+  coin: null,
+  pkNumber: null,
+  remark: '',
+  anchorIcon: ''
+})
+const isEditing = ref(false)
+const editingId = ref(null)
+
+// 弹窗状态
+const showDeleteDialog = ref(false)
+const showAnchorDialog = ref(false)
+const showTopDialog = ref(false)
+const showCancelTopDialog = ref(false)
+const deleteItem = ref(null)
+const topItem = ref(null)
+const selectedAnchor = ref(null)
+const topDuration = ref(null)
+const topDurationOptions = ref([])
+
+// 主播库
+const anchorLibrary = ref([])
+
+// 选项
+const countryOptions = ref([])
+const genderOptions = [
+  { value: 1, label: '男' },
+  { value: 2, label: '女' }
+]
+
+// 加载PK信息列表
+async function loadPkList() {
+  const userId = getUserId(currentUser.value)
+  if (!userId) return
+
+  try {
+    const res = await getPkInfo({
+      userId: userId,
+      page: page.value,
+      size: 10
+    })
+    if (res && res.length > 0) {
+      list.value.push(...res)
+    }
+  } catch (e) {
+    console.error('加载PK信息失败', e)
+  }
+}
+
+// 加载更多
+function loadMore() {
+  page.value++
+  loadPkList()
+}
+
+// 加载主播库
+async function loadAnchorLibrary() {
+  const userId = getUserId(currentUser.value)
+  if (!userId) return
+
+  try {
+    const res = await getAnchorList({ id: userId })
+    anchorLibrary.value = res || []
+  } catch (e) {
+    console.error('加载主播库失败', e)
+  }
+}
+
+// 主播名称失焦时查询头像
+async function handleAnchorBlur() {
+  if (!formData.value.anchorName) return
+
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在查询主播...',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+
+  try {
+    const res = await getAnchorAvatar({ name: formData.value.anchorName })
+    formData.value.anchorIcon = res
+    ElMessage.success('查询成功')
+  } catch (e) {
+    console.error('查询主播失败', e)
+  } finally {
+    loading.close()
+  }
+}
+
+// 选择主播确认
+function confirmSelectAnchor() {
+  if (!selectedAnchor.value) {
+    ElMessage.warning('请选择一个主播')
+    return
+  }
+
+  formData.value.anchorName = selectedAnchor.value.anchorId
+  formData.value.gender = selectedAnchor.value.gender
+  formData.value.country = selectedAnchor.value.country
+  formData.value.anchorIcon = selectedAnchor.value.headerIcon?.split('/').pop() || ''
+  showAnchorDialog.value = false
+}
+
+// 提交表单
+async function handleSubmit() {
+  const userId = getUserId(currentUser.value)
+  if (!userId) return
+
+  // 验证
+  if (!formData.value.anchorName) {
+    ElMessage.error('请输入主播名称')
+    return
+  }
+  if (!formData.value.gender) {
+    ElMessage.error('请选择性别')
+    return
+  }
+  if (!formData.value.pkTime) {
+    ElMessage.error('请选择PK时间')
+    return
+  }
+  if (formData.value.pkTime < Date.now()) {
+    ElMessage.error('PK时间不能早于当前时间')
+    return
+  }
+  if (!formData.value.country) {
+    ElMessage.error('请选择国家')
+    return
+  }
+  if (!formData.value.coin) {
+    ElMessage.error('请输入金币数')
+    return
+  }
+  if (!formData.value.pkNumber) {
+    ElMessage.error('请输入场次')
+    return
+  }
+
+  const data = {
+    anchorId: formData.value.anchorName,
+    pkTime: formData.value.pkTime / 1000,
+    sex: formData.value.gender,
+    country: formData.value.country,
+    coin: formData.value.coin,
+    remark: formData.value.remark || '',
+    status: 0,
+    senderId: userId,
+    anchorIcon: formData.value.anchorIcon,
+    pkNumber: formData.value.pkNumber
+  }
+
+  try {
+    if (isEditing.value) {
+      await editPkInfo({ ...data, id: editingId.value })
+      ElMessage.success('修改成功')
+    } else {
+      await releasePkInfo(data)
+      ElMessage.success('发布成功')
+    }
+
+    // 刷新列表
+    list.value = []
+    page.value = 0
+    loadPkList()
+    handleReset()
+  } catch (e) {
+    console.error('提交失败', e)
+  }
+}
+
+// 重置表单
+function handleReset() {
+  formData.value = {
+    anchorName: '',
+    country: null,
+    gender: null,
+    pkTime: null,
+    coin: null,
+    pkNumber: null,
+    remark: '',
+    anchorIcon: ''
+  }
+  isEditing.value = false
+  editingId.value = null
+}
+
+// 取消编辑
+function handleCancel() {
+  handleReset()
+}
+
+// 编辑
+function handleEdit(item) {
+  isEditing.value = true
+  editingId.value = item.id
+  formData.value = {
+    anchorName: item.anchorId,
+    country: item.country,
+    gender: item.sex,
+    pkTime: item.pkTime * 1000,
+    coin: item.coin,
+    pkNumber: item.pkNumber,
+    remark: item.remark || '',
+    anchorIcon: item.anchorIcon?.split('/').pop() || ''
+  }
+}
+
+// 删除
+function handleDelete(item) {
+  deleteItem.value = item
+  showDeleteDialog.value = true
+}
+
+async function confirmDelete() {
+  try {
+    await delPkInfo({ id: deleteItem.value.id })
+    ElMessage.success('删除成功')
+    showDeleteDialog.value = false
+
+    // 刷新列表
+    list.value = []
+    page.value = 0
+    loadPkList()
+  } catch (e) {
+    console.error('删除失败', e)
+  }
+}
+
+// 置顶
+function handleTop(item) {
+  topItem.value = item
+  if (!item.isPin) {
+    // 计算置顶时长选项
+    const currentTime = Math.floor(Date.now() / 1000)
+    const timeDiff = item.pkTime - currentTime
+    if (timeDiff <= 0) {
+      topDurationOptions.value = [{ value: 0, label: '已过期' }]
+    } else {
+      const hours = Math.ceil(timeDiff / 3600)
+      topDurationOptions.value = Array.from({ length: Math.min(hours, 24) }, (_, i) => ({
+        value: currentTime + (i + 1) * 3600,
+        label: `${i + 1}小时`
+      }))
+    }
+    showTopDialog.value = true
+  } else {
+    showCancelTopDialog.value = true
+  }
+}
+
+async function confirmTop() {
+  if (!topDuration.value) {
+    ElMessage.warning('请选择置顶时长')
+    return
+  }
+
+  try {
+    await topPkInfo({
+      articleId: topItem.value.id,
+      pinExpireTime: topDuration.value
+    })
+    ElMessage.success('置顶成功')
+    showTopDialog.value = false
+
+    // 刷新列表
+    list.value = []
+    page.value = 0
+    loadPkList()
+  } catch (e) {
+    console.error('置顶失败', e)
+  }
+}
+
+async function confirmCancelTop() {
+  try {
+    await cancelTopPkInfo({ articleId: topItem.value.id })
+    ElMessage.success('已取消置顶')
+    showCancelTopDialog.value = false
+
+    // 刷新列表
+    list.value = []
+    page.value = 0
+    loadPkList()
+  } catch (e) {
+    console.error('取消置顶失败', e)
+  }
+}
+
+onMounted(() => {
+  countryOptions.value = getCountryNamesArray()
+  currentUser.value = getMainUserData() || {}
+
+  const userId = getUserId(currentUser.value)
+  console.log('[PKmessage] 当前用户:', currentUser.value)
+  console.log('[PKmessage] 用户ID:', userId)
+
+  if (userId) {
+    loadPkList()
+    loadAnchorLibrary()
+  }
+})
+</script>
+
+<style scoped lang="less">
+.pk-message {
+  width: 100%;
+  height: 100%;
+}
+
+.demo-panel {
+  width: 100%;
+  height: 100%;
+}
+
+.pk-list {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 15px;
+}
+
+.pk-card {
+  margin-bottom: 15px;
+}
+
+.card-content {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  background: url('https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/PKbackground.png') no-repeat center/cover;
+  border-radius: 12px;
+  transition: all 0.3s;
+}
+
+.card-content:hover {
+  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+  transform: scale(1.02);
+}
+
+.card-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 20px;
+  flex-shrink: 0;
+}
+
+.card-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.personal-info {
+  flex: 1;
+}
+
+.name {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 8px;
+}
+
+.gender {
+  padding: 2px 15px;
+  border-radius: 20px;
+  font-size: 14px;
+  color: white;
+}
+
+.gender.male {
+  background: #59d8db;
+}
+
+.gender.female {
+  background: #f3876f;
+}
+
+.country {
+  padding: 2px 15px;
+  background: #e4f9f9;
+  border-radius: 20px;
+  font-size: 14px;
+  color: #03aba8;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 14px;
+  color: #666;
+}
+
+.stat-icon {
+  width: 18px;
+  height: 18px;
+}
+
+.pk-time {
+  font-size: 13px;
+  color: #999;
+}
+
+.card-actions {
+  display: flex;
+  gap: 15px;
+}
+
+.action-btn {
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-btn:hover {
+  transform: scale(1.2);
+}
+
+.action-btn img {
+  width: 28px;
+  height: 28px;
+}
+
+.empty-tip {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #03aba8;
+}
+
+// 右侧表单
+.form-panel {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  border-left: 1px solid #e0f0f0;
+}
+
+.form-title {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.title-icon {
+  width: 40px;
+  height: 28px;
+}
+
+.form-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.form-row {
+  width: 90%;
+  margin-bottom: 15px;
+}
+
+.form-row.two-col {
+  display: flex;
+  justify-content: space-between;
+}
+
+.col {
+  width: 48%;
+}
+
+.col .label {
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 5px;
+}
+
+.form-row textarea {
+  width: 100%;
+  height: 80px;
+  border: 1px solid #4fcacd;
+  border-radius: 8px;
+  padding: 10px;
+  resize: none;
+  outline: none;
+  font-size: 14px;
+}
+
+.select-anchor-btn {
+  margin-top: 10px;
+  padding: 8px 15px;
+  background: linear-gradient(to top, #4fcacd, #5fdbde);
+  color: white;
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.3s;
+}
+
+.select-anchor-btn:hover {
+  transform: scale(1.02);
+  opacity: 0.9;
+}
+
+.confirm-btn {
+  width: 80%;
+  padding: 12px;
+  background: linear-gradient(to top, #4fcacd, #5fdbde);
+  color: white;
+  border-radius: 25px;
+  text-align: center;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-top: 20px;
+}
+
+.confirm-btn:hover {
+  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+  transform: scale(1.02);
+}
+
+.reset-btn {
+  width: 80%;
+  padding: 12px;
+  background: linear-gradient(to top, #e4ffff, #ffffff);
+  border: 1px solid #4fcacd;
+  color: #03aba8;
+  border-radius: 25px;
+  text-align: center;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-top: 15px;
+}
+
+.reset-btn:hover {
+  box-shadow: 0 0 10px rgba(0,0,0,0.2);
+  transform: scale(1.02);
+}
+
+// 弹窗内容
+.anchor-dialog-content {
+  max-height: 500px;
+}
+
+.anchor-list {
+  max-height: 400px;
+  overflow: auto;
+  background: #e0f4f1;
+  border-radius: 12px;
+  padding: 15px;
+}
+
+.anchor-item {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  background: white;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.anchor-item:hover {
+  transform: scale(1.02);
+}
+
+.anchor-item.selected {
+  background: #fffbfa;
+  border: 1px solid #f4d0c9;
+}
+
+.anchor-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-right: 15px;
+}
+
+.anchor-info {
+  flex: 1;
+}
+
+.anchor-name {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.anchor-meta {
+  display: flex;
+  gap: 10px;
+}
+
+.empty-anchor {
+  text-align: center;
+  padding: 30px;
+  color: #999;
+}
+
+.dialog-btns {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  margin-top: 20px;
+}
+
+.dialog-btns .confirm-btn,
+.dialog-btns .reset-btn {
+  width: 150px;
+  margin-top: 0;
+}
+
+.top-dialog-content {
+  padding: 20px;
+}
+
+.top-tip {
+  color: #999;
+  margin-bottom: 20px;
+}
+
+.cancel-top-content {
+  padding: 20px;
+  text-align: center;
+}
+
+.cancel-top-content p {
+  color: #666;
+  margin-bottom: 20px;
+}
+</style>