反馈修改完成
parent
8d7b51cf0b
commit
5566d8b197
1
app.json
1
app.json
|
|
@ -3,7 +3,6 @@
|
|||
"pages/start/start",
|
||||
"pages/login/login",
|
||||
"pages/login/bind/bind",
|
||||
"pages/login/code/code",
|
||||
"pages/login/verification/verification",
|
||||
"pages/home/home"
|
||||
]
|
||||
|
|
|
|||
|
|
@ -2,41 +2,52 @@ input::-webkit-input-placeholder,
|
|||
textarea::-webkit-input-placeholder{
|
||||
color: #dedede;
|
||||
}
|
||||
.phone-txt{
|
||||
padding: 1.2rem .4rem 0;
|
||||
border-top: .02rem solid #FAFAFA;
|
||||
.verification{
|
||||
background-color: #f1f4f7;
|
||||
}
|
||||
.phone-bg{
|
||||
padding: 0 .4rem;
|
||||
background-color: #FFFFFF;
|
||||
border-top: .2rem solid #f1f4f7;
|
||||
}
|
||||
.phone-title{
|
||||
font-size: .4rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.phone-txt input{
|
||||
width: 100%;
|
||||
height: .9rem;
|
||||
line-height: .9rem;
|
||||
font-size: .32rem;
|
||||
border-bottom: .02rem solid #e2e4e6;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
border-bottom: .02rem solid #e2e4e6;
|
||||
}
|
||||
.flex .span-02{
|
||||
width: 100%;
|
||||
.flex>text{
|
||||
font-size: .3rem;
|
||||
line-height: 1.5;
|
||||
margin-top: .2rem;
|
||||
width: 1.6rem;
|
||||
}
|
||||
.flex .span-01{
|
||||
width: auto;
|
||||
.flex>input{
|
||||
width: calc(100% - 1.6rem);
|
||||
height: .9rem;
|
||||
line-height: .9rem;
|
||||
font-size: .3rem;
|
||||
line-height: 1.5;
|
||||
margin-top: .2rem;
|
||||
color: #348bff;
|
||||
}
|
||||
.flex-02{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.flex-02>view{
|
||||
width: 2rem;
|
||||
color: #333fc9;
|
||||
font-size: .28rem;
|
||||
text-align: right;
|
||||
}
|
||||
.flex-02>input{
|
||||
width: calc(100% - 3.6rem);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.login-btns{
|
||||
margin-top: 1rem;
|
||||
width: 6.8rem;
|
||||
margin: .5rem auto 0;
|
||||
}
|
||||
.login-btns>view{
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,20 @@
|
|||
<view>
|
||||
<view class="verification pull-content list-section">
|
||||
<view class="phone-txt">
|
||||
<view class="phone-title">手机号</view>
|
||||
<view class="phone-bg">
|
||||
<view class="flex">
|
||||
<text>手机号</text>
|
||||
<input type="input" onInput="bindKeyInput" placeholder="请输入需要绑定的手机号"/>
|
||||
</view>
|
||||
<view class="flex flex-02">
|
||||
<text>验证码</text>
|
||||
<input type="input" onInput="bindKeyCode" placeholder="请输入验证码"/>
|
||||
<view a:if="{{show}}" onTap="changeCode">获取验证码</view>
|
||||
<view a:else>{{count}}s后可再获取</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="login-btns">
|
||||
<view onTap="checkPhone">获取验证码</view>
|
||||
<view onTap="bindPhone">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,13 @@ Page({
|
|||
openPhoneTips: false, //验证手机号弹出框
|
||||
tipsMsg: '',
|
||||
toastText: '',
|
||||
phoneNumber: ''
|
||||
phoneNumber: '',
|
||||
|
||||
show: true, //显示获取验证码
|
||||
count: "", //剩余时间
|
||||
timer: null,
|
||||
code: '',
|
||||
value: ''
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -19,11 +25,45 @@ Page({
|
|||
this.setData({
|
||||
phoneNumber: e.detail.value,
|
||||
});
|
||||
console.log(this.data.phoneNumber,111)
|
||||
},
|
||||
|
||||
// 手机号登录
|
||||
// 验证手机号是否存在
|
||||
checkPhone(){
|
||||
// 获取输入验证码
|
||||
bindKeyCode(e) {
|
||||
this.setData({
|
||||
value: e.detail.value,
|
||||
});
|
||||
console.log(this.data.value,222)
|
||||
},
|
||||
|
||||
// 倒计时
|
||||
timeEV(){
|
||||
if (!this.data.timer) {
|
||||
this.setData({
|
||||
count: 60,
|
||||
show: false
|
||||
})
|
||||
let that = this;
|
||||
const countDown = setInterval(() => {
|
||||
if(that.data.count <= 1){
|
||||
that.setData({
|
||||
count:60,
|
||||
show: true
|
||||
})
|
||||
clearInterval(countDown)
|
||||
return
|
||||
}
|
||||
that.data.count --
|
||||
that.setData({
|
||||
count: that.data.count,
|
||||
show: false
|
||||
})
|
||||
},1000);
|
||||
}
|
||||
},
|
||||
|
||||
// 获取验证码
|
||||
changeCode(){
|
||||
console.log(this.data.phoneNumber,123)
|
||||
let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
|
||||
if (this.data.phoneNumber == "") {
|
||||
|
|
@ -52,10 +92,12 @@ Page({
|
|||
let params = {
|
||||
phone: this.data.phoneNumber
|
||||
}
|
||||
// 验证手机号是否存在
|
||||
dd.$http.post('/api/user/has-phone-user',params).then(res=>{
|
||||
console.log(res,'登录认证数据')
|
||||
if(res.data.registered == 0){
|
||||
this.bindPhone();
|
||||
this.timeEV();
|
||||
this.sendCode();
|
||||
}else if(res.data.registered == 1){
|
||||
this.setData({
|
||||
openPhoneTips: true,
|
||||
|
|
@ -64,19 +106,49 @@ Page({
|
|||
}
|
||||
})
|
||||
},
|
||||
// 手机号绑定
|
||||
bindPhone() {
|
||||
|
||||
// 发送验证码
|
||||
sendCode() {
|
||||
let params = {
|
||||
phone: this.data.phoneNumber,
|
||||
type: "bind",
|
||||
}
|
||||
dd.$http.post('/api/common/send-sms-captcha',params).then(res=>{
|
||||
console.log(res,'验证码数据')
|
||||
this.setData({
|
||||
code: res.data.code
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 绑定手机号
|
||||
bindPhone(){
|
||||
if(this.data.code == this.data.value){
|
||||
let params = {
|
||||
phone: this.data.phoneNumber,
|
||||
sms_code: this.data.value,
|
||||
}
|
||||
dd.$http.post('/api/user/bind-phone',params).then(res=>{
|
||||
console.log(res,'绑定数据')
|
||||
if (res.code == 0) {
|
||||
// 跳转页面
|
||||
dd.navigateTo ({
|
||||
url: '/pages/logins/code/code?phone='+this.data.phoneNumber+'&code='+res.data.code
|
||||
dd.redirectTo ({
|
||||
url: '/pages/home/home'
|
||||
})
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.setData({
|
||||
value: '',
|
||||
toastText: '验证码错误',
|
||||
isToast: true
|
||||
});
|
||||
setTimeout(()=> {
|
||||
this.setData({
|
||||
isToast: false
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭弹窗
|
||||
|
|
|
|||
|
|
@ -1,97 +0,0 @@
|
|||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder{
|
||||
color: #dedede;
|
||||
}
|
||||
/* 手机验证码 */
|
||||
.verification-txt{
|
||||
padding: 1.2rem .4rem 0;
|
||||
border-top: .02rem solid #FAFAFA;
|
||||
}
|
||||
.verification-txt>.p{
|
||||
font-size: .4rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.verification-txt>.span{
|
||||
display: block;
|
||||
font-size: .26rem;
|
||||
line-height: 1.5;
|
||||
color: #999999;
|
||||
margin-top: .2rem;
|
||||
}
|
||||
/* 输入验证码 */
|
||||
.security-code-wrap {
|
||||
overflow: hidden;
|
||||
padding: .2rem 0;
|
||||
position: relative;
|
||||
}
|
||||
.security-code-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 5.32rem;
|
||||
}
|
||||
.field-wrap {
|
||||
list-style: none;
|
||||
display: block;
|
||||
width: .72rem;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: .64rem;
|
||||
background-color: #fff;
|
||||
border-bottom: .02rem solid #e0e2e4;
|
||||
}
|
||||
.char-field {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
.input-code {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 5.32rem;
|
||||
height: 1rem;
|
||||
opacity: 0;
|
||||
overflow: visible;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 重获验证码 */
|
||||
.getCode{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: .8rem;
|
||||
margin-top: .4rem;
|
||||
background-color: #348bff;
|
||||
border-radius: .16rem;
|
||||
font-size: .32rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 提示框 */
|
||||
.toast{
|
||||
width: 3rem;
|
||||
padding: .2rem .25rem;
|
||||
background-color: rgba(255,255,255,.8);
|
||||
color: #333333;
|
||||
border-radius: .1rem;
|
||||
font-size: .28rem;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
z-index: 999;
|
||||
}
|
||||
.addr-select-bg{
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<view>
|
||||
<view class="verification pull-content list-section">
|
||||
<view class="verification-txt">
|
||||
<view class="p">输入验证码</view>
|
||||
<view class="span">验证码已发送至 +86 {{ phoneData }}</view>
|
||||
<view class="result">
|
||||
<view class="security-code-wrap">
|
||||
<view class="code" for="code">
|
||||
<view class="security-code-container">
|
||||
<view class="field-wrap" a:for="{{number}}" a:for-index="index">
|
||||
<text class="char-field">{{ value[index] || placeholder }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<input class="input-code" onBlur="handleInput" onInput="bindValueInput" id="code" type="text" maxlength="6"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="span" a:if="{{show}}">{{count}}秒后可重新获取验证码</view>
|
||||
<view a:else @click="getCode()" class="getCode">获取验证码</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 提示框 -->
|
||||
<view class="addr-select-bg" a:if="{{isToast}}"></view>
|
||||
<view class="toast" a:if="{{isToast}}">
|
||||
<view>{{toastText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
Page({
|
||||
data: {
|
||||
phoneData: "", //手机号
|
||||
verification: "", //验证码
|
||||
value: "",
|
||||
show: false, //显示获取验证码
|
||||
count: "", //剩余时间
|
||||
timer: null,
|
||||
userType: 0,
|
||||
placeholder:'-',
|
||||
number:6,
|
||||
code:'',
|
||||
isToast: false,
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
phoneData: options.phone,
|
||||
code: options.code,
|
||||
})
|
||||
|
||||
dd.setNavigationBar({
|
||||
title: '手机验证码',
|
||||
backgroundColor: '#FFFFFF',
|
||||
});
|
||||
|
||||
if (!this.data.timer) {
|
||||
this.setData({
|
||||
count: 60,
|
||||
show: true
|
||||
})
|
||||
let that = this;
|
||||
const countDown = setInterval(() => {
|
||||
if(that.data.count <= 1){
|
||||
that.setData({
|
||||
count:60,
|
||||
show: false
|
||||
})
|
||||
clearInterval(countDown)
|
||||
return
|
||||
}
|
||||
that.data.count --
|
||||
that.setData({
|
||||
count: that.data.count,
|
||||
show: true
|
||||
})
|
||||
},1000);
|
||||
}
|
||||
},
|
||||
// 获取验证码
|
||||
bindValueInput(e){
|
||||
this.setData({
|
||||
value: e.detail.value,
|
||||
});
|
||||
},
|
||||
|
||||
// 输入完成获取数据
|
||||
handleInput() {
|
||||
console.log(this.data.code,this.data.value,25252525)
|
||||
|
||||
if(this.data.code == this.data.value){
|
||||
this.hideKeyboard();
|
||||
}else{
|
||||
this.setData({
|
||||
value: '',
|
||||
toastText: '验证码错误',
|
||||
isToast: true
|
||||
});
|
||||
setTimeout(()=> {
|
||||
this.setData({
|
||||
isToast: false
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
|
||||
// 登录
|
||||
hideKeyboard() {
|
||||
let params = {
|
||||
phone: this.data.phoneData,
|
||||
sms_code: this.data.value,
|
||||
}
|
||||
dd.$http.post('/api/user/bind-phone',params).then(res=>{
|
||||
console.log(res,'绑定数据')
|
||||
if (res.code == 0) {
|
||||
// 跳转页面
|
||||
dd.redirectTo ({
|
||||
url: '/pages/home/home'
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
});
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
|
|
@ -21,5 +21,5 @@
|
|||
background-color: #3f5ee0;
|
||||
position: fixed;
|
||||
left: .24rem;
|
||||
top: 1.14rem;
|
||||
top: .5rem;
|
||||
}
|
||||
BIN
static/start.jpg
BIN
static/start.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 456 KiB After Width: | Height: | Size: 448 KiB |
Loading…
Reference in New Issue