Skip to content

C
common-templete
Commit 314d0c9f by 高淑倩
Options

add:tab_api

parent dfa7f8f8
Showing with 575 additions and 231 deletions
package-lock.json
...@@ -4463,7 +4463,8 @@ ...@@ -4463,7 +4463,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -4484,12 +4485,14 @@ ...@@ -4484,12 +4485,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -4504,17 +4507,20 @@ ...@@ -4504,17 +4507,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -4631,7 +4637,8 @@ ...@@ -4631,7 +4637,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -4643,6 +4650,7 @@ ...@@ -4643,6 +4650,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -4657,6 +4665,7 @@ ...@@ -4657,6 +4665,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -4664,12 +4673,14 @@ ...@@ -4664,12 +4673,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -4688,6 +4699,7 @@ ...@@ -4688,6 +4699,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -4768,7 +4780,8 @@ ...@@ -4768,7 +4780,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -4780,6 +4793,7 @@ ...@@ -4780,6 +4793,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -4865,7 +4879,8 @@ ...@@ -4865,7 +4879,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.1", "version": "5.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -4901,6 +4916,7 @@ ...@@ -4901,6 +4916,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -4920,6 +4936,7 @@ ...@@ -4920,6 +4936,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -4963,12 +4980,14 @@ ...@@ -4963,12 +4980,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.2", "version": "3.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
......
src/main.js
...@@ -15,6 +15,10 @@ import * as filters from './filters' ...@@ -15,6 +15,10 @@ import * as filters from './filters'
import echarts from 'echarts' import echarts from 'echarts'
// Axios.defaults.baseURL = 'http://testcenter.bigaka.net/crm' // Axios.defaults.baseURL = 'http://testcenter.bigaka.net/crm'
const AUTH_TOKEN = 'X8IvNcvIe7xFvbNhk0I5HyVZY1E'
Axios.defaults.withCredentials = true // 让ajax携带cookie
Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
Axios.interceptors.request.use( Axios.interceptors.request.use(
config => { config => {
if (config.method === 'post') { if (config.method === 'post') {
......
src/pages/addmarketing/components/StepInfo.vue
...@@ -9,11 +9,16 @@ ...@@ -9,11 +9,16 @@
</el-form-item> </el-form-item>
<el-form-item label="选择推送素材" class="step-choose"> <el-form-item label="选择推送素材" class="step-choose">
<span class="gray"><span class="star-red">*</span> 推送素材需前往<a href="#">微信公众平台</a>-管理-素材管理维护。</span> <span class="gray"><span class="star-red">*</span> 推送素材需前往<a href="#">微信公众平台</a>-管理-素材管理维护。</span>
<div class="add-material"> <div class="add-material" @click="centerDialogVisible = true">
<el-button type="text" @click="centerDialogVisible = true" class="add-title"> <div v-if="!currentImgUrl">
<p><i class="el-icon-plus add-plus"></i></p> <el-button type="text" class="add-title">
添加微信素材 <p><i class="el-icon-plus add-plus"></i></p>
</el-button> 添加微信素材
</el-button>
</div>
<div v-else>
<img :src="currentImgUrl" alt="">
</div>
</div> </div>
<el-dialog title="微信消息素材" :visible.sync="centerDialogVisible" width="80%" center class="add-subtitle title"> <el-dialog title="微信消息素材" :visible.sync="centerDialogVisible" width="80%" center class="add-subtitle title">
<el-row> <el-row>
...@@ -22,20 +27,12 @@ ...@@ -22,20 +27,12 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20" class="add-container"> <el-row :gutter="20" class="add-container">
<el-col :span="8"> <el-col :span="8" v-for="(item,index) in materList" :key="index">
<div class="add-content">1</div> <div class="add-content">
</el-col> <img :src="item.thumb_url" @click="handleImg(item.thumb_url)">
<el-col :span="8"> </div>
<div class="add-content">2</div>
</el-col>
<el-col :span="8">
<div class="add-content">3</div>
</el-col> </el-col>
</el-row> </el-row>
<!-- <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> -->
</el-dialog> </el-dialog>
</el-form-item> </el-form-item>
<el-form-item label="选择推送范围"> <el-form-item label="选择推送范围">
...@@ -43,26 +40,26 @@ ...@@ -43,26 +40,26 @@
<el-radio label="全体推送"></el-radio> <el-radio label="全体推送"></el-radio>
<el-radio label="精准推送"></el-radio> <el-radio label="精准推送"></el-radio>
</el-radio-group> </el-radio-group>
<span v-if="isCount">统计中...</span>
<span v-else>预计推送数量{{currentTagCount}}（关注微信公众号用户）</span>
<div v-if="form.resource === '精准推送'"> <div v-if="form.resource === '精准推送'">
<div class="form-tags"> <div class="form-tags">
<span class="el-tag tag-info">588</span> <span @click="handleClickTag(item, index)" class="el-tag tag-info" :class="{active:item.isActive}" v-for="(item, index) in tagInfo" :key="item.tagId">{{item.name}}</span>
<span class="el-tag tag-info">实际</span>
<span class="el-tag tag-info">588</span>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="预览推送数量"> <el-form-item label="预览推送数量">
<span class="gray"><span class="star-red">*</span>实际推送成功数量将略有偏差，选中多个标签为同时满足选中标签群体的会员。推送人数必须大于1人。</span> <span class="gray"><span class="star-red">*</span>实际推送成功数量将略有偏差，选中多个标签为同时满足选中标签群体的会员。推送人数必须大于1人。</span>
<div> <div v-if="isCount">
<el-button class="form-button">选中标签，预览</el-button> <el-button class="form-button">选中标签，预览</el-button>
<span>统计中，请稍候</span> <span>统计中，请稍候</span>
</div> </div>
<div> <div v-else>
<el-button class="form-button">重新预览</el-button> <el-button class="form-button">重新预览</el-button>
<span class="form-checknum">188</span>人 <span class="form-checknum">{{successNum}}</span>人
<span class="form-vipnum">标签会员数： 188 人</span> <span class="form-vipnum">标签会员数： {{tagNum}} 人</span>
<span>其中，关注公众号： 188 人</span> <span>其中，关注公众号： {{followNum}} 人</span>
<span>已推送4次会员： 188 人</span> <span>已推送4次会员： {{fourthNum}} 人</span>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="执行推送任务"> <el-form-item label="执行推送任务">
...@@ -72,15 +69,22 @@ ...@@ -72,15 +69,22 @@
<el-form-item label="指定接收邮箱"> <el-form-item label="指定接收邮箱">
<el-input v-model="input" type="email" placeholder="请输入您要接收任务信息的邮箱"></el-input> <el-input v-model="input" type="email" placeholder="请输入您要接收任务信息的邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item class="submit-dialog">
<el-button class="form-button" @click="onSubmit">确认推送</el-button> <el-button class="form-button" @click="handleConfirmPush" :style="isBtnCheckd" :disabled="!checked">确认推送</el-button>
<el-dialog title="推送确认" :visible.sync="submitDialogVisible" width="30%" center>
<div>
<img :src="currentImgUrl">
<p>向{{currentTagCount}}名粉丝推送</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="onSubmit">确 定</el-button>
</span>
</el-dialog>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</template> </template>
<script> <script>
// import Bus from '@/common/bus'
export default { export default {
data () { data () {
return { return {
...@@ -91,38 +95,117 @@ export default { ...@@ -91,38 +95,117 @@ export default {
date2: '', date2: '',
delivery: false, delivery: false,
type: [], type: [],
resource: '', resource: '全体推送',
desc: '' desc: '',
materList: []
}, },
input: '', input: '',
checked: true, checked: true,
dialogImageUrl: '', dialogImageUrl: '',
dialogVisible: false, dialogVisible: false,
centerDialogVisible: false, centerDialogVisible: false,
imageUrl: '' submitDialogVisible: false,
imageUrl: '',
currentImgUrl: '',
isCount: false,
currentTagCount: 0,
tagNum: 0,
followNum: 0,
fourthNum: 0,
successNum: 0,
currentTagIndex: 0,
tagInfo: [
{ tagId: 1, name: 'www' },
{ tagId: 2, name: '999111' },
{ tagId: 3, name: '标签' },
{ tagId: 4, name: '333' }
]
} }
}, },
created () { created () {
this.getViewCount() this.getViewCount()
// Bus.on('test1', msg => { this.materList = JSON.parse(localStorage.materList)
// console.log('msg', msg) },
// }) computed: {
isBtnCheckd () {
return this.checked ? 'opacity: 1' : 'opacity: .65'
}
}, },
mounted () { mounted () {
// this.getAddMaterial() // this.getAddMaterial()
}, },
methods: { methods: {
handleConfirmPush () {
// 校验
if (!this.form.name) {
return this.$message({
message: '请输入推送标题',
type: 'warning'
})
}
if (!this.currentImgUrl) {
return this.$message({
message: '请选择推送素材',
type: 'warning'
})
}
if (!this.currentImgUrl) {
return this.$message({
message: '请选择推送素材',
type: 'warning'
})
}
this.submitDialogVisible = true
},
handleClickTag (item, index) {
item.isActive = !item.isActive
this.currentTagIndex = index
this.isCount = true
this.getTagCount(item)
},
handleImg (url) {
this.currentImgUrl = url
this.centerDialogVisible = false
},
onSubmit () { onSubmit () {
console.log('submit!') this.submitDialogVisible = false
this.save()
}, },
handleRemove (file, fileList) { save () {
console.log(file, fileList) const temList = this.tagInfo.filter(item => item.isActive)
this.axios.get('/static/save.json', {
mediaId: '',
msgId: '',
scope: this.form.resource === '全体推送' ? 0 : 1,
tagArrays: temList,
title: this.form.name,
tmplId: '',
type: 1
}).then(res => {
if (res && res.data && res.data.code === 0) {
this.$message({
message: res.data.message,
type: 'success'
})
}
console.log('res', res)
})
}, },
handlePictureCardPreview (file) { getTagCount (item) {
this.dialogImageUrl = file.url this.axios
this.dialogVisible = true .get('/static/tag-count.json', {
params: {
id: item.tagId
}
})
.then(res => {
this.isCount = false
if (res.data) this.currentTagCount = res.data.result
})
}, },
getViewCount () { getViewCount () {
this.isCount = true
this.axios this.axios
.post('http://rap2api.taobao.org/app/mock/115626/pre_view_count', { .post('http://rap2api.taobao.org/app/mock/115626/pre_view_count', {
tagIds: '1', tagIds: '1',
...@@ -132,33 +215,35 @@ export default { ...@@ -132,33 +215,35 @@ export default {
}) })
.then(res => { .then(res => {
if (res && res.data && res.data.code === 0) { if (res && res.data && res.data.code === 0) {
console.log(res.data.result) if (res.data.result) {
// this.dataList = res.data.result.result this.isCount = false
const { tagNum, followNum, fourthNum } = res.data.result
this.tagNum = tagNum
this.followNum = followNum
this.fourthNum = fourthNum
this.successNum = this.followNum - this.fourthNum
}
} }
}) })
},
handleAvatarSuccess (res, file) {
this.imageUrl = URL.createObjectURL(file.raw)
},
beforeAvatarUpload (file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
} }
} }
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.active
background #0096FF
color #fff
.step-info .step-info
margin-top 25px margin-top 25px
padding-bottom 20px padding-bottom 20px
.submit-dialog
>>>.el-dialog__header
padding 15px
border-bottom 1px solid #e5e5e5
.el-dialog__title
text-align center
font-size 18px
color #73879C
.el-input .el-input
width 50% width 50%
.step-choose .step-choose
...@@ -170,6 +255,7 @@ export default { ...@@ -170,6 +255,7 @@ export default {
color #e3e4e9 color #e3e4e9
text-align center text-align center
position relative position relative
cursor pointer
.add-title .add-title
color #a4a4a4 color #a4a4a4
.add-plus .add-plus
...@@ -198,6 +284,8 @@ export default { ...@@ -198,6 +284,8 @@ export default {
position relative position relative
top 30px top 30px
margin-bottom 35px margin-bottom 35px
img
cursor pointer
.add-line .add-line
border-top 1px solid #e5e5e5 border-top 1px solid #e5e5e5
.form-tags .form-tags
...@@ -211,6 +299,8 @@ export default { ...@@ -211,6 +299,8 @@ export default {
line-height 25px line-height 25px
text-align center text-align center
margin 15px margin 15px
cursor pointer
border-radius 12px
.form-button .form-button
width 138px width 138px
height 37px height 37px
......
src/pages/marketing-center/components/ArticleDetails.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<el-row :gutter="20" v-for="(item,index) in datalist" :key="index"> <el-row :gutter="20" v-for="(item,index) in datalist" :key="index">
<el-col :span="6"> <el-col :span="6">
<div class="article-img"> <div class="article-img">
<img :src="article1" class="img-size"> <img :src="item.thumb_url" class="img-size">
</div> </div>
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
...@@ -13,15 +13,15 @@ ...@@ -13,15 +13,15 @@
<div> <div>
<span> <span>
<i class="el-icon-star-off"></i> <i class="el-icon-star-off"></i>
{{item.readnum}} {{item.oriPageReadUserTotal}}
</span> </span>
<span> <span>
<i class="el-icon-star-on"></i> <i class="el-icon-star-on"></i>
{{item.readtime}} {{item.addToFavUserTotal}}
</span> </span>
<span> <span>
<i class="el-icon-sold-out"></i> <i class="el-icon-sold-out"></i>
{{item.originreadnum}} {{item.shareUserTotal}}
</span> </span>
<span> <span>
<i class="el-icon-share"></i> <i class="el-icon-share"></i>
...@@ -36,28 +36,11 @@ ...@@ -36,28 +36,11 @@
</template> </template>
<script> <script>
import ArticleChart from './ArticleChart' import ArticleChart from './ArticleChart'
import article1 from './../../../../static/image/article1.png'
export default { export default {
data () { props: ['datalist'],
return {
datalist: [],
article1
}
},
components: { components: {
ArticleChart, ArticleChart
article1
},
created () {
this.GetArticleDetail()
},
methods: {
GetArticleDetail () {
this.axios.get('http://rap2api.taobao.org/app/mock/115626/getArticleDetails').then(res => {
this.datalist = res.data.datalist
})
}
} }
} }
</script> </script>
......
src/pages/marketing-center/components/MarketingTab.vue
<template> <template>
<el-tabs v-model="tabActive" type="card" @tab-click="handleClick" class="market-tabs"> <el-tabs v-model="tabActive" type="card" class="market-tabs">
<el-tab-pane label="图文素材消息" name="first"> <el-tab-pane label="图文素材消息" name="first">
<materia-list></materia-list> <materia-list :imgList="imgList" @sendid="handleId"></materia-list>
<push-detail></push-detail> <push-detail></push-detail>
<material-details></material-details> <material-details :datalist="datalist" :MediaSummary="MediaSummary"></material-details>
<article-details></article-details> <article-details :datalist="datalist"></article-details>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="营销模版消息" name="second"> <el-tab-pane label="营销模版消息" name="second">
<temp-list></temp-list> <temp-list></temp-list>
...@@ -22,7 +22,11 @@ import TempList from './TempList' ...@@ -22,7 +22,11 @@ import TempList from './TempList'
export default { export default {
data () { data () {
return { return {
tabActive: 'first' tabActive: 'first',
imgList: [],
mediaId: '',
datalist: [],
MediaSummary: {}
} }
}, },
components: { components: {
...@@ -33,20 +37,47 @@ export default { ...@@ -33,20 +37,47 @@ export default {
TempList TempList
}, },
created () { created () {
// this.getData() this.getDataList()
}, },
methods: { methods: {
handleClick (tab, event) { // 图文素材
console.log(tab, event) getDataList () {
this.axios
.post('/materials-list', {
// .post('http://rap2api.taobao.org/app/mock/115626/materials-list', {
pageNo: 1,
pageSize: 10
})
.then(res => {
if (res && res.data && res.data.code === 0) {
res.data.result.result.forEach(item => {
this.imgList = item.content.news_item
})
localStorage.materList = JSON.stringify(this.imgList)
}
})
}, },
getData () { // 素材详情
GetMaterianDatail (id = this.mediaId) {
this.axios this.axios
.post('http://rap2api.taobao.org/app/mock/115626/getarticlesummary', { .get('/static/getarticlesummary.json', {
mediaId: '1' mediaId: id
}) })
.then(res => { .then(res => {
console.log('res', res) console.log(res)
// 文章流量分析
this.datalist = res.data.result.mediaGetarticle
// 文章单日流量分析
// = res.data.result.mediaGetarticle.mediaGetarticles
// 素材总流量分析
this.MediaSummary = res.data.result.wechatMediaSummary
// 素材单日流量分析
// = res.data.result.wechatMediaSummary.mediaGetarticles
}) })
},
handleId (params) {
this.mediaId = params
this.GetMaterianDatail()
} }
} }
} }
......
src/pages/marketing-center/components/MateriaList.vue
<template> <template>
<div class="materialist clear"> <div class="materialist clear">
<ul> <ul>
<li v-for="(item,index) in imgList" :key="index" @click="handleClick(index)"> <li v-for="(item,index) in imgList" :key="index" @click="handleClick(item)">
<img :src="item.thumb_url" alt=""> <img :src="item.thumb_url">
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
<script> <script>
// import Bus from '@/common/bus'
export default { export default {
data () { props: ['imgList'],
return {
datalist: [],
imgList: []
}
},
created () {
this.getDataList()
},
methods: { methods: {
getDataList () { handleClick (item) {
// this.axios this.$emit('sendid', item.thumb_media_id)
// .post('http://rap2api.taobao.org/app/mock/115626/materials-list', {
// pageNo: 1,
// pageSize: 10
// })
// .then(res => {
// if (res && res.data && res.data.code === 0) {
// res.data.result.result.forEach(item => {
// this.imgList = item.content.news_item
// Bus.$emit('test1', 1213)
// })
// }
// })
this.axios
.post('/materials-list', {
pageNo: 1,
pageSize: 20
})
.then(res => {
if (res && res.data) {
console.log('res', res)
// this.datalist = res.data.datalist
}
})
},
handleClick (index) {
console.log('li', index)
} }
} }
} }
......
src/pages/marketing-center/components/MaterialChart.vue
...@@ -8,8 +8,19 @@ ...@@ -8,8 +8,19 @@
</div> </div>
</template> </template>
<script> <script>
import Bus from '@/common/bus'
export default { export default {
data () {
return {
userTotal: 0
}
},
mounted () { mounted () {
Bus.$on('mediaChart', data => {
console.log('User', data.intPageReadUserTotal)
console.log('Count', data.intPageReadCountTotal)
})
this.drawLine() this.drawLine()
}, },
methods: { methods: {
...@@ -22,7 +33,7 @@ export default { ...@@ -22,7 +33,7 @@ export default {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] data: ['图文总阅读人数', '图文总阅读次数']
}, },
grid: { grid: {
left: '3%', left: '3%',
...@@ -38,20 +49,33 @@ export default { ...@@ -38,20 +49,33 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] 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: { yAxis: {
type: 'value' type: 'value'
}, },
series: [ series: [
{ {
name: '邮件营销', name: '图文总阅读人数',
type: 'line', type: 'line',
stack: '总量', stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210] data: [120, 132, 101, 134, 90, 230, 210]
}, },
{ {
name: '联盟广告', name: '图文总阅读次数',
type: 'line', type: 'line',
stack: '总量', stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310] data: [220, 182, 191, 234, 290, 330, 310]
......
src/pages/marketing-center/components/MaterialDetails.vue
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<material-info></material-info> <material-info :datalist="datalist" :MediaSummary="MediaSummary"></material-info>
<material-chart></material-chart> <material-chart></material-chart>
</div> </div>
</template> </template>
...@@ -25,6 +25,7 @@ import MaterialInfo from './MaterialInfo' ...@@ -25,6 +25,7 @@ import MaterialInfo from './MaterialInfo'
import MaterialChart from './MaterialChart' import MaterialChart from './MaterialChart'
export default { export default {
props: ['datalist', 'MediaSummary'],
components: { components: {
MaterialInfo, MaterialInfo,
MaterialChart MaterialChart
......
src/pages/marketing-center/components/MaterialInfo.vue
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<div class="detail-left"> <div class="detail-left">
<img src="./../../../assets/images/img2.png" class="info-img"> <img :src="materianImg" class="info-img">
</div> </div>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<material-text :datalist="datalist"></material-text> <material-text :datalist="datalist" :MediaSummary="MediaSummary"></material-text>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -17,21 +17,17 @@ import MaterialText from './MaterialText' ...@@ -17,21 +17,17 @@ import MaterialText from './MaterialText'
export default { export default {
data () { data () {
return { return {
datalist: [] materianImg: ''
} }
}, },
props: ['datalist', 'MediaSummary'],
mounted () {
this.datalist.forEach(item => {
this.materianImg = item.thumb_url
})
},
components: { components: {
MaterialText MaterialText
},
created () {
this.GetMaterianDatail()
},
methods: {
GetMaterianDatail () {
this.axios.get('http://rap2api.taobao.org/app/mock/115626/getMaterialDetails').then(res => {
this.datalist = res.data.datalist[0]
})
}
} }
} }
</script> </script>
......
src/pages/marketing-center/components/MaterialText.vue
...@@ -7,12 +7,12 @@ ...@@ -7,12 +7,12 @@
</el-col> </el-col>
<el-col :span="10"> <el-col :span="10">
<div>累积送达人数： <div>累积送达人数：
<span>{{datalist.sendnum}}</span> <span>{{MediaSummary.sendCountTotal}}</span>
</div> </div>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div>平台推送次数： <div>平台推送次数：
<span>{{datalist.readnum}}</span> <span>{{MediaSummary.pushCountTotal}}</span>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -22,10 +22,10 @@ ...@@ -22,10 +22,10 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div class="data-detail"> <div class="data-detail">
<p>图文阅读人数：{{datalist.readtime}}</p> <p>图文阅读人数：{{MediaSummary.intPageReadUserTotal}}</p>
<p>图文阅读次数: {{datalist.readtime}}</p> <p>图文阅读次数: {{MediaSummary.intPageReadCountTotal}}</p>
<p>原文链接阅读人数：{{datalist.originreadnum}}</p> <p>原文链接阅读人数：{{MediaSummary.oriPageReadUserTotal}}</p>
<p>原文链接阅读次数：{{datalist.originreadtime}}</p> <p>原文链接阅读次数：{{MediaSummary.oriPageReadCountTotal}}</p>
</div> </div>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
...@@ -33,9 +33,10 @@ ...@@ -33,9 +33,10 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div class="data-detail"> <div class="data-detail">
<p>分享人数:{{datalist.readtime}}</p> <p>分享人数:{{MediaSummary.shareUserTotal}}</p>
<p>加入收藏人数:{{datalist.originreadtime}}</p> <p>分享次数:{{MediaSummary.shareCountTotal}}</p>
<p>加入收藏次数：{{datalist.readtime}}</p> <p>加入收藏人数:{{MediaSummary.addToFavUserTotal}}</p>
<p>加入收藏次数：{{MediaSummary.addToFavCountTotal}}</p>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -44,7 +45,7 @@ ...@@ -44,7 +45,7 @@
</template> </template>
<script> <script>
export default { export default {
props: ['datalist'] props: ['datalist', 'MediaSummary']
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
......
src/pages/marketing-center/components/TempList.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div class="temp-list clear"> <div class="temp-list clear">
<el-row> <el-row>
<div class="temp-button fr"> <div class="temp-button fr">
<el-button type="text">重置</el-button> <el-button type="text" @click="reset">重置</el-button>
<el-button type="primary">查询</el-button> <el-button type="primary" @click="getDataList">查询</el-button>
</div> </div>
</el-row> </el-row>
...@@ -11,30 +11,33 @@ ...@@ -11,30 +11,33 @@
<el-row class="temp-input"> <el-row class="temp-input">
<el-col :span="10"> <el-col :span="10">
<el-form-item label="推送名称:"> <el-form-item label="推送名称:">
<el-input v-model="form.user" placeholder="审批人"></el-input> <el-input v-model="title" placeholder="请输入推送名称"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<el-form-item label="活动时间"> <el-form-item label="活动时间">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1"></el-date-picker> <el-date-picker type="date" placeholder="推送时间" v-model="queryDateStart"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
></el-date-picker>
<span class="line time-line" :span="2">-</span> <span class="line time-line" :span="2">-</span>
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2"></el-time-picker> <el-date-picker type="date" placeholder="推送时间" v-model="queryDateEnd"></el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="temp-input"> <el-row class="temp-input">
<el-col :span="10"> <el-col :span="10">
<el-form-item label="活动时间"> <el-form-item label="推送人数">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1"></el-date-picker> <el-input v-model.number="pushCountStart" placeholder="请输入推送名称"></el-input>
<span class="line time-line" :span="2">-</span> <span class="line time-line" :span="2">-</span>
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2"></el-time-picker> <el-input v-model.number="pushCountEnd" placeholder="请输入推送名称"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<el-form-item label="推送名称:"> <el-form-item label="创建推送节点:">
<el-select v-model="value" placeholder="请选择"> <el-select v-model="clerkId" placeholder="--全部--">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <el-option v-for="item in options" :key="item.clerkId" :label="item.label" :value="item.clerkId">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -43,42 +46,53 @@ ...@@ -43,42 +46,53 @@
</el-form> </el-form>
<el-table :data="dataList"> <el-table :data="dataList">
<el-table-column prop="id" label="推送名称" width="80"> <el-table-column prop="title" label="推送名称" width="200">
</el-table-column> </el-table-column>
<el-table-column prop="push_state" label="推送类型" width="80"> <el-table-column prop="type" label="推送类型" width="80">
<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>
<el-table-column label="推送时间" width="170"> <el-table-column label="推送时间" width="170">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.push_time | fomatDate}} {{scope.row.push_time | fomatDate}}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="title" label="推送范围" width="260"> <el-table-column prop="scope" label="推送范围" width="260">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="temp-tablespan"> <span v-if="scope.row.scope === 0">全体推送</span>
{{scope.row.title}} <template v-if="scope.row.scope === 1">
</span> <span class="temp-tablespan">
<span class="temp-tablespan"> {{scope.row.tagList[0]}}
{{scope.row.title}} </span>
</span> <span class="temp-tablespan">
<el-popover placement="bottom" title="标签" width="200" trigger="click"> {{scope.row.tagList[1]}}
<div> </span>
<button>1</button> <el-popover placement="bottom" title="标签" width="200" trigger="click">
<button>1</button> <div>
<button>1</button> <span class="temp-tablespan" v-for="tag in scope.row.tagList" :key="tag">
</div> {{tag}}
<el-button class="fr temp-tablesmore" slot="reference">更多</el-button> </span>
</el-popover> </div>
<el-button class="fr temp-tablesmore" slot="reference">更多</el-button>
</el-popover>
</template>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="title" label="推送人数" width="80"> <el-table-column prop="pushCount" label="推送人数" width="80">
</el-table-column> </el-table-column>
<el-table-column prop="title" label="推送成功人数" width="110"> <el-table-column prop="sentCount" label="推送成功人数" width="110">
</el-table-column> </el-table-column>
<el-table-column prop="title" label="创建消息节点"> <el-table-column prop="clerkName" label="创建消息节点">
</el-table-column> </el-table-column>
<el-table-column prop="title" label="推送进度"> <el-table-column prop="statusMsg" label="推送进度">
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNo" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</div> </div>
</template> </template>
...@@ -95,45 +109,86 @@ export default { ...@@ -95,45 +109,86 @@ export default {
}, },
options: [ options: [
{ {
value: '选项1', clerkId: '1212',
label: '黄金糕' label: '商户'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
} }
], ],
value: '' value: '',
pageNo: 1,
pageSize: 10,
total: 0,
title: '',
type: '',
queryDateStart: '',
queryDateEnd: '',
pushCountStart: '',
pushCountEnd: '',
clerkId: ''
} }
}, },
created () { created () {
this.getDataList() this.getDataList()
}, },
methods: { methods: {
reset () {
this.pageNo = 1
this.pageSize = 10
this.total = 0
this.title = ''
this.type = ''
this.queryDateStart = ''
this.queryDateEnd = ''
this.pushCountStart = ''
this.pushCountEnd = ''
this.clerkId = ''
this.getDataList()
},
handleSizeChange (val) {
console.log(`每页 ${val} 条`)
},
handleCurrentChange (val) {
console.log(`当前页: ${val}`)
},
getDataList () { getDataList () {
this.axios.get('http://rap2api.taobao.org/app/mock/115626/getTemplateList').then(res => { const {
if (res && res.data && res.data.data) { pageNo,
const { dataList } = res.data.data pageSize,
this.dataList = dataList title,
} type,
}) queryDateStart,
queryDateEnd,
pushCountStart,
pushCountEnd,
clerkId
} = this
this.axios
.get('/static/temp-list.json', {
params: {
pageNo,
pageSize,
title,
type,
queryDateStart,
queryDateEnd,
pushCountStart,
pushCountEnd,
clerkId
}
})
.then(res => {
if (res && res.data && res.data.data) {
const { data, totalCount } = res.data
this.dataList = data
this.total = totalCount
}
})
} }
} }
} }
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
>>>.el-pagination .el-select .el-input
width auto
>>>.el-input__inner >>>.el-input__inner
min-width 220px min-width 220px
.temp-list .temp-list
......
static/getarticlesummary.json 0 → 100644
{
"code": 0,
"message": "",
"result": {
"mediaGetarticle": [
{
"title": "测试推送",
"intPageReadUserTotal": 0,
"intPageReadCountTotal": 0,
"oriPageReadUserTotal": 0,
"oriPageReadCountTotal": 0,
"shareUserTotal": 0,
"shareCountTotal": 0,
"addToFavUserTotal": 0,
"addToFavCountTotal": 0,
"mediaId": "9cNIKtOZNJihIJyV2SdxhGXCcQF5WAhkxlxQL-p3mao",
"mediaGetarticles": [
{
"refDate": "2018-11-01",
"intPageReadUser": 0,
"intPageReadCount": 0,
"oriPageReadUser": 0,
"oriPageReadCount": 0,
"shareUser": 0,
"shareCount": 0,
"addToFavUser": 0,
"addToFavCount": 0
}
],
"msgMassId": 1057838922241019900,
"sendCountTotal": 0,
"pushCountTotal": 0
},
{
"title": "qwcasdasda",
"intPageReadUserTotal": 0,
"intPageReadCountTotal": 0,
"oriPageReadUserTotal": 0,
"oriPageReadCountTotal": 0,
"shareUserTotal": 0,
"shareCountTotal": 0,
"addToFavUserTotal": 0,
"addToFavCountTotal": 0,
"mediaId": "9cNIKtOZNJihIJyV2SdxhGXCcQF5WAhkxlxQL-p3mao",
"mediaGetarticles": [
{
"refDate": "2018-11-01",
"intPageReadUser": 0,
"intPageReadCount": 0,
"oriPageReadUser": 0,
"oriPageReadCount": 0,
"shareUser": 0,
"shareCount": 0,
"addToFavUser": 0,
"addToFavCount": 0
}
],
"msgMassId": 1058168792053583872,
"sendCountTotal": 0,
"pushCountTotal": 0
},
{
"msgid": "2247483897",
"title": "软文精准营销测试，点我！",
"intPageReadUserTotal": 0,
"intPageReadCountTotal": 0,
"oriPageReadUserTotal": 0,
"oriPageReadCountTotal": 0,
"shareUserTotal": 0,
"shareCountTotal": 0,
"addToFavUserTotal": 0,
"addToFavCountTotal": 0,
"mediaId": "9cNIKtOZNJihIJyV2SdxhGXCcQF5WAhkxlxQL-p3mao",
"mediaGetarticles": [
{
"refDate": "2018-11-01",
"intPageReadUser": 0,
"intPageReadCount": 0,
"oriPageReadUser": 0,
"oriPageReadCount": 0,
"shareUser": 0,
"shareCount": 0,
"addToFavUser": 0,
"addToFavCount": 0
}
],
"msgMassId": 1058205003421978624,
"sendCountTotal": 0,
"pushCountTotal": 0,
"thumb_url": "http://mmbiz.qpic.cn/mmbiz_jpg/myR8bhKp5ab8Gq0rmGvmlIbkbGdVxgWMQUIMOhQ7ick28Leraz5CDmqH3sdlkibg46PHibUxyD7yBwPM6KG7uGyXA/0?wx_fmt=jpeg",
"url": "http://mp.weixin.qq.com/s?__biz=MzAxMzk1MjAwNA==&mid=100000232&idx=1&sn=64a6b1fb2581e5b03317a37029f29f9d&chksm=1b9bf4832cec7d951df3f6b244ad682121dd7cf75406bcc4b36aabab35c0e67110f19ea63e61#rd"
}
],
"wechatMediaSummary": {
"intPageReadUserTotal": 0,
"intPageReadCountTotal": 0,
"oriPageReadUserTotal": 0,
"oriPageReadCountTotal": 0,
"shareUserTotal": 0,
"shareCountTotal": 0,
"addToFavUserTotal": 0,
"addToFavCountTotal": 0,
"mediaId": "9cNIKtOZNJihIJyV2SdxhGXCcQF5WAhkxlxQL-p3mao",
"mediaGetarticles": [
{
"refDate": "2018-11-01",
"intPageReadUser": 0,
"intPageReadCount": 0,
"oriPageReadUser": 0,
"oriPageReadCount": 0,
"shareUser": 0,
"shareCount": 0,
"addToFavUser": 0,
"addToFavCount": 0
}
],
"sendCountTotal": 16,
"pushCountTotal": 4
}
}
}
static/save.json 0 → 100644
{
"code" : 0,
"message" : "suc"
}
\ No newline at end of file
static/tag-count.json 0 → 100644
{
"code" : 0,
"message" : "",
"result" : 5
}
\ No newline at end of file
static/temp-list.json 0 → 100644
{
"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