xiaowen
/
LittleBeePlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

平台

Browse Source
master
bibi 3 years ago
parent dfca7c9ee2
commit ae4b8fa2b5
14 changed files with 858 additions and 250 deletions
Show Stats Download Patch File Download Diff File

2
.env.development
Unescape View File

@ -1,3 +1,3 @@
NODE_ENV = 'development' NODE_ENV = 'development'
VUE_APP_URL = 'http://121.41.26.2251:8002/admin' VUE_APP_URL = 'http://121.41.26.2251:8002/admin'
VUE_APP_CDN = 'http://121.41.26.2251:8002/admin' VUE_APP_STATIC = 'http://121.41.26.2251:8002/admin'

4
.env.production
Unescape View File

@ -1,3 +1,3 @@
NODE_ENV = 'production' NODE_ENV = 'production'
VUE_APP_URL = 'http://121.41.26.2251:8002/admin' VUE_APP_URL = 'https://saas.kaidalai.cn/api/admin/'
VUE_APP_CDN = 'http://121.41.26.2251:8002/admin' VUE_APP_STATIC = 'https://saas.kaidalai.cn/api/admin/'

20
src/mixins/index.js
Unescape View File

@ -9,14 +9,14 @@
import { mapGetters, mapActions } from "vuex"; import { mapGetters, mapActions } from "vuex";
export default { export default {
install(Vue) { install(Vue) {
Vue.mixin({ Vue.mixin({
computed: { computed: {
...mapGetters(['getSelectedKeys', 'getOpenKeys']) ...mapGetters(['getToken','getCommunityCode','getSelectedKeys', 'getOpenKeys'])
}, },
methods: { methods: {
...mapActions(['setSelectedKeys', 'setOpenKeys']) ...mapActions(['setToken','setCommunityCode','setSelectedKeys', 'setOpenKeys'])
} }
}) })
} }
} }

23
src/permission.js
Unescape View File

@ -1,22 +1,23 @@
/*
* @Author: your name
* @Date: 2021-11-18 17:34:50
* @LastEditTime: 2021-11-18 17:37:15
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /ansu-business/src/permission.js
*/
import NProgress from "nprogress" import NProgress from "nprogress"
import "nprogress/nprogress.css" import "nprogress/nprogress.css"
import router from "@/router" import router from "@/router"
import store from '@/store'
const whitePath = [ '/login']
// 判断登录
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start() NProgress.start()
next(); const token = store.getters.getToken;
if(!token && !whitePath.includes(to.path)) {
next('/login');
} else {
next();
NProgress.done()
}
}) })
router.afterEach(() => { router.afterEach(() => {
NProgress.done() NProgress.done()
}) })
export default router export default router

124
src/request/index.js
Unescape View File

