<template>
|
<view class="content">
|
<view class="header" :style="{marginTop:systemInfo.statusBarHeight+'px'}" @click="navHome"><image mode="widthFix" src="/static/icon/icon_close.png"></image></view>
|
<view class="container">
|
<view class="logo">
|
<image class="logo-image" mode="widthFix" src="/static/icon/logo.png"></image>
|
<view class="logo-title">注册/登录</view>
|
</view>
|
<input type="number" class="input-phone" placeholder="请输入手机号" :maxlength="11" v-model="phone" />
|
<!-- <view class="passward-login"><text>密码登录</text></view> -->
|
<button class="button submit" :class="{disabled:verifyPhone}" :disabled="verifyPhone" @click="submit">发送验证码</button>
|
<!-- <view class="tip">点击按钮即代表同意热看点</view> -->
|
<view class="termsPrivacy" @click="checkedHandle">
|
<checkbox style="transform:scale(0.7)" :checked="checked" />
|
同意热看点
|
<view class="link" @click="$navTo('/pages/user/setup/documentDisplay?t=2&title=用户协议')">《用户协议》</view>
|
以及
|
<view class="link" @click="$navTo('/pages/user/setup/documentDisplay?t=3&title=隐私条款')">《隐私协议》</view>
|
</view>
|
<button class="button oneclick-login-btn" :loading="loading.loginBtn" open-type="getPhoneNumber" @getphonenumber="getphonenumber" @click="login">手机号一键登录</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState,
|
mapMutations
|
} from 'vuex'
|
export default {
|
data() {
|
return {
|
loading:{
|
loginBtn:false
|
},
|
phone:"",
|
checked:false
|
}
|
},
|
onLoad() {
|
},
|
computed:{
|
...mapState({
|
systemInfo: state=>state.systemInfo
|
}),
|
verifyPhone(){
|
const strictReg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/;
|
return !strictReg.test(this.phone)
|
}
|
},
|
methods: {
|
...mapMutations(['setUserInfo']),
|
submit(){
|
if(!this.checked){
|
this.$toast("请阅读并同意《用户协议》和《隐私协议》")
|
return
|
}
|
if(this.phone){
|
this.$navTo('/pages/login/verificationCode?phone=' + this.phone)
|
}
|
},
|
navHome(){
|
uni.reLaunch({
|
url:"/pages/index/index/index"
|
})
|
},
|
login(){
|
|
},
|
checkedHandle(){
|
this.checked = !this.checked
|
},
|
async getphonenumber(ev){
|
if(!ev.detail.code) return
|
if(!this.checked){
|
this.$toast("请阅读并同意《用户协议》和《隐私协议》")
|
return
|
}
|
if(this.loading.loginBtn) return
|
this.loading.loginBtn = true
|
try {
|
let { data } = await this.$apis.login.wxLoginGetPhone({code:ev.detail.code})
|
uni.login({
|
provider: 'weixin',
|
success: (e) => {
|
// 登录成功
|
let params = {
|
code: e.code,
|
encryptedData: ev.detail.encryptedData,
|
iv: ev.detail.iv,
|
phone: data
|
}
|
this.$apis.login.wxLogin(params).then(res=>{
|
this.loading.loginBtn = false
|
this.setUserInfo(res.data)
|
this.$toast('登录成功',ev=>{
|
uni.reLaunch({
|
url:"/pages/index/index/index"
|
})
|
})
|
}).catch(err=>{
|
this.loading.loginBtn = false
|
})
|
}
|
})
|
} catch (error) {
|
this.loading.loginBtn = false
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.content {
|
.header {
|
height: 83rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 26rpx;
|
padding-top: constant(safe-area-inset-top);
|
padding-top: env(safe-area-inset-top);
|
image{
|
width: 34.62rpx;
|
}
|
}
|
.container{
|
padding: 0 60rpx;
|
padding-top: 110rpx;
|
.logo {
|
display: flex;
|
align-items: center;
|
.logo-image {
|
width: 100rpx;
|
}
|
.logo-title {
|
padding-left: 28rpx;
|
font-weight: 700;
|
font-size: 46rpx;
|
color: #000000;
|
line-height: 63rpx;
|
}
|
}
|
.input-phone {
|
height: 116rpx;
|
margin-top: 35rpx;
|
border-bottom: 1rpx solid #D9D9D9;
|
}
|
.passward-login {
|
margin-top: 26rpx;
|
font-size: 24rpx;
|
color: rgba(0,0,0,0.6);
|
line-height: 24rpx;
|
display: flex;
|
justify-content: flex-end;
|
}
|
.submit {
|
width: 635rpx;
|
height: 96rpx;
|
background: #FFFFFF;
|
border-radius: 58rpx;
|
opacity: 0.8;
|
background-color: #FF2729;
|
font-weight: 700;
|
font-size: 35rpx;
|
color: #FFFFFF;
|
line-height: 48rpx;
|
margin-top: 78rpx;
|
&.disabled{
|
background-color: #FFD3D3;
|
}
|
}
|
.tip {
|
font-size: 24rpx;
|
color: rgba(0,0,0,0.6);
|
line-height: 34rpx;
|
margin-top: 30rpx;
|
text-align: center;
|
}
|
.termsPrivacy {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 23rpx;
|
font-size: 24rpx;
|
color: #000000;
|
line-height: 24rpx;
|
.link {}
|
}
|
.oneclick-login-btn{
|
width: 635rpx;
|
height: 96rpx;
|
border-radius: 58rpx;
|
border: 2rpx solid #FF2729;
|
|
font-weight: 700;
|
font-size: 35rpx;
|
color: #FF2729;
|
line-height: 48rpx;
|
position: absolute;
|
bottom: 196rpx;
|
}
|
}
|
}
|
</style>
|
