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 400 additions and 136 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
10 <view class="formbox">
11 <view class="nav active">团体会员注册</view>
12 <form>
13 <view class="round-input-item">
14 <image class="icon" src="@/static/login/tag01@2x.png"></image>
15 <uni-easyinput v-model="registerForm.telNo" placeholder="请输入手机号" />
16 </view>
17 <view class="round-input-item">
18 <image class="icon" src="@/static/login/tag02@2x.png"></image>
19 <uni-easyinput v-model="registerForm.password" placeholder="密码" />
20 </view>
21 <view class="round-input-item">
22 <image class="icon" src="@/static/login/tag02@2x.png"></image>
23 <uni-easyinput v-model="registerForm.password2" placeholder="确认密码" />
24 </view>
25 <view class="round-input-item">
26 <image class="icon" src="@/static/login/tag02@2x.png"></image>
27 <uni-easyinput placeholder="图形验证码" v-model="registerForm.captcha" />
28 <image :src="codeUrl" @click="getCode" />
29 </view>
30 <view class="round-input-item">
31 <image class="icon" src="@/static/login/tag04@2x.png"></image>
32 <uni-easyinput placeholder="短信验证码" v-model="registerForm.code" />
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>
37 </view>
38
39 </form>
40
41
42 <view class="center-item">
43 <button @click="register" class="btn-red">注册会员</button>
44 </view>
45 <view class="center-item" @click="goLogin">
46 <text class="text-red">已有账号，去登录</text>
47 </view>
48
49 </view>
50
51
52 </view>
53 </view>
54 <image class="ren2" src="@/static/login/ren2.png" />
55 <view class="fixedagree">
56 <!-- <image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image>
57 <image v-else src="@/static/login/xz2@2x.png"></image>
58 <view>登录即代表您同意<text>《用户协议》</text><text>《隐私策略》</text></view> -->
59 </view>
60 </view>
61 </view>
62 </template>
63
64 <script setup>
65 import {
66 ref,
67 onMounted
68 } from 'vue'
69 import {
70 getCodeImg,
71 getSmsCode,
72 groupMemberRegister
73 } from '@/common/login.js'
74
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 })
9 89
10 <view class="formbox"> 90 onMounted(() => {
11 <view class="nav active">团体会员注册</view> 91 getCode()
12 <form> 92 })
13 <view class="round-input-item"> 93
14 <image class="icon" src="@/static/login/tag01@2x.png"></image> 94 function changeAgree(item) {
15 <input placeholder="请输入手机号"/> 95 item = !item
16 </view> 96 }
17 <view class="round-input-item"> 97
18 <image class="icon" src="@/static/login/tag02@2x.png"></image> 98 function register() {
19 <input placeholder="密码"/> 99 if (!registerForm.value.telNo) {
20 </view> 100 uni.showToast({
21 <view class="round-input-item"> 101 title: '手机号不能为空',
22 <image class="icon" src="@/static/login/tag02@2x.png"></image> 102 icon: 'none'
23 <input placeholder="确认密码"/> 103 })
24 </view> 104 return
25 <view class="round-input-item"> 105 }
26 <image class="icon" src="@/static/login/tag02@2x.png"></image> 106 if (!registerForm.value.password || !registerForm.value.password2) {
27 <input placeholder="图形验证码"/> 107 uni.showToast({
28 <image/> 108 title: '密码不能为空',
29 </view> 109 icon: 'none'
30 <view class="round-input-item"> 110 })
31 <image class="icon" src="@/static/login/tag04@2x.png"></image> 111 return
32 <input placeholder="短信验证码"/> 112 }
33 <text>获取验证码</text> 113 if (registerForm.value.password != registerForm.value.password2) {
34 </view> 114 uni.showToast({
35 115 title: '两次密码不一致，请重新输入',
36 </form> 116 icon: 'none'
37 117 })
38 118 return
39 <view class="center-item"> 119 }
40 <button @click="login" class="btn-red">注册会员</button> 120 if (!form.value.code) {
41 </view> 121 uni.showToast({
42 <view class="center-item" @click="goLogin"> 122 title: '验证码不能为空',
43 <text class="text-red">已有账号，去登录</text> 123 icon: 'none'
44 </view> 124 })
45 125 return
46 </view> 126 }
47 127
48 128 groupMemberRegister(registerForm.value)
49 </view> 129 .then((res) => {
50 </view> 130 uni.showToast({
51 <image class="ren2" src="@/static/login/ren2.png"/> 131 title: `恭喜你，您的账号 ${registerForm.value.telNo} 注册成功！`
52 <view class="fixedagree"> 132 })
53 <image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image> 133 registerForm.value = {}
54 <image v-else src="@/static/login/xz2@2x.png"></image> 134 setTimeout(goLogin, 2000)
55 <view>登录即代表您同意<text>《用户协议》</text><text>《隐私策略》</text></view> 135 })
56 </view> 136 }
57 </view> 137
58 </view> 138 function goLogin() {
59 </template> 139 let path = '/pages/index/login';
60 140 uni.navigateTo({
61 <script setup> 141 url: path
62 import { ref } from 'vue' 142 });
63 const agree = ref(false) 143 }
64 144
65 function changeAgree(item){ 145 function getCode() {
66 item = !item 146 getCodeImg().then((res) => {
67 } 147 codeUrl.value = 'data:image/gif;base64,' + res.data.img
68 function login(){ 148 registerForm.value.uuid = res.data.uuid
69 let path = '/pages/index/index'; 149 })
70 uni.navigateTo({ 150 }
71 url: path 151
72 }); 152 // 发送短信验证码
73 } 153 function getCaptchaSms() {
74 function goLogin(){ 154 if (!registerForm.value.telNo) {
75 let path = '/pages/index/login'; 155 uni.showToast({
76 uni.navigateTo({ 156 title: '手机号不能为空',
77 url: path 157 icon: 'none'
78 }); 158 })
79 } 159 return
80 </script> 160 }
81 161 if (!registerForm.value.captcha) {
82 <style scoped lang="scss"> 162 uni.showToast({
83 .logotop{width: 510rpx;height: 215rpx;margin:5vh auto 40rpx;display: block;} 163 title: '图形验证码不能为空',
84 .ren1{width: 300rpx;height: 560rpx;position: absolute;right: 0;top: 0;} 164 icon: 'none'
85 .ren2{width: 456rpx;height:600rpx;position: relative;top: 20rpx;} 165 })
86 .retop{position: relative;z-index: 1;} 166 return
87 .page-bg{background: url('@/static/login/bg.png') no-repeat center; 167 }
88 background-size: cover; 168
89 height: 100vh;overflow: hidden;position: relative; 169 getSmsCode({
90 } 170 uuid: registerForm.value.uuid,
91 .loginbox{ 171 telNo: registerForm.value.telNo,
92 .loginNav{width: 700rpx;margin:0 auto -53rpx;height: 133rpx;overflow: hidden;position: relative; 172 code: registerForm.value.captcha
93 view{text-align: center;height: 133rpx;box-sizing: border-box;padding: 26rpx 0 0;} 173 }).then(res => {
94 .n1{background: url('@/static/login/tab1.png') no-repeat top left;background-size:contain;opacity: 0.7; 174 uni.showToast({
95 width: 407rpx;position: absolute;left: 0;} 175 title: '短信验证码下发成功',
96 .n2{background: url('@/static/login/tab2.png') no-repeat top right;background-size:contain;opacity: 0.7; 176 icon: 'none'
97 width: 399rpx;position: absolute;right: 0;} 177 })
98 .active{color: #AD181F;opacity: 1; 178 countDown.value.start = true
99 &::after{content: '';position: absolute;width: 25rpx;height: 4rpx;background: #AD181F;border-radius: 2rpx; 179 }).catch(getCode)
100 left: 0;right: 0;margin: auto;bottom: 50rpx; 180 }
101 } 181
102 } 182 function timeup() {
103 } 183 countDown.value.start = false
104 } 184 countDown.value.second = 60
105 .formbox{background: #fff;width: 700rpx;padding: 50rpx;margin: auto;border-radius: 20rpx;} 185 getCode()
106 .flex-item{display: flex;justify-content: space-between;margin:30rpx 0; 186 }
107 font-size: 28rpx; 187 </script>
108 image{width: 30rpx;height: 30rpx;margin-right:16rpx;} 188
109 } 189 <style scoped lang="scss">
110 .member{color: #4C5359;display: flex;align-items: center;} 190 .logotop {
111 .center-item{text-align: center;margin: 30rpx 0 0;font-size: 30rpx; 191 width: 510rpx;
112 .btn-red{border-radius: 40rpx;width: 600rpx;line-height: 80rpx;font-size: 36rpx;} 192 height: 215rpx;
113 } 193 margin: 5vh auto 40rpx;
114 .btn-red{background: #AD181F;color: #fff;} 194 display: block;
115 .text-red{color: #AD181F;} 195 }
116 .round-input-item{overflow: hidden;background: RGBA(247, 247, 248, 1);border-radius: 40rpx; 196
117 padding: 0 0 0 30rpx; 197 .ren1 {
118 height: 80rpx;margin-bottom: 30rpx;display: flex;align-items: center; 198 width: 300rpx;
119 image{width: 180rpx;height: 80rpx; 199 height: 560rpx;
120 &.icon{width: 30rpx;height: 30rpx;margin-right:16rpx;} 200 position: absolute;
121 } 201 right: 0;
122 input{border-left: 1rpx solid RGBA(214, 216, 219, 1);padding: 0 0 0 20rpx;font-size: 30rpx; 202 top: 0;
123 } 203 }
124 input::-webkit-input-placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;} 204
125 input::placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;} 205 .ren2 {
126 input::-moz-placeholder{color:RGBA(158, 166, 174, 1);font-size: 30rpx;} 206 width: 456rpx;
127 207 height: 600rpx;
128 text{font-size: 28rpx;color: #014A9F;} 208 position: relative;
129 } 209 top: 20rpx;
130 210 }
131 .fixedagree{position: fixed;bottom: 5vh;color: rgba(255, 255, 255, 0.7);display: flex; 211
132 font-size: 24rpx;width: 100vw;justify-content: center; 212 .retop {
133 image{width: 40rpx;height: 40rpx;margin-right: 20rpx;} 213 position: relative;
134 } 214 z-index: 1;
135 </style> 215 }
216
217 .page-bg {
218 background: url('@/static/login/bg.png') no-repeat center;
219 background-size: cover;
220 height: 100vh;
221 overflow: hidden;
222 position: relative;
223 }
224
225 .loginbox {
226 .loginNav {
227 width: 700rpx;
228 margin: 0 auto -53rpx;
229 height: 133rpx;
230 overflow: hidden;
231 position: relative;
232
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;
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;
273 }
274 }
275 }
276 }
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;
290 font-size: 28rpx;
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;
303 }
304
305 .center-item {
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;
325 }
326
327 .round-input-item {
328 overflow: hidden;
329 background: RGBA(247, 247, 248, 1);
330 border-radius: 40rpx;
331 padding: 0 0 0 30rpx;
332 height: 80rpx;
333 margin-bottom: 30rpx;
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 }
346 }
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;
357 }
358
359 input::placeholder {
360 color: RGBA(158, 166, 174, 1);
361 font-size: 30rpx;
362 }
363
364 input::-moz-placeholder {
365 color: RGBA(158, 166, 174, 1);
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 }
389 }
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!