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>
|