456 lines
10 KiB
Vue
456 lines
10 KiB
Vue
<template>
|
||
<view class="login-page">
|
||
<!-- 顶部导航栏 -->
|
||
<custom-navbar title="登录" :show-back="false" title-color="#000" background-color="transparent"></custom-navbar>
|
||
<view class="content">
|
||
<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" v-if="wayId==1">
|
||
<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" v-else-if="wayId==2">
|
||
<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="waybox">
|
||
<view class="way" @click="changeWay">{{wayId==1 ? '账号密码登录' : '验证码登录'}}</view>
|
||
</view>
|
||
<view class="login" @click="tapLogin">登录</view>
|
||
<view class="other">
|
||
<view @click="goRegister">
|
||
注册账号
|
||
</view>
|
||
<view class="xian">
|
||
|
|
||
</view>
|
||
<view @click="goPassword">
|
||
忘记密码
|
||
</view>
|
||
</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 {
|
||
wayId: 2, //登录方式id
|
||
phone: '', // 手机号
|
||
code: '', // 验证码
|
||
password: '', // 密码
|
||
codeTips: '获取验证码',
|
||
isAgree: false,
|
||
countdown: 0,
|
||
timer: null,
|
||
showPassword: false, // 是否展示密码
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
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;
|
||
},
|
||
// 获取验证码
|
||
async getCode() {
|
||
let that = this;
|
||
if (that.countdown > 0) return;
|
||
// 验证手机号
|
||
if (!/^1[3-9]\d{9}$/.test(that.phone)) {
|
||
uni.showToast({
|
||
title: '请输入正确的手机号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
const isaccount = await request.post('/user/isaccount', {
|
||
account: that.phone
|
||
});
|
||
if (isaccount.state == 2) {
|
||
uni.showToast({
|
||
title: '该账户未注册！',
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
// 开始倒计时
|
||
that.countdown = 60;
|
||
that.timer = setInterval(() => {
|
||
if (that.countdown > 0) {
|
||
that.countdown--
|
||
} else {
|
||
clearInterval(that.timer)
|
||
}
|
||
}, 1000)
|
||
// 请求获取验证码接口
|
||
request.post('/user/sendcode', {
|
||
account: that.phone,
|
||
type: 2
|
||
}).then(result => {
|
||
if (result.state == 1) {
|
||
uni.showToast({
|
||
title: result.msg,
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: result.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 更改登录方式
|
||
changeWay() {
|
||
let that = this;
|
||
if (that.wayId == 1) {
|
||
that.wayId = 2;
|
||
} else {
|
||
that.wayId = 1;
|
||
}
|
||
},
|
||
// 是否同意修改
|
||
changeAgree(value) {
|
||
this.isAgree = value;
|
||
},
|
||
// 登录
|
||
tapLogin() {
|
||
let that = this;
|
||
let wayId = that.wayId;
|
||
let reg = that.validatePassword(that.password);
|
||
if (!/^1[3456789]\d{9}$/.test(that.phone)) {
|
||
uni.showToast({
|
||
title: '请输入正确的手机号',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
// 验证码登录
|
||
if (wayId == 1) {
|
||
if (!that.code) {
|
||
uni.showToast({
|
||
title: '请输入验证码',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
} else if (!that.isAgree) {
|
||
uni.showToast({
|
||
title: '请先阅读并同意《用户注册协议》与《隐私政策》',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
} else {
|
||
request.post('/user/codelogin', {
|
||
account: that.phone,
|
||
code: that.code,
|
||
deviceid: getApp().globalData.deviceid
|
||
}).then(result => {
|
||
if (result.state == 1) {
|
||
uni.setStorageSync('accessToken', result.access_token);
|
||
uni.setStorageSync('refreshToken', result.refresh_token);
|
||
uni.setStorageSync('refresh_token_expries', result.refresh_token_expries);
|
||
uni.setStorageSync('loginAccount', that.phone); // 保存登录的手机号
|
||
that.goBackPage();
|
||
} else {
|
||
uni.showToast({
|
||
title: result.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
} else if (wayId == 2) {
|
||
if (!that.password) {
|
||
uni.showToast({
|
||
title: '请输入密码',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
} else if (!reg) {
|
||
uni.showToast({
|
||
title: '请输入正确的密码',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
} else if (!that.isAgree) {
|
||
uni.showToast({
|
||
title: '请先阅读并同意《用户注册协议》与《隐私政策》',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
} else {
|
||
request.post('/user/accountlogin', {
|
||
account: that.phone,
|
||
password: that.password,
|
||
deviceid: getApp().globalData.deviceid
|
||
}).then(result => {
|
||
if (result.state == 1) {
|
||
uni.setStorageSync('accessToken', result.access_token);
|
||
uni.setStorageSync('refreshToken', result.refresh_token);
|
||
uni.setStorageSync('refresh_token_expries', result.refresh_token_expries);
|
||
uni.setStorageSync('loginAccount', that.phone); // 保存登录的手机号
|
||
that.goBackPage();
|
||
} else {
|
||
uni.showToast({
|
||
title: result.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
goBackPage() {
|
||
// 修改上一页页面信息
|
||
const pages = getCurrentPages()
|
||
const prevPage = pages[pages.length - 2]
|
||
console.log('pages', pages)
|
||
console.log('prevPage', prevPage)
|
||
if (prevPage) {
|
||
if (prevPage.route === 'pages/my/my') {
|
||
prevPage.$vm.getUserInfo()
|
||
uni.navigateBack();
|
||
} else if (prevPage.route === 'pages/order/userorder-list') {
|
||
prevPage.$vm.loadOrders()
|
||
uni.navigateBack();
|
||
}
|
||
} else {
|
||
uni.switchTab({
|
||
url: '/pages/home/home'
|
||
})
|
||
}
|
||
},
|
||
// 去注册
|
||
goRegister() {
|
||
uni.navigateTo({
|
||
url: "/pages/register/register?handel=register"
|
||
})
|
||
},
|
||
// 忘记密码
|
||
goPassword() {
|
||
uni.navigateTo({
|
||
url: "/pages/register/register?handel=forget"
|
||
})
|
||
},
|
||
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;
|
||
}
|
||
|
||
.content {
|
||
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;
|
||
}
|
||
|
||
.code-btn.disabled {
|
||
color: #999999;
|
||
}
|
||
|
||
.waybox {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.way {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #332F30;
|
||
}
|
||
|
||
.login {
|
||
width: 630rpx;
|
||
height: 96rpx;
|
||
background-color: #E8101E;
|
||
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;
|
||
}
|
||
</style> |