@ -1,3 +1,11 @@
/*
* @Author: your name
* @Date: 2021-10-13 09:28:02
* @LastEditTime: 2022-01-05 13:44:32
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/request/index.js
*/
import axios from 'axios'; import axios from 'axios';
// import qs from 'qs'; // import qs from 'qs';
import router from "@/permission" import router from "@/permission"
@ -5,76 +13,80 @@ import { message} from 'ant-design-vue'
import store from '@/store' import store from '@/store'
// import baseURL from "@/utils/baseURL" // import baseURL from "@/utils/baseURL"
function filterRequestData(obj) { function filterRequestData(obj) {
let o = {}; let o = {};
for(let key in obj) { for(let key in obj) {
let b1 = obj[key] === 0; let b1 = obj[key] === 0;
let b2 = obj[key] === false; let b2 = obj[key] === false;
if(obj[key] || b1 || b2) { if(obj[key] || b1 || b2) {
o[key] = obj[key] o[key] = obj[key]
} }
} }
return o; return o;
} }
//创建axios的实例 //创建axios的实例
const httpService = axios.create({ const httpService = axios.create({
baseURL: process.env.VUE_APP_URL + '/1',// TODO:具体的配置可以根据项目情况而来 baseURL: process.env.VUE_APP_URL,// TODO:具体的配置可以根据项目情况而来
timeout: 5000 timeout: 5000
}) })
// + communityCode
//axios的拦截--request //axios的拦截--request
httpService.interceptors.request.use(config => { httpService.interceptors.request.use(config => {
const rqParams = filterRequestData(config.params); const rqParams = filterRequestData(config.params);
const rqData = filterRequestData(config.data); const rqData = filterRequestData(config.data);
// post 'Content-Type' === 'application/x-www-form-urlencoded' // post 'Content-Type' === 'application/x-www-form-urlencoded'
config.headers['Content-Type'] = "application/json"; config.headers['Content-Type'] = "application/json";
config.headers['manage-login-token'] = store.getters.getToken; config.headers['manage-login-token'] = store.getters.getToken;
config.headers['device-type'] = "web"; // config.headers['device-type'] = "web";
if(config.method === 'post') { if(config.method === 'post') {
config.data = rqData; config.data = rqData;
} else { } else {
config.data = rqData; config.data = rqData;
config.params = rqParams; config.params = rqParams;
} }
return config; return config;
},err => { },err => {
Promise.reject(err);// 请求错误处理 Promise.reject(err);// 请求错误处理
}) })
//4、axios的拦截--response //4、axios的拦截--response
httpService.interceptors.response.use(response => { httpService.interceptors.response.use(response => {
// TODO:具体的code对应的处理可继续添加修改 // TODO:具体的code对应的处理可继续添加修改
let data = null; // let data = null;
let msg = ''; let msg = '';
let res = response.data; let res = response.data;
if(res.code == 0){ // console.log(response);
data = res.data; if(res.code === 200){
msg = res.msg || ""; // code = 200;
return {data, msg}; // data = res.data;
} else if(res.code == 100000) { // msg = res.msg || "";
router.replace({ // console.log(msg);
path: '/login' // console.log(data);
}); return res;
} else { } else if(res.code == 10010) {
msg = res.msg || ""; router.replace({
message.error(msg); path: '/login'
return Promise.reject(new Error(msg)) });
} } else {
msg = res.msg || "";
message.error(msg);
return Promise.reject(new Error(msg))
}
},err => { },err => {
console.log(err) console.log(err)
// TODO:具体的code对应的处理可继续添加修改 // TODO:具体的code对应的处理可继续添加修改
if(err.response.code === 301){ if(err.response.code === 301){
//登录过期跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 ---主页(index) 或者 退出到登录前的浏览的页面 //登录过期跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 ---主页(index) 或者 退出到登录前的浏览的页面
//这样登录页面登录接口成功之后可以进行跳转 主页(index) 或者 退出到登录前的页面： let path = this.$route.query.redirect || '/index.js'; this.$router.push(path); //这样登录页面登录接口成功之后可以进行跳转 主页(index) 或者 退出到登录前的页面： let path = this.$route.query.redirect || '/index.js'; this.$router.push(path);
setTimeout(() => { setTimeout(() => {
router.replace({ router.replace({
path: '/login', path: '/login',
query: { query: {
redirect: router.currentRoute.fullPath redirect: router.currentRoute.fullPath
} }
}); });
}, 1000); }, 1000);
} }
return Promise.reject(err); return Promise.reject(err);
}) })
export default httpService export default httpService

18
src/store/actions.js
Unescape View File

@ -7,12 +7,18 @@
* @FilePath: /ansu-business/src/store/actions.js * @FilePath: /ansu-business/src/store/actions.js
*/ */
const actions = { const actions = {
setSelectedKeys: ({commit}, log) => { setToken: ({commit}, log) => {
commit('setSelectedKeys', log) commit('setToken', log)
}, },
setOpenKeys: ({commit}, log) => { setCommunityCode: ({commit}, log) => {
commit('setOpenKeys', log) commit('setCommunityCode', log)
}, },
setSelectedKeys: ({commit}, log) => {
commit('setSelectedKeys', log)
},
setOpenKeys: ({commit}, log) => {
commit('setOpenKeys', log)
},
} }
export default actions export default actions

18
src/store/getters.js
Unescape View File

@ -7,12 +7,18 @@
* @FilePath: /ansu-business/src/store/getters.js * @FilePath: /ansu-business/src/store/getters.js
*/ */
const getters = { const getters = {
getSelectedKeys(state) { getSelectedKeys(state) {
return state.selectedKeys return state.selectedKeys
}, },
getOpenKeys(state) { getOpenKeys(state) {
return state.openKeys return state.openKeys
} },
getToken(state) {
return state.token
},
getCommunityCode(state) {
return state.communityCode
},
} }
export default getters export default getters

