Skip to content

Commit a26f914

Browse files
gookinggooking
committed
增加注册、重置登陆密码页面
1 parent 56d3f1c commit a26f914

4 files changed

Lines changed: 404 additions & 1 deletion

File tree

‎pages.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,18 @@
150150
"style": {
151151
"navigationBarTitleText": "登陆"
152152
}
153+
},
154+
{
155+
"path" : "pages/login/reg",
156+
"style": {
157+
"navigationBarTitleText": "注册新用户"
158+
}
159+
},
160+
{
161+
"path" : "pages/login/resetpwd",
162+
"style": {
163+
"navigationBarTitleText": "忘记密码找回"
164+
}
153165
}
154166
],
155167
"globalStyle": {

‎pages/login/login.vue‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
</view>
1414
<view class="submit">
1515
<u-button type="success" @click="submit">登陆</u-button>
16+
<view class="text-btns">
17+
<view @click="goReg">注册新账户</view>
18+
<view @click="goResetpwd">忘记登陆密码？</view>
19+
</view>
1620
</view>
1721
</view>
1822
</template>
@@ -60,6 +64,7 @@
6064
// https://www.yuque.com/apifm/nu0f75/xrg5e0
6165
async submit() {
6266
const res = await this.$wxapi.login_mobile(this.form.mobile, this.form.pwd, 'tianshitongzhuang', 'h5')
67+
console.log(res);
6368
if(res.code != 0) {
6469
uni.showToast({
6570
title: res.msg,
@@ -73,7 +78,17 @@
7378
uni.$emit('loginOK', {})
7479
uni.navigateBack()
7580
}, 500)
76-
}
81+
},
82+
goReg() {
83+
uni.redirectTo({
84+
url: '/pages/login/reg'
85+
})
86+
},
87+
goResetpwd() {
88+
uni.navigateTo({
89+
url: '/pages/login/resetpwd'
90+
})
91+
},
7792
}
7893
}
7994
</script>
@@ -84,4 +99,11 @@
8499
.submit {
85100
padding: 32rpx;
86101
}
102+
.text-btns {
103+
display: flex;
104+
justify-content: space-between;
105+
margin-top: 16rpx;
106+
font-size: 28rpx;
107+
color: #333;
108+
}
87109
</style>

