Skip to content

C
common-templete
Commit ef38b147 by 汤强勇
Options

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

# Conflicts:
#	src/main.js
parents 2903a2ed 0956ca92
Showing with 1152 additions and 323 deletions
config/index.js
......@@ -6,7 +6,6 @@ const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
......@@ -15,7 +14,7 @@ module.exports = {
// 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: false,
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
......@@ -40,7 +39,7 @@ module.exports = {
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
cssSourceMap: true,
},
build: {
......@@ -71,6 +70,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,
},
}
package-lock.json
......@@ -2994,6 +2994,14 @@
"stream-shift": "^1.0.0"
}
},
"echarts": {
"version": "4.2.0-rc.2",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.2.0-rc.2.tgz",
"integrity": "sha512-5Y4Kyi4eNsRM9Cnl7Q8C6PFVjznBJv1VIiMm/VSQ9zyqeo+ce1695GqUd9v4zfVx+Ow1gnwMJX67h0FNvarScw==",
"requires": {
"zrender": "4.0.5"
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
......@@ -4234,14 +4242,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -4256,20 +4262,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -4386,8 +4389,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -4399,7 +4401,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -4414,7 +4415,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -4422,14 +4422,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
......@@ -4448,7 +4446,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -4529,8 +4526,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -4542,7 +4538,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -4664,7 +4659,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -11903,6 +11897,11 @@
"dev": true
}
}
},
"zrender": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.0.5.tgz",
"integrity": "sha512-SintgipGEJPT9Sz2ABRoE4ZD7Yzy7oR7j7KP6H+C9FlbHWnLUfGVK7E8UV27pGwlxAMB0EsnrqhXx5XjAfv/KA=="
}
}
}
package.json
......@@ -12,6 +12,7 @@
},
"dependencies": {
"axios": "^0.18.0",
"echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.9",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
......
src/assets/styles/common.css 0 → 100644
.gray {
color: rgba(115, 135, 156, 0.4);
}
.star-red {
color: #ff0000;
}
.clear {
clear: both;
}
.title {
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
font-weight: 700;
font-style: normal;
font-size: 14px;
color: #73879c;
text-align: left;
}
.title-center {
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
font-weight: 700;
font-style: normal;
font-size: 14px;
color: #73879c;
text-align: center;
}
src/assets/styles/reset.css
......@@ -22,4 +22,4 @@ sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}
a {color: #0000FF;text-decoration: none;}
src/components/List/TableList.vue deleted 100644 → 0
<template>
<el-main>
<el-table :data="dataList">
<el-table-column prop="id" label="id" width="140">
</el-table-column>
<el-table-column prop="push_state" label="状态" width="120">
</el-table-column>
<el-table-column prop="title" label="title">
</el-table-column>
<el-table-column label="time">
<template slot-scope="scope">
{{scope.row.push_time | fomatDate}}
</template>
</el-table-column>
</el-table>
</el-main>
</template>
<script>
export default {
data () {
return {
dataList: []
}
},
created () {
this.getDataList()
},
methods: {
getDataList () {
this.axios.get('/static/getStoreNoticeListByPageAction.json').then(res => {
if (res && res.data && res.data.data) {
const { dataList } = res.data.data
this.dataList = dataList
}
})
}
}
}
</script>
<style>
.el-main {
width: 100%;
}
</style>
src/components/MateriaList/index.vue deleted 100644 → 0
<template>
<div class="materialist">
<el-carousel :interval="4000" type="card" height="200px" :autoplay="false" trigger="click" arrow="never">
<el-carousel-item v-for="(item, index) in MateriaList" :key="index">
<img :src="item.imgUrl">
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
data () {
return {
MateriaList: [
{
imgUrl: 'http://img.zcool.cn/community/0125fd5770dfa50000018c1b486f15.jpg@1280w_1l_2o_100sh.jpg'
},
{
imgUrl: 'http://img.zcool.cn/community/0125fd5770dfa50000018c1b486f15.jpg@1280w_1l_2o_100sh.jpg'
},
{
imgUrl: 'http://img.zcool.cn/community/0125fd5770dfa50000018c1b486f15.jpg@1280w_1l_2o_100sh.jpg'
},
{
imgUrl: 'http://img.zcool.cn/community/0125fd5770dfa50000018c1b486f15.jpg@1280w_1l_2o_100sh.jpg'
},
{
imgUrl: 'http://img.zcool.cn/community/0125fd5770dfa50000018c1b486f15.jpg@1280w_1l_2o_100sh.jpg'
}
]
}
}
}
</script>
<style lang="stylus" scoped>
.materialist
.el-carousel__item:nth-child(2n)
background-color #99a9bf
.el-carousel__item:nth-child(2n+1)
background-color #d3dce6
</style>
src/components/Pagination/index.vue 0 → 100644
<template>
<div class="marketing-total">
<span class="demonstration">显示总数</span>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">
</el-pagination>
</div>
</template>
<script>
export default {
data () {
return {
currentPage1: 5
}
},
methods: {
handleSizeChange (val) {
console.log(`每页 ${val} 条`)
},
handleCurrentChange (val) {
console.log(`当前页: ${val}`)
}
}
}
</script>
src/filters/index.js
......@@ -3,7 +3,3 @@ import moment from 'moment'
export function fomatDate (value, format) {
return moment(value).format(format || 'YYYY-MM-DD, HH:mm:ss')
}
export function fomatDQ (value, format) {
return 'daqianhao'
}
src/main.js
......@@ -5,10 +5,13 @@ import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import './assets/styles/reset.css'
import './assets/styles/common.css'
import 'element-ui/lib/theme-chalk/index.css'
import Axios from 'axios'
import * as filters from './filters'
import { http } from './plugin'
// 引入echarts
import echarts from 'echarts'
Vue.use(ElementUI)
Vue.use(http)
Object.keys(filters).forEach(key => {
......@@ -17,6 +20,7 @@ Object.keys(filters).forEach(key => {
Vue.config.productionTip = false
Vue.prototype.axios = Axios
Vue.prototype.$echarts = echarts
/* eslint-disable no-new */
new Vue({
......
src/pages/addmarketing/components/AddDesc.vue 0 → 100644
<template>
<div class="marketing-title">
<el-row class="top-left">
<el-col :span="24">
<span class="top-title title">新建图文素材推送</span>
<span class="top-tips gray">
<span class="star-red">*</span>
将<a href="#">微信公众平台</a>的图文素材，通过<a href="#">会员标签</a>分类投放，实现精准投放
</span>
</el-col>
</el-row>
<el-row class="marketing-subtitle">
<el-col :span="5" class="subtitle-img">
<img src="./../../../assets/images/picture.png" class="iconimg">
</el-col>
<el-col :span="18" class="subtitle-tips">
<p>在微信触达域中，公众号作为最通用的触达渠道，微信为品牌号提供了适配大批量会员触达的图文素材触达方式。</p>
<p>
<span>
<i class="el-icon-check"></i>
</span>
通过会员标签画像分群的分批精准推送，建议编辑不同的图文素材面向不同的会员群体。</p>
<p>
<span>
<i class="el-icon-check"></i>
</span>
最大化的利用微信“用户每月只能接受4条”的规则限制，通过舞象云实现多次投放，但每日上限为100次。</p>
<p>
<span>
<i class="el-icon-check"></i>
</span>
大批量的微信消息推送，微信端控制最大为80W/分钟，平台将进行资源的动态优化，请耐心等待，推送成功后将发送邮件通知。</p>
</el-col>
</el-row>
</div>
</template>
<style lang="stylus" scoped>
.marketing-title
height 177px
background-color #fff
.top-left
height 50px
line-height 50px
border-bottom 1px solid gray
margin 0 15px
.top-title
font-weight 400
font-size 20px
.top-tips
padding-left 20px
.top-right
span
padding-right 20px
.marketing-subtitle
height 130px
.subtitle-img
.iconimg
padding 20px 0 0 70px
.subtitle-tips
padding-top 30px
color #73879C
.tips-wechat
padding 30px
</style>
src/pages/addmarketing/index.vue
<template>
<div>msg</div>
<div class="marketing">
<add-desc></add-desc>
<!-- 步骤 -->
<el-row></el-row>
<div style="height: 300px;">
<el-steps direction="vertical" :active="1">
<el-step title="新建推送名称" description="88888">
</el-step>
<el-step title="选择推送素材"></el-step>
<el-step title="选择推送范围" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="预览推送数量"></el-step>
<el-step title="执行推送任务"></el-step>
</el-steps>
</div>
</div>
</template>
<script>
import AddDesc from './components/AddDesc'
export default {
components: {
AddDesc
}
}
</script>
<style lang="stylus" scoped>
.marketing
.marketing-button
margin-top 10px
background-color #fff
height 182px
.button-left, .button-right
padding-left 10px
.left-title
height 50px
line-height 50px
.left-title-name
float left
.left-title-message
float right
padding-right 20px
.left-icon
height 140px
.icon-left
float left
width 50%
.icon-right, .icon-left
padding 20px 0
text-align center
.icon-wechat
font-size 40px
.icon-wechat-msg
font-size 14px
padding-top 10px
.button-right
.right-marketing
padding 20px 0
text-align center
.icon-wechat
font-size 40px
.icon-wechat-msg
font-size 14px
padding-top 10px
.marketing-white
background-color #fff
height 27px
.marketing-tabs
position relative
top -10px
</style>
src/pages/marketing-center/components/AddMessage.vue 0 → 100644
<template>
<div>
<el-row class="marketing-button" style="display:flex;">
<el-col :span="14" class="button-left">
<div class="left-title button-left" style="flex:2">
<div class="left-title-name">
<span>
<img src="./../../../assets/images/wechat.png">
</span>
<span class="title">微信触达域-公众号</span>
<span class="star-red">*</span>
<a href="#" class="gray">点击新建群发</a>
</div>
<div class="left-title-message">
<span>
<img src="./../../../assets/images/auth.png">
</span>
<!-- <span>已授权</span> -->
</div>
</div>
<div class="left-icon">
<div class="icon-left">
<span class="icon-wechat">
<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">
</span>
<p class="icon-wechat-msg title-center">营销模板消息</p>
</div>
</div>
</el-col>
<el-col :span="10" class="button-right">
<div class="left-title button-right" style="flex:1">
<div class="left-title-name">
<span>
<img src="./../../../assets/images/message.png">
</span>
<span class="title">移动触达域-短信</span>
<span class="star-red">*</span>
<a href="#" class="gray">点击新建群发</a>
</div>
<div class="left-title-message">
<span>
<img src="./../../../assets/images/unauth.png">
</span>
<!-- <span>未授权</span> -->
</div>
</div>
<div class="right-marketing">
<div>
<span class="icon-wechat">
<img src="./../../../assets/images/message.png">
</span>
<p class="icon-wechat-msg title-center">短信营销消息</p>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="marketing-white"></div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {}
},
components: {},
computed: {},
mounted () {},
methods: {}
}
</script>
<style lang='stylus' scoped>
.marketing-button
margin 8px 0
height 182px
.button-left, .button-right
padding-left 5px
background-color #fff
height 180px
.left-title
height 50px
line-height 50px
.left-title-name
float left
img
width 30px
height 30px
.left-title-message
float right
.left-icon
height 140px
.icon-left
float left
width 50%
.icon-right, .icon-left
padding 20px 0
text-align center
.icon-wechat
font-size 40px
.icon-wechat-msg
font-size 14px
padding-top 10px
.button-right
margin-left 10px
.right-marketing
padding 20px 0
text-align center
img
width 64px
height 64px
.icon-wechat
font-size 40px
.icon-wechat-msg
font-size 14px
padding-top 10px
.marketing-white
background-color #fff
height 27px
</style>
src/pages/marketing-center/components/ArticleChart.vue 0 → 100644
<template>
<div>
<el-col :span="6">
<div id="artChart" :style="{width: '200px', height: '100px'}"></div>
</el-col>
</div>
</template>
<script>
export default {
mounted () {
this.drawLine()
},
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 0 → 100644
<template>
<div class="article-details">
<div class="title">• 文章详情</div>
<el-row :gutter="20" v-for="(item,index) in datalist" :key="index">
<el-col :span="6">
<div class="article-img">
<img :src="item.img" class="img-size">
</div>
</el-col>
<el-col :span="10">
<div class="article-info">
<p>{{item.title}}</p>
<div>
<span>
<i class="el-icon-star-off"></i>
{{item.readnum}}
</span>
<span>
<i class="el-icon-star-on"></i>
{{item.readtime}}
</span>
<span>
<i class="el-icon-sold-out"></i>
{{item.originreadnum}}
</span>
<span>
<i class="el-icon-share"></i>
{{item.originreadtime}}
</span>
</div>
</div>
</el-col>
<article-chart></article-chart>
</el-row>
</div>
</template>
<script>
import ArticleChart from './ArticleChart'
export default {
data () {
return {
datalist: []
}
},
components: {
ArticleChart
},
created () {
this.GetArticleDetail()
},
methods: {
GetArticleDetail () {
this.axios.get('static/article-details.json').then(res => {
this.datalist = res.data.datalist
})
}
}
}
</script>
<style lang="stylus" scoped>
.article-details
background-color #fff
border-top 1px solid #ccc
padding 0 10px
.title
height 30px
line-height 30px
.article-img
height 90px
.img-size
width 156px
height 100%
.article-info
p
font-size 16px
height 30px
line-height 30px
span
height 50px
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 0 → 100644
<template>
<div>
<div class="marketing-title">
<el-row class="top-left">
<el-col :span="14">
<span class="top-title">营销推送</span>
<span class="top-tips">
<span class="star-red">*</span>
支持<a href="#">会员标签</a>
体系下的精准消息推送</span>
</el-col>
<el-col :span="10" class="top-right">
<span><i class="el-icon-question"></i>营销推送</span>
<span><i class="el-icon-question"></i>营销推送</span>
<span><i class="el-icon-question"></i>营销推送</span>
</el-col>
</el-row>
<el-row></el-row>
<el-row class="marketing-subtitle">
<el-col :span="6" class="subtitle-img">
<span>
<img src="./../../../assets/images/avatar.png">
</span>
</el-col>
<el-col :span="18" class="subtitle-tips">
<div>在全域营销环节中，营销消息推送作为最直接的会员触达方式，在会员标签体系的加持下通过不同的触达域支持无限可能的精准营销。</div>
<div class="tips-wechat">
<el-row>
<el-col :span="12" class="wechat-icon">
<span>
<img src="./../../../assets/images/wechat.png">
</span>
<span>微信触达域-公众号</span>
<span>
<a href="#">
立即授权</a>
</span>
</el-col>
<el-col :span="12" class="wechat-icon">
<span>
<img src="./../../../assets/images/message.png">
</span>
<span>移动触达域-短信</span>
<span>
<a href="#">
前往开通</a>
</span>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
},
components: {},
computed: {},
mounted () {},
methods: {}
}
</script>
<style lang='stylus' scoped>
.marketing-title
height 177px
background-color #fff
.top-left
height 50px
line-height 50px
border-bottom 1px solid gray
margin 0 15px
.top-title
font-size 20px
color #73879C
text-align left
.top-tips
padding-left 20px
color rgba(115, 135, 156, 0.4)
.top-star
color #FF0000
.top-tag
color #0000FF
.top-right
span
padding-right 20px
font-size 14px
color #496D92
text-align left
.marketing-subtitle
height 130px
.subtitle-img
line-height 130px
padding-left 70px
.subtitle-tips
padding-top 30px
font-family 'PingFangSC-Regular', 'PingFang SC'
font-weight 400
font-style normal
font-size 14px
color #73879C
.tips-wechat
padding 15px
.wechat-icon
img
width 30px
height 30px
</style>
src/components/Tab/MarketingTab.vue → src/pages/marketing-center/components/MarketingTab.vue
......@@ -3,14 +3,21 @@
<el-tab-pane label="图文素材消息" name="first">
<materia-list></materia-list>
<push-detail></push-detail>
<material-details></material-details>
<article-details></article-details>
</el-tab-pane>
<el-tab-pane label="营销模版消息" name="second">
<temp-list></temp-list>
</el-tab-pane>
<el-tab-pane label="营销模版消息" name="second">表格</el-tab-pane>
<el-tab-pane label="短信营销消息" name="third">表格</el-tab-pane>
</el-tabs>
</template>
<script>
import MateriaList from 'components/MateriaList'
import PushDetail from 'components/PushList'
import MateriaList from './MateriaList'
import PushDetail from './PushList'
import MaterialDetails from './MaterialDetails'
import ArticleDetails from './ArticleDetails'
import TempList from './TempList'
export default {
data () {
......@@ -20,7 +27,10 @@ export default {
},
components: {
PushDetail,
MateriaList
MateriaList,
MaterialDetails,
ArticleDetails,
TempList
},
methods: {
handleClick (tab, event) {
......
src/pages/marketing-center/components/MateriaList.vue 0 → 100644
<template>
<div class="materialist clear">
<ul>
<li v-for="(item,index) in datalist" :key="index" @click="handleClick(index)">
<img :src="img1" alt="">
</li>
</ul>
</div>
</template>
<script>
import img1 from './../../../assets/images/img1.png'
export default {
data () {
return {
datalist: [],
img1
}
},
created () {
this.getDataList()
},
methods: {
getDataList () {
this.axios.get('static/materialist.json').then(res => {
if (res && res.data) {
this.datalist = res.data.datalist
}
})
},
handleClick (index) {
console.log('li', index)
}
}
}
</script>
<style lang="stylus" scoped>
.materialist
ul
width 100%
height 217px
white-space nowrap
overflow-x auto
margin-bottom 5px
li
display inline-block
margin-left 5px
img
width 240px
height 200px
li img:hover
border 1px solid skyblue
box-shadow 2px 2px 2px skyblue
/* 定义滚动条高宽及背景 */
::-webkit-scrollbar
height 6px
/* 滑块 */
::-webkit-scrollbar-thumb
border-radius 7px
background-color rgba(127, 127, 127, 1)
</style>
src/pages/marketing-center/components/MaterialChart.vue 0 → 100644
<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 {
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: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
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 0 → 100644
<template>
<div class="materian-details">
<el-row class="detail-top">
<el-col :span="24">
<div class="detail-title">
<span>
<img src="./../../../assets/images/picture.png">
<span class="title">素材详情</span>
<span class="gray">
<span class="star-red">*</span>
素材数据采集自微信公众号平台，详见
<a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141084">
图文分析数据接口</a>
</span>
</span>
</div>
</el-col>
</el-row>
<material-info></material-info>
<material-chart></material-chart>
</div>
</template>
<script>
import MaterialInfo from './MaterialInfo'
import MaterialChart from './MaterialChart'
export default {
components: {
MaterialInfo,
MaterialChart
}
}
</script>
<style lang="stylus" scoped>
.materian-details
background-color #fff
.detail-top
height 60px
line-height 60px
background-color #fff
padding-left 15px
margin-top 10px
.detail-title
img
width 30px
height 30px
</style>
src/pages/marketing-center/components/MaterialInfo.vue 0 → 100644
<template>
<div class="detail-info">
<el-row>
<el-col :span="6">
<div class="detail-left">
<img src="./../../../assets/images/img2.png" class="info-img">
</div>
</el-col>
<el-col :span="18">
<material-text :datalist="datalist"></material-text>
</el-col>
</el-row>
</div>
</template>
<script>
import MaterialText from './MaterialText'
export default {
data () {
return {
datalist: []
}
},
components: {
MaterialText
},
created () {
this.GetMaterianDatail()
},
methods: {
GetMaterianDatail () {
this.axios.get('static/materian-details.json').then(res => {
this.datalist = res.data.datalist[0]
})
}
}
}
</script>
<style lang="stylus" scoped>
.detail-info
.detail-left
margin-right 10px
.info-img
width 100%
height 100%
</style>
src/pages/marketing-center/components/MaterialText.vue 0 → 100644
<template>
<div class="info-right">
<div class="right-reading">
<el-row>
<el-col :span="4">
<div class="right-range title">目标范围</div>
</el-col>
<el-col :span="10">
<div>累积送达人数：
<span>{{datalist.sendnum}}</span>
</div>
</el-col>
<el-col :span="8">
<div>平台推送次数：
<span>{{datalist.readnum}}</span>
</div>
</el-col>
</el-row>
<el-row class="right-data">
<el-col :span="4">
<div class="title">累计阅读量</div>
</el-col>
<el-col :span="8">
<div class="data-detail">
<p>图文阅读人数：{{datalist.readtime}}</p>
<p>图文阅读次数: {{datalist.readtime}}</p>
<p>原文链接阅读人数：{{datalist.originreadnum}}</p>
<p>原文链接阅读次数：{{datalist.originreadtime}}</p>
</div>
</el-col>
<el-col :span="4">
<div class="title">转化传播量</div>
</el-col>
<el-col :span="8">
<div class="data-detail">
<p>分享人数:{{datalist.readtime}}</p>
<p>加入收藏人数:{{datalist.originreadtime}}</p>
<p>加入收藏次数：{{datalist.readtime}}</p>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
props: ['datalist']
}
</script>
<style lang="stylus" scoped>
.info-right
.right-reading
height 50px
line-height 50px
.right-range
padding-left 10px
.right-data
border-top 1px solid #ccc
.title
padding-left 10px
.data-detail
line-height 30px
</style>
src/components/PushList/Detail.vue → src/pages/marketing-center/components/PushDetail.vue
<template>
<div class="marketing-detail">
<div>
<div v-for="(item, index) in dataList" :key="index" class="detail-single">
<div class="detail-all clear">
<el-row>
<el-col :span="12" v-for="(item, index) in dataList" :key="index">
<div class="detail-single">
<div class="detail-top">
<span class="top-name">{{item.name}}</span>
<span class="top-name detail-title">{{item.name}}</span>
<div class="top-right">
<span class="top-time">{{item.time}}</span>
<span class="top-time detail-title">{{item.time}}</span>
<span class="top-state">{{item.state}}</span>
</div>
</div>
<div class="detail-data">
<span class="">推送人数： {{item.num}}</span>
<span>推送成功： {{item.suc}}</span>
<span>{{item.type}}</span>
<span>
<span class="detail-title">推送人数：</span> {{item.num}}
<span class="detail-title">推送成功:</span> {{item.suc}}
</span>
<span class="detail-title">失败原因:</span> {{item.suc}}
<span class="detail-title">{{item.type}}</span>
</div>
<div class="detail-node">
<span>创建推送节点： {{item.node}}</span>
<span class="detail-title">创建推送节点：</span> {{item.node}}
</div>
</div>
</div>
<!-- <div class="marketing-total">
<span class="demonstration">显示总数</span>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">
</el-pagination>
</div> -->
</el-col>
</el-row>
<pagination></pagination>
</div>
</template>
<script>
import Pagination from 'components/Pagination'
export default {
data () {
return {
currentPage1: 5,
dataList: []
}
},
components: {
Pagination
},
created () {
this.GetPushDetail()
},
......@@ -45,19 +49,37 @@ export default {
this.dataList = res.data.dataList
}
})
},
handleSizeChange (val) {
console.log(`每页 ${val} 条`)
},
handleCurrentChange (val) {
console.log(`当前页: ${val}`)
}
}
}
</script>
<style lang="stylus" scoped>
.marketing-detail
.detail-all
.detail-title
font-size 14px
color #496D92
text-align left
.detail-single
height 124px
background-color rgba(251, 252, 252, 1)
border-radius 5px
box-shadow 5px 5px 5px rgba(228, 228, 228, 0.349019)
margin 0 15px 15px 0
padding 0 10px
.detail-top
.top-name, .top-right
display inline-block
height 40px
line-height 40px
.top-right
float right
.detail-data, .detail-node
height 40px
line-height 40px
</style>
/*
.detail-single
background-color #eee
padding 0px 10px
margin-bottom 10px
......@@ -74,4 +96,5 @@ export default {
.detail-data, .detail-node
height 40px
line-height 40px
</style>
*/
src/components/PushList/index.vue → src/pages/marketing-center/components/PushList.vue
<template>
<div class="push-detail">
<div class="push-detail clear">
<div class="detail-top">
<span>
<i class="el-icon-edit-outline"></i>
<img src="./../../../assets/images/push.png">
</span>
<span class="detail-title">推送详情</span>
<span class="detail-title title">推送详情</span>
</div>
<detail class="detail-info"></detail>
</div>
</template>
<script>
import Detail from './Detail'
import Detail from './PushDetail'
export default {
components: {
......@@ -23,9 +23,12 @@ export default {
.push-detail
background #fff
.detail-top
height 50px
height 40px
line-height 50px
padding 0 15px
.detail-title
font-size 14px
img
width 30px
height 30px
.detail-info
padding 10px
</style>
src/pages/marketing-center/components/TempList.vue 0 → 100644
<template>
<div class="temp-list clear">
<div class="temp-button">
<el-button type="text">重置</el-button>
<el-button type="primary">查询</el-button>
</div>
<el-row class="temp-input">
<el-col :span="2">
<div>推送名称:</div>
</el-col>
<el-col :span="4">
<div>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</div>
</el-col>
<el-col :span="2" :offset="2">
<div>推送时间：</div>
</el-col>
<el-col :span="6">
<div>
<el-date-picker v-model="value6" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
</el-col>
</el-row>
<el-row class="temp-input">
<el-col :span="2">
<div class="">推送人数:</div>
</el-col>
<el-col :span="4">
<div>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</div>
</el-col>
<el-col :span="1">
<div>
-
</div>
</el-col>
<el-col :span="4">
<div>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</div>
</el-col>
<el-col :span="3" :offset="2">
<div>创建推送节点：</div>
</el-col>
<el-col :span="4">
<div>
<el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</el-col>
</el-row>
<el-table :data="dataList">
<el-table-column prop="id" label="推送名称" width="140">
</el-table-column>
<el-table-column prop="push_state" label="推送类型" width="120">
</el-table-column>
<el-table-column label="推送时间">
<template slot-scope="scope">
{{scope.row.push_time | fomatDate}}
</template>
</el-table-column>
<el-table-column prop="title" label="推送范围">
</el-table-column>
<el-table-column prop="title" label="推送人数">
</el-table-column>
<el-table-column prop="title" label="推送成功人数">
</el-table-column>
<el-table-column prop="title" label="创建消息节点">
</el-table-column>
<el-table-column prop="title" label="推送进度">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
input: '',
value6: '',
dataList: [],
options: [
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
}
],
value: ''
}
},
created () {
this.getDataList()
},
methods: {
getDataList () {
this.axios.get('/static/getStoreNoticeListByPageAction.json').then(res => {
if (res && res.data && res.data.data) {
const { dataList } = res.data.data
this.dataList = dataList
}
})
}
}
}
</script>
<style lang="stylus" scoped>
.temp-list
.temp-button
height 50px
// float right
</style>
src/pages/marketing-center/index.vue
<template>
<div class="marketing">
<div class="marketing-title">
<el-row class="top-left">
<el-col :span="12">
<span class="top-title">营销推送</span>
<span class="top-tips">* 支持<a href="#">会员标签</a>
体系下的精准消息推送</span>
</el-col>
<el-col :span="12" class="top-right">
<span><i class="el-icon-question"></i>营销推送</span>
<span><i class="el-icon-question"></i>营销推送</span>
<span><i class="el-icon-question"></i>营销推送</span>
</el-col>
</el-row>
<el-row></el-row>
<el-row class="marketing-subtitle">
<el-col :span="5" class="subtitle-img">
<span><i class="el-icon-news iconimg"></i></span>
</el-col>
<el-col :span="18" class="subtitle-tips">
<div>在全域营销环节中，营销消息推送作为最直接的会员触达方式，在会员标签体系的加持下通过不同的触达域支持无限可能的精准营销。</div>
<div class="tips-wechat">
<el-row>
<el-col :span="12">
<span>
<i class="el-icon-news"></i>
</span>
<span>微信触达域-公众号</span>
<span>
<a href="#">
立即授权</a>
</span>
</el-col>
<el-col :span="12">
<span>
<i class="el-icon-message"></i>
</span>
<span>移动触达域-短信</span>
<span>
<a href="#">
前往开通</a>
</span>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
<el-row class="marketing-button">
<el-col :span="14" class="button-left">
<div class="left-title">
<div class="left-title-name">
<span><i class="el-icon-news"></i></span>
<span>微信触达域-公众号</span>
<span>*</span>
<a href="#">点击新建群发</a>
</div>
<div class="left-title-message">
<span><i class="el-icon-success"></i></span>
<span>已授权</span>
</div>
</div>
<div class="left-icon">
<div class="icon-left">
<span class="icon-wechat">
<i class="el-icon-picture-outline"></i>
</span>
<p class="icon-wechat-msg">图文素材消息</p>
</div>
<div class="icon-right">
<span class="icon-wechat">
<i class="el-icon-document"></i>
</span>
<p class="icon-wechat-msg">营销模板消息</p>
</div>
</div>
</el-col>
<el-col :span="10" class="button-right">
<div class="left-title">
<div class="left-title-name">
<span><i class="el-icon-message"></i></span>
<span>移动触达域-短信</span>
<span>*</span>
<a href="#">点击新建群发</a>
</div>
<div class="left-title-message">
<span><i class="el-icon-success"></i></span>
<span>未授权</span>
</div>
</div>
<div class="right-marketing">
<div>
<span class="icon-wechat">
<i class="el-icon-message"></i>
</span>
<p class="icon-wechat-msg">短信营销消息</p>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="marketing-white"></div>
</el-col>
</el-row>
<marketing-push></marketing-push>
<add-message></add-message>
<marketing-tab class="marketing-tabs"></marketing-tab>
</div>
</template>
<script>
import MarketingTab from 'components/Tab/MarketingTab'
import MarketingPush from './components/MarketingPush'
import AddMessage from './components/AddMessage'
import MarketingTab from './components/MarketingTab'
export default {
components: {
MarketingPush,
AddMessage,
MarketingTab
}
}
......@@ -120,72 +22,7 @@ export default {
<style lang="stylus" scoped>
.marketing
.marketing-title
height 177px
background-color #fff
.top-left
height 50px
line-height 50px
border-bottom 1px solid gray
margin 0 15px
.top-title
font-size 20px
.top-tips
padding-left 20px
.top-right
span
padding-right 20px
.marketing-subtitle
height 130px
.subtitle-img
.iconimg
font-size 70px
line-height 130px
padding-left 70px
.subtitle-tips
padding-top 30px
.tips-wechat
padding 30px
.marketing-button
margin-top 10px
background-color #fff
height 182px
.button-left, .button-right
padding-left 10px
.left-title
height 50px
line-height 50px
.left-title-name
float left
.left-title-message
float right
padding-right 20px
.left-icon
height 140px
.icon-left
float left
width 50%
.icon-right, .icon-left
padding 20px 0
text-align center
.icon-wechat
font-size 40px
.icon-wechat-msg
font-size 14px
padding-top 10px
.button-right
.right-marketing
padding 20px 0
text-align center
.icon-wechat
font-size 40px
.icon-wechat-msg
font-size 14px
padding-top 10px
.marketing-white
background-color #fff
height 27px
.marketing-tabs
position relative
top -10px
top -15px
</style>
src/router/index.js
......@@ -2,6 +2,7 @@ import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
......
static/article-details.json 0 → 100644
{
"datalist": [
{
"img": "static/image/article1.png",
"title": "马云张勇",
"readnum": 1111,
"readtime": 6,
"originreadnum": 111,
"originreadtime": 77
},
{
"img": "static/image/article2.png",
"title": "全面揭秘阿里",
"readnum": 6,
"readtime": 2,
"originreadnum": 111,
"originreadtime": 9
},
{
"img": "static/image/article3.png",
"title": "7-eleven",
"readnum": 2,
"readtime": 8,
"originreadnum": 111,
"originreadtime": 1
}
]
}
static/materialist.json 0 → 100644
{
"datalist": [
{
"imgUrl": "./../../../assets/images/img1.png"
},
{
"imgUrl": "./../../../assets/images/img2.png"
},
{
"imgUrl": "./../../../assets/images/img3.png"
},
{
"imgUrl": "./../../../assets/images/img1.png"
},
{
"imgUrl": "./../../../assets/images/img2.png"
},
{
"imgUrl": "./../../../assets/images/img3.png"
}
]
}
static/materian-details.json 0 → 100644
{
"datalist": [
{
"img": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3338860012,664035936&fm=27&gp=0.jpg",
"sendnum": 12111124,
"readnum": 1111,
"readtime": 12111121,
"originreadnum": 111,
"originreadtime": 5785111412
},
{
"img": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3338860012,664035936&fm=27&gp=0.jpg",
"sendnum": 2222,
"readnum": 222,
"readtime": 22222,
"originreadnum": 122224545,
"originreadtime": 22222
},
{
"img": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3338860012,664035936&fm=27&gp=0.jpg",
"sendnum": 333,
"readnum": 3333,
"readtime": 3,
"originreadnum": 33,
"originreadtime": 5733385412
}
]
}
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