299 lines
7.5 KiB
Vue
299 lines
7.5 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="login-top">
|
|
<view class="top-logo-content">
|
|
手机号快捷登录
|
|
</view>
|
|
未注册的手机号码将自动注册
|
|
</view>
|
|
<!-- 姓名 -->
|
|
<view class="inputs">
|
|
<input type="text" v-model="name" placeholder="输入您的姓名" maxlength="4" />
|
|
</view>
|
|
<!-- 输入手机号相关 -->
|
|
<view class="inputs phone">
|
|
<label class="label">+86</label>
|
|
<input type="number" placeholder="输入您的手机号码" maxlength="11" v-model="tel" />
|
|
</view>
|
|
<view class="inputs sms">
|
|
<input type="number" placeholder="输入短信验证码" maxlength="4" v-model="code" />
|
|
<button class="sms-btn" type="default" size="mini" :disabled="tel == '' || getSms"
|
|
@click="getPhoneCode">{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
|
|
</view>
|
|
<button class="btn" type="default" :disabled="tel == '' || code == ''" @click="login">登录</button>
|
|
<!-- 用户登录注册协议 -->
|
|
<view class="agreement">
|
|
<checkbox-group @change="radioChange">
|
|
<checkbox color="#4490ff" :checked="checked" size='10' class="radioGroup" />
|
|
</checkbox-group>
|
|
<view class="agreement-text">
|
|
登录即表示同意用户<view @click="$Router.push({name: 'Agreement', params: {name : 'secret'}})">《隐私协议》</view>和<view @click="$Router.push({name: 'Agreement', params: {name : 'protocol'}})">《服务协议》</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="beianNo">黑ICP备2021013714号-1</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getSms,
|
|
smsAuth
|
|
} from '@/apis/interfaces/auth'
|
|
export default {
|
|
data() {
|
|
return {
|
|
name : "",
|
|
code : "",
|
|
parentId: "",
|
|
tel : '', //获取手机号
|
|
channelId: '', //渠道码
|
|
newUser : '', //是否为新用户
|
|
smsTime : 60,
|
|
checked : false, //勾选协议
|
|
getSms : false
|
|
}
|
|
},
|
|
mounted(){
|
|
this.parentId = this.$store.getters.getParentId
|
|
this.channelId = this.$Route.query.channel || ''
|
|
this.name = this.$Route.query.name
|
|
this.tel = this.$Route.query.tel
|
|
},
|
|
methods: {
|
|
// 用户登录
|
|
login() {
|
|
smsAuth({
|
|
mobileNo : this.tel,
|
|
code : this.code,
|
|
invite : this.parentId,
|
|
channel : this.channelId,
|
|
name : this.name
|
|
}).then(res => {
|
|
this.$store.commit('setIntive', res.invite)
|
|
if(this.checked) {
|
|
this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
|
|
if(this.$Route.query.skuId){
|
|
this.$Router.replace({
|
|
name: 'indexPlace',
|
|
params: {
|
|
name : this.name,
|
|
skuId : this.$Route.query.skuId
|
|
},
|
|
})
|
|
return
|
|
}
|
|
this.$Router.back()
|
|
// if(this.$Route.toName){
|
|
// }else{
|
|
// // this.$Router.back()
|
|
// if(getApp().globalData.envType == 'indexPage') {
|
|
// this.$Router.replaceAll({name: 'Index'})
|
|
// } else if(getApp().globalData.envType == 'userPage') {
|
|
// this.$Router.replaceAll({name: 'Index'})
|
|
// } else {
|
|
// this.$Router.replaceAll({name: 'Index'})
|
|
// }
|
|
// }
|
|
} else {
|
|
uni.showToast({
|
|
title: '请勾选用户隐私和服务协议',
|
|
icon: "none"
|
|
})
|
|
}
|
|
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
// 获取验证码
|
|
getPhoneCode() {
|
|
let outTime
|
|
getSms({
|
|
mobileNo: this.tel
|
|
}).then(res => {
|
|
this.newUser = res.new
|
|
uni.showToast({
|
|
title: res,
|
|
icon: "none"
|
|
})
|
|
this.getSms = true
|
|
outTime = setInterval(() => {
|
|
if (this.smsTime <= 1) {
|
|
this.getSms = false
|
|
this.smsTime = 60
|
|
clearInterval('outTime')
|
|
}
|
|
this.smsTime -= 1
|
|
}, 1000)
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 勾选协议
|
|
radioChange() {
|
|
this.checked = !this.checked
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
padding: $padding * 3 $padding * 2;
|
|
box-sizing: border-box;
|
|
background: white;
|
|
|
|
.login-top {
|
|
height: 17vh;
|
|
width: 100%;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
color: #919191;
|
|
.top-bg {
|
|
position: absolute;
|
|
bottom: 30rpx;
|
|
z-index: 2;
|
|
width: 740rpx;
|
|
}
|
|
.top-logo-content {
|
|
box-sizing: border-box;
|
|
color: #000;
|
|
font-weight: 600;
|
|
font-size: $title-size + 8;
|
|
margin-bottom: 10rpx;
|
|
.top-logo {
|
|
margin-bottom: 20rpx;
|
|
width: 146rpx;
|
|
height: 146rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.inputs {
|
|
background:rgba($color: $mian-color, $alpha: 0.05);
|
|
border: solid 1rpx $border-color;
|
|
position: relative;
|
|
margin-top: $margin;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
padding: 0 $padding;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
font-size: $title-size-lg;
|
|
}
|
|
|
|
&.phone {
|
|
padding-left: 120rpx;
|
|
|
|
.label {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 120rpx;
|
|
text-align: center;
|
|
border-right: solid 1rpx $border-color;
|
|
font-size: $title-size-lg;
|
|
}
|
|
}
|
|
|
|
&.sms {
|
|
padding-right: 200rpx;
|
|
.sms-btn[size='mini'] {
|
|
width: 200rpx;
|
|
height: 77rpx;
|
|
line-height: 77rpx;
|
|
position: absolute;
|
|
top: 1rpx;
|
|
right: 1rpx;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-radius: 0;
|
|
border-left: solid 1rpx $border-color;
|
|
color: $mian-color;
|
|
font-size: $title-size-lg;
|
|
&::after {
|
|
border: none;
|
|
}
|
|
&[disabled] {
|
|
color: rgba($color: $mian-color, $alpha: .6);
|
|
background: $border-color-light;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
font-size: $title-size + 6;
|
|
font-weight: bold;
|
|
color: $text-color;
|
|
margin-bottom: 100rpx;
|
|
}
|
|
|
|
.btn {
|
|
background: $mian-color;
|
|
color: white;
|
|
border-radius: 0;
|
|
margin-top: $margin;
|
|
font-size: $title-size;
|
|
line-height: 90rpx;
|
|
height: 90rpx;
|
|
font-weight: bold;
|
|
&::after {
|
|
border: none;
|
|
}
|
|
&[disabled] {
|
|
background: rgba($color: $mian-color, $alpha: .6);
|
|
}
|
|
}
|
|
.beianNo{
|
|
font-size: $title-size-sm;
|
|
color: $text-gray;
|
|
text-align: center;
|
|
padding-top: $padding*2;
|
|
position: fixed;
|
|
width: 100%;
|
|
left: 0;
|
|
bottom: 50rpx;
|
|
}
|
|
}
|
|
// 协议
|
|
.agreement {
|
|
font-size: $title-size-sm;
|
|
color: $text-gray;
|
|
margin-top: $margin - 10;
|
|
display: flex;
|
|
.radioGroup {
|
|
transform: scale(.6);
|
|
width: 55rpx;
|
|
text-align: left;
|
|
}
|
|
.agreement-text {
|
|
width: calc(100% - 55rpx);
|
|
line-height: 48rpx;
|
|
view {
|
|
color: #000;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
</style>
|