changeInfo.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <template>
  2. <!-- {{ formData.avatar }} -->
  3. <Form :rules="fieldConfigs" v-model="formData" ref="formRef">
  4. <up-table>
  5. <up-tr>
  6. <up-th>艺术照</up-th>
  7. <Td field="avatar">
  8. <SsUploadAvatar v-model="formData.avatar" @updated="onAvatarUpdated" />
  9. </Td>
  10. </up-tr>
  11. <up-tr>
  12. <up-th>原密码</up-th>
  13. <Td field="oldPwd">
  14. <SsInput v-model="formData.oldPwd" placeholder="请输入" />
  15. </Td>
  16. </up-tr>
  17. <up-tr>
  18. <up-th>新密码</up-th>
  19. <Td field="newPwd">
  20. <SsInput v-model="formData.newPwd" placeholder="请输入" />
  21. </Td>
  22. </up-tr>
  23. <up-tr>
  24. <up-th>确认新密码</up-th>
  25. <Td field="confirmPwd">
  26. <SsInput v-model="formData.confirmPwd" placeholder="请输入" />
  27. </Td>
  28. </up-tr>
  29. </up-table>
  30. </Form>
  31. <!-- 底部按钮 -->
  32. <SsBottom :buttons="bottomButtons" @button-click="handleBottomAction" />
  33. </template>
  34. <script setup>
  35. import { ref, computed, onMounted, onUnmounted } from 'vue'
  36. import Form from '@/components/Form/index.vue'
  37. import Td from '@/components/Td/index.vue'
  38. import SsInput from '@/components/SsInput/index.vue'
  39. import SsUploadAvatar from '@/components/SsUploadAvatar/index.vue'
  40. import SsBottom from '@/components/SsBottom/index.vue'
  41. import { goBack } from '@/utils/navigation'
  42. import { userApi } from '@/api/user'
  43. import { useUserStore } from '@/store/modules/user'
  44. const userStore = useUserStore()
  45. // 从缓存中获取用户信息,初始化头像
  46. const getUserAvatar = () => {
  47. let userInfo = uni.getStorageSync('userInfo')
  48. if (typeof userInfo === 'string') {
  49. userInfo = JSON.parse(userInfo)
  50. }
  51. // 优先使用 yszwj(艺术照文件)字段
  52. if (userInfo?.yszwj) {
  53. return userInfo.yszwj
  54. }
  55. // 根据性别返回默认头像
  56. return userInfo?.xbm == 1
  57. ? '/static/images/yishuzhao_nan.svg'
  58. : '/static/images/yishuzhao_nv.svg'
  59. }
  60. const formData = ref({
  61. avatar: getUserAvatar(),
  62. oldPwd: '',
  63. newPwd: '',
  64. confirmPwd: ''
  65. })
  66. const formRef = ref(null)
  67. const bottomButtons = [
  68. { text: '取消', action: 'back' },
  69. { text: '保存', action: 'save' }
  70. ]
  71. const handleBottomAction = (data) => {
  72. console.log('底部按钮操作:', data)
  73. switch (data.action) {
  74. case 'back':
  75. // 返回处理
  76. goBack()
  77. break
  78. case 'save':
  79. handleSubmit()
  80. break
  81. }
  82. }
  83. const handleSubmit = async () => {
  84. if (formRef.value) {
  85. try {
  86. // 从缓存中获取用户信息
  87. let userInfo = uni.getStorageSync('userInfo')
  88. if (typeof userInfo === 'string') {
  89. userInfo = JSON.parse(userInfo)
  90. }
  91. const oldPwd = formData.value.oldPwd
  92. const newPwd = formData.value.newPwd
  93. const confirmPwd = formData.value.confirmPwd
  94. const yhm = userInfo?.yhm || ''
  95. // 判断用户意图:是否要修改密码
  96. const hasPasswordInput = oldPwd || newPwd || confirmPwd
  97. if (hasPasswordInput) {
  98. // ===== 用户要修改密码,进行密码校验 =====
  99. // 1. 检查所有密码字段是否都填写了
  100. if (!oldPwd) {
  101. uni.showToast({
  102. title: '请输入原密码',
  103. icon: 'none'
  104. })
  105. return false
  106. }
  107. if (!newPwd) {
  108. uni.showToast({
  109. title: '请输入新密码',
  110. icon: 'none'
  111. })
  112. return false
  113. }
  114. if (!confirmPwd) {
  115. uni.showToast({
  116. title: '请输入确认密码',
  117. icon: 'none'
  118. })
  119. return false
  120. }
  121. // 2. 新密码与密码确认不一致
  122. if (newPwd !== confirmPwd) {
  123. uni.showToast({
  124. title: '新密码与确认密码不一致!',
  125. icon: 'none'
  126. })
  127. return false
  128. }
  129. // 3. 密码长度必需大于等于6位
  130. if (newPwd.length < 6) {
  131. uni.showToast({
  132. title: '密码长度必需大于等于6位!',
  133. icon: 'none'
  134. })
  135. return false
  136. }
  137. // 4. 密码必需包含数字和字母
  138. if (!(newPwd.match(/[a-zA-Z]+/) && newPwd.match(/\d+/))) {
  139. uni.showToast({
  140. title: '密码必需包含数字和字母!',
  141. icon: 'none'
  142. })
  143. return false
  144. }
  145. // 5. 密码不能包含账号
  146. if (yhm && newPwd.indexOf(yhm) !== -1) {
  147. uni.showToast({
  148. title: '密码不能包含账号!',
  149. icon: 'none'
  150. })
  151. return false
  152. }
  153. }
  154. // ===== 组装提交数据 =====
  155. const submitData = {
  156. yhid: userInfo?.yhid || '',
  157. yszwj: formData.value.avatar
  158. }
  159. // 如果要修改密码,添加密码字段
  160. if (hasPasswordInput) {
  161. submitData.oldPwd = oldPwd
  162. submitData.newPassword = newPwd
  163. submitData.againNewPassword = confirmPwd
  164. }
  165. console.log('提交数据:', submitData)
  166. // 调用接口提交数据
  167. const res = await userApi.updPwd(submitData)
  168. // 修改成功
  169. if (res.data.msg === '密码修改成功,请重新登录') {
  170. uni.showToast({
  171. title: '修改成功,请重新登录',
  172. icon: 'success'
  173. })
  174. // 清除缓存并跳转登录
  175. setTimeout(() => {
  176. uni.removeStorageSync('userInfo')
  177. uni.removeStorageSync('JSESSIONID')
  178. userStore.showH5Login()
  179. }, 1500)
  180. } else {
  181. // 修改失败,显示错误信息
  182. console.error('❌ 修改失败:', res.data.msg)
  183. uni.showToast({
  184. title: res.data.msg,
  185. icon: 'none',
  186. duration: 2000
  187. })
  188. return
  189. }
  190. }
  191. catch (error) {
  192. console.log('提交失败:', error)
  193. uni.showToast({
  194. title: error.message || '提交失败,请重试',
  195. icon: 'none'
  196. })
  197. }
  198. }
  199. }
  200. function onAvatarUpdated(newUrl) {
  201. console.log('最新头像地址:', newUrl)
  202. }
  203. </script>
  204. <style scoped></style>