From bec58fa7fe4fae2deac88200d8d939e12ec8a08f Mon Sep 17 00:00:00 2001
From: lrj <owen.stl@gmail.com>
Date: 星期五, 03 十月 2025 22:26:39 +0800
Subject: [PATCH] 修复小程序WXS日期显示问题并重新设计【我的】页面
---
web/src/components/PlayerInfoCard.vue | 40 +++++++++++++++++++++++++++++++++++++---
1 files changed, 37 insertions(+), 3 deletions(-)
diff --git a/web/src/components/PlayerInfoCard.vue b/web/src/components/PlayerInfoCard.vue
index 88f82e4..8e9765d 100644
--- a/web/src/components/PlayerInfoCard.vue
+++ b/web/src/components/PlayerInfoCard.vue
@@ -9,6 +9,8 @@
:size="80"
:src="playerInfo.avatarUrl"
:style="{ backgroundColor: avatarBgColor }"
+ class="clickable-avatar"
+ @click="handleAvatarClick"
>
{{ playerInfo.name ? playerInfo.name.charAt(0) : '?' }}
</el-avatar>
@@ -35,13 +37,35 @@
<p>{{ playerInfo.description }}</p>
</div>
</div>
+
+ <!-- 澶村儚棰勮瀵硅瘽妗� -->
+ <el-dialog
+ v-model="previewVisible"
+ title="澶村儚棰勮"
+ width="500px"
+ :show-close="true"
+ center
+ >
+ <div class="avatar-preview-container">
+ <img
+ v-if="playerInfo.avatarUrl"
+ :src="playerInfo.avatarUrl"
+ class="preview-image"
+ alt="澶村儚棰勮"
+ />
+ <div v-else class="no-avatar">
+ <el-icon size="80"><Picture /></el-icon>
+ <p>鏆傛棤澶村儚</p>
+ </div>
+ </div>
+ </el-dialog>
</div>
</template>
<script setup>
-import { computed } from 'vue'
-import { ElAvatar, ElIcon } from 'element-plus'
-import { Phone } from '@element-plus/icons-vue'
+import { computed, ref } from 'vue'
+import { ElAvatar, ElIcon, ElDialog } from 'element-plus'
+import { Phone, Picture } from '@element-plus/icons-vue'
const props = defineProps({
playerInfo: {
@@ -56,6 +80,16 @@
}
})
+// 鍝嶅簲寮忔暟鎹�
+const previewVisible = ref(false)
+
+// 澶村儚鐐瑰嚮澶勭悊
+const handleAvatarClick = () => {
+ if (props.playerInfo.avatarUrl) {
+ previewVisible.value = true
+ }
+}
+
// 鏍规嵁濮撳悕鐢熸垚澶村儚鑳屾櫙鑹�
const avatarBgColor = computed(() => {
if (!props.playerInfo.name) return '#409EFF'
--
Gitblit v1.8.0