management/src/views/coupon_manage/coupon_list.vue

<template>
  <div class="app-container">
    <div class="head-container">
      <!-- <el-button type="primary" icon="el-icon-plus" @click="$refs.addCoupon.show()">
        添加优惠券
      </el-button> -->
      <el-button type="primary" icon="el-icon-plus" @click="$router.push({name: 'add_coupon', query: {type:1}})">
        添加优惠券
      </el-button>
    </div>
    <div class="head-container">
      <el-table v-loading="tableData.loading" :data="tableData.data">
        <el-table-column label="ID" prop="id" />
        <el-table-column label="名称" prop="title" />
        <el-table-column label="使用门槛">
          <template v-slot="scope">
            {{ `满${scope.row.fullAmount}${scope.row.discountAmount?'减'+scope.row.discountAmount+'元':''}` }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="有效期">
          <template v-slot="scope">
            {{ `领券后${scope.row.validDays}天过期` }}
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="用户领取方式" prpo="source">
          <template v-slot="scope">
            <div>{{ scope.row.source == 'activate' ? '充值活动' :
              scope.row.source == 'invited' ? '好友分享' : '' }}</div>
          </template>
        </el-table-column> -->
        <el-table-column label="总发放数量" prop="number" />
        <el-table-column label="已领取" align="center">
          <template v-slot="scope">
            <div style="display: flex;align-items: center;justify-content: center;">
              <div style="width: 30px;">{{ scope.row.number-scope.row.leftNumber }}</div>
              <div style="margin: 0 10px;">|</div>
              <div style="color: #3F9EFF;cursor: pointer;flex-shrink: 0;" @click="couponDetailsOpen(scope.row)">详情</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="已使用" prop="useNumber" />
        <el-table-column label="剩余" prop="leftNumber" />
        <el-table-column label="操作" width="150">
          <template v-slot="scope">
            <el-button type="text" icon="el-icon-edit" @click="$router.push({name: 'add_coupon', query: {type:scope.row.type ,id: scope.row.id}} )">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
              <el-button
                slot="reference"
                type="text"
                icon="el-icon-delete"
                style="margin-left: 20px !important;"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination
        :total="tableData.total"
        :current-page="tableData.page"
        :page-size="tableData.size"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="paginationChange"
        @size-change="sizeChange"
      />
    </div>
    <couponDetails ref="couponDetails" @success="resetHandle" />
  </div>
</template>

<script>
import couponEnum from './couponEnum'
import couponDetails from './components/coupon_details.vue'
import { getTbShopCoupon, delTbShopCoupon } from '@/api/coupon'
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { couponDetails },
  filters: {

    typeFilter(value) {
      // eslint-disable-next-line eqeqeq
      return couponEnum.type.find(item => item.value == value).label
    },
    effectTypeFilter(value) {
      // eslint-disable-next-line eqeqeq
      return couponEnum.effectType.find(item => item.value == value).label
    }
  },
  data() {
    return {
      tableData: {
        data: [],
        page: 1,
        size: 10,
        loading: false,
        total: 0
      },
      couponId: null
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    // 是否允许修改商品
    toPath(path, row) {
      this.$router.push({ path: path, query: row })
    },
    // 重置查询
    resetHandle() {
      this.page = 1
      this.getTableData()
    },
    // 分页大小改变
    sizeChange(e) {
      this.tableData.size = e
      this.getTableData()
    },
    // 分页回调
    paginationChange(e) {
      console.log(e)
      this.tableData.page = e
      this.getTableData()
    },
    // 获取优惠券列表
    async getTableData() {
      this.tableData.loading = true
      try {
        const res = await getTbShopCoupon({
          page: this.tableData.page,
          size: this.tableData.size,
          shopId: localStorage.getItem('shopId')
        })
        this.tableData.loading = false
        this.tableData.data = res.content
        this.tableData.total = res.totalElements
        console.log(this.tableData)
      } catch (error) {
        console.log(error)
      }
    },

    /**
     * 查看领取详情
     */
    couponDetailsOpen(row) {
      this.$refs.couponDetails.show(row)
      this.couponId = row.id
    },

    /**
     * 删除优惠券
     * @param id
     */
    async delTableHandle(id) {
      const delRes = await delTbShopCoupon(id)
      console.log(delRes)
      this.getTableData()
    }
  }
}
</script>