358 lines
7.7 KiB
Vue
358 lines
7.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="register_page">
|
|||
|
|
<nav-bar></nav-bar>
|
|||
|
|
<!-- 公共组件-每个页面必须引入 -->
|
|||
|
|
<public-module></public-module>
|
|||
|
|
<view class="title">
|
|||
|
|
<text :class="{active:type == 2000}" @click="type = 2000">密码登录</text>
|
|||
|
|
<text :class="{active:type == 1000}" @click="type = 1000">验证码登录</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="input_box"><input type="text" v-model="email" placeholder="请输入您的邮箱" /></view>
|
|||
|
|
<view class="input_box" v-if="type == 1000">
|
|||
|
|
<input type="number" v-model="code" placeholder="请输入邮箱验证码" maxlength="6" @confirm="onSubmit" />
|
|||
|
|
<button class="active" @click="onSetCode">{{ codeText }}</button>
|
|||
|
|
</view>
|
|||
|
|
<view class="input_box" v-if="type == 2000"><input type="text" v-model="password" password placeholder="请输入密码" @confirm="onSubmit" /></view>
|
|||
|
|
<view class="btn_box"><button @click="onSubmit">登录</button></view>
|
|||
|
|
<view class="nav_box" v-if="type == 1000">
|
|||
|
|
<view class="agreement" v-if="type == 1000">
|
|||
|
|
进入即代表你已同意
|
|||
|
|
<text @click="onPageJump('/pages/user/protocol')">《用户协议》</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="color" @click="onPageJump('/pages/user/register')">去注册</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="nav_box" v-if="type == 2000">
|
|||
|
|
<text class="color" @click="onPageJump('/pages/user/register')">去注册</text>
|
|||
|
|
<text @click="onPageJump('/pages/user/forget')">忘记密码？</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- #ifdef APP-PLUS -->
|
|||
|
|
<view class="station" v-if="!isIos"></view>
|
|||
|
|
<view class="third_party_login_box" v-if="!isIos">
|
|||
|
|
<view class="third_party_title"><text>第三方登录</text></view>
|
|||
|
|
<view class="third_party_content"><image src="../../static/icon/wechat.png" @click="onWxAppLogin" mode="aspectFit"></image></view>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import md5 from '@/plugins/md5';
|
|||
|
|
var clear;
|
|||
|
|
import { mapState, mapMutations } from 'vuex';
|
|||
|
|
import socket from '@/config/socket';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
type: 2000,
|
|||
|
|
code: '',
|
|||
|
|
email: '',
|
|||
|
|
password: '',
|
|||
|
|
//验证码
|
|||
|
|
codeText: '获取验证码',
|
|||
|
|
//验证码已发
|
|||
|
|
readonly: false,
|
|||
|
|
isIos:true
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
//第一次加载
|
|||
|
|
onLoad(e) {
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
this.isIos = (plus.os.name == "iOS");
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
//页面显示
|
|||
|
|
onShow() {},
|
|||
|
|
//方法
|
|||
|
|
methods: {
|
|||
|
|
...mapMutations(['setUserInfo']),
|
|||
|
|
onPageJump(url) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: url
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//验证码按钮文字状态
|
|||
|
|
getCodeState() {
|
|||
|
|
clear && clearInterval(clear);
|
|||
|
|
const _this = this;
|
|||
|
|
this.readonly = true;
|
|||
|
|
this.codeText = '60S后重新获取';
|
|||
|
|
var s = 60;
|
|||
|
|
clear = setInterval(() => {
|
|||
|
|
s--;
|
|||
|
|
_this.codeText = s + 'S后重新获取';
|
|||
|
|
if (s <= 0) {
|
|||
|
|
clearInterval(clear);
|
|||
|
|
_this.codeText = '获取验证码';
|
|||
|
|
_this.readonly = false;
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
},
|
|||
|
|
// 发送验证码
|
|||
|
|
onSetCode() {
|
|||
|
|
if (!this.email) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入邮箱',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!this.$base.mailRegular.test(this.email)) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '邮箱格式不正确',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.$http
|
|||
|
|
.post('api/common/v1/send_sms', {
|
|||
|
|
email: this.email,
|
|||
|
|
type: 2000
|
|||
|
|
})
|
|||
|
|
.then(res => {
|
|||
|
|
this.getCodeState();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onSubmit() {
|
|||
|
|
if (!this.email) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入邮箱',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!this.$base.mailRegular.test(this.email)) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '邮箱格式不正确',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let httpData = {
|
|||
|
|
email: this.email
|
|||
|
|
};
|
|||
|
|
if (this.type == 1000) {
|
|||
|
|
if (!this.code) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入验证码',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
httpData.code = this.code;
|
|||
|
|
} else {
|
|||
|
|
if (!this.password) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入密码',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
httpData.password = md5(this.password);
|
|||
|
|
}
|
|||
|
|
this.$http.post('api/common/v1/login', httpData).then(res => {
|
|||
|
|
this.setUserInfo(res);
|
|||
|
|
socket.init();
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '登录成功',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack();
|
|||
|
|
}, 2000);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 微信APP登录
|
|||
|
|
onWxAppLogin() {
|
|||
|
|
uni.login({
|
|||
|
|
provider: 'weixin',
|
|||
|
|
success: res => {
|
|||
|
|
if(res.authResult.openid && res.authResult.unionid){
|
|||
|
|
this.$http
|
|||
|
|
.post('api/open/v1/login', {
|
|||
|
|
wxAppOpenId: res.authResult.openid,
|
|||
|
|
unionid: res.authResult.unionid
|
|||
|
|
})
|
|||
|
|
.then(data => {
|
|||
|
|
this.setUserInfo({
|
|||
|
|
openId: res.authResult.openid,
|
|||
|
|
unionid: res.authResult.unionid,
|
|||
|
|
...data,
|
|||
|
|
});
|
|||
|
|
if (data.thirdLoginSuccess) {
|
|||
|
|
socket.init();
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '登录成功',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack();
|
|||
|
|
}, 2000);
|
|||
|
|
} else {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '您还未绑定邮箱，请先绑定~',
|
|||
|
|
confirmText: '去绑定',
|
|||
|
|
cancelText: '再逛会',
|
|||
|
|
success: res => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: '/pages/user/bindPhone'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '数据缺失，请重新点击',
|
|||
|
|
icon:"none"
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//页面隐藏
|
|||
|
|
onHide() {},
|
|||
|
|
//页面卸载
|
|||
|
|
onUnload() {},
|
|||
|
|
//页面下来刷新
|
|||
|
|
onPullDownRefresh() {},
|
|||
|
|
//页面上拉触底
|
|||
|
|
onReachBottom() {},
|
|||
|
|
//用户点击分享
|
|||
|
|
onShareAppMessage(e) {
|
|||
|
|
return this.wxShare();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
@import '@/style/mixin.scss';
|
|||
|
|
.register_page {
|
|||
|
|
padding: calc(var(--status-bar-height) + 70upx) 50upx 50upx 50upx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
.title {
|
|||
|
|
margin-bottom: 50upx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
text {
|
|||
|
|
font-size: 36upx;
|
|||
|
|
color: #999;
|
|||
|
|
&.active {
|
|||
|
|
font-size: 48upx;
|
|||
|
|
color: #333333;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
&:nth-child(2){
|
|||
|
|
margin-left: 70upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.input_box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border-bottom: 2upx solid #e5e5e5;
|
|||
|
|
padding: 30upx 0;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
input {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 32upx;
|
|||
|
|
color: #333;
|
|||
|
|
height: 60upx;
|
|||
|
|
}
|
|||
|
|
button {
|
|||
|
|
height: 60upx;
|
|||
|
|
background-color: #f7f7f7;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
border-radius: 8upx;
|
|||
|
|
padding: 0 14upx;
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 60upx;
|
|||
|
|
margin-left: 20upx;
|
|||
|
|
&.active {
|
|||
|
|
@include theme('btn_bg');
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.btn_box {
|
|||
|
|
margin-top: 60upx;
|
|||
|
|
button {
|
|||
|
|
@include theme('btn_bg');
|
|||
|
|
color: #fff;
|
|||
|
|
height: 92upx;
|
|||
|
|
line-height: 92upx;
|
|||
|
|
border-radius: 8upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.agreement {
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #999999;
|
|||
|
|
> text {
|
|||
|
|
color: $themeColor;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.password_register {
|
|||
|
|
margin-top: 110upx;
|
|||
|
|
text-align: center;
|
|||
|
|
text {
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #333333;
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.nav_box {
|
|||
|
|
margin-top: 30upx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
> text {
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #333333;
|
|||
|
|
&.color {
|
|||
|
|
color: $themeColor;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.station {
|
|||
|
|
height: 230upx;
|
|||
|
|
}
|
|||
|
|
.third_party_login_box {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
left: 0;
|
|||
|
|
height: 230upx;
|
|||
|
|
padding: 0 30upx;
|
|||
|
|
.third_party_title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
&:before,
|
|||
|
|
&:after {
|
|||
|
|
content: '';
|
|||
|
|
flex: 1;
|
|||
|
|
height: 2upx;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
text {
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #999999;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
padding: 0 20upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.third_party_content {
|
|||
|
|
height: 200upx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
image {
|
|||
|
|
width: 60upx;
|
|||
|
|
height: 52upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|