Browse Source

增加登录注册

version2.0
chutingting 4 years ago
parent
commit
5704c45c69
9 changed files with 651 additions and 20 deletions
  1. +10
    -5
      src/App.vue
  2. +2
    -2
      src/api/request.js
  3. BIN
      src/assets/img/login.png
  4. +38
    -13
      src/components/headTail/head.vue
  5. +24
    -0
      src/page/home/home.vue
  6. +133
    -0
      src/page/login/login.vue
  7. +247
    -0
      src/page/publish/publish.vue
  8. +173
    -0
      src/page/register/register.vue
  9. +24
    -0
      src/router/index.js

+ 10
- 5
src/App.vue View File

@@ -1,8 +1,8 @@
<template>
<div>
<myhead />
<myhead v-if="routeFLag" />
<router-view></router-view>
<div ref="drawer" class="drawer" @mouseenter="enter" @mouseleave="out">
<div v-if="routeFLag" ref="drawer" class="drawer" @mouseenter="enter" @mouseleave="out">
<div class="goTop" @click="goTop">
<div class="img">
<img src="./assets/img/xf/goTop.png" />
@@ -35,7 +35,7 @@
<img src="./assets/img/qrCode/home.png" alt="">
</div>
</div>
<tail />
<tail v-if="routeFLag" />
</div>
</template>

@@ -48,14 +48,19 @@ export default {
myhead,
},
watch: {
/* $route(to, from) {
this.routeFLag = to.path !== '/login'
} */
},
data() {
return {
rQCodeShow:false,
routeFLag: true
}
},
methods: {
enter() {
console.log(1);
this.rQCodeShow = true
const drawer = this.$refs.drawer;
drawer.style.right = 0;
@@ -68,7 +73,7 @@ export default {
goTop(){
window.scroll(0, 0) //滚动条返回顶部
}
},
}
};
</script>



+ 2
- 2
src/api/request.js View File

@@ -3,8 +3,8 @@ import { Message } from "element-ui"


const service = axios.create({
baseURL: '/C/',
//baseURL: 'https://www.yjyculture.com/C/',
// baseURL: '/C/',
baseURL: 'https://www.yjyculture.com/C/',
timeout: 60000 // 请求超时时间
})



BIN
src/assets/img/login.png View File

Before After
Width: 97  |  Height: 92  |  Size: 12 KiB

+ 38
- 13
src/components/headTail/head.vue View File

