Skip to content

C
common-templete
Commit 4605a133 by 汤强勇
Options

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

parents 44c72322 dfa7f8f8
Showing with 332 additions and 95 deletions
config/index.js
......@@ -9,7 +9,22 @@ module.exports = {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
proxyTable: {
'/materials-list': {
changeOrigin: true, // 是否跨域
target: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/materials-list',
pathRewrite: {
'^/materials-list': '/',
},
},
'/getarticlesummary': {
changeOrigin: true, // 是否跨域
target: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/getarticlesummary',
pathRewrite: {
'^/getarticlesummary': '/',
},
},
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
......
src/common/bus.js 0 → 100644
import Vue from 'vue'
// 使用 Event Bus
const Bus = new Vue()
export default Bus
src/components/Pagination/index.vue
<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">
<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>
</div>
</template>
......@@ -9,9 +8,10 @@
export default {
data () {
return {
currentPage1: 5
currentPage: 1
}
},
props: ['dataList'],
methods: {
handleSizeChange (val) {
console.log(`每页 ${val} 条`)
......
src/filters/index.js
import moment from 'moment'
export function fomatDate (value, format) {
return moment(value).format(format || 'YYYY-MM-DD, HH:mm:ss')
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
}
src/main.js
......@@ -7,13 +7,30 @@ import ElementUI from 'element-ui'
import './assets/styles/reset.css'
import './assets/styles/common.css'
import 'element-ui/lib/theme-chalk/index.css'
import qs from 'qs'
import store from './store'
import Axios from 'axios'
import * as filters from './filters'
// 引入echarts
import echarts from 'echarts'
// Axios.defaults.baseURL = 'http://testcenter.bigaka.net/crm'
Axios.interceptors.request.use(
config => {
if (config.method === 'post') {
config.data = qs.stringify(config.data)
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
}
return config
},
error => {
return Promise.reject(error)
}
)
Vue.use(ElementUI)
// Vue.use(http)
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
......@@ -22,6 +39,10 @@ Vue.config.productionTip = false
Vue.prototype.axios = Axios
Vue.prototype.$echarts = echarts
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
/* eslint-disable no-new */
new Vue({
el: '#app',
......
src/pages/addmarketing/components/StepInfo.vue
......@@ -9,10 +9,34 @@
</el-form-item>
<el-form-item label="选择推送素材" class="step-choose">
<span class="gray"><span class="star-red">*</span> 推送素材需前往<a href="#">微信公众平台</a>-管理-素材管理维护。</span>
<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
<i class="el-icon-plus" style="font-size:50px;margin-top:50px"></i>
<div class="el-upload__text">添加微信素材</div>
</el-upload>
<div class="add-material">
<el-button type="text" @click="centerDialogVisible = true" class="add-title">
<p><i class="el-icon-plus add-plus"></i></p>
添加微信素材
</el-button>
</div>
<el-dialog title="微信消息素材" :visible.sync="centerDialogVisible" width="80%" center class="add-subtitle title">
<el-row>
<el-col :span="24">
<div class="add-line"></div>
</el-col>
</el-row>
<el-row :gutter="20" class="add-container">
<el-col :span="8">
<div class="add-content">1</div>
</el-col>
<el-col :span="8">
<div class="add-content">2</div>
</el-col>
<el-col :span="8">
<div class="add-content">3</div>
</el-col>
</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-form-item>
<el-form-item label="选择推送范围">
<el-radio-group v-model="form.resource">
......@@ -55,6 +79,8 @@
</div>
</template>
<script>
// import Bus from '@/common/bus'
export default {
data () {
return {
......@@ -71,9 +97,20 @@ export default {
input: '',
checked: true,
dialogImageUrl: '',
dialogVisible: false
dialogVisible: false,
centerDialogVisible: false,
imageUrl: ''
}
},
created () {
this.getViewCount()
// Bus.on('test1', msg => {
// console.log('msg', msg)
// })
},
mounted () {
// this.getAddMaterial()
},
methods: {
onSubmit () {
console.log('submit!')
......@@ -84,6 +121,36 @@ export default {
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
getViewCount () {
this.axios
.post('http://rap2api.taobao.org/app/mock/115626/pre_view_count', {
tagIds: '1',
id: 1,
parentId: 1,
type: 2
})
.then(res => {
if (res && res.data && res.data.code === 0) {
console.log(res.data.result)
// this.dataList = res.data.result.result
}
})
},
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
}
}
}
......@@ -96,10 +163,43 @@ export default {
width 50%
.step-choose
margin-top 60px
>>>.el-upload-dragger
border 1px solid #d9d9d9
width 260px
height 220px
.add-material
width 265px
height 229px
border 2px solid #e3e4e9
color #e3e4e9
text-align center
position relative
.add-title
color #a4a4a4
.add-plus
font-size 91px
font-weight 100
margin 18px 0
color #e3e4e9
text-align center
>>>.el-dialog__header
padding 4px 20px 0px
>>>.el-dialog--center
text-align left
>>>.el-dialog__body
padding 0
>>>.el-dialog__title
line-height 24px
font-size 15px
color #73879C
.add-container
margin 0
padding 0 20px 20px 20px
.add-content
background-color pink
padding 0 6px
border 1px solid #ececec
position relative
top 30px
margin-bottom 35px
.add-line
border-top 1px solid #e5e5e5
.form-tags
background-color #eee
height 260px
......
src/pages/marketing-center/components/AddMessage.vue
......@@ -15,7 +15,6 @@
<span>
<img src="./../../../assets/images/auth.png">
</span>
<!-- <span>已授权</span> -->
</div>
</div>
<div class="left-icon">
......@@ -35,7 +34,7 @@
</el-col>
<el-col :span="10" class="button-right">
<div class="left-title button-right" style="flex:1">
<div class="left-title-name">
<div class="left-title-name fl">
<span>
<img src="./../../../assets/images/message.png">
</span>
......@@ -43,11 +42,10 @@
<span class="star-red">*</span>
<a href="#" class="gray">点击新建群发</a>
</div>
<div class="left-title-message">
<div class="left-title-message fr">
<span>
<img src="./../../../assets/images/unauth.png">
</span>
<!-- <span>未授权</span> -->
</div>
</div>
<div class="right-marketing">
......
src/pages/marketing-center/components/MarketingPush.vue
......@@ -2,17 +2,17 @@
<div>
<div class="marketing-title">
<el-row class="top-left">
<el-col :span="14">
<el-col :span="12">
<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 :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>
......@@ -90,6 +90,8 @@ export default {
font-size 14px
color #496D92
text-align left
i
margin-right 3px
.marketing-subtitle
height 130px
.subtitle-img
......
src/pages/marketing-center/components/MarketingTab.vue
<template>
<el-tabs v-model="tabActive" type="card" @tab-click="handleClick">
<el-tabs v-model="tabActive" type="card" @tab-click="handleClick" class="market-tabs">
<el-tab-pane label="图文素材消息" name="first">
<materia-list></materia-list>
<push-detail></push-detail>
......@@ -32,10 +32,48 @@ export default {
ArticleDetails,
TempList
},
created () {
// this.getData()
},
methods: {
handleClick (tab, event) {
console.log(tab, event)
},
getData () {
this.axios
.post('http://rap2api.taobao.org/app/mock/115626/getarticlesummary', {
mediaId: '1'
})
.then(res => {
console.log('res', res)
})
}
}
}
</script>
<style lang="stylus" scoped>
.market-tabs
>>>.el-tabs__nav
margin-left 36px
border none
background-color transparent
>>>.el-tabs__item
color rgb(115, 135, 156)
border 1px solid #e4e7ed
margin-right 10px
background-color #e4e7ed
border-radius 4px
>>>.el-tabs__item:hover
color #000
>>>.el-tabs__item.is-active
background #fff
color #000
border-right 5px solid #e4e7ed
border-bottom 1px solid #e4e7ed
>>>.el-tabs__item:first-child
border-left 2px solid #e4e7ed
>>>.el-tabs__header
border none
>>>.el-tabs__nav .el-tabs__item
margin-right 12px
</style>
src/pages/marketing-center/components/MateriaList.vue
<template>
<div class="materialist clear">
<ul>
<li v-for="(item,index) in datalist" :key="index" @click="handleClick(index)">
<img :src="img1" alt="">
<li v-for="(item,index) in imgList" :key="index" @click="handleClick(index)">
<img :src="item.thumb_url" alt="">
</li>
</ul>
</div>
</template>
<script>
import img1 from './../../../assets/images/img1.png'
// import Bus from '@/common/bus'
export default {
data () {
return {
datalist: [],
img1
imgList: []
}
},
created () {
......@@ -23,9 +23,28 @@ export default {
},
methods: {
getDataList () {
this.axios.get('http://rap2api.taobao.org/app/mock/115626/getMateriaList').then(res => {
// this.axios
// .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) {
this.datalist = res.data.datalist
console.log('res', res)
// this.datalist = res.data.datalist
}
})
},
......
src/pages/marketing-center/components/PushDetail.vue
<template>
<div class="detail-all clear">
<el-row>
<el-col :span="12" v-for="(item, index) in dataList" :key="index">
<el-col :span="12" v-for="(item, index) in pushList" :key="index">
<div class="detail-single">
<div class="detail-top">
<span class="top-name detail-title">{{item.name}}</span>
<span class="top-name detail-title">{{item.title}}</span>
<div class="top-right fr">
<span class="top-time detail-title">{{item.time}}</span>
<span class="top-state">{{item.result}}</span>
<span class="top-time detail-title">{{item.pushTime | fomatDate}}</span>
<span class="top-pushbtn">
<img src="./../../../../static/image/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>
</span>
</div>
</div>
<div class="detail-data">
<span v-if="item.status !== -1">
<span>
<span class="detail-title">推送人数：</span> {{item.num}}
<span class="detail-title">推送人数：</span> {{item.pushCount}}
</span>
<span class="detail-title result-add">推送成功:</span> {{item.sentCount}}
</span>
<span class="detail-title result-add">推送成功:</span> {{item.suc}}
<!-- <span class="detail-title">失败原因:</span> {{item.suc}} -->
<!-- <span class="detail-title fr">{{item.type}}</span> -->
<el-popover placement="bottom" title="标签" width="200" trigger="click">
<span v-if="item.status !== -1 && item.status !==0 && item.status !==1" class="detail-title">失败原因: {{item.status}}</span>
<el-button class="fr" slot="reference" v-if="item.scope === 0">全体推送</el-button>
<el-popover placement="right" title="标签" width="200" trigger="click" v-if="item.scope === 1">
<div>
<button>1</button>
<button>1</button>
<button>1</button>
<button v-for="item in item.tagList" :key="item" class="detail-tagbtn">{{item}}</button>
</div>
<el-button class="fr" slot="reference">{{item.type}}</el-button>
<el-button class="fr" slot="reference">精准推送</el-button>
</el-popover>
</div>
<div class="detail-node">
<span class="detail-title">创建推送节点：</span> {{item.node}}
<span class="detail-title">创建推送节点：</span> {{item.clerkName}}
</div>
</div>
</el-col>
</el-row>
<pagination></pagination>
<pagination v-show="pushList.length > 6" :dataList="dataList" class="detail-pagination"></pagination>
</div>
</template>
......@@ -41,7 +46,8 @@ import Pagination from 'components/Pagination'
export default {
data () {
return {
dataList: []
dataList: [],
pushList: []
}
},
components: {
......@@ -52,9 +58,17 @@ export default {
},
methods: {
GetPushDetail () {
this.axios.get('http://rap2api.taobao.org/app/mock/115626/getPushDetails').then(res => {
if (res && res.data) {
this.dataList = res.data.dataList
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
}
})
}
......@@ -82,9 +96,16 @@ export default {
height 40px
line-height 40px
.top-right
.top-pushbtn
position relative
margin-left 20px
.top-state
border 1px solid gray
padding 5px
position absolute
top -17px
right 3px
.detail-pagination
text-align right
.detail-data, .detail-node
height 40px
line-height 40px
......@@ -94,4 +115,20 @@ export default {
background #fbfcfc
width 74px
height 27px
.detail-tagbtn
width 100px
height 25px
line-height 25px
display inline-block
width 90px
overflow hidden
border 1px solid transparent
border-radius 12px
background #0096ff
text-align center
color #fff
padding 0px 3px
vertical-align top
font-size 13px
margin-bottom 20px
</style>
src/pages/marketing-center/components/TempList.vue
......@@ -43,20 +43,36 @@
</el-form>
<el-table :data="dataList">
<el-table-column prop="id" label="推送名称" width="140">
<el-table-column prop="id" label="推送名称" width="80">
</el-table-column>
<el-table-column prop="push_state" label="推送类型" width="120">
<el-table-column prop="push_state" label="推送类型" width="80">
</el-table-column>
<el-table-column label="推送时间">
<el-table-column label="推送时间" width="170">
<template slot-scope="scope">
{{scope.row.push_time | fomatDate}}
</template>
</el-table-column>
<el-table-column prop="title" label="推送范围">
<el-table-column prop="title" label="推送范围" width="260">
<template slot-scope="scope">
<span class="temp-tablespan">
{{scope.row.title}}
</span>
<span class="temp-tablespan">
{{scope.row.title}}
</span>
<el-popover placement="bottom" title="标签" width="200" trigger="click">
<div>
<button>1</button>
<button>1</button>
<button>1</button>
</div>
<el-button class="fr temp-tablesmore" slot="reference">更多</el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="title" label="推送人数">
<el-table-column prop="title" label="推送人数" width="80">
</el-table-column>
<el-table-column prop="title" label="推送成功人数">
<el-table-column prop="title" label="推送成功人数" width="110">
</el-table-column>
<el-table-column prop="title" label="创建消息节点">
</el-table-column>
......@@ -121,48 +137,33 @@ export default {
>>>.el-input__inner
min-width 220px
.temp-list
.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
overflow hidden
border 1px solid transparent
border-radius 12px
background #0096FF
text-align center
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>
{
"dataList": [
{
"name": "sdfsdf",
"template": "微信营销",
"time": "2018-10-18 17:20:47",
"type": "全体推送",
"state": "推送ing",
"num": "23",
"suc": "0",
"node": "测试组商户",
"result": "推送chenggong"
},
{
"name": "sdfsdf",
"template": "微信营销",
"time": "2018-10-18 17:20:47",
"type": "全体推送",
"state": "推送ing",
"num": "23",
"suc": "0",
"node": "测试组商户",
"result": "推送chenggong"
},
{
"name": "sdfsdf",
"template": "微信营销",
"time": "2018-10-18 17:20:47",
"type": "全体推送",
"state": "推送ing",
"num": "23",
"suc": "0",
"node": "测试组商户",
"result": "推送chenggong"
}
]
}
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