front/pages/login/account_login/account_login.vue

<template>
  <view class="background">
	<!-- 欢迎 -->
	<image class="welcome" src="../../../static/login/account_login/welcome.png"></image>
	<!-- 登录部分 -->
	<view class="login_part">
		<!-- 导航栏 -->
		<view class="login_ways">

			<view class="account_words" @click="toPassageEvent" 
				:style="{borderBottom:passageWordsBottomBorder}">
				密码登录
			</view>


			<view class="captcha_words" @click="toCaptchaEvent" 
				:style="{borderBottom:captchaWordsBottomBorder}">
				验证码登录
			</view>
		</view>


		<!-- 表单部分 -->
		<form class="login_form">
			<view class="form_input">
				<!-- 账号输入框 -->
				<view class="account_box login_form_item">
					<view class="form_input_box">
						<input class="account" v-model="phone_number" type="text" placeholder="请输入你的电话号码"/>
					</view>
					<view class="error_tip" v-if="isPhoneError">*该手机号未注册</view>
				</view>
				<!-- 密码输入框 -->
				<view class="passage_box login_form_item" v-if="isPassagePage">
					<view class="form_input_box passage_input_box">
						<input class="passage" v-model="password" :password="isOpened" type="text" placeholder="请输入你的密码"/>
						<image @click="openEyesEvent" class="eyes" :src="eyesStateIcon"></image>
					</view>
					<view class="error_tip" v-if="isPassageError">*密码错误</view>
				</view>




				<!-- 验证码输入框 -->
				<view class="captcha_box login_form_item" v-else>
					<view class="form_input_box captcha_input_box">
						<input class="captcha"  v-model="code" name="captcha" type="text" placeholder="请输入你的验证码"/>
						<button class="captcha_button" @click="sendCaptchaEvent" 
							:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
							{{captchaButtonText}}
						</button>
					</view>
					<view class="error_tip" v-if="isCaptchaError">*验证码错误</view>
				</view>
				<view class="forget_passage" @click="forgetPassageClick">忘记密码？</view>
				<view class="button_box login_form_item">
					<button name="submit_button" class="login_button" @click="login">登录</button>
				</view>
			</view>
		</form>




	</view>
	<!-- 前往注册 -->
	<navigator url="/pages/login/register/register">
		<image class="goto_register" src="../../../static/login/account_login/register.png"></image>
	</navigator>
	<!-- 其他登录部分 -->
<!--	<view class="otherways_part">
		<image class="otherways_tips" src="../../../static/login/account_login/other_ways.png"></image>
		<view class="two_ways">
			<image class="qq_icon" src="../../../static/login/account_login/qq_icon.png"></image>
			<image class="weixin_icon" src="../../../static/login/account_login/weixin_icon.png"></image>
		</view>
	</view>-->
  </view>
</template>

<script setup>

import { ref, computed , onMounted } from 'vue';
import app from "@/App.vue";

const isSendCaptcha = ref(false);	//是否发送了验证码的标志
var codeTime = ref(0);	//验证码的倒计时
const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色
const captchaButtonColor = computed(() => isSendCaptcha.value ? "#ffffff" : "#000364");//验证码按钮的字体颜色
const captchaButtonText = computed(() => isSendCaptcha.value ? (codeTime.value+"s后重新发送"):"发送验证码")



const phone_number=ref("");//用户输入的手机号
const password=ref("");//用户输入的密码
const code=ref("");//发送的验证码
const which_way_to_login = ref("0");	//登录方式 使用0为密码登录 使用1为验证码登录
const access_token = ref("0");	//登录成功后返回的token






const isPassagePage = ref(true);	//是否是密码登录页的标志；
const passageWordsBottomBorder = computed(() => isPassagePage.value? "0.1rem solid #094ABC":"none");	//密码登录导航的下边框
const captchaWordsBottomBorder = computed(() => isPassagePage.value? "none":"0.1rem solid #094ABC");	//验证码登录导航的下边框

const isOpened = ref(true);	//密码是否明文显示的标志
const eyesStateIcon = ref("../../../static/login/account_login/login_part/closedeyes.png");

