458 lines
10 KiB
Vue
Executable File
458 lines
10 KiB
Vue
Executable File
<template>
|
|
<view class="container">
|
|
|
|
<!-- 页面头部 -->
|
|
<view class="header">
|
|
<!-- <view class="title">
|
|
<text>账号登录</text>
|
|
</view> -->
|
|
<view class="logo">
|
|
<image src="https://wx.qlogo.cn/mmhead/Q3auHgzwzM6r6ngnJicOXYQpXicJiazznz68m2kXIbY1SibhPtzX4dc6BQ/0" mode="widthFix"></image>
|
|
</view>
|
|
<!-- <view class="sub-title">
|
|
<text>未注册的手机号登录后将自动注册</text>
|
|
</view> -->
|
|
</view>
|
|
<!-- 表单 -->
|
|
<!-- #ifdef H5 -->
|
|
<view class="login-form">
|
|
<!-- 手机号 -->
|
|
<view class="form-item">
|
|
<input class="form-item--input" type="text" v-model="mobile" maxlength="20"
|
|
placeholder="请输入登录账号|手机号码|邮箱" />
|
|
</view>
|
|
<view class="form-item">
|
|
<input class="form-item--input" type="password" v-model="password" maxlength="30"
|
|
placeholder="请输入登录密码" />
|
|
|
|
</view>
|
|
<!-- 图形验证码 -->
|
|
<view class="form-item" style="display: none;">
|
|
<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5"
|
|
placeholder="请输入图形验证码" />
|
|
<view class="form-item--parts">
|
|
<view class="captcha" @click="getCaptcha()">
|
|
<image class="image" :src="captcha.base64"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 短信验证码 -->
|
|
<view class="form-item" style="display: none;">
|
|
<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
|
|
<view class="form-item--parts">
|
|
<view class="captcha-sms" @click="handelSmsCaptcha()">
|
|
<text v-if="!smsState" class="activate">获取验证码</text>
|
|
<text v-else class="un-activate">重新发送({{ times }})秒</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 登录按钮 -->
|
|
<view class="login-button" @click="handleLogin">
|
|
<text>立即登录 找对象</text>
|
|
</view>
|
|
<view class="agree">
|
|
<view class="item">
|
|
<radio value="index" :checked="disabled" @click="onRadio" />已阅读并同意以下协议
|
|
<view class="xieyi" @click="$push('pages/article/detail/detail?id=114')">《服务协议》</view>
|
|
<view class="xieyi" @click="$push('pages/article/detail/detail?id=115')">《隐私政策》</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 企业微信授权登录 -->
|
|
<!-- <view class="login-button-ww" @click="onWWLogin">
|
|
<image src="@/static/login-wx-work.png"></image>
|
|
</view> -->
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<!-- 微信授权手机号一键登录 -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<MpWeixinMobile :isParty="isParty" :partyData="partyData" />
|
|
<!-- #endif -->
|
|
|
|
<!-- <div id="ww_login" style="width: 100%; height: 100%"></div> -->
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import store from '@/store'
|
|
import storage from '@/utils/storage'
|
|
import {
|
|
ACCESS_TOKEN,
|
|
USER_ID,
|
|
} from '@/store/mutation-types'
|
|
import {
|
|
appId,
|
|
tenantId
|
|
} from '@/config.js'
|
|
import {
|
|
getCaptcha,
|
|
login,
|
|
sendSmsCaptcha
|
|
} from '@/api/login.js'
|
|
import * as Verify from '@/utils/verify'
|
|
import http from '@/api'
|
|
import MpWeixinMobile from './mp-weixin-mobile'
|
|
|
|
// 倒计时时长(秒)
|
|
const times = 60
|
|
|
|
// 表单验证场景
|
|
const GET_CAPTCHA = 10
|
|
const SUBMIT_LOGIN = 20
|
|
|
|
export default {
|
|
components: {
|
|
MpWeixinMobile
|
|
},
|
|
|
|
props: {
|
|
// 是否存在第三方用户信息
|
|
isParty: {
|
|
type: Boolean,
|
|
default: () => false
|
|
},
|
|
// 第三方用户信息数据
|
|
partyData: {
|
|
type: Object
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
// 正在加载
|
|
isLoading: false,
|
|
// 图形验证码信息
|
|
captcha: {},
|
|
// 短信验证码发送状态
|
|
smsState: false,
|
|
// 倒计时
|
|
times,
|
|
// 手机号
|
|
mobile: '',
|
|
password: '',
|
|
// 图形验证码
|
|
captchaCode: '',
|
|
// 短信验证码
|
|
smsCode: '',
|
|
disabled: false
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
created() {
|
|
// 获取图形验证码
|
|
this.getCaptcha()
|
|
},
|
|
|
|
methods: {
|
|
openXieyi(url){
|
|
console.log("url: ",url);
|
|
this.$navTo(url)
|
|
},
|
|
// 获取图形验证码
|
|
getCaptcha() {
|
|
const app = this
|
|
getCaptcha()
|
|
.then(result => app.captcha = result.data)
|
|
},
|
|
|
|
// 点击发送短信验证码
|
|
handelSmsCaptcha() {
|
|
const app = this
|
|
if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
|
|
app.sendSmsCaptcha()
|
|
}
|
|
},
|
|
|
|
// 表单验证
|
|
formValidation(scene = GET_CAPTCHA) {
|
|
const app = this
|
|
// 验证获取短信验证码
|
|
if (scene === GET_CAPTCHA) {
|
|
if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
|
|
return false
|
|
}
|
|
}
|
|
// 验证提交登录
|
|
if (scene === SUBMIT_LOGIN) {
|
|
if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
},
|
|
|
|
// 验证手机号
|
|
validteMobile(str) {
|
|
if (Verify.isEmpty(str)) {
|
|
this.$toast('请先输入手机号')
|
|
return false
|
|
}
|
|
if (!Verify.isMobile(str)) {
|
|
// this.$toast('请输入正确格式的手机号')
|
|
// return false
|
|
}
|
|
return true
|
|
},
|
|
|
|
// 验证图形验证码
|
|
validteCaptchaCode(str) {
|
|
if (Verify.isEmpty(str)) {
|
|
this.$toast('请先输入图形验证码')
|
|
return false
|
|
}
|
|
return true
|
|
},
|
|
|
|
// 验证短信验证码
|
|
validteSmsCode(str) {
|
|
if (Verify.isEmpty(str)) {
|
|
// this.$toast('请先输入短信验证码')
|
|
// return false
|
|
}
|
|
return true
|
|
},
|
|
|
|
onRadio(){
|
|
this.disabled = !this.disabled
|
|
},
|
|
|
|
// 请求发送短信验证码接口
|
|
sendSmsCaptcha() {
|
|
const app = this
|
|
app.isLoading = true
|
|
sendSmsCaptcha({
|
|
phone: app.mobile
|
|
})
|
|
.then(result => {
|
|
// 显示发送成功
|
|
app.$toast(result.message)
|
|
// 执行定时器
|
|
app.timer()
|
|
})
|
|
.catch(() => app.getCaptcha())
|
|
.finally(() => app.isLoading = false)
|
|
|
|
},
|
|
|
|
// 执行定时器
|
|
timer() {
|
|
const app = this
|
|
app.smsState = true
|
|
const inter = setInterval(() => {
|
|
app.times = app.times - 1
|
|
if (app.times <= 0) {
|
|
app.smsState = false
|
|
app.times = times
|
|
clearInterval(inter)
|
|
}
|
|
}, 1000)
|
|
},
|
|
|
|
// 点击登录
|
|
handleLogin() {
|
|
const app = this
|
|
if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
|
|
app.submitLogin()
|
|
}
|
|
},
|
|
|
|
// 确认登录
|
|
submitLogin() {
|
|
const app = this
|
|
app.isLoading = true
|
|
console.log("登录: ", '登录');
|
|
store.dispatch('Login', {
|
|
username: app.mobile,
|
|
password: app.password
|
|
})
|
|
.then(result => {
|
|
// 一键登录成功
|
|
app.$toast(result.message)
|
|
// 跳转回原页面
|
|
setTimeout(() => {
|
|
uni.reLaunch({
|
|
url: '/pages/index/index',
|
|
complete(res) {
|
|
console.log(res)
|
|
}
|
|
})
|
|
}, 1000)
|
|
// // 显示登录成功
|
|
// app.$toast(result.message)
|
|
// // 跳转回原页面
|
|
// uni.redirectTo({
|
|
// url: 'pages/user/user'
|
|
// })
|
|
// setTimeout(() => {
|
|
// app.onNavigateBack(1)
|
|
// }, 2000)
|
|
})
|
|
.catch(err => {
|
|
// 跳转回原页面
|
|
if (err.result.data.isBack) {
|
|
setTimeout(() => app.onNavigateBack(1), 2000)
|
|
}
|
|
})
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
|
|
/**
|
|
* 登录成功-跳转回原页面
|
|
*/
|
|
onNavigateBack(delta = 1) {
|
|
const pages = getCurrentPages()
|
|
if (pages.length > 1) {
|
|
uni.navigateBack({
|
|
delta: Number(delta || 1)
|
|
})
|
|
} else {
|
|
this.$navTo('pages/index/index')
|
|
}
|
|
},
|
|
|
|
onWWLogin() {
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
min-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
// 页面头部
|
|
.header {
|
|
margin-bottom: 5rpx;
|
|
|
|
.title {
|
|
color: #191919;
|
|
font-size: 54rpx;
|
|
}
|
|
|
|
.sub-title {
|
|
margin-top: 20rpx;
|
|
color: #b3b3b3;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
// 输入框元素
|
|
.form-item {
|
|
display: flex;
|
|
padding: 18rpx;
|
|
border-bottom: 1rpx solid #f3f1f2;
|
|
margin-bottom: 30rpx;
|
|
height: 96rpx;
|
|
|
|
&--input {
|
|
font-size: 28rpx;
|
|
letter-spacing: 1rpx;
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
&--parts {
|
|
min-width: 100rpx;
|
|
height: 100%;
|
|
}
|
|
|
|
// 图形验证码
|
|
.captcha {
|
|
height: 100%;
|
|
|
|
.image {
|
|
display: block;
|
|
width: 192rpx;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// 短信验证码
|
|
.captcha-sms {
|
|
font-size: 28rpx;
|
|
line-height: 50rpx;
|
|
padding-right: 20rpx;
|
|
|
|
.activate {
|
|
color: $main-bg;
|
|
}
|
|
|
|
.un-activate {
|
|
color: #9e9e9e;
|
|
}
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
overflow: hidden;
|
|
border-radius: 20rpx;
|
|
margin: auto;
|
|
image {
|
|
width: 180rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
// 登录按钮
|
|
.login-button {
|
|
width: 100%;
|
|
height: 86rpx;
|
|
margin-top: 80rpx;
|
|
background: linear-gradient(#ff0077, #4d0d68);
|
|
// background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
|
|
color: $main-text;
|
|
border-radius: 80rpx;
|
|
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
|
|
letter-spacing: 5rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.login-button-ww {
|
|
margin-top: 80rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
image {
|
|
height: 96rpx;
|
|
}
|
|
}
|
|
.agree{
|
|
text-align: center;
|
|
width: 750rpx;
|
|
color: rgba(75,13,99,1);
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
.xieyi{
|
|
text-decoration:underline;
|
|
}
|
|
}
|
|
}
|
|
</style>
|