Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
63d0fde7 1 parent b2572fb8

✨ feat(登录模块): API联调

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