Skip to content

C
common-templete
Commit f0d9ae78 by tangqy
Options

Merge branch 'dev' of ssh://gitlab.bigaka.net:2287/Caden/common-templete into dev

parents 91db5aa0 9050efb0
Showing with 1367 additions and 657 deletions
.eslintrc.js
......@@ -3,7 +3,7 @@
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
parser: 'babel-eslint',
},
env: {
browser: true,
......@@ -13,17 +13,22 @@ module.exports = {
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
'standard',
],
globals: {
$: true
},
// required to lint *.vue files
plugins: [
'vue'
],
plugins: ['vue'],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// 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-tabs': 'off',
'comma-dangle': 0,
'space-before-function-paren': [0, 'always'],
},
}
build/webpack.dev.conf.js
......@@ -48,6 +48,10 @@ const devWebpackConfig = merge(baseWebpackConfig, {
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
......
build/webpack.prod.conf.js
......@@ -11,7 +11,9 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
......@@ -23,8 +25,9 @@ const webpackConfig = merge(baseWebpackConfig, {
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
path: path.resolve(__dirname, `../dist/${env.project.replace(/['"]/g, "")}`),//config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
publicPath: ['', env.project.replace(/['"]/g, ""), ''].join('/'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
......@@ -32,6 +35,10 @@ const webpackConfig = merge(baseWebpackConfig, {
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
......@@ -61,7 +68,9 @@ const webpackConfig = merge(baseWebpackConfig, {
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: path.resolve(__dirname, `../dist/${env.project.replace(/['"]/g, "")}/index.html`),
template: 'index.html',
inject: true,
minify: {
......@@ -81,7 +90,7 @@ const webpackConfig = merge(baseWebpackConfig, {
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
minChunks(module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
......
config/config.request.js deleted 100644 → 0
module.exports = {
config: [{
project: '',
requestUrl: ''
}]
}
\ No newline at end of file
config/dev.env.js
......@@ -3,5 +3,8 @@ const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
'NODE_ENV': "'development'",
'host': "'//localhost'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
})
config/index.js
......@@ -6,30 +6,33 @@ const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/materials-list': {
changeOrigin: true, // 是否跨域
target: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/materials-list',
'/api': {
target: 'http://wxapp.hotwind.net', // 接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/materials-list': '/',
},
'^/api': ''
}
},
'/getarticlesummary': {
changeOrigin: true, // 是否跨域
target: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/getarticlesummary',
'/hot': {
target: 'http://10.0.19.146:8080', // 接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/getarticlesummary': '/',
},
},
'^/hot': ''
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
......@@ -54,7 +57,7 @@ module.exports = {
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true,
cssSourceMap: true
},
build: {
......@@ -64,7 +67,8 @@ module.exports = {
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// assetsPublicPath: '/minapro/vue/', // '/minapro/vue/'
assetsPublicPath: '',
/**
* Source Maps
......@@ -85,6 +89,6 @@ module.exports = {
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report,
},
bundleAnalyzerReport: process.env.npm_config_report
}
}
config/prod.dev.env.js 0 → 100644
module.exports = {
"host": "'//wxapp.hotwind.net'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
}
config/prod.env.js
'use strict'
const yargs = require('yargs').argv
const env = yargs.env
let path = './prod.prod.env'
if (env === 'dev') {
path = './prod.dev.env'
} else if (env === 'uat') {
path = './prod.uat.env'
}
const envConfig = require(path)
module.exports = {
NODE_ENV: '"production"'
NODE_ENV: '"production"',
...envConfig
}
config/prod.prod.env.js 0 → 100644
module.exports = {
"host": "'//wxapp.hotwind.net'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
}
config/prod.uat.env.js 0 → 100644
module.exports = {
"host": "'//10.0.16.178:8080'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
}
package.json
......@@ -8,13 +8,16 @@
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --fix --ext .js,.vue src",
"build": "node build/build.js"
"build:dev": "node build/build.js --env=dev",
"build:uat": "node build/build.js --env=uat",
"build": "node build/build.js --env=prod"
},
"dependencies": {
"animate.css": "^3.7.0",
"axios": "^0.18.0",
"echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.9",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"underscore": "^1.9.1",
"v-charts": "^1.19.0",
......@@ -78,7 +81,8 @@
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
"webpack-merge": "^4.1.0",
"yargs": "^12.0.1"
},
"engines": {
"node": ">= 6.0.0",
......
src/components/Header/index.vue
......@@ -38,7 +38,7 @@
span.user-name {{user.name}}
i.fa.fa-angle-down
li.nav-item.fr
a.link
a.link(@click="showMessage()")
i.fa.fa-envelope-o
li.nav-item.fr
el-popover(
......@@ -242,14 +242,52 @@
border-radius: 5px;
margin-right: 5px;
</style>
<style lang="scss">
.message-panel {
top: 70px !important;
padding-top: 0;
&.el-notification {
height: 864px;
width: 420px;
overflow: hidden;
}
&.el-message-box {
width: auto;
}
.el-notification__group {
width: 100%;
}
.el-notification__title {
height: 40px;
box-sizing: border-box;
line-height: 1;
position: relative;
background: #ffffff;
border-bottom: 1px solid #ddd;
z-index: 2;
padding: 10px 20px;
font-weight: bold;
font-size: 16px;
}
.el-notification__closeBtn {
z-index: 9;
}
}
</style>
<script>
import { mapGetters, mapActions } from 'vuex'
import message from './message'
require('@/lib/slimscroll/slimscroll')
export default {
name: 'headerNav',
data () {
return {
showMenusPanel: false,
showEditMenusPanel: false,
showMessagePanelcontrol: null,
currentSelectIndex: -1,
oprations: [{name: '修改密码', link: 'http://www.baidu.com'}, {name: '安全退出', link: 'http://www.baidu.com'}],
helpers: [{
......@@ -296,13 +334,64 @@ export default {
sidebarUnfoldInfo: 'getSidebarUnfoldInfo'
})
},
components: {
message
},
mounted () {
this.$nextTick(() => {
this.initSlimscroll()
})
},
methods: {
...mapActions([
'showEditMenus',
'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 () {
console.log(this)
console.log('this is header index %o', this)
},
showMessage () {
if (this.showMessagePanelcontrol) {
this.showMessagePanelcontrol.close()
this.showMessagePanelcontrol = null
} else {
const h = this.$createElement
this.showMessagePanelcontrol = this.$notify({
title: '消息中心',
message: h('message'),
duration: 0,
onClose: () => {
this.showMessagePanelcontrol = null
},
customClass: 'message-panel'
})
}
},
handleOpen () {},
handleClose () {},
......@@ -310,7 +399,7 @@ export default {
this.showMenusPanel = !this.showMenusPanel
},
toggleMenus (...args) {
console.log(args)
console.log('this is header toggleMenus %o', args)
},
handleEditMenus () {
if (!this.editMenus) {
......@@ -321,7 +410,7 @@ export default {
},
setActiveStyle (item, ev) {
this.currentSelectIndex = ev.index
console.log(item)
console.log('this is header setActiveStyle %o', item)
},
formatPathString (...args) {
return args.join('-')
......
src/components/Pagination/index.vue
<template>
<div class="block">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="dataList.totalCount">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" layout="total, prev, pager, next, jumper" :total="pushlist.totalCount">
</el-pagination>
</div>
</template>
......@@ -11,7 +11,7 @@ export default {
currentPage: 1
}
},
props: ['dataList'],
props: ['pushlist'],
methods: {
handleSizeChange (val) {
console.log(`每页 ${val} 条`)
......
src/components/Sidebar/index.vue
......@@ -16,7 +16,7 @@
':sort':'item.sort'
})
transition(name="fade",mode="out-in",appear)
.childrens-meuns('v-show'="unfold",'v-if'="currentMenus")
.childrens-meuns('v-show'="sidebarUnfoldInfo",'v-if'="currentMenus")
.children-item('v-for'="(it,index) in currentMenus.children",':key'="it.id",'@click'="choseChildrenItem(it)")
el-menu&attributes({
'default-active':"2",
......@@ -33,8 +33,8 @@
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':!unfold,'left-ll':unfold}",'@click'="toggleUnfold()",'v-show'="unfoldBtn")
img(class='icon-arrow',':class'="{right:!unfold}","src"='@/assets/images/sidebar/left-arrow-gray.png')
.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'
......@@ -64,7 +64,7 @@ export default {
},
mounted () {},
computed: {
...mapGetters({menus: 'getMenus'}),
...mapGetters({menus: 'getMenus', sidebarUnfoldInfo: 'getSidebarUnfoldInfo'}),
currentMenus: {
get () {
const currentIndex = this.currentMenusIndex
......@@ -88,14 +88,14 @@ export default {
* 二级菜单
**/
choseChildrenItem (...args) {
console.log(args)
console.log('this is sidebar 二级菜单 %o', args)
},
/**
* 三级菜单
* @param args
**/
selectItemMenu (...args) {
console.log(args)
selectItemMenu (item) {
console.log('this is sidebar 三级菜单 %o', item)
},
toggleUnfold (...args) {
if (!args.length) {
......@@ -111,8 +111,10 @@ export default {
showUnfoldBtn () {
this.unfoldBtn = true
},
choseSubChildren (...args) {
console.log(args)
choseSubChildren (item) {
this.$router.push({
path: `/${item.link}`
})
},
getCurrentMenus (index) {
return this.menus[index]
......
src/components/sidebarItem/index.vue
......@@ -13,21 +13,31 @@ export default {
props: ['icon', 'link', 'type', 'id', 'sort', 'name', 'pid', 'grade'],
methods: {
clickItem () {
console.log(this)
console.log('this is sidebar item %o', this)
if (this.link) {
this.$router.push({
path: `${this.link}`
})
}
}
}
}
</script>
<style lang="stylus" scoped>
.sidebar-item
display block
color: #fff
/*text-align center*/
font-weight 400
font-size 10px
padding 10px 5px
i
margin-bottom 5px
.fa
font-size 25px
.sidebar-item {
display: block;
color: #fff;
/* text-align center */
font-weight: 400;
font-size: 10px;
padding: 10px 5px;
i {
margin-bottom: 5px;
}
}
.fa {
font-size: 25px;
}
</style>
src/lib/iscroll/index.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll 实例：下拉刷新，滚动翻页</title>
<link rel="stylesheet" type="text/css" href="scrollbar.scss">
<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;
/**
* 下拉刷新 （自定义实现此方法）
* myScroll.refresh(); // 数据加载完成后，调用界面更新方法
*/
function pullDownAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
for (i=0; i<3; i++) {
li = document.createElement('li');
li.innerText = 'Generated row ' + (++generatedCount);
el.insertBefore(li, el.childNodes[0]);
}
myScroll.refresh(); //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
/**
* 滚动翻页 （自定义实现此方法）
* myScroll.refresh(); // 数据加载完成后，调用界面更新方法
*/
function pullUpAction () {
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById('thelist');
for (i=0; i<3; i++) {
li = document.createElement('li');
li.innerText = 'Generated row ' + (++generatedCount);
el.appendChild(li, el.childNodes[0]);
}
myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // <-- Simulate network congestion, remove setTimeout from production!
}
/**
* 初始化iScroll控件
*/
function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll('wrapper', {
scrollbarClass: 'myScrollbar', /* 重要样式 */
useTransition: false, /* 此属性不知用意，本人从true改为false */
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
pullUpAction(); // Execute custom function (ajax call?)
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
//初始化绑定iScroll控件
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#header {
position:absolute;
top:0; left:0;
width:100%;
height:45px;
line-height:45px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
#header a {
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position:absolute;
bottom:0; left:0;
width:100%;
height:48px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
padding:0;
border-top:1px solid #444;
}
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px; left:0;
width:100%;
background:#555;
overflow:auto;
}
#scroller {
position:relative;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
/**
*
* 下拉样式 Pull down styles
*
*/
#pullDown, #pullUp {
background:#fff;
height:40px;
line-height:40px;
padding:5px 10px;
border-bottom:1px solid #ccc;
font-weight:bold;
font-size:14px;
color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon {
display:block; float:left;
width:40px; height:40px;
background:url(pull-icon@2x.png) 0 0 no-repeat;
-webkit-background-size:40px 80px; background-size:40px 80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:250ms;
}
#pullDown .pullDownIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullDown.flip .pullDownIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullUp.flip .pullUpIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
background-position:0 100%;
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-transition-duration:0ms;
-webkit-animation-name:loading;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
@-webkit-keyframes loading {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
}
</style>
</head>
<body>
<div id="header">
<a href="../db.html#page2">iScroll实例：下拉刷新，滚动翻页</a>
</div>
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
</div>
<ul id="thelist">
<li>Pretty row 1</li>
<li id="aaa">Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li>Pretty row 11</li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
<li>Pretty row 21</li>
<li>Pretty row 22</li>
<li>Pretty row 23</li>
<li>Pretty row 24</li>
<li>Pretty row 25</li>
<li>Pretty row 26</li>
<li>Pretty row 27</li>
<li>Pretty row 28</li>
<li>Pretty row 29</li>
<li>Pretty row 30</li>
<li>Pretty row 31</li>
<li>Pretty row 32</li>
<li>Pretty row 33</li>
<li>Pretty row 34</li>
<li>Pretty row 35</li>
<li>Pretty row 36</li>
<li>Pretty row 37</li>
<li>Pretty row 38</li>
<li>Pretty row 39</li>
<li>Pretty row 40</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
src/lib/iscroll/scrollbar.scss 0 → 100644
/*------------- S 默认必须样式 -------------*/
/**
*
* 下拉样式 Pull down styles
*
*/
#pullDown, #pullUp {
background:#fff;
height:40px;
line-height:40px;
padding:5px 10px;
border-bottom:1px solid #ccc;
font-weight:bold;
font-size:14px;
color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon {
display:block; float:left;
width:40px; height:40px;
background:url(~@/lib/iscroll/pull-icon@2x.png) 0 0 no-repeat;
-webkit-background-size:40px 80px; background-size:40px 80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:250ms;
}
#pullDown .pullDownIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullDown.flip .pullDownIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullUp.flip .pullUpIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
background-position:0 100%;
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-transition-duration:0ms;
-webkit-animation-name:loading;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
@-webkit-keyframes loading {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
}
/*------------- E 默认必须样式 -------------*/
/*------------- S 以下css主要是仿IOS滚动条样式(可选样式) -------------*/
/**
* Horizontal Scrollbar
*/
.myScrollbarH {
position:absolute;
z-index:100;
height:7px;
bottom:1px;
left:2px;
right:7px
}
.myScrollbarH > div {
height:100%;
}
/**
* Vertical Scrollbar
*/
.myScrollbarV {
position:absolute;
z-index:100;
width:7px;bottom:7px;top:2px;right:1px
}
.myScrollbarV > div {
width:100%;
}
/**
* Both Scrollbars
*/
.myScrollbarH > div,
.myScrollbarV > div {
position:absolute;
z-index:100;
/* The following is probably what you want to customize */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
border-width:3px;
-webkit-border-image:url(~@/lib/iscroll/scrollbar.png) 6 6 6 6;
-moz-border-image:url(~@/lib/iscroll/scrollbar.png) 6 6 6 6;
-o-border-image:url(~@/lib/iscroll/scrollbar.png) 6 6 6 6;
border-image:url(~@/lib/iscroll/scrollbar.png) 6 6 6 6;
}
/*------------- E 以上css主要是仿IOS滚动条样式 -------------*/
src/lib/mescroll/mescroll.min.css deleted 100644 → 0
/*! 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 deleted 100644 → 0
<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 deleted 100644 → 0
{
"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
......@@ -9,30 +9,27 @@ import './assets/styles/reset.css'
import './assets/styles/common.css'
import 'animate.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 * as filters from './filters'
// 引入echarts
import echarts from 'echarts'
// import echarts from 'echarts'
import VCharts from 'v-charts'
import plugins from './plugin'
Vue.use(ElementUI)
Vue.use(VCharts)
Axios.defaults.withCredentials = true // 让ajax携带cookie
// const AUTH_TOKEN =
// 'normal-template-group-id=; cur_menu_index=2,0,0; JSESSIONID=B2F75494E6A8EE17E02290C6BB416CD5; UM_distinctid=166ccdf0e5f70d-05e2e61a01177d-b79193d-1fa400-166ccdf0e6036f; CNZZDATA1259419277=1964719690-1541039590-http%253A%252F%252Ftestcenter.bigaka.net%252F%7C1541039590; Hm_lvt_e2d87cf3717dbcd37c38af18128178c1=1541035458,1541125643,1541400895; CNZZDATA1263189240=393444180-1541032734-http%253A%252F%252Ftestcenter.bigaka.net%252F%7C1541399561; Hm_lpvt_e2d87cf3717dbcd37c38af18128178c1=1541404581; token=QuY4MdyNXUjnOSmTTn17apD9vxc'
// const AUTH_TOKEN = 'QuY4MdyNXUjnOSmTTn17apD9vxc'
// Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
// Axios.defaults.headers.common['Cookie'] = AUTH_TOKEN
Axios.defaults.withCredentials = true // 让ajax携带cookie
const AUTH_TOKEN = 'doX8dJusNpe3Tb77mzRhz2JgdCU'
Axios.defaults.headers.common['token'] = AUTH_TOKEN
Axios.interceptors.request.use(
config => {
if (config.method === 'post') {
config.data = qs.stringify(config.data)
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
// config.data = qs.stringify(config.data)
config.headers['Content-Type'] = 'application/json'
}
return config
},
......@@ -41,8 +38,6 @@ Axios.interceptors.request.use(
}
)
Vue.use(ElementUI)
Object.keys(plugins).forEach(key => {
const plugin = plugins[key]
Vue.use(plugin)
......@@ -54,7 +49,7 @@ Object.keys(filters).forEach(key => {
Vue.config.productionTip = false
Vue.prototype.axios = Axios
Vue.prototype.$echarts = echarts
// Vue.prototype.$echarts = echarts
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
......
src/pages/marketing-center/components/AddMessage.vue
......@@ -5,7 +5,7 @@
<div class="left-title button-left" style="flex:2">
<div class="left-title-name fl">
<span>
<img src="./../../../assets/images/wechat.png">
<img src="@/assets/images/wechat.png">
</span>
<span class="title">微信触达域-公众号</span>
<span class="star-red">*</span>
......@@ -13,20 +13,20 @@
</div>
<div class="left-title-message fr">
<span>
<img src="./../../../assets/images/auth.png">
<img src="@/assets/images/auth.png">
</span>
</div>
</div>
<div class="left-icon">
<div class="icon-left fl">
<span class="icon-wechat" @click="handleAddMaterial">
<img src="./../../../assets/images/picture.png">
<img src="@/assets/images/picture.png">
</span>
<p class="title-center icon-wechat-msg">图文素材消息</p>
</div>
<div class="icon-right">
<span class="icon-wechat">
<img src="./../../../assets/images/temp.png" @click="handleAddTemp">
<img src="@/assets/images/temp.png" @click="handleAddTemp">
</span>
<p class="icon-wechat-msg title-center">营销模板消息</p>
</div>
......@@ -36,7 +36,7 @@
<div class="left-title button-right" style="flex:1">
<div class="left-title-name fl">
<span>
<img src="./../../../assets/images/message.png">
<img src="@/assets/images/message.png">
</span>
<span class="title">移动触达域-短信</span>
<span class="star-red">*</span>
......@@ -44,14 +44,14 @@
</div>
<div class="left-title-message fr">
<span>
<img src="./../../../assets/images/unauth.png">
<img src="@/assets/images/unauth.png">
</span>
</div>
</div>
<div class="right-marketing">
<div>
<span class="icon-wechat">
<img src="./../../../assets/images/message.png" @click="handleAddMessage">
<img src="@/assets/images/message.png" @click="handleAddMessage">
</span>
<p class="icon-wechat-msg title-center">短信营销消息</p>
</div>
......@@ -67,23 +67,19 @@
</template>
<script>
export default {
data () {
data() {
return {}
},
components: {},
computed: {},
mounted () {},
mounted() {},
methods: {
handleAddMaterial () {
handleAddMaterial() {
this.$router.push('addmarketing')
},
handleAddTemp () {
console.log('handleAddTemp')
handleAddTemp() {},
handleAddMessage() {},
},
handleAddMessage () {
console.log('handleAddMessage')
}
}
}
</script>
<style lang='stylus' scoped>
......
src/pages/marketing-center/components/ArticleChart.vue deleted 100644 → 0
<template>
<div>
<el-col :span="6">
<div id="artChart" :style="{width: '200px', height: '100px'}"></div>
</el-col>
</div>
</template>
<script>
export default {
props: ['item'],
mounted () {
this.drawLine()
// console.log('acount', this.item.oriPageReadUser)
// console.log('auser', this.item.oriPageReadCount)
},
methods: {
drawLine () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('artChart'))
// 绘制图表
myChart.setOption({
xAxis: {
type: 'category',
show: false
},
yAxis: {
type: 'value',
show: false
},
series: [
{
data: [28, 85, 9, 41, 17, 99, 7],
type: 'line'
}
]
})
}
}
}
</script>
src/pages/marketing-center/components/ArticleDetails.vue
<template>
<div class="article-details">
<div class="title">• 文章详情</div>
<el-row :gutter="20" v-for="(item,index) in datalist" :key="index">
<el-row :gutter="20" v-for="(item,index) in GetarticleListTmp" :key="index">
<el-col :span="4" :offset="1">
<div class="article-img">
<img :src="item.thumb_url" class="img-size">
......@@ -31,61 +31,64 @@
</div>
</el-col>
<el-col :span="10" class="articleChart">
<!-- {{item.mediaGetarticles[0]}} -->
<ve-line :data="chartData" :grid="grid" height="180px" :extend="extend" :tooltip-visible="false" :legend-visible="false"></ve-line>
<ve-line :data="item.chartData" height="110px" :grid="grid" :extend="extend" :tooltip-visible="false" :legend-visible="false"></ve-line>
</el-col>
</el-row>
</div>
</template>
<script>
import ArticleChart from './ArticleChart'
export default {
data () {
data() {
this.extend = {
series: {
smooth: 0
smooth: 0,
},
yAxis: {
splitLine: { show: false }
splitLine: { show: false },
},
'xAxis.0.axisLabel.show': false, // x轴标签不显示
'yAxis.0.axisLabel.show': false, // y轴标签不显示
'xAxis.0.splitLine.show': false // x轴表格线不显示
'xAxis.0.splitLine.show': false, // x轴表格线不显示
}
this.grid = {
left: 40,
eight: 40,
show: true,
backgroundColor: '#fff',
borderColor: '#FFF'
borderColor: '#FFF',
}
return {
chartData: {
columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
rows: []
rows: [],
},
articleList: []
articleList: [],
}
},
mounted () {
this.datalist.forEach((item, index) => {
console.log('index', index)
// console.log('itemall', item.mediaGetarticles)
computed: {
GetarticleListTmp() {
this.GetarticleList.forEach((item, index) => {
const tempList = []
// 拼接 rows
item.mediaGetarticles.forEach(article => {
const { refDate, oriPageReadCount, oriPageReadUser } = article
this.chartData.rows.push({
tempList.push({
日期: refDate,
图文总阅读人数: oriPageReadUser,
图文总阅读次数: oriPageReadCount
图文总阅读次数: oriPageReadCount,
})
})
item.tempList = tempList
// 拼接图标所需数据
item.chartData = {
columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
rows: item.tempList,
}
})
return this.GetarticleList
},
props: ['datalist'],
components: {
ArticleChart
}
},
props: ['GetarticleList'],
}
</script>
......@@ -94,11 +97,10 @@ export default {
background-color #fff
border-top 1px solid #ccc
padding 0 10px
.articleChart
// background-color pink
.title
height 30px
line-height 30px
margin-bottom 10px
.article-img
height 90px
.img-size
......@@ -114,8 +116,4 @@ export default {
line-height 50px
padding-right 30px
font-size 16px
.el-row
margin-bottom 10px
&:last-child
margin-bottom 0
</style>
src/pages/marketing-center/components/MarketingPush.vue
......@@ -19,7 +19,7 @@
<el-row class="marketing-subtitle">
<el-col :span="6" class="subtitle-img">
<span>
<img src="./../../../assets/images/avatar.png">
<img src="@/assets/images/avatar.png">
</span>
</el-col>
<el-col :span="18" class="subtitle-tips">
......@@ -28,7 +28,7 @@
<el-row>
<el-col :span="12" class="wechat-icon">
<span>
<img src="./../../../assets/images/wechat.png">
<img src="@/assets/images/wechat.png">
</span>
<span>微信触达域-公众号</span>
<span>
......@@ -38,7 +38,7 @@
</el-col>
<el-col :span="12" class="wechat-icon">
<span>
<img src="./../../../assets/images/message.png">
<img src="@/assets/images/message.png">
</span>
<span>移动触达域-短信</span>
<span>
......@@ -55,13 +55,13 @@
</template>
<script>
export default {
data () {
data() {
return {}
},
components: {},
computed: {},
mounted () {},
methods: {}
mounted() {},
methods: {},
}
</script>
<style lang='stylus' scoped>
......
src/pages/marketing-center/components/MarketingTab.vue
<template>
<el-tabs v-model="tabActive" type="card" class="market-tabs">
<el-tabs v-model="tabActive" type="card" class="market-tabs" @tab-click="handleClick">
<el-tab-pane label="图文素材消息" name="first">
<materia-list :imgList="imgList" @sendid="handleId"></materia-list>
<push-detail></push-detail>
<material-details v-if="materialChartList&&materialChartList.length" :datalist="datalist" :MediaSummary="MediaSummary" :materialChartList="materialChartList"></material-details>
<article-details v-if="articleChartList&&articleChartList.length" :datalist="datalist"></article-details>
<push-detail v-loading="loading" v-if="pushlist" :mediaId="mediaId" :pushlist="pushlist"></push-detail>
<material-details v-if="materialChartList&&materialChartList.length" :MediaList="MediaList" :materialChartList="materialChartList"></material-details>
<article-details v-if="GetarticleList&&GetarticleList.length" :GetarticleList="GetarticleList"></article-details>
</el-tab-pane>
<el-tab-pane label="营销模版消息" name="second">
<temp-list></temp-list>
<temp-list :templist="templist" @search="handleSearch" @reset="handleReset" @pageChange="pageChange"></temp-list>
</el-tab-pane>
<el-tab-pane label="短信营销消息" name="third">
<message-list :msgList="msgList" @search="handleMsgSearch" @reset="handleMsgReset" @pageChange="msgPageChange"></message-list>
</el-tab-pane>
<el-tab-pane label="短信营销消息" name="third">表格</el-tab-pane>
</el-tabs>
</template>
<script>
import http from '@/tool/http'
import api from '@/tool/api'
import MateriaList from './MateriaList'
import PushDetail from './PushList'
import MaterialDetails from './MaterialDetails'
import ArticleDetails from './ArticleDetails'
import TempList from './TempList'
import MessageList from './MessageList'
export default {
data () {
data() {
return {
tabActive: 'first',
imgList: [],
mediaId: '',
datalist: [],
pushlist: [],
MediaSummary: {},
articleChartList: [],
materialChartList: []
materialChartList: [],
loading: true,
GetarticleList: [],
MediaList: [],
templist: [],
msgList: [],
}
},
components: {
......@@ -36,53 +47,188 @@ export default {
MateriaList,
MaterialDetails,
ArticleDetails,
TempList
TempList,
MessageList,
},
created () {
this.getDataList()
created() {
// 初始化
this.getData()
// 点击
// this.getDataList()
},
methods: {
// 图文素材
getDataList () {
handleMsgSearch(e) {
this.handleGetSearchData(e)
},
handleMsgReset(e) {
this.handleGetSearchData(e)
},
msgPageChange(pageNo) {
this.getMessageList((this.pageNo = pageNo))
},
pageChange(pageNo) {
this.getTempList((this.pageNo = pageNo))
},
handleSearch(e) {
this.handleGetSearchData(e)
},
handleReset(e) {
this.handleGetSearchData(e)
},
handleGetSearchData(params) {
this.axios.post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/list-data', params).then(res => {
this.templist = res.data.result
this.msgList = res.data.result
})
},
handleClick(tab, event) {
if (this.tabActive === 'second') {
this.getTempList((this.pageNo = 1))
}
if (this.tabActive === 'third') {
this.getMessageList((this.pageNo = 1))
}
},
async getData(type = 1) {
let params = {
pageNo: 1,
pageSize: 10,
}
this.loading = true
let getMaterialsRes = await http.post(params, api.getMaterialsList)
if (getMaterialsRes.data.code === 0) {
this.imgList = getMaterialsRes.data.result.result
localStorage.materList = JSON.stringify(this.imgList)
let imgId = this.imgList[0].media_id
let params = {
pageNo: 1,
pageSize: 10,
type,
mediaId: imgId,
}
let getPushRes = await http.post(params, api.getPushList)
if (getPushRes.data.code === 0) {
this.loading = false
this.pushlist = getPushRes.data.result
let params = {
mediaId: imgId,
}
let getArticleRes = await http.post(params, api.getarticlesummary)
if (getArticleRes.data.code === 0) {
// 素材总流量分析
this.MediaList = getArticleRes.data.result.wechatMediaSummary
// 素材单日流量分析
this.materialChartList = getArticleRes.data.result.wechatMediaSummary.mediaGetarticles.reverse()
// 文章流量分析
this.GetarticleList = getArticleRes.data.result.mediaGetarticle
}
}
}
},
handleId(params) {
this.mediaId = params
this.getPushDetail(this.mediaId)
this.getMaterianDatail(this.mediaId)
},
// 获取图文素材列表
getDataList() {
this.axios
// .post('/materials-list', {
.post('http://rap2api.taobao.org/app/mock/115626/materials-list', {
.post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/materials-list', {
pageNo: 1,
pageSize: 10
pageSize: 10,
})
.then(res => {
if (res && res.data && res.data.code === 0) {
res.data.result.result.forEach(item => {
this.imgList = item.content.news_item
this.imgList = res.data.result.result
localStorage.materList = JSON.stringify(this.imgList)
}
})
},
// 推送列表
getPushDetail(id = this.mediaId) {
this.axios
.post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/medialist', {
pageNo: 1,
pageSize: 10,
type: 1,
mediaId: id,
})
.then(res => {
if (res && res.data && res.data.code === 0) {
this.loading = false
this.pushlist = res.data.result
}
})
},
// 模板列表
async getTempList(pageNo = this.pageNo) {
let params = {
pageNo: 1,
pageSize: 10,
}
let getMaterialsRes = await http.post(params, api.getMaterialsList)
if (getMaterialsRes.data.code === 0) {
this.imgList = getMaterialsRes.data.result.result
localStorage.materList = JSON.stringify(this.imgList)
let imgId = this.imgList[0].media_id
this.axios
.post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/medialist', {
pageNo: this.pageNo,
pageSize: 10,
type: 2,
mediaId: imgId,
})
.then(res => {
if (res && res.data && res.data.code === 0) {
this.templist = res.data.result
}
})
}
},
// 消息列表
async getMessageList(pageNo = this.pageNo) {
let params = {
pageNo: 1,
pageSize: 10,
}
let getMaterialsRes = await http.post(params, api.getMaterialsList)
if (getMaterialsRes.data.code === 0) {
this.imgList = getMaterialsRes.data.result.result
localStorage.materList = JSON.stringify(this.imgList)
let imgId = this.imgList[0].media_id
this.axios
.post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/medialist', {
pageNo: pageNo,
pageSize: 10,
type: 3,
mediaId: imgId,
})
.then(res => {
if (res && res.data && res.data.code === 0) {
this.msgList = res.data.result
}
})
}
},
// 素材详情
GetMaterianDatail (id = this.mediaId) {
getMaterianDatail(id = this.mediaId) {
this.axios
.get('/static/getarticlesummary.json', {
mediaId: id
.post('http://testcenter.bigaka.net/crm/back/wechat/msg-mass/getarticlesummary', {
mediaId: id,
})
.then(res => {
// 文章流量分析
this.datalist = res.data.result.mediaGetarticle
// 文章单日流量分析
this.datalist.forEach(item => {
this.articleChartList = item.mediaGetarticles.reverse()
})
this.GetarticleList = res.data.result.mediaGetarticle
// 素材总流量分析
this.MediaSummary = res.data.result.wechatMediaSummary
this.MediaList = res.data.result.wechatMediaSummary
// 素材单日流量分析
this.materialChartList = res.data.result.wechatMediaSummary.mediaGetarticles.reverse()
})
},
handleId (params) {
this.mediaId = params
this.GetMaterianDatail()
}
}
},
}
</script>
<style lang="stylus" scoped>
......
src/pages/marketing-center/components/MateriaList.vue
<template>
<div class="materialist clear">
<ul>
<li v-for="(item,index) in imgList" :key="index" @click="handleClick(item)">
<img :src="item.thumb_url">
<ul :style="{width: ulWidth}">
<li v-for="(item,index) in imgList" :key="index" @click="handleClick(item)" class="fl">
<img v-for="(mater,index) in item.content.news_item" :key="index" :src="mater.thumb_url">
</li>
</ul>
</div>
......@@ -10,21 +10,33 @@
<script>
export default {
data () {
return {
materialList: []
}
},
computed: {
ulWidth () {
return this.imgList.length * 240 + 80 + 'px'
}
},
props: ['imgList'],
methods: {
handleClick (item) {
this.$emit('sendid', item.thumb_media_id)
this.$emit('sendid', item.media_id)
}
}
}
</script>
<style lang="stylus" scoped>
.materialist
width 1000px
overflow-x scroll
ul
width 100%
width 3000px
height 217px
white-space nowrap
overflow-x auto
overflow-x scroll
margin-bottom 5px
li
display inline-block
......@@ -33,10 +45,11 @@ export default {
width 240px
height 200px
li img:hover
border 1px solid skyblue
border 2px solid skyblue
box-shadow 2px 2px 2px skyblue
/* 定义滚动条高宽及背景 */
::-webkit-scrollbar
width 16px
height 6px
/* 滑块 */
::-webkit-scrollbar-thumb
......
src/pages/marketing-center/components/MaterialChart.vue deleted 100644 → 0
<template>
<div>
<el-row>
<el-col :span="24">
<div id="myChart" :style="{width: '100%', height: '300px'}"></div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
userTotal: 0
}
},
props: ['materialChartList'],
mounted () {
this.drawLine()
},
methods: {
drawLine () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis'
},
legend: {
data: ['图文总阅读人数', '图文总阅读次数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'2016-1',
'2016-2',
'2016-3',
'2016-4',
'2016-5',
'2016-6',
'2016-7',
'2016-8',
'2016-9',
'2016-10',
'2016-11',
'2016-12'
]
},
yAxis: {
type: 'value'
},
series: [
{
name: '图文总阅读人数',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '图文总阅读次数',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
})
}
}
}
</script>
src/pages/marketing-center/components/MaterialDetails.vue
......@@ -16,74 +16,58 @@
</div>
</el-col>
</el-row>
<material-info :datalist="datalist" :MediaSummary="MediaSummary"></material-info>
<material-info :MediaList="MediaList" class="datailChart"></material-info>
<ve-line :data="chartData" :judge-width="true" :extend="extend" height="230px" :mark-line="markLine"></ve-line>
</div>
</template>
<script>
import MaterialInfo from './MaterialInfo'
import MaterialChart from './MaterialChart'
export default {
data () {
data() {
this.markLine = {
symbol: 'none',
data: [
{
name: '标准1',
yAxis: 1
}
],
itemStyle: {
normal: {
lineStyle: {
type: 'solid',
color: '#e2d73c ',
width: 2
name: 'Y 轴值为 100 的水平线',
yAxis: 100,
},
label: {
formatter: '',
textStyle: {
fontSize: 16,
fontWeight: 'bolder'
}
}
}
}
],
}
this.extend = {
series: {
smooth: 0
}
smooth: 0,
},
}
return {
chartData: {
columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
rows: []
}
rows: [],
},
}
},
mounted () {
mounted() {
this.materialChartList.forEach(item => {
const { refDate, intPageReadCount, intPageReadUser } = item
this.chartData.rows.push({
日期: refDate,
图文总阅读人数: intPageReadUser,
图文总阅读次数: intPageReadCount
图文总阅读次数: intPageReadCount,
})
})
},
props: ['datalist', 'MediaSummary', 'materialChartList'],
props: ['MediaList', 'materialChartList'],
components: {
MaterialInfo,
MaterialChart
}
},
}
</script>
<style lang="stylus" scoped>
.materian-details
background-color #fff
.datailChart
margin-bottom 20px
.detail-top
height 60px
line-height 60px
......
src/pages/marketing-center/components/MaterialInfo.vue
......@@ -3,11 +3,11 @@
<el-row>
<el-col :span="6">
<div class="detail-left">
<img :src="materianImg" class="info-img">
<!-- <img :src="materianImg" class="info-img"> -->
</div>
</el-col>
<el-col :span="18">
<material-text :MediaSummary="MediaSummary"></material-text>
<material-text :MediaList="MediaList"></material-text>
</el-col>
</el-row>
</div>
......@@ -20,12 +20,7 @@ export default {
materianImg: ''
}
},
props: ['datalist', 'MediaSummary'],
mounted () {
this.datalist.forEach(item => {
this.materianImg = item.thumb_url
})
},
props: ['MediaList'],
components: {
MaterialText
}
......
src/pages/marketing-center/components/MaterialText.vue
......@@ -7,12 +7,12 @@
</el-col>
<el-col :span="10">
<div>累积送达人数：
<span>{{MediaSummary.sendCountTotal}}</span>
<span>{{MediaList.sendCountTotal}}</span>
</div>
</el-col>
<el-col :span="8">
<div>平台推送次数：
<span>{{MediaSummary.pushCountTotal}}</span>
<span>{{MediaList.pushCountTotal}}</span>
</div>
</el-col>
</el-row>
......@@ -22,10 +22,10 @@
</el-col>
<el-col :span="8">
<div class="data-detail">
<p>图文阅读人数：{{MediaSummary.intPageReadUserTotal}}</p>
<p>图文阅读次数: {{MediaSummary.intPageReadCountTotal}}</p>
<p>原文链接阅读人数：{{MediaSummary.oriPageReadUserTotal}}</p>
<p>原文链接阅读次数：{{MediaSummary.oriPageReadCountTotal}}</p>
<p>图文阅读人数：{{MediaList.intPageReadUserTotal}}</p>
<p>图文阅读次数: {{MediaList.intPageReadCountTotal}}</p>
<p>原文链接阅读人数：{{MediaList.oriPageReadUserTotal}}</p>
<p>原文链接阅读次数：{{MediaList.oriPageReadCountTotal}}</p>
</div>
</el-col>
<el-col :span="4">
......@@ -33,10 +33,10 @@
</el-col>
<el-col :span="8">
<div class="data-detail">
<p>分享人数:{{MediaSummary.shareUserTotal}}</p>
<p>分享次数:{{MediaSummary.shareCountTotal}}</p>
<p>加入收藏人数:{{MediaSummary.addToFavUserTotal}}</p>
<p>加入收藏次数：{{MediaSummary.addToFavCountTotal}}</p>
<p>分享人数:{{MediaList.shareUserTotal}}</p>
<p>分享次数:{{MediaList.shareCountTotal}}</p>
<p>加入收藏人数:{{MediaList.addToFavUserTotal}}</p>
<p>加入收藏次数：{{MediaList.addToFavCountTotal}}</p>
</div>
</el-col>
</el-row>
......@@ -45,7 +45,7 @@
</template>
<script>
export default {
props: ['MediaSummary']
props: ['MediaList']
}
</script>
<style lang="stylus" scoped>
......
src/pages/marketing-center/components/MessageList.vue 0 → 100644
<template>
<div class="temp-list clear">
<el-row>
<div class="temp-button fr">
<el-button type="text" @click="reset">重置</el-button>
<el-button type="primary" @click="search">查询</el-button>
</div>
</el-row>
<el-form :inline="true" :model="form" class="demo-form-inline" style="min-width:980px;">
<el-row class="temp-input">
<el-col :span="10">
<el-form-item label="推送名称:">
<el-input v-model="title" placeholder="请输入推送名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="14">
<el-form-item label="活动时间">
<el-date-picker type="date" placeholder="推送时间" v-model="queryDateStart" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
<span class="line time-line" :span="2">-</span>
<el-date-picker type="date" placeholder="推送时间" v-model="queryDateEnd" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-row class="temp-input">
<el-col :span="14">
<el-form-item label="推送人数">
<el-input v-model.number="pushCountStart" placeholder="最小推送人数" style="width:210px"></el-input>
<span class="line time-line" :span="2">-</span>
<el-input v-model.number="pushCountEnd" placeholder="最大推送人数" style="width:200px"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="创建推送节点:">
<el-select v-model="clerkId" placeholder="--全部--">
<el-option v-for="(item,index) in dataList" :key="index" :label="item.clerkName" :value="item.clerkId">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table :data="dataList" style="width: 100%">
<el-table-column prop="title" label="推送名称" min-width="100" align="center">
</el-table-column>
<el-table-column prop="type" label="推送类型" min-width="76" align="center">
<template slot-scope="scope">
<span v-if="scope.row.type === 1">微信素材</span>
<span v-if="scope.row.type === 2">短信</span>
<span v-if="scope.row.type === 3">微信营销</span>
</template>
</el-table-column>
<el-table-column label="推送时间" min-width="150" align="center">
<template slot-scope="scope">
{{scope.row.pushTime | fomatDate}}
</template>
</el-table-column>
<el-table-column prop="scope" label="推送范围" min-width="260" align="center">
<template slot-scope="scope">
<span v-if="scope.row.scope === 0">全体推送</span>
<template v-if="scope.row.scope === 1 && scope.row.tagList ">
<span class="temp-tablespan">
{{scope.row.tagList && scope.row.tagList[0]}}
</span>
<span class="temp-tablespan">
{{scope.row.tagList && scope.row.tagList[1]}}
</span>
<el-popover v-if="scope.row.tagList" placement="bottom" title="标签" width="200" trigger="click">
<div>
<span v-for="(item,index) in scope.row.tagList" :key="index" class="table-tag" style="
display: inline-block;
width: 90px;
border: 1px solid transparent;
border-radius: 12px;
background: #0096ff;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #fff;
vertical-align: top;
margin: 0 5px 5px 0;
font-size: 13px;
line-height: 28px;">
{{item}}
</span>
</div>
<el-button class="fr temp-tablesmore" slot="reference">更多</el-button>
</el-popover>
</template>
</template>
</el-table-column>
<el-table-column prop="pushCount" label="推送人数" align="center">
</el-table-column>
<el-table-column prop="sentCount" label="推送成功人数" align="center">
</el-table-column>
<el-table-column prop="clerkName" label="创建消息节点" align="center">
</el-table-column>
<el-table-column prop="statusMsg" label="推送进度" align="center">
<template slot-scope="scope">
<span v-if="scope.row.statusMsg === '推送失败'" style="color:red">推送失败</span>
<span v-else-if="scope.row.statusMsg === '推送成功'" style="color:green">推送成功</span>
<span v-else>推送中</span>
</template>
</el-table-column>
</el-table>
<el-pagination @current-change="handleCurrentChange" :current-page="pageNo" :page-size="10" :total="total" layout="total, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
input: '',
form: {},
options: [],
value: '',
pageNo: 1,
pageSize: 10,
title: '',
type: '',
queryDateStart: '',
queryDateEnd: '',
pushCountStart: '',
pushCountEnd: '',
clerkId: '',
}
},
props: ['msgList'],
computed: {
dataList() {
const { result } = this.msgList
return result
},
total() {
const { totalCount } = this.msgList
return totalCount
},
},
methods: {
handleCurrentChange(val) {
this.pageNo = val
this.$emit('pageChange', this.pageNo)
},
reset() {
const paramsSearch = {
pageNo: 1,
pageSize: 10,
title: '',
queryDateStart: '',
queryDateEnd: '',
pushCountStart: '',
pushCountEnd: '',
clerkId: '',
}
this.$emit('reset', paramsSearch)
this.title = ''
this.queryDateStart = ''
this.queryDateEnd = ''
this.pushCountStart = ''
this.pushCountEnd = ''
this.clerkId = ''
},
search() {
const paramsSearch = {
pageNo: this.pageNo,
pageSize: this.pageSize,
title: this.title,
queryDateStart: this.queryDateStart,
queryDateEnd: this.queryDateEnd,
pushCountStart: this.pushCountStart,
pushCountEnd: this.pushCountEnd,
clerkId: this.clerkId,
}
this.$emit('search', paramsSearch)
},
},
}
</script>
<style lang="stylus" scoped>
>>>.el-pagination
padding 20px 5px
min-width 0px
text-align right
>>>.el-pagination .el-select .el-input
width auto
>>>.el-input__inner
min-width 10px
>>>.el-pagination__sizes
width 110px
>>>.temp-list .el-button:focus, .el-button:hover, .el-button:active
background-color none !important
.temp-list
.table-tag
color red
.el-button:focus, .el-button:hover, .el-button:active
background-color #f5f7fa
.temp-button
height 50px
width 120px
.temp-tablespan
display inline-block
width 90px
border 1px solid transparent
border-radius 12px
background #0096FF
text-align center
overflow hidden
text-overflow ellipsis
white-space nowrap
color #fff
padding 0px 3px
vertical-align top
font-size 13px
line-height 28px
.temp-tablesmore
padding 0
border none
color #0379cb
font-size 13px
line-height 28px
&::hover
color #0379cb
.time-line
margin-left 20px
margin-right 20px
</style>
src/pages/marketing-center/components/PushDetail.vue
<template>
<div class="detail-all clear">
<el-row>
<el-col :span="12" v-for="(item, index) in pushList" :key="index">
<el-col :span="12" v-for="(item, index) in pushlist.result" :key="index">
<div class="detail-single">
<div class="detail-top">
<span class="top-name detail-title">{{item.title}}</span>
<div class="top-right fr">
<span class="top-time detail-title">{{item.pushTime | fomatDate}}</span>
<span class="top-pushbtn">
<img src="./../../../../static/image/pushbtn.png">
<img src="@/assets/images/pushbtn.png">
<span class="top-state" v-if="item.status === 0">推送中</span>
<span class="top-state" v-if="item.status === 1">推送成功</span>
<span class="top-state" v-if="item.status === -1">推送失败 </span>
......@@ -37,42 +37,20 @@
</div>
</el-col>
</el-row>
<pagination v-show="pushList.length > 6" :dataList="dataList" class="detail-pagination"></pagination>
<pagination v-show="(pushlist&&pushlist.result&&pushlist.result.length) > 10" :pushlist="pushlist" class="detail-pagination"></pagination>
</div>
</template>
<script>
import Pagination from 'components/Pagination'
export default {
data () {
return {
dataList: [],
pushList: []
}
data() {
return {}
},
components: {
Pagination
Pagination,
},
created () {
this.GetPushDetail()
},
methods: {
GetPushDetail () {
this.axios
.post('http://rap2api.taobao.org/app/mock/115626/list-data', {
pageNo: 1,
pageSize: 10,
type: 1,
mediaId: 2
})
.then(res => {
if (res && res.data && res.data.code === 0) {
this.dataList = res.data.result
this.pushList = this.dataList.result
}
})
}
}
props: ['pushlist'],
}
</script>
<style lang="stylus" scoped>
......
src/pages/marketing-center/components/PushList.vue
......@@ -2,20 +2,21 @@
<div class="push-detail clear">
<div class="detail-top">
<span>
<img src="./../../../assets/images/push.png">
<img src="@/assets/images/push.png">
</span>
<span class="detail-title title">推送详情</span>
</div>
<detail class="detail-info"></detail>
<detail class="detail-info" :pushlist="pushlist"></detail>
</div>
</template>
<script>
import Detail from './PushDetail'
export default {
props: ['pushlist'],
components: {
Detail
}
Detail,
},
}
</script>
......
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import config from '../config'
Vue.use(Router)
export default new Router({
mode: 'history',
base: `/${config.project}/`,
routes: [
{
path: '/',
redirect: '/home',
component: () => import(/* webpackChunkName: 'wxhome' */ 'pages/home')
},
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: 'wxlogin' */ 'pages/login')
},
{
path: '/home',
name: 'Home',
component: () => import(/* web packChunkName: 'wxhome' */ 'pages/home'),
children: [
......@@ -32,6 +24,11 @@ export default new Router({
import(/* webpackChunkName: 'wxlogin' */ 'pages/addmarketing')
}
]
},
{
path: '/login',
name: 'Login',
component: () => import(/* webpackChunkName: 'wxlogin' */ 'pages/login')
}
]
})
src/tool/api.js 0 → 100644
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',
getarticlesummary: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/getarticlesummary',
}
// 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 0 → 100644
import axios from 'axios'
// import qs from 'qs'
axios.interceptors.request.use(
config => {
// loading
return config
},
error => {
return Promise.reject(error)
}
)
axios.interceptors.response.use(
response => {
return response
},
error => {
return Promise.resolve(error.response)
}
)
function checkStatus(response) {
// loading
// 如果http状态码正常，则直接返回数据
if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
return response
// 如果不需要除了data之外的数据，可以直接 return response.data
}
// 异常状态下，把错误信息返回去
return {
status: -404,
msg: '网络异常',
}
}
function checkCode(res) {
// 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户
if (res.status === -404) {
alert(res.msg)
}
if (res.data && !res.data.success) {
alert(res.data.error_msg)
}
return res
}
export default {
post(data, url) {
return axios({
method: 'post',
url: url,
// data: qs.stringify(data),
data: data,
timeout: 10000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json',
},
}).then(response => {
return checkStatus(response)
})
},
get(url, params) {
return axios({
method: 'get',
baseURL: 'https://cnodejs.org/api/v1',
url,
params, // get 请求时带的参数
timeout: 10000,
headers: {
'X-Requested-With': 'XMLHttpRequest',
},
})
.then(response => {
return checkStatus(response)
})
.then(res => {
return checkCode(res)
})
},
}
static/save.json deleted 100644 → 0
{
"code" : 0,
"message" : "suc"
}
\ No newline at end of file
static/tag-count.json deleted 100644 → 0
{
"code" : 0,
"message" : "",
"result" : 5
}
\ No newline at end of file
static/temp-list.json deleted 100644 → 0
{
"totalCount": 3,
"code": 0,
"msg": "成功",
"data": [
{
"title": "软文精准营销测试，点我！",
"type": 1,
"scope": 0,
"push_time": 1524642626000,
"tagList": [],
"pushCount": 2,
"sentCount": 12,
"clerkName": 8,
"statusMsg": "state"
},
{
"title": "营销测试",
"type": 2,
"scope": 0,
"push_time": 1524642626000,
"tagList": [],
"pushCount": 2,
"sentCount": 12,
"clerkName": 8,
"statusMsg": "state"
},
{
"title": "点我",
"type": 3,
"scope": 1,
"push_time": 1524642626000,
"tagList": [
"111",
"222",
"333"
],
"pushCount": 2,
"sentCount": 12,
"clerkName": 8,
"statusMsg": "state"
}
]
}
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