nongxiaoyu/pages/login/forget-password.vue

<template>
  <view class="forget-container">
    <view class="page-header">
      <text class="back-icon" @click="goBack">←</text>
      <text class="page-title">找回密码</text>
      <text class="placeholder"></text>
    </view>
    
    <view class="forget-form">
      <view class="form-group">
        <view class="input-group">
          <text class="input-icon">手</text>
          <input 
            class="input" 
            type="number" 
            placeholder="请输入手机号" 
            v-model="formData.phone"
            maxlength="11"
          />
        </view>
      </view>
      
      <view class="form-group">
        <view class="input-group">
          <text class="input-icon">验</text>
          <input 
            class="input" 
            type="number" 
            placeholder="请输入验证码" 
            v-model="formData.code"
            maxlength="6"
          />
          <text 
            class="code-btn" 
            :class="{ disabled: codeBtnDisabled }"
            @click="getVerificationCode"
          >
            {{ codeBtnText }}
          </text>
        </view>
      </view>
      
      <view class="form-group">
        <view class="input-group">
          <text class="input-icon">新</text>
          <input 
            class="input" 
            :type="showPassword ? 'text' : 'password'" 
            placeholder="请设置新密码" 
            v-model="formData.password"
          />
          <text class="eye-icon" @click="togglePasswordVisibility">
            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
          </text>
        </view>
      </view>
      
      <view class="form-group">
        <view class="input-group">
          <text class="input-icon">确</text>
          <input 
            class="input" 
            :type="showConfirmPassword ? 'text' : 'password'" 
            placeholder="请确认新密码" 
            v-model="formData.confirmPassword"
          />
          <text class="eye-icon" @click="toggleConfirmPasswordVisibility">
            {{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
          </text>
        </view>
      </view>
      
      <button class="submit-btn" @click="handleResetPassword">重置密码</button>
      
      <view class="login-link">
        <text>记得密码？</text>
        <text class="link" @click="navigateToLogin">立即登录</text>
      </view>
    </view>
  </view>
</template>

<script>
import { resetPassword, sendVerificationCode } from '@/api/services/auth.js';

export default {
  data() {
    return {
      formData: {
        phone: '',
        code: '',
        password: '',
        confirmPassword: ''
      },
      showPassword: false,
      showConfirmPassword: false,
      codeBtnText: '获取验证码',
      codeBtnDisabled: false,
      countdown: 60
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword
    },
    toggleConfirmPasswordVisibility() {
      this.showConfirmPassword = !this.showConfirmPassword
    },
    navigateToLogin() {
      uni.navigateBack()
    },
    getVerificationCode() {
      if (this.codeBtnDisabled) return
      
      if (!this.formData.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      if (!/^1\d{10}$/.test(this.formData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      // 发送验证码请求
      uni.showLoading({ title: '发送中...' })
      
      // 使用授权服务发送验证码
      sendVerificationCode({
        phone: this.formData.phone,
        type: 'reset'
      })
        .then(() => {
          uni.showToast({
            title: '验证码已发送',
            icon: 'success'
          });
          this.startCountdown();
        })
        .catch(error => {
          uni.showToast({
            title: error,
            icon: 'none'
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    startCountdown() {
      this.codeBtnDisabled = true
      this.codeBtnText = `${this.countdown}秒`
      
      const timer = setInterval(() => {
        this.countdown--
        this.codeBtnText = `${this.countdown}秒`
        
        if (this.countdown <= 0) {
          clearInterval(timer)
          this.codeBtnDisabled = false
          this.codeBtnText = '获取验证码'
          this.countdown = 60
        }
      }, 1000)
    },
    validateForm() {
      if (!this.formData.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return false
      }
      
      if (!/^1\d{10}$/.test(this.formData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return false
      }
      
      if (!this.formData.code) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return false
      }
      
      if (!this.formData.password) {
        uni.showToast({
          title: '请设置新密码',
          icon: 'none'
        })
        return false
      }
      
      if (this.formData.password.length < 6) {
        uni.showToast({
          title: '密码长度不能少于6位',
          icon: 'none'
        })
        return false
      }
      
      if (this.formData.password !== this.formData.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    handleResetPassword() {
      if (!this.validateForm()) return
      
      // 调用重置密码接口
      uni.showLoading({ title: '提交中...' })
      
      // 使用授权服务重置密码
      resetPassword({
        phone: this.formData.phone,
        code: this.formData.code,
        password: this.formData.password
      })
        .then(() => {
          uni.showToast({
            title: '密码重置成功',
            icon: 'success'
          });
          
          // 延迟跳转到登录页
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        })
        .catch(error => {
          uni.showToast({
            title: error,
            icon: 'none'
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    }
  }
}
</script>

<style>
.forget-container {
  min-height: 100vh;
  padding: 0 40rpx 40rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 0;
}

.back-icon {
  font-size: 50rpx;
  color: #333;
  width: 60rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.placeholder {
  width: 60rpx;
}

.forget-form {
  width: 100%;
  margin-bottom: 30rpx;
}

.form-group {
  margin-bottom: 30rpx;
}

.input-group {
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #E0E0E0;
  padding: 20rpx 0;
}

.input-icon {
  width: 44rpx;
  height: 44rpx;
  background-color: #E8F5E9;
  color: #4CAF50;
  font-size: 24rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.input {
  flex: 1;
  height: 44rpx;
  font-size: 28rpx;
}

.eye-icon {
  padding: 0 10rpx;
  color: #999;
}

.code-btn {
  font-size: 28rpx;
  color: #4CAF50;
  padding: 0 10rpx;
}

.code-btn.disabled {
  color: #999;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  background-color: #4CAF50;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  margin: 60rpx 0 30rpx;
}

.login-link {
  display: flex;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
}

.link {
  color: #4CAF50;
  margin-left: 10rpx;
}
</style>