Skip to content

C
campSite
Commit 2463f973 authored by wuwangwolihui's avatar wuwangwolihui
Browse files
Options

营地2.0基础设置

parent 6c23e0a9
Hide whitespace changes
Inline Side-by-side
Showing with 1850 additions and 68 deletions
src/App.vue
View file @ 2463f973
...@@ -11,11 +11,16 @@ export default { ...@@ -11,11 +11,16 @@ export default {
return {}; return {};
}, },
created() { created() {
this.$store.commit('setActiveIndex', this.$route.path)
}, },
methods: { methods: {
}, },
watch: {
'$route.path'(val) {
this.$store.commit('setActiveIndex', val)
}
}
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
......
src/components/base/Footer.vue 0 → 100644
View file @ 2463f973
/* eslint-disable vue/require-v-for-key */
<template>
<!--底部-->
<div class="footer">
<div class="com-container content">
<ul class="contact_list">
<li>
<i class="el-icon-message"></i>
<span>联系邮箱</span>ydhdservice@163.com
</li>
<!-- <li>
<i class="el-icon-phone-outline"></i>
<span>联系电话</span>010-56218127
</li> -->
<li>
<i class="el-icon-aim"></i>
<span>工作时间</span>周一至周五 09:00 - 12:00，14:00 - 18:00
</li>
</ul>
<div class="line"></div>
<div class="copyRight">
<div>
<a href="">Copyright © 2021 营地系统 版权所有</a>
<!-- <a target="_blank" href="https://beian.miit.gov.cn"
>京ICP备19058825号-3</a>
<a
target="_blank"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034612"
>京公网安备 11010802034612号</a> -->
</div>
</div>
</div>
</div>
</template>
<script>
/* eslint-disable */
export default {
name: "Footer",
};
</script>
<style lang="scss" scoped>
@import "a/scss/common";
.footer {
font-family: PingFang SC;
font-size: 14px;
height: 169px;
background: #000000;
opacity: 0.9;
line-height: 60px;
border-top: 1px solid #ccc;
.content {
.contact_list {
display: flex;
flex-flow: row;
align-items: center;
height: 88px;
margin: 0;
padding: 0;
li {
font-size: 12px;
height: 14px;
line-height: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
list-style: none;
margin-right: 40px;
span {
margin: 0 15px 0 7px;
}
&:last-child {
margin-right: 0;
}
}
}
.line {
width: 100%;
height: 1px;
background: #ffffff;
opacity: 0.2;
}
.copyRight {
display: flex;
flex-flow: row;
align-items: center;
height: 62px;
margin: 0;
padding: 0;
a {
font-size: 12px;
font-weight: 400;
margin-right: 20px;
color: #FFFFFF;
text-decoration: none;
img {
width: 15px;
margin-top: -3px;
}
&:hover {
text-decoration: underline;
}
}
}
}
}
</style>
src/components/base/Header.vue 0 → 100644
View file @ 2463f973
<template>
<div class="Header">
<div class="H_content com-container">
<div class="image">
<img src="../../assets/img/logo_base.png" alt=""/>
</div>
<div class="right">
<el-menu :default-active="$store.state.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="/home">首页</el-menu-item>
<el-menu-item index="/active">活动中心</el-menu-item>
</el-menu>
<div class="noLogin" v-if="!isLogin">
<span
@mouseenter="onMouserEnter(false)"
:class="isHover ? '' : 'is-hover'"
@click="toLogin"
>登录</span>
<span
@mouseenter="onMouserEnter(true)"
:class="isHover ? 'is-hover' : ''"
@click="toRegister"
>注册</span>
</div>
<div class="alreadyLogin" v-else>
<el-dropdown @command="handleCommand" trigger="click">
<div class="el-dropdown-link">
<img src="@/assets/img/default.svg" class="img_user"/>
<span class="phone">{{ phone }}</span>
<i class="el-icon-arrow-down el-icon--right"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1" @click="toCenter">
<i class="el-icon-user"></i>个人中心
</el-dropdown-item>
<el-dropdown-item command="2" @click="logout">
<i class="el-icon-switch-button"></i>退出
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</div>
</div>
</template>
<script>
import {logout} from "r/index/login";
export default {
name: "Header",
data() {
return {
isHover: true,
isLogin: false,
phone: '',
};
},
created() {
this.isLogin = !!localStorage.getItem("index-token-all");
this.phone = localStorage.getItem("index-phone-all") || "";
},
methods: {
// 导航栏操作
handleSelect(key, keyPath) {
this.$router.push(key);
},
// 下拉菜单操作
handleCommand(command) {
if (command == 2) {
this.logout();
}
if (command == 1) {
this.toCenter();
}
},
// 去个人中心
toCenter() {
let code = this.$store.state.indexIdentity;
this.$router.replace("/signUp/examInfo?code=" + code);
},
// 去注册
toRegister() {
let code = this.$store.state.indexIdentity;
this.$router.push("/register?code=" + code);
},
// 去登录页
toLogin() {
let code = this.$store.state.indexIdentity;
this.$router.push("/login?code=" + code);
},
// 退出登录
async logout() {
const confirmResult = await this.$confirm(`确认退出登录？`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
closeOnClickModal: false,
type: "warning",
}).catch((err) => err);
if (confirmResult !== "confirm") {
return this.$message.info("您取消了退出");
}
// 清除所有缓存
window.localStorage.clear();
this.isLogin = false;
this.$message.success('退出成功');
await logout({});
},
onMouserEnter(val) {
this.isHover = val;
},
},
};
</script>
<style lang="scss" scoped>
@import "a/scss/common";
.Header {
font-family: PingFang SC;
height: 80px;
background-color: #ffffff;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
.H_content {
height: 100%;
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
.image img {
// width: 318px;
height: 62px;
}
.right {
display: flex;
flex-flow: row;
align-items: center;
::v-deep .el-menu {
margin-right: 100px;
.el-menu-item {
height: 44px;
line-height: 44px;
padding: 0 5px;
margin: 20px;
color: #666666;
font-size: 15px;
font-family: "PingFang SC";
&:hover {
font-weight: bold;
color: var(--color);
}
&.is-active {
font-weight: bold;
color: var(--color);
border-bottom-width: 3px;
border-bottom-color: var(--color);
}
}
}
.noLogin {
flex: 1;
span {
font-size: 15px;
font-weight: 500;
color: #666666;
line-height: 21px;
padding: 10px 36px;
border-radius: 4px;
border: 2px solid transparent;
&:last-child {
margin-left: 10px;
}
&.is-hover {
cursor: pointer;
color: var(--color);
border-color: var(--color);
}
}
}
.alreadyLogin {
flex: 1;
span {
padding: 0 !important;
}
::v-deep .el-dropdown {
height: 80px;
.el-dropdown-link {
height: 80px;
display: flex;
flex-flow: row;
align-items: center;
.img_user {
width: 34px;
height: 34px;
background-color: #d8d8d8;
border-radius: 50%;
}
.phone {
margin: 0 10px 0 12px;
}
}
&:hover {
cursor: pointer;
}
}
}
}
}
}
</style>
src/router/base/active.js 0 → 100644
View file @ 2463f973
export default [
{
path: '/active',
name: 'base-active',
component: () => import(/* webpackChunkName: "login" */ 'v/base/active/Active.vue'),
meta: {
title: '活动中心'
}
},
{
path: '/active/:id',
name: 'base-active-info',
component: () => import(/* webpackChunkName: "login" */ 'v/base/active/ActiveInfo.vue'),
meta: {
title: '活动中心'
}
},
]
src/router/base/home.js 0 → 100644
View file @ 2463f973
export default [
{
path: '/home',
name: 'base-home',
component: () => import(/* webpackChunkName: "login" */ 'v/base/home/Home.vue'),
meta: {
title: '首页'
}
},
]
src/router/index.js
View file @ 2463f973
/* eslint-disable */ /* eslint-disable */
import Vue from 'vue' import Vue from 'vue';
import VueRouter from 'vue-router' import VueRouter from 'vue-router';
import store from '@/store' import store from '@/store';
import indexLogin from './index/login' import indexLogin from './index/login';
import indexCamp from './index/camp' import indexCamp from './index/camp';
import { import indexHome from './base/home';
getCam, import indexActive from './base/active';
getCamInfo import {getCam} from "r/index/login";
} from "r/index/login"; import {Message} from 'element-ui';
import {
Message
} from 'element-ui';
import Cookie from "js-cookie"
Vue.prototype.$message = Message; Vue.prototype.$message = Message;
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [
const routes = [{ {
path: '',
name: '',
meta: {
title: ''
},
component: () => import('v/base/Index.vue'),
children: [...indexHome, ...indexActive]
},
{
path: '/login', path: '/login',
name: 'loginIndex', name: 'loginIndex',
meta: { meta: {
title: '登录' title: '登录'
}, },
component: () => component: () => import('v/index/login/Index.vue'),
import('v/index/login/Index.vue'),
children: [...indexLogin] children: [...indexLogin]
}, },
{ {
...@@ -38,8 +42,7 @@ const routes = [{ ...@@ -38,8 +42,7 @@ const routes = [{
title: '营地报名' title: '营地报名'
}, },
// redirect: '/cerificate/signUp', // redirect: '/cerificate/signUp',
component: () => component: () => import('v/index/camp/Index.vue'),
import('v/index/camp/Index.vue'),
children: [...indexCamp] children: [...indexCamp]
}, },
{ {
...@@ -48,20 +51,17 @@ const routes = [{ ...@@ -48,20 +51,17 @@ const routes = [{
meta: { meta: {
title: '' title: ''
}, },
component: () => import('v/index/recruit/Index.vue')
component: () =>
import('v/index/recruit/Index.vue')
}, },
{ {
path: "/404", path: "/404",
name: "notFound", name: "notFound",
component: () => component: () => import('v/index/notFound.vue'),
import('v/index/notFound.vue'), },
}, { {
path: "*", // 此处需特别注意置于最底部 path: "*", // 此处需特别注意置于最底部
redirect: "/404" redirect: "/404"
} }
] ]
...@@ -91,11 +91,7 @@ router.onError((error) => { ...@@ -91,11 +91,7 @@ router.onError((error) => {
}) })
function checkCam(code, cb) { function checkCam(code, cb) {
// console.log(code, 'code')
// console.log(cb, 'cb')
// const code=store.status.indexIdentity
store.state.indexIdentity = code; store.state.indexIdentity = code;
// console.log(code, 'code11111')
if (!code) { if (!code) {
Message({ Message({
message: "请访问正确的营地链接地址", message: "请访问正确的营地链接地址",
...@@ -104,25 +100,7 @@ function checkCam(code, cb) { ...@@ -104,25 +100,7 @@ function checkCam(code, cb) {
cb && cb(false); cb && cb(false);
return false; return false;
} }
getCam(code).then((res) => { getCam(code).then((res) => {
// console.log(res)
// if (res.data.code != 200) {
// Message({
// message: "请访问正确的营地链接地址",
// type: 'waring'
// });
// if (res.data.code == 400034 || res.data.code == 400035 || res.data.code == 400001 || res.data.code == 400002 || res.data.code == 400003) {
// Message({
// message: res.data.message,
// type: 'waring'
// });
// cb && cb(false);
// return false;
// }
// }
let root = document.querySelector(":root"); let root = document.querySelector(":root");
root.style.setProperty("--color", res.data.system_color); root.style.setProperty("--color", res.data.system_color);
root.style.setProperty("--bk_pic", res.data.background_picture); //当前营地的背景图 root.style.setProperty("--bk_pic", res.data.background_picture); //当前营地的背景图
...@@ -149,34 +127,36 @@ function checkCam(code, cb) { ...@@ -149,34 +127,36 @@ function checkCam(code, cb) {
} }
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
// console.log(next, 'next')
let let
toLogin = "/login", toLogin = "/login",
toRegister = "/register", toRegister = "/register",
toReset = "/reset" toReset = "/reset",
toHome = "/home",
toActive = "/active";
let code = false; let code = false;
document.title = to.meta.title; document.title = to.meta.title;
if (to.path == toLogin || to.path == toRegister || to.path == toReset) { if (to.path == toLogin || to.path == toRegister || to.path == toReset) {
code = to.params.code ? to.params.code : to.query.code; // code = to.params.code ? to.params.code : to.query.code;
checkCam(code, (res) => { // checkCam(code, (res) => {
if (res) { // if (res) {
let token = window.localStorage.getItem("index-token" + code); // let token = window.localStorage.getItem("index-token" + code);
// console.log(token, "token") // //检查登陆情况
//检查登陆情况 // if (token) {
if (token) { // next("/" + code);
next("/" + code); // } else {
} else { // return next();
return next(); // }
} // }
} // });
}); return next();
} else if (to.path == toHome || to.path == toActive || to.path.indexOf(toActive) != -1) {
return next();
} else if (to.name == "recruit") { } else if (to.name == "recruit") {
code = to.params.code; code = to.params.code;
checkCam(code, (res) => { checkCam(code, (res) => {
if (res) { if (res) {
return next(); return next();
} }
}); });
} else { } else {
code = to.params.code ? to.params.code : to.query.code; code = to.params.code ? to.params.code : to.query.code;
......
src/store/index.js
View file @ 2463f973
...@@ -13,11 +13,12 @@ let state = { ...@@ -13,11 +13,12 @@ let state = {
// 数据 // 数据
data: [], data: [],
token: '', token: '',
indexIdentity:"", indexIdentity: "",
// showDialog: false, // showDialog: false,
// dialogType: 0, // dialogType: 0,
info:{}, info: {},
isLogin: localStorage.getItem("isLogin") || "0", // 只有1为已登录 isLogin: localStorage.getItem("isLogin") || "0", // 只有1为已登录
activeIndex: window.localStorage.getItem('index-active-path') || "0",
}; };
export default new Vuex.Store({ export default new Vuex.Store({
......
src/store/mutations.js
View file @ 2463f973
...@@ -8,7 +8,6 @@ export default { ...@@ -8,7 +8,6 @@ export default {
setData(state, city) { setData(state, city) {
state.data = city; state.data = city;
}, },
login(state) { login(state) {
state.isLogin = "1"; state.isLogin = "1";
localStorage.setItem("isLogin", "1"); localStorage.setItem("isLogin", "1");
...@@ -18,4 +17,10 @@ export default { ...@@ -18,4 +17,10 @@ export default {
localStorage.removeItem("token"); localStorage.removeItem("token");
localStorage.removeItem("isLogin"); localStorage.removeItem("isLogin");
}, },
setActiveIndex(state, path) {
console.log(path)
let key = path.split('/')[1] == 'active' ? '/' + path.split('/')[1] : path;
state.activeIndex = key;
window.localStorage.setItem('index-active-path', key);
},
}; };
src/views/base/Index.vue 0 → 100644
View file @ 2463f973
<template>
<el-container>
<el-header height="auto">
<Header></Header>
</el-header>
<el-container>
<router-view></router-view>
<Footer></Footer>
</el-container>
</el-container>
</template>
<script>
import Header from "../../components/base/Header";
import Footer from "../../components/base/Footer";
export default {
name: "index-index",
components: {
Header,
Footer,
},
data() {
return {};
},
created() {
console.log('created');
},
methods: {},
};
</script>
<style lang="scss">
.flex {
display: flex;
}
body {
background-color: #f5f5f5;
}
.el-container {
width: 100%;
height: 100%;
overflow: hidden;
min-width: 1024px;
box-sizing: border-box;
background-color: #f5f5f5;
.el-header {
padding: 0;
}
.el-container {
width: 100%;
overflow: auto;
display: flex;
flex-flow: column;
}
}
</style>
src/views/base/active/Active.vue 0 → 100644
View file @ 2463f973
<template>
<div class="com-container active-container">
<div class="active-search">
<div class="active-search-title">活动筛选</div>
<div class="active-search-content">
<div class="content-item">
<div>活动状态</div>
<ul>
<li>全部</li>
<li>报名未开放</li>
<li>报名中</li>
<li>开营中</li>
<li>已结营</li>
</ul>
</div>
</div>
</div>
Active
<el-button @click="$router.push('/active/1')">活动详情</el-button>
</div>
</template>
<script>
export default {
name: "Active"
}
</script>
<style lang="scss" scoped>
@import "a/scss/common";
.active-container{
padding: 50px;
}
</style>
src/views/base/active/ActiveInfo.vue 0 → 100644
View file @ 2463f973
<template>
<div>ActiveInfo</div>
</template>
<script>
export default {
name: "ActiveInfo"
}
</script>
<style scoped>
</style>
src/views/base/home/Home.vue 0 → 100644
View file @ 2463f973
<template>
<div>Home</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style>
src/views/base/login/Index.vue 0 → 100644
View file @ 2463f973
<template>
<div class="login-index">
<div class="big-img" @click="toHome">
<img :src="bigImg" />
</div>
<div class="big-right">
<div class="info-box">
<router-view />
</div>
</div>
</div>
</template>
<script>
/* eslint-disable */
import Cookie from "js-cookie"
export default {
name: "loginIndex",
data() {
return {
bigImg: window.localStorage.getItem("bk_pic"+this.$store.state.indexIdentity),
};
},
created() {
let code = this.$store.state.indexIdentity;
let bk_pic = window.localStorage.getItem("bk_pic"+code);
if (bk_pic) {
this.bigImg = bk_pic;
}
this.$emit("getStatus", false);
},
methods: {
toHome() {
let code = this.$store.state.indexIdentity;
this.$router.push("/"+code);
}
},
};
</script>
<style scoped lang="scss">
.login-index {
position: relative;
min-width: 1104px;
background: #f8f8f8;
display: flex;
flex-flow: row;
min-height: 100%;
.big-img {
width: (500/1920 * 100%);
min-width: 350px;
min-height: 100%;
img {
width: 100%;
min-height: 100%;
}
}
.big-right {
flex: 1;
position: relative;
.info-box {
width: 520px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
</style>
src/views/base/login/Login.vue 0 → 100644
View file @ 2463f973
<template>
<div class="container">
<div class="title">账号密码登录</div>
<div class="line"></div>
<el-form
:model="loginForm"
:rules="loginFormRules"
ref="loginFormRef"
class="demo-ruleForm"
>
<el-form-item prop="phone">
<img
class="img_l"
src="../../../assets/img/login/username.png"
alt=""
/>
<el-input
v-model="loginForm.phone"
placeholder="请输入手机号"
maxlength="11"
></el-input>
</el-form-item>
<el-form-item prop="password">
<img
class="img_l"
src="../../../assets/img/login/password.png"
alt=""
/>
<el-input
v-model="loginForm.password"
:type="isShowPwd ? 'password' : 'text'"
maxlength="20"
placeholder="请输入密码"
></el-input>
<img
@click="changePwdStatus()"
v-if="!isShowPwd"
class="img_r"
src="../../../assets/img/login/eye01.png"
alt=""
/>
<img
@click="changePwdStatus()"
v-if="isShowPwd"
class="img_r"
src="../../../assets/img/login/eye01.png"
alt=""
/>
</el-form-item>
<el-form-item style="margin: 40px 0 0 0"></el-form-item>
<el-form-item>
<el-button @click="submitForm()">登 录</el-button>
</el-form-item>
<div class="box">
<div>
<div class="fr" @click="register()">还没有账号？立即注册</div>
<div class="fl" @click="forgetPwd()">忘记密码？</div>
</div>
<!-- <div class="fc">忘记密码请联系管理员邮箱：ydhdservice@163.com</div> -->
</div>
</el-form>
</div>
</template>
<script>
/* eslint-disable */
import Cookie from "js-cookie";
import { login } from "r/index/login";
import { mobileCheck } from "@/common/utils.js";
export default {
name: "index-login",
data() {
return {
isShowPwd: true, // 控制密码显示隐藏
loginForm: {
phone: "",
password: "",
},
// 表单验证规则对象
loginFormRules: {
// 对手机号进行校验
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
validator: function (rule, value, callback) {
if (mobileCheck(value) === false) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
},
trigger: "blur",
},
],
// 对密码进行校验
password: [
{
required: true,
message: "请输入密码",
transform: (value) => value,
trigger: "blur",
},
{
type: "string",
message: "请输入不包含空格的字符",
trigger: "blur",
transform(value) {
if (value && value.indexOf(" ") === -1) {
return value;
} else {
return false;
}
},
},
{
trigger: "blur",
validator: (rule, value, callback) => {
var passwordreg = /^[a-zA-Z0-9]{6,12}$/;
// /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/;
if (!passwordreg.test(value)) {
callback(new Error("请输入6-12位，包含数字/字母,"));
} else {
callback();
}
},
},
],
},
};
},
created() {
this.$emit("getStatus", false);
},
methods: {
// 忘记账号/密码
forgetPwd() {
let code = this.$store.state.indexIdentity;
this.$router.push("/reset?code=" + code);
},
// 去注册
register() {
let code = this.$store.state.indexIdentity;
this.$router.push("/register?code=" + code);
},
// 改变密码显示状态
changePwdStatus() {
this.isShowPwd = !this.isShowPwd;
},
// 登录
submitForm() {
this.$refs["loginFormRef"].validate((valid) => {
if (!valid) return;
login({
phone: this.loginForm.phone,
password: this.loginForm.password,
}).then((res) => {
console.log(res, "login");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
// this.$message.success("登录成功");
// 跳转到报名
const code = this.$store.state.indexIdentity;
// token存储
window.localStorage.setItem("index-token" + code, res.data.token);
window.localStorage.setItem("phone" + code, this.loginForm.phone);
window.localStorage.setItem("email" + code, res.data.email);
// 报名信息
window.localStorage.setItem("camp_name" + code, res.data.cam.name);
//获取主题色
window.localStorage.setItem(
"system_color" + code,
res.data.cam.system_color
);
this.$router.replace("/signUp/examInfo?code=" + code);
});
});
},
},
};
</script>
<style scoped lang="scss">
.container {
background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px;
padding: 40px 60px;
margin-top: 0;
overflow: hidden;
.title {
margin: 19px 0 6px 0;
width: 132px;
height: 20px;
font-size: 22px;
font-weight: 500;
color: var(--color);
line-height: 20px;
}
.line {
width: 125px;
height: 3px;
background: var(--color);
border-radius: 2px;
}
.el-form {
margin-top: 60px;
.el-form-item {
position: relative;
margin-bottom: 30px;
&:last-child {
margin: 0;
}
img.img_l {
position: absolute;
left: 25px;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
img.img_r {
position: absolute;
right: 15px;
top: 50%;
transform: translate(0, -50%);
z-index: 1000;
}
::v-deep .el-input__inner {
height: 50px;
line-height: 50px;
padding: 0 10px 0 50px;
border-radius: 0;
color: #4d4d4d;
border: 0;
border-bottom: 2px solid #d9d9d9;
&:focus {
border-bottom-color: var(--color);
}
}
::v-deep .el-form-item__error {
color: #e0823d;
}
.el-button {
width: 100%;
height: 60px;
background: var(--color);
border-radius: 4px;
opacity: 0.8;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 16px;
padding: 0;
margin: 30px 0 0 0;
border: none;
}
}
.box {
height: 18px;
// display: block;
display: flex;
flex-direction: column;
.fl {
float: right;
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: var(--color);
text-decoration: underline;
}
}
.fr {
float: left;
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: var(--color);
text-decoration: underline;
}
}
.fc {
font-size: 4px;
float: right;
// height: 18px;
line-height: 18px;
color: #999999;
margin-top: 10px;
// cursor: pointer;
// &:hover {
// color: #563279;
// text-decoration: underline;
// }
}
}
}
}
</style>
src/views/base/login/Register.vue 0 → 100644
View file @ 2463f973
<template>
<div>
<div style="border: none">
<div class="container">
<div class="title">新用户注册</div>
<div class="line"></div>
<el-form
:model="registerForm"
:rules="registerRules"
ref="registerFormRef"
class="demo-registerForm"
>
<el-form-item prop="phone">
<img class="img_l" src="@/assets/img/reset/username.png" alt="" />
<el-input
v-model="registerForm.phone"
placeholder="请输入手机号"
maxlength="11"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item prop="email">
<img class="img_l" src="@/assets/img/reset/username.png" alt="" />
<el-input
v-model="registerForm.email"
placeholder="请输入邮箱"
autocomplete="off"
></el-input>
</el-form-item>
<!-- <el-form-item prop="code">
<img class="img_l" src="@/assets/img/reset/code.png" alt="" />
<el-input
v-model="registerForm.code"
placeholder="请输入短信验证码"
maxlength="20"
autocomplete="off"
></el-input> -->
<!-- 短信验证码 -->
<!-- <div class="phoneCode">
<span class="code" v-show="show" @click="getCode"
>获取验证码</span
>
<span v-show="!show" class="count">{{ count }} s</span>
</div>
</el-form-item> -->
<el-form-item prop="code">
<img class="img_l" src="@/assets/img/reset/code.png" alt="" />
<el-input
v-model="registerForm.code"
placeholder="请输入邮箱注册验证码"
maxlength="6"
autocomplete="off"
></el-input>
<!-- 短信验证码 -->
<div class="phoneCode">
<span class="code" v-show="showCode" @click="getCode"
>获取邮箱验证码</span
>
<span v-show="!showCode" class="count">{{ count }} s</span>
</div>
</el-form-item>
<el-form-item prop="password">
<img class="img_l" src="@/assets/img/reset/password.png" alt="" />
<el-input
v-model="registerForm.password"
maxlength="20"
placeholder="设置密码：6-12位字符，包含字母或数字"
:autocomplete="isShowPwd ? 'new-password' : 'off'"
></el-input>
<!-- <img
@click="changePwdStatus()"
v-if="!isShowPwd"
class="img_r"
src="@/assets/img/reset/eye01.png"
alt=""
/>
<img
@click="changePwdStatus()"
v-if="isShowPwd"
class="img_r"
src="@/assets/img/reset/eye01.png"
alt=""
/> -->
</el-form-item>
<el-form-item prop="rq_password">
<img class="img_l" src="@/assets/img/reset/password.png" alt="" />
<el-input
v-model="registerForm.rq_password"
placeholder="请再次输入登录密码"
maxlength="20"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item style="margin: 40px 0 0 0"></el-form-item>
<el-form-item>
<el-button @click="submitForm()"> 注册</el-button>
</el-form-item>
<div class="box">
<div class="fr" @click="toLogin()">已有账号？马上登录</div>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
/* eslint-disable */
// 请求接口
import {
registerCode,
setAccountInfo,
registerEmailCode,
} from "r/index/register";
import { mobileCheck, checkStrong } from "@/common/utils.js";
import validator from "common/validator";
import { intervalTime } from "store/time";
export default {
name: "index-register",
data() {
const pwdCheck = async (rule, value, callback) => {
if (value !== this.registerForm.password) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
inputType: "",
// 手机验证短信
showCode: true,
count: "",
timer: null,
codeTime: "", //手机验证码倒计时时间
isShowPwd: true, // 控制密码显示隐藏
registerForm: {
phone: "",
email: "",
code: "",
password: "",
rq_password: "",
},
// 表单验证规则对象
registerRules: {
// 对手机号进行校验
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
validator: function (rule, value, callback) {
if (mobileCheck(value) === false) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
},
trigger: "blur",
},
],
// 对邮箱验证
email: [
{ required: true, message: "请输入邮箱", trigger: "blur" },
{
validator: validator.validateEmail,
trigger: "blur",
},
],
// 对验证码进行校验
code: [
{ required: true, message: "请输入验证码", trigger: "blur" },
{ min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" },
],
// 对密码进行校验
password: [
{
required: true,
message: "请输入密码",
transform: (value) => value,
trigger: "blur",
},
{
type: "string",
message: "请输入不包含空格的字符",
trigger: "blur",
transform(value) {
if (value && value.indexOf(" ") === -1) {
return value;
} else {
return false;
}
},
},
{
trigger: "blur",
validator: (rule, value, callback) => {
var passwordreg = /^[a-zA-Z0-9]{6,12}$/;
// /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/;
if (!passwordreg.test(value)) {
callback(new Error("请输入6-12位，包含数字/字母,"));
} else {
callback();
}
},
},
],
// 对密码进行校验
rq_password: [
{ required: true, message: "请输入确认密码", trigger: "blur" },
{
validator: pwdCheck,
trigger: "blur",
},
],
},
};
},
created() {
const code = this.$store.state.indexIdentity;
const endTime = window.localStorage.getItem("register_code_time" + code);
if (endTime && Number(endTime) > new Date().getTime()) {
this.resetForm.phone = phone;
this.intervalHandle(new Date(), Number(endTime));
}
},
methods: {
// 去注册
toLogin() {
let code = this.$store.state.indexIdentity;
this.$router.push("/login?code=" + code);
},
// 改变密码显示状态
changePwdStatus() {
this.isShowPwd = !this.isShowPwd;
},
// 定时器倒计时
intervalHandle(startTime, endTime) {
// 时间差
const timeLag = intervalTime(startTime, endTime);
console.log(timeLag);
if (!this.timer) {
this.count = timeLag - 1;
this.showCode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= timeLag) {
this.count--;
} else {
this.showCode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
// 获取手机验证短信
getCode() {
if (!this.registerForm.email) {
return this.$message.error("请输入邮箱");
}
// if (!this.codeTime) {
// return this.$message.error("您已经获取验证码，请去邮箱中进行查看");
// }
// 接口获得验证码
registerEmailCode({
email: this.registerForm.email,
}).then((res) => {
console.log(res, "passwordCode");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.$message.success(res.data.message);
this.codeTime = res.data.data.now * 1000;
// console.log(this.codeTime)
let code = this.$store.state.indexIdentity;
window.localStorage.setItem(
"register_code_time" + code,
res.data.data.now * 1000
);
this.intervalHandle(new Date(), res.data.data.now * 1000);
});
},
// 表单验证
submitForm() {
this.$refs["registerFormRef"].validate((valid) => {
if (!valid) return;
setAccountInfo({
phone: this.registerForm.phone,
email: this.registerForm.email,
code: this.registerForm.code,
password: this.registerForm.password,
rq_password: this.registerForm.rq_password,
}).then((res) => {
console.log(res);
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
// this.$message.success(res.data.message);
let code = this.$store.state.indexIdentity;
// token存储
window.localStorage.setItem("index-token" + code, res.data.token);
window.localStorage.setItem("phone" + code, this.registerForm.phone);
window.localStorage.setItem("email" + code, this.registerForm.email);//邮箱
// 报名信息
window.localStorage.setItem("camp_name" + code, res.data.cam.name);
//获取主题色
window.localStorage.setItem(
"system_color" + code,
res.data.cam.system_color
);
// 跳转到报名
this.$router.push("/signUp/examInfo?code=" + code);
});
});
},
},
};
</script>
<style scoped lang="scss">
// 注册输入
.container {
background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px;
padding: 40px 60px;
margin-top: 0;
overflow: hidden;
.title {
margin: 19px 0 6px 0;
width: 132px;
height: 20px;
font-size: 22px;
font-weight: 500;
color: var(--color);
line-height: 20px;
}
.line {
width: 103px;
height: 3px;
background: var(--color);
border-radius: 2px;
}
::v-deep .el-form {
margin-top: 60px;
.el-form-item {
position: relative;
margin-bottom: 30px;
&:last-child {
margin: 0;
}
.el-form-item__content {
position: relative;
.phoneCode {
position: absolute;
z-index: 999;
top: 50%;
right: 25px;
transform: translate(0, -50%);
cursor: pointer;
.code {
font-size: 14px;
font-weight: 600;
color: var(--color);
}
}
img.img_l {
position: absolute;
left: 25px;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
img.img_r {
position: absolute;
right: 15px;
top: 50%;
transform: translate(0, -50%);
z-index: 1000;
}
.el-input__inner {
height: 50px;
line-height: 50px;
padding: 0 10px 0 50px;
border-radius: 0;
color: #4d4d4d;
border: 0;
border-bottom: 2px solid #d9d9d9;
&:focus {
border-bottom-color: var(--color);
}
}
.el-form-item__error {
color: #e0823d;
}
.el-button {
width: 100%;
height: 60px;
background: var(--color);
border-radius: 4px;
opacity: 0.8;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 16px;
padding: 0;
margin: 30px 0 0 0;
border: none;
}
}
}
.box {
height: 18px;
display: block;
.fr {
// float: left;
text-align: center;
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: var(--color);
text-decoration: underline;
}
}
}
}
}
@media screen and (max-width: 1601px) {
.container {
right: 18%;
}
}
@media screen and (max-width: 1501px) {
.container {
right: 16%;
}
}
@media screen and (max-width: 1401px) {
.container {
right: 14%;
}
}
</style>
src/views/base/login/Reset.vue 0 → 100644
View file @ 2463f973
<template>
<div>
<div style="border: none">
<div class="container">
<div class="title">忘记密码</div>
<div class="line"></div>
<el-form
:model="resetForm"
:rules="resetRules"
ref="resetFormRef"
class="demo-resetForm"
>
<el-form-item prop="phone">
<img class="img_l" src="@/assets/img/reset/username.png" alt="" />
<el-input
v-model="resetForm.phone"
placeholder="请输入手机号"
maxlength="11"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item prop="email">
<img class="img_l" src="@/assets/img/reset/username.png" alt="" />
<el-input
v-model="resetForm.email"
placeholder="请输入邮箱"
autocomplete="off"
></el-input>
</el-form-item>
<!-- <el-form-item prop="code">
<img class="img_l" src="@/assets/img/reset/code.png" alt="" />
<el-input
v-model="resetForm.code"
placeholder="请输入短信验证码"
maxlength="20"
autocomplete="off"
></el-input> -->
<!-- 短信验证码 -->
<!-- <div class="phoneCode">
<span class="code" v-show="showCode" @click="getCode"
>获取验证码</span
>
<span v-show="!showCode" class="count">{{ count }} s</span>
</div>
</el-form-item> -->
<el-form-item prop="code">
<img class="img_l" src="@/assets/img/reset/code.png" alt="" />
<el-input
v-model="resetForm.code"
placeholder="请输入邮箱验证码"
maxlength="6"
autocomplete="off"
></el-input>
<!-- 短信验证码 -->
<div class="phoneCode">
<span class="code" v-show="showCode" @click="getCode"
>获取邮箱验证码</span
>
<span v-show="!showCode" class="count">{{ count }} s</span>
</div>
</el-form-item>
<el-form-item prop="password">
<img class="img_l" src="@/assets/img/reset/password.png" alt="" />
<el-input
v-model="resetForm.password"
maxlength="20"
placeholder="设置密码：6-12位字符，包含字母或数字"
:autocomplete="isShowPwd ? 'new-password' : 'off'"
></el-input>
<!-- <img
@click="changePwdStatus()"
v-if="!isShowPwd"
class="img_r"
src="@/assets/img/reset/eye01.png"
alt=""
/>
<img
@click="changePwdStatus()"
v-if="isShowPwd"
class="img_r"
src="@/assets/img/reset/eye01.png"
alt=""
/> -->
</el-form-item>
<el-form-item prop="rq_password">
<img class="img_l" src="@/assets/img/reset/password.png" alt="" />
<el-input
v-model="resetForm.rq_password"
placeholder="请再次输入新的登录密码"
maxlength="20"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item style="margin: 40px 0 0 0"></el-form-item>
<el-form-item>
<el-button @click="submitForm()"> 重置密码</el-button>
</el-form-item>
<div class="box">
<div class="fr" @click="toLogin()">已有账号？马上登录</div>
</div>
</el-form>
</div>
</div>
</div>
</template>
<script>
/* eslint-disable */
// 请求接口
import { passwordEmailCode } from "r/index/register";
import { changePassCode } from "r/index/login";
import { mobileCheck } from "@/common/utils.js";
import { intervalTime } from "store/time";
import validator from "common/validator";
export default {
name: "index-reset",
data() {
const pwdCheck = async (rule, value, callback) => {
if (value !== this.resetForm.password) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
// 手机验证短信
showCode: true,
count: "",
timer: null,
codeTime: "", //手机验证码倒计时时间
isShowPwd: true, // 控制密码显示隐藏
resetForm: {
phone: "",
email: "",
code: "",
password: "",
rq_password: "",
},
// 表单验证规则对象
resetRules: {
// 对手机号进行校验
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
validator: function (rule, value, callback) {
if (mobileCheck(value) === false) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
},
trigger: "blur",
},
],
// 对邮箱验证
email: [
{ required: true, message: "请输入邮箱", trigger: "blur" },
{
validator: validator.validateEmail,
trigger: "blur",
},
],
// 对验证码进行校验
code: [
{ required: true, message: "请输入验证码", trigger: "blur" },
{ min: 6, max: 20, message: "请输入正确的验证码", trigger: "blur" },
],
// 对密码进行校验
password: [
{
required: true,
message: "请输入密码",
transform: (value) => value,
trigger: "blur",
},
{
type: "string",
message: "请输入不包含空格的字符",
trigger: "blur",
transform(value) {
if (value && value.indexOf(" ") === -1) {
return value;
} else {
return false;
}
},
},
{
trigger: "blur",
validator: (rule, value, callback) => {
var passwordreg = /^[a-zA-Z0-9]{6,12}$/;
// /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/;
if (!passwordreg.test(value)) {
callback(new Error("请输入6-12位，包含数字/字母,"));
} else {
callback();
}
},
},
],
// 对密码进行校验
rq_password: [
{ required: true, message: "请输入确认密码", trigger: "blur" },
{
validator: pwdCheck,
trigger: "blur",
},
],
},
};
},
created() {
const code = this.$store.state.indexIdentity;
const endTime = window.localStorage.getItem("restet_code_time" + code);
const phone = window.localStorage.getItem("restet_code_phone" + code);
if (endTime && Number(endTime) > new Date().getTime()) {
this.resetForm.phone = phone;
this.intervalHandle(new Date(), Number(endTime));
}
},
methods: {
// 去注册
toLogin() {
let code = this.$store.state.indexIdentity;
this.$router.push("/login?code=" + code);
},
// 改变密码显示状态
changePwdStatus() {
this.isShowPwd = !this.isShowPwd;
},
// 定时器倒计时
intervalHandle(startTime, endTime) {
// 时间差
const timeLag = intervalTime(startTime, endTime);
console.log(timeLag);
if (!this.timer) {
this.count = timeLag - 1;
this.showCode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= timeLag) {
this.count--;
} else {
this.showCode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
// 获取手机验证短信
getCode() {
if (!this.resetForm.email) {
return this.$message.error("请输入邮箱");
}
// if (!this.codeTime) {
// return this.$message.error("您已经获取验证码，请去邮箱中进行查看");
// }
// 接口获得验证码
passwordEmailCode({
phone: this.resetForm.phone,
email: this.resetForm.email,
}).then((res) => {
console.log(res, "passwordCode");
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.$message.success(res.data.message);
this.codeTime = res.data.data.now * 1000;
// console.log(this.codeTime)
let code = this.$store.state.indexIdentity;
window.localStorage.setItem(
"restet_code_time" + code,
res.data.data.now * 1000
);
this.intervalHandle(new Date(), res.data.data.now * 1000);
});
},
// 表单验证
submitForm() {
this.$refs["resetFormRef"].validate((valid) => {
if (!valid) return;
changePassCode({
phone: this.resetForm.phone,
email: this.resetForm.email,
code: this.resetForm.code,
password: this.resetForm.password,
rq_password: this.resetForm.rq_password,
}).then((res) => {
console.log(res);
if (res.data.code != 200) {
return this.$message.error(res.data.message);
}
this.$message.success(res.data.message);
// token存储
let code = this.$store.state.indexIdentity;
// window.localStorage.setItem("index-token" + code, res.token);
window.localStorage.setItem(
"restet_code_phone" + code,
this.resetForm.phone
);
this.$router.push("/login?code=" + code);
});
});
},
},
};
</script>
<style scoped lang="scss">
// 注册输入
.container {
background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px;
padding: 40px 60px;
margin-top: 0;
overflow: hidden;
.title {
margin: 19px 0 6px 0;
width: 132px;
height: 20px;
font-size: 22px;
font-weight: 500;
color: var(--color);
line-height: 20px;
}
.line {
width: 83px;
height: 3px;
background: var(--color);
border-radius: 2px;
}
::v-deep .el-form {
margin-top: 60px;
.el-form-item {
position: relative;
margin-bottom: 30px;
&:last-child {
margin: 0;
}
.el-form-item__content {
position: relative;
.phoneCode {
position: absolute;
z-index: 999;
top: 50%;
right: 25px;
transform: translate(0, -50%);
cursor: pointer;
.code {
font-size: 14px;
font-weight: 600;
color: var(--color);
}
}
img.img_l {
position: absolute;
left: 25px;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
img.img_r {
position: absolute;
right: 15px;
top: 50%;
transform: translate(0, -50%);
z-index: 1000;
}
.el-input__inner {
height: 50px;
line-height: 50px;
padding: 0 10px 0 50px;
border-radius: 0;
color: #4d4d4d;
border: 0;
border-bottom: 2px solid #d9d9d9;
&:focus {
border-bottom-color: var(--color);
}
}
.el-form-item__error {
color: #e0823d;
}
.el-button {
width: 100%;
height: 60px;
background: var(--color);
border-radius: 4px;
opacity: 0.8;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 16px;
padding: 0;
margin: 30px 0 0 0;
}
}
}
.box {
height: 18px;
display: block;
.fr {
// float: left;
text-align: center;
height: 18px;
line-height: 18px;
color: #999999;
margin-top: -10px;
cursor: pointer;
&:hover {
color: var(--color);
text-decoration: underline;
}
}
}
}
}
@media screen and (max-width: 1601px) {
.container {
right: 18%;
}
}
@media screen and (max-width: 1501px) {
.container {
right: 16%;
}
}
@media screen and (max-width: 1401px) {
.container {
right: 14%;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment