add: finish register page

pages.json

@@ -1,6 +1,6 @@
 {
   "pages": [
-    /*{
+    {
       "path": "pages/transition/page1/page1",
       "style": {
         "navigationStyle": "custom"
@@ -53,7 +53,7 @@
       "style": {
         "navigationStyle": "custom"
       }
-    },*/
+    },
     {
       "path": "pages/information/sex/sex",
       "style": {

pages/homepages/main/main.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-
+	这是主页面
   </view>
 </template>
 

pages/login/account_login/account_login.vue

@@ -68,8 +68,10 @@ const captchaButtonText = computed(() => isSendCaptcha.value ? (codeTime.value+"
 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");
+
 //进入验证码登录页面
 function toCaptchaEvent(){
 	isPassagePage.value = false;
@@ -98,7 +100,7 @@ function sendCaptchaEvent(){
 function login(){
   //TODO:登录操作向后端发送验证码的逻辑
   uni.navigateTo({
-    url: '@pages/information/sex/sex.vue'//登录成功后跳转的页面
+    url: '/pages/homepages/main/main'//登录成功后跳转的页面
   })
 }
 //进入密码登录页面

pages/login/register/register.vue

@@ -1,17 +1,260 @@
 <template>
-  <view>
+  <view class="register_box">
-	这是注册页面
+	<!-- 返回图标 -->
+	<navigator url="/pages/login/account_login/account_login">
+		<image class="return_image" src="../../../static/login/register/pictures/return_icon.png"></image>
+	</navigator>
+	<!-- 欢迎文字 -->
+	<view class="welcom_words">Hi,欢迎加入</view>
+	<!-- 软件名称 -->
+	<view class="soft_name">Fit Journey</view>
+	<!-- 注册表单 -->
+	<form class="register_form">
+		<!-- 手机号输入 -->
+		<view class="phone_number_box register_form_item">
+			<input type="text" class="phone_number" placeholder="请输入你的电话号码"/>
+		</view>
+		<!-- 验证码输入 -->
+		<view class="captcha_box register_form_item">
+			<input type="text" class="captcha" placeholder="请输入你的验证码"/>
+			<button class="captcha_button" @click="sendCaptchaEvent"
+				:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
+				{{captchaButtonText}}
+			</button>
+		</view>
+		<!-- 密码输入 -->
+		<view class="passage_box register_form_item">
+			<input type="text" class="passage" :password="isOpened_1" placeholder="请输入你的密码"/>
+			<image @click="openEyesEvent_1" class="eyes" :src="eyesStateIcon_1"></image>
+		</view>
+		<!-- 确认密码输入 -->
+		<view class="passage_box register_form_item">
+			<input type="text" class="passage" :password="isOpened_2" placeholder="请再次确认密码"/>
+			<image @click="openEyesEvent_2" class="eyes" :src="eyesStateIcon_2"></image>
+		</view>
+		<!-- 注册按钮 -->
+		<view class="register_button_box register_form_item">
+			<button class="register_button" @click="registerEvent">注册</button>
+		</view>
+	</form>
   </view>
 </template>
 
-<script>
+<script setup>
-export default {
+import { ref, computed } from 'vue';
-  data() {
+	
-    return {};
+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 isOpened_1 = ref(true);	//输入框是否密码显示的标志
+const eyesStateIcon_1 = ref("../../../static/login/register/pictures/closedeyes.png");
+const isOpened_2 = ref(true);	//输入框是否密码显示的标志
+const eyesStateIcon_2 = ref("../../../static/login/register/pictures/closedeyes.png");
+
+//进入验证码登录页面
+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 openEyesEvent_1(){
+	if (isOpened_1.value)
+	{
+		isOpened_1.value = false;
+		eyesStateIcon_1.value = "../../../static/login/register/pictures/openedeyes.png";
+	}
+	else
+	{
+		isOpened_1.value =true;
+		eyesStateIcon_1.value = "../../../static/login/register/pictures/closedeyes.png";
+	 }
 }
+// 判断确认的密码是否要明文显示
+function openEyesEvent_2(){
+	if (isOpened_2.value)
+	{
+		isOpened_2.value = false;
+		eyesStateIcon_2.value = "../../../static/login/register/pictures/openedeyes.png";
+	}
+	else
+	{
+		isOpened_2.value =true;
+		eyesStateIcon_2.value = "../../../static/login/register/pictures/closedeyes.png";
+	 }
+}
+
+//注册按钮点击事件
+function registerEvent(){
+	//注册成功后跳转到选择性别页面
+	uni.navigateTo({
+		url: '/pages/information/sex/sex',
+		animationType: 'pop-in',	//动画，但好像没作用
+		animationDuration: 200
+	});
+}
+
 </script>
 
 <style lang="scss">
+	.register_box{
+		background-image: url("../../../static/login/register/pictures/background.png");
+		background-size: cover;
+		background-position: center;
+		height: 100vh;
+		width: auto;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		object-fit: contain;
+		// 返回图标
+		.return_image{
+			position: absolute;
+			left: 16.5%;
+			right: 80.1%;
+			top: 8.62%;
+			bottom: 89.09%;
+			width: 0.8rem;
+			height: auto;
+			object-fit: contain;
+		}
+		//欢迎文字
+		.welcom_words{
+			position: absolute;
+			left: 12.4%;
+			top: 30.8%;
+			font-family: 'PingFang SC';
+			font-size: 1.4rem;
+			color: #000364;
+		}
+		//软件名称
+		.soft_name{
+			position: absolute;
+			left: 12.4%;
+			top: 34.5%;
+			font-family: 'PingFang SC';
+			font-size: 1rem;
+			color: #000364;
+		}
+		//注册表单
+		.register_form{
+			position: absolute;
+			width: 74.5%;
+			height: 33.6%;
+			top: 40%;
+				//每个表单项
+				.register_form_item{
+					height: 15.6%;
+					margin-bottom: 5%;
+				}
+				//手机号盒子
+				.phone_number_box{
+					padding-left: 3%;
+					background-color: #D5E9FF;
+					border-radius: 12px;
+					.phone_number{
+						height: 100%;
+						padding-left: 11%;
+						background-image: url("../../../static/login/register/pictures/phone_icon.png");
+						background-repeat: no-repeat;
+						background-size: 0.8rem;
+						background-position: 3% 50%;
+						font-size: 0.8rem;
+					}
+				}
+				// 验证码盒子
+				.captcha_box{
+					display: flex;
+					align-items: center;
+					padding-left: 3%;
+					background-color: #D5E9FF;
+					border-radius: 12px;
+					position: relative;
+					// 输入框
+					.captcha{
+						height: 100%;
+						padding-left: 11%;
+						background-image: url("../../../static/login/register/pictures/captcha_icon.png");
+						background-repeat: no-repeat;
+						background-size: 0.8rem;
+						background-position: 4.5% 50%;
+						font-size: 0.8rem;
+					}
+					// 按钮
+					.captcha_button{
+						width: 5.5rem;
+						height: 1.9rem;
+						border-radius: 15px;
+						font-size: 0.8rem;
+						color: #000364;
+						position: absolute;
+						right: 5%;
+					}
+				}
+				//密码输入盒子；确认密码盒子
+				.passage_box{
+					display: flex;
+					align-items: center;
+					padding-left: 3%;
+					background-color: #D5E9FF;
+					border-radius: 12px;
+					position: relative;
+					.passage{
+						height: 100%;
+						padding-left: 11%;
+						background-image: url("../../../static/login/register/pictures/lock_icon.png");
+						background-repeat: no-repeat;
+						background-size: 0.8rem;
+						background-position: 4.7% 50%;
+						font-size: 0.8rem;
+					}
+					.eyes{
+						width: 1rem;
+						height: 1rem;
+						position: absolute;
+						right: 9%;
+					}
+				}
+				//注册按钮
+				.register_button{
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-top: 8%;
+					height: 100%;
+					border-radius: 12px;
+					background-color: #4A69F7;
+					color: #FFFCFC;
+					text-align: center;
+					font-size: 1.2rem;
+				}
+			// }
+		}
+	}
 
 </style>

unpackage/dist/cache/.vite/deps/_metadata.json

@@ -1,8 +1,8 @@
 {
-  "hash": "3dcffc29",
+  "hash": "239ea83a",
-  "configHash": "cc60d382",
+  "configHash": "3f4641d2",
   "lockfileHash": "e3b0c442",
-  "browserHash": "e601f541",
+  "browserHash": "619b4131",
   "optimized": {},
   "chunks": {}
 }