PassCardManager.ts 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. import { _decorator, Component, Node, Label, Sprite, Button, resources, SpriteFrame } from 'cc';
  2. const { ccclass, property } = _decorator;
  3. /**
  4. * 通行证数据接口
  5. */
  6. interface PassCardData {
  7. name: string; // 人物姓名
  8. room: string; // 房间号
  9. id: string; // 身份ID
  10. reason: string; // 原因
  11. characterId: number; // 角色ID,用于加载头像
  12. }
  13. @ccclass('PassCardManager')
  14. export class PassCardManager extends Component {
  15. @property({
  16. type: Node,
  17. tooltip: '通行证面板节点'
  18. })
  19. passCardPanel: Node = null;
  20. @property({
  21. type: Label,
  22. tooltip: '姓名标签'
  23. })
  24. nameLabel: Label = null;
  25. @property({
  26. type: Label,
  27. tooltip: '房间号标签'
  28. })
  29. roomLabel: Label = null;
  30. @property({
  31. type: Label,
  32. tooltip: '身份ID标签'
  33. })
  34. idLabel: Label = null;
  35. @property({
  36. type: Label,
  37. tooltip: '原因标签'
  38. })
  39. reasonLabel: Label = null;
  40. @property({
  41. type: Sprite,
  42. tooltip: '头像显示组件'
  43. })
  44. avatarSprite: Sprite = null;
  45. @property({
  46. type: Button,
  47. tooltip: '关闭按钮'
  48. })
  49. closeButton: Button = null;
  50. // 当前通行证数据
  51. private currentPassData: PassCardData = null;
  52. start() {
  53. // 初始隐藏通行证面板
  54. if (this.passCardPanel) {
  55. this.passCardPanel.active = false;
  56. }
  57. // 注册关闭按钮点击事件
  58. if (this.closeButton) {
  59. // 先移除可能已存在的事件监听(防止重复注册)
  60. this.closeButton.node.off(Button.EventType.CLICK, this.onCloseButtonClick, this);
  61. // 重新注册点击事件
  62. this.closeButton.node.on(Button.EventType.CLICK, this.onCloseButtonClick, this);
  63. console.log('关闭按钮事件已注册');
  64. } else {
  65. console.error('关闭按钮未设置');
  66. }
  67. }
  68. /**
  69. * 关闭按钮点击事件处理
  70. */
  71. private onCloseButtonClick(): void {
  72. console.log('关闭按钮被点击');
  73. this.hidePassCard();
  74. }
  75. /**
  76. * 显示通行证
  77. * @param passData 通行证数据
  78. */
  79. public showPassCard(passData: PassCardData): void {
  80. console.log('PassCardManager.showPassCard 被调用:', passData);
  81. if (!this.passCardPanel) {
  82. console.error('通行证面板未设置');
  83. return;
  84. }
  85. // 保存当前数据
  86. this.currentPassData = passData;
  87. // 更新UI显示
  88. this.updatePassCardUI();
  89. // 显示面板
  90. this.passCardPanel.active = true;
  91. console.log('通行证面板已显示');
  92. }
  93. /**
  94. * 隐藏通行证
  95. */
  96. public hidePassCard(): void {
  97. console.log('hidePassCard 被调用');
  98. if (this.passCardPanel) {
  99. this.passCardPanel.active = false;
  100. console.log('通行证面板已隐藏');
  101. } else {
  102. console.error('通行证面板未设置,无法隐藏');
  103. }
  104. }
  105. /**
  106. * 更新通行证UI
  107. */
  108. private updatePassCardUI(): void {
  109. console.log('更新通行证UI');
  110. if (!this.currentPassData) {
  111. console.error('没有通行证数据');
  112. return;
  113. }
  114. // 更新文本内容
  115. if (this.nameLabel) {
  116. this.nameLabel.string = this.currentPassData.name || '';
  117. console.log('设置姓名:', this.currentPassData.name);
  118. } else {
  119. console.error('姓名标签未设置');
  120. }
  121. if (this.roomLabel) {
  122. this.roomLabel.string = this.currentPassData.room || '';
  123. console.log('设置房间号:', this.currentPassData.room);
  124. } else {
  125. console.error('房间号标签未设置');
  126. }
  127. if (this.idLabel) {
  128. this.idLabel.string = this.currentPassData.id || '';
  129. console.log('设置ID:', this.currentPassData.id);
  130. } else {
  131. console.error('ID标签未设置');
  132. }
  133. if (this.reasonLabel) {
  134. this.reasonLabel.string = this.currentPassData.reason || '';
  135. console.log('设置原因:', this.currentPassData.reason);
  136. } else {
  137. console.error('原因标签未设置');
  138. }
  139. // 加载并显示头像
  140. this.loadAvatar(this.currentPassData.characterId);
  141. }
  142. /**
  143. * 加载角色头像
  144. * @param characterId 角色ID
  145. */
  146. private loadAvatar(characterId: number): void {
  147. console.log('加载头像:', characterId);
  148. if (!this.avatarSprite) {
  149. console.error('头像Sprite组件未设置');
  150. return;
  151. }
  152. if (characterId <= 0) {
  153. console.error('无效的角色ID:', characterId);
  154. return;
  155. }
  156. // 构建头像资源路径,加上spriteFrame后缀以直接获取SpriteFrame子资源
  157. const avatarPath = `avatars/${characterId}/avatar_${characterId}_5/spriteFrame`;
  158. console.log('尝试加载头像路径:', avatarPath);
  159. // 加载头像资源
  160. resources.load(avatarPath, SpriteFrame, (err, spriteFrame) => {
  161. if (err) {
  162. console.error(`加载头像失败: ${avatarPath}`, err);
  163. // 如果加载失败,尝试其他路径
  164. this.loadFallbackAvatar(characterId);
  165. } else {
  166. // 设置头像
  167. this.avatarSprite.spriteFrame = spriteFrame;
  168. console.log('头像加载成功: ' + avatarPath);
  169. }
  170. });
  171. }
  172. /**
  173. * 尝试加载备用头像
  174. * @param characterId 角色ID
  175. */
  176. private loadFallbackAvatar(characterId: number): void {
  177. console.log('尝试加载备用头像:', characterId);
  178. // 尝试加载备用路径
  179. const fallbackPath = `avatars/${characterId}/avatar_${characterId}_1/spriteFrame`;
  180. resources.load(fallbackPath, SpriteFrame, (err, spriteFrame) => {
  181. if (err) {
  182. console.error(`加载备用头像失败: ${fallbackPath}`);
  183. } else {
  184. this.avatarSprite.spriteFrame = spriteFrame;
  185. console.log('备用头像加载成功: ' + fallbackPath);
  186. }
  187. });
  188. }
  189. onDestroy() {
  190. // 清理事件监听
  191. if (this.closeButton) {
  192. this.closeButton.node.off(Button.EventType.CLICK, this.onCloseButtonClick, this);
  193. }
  194. }
  195. }