融合PK头像头像功能

2026-02-08 15:33:10 +08:00
parent c6435c6db5
commit 76d83fc77e
55 changed files with 5403 additions and 14 deletions
--- a/src/components/pk-mini/mine/PointsList.vue
+++ b/src/components/pk-mini/mine/PointsList.vue
@@ -0,0 +1,151 @@
+<template>
+  <!-- 积分列表 -->
+  <div class="points-container">
+    <div class="points-header">
+      <img class="points-icon" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Points.png" alt="" />
+      <div class="points-text">
+        我的积分: <span class="points-num">{{ currentUser.points || 0 }}</span>
+      </div>
+    </div>
+
+    <div class="points-list" v-if="pointsList.length > 0">
+      <div class="points-item" v-for="(item, index) in pointsList" :key="index">
+        <div class="item-content" :class="item.status == 1 ? 'positive' : 'negative'">
+          <div class="event">{{ item.info }}</div>
+          <div class="number">{{ item.number }}</div>
+          <div class="time">{{ formatTime(item.time * 1000) }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="empty-tip" v-else>您还没有积分记录！</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { getIntegralDetail } from '@/api/pk-mini'
+import { getMainUserData } from '@/utils/pk-mini/storage'
+import { TimestamptolocalTime } from '@/utils/pk-mini/timeConversion'
+
+function getUserId(user) {
+  return user?.id || user?.userId || user?.uid || null
+}
+
+const currentUser = ref({})
+const pointsList = ref([])
+const page = ref(0)
+const formatTime = TimestamptolocalTime
+
+async function loadPointsList() {
+  const userId = getUserId(currentUser.value)
+  if (!userId) return
+
+  try {
+    const res = await getIntegralDetail({
+      page: page.value,
+      size: 30,
+      userId: userId
+    })
+    if (res && res.length > 0) {
+      pointsList.value.push(...res)
+    }
+  } catch (e) {
+    console.error('加载积分记录失败', e)
+  }
+}
+
+onMounted(() => {
+  currentUser.value = getMainUserData() || {}
+  const userId = getUserId(currentUser.value)
+  if (userId) {
+    loadPointsList()
+  }
+})
+</script>
+
+<style scoped lang="less">
+.points-container {
+  width: 100%;
+  height: 100%;
+}
+
+.points-header {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.points-icon {
+  width: 52px;
+  height: 52px;
+  margin-right: 18px;
+}
+
+.points-text {
+  font-size: 24px;
+  color: #666;
+}
+
+.points-num {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+}
+
+.points-list {
+  width: 100%;
+  height: calc(100% - 70px);
+  overflow: auto;
+  padding: 10px;
+}
+
+.points-item {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+}
+
+.item-content {
+  width: 90%;
+  height: 60px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.item-content.positive {
+  background: #dffefc;
+}
+
+.item-content.negative {
+  background: #fbece9;
+}
+
+.event {
+  color: #03aba8;
+  font-size: 16px;
+}
+
+.number {
+  color: #333;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.time {
+  color: #999;
+  font-size: 16px;
+}
+
+.empty-tip {
+  height: calc(100% - 70px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #03aba8;
+}
+</style>