Skip to content

杨炀 / ztx_wx_gzt

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

注册

1 parent 77c7322e
Inline Side-by-side
Showing 2 changed files with 317 additions and 58 deletions
common/login.js
...@@ -257,6 +257,14 @@ function getInfo() { ...@@ -257,6 +257,14 @@ function getInfo() {
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>
...@@ -12,32 +12,35 @@ ...@@ -12,32 +12,35 @@
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 <uni-countdown v-if="countDown.start" color="#014A9F" :show-day="false"
35 :show-hour="false" :show-min="false" @timeup="timeup" :start="countDown.start"
36 :second="countDown.second"></uni-countdown>
34 </view> 37 </view>
35 38
36 </form> 39 </form>
37 40
38 41
39 <view class="center-item"> 42 <view class="center-item">
40 <button @click="login" class="btn-red">注册会员</button> 43 <button @click="register" class="btn-red">注册会员</button>
41 </view> 44 </view>
42 <view class="center-item" @click="goLogin"> 45 <view class="center-item" @click="goLogin">
43 <text class="text-red">已有账号，去登录</text> 46 <text class="text-red">已有账号，去登录</text>
...@@ -48,88 +51,335 @@ ...@@ -48,88 +51,335 @@
48 51
49 </view> 52 </view>
50 </view> 53 </view>
51 <image class="ren2" src="@/static/login/ren2.png"/> 54 <image class="ren2" src="@/static/login/ren2.png" />
52 <view class="fixedagree"> 55 <view class="fixedagree">
53 <image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image> 56 <!-- <image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image>
54 <image v-else src="@/static/login/xz2@2x.png"></image> 57 <image v-else src="@/static/login/xz2@2x.png"></image>
55 <view>登录即代表您同意<text>《用户协议》</text><text>《隐私策略》</text></view> 58 <view>登录即代表您同意<text>《用户协议》</text><text>《隐私策略》</text></view> -->
56 </view> 59 </view>
57 </view> 60 </view>
58 </view> 61 </view>
59 </template> 62 </template>
60 63
61 <script setup> 64 <script setup>
62 import { ref } from 'vue' 65 import {
63 const agree = ref(false) 66 ref
67 } from 'vue'
68 import {
69 getCodeImg,
70 getSmsCode,
71 groupMemberRegister
72 } from '@/common/login.js'
64 73
65 function changeAgree(item){ 74 const agree = ref(false)
75
76 const registerForm = ref({
77 telNo: null,
78 password: null,
79 password2: null,
80 code: null,
81 uuid: null,
82 captcha: null
83 })
84 const countDown = ref({
85 start: false,
86 second: 60
87 })
88
89 function changeAgree(item) {
66 item = !item 90 item = !item
91 }
92
93 function register() {
94 if (!registerForm.value.telNo) {
95 uni.showToast({
96 title: '手机号不能为空',
97 icon: 'none'
98 })
99 return
67 } 100 }
68 function login(){ 101 if (!registerForm.value.password || !registerForm.value.password2) {
69 let path = '/pages/index/index'; 102 uni.showToast({
70 uni.navigateTo({ 103 title: '密码不能为空',
71 url: path 104 icon: 'none'
72 }); 105 })
106 return
107 }
108 if (registerForm.value.password != registerForm.value.password2) {
109 uni.showToast({
110 title: '两次密码不一致，请重新输入',
111 icon: 'none'
112 })
113 return
114 }
115 if (!form.value.code) {
116 uni.showToast({
117 title: '验证码不能为空',
118 icon: 'none'
119 })
120 return
73 } 121 }
74 function goLogin(){ 122
123 groupMemberRegister(registerForm.value)
124 .then((res) => {
125 uni.showToast({
126 title: `恭喜你，您的账号 ${registerForm.value.telNo} 注册成功！`
127 })
128 registerForm.value = {}
129 setTimeout(goLogin, 2000)
130 })
131 }
132
133 function goLogin() {
75 let path = '/pages/index/login'; 134 let path = '/pages/index/login';
76 uni.navigateTo({ 135 uni.navigateTo({
77 url: path 136 url: path
78 }); 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
79 } 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 }
80 </script> 182 </script>
81 183
82 <style scoped lang="scss"> 184 <style scoped lang="scss">
83 .logotop{width: 510rpx;height: 215rpx;margin:5vh auto 40rpx;display: block;} 185 .logotop {
84 .ren1{width: 300rpx;height: 560rpx;position: absolute;right: 0;top: 0;} 186 width: 510rpx;
85 .ren2{width: 456rpx;height:600rpx;position: relative;top: 20rpx;} 187 height: 215rpx;
86 .retop{position: relative;z-index: 1;} 188 margin: 5vh auto 40rpx;
87 .page-bg{background: url('@/static/login/bg.png') no-repeat center; 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;
88 background-size: cover; 214 background-size: cover;
89 height: 100vh;overflow: hidden;position: relative; 215 height: 100vh;
216 overflow: hidden;
217 position: relative;
90 } 218 }
91 .loginbox{ 219
92 .loginNav{width: 700rpx;margin:0 auto -53rpx;height: 133rpx;overflow: hidden;position: relative; 220 .loginbox {
93 view{text-align: center;height: 133rpx;box-sizing: border-box;padding: 26rpx 0 0;} 221 .loginNav {
94 .n1{background: url('@/static/login/tab1.png') no-repeat top left;background-size:contain;opacity: 0.7; 222 width: 700rpx;
95 width: 407rpx;position: absolute;left: 0;} 223 margin: 0 auto -53rpx;
96 .n2{background: url('@/static/login/tab2.png') no-repeat top right;background-size:contain;opacity: 0.7; 224 height: 133rpx;
97 width: 399rpx;position: absolute;right: 0;} 225 overflow: hidden;
98 .active{color: #AD181F;opacity: 1; 226 position: relative;
99 &::after{content: '';position: absolute;width: 25rpx;height: 4rpx;background: #AD181F;border-radius: 2rpx; 227
100 left: 0;right: 0;margin: auto;bottom: 50rpx; 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;
101 } 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;
102 } 268 }
103 } 269 }
104 } 270 }
105 .formbox{background: #fff;width: 700rpx;padding: 50rpx;margin: auto;border-radius: 20rpx;} 271 }
106 .flex-item{display: flex;justify-content: space-between;margin:30rpx 0; 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;
107 font-size: 28rpx; 285 font-size: 28rpx;
108 image{width: 30rpx;height: 30rpx;margin-right:16rpx;} 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;
109 } 298 }
110 .member{color: #4C5359;display: flex;align-items: center;} 299
111 .center-item{text-align: center;margin: 30rpx 0 0;font-size: 30rpx; 300 .center-item {
112 .btn-red{border-radius: 40rpx;width: 600rpx;line-height: 80rpx;font-size: 36rpx;} 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;
113 } 320 }
114 .btn-red{background: #AD181F;color: #fff;} 321
115 .text-red{color: #AD181F;} 322 .round-input-item {
116 .round-input-item{overflow: hidden;background: RGBA(247, 247, 248, 1);border-radius: 40rpx; 323 overflow: hidden;
324 background: RGBA(247, 247, 248, 1);
325 border-radius: 40rpx;
117 padding: 0 0 0 30rpx; 326 padding: 0 0 0 30rpx;
118 height: 80rpx;margin-bottom: 30rpx;display: flex;align-items: center; 327 height: 80rpx;
119 image{width: 180rpx;height: 80rpx; 328 margin-bottom: 30rpx;
120 &.icon{width: 30rpx;height: 30rpx;margin-right:16rpx;} 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 }
121 } 341 }
122 input{border-left: 1rpx solid RGBA(214, 216, 219, 1);padding: 0 0 0 20rpx;font-size: 30rpx; 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;
123 } 352 }
124 input::-webkit-input-placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;}
125 input::placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;}
126 input::-moz-placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;}
127 353
128 text{font-size: 28rpx;color: #014A9F;} 354 input::placeholder {
355 color: RGBA(158, 166, 174, 1);
356 font-size: 30rpx;
129 } 357 }
130 358
131 .fixedagree{position: fixed;bottom: 5vh;color: rgba(255, 255, 255, 0.7);display: flex; 359 input::-moz-placeholder {
132 font-size: 24rpx;width: 100vw;justify-content: center; 360 color: RGBA(158, 166, 174, 1);
133 image{width: 40rpx;height: 40rpx;margin-right: 20rpx;} 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 }
134 } 384 }
135 </style> 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!