与牧同行-小程序用户端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

173 lines
6.1 KiB

  1. <view class="personal-center">
  2. <!-- 用户信息区域 -->
  3. <view class="user-section fade-in">
  4. <view class="user-card">
  5. <!-- 头像 -->
  6. <button class="avatar-btn" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  7. <image class="avatar" src="{{avatarUrl || '/pages/images/tx.png'}}" mode="aspectFill"></image>
  8. <view class="avatar-edit-tip">点击修改</view>
  9. </button>
  10. <!-- 用户信息 -->
  11. <view class="user-info">
  12. <view class="nickname-section" bindtap="editNickname">
  13. <text class="nickname">{{displayNickName || '微信用户'}}</text>
  14. <image src="/pages/images/bj.png"></image>
  15. </view>
  16. <view class="user-meta">
  17. <view class="auth-tag {{userInfo.isVerified ? 'verified' : ''}}" bindtap="goToAuth">
  18. <text>{{userInfo.authStatus}}</text>
  19. </view>
  20. </view>
  21. </view>
  22. </view>
  23. </view>
  24. <!-- 消息通知 -->
  25. <view class="section-card fade-in-delay-1">
  26. <view class="section-header">
  27. <text class="section-title">消息通知</text>
  28. </view>
  29. <view class="message-row">
  30. <view class="message-item" bindtap="goToConsultation">
  31. <view class="message-icon-wrapper">
  32. <image class="message-icon" src="/pages/images/wz.png" mode=""></image>
  33. <!-- 动态数字气泡,有动画效果 -->
  34. <view class="badge" wx:if="{{totalToday > 0}}">
  35. <view class="badge-dot"></view>
  36. <view class="badge-num animation-badge">{{totalToday}}</view>
  37. </view>
  38. </view>
  39. <text class="message-label">问诊消息</text>
  40. </view>
  41. <view class="divider"></view>
  42. <view class="message-item" bindtap="goToQA">
  43. <view class="message-icon-wrapper">
  44. <image class="message-icon" src="/pages/images/wdxx.png" mode=""></image>
  45. </view>
  46. <text class="message-label">问答消息</text>
  47. </view>
  48. </view>
  49. </view>
  50. <!-- 功能列表 -->
  51. <view class="section-card fade-in-delay-2">
  52. <view class="function-list">
  53. <!-- 实名认证 -->
  54. <view class="function-item" bindtap="goToAuth">
  55. <view class="item-left">
  56. <image class="item-icon" src="/pages/images/smrz.png"></image>
  57. <text class="item-title">实名认证</text>
  58. </view>
  59. <view class="item-status {{userInfo.isVerified ? 'verified' : ''}}">
  60. {{userInfo.authStatus}}
  61. </view>
  62. </view>
  63. <!-- 反馈建议 -->
  64. <view class="function-item" bindtap="showFeedback">
  65. <view class="item-left">
  66. <image class="item-icon" src="/pages/images/fkjy.png"></image>
  67. <text class="item-title">反馈建议</text>
  68. </view>
  69. </view>
  70. <!-- 退出登录 -->
  71. <view class="function-item" bindtap="showLogoutConfirm">
  72. <view class="item-left">
  73. <image class="item-icon" src="/pages/images/logout.png"></image>
  74. <text class="item-title logout-title">退出登录</text>
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. <!-- 反馈建议弹窗 -->
  80. <view class="feedback-modal {{showFeedbackModal ? 'show' : ''}}">
  81. <view class="modal-mask" bindtap="hideFeedback"></view>
  82. <view class="modal-content">
  83. <view class="modal-header">
  84. <text class="modal-title">反馈建议</text>
  85. <view class="modal-close" bindtap="hideFeedback">
  86. <image src="/pagesA/images/ch.png"></image>
  87. </view>
  88. </view>
  89. <view class="modal-body">
  90. <!-- 修复iOS输入框问题:添加focus控制并增加条件渲染 -->
  91. <textarea
  92. class="feedback-input"
  93. placeholder="请输入您的反馈或建议..."
  94. placeholder-class="placeholder"
  95. value="{{feedbackContent}}"
  96. bindinput="onFeedbackInput"
  97. maxlength="200"
  98. auto-height
  99. focus="{{showFeedbackModal && textareaFocus}}"
  100. disabled="{{!showFeedbackModal}}"
  101. confirm-type="done"
  102. show-confirm-bar="{{false}}"
  103. ></textarea>
  104. <view class="char-count">
  105. <text class="current">{{feedbackContent.length}}</text>
  106. <text class="total">/200</text>
  107. </view>
  108. </view>
  109. <view class="modal-footer">
  110. <button class="submit-btn {{canSubmit ? 'active' : ''}}" bindtap="submitFeedback" disabled="{{!canSubmit}}">
  111. {{isSubmitting ? '提交中...' : '提交'}}
  112. </button>
  113. </view>
  114. </view>
  115. </view>
  116. <!-- 修改昵称弹窗 -->
  117. <view class="nickname-modal {{showNicknameModal ? 'show' : ''}}">
  118. <view class="modal-mask" bindtap="hideNicknameModal"></view>
  119. <view class="modal-content">
  120. <view class="modal-header">
  121. <text class="modal-title">修改昵称</text>
  122. </view>
  123. <view class="modal-body">
  124. <input
  125. class="nickname-input"
  126. type="text"
  127. placeholder="请输入昵称"
  128. value="{{newNickname}}"
  129. bindinput="onNicknameInput"
  130. maxlength="10"
  131. focus="{{showNicknameModal}}"
  132. confirm-type="done"
  133. />
  134. <text class="input-tip">最多10个字符</text>
  135. </view>
  136. <view class="modal-footer">
  137. <button class="cancel-btn" bindtap="hideNicknameModal">取消</button>
  138. <button class="confirm-btn" bindtap="saveNickname">确定</button>
  139. </view>
  140. </view>
  141. </view>
  142. <!-- 退出登录确认弹窗 -->
  143. <view class="logout-modal {{showLogoutModal ? 'show' : ''}}">
  144. <view class="modal-mask" bindtap="hideLogoutModal"></view>
  145. <view class="modal-content">
  146. <view class="logout-modal-body">
  147. <text class="logout-title">确认退出登录?</text>
  148. <text class="logout-desc">退出后需要重新登录才能使用完整功能</text>
  149. </view>
  150. <view class="logout-modal-footer">
  151. <button class="logout-cancel-btn" bindtap="hideLogoutModal">取消</button>
  152. <button class="logout-confirm-btn" bindtap="doLogout">退出登录</button>
  153. </view>
  154. </view>
  155. </view>
  156. <!-- 提示信息 -->
  157. <view class="toast {{showToast ? 'show' : ''}}">
  158. <text>{{toastText}}</text>
  159. </view>
  160. </view>