add:steppage

src/assets/styles/common.css

@@ -26,6 +26,9 @@
 .fr {
   float: right;
 }
+.fl {
+  float: left;
+}
 .step {
   background-color: rgba(52, 73, 94, 1);
   color: #fff;

src/pages/addmarketing/components/AddDesc.vue

@@ -25,8 +25,10 @@
 </template>
 <style lang="stylus" scoped>
 .marketing-title
-  height 220px
+  height 240px
+  min-width 1077px
   background-color #fff
+  margin-bottom 10px
   .top-left
     height 50px
     line-height 50px

src/pages/addmarketing/components/Step.vue

 <template>
- <div style="height: 800px;">
+  <div class="add-step">
     <el-steps direction="vertical" :active="1">
       <el-step></el-step>
-        <el-step ></el-step>
-        <el-step ></el-step>
-        <el-step ></el-step>
-        <el-step ></el-step>
+      <el-step></el-step>
+      <el-step></el-step>
+      <el-step></el-step>
+      <el-step></el-step>
     </el-steps>
   </div>
 </template>
 <style lang='stylus' scoped>
->>>.el-step__icon
+.add-step
+  padding 25px 15px 0 60px
+  >>>.el-step__icon
     background-color rgba(52, 73, 94, 1)
     color #fff
     border-color rgba(52, 73, 94, 1)
     width 35px
     height 35px
->>>.el-step.is-vertical .el-step__line
+  >>>.el-step.is-vertical .el-step__line
     left 17px
     width 3px
     height 150px
     top 38px
     background-color rgba(52, 73, 94, 1)
+  .el-steps--vertical
+    height 700px
 </style>

src/pages/addmarketing/components/StepInfo.vue

 <template>
-  <div>
+  <div class="step-info">
     <el-form ref="form" :model="form" label-width="100px">
       <el-form-item label="新建推送名称">
-        <span><span class="star-red">*</span> 推送名称仅供数据中心操作记录查询，您推送的会员将不会看到此信息。</span>
+        <span class="gray"><span class="star-red">*</span> 推送名称仅供数据中心操作记录查询，您推送的会员将不会看到此信息。</span>
       </el-form-item>
       <el-form-item label="推送名称">
-        <!-- <el-input v-model="form.name" placeholder="请输入推送名称，10字以内"></el-input> -->
+        <el-input v-model="form.name" placeholder="请输入推送名称，10字以内"></el-input>
       </el-form-item>
-      <el-form-item label="选择推送素材">
-        <span><span class="star-red">*</span> 推送素材需前往<a href="#">微信公众平台</a>-管理-素材管理维护。</span>
+      <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:30px"></i>
+          <i class="el-icon-plus" style="font-size:50px;margin-top:50px"></i>
           <div class="el-upload__text">添加微信素材</div>
-          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
         </el-upload>
       </el-form-item>
       <el-form-item label="选择推送范围">
         <el-radio-group v-model="form.resource">
           <el-radio label="全体推送"></el-radio>
           <el-radio label="精准推送"></el-radio>
-          <div>
-            <el-tag>标签一454545454545454545454545</el-tag>
-          </div>
         </el-radio-group>
+        <div v-if="form.resource === '精准推送'">
+          <div class="form-tags">
+            <span class="el-tag tag-info">588</span>
+            <span class="el-tag tag-info">实际</span>
+            <span class="el-tag tag-info">588</span>
+          </div>
+        </div>
       </el-form-item>
       <el-form-item label="预览推送数量">
-        <span><span class="star-red">*</span>实际推送成功数量将略有偏差，选中多个标签为同时满足选中标签群体的会员。推送人数必须大于1人。</span>
+        <span class="gray"><span class="star-red">*</span>实际推送成功数量将略有偏差，选中多个标签为同时满足选中标签群体的会员。推送人数必须大于1人。</span>
         <div>
-          <el-button>选中标签，预览</el-button>
+          <el-button class="form-button">选中标签，预览</el-button>
           <span>统计中，请稍候</span>
         </div>
         <div>
-          <el-button>重新预览</el-button>
-          <span>188 人</span>
-          <span>标签会员数： 188 人</span>
+          <el-button class="form-button">重新预览</el-button>
+          <span class="form-checknum">188</span>人
+          <span class="form-vipnum">标签会员数： 188 人</span>
           <span>其中，关注公众号： 188 人</span>
           <span>已推送4次会员： 188 人</span>
         </div>
       </el-form-item>
       <el-form-item label="执行推送任务">
-        <span><span class="star-red">*</span>填写邮箱后，勾选免责说明，确认进行推送，推送完成后将发送邮件通知至指定邮箱。</span>
+        <span class="gray"><span class="star-red">*</span>填写邮箱后，勾选免责说明，确认进行推送，推送完成后将发送邮件通知至指定邮箱。</span>
         <el-checkbox v-model="checked">本次推送为t测试组商户123自发行为，发放内容请遵守国家相关法律规定..</el-checkbox>
       </el-form-item>
       <el-form-item label="指定接收邮箱">
         <el-input v-model="input" type="email" placeholder="请输入您要接收任务信息的邮箱"></el-input>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">确认推送</el-button>
+        <el-button class="form-button" @click="onSubmit">确认推送</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -85,3 +88,48 @@ export default {
   }
 }
 </script>
