|
|
@@ -1,88 +1,201 @@
|
|
1
|
1
|
<template>
|
|
2
|
|
- <view class="login-container">
|
|
3
|
|
- <view class="login-form">
|
|
4
|
|
- <up-form :model="form" ref="formRef" label-position="left">
|
|
5
|
|
- <up-form-item label="用户名" prop="username" required :label-width="60">
|
|
6
|
|
- <up-input v-model="form.username" placeholder="请输入用户名" />
|
|
7
|
|
- </up-form-item>
|
|
8
|
|
- <up-form-item label="密码" prop="password" required :label-width="60">
|
|
9
|
|
- <up-input v-model="form.password" type="password" placeholder="请输入密码" />
|
|
10
|
|
- </up-form-item>
|
|
11
|
|
- <up-button type="primary" @click="handleLogin" :loading="loading" class="login-btn">
|
|
12
|
|
- 登录
|
|
13
|
|
- </up-button>
|
|
14
|
|
- </up-form>
|
|
15
|
|
- </view>
|
|
16
|
|
- </view>
|
|
|
2
|
+ <view>
|
|
|
3
|
+ <view class="loginway">
|
|
|
4
|
+ <div class="navigation"></div>
|
|
|
5
|
+ <image class="loginimg" mode="widthFix" src="/static/login/logo_word.png"></image>
|
|
|
6
|
+ <view class="input_wrap">
|
|
|
7
|
+ <up-form labelPosition="left" :model="form" :rules="rules" ref="loginFormRef">
|
|
|
8
|
+ <up-form-item label="" prop="username" class="inputFormWrap">
|
|
|
9
|
+ <up-input shape="circle" clearable prefixIcon="/static/login/icon-account.png"
|
|
|
10
|
+ :prefixIconStyle="prefixIconStyle" v-model="form.username" placeholder="请输入账号"></up-input>
|
|
|
11
|
+ </up-form-item>
|
|
|
12
|
+ <up-form-item label="" prop="password" class="inputFormWrap">
|
|
|
13
|
+ <up-input shape="circle" clearable password prefixIcon="/static/login/icon-password.png"
|
|
|
14
|
+ :prefixIconStyle="prefixIconStyle" v-model="form.password" placeholder="请输入密码"></up-input>
|
|
|
15
|
+ </up-form-item>
|
|
|
16
|
+ <up-form-item label="" prop="" class="inputFormWrap">
|
|
|
17
|
+ <up-checkbox-group v-model="checkboxs" placement="column" @change="changeRemember">
|
|
|
18
|
+ <up-checkbox :label="'记住密码'" :name="'remember'"></up-checkbox>
|
|
|
19
|
+ </up-checkbox-group>
|
|
|
20
|
+ </up-form-item>
|
|
|
21
|
+ <up-form-item label="" prop="agreePrivacy" class="inputFormWrap agree_form_item">
|
|
|
22
|
+ <view class="agree_row">
|
|
|
23
|
+ <up-checkbox-group v-model="agreePrivacyList" placement="row" @change="onAgreeChange">
|
|
|
24
|
+ <up-checkbox :name="'agree'"></up-checkbox>
|
|
|
25
|
+ </up-checkbox-group>
|
|
|
26
|
+ <text class="agree_text">我已阅读并同意</text>
|
|
|
27
|
+ <text class="agree_link" @click="toPrivacy">《隐私政策》</text>
|
|
|
28
|
+ </view>
|
|
|
29
|
+ </up-form-item>
|
|
|
30
|
+ <up-form-item>
|
|
|
31
|
+ <up-button type="primary" text="登录" shape="circle" :loading="loading" @click="handleLogin"></up-button>
|
|
|
32
|
+ </up-form-item>
|
|
|
33
|
+ </up-form>
|
|
|
34
|
+ </view>
|
|
|
35
|
+ </view>
|
|
|
36
|
+ </view>
|
|
17
|
37
|
</template>
|
|
18
|
|
-
|
|
19
|
38
|
<script setup lang="ts">
|
|
20
|
|
-import { ref } from 'vue'
|
|
|
39
|
+import { ref, onMounted } from 'vue'
|
|
21
|
40
|
import { loginApi } from '@/apis/login'
|
|
22
|
|
-import type { Login_Params,userInfo_Result } from '@/types/login'
|
|
23
|
|
-const loading = ref(false)
|
|
24
|
|
-const formRef = ref()
|
|
|
41
|
+import type { Login_Params, userInfo_Result } from '@/types/login'
|
|
|
42
|
+import { computed } from 'vue'
|
|
|
43
|
+const remember = computed(() => {
|
|
|
44
|
+ return checkboxs.value.length > 0
|
|
|
45
|
+})
|
|
|
46
|
+const prefixIconStyle = {
|
|
|
47
|
+ width: "16px",
|
|
|
48
|
+ height: "16px",
|
|
|
49
|
+ marginRight: "4px",
|
|
|
50
|
+ marginLeft: "10px"
|
|
|
51
|
+}
|
|
|
52
|
+const rules = ref({
|
|
|
53
|
+ username: {
|
|
|
54
|
+ type: 'string',
|
|
|
55
|
+ required: true,
|
|
|
56
|
+ message: '请输入账号',
|
|
|
57
|
+ trigger: []
|
|
|
58
|
+ },
|
|
|
59
|
+ password: {
|
|
|
60
|
+ type: 'string',
|
|
|
61
|
+ required: true,
|
|
|
62
|
+ message: '请输入密码',
|
|
|
63
|
+ trigger: []
|
|
|
64
|
+ },
|
|
|
65
|
+ agreePrivacy: {
|
|
|
66
|
+ required: true,
|
|
|
67
|
+ message: '请阅读并同意《隐私政策》',
|
|
|
68
|
+ trigger: [],
|
|
|
69
|
+ validator: (rule: any, value: any, callback: any) => {
|
|
|
70
|
+ if(!value){
|
|
|
71
|
+ callback(new Error('请阅读并同意《隐私政策》'));
|
|
|
72
|
+ }else{
|
|
|
73
|
+ callback();
|
|
|
74
|
+ }
|
|
|
75
|
+ }
|
|
|
76
|
+ }
|
|
|
77
|
+})
|
|
25
|
78
|
const form = ref<Login_Params>({
|
|
26
|
|
- username: '',
|
|
27
|
|
- password: '',
|
|
28
|
|
- systemCode: "system_crm",
|
|
29
|
|
- clientFlag: "2",
|
|
30
|
|
- code: "996007qa.code",
|
|
31
|
|
- uuid: "123",
|
|
32
|
|
- agreePrivacy: false
|
|
|
79
|
+ username: '',
|
|
|
80
|
+ password: '',
|
|
|
81
|
+ systemCode: "system_crm",
|
|
|
82
|
+ clientFlag: "2",
|
|
|
83
|
+ code: "996007qa.code",
|
|
|
84
|
+ uuid: "123",
|
|
|
85
|
+ agreePrivacy: false
|
|
33
|
86
|
})
|
|
|
87
|
+const checkboxs = ref<string[]>([])
|
|
|
88
|
+const agreePrivacyList = ref<string[]>([])
|
|
|
89
|
+const getUserByCache = () => {
|
|
|
90
|
+ const savedUsername = uni.getStorageSync('username');
|
|
|
91
|
+ const savedPassword = uni.getStorageSync('password');
|
|
34
|
92
|
|
|
35
|
|
-const handleLogin = async () => {
|
|
36
|
|
- if (!form.value.username) {
|
|
37
|
|
- uni.showToast({ title: '请输入用户名', icon: 'none' })
|
|
38
|
|
- return
|
|
39
|
|
- }
|
|
40
|
|
- if (!form.value.password) {
|
|
41
|
|
- uni.showToast({ title: '请输入密码', icon: 'none' })
|
|
42
|
|
- return
|
|
43
|
|
- }
|
|
44
|
|
-
|
|
45
|
|
- loading.value = true
|
|
46
|
|
- try {
|
|
47
|
|
- const res = await loginApi.login(form.value)
|
|
48
|
|
- uni.setStorageSync('token', res.data.access_token)
|
|
49
|
|
- const infoRes = await loginApi.getInfo()
|
|
50
|
|
- uni.setStorageSync('userInfo', infoRes.user)
|
|
51
|
|
- uni.showToast({ title: '登录成功', icon: 'success' })
|
|
52
|
|
- setTimeout(() => {
|
|
53
|
|
- uni.reLaunch({ url: '/pages/repair/index' })
|
|
54
|
|
- }, 1000)
|
|
55
|
|
- } catch (error) {
|
|
56
|
|
- console.error('登录失败', error)
|
|
57
|
|
- } finally {
|
|
58
|
|
- loading.value = false
|
|
59
|
|
- }
|
|
|
93
|
+ if (savedUsername && savedPassword) {
|
|
|
94
|
+ form.value.username = savedUsername;
|
|
|
95
|
+ form.value.password = savedPassword;
|
|
|
96
|
+ checkboxs.value = ['remember']
|
|
|
97
|
+ }
|
|
|
98
|
+}
|
|
|
99
|
+const onAgreeChange = (list: string[]) => {
|
|
|
100
|
+ form.value.agreePrivacy = (list || []).indexOf('agree') >= 0;
|
|
60
|
101
|
}
|
|
|
102
|
+const toPrivacy = () => {
|
|
|
103
|
+ uni.navigateTo({ url: '/pages/privacy/index' });
|
|
|
104
|
+}
|
|
|
105
|
+const changeRemember = (value: string[]) => {
|
|
|
106
|
+ if (value.length > 0) {
|
|
|
107
|
+ uni.setStorageSync('username', form.value.username);
|
|
|
108
|
+ uni.setStorageSync('password', form.value.password);
|
|
|
109
|
+ } else {
|
|
|
110
|
+ uni.removeStorageSync('username');
|
|
|
111
|
+ uni.removeStorageSync('password');
|
|
|
112
|
+ }
|
|
|
113
|
+}
|
|
|
114
|
+const loginFormRef = ref<any>(null)
|
|
|
115
|
+const loading = ref<boolean>(false)
|
|
|
116
|
+const handleLogin = () => {
|
|
|
117
|
+ loginFormRef.value.validate().then(async () => {
|
|
|
118
|
+ loading.value = true
|
|
|
119
|
+ if (remember.value) {
|
|
|
120
|
+ uni.setStorageSync('username', form.value.username);
|
|
|
121
|
+ uni.setStorageSync('password', form.value.password);
|
|
|
122
|
+ } else {
|
|
|
123
|
+ uni.removeStorageSync('username');
|
|
|
124
|
+ uni.removeStorageSync('password');
|
|
|
125
|
+ }
|
|
|
126
|
+ const res = await loginApi.login(form.value)
|
|
|
127
|
+ loading.value = false
|
|
|
128
|
+ uni.setStorageSync('token', res.data.access_token)
|
|
|
129
|
+ const infoRes = await loginApi.getInfo()
|
|
|
130
|
+ uni.setStorageSync('userInfo', infoRes.user)
|
|
|
131
|
+ uni.showToast({ title: '登录成功', icon: 'success' })
|
|
|
132
|
+ setTimeout(() => {
|
|
|
133
|
+ uni.reLaunch({ url: '/pages/repair/index' })
|
|
|
134
|
+ }, 500)
|
|
|
135
|
+ }).catch((res: any) => {
|
|
|
136
|
+ uni.$u.toast(res[0].message);
|
|
|
137
|
+ })
|
|
|
138
|
+}
|
|
|
139
|
+
|
|
|
140
|
+onMounted(() => {
|
|
|
141
|
+ getUserByCache();
|
|
|
142
|
+})
|
|
61
|
143
|
</script>
|
|
62
|
144
|
|
|
63
|
|
-<style scoped>
|
|
64
|
|
-.login-container {
|
|
65
|
|
- display: flex;
|
|
66
|
|
- flex-direction: column;
|
|
67
|
|
- align-items: center;
|
|
68
|
|
- justify-content: center;
|
|
69
|
|
- min-height: 100vh;
|
|
70
|
|
- background-color: #f5f5f5;
|
|
71
|
|
- padding: 0 30rpx;
|
|
|
145
|
+<style lang="scss" scoped>
|
|
|
146
|
+.inputFormWrap {
|
|
|
147
|
+ :deep(.u-border) {
|
|
|
148
|
+ border: 1px solid #dadbde !important;
|
|
|
149
|
+ }
|
|
72
|
150
|
}
|
|
73
|
151
|
|
|
74
|
|
-.login-form {
|
|
75
|
|
- width: 100%;
|
|
76
|
|
- max-width: 500rpx;
|
|
77
|
|
- background-color: #fff;
|
|
78
|
|
- padding: 50rpx;
|
|
79
|
|
- border-radius: 16rpx;
|
|
80
|
|
- box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
|
|
152
|
+.agree_form_item {
|
|
|
153
|
+ :deep(.u-form-item__body__right) {
|
|
|
154
|
+ flex: 1;
|
|
|
155
|
+ }
|
|
81
|
156
|
}
|
|
82
|
157
|
|
|
83
|
|
-.login-btn {
|
|
84
|
|
- width: 100%;
|
|
85
|
|
- height: 80rpx;
|
|
86
|
|
- margin-top: 40rpx;
|
|
|
158
|
+.agree_row {
|
|
|
159
|
+ display: flex;
|
|
|
160
|
+ align-items: center;
|
|
|
161
|
+ flex-wrap: wrap;
|
|
|
162
|
+}
|
|
|
163
|
+
|
|
|
164
|
+.agree_text {
|
|
|
165
|
+ font-size: 26rpx;
|
|
|
166
|
+ color: #606266;
|
|
|
167
|
+ margin-left: 8rpx;
|
|
|
168
|
+}
|
|
|
169
|
+
|
|
|
170
|
+.agree_link {
|
|
|
171
|
+ font-size: 26rpx;
|
|
|
172
|
+ color: #108cff;
|
|
|
173
|
+ margin-left: 4rpx;
|
|
|
174
|
+}
|
|
|
175
|
+
|
|
|
176
|
+page {
|
|
|
177
|
+ background: #fff;
|
|
|
178
|
+}
|
|
|
179
|
+
|
|
|
180
|
+.loginway {
|
|
|
181
|
+ display: flex;
|
|
|
182
|
+ flex-direction: column;
|
|
|
183
|
+ height: 100vh;
|
|
|
184
|
+
|
|
|
185
|
+ .navigation {
|
|
|
186
|
+ background-color: #108cff;
|
|
|
187
|
+ width: 100%;
|
|
|
188
|
+ height: 120rpx;
|
|
|
189
|
+ }
|
|
|
190
|
+
|
|
|
191
|
+ .loginimg {
|
|
|
192
|
+ display: block;
|
|
|
193
|
+ width: 100%;
|
|
|
194
|
+ height: 100%;
|
|
|
195
|
+ }
|
|
|
196
|
+
|
|
|
197
|
+ .input_wrap {
|
|
|
198
|
+ padding: 20rpx 30rpx;
|
|
|
199
|
+ }
|
|
87
|
200
|
}
|
|
88
|
|
-</style>
|
|
|
201
|
+</style>
|
