webapp / GreenwayWeb

<template>
    <div style="background-color:#f7f7f7;padding:10px 10px;">
      <div class="couponPage" v-if="type == '1'">
        <div>
          <div style="height:58px;line-height:58px;">
            <div style="color:#0006"> <span>优惠券管理</span>   <span style="padding:0 5px;">></span>  <span style="color:#000000e6">优惠券列表</span></div>
          </div>
            <!-- 搜索 -->
          <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:'#F2F3F5'}"
              tooltip-effect="light"
              
            > 
            <el-table-column label="优惠券名称" >
                <template slot-scope="scope">{{ scope.row.couponName }}</template>
              </el-table-column>
              <el-table-column label="资金池">
                <template slot-scope="scope">{{ scope.row.cereFundsPool?scope.row.cereFundsPool.poolName:'' }}</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'">满{{Number(scope.row.usageThreshold)/100 }}减{{Number(scope.row.discountContent)/100}}</span>
                  <span v-else-if="scope.row.couponType == '2'">{{scope.row.discountContent}}折 最高减{{Number(scope.row.maxDiscountAmount)/100}}</span>
                </template>
              </el-table-column>
              <el-table-column label="金额" >
                <template slot-scope="scope">{{Number(scope.row.totalFunds)/100 }}</template>
              </el-table-column>
              <el-table-column label="数量" >
                <template slot-scope="scope">{{ scope.row.totalCoupons }}</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;" class="bom">
              <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>
      </div>
    <div class="couponPage" v-show="type == '3'">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>优惠券管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">详情</span></div>
      </div>
      <allinfo ref="allinforef" :type="typeinfo" @changetypeinfo="changetypeinfo" />
      <div style="display: flex;">
        <el-button @click="changetype()"  class="buttonHover" style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;" >返回</el-button>
      </div>
    </div>
    </div>
  </template>
  
  <script>
  import { getcereFundsPoolData,addcereFundsPool,delPool,editPool,batchGenerateCoupons}from '@/api/couponmanagement/couponlist.js'
  import router from '@/router';
  import coupon from './coupon.vue';
  import allinfo from './allinfo.vue';
  export default {
    
    components:{
      coupon,allinfo
    },
    data () {
      return {
        typeinfo:'2',
        couponfrom:{
          usedMerchants:'1',
          couponName: '',
          remark: '',
          couponType: '1', // 默认值
          useCategory: '',
          maxDiscountAmount: null,
          usageThreshold: null,
          discountContent: null,
          isPointsRequired: '否', // 默认值
          pointsRequired: null,
          startTime: '',
          endTime: '',
          totalCoupons: null,
          totalFunds: null,
          createTime: ''
        },
        coupoobj:{},
        type:'1',
        query: {
          activityName: '', // 活动名称
          // 活动状态 0-报名未开始 1-报名进行中 2-活动待开始 3-活动进行中 4-活动已结束
          state: '',
          pageNumber: 0,
          pageSize: 10
        },
        total: 0,
        tableData: [],
        activityStatusSelect: [
          {
            index: 0,
            label: '未启用',
            value: 0
          },
          {
            index: 1,
            label: '启用中',
            value: 1
          },
          {
            index: 2,
            label: '已关闭',
            value: 2
          },
        ],
        activityVisible: false,
        editForm: false,
        activityDetailVisible: false,
        form: {
          couponName:'',
          contributor:'',
          totalAmount:null,
        }
      }
    },
    created () {
      this.getAll()
    },
    methods: {
      changetype() {
        this.type = 1
      },
      changetypeinfo(e) {
        this.typeinfo = e
      },
      xq(e) {
        console.log(e )
        this.type = '3'
        this.$refs.allinforef.int(e.id,e)
        // // 跳转路由
        // router.push({
        //   path: '/other/coupon',
        //   query: {
        //     id: e.id
        //   }
        // })
      },
      addcoupon(e) {
        let that = this
        console.error(e)
        let from = {
          "totalCoupons":e.totalCoupons,          //共多少张优惠券
          "id":e.id,     //优惠券id
          "fundPoolId":e.fundPoolId   //资金池id
        }
        // return
        batchGenerateCoupons(from).then(res=>{
          console.error(res)
          if(res.code == '200') {
            that.$message({
              message: '生成成功',
              type: 'success'
            });
            that.search()
          } else {
            that.$message({
              message: res.message,
              type: 'error'
            });
          }
        })
      },
      async getAll () {
        const res = await getcereFundsPoolData(this.query)
        console.error(res.data.content)
        this.tableData = res.data.content
        this.total = res.data.totalElements
      },
      handleSizeChange (val) {
        this.query.pageSize = val
        this.getAll()
      },
      handleCurrentChange (val) {
        this.query.pageNumber = val-1
        this.getAll()
      },
      search () {
        this.total = 1
        this.query.pageNumber = 0
        this.getAll()
      },
      // 重置
      clear () {
        this.query = {
          activityName: '',
          state: '',
          pageNumber: 0,
          pageSize: 10
        }
        this.getAll()
      },

    }
  }
  </script>
  
  <style scoped lang="scss">
    .el-table{
     height: calc(100vh - 280px);
    }
    .el-form-item {
      margin-bottom: 0;
    }
    ::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;
  
  }
    .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>