From 3b2e941a83ad49d3167df864a5a06a81ef944470 Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期三, 24 九月 2025 23:55:45 +0800
Subject: [PATCH] Merge branch 'ID2130-未签到页面优化' into test
---
src/views/mobile/bedsideAuxiliaryScreen/components/Login/userInfo.vue | 70 +++++++++++++++++++++++-----------
1 files changed, 47 insertions(+), 23 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/Login/userInfo.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/Login/userInfo.vue
index f5e9fa2..ced0bff 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/Login/userInfo.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/Login/userInfo.vue
@@ -1,7 +1,7 @@
<template>
<div class="userinfo-container">
- <img :src="userInfo.用户头像" alt="" srcset="" class="user-avatar">
- <div class="user-text">当前账户：{{ userInfo.用户昵称 }}</div>
+ <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>
</div>
@@ -10,7 +10,6 @@
<script lang="ts">
import { computed } from "vue";
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
-import { defaultUserInfo } from '@/store/type/user.type';
export default {
name: "UserInfo",
@@ -18,16 +17,41 @@
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
const userInfo = computed(() => {
- const userInfo = bedsideAuxiliaryScreenStore.userInfo || defaultUserInfo();
+ const userInfo = bedsideAuxiliaryScreenStore.userInfo;
+ if (!userInfo) return null;
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