webapp / GreenwayWeb

<template>
  <div>
    <div style="display: flex;margin-bottom: 10px;">
      <div
        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;">渠道领取数量</div>
        <div style="font-size: 22px;margin-top: 10px;color: rgb(63, 155, 106);">{{info.channelReceipts}}</div>
      </div>
      <div
        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;">用户领取数量</div>
        <div style="font-size: 22px;margin-top: 10px;color: rgb(63, 155, 106);">{{info.userClaim}}</div>
      </div>
      <div
        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;">用户使用数量</div>
        <div style="font-size: 22px;margin-top: 10px;color: rgb(63, 155, 106);">{{info.userUsage}}</div>
      </div>
      <div
        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;">商家补贴总额</div>
        <div style="font-size: 22px;margin-top: 10px;color: rgb(63, 155, 106);">{{Number(info.merchantsAmount)/100}}</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="qdlist" v-if="activeName == 'first'"
        :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        tooltip-effect="light">
        <el-table-column label="渠道方">
          <template slot-scope="scope">{{ scope.row.channelParty }}</template>
        </el-table-column>
        <el-table-column label="优惠券">
          <template slot-scope="scope">{{ infoyhq.couponName}}</template>
        </el-table-column>
        <el-table-column label="数量">
          <template slot-scope="scope">{{ scope.row.quantity }}</template>
        </el-table-column>
      </el-table>
      <el-table ref="multipleTable" :data="qdlist" v-if="activeName == 'second'"
        :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        tooltip-effect="light">
        <el-table-column label="优惠券">
          <template slot-scope="scope">{{ infoyhq.couponName}}</template>
        </el-table-column>
        <el-table-column label="用户手机号">
          <template slot-scope="scope">{{ scope.row.userPhone}}</template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">待使用</template>
        </el-table-column>
      </el-table>
      <el-table ref="multipleTable" :data="qdlist" v-if="activeName == 'third'"
        :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        tooltip-effect="light">
        <el-table-column label="优惠券">
          <template slot-scope="scope">{{ infoyhq.couponName}}</template>
        </el-table-column>
        <el-table-column label="用户手机号">
          <template slot-scope="scope">{{ scope.row.userPhone}}</template>
        </el-table-column>
        <el-table-column label="使用时间">
          <template slot-scope="scope">{{ scope.row.useTime }}</template>
        </el-table-column>
      </el-table>
      <el-table ref="multipleTable" :data="qdlist" v-if="activeName == 'fourth'"
        :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        tooltip-effect="light">
        <el-table-column label="商家">
          <template slot-scope="scope">{{ scope.row.shop.shopName }}</template>
        </el-table-column>
        <el-table-column label="优惠券使用金额">
          <template slot-scope="scope">{{Number(scope.row.sumDiscountAmount)/100}}</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+1" :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,
    couponStatistics,
    cereCouponUsage,
    cereCouponDistribution
  } from '@/api/couponmanagement/couponlist.js'
  import router from '@/router';
  import coupon from './coupon.vue';

  export default {

    components: {
      coupon
    },
    data() {
      return {
        activeName: 'first',
        typelist: [{
            num: 100,
            type: '渠道领用',
            color: '#ff5e5e'
          },
          {
            num: 100,
            type: '用户领取',
            color: '#ff883a'
          },
          {
            num: 100,
            type: '用户使用',
            color: '#ffc461'
          },
          {
            num: 100,
            type: '商家补贴',
            color: '#a467f0'
          },
        ],
        query: {
          pageNumber: 0,
          pageSize: 10
        },
        total: 0,
        tableData: [],
        info: {},
        qdlist: [],
        infoyhq:{}
      }
    },
    created() {
      // this.getAll()
    },
    methods: {
      int(e,infoyhq) {
        this.fundPoolId = e
        this.infoyhq = infoyhq
        couponStatistics({
          id: this.fundPoolId
        }).then(res => {
          console.error(res)
          this.info = res.data
        })
        console.error(this.infoyhq)
        this.getall()
        // this.clear()
      },
      getall() {
        console.error(this.activeName)
        this.qdlist = []
        if(this.activeName == 'first') {
          cereCouponDistribution({
            ...this.query,
            couponId:this.fundPoolId
          }).then(res => {
            console.error(res)
            this.qdlist = res.data.content
            this.total = res.data.numberOfElements
          })
        } else if(this.activeName == 'second') {
          cereCouponUsage({
            ...this.query,
            couponStatus:'2',
            couponId:this.fundPoolId
          }).then(res => {
            console.error(res)
            this.qdlist = res.data.content
            this.total = res.data.numberOfElements
          })
        } else if(this.activeName == 'third') {
          cereCouponUsage({
            ...this.query,
            couponStatus:'3',
            couponId:this.fundPoolId
          }).then(res => {
            console.error(res)
            this.qdlist = res.data.content
            this.total = res.data.numberOfElements
          })
        } else if(this.activeName == 'fourth') {
          couponStatistics({
            id: this.fundPoolId
          }).then(res => {
            console.error(res)
            this.qdlist = res.data.keyUseCouponStatistics
            this.total = res.data.keyUseCouponStatistics.length
          })
        }
      },
      handleClick(tab, event) {
        console.log(tab, event);
        this.query.pageNumber = 0
        this.getall()
      },
      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-1
        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;

  }

  

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