Skip to content

C
common-templete
Commit d87838f9 by 高淑倩
Options

merge_mainjs

parents 314d0c9f ed73cbfb
Showing with 1018 additions and 65 deletions
src/App.vue
...@@ -10,9 +10,11 @@ export default { ...@@ -10,9 +10,11 @@ export default {
} }
</script> </script>
<style>
</style>
<style lang="scss"> <style lang="scss">
@import "~@/assets/font-awesome/scss/font-awesome.scss"; @import "~@/assets/font-awesome/scss/font-awesome.scss";
/** 重置element-ui theme **/
$--color-primary: #337ab7 !default;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
</style> </style>
src/assets/styles/common.css
...@@ -29,6 +29,19 @@ ...@@ -29,6 +29,19 @@
.fl { .fl {
float: left; float: left;
} }
.clearfix {
clear: both;
overflow: auto;
}
.clearfix:before {
content: "";
clear: both;
}
.clearfix:after {
content: "";
clear: both;
}
.step { .step {
background-color: rgba(52, 73, 94, 1); background-color: rgba(52, 73, 94, 1);
color: #fff; color: #fff;
...@@ -40,3 +53,12 @@ ...@@ -40,3 +53,12 @@
a,button { a,button {
cursor: pointer; cursor: pointer;
} }
.left-l {
left: 70px;
}
.left-ll {
left: 240px;
}
src/components/Header/index.vue
<template lang="pug"> <template lang="pug">
el-container.header-container el-container.header-container(:class="{'left-l':!sidebarUnfoldInfo,'left-ll':sidebarUnfoldInfo}")
nav.header-nav.clear nav.header-nav.clear
ul.clear ul.clearfix
li.nav-item.fl('@click'="handleShowMemus('show',$event)") li.nav-item.fl('@click'="handleShowMenus('show',$event)")
a.link a.link
i.fa.fa-th-list i.fa.fa-th-list
li.nav-item.fl li.nav-item.fl(@click="handleEditMenus()")
a.link a.link
i.fa.fa-th-large i.fa.fa-th-large
li.nav-item.fl li.nav-item.fl
a.link el-popover(
i.fa.fa-clock-o placement="bottom-end",
:offset="100",
:width="300",
popper-class="historys-popper",
trigger="click")
.historys-body
.history-list--item.clearfix(v-for='historyItem in historys ')
.name.fl {{historyItem.name}}
.time.fr {{historyItem.time}}
a.link(slot="reference")
i.fa.fa-clock-o
.history-links-preview.fl .history-links-preview.fl
.history-item.fl('v-for'="(history,index) in historysLimit",':key'="index") {{history.name}} .history-item.fl('v-for'="(history,index) in historysLimit",':key'="index") {{history.name}}
li.nav-item.fr li.nav-item.fr
a.link el-popover(
img.user-img(':src'="user.headerImage") placement="bottom-end",
span.user-name {{user.name}} :offset="100",
i.fa.fa-angle-down :width="150",
popper-class="helpers-popper",
trigger="click")
.opration-body
.opration-list--item.clearfix(v-for='opration in oprations ')
.name.fl(@click="gotoPage(opration.link)") {{opration.name}}
a.link(slot="reference")
img.user-img(':src'="user.headerImage")
span.user-name {{user.name}}
i.fa.fa-angle-down
li.nav-item.fr li.nav-item.fr
a.link a.link
i.fa.fa-envelope-o i.fa.fa-envelope-o
li.nav-item.fr li.nav-item.fr
a.link el-popover(
i.fa.fa-comments placement="bottom-end",
el-row.meuns-nav :offset="100",
el-menu&attributes({ :width="150",
popper-class="helpers-popper",
trigger="click")
.helpers-body
.helper-list--item.clearfix(v-for='help in helpers ')
i.fa.fl.helper-item--icon(:class="help.icon",:style="help.style",style={width:'22px',height:'22px'})
.name.fl {{help.name}}
a.link(slot="reference")
i.fa.fa-comments
el-row.meuns-nav(v-show="showMenusPanel")
el-menu(@click="toggleMenus($event)")&attributes({
'default-active':"2", 'default-active':"2",
'class':"el-menu-vertical", 'class':"el-menu-vertical",
'@open':"handleOpen", '@open':"handleOpen",
'@close':"handleClose", '@close':"handleClose",
'text-color':'#2a3f54',
'active-text-color':'#fff'
}) })
el-submenu.menus-body.clear(index="1") el-submenu.menus-body.clear(index="1")
el-menu-item-group.menus-groups.fl('v-for'="(item,index) in menus",':key'="index") el-menu-item-group.menus-groups.fl('v-for'="(item,index) in menus",':key'="index")
...@@ -38,32 +69,28 @@ ...@@ -38,32 +69,28 @@
i(class="fa",':class'="item.ico", style={'margin-right':'5px'}) i(class="fa",':class'="item.ico", style={'margin-right':'5px'})
span.main-menus-title {{item.name}} span.main-menus-title {{item.name}}
el-menu-item&attributes({ el-menu-item&attributes({
':index':"idx | pipeString(index)", ':index':"formatPathString(index,idx)",
'v-for':'(it,idx) in item.children', 'v-for':'(it,idx) in item.children',
':key':"idx" ':key':"idx"
}) {{it.name}} })
el-menu-item-group.menus-tags('v-for'="(i,inx) in it.children",':key'="inx") el-menu-item-group.menus-tags
<!--template(slot="title") {{i.name}}--> template(slot="title")
span {{it.name}}
el-menu-item&attributes({ el-menu-item&attributes({
':index':"inx | pipeString(index,idx)", 'v-for':'(i,inx) in it.children',
':key':"inx" ':index':"formatPathString(index,idx,inx)",
':key':"inx",
'@click':'setActiveStyle(i,$event)',
':class':"{ active:formatPathString(index,idx,inx) === currentSelectIndex}"
}) {{i.name}} }) {{i.name}}
</template> </template>
<style lang="stylus"> <style lang="stylus">
.header-container .header-container
position fixed position fixed
left 0
right 0 right 0
top 0 top 0
z-index 99 z-index 99
box-shadow 0 1px 1px rgba(0,0,0,.2) 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 .nav-item
display inline-block display inline-block
position relative position relative
...@@ -82,19 +109,76 @@ ...@@ -82,19 +109,76 @@
.history-links-preview .history-links-preview
margin-top 16px margin-top 16px
margin-left 15px margin-left 15px
.menus-body
.el-menu
margin-bottom 200px
.header-nav
position relative
background #ededed
width 100%
.el-menu--inline
display block !important
.menus-tags
.el-menu-item
background #f5f5f5
line-height 30px
padding 0 10px
color #2a3f54
min-width 120px
cursor pointer
&:hover,
&:focus
background #f5f5f5
.menus-groups
& > .el-menu-item-group__title
&:before
display none
.el-submenu__title
display none
.el-menu-item-group__title
position relative
padding-left 10px !important
margin-left 10px
color: #2a3f54;
font-size: 14px;
font-weight: bold;
padding-left: 10px;
position: relative;
&::before
content ''
position absolute
width 4px
height 4px;
border-radius 50%
left 0
top 50%
margin-top -2px
background #2a3f54
.main-menus-title
font-size 15px
.el-menu-item
padding 0 10px !important
&.active
background: #1ABB9C !important
color: #fff !important
</style> </style>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.meuns-nav .meuns-nav
position absolute position absolute
left 0 left 0
right 0 right 0
bottom 0 height 1000px
box-sizing border-box
top 70px top 70px
z-index 9 z-index 9
overflow-y scroll
.menus-body .menus-body
display flex display flex
.menus-groups .menus-groups
width 200px width 200px
border-right: 1px solid #ddd;
margin: 15px 0;
padding 1px
.main-menus .main-menus
color #2a3f54 color #2a3f54
font-size 15px font-size 15px
...@@ -127,13 +211,57 @@ ...@@ -127,13 +211,57 @@
.el-menu-item .el-menu-item
height auto height auto
line-height 1.5 line-height 1.5
overflow hidden
text-align left
&:hover,
&:focus
background none
.history-list--item,
.helper-list--item,
.opration-list--item
display flex
justify-content flex-start
align-items center
box-sizing border-box
font-size: 12px
color: #5A738E
width: 100%
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
white-space: nowrap;
cursor pointer
.helper-list--item
padding 5px 0
.helper-item--icon
display: flex;
justify-content center
align-items center
padding: 5px;
border-radius: 5px;
margin-right: 5px;
</style> </style>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters, mapActions } from 'vuex'
export default { export default {
name: 'headerNav', name: 'headerNav',
data () { data () {
return { return {
showMenusPanel: false,
showEditMenusPanel: false,
currentSelectIndex: -1,
oprations: [{name: '修改密码', link: 'http://www.baidu.com'}, {name: '安全退出', link: 'http://www.baidu.com'}],
helpers: [{
name: '点击联系客服',
icon: 'fa-qq',
style: {background: '#ff9293', color: '#fff'}
}, {name: '使用帮助',
style: {background: '#40b0ff', color: '#fff'},
icon: 'fa-info'},
{name: '舞象客服',
style: {background: '#e0e0e0', color: '#000'},
icon: 'fa-user-circle-o'}],
user: { user: {
headerImage: 'http://photo.bigaka.com/photos//2132/201805/56741525659969939_144_144.jpg', headerImage: 'http://photo.bigaka.com/photos//2132/201805/56741525659969939_144_144.jpg',
name: '测试商户组' name: '测试商户组'
...@@ -162,19 +290,46 @@ export default { ...@@ -162,19 +290,46 @@ export default {
return [...historys] return [...historys]
} }
}, },
...mapGetters({menus: 'getMenus'}) ...mapGetters({
menus: 'getMenus',
editMenus: 'getEditMenus',
sidebarUnfoldInfo: 'getSidebarUnfoldInfo'
})
}, },
methods: { methods: {
...mapActions([
'showEditMenus',
'hideEditMenus'
]),
clickItem () { clickItem () {
console.log(this) console.log(this)
}, },
handleOpen () {}, handleOpen () {},
handleClose () {}, handleClose () {},
handleShowMemus (type) { handleShowMenus () {
this.$nextTick(() => { this.showMenusPanel = !this.showMenusPanel
let dom = document.querySelector('.el-submenu__title') },
dom.click() toggleMenus (...args) {
}) console.log(args)
},
handleEditMenus () {
if (!this.editMenus) {
this.showEditMenus()
} else {
this.hideEditMenus()
}
},
setActiveStyle (item, ev) {
this.currentSelectIndex = ev.index
console.log(item)
},
formatPathString (...args) {
return args.join('-')
},
gotoPage (link) {
if (link) {
location.href = link
}
} }
} }
} }
......
src/components/Header/message.vue 0 → 100644
<template>
<div>
<!--滑动区域-->
<mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
<!--筛选条件; 模拟列表的重置和演示空布局的使用-->
<div class="nav">
<p :class="getActiveCls(0)" @click="changeTab(0)">全部</p>
<p :class="getActiveCls(1)" @click="changeTab(1)">奶粉</p>
<p :class="getActiveCls(2)" @click="changeTab(2)">图书</p>
</div>
<!--展示上拉加载的数据列表-->
<ul id="dataList" class="data-list">
<li v-for="pd in dataList" :key="pd.id">
<p class="msg-title">{{pd.title}}</p>
<p class="msg-text">{{pd.content_text}}</p>
<p class="msg-time">{{pd.create_time}}</p>
</li>
</ul>
</mescroll-vue>
</div>
</template>
<script>
// 引入mescroll的vue组件
import MescrollVue from '@/lib/mescroll/mescroll.vue'
export default {
name: 'message',
components: {
MescrollVue
},
data () {
return {
mescroll: null, // mescroll实例对象
mescrollUp: {
callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
page: {
num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
size: 10 // 每页数据的数量
},
noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
toTop: {
src: './static/images/mescroll/mescroll-totop.png' // 回到顶部按钮的图片路径,支持网络图
},
empty: {
// 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
warpId: 'dataList', // 父布局的id;
icon: './static/images/mescroll/mescroll-empty.png', // 图标,支持网络图
tip: '暂无相关数据~', // 提示
btntext: '去逛逛 >', // 按钮,默认""
btnClick () { // 点击按钮的回调,默认null
alert('点击了按钮,具体逻辑自行实现')
}
},
lazyLoad: {
use: true // 是否开启懒加载,默认false
}
},
dataList: [], // 列表数据
pdType: 0 // 菜单
}
},
beforeRouteEnter (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
next(vm => {
vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
})
},
beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
next()
},
methods: {
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit (mescroll) {
this.mescroll = mescroll
},
// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback (page, mescroll) {
// 模拟联网
this.getListDataFromNet(page.num, page.size)
},
// 选中状态的样式
getActiveCls (type) {
return this.pdType === type ? 'active' : ''
},
// 切换菜单
changeTab (type) {
if (this.pdType !== type) {
this.pdType = type
this.dataList = []// 在这里手动置空列表,可显示加载中的请求进度
this.mescroll.resetUpScroll() // 刷新列表数据
}
},
/* 联网加载列表数据
在您的实际项目中,请参考官方写法: http://www.mescroll.com/api.html#tagUpCallback
请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
实际项目以您服务器接口返回的数据为准,无需本地处理分页.
* */
async getListDataFromNet (pageNum, pageSize) {
// 延时一秒,模拟联网
const res = await this.axios.get('http://rap2api.taobao.org/app/mock/115626/store/notice!getStoreNoticeListByPageAction.do',{
params:{
pageNo:pageNum,
pageSize,
push_state:2
}
})
if (res.data.code === 0) {
const resData = res.data.dataList
const length = this.dataList.length
if (length <= res.data.totalCount) {
this.dataList = this.dataList.concat(resData)
}
}
}
}
}
</script>
<style scope>
/*以fixed的方式固定mescroll的高度*/
.mescroll {
position: fixed;
top: 44px;
bottom: 0;
height: auto;
}
.header {
z-index: 9990;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
border-bottom: 1px solid #eee;
background-color: white;
}
.header .btn-left {
position: absolute;
top: 0;
left: 0;
padding: 12px;
line-height: 22px;
}
.swiper {
width: 100%;
vertical-align: bottom;
}
.nav {
text-align: center;
border-bottom: 1px solid #ddd;
}
.nav p {
display: inline-block;
width: 30%;
padding: 10px 0;
}
.nav .active {
border-bottom: 1px solid #FF6990;
color: #FF6990;
}
.data-list li {
position: relative;
padding: 10px 8px 10px 120px;
border-bottom: 1px solid #eee;
}
.data-list .pd-img {
position: absolute;
left: 18px;
top: 18px;
width: 80px;
height: 80px;
}
.data-list .pd-name {
font-size: 16px;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.data-list .pd-price {
margin-top: 8px;
color: red;
}
.data-list .pd-sold {
font-size: 12px;
margin-top: 8px;
color: gray;
}
</style>
src/components/Sidebar/index.vue
...@@ -37,7 +37,7 @@ ...@@ -37,7 +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 { mapGetters, mapActions } 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 {
...@@ -103,6 +103,7 @@ export default { ...@@ -103,6 +103,7 @@ export default {
} else { } else {
this.unfold = args[0] this.unfold = args[0]
} }
this.setSidebarUnfold(this.unfold)
}, },
hiddenUnfoldBtn () { hiddenUnfoldBtn () {
this.unfoldBtn = false this.unfoldBtn = false
...@@ -115,7 +116,8 @@ export default { ...@@ -115,7 +116,8 @@ export default {
}, },
getCurrentMenus (index) { getCurrentMenus (index) {
return this.menus[index] return this.menus[index]
} },
...mapActions(['setSidebarUnfold'])
} }
} }
</script> </script>
......
src/components/menus/edit.vue 0 → 100644
<template>
<div class="menus-edit--control" v-show="editMenus">
<div class="content" >
<div class="dropdown-menu quick-links-panel" >
<!-- 快捷入口 -->
<div class="clearfix quick-links-container">
<a class="fl"><i class="fa fa-thumb-tack"></i></a>
<div class="quick-items fl">
<a class="quick-item" v-for="(item, index) in quickItems" :key="index"> {{item.name}} </a>
</div>
<span class="tips inline">Tips:快速触达，最多10个</span>
<a class="fr" @click="hideContentBox()" ><i class="fa fa-times"></i></a>
<a class="fr" @click="showEditMenus()" ><i class="fa fa-ellipsis-h"></i></a>
</div>
</div>
</div>
<div class="warpper">
<el-dialog :visible.sync="dialogFormVisible" width="100%" center :show-close="false" :top="'4vh'">
<menusTemplete :select-list="selectMenus" @choose="chooseMenus" />
<div slot="footer" class="dialog-footer">
<el-button @click="hideEditMenus()">取 消</el-button>
<el-button type="primary" @click="sure()">确 定</el-button>
<span class="tip">已选：{{selectList.length}}个快捷菜单，最多可选10个。</span>
</div>
</el-dialog>
</div>
</div>
</template>
<style>
.dropdown-menu.quick-links-panel,.dropdown-menu.quick-links-panel a {
color: #73879c;
margin-right: 20px;
}
.dropdown-menu.quick-links-panel a i {
font-size: 24px;
line-height: 42px;
}
.dropdown-menu.quick-links-panel .quick-links-container {
padding-left: 15px;
}
.dropdown-menu.quick-links-panel {
left: 0;
width: 100%;
line-height: 42px;
border-top: 0;
z-index: 999;
border: 0;
background: #f9f9f9;
}
.dropdown-menu.menu-links-panel.in, .dropdown-menu.quick-links-panel.in {
transform: translateY(0);
-webkit-transform: translateY(0);
opacity: 1;
}
.menus-edit--control .el-dialog__header {
display: none;
}
.menus-edit--control .quick-item {
margin: 0 15px 0 0;
font-size: 14px;
line-height: 42px
}
.warpper .el-dialog--center .el-dialog__body {
height: 600px;
overflow: auto;
}
.warpper .el-dialog__body .menus-templete {
padding-bottom: 0;
}
</style>
<style scoped>
.tip {
margin-left: 10px;
font-size: 12px;
color: #aaa;
}
</style>
<script>
import { mapActions, mapGetters } from 'vuex'
import menusTemplete from './menusTemplete'
export default {
components: {
menusTemplete
},
data () {
return {
dialogFormVisible: false,
selectList: [],
tempSelectList: [],
quickItems: [],
tempQuickItems: [],
limitLength: 10,
isSure: false
}
},
created () {
let quickItemsInfo = localStorage.getItem('_quickItemsInfo')
if (quickItemsInfo) {
quickItemsInfo = JSON.parse(quickItemsInfo)
this.quickItems = quickItemsInfo.quickItems
this.selectList = quickItemsInfo.selectList
}
},
props: ['showControl'],
computed: {
selectMenus () {
return [...this.tempSelectList, ...this.selectList]
},
...mapGetters({editMenus: 'getEditMenus'})
},
methods: {
...mapActions({
hideMenus: 'hideEditMenus'
}),
hideEditMenus () {
this.dialogFormVisible = false
this.tempSelectList = []
this.tempQuickItems = []
},
showEditMenus () {
this.isSure = false
this.dialogFormVisible = true
},
hideContentBox () {
this.hideMenus()
},
sure () {
this.quickItems = [...this.quickItems, ...this.tempQuickItems]
this.selectList = [...this.selectList, ...this.tempSelectList]
const quicksInfo = {quickItems: this.quickItems, selectList: this.selectList}
localStorage.setItem('_quickItemsInfo', JSON.stringify(quicksInfo))
this.hideEditMenus()
this.$message({
message: '快捷菜单设置成功',
type: 'success'
})
},
chooseMenus ({item, vNode}) {
const totalLength = this.tempQuickItems.length + this.quickItems.length
if (this.limitLength < totalLength) {
this.$message({
message: '最多选择十个快捷菜单',
type: 'warning'
})
return false
}
const index = vNode.index
const canAdd = this.tempSelectList.indexOf(index) === -1 && this.selectList.indexOf(index) === -1
if (canAdd) {
this.tempSelectList.push(index)
this.tempQuickItems.push(item)
} else {
let idx = this.tempSelectList.indexOf(index)
if (idx === -1) {
this.selectList.splice(idx, 1)
this.quickItems.slice(idx, 1)
} else {
idx = this.selectList.indexOf(index)
this.tempSelectList.splice(idx, 1)
this.tempQuickItems.slice(idx, 1)
}
}
},
handlerLength (length) {
if (this.limitLength < length) {
this.$message({
message: '最多选择十个快捷菜单',
type: 'warning'
})
return false
}
}
}
}
</script>
src/components/menus/menusTemplete.vue 0 → 100644
<template lang="pug">
.menus-templete
el-row.meuns-nav
el-menu(@click="toggleMenus($event)")&attributes({
'default-active':"2",
'class':"el-menu-vertical",
'@open':"handleOpen",
'@close':"handleClose",
'text-color':'#2a3f54',
'active-text-color':'#fff'
})
el-submenu.menus-body.clear(index="1")
el-menu-item-group.menus-groups('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':"formatPathString(index,idx)",
'v-for':'(it,idx) in item.children',
':key':"idx"
})
el-menu-item-group.menus-tags
template(slot="title")
span {{it.name}}
el-menu-item&attributes({
'v-for':'(i,inx) in it.children',
':index':"formatPathString(index,idx,inx)",
':key':"inx",
'@click':'selectHandle(i,$event)',
':class':"{ active: selectList.indexOf(formatPathString(index,idx,inx)) > -1 }"
}) {{i.name}}
</template>
<style lang="stylus">
.menus-templete
overflow auto
padding-bottom 80px
height 700px
min-width 1280px
.el-menu--inline
display block
.menus-body
& > ul
display flex !important
flex-wrap nowrap
flex 1
flex-direction row
&:before,
&:after
display none
.el-menu
margin-bottom 0
.menus-tags
.el-menu-item
background #f5f5f5
line-height 30px
padding 0 10px
color #2a3f54
min-width 120px
width auto
cursor pointer
&:hover,
&:focus
background #f5f5f5
.menus-groups
& > ul
display flex
flex-wrap wrap
& > .el-menu-item-group__title
&:before
display none
.el-submenu__title
display none
.el-menu-item-group__title
position relative
padding-left 10px !important
margin-left 10px
color: #2a3f54;
font-size: 14px;
font-weight: bold;
position: relative;
&::before
content ''
position absolute
width 4px
height 4px;
border-radius 50%
left 0
top 50%
margin-top -2px
background #2a3f54
.main-menus-title
font-size 15px
.el-menu-item
display: flex
padding 0 10px !important
&.active
background: #1ABB9C !important
color: #fff !important
.fixed-footer
position fixed
display flex
justify-content center
align-items center
bottom 0
width 100%
background #fff
height 50px
</style>
<style lang="stylus" scoped>
.meuns-nav
position relative
overflow auto
.el-submenu,
.el-menu-item
min-width 120px
.menus-body
display flex
flex-direction row
.menus-groups
border-right: 1px solid #ddd;
margin: 15px 0;
padding 1px
max-width 356px
.main-menus
color #2a3f54
font-size 15px
font-weight bold
text-align left
.el-menu-item
height auto
line-height 1.5
overflow hidden
text-align left
&:hover,
&:focus
background none
</style>
<script>
export default {
name: 'menusTemplete',
data () {
return {
currentSelectIndex: -1,
num: 3
}
},
props: {
selectList: {
type: Array,
default () {
return []
}
}
},
filters: {
limit (array, num) {
if (num) {
return array
}
return array.slice(0, num)
},
pipeString (...args) {
return args.join('-')
}
},
computed: {
menus () {
const names = ['会员中心', '营销中心', '销售中心', '渠道中心', '系统设置', '平台管理'] // '智能营销', '分析师'
return this.$store.state.global.menus.filter(item => names.indexOf(item.name) > -1)
}
},
methods: {
clickItem () {
console.log(this)
},
handleOpen () {},
handleClose () {},
handleShowMenus () {
this.showMenusPanel = !this.showMenusPanel
},
toggleMenus (...args) {
console.log(args)
},
handleEditMenus () {},
selectHandle (item, vNode, ...args) {
this.currentSelectIndex = args.join('-')
this.$emit('choose', {item, vNode})
},
formatPathString (...args) {
return args.join('-')
}
}
}
</script>
src/lib/mescroll/mescroll.min.css 0 → 100644
/*! mescroll -- 精致的下拉刷新和上拉加载js框架 ( a great JS framework for pull-refresh and pull-up-loading )
* version 1.3.8
* 2018-09-29
* author: wenju < mescroll@qq.com > 文举
* *
* 官网: http://www.mescroll.com
* 动态: https://github.com/mescroll/mescroll/releases
* 问答: http://www.mescroll.com/qa.html
* issues: https://github.com/mescroll/mescroll/issues
* QQ交流群: 633126761
*
* 温馨提示: mescroll唯一的全局样式: html,body{height:100%},用于固定body的高度满屏; 如果影响到您原本的项目样式,可自行删除
*
*
* ----- mescroll的html结构解析 ----
*
<body>
<div id="mescroll" class="mescroll">
<div>
//下拉刷新区域 ( mescroll初始化之后自动创建 )
<div class="mescroll-downwarp">
<div class="downwarp-content">
<p class="downwarp-progress"></p> <p class="downwarp-tip">下拉刷新 </p>
</div>
</div>
//界面的具体内容
//<div>界面内容</div>
//数据列表..
//<ul id="dataList" class="data-list">
// <li>数据列表</li>
//空布局 ( 列表无任何数据时, 且配置了warpId时, 会自动创建显示 )
<div class="mescroll-empty">
<img class="empty-icon" src="../img/mescroll-empty.png"/>
<p class="empty-tip">暂无相关数据~</p>
<p class="empty-btn">去逛逛 ></p>
</div>
//</ul>
//上拉加载区域 ( mescroll初始化之后自动创建 )
<div class="mescroll-upwarp">
//加载中..
<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>
//无数据
<p class="upwarp-nodata">-- END --</p>
</div>
</div>
</div>
//回到顶部按钮 ( 列表滚动到配置的距离时, 且配置了warpId时, 会自动创建显示, 注意是添加在body中的 )
<img class="mescroll-totop" src="../img/mescroll-totop.png"/>
</body>
*/
html,body{height:100%}body{-webkit-overflow-scrolling:touch}.mescroll{width:100%;height:100%;overflow-y:auto}.mescroll-hardware{-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-perspective:1000}.mescroll-downwarp{position:relative;width:100%;height:0;overflow:hidden;text-align:center}.mescroll-downwarp-reset{-webkit-transition:height 300ms;transition:height 300ms}.mescroll-downwarp .downwarp-content{position:absolute;left:0;bottom:0;width:100%;min-height:30px;padding:10px 0}.mescroll-upwarp{min-height:30px;padding:15px 0;text-align:center;visibility:hidden}.mescroll-downwarp .downwarp-tip,.mescroll-upwarp .upwarp-tip,.mescroll-upwarp .upwarp-nodata{display:inline-block;font-size:12px;color:gray;vertical-align:middle}.mescroll-downwarp .downwarp-tip,.mescroll-upwarp .upwarp-tip{margin-left:8px}.mescroll-downwarp .downwarp-progress,.mescroll-upwarp .upwarp-progress{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid gray;border-bottom-color:transparent;vertical-align:middle}.mescroll-rotate{-webkit-animation:mescrollRotate .6s linear infinite;animation:mescrollRotate .6s linear infinite}@-webkit-keyframes mescrollRotate{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes mescrollRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.mescroll-empty{width:100%;padding-top:20px;text-align:center}.mescroll-empty .empty-icon{width:45%}.mescroll-empty .empty-tip{margin-top:6px;font-size:14px;color:gray}.mescroll-empty .empty-btn{max-width:50%;margin:20px auto;padding:10px;border:1px solid #65aadd;border-radius:6px;background-color:white;color:#65aadd}.mescroll-empty .empty-btn:active{opacity:.75}.mescroll-totop{z-index:9990;position:fixed;right:10px;bottom:30px;width:36px;height:36px;border-radius:50%;opacity:0}.mescroll-lazy-in,.mescroll-fade-in{-webkit-animation:mescrollFadeIn .5s linear forwards;animation:mescrollFadeIn .5s linear forwards}@-webkit-keyframes mescrollFadeIn{0%{opacity:0}100%{opacity:1}}@keyframes mescrollFadeIn{0%{opacity:0}100%{opacity:1}}.mescroll-fade-out{pointer-events:none;-webkit-animation:mescrollFadeOut .5s linear forwards;animation:mescrollFadeOut .5s linear forwards}@-webkit-keyframes mescrollFadeOut{0%{opacity:1}100%{opacity:0}}@keyframes mescrollFadeOut{0%{opacity:1}100%{opacity:0}}.mescroll-bar::-webkit-scrollbar-track{background-color:transparent}.mescroll-bar::-webkit-scrollbar{width:6px}.mescroll-bar::-webkit-scrollbar-thumb{border-radius:6px;background-color:#ccc}.mescroll-bar::-webkit-scrollbar-thumb:hover{background-color:#aaa}
\ No newline at end of file
src/lib/mescroll/mescroll.vue 0 → 100644
<template>
<div ref="mescroll" class="mescroll">
<div>
<slot></slot>
</div>
</div>
</template>
<script>
// 引入mescroll.min.js和mescroll.min.css
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
export default {
name: 'MeScrollVue',
data: function () {
return {
mescroll: null,
lastScrollTop: 0, // 路由切换时滚动条的位置
lastBounce: null // 路由切换时是否禁止ios回弹
}
},
props: {
up: Object,
down: Object
},
mounted: function () {
this.mescroll = new MeScroll(this.$refs.mescroll, {
up: this.up,
down: this.down
})
this.$emit('init', this.mescroll) // init回调mescroll对象
},
methods: {
beforeRouteEnter () {
if (this.mescroll) {
// 滚动到之前列表的位置
if (this.lastScrollTop) {
this.mescroll.setScrollTop(this.lastScrollTop)
setTimeout(() => { // 需延时,因为setScrollTop内部会触发onScroll,可能会渐显回到顶部按钮
this.mescroll.setTopBtnFadeDuration(0) // 设置回到顶部按钮显示时无渐显动画
}, 16)
}
// 恢复到之前设置的isBounce状态
if (this.lastBounce != null) this.mescroll.setBounce(this.lastBounce)
}
},
beforeRouteLeave () {
if (this.mescroll) {
this.lastScrollTop = this.mescroll.getScrollTop() // 记录当前滚动条的位置
this.mescroll.hideTopBtn(0) // 隐藏回到顶部按钮,无渐隐动画
this.lastBounce = this.mescroll.optUp.isBounce // 记录当前是否禁止ios回弹
this.mescroll.setBounce(true) // 允许bounce
}
}
}
}
</script>
<style>
</style>
src/lib/mescroll/package.json 0 → 100644
{
"name": "mescroll.js",
"version": "1.3.8",
"description": "精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器 ( a great JS framework for pull-refresh and pull-up-loading )",
"main": "mescroll.min.js",
"scripts": {},
"repository": {
"type": "git",
"url": "git+https://github.com/mescroll/mescroll.git"
},
"author": "wenju",
"license": "MIT",
"bugs": {
"url": "https://github.com/mescroll/mescroll/issues"
},
"homepage": "https://github.com/mescroll/mescroll#readme",
"_from": "mescroll.js@1.3.8",
"_resolved": "http://registry.npm.taobao.org/mescroll.js/download/mescroll.js-1.3.8.tgz"
}
\ No newline at end of file
src/main.js
...@@ -6,13 +6,15 @@ import router from './router' ...@@ -6,13 +6,15 @@ import router from './router'
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import './assets/styles/reset.css' 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 store from './store'
import Axios from 'axios' import Axios from 'axios'
import * as filters from './filters' import * as filters from './filters'
// 引入echarts // 引入echarts
import echarts from 'echarts' import echarts from 'echarts'
import * as plugins from './plugin'
// Axios.defaults.baseURL = 'http://testcenter.bigaka.net/crm' // Axios.defaults.baseURL = 'http://testcenter.bigaka.net/crm'
const AUTH_TOKEN = 'X8IvNcvIe7xFvbNhk0I5HyVZY1E' const AUTH_TOKEN = 'X8IvNcvIe7xFvbNhk0I5HyVZY1E'
...@@ -33,7 +35,7 @@ Axios.interceptors.request.use( ...@@ -33,7 +35,7 @@ Axios.interceptors.request.use(
) )
Vue.use(ElementUI) Vue.use(ElementUI)
// Vue.use(http) Vue.use(plugins)
Object.keys(filters).forEach(key => { Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]) Vue.filter(key, filters[key])
......
src/pages/home/index.vue
<template> <template>
<div class="wrapper"> <div class="wrapper">
<home-header></home-header>
<home-sidebar></home-sidebar> <home-sidebar></home-sidebar>
<div class="content-box"> <section class="main">
<div class="content"> <home-header></home-header>
<transition name="move" mode="out-in"> <div class="content-box">
<!-- <keep-alive exclude="prize"> --> <menus-edit />
<router-view></router-view> <div class="content">
<!-- </keep-alive> --> <transition name="move" mode="out-in">
</transition> <!-- <keep-alive exclude="prize"> -->
<router-view></router-view>
<!-- </keep-alive> -->
</transition>
</div>
</div> </div>
</div> </section>
</div> </div>
</template> </template>
<script> <script>
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
import HomeSidebar from 'components/Sidebar' import HomeSidebar from 'components/Sidebar'
import HomeHeader from 'components/Header' import HomeHeader from 'components/Header'
import menusEdit from 'components/menus/edit'
export default { export default {
data () {
return {
}
},
components: { components: {
HomeSidebar, HomeSidebar,
HomeHeader HomeHeader,
menusEdit
}, },
created () { created () {
this.getMenus() this.getMenus()
...@@ -34,14 +44,21 @@ export default { ...@@ -34,14 +44,21 @@ export default {
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.wrapper .wrapper
display flex
width 100% width 100%
height 100% height 100%
overflow hidden overflow hidden
.main
flex 1
display flex
position relative
.content-box .content-box
position absolute /*position absolute*/
display inline-block display inline-block
top 58px flex 1
bottom 0 margin-top 58px
/*top 58px*/
/*bottom 0*/
width 80% width 80%
-webkit-transition left 0.3s ease-in-out -webkit-transition left 0.3s ease-in-out
transition left 0.3s ease-in-out transition left 0.3s ease-in-out
......
src/plugin/index.js
import momentPlugin from './moment' import moment from './moment'
import utils from './underscore' import underscore from './underscore'
import http from '../http' export const momentPlugin = moment
export { export const underscorePlugin = underscore
momentPlugin,
utils,
http
}
src/store/global/index.js
...@@ -3,8 +3,19 @@ import { globalApi } from '@/api' ...@@ -3,8 +3,19 @@ import { globalApi } from '@/api'
// 获取菜单数据 // 获取菜单数据
const GET_MEUMS = 'GET_MEUMS' const GET_MEUMS = 'GET_MEUMS'
// 显示设置快捷菜单
const SHOW_EDIT_MENUS = 'SHOW_EDIT_MENUS'
// 隐藏设置快捷菜单
const HIDE_EDIT_MENUS = 'HIDE_EDIT_MENUS'
// 边侧菜单
const SIDEBAR_UNFOLD = 'SIDEBAR_UNFOLD'
const state = { const state = {
menus: [] menus: [],
editMenus: false,
sidebarUnfold: false // false:边侧菜单收缩, true:边侧菜单展开
} }
const actions = { const actions = {
...@@ -14,18 +25,42 @@ const actions = { ...@@ -14,18 +25,42 @@ const actions = {
let res = await globalApi.getMenus(parmas) let res = await globalApi.getMenus(parmas)
let menus = res.data.data let menus = res.data.data
commit(GET_MEUMS, menus) commit(GET_MEUMS, menus)
},
showEditMenus ({commit}) {
commit(SHOW_EDIT_MENUS, true)
},
hideEditMenus ({commit}) {
commit(HIDE_EDIT_MENUS, false)
},
setSidebarUnfold ({commit}, type) {
commit(SIDEBAR_UNFOLD, type)
} }
} }
const getters = { const getters = {
getMenus (state) { getMenus (state) {
return state.menus return state.menus
},
getEditMenus (state) {
return state.editMenus
},
getSidebarUnfoldInfo (state) {
return state.sidebarUnfold
} }
} }
const mutations = { const mutations = {
[GET_MEUMS] (state, menus) { [GET_MEUMS] (state, menus) {
state.menus = menus state.menus = menus
},
[SHOW_EDIT_MENUS] (state, status) {
state.editMenus = status
},
[HIDE_EDIT_MENUS] (state, status) {
state.editMenus = status
},
[SIDEBAR_UNFOLD] (state, type) {
state.sidebarUnfold = type
} }
} }
......
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