登录页
This commit is contained in:
parent
67f67d189a
commit
220bac6166
@ -1,8 +1,10 @@
|
|||||||
import configService from '@/common/config.service.js';
|
import configService from '@/common/config.service.js';
|
||||||
|
|
||||||
const install = (Vue, vm) => {
|
const install = (Vue, vm) => {
|
||||||
vm.$api.wxLogin = async (params = {}) => await vm.$u.get('/wxUser/wxPhoneLogin', params);// 手机号一键登录
|
// 用户管理
|
||||||
// vm.$api.wxLogin = async (params = {}) => await vm.$u.get('/wxUser/wxPhoneLogin', params);// 手机号一键登录
|
vm.$api.wxLogin = async (params = {}) => await vm.$u.get('/acUser/wxPhoneLogin', params);// 手机号一键登录
|
||||||
|
vm.$api.login = async (params = {}) => await vm.$u.get('/acUser/phoneLogin', params);// 手机号登录
|
||||||
|
vm.$api.register = async (params = {}) => await vm.$u.get('/acUser/phoneRegister', params);// 手机号注册
|
||||||
|
|
||||||
// 留言板
|
// 留言板
|
||||||
vm.$api.addMessage = async (params = {}) => await vm.$u.post('/cpMessage', params);// 添加留言
|
vm.$api.addMessage = async (params = {}) => await vm.$u.post('/cpMessage', params);// 添加留言
|
||||||
|
|||||||
@ -160,11 +160,12 @@ export default {
|
|||||||
swiperList:[
|
swiperList:[
|
||||||
{
|
{
|
||||||
picture: configService.fileUrl + 'pixel/home/banner.png',
|
picture: configService.fileUrl + 'pixel/home/banner.png',
|
||||||
path: 'https://docs.qq.com/doc/DSXpVWGlJb01BS0VO'
|
path: 'http://8.138.171.103/vueAdmin/#article/content?id=154'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
picture: configService.fileUrl + 'pixel/home/banner.png',
|
picture: configService.fileUrl + 'pixel/home/banner.png',
|
||||||
path: 'https://baidu.com/'
|
// path: 'https://baidu.com/'
|
||||||
|
path: 'http://8.138.171.103/vueAdmin/#article/content?id=158'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
// 推荐作品图标
|
// 推荐作品图标
|
||||||
|
|||||||
@ -20,11 +20,54 @@
|
|||||||
<image :src="myFileUrl+logo"></image>
|
<image :src="myFileUrl+logo"></image>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</view>
|
</view>
|
||||||
<view class="lg-content">
|
<view class="lg-head">
|
||||||
|
<image @click="handleClickDragon" :src="myFileUrl+lgHead[justChange? 2 : current]"></image>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<Loading :show="loading" />
|
<view class="lg-content">
|
||||||
|
<view class="lgc-top">
|
||||||
|
<u-tabs ref="tabs" :is-scroll="false" :list="list" activeColor="#dcf1fc"
|
||||||
|
@change="change" :current="current" bgColor="#ffffff00" inactiveColor="#9cabb2"
|
||||||
|
fontSize="35" ></u-tabs>
|
||||||
|
</view>
|
||||||
|
<u-divider></u-divider>
|
||||||
|
<view class="lgc-post">
|
||||||
|
<u-form :model="loginForm" ref="loginForm" :rules="current ? registerRules : loginRules"
|
||||||
|
:errorType="['message','toast']" :labelStyle="{color: '#f9f9f9'}" labelWidth="150">
|
||||||
|
<u-form-item class="pixel-form" label="手机号: " prop="username" >
|
||||||
|
<u-input class="pixel-input" :customStyle="{color:'#dcf1fc'}" v-model="loginForm.username"
|
||||||
|
placeholder="请输入手机号" trim type="number"/>
|
||||||
|
</u-form-item>
|
||||||
|
<u-form-item class="pixel-form" label="密码: " prop="password">
|
||||||
|
<u-input class="pixel-input" :customStyle="{color:'#dcf1fc'}" v-model="loginForm.password"
|
||||||
|
type="password" placeholder="请输入密码" trim :autocomplete="false"/>
|
||||||
|
</u-form-item>
|
||||||
|
<u-form-item v-if="current" class="pixel-form" label="确认密码: " prop="confirmPassword">
|
||||||
|
<u-input class="pixel-input" :customStyle="{color:'#dcf1fc'}" v-model="loginForm.confirmPassword"
|
||||||
|
type="password" placeholder="请输入确认密码" trim :autocomplete="false"/>
|
||||||
|
</u-form-item>
|
||||||
|
<u-button class="lgc-btn" @click="submit" ripple :hairLine="false"
|
||||||
|
shape="circle" rippleBgColor="#dcf1fc" :loading='dotLoading'>
|
||||||
|
{{ current ? '注册' : '登录' }}
|
||||||
|
</u-button>
|
||||||
|
<!-- <view class="lgc-bottom">
|
||||||
|
<view class="lgcb-left">
|
||||||
|
<u-checkbox style="margin-right: -10rpx;" active-color="#8cade8" v-model="isChecked"></u-checkbox>
|
||||||
|
记住密码
|
||||||
|
</view>
|
||||||
|
<view class="lgcb-right">
|
||||||
|
忘记密码
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
<view class="lgc-agreement">
|
||||||
|
<u-checkbox style="margin-right: -10rpx;" active-color="#8cade8" v-model="isAgreed"></u-checkbox>
|
||||||
|
我已阅读并同意<text>服务协议</text>、<text>隐私权政策</text>
|
||||||
|
</view>
|
||||||
|
</u-form>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-toast ref="uToast"></u-toast>
|
||||||
|
<DotLoading :show="dotLoading" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -43,6 +86,89 @@
|
|||||||
logo: 'logo.png',
|
logo: 'logo.png',
|
||||||
// 顶部距离等级
|
// 顶部距离等级
|
||||||
topLevel: 0,
|
topLevel: 0,
|
||||||
|
// tabs标签栏
|
||||||
|
list: [
|
||||||
|
{name: '用户登录'},
|
||||||
|
{name: '手机注册'}
|
||||||
|
],
|
||||||
|
// 当前tabs下标
|
||||||
|
current: 0,
|
||||||
|
// 输入框左上角动图
|
||||||
|
lgHead: ['fly.gif','sprint.gif','spitfire.gif'],
|
||||||
|
// 是否刚刚切换过tabs
|
||||||
|
justChange: false,
|
||||||
|
// 登录表单
|
||||||
|
loginForm: {
|
||||||
|
username: '',
|
||||||
|
password: ''
|
||||||
|
},
|
||||||
|
// 登录验证规则
|
||||||
|
loginRules: {
|
||||||
|
username: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入手机号',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
return this.$u.test.mobile(value);
|
||||||
|
},
|
||||||
|
message: '手机号格式不正确',
|
||||||
|
trigger: ['blur']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入密码',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
registerRules: {
|
||||||
|
username: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入手机号',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
return this.$u.test.mobile(value);
|
||||||
|
},
|
||||||
|
message: '手机号格式不正确',
|
||||||
|
trigger: ['blur']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入密码',
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
confirmPassword: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入确认密码',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validator: (rule, value, callback) => {
|
||||||
|
return this.loginForm.password !== '' && this.loginForm.password === value;
|
||||||
|
},
|
||||||
|
message: '两次密码输入不同',
|
||||||
|
trigger: ['blur']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// 加载
|
||||||
|
dotLoading: false,
|
||||||
|
// 是否记住密码
|
||||||
|
isChecked: false,
|
||||||
|
// 是否同意协议、政策
|
||||||
|
isAgreed: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// #ifndef H5
|
// #ifndef H5
|
||||||
@ -70,11 +196,73 @@
|
|||||||
window.onscroll = null;
|
window.onscroll = null;
|
||||||
},
|
},
|
||||||
// #endif
|
// #endif
|
||||||
|
onReady() {
|
||||||
|
this.$refs.loginForm.setRules(this.loginRules);
|
||||||
|
},
|
||||||
methods:{
|
methods:{
|
||||||
// 返回
|
// 返回
|
||||||
back(){
|
back(){
|
||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
},
|
},
|
||||||
|
// 切换方式
|
||||||
|
change(index) {
|
||||||
|
this.current = index;
|
||||||
|
this.$refs.loginForm.setRules(index? this.registerRules : this.loginRules);
|
||||||
|
// 如果已经触发喷火，不再设置
|
||||||
|
if(this.justChange) return;
|
||||||
|
this.justChange = true;
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.justChange = false;
|
||||||
|
},2010);
|
||||||
|
},
|
||||||
|
// 点击龙
|
||||||
|
handleClickDragon(){
|
||||||
|
// 如果已经触发喷火，不再设置
|
||||||
|
if(this.justChange) return;
|
||||||
|
this.justChange = true;
|
||||||
|
setTimeout(()=>{
|
||||||
|
this.justChange = false;
|
||||||
|
},2100);
|
||||||
|
},
|
||||||
|
// 提交
|
||||||
|
submit(){
|
||||||
|
if(!this.isAgreed){
|
||||||
|
this.$refs.uToast.show({type: 'warning',title: "请阅读并勾选同意协议!"});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try{
|
||||||
|
let that = this;
|
||||||
|
this.dotLoading = true;
|
||||||
|
this.$refs.loginForm.validate(async(valid) => {
|
||||||
|
if (valid) {
|
||||||
|
// 判断注册或登录的表单值，进行调整匹配
|
||||||
|
if(!that.current) delete that.loginForm.confirmPassword;
|
||||||
|
let res = await that.$api[that.current?'register':'login'](that.loginForm);
|
||||||
|
if(res.success){
|
||||||
|
that.$refs.loginForm.resetFields();
|
||||||
|
if(!that.current){
|
||||||
|
that.$u.vuex('vuex_token', res.data.token);
|
||||||
|
that.$u.vuex('user_message', JSON.stringify(res.data.user));
|
||||||
|
uni.navigateBack({complete() {
|
||||||
|
setTimeout(()=>{
|
||||||
|
uni.showToast({icon: 'none', title: '登录成功！'});
|
||||||
|
})
|
||||||
|
}});
|
||||||
|
}else{
|
||||||
|
that.$refs.uToast.show({type: 'success',title: "注册成功，请登录"});
|
||||||
|
that.current = 0;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
that.$refs.uToast.show({type: 'error',
|
||||||
|
title: that.current?`${res.data}!`:"手机号或密码错误!"});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}catch(e){}
|
||||||
|
finally{
|
||||||
|
this.dotLoading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
@ -117,7 +305,70 @@
|
|||||||
height: 45rpx;
|
height: 45rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.lg-head{
|
||||||
|
margin: 80rpx 40rpx 32rpx;
|
||||||
|
image{
|
||||||
|
margin-left: -100rpx;
|
||||||
|
width: 50%;
|
||||||
|
height: 320rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lg-content{
|
||||||
|
// flex: 1;
|
||||||
|
margin: -100rpx 40rpx 32rpx;
|
||||||
|
background: linear-gradient(rgba(254,253,255,0.4), rgba(46,172,238,0.2));
|
||||||
|
border-radius: 20rpx;
|
||||||
|
color: #f9f9f9;
|
||||||
|
padding: 40rpx 25rpx 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.lgc-top{
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 35rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pixel-form{
|
||||||
|
margin: 30rpx;
|
||||||
|
.pixel-input{
|
||||||
|
width: 320rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lgc-btn{
|
||||||
|
margin-top: 50rpx;
|
||||||
|
background-image: linear-gradient(to right, #6190E8 0%, #A7BFE8 51%, #6190E8 100%);
|
||||||
|
box-shadow: 0 0 20rpx #eee;
|
||||||
|
background-size: 200% auto;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.lgc-bottom{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
margin-bottom: 140rpx;
|
||||||
|
color: #ded3c9;
|
||||||
|
.lgcb-left{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
.lgcb-right{
|
||||||
|
line-height: 50rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lgc-agreement{
|
||||||
|
margin-top: 60rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
color: #ded3c9;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text{
|
||||||
|
color: #6894e8;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -144,6 +144,8 @@ export default {
|
|||||||
// path: '',
|
// path: '',
|
||||||
// }
|
// }
|
||||||
],
|
],
|
||||||
|
// 用户信息
|
||||||
|
// userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message),
|
||||||
// 是否登录
|
// 是否登录
|
||||||
isLogin: this.$store.state.vuex_token,
|
isLogin: this.$store.state.vuex_token,
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user