feat: 登录页

@@ -23,7 +23,7 @@
       checkLogin() {
 		  
         if (!getToken()) {
-          this.$tab.reLaunch('/pages/login') 
+          this.$tab.reLaunch('/pages/login/login') 
         }
       }
     }

 {
 	"pages": [{
-			"path": "pages/login",
+			"path": "pages/login/login",
 			"style": {
-				"navigationBarTitleText": "登录"
+				"navigationBarTitleText": "登录",
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/register",

 <template>
-	<view class="normal-login-container">
-		<view class="logo-content align-center justify-center flex">
-			<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
-			</image>
-			<text class="title">{{globalConfig.appInfo.name}}</text>
+	<view class="login-page">
+		<!-- 自定义头部 -->
+		<view class="header">
+			<image class="header-bg" src="./header_bg.png" />
+			<view class="header-content">
+				<image class="header-logo" src="/static/logo201.png" mode="widthFix" />
+				<text class="header-title">欢迎登录楚江销售系统</text>
+			</view>
 		</view>
-		<view class="login-form-content">
-			<view class="input-item flex align-center">
-				<view class="iconfont icon-user icon"></view>
-				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
+
+		<!-- 表单区 -->
+		<view class="form">
+			<view class="input-item">
+				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" placeholder-style="color:#aaa;" maxlength="30" />
 			</view>
-			<view class="input-item flex align-center">
-				<view class="iconfont icon-password icon"></view>
-				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
+			<view class="input-item">
+				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" placeholder-style="color:#aaa;" maxlength="20" />
 			</view>
-			<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
-				<view class="iconfont icon-code icon"></view>
-				<input v-model="loginForm.captcha" type="text" class="input" placeholder="请输入验证码" maxlength="4" />
-				<view class="login-code">
-					<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
-				</view>
+			<view class="input-row" v-if="captchaEnabled">
+				<input v-model="loginForm.captcha" type="text" class="input" placeholder="请输入验证码" placeholder-style="color:#aaa;" maxlength="4" />
+				<image :src="codeUrl" @click="getCode" class="captcha-img" />
 			</view>
-			<view class="action-btn">
-				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
+
+			<view class="agree-row">
+				<uni-data-checkbox v-model="agreeVal" :localdata="agreeOptions" :multiple="true" />
+				<text @click="handleUserAgrement" class="link">《用户协议》</text>
+				<text @click="handlePrivacy" class="link">《隐私协议》</text>
 			</view>
+
+			<button @click="handleLogin" :disabled="Array.isArray(agreeVal) ? agreeVal.length===0 : !agreeVal" class="login-btn">立即登录</button>
+
 			<view class="reg text-center" v-if="register">
 				<text class="text-grey1">没有账号？</text>
 				<text @click="handleUserRegister" class="text-blue">立即注册</text>
 			</view>
-			<view class="xieyi text-center">
-				<text class="text-grey1">登录即代表同意</text>
-				<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
-				<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
-			</view>
 		</view>
-
 	</view>
 </template>
 
 <script>
-	import {
-		getCodeImg
-	} from '@/api/login'
+	import { getCodeImg } from '@/api/login'
 	import config from '@/config'
 	export default {
 		data() {
@@ -50,6 +48,8 @@
 				globalConfig: getApp().globalData.config,
 				codeUrl: "",
 				captchaEnabled: false,
+				agreeVal: [],
+				agreeOptions: [{ text: '已预览并同意', value: '1' }],
 				// 用户注册开关
 				register: false,
 				//默认登录账号和密码
@@ -72,7 +72,6 @@
 			// 隐私协议
 			handlePrivacy() {
 				let site = this.globalConfig.appInfo.agreements[0]
-
 				this.$tab.navigateTo('/pages/common/webview/index?title=' + site.title + '&url=' + site.url)
 			},
 			// 用户协议
@@ -83,7 +82,6 @@
 			// 获取图形验证码
 			getCode() {
 				getCodeImg().then(res => {
-					console.log('getCodeImgres', res)
 					this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled
 					if (this.captchaEnabled) {
 						this.codeUrl = res.data.image
@@ -117,91 +115,115 @@
 			},
 			// 登录成功后，处理函数
 			loginSuccess(result) {
-				// alert("登录成功")
-				//跳转到首页
 				this.$tab.reLaunch('/pages/index')
-
 			}
 		}
 	}
 </script>
 
-<style lang="scss">
-	page {
-		background-color: #ffffff;
-	}
-
-	.normal-login-container {
-		width: 100%;
+<style scoped lang="scss">
+  page { background-color: #fff; }
 
-		.logo-content {
-			width: 100%;
-			font-size: 21px;
-			text-align: center;
-			padding-top: 15%;
+  .login-page { width: 100%; height: 100%; }
 
-			image {
-				border-radius: 4px;
-			}
-
-			.title {
-				margin-left: 10px;
-			}
+  .header {
+    position: relative;
+    height: 500rpx;
+    overflow: hidden;
+	background: pink;
+	&-bg {
+		width: 100%;
+		height: 100%;
+	}
+	&-content {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 192rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	&-logo {
+		width: 298rpx; height: 120rpx;
+		margin-bottom: 60rpx;
+	}
+	&-title {
+		height: 60rpx;
+		font-weight: 600;
+		font-size: 44rpx;
+		color: rgba(0,0,0,0.9);
+		line-height: 60rpx;
+	}
+  }
+
+  .form {
+    margin: 34rpx auto 0;
+    width: 626rpx;
+  }
+  .input-item {
+    margin-bottom: 40rpx;
+    background-color: #fff;
+    border: 1px solid #F1F1F1;
+    height: 96rpx;
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+  }
+  .input { width: 100%; font-size: 32rpx; padding: 0 24rpx; }
+  .input-row {
+    margin: 30rpx auto;
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    border: 1px solid #e5e7eb;
+    height: 88rpx;
+    border-radius: 18rpx;
+  }
+  .captcha-img { width: 200rpx; height: 88rpx; border-left: 1px solid #e5e7eb; }
+
+  .agree-row { 
+		display: flex; 
+		align-items: center; 
+		color: rgba(0,0,0,0.9); 
+		margin-top: 8rpx; 
+		font-size: 28rpx; 
+		
+		.link {
+			color: #3D48A3;
+		}
+		/* 关键修改：使用深度选择器修改checkbox样式 */
+		::v-deep .uni-data-checkbox {
+			/* 未选中时的颜色 */
+			--checkbox-border-color: #ccc;
+			/* 选中后的颜色 */
+			--checkbox-active-color: red;
+			/* 选中后的背景色 */
+			--checkbox-background-color: ;
 		}
 
-		.login-form-content {
-			text-align: center;
-			margin: 20px auto;
-			margin-top: 15%;
-			width: 80%;
-
-			.input-item {
-				margin: 20px auto;
-				background-color: #f5f6f7;
-				height: 45px;
-				border-radius: 20px;
-
-				.icon {
-					font-size: 38rpx;
-					margin-left: 10px;
-					color: #999;
-				}
-
-				.input {
-					width: 100%;
-					font-size: 14px;
-					line-height: 20px;
-					text-align: left;
-					padding-left: 15px;
-				}
-
-			}
-
-			.login-btn {
-				margin-top: 40px;
-				height: 45px;
-			}
-
-			.reg {
-				margin-top: 15px;
-			}
-
-			.xieyi {
-				color: #333;
-				margin-top: 20px;
-			}
-
-			.login-code {
-				height: 38px;
-				float: right;
-
-				.login-code-img {
-					height: 38px;
-					position: absolute;
-					margin-left: 10px;
-					width: 200rpx;
-				}
-			}
+		/* 调整checkbox与文字的对齐方式 */
+		::v-deep .uni-data-checkbox__icon {
+			margin-right: 6rpx;
 		}
 	}
-</style>
\ No newline at end of file
+
+  .login-btn {
+    width: 100%;
+    height: 88rpx;
+    line-height: 88rpx;
+    border-radius: 8rpx;
+    margin-top: 64rpx;
+    background-color: #3D48A3;
+    color: #fff;
+    font-size: 32rpx;
+    text-align: center;
+  }
+  .login-btn[disabled] { 
+		background-color: rgba(61,72,163,0.5);
+		color: #fff;
+   }
+
+  .reg { margin-top: 20rpx; text-align: center; }
+</style>

@@ -118,7 +118,7 @@
         this.$tab.navigateTo('/pages/mine/setting/index')
       },
       handleToLogin() {
-        this.$tab.reLaunch('/pages/login')
+        this.$tab.reLaunch('/pages/login/login')
       },
       handleToAvatar() {
         this.$tab.navigateTo('/pages/mine/avatar/index')

@@ -59,7 +59,7 @@
     methods: {
       // 用户登录
       handleUserLogin() {
-        this.$tab.navigateTo(`/pages/login`)
+        this.$tab.navigateTo(`/pages/login/login`)
       },
       // 获取图形验证码
       getCode() {
@@ -97,7 +97,7 @@
           	content: "恭喜你，您的账号 " + this.registerForm.username + " 注册成功！",
           	success: function (res) {
           		if (res.confirm) {
-                uni.redirectTo({ url: `/pages/login` });
+                uni.redirectTo({ url: `/pages/login/login` });
           		}
           	}
           })

 import { getToken } from '@/utils/auth'
 
 // 登录页面
-const loginPage = "/pages/login"
+const loginPage = "/pages/login/login"
   
 // 页面白名单
 const whiteList = [
-  '/pages/login', '/pages/register', '/pages/common/webview/index'
+  '/pages/login/login', '/pages/register', '/pages/common/webview/index'
 ]
 
 // 检查地址白名单

@@ -56,7 +56,7 @@ config.responseType = 'blob';
           showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
             if (res.confirm) {
               store.dispatch('LogOut').then(res => {
-                uni.reLaunch({ url: '/pages/login' })
+                uni.reLaunch({ url: '/pages/login/login' })
               })
             }
           })

@@ -38,7 +38,7 @@ const upload = config => {
             showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(res => {
               if (res.confirm) {
                 store.dispatch('LogOut').then(res => {
-                  uni.reLaunch({ url: '/pages/login/login' })
+                  uni.reLaunch({ url: '/pages/login/login/login' })
                 })
               }
             })