add:devproxy

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

+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,22 +7,37 @@ 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 Axios from 'axios'
 import * as filters from './filters'
 import { http } from './plugin'
 // 引入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])
-})
-
 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,11 +23,30 @@ export default {
   },
   methods: {
     getDataList () {
-      this.axios.get('http://rap2api.taobao.org/app/mock/115626/getMateriaList').then(res => {
-        if (res && res.data) {
-          this.datalist = res.data.datalist
-        }
-      })
+      // 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) {
+            console.log('res', res)
+            // this.datalist = res.data.datalist
+          }
+        })
     },
     handleClick (index) {
       console.log('li', index)

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>
-              <span class="detail-title">推送人数：</span> {{item.num}}
+            <span v-if="item.status !== -1">
+              <span>
+                <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,11 +58,19 @@ 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-state
-          border 1px solid gray
-          padding 5px
+        .top-pushbtn
+          position relative
+          margin-left 20px
+          .top-state
+            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"
-    }
-  ]
-}