Skip to content

杨炀 / ztx_wx_admin

Go to a project
Toggle navigation
Toggle navigation pinning
e51d7a54 by 华明祺
Options

注册

1 parent 77c7322e
Inline Side-by-side
Showing 2 changed files with 396 additions and 137 deletions
common/login.js
...@@ -256,7 +256,15 @@ function getInfo() { ...@@ -256,7 +256,15 @@ function getInfo() {
256 app.globalData.userInfo = user 256 app.globalData.userInfo = user
257 }) 257 })
258 } 258 }
259 259
260 // 团队会员用户注册接口
261 function groupMemberRegister(data) {
262 return request({
263 url: '/groupMemberRegister',
264 method: 'post',
265 params: data
266 })
267 }
260 268
261 export { 269 export {
262 getNowOpenId, 270 getNowOpenId,
...@@ -271,5 +279,6 @@ export { ...@@ -271,5 +279,6 @@ export {
271 getSmsCode, 279 getSmsCode,
272 h5Login, 280 h5Login,
273 h5LoginAuto, 281 h5LoginAuto,
274 loginByPhone 282 loginByPhone,
283 groupMemberRegister
275 } 284 }
......
pages/index/register.vue
1 <template> 1 <template>
2 <view> 2 <view>
3 <view class="page-bg"> 3 <view class="page-bg">
4 <image class="ren1" src="@/static/login/ren1.png"/> 4 <image class="ren1" src="@/static/login/ren1.png" />
5 <!-- 登录 --> 5 <!-- 登录 -->
6 <view class="retop"> 6 <view class="retop">
7 <image class="logotop" src="@/static/login/logo@2x.png"></image> 7 <image class="logotop" src="@/static/login/logo@2x.png"></image>
8 <view class="loginbox"> 8 <view class="loginbox">
9 9
10 <view class="formbox"> 10 <view class="formbox">
11 <view class="nav active">团体会员注册</view> 11 <view class="nav active">团体会员注册</view>
12 <form> 12 <form>
13 <view class="round-input-item"> 13 <view class="round-input-item">
14 <image class="icon" src="@/static/login/tag01@2x.png"></image> 14 <image class="icon" src="@/static/login/tag01@2x.png"></image>
15 <input placeholder="请输入手机号"/> 15 <uni-easyinput v-model="registerForm.telNo" placeholder="请输入手机号" />
16 </view> 16 </view>
17 <view class="round-input-item"> 17 <view class="round-input-item">
18 <image class="icon" src="@/static/login/tag02@2x.png"></image> 18 <image class="icon" src="@/static/login/tag02@2x.png"></image>
19 <input placeholder="密码"/> 19 <uni-easyinput v-model="registerForm.password" placeholder="密码" />
20 </view> 20 </view>
21 <view class="round-input-item"> 21 <view class="round-input-item">
22 <image class="icon" src="@/static/login/tag02@2x.png"></image> 22 <image class="icon" src="@/static/login/tag02@2x.png"></image>
23 <input placeholder="确认密码"/> 23 <uni-easyinput v-model="registerForm.password2" placeholder="确认密码" />
24 </view> 24 </view>
25 <view class="round-input-item"> 25 <view class="round-input-item">
26 <image class="icon" src="@/static/login/tag02@2x.png"></image> 26 <image class="icon" src="@/static/login/tag02@2x.png"></image>
27 <input placeholder="图形验证码"/> 27 <uni-easyinput placeholder="图形验证码" v-model="registerForm.captcha" />
28 <image/> 28 <image :src="codeUrl" @click="getCode" />
29 </view> 29 </view>
30 <view class="round-input-item"> 30 <view class="round-input-item">
31 <image class="icon" src="@/static/login/tag04@2x.png"></image> 31 <image class="icon" src="@/static/login/tag04@2x.png"></image>
32 <input placeholder="短信验证码"/> 32 <uni-easyinput placeholder="短信验证码" v-model="registerForm.code" />
33 <text>获取验证码</text> 33 <text v-if="!countDown.start" @click="getCaptchaSms">获取验证码</text>
34 </view> 34 <uni-countdown v-if="countDown.start" color="#014A9F" :show-day="false"
35 35 :show-hour="false" :show-min="false" @timeup="timeup" :start="countDown.start"
36 </form> 36 :second="countDown.second"></uni-countdown>
37 37 </view>
38 38
39 <view class="center-item"> 39 </form>
40 <button @click="login" class="btn-red">注册会员</button> 40
41 </view> 41
42 <view class="center-item" @click="goLogin"> 42 <view class="center-item">
43 <text class="text-red">已有账号，去登录</text> 43 <button @click="register" class="btn-red">注册会员</button>
44 </view> 44 </view>
45 45 <view class="center-item" @click="goLogin">
46 </view> 46 <text class="text-red">已有账号，去登录</text>
47 47 </view>
48 48
49 </view> 49 </view>
50 </view> 50
51 <image class="ren2" src="@/static/login/ren2.png"/> 51
52 <view class="fixedagree"> 52 </view>
53 <image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image> 53 </view>
54 <image v-else src="@/static/login/xz2@2x.png"></image> 54 <image class="ren2" src="@/static/login/ren2.png" />
55 <view>登录即代表您同意<text>《用户协议》</text><text>《隐私策略》</text></view> 55 <view class="fixedagree">
56 </view> 56 <!-- <image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image>
57 </view> 57 <image v-else src="@/static/login/xz2@2x.png"></image>
58 </view> 58 <view>登录即代表您同意<text>《用户协议》</text><text>《隐私策略》</text></view> -->
59 </template> 59 </view>
60 60 </view>
61 <script setup> 61 </view>
62 import { ref } from 'vue' 62 </template>
63 const agree = ref(false) 63
64 64 <script setup>
65 function changeAgree(item){ 65 import {
66 item = !item 66 ref
67 } 67 } from 'vue'
68 function login(){ 68 import {
69 let path = '/pages/index/index'; 69 getCodeImg,
70 uni.navigateTo({ 70 getSmsCode,
71 url: path 71 groupMemberRegister
72 }); 72 } from '@/common/login.js'
73 } 73
74 function goLogin(){ 74 const agree = ref(false)
75 let path = '/pages/index/login'; 75
76 uni.navigateTo({ 76 const registerForm = ref({
77 url: path 77 telNo: null,
78 }); 78 password: null,
79 } 79 password2: null,
80 </script> 80 code: null,
81 81 uuid: null,
82 <style scoped lang="scss"> 82 captcha: null
83 .logotop{width: 510rpx;height: 215rpx;margin:5vh auto 40rpx;display: block;} 83 })
84 .ren1{width: 300rpx;height: 560rpx;position: absolute;right: 0;top: 0;} 84 const countDown = ref({
85 .ren2{width: 456rpx;height:600rpx;position: relative;top: 20rpx;} 85 start: false,
86 .retop{position: relative;z-index: 1;} 86 second: 60
87 .page-bg{background: url('@/static/login/bg.png') no-repeat center; 87 })
88 background-size: cover; 88
89 height: 100vh;overflow: hidden;position: relative; 89 function changeAgree(item) {
90 } 90 item = !item
91 .loginbox{ 91 }
92 .loginNav{width: 700rpx;margin:0 auto -53rpx;height: 133rpx;overflow: hidden;position: relative; 92
93 view{text-align: center;height: 133rpx;box-sizing: border-box;padding: 26rpx 0 0;} 93 function register() {
94 .n1{background: url('@/static/login/tab1.png') no-repeat top left;background-size:contain;opacity: 0.7; 94 if (!registerForm.value.telNo) {
95 width: 407rpx;position: absolute;left: 0;} 95 uni.showToast({
96 .n2{background: url('@/static/login/tab2.png') no-repeat top right;background-size:contain;opacity: 0.7; 96 title: '手机号不能为空',
97 width: 399rpx;position: absolute;right: 0;} 97 icon: 'none'
98 .active{color: #AD181F;opacity: 1; 98 })
99 &::after{content: '';position: absolute;width: 25rpx;height: 4rpx;background: #AD181F;border-radius: 2rpx; 99 return
100 left: 0;right: 0;margin: auto;bottom: 50rpx; 100 }
101 } 101 if (!registerForm.value.password || !registerForm.value.password2) {
102 } 102 uni.showToast({
103 } 103 title: '密码不能为空',
104 } 104 icon: 'none'
105 .formbox{background: #fff;width: 700rpx;padding: 50rpx;margin: auto;border-radius: 20rpx;} 105 })
106 .flex-item{display: flex;justify-content: space-between;margin:30rpx 0; 106 return
107 font-size: 28rpx; 107 }
108 image{width: 30rpx;height: 30rpx;margin-right:16rpx;} 108 if (registerForm.value.password != registerForm.value.password2) {
109 } 109 uni.showToast({
110 .member{color: #4C5359;display: flex;align-items: center;} 110 title: '两次密码不一致，请重新输入',
111 .center-item{text-align: center;margin: 30rpx 0 0;font-size: 30rpx; 111 icon: 'none'
112 .btn-red{border-radius: 40rpx;width: 600rpx;line-height: 80rpx;font-size: 36rpx;} 112 })
113 } 113 return
114 .btn-red{background: #AD181F;color: #fff;} 114 }
115 .text-red{color: #AD181F;} 115 if (!form.value.code) {
116 .round-input-item{overflow: hidden;background: RGBA(247, 247, 248, 1);border-radius: 40rpx; 116 uni.showToast({
117 padding: 0 0 0 30rpx; 117 title: '验证码不能为空',
118 height: 80rpx;margin-bottom: 30rpx;display: flex;align-items: center; 118 icon: 'none'
119 image{width: 180rpx;height: 80rpx; 119 })
120 &.icon{width: 30rpx;height: 30rpx;margin-right:16rpx;} 120 return
121 } 121 }
122 input{border-left: 1rpx solid RGBA(214, 216, 219, 1);padding: 0 0 0 20rpx;font-size: 30rpx; 122
123 } 123 groupMemberRegister(registerForm.value)
124 input::-webkit-input-placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;} 124 .then((res) => {
125 input::placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;} 125 uni.showToast({
126 input::-moz-placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;} 126 title: `恭喜你，您的账号 ${registerForm.value.telNo} 注册成功！`
127 127 })
128 text{font-size: 28rpx;color: #014A9F;} 128 registerForm.value = {}
129 } 129 setTimeout(goLogin, 2000)
130 130 })
131 .fixedagree{position: fixed;bottom: 5vh;color: rgba(255, 255, 255, 0.7);display: flex; 131 }
132 font-size: 24rpx;width: 100vw;justify-content: center; 132
133 image{width: 40rpx;height: 40rpx;margin-right: 20rpx;} 133 function goLogin() {
134 } 134 let path = '/pages/index/login';
135 </style> 135 uni.navigateTo({
136 url: path
137 });
138 }
139
140 function getCode() {
141 getCodeImg().then((res) => {
142 codeUrl.value = 'data:image/gif;base64,' + res.data.img
143 registerForm.value.uuid = res.data.uuid
144 })
145 }
146
147 // 发送短信验证码
148 function getCaptchaSms() {
149 if (!registerForm.value.telNo) {
150 uni.showToast({
151 title: '手机号不能为空',
152 icon: 'none'
153 })
154 return
155 }
156 if (!registerForm.value.captcha) {
157 uni.showToast({
158 title: '图形验证码不能为空',
159 icon: 'none'
160 })
161 return
162 }
163
164 getSmsCode({
165 uuid: registerForm.value.uuid,
166 telNo: registerForm.value.telNo,
167 code: registerForm.value.captcha
168 }).then(res => {
169 uni.showToast({
170 title: '短信验证码下发成功',
171 icon: 'none'
172 })
173 countDown.value.start = true
174 }).catch(getCode)
175 }
176
177 function timeup() {
178 countDown.value.start = false
179 countDown.value.second = 60
180 getCode()
181 }
182 </script>
183
184 <style scoped lang="scss">
185 .logotop {
186 width: 510rpx;
187 height: 215rpx;
188 margin: 5vh auto 40rpx;
189 display: block;
190 }
191
192 .ren1 {
193 width: 300rpx;
194 height: 560rpx;
195 position: absolute;
196 right: 0;
197 top: 0;
198 }
199
200 .ren2 {
201 width: 456rpx;
202 height: 600rpx;
203 position: relative;
204 top: 20rpx;
205 }
206
207 .retop {
208 position: relative;
209 z-index: 1;
210 }
211
212 .page-bg {
213 background: url('@/static/login/bg.png') no-repeat center;
214 background-size: cover;
215 height: 100vh;
216 overflow: hidden;
217 position: relative;
218 }
219
220 .loginbox {
221 .loginNav {
222 width: 700rpx;
223 margin: 0 auto -53rpx;
224 height: 133rpx;
225 overflow: hidden;
226 position: relative;
227
228 view {
229 text-align: center;
230 height: 133rpx;
231 box-sizing: border-box;
232 padding: 26rpx 0 0;
233 }
234
235 .n1 {
236 background: url('@/static/login/tab1.png') no-repeat top left;
237 background-size: contain;
238 opacity: 0.7;
239 width: 407rpx;
240 position: absolute;
241 left: 0;
242 }
243
244 .n2 {
245 background: url('@/static/login/tab2.png') no-repeat top right;
246 background-size: contain;
247 opacity: 0.7;
248 width: 399rpx;
249 position: absolute;
250 right: 0;
251 }
252
253 .active {
254 color: #AD181F;
255 opacity: 1;
256
257 &::after {
258 content: '';
259 position: absolute;
260 width: 25rpx;
261 height: 4rpx;
262 background: #AD181F;
263 border-radius: 2rpx;
264 left: 0;
265 right: 0;
266 margin: auto;
267 bottom: 50rpx;
268 }
269 }
270 }
271 }
272
273 .formbox {
274 background: #fff;
275 width: 700rpx;
276 padding: 50rpx;
277 margin: auto;
278 border-radius: 20rpx;
279 }
280
281 .flex-item {
282 display: flex;
283 justify-content: space-between;
284 margin: 30rpx 0;
285 font-size: 28rpx;
286
287 image {
288 width: 30rpx;
289 height: 30rpx;
290 margin-right: 16rpx;
291 }
292 }
293
294 .member {
295 color: #4C5359;
296 display: flex;
297 align-items: center;
298 }
299
300 .center-item {
301 text-align: center;
302 margin: 30rpx 0 0;
303 font-size: 30rpx;
304
305 .btn-red {
306 border-radius: 40rpx;
307 width: 600rpx;
308 line-height: 80rpx;
309 font-size: 36rpx;
310 }
311 }
312
313 .btn-red {
314 background: #AD181F;
315 color: #fff;
316 }
317
318 .text-red {
319 color: #AD181F;
320 }
321
322 .round-input-item {
323 overflow: hidden;
324 background: RGBA(247, 247, 248, 1);
325 border-radius: 40rpx;
326 padding: 0 0 0 30rpx;
327 height: 80rpx;
328 margin-bottom: 30rpx;
329 display: flex;
330 align-items: center;
331
332 image {
333 width: 180rpx;
334 height: 80rpx;
335
336 &.icon {
337 width: 30rpx;
338 height: 30rpx;
339 margin-right: 16rpx;
340 }
341 }
342
343 input {
344 border-left: 1rpx solid RGBA(214, 216, 219, 1);
345 padding: 0 0 0 20rpx;
346 font-size: 30rpx;
347 }
348
349 input::-webkit-input-placeholder {
350 color: RGBA(158, 166, 174, 1);
351 font-size: 30rpx;
352 }
353
354 input::placeholder {
355 color: RGBA(158, 166, 174, 1);
356 font-size: 30rpx;
357 }
358
359 input::-moz-placeholder {
360 color: RGBA(158, 166, 174, 1);
361 font-size: 30rpx;
362 }
363
364 text {
365 font-size: 28rpx;
366 color: #014A9F;
367 }
368 }
369
370 .fixedagree {
371 position: fixed;
372 bottom: 5vh;
373 color: rgba(255, 255, 255, 0.7);
374 display: flex;
375 font-size: 24rpx;
376 width: 100vw;
377 justify-content: center;
378
379 image {
380 width: 40rpx;
381 height: 40rpx;
382 margin-right: 20rpx;
383 }
384 }
385 </style>
...\ No newline at end of file ...\ No newline at end of file
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!