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="getindex(index)">
        {{ item }}
      </div>
    </div>
    <div class="rp-box">
      <!--      营销活动-->
      <div class="bai-box" style="height:84vh;overflow: auto" 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" @click="indexType('6')">进行中1个</div>
              |
              <div class="right-bt" @click="routerPush(1,'add')">创建活动</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" @click="goOtherPage(2)">进行中1个</div>
              |
              <div class="right-bt" @click="goOtherPage(2,'add')">创建活动</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" @click="indexType('5')">进行中1个</div>
              |
              <div class="right-bt" @click="routerPush(3,'add')">创建活动</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" @click="indexType('7')">进行中1个</div>
              |
              <div class="right-bt" @click="routerPush(4,'add')">创建活动</div>
            </div>
          </div>
          <div class="nr-box">
            <div class="nr-top">
              <img src="./imgs/生日专区@2x.png">
              <div>
                <div class="size_title" @click="indexType('4')">生日有礼</div>
                <div class="size_text">会员生日关怀，激活用户复购</div>
              </div>
            </div>
            <div class="nr-bottom">
              <div class="left-bt" @click="indexType('4')">进行中1个</div>
              |
              <div class="right-bt" @click="routerPush(5,'add')">创建活动</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" @click="indexType('8')">进行中1个</div>
              |
              <div class="right-bt" @click="routerPush(6,'add')">创建活动</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" @click="indexType('9')">进行中1个</div>
              |
              <div class="right-bt" @click="routerPush(7,'add')">创建活动</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" @click="indexType('10')">进行中1个</div>
              |
              <div class="right-bt" @click="routerPush(8,'add')">创建活动</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" @click="routerPush(9,'add')">进行中1个</div>
              |
              <div class="right-bt" @click="routerPush(9,'add')">创建活动</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" @click="routerPush(10,'add')">进行中1个</div>
              |
              <div class="right-bt" @click="routerPush(10,'add')">创建活动</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" @click="indexType('3')">进行中1个</div>
              |
              <div class="right-bt" @click="routerPush(11,'add')">创建活动</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" @click="goOtherPage(12)">进行中1个</div>
              |
              <div class="right-bt" @click="goOtherPage(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="queryParams.name" placeholder="请输入活动名称"
                      style=" width: 260px; margin-right: 15px"></el-input>
            <el-select v-model="queryParams.type" 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" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh-right" @click="resetQuery">重置</el-button>
          </div>
        </div>
        <div style="height: 68.9vh;overflow: auto">
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column type="selection" align="center" width="55"></el-table-column>
            <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
            <el-table-column prop="typeText" label="活动类型" align="center"></el-table-column>
            <el-table-column prop="name" label="活动名称" align="center"></el-table-column>
            <el-table-column prop="discountActiveDescribe" label="活动内容" align="center"></el-table-column>
            <el-table-column prop="time" label="活动时间" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.time==0">不限时间</span>
                <span v-else>{{ scope.row.activeStartTime }} ~ {{ scope.row.activeEndTime }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="userGradeName" label="适用会员等级" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.userGradeName || "--" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="discountActiveDescribe" label="活动详情" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.discountActiveDescribe || "--" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sendNum" label="已领数量" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sendNum || 0 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="activeStatus" label="状态" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.activeStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  disabled
                  inactive-value="2">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="createName" label="创建人" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
            <el-table-column prop="date" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="routerPush(scope.row.type,'edit',scope.row)"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  slot="reference"
                  @click="deleteActive(scope.row)"
                >删除
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="editStatus(scope.row)"
                >停用
                </el-button>
              </template>

            </el-table-column>
          </el-table>
        </div>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <!--      历史活动列表-->
      <div class="bai-box" v-show="tabindex == 2">
        <div class="b-d">
          <div class="d-s">
            <el-input v-model="queryParams.name" placeholder="请输入活动名称"
                      style=" width: 260px; margin-right: 15px"></el-input>
            <el-select v-model="queryParams.type" placeholder="请选择活动类型"
                       style=" width: 260px; margin-right: 15px">
              <el-option
                v-for="item in options"
                :key="item.value.toString()"
                :label="item.label"
                :value="item.value.toString()">
              </el-option>
            </el-select>
          </div>
          <div class="d-s">
            <el-button type="primary" icon="el-icon-search" @click="handleOldQuery">搜索</el-button>
            <el-button icon="el-icon-refresh-right" @click="resetOldQuery">重置</el-button>
          </div>
        </div>
        <div style="height: 68.9vh;overflow: auto">
          <el-table
            :data="oldTableData"
            border
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
            <el-table-column prop="typeText" label="活动类型" align="center"></el-table-column>
            <el-table-column prop="name" label="活动名称" align="center"></el-table-column>
            <el-table-column prop="discountActiveDescribe" label="活动内容" align="center"></el-table-column>
            <el-table-column prop="time" label="活动时间" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.time==0">不限时间</span>
                <span v-else>{{ scope.row.activeStartTime }} ~ {{ scope.row.activeEndTime }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="userGradeName" label="适用会员等级" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.userGradeName || "--" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="discountActiveDescribe" label="活动详情" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.discountActiveDescribe || "--" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sendNum" label="已领数量" align="center"></el-table-column>
            <el-table-column prop="activeStatus" label="状态" align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.activeStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  disabled
                  inactive-value="2">
                </el-switch>
              </template>

            </el-table-column>
            <el-table-column prop="createName" label="创建人" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
            <el-table-column prop="date" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="routerPush(scope.row.type,'edit',scope.row)"
                >修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  slot="reference"
                  @click="deleteActive(scope.row)"
                >删除
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="editStatus(scope.row)"
                >启用
                </el-button>
              </template>

            </el-table-column>
          </el-table>
        </div>
        <pagination
          v-show="oldTotal>0"
          :total="oldTotal"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getOldList"
        />
      </div>
    </div>
  </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'
import {deleteActive, editActiveStatus, pageActive} from "@/api/active/active";

export default {
  name: 'Exchange',
  data() {
    return {
      ruleForm: {},
      value: 1,
      tabindex: 0,
      //类型 1:储值卡 2：囤油卡 3：立减营销 4：立减营销 5：消费有礼 6：开卡有礼 7：邀请有礼 8分时优惠 9限时特价 （以数据库注释为主）
      options: [
      //   {
      //   value: '1',
      //   label: '储值卡'
      // }, {
      //   value: '2',
      //   label: '囤油卡'
      // },
        {
        value: '3',
        label: '立减营销'
      }, {
        value: '4',
        label: '生日有礼'
      }, {
        value: '5',
        label: '消费有礼'
      }, {
        value: '6',
        label: '开卡有礼'
      }, {
        value: '7',
        label: '邀请有礼'
      }, {
        value: '8',
        label: '推荐会员充值有礼'
      }, {
        value: '9',
        label: '推荐会员消费有礼'
      }, {
        value: '10',
        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 弄'
      }],
      oldTableData: [],
      tablist: [
        "营销活动",
        "当前活动列表",
        "历史活动列表"
      ],
      queryParams: {
        page: 0,
        pageSize: 10,
        name: '',
        type: '',
        activeStatus: ""
      },
      total: 0,
      oldTotal: 0

    }
  },
  created() {
    if (this.$route.query.id) {
      this.indexType(this.$route.query.id)
    } else {
      this.getList();
    }
    if (this.$route.query.activeId){
      this.tabindex = 1
    }

    this.getOldList()
  },
  components: {
    activeNewlyweds, activeConsumption, activeDiscount, activeFullminus, activeRecommend
  },

  methods: {
    getindex(index) {
      this.tabindex = index
      if (index == 1) {
        this.queryParams.type = ""
        this.handleQuery()
      } else if (index == 2) {
        this.queryParams.type = ""
        this.handleOldQuery()
      }
    },
    indexType(id) {
      this.queryParams.type = id
      this.tabindex = 1
      this.handleQuery()
    },
    /**
     * 查询列表
     */
    getList() {
      this.queryParams.activeStatus = '1'
      pageActive(this.queryParams).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },

    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },

    resetQuery() {
      this.queryParams.page = 1
      this.queryParams.name = null
      this.queryParams.type = null
      this.getList()
    },

    /**
     * 查询历史列表
     */
    getOldList() {
      this.queryParams.activeStatus = '2'
      pageActive(this.queryParams).then(res => {
        this.oldTableData = res.data.records
        this.oldTotal = res.data.total
      })
    },

    handleOldQuery() {
      this.queryParams.activeStatus = '2'
      this.queryParams.page = 1;
      this.getOldList();
    },

    resetOldQuery() {
      this.queryParams.page = 1
      this.queryParams.activeStatus = '2'
      this.queryParams.name = null
      this.queryParams.type = null
      this.getOldList()
    },
    // 删除活动信息
    deleteActive(data) {
      this.$modal.confirm('是否删除本条数据，删除后无法恢复！').then(function () {
        return deleteActive(data.id);
      }).then(() => {
        this.handleQuery()
        this.handleOldQuery()
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    // 修改活动状态
    editStatus(data) {
      let str = data.activeStatus=='1' ? "停用" : "启用"
      this.$modal.confirm('是否'+str+'本条数据！').then(function () {
        return editActiveStatus(data.id);
      }).then(() => {
        this.handleQuery()
        this.handleOldQuery()
        this.$modal.msgSuccess(str+"成功");
      }).catch(() => {
      });
    },
    routerPush(id,type,data) {
      let activeId = ""
      if (data){
        if (data.type=='3') id = 11
        if (data.type=='4') id = 5
        if (data.type=='5') id = 3
        if (data.type=='6') id = 1
        if (data.type=='7') id = 4
        if (data.type=='8') id = 6
        if (data.type=='9') id = 7
        if (data.type=='10') id = 8
        activeId = data.activeId
      }
      this.$router.push({
        path: '/EventMarketing/openCardGift/index',
        query: {
          id: id,
          activeId:activeId,
          type:type
        }
      });
    },
    // 跳转其他页面
    goOtherPage(id, type) {
      if (id == 12) {
        this.$router.push({
          path: '/userGrade/index',
          query: {id: id}
        });
      }
      if (id == 2) {
        this.$router.push({
          path: '/EventMarketing/CardHolder/index',
          query: {id: id, type: type}
        });
      }
    },
    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%;
  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 {
  margin-top: 2px;
  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: 20px;
}

.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: 19%;
  margin-right: 1%;
}

.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;
  cursor: pointer;
}

.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>