@@ -1,18 +1,16 @@
<template>
<div class="bgBox">
<img src="../../assets/img/bg/bg.jpg" class="topImg" alt="">
<!-- <div class="Box">
<div class="backImg">
<div class="logoBox">
<div class="logo_img">
<img src="../../assets/img/logo/logo1.png" alt />
</div>
<div class="title_Box">
<p>瑜璟缘国际文化礼仪培训</p>
</div>
</div>
</div> -->
<div class="topBar">
<div class="topBar_ct">
<p class="left">欢迎来到 武汉壹玖之家网络科技有限公司 !</p>
<p class="right">
<span @click="goRouter('/publish')">发布信息</span>
<span @click="goRouter('/login')">登录</span>
<span @click="goRouter('/register')">注册</span>
</p>
</div>
</div>
<img src="../../assets/img/bg/bg.jpg" class="topImg" alt="">
<div class="nav">
<el-dropdown>
<span class="title" @click="goRouter('/home')">
@@ -106,6 +104,33 @@ export default {
//background-attachment: fixed;
background-repeat: repeat-x;
background-size: 100% 160px; */
.topBar{
line-height: 40px;
height: 40px;
background: #409EFF;
color: #fff;
.topBar_ct{
width: 1200px;
margin: 0 auto;
.left{
float: left;
}
.right{
float: right;
span{
padding: 0 15px;
cursor: pointer;
}
span:nth-of-type(2){
border-right: 1px solid #ccc;
}
span:hover{
font-weight: bold;
}
}
}
}
.topImg{
width: 100%;
}


+ 24
- 0
src/page/home/home.vue View File

@@ -15,6 +15,14 @@
</div>
<div class="advisoryBox">
<div class="left">
<a href="" class="left_list">
<span>生活服务</span>
<span class="des">Life service</span>
</a>
<a href="" class="left_list">
<span>生活服务</span>
<span class="des">Life service</span>
</a>
<a
href="http://wpa.qq.com/msgrd?v=3&uin=30397378&site=qq&menu=yes"
target="view_window"
@@ -187,6 +195,22 @@ export default {
float: left;
width: 26%;
border-top: 1px rgb(238, 238, 238) solid;
.left_list{
width: 230px;
height: 48px;
display: block;
background: rgba(75,161,107,0.9);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
margin: 10px auto 0;
span{
display: block;
line-height: 16px;
}
}
.iconBox {
overflow: hidden;
margin: 10px 0;


+ 133
- 0
src/page/login/login.vue View File

@@ -0,0 +1,133 @@
<template>
<div class="login">
<div class="top_div"></div>
<div class="login_ct">
<div class="topImg"></div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" class="demo-ruleForm">
<el-form-item prop="userName">
<el-input v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-row>
<el-col :span="16">
<el-input v-model="ruleForm.code" placeholder="输入验证码"></el-input>
</el-col>
<el-col :span="8">
<div class="code">1</div>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div class="login_btn">
<el-link size="small" type="primary">返回首页</el-link>
<div class="right">
<el-link size="small" type="info">忘记密码</el-link>
<el-link size="small" type="info" @click="register">注册</el-link>
<el-button size="small" type="primary" @click="login('ruleForm')">登录</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
userName: '',
password: '',
code: ''
},
rules: {
userName: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' }
]
}
};
},
methods: {
login(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message.error('账号密码错误!');
} else {
console.log('error submit!!');
return false;
}
});
},
register() {
this.$router.push('/register');
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped lang="scss">
.login {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
.top_div{
height: 50%;
width: 100%;
background: #008ead;
}
.login_ct{
width: 400px;
margin: -100px auto 0;
background: #fff;
padding: 40px 0 0;
border: 1px solid #e7e7e7;
position: relative;
.topImg{
width: 92px;
height: 97px;
background: url('../../assets/img/login.png');
position: absolute;
top: -85px;
margin-left: 152.5px;
}
.el-form{
padding: 0 40px;
.code{
width: 90%;
float: right;
height: 30px;
vertical-align: middle;
border-radius: 5px;
border: 1px solid #d3d3d3;
background: #F2FBFE;
text-align: center;
line-height: 30px;
font-weight: bold;
}
}
.login_btn {
height: 50px;
margin-top: 40px;
border-top: 1px solid #e7e7e7;
line-height: 50px;
padding: 0 40px;
.right{
float: right;
margin: 0 10px;
}
}
}
}
</style>

+ 247
- 0
src/page/publish/publish.vue View File

@@ -0,0 +1,247 @@
<template>
<div class="login">
<div class="top_div"></div>
<div class="login_ct">
<el-alert
title="严禁发布低价欺诈以及图片虚假的信息诱导买家,价格严重偏离正常水平的及图片虚假的信息将被删除"
type="warning"
show-icon
:closable="false">
</el-alert>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="small">
<p>基础信息</p>
<el-form-item label="标题" prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入标题"></el-input>
</el-form-item>
<el-form-item label="类别" prop="category">
<el-select v-model="ruleForm.category" placeholder="请选择活动区域">
<el-option v-for="(item, index) in categoryList" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="上传图片" prop="fileList">
<el-upload
class="upload-demo"
ref="upload"
action="#"
:show-file-list="true"
:on-change="fileChange"
:file-list="ruleForm.fileList"
:on-remove="fileRemove"
accept="image/*"
:auto-upload="false"
>
<el-button type="primary">请选择图片</el-button>
</el-upload>
</el-form-item>
<el-form-item label="信息详情" prop="detail">
<el-input type="textarea" v-model="ruleForm.detail" placeholder="请输入信息详情介绍"></el-input>
</el-form-item>
<p>联系方式</p>
<el-form-item label="联系电话" prop="phone">
<el-input v-model="ruleForm.phone" placeholder="请输入联系电话"></el-input>
</el-form-item>
<el-form-item label="联系人" prop="contact">
<el-input v-model="ruleForm.contact" placeholder="请输入联系人"></el-input>
</el-form-item>
<el-form-item label="QQ">
<el-input v-model="ruleForm.qq" placeholder="请输入QQ"></el-input>
</el-form-item>
<el-form-item label="E-mail">
<el-input v-model="ruleForm.email" placeholder="请输入E-mail"></el-input>
</el-form-item>
</el-form>
<div class="login_btn">
<el-button class="right" size="small" type="primary" @click="login('ruleForm')">发布信息</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
var checkIdCard = (rule, value, cb) => {
if (value.length > 0) {
return cb();
}
cb(new Error("请选择图片"));
};
return {
ruleForm: {
name: '',
category: 1,
detail: '',
phone: '',
contact: '',
qq: '',
email: '',
imageUrl: '',
fileList: [],
},
rules: {
name: [
{ required: true, message: '请输入标题', trigger: 'blur' }
],
category: [
{ required: true, message: '请选择类别', trigger: 'change' }
],
detail: [
{ required: true, message: '请输入信息详情', trigger: 'blur' }
],
phone: [
{ required: true, message: '请输入联系人电话', trigger: 'blur' }
],
contact: [
{ required: true, message: '请输入联系人', trigger: 'blur' }
],
fileList: [
{ required: true, message: "请选择图片", trigger: ['blur', 'change'] },
{ validator: checkIdCard, trigger: ['blur', 'change'] }
]
},
categoryList: [
{
label: '生活服务',
value: 1
},
{
label: '同城活动',
value: 2
},
{
label: '商务服务',
value: 3
},
{
label: '宠物市场',
value: 4
},
{
label: '行业市场',
value: 5
},
{
label: '教育培训',
value: 6
},
{
label: '跳蚤市场',
value: 7
},
{
label: '车辆相关',
value: 8
},
{
label: '房产出售',
value: 9
},
{
label: '餐饮美食',
value: 10
},
{
label: '票务卡券',
value: 11
},
{
label: '宠物市场',
value: 12
}
]
};
},
methods: {
login(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message({
message: '人工审核中',
type: 'success'
});
} else {
console.log('error submit!!');
return false;
}
});
},
goPage(path) {
if(path) {
this.$router.push(path);
}
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
/* 只保留最后一次上传的文件 */
fileChange (file, fileList) {
if (fileList.length > 0) {
this.ruleForm.fileList = [fileList[fileList.length - 1]]
}
},
fileRemove(file) {
this.ruleForm.fileList = []
}
}
}
</script>
<style scoped lang="scss">
.login {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
.top_div{
height: 50%;
width: 100%;
background: #008ead;
}
.login_ct{
width: 600px;
margin: -100px auto 0;
background: #fff;
padding: 40px 0 0;
border: 1px solid #e7e7e7;
position: relative;
.el-form{
padding: 0 40px;
.code{
width: 90%;
float: right;
height: 30px;
vertical-align: middle;
border-radius: 5px;
border: 1px solid #d3d3d3;
background: #F2FBFE;
text-align: center;
line-height: 30px;
font-weight: bold;
}
.login_text{
font-size: 12px;
line-height: 20px;
display: inline-block;
a{
color: #409EFF;
font-size: 12px;
cursor: pointer;
}
}
}
.login_btn {
height: 50px;
margin-top: 40px;
border-top: 1px solid #e7e7e7;
line-height: 50px;
padding: 10px 40px 0;
.right{
float: right;
button{
margin: 0 10px;
}
}
}
}
}
</style>