const isPhoneError = ref(false);
const isPassageError = ref(false);
const isCaptchaError = ref(false);
onMounted(() => {//页面加载时 登录方式为密码登录
  which_way_to_login.value= 0;
  console.log(which_way_to_login.value);
});
//进入验证码登录页面
function toCaptchaEvent(){
	isPassagePage.value = false;
  which_way_to_login.value=1;//切换到验证码登录界面
}
function sendCaptchaEvent(){
  // 校验手机号是否是中国手机号
  const isChinaPhone = /^1[3-9]\d{9}$/.test(phone_number.value);
  if (!isChinaPhone) {
    uni.showToast({
      title: '请输入有效的中国大陆手机号',
      icon: "none"
    });
    return; // 如果手机号无效，停止执行
  }
  if (codeTime.value>0){	//说明在倒计时
		uni.showToast({	//弹出提示框
			title: '不能重复获取',
			icon:"none"
		});
	} else{	//说明没有发送，也没倒计时
		codeTime.value = 60;
		isSendCaptcha.value = true;
		var timer = setInterval(()=>{
			codeTime.value--;
			if(codeTime.value<1){
				clearInterval(timer);
				isSendCaptcha.value = false;
				codeTime.value = 0;
			}
		},1000)
	}
  //这里向后端执行请求
  const app = getApp();
  // 向后端发送请求
  uni.request({
    url: app.globalData.fit_journey_login_address + '/phone_code_register/getPhoneCode',
    method: 'POST',
    header: {
      'content-type': 'application/x-www-form-urlencoded',
    },
    data: {
      phone:String(phone_number.value)
    },
    success: (res) => {
      uni.showToast({
        title: '发送验证码成功，请注意查收~',
        icon: "none"
      });

    },
    error: (res) => {
      console.log("请求失败！请求数据是", res);
    }
  });
}
function login() {
  //向后端发送请求
  uni.request({
    url:app.globalData.fit_journey_login_address+'/common/isPhoneRegistered',
    header: {
      'content-type': 'application/x-www-form-urlencoded',
    },
    method:'GET',
    data:{
      phone:phone_number.value,
    },
    success:(res)=>{
      console.log(res);
      if(res.data.code===200){
        uni.showToast({
          title: '手机号未注册或输入错误~',
          icon: "none"
        });
        return 0;
      }
    },
  })
  console.log(which_way_to_login.value);
  if (which_way_to_login.value === 0) {	//密码登录
    console.log("这里开始运行了");
    // 获取后端服务器地址
    const serverAddress = app.globalData.fit_journey_login_address + '/AccountLogin/PhonePasswordLogin';
    console.log("后端服务器的地址是" + serverAddress);
    console.log("发送的账号是" + String(phone_number.value));
    console.log("发送的密码是" + String(password.value));
    if(phone_number.value==null||code.value==null){
      uni.showToast({
        title: '手机号和密码不能为空',
        icon: "none"
      });
    }
    // 向后端发送请求
    uni.request({
      url: serverAddress,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      data: {
         phone: String(phone_number.value),
        password: String(password.value)
      },
      success: (res) => {
        if (res.statusCode === 500) {
          uni.showToast({
            title: '账号或密码错误',
            icon: "none"
          });
        } else {
          uni.showToast({
            title: '登录成功',
            icon: "none"
          });
          access_token.value = res.data.data.token;
          console.log("登录成功!从后端收集的token是：", access_token.value);
          // 存储 token 到本地
          uni.setStorage({
            key: 'access_token', // 本地存储的键名
            data: access_token.value, // 存储的值
            success: () => {
              console.log("Token 已存储到本地！");
            },
            fail: () => {
              console.error("Token 存储失败！");
            }
          });
          console.log(access_token.value);
          console.log("登录成功!从后端收集的token是：", uni.getStorageSync('access_token'));
          uni.navigateTo({
            url: '/pages/information/sex/sex'//登录成功后跳转的页面
          })
        }
      },
      error: (res) => {
        console.log("请求失败！请求数据是", res);
        uni.showToast({
          title: '登录失败，服务器错误',
          icon: "none"
        });
      }
    });
  } else {	//验证码登录
    console.log("验证码登录部分开始运行了");
    // 获取后端服务器地址
    const serverAddress = app.globalData.fit_journey_login_address + '/PhoneLogin/phoneLogin';
    console.log("后端服务器的地址是" + serverAddress);
    console.log("发送的账号是" + String(phone_number.value));
    console.log("发送的code是" + String(code.value));
    if(phone_number.value==null||code.value==null){
      uni.showToast({
        title: '手机号和验证码不能为空',
        icon: "none"
      });
    }
    // 向后端发送请求
    uni.request({
      url: serverAddress,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded',
      },
      data: {
        phone: String(phone_number.value),
        code: String(code.value)
      },
      success: (res) => {
        console.log(res);
        if (res.statusCode === 500) {
          uni.showToast({
            title: '账号或密码错误,或账号没有进行注册',
            icon: "none"
          });
        } else {
          uni.showToast({
            title: '登录成功',
            icon: "none"
          });
          access_token.value = res.data.data.token;
          console.log("登录成功!从后端收集的token是：", access_token.value);
          // 存储 token 到本地
          uni.setStorage({
            key: 'access_token', // 本地存储的键名
            data: access_token.value, // 存储的值
            success: () => {
              console.log("Token 已存储到本地！");
            },
            fail: () => {
              console.error("Token 存储失败！");
            }
          });
          console.log(access_token.value);
          console.log("登录成功!从后端收集的token是：", uni.getStorageSync('access_token'));

          //登录成功进行界面的跳转操作
          uni.navigateTo({
            url: '/pages/information/sex/sex'//登录成功后跳转的页面
          })
        }
      },
      error: (res) => {
        console.log("请求失败！请求数据是", res);
        uni.showToast({
          title: '登录失败，服务器错误',
          icon: "none"
        })
      }
    })
  }
}
//进入密码登录页面
function toPassageEvent(){
	isPassagePage.value = true;
  which_way_to_login.value=0;
}
// 判断密码是否要明文显示
function openEyesEvent()
{
	if (isOpened.value)
	 {
		 isOpened.value = false;
		 eyesStateIcon.value = "../../../static/login/account_login/login_part/openedeyes.png"
	 }
	else
	 {
		 isOpened.value =true;
		 eyesStateIcon.value = "../../../static/login/account_login/login_part/closedeyes.png";
	 }
}

function forgetPassageClick(){
	//TODO:进入到忘记密码界面
	uni.navigateTo({
		url:'/pages/login/forget_password/forget_password',
		animationType: 'pop-in',
		animationDuration: 200
	})
}
</script>
<style lang="scss">
@import "@/static/login/account_login/css/acccount_login.scss";
</style>