oil-station/fuintAdmin/src/views/EventMarketing/center/index.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="gobox(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">创建活动</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="gobox(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">创建活动</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">创建活动</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">创建活动</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">创建活动</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">创建活动</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">创建活动</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">创建活动</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">创建活动</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">创建活动</div>
              </div>
            </div>
          </div>
        </div>
        <div class="bai-box" >
            <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: {
    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;
}
.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;
}
.b-d{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;

}
</style>