<template>
<view class="login-phone">
<view class="login-phone-content">
<view class="tabs">
<block v-for="(tab, index) in tabBars" :key="tab.id">
<view :
@click="ontabtap(index)">
<text class="name">{{ tab.name }}</text>
<view class="line" :class="tabIndex === index ? 'active-line' : ''"></view>
</view>
</block>
</view>
<uni-forms ref="loginForm" :rules="loginRules" :modelValue="loginFormData">
<view class="phone">
<uni-forms-item style="height: 66rpx;" name="phone">
<input maxlength="11" type="number" @input="phoneChange" placeholder-style="color:#aaa"
class="phone-input" placeholder="请输入手机账号" v-model="loginFormData.phone" />
</uni-forms-item>
<view v-if="tabIndex === 0" class="vertifyBtn" @click="sendCode()" :disabled="!sending"
:class="{'wait':!sending}">{{ content }}</view>
</view>
<uni-forms-item v-show="tabIndex === 0" name="code">
<input @input="codeChange" maxlength="4" type="number" class="vertify-number"
placeholder-style="color:#aaa" placeholder="请输入验证码" v-model="loginFormData.code" />
</uni-forms-item>
<uni-forms-item v-show="tabIndex === 1" name="password">
<input @input="pwdChange" maxlength="12" class="vertify-number" placeholder-style="color:#aaa"
type="password" placeholder="请输入密码" v-model="loginFormData.password" />
</uni-forms-item>
</uni-forms>
<button class="loginBtn" @click="submit('loginForm')">登录</button>
<button v-if="tabIndex === 0" class="wechatBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
<image src="../../static/images/common/wechat.png" mode=""></image>
<text>微信快速登录</text>
</button>
</view>
<view class="serve">
<text>
服务热线
</text>
<text @click="makePhone('0755-86954658')" class="serve-number">
0755-86954658
</text>
</view>
</view>
</template>
<script>
import {
followAccountApi,
login,
sendAuthCode,
quickLogin,
passwordLogin,
} from '@/api/login.js'
export default {
data() {
return {
timer: null,
tabIndex: 0,
tabBars: [{
name: '验证码登录',
id: 'code'
},
{
name: '账号登录',
id: 'account '
}
],
sending: true,
second: 60,
content: '获取验证码',
loginFormData: {
phone: '',
code: '',
password: ""
},
loginRules: {
validateTrigger: 'bind',
phone: {
rules: [{
required: true,
errorMessage: '账号不能为空'
},
{
minLength: 11,
maxLength: 11,
errorMessage: '账号长度为11位'
},
{
validateFunction: function(rule, value, data, callback) {
const telReg = /^1[3456789]\d{9}$/
if (telReg.test(value)) {
return true
} else {
callback('账号格式有误')
}
}
}
],
validateTrigger: 'bind'
},
code: {
rules: [{
required: true,
errorMessage: '验证码不能为空'
}, {
minLength: 4,
maxLength: 4,
errorMessage: '验证码长度为4位'
}]
},
password: {
rules: [{
required: false,
errorMessage: '密码不能为空'
}, {
minLength: 6,
maxLength: 12,
errorMessage: '密码长度为6-12位'
}]
},
},
}
},
methods: {
ontabtap(index) {
if (this.tabIndex === index) {
return
}
this.tabIndex = index
this.$set(this.loginFormData, 'phone', "")
if (this.tabIndex === 0) {
this.loginFormData.password = ''
this.loginRules.password.rules[0].required = false
this.loginRules.code.rules[0].required = true
} else {
this.loginRules.password.rules[0].required = true
this.loginRules.code.rules[0].required = false
this.loginFormData.code = ''
this.second = 60
this.content = '获取验证码'
this.sending = true
clearInterval(this.timer)
}
this.$refs.loginForm.resetForm()
},
makePhone(inputPhone) {
uni.makePhoneCall({
phoneNumber: inputPhone,
success() {},
fail() {
uni.showToast({
title: '电话调用失败',
icon: "none",
duration: 2000
})
}
})
},
phoneChange(e) {
this.$nextTick(() => {
this.$refs.loginForm.validateField(['phone']).then((res) => {
}).catch((err) => {
})
})
},
codeChange(e) {
this.$nextTick(() => {
this.$refs.loginForm.validateField(['code']).then((res) => {
}).catch((err) => {
})
})
},
pwdChange(e) {
this.$nextTick(() => {
this.$refs.loginForm.validateField(['password']).then((res) => {
}).catch((err) => {
})
})
},
loginSuccessHandler(data) {
const roleType = (data.roleType).toString()
this.$store.commit('user/setToken', 'Bearer ' + data.token)
this.$store.commit('user/setRoleType', roleType)
followAccountApi().then(accountResult => {
const { isSubscribe } = accountResult.data.data;
if (isSubscribe === "true") {
uni.switchTab({
url: "../tabBar/index"
})
} else {
uni.navigateTo({
url: './official-account'
})
}
});
},
submit(ref) {
this.$refs[ref].validate().then(() => {
if (this.tabIndex === 0) {
login({
openid: this.$store.state.user.openId,
username: this.loginFormData.phone,
vcode: this.loginFormData.code
})
.then((result) => {
const data = result.data.data;
this.loginSuccessHandler(data);
});
return;
}
passwordLogin({
username: this.loginFormData.phone,
password: this.loginFormData.password
})
.then((result) => {
const data = result.data.data;
this.loginSuccessHandler(data);
});
})
},
sendCode() {
const reg_tel = /^1[3456789]\d{9}$/
if (reg_tel.test(this.loginFormData.phone)) {
this.content = this.second + '秒后重发'
this.sending = false
let timer = setInterval(() => {
this.second--
this.content = this.second + '秒后重发'
if (this.second < 0) {
clearInterval(timer)
this.second = 60
this.content = '获取验证码'
this.sending = true
}
}, 1000)
sendAuthCode({ phone: this.loginFormData.phone })
} else {
uni.showToast({
title: '请正确填写您的手机号',
duration: 3000,
icon: 'none'
})
}
},
getPhoneNumber: function(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
// 用户点击接受后 你会拿到和之前获取基本信息一样的iv 和en 几个参数 传递给后端，
// 后端调取微信官方的接口并且进行解密 再回传手机号到前台
quickLogin({
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
openid: this.$store.state.user.openId
})
.then((res) => {
const data = res.data.data;
const _token = 'Bearer ' + data.token;
const roleType = (data.roleType).toString();
this.$store.commit('user/setToken', _token)
this.$store.commit('user/setRoleType', roleType)
// 判断有无关注公众号
followAccountApi().then(accountResponse => {
const { isSubscribe } = accountResponse.data.data;
if(isSubscribe === "true") {
uni.switchTab({
url: "../tabBar/index"
})
} else {
uni.navigateTo({
url: './official-account'
})
}
})
})
}
},
// 临时用
temLogin() {
uni.navigateTo({
url: './official-account'
})
}
// 临时用
}
}
</script>
<style scoped lang="scss">
button::after {
border: none
}
.login-phone {
padding: 0 42rpx;
}
.login-phone-content {
margin-top: 96rpx;
}
.tabs {
position: relative;
display: flex;
justify-content: flex-start;
overflow: hidden;
.tab {
display: flex;
flex-direction: column;
align-items: center;
width: 230rpx;
text-align: center;
height: 94rpx;
font-weight: bold;
font-size: 46rpx;
&.active {
color: #666;
font-weight: 500;
}
.name {
padding-top: 15rpx;
padding-bottom: 10rpx;
}
.line {
display: inline-block;
width: 118rpx;
height: 6rpx;
border-radius: 6rpx;
background-color: transparent;
&.active-line {
background-color: #5984fe;
}
}
}
.tab+.tab {
margin-left: 80rpx;
}
}
.phone {
margin-top: 101rpx;
display: flex;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
padding: 36rpx 0rpx 0rpx;
.phone-input {
flex: 1;
font-size: 17px;
line-height: 24px;
}
.vertifyBtn {
text-align: right;
width: 380rpx;
font-size: 34rpx;
line-height: 48rpx;
color: #5984FE;
}
}
.vertify-number {
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
font-size: 17px;
line-height: 24px;
padding-top: 18px;
padding-bottom: 20rpx;
margin-top: 30rpx;
}
.loginBtn {
margin-top: 88rpx;
width: 666rpx;
box-sizing: border-box;
border-radius: 8rpx;
color: #fff;
height: 94rpx;
line-height: 94rpx;
font-size: 34rpx;
text-align: center;
background: #5982F9;
}
.wechatBtn {
margin-top: 32rpx;
width: 666rpx;
height: 94rpx;
background: #55BC68;
color: white;
font-size: 34rpx;
text-align: center;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
image {
width: 72rpx;
height: 72rpx;
}
}
.serve {
width: 666rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-size: 28rpx;
line-height: 20px;
color: #333333;
position: absolute;
bottom: 150rpx;
.serve-number {
margin-left: 24rpx;
color: #5982F9;
border-bottom: 1rpx solid #5982F9;
}
}
.wait {
color: #AAAAAA !important;
}
</style>
客服电话
APP下载
官方微信
请发表评论