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