进度：需要一个弹出组件

Signed-off-by: kevin <kevin@lmve.net>

vue3/pages/index/index.vue

@@ -1,14 +1,13 @@
 <template>
-	<view class="d-flex flex-column">
-		<tabler-header ></tabler-header>
-		<view class="content">
-			<image class="logo" src="/static/logo.png"></image>
-			<view class="text-area">
-				<text class="title">{{title}}</text>
-			</view>
-		</view>
+	<view class="d-flex flex-column ">
+		<div class="page">
+			<tabler-header></tabler-header>
+			
+			<tabler-footer></tabler-footer>
+		</div>
+
 	</view>
-	
+
 </template>
 
 <script>
@@ -53,4 +52,4 @@
 		font-size: 36rpx;
 		color: #8f8f94;
 	}
-</style>
+</style>

vue3/pages/signin.vue

@@ -1,43 +1,50 @@
 <template>
-	
+
 	<view class="d-flex flex-column">
 		<tabler-header type="mini"></tabler-header>
-		
+
 		<div class="page page-center">
-			
+
 			<div class="container container-normal py-4">
 				<div class="row align-items-center g-4">
 					<div class="col-lg">
 						<div class="container-tight">
 							<div class="text-center mb-4">
-								<div class="navbar-brand navbar-brand-autodark"><img src="/static/logo.svg"
-										height="36" alt=""></div>
+								<div class="navbar-brand navbar-brand-autodark"><img src="/static/logo.svg" height="36"
+										alt=""></div>
 							</div>
 							<div class="card card-md">
 								<div class="card-body">
 									<h2 class="h2 text-center mb-4">登录你的账号</h2>
-									
+
 
 									<div class="mb-3">
-										<label class="form-label">用户名</label>
-										<input type="text" class="my-input-field" placeholder="输入你的用户名" autocomplete="off" maxlength="25">
+										<label class="form-label mb-0 ms-1">用户名</label>
+
+										<input type="text" class="my_input_field"
+											:placeholder-class="is_username_err?'my_input_placeholder_error':'my_input_placeholder'"
+											:placeholder="ph_username" autocomplete="off" maxlength="25"
+											v-model="post_data.username">
 									</div>
 									<div class="mb-2">
-										<label class="form-label">
-											密码
-										</label>
-										
-										<input type="password" class="my-input-field" password="true" placeholder="输入你的密码" autocomplete="off" maxlength="100">
-										
+										<label class="form-label mb-0 ms-1">密码</label>
+
+										<input type="password" class="my_input_field"
+											:placeholder-class="is_password_err?'my_input_placeholder_error':'my_input_placeholder'"
+											password="true" :placeholder="ph_password" autocomplete="off"
+											maxlength="100" v-model="post_data.password">
+
 									</div>
 									<div class="mb-2">
-										<label class="d-flex">
-											<checkbox />
-											<span class="form-check-label">保持登录</span>
-										</label>
+										<checkbox-group @change="chack_box_change">
+											<label class="d-flex">
+												<checkbox value="keep_login_in" />
+												<span class="form-check-label">保持登录</span>
+											</label>
+										</checkbox-group>
 									</div>
 									<div class="form-footer">
-										<button class="btn btn-primary w-100">登录</button>
+										<button class="btn btn-primary w-100" @click="submit_data">登录</button>
 									</div>
 
 								</div>
@@ -51,6 +58,7 @@
 									<a href="./forgot-password.html">忘记密码？</a>
 								</span>
 							</div>
+							
 						</div>
 					</div>
 					<div class="col-lg d-none d-lg-block">
@@ -61,38 +69,96 @@
 			</div>
 		</div>
 
-
+	<tabler-footer></tabler-footer>
 	</view>
+
+
 </template>
 
 <script>
+	import {
+		my_network_func
+	} from '../my_network_func'
+	import {
+		Offcanvas
+	} from 'bootstrap'
+
+
 	export default {
 		data() {
 			return {
-
+				ph_username: "输入你的用户名",
+				ph_password: "输入你的密码",
+				is_username_err: false,
+				is_password_err: false,
+				post_data: {
+					is_keep_login: false,
+					username: "",
+					password: "",
+				}
 			}
 		},
 		methods: {
 
+			chack_box_change(val) {
+				//console.log(val.detail.value[0])
+				if (val.detail.value[0] === 'keep_login_in') {
+					this.post_data.is_keep_login = true
+				} else {
+					this.post_data.is_keep_login = false
+				}
+			},
+			submit_data() {
+				//提交登录数据，
+				//先验证数据合法性
+				if (this.post_data.username == "") {
+					this.is_username_err = true
+					this.ph_username = "用户名不能为空"
+
+				} else {
+					this.is_username_err = false
+				}
+
+				if (this.post_data.password == "") {
+					this.is_password_err = true
+					this.ph_password = "密码不能为空"
+
+				} else {
+					this.is_password_err = false
+				}
+
+				if (this.is_username_err === false && this.is_password_err === false) {
+					console.log(this.post_data)
+					my_network_func.post_json("/user/login", this.post_data, (c) => {
+						console.log(c)
+					})
+				} else {
+
+				}
+
+
+
+			}
 		}
 	}
 </script>
 
 <style>
-	.my123{
-		  /* 设置边框：宽度、样式、颜色 */
-		  border: 1px solid #e3e3e3; /* 2像素宽的红色实线边框 */
-		  
-		  /* 设置圆角，值越大，角越圆 */
-		  border-radius: 3px; /* 也可以使用百分比，例如50%会变成圆形 */
-		  
-		  font-size: 24px;
-		
-		
-		
-		 
-		 
-		 
-	}
+	.my123 {
+		/* 设置边框：宽度、样式、颜色 */
+		border: 1px solid #e3e3e3;
+		/* 2像素宽的红色实线边框 */
 
+		/* 设置圆角，值越大，角越圆 */
+		border-radius: 3px;
+		/* 也可以使用百分比，例如50%会变成圆形 */
+
+		font-size: 24px;
+
+
+
+
+
+
+	}
 </style>