Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
77d416ff 1 parent 77d18bc9

🦄 refactor: 登录页面逻辑写法重构

Inline Side-by-side
Showing 3 changed files with 159 additions and 131 deletions
1 +/*
2 + * @Date: 2022-06-22 00:07:42
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-06-22 01:28:42
5 + * @FilePath: /tswj/src/composables/useLogin.js
6 + * @Description: 文件描述
7 + */
8 +import { bLoginAPI } from '@/api/B/login'
9 +import { useRouter } from 'vue-router'
10 +import { wxInfo } from '@/utils/tools';
11 +import { ref } from 'vue'
12 +import { useCountDown } from '@vant/use';
13 +import { smsAPI } from '@/api/common'
14 +import { Toast } from 'vant'
15 +
16 +export const useLogin = () => {
17 + const phone = ref('');
18 + const code = ref('')
19 +
20 + const form = ref(null);
21 + const submit = () => {
22 + let valid = form.value.validate();
23 + valid
24 + .then(() => {
25 + form.value.submit();
26 + })
27 + .catch(error => {
28 + console.error(error);
29 + Toast({
30 + message: '请检查后再次提交',
31 + icon: 'cross',
32 + });
33 + })
34 + }
35 +
36 + /**
37 + * 判断微信环境看是否弹出控件框
38 + * 桌面微信直接输入
39 + * 其他环境弹出输入框
40 + */
41 + let use_widget = ref(true);
42 + use_widget.value = !!(wxInfo().isiOS || wxInfo().isAndroid);
43 +
44 + const disabled = ref(true);
45 + /**
46 + * 手机号码校验
47 + * 函数返回 true 表示校验通过，false 表示不通过
48 + * @param {*} val
49 + */
50 + const validator = (val) => {
51 + let flag = false;
52 + // 简单判断手机号位数
53 + if (/1\d{10}/.test(val) && phone.value.length === 11) {
54 + disabled.value = false;
55 + flag = true;
56 + } else {
57 + disabled.value = true;
58 + flag = false;
59 + }
60 + return flag
61 + };
62 +
63 + /**
64 + * 数字弹框
65 + */
66 + const keyboard_show = ref(false);
67 + const refPhone = ref(null)
68 + const showKeyboard = () => { // 弹出数字弹框
69 + keyboard_show.value = true;
70 + };
71 + const keyboardBlur = () => { // 数字键盘失焦回调
72 + keyboard_show.value = false;
73 + refPhone.value.validate();
74 + };
75 +
76 + // 设置发送短信倒计时
77 + // TAG: vant 自带倒计时函数
78 + const limitSeconds = ref(60000); // 配置倒计时秒数
79 + const countDown = useCountDown({ // 配置倒计时
80 + time: limitSeconds.value,
81 + onFinish: () => {
82 + countDown.reset();
83 + }
84 + });
85 +
86 + const sendCode = async () => { // 发送验证码
87 + countDown.start();
88 + // 验证码接口
89 + const { code } = await smsAPI({ phone: phone.value });
90 + if (code) {
91 + Toast.success('发送成功');
92 + }
93 + };
94 +
95 + // 过滤输入的数字 只能四位
96 + const formatter = (value) => value.substring(0, 4);
97 +
98 + /**
99 + * 用户登录
100 + * @param {*} values
101 + */
102 + const $router = useRouter();
103 + const onSubmit = async (values) => {
104 + const { code } = await bLoginAPI({ phone: values.phone, pin: values.code })
105 + if (code) {
106 + $router.push({
107 + path: '/business/index'
108 + });
109 + }
110 + };
111 +
112 + return {
113 + phone,
114 + code,
115 + onSubmit,
116 + use_widget,
117 + disabled,
118 + validator,
119 + keyboardBlur,
120 + keyboard_show,
121 + showKeyboard,
122 + refPhone,
123 + form,
124 + submit,
125 + formatter,
126 + limitSeconds,
127 + countDown,
128 + sendCode,
129 + }
130 +}
1 +/*
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-25 18:34:17
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-06-22 01:35:44
6 + * @FilePath: /tswj/src/theme-vars.js
7 + * @Description: 修改vant默认表单样式
8 + */
9 +import { styleColor } from '@/constant.js';
10 +
11 +export const loginTheme = {
12 + buttonPrimaryBackground: styleColor.baseColor,
13 + buttonPrimaryBorderColor: styleColor.baseColor,
14 + buttonPrimaryColor: styleColor.baseFontColor,
15 + CellVerticalPadding: '14px'
16 +};
...@@ -10,14 +10,18 @@ ...@@ -10,14 +10,18 @@
10 </van-row> 10 </van-row>
11 </div> 11 </div>
12 <div class="login-section"> 12 <div class="login-section">
13 - <van-config-provider :theme-vars="themeVars"> 13 + <van-config-provider :theme-vars="loginTheme">
14 <van-form ref="form" @submit="onSubmit"> 14 <van-form ref="form" @submit="onSubmit">
15 <van-cell-group inset style="border: 1px solid #EAEAEA;"> 15 <van-cell-group inset style="border: 1px solid #EAEAEA;">
16 - <van-field v-if="use_widget" v-model="phone" name="phone" label="手机号" placeholder="手机号" readonly clickable :rules="[{ validator, message: '请输入正确手机号' }]" @touchstart.stop="showKeyboard" /> 16 + <van-field v-if="use_widget" ref="refPhone" v-model="phone" name="phone" label="手机号" placeholder="手机号"
17 - <van-field v-else v-model="phone" name="validator" label="手机号" placeholder="手机号" :rules="[{ validator, message: '请输入正确手机号' }]" /> 17 + readonly clickable :rules="[{ validator, message: '请输入正确手机号' }]" @touchstart.stop="showKeyboard" />
18 - <van-field v-model="code" center clearable name="code" type="digit" label="短信验证码" placeholder="请输入短信验证码" :formatter="formatter" :rules="[{ required: true, message: '请填写验证码' }]"> 18 + <van-field v-else v-model="phone" name="validator" label="手机号" placeholder="手机号"
19 + :rules="[{ validator, message: '请输入正确手机号', trigger: 'onBlur' }]" />
20 + <van-field v-model="code" center clearable name="code" type="digit" label="短信验证码" placeholder="请输入短信验证码"
21 + :formatter="formatter" :rules="[{ required: true, message: '请填写验证码' }]">
19 <template #button> 22 <template #button>
20 - <van-button v-if="countDown.current.value.total === limit" size="small" type="primary" :disabled="disabled" @click="sendCode"> 23 + <van-button v-if="countDown.current.value.total === limitSeconds" size="small" type="primary"
24 + :disabled="disabled" @click="sendCode">
21 <span>发送验证码</span> 25 <span>发送验证码</span>
22 </van-button> 26 </van-button>
23 <van-button v-else size="small" type="primary" :disabled="disabled"> 27 <van-button v-else size="small" type="primary" :disabled="disabled">
...@@ -33,7 +37,7 @@ ...@@ -33,7 +37,7 @@
33 登&nbsp;录 37 登&nbsp;录
34 </div> 38 </div>
35 39
36 - <van-number-keyboard v-model="phone" :show="keyboard_show" :maxlength="11" @blur="onBlur" /> 40 + <van-number-keyboard v-model="phone" :show="keyboard_show" :maxlength="11" @blur="keyboardBlur" />
37 41
38 <!-- 图片滑块验证 --> 42 <!-- 图片滑块验证 -->
39 <image-slider-verify :is-show="sliderShow" @done="handleConfirm" @on-close="handleClose" /> 43 <image-slider-verify :is-show="sliderShow" @done="handleConfirm" @on-close="handleClose" />
...@@ -42,59 +46,22 @@ ...@@ -42,59 +46,22 @@
42 <script setup> 46 <script setup>
43 import Cookies from 'js-cookie' 47 import Cookies from 'js-cookie'
44 import ImageSliderVerify from '@/components/ImageSliderVerify/index.vue' 48 import ImageSliderVerify from '@/components/ImageSliderVerify/index.vue'
45 -import { styleColor } from '@/constant.js'; 49 +import { loginTheme } from '@/theme-vars.js';
46 -
47 import { ref, onMounted } from 'vue'; 50 import { ref, onMounted } from 'vue';
48 -import { Toast } from 'vant'
49 import { useRouter } from 'vue-router' 51 import { useRouter } from 'vue-router'
50 import logo_image from '@images/denglu-top@2x.png' 52 import logo_image from '@images/denglu-top@2x.png'
51 -import { wxInfo } from '@/utils/tools'; 53 +import { useLogin } from '@/composables/useLogin';
52 -
53 -import { useCountDown } from '@vant/use';
54 -
55 -import { smsAPI } from '@/api/common'
56 -import { bLoginAPI } from '@/api/B/login'
57 54
55 +const { phone, code, onSubmit, use_widget, validator, keyboardBlur, disabled, keyboard_show, refPhone, showKeyboard, form, submit, formatter, limitSeconds, countDown, sendCode, } = useLogin();
58 const $router = useRouter(); 56 const $router = useRouter();
59 57
60 -// 判断是否显示控件
61 -let use_widget = ref(true);
62 -/**
63 - * 手机号码校验
64 - * 函数返回 true 表示校验通过，false 表示不通过
65 - * @param {*} val
66 - */
67 -const validator = (val) => {
68 - let flag = false;
69 - // 简单判断手机号位数
70 - if (/1\d{10}/.test(val) && phone.value.length === 11) {
71 - disabled.value = false;
72 - flag = true;
73 - } else {
74 - disabled.value = true;
75 - flag = false;
76 - }
77 - return flag
78 -};
79 -
80 -
81 -const phone = ref('');
82 -const code = ref('');
83 // TAG: 开发环境测试数据 58 // TAG: 开发环境测试数据
84 if (import.meta.env.DEV) { 59 if (import.meta.env.DEV) {
85 phone.value = import.meta.env.VITE_ID 60 phone.value = import.meta.env.VITE_ID
86 code.value = import.meta.env.VITE_PIN 61 code.value = import.meta.env.VITE_PIN
87 } 62 }
88 63
89 -const form = ref(null);
90 -
91 onMounted(() => { 64 onMounted(() => {
92 - /**
93 - * 判断微信环境看是否弹出控件框
94 - * 桌面微信直接输入
95 - * 其他环境弹出输入框
96 - */
97 - use_widget.value = !!(wxInfo().isiOS || wxInfo().isAndroid);
98 // 判断微信授权状态，进入页面时未授权需要授权跳转 65 // 判断微信授权状态，进入页面时未授权需要授权跳转
99 if (!Cookies.get('PHPSESSID')) { 66 if (!Cookies.get('PHPSESSID')) {
100 $router.replace({ 67 $router.replace({
...@@ -107,91 +74,6 @@ onMounted(() => { ...@@ -107,91 +74,6 @@ onMounted(() => {
107 } 74 }
108 }) 75 })
109 76
110 -const submit = () => {
111 - let valid = form.value.validate();
112 - valid
113 - .then(() => {
114 - form.value.submit();
115 - })
116 - .catch(error => {
117 - console.error(error);
118 - Toast({
119 - message: '请检查后再次提交',
120 - icon: 'cross',
121 - });
122 - })
123 -}
124 -
125 -// 手机号输入控件控制
126 -const keyboard_show = ref(false);
127 -const showKeyboard = () => { // 弹出数字弹框
128 - keyboard_show.value = true;
129 -};
130 -const onBlur = () => { // 数字键盘失焦回调
131 - keyboard_show.value = false;
132 - if (phone.value.length === 11) {
133 - disabled.value = false;
134 - }
135 -};
136 -
137 -// 设置发送短信倒计时
138 -// const countDown = ref(60);
139 -// const countDownHandle = () => {
140 -// // 倒计时
141 -// if (countDown.value === 0) {
142 -// countDown.value = 60;
143 -// } else {
144 -// countDown.value--;
145 -// setTimeout(() => {
146 -// countDownHandle()
147 -// }, 1000)
148 -// }
149 -// }
150 -
151 -// 设置发送短信倒计时
152 -// TAG: vant 自带倒计时函数
153 -const limit = ref(60000); // 配置倒计时秒数
154 -const countDown = useCountDown({ // 配置倒计时
155 - time: limit.value,
156 - onFinish: () => {
157 - countDown.reset();
158 - }
159 -});
160 -
161 -const sendCode = async () => { // 发送验证码
162 - countDown.start();
163 - // 验证码接口
164 - const { code } = await smsAPI({ phone: phone.value });
165 - if (code === 1) {
166 - Toast.success('发送成功');
167 - }
168 -};
169 -
170 -const disabled = ref(true);
171 -// 过滤输入的数字 只能四位
172 -const formatter = (value) => value.substring(0, 4);
173 -
174 -/**
175 - * 用户登录
176 - * @param {*} values
177 - */
178 -
179 -const onSubmit = async (values) => {
180 - const { code } = await bLoginAPI({ phone: values.phone, pin: values.code })
181 - if (code === 1) {
182 - $router.push({
183 - path: '/business/index'
184 - });
185 - }
186 -};
187 -
188 -const themeVars = {
189 - buttonPrimaryBackground: styleColor.baseColor,
190 - buttonPrimaryBorderColor: styleColor.baseColor,
191 - buttonPrimaryColor: styleColor.baseFontColor,
192 - CellVerticalPadding: '14px'
193 -};
194 -
195 // 滑块验证成功后回调 77 // 滑块验证成功后回调
196 const sliderShow = ref(false); 78 const sliderShow = ref(false);
197 const handleConfirm = (val) => { 79 const handleConfirm = (val) => {
......