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.
309 lines
7.5 KiB
309 lines
7.5 KiB
<template>
|
|
<view class="content">
|
|
<view class="header flex_row">
|
|
<image src="/static/images/logo_main.png"></image>
|
|
</view>
|
|
|
|
<view class="list flex_col">
|
|
<view class="sjh list-call">
|
|
<input class="sl-input" v-model="login.mobile" type="number" maxlength="11" placeholder="输入手机号码" />
|
|
</view>
|
|
<view class="tips">
|
|
<text v-if="showPhoneErr">手机号码格式错误，请重新填写</text>
|
|
</view>
|
|
|
|
<view class="yzm flex_row">
|
|
<view class="list-call l-short">
|
|
<input class="sl-input" v-model="login.verify_code" type="text" maxlength="6" placeholder="输入验证码"
|
|
password="true" />
|
|
</view>
|
|
|
|
<view v-if="!sended" class="list-call l-small flex_col" @click="sendSMS">
|
|
获取验证码
|
|
</view>
|
|
<view v-else class="list-call l-small flex_col">{{count}}s</view>
|
|
</view>
|
|
<view class="tips" >
|
|
<text v-if="showCodeErr">验证码错误，请重新填写</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="agreement-box flex_row flex_start">
|
|
<image @click="agreed=!agreed" class="a-icon" src="../../static/images/login/agreed_circle.png" mode="aspectFit" v-if="agreed"></image>
|
|
<image @click="agreed=!agreed" class="a-icon" src="../../static/images/login/agree_circle.png" mode="aspectFit" v-else></image>
|
|
我已同意
|
|
<!-- <text @click="jumpAgreement()">《隐私政策》</text>及 -->
|
|
<text @click="jumpAgreement()">《用户注册服务协议》</text>
|
|
</view>
|
|
|
|
<view class="button-login" hover-class="button-hover" @tap="bindLogin()">
|
|
<text>登录</text>
|
|
</view>
|
|
<button class="button-login button-reverse" hover-class="button-hover" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber" >
|
|
<text >获取微信手机号登录</text>
|
|
</button>
|
|
|
|
<!-- <view class="agreenment">
|
|
<navigator url="/pages/login/forget" open-type="navigate">忘记密码</navigator>
|
|
<text>|</text>
|
|
<navigator url="/pages/login/reg" open-type="navigate">注册账户</navigator>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
//没有挂载全局而按需引用接口,可以更清楚知道当前page所用接口
|
|
import {
|
|
postLogin,postSendSMS,wechatGetPhoneNumberLogin,configGet
|
|
} from "@/nxTemp/apis/userAPI.js"
|
|
import {mapActions} from 'vuex'
|
|
export default {
|
|
data() {
|
|
return {
|
|
sended:false,//是否发送验证码
|
|
count:60,
|
|
code:"",
|
|
agreed:false,//是否同意协议
|
|
login: {
|
|
mobile: '',//手机
|
|
ticket: '',//短信验证码返回的
|
|
verify_code:'',//验证码
|
|
// mobile: '13500071371',//手机
|
|
// ticket: 'test',//短信验证码返回的
|
|
// verify_code:'666666',//验证码
|
|
},
|
|
WXdetail:{
|
|
code:"",
|
|
appid:"",
|
|
encryptedData:"",
|
|
iv:"",
|
|
},
|
|
showCodeErr:false,
|
|
showPhoneErr:false
|
|
};
|
|
},
|
|
computed:{
|
|
checkMobile(){
|
|
return this.login.mobile
|
|
},
|
|
checkCode(){
|
|
return this.login.verify_code
|
|
}
|
|
},
|
|
async onLoad() {
|
|
// let _login = await this.$tools.promisify(uni.login)()
|
|
// this.code = _login.code
|
|
// uni.login({
|
|
// complete(e) {
|
|
// console.log(888,e);
|
|
// }
|
|
// })
|
|
},
|
|
methods: {
|
|
...mapActions(["setUserData"]),
|
|
bindLogin() {
|
|
let {mobile} = this.login
|
|
let phoneReg = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/);
|
|
if (!phoneReg.test(mobile)) {
|
|
this.showPhoneErr = true
|
|
return this.$tools.showNone("请输入正确的手机号");
|
|
}
|
|
this.showPhoneErr = false
|
|
if (this.login.verify_code.length < 6) {
|
|
this.showCodeErr = true
|
|
return this.$tools.showNone("请输入正确的验证码");
|
|
}
|
|
this.showCodeErr = false
|
|
|
|
if(!this.agreed){
|
|
return this.$tools.showNone("请确认已阅读并同意隐私协议");
|
|
}
|
|
postLogin(this.login).then(res => {
|
|
this.loginSuccess(res)
|
|
}).catch((e)=>{
|
|
this.$tools.showNone(e.errMsg)
|
|
})
|
|
},
|
|
//登录成功处理
|
|
loginSuccess({token,mobile}){
|
|
this.setUserData({token,mobile})
|
|
this.$Router.replace({name:"index"})
|
|
},
|
|
jumpAgreement(){
|
|
this.$Router.push('/pages/login/agreement')
|
|
},
|
|
sendSMS(){
|
|
console.log("sendSMS");
|
|
let {mobile} = this.login
|
|
let phoneReg = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/);
|
|
if(!mobile||!phoneReg.test(mobile)){
|
|
this.showPhoneErr = true
|
|
return
|
|
}else if(phoneReg.test(mobile)){
|
|
this.showPhoneErr = false
|
|
}
|
|
postSendSMS({mobile}).then(res => {
|
|
this.$tools.showNone("发送成功");
|
|
this.login.ticket = res||""
|
|
setButtonCount(this)
|
|
});
|
|
function setButtonCount(that){//激活验证码交互
|
|
that.sended = true
|
|
let _count = that.count
|
|
let timer = setInterval(()=>{
|
|
if(that.count>0)that.count--
|
|
else {
|
|
clearInterval(timer)
|
|
that.sended = false
|
|
that.count = _count
|
|
}
|
|
},1000)
|
|
}
|
|
},
|
|
async decryptPhoneNumber(e){
|
|
console.log("decryptPhoneNumber",e);
|
|
if(!this.agreed){
|
|
return this.$tools.showNone("请确认已阅读并同意隐私协议");
|
|
}
|
|
if(e.detail.errMsg!=="getPhoneNumber:ok")return this.$tools.showNone("该操作需要您的手机号码信息")
|
|
this.$tools.showNone("解析数据...")
|
|
|
|
const accountInfo = uni.getAccountInfoSync();
|
|
let {encryptedData,iv} = e.detail
|
|
let {code} = await this.$tools.promisify(uni.login)()
|
|
let appid = accountInfo.miniProgram.appId
|
|
this.WXdetail = {encryptedData,iv,code,appid}
|
|
this.getWXPhoneNumber(this.WXdetail)
|
|
},
|
|
getWXPhoneNumber(WXdetail){
|
|
|
|
wechatGetPhoneNumberLogin(WXdetail).then(res => {
|
|
// this.login.ticket = res.data||""
|
|
this.loginSuccess(res)
|
|
}).catch((e)=>{
|
|
this.$tools.showNone(e.errMsg)
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.header {
|
|
width: 261rpx;
|
|
height: 261rpx;
|
|
border-radius: 50%;
|
|
margin-top: 130rpx;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background-color: #009874;
|
|
}
|
|
|
|
.header image {
|
|
width: 171rpx;
|
|
height: 171rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.list {
|
|
padding-top: 130rpx;
|
|
padding-left: 70rpx;
|
|
padding-right: 70rpx;
|
|
.tips{
|
|
height: 50rpx;
|
|
padding-top: 10rpx;
|
|
width: 100%;
|
|
color: #EA5061;
|
|
}
|
|
}
|
|
|
|
.list-call {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
width: 688rpx;
|
|
color: #333333;
|
|
background: #F2F2F7;
|
|
border-radius: 10rpx;
|
|
// margin-bottom: 60rpx;
|
|
/* border-bottom: 0.5px solid #e2e2e2; */
|
|
|
|
}
|
|
.l-short{
|
|
width: 428rpx;
|
|
}
|
|
.l-small{
|
|
width: 240rpx;
|
|
margin-left: 20rpx;
|
|
color: #009874;
|
|
justify-content: center;
|
|
}
|
|
|
|
|
|
.list-call .sl-input {
|
|
flex: 1;
|
|
text-align: left;
|
|
font-size: 32rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.button-login {
|
|
color: #FFFFFF;
|
|
font-size: 34rpx;
|
|
width: 688rpx;
|
|
height: 100rpx;
|
|
border-radius: 10rpx;
|
|
background: #009874;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 40rpx;
|
|
font-weight: 800;
|
|
> button{
|
|
width: 688rpx;
|
|
height: 100%;
|
|
// height: 100rpx;
|
|
flex-shrink: 0;
|
|
padding: 0;
|
|
border: none;
|
|
font-size: 34rpx;
|
|
}
|
|
}
|
|
.button-reverse{
|
|
color: #009874;
|
|
background: white;
|
|
border: 2rpx solid #009874;
|
|
}
|
|
|
|
.button-hover {
|
|
// background: linear-gradient(-90deg, rgba(0, 186, 30, 0.8), rgba(0, 231, 0, 0.8));
|
|
}
|
|
|
|
.agreement-box{
|
|
margin-top: 20rpx;
|
|
padding-left: 30rpx;
|
|
color: #696D6F;
|
|
.a-icon{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
> text{
|
|
color: #009874;
|
|
}
|
|
}
|
|
</style>
|