changePhone.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <view class="change-phone-container">
  3. <view class="header">更换手机号</view>
  4. <view class="form">
  5. <input v-model="newPhone" type="number" maxlength="11" placeholder="请输入新手机号" class="input" />
  6. <view class="code-row">
  7. <input v-model="code" maxlength="6" placeholder="请输入验证码" class="input code-input" />
  8. <button class="code-btn" :disabled="countdown>0" @click="sendCode">{{ countdown>0 ? countdown+'s' : '获取验证码' }}</button>
  9. </view>
  10. <button class="submit-btn" @click="submit">确认更换</button>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. newPhone: '',
  19. code: '',
  20. countdown: 0,
  21. timer: null
  22. }
  23. },
  24. methods: {
  25. sendCode() {
  26. if (!/^1[3-9]\d{9}$/.test(this.newPhone)) {
  27. uni.showToast({ title: '请输入正确手机号', icon: 'none' })
  28. return
  29. }
  30. // 调用后端发送验证码接口
  31. uni.request({
  32. url: 'http://localhost:9527/api/sendCode',
  33. method: 'POST',
  34. data: { phone: this.newPhone }
  35. })
  36. uni.showToast({ title: '验证码已发送', icon: 'success' })
  37. this.countdown = 60
  38. this.timer = setInterval(() => {
  39. this.countdown--
  40. if (this.countdown <= 0) clearInterval(this.timer)
  41. }, 1000)
  42. },
  43. submit() {
  44. if (!/^1[3-9]\d{9}$/.test(this.newPhone)) {
  45. uni.showToast({ title: '请输入正确手机号', icon: 'none' })
  46. return
  47. }
  48. if (!/^\d{6}$/.test(this.code)) {
  49. uni.showToast({ title: '请输入6位验证码', icon: 'none' })
  50. return
  51. }
  52. // 调用后端更换手机号接口
  53. uni.request({
  54. url: 'http://localhost:9527/api/updatePhone',
  55. method: 'POST',
  56. data: {
  57. uid: uni.getStorageSync('uid'),
  58. phone: this.newPhone,
  59. code: this.code
  60. },
  61. success: (res) => {
  62. if (res.statusCode === 200 && res.data.code === 200) {
  63. uni.showToast({ title: '更换成功', icon: 'success' })
  64. setTimeout(() => uni.navigateBack(), 1000)
  65. } else {
  66. uni.showToast({ title: res.data.message || '更换失败', icon: 'none' })
  67. }
  68. }
  69. })
  70. }
  71. },
  72. onUnload() {
  73. if (this.timer) clearInterval(this.timer)
  74. }
  75. }
  76. </script>
  77. <style scoped>
  78. .change-phone-container {
  79. min-height: 100vh;
  80. background: #f7f8fa;
  81. padding: 40rpx 0;
  82. }
  83. .header {
  84. text-align: center;
  85. font-size: 36rpx;
  86. font-weight: bold;
  87. margin-bottom: 40rpx;
  88. background: #fff;
  89. padding: 32rpx 0;
  90. }
  91. .form {
  92. background: #fff;
  93. border-radius: 20rpx;
  94. margin: 0 32rpx;
  95. padding: 40rpx 32rpx;
  96. box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
  97. display: flex;
  98. flex-direction: column;
  99. gap: 32rpx;
  100. }
  101. .input {
  102. width: 100%;
  103. height: 80rpx;
  104. border: 1rpx solid #eee;
  105. border-radius: 12rpx;
  106. padding: 0 24rpx;
  107. font-size: 30rpx;
  108. background: #f7f8fa;
  109. }
  110. .code-row {
  111. display: flex;
  112. gap: 16rpx;
  113. }
  114. .code-input {
  115. flex: 1;
  116. }
  117. .code-btn {
  118. width: 180rpx;
  119. height: 80rpx;
  120. background: #409EFF;
  121. color: #fff;
  122. border: none;
  123. border-radius: 12rpx;
  124. font-size: 28rpx;
  125. }
  126. .submit-btn {
  127. width: 100%;
  128. background: #409EFF;
  129. color: #fff;
  130. border-radius: 12rpx;
  131. font-size: 32rpx;
  132. margin-top: 16rpx;
  133. height: 80rpx;
  134. }
  135. </style>