You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
322 lines
6.5 KiB
322 lines
6.5 KiB
<template> |
|
<view class="container"> |
|
<view style="display: flex;margin: 40upx;"> |
|
<image src="../../static/img/logo.jpg" mode="aspectFit" style="width: 140upx;height: 140upx;border-radius: 16upx;"></image> |
|
<view style="margin-left: 32upx;"> |
|
<view style="color: #e10a07;font-size: 32upx;">实名提醒</view> |
|
<view style="margin-right: 120upx;font-size: 28upx;color: #999999;margin-top: 16upx;">应国家法律要求全面实行实名制须绑定手机完成认证</view> |
|
</view> |
|
</view> |
|
<list-cell title="手机号" maxlength="11" type="number" placeholder="请输入手机号" v-model="mobile"></list-cell> |
|
<list-cell title="验证码" v-model="code" type="number" maxlength="6" placeholder="请输入验证码" isShowCode codeText="获取验证码" |
|
setTime="60" ref="runCodes" @setCode="sendMsg()"></list-cell> |
|
<button class="confirm-btn" @click="toLogin" :disabled="logining">确认绑定</button> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import listCell from '@/components/com-input'; |
|
export default { |
|
components: { |
|
listCell |
|
}, |
|
data() { |
|
return { |
|
mobile: '', |
|
code: '', |
|
logining: false, |
|
sending: false, |
|
sendTime: '获取验证码', |
|
count: 60 |
|
}; |
|
}, |
|
onShow() { |
|
//#ifdef H5 |
|
let ua = navigator.userAgent.toLowerCase(); |
|
if (ua.indexOf('micromessenger') !== -1) { |
|
if (this.$queue.getData("openid")) { |
|
this.$Request.get("/tao/wx/follow/" + this.$queue.getData("openid")).then(res => { |
|
if (res === false) { |
|
uni.redirectTo({ |
|
url: './erweima' |
|
}) |
|
} |
|
}); |
|
} |
|
}else{ |
|
uni.redirectTo({ |
|
url: './erweima' |
|
}) |
|
} |
|
//#endif |
|
}, |
|
onLoad() {}, |
|
methods: { |
|
inputChange(e) { |
|
const key = e.currentTarget.dataset.key; |
|
this[key] = e.detail.value; |
|
}, |
|
navBack() { |
|
uni.navigateBack(); |
|
}, |
|
|
|
countDown() { |
|
const { |
|
count |
|
} = this; |
|
if (count === 1) { |
|
this.count = 60; |
|
this.sending = false; |
|
this.sendTime = '获取验证码'; |
|
} else { |
|
this.count = count - 1; |
|
this.sending = true; |
|
this.sendTime = count - 1 + '秒后重新获取'; |
|
setTimeout(this.countDown.bind(this), 1000); |
|
} |
|
}, |
|
|
|
sendMsg() { |
|
const { |
|
mobile |
|
} = this; |
|
if (!mobile) { |
|
this.$queue.showToast('请输入手机号'); |
|
} else if (mobile.length !== 11) { |
|
this.$queue.showToast('请输入正确的手机号'); |
|
} else { |
|
this.$queue.showLoading('正在发送验证码...'); |
|
this.$Request.getT('/appLogin/sendMsg/' + mobile + '/bind').then(res => { |
|
if (res.code === 0) { |
|
this.sending = true; |
|
this.$queue.showToast('验证码发送成功请注意查收'); |
|
this.$refs.runCodes.$emit('runCodes'); |
|
uni.hideLoading(); |
|
} else { |
|
uni.hideLoading(); |
|
uni.showModal({ |
|
showCancel: false, |
|
title: '短信发送失败', |
|
content: res.msg, |
|
}); |
|
} |
|
}); |
|
} |
|
}, |
|
toLogin() { |
|
const { |
|
mobile, |
|
code |
|
} = this; |
|
let userId = this.$queue.getData('userId'); |
|
if (!mobile) { |
|
this.$queue.showToast('请输入手机号'); |
|
} else if (mobile.length !== 11) { |
|
this.$queue.showToast('请输入正确的手机号'); |
|
} else if (!code) { |
|
this.$queue.showToast('请输入验证码'); |
|
} else if (code.length != 6) { |
|
this.$queue.showToast('请输入正确的验证码'); |
|
} else { |
|
this.$queue.showLoading('正在绑定中...'); |
|
this.$Request.postT('/appLogin/bindPhone?msg=' + code + '&phone=' + mobile + '&userId=' + userId).then(res => { |
|
if (res.code === 0) { |
|
this.$queue.setData('mobile', mobile); |
|
uni.navigateBack() |
|
} else { |
|
uni.showModal({ |
|
showCancel: false, |
|
title: '绑定失败', |
|
content: res.msg |
|
}); |
|
} |
|
uni.hideLoading(); |
|
}); |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss"> |
|
page { |
|
background: #fff; |
|
} |
|
|
|
.send-msg { |
|
border-radius: 30px; |
|
color: white; |
|
height: 30px; |
|
font-size: 14px; |
|
line-height: 30px; |
|
background: #e10a07; |
|
} |
|
|
|
.container { |
|
top: 0; |
|
padding-top: 32upx; |
|
position: relative; |
|
width: 100%; |
|
height: 100%; |
|
overflow: hidden; |
|
background: #fff; |
|
} |
|
|
|
.wrapper { |
|
position: relative; |
|
z-index: 90; |
|
background: #fff; |
|
padding-bottom: 20px; |
|
} |
|
|
|
.back-btn { |
|
position: absolute; |
|
left: 20px; |
|
z-index: 9999; |
|
padding-top: var(--status-bar-height); |
|
top: 20px; |
|
font-size: 20px; |
|
color: $font-color-dark; |
|
} |
|
|
|
.left-top-sign { |
|
font-size: 80px; |
|
color: $page-color-base; |
|
position: relative; |
|
} |
|
|
|
.right-top-sign { |
|
position: absolute; |
|
top: 40px; |
|
right: -15px; |
|
z-index: 95; |
|
|
|
&:before, |
|
&:after { |
|
display: block; |
|
content: ''; |
|
width: 20px; |
|
height: 40px; |
|
background: #e10a07; |
|
} |
|
|
|
&:before { |
|
transform: rotate(50deg); |
|
border-radius: 0 50px 0 0; |
|
} |
|
|
|
&:after { |
|
position: absolute; |
|
right: -198px; |
|
top: 0; |
|
transform: rotate(-50deg); |
|
border-radius: 50px 0 0 0; |
|
/* background: pink; */ |
|
} |
|
} |
|
|
|
.left-bottom-sign { |
|
position: absolute; |
|
left: -270px; |
|
bottom: -320px; |
|
/*border: 100upx solid #d0d1fd;*/ |
|
border-radius: 50%; |
|
padding: 90px; |
|
} |
|
|
|
.welcome { |
|
position: relative; |
|
left: 30px; |
|
top: -55px; |
|
font-size: 28px; |
|
color: #555; |
|
text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3); |
|
} |
|
|
|
.input-content { |
|
padding: 0 20px; |
|
} |
|
|
|
.input-item { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
justify-content: center; |
|
padding: 0 30px; |
|
background: $page-color-light; |
|
height: 64px; |
|
border-radius: 4px; |
|
margin-bottom: 30px; |
|
|
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
|
|
.tit { |
|
height: 30px; |
|
line-height: 28px; |
|
font-size: $font-sm + 2upx; |
|
color: $font-color-base; |
|
} |
|
|
|
input { |
|
height: 40px; |
|
font-size: $font-base + 2upx; |
|
color: $font-color-dark; |
|
width: 100%; |
|
} |
|
} |
|
|
|
.confirm-btn { |
|
width: 300px; |
|
height: 42px; |
|
line-height: 42px; |
|
border-radius: 30px; |
|
margin-top: 70px; |
|
background: #e10a07; |
|
color: #fff; |
|
font-size: $font-lg; |
|
|
|
&:after { |
|
border-radius: 60px; |
|
} |
|
} |
|
|
|
.confirm-btn1 { |
|
width: 300px; |
|
height: 42px; |
|
line-height: 42px; |
|
border-radius: 30px; |
|
margin-top: 70px; |
|
background: whitesmoke; |
|
color: grey; |
|
font-size: $font-lg; |
|
|
|
&:after { |
|
border-radius: 60px; |
|
} |
|
} |
|
|
|
.forget-section { |
|
font-size: $font-sm + 2upx; |
|
color: $font-color-spec; |
|
text-align: center; |
|
margin-top: 40px; |
|
} |
|
|
|
.register-section { |
|
left: 0; |
|
margin-top: 30px; |
|
bottom: 30px; |
|
width: 100%; |
|
font-size: $font-sm + 2upx; |
|
color: $font-color-base; |
|
text-align: center; |
|
|
|
text { |
|
color: $font-color-spec; |
|
margin-left: 10px; |
|
} |
|
} |
|
</style>
|
|
|