28
src/store/mutations.js
Unescape View File

@ -7,16 +7,24 @@
* @FilePath: /ansu-business/src/store/mutations.js * @FilePath: /ansu-business/src/store/mutations.js
*/ */
const mutations = { const mutations = {
setSelectedKeys: (state, log) => { setSelectedKeys: (state, log) => {
state.selectedKeys = log; state.selectedKeys = log;
let str = JSON.stringify(log); let str = JSON.stringify(log);
sessionStorage.setItem('selectedKeys', str); sessionStorage.setItem('selectedKeys', str);
}, },
setOpenKeys: (state, log) => { setOpenKeys: (state, log) => {
state.openKeys = log; state.openKeys = log;
let str = JSON.stringify(log); let str = JSON.stringify(log);
sessionStorage.setItem('openKeys', str); sessionStorage.setItem('openKeys', str);
}, },
setToken: (state, log) => {
state.token = log;
sessionStorage.setItem('token', log);
},
setCommunityCode: (state, log) => {
state.communityCode = log;
sessionStorage.setItem('communityCode', log);
},
} }
export default mutations export default mutations

6
src/store/state.js
Unescape View File

@ -7,7 +7,9 @@
* @FilePath: /ansu-business/src/store/state.js * @FilePath: /ansu-business/src/store/state.js
*/ */
const state = { const state = {
selectedKeys: JSON.parse(sessionStorage.getItem('selectedKeys')) || ['/'], selectedKeys: JSON.parse(sessionStorage.getItem('selectedKeys')) || ['/'],
openKeys: JSON.parse(sessionStorage.getItem('openKeys')) || [] openKeys: JSON.parse(sessionStorage.getItem('openKeys')) || [],
token: sessionStorage.getItem('token') || "",
communityCode: sessionStorage.getItem('communityCode') || "",
} }
export default state export default state

2
src/styles/index.less
Unescape View File

