phe-mini/pages/auth/forgot.vue

<template>
  <view class="forgot-container">
    <view class="form-container">
      <text class="title">找回密码</text>
      
      <view class="input-group">
        <text class="label">手机号/邮箱</text>
        <input 
          v-model="account" 
          class="input" 
          placeholder="请输入注册时的手机号或邮箱"
          type="text"
        />
      </view>
      
      <view class="input-group">
        <text class="label">验证码</text>
        <view class="code-input-group">
          <input 
            v-model="code" 
            class="input code-input" 
            placeholder="请输入验证码"
            type="number"
          />
          <button 
            class="code-btn" 
            :disabled="countdown > 0"
            @click="getVerificationCode"
          >
            {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
          </button>
        </view>
      </view>
      
      <view class="input-group">
        <text class="label">新密码</text>
        <input 
          v-model="newPassword" 
          class="input" 
          placeholder="请输入新密码"
          :type="showPassword ? 'text' : 'password'"
        />
        <text 
          class="toggle-password" 
          @click="showPassword = !showPassword"
        >
          {{ showPassword ? '隐藏' : '显示' }}
        </text>
      </view>
      
      <button 
        class="submit-btn" 
        :disabled="!canSubmit"
        @click="handleResetPassword"
      >
        重置密码
      </button>
      
      <view class="footer">
        <text>想起密码了？</text>
        <text class="link" @click="goToLogin">返回登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      account: '',
      code: '',
      newPassword: '',
      showPassword: false,
      countdown: 0,
      timer: null
    };
  },
  computed: {
    canSubmit() {
      return this.account && this.code && this.newPassword;
    }
  },
  methods: {
    async getVerificationCode() {
      if (!this.account) {
        uni.showToast({
          title: '请输入手机号或邮箱',
          icon: 'none'
        });
        return;
      }
      
      try {
        // TODO: 调用获取验证码接口
        await this.$api.auth.getResetCode({
          account: this.account
        });
        
        uni.showToast({
          title: '验证码已发送',
          icon: 'none'
        });
        
        this.startCountdown();
      } catch (error) {
        uni.showToast({
          title: error.message || '获取验证码失败',
          icon: 'none'
        });
      }
    },
    
    startCountdown() {
      this.countdown = 60;
      this.timer = setInterval(() => {
        if (this.countdown <= 0) {
          clearInterval(this.timer);
          return;
        }
        this.countdown--;
      }, 1000);
    },
    
    async handleResetPassword() {
      try {
        // TODO: 调用重置密码接口
        await this.$api.auth.resetPassword({
          account: this.account,
          code: this.code,
          newPassword: this.newPassword
        });
        
        uni.showToast({
          title: '密码重置成功',
          icon: 'success'
        });
        
        this.goToLogin();
      } catch (error) {
        uni.showToast({
          title: error.message || '重置密码失败',
          icon: 'none'
        });
      }
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/auth/login'
      });
    }
  },
  
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style scoped>
.forgot-container {
  padding: 40rpx;
}

.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 60rpx;
  display: block;
  text-align: center;
}

.input-group {
  margin-bottom: 40rpx;
  position: relative;
}

.label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
  display: block;
}

.input {
  height: 88rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  width: 100%;
  box-sizing: border-box;
}

.code-input-group {
  display: flex;
  align-items: center;
}

.code-input {
  flex: 1;
  margin-right: 20rpx;
}

.code-btn {
  width: 200rpx;
  height: 88rpx;
  background-color: #f5f5f5;
  color: #007aff;
  border-radius: 8rpx;
  font-size: 24rpx;
}

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

.toggle-password {
  position: absolute;
  right: 24rpx;
  top: 50rpx;
  color: #007aff;
  font-size: 24rpx;
}

.submit-btn {
  height: 88rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  margin-bottom: 40rpx;
}

.submit-btn[disabled] {
  background-color: #ccc;
}

.footer {
  text-align: center;
  font-size: 24rpx;
  color: #666;
}

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