+<style lang="stylus" scoped>
+.step-info
+  margin-top 25px
+  padding-bottom 20px
+  .el-input
+    width 50%
+  .step-choose
+    margin-top 60px
+  >>>.el-upload-dragger
+    border 1px solid #d9d9d9
+    width 260px
+    height 220px
+  .form-tags
+    background-color #eee
+    height 260px
+    width 80%
+    border-radius 4px
+    .tag-info
+      width 80px
+      height 25px
+      line-height 25px
+      text-align center
+      margin 15px
+  .form-button
+    width 138px
+    height 37px
+    border none
+    background-color rgba(51, 122, 183, 1)
+    border-radius 3px
+    color #fff
+    font-family 'Arial Normal', 'Arial'
+    font-weight 400
+    font-style normal
+    font-size 13px
+    margin-right 15px
+  .form-checknum
+    color blue
+    font-size 32px
+  .form-vipnum
+    border-left 1px solid red
+    height 50px
+    display inline-block
+    padding-left 26px
+    margin-left 26px
+</style>

src/pages/addmarketing/index.vue

 <template>
   <div class="marketing">
     <add-desc></add-desc>
-    <el-row>
+    <el-row class="add-row">
       <el-col :span="2">
         <step></step>
       </el-col>
@@ -24,49 +24,8 @@ export default {
   }
 }
 </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
+  .add-row
     background-color #fff
-    height 27px
-  .marketing-tabs
-    position relative
-    top -10px
 </style>

src/pages/marketing-center/components/AddMessage.vue

@@ -3,7 +3,7 @@
     <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">
+          <div class="left-title-name fl">
             <span>
               <img src="./../../../assets/images/wechat.png">
             </span>
@@ -11,7 +11,7 @@
             <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/auth.png">
             </span>
@@ -19,15 +19,15 @@
           </div>
         </div>
         <div class="left-icon">
-          <div class="icon-left">
-            <span class="icon-wechat">
+          <div class="icon-left fl">
+            <span class="icon-wechat" @click="handleAddMaterial">
               <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">
+              <img src="./../../../assets/images/temp.png" @click="handleAddTemp">
             </span>
             <p class="icon-wechat-msg title-center">营销模板消息</p>
           </div>
@@ -53,7 +53,7 @@
         <div class="right-marketing">
           <div>
             <span class="icon-wechat">
-              <img src="./../../../assets/images/message.png">
+              <img src="./../../../assets/images/message.png" @click="handleAddMessage">
             </span>
             <p class="icon-wechat-msg title-center">短信营销消息</p>
           </div>
@@ -75,7 +75,17 @@ export default {
   components: {},
   computed: {},
   mounted () {},
-  methods: {}
+  methods: {
+    handleAddMaterial () {
+      this.$router.push('addmarketing')
+    },
+    handleAddTemp () {
+      console.log('handleAddTemp')
+    },
+    handleAddMessage () {
+      console.log('handleAddMessage')
+    }
+  }
 }
 </script>
 <style lang='stylus' scoped>
@@ -90,16 +100,12 @@ export default {
       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

src/pages/marketing-center/components/PushDetail.vue

@@ -5,18 +5,26 @@
         <div class="detail-single">
           <div class="detail-top">
             <span class="top-name detail-title">{{item.name}}</span>
-            <div class="top-right">
+            <div class="top-right fr">
               <span class="top-time detail-title">{{item.time}}</span>
-              <span class="top-state">{{item.state}}</span>
+              <span class="top-state">{{item.result}}</span>
             </div>
           </div>
           <div class="detail-data">
             <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>
+            <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">
+              <div>
+                <button>1</button>
+                <button>1</button>
+                <button>1</button>
+              </div>
+              <el-button class="fr" slot="reference">{{item.type}}</el-button>
+            </el-popover>
           </div>
           <div class="detail-node">
             <span class="detail-title">创建推送节点：</span> {{item.node}}
@@ -44,7 +52,7 @@ export default {
   },
   methods: {
     GetPushDetail () {
-      this.axios.get('http://rap2api.taobao.org/app/mock/115626/getTemplateList').then(res => {
+      this.axios.get('http://rap2api.taobao.org/app/mock/115626/getPushDetails').then(res => {
         if (res && res.data) {
           this.dataList = res.data.dataList
         }
@@ -59,6 +67,8 @@ export default {
     font-size 14px
     color #496D92
     text-align left
+  .result-add
+    padding-left 100px
   .detail-single
     height 124px
     background-color rgba(251, 252, 252, 1)
@@ -72,29 +82,16 @@ export default {
         height 40px
         line-height 40px
       .top-right
-        float right
+        .top-state
+          border 1px solid gray
+          padding 5px
   .detail-data, .detail-node
     height 40px
     line-height 40px
+  .detail-data
+    .el-button
+      border none
+      background #fbfcfc
+      width 74px
+      height 27px
 </style>
-/*
-
-.detail-single
-    background-color #eee
-    padding 0px 10px
-    margin-bottom 10px
-    box-sizing border-box
-    float left
-    width 50%
-  .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
-
-*/

src/pages/marketing-center/components/TempList.vue

@@ -107,7 +107,7 @@ export default {
   },
   methods: {
     getDataList () {
-      this.axios.get('/static/getStoreNoticeListByPageAction.json').then(res => {
+      this.axios.get('http://rap2api.taobao.org/app/mock/115626/getTemplateList').then(res => {
         if (res && res.data && res.data.data) {
           const { dataList } = res.data.data
           this.dataList = dataList
@@ -128,3 +128,41 @@ export default {
   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"
+    }
+  ]
+}