<template>
|
<view class="template-login">
|
<!-- 顶部自定义导航 -->
|
<!-- <tn-nav-bar fixed alpha customBack>
|
<view slot="back" class='tn-custom-nav-bar__back'
|
@click="goBack">
|
<text class='icon tn-icon-left'></text>
|
<text class='icon tn-icon-home-capsule-fill'></text>
|
</view>
|
</tn-nav-bar> -->
|
|
<view class="login">
|
<!-- 顶部背景图片-->
|
<view class="login__bg login__bg--top">
|
<image class="bg" src="/static/login_top2.jpg" mode="widthFix"></image>
|
</view>
|
<view class="login__bg login__bg--top">
|
<image class="rocket rocket-sussuspension" src="/static/login_top3.png" mode="widthFix"></image>
|
</view>
|
|
<view class="login__wrapper">
|
<!-- 登录/注册切换 -->
|
<!-- <view class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
|
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 0}]" @tap.stop="modeSwitch(0)">
|
登录
|
</view>
|
<view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': currentModeIndex === 1}]" @tap.stop="modeSwitch(1)">
|
注册
|
</view>
|
|
<view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
|
</view> -->
|
|
<!-- 输入框内容-->
|
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
<!-- 登录 -->
|
<block v-if="currentModeIndex === 0">
|
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
<view class="login__info__item__input__left-icon">
|
<view class="tn-icon-my"></view>
|
</view>
|
<view class="login__info__item__input__content">
|
<input maxlength="45" placeholder-class="input-placeholder" @input="userInput" placeholder="请输入登录用户名称" />
|
</view>
|
</view>
|
|
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
<view class="login__info__item__input__left-icon">
|
<view class="tn-icon-lock"></view>
|
</view>
|
<view class="login__info__item__input__content">
|
<input :password="!showPassword" placeholder-class="input-placeholder" @input="passInput" placeholder="请输入登录密码" />
|
</view>
|
<view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
|
<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
|
</view>
|
</view>
|
<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
<view class="login__info__item__input__left-icon">
|
<view class="tn-icon-my"></view>
|
</view>
|
<view class="login__info__item__input__content">
|
<input maxlength="45" placeholder-class="input-placeholder" @input="codeInput" placeholder="请输入验证码" />
|
</view>
|
<view class="login__info__item__input__right-icon u-border" style="width: 30%;" @click="getVierificationCode">
|
<img v-show="codeImgSrc != ''" :src="codeImgSrc" />
|
</view>
|
</view>
|
</block>
|
<!-- 注册 -->
|
<view class="login__info__item__button tn-cool-bg-color-7--reverse" @click="currentModeIndex === 0 ? login() : registra()" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
|
|
<!-- <view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view> -->
|
</view>
|
</view>
|
|
<tn-tips ref="tips" position="top"></tn-tips>
|
<!-- 底部背景图片-->
|
<view class="login__bg login__bg--bottom">
|
<image src="/static/login_bottom_bg.jpg" mode="widthFix"></image>
|
</view>
|
</view>
|
|
<!-- 验证码倒计时 -->
|
<!-- <tn-verification-code
|
ref="code"
|
uniqueKey="login-demo-1"
|
:seconds="60"
|
@change="codeChange">
|
</tn-verification-code> -->
|
</view>
|
</template>
|
|
<script>
|
var app = getApp();
|
export default {
|
name: 'login-demo-1',
|
// mixins: [template_page_mixin],
|
data() {
|
return {
|
// 当前选中的模式
|
currentModeIndex: 0,
|
// 模式选中滑块
|
modeSliderStyle: {
|
left: 0
|
},
|
// 是否显示密码
|
showPassword: false,
|
// 倒计时提示文字
|
tips: '获取验证码',
|
email: '',
|
codeImgSrc: '',
|
pass: '',
|
code: '',
|
user: '',
|
isDetail: false
|
}
|
},
|
watch: {
|
currentModeIndex(value) {
|
const sliderWidth = uni.upx2px(476 / 2)
|
this.modeSliderStyle.left = `${sliderWidth * value}px`
|
}
|
},
|
onLoad(options) {
|
this.getVierificationCode()
|
if (options.id) {
|
this.isDetail = true
|
}
|
},
|
methods: {
|
///获取验证码
|
getVierificationCode() {
|
this.$u.get('/api/User/getVierificationCode', {}).then(res=>{
|
if (res.img != null) {
|
this.codeImgSrc = "data:image/png;base64," + res.img;
|
this.email = res.uuid;
|
} else {
|
this.$refs.uToast.show({
|
title: '获取验证码失败请重新获取',
|
type: 'error',
|
})
|
}
|
})
|
// uni.request({
|
// url:"http://192.168.0.101:8098/api/User/getVierificationCode",
|
// success: (res) => {
|
|
// }
|
// })
|
},
|
login() {
|
if (this.pass == '') {
|
this.$t.message.toast('请输入密码')
|
return;
|
} else if (this.user == '') {
|
this.$t.message.toast('请输入用户名')
|
return;
|
} else if (this.pass.length < 6) {
|
this.$t.message.toast('密码应大于6位')
|
return;
|
} else {
|
this.$t.message.loading('正在登录')
|
let userInfo = this.userInfo;
|
let userifno = {
|
UUID: this.email,
|
passWord: this.pass,
|
userName: this.user,
|
verificationCode: this.code
|
}
|
this.$u.post('/api/User/login', {
|
UUID: this.email,
|
passWord: this.pass,
|
userName: this.user,
|
verificationCode: this.code
|
}).then(res => {
|
// this.$u.toast(res.message);
|
this.$t.message.toast(res.message)
|
this.$t.message.closeLoading()
|
uni.setStorage({
|
key: 'jo_id_token',
|
data: res.data.token,
|
});
|
uni.setStorage({
|
key: 'jo_user',
|
data: res.data,
|
});
|
uni.setStorage({
|
key: 'jo_userImg',
|
data: res.data.img,
|
});
|
setTimeout(()=>{
|
this.$u.route({
|
type:'reLaunch',
|
url:'pages/index/index'
|
})
|
// this.$Router.replace({name:"tabbar"})
|
},1300)
|
});
|
|
}
|
},
|
codeInput: function(e) {
|
this.code = e.detail.value;
|
},
|
passInput: function(e) {
|
this.pass = e.detail.value;
|
},
|
userInput: function(e) {
|
this.user = e.detail.value;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
// @import '@/static/css/templatePage/custom_nav_bar.scss';
|
/* 悬浮 */
|
.rocket-sussuspension{
|
animation: suspension 3s ease-in-out infinite;
|
}
|
|
@keyframes suspension {
|
0%, 100% {
|
transform: translate(0 , 0);
|
}
|
50% {
|
transform: translate(-0.8rem , 1rem);
|
}
|
}
|
|
.login {
|
position: relative;
|
height: 100%;
|
z-index: 1;
|
|
/* 背景图片 start */
|
&__bg {
|
z-index: -1;
|
position: fixed;
|
|
&--top {
|
top: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
|
.bg {
|
width: 750rpx;
|
will-change: transform;
|
}
|
.rocket {
|
margin: 50rpx 28%;
|
width: 400rpx;
|
will-change: transform;
|
}
|
}
|
|
&--bottom {
|
bottom: -10rpx;
|
left: 0;
|
right: 0;
|
width: 100%;
|
// height: 144px;
|
margin-bottom: env(safe-area-inset-bottom);
|
|
image {
|
width: 750rpx;
|
will-change: transform;
|
}
|
}
|
}
|
/* 背景图片 end */
|
|
/* 内容 start */
|
&__wrapper {
|
margin-top: 250rpx;
|
width: 100%;
|
}
|
|
/* 切换 start */
|
&__mode {
|
position: relative;
|
margin: 0 auto;
|
width: 476rpx;
|
height: 77rpx;
|
background-color: #FFFFFF;
|
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
border-radius: 39rpx;
|
|
&__item {
|
height: 77rpx;
|
width: 100%;
|
line-height: 77rpx;
|
text-align: center;
|
font-size: 31rpx;
|
color: #908f8f;
|
letter-spacing: 1em;
|
text-indent: 1em;
|
z-index: 2;
|
transition: all 0.4s;
|
|
&--active {
|
font-weight: bold;
|
color: #FFFFFF;
|
}
|
}
|
|
&__slider {
|
position: absolute;
|
height: inherit;
|
width: calc(476rpx);
|
border-radius: inherit;
|
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
|
z-index: 1;
|
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
}
|
}
|
/* 切换 end */
|
|
/* 登录注册信息 start */
|
&__info {
|
margin: 0 30rpx;
|
margin-top: 105rpx;
|
padding: 30rpx 51rpx;
|
padding-bottom: 0;
|
border-radius: 20rpx;
|
background-color: #ffff;
|
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
|
&__item {
|
|
&__input {
|
margin-top: 59rpx;
|
width: 100%;
|
height: 77rpx;
|
border: 1rpx solid #E6E6E6;
|
border-radius: 39rpx;
|
|
&__left-icon {
|
width: 10%;
|
font-size: 44rpx;
|
margin-left: 20rpx;
|
color: #AAAAAA;
|
}
|
|
&__content {
|
width: 80%;
|
padding-left: 10rpx;
|
|
&--verify-code {
|
width: 56%;
|
}
|
|
input {
|
font-size: 24rpx;
|
// letter-spacing: 0.1em;
|
}
|
}
|
|
&__right-icon {
|
width: 10%;
|
font-size: 44rpx;
|
margin-right: 20rpx;
|
color: #AAAAAA;
|
}
|
|
&__right-verify-code {
|
width: 34%;
|
margin-right: 20rpx;
|
}
|
}
|
|
&__button {
|
margin-top: 75rpx;
|
margin-bottom: 39rpx;
|
width: 100%;
|
height: 77rpx;
|
text-align: center;
|
font-size: 31rpx;
|
font-weight: bold;
|
line-height: 77rpx;
|
letter-spacing: 1em;
|
text-indent: 1em;
|
border-radius: 39rpx;
|
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
|
}
|
|
&__tips {
|
margin: 30rpx 0;
|
color: #AAAAAA;
|
}
|
}
|
}
|
/* 登录注册信息 end */
|
|
/* 登录方式切换 start */
|
&__way {
|
margin: 0 auto;
|
margin-top: 110rpx;
|
|
&__item {
|
&--icon {
|
width: 77rpx;
|
height: 77rpx;
|
font-size: 50rpx;
|
border-radius: 100rpx;
|
margin-bottom: 18rpx;
|
position: relative;
|
z-index: 1;
|
|
&::after {
|
content: " ";
|
position: absolute;
|
z-index: -1;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
bottom: 0;
|
border-radius: inherit;
|
opacity: 1;
|
transform: scale(1, 1);
|
background-size: 100% 100%;
|
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
|
}
|
}
|
}
|
}
|
/* 登录方式切换 end */
|
/* 内容 end */
|
|
}
|
|
/deep/.input-placeholder {
|
font-size: 24rpx;
|
color: #E6E6E6;
|
}
|
|
</style>
|