+ 173
- 0
src/page/register/register.vue View File

@@ -0,0 +1,173 @@
<template>
<div class="login">
<div class="top_div"></div>
<div class="login_ct">
<div class="topImg"></div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" class="demo-ruleForm">
<el-form-item prop="userName">
<el-input v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item prop="password2">
<el-input v-model="ruleForm.password2" type="password" placeholder="确认密码"></el-input>
</el-form-item>
<el-form-item prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item prop="cardId">
<el-input v-model="ruleForm.cardId" placeholder="请输入身份证号"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-row>
<el-col :span="16">
<el-input v-model="ruleForm.code" placeholder="输入验证码"></el-input>
</el-col>
<el-col :span="8">
<div class="code">1</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-checkbox v-model="checked"></el-checkbox>
<div class="login_text">
我接受 <a>《武汉壹玖之家网络科技有限公司用户注册协议》</a>及 <a>《武汉壹玖之家网络科技有限公司隐私政策》</a>
</div>
</el-form-item>
</el-form>
<div class="login_btn">
<el-link size="small" type="text" @click="goPage('/home')">返回首页</el-link>
<div class="right">
<el-link size="small" type="info" @click="register">登录</el-link>
<el-button size="small" type="primary" @click="login('ruleForm')">注册</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
userName: '',
password: '',
password2: '',
name: '',
cardId: '',
code: ''
},
rules: {
userName: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
password2: [
{ required: true, message: '请确认密码', trigger: 'blur' }
],
name: [
{ required: true, message: '请输入真实姓名', trigger: 'blur' }
],
cardId: [
{ required: true, message: '请输入身份证号', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' }
]
}
};
},
methods: {
login(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$message('人工审核中');
} else {
console.log('error submit!!');
return false;
}
});
},
goPage(path) {
if(path) {
this.$router.push(path);
}
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
}
}
</script>
<style scoped lang="scss">
.login {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
.top_div{
height: 50%;
width: 100%;
background: #008ead;
}
.login_ct{
width: 400px;
margin: -100px auto 0;
background: #fff;
padding: 40px 0 0;
border: 1px solid #e7e7e7;
position: relative;
.topImg{
width: 92px;
height: 97px;
background: url('../../assets/img/login.png');
position: absolute;
top: -85px;
margin-left: 152.5px;
}
.el-form{
padding: 0 40px;
.code{
width: 90%;
float: right;
height: 30px;
vertical-align: middle;
border-radius: 5px;
border: 1px solid #d3d3d3;
background: #F2FBFE;
text-align: center;
line-height: 30px;
font-weight: bold;
}
.login_text{
font-size: 12px;
line-height: 20px;
display: inline-block;
a{
color: #409EFF;
font-size: 12px;
cursor: pointer;
}
}
}
.login_btn {
height: 50px;
margin-top: 40px;
border-top: 1px solid #e7e7e7;
line-height: 50px;
padding: 0 40px;
.right{
float: right;
button{
margin: 0 10px;
}
}
}
}
}
</style>

+ 24
- 0
src/router/index.js View File

@@ -12,6 +12,30 @@ const routes = [
},
component: r => require.ensure([], () => r(require('@/page/home/home.vue')), 'pointzujinListEdit')
},
//登录
{
path: '/login',
meta:{
title:"登录"
},
component: r => require.ensure([], () => r(require('@/page/login/login.vue')), 'login')
},
//注册
{
path: '/register',
meta:{
title:"注册"
},
component: r => require.ensure([], () => r(require('@/page/register/register.vue')), 'register')
},
//注册
{
path: '/publish',
meta:{
title:"注册"
},
component: r => require.ensure([], () => r(require('@/page/publish/publish.vue')), 'publish')
},
//公司简介
{
path: '/companySynopsis',


Loading…
Cancel
Save