webapp / GreenwayWeb

<template>
  <div>
    <div style="display: flex;margin-bottom: 10px;">
          <div  v-for="item in typelist" style="width: 30%;margin-right: 3%;text-align: center;padding: 20px 0;border-radius: 3px;border: 2px solid #eee;">
            <div style="font-size: 14px;color: #a8abb2;">{{item.type}}</div>
            <div style="font-size: 22px;margin-top: 10px;color: rgb(63, 155, 106);">{{item.num}}</div>
          </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="渠道领用" name="first">渠道领用</el-tab-pane>
          <el-tab-pane label="用户领取" name="second">用户领取</el-tab-pane>
          <el-tab-pane label="用户使用" name="third">用户使用</el-tab-pane>
          <el-tab-pane label="商家补贴" name="fourth">商家补贴</el-tab-pane>
        </el-tabs>
          <!-- 搜索 -->
        <div class="formSearch">
          <!-- 搜索条件 -->
          <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item label="名称">
              <el-input v-model="query.couponName" placeholder="请输入名称" />
            </el-form-item>
          </el-form>
          <div>
            <el-button style="background-color: #3F9B6A;color: #fff" @click="search">查询</el-button>
            <el-button  class="buttonHover"
                style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" @click="clear">重置</el-button>
          </div>
        </div>
        <!-- 表格 -->
        <div class="tableBox">
          <el-table
            ref="multipleTable"
            :data="tableData"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#f5f8f9'}"
            tooltip-effect="light"
          >
            <el-table-column label="编号" >
              <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column label="优惠券名称" >
              <template slot-scope="scope">{{ scope.row.couponName }}</template>
            </el-table-column>
            <el-table-column label="类型">
              <template slot-scope="scope">
                <span v-if="scope.row.couponType == '1'">满减券</span>
                <span v-else-if="scope.row.couponType == '2'">折扣券</span>
              </template>
            </el-table-column>
            <el-table-column label="优惠内容">
              <template slot-scope="scope">
                <span v-if="scope.row.couponType == '1'">满{{ scope.row.maxDiscountAmount }}减{{ scope.row.discountContent }}</span>
                <span v-else-if="scope.row.couponType == '2'">{{ scope.row.discountContent }}折 最高减{{ scope.row.maxDiscountAmount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <div class="btnList">
                  <div class="tableBtn greens" @click="xq(scope.row)">查看详情</div>
                  <!-- <div class="tableBtn greens"  @click="addcoupon(scope.row)">生成优惠券</div> -->
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: space-between;margin: 20px 0;">
            <div style="font-size: 14px;">共  <span style="color: #3F9B6A;">{{total}}</span>  项数据</div>
            <el-pagination
              :current-page="query.pageNumber"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              background
              small
              layout="prev, pager, next"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </div>
   
  </div>
</template>

<script>
import { myCoupons}from '@/api/couponmanagement/couponlist.js'
import router from '@/router';
import coupon from './coupon.vue';

export default {

  components:{
    coupon
  },
  data () {
    return {
     activeName: 'second',
      typelist:[
        {
          num:100,
          type:'渠道领用',
          color:'#ff5e5e'
        },
        {
          num:100,
          type:'用户领取',
          color:'#ff883a'
        },
        {
          num:100,
          type:'用户使用',
          color:'#ffc461'
        },
        {
          num:100,
          type:'商家补贴',
          color:'#a467f0'
        },
      ],
      query: {
        activityName: '', // 活动名称
        // 活动状态 0-报名未开始 1-报名进行中 2-活动待开始 3-活动进行中 4-活动已结束
        state: '',
        pageNumber: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
    }
  },
  created () {
    // this.getAll()
  },
  methods: {
    int(e) {
      this.fundPoolId = e
      // this.clear()
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    xq(e) {
      // 跳转路由
      // router.push({
      //   path: '/other/coupon',
      //   query: {
      //     id: e.id
      //   }
      // })
      console.error(e.id)
      // this.$emit('changecapitalpoolid',e.id)
    },
    async getAll () {
      const res = await myCoupons(this.query)
      console.error(res.data.content)
      this.tableData = res.data.content
      this.total = res.data.numberOfElements
    },
    handleSizeChange (val) {
      this.query.pageSize = val
      this.getAll()
    },
    handleCurrentChange (val) {
      this.query.pageNumber = val
      this.getAll()
    },
    search () {
      this.total = 1
      this.query.pageNumber = 1
      this.getAll()
    },
    // 重置
    clear () {
      this.query = {
        activityName: '',
        state: '',
        pageNumber: 1,
        pageSize: 10
      }
      this.getAll()
    },

  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item {
  margin-bottom: 0;
}
::v-deep .el-tabs__content {
  display: none;
}
  ::v-deep .el-tabs__item{
    font-size: 16px;
    font-family: "Alibaba PuHuiTi 2.0-55 Regular";
  }
  ::v-deep .el-dialog__header{
    border-bottom: 2px solid #eee;
    background-color: #fff;
  }
  ::v-deep .el-dialog__title {
    color: #303133;
  }
  .footer{
    font-size: 24px;
    .btn_list {
      display: flex;
      flex-direction: row-reverse;
      span {
        padding: 0;
        margin: 0;
        width: 100px;
        height:32px;
        line-height:32px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        border-radius: 4px;
        box-sizing: border-box;
        &:hover {
          cursor: pointer;
        }
        &:nth-child(1) {
          background: rgba(255, 255, 255, 1);
          order: 1px solid rgba(224, 229, 235, 1);

          border: 1px solid rgba(224, 229, 235, 1);
        }
        &:nth-child(2) {
          background: #3f9b6a;
          color: #fff;
          margin-right: 20px;
        }
      }
    }
  }
.couponPage{

   padding: 0  20px 20px 20px;
   min-height: calc(100vh - 50px - 20px);
   background-color: #Fff;


  .tableBox{
    text-align: center;
    .fenye{
      // margin: 20px;
    }
  }
}
.couponDialogBox {
  max-height: 600px;
  overflow-y: auto;
}
.formSearch{

    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
    // padding-bottom: 10px;
    align-items: center;
    margin: 20px 0;

}
  .tableBtn {
    display: inline-block;
    margin-right: 10px;
  }

.greens {
    color: #3F9B6A;
  }
  ::v-deep .buttonHover:hover{
    color:#3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
  ::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#3f9b6a;
  }
</style>