Skip to content

C
common-templete
Commit 4151981c by 汤强勇
Options

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

parents b52f742e 140c4ab7
Showing with 165 additions and 108 deletions
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"
}
]
}
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