Skip to content

C
common-templete
Commit c0eceec1 by 高淑倩
Options

modify:apimode

parents 327ad411 6f792df8
Showing with 705 additions and 178 deletions
.babelrc
{ {
"presets": [ "presets": [
["env", { ["env", {
"modules": false, "modules": false,
"targets": { "targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"] "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
} }
}], }],
"stage-2" "stage-2"
], ],
"plugins": ["transform-vue-jsx", "transform-runtime"] "plugins": [
} "syntax-flow",
"transform-vue-jsx",
"babel-plugin-transform-class-properties",
"babel-plugin-syntax-flow",
"babel-plugin-transform-flow-strip-types",
"transform-runtime"
]
}
\ No newline at end of file
.eslintrc.js
...@@ -16,18 +16,20 @@ module.exports = { ...@@ -16,18 +16,20 @@ module.exports = {
'standard', 'standard',
], ],
globals: { globals: {
$: true $: true,
}, },
// required to lint *.vue files // required to lint *.vue files
plugins: ['vue'], plugins: ['vue', 'html', 'flowtype-errors'],
// add your custom rules here // add your custom rules here
rules: { rules: {
'flowtype-errors/show-errors': 2,
// allow async-await // allow async-await
'generator-star-spacing': 'off', 'generator-star-spacing': 'off',
// allow debugger during development // allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-useless-escape': 'off', 'no-useless-escape': 'off',
'no-tabs': 'off', 'no-tabs': 'off',
'no-mixed-spaces-and-tabs': 0,
'comma-dangle': 0, 'comma-dangle': 0,
'space-before-function-paren': [0, 'always'], 'space-before-function-paren': [0, 'always'],
}, },
......
.flowconfig 0 → 100644
[ignore]
.*/test/.*
.*/build/.*
.*/config/.*
[include]
[libs]
[options]
module.file_ext=.vue
module.file_ext=.js
module.file_ext=.scss
\ No newline at end of file
config/dev.env.js
...@@ -6,5 +6,5 @@ module.exports = merge(prodEnv, { ...@@ -6,5 +6,5 @@ module.exports = merge(prodEnv, {
'NODE_ENV': "'development'", 'NODE_ENV': "'development'",
'host': "'//localhost'", 'host': "'//localhost'",
'project': "'crm/vue'", 'project': "'crm/vue'",
'requestUrl': "'mina'" 'requestUrl': "'crm'"
}) })
config/prod.dev.env.js
module.exports = { module.exports = {
"host": "'//wxapp.hotwind.net'", "host": "'//wxapp.hotwind.net'",
'project': "'crm/vue'", 'project': "'crm/vue'",
'requestUrl': "'mina'" 'requestUrl': "'crm'"
} }
config/prod.prod.env.js
module.exports = { module.exports = {
"host": "'//wxapp.hotwind.net'", "host": "'//wxapp.hotwind.net'",
'project': "'crm/vue'", 'project': "'crm/vue'",
'requestUrl': "'mina'" 'requestUrl': "'crm'"
} }
config/prod.uat.env.js
module.exports = { module.exports = {
"host": "'//10.0.16.178:8080'", host: "'//10.0.16.178:8080'",
'project': "'crm/vue'", project: "'crm/vue'",
'requestUrl': "'mina'" requestUrl: "'crm'",
} }
package.json
...@@ -10,30 +10,37 @@ ...@@ -10,30 +10,37 @@
"lint": "eslint --fix --ext .js,.vue src", "lint": "eslint --fix --ext .js,.vue src",
"build:dev": "node build/build.js --env=dev", "build:dev": "node build/build.js --env=dev",
"build:uat": "node build/build.js --env=uat", "build:uat": "node build/build.js --env=uat",
"build": "node build/build.js --env=prod" "build": "node build/build.js --env=prod",
"flow": "flow"
}, },
"dependencies": { "dependencies": {
"animate.css": "^3.7.0", "animate.css": "^3.7.0",
"axios": "^0.18.0", "axios": "^0.18.0",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"cross-storage": "^1.0.0",
"echarts": "^4.2.0-rc.2", "echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.9", "element-ui": "^2.4.9",
"jquery": "^3.3.1", "jquery": "^3.3.1",
"moment": "^2.22.2", "moment": "^2.22.2",
"rxjs": "^6.3.3",
"underscore": "^1.9.1", "underscore": "^1.9.1",
"v-charts": "^1.19.0", "v-charts": "^1.19.0",
"velocity-animate": "^1.5.0", "velocity-animate": "^1.5.0",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-rx": "^6.0.1",
"vuex": "^3.0.1" "vuex": "^3.0.1"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^7.1.2", "autoprefixer": "^7.1.2",
"babel-core": "^6.22.1", "babel-core": "^6.22.1",
"babel-eslint": "^8.2.1", "babel-eslint": "^8.2.6",
"babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1", "babel-loader": "^7.1.1",
"babel-plugin-syntax-flow": "^6.18.0",
"babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0", "babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2", "babel-preset-env": "^1.3.2",
...@@ -42,17 +49,22 @@ ...@@ -42,17 +49,22 @@
"compression-webpack-plugin": "^1.1.12", "compression-webpack-plugin": "^1.1.12",
"copy-webpack-plugin": "^4.0.1", "copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0", "css-loader": "^0.28.0",
"eslint": "^4.15.0", "eslint": "^4.19.1",
"eslint-config-standard": "^10.2.1", "eslint-config-standard": "^10.2.1",
"eslint-config-vue": "^2.0.2",
"eslint-friendly-formatter": "^3.0.0", "eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1", "eslint-loader": "^1.7.1",
"eslint-plugin-flowtype-errors": "^3.6.0",
"eslint-plugin-html": "^4.0.6",
"eslint-plugin-import": "^2.7.0", "eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0", "eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0", "eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1", "eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0", "eslint-plugin-vue": "^4.7.1",
"extract-text-webpack-plugin": "^3.0.0", "extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4", "file-loader": "^1.1.4",
"flow-bin": "^0.86.0",
"flow-webpack-plugin": "^1.2.0",
"friendly-errors-webpack-plugin": "^1.6.1", "friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1", "html-webpack-plugin": "^2.30.1",
"less": "^3.8.1", "less": "^3.8.1",
......
src/App.vue
<template> <template>
<div id="app"> <div id="app" v-if="project">
<router-view /> <router-view />
</div> </div>
</template> </template>
<script> <script>
import {mapGetters, mapActions} from 'vuex'
export default { export default {
name: 'App' name: 'App',
created () {
this.getProjectInfo()
},
computed: {
...mapGetters({
menus: 'getMenus',
project: 'getProjectInfo'
})
},
methods:{
...mapActions([
'getProjectInfo'
])
}
} }
</script> </script>
...@@ -15,6 +31,6 @@ export default { ...@@ -15,6 +31,6 @@ export default {
/** 重置element-ui theme **/ /** 重置element-ui theme **/
$--color-primary: #337ab7 !default; $--color-primary: #337ab7 !default;
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index"; @import "~element-ui/packages/theme-chalk/src/index";
</style> </style>
src/api/global/index.js
import { Http } from '@/http' import { Http } from '@/http'
class Global extends Http { class Global extends Http {
getMenus (params) { getMenus(params) {
return this.get('getMenus', params) return this.get('getMenus', params)
} }
getProjectInfo() {
return this.get('securityManage/menuList!getStoreInfo.do')
}
} }
export default new Global(true) export default new Global(true)
src/components/Header/index.vue
...@@ -34,8 +34,8 @@ ...@@ -34,8 +34,8 @@
.opration-list--item.clearfix(v-for='opration in oprations ') .opration-list--item.clearfix(v-for='opration in oprations ')
.name.fl(@click="gotoPage(opration.link)") {{opration.name}} .name.fl(@click="gotoPage(opration.link)") {{opration.name}}
a.link(slot="reference") a.link(slot="reference")
img.user-img(':src'="user.headerImage") img.user-img(':src'="project.user_logo")
span.user-name {{user.name}} span.user-name {{project.StoreShortName}}
i.fa.fa-angle-down i.fa.fa-angle-down
li.nav-item.fr li.nav-item.fr
a.link(@click="showMessage()") a.link(@click="showMessage()")
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
popper-class="helpers-popper", popper-class="helpers-popper",
trigger="click") trigger="click")
.helpers-body .helpers-body
.helper-list--item.clearfix(v-for='help in helpers ') .helper-list--item.clearfix(v-for='help in helpers ',@click="handlerHelperClick(help)")
i.fa.fl.helper-item--icon(:class="help.icon",:style="help.style",style={width:'22px',height:'22px'}) i.fa.fl.helper-item--icon(:class="help.icon",:style="help.style",style={width:'22px',height:'22px'})
.name.fl {{help.name}} .name.fl {{help.name}}
a.link(slot="reference") a.link(slot="reference")
...@@ -278,9 +278,12 @@ ...@@ -278,9 +278,12 @@
} }
</style> </style>
<script> <script>
import {setCookie, getCookie} from '@/utils'
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
import message from './message' import message from './message'
require('@/lib/slimscroll/slimscroll') require('@/lib/slimscroll/slimscroll')
export default { export default {
name: 'headerNav', name: 'headerNav',
data () { data () {
...@@ -288,22 +291,22 @@ export default { ...@@ -288,22 +291,22 @@ export default {
showMenusPanel: false, showMenusPanel: false,
showEditMenusPanel: false, showEditMenusPanel: false,
showMessagePanelcontrol: null, showMessagePanelcontrol: null,
currentIndexPath: [1,2,0],
currentSelectIndex: -1, currentSelectIndex: -1,
oprations: [{name: '修改密码', link: 'http://www.baidu.com'}, {name: '安全退出', link: 'http://www.baidu.com'}], oprations: [{name: '修改密码', link: 'http://www.baidu.com'}, {name: '安全退出', link: 'http://www.baidu.com'}],
helpers: [{ helpers: [{
name: '点击联系客服', name: '点击联系客服',
link:'http://wpa.qq.com/msgrd?v=3&uin=2844377940&site=qq&menu=yes',
icon: 'fa-qq', icon: 'fa-qq',
style: {background: '#ff9293', color: '#fff'} style: {background: '#ff9293', color: '#fff'}
}, {name: '使用帮助', }, {name: '使用帮助',
link:'http://help.bigaka.com/',
style: {background: '#40b0ff', color: '#fff'}, style: {background: '#40b0ff', color: '#fff'},
icon: 'fa-info'}, icon: 'fa-info'},
{name: '舞象客服', {name: '舞象客服',
link:'http://help.bigaka.com/',
style: {background: '#e0e0e0', color: '#000'}, style: {background: '#e0e0e0', color: '#000'},
icon: 'fa-user-circle-o'}], icon: 'fa-user-circle-o'}],
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'}] 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'}]
} }
}, },
...@@ -329,6 +332,7 @@ export default { ...@@ -329,6 +332,7 @@ export default {
} }
}, },
...mapGetters({ ...mapGetters({
project: 'getProjectInfo',
menus: 'getMenus', menus: 'getMenus',
editMenus: 'getEditMenus', editMenus: 'getEditMenus',
sidebarUnfoldInfo: 'getSidebarUnfoldInfo' sidebarUnfoldInfo: 'getSidebarUnfoldInfo'
...@@ -338,41 +342,16 @@ export default { ...@@ -338,41 +342,16 @@ export default {
message message
}, },
mounted () { mounted () {
this.$nextTick(() => { const index = getCookie('cur_menu_index')
this.initSlimscroll() const indexPath = index.split(',').reverse()
}) this.currentSelectIndex = indexPath[1]
}, },
methods: { methods: {
...mapActions([ ...mapActions([
'showEditMenus', 'showEditMenus',
'hideEditMenus' 'hideEditMenus'
]), ]),
initSlimscroll () {
$('.message-panel.el-notification').slimScroll({
width: '100%', // 可滚动区域宽度
height: '100%', // 可滚动区域高度
size: '10px', // 滚动条宽度，即组件宽度
color: '#000', // 滚动条颜色
position: 'right', // 组件位置：left/right
distance: '0px', // 组件与侧边之间的距离
start: 'top', // 默认滚动位置：top/bottom
opacity: 0.4, // 滚动条透明度
alwaysVisible: true, // 是否 始终显示组件
disableFadeOut: false, // 是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
railVisible: true, // 是否 显示轨道
railColor: '#333', // 轨道颜色
railOpacity: 0.2, // 轨道透明度
railDraggable: true, // 是否 滚动条可拖动
railClass: 'slimScrollRail', // 轨道div类名
barClass: 'slimScrollBar', // 滚动条div类名
wrapperClass: 'slimScrollDiv', // 外包div类名
allowPageScroll: true, // 是否 使用滚轮到达顶端/底端时，滚动窗口
wheelStep: 20, // 滚轮滚动量
touchScrollStep: 200, // 滚动量当用户使用手势
borderRadius: '7px', // 滚动条圆角
railBorderRadius: '7px' // 轨道圆角
})
},
clickItem () { clickItem () {
console.log('this is header index %o', this) console.log('this is header index %o', this)
}, },
...@@ -415,10 +394,16 @@ export default { ...@@ -415,10 +394,16 @@ export default {
formatPathString (...args) { formatPathString (...args) {
return args.join('-') return args.join('-')
}, },
handlerHelperClick (item) {
this.$router.push({
path: `/${item.link}`
})
},
gotoPage (link) { gotoPage (link) {
if (link) { this.$router.push({
location.href = link path: `/${link}`
} })
} }
} }
} }
......
src/components/Header/message.vue
...@@ -4,12 +4,9 @@ ...@@ -4,12 +4,9 @@
<div id="pullDown"> <div id="pullDown">
<span class="pullDownIcon" style="display: none"></span><span class="pullDownLabel">释放刷新</span> <span class="pullDownIcon" style="display: none"></span><span class="pullDownLabel">释放刷新</span>
</div> </div>
<ul id="thelist" <ul id="thelist">
@mouseup="handlerMouseUp($event)" <li v-for="(item, index) in items" :data-index="index" class="message-item"
@mousedown="handlerMousedown($event)" :key="index">
>
<li v-for="(item, index) in items" class="message-item"
:key="index" @click="openMessageContent(item,$event)">
<div class="message-item-title">{{item.title}}</div> <div class="message-item-title">{{item.title}}</div>
<div class="message-desc">{{item.content_text}}</div> <div class="message-desc">{{item.content_text}}</div>
<div class="message-desc">{{item.push_time | fomatDate}}</div> <div class="message-desc">{{item.push_time | fomatDate}}</div>
...@@ -23,11 +20,14 @@ ...@@ -23,11 +20,14 @@
</template> </template>
<script> <script>
import {Observable} from 'rxjs'
import {throttleTime, switchMap, filter} from 'rxjs/operators'
require('@/lib/iscroll/iscroll') require('@/lib/iscroll/iscroll')
const IScroll = window.iScroll const IScroll = window.iScroll
let pullDownEl, pullDownOffset, pullUpEl, pullUpOffset let pullDownEl, pullDownOffset, pullUpEl, pullUpOffset
export default { export default {
name: 'message', name: 'message',
subscriptions () {},
data () { data () {
return { return {
items: [], items: [],
...@@ -48,7 +48,10 @@ export default { ...@@ -48,7 +48,10 @@ export default {
computed: {}, computed: {},
mounted () { mounted () {
this.$nextTick(() => { this.$nextTick(() => {
this.loaded() this.bindMessageTapEvent()
setTimeout(() => {
this.initSlimscroll()
},100)
}) })
}, },
methods: { methods: {
...@@ -78,7 +81,7 @@ export default { ...@@ -78,7 +81,7 @@ export default {
this.isLastPage = true this.isLastPage = true
} }
} }
this.myScroll.refresh() this.loaded()
}, },
loaded () { loaded () {
pullDownEl = document.getElementById('pullDown') pullDownEl = document.getElementById('pullDown')
...@@ -86,8 +89,19 @@ export default { ...@@ -86,8 +89,19 @@ export default {
pullUpEl = document.getElementById('pullUp') pullUpEl = document.getElementById('pullUp')
pullUpOffset = pullUpEl.offsetHeight pullUpOffset = pullUpEl.offsetHeight
this.myScroll = new IScroll('wrapper', { this.myScroll = new IScroll('wrapper', {
probeType: 2, // probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。
scrollbars: true, // 有滚动条
mouseWheel: true, // 允许滑轮滚动
fadeScrollbars: true, // 滚动时显示滚动条，默认影藏，并且是淡出淡入效果
bounce: true, // 边界反弹
interactiveScrollbars: true, // 滚动条可以拖动
shrinkScrollbars: 'scale', // 当滚动边界之外的滚动条是由少量的收缩。'clip' or 'scale'.
click: true, // 允许点击事件
tap: true, // 允许tap事件
keyBindings: true, // 允许使用按键控制
momentum: true, // 允许有惯性滑动,
scrollbarClass: 'myScrollbar' /* 重要样式 */, scrollbarClass: 'myScrollbar' /* 重要样式 */,
useTransition: false /* 此属性不知用意，本人从true改为false */, useTransition: true /* 此属性不知用意，本人从true改为false */,
topOffset: pullDownOffset, topOffset: pullDownOffset,
onRefresh: () => { onRefresh: () => {
this.$nextTick(() => { this.$nextTick(() => {
...@@ -100,6 +114,7 @@ export default { ...@@ -100,6 +114,7 @@ export default {
? '没有更多数据' ? '没有更多数据'
: '释放加载' : '释放加载'
} }
}) })
}, },
onScrollMove: function () { onScrollMove: function () {
...@@ -150,12 +165,38 @@ export default { ...@@ -150,12 +165,38 @@ export default {
false false
) )
}, },
handlerMouseUp(event) { handlerKeydown(event) {
this.eventMouseStarEl = event.target this.eventMouseStarEl = event.target
this.eventType = '' this.eventType = ''
console.log(event)
}, },
handlerMousedown(event) { bindMessageTapEvent () {
const clickEl$ = Observable.create(observer => {
$('body').on('click','.message-item',(event) => {
// const item = $(event.currentTarget)
observer.next(event)
})
})
const mousemoveEl$ = Observable.create(observer => {
$('body').on('mousemove','.message-item',(event) => {
// const item = $(event.currentTarget)
observer.next(event)
})
})
mousemoveEl$.pipe(
switchMap(ev => clickEl$),
throttleTime(300),
filter(ev => ev.type === 'click')
)
.subscribe(event => {
const index = $(event.currentTarget).data('index')
const item = this.items[index]
this.openMessageContent(item)
},(ev) => {
console.log(ev)
})
},
handlerKeypress(event) {
this.eventMouseEndEl = event.target this.eventMouseEndEl = event.target
console.log(event) console.log(event)
if (this.eventMouseStarEl && this.eventMouseStarEl === this.eventMouseEndEl) { if (this.eventMouseStarEl && this.eventMouseStarEl === this.eventMouseEndEl) {
...@@ -163,7 +204,7 @@ export default { ...@@ -163,7 +204,7 @@ export default {
} else { } else {
this.eventType = 'mousemove' this.eventType = 'mousemove'
} }
this.eventMouseStarEl = this.eventMouseEndEl = null // this.eventMouseStarEl = this.eventMouseEndEl = null
}, },
pullDownAction () { pullDownAction () {
this.items = [] this.items = []
...@@ -176,18 +217,80 @@ export default { ...@@ -176,18 +217,80 @@ export default {
this.getListDataFromNet() this.getListDataFromNet()
}, },
initSlimscroll () {
$('#wrapper').slimScroll({
width: '100%', // 可滚动区域宽度
height: '700px', // 可滚动区域高度
size: '10px', // 滚动条宽度，即组件宽度
color: '#000', // 滚动条颜色
position: 'right', // 组件位置：left/right
distance: '0px', // 组件与侧边之间的距离
start: 'top', // 默认滚动位置：top/bottom
opacity: 0.4, // 滚动条透明度
alwaysVisible: true, // 是否 始终显示组件
disableFadeOut: false, // 是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
railVisible: true, // 是否 显示轨道
railColor: '#333', // 轨道颜色
railOpacity: 0.2, // 轨道透明度
railDraggable: true, // 是否 滚动条可拖动
railClass: 'slimScrollRail', // 轨道div类名
barClass: 'slimScrollBar', // 滚动条div类名
wrapperClass: 'slimScrollDiv', // 外包div类名
allowPageScroll: true, // 是否 使用滚轮到达顶端/底端时，滚动窗口
wheelStep: 20, // 滚轮滚动量
touchScrollStep: 200, // 滚动量当用户使用手势
borderRadius: '7px', // 滚动条圆角
railBorderRadius: '7px' // 轨道圆角
})
},
openMessageContent (item) { openMessageContent (item) {
console.log(arguments) this.$alert(`<div><session class="model-body">${item.content}</session></div>`, '', {
if (this.eventType === 'click') { dangerouslyUseHTMLString: true,
this.$alert(`${item.content}`, '', { customClass: 'message-panel',
dangerouslyUseHTMLString: true, confirmButtonText: '知道了',
customClass: 'message-panel' title:item.title,
}) callback:(action) => {
} this.axios.post('http://testcenter.bigaka.net/b/store/notice!addNoticeUserRelationAction.do', {
params:{
"userId":"3956",
"noticeId":"68"
}
})
}
})
this.$nextTick(() => {
$(".el-message-box__message")
.slimscroll({
height: '530px',
distance: '10px',
alwaysVisible: false,
railVisible: true,
railColor: '#e1e1e1',
railOpacity: 1,
size: '6px',
color: '#77c2f7',
opacity: 1
})
})
} }
} }
} }
</script> </script>
<style>
.message-panel .el-message-box__title {
min-height: 16.428571429px;
padding: 15px;
border-bottom: 1px solid #e5e5e5;
}
.model-body {
position: relative;
overflow: hidden;
width: auto;
height: 500px;
}
</style>
<style scoped> <style scoped>
#wrapper { #wrapper {
......
src/components/Sidebar/index1.vue 0 → 100644
<template lang='pug'>
.sidebar-wrapper
.control(':class'="{open:sidebarUnfoldInfo,close:!sidebarUnfoldInfo}")
.sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()")
.logo
img(':src'="logo")
.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({
':icon':'item.ico',
':link':'item.link',
':type':'item.type',
':id':'item.id',
':name':'item.name',
':pid':'item.pid',
':grade':'item.grade',
':sort':'item.sort'
})
transition(name="fade",mode="out-in",appear)
.childrens-meuns('v-show'="sidebarUnfoldInfo",'v-if'="currentMenus")
.children-item
el-menu&attributes({
'ref':"menu",
'default-active':"2",
'class':"el-menu-vertical",
'background-color':"#374A5E",
'text-color':"#fff",
'unique-opened':true,
'active-text-color':"#fff",
'mode':'vertical',
'@select':"selectItemMenu"
})
el-submenu(':index'="index | toString",'v-for'="(it,index) in currentMenus.children",':key'="it.id",'@click'="choseChildrenItem(it)")
template(slot="title")
span {{it.name}}
template
el-menu-item(':index'="idx | pipeString(index)",'v-if'="it.children",'v-for'="(i,idx) in it.children",':key'="i.id",@click="choseSubChildren(i)")
span.menu-item-name {{i.name}}
.arrow-tip(':class'="{'left-l':!sidebarUnfoldInfo,'left-ll':sidebarUnfoldInfo}",'@click'="toggleUnfold()",'v-show'="unfoldBtn")
img(class='icon-arrow',':class'="{right:!sidebarUnfoldInfo}","src"='@/assets/images/sidebar/left-arrow-gray.png')
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { calcIndexPathByCurrentRouter } from '@/utils'
import sidebarItem from '../sidebarItem'
const CrossStorageClient = require('cross-storage').CrossStorageClient
const crmDomain = location.hostname
const crossStorage = new CrossStorageClient(`${crmDomain}/hub.jsp`, {
timeout: 5000,
frameId: 'storageFrame',
})
const logo = require('@/assets/images/sidebar/logo-blue.png')
export default {
data() {
return {
collapse: false,
logo,
// unfold: false, // 水平展开
unfoldBtn: false, // 展开按钮
}
},
filters: {
toString(value) {
return value + ''
},
pipeString(...args) {
return args.join('-')
},
},
components: {
sidebarItem,
},
computed: {
...mapGetters({
menus: 'getMenus',
currentPath: 'getCurrentPath',
project: 'getProjectInfo',
sidebarUnfoldInfo: 'getSidebarUnfoldInfo',
}),
currentMenusIndex() {
let res = -1
if (this.currentPath && this.currentPath.length) {
res = this.currentPath[0]
this.$nextTick(() => {
this.handleOpen()
})
}
return res
},
currentMenus: {
get() {
const currentIndex = this.currentMenusIndex
const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
this.$nextTick(() => {
if (this.currentMenus) {
this.handleOpen()
}
})
return currentMenus
},
},
},
mounted() {},
methods: {
handleOpen() {
const menus = this.$refs.menu
const openIndex = this.currentPath.length === 3 ? this.currentPath[1] : 0
menus.open(openIndex)
},
calcRouter(menus) {
const currentRoute = location.href
const indexPath = calcIndexPathByCurrentRouter(menus, currentRoute)
this.selectIndexPath = indexPath
console.log(this.selectIndexPath)
},
// 隐藏边侧栏，边侧栏最小化
handerNoSidebar() {
console.log('handerNoSidebar')
this.setSidebarUnfold(false)
},
/**
* 选择边测菜单主菜单
*/
choseMenu(selectItem, selectItemIndex) {
console.log('--', selectItem, selectItemIndex)
this.currentMenusIndex = selectItemIndex
console.log('current', this.currentMenusIndex)
if (!this.sidebarUnfoldInfo) {
this.toggleUnfold(true)
}
},
/**
* 二级菜单
**/
choseChildrenItem(item) {
if (item.link) {
this.$router.push({
path: `/${item.link}`,
})
}
},
/**
* 三级菜单
* @param args
**/
selectItemMenu(item) {
console.log(item)
const currentMenusIndex = this.currentMenusIndex
if (currentMenusIndex > -1) {
const [idx1, idx2] = item.split('-').reverse()
const historyItemName = this.menus[currentMenusIndex].children[idx1].children[idx2].name
const time = this.$moment().format('YYYY-MM-DD hh:mm:ss')
const storeId = this.project.store_id
const menuHistoryJson = localStorage.getItem('menuHistoryJson' + storeId)
? JSON.parse(localStorage.getItem('menuHistoryJson' + storeId))
: []
menuHistoryJson.push({
name: historyItemName,
time,
index: `${(currentMenusIndex, idx1, idx2)}`,
})
localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson))
crossStorage.onConnect().then(function() {
return crossStorage.set('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson))
})
}
},
toggleUnfold(...args) {
console.log(args)
if (!args.length) {
this.setSidebarUnfold(!this.sidebarUnfoldInfo)
} else {
this.setSidebarUnfold(args[0])
}
},
hiddenUnfoldBtn() {
this.unfoldBtn = false
},
showUnfoldBtn() {
this.unfoldBtn = true
},
choseSubChildren(item) {
this.$router.push({
path: `/${item.link}`,
})
},
getCurrentMenus(index) {
return this.menus[index]
},
...mapActions(['setSidebarUnfold']),
},
}
</script>
<style lang="stylus" scoped>
.sidebar-wrapper
position relative
height 100px
display inline-block
z-index 100
.sidebar
position fixed
left 0
top 0
bottom 0
width 70px
&::after
position absolute
top 0
left 0
bottom 0
right 0
content ''
background #2A3F54
z-index -1
.arrow-tip
position absolute
top 50%
width 48px
height 48px
line-height 48px
border-radius 50%
text-align center
background-color rgba(55, 74, 94, 0.5)
transform translateX(-50%)
transition all 0.2s
cursor pointer
z-index -2
&.left-l
left 70px
&.left-ll
left 240px
.icon-arrow
display inline-block
margin-left 15px
width 8px
&.right
transform rotateY(180deg)
.control
visibility hidden
height 100px
&.close
width 70px
transition width ease-in-out 0.2s
&.open
width 240px
transition width ease-in-out 0.2s
.logo
text-overflow ellipsis
overflow hidden
font-weight 400
font-size 22px
width 100%
color #ECF0F1
line-height 59px
display block
height 65px
margin 10px auto
padding-left 5px
padding-top 5px
img
width 60px
.item
position relative
display block
cursor pointer
text-align center
& + &
margin-bottom 6px
.active::after
display block
content ''
background #1ABB9C
width 5px
position absolute
right 0
top 10px
height 47px
.childrens-meuns
position absolute
top 0
left 70px
bottom 0
width 170px
background #374A5E
z-index -1
zoom 1
.children-item
text-align left
margin-bottom 6px
.el-menu
border-right none
.el-submenu .el-menu-item
min-width auto
.el-menu-item
position relative
padding 0 10px 0 36px
box-sizing border-box
&::before
box-sizing border-box
background #425668
bottom auto
content ''
height 9px
left 18px
margin-top 20px
position absolute
right auto
width 9px
z-index 1
border-radius 50%
&::after
box-sizing border-box
border-left 1px solid #425668
bottom 0
content ''
left 22px
position absolute
top 0
.menu-item-name
position relative
display block
font-weight 400
font-size 10px
</style>
src/components/menus/edit.vue
...@@ -93,10 +93,10 @@ export default { ...@@ -93,10 +93,10 @@ export default {
data () { data () {
return { return {
dialogFormVisible: false, dialogFormVisible: false,
selectList: [], selectList: [], // 已选择的条目，存的是路径 ['1-1-0','1-1-1']
tempSelectList: [], tempSelectList: [], // 没有点确定选择的临时条目，存的是路径 ['1-1-0','1-1-1']
quickItems: [], quickItems: [], // 已选择的条目，存的是选择的对象 [{},{}]
tempQuickItems: [], tempQuickItems: [], // 没有点确定选择的临时条目，存的是选择的对象 [{},{}]
limitLength: 10, limitLength: 10,
isSure: false isSure: false
} }
...@@ -147,7 +147,7 @@ export default { ...@@ -147,7 +147,7 @@ export default {
const totalLength = this.tempQuickItems.length + this.quickItems.length const totalLength = this.tempQuickItems.length + this.quickItems.length
if (this.limitLength < totalLength) { if (this.limitLength < totalLength) {
this.$message({ this.$message({
message: '最多选择十个快捷菜单', message: `最多选择${this.limitLength}个快捷菜单`,
type: 'warning' type: 'warning'
}) })
return false return false
...@@ -168,15 +168,6 @@ export default { ...@@ -168,15 +168,6 @@ export default {
this.tempQuickItems.slice(idx, 1) this.tempQuickItems.slice(idx, 1)
} }
} }
},
handlerLength (length) {
if (this.limitLength < length) {
this.$message({
message: '最多选择十个快捷菜单',
type: 'warning'
})
return false
}
} }
} }
} }
......
src/components/menus/menusTemplete.vue
<template lang="pug"> <template lang="pug">
.menus-templete .menus-templete
//- 快捷菜单设置菜单，有确定，取消按钮
el-row.meuns-nav el-row.meuns-nav
el-menu(@click="toggleMenus($event)")&attributes({ el-menu(@click="toggleMenus($event)")&attributes({
'default-active':"2", 'default-active':"2",
......
src/main.js
...@@ -19,17 +19,30 @@ import VCharts from 'v-charts' ...@@ -19,17 +19,30 @@ import VCharts from 'v-charts'
import plugins from './plugin' import plugins from './plugin'
import 'babel-polyfill' import 'babel-polyfill'
import VueRx from 'vue-rx'
Vue.use(VueRx)
Vue.use(ElementUI) Vue.use(ElementUI)
Vue.use(VCharts) Vue.use(VCharts)
Object.keys(plugins).forEach(key => {
const plugin = plugins[key]
Vue.use(plugin)
})
// 全局过滤器
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
Axios.defaults.withCredentials = true // 让ajax携带cookie Axios.defaults.withCredentials = true // 让ajax携带cookie
const AUTH_TOKEN = 'doX8dJusNpe3Tb77mzRhz2JgdCU' const AUTH_TOKEN = 'doX8dJusNpe3Tb77mzRhz2JgdCU'
Axios.defaults.headers.common['token'] = AUTH_TOKEN Axios.defaults.headers.common['token'] = AUTH_TOKEN
// axios 全局注入, request
Axios.interceptors.request.use( Axios.interceptors.request.use(
config => { config => {
if (config.method === 'post') { if (config.method === 'post') {
// config.data = qs.stringify(config.data)
config.headers['Content-Type'] = 'application/json' config.headers['Content-Type'] = 'application/json'
} }
return config return config
...@@ -39,22 +52,8 @@ Axios.interceptors.request.use( ...@@ -39,22 +52,8 @@ Axios.interceptors.request.use(
} }
) )
Object.keys(plugins).forEach(key => {
const plugin = plugins[key]
Vue.use(plugin)
})
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
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
......
src/pages/marketing-center/components/AddMessage.vue → src/pages/marketingCenter/components/AddMessage.vue
...@@ -67,19 +67,13 @@ ...@@ -67,19 +67,13 @@
</template> </template>
<script> <script>
export default { export default {
data() { methods: {
return {} handleAddMaterial() {
}, this.$router.push('addmarketing')
components: {}, },
computed: {}, handleAddTemp() {},
mounted() {}, handleAddMessage() {},
methods: { },
handleAddMaterial() {
this.$router.push('addmarketing')
},
handleAddTemp() {},
handleAddMessage() {},
},
} }
</script> </script>
<style lang='stylus' scoped> <style lang='stylus' scoped>
......
src/pages/marketing-center/components/MarketingPush.vue → src/pages/marketingCenter/components/MarketingPush.vue
...@@ -53,17 +53,6 @@ ...@@ -53,17 +53,6 @@
</div> </div>
</div> </div>
</template> </template>
<script>
export default {
data() {
return {}
},
components: {},
computed: {},
mounted() {},
methods: {},
}
</script>
<style lang='stylus' scoped> <style lang='stylus' scoped>
.marketing-title .marketing-title
height 177px height 177px
......
src/router/index.js
...@@ -7,29 +7,25 @@ export default new Router({ ...@@ -7,29 +7,25 @@ export default new Router({
base: `/${config.project}/`, base: `/${config.project}/`,
routes: [ routes: [
{ {
path: '/',
redirect: '/home',
component: () => import(/* webpackChunkName: 'wxhome' */ 'pages/home'),
},
{
path: '/login', path: '/login',
name: 'Login', name: 'Login',
component: () => import(/* webpackChunkName: 'wxlogin' */ 'pages/login'), component: () => import(/* webpackChunkName: 'wxlogin' */ '@/pages/login'),
}, },
{ {
path: '/home', path: '/salesCenter/activity/lotteryActivity.do',
name: 'Home', name: 'test',
component: () => import(/* web packChunkName: 'wxhome' */ 'pages/home'), component: () => import(/* web packChunkName: 'wxhome' */ '@/pages/home'),
children: [ children: [
{ {
path: 'marketing', path: 'marketing',
name: 'marketing', name: 'marketing',
component: () => import(/* webpackChunkName: 'marketing' */ 'pages/marketing-center'), component: () => import(/* webpackChunkName: 'marketing' */ '@/pages/marketingCenter'),
}, },
{ {
path: 'addmarketing', path: 'addmarketing',
name: 'addmarketing', name: 'addmarketing',
component: () => import(/* webpackChunkName: 'wxlogin' */ 'pages/addmarketing'),
component: () => import(/* webpackChunkName: 'wxlogin' */ '@/pages/addmarketing'),
}, },
], ],
}, },
......
src/store/global/index.js
import { globalApi } from '@/api' import { globalApi } from '@/api'
import { calcIndexPathByCurrentRouter } from '@/utils'
// 获取菜单数据 // 获取菜单数据
const GET_MEUMS = 'GET_MEUMS' const GET_MEUMS = 'GET_MEUMS'
...@@ -12,55 +13,95 @@ const HIDE_EDIT_MENUS = 'HIDE_EDIT_MENUS' ...@@ -12,55 +13,95 @@ const HIDE_EDIT_MENUS = 'HIDE_EDIT_MENUS'
// 边侧菜单 // 边侧菜单
const SIDEBAR_UNFOLD = 'SIDEBAR_UNFOLD' const SIDEBAR_UNFOLD = 'SIDEBAR_UNFOLD'
// 基本信息
const GET_PROJECT_INFO = 'GET_PROJECT_INFO'
//
const CALC_TOUTER_INDEX = 'CALC_TOUTER_INDEX'
const state = { const state = {
menus: [], menus: [],
editMenus: false, editMenus: false,
sidebarUnfold: false // false:边侧菜单收缩, true:边侧菜单展开 projectInfo: null,
currentPath: [],
sidebarUnfold: true // false:边侧菜单收缩, true:边侧菜单展开
} }
const actions = { const actions = {
async getMenus ({ async getMenus({
commit, dispatch commit, dispatch
}, parmas) { }, parmas) {
let res = await globalApi.getMenus(parmas) let res = await globalApi.getMenus(parmas)
let menus = res.data.data let menus = res.data.data
dispatch('calcIndexPathByrouter', menus)
commit(GET_MEUMS, menus) commit(GET_MEUMS, menus)
}, },
showEditMenus ({commit}) { showEditMenus({ commit }) {
commit(SHOW_EDIT_MENUS, true) commit(SHOW_EDIT_MENUS, true)
}, },
hideEditMenus ({commit}) { hideEditMenus({ commit }) {
commit(HIDE_EDIT_MENUS, false) commit(HIDE_EDIT_MENUS, false)
}, },
setSidebarUnfold ({commit}, type) { setSidebarUnfold({ commit }, type) {
commit(SIDEBAR_UNFOLD, type) commit(SIDEBAR_UNFOLD, type)
},
calcIndexPathByrouter ({commit}, menus) {
const currentRoute = location.href
const indexPath = calcIndexPathByCurrentRouter(menus, currentRoute)
console.log('this is indexPath %O', indexPath)
commit(CALC_TOUTER_INDEX, indexPath)
// calcIndexPathByCurrentRouter(menus)
},
async getProjectInfo({ commit, dispatch }) {
let res = await globalApi.getProjectInfo()
let projectInfo = res.data
commit(GET_PROJECT_INFO, projectInfo)
} }
} }
const getters = { const getters = {
getMenus (state) { getMenus(state) {
return state.menus return state.menus
}, },
getEditMenus (state) { getEditMenus(state) {
return state.editMenus return state.editMenus
}, },
getSidebarUnfoldInfo (state) { getSidebarUnfoldInfo(state) {
return state.sidebarUnfold return state.sidebarUnfold
},
getProjectInfo(state) {
return state.projectInfo
},
getCurrentMenus(state) {
return state.currentMenus
},
getCurrentPath (state) {
return state.currentPath
} }
} }
const mutations = { const mutations = {
[GET_MEUMS] (state, menus) { [GET_MEUMS](state, menus) {
state.menus = menus state.menus = [...menus]
}, },
[SHOW_EDIT_MENUS] (state, status) {
[SHOW_EDIT_MENUS](state, status) {
state.editMenus = status state.editMenus = status
}, },
[HIDE_EDIT_MENUS] (state, status) { [HIDE_EDIT_MENUS](state, status) {
state.editMenus = status state.editMenus = status
}, },
[SIDEBAR_UNFOLD] (state, type) { [SIDEBAR_UNFOLD](state, type) {
state.sidebarUnfold = type state.sidebarUnfold = type
},
[GET_PROJECT_INFO](state, projectInfo) {
state.projectInfo = { ...projectInfo }
},
[CALC_TOUTER_INDEX](state, indexPath) {
console.log('this is CALC_TOUTER_INDEX %o', indexPath)
state.currentPath = [...indexPath]
} }
} }
......
src/tool/api.js
export default { export default {
getMaterialsList: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/materials-list', // 营销中心
getPushList: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/medialist', getMaterialsList: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/materials-list', // 获取图文素材列表
getarticlesummary: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/getarticlesummary', getPushList: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/medialist', // 获取图文推送列表
getarticlesummary: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/getarticlesummary', // 获取图文分析数据接口
getTempList: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/list-data', // 营销模板列表
add: {
save: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/save', // 确认推送
tagCount: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/tag-count', // 标签数量
customerCacheList: 'http://testcenter.bigaka.net/crm/back/tag/customer-cache-list', // 标签列表
getPreViewCount: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/pre_view_count', // 图文推送预览人数
},
} }
// export default {
// getCode: 'http://rap2api.taobao.org/app/mock/115626/materials-list',
// getPush: 'http://rap2api.taobao.org/app/mock/115626/list-data',
// getData: 'http://rap2api.taobao.org/app/mock/115626/getarticlesummary',
// getTagCount: 'http://rap2api.taobao.org/app/mock/115626/testCount',
// getAllTag: '',
// }
src/tool/http.js
...@@ -2,7 +2,9 @@ import axios from 'axios' ...@@ -2,7 +2,9 @@ import axios from 'axios'
// import qs from 'qs' // import qs from 'qs'
axios.interceptors.request.use( axios.interceptors.request.use(
config => { config => {
// loading if (config.method === 'post') {
config.headers['Content-Type'] = 'application/json'
}
return config return config
}, },
error => { error => {
...@@ -49,7 +51,6 @@ export default { ...@@ -49,7 +51,6 @@ export default {
return axios({ return axios({
method: 'post', method: 'post',
url: url, url: url,
// data: qs.stringify(data),
data: data, data: data,
timeout: 10000, timeout: 10000,
headers: { headers: {
......
src/utils/index.js
import date from './moment' export function setCookie(name, value, exptime) {
const ctx = location.hostname
var now = new Date()
var time = now.getTime()
var anhour = (exptime + 8) * 3600
time += anhour * 1000
now.setTime(time)
document.cookie = name + '=' + value + ';path=' + ctx + '/;expires=' + now.toUTCString()
}
export function getCookie(name) {
const cArr = document.cookie.split('; ')
for (var i = 0; i < cArr.length; i++) {
let cArr2 = cArr[i].split('=')
if (cArr2[0] === name) {
return cArr2[1]
}
}
return ''
}
export const M = date // 获取边侧栏路径indexPath与点击跳转链接link的mapping
export function indexPathMapping(menus = [], mapping = {}, indexPath = []) {
menus.forEach((item, index) => {
let indexTemp = [...indexPath]
indexTemp.push(index)
if (item.children && indexPath <= 3) {
indexPathMapping(item.children, mapping, indexTemp)
}
if (item.link) {
let link = item.link
mapping[link] = indexTemp
}
})
}
export function calcIndexPathByRouter(mapping = {}, route = '') {
console.log(route)
console.log('this is mapping %o', mapping)
const key = Object.keys(mapping).filter(item => route.indexOf(item) > -1)[0]
console.log('this is key %o', mapping[key])
return mapping[key]
}
export function calcIndexPathByCurrentRouter(menus = [], currentRoute = '') {
let indexPathMappingWithLink = {}
indexPathMapping(menus, indexPathMappingWithLink)
return calcIndexPathByRouter(indexPathMappingWithLink, currentRoute)
}
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