朱园亮 / erp-mobile · Commits

Commit 15e48297b03ea547cdd995661ed5c22f192b7fd0

Authored by 史婷婷
1 parent 6d716a90

feat: 登录页

Inline Side-by-side
Showing 10 changed files with 140 additions and 117 deletions
@@ -23,7 +23,7 @@ @@ -23,7 +23,7 @@
23 checkLogin() { 23 checkLogin() {
24 24
25 if (!getToken()) { 25 if (!getToken()) {
26 - this.$tab.reLaunch('/pages/login') 26 + this.$tab.reLaunch('/pages/login/login')
27 } 27 }
28 } 28 }
29 } 29 }
1 { 1 {
2 "pages": [{ 2 "pages": [{
3 - "path": "pages/login", 3 + "path": "pages/login/login",
4 "style": { 4 "style": {
5 - "navigationBarTitleText": "登录" 5 + "navigationBarTitleText": "登录",
  6 + "navigationStyle": "custom"
6 } 7 }
7 }, { 8 }, {
8 "path": "pages/register", 9 "path": "pages/register",
pages/login/login.vue renamed from pages/login.vue
1 <template> 1 <template>
2 - <view class="normal-login-container">  
3 - <view class="logo-content align-center justify-center flex">  
4 - <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">  
5 - </image>  
6 - <text class="title">{{globalConfig.appInfo.name}}</text> 2 + <view class="login-page">
  3 + <!-- 自定义头部 -->
  4 + <view class="header">
  5 + <image class="header-bg" src="./header_bg.png" />
  6 + <view class="header-content">
  7 + <image class="header-logo" src="/static/logo201.png" mode="widthFix" />
  8 + <text class="header-title">欢迎登录楚江销售系统</text>
  9 + </view>
7 </view> 10 </view>
8 - <view class="login-form-content">  
9 - <view class="input-item flex align-center">  
10 - <view class="iconfont icon-user icon"></view>  
11 - <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" /> 11 +
  12 + <!-- 表单区 -->
  13 + <view class="form">
  14 + <view class="input-item">
  15 + <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" placeholder-style="color:#aaa;" maxlength="30" />
12 </view> 16 </view>
13 - <view class="input-item flex align-center">  
14 - <view class="iconfont icon-password icon"></view>  
15 - <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" /> 17 + <view class="input-item">
  18 + <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" placeholder-style="color:#aaa;" maxlength="20" />
16 </view> 19 </view>
17 - <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">  
18 - <view class="iconfont icon-code icon"></view>  
19 - <input v-model="loginForm.captcha" type="text" class="input" placeholder="请输入验证码" maxlength="4" />  
20 - <view class="login-code">  
21 - <image :src="codeUrl" @click="getCode" class="login-code-img"></image>  
22 - </view> 20 + <view class="input-row" v-if="captchaEnabled">
  21 + <input v-model="loginForm.captcha" type="text" class="input" placeholder="请输入验证码" placeholder-style="color:#aaa;" maxlength="4" />
  22 + <image :src="codeUrl" @click="getCode" class="captcha-img" />
23 </view> 23 </view>
24 - <view class="action-btn">  
25 - <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button> 24 +
  25 + <view class="agree-row">
  26 + <uni-data-checkbox v-model="agreeVal" :localdata="agreeOptions" :multiple="true" />
  27 + <text @click="handleUserAgrement" class="link">《用户协议》</text>
  28 + <text @click="handlePrivacy" class="link">《隐私协议》</text>
26 </view> 29 </view>
  30 +
  31 + <button @click="handleLogin" :disabled="Array.isArray(agreeVal) ? agreeVal.length===0 : !agreeVal" class="login-btn">立即登录</button>
  32 +
27 <view class="reg text-center" v-if="register"> 33 <view class="reg text-center" v-if="register">
28 <text class="text-grey1">没有账号？</text> 34 <text class="text-grey1">没有账号？</text>
29 <text @click="handleUserRegister" class="text-blue">立即注册</text> 35 <text @click="handleUserRegister" class="text-blue">立即注册</text>
30 </view> 36 </view>
31 - <view class="xieyi text-center">  
32 - <text class="text-grey1">登录即代表同意</text>  
33 - <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>  
34 - <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>  
35 - </view>  
36 </view> 37 </view>
37 -  
38 </view> 38 </view>
39 </template> 39 </template>
40 40
41 <script> 41 <script>
42 - import {  
43 - getCodeImg  
44 - } from '@/api/login' 42 + import { getCodeImg } from '@/api/login'
45 import config from '@/config' 43 import config from '@/config'
46 export default { 44 export default {
47 data() { 45 data() {
@@ -50,6 +48,8 @@ @@ -50,6 +48,8 @@
50 globalConfig: getApp().globalData.config, 48 globalConfig: getApp().globalData.config,
51 codeUrl: "", 49 codeUrl: "",
52 captchaEnabled: false, 50 captchaEnabled: false,
  51 + agreeVal: [],
  52 + agreeOptions: [{ text: '已预览并同意', value: '1' }],
53 // 用户注册开关 53 // 用户注册开关
54 register: false, 54 register: false,
55 //默认登录账号和密码 55 //默认登录账号和密码
@@ -72,7 +72,6 @@ @@ -72,7 +72,6 @@
72 // 隐私协议 72 // 隐私协议
73 handlePrivacy() { 73 handlePrivacy() {
74 let site = this.globalConfig.appInfo.agreements[0] 74 let site = this.globalConfig.appInfo.agreements[0]
75 -  
76 this.$tab.navigateTo('/pages/common/webview/index?title=' + site.title + '&url=' + site.url) 75 this.$tab.navigateTo('/pages/common/webview/index?title=' + site.title + '&url=' + site.url)
77 }, 76 },
78 // 用户协议 77 // 用户协议
@@ -83,7 +82,6 @@ @@ -83,7 +82,6 @@
83 // 获取图形验证码 82 // 获取图形验证码
84 getCode() { 83 getCode() {
85 getCodeImg().then(res => { 84 getCodeImg().then(res => {
86 - console.log('getCodeImgres', res)  
87 this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled 85 this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled
88 if (this.captchaEnabled) { 86 if (this.captchaEnabled) {
89 this.codeUrl = res.data.image 87 this.codeUrl = res.data.image
@@ -117,91 +115,115 @@ @@ -117,91 +115,115 @@
117 }, 115 },
118 // 登录成功后，处理函数 116 // 登录成功后，处理函数
119 loginSuccess(result) { 117 loginSuccess(result) {
120 - // alert("登录成功")  
121 - //跳转到首页  
122 this.$tab.reLaunch('/pages/index') 118 this.$tab.reLaunch('/pages/index')
123 -  
124 } 119 }
125 } 120 }
126 } 121 }
127 </script> 122 </script>
128 123
129 -<style lang="scss">  
130 - page {  
131 - background-color: #ffffff;  
132 - }  
133 -  
134 - .normal-login-container {  
135 - width: 100%; 124 +<style scoped lang="scss">
  125 + page { background-color: #fff; }
136 126
137 - .logo-content {  
138 - width: 100%;  
139 - font-size: 21px;  
140 - text-align: center;  
141 - padding-top: 15%; 127 + .login-page { width: 100%; height: 100%; }
142 128
143 - image {  
144 - border-radius: 4px;  
145 - }  
146 -  
147 - .title {  
148 - margin-left: 10px;  
149 - } 129 + .header {
  130 + position: relative;
  131 + height: 500rpx;
  132 + overflow: hidden;
  133 + background: pink;
  134 + &-bg {
  135 + width: 100%;
  136 + height: 100%;
  137 + }
  138 + &-content {
  139 + position: absolute;
  140 + left: 0;
  141 + right: 0;
  142 + top: 192rpx;
  143 + display: flex;
  144 + flex-direction: column;
  145 + align-items: center;
  146 + justify-content: center;
  147 + }
  148 + &-logo {
  149 + width: 298rpx; height: 120rpx;
  150 + margin-bottom: 60rpx;
  151 + }
  152 + &-title {
  153 + height: 60rpx;
  154 + font-weight: 600;
  155 + font-size: 44rpx;
  156 + color: rgba(0,0,0,0.9);
  157 + line-height: 60rpx;
  158 + }
  159 + }
  160 +
  161 + .form {
  162 + margin: 34rpx auto 0;
  163 + width: 626rpx;
  164 + }
  165 + .input-item {
  166 + margin-bottom: 40rpx;
  167 + background-color: #fff;
  168 + border: 1px solid #F1F1F1;
  169 + height: 96rpx;
  170 + border-radius: 8rpx;
  171 + display: flex;
  172 + align-items: center;
  173 + }
  174 + .input { width: 100%; font-size: 32rpx; padding: 0 24rpx; }
  175 + .input-row {
  176 + margin: 30rpx auto;
  177 + display: flex;
  178 + align-items: center;
  179 + background-color: #fff;
  180 + border: 1px solid #e5e7eb;
  181 + height: 88rpx;
  182 + border-radius: 18rpx;
  183 + }
  184 + .captcha-img { width: 200rpx; height: 88rpx; border-left: 1px solid #e5e7eb; }
  185 +
  186 + .agree-row {
  187 + display: flex;
  188 + align-items: center;
  189 + color: rgba(0,0,0,0.9);
  190 + margin-top: 8rpx;
  191 + font-size: 28rpx;
  192 +
  193 + .link {
  194 + color: #3D48A3;
  195 + }
  196 + /* 关键修改：使用深度选择器修改checkbox样式 */
  197 + ::v-deep .uni-data-checkbox {
  198 + /* 未选中时的颜色 */
  199 + --checkbox-border-color: #ccc;
  200 + /* 选中后的颜色 */
  201 + --checkbox-active-color: red;
  202 + /* 选中后的背景色 */
  203 + --checkbox-background-color: ;
150 } 204 }
151 205
152 - .login-form-content {  
153 - text-align: center;  
154 - margin: 20px auto;  
155 - margin-top: 15%;  
156 - width: 80%;  
157 -  
158 - .input-item {  
159 - margin: 20px auto;  
160 - background-color: #f5f6f7;  
161 - height: 45px;  
162 - border-radius: 20px;  
163 -  
164 - .icon {  
165 - font-size: 38rpx;  
166 - margin-left: 10px;  
167 - color: #999;  
168 - }  
169 -  
170 - .input {  
171 - width: 100%;  
172 - font-size: 14px;  
173 - line-height: 20px;  
174 - text-align: left;  
175 - padding-left: 15px;  
176 - }  
177 -  
178 - }  
179 -  
180 - .login-btn {  
181 - margin-top: 40px;  
182 - height: 45px;  
183 - }  
184 -  
185 - .reg {  
186 - margin-top: 15px;  
187 - }  
188 -  
189 - .xieyi {  
190 - color: #333;  
191 - margin-top: 20px;  
192 - }  
193 -  
194 - .login-code {  
195 - height: 38px;  
196 - float: right;  
197 -  
198 - .login-code-img {  
199 - height: 38px;  
200 - position: absolute;  
201 - margin-left: 10px;  
202 - width: 200rpx;  
203 - }  
204 - } 206 + /* 调整checkbox与文字的对齐方式 */
  207 + ::v-deep .uni-data-checkbox__icon {
  208 + margin-right: 6rpx;
205 } 209 }
206 } 210 }
207 -</style>  
  211 +
  212 + .login-btn {
  213 + width: 100%;
  214 + height: 88rpx;
  215 + line-height: 88rpx;
  216 + border-radius: 8rpx;
  217 + margin-top: 64rpx;
  218 + background-color: #3D48A3;
  219 + color: #fff;
  220 + font-size: 32rpx;
  221 + text-align: center;
  222 + }
  223 + .login-btn[disabled] {
  224 + background-color: rgba(61,72,163,0.5);
  225 + color: #fff;
  226 + }
  227 +
  228 + .reg { margin-top: 20rpx; text-align: center; }
  229 +</style>
@@ -118,7 +118,7 @@ @@ -118,7 +118,7 @@
118 this.$tab.navigateTo('/pages/mine/setting/index') 118 this.$tab.navigateTo('/pages/mine/setting/index')
119 }, 119 },
120 handleToLogin() { 120 handleToLogin() {
121 - this.$tab.reLaunch('/pages/login') 121 + this.$tab.reLaunch('/pages/login/login')
122 }, 122 },
123 handleToAvatar() { 123 handleToAvatar() {
124 this.$tab.navigateTo('/pages/mine/avatar/index') 124 this.$tab.navigateTo('/pages/mine/avatar/index')
@@ -59,7 +59,7 @@ @@ -59,7 +59,7 @@
59 methods: { 59 methods: {
60 // 用户登录 60 // 用户登录
61 handleUserLogin() { 61 handleUserLogin() {
62 - this.$tab.navigateTo(`/pages/login`) 62 + this.$tab.navigateTo(`/pages/login/login`)
63 }, 63 },
64 // 获取图形验证码 64 // 获取图形验证码
65 getCode() { 65 getCode() {
@@ -97,7 +97,7 @@ @@ -97,7 +97,7 @@
97 content: "恭喜你，您的账号 " + this.registerForm.username + " 注册成功！", 97 content: "恭喜你，您的账号 " + this.registerForm.username + " 注册成功！",
98 success: function (res) { 98 success: function (res) {
99 if (res.confirm) { 99 if (res.confirm) {
100 - uni.redirectTo({ url: `/pages/login` }); 100 + uni.redirectTo({ url: `/pages/login/login` });
101 } 101 }
102 } 102 }
103 }) 103 })
1 import { getToken } from '@/utils/auth' 1 import { getToken } from '@/utils/auth'
2 2
3 // 登录页面 3 // 登录页面
4 -const loginPage = "/pages/login" 4 +const loginPage = "/pages/login/login"
5 5
6 // 页面白名单 6 // 页面白名单
7 const whiteList = [ 7 const whiteList = [
8 - '/pages/login', '/pages/register', '/pages/common/webview/index' 8 + '/pages/login/login', '/pages/register', '/pages/common/webview/index'
9 ] 9 ]
10 10
11 // 检查地址白名单 11 // 检查地址白名单
@@ -56,7 +56,7 @@ config.responseType = 'blob'; @@ -56,7 +56,7 @@ config.responseType = 'blob';
56 showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => { 56 showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
57 if (res.confirm) { 57 if (res.confirm) {
58 store.dispatch('LogOut').then(res => { 58 store.dispatch('LogOut').then(res => {
59 - uni.reLaunch({ url: '/pages/login' }) 59 + uni.reLaunch({ url: '/pages/login/login' })
60 }) 60 })
61 } 61 }
62 }) 62 })
@@ -38,7 +38,7 @@ const upload = config => { @@ -38,7 +38,7 @@ const upload = config => {
38 showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(res => { 38 showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(res => {
39 if (res.confirm) { 39 if (res.confirm) {
40 store.dispatch('LogOut').then(res => { 40 store.dispatch('LogOut').then(res => {
41 - uni.reLaunch({ url: '/pages/login/login' }) 41 + uni.reLaunch({ url: '/pages/login/login/login' })
42 }) 42 })
43 } 43 }
44 }) 44 })