Skip to content

杨炀 / ztx_wx_gzt

Go to a project
Toggle navigation
Toggle navigation pinning
8e4243b3 by 杨炀
Options

Merge commit '636d78e7'

2 parents 0983d505 636d78e7
Inline Side-by-side
Showing 2 changed files with 322 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,340 @@ ...@@ -48,88 +51,340 @@
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 onMounted
68 } from 'vue'
69 import {
70 getCodeImg,
71 getSmsCode,
72 groupMemberRegister
73 } from '@/common/login.js'
64 74
65 function changeAgree(item){ 75 const agree = ref(false)
76 const codeUrl = ref(null)
77 const registerForm = ref({
78 telNo: null,
79 password: null,
80 password2: null,
81 code: null,
82 uuid: null,
83 captcha: null
84 })
85 const countDown = ref({
86 start: false,
87 second: 60
88 })
89
90 onMounted(() => {
91 getCode()
92 })
93
94 function changeAgree(item) {
66 item = !item 95 item = !item
96 }
97
98 function register() {
99 if (!registerForm.value.telNo) {
100 uni.showToast({
101 title: '手机号不能为空',
102 icon: 'none'
103 })
104 return
67 } 105 }
68 function login(){ 106 if (!registerForm.value.password || !registerForm.value.password2) {
69 let path = '/pages/index/index'; 107 uni.showToast({
70 uni.navigateTo({ 108 title: '密码不能为空',
71 url: path 109 icon: 'none'
72 }); 110 })
111 return
112 }
113 if (registerForm.value.password != registerForm.value.password2) {
114 uni.showToast({
115 title: '两次密码不一致，请重新输入',
116 icon: 'none'
117 })
118 return
119 }
120 if (!form.value.code) {
121 uni.showToast({
122 title: '验证码不能为空',
123 icon: 'none'
124 })
125 return
73 } 126 }
74 function goLogin(){ 127
128 groupMemberRegister(registerForm.value)
129 .then((res) => {
130 uni.showToast({
131 title: `恭喜你，您的账号 ${registerForm.value.telNo} 注册成功！`
132 })
133 registerForm.value = {}
134 setTimeout(goLogin, 2000)
135 })
136 }
137
138 function goLogin() {
75 let path = '/pages/index/login'; 139 let path = '/pages/index/login';
76 uni.navigateTo({ 140 uni.navigateTo({
77 url: path 141 url: path
78 }); 142 });
143 }
144
145 function getCode() {
146 getCodeImg().then((res) => {
147 codeUrl.value = 'data:image/gif;base64,' + res.data.img
148 registerForm.value.uuid = res.data.uuid
149 })
150 }
151
152 // 发送短信验证码
153 function getCaptchaSms() {
154 if (!registerForm.value.telNo) {
155 uni.showToast({
156 title: '手机号不能为空',
157 icon: 'none'
158 })
159 return
79 } 160 }
161 if (!registerForm.value.captcha) {
162 uni.showToast({
163 title: '图形验证码不能为空',
164 icon: 'none'
165 })
166 return
167 }
168
169 getSmsCode({
170 uuid: registerForm.value.uuid,
171 telNo: registerForm.value.telNo,
172 code: registerForm.value.captcha
173 }).then(res => {
174 uni.showToast({
175 title: '短信验证码下发成功',
176 icon: 'none'
177 })
178 countDown.value.start = true
179 }).catch(getCode)
180 }
181
182 function timeup() {
183 countDown.value.start = false
184 countDown.value.second = 60
185 getCode()
186 }
80 </script> 187 </script>
81 188
82 <style scoped lang="scss"> 189 <style scoped lang="scss">
83 .logotop{width: 510rpx;height: 215rpx;margin:5vh auto 40rpx;display: block;} 190 .logotop {
84 .ren1{width: 300rpx;height: 560rpx;position: absolute;right: 0;top: 0;} 191 width: 510rpx;
85 .ren2{width: 456rpx;height:600rpx;position: relative;top: 20rpx;} 192 height: 215rpx;
86 .retop{position: relative;z-index: 1;} 193 margin: 5vh auto 40rpx;
87 .page-bg{background: url('@/static/login/bg.png') no-repeat center; 194 display: block;
195 }
196
197 .ren1 {
198 width: 300rpx;
199 height: 560rpx;
200 position: absolute;
201 right: 0;
202 top: 0;
203 }
204
205 .ren2 {
206 width: 456rpx;
207 height: 600rpx;
208 position: relative;
209 top: 20rpx;
210 }
211
212 .retop {
213 position: relative;
214 z-index: 1;
215 }
216
217 .page-bg {
218 background: url('@/static/login/bg.png') no-repeat center;
88 background-size: cover; 219 background-size: cover;
89 height: 100vh;overflow: hidden;position: relative; 220 height: 100vh;
221 overflow: hidden;
222 position: relative;
90 } 223 }
91 .loginbox{ 224
92 .loginNav{width: 700rpx;margin:0 auto -53rpx;height: 133rpx;overflow: hidden;position: relative; 225 .loginbox {
93 view{text-align: center;height: 133rpx;box-sizing: border-box;padding: 26rpx 0 0;} 226 .loginNav {
94 .n1{background: url('@/static/login/tab1.png') no-repeat top left;background-size:contain;opacity: 0.7; 227 width: 700rpx;
95 width: 407rpx;position: absolute;left: 0;} 228 margin: 0 auto -53rpx;
96 .n2{background: url('@/static/login/tab2.png') no-repeat top right;background-size:contain;opacity: 0.7; 229 height: 133rpx;
97 width: 399rpx;position: absolute;right: 0;} 230 overflow: hidden;
98 .active{color: #AD181F;opacity: 1; 231 position: relative;
99 &::after{content: '';position: absolute;width: 25rpx;height: 4rpx;background: #AD181F;border-radius: 2rpx; 232
100 left: 0;right: 0;margin: auto;bottom: 50rpx; 233 view {
234 text-align: center;
235 height: 133rpx;
236 box-sizing: border-box;
237 padding: 26rpx 0 0;
238 }
239
240 .n1 {
241 background: url('@/static/login/tab1.png') no-repeat top left;
242 background-size: contain;
243 opacity: 0.7;
244 width: 407rpx;
245 position: absolute;
246 left: 0;
101 } 247 }
248
249 .n2 {
250 background: url('@/static/login/tab2.png') no-repeat top right;
251 background-size: contain;
252 opacity: 0.7;
253 width: 399rpx;
254 position: absolute;
255 right: 0;
256 }
257
258 .active {
259 color: #AD181F;
260 opacity: 1;
261
262 &::after {
263 content: '';
264 position: absolute;
265 width: 25rpx;
266 height: 4rpx;
267 background: #AD181F;
268 border-radius: 2rpx;
269 left: 0;
270 right: 0;
271 margin: auto;
272 bottom: 50rpx;
102 } 273 }
103 } 274 }
104 } 275 }
105 .formbox{background: #fff;width: 700rpx;padding: 50rpx;margin: auto;border-radius: 20rpx;} 276 }
106 .flex-item{display: flex;justify-content: space-between;margin:30rpx 0; 277
278 .formbox {
279 background: #fff;
280 width: 700rpx;
281 padding: 50rpx;
282 margin: auto;
283 border-radius: 20rpx;
284 }
285
286 .flex-item {
287 display: flex;
288 justify-content: space-between;
289 margin: 30rpx 0;
107 font-size: 28rpx; 290 font-size: 28rpx;
108 image{width: 30rpx;height: 30rpx;margin-right:16rpx;} 291
292 image {
293 width: 30rpx;
294 height: 30rpx;
295 margin-right: 16rpx;
296 }
297 }
298
299 .member {
300 color: #4C5359;
301 display: flex;
302 align-items: center;
109 } 303 }
110 .member{color: #4C5359;display: flex;align-items: center;} 304
111 .center-item{text-align: center;margin: 30rpx 0 0;font-size: 30rpx; 305 .center-item {
112 .btn-red{border-radius: 40rpx;width: 600rpx;line-height: 80rpx;font-size: 36rpx;} 306 text-align: center;
307 margin: 30rpx 0 0;
308 font-size: 30rpx;
309
310 .btn-red {
311 border-radius: 40rpx;
312 width: 600rpx;
313 line-height: 80rpx;
314 font-size: 36rpx;
315 }
316 }
317
318 .btn-red {
319 background: #AD181F;
320 color: #fff;
321 }
322
323 .text-red {
324 color: #AD181F;
113 } 325 }
114 .btn-red{background: #AD181F;color: #fff;} 326
115 .text-red{color: #AD181F;} 327 .round-input-item {
116 .round-input-item{overflow: hidden;background: RGBA(247, 247, 248, 1);border-radius: 40rpx; 328 overflow: hidden;
329 background: RGBA(247, 247, 248, 1);
330 border-radius: 40rpx;
117 padding: 0 0 0 30rpx; 331 padding: 0 0 0 30rpx;
118 height: 80rpx;margin-bottom: 30rpx;display: flex;align-items: center; 332 height: 80rpx;
119 image{width: 180rpx;height: 80rpx; 333 margin-bottom: 30rpx;
120 &.icon{width: 30rpx;height: 30rpx;margin-right:16rpx;} 334 display: flex;
335 align-items: center;
336
337 image {
338 width: 180rpx;
339 height: 80rpx;
340
341 &.icon {
342 width: 30rpx;
343 height: 30rpx;
344 margin-right: 16rpx;
345 }
121 } 346 }
122 input{border-left: 1rpx solid RGBA(214, 216, 219, 1);padding: 0 0 0 20rpx;font-size: 30rpx; 347
348 input {
349 border-left: 1rpx solid RGBA(214, 216, 219, 1);
350 padding: 0 0 0 20rpx;
351 font-size: 30rpx;
352 }
353
354 input::-webkit-input-placeholder {
355 color: RGBA(158, 166, 174, 1);
356 font-size: 30rpx;
123 } 357 }
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 358
128 text{font-size: 28rpx;color: #014A9F;} 359 input::placeholder {
360 color: RGBA(158, 166, 174, 1);
361 font-size: 30rpx;
129 } 362 }
130 363
131 .fixedagree{position: fixed;bottom: 5vh;color: rgba(255, 255, 255, 0.7);display: flex; 364 input::-moz-placeholder {
132 font-size: 24rpx;width: 100vw;justify-content: center; 365 color: RGBA(158, 166, 174, 1);
133 image{width: 40rpx;height: 40rpx;margin-right: 20rpx;} 366 font-size: 30rpx;
367 }
368
369 text {
370 font-size: 28rpx;
371 color: #014A9F;
372 }
373 }
374
375 .fixedagree {
376 position: fixed;
377 bottom: 5vh;
378 color: rgba(255, 255, 255, 0.7);
379 display: flex;
380 font-size: 24rpx;
381 width: 100vw;
382 justify-content: center;
383
384 image {
385 width: 40rpx;
386 height: 40rpx;
387 margin-right: 20rpx;
388 }
134 } 389 }
135 </style> 390 </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!