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" name="account" 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" name="passage" :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" 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 } 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 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);

//进入验证码登录页面
function toCaptchaEvent(){
	isPassagePage.value = false;
}
//发送验证码事件
function sendCaptchaEvent(){
	console.log("send captcha");
	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)
	};
}
function login(){

  // 获取后端服务器地址
  const serverAddress = app.globalData.fit_journey_login_address + '/phone_code_register/getPhoneCode';
  console.log(String(phoneNumber.value));
  // 发送请求到后端
  uni.request({
    url: serverAddress,
    method: 'POST',
    header: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    data: {
      phone: phoneNumber.value
    },
    success: (res) => {
      console.log(res.data);
    },
    fail: (err) => {
      console.log("请求失败", err);
    }
  });


  //TODO:登录操作
  console.log("login");
  uni.navigateTo({
    url: '/pages/information/sex/sex'//登录成功后跳转的页面
  })
}
//进入密码登录页面
function toPassageEvent(){
	isPassagePage.value = true;
}
// 判断密码是否要明文显示
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>