ID1766-用户默认头像修改

zhangchen

2025-09-12 80878eaf15525329cddc3b06659a798b812af7dc

ID1766-用户默认头像修改

 src/views/mobile/bedsideAuxiliaryScreen/components/Header.vue

@@ -252,7 +252,6 @@
    !bedsideAuxiliaryScreenStore.deviceData.deviceCode
  )
    return ElMessage.warning("未初始化或正在进行初始化操作中");
    console.log(loginDialogRef)
    loginDialogRef.value.openDialog();
};


 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,
    };
  },
};