2025-01-06 00:54:54 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<u-popup :value="showLogin" mode="center" border-radius="14" @close="$emit('close')">
|
|
|
|
|
|
<view class="login-dialog">
|
|
|
|
|
|
<view class="login-dialog-left" :style="{backgroundImage: `url(${fileUrl+loginBackground})`}">
|
2025-01-22 20:25:38 +08:00
|
|
|
|
<image :src="homeFileUrl+logo" class="ldl-logo"></image>
|
2025-01-06 00:54:54 +08:00
|
|
|
|
<view class="ldl-system-name">智能图像创作平台</view>
|
|
|
|
|
|
<view class="ldl-team">研发团队</view>
|
|
|
|
|
|
<view class="ldl-message">与其说做功能强大的PIXEL.AI，其实我们更注重用户的使用体验。灵活、富有趣味性的产品是我们在PIXEL.AI的追求，认真做产品，有耐心，不含糊，我们相信PIXEL.AI一定会做的很好。</view>
|
|
|
|
|
|
<view class="ldl-bottom">
|
|
|
|
|
|
<text>PIXEL.AI 移动端</text>正式上线啦！
|
|
|
|
|
|
<u-icon name="arrow-right" size="24" @click="openCode"></u-icon>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="login-dialog-right">
|
|
|
|
|
|
<u-icon class="ldr-close" name="close" size="32" @click="$emit('close')"></u-icon>
|
|
|
|
|
|
<view class="ldr-top">
|
|
|
|
|
|
<el-tabs class="ldr-tabs" v-model="current" @tab-click="change">
|
|
|
|
|
|
<el-tab-pane v-for="(item,index) in list" :key="index" :label="item.name"
|
|
|
|
|
|
:name="item.name"></el-tab-pane>
|
|
|
|
|
|
</el-tabs>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="ldr-post">
|
|
|
|
|
|
<el-form ref="loginForm" size="medium" :model="loginForm" :rules="getCurrent ? registerRules : loginRules">
|
|
|
|
|
|
<el-form-item prop="username" label="手机号: ">
|
|
|
|
|
|
<el-input v-model.trim="loginForm.username" type="tel"
|
|
|
|
|
|
placeholder="请输入手机号" auto-complete="off" ></el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item prop="password" label="密码: ">
|
|
|
|
|
|
<el-input v-model.trim="loginForm.password" type="password"
|
|
|
|
|
|
placeholder="请输入密码" auto-complete="off" ></el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item v-if="getCurrent" prop="confirmPassword" label="确认密码: ">
|
|
|
|
|
|
<el-input v-model.trim="loginForm.confirmPassword" type="password"
|
|
|
|
|
|
placeholder="请输入确认密码" auto-complete="off" ></el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<u-button class="ldr-btn" @click="submit" ripple :hairLine="false"
|
|
|
|
|
|
shape="circle" rippleBgColor="#dcf1fc" :loading='dotLoading'>
|
|
|
|
|
|
{{ getCurrent ? '注册' : '登录' }}
|
|
|
|
|
|
</u-button>
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
<view class="ldr-agreement">
|
|
|
|
|
|
<u-checkbox class="ldr-checkbox" active-color="#8fca80" v-model="isAgreed"></u-checkbox>
|
|
|
|
|
|
我已阅读并同意<text>用户服务协议</text>、<text>隐私权政策</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</u-popup>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import configService from '@/common/config.service.js';
|
|
|
|
|
|
export default {
|
|
|
|
|
|
props: {
|
|
|
|
|
|
showLogin: {
|
|
|
|
|
|
type: Boolean,
|
|
|
|
|
|
default: false
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
data(){
|
|
|
|
|
|
return{
|
|
|
|
|
|
// 基础路径
|
|
|
|
|
|
fileUrl: configService.fileUrl + 'pixel/pc/home/',
|
2025-01-22 20:25:38 +08:00
|
|
|
|
homeFileUrl: configService.fileUrl + 'pixel/home/',
|
|
|
|
|
|
// logo图标
|
|
|
|
|
|
logo: 'logo-new.png',
|
2025-01-06 00:54:54 +08:00
|
|
|
|
// tabs标签栏
|
|
|
|
|
|
list: [
|
|
|
|
|
|
{name: '用户登录'},
|
|
|
|
|
|
{name: '手机注册'}
|
|
|
|
|
|
],
|
|
|
|
|
|
// 当前tabs下标
|
|
|
|
|
|
current: '用户登录',
|
|
|
|
|
|
// 登录表单
|
|
|
|
|
|
loginForm: {
|
|
|
|
|
|
username: '',
|
|
|
|
|
|
password: ''
|
|
|
|
|
|
},
|
|
|
|
|
|
// 登录验证规则
|
|
|
|
|
|
loginRules: {
|
|
|
|
|
|
username: [
|
|
|
|
|
|
{
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
message: '请输入手机号',
|
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
validator: (rule, value, callback) => {
|
|
|
|
|
|
if(!this.$u.test.mobile(value)){
|
|
|
|
|
|
callback(new Error('手机号格式不正确'));
|
|
|
|
|
|
}else{
|
|
|
|
|
|
callback();
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
trigger: ['blur']
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
password: [
|
|
|
|
|
|
{
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
message: '请输入密码',
|
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
// 注册验证规则
|
|
|
|
|
|
registerRules: {
|
|
|
|
|
|
username: [
|
|
|
|
|
|
{
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
message: '请输入手机号',
|
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
validator: (rule, value, callback) => {
|
|
|
|
|
|
if(!this.$u.test.mobile(value)){
|
|
|
|
|
|
callback(new Error('手机号格式不正确'));
|
|
|
|
|
|
}else{
|
|
|
|
|
|
callback();
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
trigger: ['blur']
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
password: [
|
|
|
|
|
|
{
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
message: '请输入密码',
|
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
confirmPassword: [
|
|
|
|
|
|
{
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
message: '请输入确认密码',
|
|
|
|
|
|
trigger: 'blur'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
validator: (rule, value, callback) => {
|
|
|
|
|
|
if(this.loginForm.password !== '' && this.loginForm.password === value){
|
|
|
|
|
|
callback();
|
|
|
|
|
|
}else{
|
|
|
|
|
|
callback(new Error('两次密码输入不同'));
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
trigger: ['blur']
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
// 加载
|
|
|
|
|
|
dotLoading: false,
|
|
|
|
|
|
// 是否同意协议、政策
|
|
|
|
|
|
isAgreed: false,
|
|
|
|
|
|
// 弹窗背景图-左
|
|
|
|
|
|
loginBackground: 'login-background.png',
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
getCurrent(){
|
|
|
|
|
|
return this.current === '手机注册'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// 打开移动端下载弹窗
|
|
|
|
|
|
openCode(){
|
|
|
|
|
|
this.$emit('close');
|
|
|
|
|
|
this.$emit('openCode');
|
|
|
|
|
|
},
|
|
|
|
|
|
// 切换方式
|
|
|
|
|
|
change(tab, event) {
|
|
|
|
|
|
this.$refs.loginForm.resetFields();
|
|
|
|
|
|
},
|
|
|
|
|
|
// 提交
|
|
|
|
|
|
submit(){
|
|
|
|
|
|
if(!this.isAgreed){
|
|
|
|
|
|
this.$emit('toast',{type: 'warning', title: "请阅读并勾选同意协议!"});
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
try{
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
let current = this.current === '手机注册';
|
|
|
|
|
|
this.dotLoading = true;
|
|
|
|
|
|
this.$refs.loginForm.validate(async(valid) => {
|
|
|
|
|
|
if (valid) {
|
|
|
|
|
|
// 判断注册或登录的表单值，进行调整匹配
|
|
|
|
|
|
if(!current) delete that.loginForm.confirmPassword;
|
|
|
|
|
|
let res = await that.$api[current?'register':'login'](that.loginForm);
|
|
|
|
|
|
if(res.success){
|
|
|
|
|
|
if(!current){
|
|
|
|
|
|
// 存储登录记录
|
|
|
|
|
|
uni.setStorageSync('loginMemory',JSON.stringify({
|
|
|
|
|
|
username: that.loginForm.username,
|
|
|
|
|
|
password: that.loginForm.password,
|
|
|
|
|
|
timer: new Date()
|
|
|
|
|
|
}));
|
|
|
|
|
|
that.$u.vuex('vuex_token', res.data.token);
|
|
|
|
|
|
that.$u.vuex('user_message', JSON.stringify(res.data.user));
|
|
|
|
|
|
uni.showToast({icon: 'none', title: '登录成功！'});
|
|
|
|
|
|
that.$emit('login', res.data.user);
|
|
|
|
|
|
that.$emit('close');
|
|
|
|
|
|
}else{
|
|
|
|
|
|
that.$emit('toast',{type: 'success', title: "注册成功，请登录"});
|
|
|
|
|
|
that.current = '用户登录';
|
|
|
|
|
|
}
|
|
|
|
|
|
that.$refs.loginForm.resetFields();
|
|
|
|
|
|
}else{
|
|
|
|
|
|
that.$emit('toast',{type: 'error', title: current?`${res.data}!`:"手机号或密码错误!"});
|
|
|
|
|
|
}
|
|
|
|
|
|
}else{
|
|
|
|
|
|
that.$emit('toast',{type: 'error', title: "请完善信息！"});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}catch(e){}
|
|
|
|
|
|
finally{
|
|
|
|
|
|
this.dotLoading = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
// 判断上次登录记录
|
|
|
|
|
|
let loginMemory = uni.getStorageSync('loginMemory');
|
|
|
|
|
|
if(loginMemory) {
|
|
|
|
|
|
const {username, password, timer} = JSON.parse(loginMemory);
|
|
|
|
|
|
// 距离上次存储间隔5天，则删除缓存
|
|
|
|
|
|
if(Math.floor((Date.parse(new Date()) - Date.parse(new Date(timer)))/(24*3600*1000)) >5){
|
|
|
|
|
|
uni.removeStorageSync('loginMemory');
|
|
|
|
|
|
}else{
|
|
|
|
|
|
this.loginForm = {
|
|
|
|
|
|
username: username,
|
|
|
|
|
|
password: password
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
.login-dialog{
|
|
|
|
|
|
width: 2000rpx;
|
|
|
|
|
|
height: 1140rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
.login-dialog-left{
|
|
|
|
|
|
width: 50%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
padding: 160rpx 160rpx 100rpx;
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
.ldl-logo{
|
|
|
|
|
|
width: 360rpx;
|
|
|
|
|
|
height: 76rpx;
|
|
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.ldl-system-name{
|
|
|
|
|
|
font-size: 50rpx;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
|
|
|
margin-bottom: 90rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.ldl-team{
|
|
|
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
|
|
|
color: #9eb3a1;
|
|
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
.ldl-message{
|
|
|
|
|
|
height: 420rpx;
|
|
|
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
|
|
|
line-height: 50rpx;
|
|
|
|
|
|
border-bottom: 2rpx solid #9eb3a1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.ldl-bottom{
|
|
|
|
|
|
margin-top: 70rpx;
|
|
|
|
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
.u-icon{
|
|
|
|
|
|
margin-left: 10rpx;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
text{
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.login-dialog-right{
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
padding: 120rpx;
|
|
|
|
|
|
.ldr-close{
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: 50rpx;
|
|
|
|
|
|
top: 40rpx;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover{
|
|
|
|
|
|
color: #b4f08e;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.ldr-top{
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
margin-bottom: 35rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
// justify-content: center;
|
|
|
|
|
|
.ldr-tabs{
|
|
|
|
|
|
::v-deep .el-tabs__nav-wrap::after{
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
::v-deep .el-tabs__item{
|
|
|
|
|
|
font-size: 46rpx;
|
|
|
|
|
|
&.is-active{
|
|
|
|
|
|
color: #a6ec96;
|
|
|
|
|
|
}
|
|
|
|
|
|
&:hover{
|
|
|
|
|
|
color: #a6ec96;
|
|
|
|
|
|
opacity: 0.7;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
::v-deep .el-tabs__active-bar{
|
|
|
|
|
|
height: 6rpx;
|
|
|
|
|
|
background-color: #a6ec96;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.ldr-btn{
|
|
|
|
|
|
height: 90rpx;
|
|
|
|
|
|
margin-top: 80rpx;
|
|
|
|
|
|
background-image: linear-gradient(to right, #81cd7d 0%, #b0f090 51%, #81cd7d 100%);
|
|
|
|
|
|
box-shadow: 0 0 20rpx #eee;
|
|
|
|
|
|
background-size: 200% auto;
|
|
|
|
|
|
text-transform: uppercase;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
.ldr-agreement{
|
|
|
|
|
|
margin-top: 60rpx;
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
color: #ded3c9;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
text{
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
color: #8fca80;
|
|
|
|
|
|
}
|
|
|
|
|
|
.ldr-checkbox{
|
|
|
|
|
|
margin-right: -10rpx;
|
|
|
|
|
|
::v-deep .u-checkbox__icon-wrap--square{
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
