userphone.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519
  1. <template>
  2. <view class="modify-phone-page">
  3. <!-- 自定义导航栏 -->
  4. <view class="custom-navbar">
  5. <view class="navbar-content">
  6. <view class="nav-left" @click="goBack">
  7. <u-icon name="arrow-leftward" color="#333" size="42"></u-icon>
  8. </view>
  9. <view class="nav-title">修改手机号</view>
  10. <view class="nav-right"></view>
  11. </view>
  12. </view>
  13. <!-- 主要内容 -->
  14. <view class="main-content">
  15. <!-- 页面标题 -->
  16. <view class="page-title">修改手机号</view>
  17. <!-- 说明文字 -->
  18. <view class="description">
  19. <text>修改手机号后,可以使用新手机号登录亿职赞,聊天时"交换电话"功能的手机号会统一修改</text>
  20. </view>
  21. <!-- 当前手机号显示 -->
  22. <view class="current-phone-section">
  23. <text class="current-label">当前手机号:</text>
  24. <text class="current-phone">{{currentPhoneMask}}</text>
  25. </view>
  26. <!-- 新手机号输入 -->
  27. <view class="input-section">
  28. <view class="phone-input-container">
  29. <view class="country-selector" @click="showCountrySelector">
  30. <text class="country-code">+ 86</text>
  31. <u-icon name="arrow-down" color="#999" size="24"></u-icon>
  32. </view>
  33. <input
  34. v-model="newPhone"
  35. type="number"
  36. placeholder="请输入新手机号"
  37. maxlength="11"
  38. class="phone-input"
  39. />
  40. </view>
  41. </view>
  42. <!-- 验证码输入 -->
  43. <view class="verification-section">
  44. <view class="verify-input-container">
  45. <view class="verify-boxes">
  46. <input
  47. v-for="(digit, index) in verificationDigits"
  48. :key="index"
  49. v-model="verificationDigits[index]"
  50. type="number"
  51. maxlength="1"
  52. class="verify-box"
  53. @input="handleDigitInput(index, $event)"
  54. @keyup.delete="handleDelete(index)"
  55. />
  56. </view>
  57. <view class="get-code-btn" @click="getVerificationCode" :class="{ disabled: isCountingDown }">
  58. <text>{{ countdownText }}</text>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. <!-- 底部确定按钮 -->
  64. <view class="bottom-btn-container">
  65. <view class="confirm-btn" @click="confirmChange" :class="{ disabled: !canConfirm }">
  66. <text>确定</text>
  67. </view>
  68. </view>
  69. </view>
  70. </template>
  71. <script>
  72. import configdata from '../../common/config.js';
  73. export default {
  74. data() {
  75. return {
  76. currentPhone: '18800000097', // 当前手机号
  77. newPhone: '', // 新手机号
  78. verificationDigits: ['', '', '', '', ''], // 验证码
  79. isCountingDown: false,
  80. countdown: 60,
  81. countdownText: '获取验证码',
  82. };
  83. },
  84. computed: {
  85. // 当前手机号脱敏显示
  86. currentPhoneMask() {
  87. if (this.currentPhone && this.currentPhone.length >= 11) {
  88. return this.currentPhone.substring(0, 3) + '********' + this.currentPhone.substring(9);
  89. }
  90. return this.currentPhone || '请设置手机号';
  91. },
  92. // 是否可以确认
  93. canConfirm() {
  94. return this.newPhone.length === 11 && this.verificationDigits.join('').length === 5;
  95. }
  96. },
  97. onLoad(options) {
  98. // 从用户信息页面获取当前手机号
  99. if (options.currentPhone) {
  100. this.currentPhone = options.currentPhone;
  101. }
  102. },
  103. methods: {
  104. // 返回上一页
  105. goBack() {
  106. uni.navigateBack();
  107. },
  108. // 显示国家选择器
  109. showCountrySelector() {
  110. uni.showToast({
  111. title: '选择国家/地区',
  112. icon: 'none'
  113. });
  114. },
  115. // 验证码输入处理
  116. handleDigitInput(index, event) {
  117. const value = event.detail.value;
  118. this.verificationDigits[index] = value;
  119. // 自动跳转到下一框
  120. if (value && index < 4) {
  121. this.$nextTick(() => {
  122. const nextInput = this.$el.querySelector(`input[data-index="${index + 1}"]`);
  123. if (nextInput) nextInput.focus();
  124. });
  125. }
  126. },
  127. // 删除处理
  128. handleDelete(index) {
  129. if (!this.verificationDigits[index] && index > 0) {
  130. this.$nextTick(() => {
  131. const prevInput = this.$el.querySelector(`input[data-index="${index - 1}"]`);
  132. if (prevInput) prevInput.focus();
  133. });
  134. }
  135. },
  136. // 获取验证码
  137. async getVerificationCode() {
  138. if (!this.newPhone) {
  139. uni.showToast({
  140. title: '请输入新手机号',
  141. icon: 'none'
  142. });
  143. return;
  144. }
  145. if (this.newPhone.length !== 11) {
  146. uni.showToast({
  147. title: '请输入正确的手机号',
  148. icon: 'none'
  149. });
  150. return;
  151. }
  152. uni.showLoading({
  153. title: '发送中...'
  154. });
  155. try {
  156. // 调用发送验证码API
  157. const res = await this.request({
  158. url: '/msg/sendMsg/' + this.newPhone + '/changePhone',
  159. method: 'GET'
  160. });
  161. uni.hideLoading();
  162. if (res.status === 0) {
  163. uni.showToast({
  164. title: '验证码发送成功',
  165. icon: 'success'
  166. });
  167. this.startCountdown();
  168. } else {
  169. uni.showToast({
  170. title: res.msg || '发送失败,请重试',
  171. icon: 'none'
  172. });
  173. }
  174. } catch (error) {
  175. uni.hideLoading();
  176. uni.showToast({
  177. title: '网络错误,请重试',
  178. icon: 'none'
  179. });
  180. }
  181. },
  182. // 开始倒计时
  183. startCountdown() {
  184. this.isCountingDown = true;
  185. this.countdown = 60;
  186. this.countdownText = '60秒后重新获取';
  187. const timer = setInterval(() => {
  188. this.countdown--;
  189. this.countdownText = `${this.countdown}秒后重新获取`;
  190. if (this.countdown <= 0) {
  191. clearInterval(timer);
  192. this.isCountingDown = false;
  193. this.countdownText = '获取验证码';
  194. }
  195. }, 1000);
  196. },
  197. // 确认修改
  198. async confirmChange() {
  199. if (!this.canConfirm) {
  200. uni.showToast({
  201. title: '请完整填写信息',
  202. icon: 'none'
  203. });
  204. return;
  205. }
  206. uni.showLoading({
  207. title: '处理中...'
  208. });
  209. try {
  210. const userId = uni.getStorageSync('userId');
  211. const res = await this.request({
  212. url: '/user/changePhone',
  213. method: 'GET',
  214. data: {
  215. userId: userId,
  216. phone: this.newPhone,
  217. msg: this.verificationDigits.join('')
  218. }
  219. });
  220. uni.hideLoading();
  221. if (res.status === 0) {
  222. uni.showToast({
  223. title: '修改成功',
  224. icon: 'success'
  225. });
  226. setTimeout(() => {
  227. uni.navigateBack();
  228. }, 1500);
  229. } else {
  230. uni.showToast({
  231. title: res.msg || '修改失败',
  232. icon: 'none'
  233. });
  234. }
  235. } catch (error) {
  236. uni.hideLoading();
  237. uni.showToast({
  238. title: '网络错误,请重试',
  239. icon: 'none'
  240. });
  241. }
  242. },
  243. // 请求封装
  244. request(options) {
  245. return new Promise((resolve, reject) => {
  246. uni.request({
  247. url: configdata.APIHOST1 + options.url,
  248. method: options.method || 'POST',
  249. data: options.data || {},
  250. success: resolve,
  251. fail: reject
  252. });
  253. });
  254. }
  255. }
  256. }
  257. </script>
  258. <style lang="scss" scoped>
  259. .modify-phone-page {
  260. min-height: 100vh;
  261. background: #ffffff;
  262. }
  263. /* 导航栏 */
  264. .custom-navbar {
  265. position: fixed;
  266. top: 0;
  267. left: 0;
  268. right: 0;
  269. padding-top: 80rpx;
  270. background-color: #ffffff;
  271. z-index: 9999;
  272. // border-bottom: 1rpx solid #f0f0f0;
  273. .navbar-content {
  274. display: flex;
  275. align-items: center;
  276. justify-content: space-between;
  277. height: 88rpx;
  278. padding: 0 40rpx;
  279. .nav-left, .nav-right {
  280. width: 60rpx;
  281. height: 60rpx;
  282. display: flex;
  283. align-items: center;
  284. justify-content: center;
  285. }
  286. .nav-title {
  287. color: rgba(51, 51, 51, 1);
  288. font-family: PingFang SC;
  289. font-size: 36rpx;
  290. font-weight: 600;
  291. line-height: 50rpx;
  292. text-align: center;
  293. }
  294. }
  295. }
  296. /* 主要内容 */
  297. .main-content {
  298. margin-top: 168rpx;
  299. padding: 40rpx 30rpx;
  300. }
  301. .page-title {
  302. color: rgba(51, 51, 51, 1);
  303. font-family: DM Sans;
  304. font-size: 48rpx;
  305. font-weight: 700;
  306. line-height: 60rpx;
  307. letter-spacing: 0px;
  308. text-align: left;
  309. margin-bottom: 20rpx;
  310. }
  311. .description {
  312. color: rgba(102, 102, 102, 1);
  313. font-family: DM Sans;
  314. font-size: 24rpx;
  315. font-weight: 400;
  316. line-height: 32rpx;
  317. letter-spacing: 0.5%;
  318. text-align: left;
  319. margin-bottom: 20rpx;
  320. }
  321. .current-phone-section {
  322. display: flex;
  323. align-items: center;
  324. margin-bottom: 20rpx;
  325. gap: 16rpx;
  326. .current-label , .current-phone{
  327. color: rgba(102, 102, 102, 1);
  328. font-family: DM Sans;
  329. font-size: 24rpx;
  330. font-weight: 400;
  331. line-height: 32rpx;
  332. letter-spacing: 0.5%;
  333. text-align: left;
  334. }
  335. }
  336. /* 手机号输入 */
  337. .input-section {
  338. margin-bottom: 40rpx;
  339. }
  340. .phone-input-container {
  341. width: 100%;
  342. height: 88rpx;
  343. // border: 1px solid rgba(227, 231, 236, 1);
  344. // border-radius: 24px;
  345. background: rgba(255, 255, 255, 1);
  346. display: flex;
  347. align-items: center;
  348. // padding: 0 20rpx;
  349. .country-selector {
  350. display: flex;
  351. align-items: center;
  352. justify-content: center;
  353. width: 208rpx;
  354. height: 96rpx;
  355. border-radius: 12rpx;
  356. background: rgba(247, 248, 249, 1);
  357. // border-right: 1rpx solid #e4e6ea;
  358. margin-right: 20rpx;
  359. gap: 26rpx;
  360. .country-code {
  361. color: rgba(56, 59, 70, 1);
  362. font-family: DM Sans;
  363. font-size: 32rpx;
  364. font-weight: 500;
  365. line-height: 48rpx;
  366. letter-spacing: 0%;
  367. text-align: center;
  368. }
  369. }
  370. .phone-input {
  371. flex: 1;
  372. width: 446rpx;
  373. height: 96rpx;
  374. border-radius: 12rpx;
  375. padding: 0 32rpx;
  376. background: rgba(247, 248, 249, 1);
  377. // color: rgba(195, 196, 199, 1);
  378. font-family: DM Sans;
  379. font-size: 32rpx;
  380. font-weight: 400;
  381. line-height: 48rpx;
  382. letter-spacing: 0%;
  383. text-align: left;
  384. &::placeholder {
  385. color: rgba(195, 196, 199, 1);
  386. }
  387. }
  388. }
  389. /* 验证码部分 */
  390. .verification-section {
  391. margin-bottom: 60rpx;
  392. }
  393. .verify-input-container {
  394. display: flex;
  395. flex-direction: column;
  396. width: 100%;
  397. gap: 20rpx;
  398. padding: 20rpx 0;
  399. }
  400. .verify-boxes {
  401. display: flex;
  402. gap: 20rpx;
  403. justify-content: space-between;
  404. width: 100%;
  405. .verify-box {
  406. width: 110rpx;
  407. height: 96rpx;
  408. border: 1px solid rgba(234, 239, 245, 1);
  409. border-radius: 24rpx;
  410. background: rgba(245, 249, 254, 1);
  411. text-align: center;
  412. color: rgba(23, 23, 37, 1);
  413. font-family: PingFang SC;
  414. font-size: 32rpx;
  415. font-weight: 500;
  416. line-height: 80rpx;
  417. &:focus {
  418. border-color: rgba(24, 144, 255, 1);
  419. background: rgba(255, 255, 255, 1);
  420. }
  421. &::placeholder {
  422. color: rgba(155, 155, 155, 1);
  423. }
  424. }
  425. }
  426. .get-code-btn {
  427. color:rgba(1, 107, 246, 1);
  428. font-family: DM Sans;
  429. font-size: 26rpx;
  430. font-weight: 400;
  431. line-height: 32rpx;
  432. letter-spacing: 0.5%;
  433. text-align: left;
  434. &.disabled {
  435. color: rgba(155, 155, 155, 1);
  436. }
  437. }
  438. /* 底部按钮 */
  439. .bottom-btn-container {
  440. padding: 30rpx;
  441. background: #fff;
  442. // border-top: 1rpx solid #f0f0f0;
  443. z-index: 9999;
  444. }
  445. .confirm-btn {
  446. width: 100%;
  447. height: 88rpx;
  448. background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
  449. border-radius: 44rpx;
  450. display: flex;
  451. align-items: center;
  452. justify-content: center;
  453. &.disabled {
  454. opacity: 0.4;
  455. }
  456. text {
  457. color: rgba(255, 255, 255, 1);
  458. font-family: PingFang SC;
  459. font-size: 32rpx;
  460. font-weight: 600;
  461. line-height: 44rpx;
  462. }
  463. }
  464. </style>