<template>
<view >
<view class="bind-mob">
绑定手机号
</view>
<view class="mobile">
<view class="mobile-text">
手机号码
</view>
<view class="mobile-input">
<input type="number" v-model="mylogin.phone" placeholder="请填写手机号码" />
</view>
</view>
<view class="verificationCode">
<view class="verificationCode-text">
验证码
</view>
<view class="verificationCode-input">
<input type="text" v-model="mylogin.verify" placeholder="请输入验证码" />
<view @click="SendCode" :class="show ?'gray':'sendCode'" >
<!-- 发送验证码 -->
{
{
show?count+'s后重新发送':'发送验证码'}}
</view>
</view>
</view>
<view class="tips">
请输入准确手机号查看您的相关客户订单
</view>
<view class="login-btn">
<button @click="myLogin">登录</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
time:'',
show: false,
count: '',
timer: null,
// mobile:'13121599932'
mylogin:{
reg_type:'phone',
phone:'',
verify:'',
session_id:''
},
}
},
methods: {
SendCode(){
if(!this.mylogin.phone){
this.tui.toast('请输入手机号码')
}
else if(!this.utils.isMobile(this.mylogin.phone)){
this.tui.toast('手机号有误,请重填!')
}else {
this.api.verificationCode({
phone:this.mylogin.phone
})
.then(res=>{
// console.log(res.data.info)
if(res.data.code==200){
this.tui.toast('发送成功,请稍后!')
uni.setStorageSync('SessionId',res.data.session_id)
this.cacheHelper.setToken(res.data.session_id)
console.log(res.data.session_id);
this.mylogin.session_id = res.data.session_id
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = true;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = false;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
}else if(res.data.code==0){
this.tui.toast('发送太频繁了,请稍后重试!')
}
}).catch(err=>{
})
}
},
myLogin() {
if(!this.mylogin.phone){
this.tui.toast('请输入手机号')
}else if(!this.mylogin.verify){
this.tui.toast('请输入验证码')
}else {
console.log(12);
this.api.userSalemenlogin(this.mylogin).then(res=>{
console.log(res);
if(res.data.status==1){
uni.setStorageSync('uid',res.data.info)
// uni.setStorageSync('SessionId',res.data.session_id)
// this.cacheHelper.setToken(res.data.session_id)
uni.switchTab({
url:'/pages/orderList/orderList'
})
// uni.navigateTo({
// url:'/pages/orderList/orderList'
// })
}else{
this.tui.toast(res.data.info)
}
// console.log(res.data);
// this.cacheHelper.setToken(res.data.session_id)
}).catch(err=>{
})
}
// uni.navigateTo({
// url:'../orderList/orderList'
// })
}
}
}
</script>
<style lang="less" scoped>
.bind-mob {
height: 110rpx;
width: 100%;
line-height: 110rpx;
color: #333333;
font-size: 36rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
background-color: #F9F9F9;
margin-left: 30rpx;
}
.mobile {
padding: 30rpx 0;
box-sizing: border-box;
width: 690rpx;
margin: 0 auto;
border-bottom: 2px solid #EEEEEE;
.mobile-text {
margin-bottom: 20rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.mobile-input input:placeholder{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
}
.verificationCode {
width: 690rpx;
margin: 0 auto;
padding: 30rpx 0;
box-sizing: border-box;
border-bottom: 2px solid #EEEEEE;
.verificationCode-text {
margin-bottom: 20rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
.verificationCode-input{
display: flex;
justify-content: space-between;
input:placeholder{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
}
.sendCode {
width: 150rpx;
height: 60rpx;
background: #077840;
border-radius: 8rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #FFFFFF;
line-height: 60rpx;
text-align: center;
}
}
}
.tips {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
padding-top: 30rpx;
padding-left: 30rpx;
box-sizing: border-box;
}
.login-btn {
width: 630rpx;
height: 96rpx;
border-radius: 8rpx;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 96px;
margin-top: 60rpx;
margin-left: 60rpx;
button {
background: #077840;
color: #FFFFFF;
}
}
.gray {
font-size: 14rpx;
background-color: #077840;
width: 180rpx;
height: 60rpx;
border-radius: 8rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 60rpx;
text-align: center;
}
</style>
