Merge branch 'ID1766-添加推送登录功能' into test

zhangchen

2025-09-16 a99886eb9c73018235e2c373f3d82a2b0b2311d5

 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>