增加品牌方案管理

gym-manage-coach-uniapp/pages/login/login.vue

@@ -1,11 +1,12 @@
 <template>
-	<view class="login-page" :style="{ paddingTop: statusBarHeight + 'px' }">
+	<view class="login-page" :style="{ paddingTop: statusBarHeight + 'px', backgroundColor: brandConfig.secondaryColor }">
 		<view class="brand-area">
-			<view class="logo-icon">
-				<text class="logo-symbol">◆</text>
+			<view class="logo-wrap" :style="{ backgroundColor: brandConfig.logoUrl ? 'transparent' : 'rgba(' + brandConfig.primaryColorRgb + ',0.15)' }">
+				<image v-if="brandConfig.logoUrl" class="logo-img" :src="brandConfig.logoUrl" mode="aspectFit" />
+				<text v-else class="logo-symbol" :style="{ color: brandConfig.primaryColor }">◆</text>
 			</view>
-			<text class="app-name">Novalon 教练端</text>
-			<text class="app-slogan">高效管理 · 轻松授课</text>
+			<text class="app-name">{{ brandConfig.brandName }}</text>
+			<text class="app-slogan" v-if="brandConfig.slogan">{{ brandConfig.slogan }}</text>
 		</view>
 
 		<view class="login-form">
@@ -33,13 +34,13 @@
 				</text>
 			</view>
 
-			<button class="login-btn" :loading="loading" :disabled="loading || !username || !password" @click="handleLogin">
+			<button class="login-btn" :style="loginBtnStyle" :loading="loading" :disabled="loading || !username || !password" @click="handleLogin">
 				{{ loading ? '登录中...' : '登 录' }}
 			</button>
 		</view>
 
 		<view class="footer-tip">
-			<text>Novalon 健身房管理系统</text>
+			<text>{{ brandConfig.brandName }}</text>
 		</view>
 	</view>
 </template>
@@ -47,6 +48,7 @@
 <script>
 	const coachApi = require('../../api/coach')
 	const store = require('../../store/index')
+	const brandStore = require('../../store/brand')
 
 	export default {
 		data() {
@@ -55,9 +57,13 @@
 				username: '',
 				password: '',
 				showPassword: false,
-				loading: false
+				loading: false,
+				brandConfig: brandStore.config
 			}
 		},
+		computed: {
+		loginBtnStyle() { return 'background-color:' + this.brandConfig.primaryColor + ';color:' + this.brandConfig.secondaryColor }
+		},
 		onLoad() {
 			const systemInfo = uni.getSystemInfoSync()
 			this.statusBarHeight = systemInfo.statusBarHeight || 20
@@ -65,6 +71,11 @@
 			if (store.isLoggedIn) {
 				uni.reLaunch({ url: '/pages/index/index' })
 			}
+
+			uni.$on('brand:updated', (config) => { this.brandConfig = config })
+		},
+		onUnload() {
+			uni.$off('brand:updated')
 		},
 		methods: {
 			async handleLogin() {
@@ -113,7 +124,7 @@
 <style scoped>
 	.login-page {
 		min-height: 100vh;
-		background: #F5F7FA;
+		background: #1A1A1A;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -128,29 +139,18 @@
 		margin-top: 80px;
 		margin-bottom: 60px;
 	}
-	.logo-icon {
-		width: 80px;
-		height: 80px;
-		background: rgba(0,230,118,0.15);
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-bottom: 20px;
-	}
-	.logo-symbol {
-		font-size: 36px;
-		color: #00C853;
-	}
+	.logo-wrap { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; overflow: hidden; }
+	.logo-img { width: 100%; height: 100%; }
+	.logo-symbol { font-size: 52px; color: #00C853; }
 	.app-name {
 		font-size: 28px;
 		font-weight: 700;
-		color: #1E1E1E;
+		color: #FFFFFF;
 		letter-spacing: 1px;
 	}
 	.app-slogan {
 		font-size: 14px;
-		color: #7A7E84;
+		color: rgba(255,255,255,0.6);
 		margin-top: 8px;
 		letter-spacing: 2px;
 	}
@@ -164,28 +164,27 @@
 	.input-group {
 		width: 100%;
 		height: 52px;
-		background: #FFFFFF;
+		background: rgba(255,255,255,0.1);
 		border-radius: 40px;
 		display: flex;
 		align-items: center;
 		padding: 0 18px;
 		margin-bottom: 14px;
-		box-shadow: 0 4px 12px rgba(0,0,0,0.06);
 	}
 	.input-icon {
 		font-size: 18px;
 		margin-right: 10px;
-		color: #7A7E84;
+		color: rgba(255,255,255,0.5);
 	}
 	.login-input {
 		flex: 1;
 		height: 100%;
 		font-size: 15px;
-		color: #1E1E1E;
+		color: #FFFFFF;
 	}
 	.toggle-pwd {
 		font-size: 18px;
-		color: #7A7E84;
+		color: rgba(255,255,255,0.5);
 		padding-left: 8px;
 	}
 
@@ -212,6 +211,6 @@
 		position: absolute;
 		bottom: 60px;
 		font-size: 12px;
-		color: #BDBDBD;
+		color: rgba(255,255,255,0.3);
 	}
 </style>