@ -27,7 +27,7 @@
} }
.search-box { .search-box {
margin: 30px; margin: 20px;
} }
.add-btn{ .add-btn{

69
src/views/Basic/home/depend/config.js
Unescape View File

@ -0,0 +1,69 @@
/**
* 配置
* 表格列
*/
export const columns = [
{
title: "真实名称",
dataIndex: "actualName",
width: "12%",
},
{
title: "手机号",
dataIndex: "tel",
width: "14%",
},
{
title: "所属部门",
dataIndex: "departmentName",
width: "16%",
},
{
title: "岗位",
dataIndex: "positionName",
width: "10%",
},
{
title: "状态",
dataIndex: "status",
width: "16%",
customRender: function (status) {
switch (status) {
case 1:
return '正常'
case 2:
return '停用'
default:
break;
}
}
},
{
title: "备注",
dataIndex: "remake",
width: "300",
},
{
title: "操作",
dataIndex: "action",
key: "action",
width: "180",
fixed: "right",
scopedSlots: { customRender: "action" },
},
]
// 搜索项
export const searchForm = {
keyword: "",
departmentId: null,
positionId: null,
}
// 分页
export const pagination = {
current: 1,
total: 0,
pageSize: 10,
showTotal: (total) => `共 ${total} 条`,
showSizeChanger: true,
showQuickJumper: true,
}

427
src/views/Basic/home/depend/form.vue
Unescape View File

@ -0,0 +1,427 @@
<template>
<div>
<a-form-model
title="1d2"
layout="vertical"
ref="ruleForm"
:model="form"
:rules="rules"
:wrapper-col="{ span: 18 }"
>
<div>基本信息</div>
<a-divider></a-divider>
<a-row>
<a-col :span="12">
<a-form-model-item label="真实姓名" prop="actualName">
<a-input v-model="form.actualName" placeholder="请输入真实姓名" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="性别" prop="sex">
<a-select v-model="form.sex" placeholder="请选择性别">
<a-select-option v-for="item in sexOption" :key="item.id">{{
item.name
}}</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="身份证号" prop="idCard">
<a-input v-model="form.idCard" placeholder="请输入身份证号" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item ref="tel" label="手机号" prop="tel">
<a-input
v-model="form.tel"
placeholder="请输入手机号"
@blur="
() => {
$refs.tel.onFieldBlur();
}
"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="出生日期" prop="birthday">
<a-date-picker v-model="form.birthday" value-format="YYYY-MM-DD HH:mm:ss"/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="密码" prop="password">
<a-input
type="password"
placeholder="不输入默认为手机号后6位"
v-model="form.password"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="电子邮箱" prop="email">
<a-input placeholder="请输入电子邮箱" v-model="form.email" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="居住地址" prop="address">
<a-input placeholder="请输入居住地址" v-model="form.address" />
</a-form-model-item>
</a-col>
身份证照片
<a-upload
:action="`${$upload}`"
:headers="uploadHeaders"
list-type="picture-card"
:file-list="idcardfileList"
@preview="handlePreview"
@change="idcardhandleChange"
>
<div v-if="idcardfileList.length < 2">
<!-- <a-icon type="plus" /> -->
<a-icon :type="imgLoading ? 'loading' : 'plus'" />
<div class="ant-upload-text">点击上传</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>
<span style="color: #00000073"
>单张最多不超过4M，最多上传2张，支持JPG,PNG格式</span
>
</a-row>
<div>入职信息</div>
<a-divider></a-divider>
<a-row>
<a-col :span="12">
<a-form-model-item label="岗位" prop='departmentIdPath'>
<a-cascader
:field-names="{
label: 'name',
value: 'id',
children: 'childList',
}"
:options="treeData"
placeholder="请选择"
change-on-select
@change="onChange"
v-model="cascVal"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="入职时间" prop="entryDate">
<a-date-picker
placeholder="请选择入职时间"
v-model="form.entryDate"
value-format="YYYY-MM-DD HH:mm:ss"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="薪资" prop="salary">
<a-input placeholder="请输入薪资" v-model="form.salary" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<div>上传资料</div>
<a-upload
:action="`${$baseUrl}/user/upload/uploadManageUserData`"
:headers="uploadHeaders"
list-type="picture"
:default-file-list="fileList"
>
<a-button> <a-icon type="upload"/> 点击上传 </a-button>
</a-upload>
<span style="color: #00000073">支持上传PNG，JPG,PDF文件</span>
</a-col>
</a-row>
<div style="margin-top: 20px">联系信息</div>
<a-divider></a-divider>
<a-row>
<a-col :span="12">
<a-form-model-item label="紧急联系人" prop="emergencyContact">
<a-input
placeholder="请输入紧急联系人"
v-model="form.emergencyContact"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="紧急联系电话" prop="emergencyContactNumber">
<a-input
placeholder="请输入紧急联系电话"
v-model="form.emergencyContactNumber"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item
label="紧急联系地址"
prop="emergencyContactAddress"
>
<a-input
placeholder="请输入紧急联系地址"
v-model="form.emergencyContactAddress"
/>
</a-form-model-item>
</a-col>
</a-row>
<div>其他信息</div>
<a-divider></a-divider>
<a-row>
<a-col :span="12">
<a-form-model-item label="婚姻状态" prop="maritalStatus">
<a-select
placeholder="请选择婚姻状态"
v-model="form.maritalStatus"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="民族" prop="nation">
<a-select placeholder="请输入民族" v-model="form.nation" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="政治面貌" prop="politicalOutlook">
<a-select
placeholder="请选择政治面貌"
v-model="form.politicalOutlook"
/>
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="户口类型" prop="accountType">
<a-select placeholder="请选择类型" v-model="form.accountType" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="备注" prop="remake">
<a-textarea
v-model="form.remake"
placeholder="请输入备注"
></a-textarea>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</div>
</template>
<script>
import { insertManageUser,departmentList,manageUserInfo,EditManageUser } from "@/api/basic/department";
import store from "@/store";
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}
export default {
name: "Vueform",
props: {
type: {
type: String,
default:'add'
},
editId:Number,
},
watch: {
editId: {
handler(val) {
if(val === null){
return
}
this.form.id =val;
manageUserInfo({id:this.form.id}).then(res=>{
let data = res.data
this.form.actualName = data.actualName
this.form.sex = data.sex
this.form.idCard = data.idCard
this.form.tel = data.tel
this.telephoneNum = data.tel
this.form.birthday = data.birthday
this.form.password = data.password
this.form.email = data.email
this.form.address = data.address
this.form.entryDate = data.entryDate
this.form.salary = data.salary
this.form.emergencyContact = data.emergencyContact
this.form.emergencyContactNumber = data.emergencyContactNumber
this.form.emergencyContactAddress = data.emergencyContactAddress
this.form.maritalStatus = data.maritalStatus
this.form.nation = data.nation
this.form.politicalOutlook = data.politicalOutlook
this.form.accountType = data.accountType
this.form.remake = data.remake
// 岗位
this.cascVal = []
let path = data.departmentIdPath.split(':')
path.pop()
path.splice(0,1)
path.push(data.positionId)
path.forEach(element => {
this.cascVal.push(Number(element))
});
// 图片
this.form.idCardImgUrls = data.idCardImgUrls || []
})
},
immediate: true,
},
},
data() {
return {
previewVisible: false,
previewImage: "",
imgLoading: false,
treeData:[],
cascVal:[],
telephoneNum:"",
uploadHeaders: {
"manage-login-token": store.getters.getToken,
},
sexOption: [
{
id: 1,
name: "男",
},
{
id: 2,
name: "女",
},
{
id: 3,
name: "保密",
},
],
form: {
id:null,
actualName: "",
sex: null,
idCard: "",
tel: "",
birthday: "",
password: "",
email: "",
address: "",
idCardImgUrls: [],
departmentId: "",
departmentIdPath: "",
positionId: "",
entryDate: "",
salary: "",
dataImgUrls: "",
emergencyContact: "",
emergencyContactNumber: "",
emergencyContactAddress: "",
maritalStatus: "",
nation: "",
politicalOutlook: "",
accountType: "",
remake: "",
},
rules: {
actualName: [
{ required: true, message: "请输入真实姓名", trigger: "blur" },
],
sex: [{ required: true, message: "请选择性别", trigger: "change" }],
idCard: [
{ required: true, message: "请输入身份证号", trigger: "blur" },
],
tel: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{ min: 11, max: 11, message: "手机号只能为11位", trigger: "blur" },
],
entryDate: [
{ required: true, message: "请选择入职时间", trigger: "change" },
],
},
idcardfileList: [],
fileList:[]
};
},
created() {
this.getData()
},
methods: {
getData(){
departmentList().then((res) => {
this.treeData = res.data;
});
},
// 提交
submit() {
this.$refs.ruleForm.validate((valid) => {
if (!valid) {
return;
}
if (this.type === "add") {
insertManageUser(this.form).then((res) => {
if(res.code===200){
this.$message.success(res.msg)
this.success()
this.close()
}
});
} else {
if(this.form.tel === this.telephoneNum){
this.form.tel = null
}
console.log(this.form);
EditManageUser(this.form).then((res) => {
if(res.code===200){
this.$message.success(res.msg)
this.success()
this.close()
}
});
}
});
},
// 关闭新增员工
close() {
this.$refs.ruleForm.resetFields();
this.cascVal = []
},
success(){
this.$emit('success')
},
async handlePreview(file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.previewImage = file.url || file.preview;
this.previewVisible = true;
},
onChange(data) {
// data [1,2,2]
// yyyy-mm-dd hh:mm:ss
let _data = JSON.parse(JSON.stringify(data))
this.form.positionId = _data.pop() //2
this.form.departmentId = _data[_data.length-1] //[1,2]==>2
let str = ''
// 1:2:
for (let i = 0; i < _data.length; i++) {
str += _data[i]+':'
}
// 0:1:2:
this.form.departmentIdPath = '0:'+ str
},
handleCancel() {
this.previewVisible = false;
},
idcardhandleChange(info) {
this.idcardfileList = info.fileList
if(info.file.status === 'done'){
this.form.idCardImgUrls.push(info.file.response.data)
}
},
},
};
</script>
<style lang="less" scoped>
</style>

