deepChartVueApp/pages/setting/password.vue

<template>
  <view class="main">
    <view :style="{height:iSMT+'px'}"></view>

    <view class="tab">
      <view class="tab-item" :class="{active: activeTab === 'email'}" @click="activeTab = 'email'">邮箱</view>
      <view class="tab-item" :class="{active: activeTab === 'phone'}" @click="activeTab = 'phone'">手机号</view>
    </view>

    <view class="switch-tab">
      <view class="input-list" v-if="activeTab === 'email'">
        <image src="/static/my/changeEmail.png" mode="aspectFit"></image>
        <input type="text" placeholder="请输入邮箱" class="input" v-model="userEmail"/>
        <button class="code-btn" :class="{disabled: gettingCode}" @click="getCode" :disabled="gettingCode">
          {{ gettingCode ? `重新发送 ${time}s` : '获取验证码' }}
        </button>
      </view>

      <view class="input-list" v-else>
        <image src="/static/my/changeBindPhone.png" mode="aspectFit"></image>
        <input type="number" placeholder="请输入手机号" class="input" v-model="userPhone"/>
        <button class="code-btn" :class="{disabled: gettingCode}" @click="getCode" :disabled="gettingCode">
          {{ gettingCode ? `重新发送 ${time}s` : '获取验证码' }}
        </button>
      </view>

      <view class="input-list">
        <image src="/static/my/verification.png" mode="aspectFit"></image>
        <input type="text" placeholder="请输入验证码" class="input" v-model="verifyCode"/>
      </view>
    </view>

    <view class="btn-area">
      <button class="next-btn" @click="goToPwdNext">下一步</button>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  onMounted
} from 'vue'
import {sendEmail, validateCode} from "@/api/setting/password";

const iSMT = ref(0)
const activeTab = ref('email')
const gettingCode = ref(false)
const time = ref(60)

const userEmail = ref('')
const userPhone = ref('')
const verifyCode = ref('')


const getCode = () => {
  if (gettingCode.value) return
  gettingCode.value = true

  time.value = 2

  const timer = setInterval(() => {
    time.value--
    if (time.value <= 0) {
      clearInterval(timer)
      gettingCode.value = false
      time.value = 2
    }
  }, 1000)
  sendEmail({email: userEmail.value})

}

const goToPwdNext = () => {
  if (!userEmail.value) {
    uni.showToast({title: '请输入邮箱', icon: 'none'})
    return
  }
  if (!verifyCode.value) {
    uni.showToast({title: '请输入验证码', icon: 'none'})
    return
  }
  try {
    const res = validateCode({
      loginType:'EMAIL',
      account: userEmail.value,
      verifyCode: verifyCode.value
    })

    console.log('validateCode 返回：', res)

    // 如果返回成功
    if (res.code === 200) {
      uni.showToast({title: '验证成功', icon: 'success'})
      uni.navigateTo({
        url: '../setting/nextPwd'
      })
    } else {
      uni.showToast({title: res.msg || '验证失败', icon: 'none'})
    }
  } catch (err) {
    console.error(err)
    uni.showToast({title: '请求出错', icon: 'none'})
  }
}


onMounted(() => {
  // 获取状态栏高度
  iSMT.value = uni.getSystemInfoSync().statusBarHeight;
})
</script>

<style>
.tab {
  display: flex;
  height: 8vh;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  position: relative;
}

.tab-item.active {
  color: #000;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background-color: #000; /* ????? */
}

.switch-tab {
  background-color: #fff;
  padding: 0 60rpx;
}

.input-list {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7vh;
  border-bottom: 1rpx solid #eee;
}

.input-list image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

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

.code-btn {
  width: 200rpx;
  height: 60rpx;
  font-size: 24rpx;
  border-radius: 10rpx;
  background-color: #eee;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.btn-area {
  height: 8vh;
  background-color: white;
  padding-top: 120rpx;
}


.next-btn {
  width: 610rpx;
  height: 85rpx;
  background-color: #000;
  color: #fff;
  font-size: 30rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>