Skip to content

C
common-templete
Commit dfa7f8f8 by 高淑倩
Options

add:mergemain.js

parents a2e41067 1845613c
Showing with 285 additions and 118 deletions
index.html
...@@ -2,8 +2,14 @@ ...@@ -2,8 +2,14 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-new-template</title> <meta name="renderer" content="webkit">
<title>舞象云新零售运营中心</title>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
src/api/global/index.js 0 → 100644
import { Http } from '@/http'
class Global extends Http {
getMenus (params) {
return this.get('getMenus', params)
}
}
export default new Global(true)
src/api/index.js 0 → 100644
import global from './global'
export const globalApi = global
src/assets/styles/common.css
...@@ -36,3 +36,7 @@ ...@@ -36,3 +36,7 @@
width: 35px; width: 35px;
height: 35px; height: 35px;
} }
a,button {
cursor: pointer;
}
src/components/Header/index.vue
<template> <template lang="pug">
<el-container> el-container.header-container
<el-header style="text-align: right; font-size: 12px"> nav.header-nav.clear
<i class="el-icon-menu"></i> ul.clear
<el-dropdown> li.nav-item.fl('@click'="handleShowMemus('show',$event)")
<i class="el-icon-setting" style="margin-right: 15px"></i> a.link
<el-dropdown-menu slot="dropdown"> i.fa.fa-th-list
<el-dropdown-item>查看</el-dropdown-item> li.nav-item.fl
<el-dropdown-item>新增</el-dropdown-item> a.link
<el-dropdown-item>删除</el-dropdown-item> i.fa.fa-th-large
</el-dropdown-menu> li.nav-item.fl
</el-dropdown> a.link
<span>王小虎</span> i.fa.fa-clock-o
</el-header> .history-links-preview.fl
</el-container> .history-item.fl('v-for'="(history,index) in historysLimit",':key'="index") {{history.name}}
li.nav-item.fr
a.link
img.user-img(':src'="user.headerImage")
span.user-name {{user.name}}
i.fa.fa-angle-down
li.nav-item.fr
a.link
i.fa.fa-envelope-o
li.nav-item.fr
a.link
i.fa.fa-comments
el-row.meuns-nav
el-menu&attributes({
'default-active':"2",
'class':"el-menu-vertical",
'@open':"handleOpen",
'@close':"handleClose",
})
el-submenu.menus-body.clear(index="1")
el-menu-item-group.menus-groups.fl('v-for'="(item,index) in menus",':key'="index")
template(slot="title")
.main-menus
i(class="fa",':class'="item.ico", style={'margin-right':'5px'})
span.main-menus-title {{item.name}}
el-menu-item&attributes({
':index':"idx | pipeString(index)",
'v-for':'(it,idx) in item.children',
':key':"idx"
}) {{it.name}}
el-menu-item-group.menus-tags('v-for'="(i,inx) in it.children",':key'="inx")
<!--template(slot="title") {{i.name}}-->
el-menu-item&attributes({
':index':"inx | pipeString(index,idx)",
':key':"inx"
}) {{i.name}}
</template> </template>
<style> <style lang="stylus">
.el-header { .header-container
background-color: gray; position fixed
color: #333; left 0
line-height: 60px; right 0
} top 0
.el-aside { z-index 99
color: #333; box-shadow 0 1px 1px rgba(0,0,0,.2)
} .header-nav
position relative
background #ededed
width 100%
margin-left 70px
.el-submenu__title
display none
.nav-item
display inline-block
position relative
.link
position relative
display block
padding 13px 15px 12px
font-weight 500
margin-left 0
line-height 32px
color #5A738E
i
font-size 26px
vertical-align middle
margin-top -2px
.history-links-preview
margin-top 16px
margin-left 15px
</style> </style>
<style lang="stylus" scoped>
.meuns-nav
position absolute
left 0
right 0
bottom 0
top 70px
z-index 9
.menus-body
display flex
.menus-groups
width 200px
.main-menus
color #2a3f54
font-size 15px
font-weight bold
text-align left
.history-item
line-height 1.7
border 1px solid #73879c
padding 0 15px
border-radius 12px
color #73879c
& + &
margin-left 15px
&:hover
cursor pointer
color inherit
border-color inherit
background-color inherit
.user-img
width 30px
height 30px
border-radius 50%
vertical-align middle
margin-right 10px
margin-top 1px
.user-name
margin-right 5px
i.fa.fa-angle-down
font-size 15px
.el-menu-item
height auto
line-height 1.5
</style>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'headerNav',
data () {
return {
user: {
headerImage: 'http://photo.bigaka.com/photos//2132/201805/56741525659969939_144_144.jpg',
name: '测试商户组'
},
historys: [{'name': '自动标签', 'index': '1,0,2', 'time': '2018-11-01 10:06:07'}, {'name': '快速查询', 'index': '1,0,0', 'time': '2018-10-31 17:17:09'}, {'name': '营销推送', 'index': '2,0,0', 'time': '2018-10-31 17:12:53'}, {'name': '会员圈选', 'index': '1,0,1', 'time': '2018-10-31 16:52:47'}, {'name': '概览', 'index': '0,0,0', 'time': '2018-10-31 13:31:59'}, {'name': '趋势', 'index': '0,1,0', 'time': '2018-10-29 15:52:31'}, {'name': '会员卡设置', 'index': '1,1,0', 'time': '2018-10-29 15:51:00'}, {'name': '生日营销(new)', 'index': '2,0,2', 'time': '2018-10-29 15:50:18'}]
}
},
filters: {
limit (array, num) {
if (num) {
return array
}
return array.slice(0, num)
},
pipeString (...args) {
return args.join('-')
}
},
props: ['icon', 'link', 'type', 'id', 'sort', 'name', 'pid', 'grade'],
computed: {
historysLimit () {
let historys = this.historys
if (historys.length > 5) {
return historys.slice(0, 5)
} else {
return [...historys]
}
},
...mapGetters({menus: 'getMenus'})
},
methods: {
clickItem () {
console.log(this)
},
handleOpen () {},
handleClose () {},
handleShowMemus (type) {
this.$nextTick(() => {
let dom = document.querySelector('.el-submenu__title')
dom.click()
})
}
}
}
</script>
src/components/Sidebar/index.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()") .sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()")
.logo .logo
img(':src'="logo") img(':src'="logo")
.item('v-for'="(item,itemIndex) in menuList" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}") .item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
sidebar-item&attributes({ sidebar-item&attributes({
':icon':'item.ico', ':icon':'item.ico',
':link':'item.link', ':link':'item.link',
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
img(class='icon-arrow',':class'="{right:!unfold}","src"='@/assets/images/sidebar/left-arrow-gray.png') img(class='icon-arrow',':class'="{right:!unfold}","src"='@/assets/images/sidebar/left-arrow-gray.png')
</template> </template>
<script> <script>
import { mapGetters } from 'vuex'
import sidebarItem from '../sidebarItem' import sidebarItem from '../sidebarItem'
const logo = require('@/assets/images/sidebar/logo-blue.png') const logo = require('@/assets/images/sidebar/logo-blue.png')
export default { export default {
...@@ -46,11 +47,8 @@ export default { ...@@ -46,11 +47,8 @@ export default {
currentRouteIndex: 0, currentRouteIndex: 0,
logo, logo,
unfold: false, // 水平展开 unfold: false, // 水平展开
menus: [],
unfoldBtn: false, // 展开按钮 unfoldBtn: false, // 展开按钮
currentMenus: null, currentMenusIndex: -1
currentMenusIndex: -1,
menuList: []
} }
}, },
filters: { filters: {
...@@ -64,14 +62,15 @@ export default { ...@@ -64,14 +62,15 @@ export default {
components: { components: {
sidebarItem sidebarItem
}, },
mounted () { mounted () {},
this.axios.get('http://rap2api.taobao.org/app/mock/115626/getMenus').then(res => {
this.menuList = res.data.data
this.currentMenus = this.menuList[0]
})
},
computed: { computed: {
...mapGetters({menus: 'getMenus'}),
currentMenus: {
get () {
const currentIndex = this.currentMenusIndex
return currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
}
}
}, },
created () { created () {
}, },
...@@ -80,7 +79,6 @@ export default { ...@@ -80,7 +79,6 @@ export default {
* 选择边测菜单主菜单 * 选择边测菜单主菜单
*/ */
choseMenu (selectItem, selectItemIndex) { choseMenu (selectItem, selectItemIndex) {
this.currentMenus = selectItem
this.currentMenusIndex = selectItemIndex this.currentMenusIndex = selectItemIndex
if (!this.unfold) { if (!this.unfold) {
this.toggleUnfold(true) this.toggleUnfold(true)
...@@ -114,6 +112,9 @@ export default { ...@@ -114,6 +112,9 @@ export default {
}, },
choseSubChildren (...args) { choseSubChildren (...args) {
console.log(args) console.log(args)
},
getCurrentMenus (index) {
return this.menus[index]
} }
} }
} }
...@@ -123,7 +124,7 @@ export default { ...@@ -123,7 +124,7 @@ export default {
position relative position relative
height 100px height 100px
display inline-block display inline-block
z-index 5 z-index 100
.sidebar .sidebar
position fixed position fixed
left 0 left 0
......
src/plugin/http/baseHttp.js → src/http/index.js
import axios from 'axios' import axios from 'axios'
// import qs from 'qs' // import qs from 'qs'
import store from '@/store' import store from '@/store'
import config from '../../config/index' import config from '../config/index'
// Add a request interceptor // Add a request interceptor
axios.interceptors.request.use(function (config) { axios.interceptors.request.use(function (config) {
// Do something before request is sent // Do something before request is sent
...@@ -33,7 +33,7 @@ const api = axios.create({ ...@@ -33,7 +33,7 @@ const api = axios.create({
}) })
const mockApi = axios.create({ const mockApi = axios.create({
baseURL: 'http://rap2api.taobao.org/app/mock/115626' baseURL: 'http://rap2api.taobao.org/app/mock/115626/'
}) })
api.interceptors.request.use(function (config) { api.interceptors.request.use(function (config) {
......
src/main.js
...@@ -8,9 +8,9 @@ import './assets/styles/reset.css' ...@@ -8,9 +8,9 @@ import './assets/styles/reset.css'
import './assets/styles/common.css' import './assets/styles/common.css'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
import qs from 'qs' import qs from 'qs'
import store from './store'
import Axios from 'axios' import Axios from 'axios'
import * as filters from './filters' import * as filters from './filters'
import { http } from './plugin'
// 引入echarts // 引入echarts
import echarts from 'echarts' import echarts from 'echarts'
// Axios.defaults.baseURL = 'http://testcenter.bigaka.net/crm' // Axios.defaults.baseURL = 'http://testcenter.bigaka.net/crm'
...@@ -29,7 +29,12 @@ Axios.interceptors.request.use( ...@@ -29,7 +29,12 @@ Axios.interceptors.request.use(
) )
Vue.use(ElementUI) Vue.use(ElementUI)
Vue.use(http) // Vue.use(http)
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.axios = Axios Vue.prototype.axios = Axios
Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
...@@ -42,6 +47,7 @@ Object.keys(filters).forEach(key => { ...@@ -42,6 +47,7 @@ Object.keys(filters).forEach(key => {
new Vue({ new Vue({
el: '#app', el: '#app',
router, router,
store,
components: { App }, components: { App },
template: '<App/>' template: '<App/>'
}) })
src/mixin/common/index.js 0 → 100644
export const stringFilter = {
filter: {
pipeString (...args) {
return args.join('-')
}
}
}
src/mixin/index.js 0 → 100644
import { stringFilter } from './common'
export const stringFilterMixin = stringFilter
src/pages/home/index.vue
...@@ -14,12 +14,21 @@ ...@@ -14,12 +14,21 @@
</div> </div>
</template> </template>
<script> <script>
import { mapActions } from 'vuex'
import HomeSidebar from 'components/Sidebar' import HomeSidebar from 'components/Sidebar'
import HomeHeader from 'components/Header' import HomeHeader from 'components/Header'
export default { export default {
components: { components: {
HomeSidebar, HomeSidebar,
HomeHeader HomeHeader
},
created () {
this.getMenus()
},
methods: {
...mapActions([
'getMenus'
])
} }
} }
</script> </script>
...@@ -31,7 +40,7 @@ export default { ...@@ -31,7 +40,7 @@ export default {
.content-box .content-box
position absolute position absolute
display inline-block display inline-block
top 70px top 58px
bottom 0 bottom 0
width 80% width 80%
-webkit-transition left 0.3s ease-in-out -webkit-transition left 0.3s ease-in-out
......
src/pages/marketing-center/components/MateriaList.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</template> </template>
<script> <script>
import Bus from '@/common/bus' // import Bus from '@/common/bus'
export default { export default {
data () { data () {
......
src/plugin/http/index.js deleted 100644 → 0
import { Http } from './baseHttp'
class HttpService {
install (Vue, options) {
// 4. 添加实例方法
Vue.prototype.$Http = Http
}
}
export default new HttpService()
src/plugin/index.js
import momentPlugin from './moment' import momentPlugin from './moment'
import utils from './underscore' import utils from './underscore'
import http from './http' import http from '../http'
export { export {
momentPlugin, momentPlugin,
utils, utils,
......
src/store/global/actions.js deleted 100644 → 0
import * as types from './mutations_types'
export default {
show_loading: ({
commit
}) => {
return new Promise((resolve, reject) => {
commit(types.SHOW_LOADING)
resolve()
})
},
hide_loading: ({
commit
}) => {
return new Promise((resolve, reject) => {
commit(types.HIDE_LOADING)
resolve()
})
}
}
src/store/global/getters.js deleted 100644 → 0
export default {
getLoadStatus (state) {
return state.ajax_loading
}
}
src/store/global/index.js
import state from './state' import { globalApi } from '@/api'
import mutations from './mutations'
import getters from './getters' // 获取菜单数据
import actions from './actions' const GET_MEUMS = 'GET_MEUMS'
const state = {
menus: []
}
const actions = {
async getMenus ({
commit, dispatch
}, parmas) {
let res = await globalApi.getMenus(parmas)
let menus = res.data.data
commit(GET_MEUMS, menus)
}
}
const getters = {
getMenus (state) {
return state.menus
}
}
const mutations = {
[GET_MEUMS] (state, menus) {
state.menus = menus
}
}
export default { export default {
state, state,
mutations, mutations,
getters, actions,
actions getters
} }
src/store/global/mutations.js deleted 100644 → 0
import * as types from './mutations_types'
// import { store } from 'utils/'
export default {
[types.SHOW_LOADING] (state) {
state.ajax_loading = true
},
[types.HIDE_LOADING] (state) {
state.ajax_loading = false
}
}
src/store/global/mutations_types.js deleted 100644 → 0
// 显示加载
export const SHOW_LOADING = 'SHOW_LOADING'
// 关闭加载
export const HIDE_LOADING = 'HIDE_LOADING'
src/store/global/state.js deleted 100644 → 0
export default {
ajax_loading: false
}
src/store/index.js
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
import createLogger from 'vuex/dist/logger'
import global from './global'
Vue.use(Vuex) Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production' const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({ export default new Vuex.Store({
actions, modules: {
getters, global
state, },
mutations,
strict: debug, strict: debug,
plugins: debug ? [createLogger()] : [] plugins: debug ? [createLogger()] : []
}) })
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment