417 lines
9.8 KiB
Vue
417 lines
9.8 KiB
Vue
<template>
|
||
<view class="login-page">
|
||
<!-- 顶部导航栏 -->
|
||
<custom-navbar
|
||
:title="title"
|
||
:show-back="true"
|
||
title-color="#000"
|
||
background-color="transparent"
|
||
></custom-navbar>
|
||
<view class="login-cont">
|
||
<view class="logo">
|
||
<image src="/static/logo.png" mode="aspectFill" class="logo-icon"></image>
|
||
美融融
|
||
</view>
|
||
<view class="welcome">欢迎登录进行使用！</view>
|
||
<view class="inp-phpne">
|
||
<input type="number" class="inp" placeholder="请输入账号" maxlength="11" :value="phone" @input="inputPhone" />
|
||
</view>
|
||
<view class="inp-code">
|
||
<input type="number" class="inp" placeholder="请输入验证码" maxlength="4" :value="code" @input="inputCode" />
|
||
<view class="code-btn" :class="{ disabled: countdown > 0 }" @click.stop="getCode">
|
||
{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
|
||
</view>
|
||
</view>
|
||
<view class="inp-psd">
|
||
<input type="text" class="inp" placeholder="请输入密码(6~12位字母+数字)" maxlength="12" :value="password" @input="inputPassword" :password="!showPassword" />
|
||
<image src="/static/images/dislook_psd.png"
|
||
mode="aspectFill"
|
||
class="look-icon"
|
||
v-if="!showPassword"
|
||
@click.stop="showPassword = true"></image>
|
||
<image src="/static/images/look_psd.png"
|
||
mode="aspectFill"
|
||
class="look-icon"
|
||
@click.stop="showPassword = false"
|
||
v-else></image>
|
||
</view>
|
||
<view class="inp-psd">
|
||
<input type="text" class="inp" placeholder="再次输入密码(6~12位字母+数字)" maxlength="12" :value="twopassword" @input="inputTwopassword" :password="!showAgainPassword" />
|
||
<image src="/static/images/dislook_psd.png"
|
||
mode="aspectFill"
|
||
class="look-icon"
|
||
v-if="!showAgainPassword"
|
||
@click.stop="showAgainPassword = true"></image>
|
||
<image src="/static/images/look_psd.png"
|
||
mode="aspectFill"
|
||
class="look-icon"
|
||
@click.stop="showAgainPassword = false"
|
||
v-else></image>
|
||
</view>
|
||
<view class="login" @click="tapLogin">{{handel == 'register' ? '注册' : handel == 'forget' ? '修改密码' : ''}}</view>
|
||
<view class="other">{{handel == 'register' ? '已有账号，前去' : ''}}<text class="texta" @click="goLogin">{{handel == 'register' ? '登录' : handel == 'forget' ? '返回登录' : ''}}</text></view>
|
||
|
||
<view class="agree">
|
||
<agree-radio :isAgree="isAgree"
|
||
@change-agree="changeAgree"
|
||
class="agree-btn"></agree-radio>
|
||
<text class="agree-text">已阅读并同意</text>
|
||
<text class="agreement" @click="goAgreement(3)">《用户注册协议》</text>
|
||
<text class="agree-text">和</text>
|
||
<text class="agreement" @click="goAgreement(4)">《隐私政策》</text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request';
|
||
import AgreeRadio from '@/components/agree-radio/agree-radio.vue'
|
||
export default {
|
||
components: {
|
||
AgreeRadio
|
||
},
|
||
data() {
|
||
return {
|
||
phone: '', // 手机号
|
||
code: '', // 验证码
|
||
password: '', // 密码
|
||
twopassword: '',
|
||
codeTips: '获取验证码',
|
||
handel: null,
|
||
inviteCodeOther: null,
|
||
isAgree: false,
|
||
countdown: 0,
|
||
timer: null,
|
||
showPassword: false,
|
||
showAgainPassword: false
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
let that = this;
|
||
that.handel = !options.handel ? 'register' : options.handel;
|
||
that.title = options.handel == 'register' ? '注册账号' : '忘记密码';
|
||
that.inviteCodeOther = options.inviteCodeOther;
|
||
},
|
||
methods: {
|
||
// 密码格式校验
|
||
validatePassword(password) {
|
||
const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/;
|
||
return reg.test(password);
|
||
},
|
||
inputPhone(e) {
|
||
let that = this;
|
||
that.phone = e.detail.value;
|
||
},
|
||
inputCode(e) {
|
||
let that = this;
|
||
that.code = e.detail.value;
|
||
},
|
||
inputPassword(e) {
|
||
let that = this;
|
||
that.password = e.detail.value;
|
||
},
|
||
inputTwopassword(e) {
|
||
let that = this;
|
||
that.twopassword = e.detail.value;
|
||
},
|
||
// 获取验证码
|
||
async getCode() {
|
||
if (this.countdown > 0) return
|
||
let that = this;
|
||
let type = that.handel == 'register' ? 1 : 3
|
||
// App阻止冒泡
|
||
// #ifdef APP-NVUE
|
||
e.stopPropagation()
|
||
// #endif
|
||
if (!/^1[3456789]\d{9}$/.test(that.phone)) {
|
||
uni.showToast({
|
||
title: '请输入正确的手机号',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
if(this.handel == 'forget') {
|
||
const isaccount = await request.post('/user/isaccount',{account: that.phone});
|
||
if(isaccount.state == 2) {
|
||
uni.showToast({
|
||
title: '该账户未注册！',
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 开始倒计时
|
||
this.countdown = 60
|
||
this.timer = setInterval(() => {
|
||
if (this.countdown > 0) {
|
||
this.countdown--
|
||
} else {
|
||
clearInterval(this.timer)
|
||
}
|
||
}, 1000)
|
||
|
||
// 请求获取验证码接口
|
||
request.post('/user/sendcode',{account: that.phone,type}).then(result=>{
|
||
if(result.state == 1) {
|
||
uni.showToast({
|
||
title: result.msg,
|
||
icon: 'none'
|
||
})
|
||
}else {
|
||
uni.showToast({
|
||
title: result.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 是否同意修改
|
||
changeAgree(value) {
|
||
this.isAgree = value;
|
||
},
|
||
// 注册或者修改
|
||
tapLogin() {
|
||
let that = this;
|
||
let wayId = that.wayId;
|
||
let regOne = that.validatePassword(that.password);
|
||
let regTwo = that.validatePassword(that.twopassword);
|
||
if (!/^1[3456789]\d{9}$/.test(that.phone)) {
|
||
uni.showToast({
|
||
title: '请输入正确的手机号',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}else if(!that.code) {
|
||
uni.showToast({
|
||
title: '请输入验证码',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}else if(!that.password && !that.twopassword) {
|
||
uni.showToast({
|
||
title: '请输入密码',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}else if(!regOne && !regTwo) {
|
||
uni.showToast({
|
||
title: '请输入正确的密码',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}else if(that.password != that.twopassword) {
|
||
uni.showToast({
|
||
title: '两次密码输入不一致',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}else if(!that.isAgree){
|
||
uni.showToast({
|
||
title: '请先阅读并同意《用户注册协议》与《隐私政策》',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
if(that.handel == 'register') {
|
||
let data = {
|
||
account: that.phone,
|
||
code: that.code,
|
||
password: that.password,
|
||
invite_code_other: that.inviteCodeOther
|
||
}
|
||
// 请求登录注册接口
|
||
request.post('/user/useryhadd',data).then(result=>{
|
||
if(result.state == 1) {
|
||
uni.navigateBack({
|
||
url: '/pages/login/login'
|
||
})
|
||
}else {
|
||
uni.showToast({
|
||
title: result.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}else if(that.handel == 'forget') {
|
||
// 请求修改密码接口
|
||
let data = {
|
||
account: that.phone,
|
||
code: that.code,
|
||
password: that.password
|
||
}
|
||
// 请求修改密码接口
|
||
request.post('/user/passwordchangebycode',data).then(result=>{
|
||
if(result.state == 1) {
|
||
uni.showToast({
|
||
title: result.msg,
|
||
icon: 'none'
|
||
})
|
||
uni.navigateBack({
|
||
url: '/pages/login/login'
|
||
})
|
||
}else {
|
||
uni.showToast({
|
||
title: result.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
// 前去登录页面
|
||
goLogin() {
|
||
uni.navigateBack({
|
||
url: '/pages/login/login'
|
||
})
|
||
},
|
||
goAgreement(type) {
|
||
uni.navigateTo({
|
||
url: "/pages/agreement/agreement?type="+type
|
||
})
|
||
}
|
||
},
|
||
// 页面销毁时清除定时器
|
||
onUnload() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
.login-page {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
.login-page::before {
|
||
content: '';
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 1200rpx !important;
|
||
background-image: url('/static/images/bg.png');
|
||
background-size: cover;
|
||
background-position: center top;
|
||
background-repeat: no-repeat;
|
||
z-index: 1;
|
||
}
|
||
.login-cont {
|
||
width: 750rpx;
|
||
position: absolute;
|
||
z-index: 2;
|
||
padding: 140rpx 72rpx 16rpx 48rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.logo {
|
||
width: 750rpx;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-self: flex-start;
|
||
align-items: center;
|
||
font-size: 64rpx;
|
||
color: #1F2329;
|
||
}
|
||
.logo-icon {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
.welcome {
|
||
font-size: 40rpx;
|
||
color: #646A73;
|
||
margin-top: 12rpx;
|
||
}
|
||
.inp-phpne {
|
||
margin-top: 108rpx;
|
||
}
|
||
.inp-psd,.inp-code {
|
||
position: relative;
|
||
}
|
||
.inp {
|
||
width: 630rpx;
|
||
height: 96rpx;
|
||
border: 2rpx solid #D0D3D5;
|
||
padding: 0 48rpx;
|
||
box-sizing: border-box;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
.look-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 32rpx;
|
||
transform: translateY(-50%);
|
||
}
|
||
.code-btn {
|
||
width: 208rpx;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #332F30;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
transform: translateY(-50%);
|
||
border-left: 2rpx solid #D0D3D5;
|
||
}
|
||
.login {
|
||
width: 630rpx;
|
||
height: 96rpx;
|
||
background-color: #FD4778;
|
||
color: #fff;
|
||
font-size: 40rpx;
|
||
line-height: 96rpx;
|
||
text-align: center;
|
||
border-radius: 40rpx;
|
||
margin-top: 34rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
.other {
|
||
font-size: 32rpx;
|
||
color: #8F959E;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.xian {
|
||
margin: 0 32rpx;
|
||
}
|
||
.agree {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 48rpx;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.agreement {
|
||
display: inline-block;
|
||
color: #1456F0;
|
||
padding: 0 4rpx;
|
||
}
|
||
.agree-text {
|
||
font-size: 24rpx;
|
||
color: #8F959E;
|
||
}
|
||
.agree-btn {
|
||
margin-right: 12rpx;
|
||
}
|
||
.texta {
|
||
color: #1456F0;
|
||
padding: 0 4rpx;
|
||
}
|
||
</style>
|