基础功能静态页面,登录接口,拦截器更改

main
bibi 3 years ago
parent 74de427762
commit e98c23261a

@ -1,3 +1,3 @@
NODE_ENV = 'development' NODE_ENV = 'development'
VUE_APP_URL = 'http://121.41.26.225:8004' VUE_APP_URL = 'http://121.41.26.225:8004/'
VUE_APP_CDN = 'http://121.41.26.225:8004' VUE_APP_CDN = 'http://121.41.26.225:8004/'

@ -1,3 +1,3 @@
NODE_ENV = 'production' NODE_ENV = 'production'
VUE_APP_URL = 'http://121.41.26.225:8004' VUE_APP_URL = 'http://121.41.26.225:8004/'
VUE_APP_CDN = 'http://121.41.26.225:8004' VUE_APP_CDN = 'http://121.41.26.225:8004/'

@ -0,0 +1,10 @@
import httpService from "@/request"
// 获取预报列表
export function functionName(params) {
return httpService({
url: `url`,
method: 'post',
data: params,
})
}

@ -3,7 +3,7 @@ import httpService from "@/request"
// 发送验证码 // 发送验证码
export function sendTelCode(params) { export function sendTelCode(params) {
return httpService({ return httpService({
url: `/manage/sendTelCode`, url: `/sendTelCode`,
method: 'post', method: 'post',
data: params, data: params,
}) })
@ -11,8 +11,9 @@ export function sendTelCode(params) {
// 登录 // 登录
export function loginTel(params) { export function loginTel(params) {
return httpService({ return httpService({
url: `/manage/loginTelCode`, url: `/loginTelCode`,
method: 'post', method: 'post',
data: params, data: params,
}) })
} }
// 退出登录

@ -12,10 +12,10 @@ export default {
install(Vue) { install(Vue) {
Vue.mixin({ Vue.mixin({
computed: { computed: {
...mapGetters(['getSelectedKeys', 'getOpenKeys']) ...mapGetters(['getToken','getSelectedKeys', 'getOpenKeys','getLoginStep'])
}, },
methods: { methods: {
...mapActions(['setSelectedKeys', 'setOpenKeys']) ...mapActions(['setToken','setSelectedKeys', 'setOpenKeys','setLoginStep'])
} }
}) })
} }

@ -1,18 +1,18 @@
/*
* @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();
}
}) })
router.afterEach(() => { router.afterEach(() => {

@ -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"
@ -17,10 +25,10 @@ function filterRequestData(obj) {
} }
//创建axios的实例 //创建axios的实例
const httpService = axios.create({ const httpService = axios.create({
baseURL: process.env.VUE_APP_URL + '/1',// TODO:具体的配置可以根据项目情况而来 baseURL: process.env.VUE_APP_URL+'123456/manage',// 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);
@ -28,7 +36,7 @@ httpService.interceptors.request.use(config => {
// 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 {
@ -43,14 +51,18 @@ httpService.interceptors.request.use(config => {
//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 || "";
// console.log(msg);
// console.log(data);
return res;
} else if(res.code == '超时') {
router.replace({ router.replace({
path: '/login' path: '/login'
}); });

@ -7,6 +7,9 @@
* @FilePath: /ansu-business/src/store/actions.js * @FilePath: /ansu-business/src/store/actions.js
*/ */
const actions = { const actions = {
setToken: ({commit}, log) => {
commit('setToken', log)
},
setSelectedKeys: ({commit}, log) => { setSelectedKeys: ({commit}, log) => {
commit('setSelectedKeys', log) commit('setSelectedKeys', log)
}, },

@ -12,7 +12,10 @@ const getters = {
}, },
getOpenKeys(state) { getOpenKeys(state) {
return state.openKeys return state.openKeys
} },
getToken(state) {
return state.token
},
} }
export default getters export default getters

@ -17,6 +17,10 @@ const mutations = {
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);
},
} }
export default mutations export default mutations

@ -8,6 +8,7 @@
*/ */
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') || ""
} }
export default state export default state

@ -0,0 +1,71 @@
<template>
<div>
<a-drawer
title="抽屉"
:width="720"
:visible="isVisibleDrawe"
:body-style="{ paddingBottom: '80px' }"
@close="onClose"
>
<div class="drawer-content">
<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="identity">
<a-select
v-model="form.identity"
placeholder="请选择申请人身份"
/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
</div>
<div class="drawer-footer">
<a-button :style="{ marginRight: '8px' }" @click="onClose">
关闭
</a-button>
<a-button type="primary" @click="onClose"> </a-button>
</div>
</a-drawer>
</div>
</template>
<script>
export default {
name: "addWork",
data() {
return {
isVisibleDrawe: false,
};
},
props: {
visible: Boolean,
form:Object,
rules:Object
},
methods: {
onClose() {
this.$emit("onClose");
},
},
watch: {
visible: {
handler(newValue) {
this.isVisibleDrawe = newValue;
},
immediate: true,
},
},
};
</script>
<style lang="less" scoped>
</style>

