<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> 