22
src/views/Layout/index.vue
Unescape View File

@ -40,13 +40,25 @@ export default {
components: { components: {
yMenu, yMenu,
}, },
mounted(){
this.$router.push({ name: sessionStorage.getItem('routerName') });
// this.tagActive = Number(sessionStorage.getItem('index'))
},
watch: { watch: {
$route: { $route: {
handler(val) { handler(val) {
this.tags = val.matched; this.tags = val.matched;
}, sessionStorage.setItem('routerName',val.name)
immediate: true, },
}, immediate: true,
},
tagActive:{
handler(val) {
// console.log(val);
sessionStorage.setItem('modal',this.menuTags[val].value)
},
immediate: true,
}
}, },
data() { data() {
return { return {

345
src/views/Login/index.vue
Unescape View File

@ -1,16 +1,8 @@
<!--
* @Author: your name
* @Date: 2021-11-22 16:20:34
* @LastEditTime: 2021-11-22 16:20:34
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /ansu-business/src/views/Login/index.vue
-->
<template> <template>
<div class="bg"> <div class="bg">
<div class="logo-box"> <div class="logo-box">
<img src="@/assets/images/logo.png" alt="" /> <img src="@/assets/images/logo.png" alt="" />
<span class="title">智慧小区平台</span> <span class="title">智慧小区后台管理系统</span>
</div> </div>
<div class="login-box"> <div class="login-box">
<a-row> <a-row>
@ -19,42 +11,84 @@
</a-col> --> </a-col> -->
<!-- <a-col :span="1" class="box-cen"></a-col> --> <!-- <a-col :span="1" class="box-cen"></a-col> -->
<!-- 登录 --> <!-- 登录 -->
<a-col class="box-b" v-if="status === 1"> <a-col class="box-b" v-if="status === 1">
<a-tabs v-model="activeName" @change="tabsSwitch"> <a-tabs v-model="activeName" @change="tabsSwitch">
<a-tab-pane key="1" tab="密码登录"> <!-- <a-tab-pane key="1" tab="密码登录">
</a-tab-pane> </a-tab-pane> -->
<a-tab-pane key="2" tab="验证码登录"> <a-tab-pane key="2" tab="验证码登录"> </a-tab-pane>
</a-tab-pane> </a-tabs>
</a-tabs> <div class="login-input" v-if="activeName === '1'">
<div class="login-input"> <a-input placeholder="请输入手机号码"></a-input>
<a-input placeholder="请输入手机号码"></a-input> <a-input type="password" placeholder="请输入密码"></a-input>
<a-input type="password" placeholder="请输入密码"></a-input> <a-row>
<a-row> <a-col :span="12" style="margin-left: 23px"
<a-col :span="12" style="margin-left:23px"><a-checkbox></a-checkbox>&nbsp;&nbsp;三天之内免登陆</a-col> ><a-checkbox></a-checkbox>&nbsp;&nbsp;三天之内免登陆</a-col
</a-row> >
<a-button type="primary" style="width:90%;margin:30px"> </a-row>
登录 <a-button
</a-button> type="primary"
<a-row style="margin-top:20px;margin-left:23px"> @click="login"
<a-col :span="14"> style="width: 90%; margin: 30px"
<a-checkbox></a-checkbox>&nbsp;&nbsp;我已同意用户协议 >
</a-col> 登录
<a-col :span="10"> </a-button>
<span class="logintext" @click="status=3">忘记密码</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="logintext" @click="status=2">免费注册</span> <a-row style="margin-top: 20px; margin-left: 23px">
</a-col> <a-col :span="14">
</a-row> <a-checkbox></a-checkbox>&nbsp;&nbsp;我已同意用户协议
</div> </a-col>
<a-col :span="10">
<span class="logintext" @click="status = 3">忘记密码</span
>&nbsp;&nbsp;&nbsp;&nbsp;<span
class="logintext"
@click="status = 2"
>免费注册</span
>
</a-col>
</a-row>
</div>
<div class="login-input" v-else-if="activeName === '2'">
<a-input placeholder="请输入手机号码" v-model="form.tel"></a-input>
<a-input
placeholder="请输入验证码"
v-model="form.code"
style="width: 60%"
></a-input>
<a-button type="primary" @click="getCode">获取验证码</a-button>
<a-row>
<a-col :span="12" style="margin-left: 23px"
><a-checkbox></a-checkbox>&nbsp;&nbsp;三天之内免登陆</a-col
>
</a-row>
<a-button
type="primary"
@click="login"
style="width: 90%; margin: 30px"
>
登录
</a-button>
<a-row style="margin-top: 20px; margin-left: 23px">
<a-col :span="14">
<a-checkbox></a-checkbox>&nbsp;&nbsp;我已同意用户协议
</a-col>
<a-col :span="10">
<span class="logintext" @click="status = 3">忘记密码</span
>&nbsp;&nbsp;&nbsp;&nbsp;<span
class="logintext"
@click="status = 2"
>免费注册</span
>
</a-col>
</a-row>
</div>
</a-col> </a-col>
<!-- 注册 --> <!-- 注册 -->
<a-col class="box-b" v-if="status === 2"> <a-col class="box-b" v-if="status === 2">
<div class="cardTitle">新建账号</div> <div class="cardTitle">新建账号</div>
<a-form-model <a-form-model
ref="ruleForm" ref="ruleForm"
:model="form" :model="form"
:rules="rules" :rules="rules"
:label-col="inline"
layout="vertical" layout="vertical"
:wrapper-col="wrapperCol"
> >
<a-form-model-item ref="tel" label="手机号码" prop="tel"> <a-form-model-item ref="tel" label="手机号码" prop="tel">
<a-input <a-input
@ -70,7 +104,7 @@
<a-row style="margin-top: 20px"> <a-row style="margin-top: 20px">
<a-col :span="16" style="margin-right: 10px"> <a-col :span="16" style="margin-right: 10px">
<a-input <a-input
style="width:100%" style="width: 100%"
v-model="form.verificationCode" v-model="form.verificationCode"
placeholder="请输入验证码" placeholder="请输入验证码"
/> />
@ -83,31 +117,28 @@
</a-row> </a-row>
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="设置密码" prop="psw"> <a-form-model-item label="设置密码" prop="psw">
<a-input placeholder="请输入密码"/> <a-input placeholder="请输入密码" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="确认密码" prop="confirmPsw"> <a-form-model-item label="确认密码" prop="confirmPsw">
<a-input placeholder="请再次输入密码"/> <a-input placeholder="请再次输入密码" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-button type="primary" style="width:100%"> <a-button type="primary" style="width: 100%"> 确定 </a-button>
确定
</a-button>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<span>已有账号？</span><span class="logintext" @click="status=1">登录</span> <span>已有账号？</span
><span class="logintext" @click="status = 1">登录</span>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</a-col> </a-col>
<!-- 找回密码 --> <!-- 找回密码 -->
<a-col class="box-b" v-if="status === 3"> <a-col class="box-b" v-if="status === 3">
<div class="cardTitle">找回密码</div> <div class="cardTitle">找回密码</div>
<a-form-model <a-form-model
ref="ruleForm" ref="ruleForm"
:model="form" :model="form"
:rules="rules" :rules="rules"
:label-col="inline"
layout="vertical" layout="vertical"
:wrapper-col="wrapperCol"
> >
<a-form-model-item ref="tel" label="手机号码" prop="tel"> <a-form-model-item ref="tel" label="手机号码" prop="tel">
<a-input <a-input
@ -123,7 +154,7 @@
<a-row style="margin-top: 20px"> <a-row style="margin-top: 20px">
<a-col :span="16" style="margin-right: 10px"> <a-col :span="16" style="margin-right: 10px">
<a-input <a-input
style="width:100%" style="width: 100%"
v-model="form.verificationCode" v-model="form.verificationCode"
placeholder="请输入验证码" placeholder="请输入验证码"
/> />
@ -136,18 +167,17 @@
</a-row> </a-row>
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="设置密码" prop="psw"> <a-form-model-item label="设置密码" prop="psw">
<a-input placeholder="请输入密码"/> <a-input placeholder="请输入密码" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="确认密码" prop="confirmPsw"> <a-form-model-item label="确认密码" prop="confirmPsw">
<a-input placeholder="请再次输入密码"/> <a-input placeholder="请再次输入密码" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<a-button type="primary" style="width:100%"> <a-button type="primary" style="width: 100%"> 确定 </a-button>
确定
</a-button>
</a-form-model-item> </a-form-model-item>
<a-form-model-item> <a-form-model-item>
<span>已有账号？</span><span class="logintext" @click="status=1">登录</span> <span>已有账号？</span
><span class="logintext" @click="status = 1">登录</span>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</a-col> </a-col>
@ -157,77 +187,108 @@
</template> </template>
<script> <script>
// import { loginTel, sendTelCode } from "../../api/public/login";
export default { export default {
name: "Login", name: "Login",
data() { data() {
return { return {
status: 1, status: 1,
activeName:'1', activeName: "2",
form:{ form: {
tel:'' tel: "",
}, code: "",
rules: { },
tel: [ rules: {
{ tel: [
required: true, {
message: "请输入手机号", required: true,
trigger: "blur", message: "请输入手机号",
}, trigger: "blur",
{ },
min: 11, {
max: 11, min: 11,
message: "姓名长度必须为 11 位", max: 11,
trigger: "blur", message: "姓名长度必须为 11 位",
}, trigger: "blur",
], },
name: [ ],
{ name: [
required: true, {
message: "请输入姓名", required: true,
trigger: "blur", message: "请输入姓名",
}, trigger: "blur",
{ },
min: 3, {
max: 5, min: 3,
message: "姓名长度必须为 3 至 5位", max: 5,
trigger: "blur", message: "姓名长度必须为 3 至 5位",
}, trigger: "blur",
], },
}, ],
}; },
}, };
methods: { },
login() { created() {
this.$router.push({ name: "Console" }); this.keyupEnter();
}, this.setCommunityCode(123456);
// 获取验证码 },
getCode(){}, methods: {
onSubmit() { // 绑定enter事件
this.$refs.ruleForm.validate((valid) => { keyupEnter() {
if (valid) { document.onkeydown = (e) => {
alert("submit!"); if (e.keyCode === 13 && e.target.baseURI.match(/loginTel/)) {
} else { //回车后执行搜索方法
console.log("error submit!!"); this.login();
return false; }
} };
}); },
}, // login() {
// 重置 // loginTel(this.form).then(res=>{
resetForm() { // if (res.code === 200) {
this.$refs.ruleForm.resetFields(); // this.$message.success(res.msg);
}, // // 存储token
tabsSwitch(){ // this.setToken(res.data);
console.log(this.activeName); // this.$router.push("/");
} // } else {
}, // this.$message.error(res.msg);
// }
// })
// },
// 获取验证码
// getCode() {
// sendTelCode(this.form).then((res) => {
// if (res) {
// // this.$message.success("取消成功");
// this.$message.success(res.msg +' ' +res.data);
// }
// });
// },
onSubmit() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
// 重置
resetForm() {
this.$refs.ruleForm.resetFields();
},
tabsSwitch() {
console.log(this.activeName);
},
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.bg{ .bg {
background-image: url(../../assets/images/loginBg.png); background-image: url(../../assets/images/loginBg.png);
height: 100vh; height: 100vh;
background-size:cover; background-size: cover;
} }
.logo-box { .logo-box {
text-align: left; text-align: left;
@ -243,8 +304,12 @@ export default {
margin-left: 42px; margin-left: 42px;
margin-bottom: 13px; margin-bottom: 13px;
} }
.title{ .title {
font-size:28px;color:#333333;font-weight:500;margin-left: 20px;line-height: 93px; font-size: 28px;
color: #333333;
font-weight: 500;
margin-left: 20px;
line-height: 93px;
} }
} }
.login-box { .login-box {
@ -264,31 +329,31 @@ export default {
.box-b { .box-b {
height: 500px; height: 500px;
text-align: left; text-align: left;
padding:30px; padding: 30px;
} }
.cardTitle{ .cardTitle {
margin-left: -10px; margin-left: -10px;
font-size: 18px; font-size: 18px;
color: #000000; color: #000000;
font-weight: 500; font-weight: 500;
margin-bottom: 40px; margin-bottom: 40px;
} }
.logintext{ .logintext {
color: #205FBD; color: #205fbd;
cursor: pointer; cursor: pointer;
} }
/deep/.ant-form-item{ /deep/.ant-form-item {
margin-top:-10px; margin-top: -10px;
} }
.login-input{ .login-input {
text-align: left; text-align: left;
margin-top: 20px; margin-top: 20px;
/deep/.ant-input{ /deep/.ant-input {
border: 0px; border: 0px;
border-bottom: 1px solid #f4eded; border-bottom: 1px solid #f4eded;
border-radius:0 ; border-radius: 0;
width: 90%; width: 90%;
margin: 25px; margin: 25px;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save