@ -41,7 +41,7 @@
</a-space> </a-space>
</a-col> </a-col>
<a-col :span="4"> <a-col :span="4">
<a-button class='add-btn'>添加工单</a-button> <a-button class='add-btn' @click="show=true"></a-button>
</a-col> </a-col>
</a-row> </a-row>
</div> </div>
@ -116,13 +116,23 @@
</span> </span>
</a-table> </a-table>
</div> </div>
<add-work :visible='show' :form="form" @onClose="onClose" :rules="rules"></add-work>
</div> </div>
</template> </template>
<script> <script>
import addWork from "../WorkOrder/addWorkOrder.vue"
export default { export default {
components:{
addWork
},
data() { data() {
return { return {
form:{
identity:null
},
rules:{},
show: false,
activeName:'0', activeName:'0',
pagination: { pagination: {
current: 1, current: 1,
@ -145,7 +155,7 @@ export default {
// //
columns: [ columns: [
{ {
title: "申请人身份", title: "工单状态",
key: "tags", key: "tags",
width: "14%", width: "14%",
dataIndex: "status", dataIndex: "status",
@ -186,7 +196,7 @@ export default {
}, },
], ],
// //
tableData: [ tableData: [{},
], ],
ActionsList: [ ActionsList: [
{ {
@ -209,6 +219,9 @@ export default {
this.searchForm.status = e.target.value this.searchForm.status = e.target.value
this.getData() this.getData()
}, },
onClose(){
this.show = false;
},
// //
put(){ put(){

@ -74,14 +74,14 @@ export default {
label: "智慧商城", label: "智慧商城",
value: "smartMall" value: "smartMall"
}, },
{ // {
label: "运营管理", // label: "",
value: "operation" // value: "operation"
}, // },
{ // {
label: "设置", // label: "",
value: "setting" // value: "setting"
} // }
], ],
}; };
}, },
@ -109,7 +109,7 @@ export default {
} }
#components-layout-demo-custom-trigger .logo { #components-layout-demo-custom-trigger .logo {
height: 42px; height: 62px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -122,7 +122,7 @@ export default {
.s1 { .s1 {
display: block; display: block;
color: #d6d6d6; color: #d6d6d6;
font-size: 16px; font-size: 18px;
margin-left: 10px; margin-left: 10px;
font-weight: 500; font-weight: 500;
} }
@ -148,7 +148,7 @@ export default {
.s1 { .s1 {
border-bottom: 2px solid #5679b1; border-bottom: 2px solid #5679b1;
} }
} }
} }
.h-d2 { .h-d2 {

@ -11,53 +11,78 @@
</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" v-if="activeName==='1'"> <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" @click='login' 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>
<div class="login-input" v-else-if="activeName==='2'"> <a-col :span="10">
<a-input placeholder="请输入手机号码"></a-input> <span class="logintext" @click="status = 3">忘记密码</span
<a-input type="password" placeholder="请输入验证码" style="width:60%"></a-input> >&nbsp;&nbsp;&nbsp;&nbsp;<span
<a-button type="primary" @click='getCode'>获取验证码</a-button> class="logintext"
<a-row> @click="status = 2"
<a-col :span="12" style="margin-left:23px"><a-checkbox></a-checkbox>&nbsp;&nbsp;</a-col> >免费注册</span
</a-row> >
<a-button type="primary" @click='login' style="width:90%;margin:30px"> </a-col>
登录 </a-row>
</a-button> </div>
<a-row style="margin-top:20px;margin-left:23px"> <div class="login-input" v-else-if="activeName === '2'">
<a-col :span="14"> <a-input placeholder="请输入手机号码" v-model="form.tel"></a-input>
<a-checkbox></a-checkbox>&nbsp;&nbsp; <a-input
</a-col> placeholder="请输入验证码"
<a-col :span="10"> v-model="form.code"
<span class="logintext" @click="status=3"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="logintext" @click="status=2"></span> style="width: 60%"
</a-col> ></a-input>
</a-row> <a-button type="primary" @click="getCode"></a-button>
</div> <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"
@ -79,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="请输入验证码"
/> />
@ -92,23 +117,22 @@
</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"
@ -130,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="请输入验证码"
/> />
@ -143,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>
@ -164,15 +187,16 @@
</template> </template>
<script> <script>
import { loginTel,sendTelCode } from "../../api/login" import { loginTel, sendTelCode } from "../../api/public/login";
export default { export default {
name: "Login", name: "Login",
data() { data() {
return { return {
status: 1, status: 1,
activeName:'2', activeName: "2",
form:{ form: {
tel:'' tel: "",
code: "",
}, },
rules: { rules: {
tel: [ tel: [
@ -204,21 +228,38 @@ export default {
}, },
}; };
}, },
created() {
this.keyupEnter();
},
methods: { methods: {
async login() { // enter
let res = await loginTel({ keyupEnter() {
tel:'11', document.onkeydown = (e) => {
code:'111111' if (e.keyCode === 13 && e.target.baseURI.match(/loginTel/)) {
//
this.login();
}
};
},
login() {
loginTel(this.form).then(res=>{
if (res.code === 200) {
this.$message.success(res.msg);
this.setToken(res.data);
this.$router.push("/");
} else {
this.$message.error(res.msg);
}
}) })
console.log(res);
}, },
// //
getCode(){ getCode() {
sendTelCode(this.form).then(res=>{ sendTelCode(this.form).then((res) => {
if(res){ if (res) {
this.$message.success(res.msg) // this.$message.success("");
this.$message.success(res.msg +' ' +res.data);
} }
}) });
}, },
onSubmit() { onSubmit() {
this.$refs.ruleForm.validate((valid) => { this.$refs.ruleForm.validate((valid) => {
@ -234,18 +275,18 @@ export default {
resetForm() { resetForm() {
this.$refs.ruleForm.resetFields(); this.$refs.ruleForm.resetFields();
}, },
tabsSwitch(){ tabsSwitch() {
console.log(this.activeName); 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;
@ -261,8 +302,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 {
@ -282,31 +327,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>

@ -9,7 +9,9 @@
module.exports = { module.exports = {
// ... // ...
runtimeCompiler: true, runtimeCompiler: true,
devServer: {
port: "8443",
},
// ... // ...
}; };
Loading…
Cancel
Save