Skip to content

李伟超（前端） / guoguo_kuaidi

Go to a project
Commit eada8a3e by leic
Options

主题修改功能添加

1 parent 03b5f939
Expand all
Inline Side-by-side
Showing with 481 additions and 139 deletions
config/index.js
......@@ -14,9 +14,10 @@ module.exports = {
// 代理列表, 是否开启代理通过[./dev.env.js]配置
proxyTable: devEnv.OPEN_PROXY === false ? {} : {
'/proxyApi': {
// target: 'http://192.168.0.119:8182/sqx_fast/',
target: 'https://admin.sj088.cn/sqx_fast/',
target: 'http://1.12.76.77:8181/sqx_fast/',
// target: 'https://admin.sj088.cn/sqx_fast/',
changeOrigin: true,
logLevel: 'debug',
pathRewrite: {
'^/proxyApi': ''
}
......
gulpfile.js
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
var merge = require('merge-stream');
var $ = require('gulp-load-plugins')();
var path = require('path');
var del = require('del');
......@@ -64,3 +67,20 @@ gulp.task('default', ['clean'], function () {
del([`${distPath}/static`, `${versionPath}/static/config`])
})
});
// 名为themeTask的任务
gulp.task('themetask', function () {
//主题1
var theme_0BB2D4 = gulp.src(path.resolve('./src/element-ui-theme/element-#0BB2D4/index.css')) // 需要添加类名的css文件，支持正则表达式
.pipe(cssWrap({ selector: '.theme_0BB2D4' })) // 添加的类名
.pipe(cleanCSS())
.pipe(gulp.dest('./src/assets/theme/theme_0BB2D4'));// 生成的css文件存放的目录
//主题2
var theme_3E8EF7 = gulp.src(path.resolve('./src/element-ui-theme/element-#3E8EF7/index.css')) // 需要添加类名的css文件，支持正则表达式
.pipe(cssWrap({ selector: '.theme_3E8EF7' })) // 添加的类名
.pipe(cleanCSS())
.pipe(gulp.dest('./src/assets/theme/theme_3E8EF7'));// 生成的css文件存放的目录
return merge(theme_0BB2D4, theme_3E8EF7);
})
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=miP4RMG1yZoROVRSqTPghvUaRb68iGUB"></script> -->
<title>裹裹快递上门取件寄快递系统</title>
<% if (process.env.NODE_ENV === 'production') { %>
<% if (process.env.NODE_ENV==='production' ) { %>
<!-- 生产环境 -->
<script>document.write('<script src="./config/index.js?t=' + new Date().getTime() + '"><\/script>');</script>
<link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico">
......@@ -32,8 +33,17 @@
<script src="https://map.qq.com/api/gljs?v=1.exp&key=SZWBZ-QDWC3-M233R-YDXW5-TZT7Q-S4FJ7"></script>
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<% } %>
<script type="text/javascript">
const isDev = true
const mainHost = isDev ? 'kuaidi.ledianyun.com' : document.domain.substring(document.domain.indexOf('.') + 1);
// const mainHost = location.hostname.substring(location.hostname.indexOf('.') + 1);
const configUrl = 'https://api.ledianyun.com/tool/config/detail?k=' + mainHost + '&appid=lestore&showWay=jsonp&type=lestore_webpc&env=dev';
document.write('<script src="' + configUrl + '"><\/script>');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
\ No newline at end of file
package.json
......@@ -21,7 +21,6 @@
"element-china-area-data": "^5.0.2",
"element-ui": "2.8.2",
"fs": "0.0.1-security",
"gulp": "3.9.1",
"gulp-concat": "2.6.1",
"gulp-load-plugins": "1.5.0",
"gulp-replace": "0.6.1",
......@@ -69,9 +68,13 @@
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "1.1.4",
"friendly-errors-webpack-plugin": "1.6.1",
"gulp": "^3.9.1",
"gulp-clean-css": "^4.3.0",
"gulp-css-wrap": "^0.1.2",
"html-webpack-plugin": "2.30.1",
"jest": "21.2.0",
"jest-serializer-vue": "0.3.0",
"merge-stream": "^2.0.0",
"nightwatch": "0.9.12",
"node-notifier": "5.1.2",
"node-sass": "^4.14.1",
......
src/App.vue
......@@ -5,6 +5,11 @@
</template>
<script>
export default {
import { initTheme } from './utils/theme';
export default {
mounted() {
initTheme()
}
}
</script>
src/assets/scss/_variables.scss
// 站点主色
// tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-[#17B3A3]/index.css']当前主题色一致
$--color-primary: #304156;
$--color-primary: #001529;
// Navbar
$navbar--background-color: $--color-primary;
// $navbar--background-color: $--color-primary;
$navbar--background-color: #001529;
// Sidebar
$sidebar--background-color-dark: #304156;
$sidebar--color-text-dark:#c1cbd9;
// $sidebar--background-color-dark: #304156;
$sidebar--background-color-dark: #001529;
// $sidebar--color-text-dark:#c1cbd9;
$sidebar--color-text-dark:hsla(0,0%,100%,.65);
// Content
$content--background-color: #f1f4f5;
// $content--background-color: #f1f4f5;
$content--background-color: #f0f2f5;
src/assets/theme/theme_0BB2D4/index.css 0 → 100644
This diff could not be displayed because it is too large.
src/assets/theme/theme_3E8EF7/index.css 0 → 100644
This diff could not be displayed because it is too large.
src/components/Setting/index.vue 0 → 100644
<template>
<div class="setting_container" @click="openSetting">
<span class="action-setting">
<svg viewBox="64 64 896 896" focusable="false" data-icon="setting" width="1em" height="1em" fill="currentColor"
aria-hidden="true">
<path
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z">
</path>
</svg>
</span>
</div>
</template>
<script>
export default {
data() {
isOpen: false
},
methods: {
openSetting() {
}
}
}
</script>
<style scoped lang="scss">
.setting_container {
position: fixed;
top: 240px;
right: 0;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: 16px;
text-align: center;
background-color: var(--primary-color);
border-radius: 4px 0 0 4px;
cursor: pointer;
pointer-events: auto;
.action-setting {
display: inline-block;
color: #fff;
font-style: normal;
font-size: 20px;
line-height: 0;
text-align: center;
text-transform: none;
vertical-align: -0.125em;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
</style>
\ No newline at end of file
src/components/TableEmpty/index.vue 0 → 100644
<template>
<div class="table_empty_container">
<div class="image">
<svg class="empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0 1)" fill="none" fill-rule="evenodd">
<ellipse class="empty-img-simple-ellipse" cx="32" cy="33" rx="32" ry="7"></ellipse>
<g class="empty-img-simple-g" fill-rule="nonzero">
<path
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z">
</path>
<path
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
class="empty-img-simple-path"></path>
</g>
</g>
</svg>
</div>
<div class="title">暂无数据</div>
</div>
</template>
<style scoped lang="scss">
.table_empty_container {
color: rgba(0, 0, 0, .25);
.image {
height: 40px;
margin-bottom: 8px;
.empty-img-simple {
height: 100%;
margin: auto;
.empty-img-simple-ellipse {
fill: #f5f5f5;
}
.empty-img-simple-g {
stroke: #d9d9d9;
.empty-img-simple-path {
fill: #fafafa;
}
}
}
}
}
</style>
\ No newline at end of file
src/element-ui-theme/index.js
......@@ -5,7 +5,7 @@
* 1. 此处只包含element-ui组件主题
* 2. 要达到整站主题修改效果, 请确保[import './element-[#17B3A3]/index.css']当前主题色与[/src/assets/scss/_variables.scss]文件中[$--color-primary]属性值一致
*/
import './element-#3E8EF7/index.css' // 当前主题色
// import './element-#3E8EF7/index.css' // 当前主题色
export default {
list: [
'#0BB2D4', // 青色
......
src/main.js
......@@ -5,8 +5,12 @@ import store from '@/store' // api: https://github.com/vuejs/v
import VueCookie from 'vue-cookie' // api: https://github.com/alfhen/vue-cookie
import '@/element-ui' // api: https://github.com/ElemeFE/element
import '@/icons' // api: http://www.iconfont.cn/
import '@/element-ui-theme'
// import '@/element-ui-theme'
// 引入主题样式
import '@/assets/theme/theme_0BB2D4/index.css'
import '@/assets/theme/theme_3E8EF7/index.css'
import '@/assets/scss/index.scss'
import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
import { isAuth } from '@/utils'
import cloneDeep from 'lodash/cloneDeep'
......@@ -16,6 +20,11 @@ import {VueJsonp} from 'vue-jsonp'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
// 全局注册表格empty组件
import TableEmpty from '@/components/TableEmpty/'
import { setCookie } from './utils/cookie'
Vue.component('TableEmpty', TableEmpty)
Vue.use(VueJsonp)
Vue.use(BaiduMap, {
......@@ -33,6 +42,7 @@ if (process.env.NODE_ENV !== 'production') {
// 挂载全局
Vue.prototype.$http = httpRequest // ajax请求方法
Vue.prototype.isAuth = isAuth // 权限方法
setCookie('token')
// 保存整站vuex本地储存初始状态
window.SITE_CONFIG['storeState'] = cloneDeep(store.state)
......
src/router/index.js
......@@ -9,6 +9,8 @@ import Router from 'vue-router'
import http from '@/utils/httpRequest'
import {isURL} from '@/utils/validate'
import {clearLoginInfo} from '@/utils'
import store from '../store'
import { getCookie } from '../utils/cookie'
Vue.use(Router)
......@@ -62,10 +64,11 @@ const mainRoutes = {
],
beforeEnter (to, from, next) {
let token = Vue.cookie.get('token')
let token = getCookie('token');
if (!token || !/\S/.test(token)) {
clearLoginInfo()
next({name: 'login'})
// next({name: 'login'})
// window.location.href = store.state.domainURL + 'shoplist';
}
next()
}
......@@ -79,12 +82,13 @@ const router = new Router({
})
router.beforeEach((to, from, next) => {
let userId = Vue.cookie.get('userId')
// let userId = Vue.cookie.get('userId')
let token = getCookie('token')
let menuList = sessionStorage.getItem("menuList");
// 添加动态(菜单)路由
// 1. 已经添加 or 全局路由, 直接访问
// 2. 获取菜单列表, 添加并保存本地存储
if(userId!='' && menuList &&( menuList=='[]' || menuList.length==0)){
if(token!='' && menuList &&( menuList=='[]' || menuList.length==0)){
http({
url: http.adornUrl('/sys/menu/nav'),
method: 'get',
......@@ -104,7 +108,8 @@ router.beforeEach((to, from, next) => {
}
}).catch((e) => {
console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
router.push({name: 'login'})
// router.push({name: 'login'})
// window.location.href = store.state.domainURL + 'shoplist';
})
}else if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to, globalRoutes) === 'global') {
next()
......@@ -127,7 +132,8 @@ router.beforeEach((to, from, next) => {
}
}).catch((e) => {
console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
router.push({name: 'login'})
// router.push({name: 'login'})
// window.location.href = store.state.domainURL + 'shoplist';
})
}
})
......
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import cloneDeep from 'lodash/cloneDeep'
import common from './modules/common'
import user from './modules/user'
import Vue from "vue";
import Vuex from "vuex";
import cloneDeep from "lodash/cloneDeep";
import common from "./modules/common";
import user from "./modules/user";
import { getMallRole } from "../utils/cookie";
Vue.use(Vuex)
Vue.use(Vuex);
const isDev = process.env.NODE_ENV === "development";
export default new Vuex.Store({
state: {
baseURL: !isDev
? "https://pc.kuaidi.ledianyun.com/"
: "https://pc.kuaidi.ledianyun.com/",
domainURL: !isDev
? "http://pc.kuaidi.ledianyun.com/"
: "http://pc.kuaidi.ledianyun.com/",
},
modules: {
common,
user
user,
},
mutations: {
// 重置vuex本地储存状态
resetStore (state) {
resetStore(state) {
Object.keys(state).forEach((key) => {
state[key] = cloneDeep(window.SITE_CONFIG['storeState'][key])
})
}
state[key] = cloneDeep(window.SITE_CONFIG["storeState"][key]);
});
},
},
strict: process.env.NODE_ENV !== 'production'
})
strict: process.env.NODE_ENV !== "production",
});
src/utils/cookie.js 0 → 100644
import Vue from "vue";
// let domain = process.env.NODE_ENV == 'development' ? '' : config.extraData.cookie.domain;
const cookie_pre = config.extraData.cookie.pre ? config.extraData.cookie.pre : 'kuaidi';
export function getMallRole() {
let role = ["master"];
let Roles = Vue.cookie.get(cookie_pre+"token");
if (Roles) {
return JSON.parse(Decrypt(Roles)).roles;
} else {
return role;
}
}
export function setCookie(cookie) {
if(cookie == 'token'){
Vue.cookie.set(cookie_pre+"token", 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImp0aSI6IiJ9.eyJpc3MiOiIiLCJhdWQiOiIiLCJqdGkiOiIiLCJpYXQiOjE2ODEyMDUwNzYsIm5iZiI6MTY4MTIwNTA3NiwiZXhwIjoxNjgxODA5ODc2LCJ0b2tlbiI6ImI0M2I3OWMzYTdlMTE5Y2ZmOTYyYmQwY2Y0MTk1YTRmIiwiYnRva2VuIjoiYjQzYjc5YzNhN2UxMTljZmY5NjJiZDBjZjQxOTVhNGYiLCJyb2xlIjoiYnVzaW5lc3MiLCJiaWQiOiIxIiwibmFtZSI6IjE4NzEwODQ3MzA4IiwicGhvbmUiOiIxODcxMDg0NzMwOCIsInNvdXJjZSI6InBjIiwiY2VtZXRlcnlfaWQiOiIiLCJpbmR1c3RyeV9pZCI6IjEiLCJpbmR1c3RyeV9hbGlhcyI6InN0b3JlIiwiaW5kdXN0cnlfbGV2ZWxfaWQiOiIyIiwiaW5kdXN0cnlfbGV2ZWxfYWxpYXMiOiJhZHZhbmNlZCIsInNob3BfaWQiOiIxIiwibXRva2VuIjoiOTIzZjI2OWY1N2ZkYmFlZThlMWEyMDdmOWYxZjJhOGQiLCJ0eXBlIjoiIiwidGhpcmRfYXBwaWQiOiIiLCJjdXJyZW50X2J0b2tlbiI6ImI0M2I3OWMzYTdlMTE5Y2ZmOTYyYmQwY2Y0MTk1YTRmIiwiYWNjb3VudF90eXBlIjoiMSIsImFjY291bnRfcm9sZXMiOlsibWFzdGVyIl0sInN3aXRjaF90aW1lIjoxNjgxMjA1NDk0fQ._D73SkAoataYGsDhKy_-0_tyobYsEM2EFkPVaAL5QAk')
}else{
Vue.cookie.set(cookie)
}
}
export function getCookie(cookie) {
if(cookie == 'token'){
return Vue.cookie.get(cookie_pre+"token")
}
return Vue.cookie.get(cookie)
}
export function removeCookie(cookie) {
if(cookie == 'token'){
Vue.cookie.delete(cookie_pre + "storeMallToken")
}else{
Vue.cookie.delete(cookie)
}
}
src/utils/httpRequest.js
......@@ -4,6 +4,8 @@ import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import { clearLoginInfo } from '@/utils'
import store from '../store'
import { getCookie } from './cookie'
const http = axios.create({
timeout: 1000 * 30,
......@@ -17,7 +19,7 @@ const http = axios.create({
* 请求拦截
*/
http.interceptors.request.use(config => {
config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
config.headers['token'] = getCookie('token') // 请求头带上token
return config
}, error => {
return Promise.reject(error)
......@@ -27,10 +29,19 @@ http.interceptors.request.use(config => {
* 响应拦截
*/
http.interceptors.response.use(response => {
if (response.data && response.data.code === 401) { // 401, token失效
sessionStorage.clear()
let authErrors = [10001, 10002, 10003, 10004, 401];
if (response.data && authErrors.indexOf(response.data.code) > -1) { // 401, token失效
Message({
message: response.data['message'] + ',请重新选择',
type: 'error',
duration: 1.5 * 1000,
onClose: () => {
clearLoginInfo()
router.push({ name: 'login' })
sessionStorage.clear()
// window.location.href = store.state.domainURL + 'shoplist';
}
})
// router.push({ name: 'login' })
}
return response
}, error => {
......@@ -43,9 +54,9 @@ http.interceptors.response.use(response => {
*/
http.adornUrl = (actionName) => {
// 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
// return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
// return 'http://192.168.0.119:8182/sqx_fast/' + actionName
return 'https://admin.sj088.cn/sqx_fast/' + actionName
return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
// return 'http://1.12.76.77:8181/sqx_fast' + actionName
// return 'https://admin.sj088.cn/sqx_fast/' + actionName
}
http.adornUrl2 = (actionName) => {
......
src/utils/index.js
import Vue from 'vue'
import router from '@/router'
import store from '@/store'
import { removeCookie } from './cookie';
/**
* 获取uuid
......@@ -52,7 +53,8 @@ export function treeDataTranslate (data, id = 'id', pid = 'parentId') {
* 清除登录信息
*/
export function clearLoginInfo () {
Vue.cookie.delete('token')
// Vue.cookie.delete('token')
removeCookie('token');
store.commit('resetStore')
router.options.isAddDynamicMenuRoutes = false
}
src/utils/secret.js 0 → 100644
const CryptoJS = require('crypto-js'); //引用AES源码js
const key = CryptoJS.enc.Utf8.parse("wTuQtvphrscRMoNY"); //十六位十六进制数作为秘钥
const iv = CryptoJS.enc.Utf8.parse('yku3fNnI2HJQWKd3'); //十六位十六进制数作为秘钥偏移量
//解密方法
export function Decrypt(word) {
let decrypted = CryptoJS.AES.decrypt(word, key, { iv: iv, mode: CryptoJS.mode.CBC , padding: CryptoJS.pad.Pkcs7 });
let decryptedStr = decrypted.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
}
//加密方法
export function Encrypt(word) {
let encrypted = CryptoJS.AES.encrypt(word, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
return encrypted.toString();
}
src/utils/theme.js 0 → 100644
import elTheme from "@/element-ui-theme/index.js";
export function changeTheme(themeName) {
console.log('----当前主题色----', themeName)
sessionStorage.setItem("theme", themeName);
let bodyEl = document.getElementsByTagName("body")[0];
bodyEl.className = "theme_" + themeName.split('#')[1]; //改成相应类名
bodyEl.style.setProperty("--primary-color", themeName);
}
export function initTheme() {
let theme = sessionStorage.getItem("theme");
if (theme) {
changeTheme(theme);
} else {
// 默认颜色
changeTheme(elTheme.list[1]);
}
}
src/views/campus/couponYhq.vue
<template>
<div>
<div style="display: inline-block;float: right;">
<div style="display: inline-block;width:100%;text-align: right;">
<el-button style='margin-left:15px;' :disabled="!isAuth('couponYhq:add')" size="mini" type="primary"
icon="document" @click="addCoupon">添加优惠券</el-button>
<el-button style='margin-left:15px;' size="mini" type="primary" icon="document" @click="refresh">刷新
......
src/views/main-content.vue
......@@ -67,12 +67,13 @@
set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
},
siteContentViewHeight () {
var height = this.documentClientHeight - 50 - 30 - 2
var height = this.documentClientHeight - 50 - 48 - 2
if (this.$route.meta.isTab) {
height -= 40
return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
// return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
}
return { minHeight: height + 'px' }
// return { minHeight: height + 'px' }
return { minHeight: 'auto' }
}
},
methods: {
......
src/views/main-navbar.vue
<template>
<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
<div class="site-navbar__header">
<h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
<a class="site-navbar__brand-lg" href="javascript:;">裹裹快递上门取件寄快递系统</a> <a class="site-navbar__brand-mini" href="javascript:;">
<h1 class="site-navbar__brand" @click="slideHeaderClick">
<!-- <a class="site-navbar__brand-mini"
href="javascript:;">
<img src="~@/assets/img/avatar.png" style="width: 25px;border-radius: 50%;">
</a> -->
<!-- <a class="site-navbar__brand-lg" href="javascript:;">裹裹快递上门取件寄快递系统</a> -->
<a class="site-navbar__brand-lg" href="javascript:;">
<img src="~@/assets/img/avatar.png" style="border-radius: 50%;">
<h1>裹裹快递系统</h1>
</a>
</h1>
</div>
<div class="site-navbar__body clearfix">
<el-menu
class="site-navbar__menu"
mode="horizontal">
<el-menu class="site-navbar__menu" mode="horizontal">
<el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
<icon-svg name="zhedie"></icon-svg>
</el-menu-item>
</el-menu>
<el-menu
class="site-navbar__menu site-navbar__menu--right"
mode="horizontal">
<!-- <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
<el-button @click="themeChange">切换主题</el-button>
<!-- <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
<!== <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
<template slot="title">
<el-badge value="new">
<icon-svg name="shezhi" class="el-icon-setting"></icon-svg>
</el-badge>
</template>
</el-menu-item> -->
</el-menu-item> ==>
<el-menu-item class="site-navbar__avatar" index="3">
<el-dropdown :show-timeout="0" placement="bottom">
<span class="el-dropdown-link">
<img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item> -->
<!== <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item> ==>
<el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu-item>
</el-menu>
</el-menu> -->
</div>
<!-- 弹窗, 修改密码 -->
<update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
......@@ -44,10 +48,12 @@
</template>
<script>
import UpdatePassword from './main-navbar-update-password'
import { clearLoginInfo } from '@/utils'
export default {
data () {
import UpdatePassword from './main-navbar-update-password'
import { clearLoginInfo } from '@/utils'
import {changeTheme} from '../utils/theme'
import { removeCookie } from '../utils/cookie'
export default {
data() {
return {
updatePassowrdVisible: false
}
......@@ -57,30 +63,38 @@
},
computed: {
navbarLayoutType: {
get () { return this.$store.state.common.navbarLayoutType }
get() { return this.$store.state.common.navbarLayoutType }
},
sidebarFold: {
get () { return this.$store.state.common.sidebarFold },
set (val) { this.$store.commit('common/updateSidebarFold', val) }
get() { return this.$store.state.common.sidebarFold },
set(val) { this.$store.commit('common/updateSidebarFold', val) }
},
mainTabs: {
get () { return this.$store.state.common.mainTabs },
set (val) { this.$store.commit('common/updateMainTabs', val) }
get() { return this.$store.state.common.mainTabs },
set(val) { this.$store.commit('common/updateMainTabs', val) }
},
userName: {
get () { return this.$store.state.user.name }
get() { return this.$store.state.user.name }
}
},
methods: {
themeChange() {
changeTheme('#0BB2D4')
},
// 菜单头部点击
slideHeaderClick() {
this.$store.commit('common/updateMenuActiveName', 'home')
this.$router.push({ name: 'home' })
},
// 修改密码
updatePasswordHandle () {
updatePasswordHandle() {
this.updatePassowrdVisible = true
this.$nextTick(() => {
this.$refs.updatePassowrd.init()
})
},
// 退出
logoutHandle () {
logoutHandle() {
this.$confirm(`确定进行[退出]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
......@@ -90,16 +104,16 @@
url: this.$http.adornUrl('/sys/logout'),
method: 'post',
data: this.$http.adornData()
}).then(({data}) => {
}).then(({ data }) => {
if (data && data.code === 0) {
sessionStorage.clear()
clearLoginInfo()
this.$cookie.set('token','')
this.$router.push({ name: 'login' })
// this.$router.push({ name: 'login' })
window.location.href = store.state.domainURL + 'shoplist';
}
})
}).catch(() => {})
}
}).catch(() => { })
}
}
}
</script>
src/views/main-sidebar-sub-menu.vue
<template>
<el-submenu
v-if="menu.list && menu.list.length >= 1"
:index="menu.menuId + ''"
<el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''"
:popper-class="'site-sidebar--' + sidebarLayoutSkin + '-popper'">
<template slot="title">
<icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
<span>{{ menu.name }}</span>
</template>
<sub-menu
v-for="item in menu.list"
:key="item.menuId"
:menu="item"
:dynamicMenuRoutes="dynamicMenuRoutes">
<sub-menu v-for="item in menu.list" :key="item.menuId" :menu="item" :dynamicMenuRoutes="dynamicMenuRoutes">
</sub-menu>
</el-submenu>
<el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
<el-menu-item v-else :index="menu.url + ''" @click="gotoRouteHandle(menu)">
<icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
<span>{{ menu.name }}</span>
</el-menu-item>
</template>
<script>
import SubMenu from './main-sidebar-sub-menu'
export default {
import SubMenu from './main-sidebar-sub-menu'
export default {
name: 'sub-menu',
props: {
menu: {
......@@ -39,17 +33,17 @@
},
computed: {
sidebarLayoutSkin: {
get () { return this.$store.state.common.sidebarLayoutSkin }
get() { return this.$store.state.common.sidebarLayoutSkin }
}
},
methods: {
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
gotoRouteHandle (menu) {
gotoRouteHandle(menu) {
var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
if (route.length >= 1) {
this.$router.push({ name: route[0].name })
}
},
}
}
}
}
</script>
src/views/main-sidebar.vue
<template>
<aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
<div class="site-sidebar__inner">
<el-menu
:default-active="menuActiveName || 'home'"
:collapse="sidebarFold"
:collapseTransition="false"
class="site-sidebar__menu">
<el-menu :default-active="menuActiveName || 'home'" :collapse="sidebarFold" class="site-sidebar__menu" unique-opened>
<!-- <el-menu-item index="home" @click="$router.push({ name: 'home' })">
<icon-svg name="shuju" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title">数据中心</span>
......@@ -46,22 +42,40 @@
<icon-svg name="system" class="site-sidebar__menu-icon"></icon-svg>
<span slot="title">系统配置</span>
</el-menu-item> -->
<sub-menu
v-for="menu in menuList"
:key="menu.menuId"
:menu="menu"
<sub-menu v-for="menu in menuList" :key="menu.menuId" :menu="menu"
:dynamicMenuRoutes="dynamicMenuRoutes">
</sub-menu>
</el-menu>
</div>
<el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
<!-- <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
<template slot="title">
<el-badge value="new">
<icon-svg name="shezhi" class="el-icon-setting"></icon-svg>
</el-badge>
</template>
</el-menu-item> -->
<el-menu-item class="site-navbar__avatar" index="3">
<el-dropdown class="site-navbar_dropdown" :show-timeout="0" placement="bottom">
<span class="el-dropdown-link">
<img src="~@/assets/img/avatar.png" :alt="userName">
<span class="el-dropdown-link_text">{{ userName }}</span>
</span>
<el-dropdown-menu slot="dropdown">
<!-- <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item> -->
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-menu-item>
</el-menu>
</aside>
</template>
<script>
import SubMenu from './main-sidebar-sub-menu'
import { isURL } from '@/utils/validate'
export default {
data () {
import SubMenu from './main-sidebar-sub-menu'
import { isURL } from '@/utils/validate'
export default {
data() {
return {
dynamicMenuRoutes: []
}
......@@ -71,39 +85,42 @@
},
computed: {
sidebarLayoutSkin: {
get () { return this.$store.state.common.sidebarLayoutSkin }
get() { return this.$store.state.common.sidebarLayoutSkin }
},
sidebarFold: {
get () { return this.$store.state.common.sidebarFold }
get() { return this.$store.state.common.sidebarFold }
},
menuList: {
get () { return this.$store.state.common.menuList },
set (val) { this.$store.commit('common/updateMenuList', val) }
get() { return this.$store.state.common.menuList },
set(val) { this.$store.commit('common/updateMenuList', val) }
},
menuActiveName: {
get () { return this.$store.state.common.menuActiveName },
set (val) { this.$store.commit('common/updateMenuActiveName', val) }
get() { return this.$store.state.common.menuActiveName },
set(val) { this.$store.commit('common/updateMenuActiveName', val) }
},
mainTabs: {
get () { return this.$store.state.common.mainTabs },
set (val) { this.$store.commit('common/updateMainTabs', val) }
get() { return this.$store.state.common.mainTabs },
set(val) { this.$store.commit('common/updateMainTabs', val) }
},
mainTabsActiveName: {
get () { return this.$store.state.common.mainTabsActiveName },
set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
get() { return this.$store.state.common.mainTabsActiveName },
set(val) { this.$store.commit('common/updateMainTabsActiveName', val) }
},
userName: {
get() { return this.$store.state.user.name }
}
},
watch: {
$route: 'routeHandle'
},
created () {
created() {
this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
this.routeHandle(this.$route)
},
methods: {
// 路由操作
routeHandle (route) {
routeHandle(route) {
if (route.meta.isTab) {
// tab选中, 不存在先添加
var tab = this.mainTabs.filter(item => item.name === route.name)[0]
......@@ -128,7 +145,56 @@
this.menuActiveName = tab.menuId + ''
this.mainTabsActiveName = tab.name
}
},
}
}
</script>
<style lang="scss">
.site-sidebar--fold {
.site-sidebar__inner {
overflow: hidden auto;
}
.el-menu-item {
padding: 0 10px;
img {
margin-right: 0;
}
.el-dropdown-link_text {
display: none;
}
}
</script>
}
.site-sidebar {
display: flex;
flex-direction: column;
.site-sidebar__inner {
flex: 1;
height: auto;
padding: 0;
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
background: hsla(0, 0%, 100%, .2);
border-radius: 3px;
box-shadow: inset 0 0 5px hsla(0, 0%, 100%, .05);
}
&::-webkit-scrollbar-track {
background: hsla(0, 0%, 100%, .15);
border-radius: 3px;
box-shadow: inset 0 0 5px rgba(37, 37, 37, .05);
}
}
}
</style>
src/views/main.vue
<template>
<div
class="site-wrapper"
:class="{ 'site-sidebar--fold': sidebarFold }"
v-loading.fullscreen.lock="loading"
<div class="site-wrapper" :class="{ 'site-sidebar--fold': sidebarFold }" v-loading.fullscreen.lock="loading"
element-loading-text="拼命加载中">
<template v-if="!loading">
<main-navbar />
<main-sidebar />
<div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
<main-content v-if="!$store.state.common.contentIsNeedRefresh" />
<Setting />
</div>
</template>
</div>
</template>
<script>
import MainNavbar from './main-navbar'
import MainSidebar from './main-sidebar'
import MainContent from './main-content'
export default {
provide () {
import MainNavbar from './main-navbar'
import MainSidebar from './main-sidebar'
import MainContent from './main-content'
import Setting from '@/components/Setting/index.vue'
export default {
provide() {
return {
// 刷新
refresh () {
refresh() {
this.$store.commit('common/updateContentIsNeedRefresh', true)
this.$nextTick(() => {
this.$store.commit('common/updateContentIsNeedRefresh', false)
......@@ -30,7 +29,7 @@
}
}
},
data () {
data() {
return {
loading: true
}
......@@ -38,46 +37,47 @@
components: {
MainNavbar,
MainSidebar,
MainContent
MainContent,
Setting
},
computed: {
documentClientHeight: {
get () { return this.$store.state.common.documentClientHeight },
set (val) { this.$store.commit('common/updateDocumentClientHeight', val) }
get() { return this.$store.state.common.documentClientHeight },
set(val) { this.$store.commit('common/updateDocumentClientHeight', val) }
},
sidebarFold: {
get () { return this.$store.state.common.sidebarFold }
get() { return this.$store.state.common.sidebarFold }
},
userId: {
get () { return this.$store.state.user.id },
set (val) { this.$store.commit('user/updateId', val) }
get() { return this.$store.state.user.id },
set(val) { this.$store.commit('user/updateId', val) }
},
userName: {
get () { return this.$store.state.user.name },
set (val) { this.$store.commit('user/updateName', val) }
get() { return this.$store.state.user.name },
set(val) { this.$store.commit('user/updateName', val) }
}
},
created () {
created() {
this.getUserInfo()
},
mounted () {
mounted() {
this.resetDocumentClientHeight()
},
methods: {
// 重置窗口可视高度
resetDocumentClientHeight () {
resetDocumentClientHeight() {
this.documentClientHeight = document.documentElement['clientHeight']
window.onresize = () => {
this.documentClientHeight = document.documentElement['clientHeight']
}
},
// 获取当前管理员信息
getUserInfo () {
getUserInfo() {
this.$http({
url: this.$http.adornUrl('/sys/user/info'),
method: 'get',
params: this.$http.adornParams()
}).then(({data}) => {
}).then(({ data }) => {
if (data && data.code === 0) {
this.loading = false
this.userId = data.user.userId
......@@ -86,5 +86,6 @@
})
}
}
}
}
</script>
<style lang="scss"></style>
src/views/modules/oss/oss-upload.vue
......@@ -20,6 +20,8 @@
</template>
<script>
import { getCookie } from '../../../utils/cookie'
export default {
data () {
return {
......@@ -32,7 +34,7 @@
},
methods: {
init (id) {
this.url = this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`)
this.url = this.$http.adornUrl(`/sys/oss/upload?token=${getCookie('token')}`)
this.visible = true
},
// 上传之前
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!