374 lines
9.7 KiB
Vue
374 lines
9.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="login-t">
|
||
<image class="login-logo" :src="logoImage" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="login-m">
|
||
<view class="login-item">
|
||
<input type="number" v-model="mobile" :maxlength="maxMobile" placeholder="请输入手机号码" focus placeholder-class="login-item-i-p" />
|
||
</view>
|
||
<view class="login-item flc">
|
||
<input class="login-item-input" placeholder-class="login-item-i-p" type="text" v-model="code" placeholder="请输入验证码" />
|
||
<view :class="sendCodeBtn" @click="sendCode" v-if="verification">发送验证码</view>
|
||
<view class="btn btn-g" v-if="!verification">{{ timer }} 秒后重新获取</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="login-b">
|
||
<!-- #ifdef H5|APP-PLUS|APP-PLUS-NVUE -->
|
||
<view v-if="user_wx_id">
|
||
<button :class="regButtonClass" @click="toBind()" hover-class="btn-hover">登录</button>
|
||
</view>
|
||
<view v-else>
|
||
<button :class="regButtonClass" @click="login()" hover-class="btn-hover">登录</button>
|
||
<view class="login-other flc">
|
||
<view class="fz12 item" @click="selectLoginType">
|
||
密码登录
|
||
</view>
|
||
<view class="fz12 item" @click="toReg">
|
||
注册
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP -->
|
||
<button :class="regButtonClass" @click="showTopTips()" hover-class="btn-hover">登录</button>
|
||
<!-- #endif -->
|
||
|
||
</view>
|
||
<!-- <mallplusCopyright></mallplusCopyright> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapMutations, mapState } from 'vuex';
|
||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||
import Api from '@/common/api';
|
||
import store from '@/store/index';
|
||
import { goBack, jumpBackPage } from '@/config/mixins.js'
|
||
export default {
|
||
components: {
|
||
mallplusCopyright
|
||
},
|
||
mixins: [goBack,jumpBackPage],
|
||
data() {
|
||
return {
|
||
maxMobile: 11,
|
||
mobile: '', // 用户手机号
|
||
code: '', // 短信验证码
|
||
user_wx_id: '', //授权id
|
||
verification: true, // 通过v-show控制显示获取还是倒计时
|
||
timer: 60, // 定义初始时间为60s
|
||
btnb: 'btn btn-square btn-c btn-all', //按钮背景
|
||
type: '', // 有值是第三方登录账号绑定
|
||
isWeixinBrowser: this.$common.isWeiXinBrowser()
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
if (option.user_wx_id) {
|
||
this.user_wx_id = option.user_wx_id
|
||
uni.setNavigationBarTitle({
|
||
title: '绑定手机号'
|
||
})
|
||
}
|
||
|
||
|
||
// H5第三方授权登录绑定
|
||
// if (option.type && option.type === 'bind') {
|
||
// this.type = option.type
|
||
// uni.setNavigationBarTitle({
|
||
// title: '绑定手机号'
|
||
// })
|
||
// }
|
||
},
|
||
computed: {
|
||
// 验证手机号
|
||
rightMobile() {
|
||
let res = {}
|
||
if (!this.mobile) {
|
||
res.status = false
|
||
res.msg = '请输入手机号'
|
||
} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
|
||
res.status = false
|
||
res.msg = '手机号格式不正确'
|
||
} else {
|
||
res.status = true
|
||
}
|
||
return res
|
||
},
|
||
// 动态计算发送验证码按钮样式
|
||
sendCodeBtn() {
|
||
let btn = 'btn btn-g'
|
||
if (this.mobile.length === this.maxMobile && this.rightMobile.status) {
|
||
return btn + ' btn-b'
|
||
} else {
|
||
return btn
|
||
}
|
||
},
|
||
// 动态更改登录按钮bg
|
||
regButtonClass() {
|
||
return this.mobile && this.mobile.length === this.maxMobile && this.code
|
||
? this.btnb + ' btn-b'
|
||
: this.btnb
|
||
},
|
||
logoImage() {
|
||
return '/static/missing-face.png'
|
||
}
|
||
},
|
||
onShow() {
|
||
let _this = this
|
||
let userToken = _this.$db.get('userToken')
|
||
if (userToken) {
|
||
uni.switchTab({
|
||
url: '/pages/member/index/index'
|
||
})
|
||
return true
|
||
}
|
||
_this.timer = parseInt(_this.$db.get('timer'))
|
||
if (_this.timer != null && _this.timer > 0) {
|
||
_this.countDown()
|
||
_this.verification = false
|
||
}
|
||
},
|
||
methods: {
|
||
// 发送短信验证码
|
||
sendCode() {
|
||
if (!this.rightMobile.status) {
|
||
this.$common.errorToShow(this.rightMobile.msg)
|
||
} else {
|
||
this.$common.loadToShow('发送中...')
|
||
setTimeout(() => {
|
||
this.$common.loadToHide()
|
||
this.$api.sms({ mobile: this.mobile, code: 'login' }, res => {
|
||
if (res.status) {
|
||
this.timer = 60
|
||
this.verification = false
|
||
this.$common.successToShow(res.msg)
|
||
this.countDown() // 执行验证码计时
|
||
// this.btnb = 'btn btn-square btn-all btn-b';
|
||
} else {
|
||
this.$common.errorToShow(res.msg)
|
||
}
|
||
})
|
||
}, 1000)
|
||
}
|
||
},
|
||
// 去注册
|
||
toReg() {
|
||
this.$common.navigateTo('/pages/login/register/index')
|
||
},
|
||
// 验证码倒计时
|
||
countDown() {
|
||
let auth_timer = setInterval(() => {
|
||
// 定时器设置每秒递减
|
||
this.timer-- // 递减时间
|
||
uni.setStorage({
|
||
key: 'timer',
|
||
data: this.timer,
|
||
success: function() {}
|
||
})
|
||
if (this.timer <= 0) {
|
||
this.verification = true // 60s时间结束还原v-show状态并清除定时器
|
||
clearInterval(auth_timer)
|
||
}
|
||
}, 1000)
|
||
},
|
||
// 登录
|
||
login() {
|
||
var _this = this
|
||
if (!_this.rightMobile.status) {
|
||
_this.$common.errorToShow(_this.rightMobile.msg)
|
||
} else {
|
||
// 短信验证码登录
|
||
if (!_this.code) {
|
||
_this.$common.errorToShow('请输入短信验证码!')
|
||
} else {
|
||
let data = {
|
||
mobile: _this.mobile,
|
||
code: _this.code
|
||
}
|
||
|
||
let invicode = _this.$db.get('invitecode')
|
||
if (invicode) {
|
||
data.invitecode = invicode
|
||
}
|
||
|
||
_this.$api.smsLogin(data, res => {
|
||
if (res.status) {
|
||
this.$db.set('userToken', res.data)
|
||
_this.redirectHandler()
|
||
} else {
|
||
_this.$common.errorToShow(res.msg)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
// 重定向跳转 或者返回上一个页面
|
||
redirectHandler() {
|
||
this.$common.successToShow('登录成功!', () => {
|
||
this.$db.set('timer', 0)
|
||
this.$db.del('invitecode')
|
||
this.handleBack()
|
||
})
|
||
},
|
||
// 跳转到普通登录
|
||
toLogin() {
|
||
uni.navigateTo({
|
||
url: '../../login/login/index'
|
||
})
|
||
},
|
||
//提交按钮
|
||
showTopTips: function() {
|
||
let _this = this
|
||
if (_this.mobile == '') {
|
||
_this.$common.errorToShow('请输入手机号码')
|
||
return false
|
||
}
|
||
if (this.code == '') {
|
||
_this.$common.errorToShow('请输入验证码')
|
||
return false
|
||
}
|
||
if (_this.user_wx_id == 0) {
|
||
_this.$common.errorToShow('登录失败，请稍后再试', function() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
})
|
||
return false
|
||
}
|
||
var platform = 2
|
||
//1就是h5登陆（h5端和微信公众号端），2就是微信小程序登陆，3是支付宝小程序，4是app，5是pc
|
||
// #ifdef MP-ALIPAY
|
||
platform = 3
|
||
// #endif
|
||
// #ifdef APP-PLUS||APP-PLUS-NVUE
|
||
platform = 4
|
||
// #endif
|
||
var data = {
|
||
mobile: _this.mobile,
|
||
code: _this.code,
|
||
platform: platform, //平台id，标识是小程序登陆的
|
||
user_wx_id: _this.user_wx_id //微信小程序接口存不了session，所以要绑定的id只能传到前台
|
||
}
|
||
//有推荐码的话，带上
|
||
var invitecode = _this.$db.get('invitecode')
|
||
if (invitecode) {
|
||
data.invitecode = invitecode
|
||
}
|
||
_this.$api.smsLogin(data, function(res) {
|
||
if (res.status) {
|
||
_this.$db.set('userToken', res.data)
|
||
_this.redirectHandler()
|
||
} else {
|
||
//报错了
|
||
_this.$common.errorToShow(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 公众号第三方登录账号绑定
|
||
toBind() {
|
||
if (this.mobile == '') {
|
||
this.$common.errorToShow('请输入手机号码')
|
||
return false
|
||
}
|
||
if (this.code == '') {
|
||
this.$common.errorToShow('请输入验证码')
|
||
return false
|
||
}
|
||
|
||
let data = {
|
||
mobile: this.mobile,
|
||
code: this.code,
|
||
user_wx_id:this.user_wx_id
|
||
}
|
||
|
||
// 获取邀请码
|
||
let invicode = this.$db.get('invitecode')
|
||
if (invicode) {
|
||
data.invitecode = invicode
|
||
}
|
||
|
||
this.$api.smsLogin(data, res => {
|
||
if (res.status) {
|
||
this.$db.set('userToken', res.data)
|
||
this.redirectHandler()
|
||
} else {
|
||
this.$common.errorToShow(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 切换登录方式
|
||
selectLoginType() {
|
||
this.$common.redirectTo('./index1')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
/* #ifdef H5 */
|
||
height: calc(100vh - 90upx);
|
||
/* #endif */
|
||
/* #ifndef H5 */
|
||
height: 100vh;
|
||
/* #endif */
|
||
background-color: #fff;
|
||
|
||
padding: 0upx 100upx;
|
||
}
|
||
.login-t {
|
||
text-align: center;
|
||
padding: 50upx 0;
|
||
}
|
||
.login-logo {
|
||
width: 180upx;
|
||
height: 180upx;
|
||
border-radius: 20upx;
|
||
background-color: #f8f8f8;
|
||
/* margin: 0 auto; */
|
||
}
|
||
.login-m {
|
||
margin-bottom: 100upx;
|
||
}
|
||
.login-item {
|
||
border-bottom: 2upx solid #d0d0d0;
|
||
overflow: hidden;
|
||
padding: 10upx;
|
||
color: #333;
|
||
margin-bottom: 30upx;
|
||
}
|
||
.login-item-input {
|
||
display: inline-block;
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
}
|
||
.login-item .btn {
|
||
border: none;
|
||
width: 40%;
|
||
text-align: right;
|
||
padding: 0;
|
||
&.btn-b {
|
||
background: none;
|
||
color: #333 !important;
|
||
}
|
||
}
|
||
.login-b .btn {
|
||
color: #999;
|
||
}
|
||
.btn-b {
|
||
color: #fff !important;
|
||
}
|
||
.login-other {
|
||
margin-bottom: 40upx;
|
||
.item {
|
||
padding: 20upx 0;
|
||
}
|
||
}
|
||
.btn-square {
|
||
height: 80upx;
|
||
line-height: 80upx;
|
||
}
|
||
</style>
|