zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 登录页面的调整以及配置文件调整

Browse Source
This commit is contained in:
zoujing
2025-10-28 20:00:06 +08:00
parent a53df50140
commit bd47eefd8a
7 changed files with 61 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/CheckBox/styles/index.scss
View File

@@ -1,6 +1,7 @@
.checkbox-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
.checkbox-icon {
margin-right: 6px;

30
src/constant/base.js
View File

@@ -1,43 +1,15 @@
import DH from "@/pages/login/images/dh.png";
import DHWQ from "@/pages/login/images/dhwq.png";
import TM from "@/pages/login/images/tm.png";
import WSMM from "@/pages/login/images/wsmm.png";
/**
* 客户端配置管理模块
*
* 功能说明:
* 所有配置从根目录的 client-configs.json 文件中读取
* 图片通过映射函数将路径转换为实际导入的模块
*/
// 直接导入配置文件
import rawConfigs from '../../client-configs.json' with { type: 'json' };
// 图片路径映射表
const imageMap = {
'@/pages/login/images/dh.png': DH,
'@/pages/login/images/dhwq.png': DHWQ,
'@/pages/login/images/tm.png': TM,
'@/pages/login/images/wsmm.png': WSMM,
};
// 处理配置中的图片路径
const processConfigs = (configs) => {
const processed = {};
for (const [key, config] of Object.entries(configs)) {
processed[key] = {
...config,
logo: imageMap[config.logo] || config.logo,
subLogo: imageMap[config.subLogo] || config.subLogo,
};
}
return processed;
};
// 所有用户端的配置 - 处理后的配置
export const CLIENT_CONFIGS = processConfigs(rawConfigs);
export const CLIENT_CONFIGS = rawConfigs;
// 获取当前用户端配置
export const getCurrentConfig = () => CLIENT_CONFIGS.zhinian;

50
src/pages/login/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="login-wrapper" :style="{ backgroundImage: `url(${loginBg})` }">
<view class="login-wrapper bg-liner">
<!-- 返回按钮 -->
<view class="back-btn" @click="goBack">
<uni-icons fontFamily="znicons" size="24" color="#333">
@@ -10,11 +10,27 @@
<!-- 头部内容 -->
<view class="login-header">
<!-- 卡通形象 -->
<image class="login-avatar" :src="logo" mode="widthFix"></image>
<image class="login-title" :src="subLogo" mode="widthFix"></image>
<image class="w-full h-full" :src="logo" mode="widthFix" />
</view>
<!-- 描述 -->
<view class="login-desc">{{ loginDesc }}</view>
<!-- 协议勾选 -->
<view class="login-agreement flex flex-items-center">
<CheckBox v-model="isAgree">
<text class="font-size-12 color-525866">我已阅读并同意</text>
<text
class="font-size-12 color-2D91FF ml-4 mr-4"
@click.stop="handleAgreeClick('service')"
>《服务协议》</text
>
<text class="font-size-12 color-525866">和</text>
<text
class="font-size-12 color-2D91FF ml-4 mr-4"
@click.stop="handleAgreeClick('privacy')"
>《隐私协议》</text
>
<text class="font-size-12 color-525866">，\n</text>
<text class="font-size-12 color-525866 ml-30">授权与账号关联操作</text>
</CheckBox>
</view>
<!-- 按钮区域 -->
@@ -27,6 +43,7 @@
type="primary"
@click="handleAgreeAndGetPhone"
>
<uni-icons type="weixin" size="20" color="#fff"></uni-icons>
微信一键登录
</button>
@@ -37,6 +54,7 @@
open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber"
>
<uni-icons type="weixin" size="20" color="#fff"></uni-icons>
微信一键登录
</button>
@@ -46,28 +64,11 @@
type="primary"
@click="handleLogin"
>
<uni-icons type="weixin" size="20" color="#fff"></uni-icons>
微信一键登录
</button>
</view>
<!-- 协议勾选 -->
<view class="login-agreement">
<CheckBox v-model="isAgree">
<text class="login-agreement-text">阅读并同意</text>
<text
class="login-agreement-link"
@click.stop="handleAgreeClick('service')"
>《服务协议》</text
>
<text class="login-agreement-text">和</text>
<text
class="login-agreement-link"
@click.stop="handleAgreeClick('privacy')"
>《隐私协议》</text
>
</CheckBox>
</view>
<AgreePopup
ref="agreePopup"
:visible="visible"
@@ -84,7 +85,6 @@ import {
getPrivacyAgreement,
} from "@/request/api/LoginApi";
import { onLogin, goBack } from "@/hooks/useGoLogin";
import loginBg from "./images/bg.png";
import CheckBox from "@/components/CheckBox/index.vue";
import AgreePopup from "./components/AgreePopup/index.vue";
import { zniconsMap } from "@/static/fonts/znicons.js";
@@ -99,8 +99,6 @@ const privacyAgreement = ref("");
// 协议类型
const AgreeType = ref("service");
const logo = computed(() => getCurrentConfig().logo);
const subLogo = computed(() => getCurrentConfig().subLogo);
const loginDesc = computed(() => getCurrentConfig().loginDesc);
// 同意隐私协议并获取手机号
const handleAgreeAndGetPhone = () => {

51
src/pages/login/styles/index.scss
View File

@@ -4,11 +4,8 @@
align-items: center;
box-sizing: border-box;
height: 100vh;
padding-top: 168px;
padding-top: 100px;
position: relative;
background-position: 0 0;
background-size: 100% 100%;
background-repeat: no-repeat;
.back-btn {
position: absolute;
@@ -23,52 +20,24 @@
}
.login-header {
text-align: center;
max-height: 223px;
.login-avatar {
width: 150px;
display: block;
}
.login-title {
width: 137px;
height: 32px;
margin: 6px auto;
}
.login-desc {
font-size: $uni-font-size-sm;
color: #1e4c69;
line-height: 24px;
}
margin-top: 40px;
width: 200px;
height: 200px;
}
.login-btn-area {
margin-top: 46px;
width: 297px;
margin-top: 20px;
width: 304px;
.login-btn {
background: linear-gradient(246deg, #22a7ff 0%, #2567ff 100%);
background: #2d91ff;
width: 100%;
border-radius: $uni-border-radius-50px;
border-radius: 10px;
}
}
.login-agreement {
margin-top: 20px;
display: flex;
align-items: center;
.login-agreement-text {
font-size: $uni-font-size-base;
color: #666;
}
.login-agreement-link {
font-size: $uni-font-size-base;
color: #007aff;
margin: 0 5px;
}
margin-top: 80px;
width: 304px;
}
}

4
src/static/scss/margin.scss
View File

@@ -106,3 +106,7 @@
.ml-24 {
margin-left: 24px;
}
.ml-30 {
margin-left: 30px;
}