650 lines
20 KiB
Vue
650 lines
20 KiB
Vue
<template>
|
|
<!-- 活动中心-->
|
|
<div class="app-containers">
|
|
<div class="tap-box">
|
|
<div class="t-box" :class="{'actve' : tabindex == index }" v-for="(item,index) in tablist" :key="index" @click="tabindex = index" >
|
|
{{item}}
|
|
</div>
|
|
</div>
|
|
<div class="rp-box" >
|
|
<div class="bai-box" v-show="tabindex == 0">
|
|
<div class="d-s">
|
|
<div class="gang"></div>
|
|
<div style="font-weight: bold">会员营销</div>
|
|
</div>
|
|
<div class="wp-box">
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/礼物@2x.png">
|
|
<div>
|
|
<div class="size_title">开卡有礼</div>
|
|
<div class="size_text">激活会员卡，享受优惠</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(1)">创建活动</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/理财@2x.png">
|
|
<div>
|
|
<div class="size_title">充值有礼</div>
|
|
<div class="size_text">充值后赠送金额、积分、经验、 优惠券等</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(2)">创建活动</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/消费券@2x.png">
|
|
<div>
|
|
<div class="size_title">消费有礼</div>
|
|
<div class="size_text">支付后赠送积分、成长值、优惠券</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(3)">创建活动</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/邀请@2x.png">
|
|
<div>
|
|
<div class="size_title">邀请有礼</div>
|
|
<div class="size_text">邀请好友注册会员，获得奖励</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(4)">创建活动</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/生日专区@2x.png">
|
|
<div>
|
|
<div class="size_title">生日有礼</div>
|
|
<div class="size_text">会员生日关怀，激活用户复购</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(5)">创建活动</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/充值@2x.png">
|
|
<div>
|
|
<div class="size_title">推荐会员充值有礼</div>
|
|
<div class="size_text">会员充值后，推荐人获得积分、 成长值、优</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(6)">创建活动</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/消费卡@2x.png" style="width: 59px;height: 42px">
|
|
<div>
|
|
<div class="size_title">推荐会员消费有礼</div>
|
|
<div class="size_text">会员消费后，推荐人获得积分、 成长值、优</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(7)">创建活动</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/营销@2x.png" >
|
|
<div>
|
|
<div class="size_title">弹窗营销</div>
|
|
<div class="size_text">支付前定向投放优惠</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(8)">创建活动</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="d-s" style="margin-top: 15px">
|
|
<div class="gang"></div>
|
|
<div style="font-weight: bold">价格营销</div>
|
|
</div>
|
|
<div class="wp-box">
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/券@2x.png">
|
|
<div>
|
|
<div class="size_title">分时优惠</div>
|
|
<div class="size_text">不同会员不同时间，指定油品享受 限时优惠</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(9)">创建活动</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/特价申请单@2x.png">
|
|
<div>
|
|
<div class="size_title">限时特价</div>
|
|
<div class="size_text">充值后赠送金额、积分、成长值、 优惠券、</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(10)">创建活动</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/会员营销@2x.png">
|
|
<div>
|
|
<div class="size_title">立减营销</div>
|
|
<div class="size_text">订单满立减营销活动</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(11)">创建活动</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-box">
|
|
<div class="nr-top">
|
|
<img src="./imgs/折扣@2x.png">
|
|
<div>
|
|
<div class="size_title">折扣营销</div>
|
|
<div class="size_text">会员折扣营销，限时订单折扣， 引爆店铺流</div>
|
|
</div>
|
|
</div>
|
|
<div class="nr-bottom">
|
|
<div class="left-bt">进行中1个</div>
|
|
|
|
|
<div class="right-bt" @click="routerPush(12)" >创建活动</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bai-box" v-show="tabindex == 1" >
|
|
<div class="b-d">
|
|
<div class="d-s">
|
|
<el-input v-model="ruleForm.input" placeholder="请输入活动名称" style=" width: 260px; margin-right: 15px"></el-input>
|
|
<el-select v-model="ruleForm.value" placeholder="请选择活动类型" style=" width: 260px; margin-right: 15px">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
<el-select v-model="ruleForm.value" placeholder="请选择状态" style=" width: 260px; margin-right: 15px">
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="d-s">
|
|
<el-button type="primary" icon="el-icon-search">搜索</el-button>
|
|
<el-button icon="el-icon-refresh-right">重置</el-button>
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
style="width: 100%">
|
|
<el-table-column
|
|
type="selection"
|
|
width="55">
|
|
</el-table-column>
|
|
<el-table-column
|
|
type="index"
|
|
label="序号"
|
|
width="55">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="活动类型"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="活动名称"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="活动内容"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="date"
|
|
label="活动时间"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="适用会员等级"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="活动详情"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="已领数量"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="状态"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="创建人"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="date"
|
|
label="创建时间"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
label="地址">
|
|
</el-table-column>
|
|
<el-table-column prop="date" label="操作" align="center" >
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
|
|
>修改</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
slot="reference"
|
|
>删除</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
>停用</el-button>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="bai-box" v-show="tabindex == 2"></div>
|
|
</div>
|
|
|
|
<!-- <div class="fji" >-->
|
|
<!-- <div class="wrap-box" @click="gobox(1)" >-->
|
|
<!-- <img src="./imgs/xfyl.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
|
|
<!-- <div class="p-r-title">-->
|
|
<!-- <div style="font-size: 24px;font-weight: bold" >消费有礼</div>-->
|
|
<!-- <div style="font-size: 12px">Consumption is polite</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="bottom-box">-->
|
|
<!-- <div>消费有礼</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="wrap-box" @click="gobox(2)" >-->
|
|
<!-- <img src="./imgs/zkyx.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
|
|
<!-- <div class="p-r-title">-->
|
|
<!-- <div style="font-size: 24px;font-weight: bold" >折扣营销</div>-->
|
|
<!-- <div style="font-size: 12px">Discount marketing</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="bottom-box">-->
|
|
<!-- <div>折扣营销</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="wrap-box" @click="gobox(3)" >-->
|
|
<!-- <img src="./imgs/mjyx.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
|
|
<!-- <div class="p-r-title">-->
|
|
<!-- <div style="font-size: 24px;font-weight: bold" >满减营销</div>-->
|
|
<!-- <div style="font-size: 12px">Consumption is polite</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="bottom-box">-->
|
|
<!-- <div>满减营销</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="wrap-box" @click="gobox(4)" >-->
|
|
<!-- <img src="./imgs/xryl.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
|
|
<!-- <div class="p-r-title">-->
|
|
<!-- <div style="font-size: 24px;font-weight: bold" >新人有礼</div>-->
|
|
<!-- <div style="font-size: 12px">Full reduction marketing</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="bottom-box">-->
|
|
<!-- <div>新人有礼</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="wrap-box" @click="gobox(5)" >-->
|
|
<!-- <img src="./imgs/tjyl.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
|
|
<!-- <div class="p-r-title">-->
|
|
<!-- <div style="font-size: 24px;font-weight: bold" >推荐有礼</div>-->
|
|
<!-- <div style="font-size: 12px">Newcomers are polite</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="bottom-box">-->
|
|
<!-- <div>推荐有礼</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="wrap-box" @click="gobox(6)" >-->
|
|
<!-- <img src="./imgs/yjfq.png" style="width: 315px;height: 265px;margin: 0 auto " >-->
|
|
<!-- <div class="p-r-title">-->
|
|
<!-- <div style="font-size: 24px;font-weight: bold" >一键发券</div>-->
|
|
<!-- <div style="font-size: 12px">One click coupon issuance</div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="bottom-box">-->
|
|
<!-- <div>一键发券</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
|
|
|
|
<!-- <activeConsumption v-if="value == 1"></activeConsumption>-->
|
|
<!-- <activeDiscount v-if="value == 2"></activeDiscount>-->
|
|
<!-- <activeFullminus v-if="value == 3"></activeFullminus>-->
|
|
<!-- <activeNewlyweds v-if="value == 4" ></activeNewlyweds>-->
|
|
<!-- <activeRecommend v-if="value == 5"></activeRecommend>-->
|
|
<!-- 添加或修改兑换券对话框 -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
import activeDiscount from '../activeDiscount/index'
|
|
import activeNewlyweds from '../activeNewlyweds/index'
|
|
import activeConsumption from '../activeConsumption/index'
|
|
import activeFullminus from '../activeFullminus/index'
|
|
import activeRecommend from '../activeRecommend/index'
|
|
export default {
|
|
name: 'Exchange',
|
|
data() {
|
|
return{
|
|
ruleForm:{},
|
|
value:1,
|
|
tabindex:0,
|
|
options: [{
|
|
value: '选项1',
|
|
label: '黄金糕'
|
|
}, {
|
|
value: '选项2',
|
|
label: '双皮奶'
|
|
}, {
|
|
value: '选项3',
|
|
label: '蚵仔煎'
|
|
}, {
|
|
value: '选项4',
|
|
label: '龙须面'
|
|
}, {
|
|
value: '选项5',
|
|
label: '北京烤鸭'
|
|
}],
|
|
tableData: [{
|
|
date: '2016-05-02',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
}, {
|
|
date: '2016-05-04',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1517 弄'
|
|
}, {
|
|
date: '2016-05-01',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1519 弄'
|
|
}, {
|
|
date: '2016-05-03',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1516 弄'
|
|
}],
|
|
tablist:[
|
|
"营销活动",
|
|
"当前活动列表",
|
|
"历史活动列表"
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
|
|
|
|
},
|
|
components:{
|
|
activeNewlyweds,activeConsumption,activeDiscount,activeFullminus,activeRecommend
|
|
},
|
|
|
|
methods: {
|
|
routerPush(id){
|
|
this.$router.push({
|
|
path: '/EventMarketing/openCardGift/index',
|
|
query: { id: id }
|
|
});
|
|
// this.$router.push('/EventMarketing/openCardGift/index')
|
|
},
|
|
gobox(id){
|
|
if(id == 1){
|
|
this.$router.push('/EventMarketing/activeConsumption/index')
|
|
}
|
|
if(id == 2){
|
|
this.$router.push('/EventMarketing/activeDiscount/index')
|
|
}
|
|
if(id == 3){
|
|
this.$router.push('/EventMarketing/activeFullminus/index')
|
|
}
|
|
if(id == 4){
|
|
this.$router.push('/EventMarketing/activeNewlyweds/index')
|
|
}
|
|
if(id == 5){
|
|
this.$router.push('/EventMarketing/activeRecommend/index')
|
|
}
|
|
if(id == 6){
|
|
this.$router.push('/EventMarketing/yijiancoupon/index')
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.app-containers{
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #f9f9f9;
|
|
}
|
|
.qr-code{
|
|
margin: 0px auto;
|
|
}
|
|
.rp-box{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
|
|
}
|
|
.wrap-box{
|
|
text-align: center;
|
|
width: 375px;
|
|
height: 316px;
|
|
background: #FFFFFF;
|
|
border-radius: 10px 10px 10px 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0px 2px 4px rgb(31 30 47 / 10%);
|
|
margin-right: 25px;
|
|
cursor: pointer;
|
|
margin-bottom: 25px;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
position: relative;
|
|
}
|
|
.p-r-title{
|
|
position: absolute;
|
|
left: 40px;
|
|
top: 20px;
|
|
color: #fff;
|
|
width: 200px;
|
|
text-align: left;
|
|
}
|
|
.fji{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.bottom-box{
|
|
box-sizing: border-box;
|
|
padding: 0px 15px;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
padding-bottom: 15px;
|
|
}
|
|
.rp-box{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.d-s{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.tap-box{
|
|
width: 100%;
|
|
height: 50px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.t-box{
|
|
height: 100%;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
border-bottom: 2px solid transparent;
|
|
margin: 0px 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
//border-bottom: 2px solid #FF770F;
|
|
}
|
|
.actve{
|
|
color: #FF770F !important;
|
|
font-weight: bold;
|
|
border-bottom: 2px solid #FF770F !important;
|
|
}
|
|
.bai-box{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
}
|
|
.gang{
|
|
width: 2px;
|
|
height: 14px;
|
|
background: #FF9655;
|
|
margin-right: 5px;
|
|
}
|
|
.wp-box{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
}
|
|
.nr-box{
|
|
border-radius: 10px;
|
|
border: 1px solid #EEEEEE;
|
|
margin-top: 15px;
|
|
margin-right: 15px;
|
|
width: 310px;
|
|
}
|
|
.nr-top{
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img{
|
|
width: 55px;
|
|
height: 55px ;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.size_title{
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
margin-bottom: 10px;
|
|
}
|
|
.size_text{
|
|
font-size: 12px;
|
|
color: #333333;
|
|
height: 34px;
|
|
}
|
|
.nr-bottom{
|
|
border-top: 1px solid #EEEEEE;
|
|
box-sizing: border-box;
|
|
padding: 4px ;
|
|
display: flex;
|
|
align-items: center;
|
|
color:#EEEEEE;
|
|
}
|
|
.left-bt{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
|
|
}
|
|
.right-bt{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
color: #FF9655;
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.b-d{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
|
|
}
|
|
</style>
|