From 80878eaf15525329cddc3b06659a798b812af7dc Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期五, 12 九月 2025 15:05:45 +0800
Subject: [PATCH] ID1766-用户默认头像修改
---
src/views/mobile/bedsideAuxiliaryScreen/components/Login/userInfo.vue | 64 ++++++++++++++++++++++----------
1 files changed, 44 insertions(+), 20 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/Login/userInfo.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/Login/userInfo.vue
index bf5a6d7..ced0bff 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/Login/userInfo.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/Login/userInfo.vue
@@ -1,6 +1,6 @@
<template>
<div class="userinfo-container">
- <img :src="userInfo.userAvatar" alt="" srcset="" class="user-avatar">
+ <img :src="userInfo.userAvatar" alt="" srcset="" class="user-avatar" />
<div class="user-text">当前账户：{{ userInfo.userName }}</div>
<div class="user-text">床号：{{ userInfo.床号 }}</div>
<div class="user-text">设备号：{{ userInfo.设备编号 }}</div>
@@ -22,12 +22,36 @@
return {
...userInfo,
床号: bedsideAuxiliaryScreenStore.deviceData.devicdeNo,
- 设备编号: bedsideAuxiliaryScreenStore.deviceCode
- }
+ 设备编号: bedsideAuxiliaryScreenStore.deviceCode,
+ userAvatar: userInfo?.userAvatar ? userInfo?.userAvatar : generateCircularAvatar(userInfo?.userName)
+ };
});
+ function generateCircularAvatar(name: string, size = 100): string {
+ console.log("name: ", name);
+ const canvas = document.createElement("canvas");
+ canvas.width = size;
+ canvas.height = size;
+ const ctx = canvas.getContext("2d")!;
+
+ // 绘制圆形背景
+ ctx.fillStyle = "#769aff";
+ ctx.beginPath();
+ ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
+ ctx.fill();
+
+ // 绘制文字（第一个字）
+ ctx.fillStyle = "#FFFFFF"; // 字体颜色
+ ctx.font = `${size * 0.5}px sans-serif`; // 字体大小为头像大小的一半
+ ctx.textAlign = "center";
+ ctx.textBaseline = "middle";
+ ctx.fillText(name.charAt(0), size / 2, size / 2);
+
+ return canvas.toDataURL("image/png"); // 返回 Base64 图片
+ }
+
return {
- userInfo
+ userInfo,
};
},
};
@@ -35,21 +59,21 @@
<style lang="less" scoped>
.userinfo-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- .user-avatar {
- width: 15px;
- height: 15px;
- border-radius: 50%;
- overflow: hidden;
- margin-bottom: 5px;
- }
- .user-text {
- font-size: 5px;
- color: #000;
- margin-bottom: 4px;
- }
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ .user-avatar {
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ overflow: hidden;
+ margin-bottom: 5px;
+ }
+ .user-text {
+ font-size: 5px;
+ color: #000;
+ margin-bottom: 4px;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0