‎pages/login/reg.vue‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
<template>
2+
<view>
3+
<u-empty mode="permission" text="注册开通新账号" marginTop="88rpx"></u-empty>
4+
<view class="form-box">
5+
<u--form ref="uForm" label-width="150rpx" :model="form">
6+
<u-form-item label="手机号码" prop="mobile" required>
7+
<u--input v-model="form.mobile" type="number" clearable maxlength="11" focus placeholder="请输入手机号码"></u--input>
8+
</u-form-item>
9+
<u-form-item label="图片验证码" prop="imgcode" required>
10+
<u--input v-model="form.imgcode" type="number" clearable maxlength="4" focus placeholder="请输入图片验证码"></u--input>
11+
<view slot="right">
12+
<u--image :showLoading="true" :src="imgsrc" width="200rpx" height="80rpx" @click="changeImgCode"></u--image>
13+
</view>
14+
</u-form-item>
15+
<u-form-item label="短信验证码" prop="code" required>
16+
<u--input v-model="form.code" type="number" clearable maxlength="4" focus placeholder="请输入短信验证码"></u--input>
17+
<view slot="right" style="padding-left: 24rpx;">
18+
<u-toast ref="uToast"></u-toast>
19+
<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" keepRunning @change="codeChange"></u-code>
20+
<u-button type="success" size="small" @tap="getCode">{{tips}}</u-button>
21+
</view>
22+
</u-form-item>
23+
<u-form-item label="设置密码" prop="pwd" required>
24+
<u--input v-model="form.pwd" type="password" clearable placeholder="请输入登陆密码"></u--input>
25+
</u-form-item>
26+
</u--form>
27+
</view>
28+
<view class="submit">
29+
<u-button type="success" @click="submit">立即注册</u-button>
30+
<view class="text-btns">
31+
<view @click="goLogin">已有账号？直接登陆</view>
32+
</view>
33+
</view>
34+
</view>
35+
</template>
36+
37+
<script>
38+
export default {
39+
data() {
40+
return {
41+
imgkey: undefined, // 图形验证码的key
42+
imgsrc: undefined, // 图形验证码图片地址
43+
seconds: 60, // 倒计时多少秒
44+
tips: undefined, // 倒计时提示信息
45+
rules: {
46+
mobile: [{
47+
required: true,
48+
message: '不能为空',
49+
// 可以单个或者同时写两个触发验证方式
50+
trigger: ['change', 'blur'],
51+
}],
52+
imgcode: [{
53+
required: true,
54+
message: '不能为空',
55+
// 可以单个或者同时写两个触发验证方式
56+
trigger: ['change', 'blur'],
57+
}],
58+
code: [{
59+
required: true,
60+
message: '不能为空',
61+
// 可以单个或者同时写两个触发验证方式
62+
trigger: ['change', 'blur'],
63+
}],
64+
pwd: [{
65+
required: true,
66+
message: '不能为空',
67+
// 可以单个或者同时写两个触发验证方式
68+
trigger: ['change', 'blur'],
69+
}],
70+
},
71+
form: {
72+
mobile: undefined,
73+
imgcode: undefined,
74+
code: undefined,
75+
pwd: undefined
76+
},
77+
}
78+
},
79+
created() {
80+
this.changeImgCode()
81+
},
82+
mounted() {
83+
84+
},
85+
onReady() {
86+
this.$refs.uForm.setRules(this.rules);
87+
},
88+
onLoad(e) {
89+
90+
},
91+
onShow() {
92+
93+
},
94+
methods: {
95+
changeImgCode() {
96+
this.imgkey = Math.random()
97+
// https://www.yuque.com/apifm/nu0f75/spvwou
98+
this.imgsrc = this.$wxapi.graphValidateCodeUrl(this.imgkey)
99+
},
100+
// 倒计时
101+
codeChange(text) {
102+
this.tips = text;
103+
},
104+
async getCode() {
105+
if(this.$refs.uCode.canGetCode) {
106+
if(!this.form.mobile) {
107+
uni.$u.toast('请输入手机号码');
108+
return
109+
}
110+
if(!this.form.imgcode) {
111+
uni.$u.toast('请输入图形验证码');
112+
return
113+
}
114+
// 模拟向后端请求验证码
115+
uni.showLoading({
116+
title: '正在获取验证码'
117+
})
118+
// https://www.yuque.com/apifm/nu0f75/pmoz4u
119+
const res = await this.$wxapi.smsValidateCode(this.form.mobile, this.imgkey, this.form.imgcode)
120+
if(res.code != 0) {
121+
uni.$u.toast(res.msg);
122+
return
123+
}
124+
uni.hideLoading();
125+
uni.$u.toast('验证码已发送');
126+
this.$refs.uCode.start();
127+
} else {
128+
uni.$u.toast('倒计时结束后再发送');
129+
}
130+
},
131+
end() {
132+
// uni.$u.toast('倒计时结束');
133+
},
134+
start() {
135+
// uni.$u.toast('倒计时开始');
136+
},
137+
goLogin() {
138+
uni.redirectTo({
139+
url: '/pages/login/login'
140+
})
141+
},
142+
async submit() {
143+
if(!this.form.mobile) {
144+
uni.$u.toast('请输入手机号码');
145+
return
146+
}
147+
if(!this.form.code) {
148+
uni.$u.toast('请输入短信验证码');
149+
return
150+
}
151+
// https://www.yuque.com/apifm/nu0f75/fo8wf6
152+
const res = await this.$wxapi.register_mobile({
153+
mobile: this.form.mobile,
154+
code: this.form.code,
155+
pwd: this.form.pwd,
156+
autoLogin: true,
157+
referrer: this.referrer ? this.referrer : ''
158+
})
159+
if(res.code != 0) {
160+
uni.showToast({
161+
title: res.msg,
162+
icon: 'none'
163+
})
164+
return
165+
}
166+
this.$u.vuex('token', res.data.token)
167+
this.$u.vuex('uid', res.data.uid)
168+
setTimeout(() => {
169+
uni.$emit('loginOK', {})
170+
uni.navigateBack()
171+
}, 500)
172+
}
173+
}
174+
}
175+
</script>
176+
<style scoped lang="scss">
177+
.form-box {
178+
padding: 32rpx;
179+
}
180+
.submit {
181+
padding: 32rpx;
182+
}
183+
.text-btns {
184+
display: flex;
185+
justify-content: space-between;
186+
margin-top: 16rpx;
187+
font-size: 28rpx;
188+
color: #333;
189+
}
190+
</style>

0 commit comments

Comments
 (0)