setting.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <view class="user-info">
  3. <view class="form-item">
  4. <text>用户头像:</text>
  5. <image :src="userInfo.avatarUrl" mode="aspectFill" class="avatar"></image>
  6. <image v-if="userInfo.userType === 1" src="/static/images/v.png" mode="aspectFit" class="verification-badge"></image>
  7. </view>
  8. <view class="form-item">
  9. <text>昵称:</text>
  10. <input v-model="userInfo.nickName" placeholder="请输入昵称" />
  11. <text class="clear-icon" @tap="clearInput('nickName')">×</text>
  12. </view>
  13. <view class="form-item">
  14. <text>性别</text>
  15. <picker @change="onGenderChange" :value="userInfo.gender" :range="genders">
  16. <view class="picker-view">{{ genders[userInfo.gender] || '请选择性别' }}</view>
  17. </picker>
  18. <text class="clear-icon" @tap="clearInput('gender')">×</text>
  19. </view>
  20. <view class="form-item">
  21. <text>手机号码</text>
  22. <input v-model="userInfo.phoneNumber" placeholder="请输入手机号码" />
  23. <button class="get-phone-btn" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">获取手机号码</button>
  24. </view>
  25. <view class="form-item">
  26. <text>用户类别</text>
  27. <picker @change="onTypeChange" :value="userInfo.userType" :range="typeList">
  28. <view class="picker-view">{{ typeList[userInfo.userType] || '请选择用户类别' }}</view>
  29. </picker>
  30. <text class="clear-icon" @tap="clearInput('userType')">×</text>
  31. </view>
  32. <view class="form-item" v-if="userInfo.userType === 1">
  33. <text>姓名:</text>
  34. <input v-model="userInfo.realName" placeholder="请输入姓名" />
  35. <text class="clear-icon" @tap="clearInput('realName')">×</text>
  36. </view>
  37. <button class="save-btn" @tap="saveUserInfo">保存更新</button>
  38. </view>
  39. </template>
  40. <script>
  41. export default {
  42. data() {
  43. return {
  44. userInfo: {
  45. avatarUrl: 'http://127.0.0.1:11170/__tmp__/7VdGoREFyrIFad833dc1387351cba860b823af033162.jpeg',
  46. nickName: 'lis23',
  47. gender: 0,
  48. phoneNumber: '13223896731',
  49. userType: 0,
  50. realName: ''
  51. },
  52. genders: ['保密', '男', '女'],
  53. typeList: ['普通用户', '内部用户'],
  54. errorMessage: ''
  55. }
  56. },
  57. onLoad() {
  58. // 这里可以添加页面加载时的逻辑,比如从服务器获取用户信息
  59. this.getUserInfo()
  60. },
  61. methods: {
  62. getUserInfo() {
  63. // 从服务器获取用户信息的方法
  64. // 这里应该调用API获取用户信息,然后更新 this.userInfo
  65. },
  66. onTypeChange(e) {
  67. this.userInfo.userType = parseInt(e.detail.value)
  68. },
  69. onGenderChange(e) {
  70. this.userInfo.gender = parseInt(e.detail.value)
  71. },
  72. clearInput(field) {
  73. if (field === 'nickName' || field === 'realName') {
  74. this.userInfo[field] = ''
  75. } else if (field === 'gender' || field === 'userType') {
  76. this.userInfo[field] = -1
  77. }
  78. },
  79. getPhoneNumber(e) {
  80. if (e.detail.errMsg === "getPhoneNumber:ok") {
  81. // 这里应该调用后端API来解密获取手机号
  82. console.log("获取手机号成功,需要解密的数据:", e.detail)
  83. // 示例:调用解密API
  84. // this.decryptPhoneNumber(e.detail.encryptedData, e.detail.iv)
  85. } else {
  86. uni.showToast({
  87. title: '获取手机号失败',
  88. icon: 'none'
  89. })
  90. }
  91. },
  92. // decryptPhoneNumber(encryptedData, iv) {
  93. // // 调用后端API进行解密
  94. // // 解密成功后更新 this.userInfo.phoneNumber
  95. // },
  96. async saveUserInfo() {
  97. if (!this.validateForm()) {
  98. return
  99. }
  100. try {
  101. // 这里应该调用保存用户信息的API
  102. // await this.updateUserInfoAPI(this.userInfo)
  103. uni.showToast({
  104. title: '保存成功',
  105. icon: 'success'
  106. })
  107. } catch (error) {
  108. uni.showToast({
  109. title: '保存失败,请重试',
  110. icon: 'none'
  111. })
  112. }
  113. },
  114. validateForm() {
  115. if (!this.userInfo.nickName.trim()) {
  116. uni.showToast({ title: '请输入昵称', icon: 'none' })
  117. return false
  118. }
  119. if (this.userInfo.gender === -1) {
  120. uni.showToast({ title: '请选择性别', icon: 'none' })
  121. return false
  122. }
  123. if (!/^1\d{10}$/.test(this.userInfo.phoneNumber)) {
  124. uni.showToast({ title: '请输入有效的手机号码', icon: 'none' })
  125. return false
  126. }
  127. if (this.userInfo.userType === 1 && !this.userInfo.realName.trim()) {
  128. uni.showToast({ title: '请输入姓名', icon: 'none' })
  129. return false
  130. }
  131. return true
  132. }
  133. }
  134. }
  135. </script>
  136. <style>
  137. /* 样式保持不变 */
  138. .user-info {
  139. padding: 20px;
  140. background-color: #ffffff;
  141. }
  142. .form-item {
  143. margin-bottom: 15px;
  144. position: relative;
  145. }
  146. .form-item text {
  147. display: block;
  148. margin-bottom: 5px;
  149. color: #333;
  150. font-size: 14px;
  151. }
  152. .avatar {
  153. width: 80px;
  154. height: 80px;
  155. border-radius: 8px;
  156. }
  157. .verification-badge {
  158. position: absolute;
  159. bottom: 0px;
  160. left: 65px;
  161. width: 20px;
  162. height: 20px;
  163. }
  164. input,
  165. .picker-view {
  166. width: 100%;
  167. height: 40px;
  168. padding: 0 10px;
  169. border: none;
  170. border-bottom: 1px solid #e0e0e0;
  171. background-color: #fff;
  172. font-size: 14px;
  173. line-height: 40px;
  174. }
  175. .clear-icon {
  176. position: absolute;
  177. right: 10px;
  178. top: 30px;
  179. color: #999;
  180. font-size: 18px;
  181. background-color: #e0e0e0;
  182. width: 20px;
  183. height: 20px;
  184. text-align: center;
  185. line-height: 20px;
  186. border-radius: 50%;
  187. }
  188. .get-phone-btn {
  189. position: absolute;
  190. right: 0;
  191. bottom: 0;
  192. font-size: 14px;
  193. background-color: transparent;
  194. color: #007AFF;
  195. padding: 5px 0;
  196. border: none;
  197. }
  198. .save-btn {
  199. width: 100%;
  200. height: 44px;
  201. line-height: 44px;
  202. text-align: center;
  203. background-color: #007AFF;
  204. color: white;
  205. border-radius: 4px;
  206. margin-top: 20px;
  207. font-size: 16px;
  208. }
  209. </style>