123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- <template>
- <view class="change-phone-container">
- <view class="header">更换手机号</view>
- <view class="form">
- <input v-model="newPhone" type="number" maxlength="11" placeholder="请输入新手机号" class="input" />
- <view class="code-row">
- <input v-model="code" maxlength="6" placeholder="请输入验证码" class="input code-input" />
- <button class="code-btn" :disabled="countdown>0" @click="sendCode">{{ countdown>0 ? countdown+'s' : '获取验证码' }}</button>
- </view>
- <button class="submit-btn" @click="submit">确认更换</button>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- newPhone: '',
- code: '',
- countdown: 0,
- timer: null
- }
- },
- methods: {
- sendCode() {
- if (!/^1[3-9]\d{9}$/.test(this.newPhone)) {
- uni.showToast({ title: '请输入正确手机号', icon: 'none' })
- return
- }
- // 调用后端发送验证码接口
- uni.request({
- url: 'http://localhost:9527/api/sendCode',
- method: 'POST',
- data: { phone: this.newPhone }
- })
- uni.showToast({ title: '验证码已发送', icon: 'success' })
- this.countdown = 60
- this.timer = setInterval(() => {
- this.countdown--
- if (this.countdown <= 0) clearInterval(this.timer)
- }, 1000)
- },
- submit() {
- if (!/^1[3-9]\d{9}$/.test(this.newPhone)) {
- uni.showToast({ title: '请输入正确手机号', icon: 'none' })
- return
- }
- if (!/^\d{6}$/.test(this.code)) {
- uni.showToast({ title: '请输入6位验证码', icon: 'none' })
- return
- }
- // 调用后端更换手机号接口
- uni.request({
- url: 'http://localhost:9527/api/updatePhone',
- method: 'POST',
- data: {
- uid: uni.getStorageSync('uid'),
- phone: this.newPhone,
- code: this.code
- },
- success: (res) => {
- if (res.statusCode === 200 && res.data.code === 200) {
- uni.showToast({ title: '更换成功', icon: 'success' })
- setTimeout(() => uni.navigateBack(), 1000)
- } else {
- uni.showToast({ title: res.data.message || '更换失败', icon: 'none' })
- }
- }
- })
- }
- },
- onUnload() {
- if (this.timer) clearInterval(this.timer)
- }
- }
- </script>
- <style scoped>
- .change-phone-container {
- min-height: 100vh;
- background: #f7f8fa;
- padding: 40rpx 0;
- }
- .header {
- text-align: center;
- font-size: 36rpx;
- font-weight: bold;
- margin-bottom: 40rpx;
- background: #fff;
- padding: 32rpx 0;
- }
- .form {
- background: #fff;
- border-radius: 20rpx;
- margin: 0 32rpx;
- padding: 40rpx 32rpx;
- box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
- display: flex;
- flex-direction: column;
- gap: 32rpx;
- }
- .input {
- width: 100%;
- height: 80rpx;
- border: 1rpx solid #eee;
- border-radius: 12rpx;
- padding: 0 24rpx;
- font-size: 30rpx;
- background: #f7f8fa;
- }
- .code-row {
- display: flex;
- gap: 16rpx;
- }
- .code-input {
- flex: 1;
- }
- .code-btn {
- width: 180rpx;
- height: 80rpx;
- background: #409EFF;
- color: #fff;
- border: none;
- border-radius: 12rpx;
- font-size: 28rpx;
- }
- .submit-btn {
- width: 100%;
- background: #409EFF;
- color: #fff;
- border-radius: 12rpx;
- font-size: 32rpx;
- margin-top: 16rpx;
- height: 80rpx;
- }
- </style>
|