Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
45738740 1 parent b57f7a9c

✨ feat(登录页面): 样式业务逻辑新增

Inline Side-by-side
Showing 1 changed file with 228 additions and 6 deletions
1 <template> 1 <template>
2 - <div class=""></div> 2 + <van-image width="100%" height="100%" :src="logo_image" />
3 + <div style="margin-bottom: 1rem;">
4 + <van-row align="center">
5 + <van-col span="8">
6 + </van-col>
7 + <van-col span="8" style="text-align: center; margin-top: 2vh;">
8 + <p style="font-size: 2.5vh; margin: 1vh;">登&nbsp;录</p>
9 + </van-col>
10 + <van-col span="8">
11 + </van-col>
12 + </van-row>
13 + </div>
14 + <div class="login-section">
15 + <van-config-provider :theme-vars="themeVars">
16 + <van-form ref="form" @submit="onSubmit">
17 + <van-cell-group inset style="border: 1px solid #EAEAEA;">
18 + <van-field
19 + v-if="use_widget"
20 + v-model="phone"
21 + name="phone"
22 + label="手机号"
23 + placeholder="手机号"
24 + readonly clickable
25 + @touchstart.stop="showKeyboard"
26 + />
27 + <van-field
28 + v-else
29 + v-model="phone"
30 + name="phone"
31 + label="手机号"
32 + placeholder="手机号"
33 + :rules="[{ validator, message: '请输入正确手机号' }]"
34 + />
35 + <van-field
36 + v-model="code"
37 + center
38 + clearable
39 + name="code"
40 + label="短信验证码"
41 + placeholder="请输入短信验证码"
42 + :formatter="formatter"
43 + :rules="[{ required: true, message: '请填写验证码' }]"
44 + >
45 + <template #button>
46 + <van-button @click="sendCode" size="small" type="primary" :disabled="disabled">
47 + <span v-if="countDown === 60">发送验证码</span>
48 + <span v-else>{{ countDown }} 秒重新发送</span>
49 + </van-button>
50 + </template>
51 + </van-field>
52 + </van-cell-group>
53 + <div class="btn" @click="submit">
54 + 登&nbsp;录
55 + </div>
56 + </van-form>
57 + </van-config-provider>
58 + </div>
59 +
60 + <van-number-keyboard
61 + v-model="phone"
62 + :show="keyboard_show"
63 + :maxlength="11"
64 + @blur="onBlur"
65 + />
3 </template> 66 </template>
4 67
5 <script setup> 68 <script setup>
6 -import { ref, reactive, onMounted } from 'vue' 69 +import { ref, onMounted } from 'vue';
70 +import { Toast } from 'vant'
71 +import qs from 'Qs'
7 import { useRoute, useRouter } from 'vue-router' 72 import { useRoute, useRouter } from 'vue-router'
8 -import axios from '@/utils/axios'; 73 +import axios from '@/utils/axios'
9 -import $ from 'jquery' 74 +import logo_image from '@images/zhengshu-banner@2x.png'
10 -import { Toast } from 'vant'; 75 +import { wxInfo } from '@/utils/tools';
11 const $route = useRoute(); 76 const $route = useRoute();
12 const $router = useRouter(); 77 const $router = useRouter();
13 78
79 + // 判断是否显示控件
80 + let use_widget = ref(true);
81 + /**
82 + * 手机号码校验
83 + * 函数返回 true 表示校验通过，false 表示不通过
84 + * @param {*} val
85 + */
86 + const validator = (val) => {
87 + let flag = false;
88 + // 简单判断手机号位数
89 + if (/1\d{10}/.test(val) && phone.value.length === 11) {
90 + disabled.value = false;
91 + flag = true;
92 + } else {
93 + disabled.value = true;
94 + flag = false;
95 + }
96 + return flag
97 + };
14 onMounted(() => { 98 onMounted(() => {
99 + /**
100 + * 判断微信环境看是否弹出控件框
101 + * 桌面微信直接输入
102 + * 其他环境弹出输入框
103 + */
104 + if (wxInfo().isiOS || wxInfo().isAndroid) {
105 + use_widget.value = true;
106 + } else {
107 + use_widget.value = false;
108 + }
109 + })
110 +
111 + // 手机号输入控件控制
112 + const keyboard_show = ref(false);
113 + const showKeyboard = () => { // 弹出数字弹框
114 + keyboard_show.value = true;
115 + };
116 + const onBlur = () => { // 数字键盘失焦回调
117 + keyboard_show.value = false;
118 + if (phone.value.length === 11) {
119 + disabled.value = false;
120 + }
121 + };
122 +
123 + // 设置发送短信倒计时
124 + const countDown = ref(60);
125 + const countDownHandle = () => {
126 + // 倒计时
127 + if (countDown.value === 0) {
128 + countDown.value = 60;
129 + } else {
130 + countDown.value--;
131 + setTimeout(() => {
132 + countDownHandle()
133 + }, 1000)
134 + }
135 + }
136 + const sendCode = () => { // 发送验证码
137 + if (countDown.value === 60) {
138 + axios.post('/srv/?f=shzl_comment&a=bind_phone&t=get_code',
139 + qs.stringify({
140 + phone: phone.value
141 + }))
142 + .then(res => {
143 + if (res.data.code === 1) {
144 + Toast.success('发送成功');
145 + countDownHandle()
146 + } else {
147 + console.warn(res.data);
148 + Toast({
149 + message: res.data.msg,
150 + icon: 'close',
151 + });
152 + }
153 + })
154 + .catch(err => {
155 + console.error(err);
156 + })
157 + }
158 + };
15 159
160 + const phone = ref('');
161 + const code = ref('');
162 + const disabled = ref(true);
163 + // 过滤输入的数字 只能四位
164 + const formatter = (value) => value.substring(0, 4);
165 +
166 + /**
167 + * 用户登录
168 + * 3个汪 15500000000 投稿人
169 + * 点评人1 10000000001 点评人1职业
170 + * 点评人2 10000000002 点评热2职业
171 + * 点评人3 10000000003 点评人3职业
172 + * @param {*} values
173 + */
174 +
175 + const onSubmit = (values) => {
176 + axios.post('/srv/?f=shzl_comment&a=bind_phone&t=bind',
177 + qs.stringify({
178 + phone: values.phone,
179 + code: values.code,
180 + }))
181 + .then(res => {
182 + if (res.data.code === 1) {
183 + $router.push({
184 + path: '/'
185 + });
186 + } else {
187 + console.warn(res.data);
188 + Toast({
189 + message: res.data.msg,
190 + icon: 'close',
191 + });
192 + }
193 + })
194 + .catch(err => {
195 + console.error(err);
16 }) 196 })
197 + };
198 +
199 + const themeVars = {
200 + buttonPrimaryBackground: '#F9D95C',
201 + buttonPrimaryBorderColor: '#F9D95C',
202 + buttonPrimaryColor: '#713610',
203 + };
17 </script> 204 </script>
18 205
19 <script> 206 <script>
...@@ -30,11 +217,46 @@ export default { ...@@ -30,11 +217,46 @@ export default {
30 217
31 }, 218 },
32 methods: { 219 methods: {
33 - 220 + submit () {
221 + let valid = this.$refs.form.validate();
222 + valid
223 + .then(() => {
224 + this.$refs.form.submit();
225 + })
226 + .catch(error => {
227 + console.error(error);
228 + this.$toast({
229 + message: '请检查后再次提交',
230 + icon: 'cross',
231 + });
232 + })
34 } 233 }
234 + },
35 } 235 }
36 </script> 236 </script>
37 237
38 <style lang="less" scoped> 238 <style lang="less" scoped>
239 + body {
240 + --van-button-primary-background: white;
241 + }
39 242
243 + // .logo-section {
244 + // height: 22vh;
245 + // // padding: 2vh;
246 + // background-size: contain;
247 + // background-image: url('@images/zhengshu-banner@2x.png');
248 + // }
249 +
250 + .login-section {
251 + // background-color: #FAFAFA;
252 + .btn {
253 + margin: 16px;
254 + background-color: #F9D95C;
255 + text-align: center;
256 + color: #713610;
257 + font-size: 2vh;
258 + padding: 1vh;
259 + border-radius: 5px;
260 + }
261 + }
40 </style> 262 </style>
...\ No newline at end of file ...\ No newline at end of file
......