novalon/gym-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加品牌方案管理

Browse Source
This commit is contained in:
liwentao
2026-07-23 18:56:35 +08:00
parent 4c07ec5455
commit b689656faf
67 changed files with 5572 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-uniapp/pages/login/login.vue
+51 -37
View File
@@ -1,30 +1,32 @@
<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-btn-area">
<button class="wechat-login-btn" @click="handleLogin">
<text class="wechat-symbol">微</text>
<text class="btn-text">微信一键登录</text>
<button class="wechat-login-btn" @click="handleLogin"
:style="{ background: brandConfig.primaryColor }">
<text class="wechat-symbol" :style="{ color: brandConfig.secondaryColor }">微</text>
<text class="btn-text" :style="{ color: brandConfig.secondaryColor }">微信一键登录</text>
</button>
<view class="agreement-row">
<view class="checkbox-wrapper" @click="toggleAgree">
<view class="checkbox" :class="{ checked: agreed }">
<text v-if="agreed" class="check-mark">&#10003;</text>
<view class="checkbox" :class="{ checked: agreed }" :style="agreed ? agreedStyle : ''">
<text v-if="agreed" class="check-mark" :style="{ color: brandConfig.secondaryColor }">&#10003;</text>
</view>
</view>
<text class="agreement-text">
已阅读并同意
<text class="link">《用户协议》</text>
<text class="link" :style="{ color: brandConfig.primaryColor }">《用户协议》</text>
和
<text class="link">《隐私政策》</text>
<text class="link" :style="{ color: brandConfig.primaryColor }">《隐私政策》</text>
</text>
</view>
</view>
@@ -50,13 +52,15 @@
<script>
const authApi = require('../../api/auth')
const store = require('../../store/index')
const brandStore = require('../../store/brand')
export default {
data() {
return {
statusBarHeight: 0,
agreed: false,
loading: false
loading: false,
brandConfig: brandStore.config
}
},
onLoad() {
@@ -66,6 +70,15 @@
if (store.isLoggedIn) {
uni.switchTab({ url: '/pages/index/index' })
}
uni.$on('brand:updated', (config) => { this.brandConfig = config })
},
onUnload() {
uni.$off('brand:updated')
},
computed: {
agreedStyle() {
return 'background:' + this.brandConfig.primaryColor + ';border-color:' + this.brandConfig.secondaryColor
}
},
methods: {
toggleAgree() { this.agreed = !this.agreed },
@@ -119,32 +132,33 @@
.login-page { min-height: 100vh; background: #F5F7FA; display: flex; flex-direction: column; align-items: center; padding: 0 32px; overflow-x: hidden; }
.brand-area { display: flex; flex-direction: column; align-items: center; margin-top: 60px; margin-bottom: 80px; }
.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; }
.app-name { font-size: 28px; font-weight: 700; color: #1E1E1E; letter-spacing: 1px; }
.app-slogan { font-size: 14px; color: #7A7E84; margin-top: 8px; letter-spacing: 2px; }
.logo-wrap { width: 120px; height: 120px; background: rgba(0,230,118,0.15); 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: #FFFFFF; letter-spacing: 1px; }
.app-slogan { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 8px; letter-spacing: 2px; }
.login-btn-area { width: 100%; display: flex; flex-direction: column; align-items: center; }
.wechat-login-btn { width: 100%; height: 52px; background: #00E676; border-radius: 40px; display: flex; align-items: center; justify-content: center; border: none; padding: 0; box-shadow: 0 4px 16px rgba(0,230,118,0.35); }
.wechat-login-btn::after { border: none; }
.wechat-symbol { font-size: 18px; font-weight: 700; color: #1A1A1A; margin-right: 8px; }
.btn-text { font-size: 17px; font-weight: 700; color: #1A1A1A; }
.login-btn-area { width: 100%; display: flex; flex-direction: column; align-items: center; }
.wechat-login-btn { width: 100%; height: 52px; background: #00E676; border-radius: 40px; display: flex; align-items: center; justify-content: center; border: none; padding: 0; box-shadow: 0 4px 16px rgba(0,230,118,0.35); }
.wechat-login-btn::after { border: none; }
.wechat-symbol { font-size: 18px; font-weight: 700; color: #1A1A1A; margin-right: 8px; }
.btn-text { font-size: 17px; font-weight: 700; color: #1A1A1A; }
.agreement-row { display: flex; align-items: center; margin-top: 16px; }
.checkbox-wrapper { margin-right: 6px; }
.checkbox { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #BDBDBD; display: flex; align-items: center; justify-content: center; }
.checkbox.checked { background: #00E676; border-color: #00E676; }
.check-mark { font-size: 12px; color: #1A1A1A; font-weight: 700; }
.agreement-text { font-size: 12px; color: #7A7E84; }
.link { color: #00C853; }
.agreement-row { display: flex; align-items: center; margin-top: 16px; }
.checkbox-wrapper { margin-right: 6px; }
.checkbox { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; }
.checkbox.checked { background: #00E676; border-color: #00E676; }
.check-mark { font-size: 12px; color: #1A1A1A; font-weight: 700; }
.agreement-text { font-size: 12px; color: rgba(255,255,255,0.5); }
.link { color: #00E676; }
.other-login { margin-top: 60px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.divider-text { font-size: 13px; color: #BDBDBD; margin-bottom: 20px; }
.other-icons { display: flex; }
.other-item { display: flex; flex-direction: column; align-items: center; }
.other-icon-circle { width: 48px; height: 48px; background: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.other-symbol { font-size: 22px; color: #7A7E84; }
.other-label { font-size: 12px; color: #7A7E84; }
.other-login { margin-top: 60px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.divider-text { font-size: 13px; color: rgba(255,255,255,0.3); margin-bottom: 20px; }
.other-icons { display: flex; }
.other-item { display: flex; flex-direction: column; align-items: center; }
.other-icon-circle { width: 48px; height: 48px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.other-symbol { font-size: 22px; color: rgba(255,255,255,0.6); }
.other-label { font-size: 12px; color: rgba(255,255,255,0.4); }
.footer-tip { position: absolute; bottom: 60px; font-size: 12px; color: #BDBDBD; }
.footer-tip { position: absolute; bottom: 60px; font-size: 12px; color: rgba(255,255,255,0.25); }
</style>