tuanfeng-pc-admin/src/views/business/alliance/index.vue

<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.search" clearable size="mini" class="filter-item" style="width: 200px" placeholder="联盟卡名称/商家名称" />
      <el-select closeable v-model="listQuery.state" clearable size="mini" class="filter-item" style="width: 200px; margin-left: 10px" placeholder="请选择审核状态">
        <el-option label="审核中" :value="1" />
        <el-option label="已通过" :value="2" />
        <el-option label="未通过" :value="3" />
      </el-select>
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px" @click="handleSearch">查找</el-button>
      <el-button size="mini" class="filter-item" type="info" icon="el-icon-search" style="margin-left: 10px" @click="handleReset">重置</el-button>
      <br />
    </div>

    <!-- 查询结果 -->
    <div v-tableHeight>
      <el-table v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list" v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }">
        <el-table-column  label="#" type="index" width="80" align="center" />
        <el-table-column prop="shopId" label="商家Id" width="120" align="center" />
        <el-table-column prop="shopName" label="商家名称" width="150" align="center" />
        <el-table-column prop="name" label="联盟卡名称" width="150" align="center" />
        <el-table-column prop="state" label="状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag :type="getStateTagType(scope.row.state)" size="small">
              {{ scope.row.state | stateText }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isIssuance" label="是否发行" width="120" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isIssuance == '1' ? 'success' : 'info'" size="small">
              {{ scope.row.isIssuance == '1' ? '发行' : '停售' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="coverUrl" label="联盟卡封面" width="180" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.coverUrl" style="width: 50px"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="purchasePrice" label="联盟卡购买价格" width="150" align="center">
          <template slot-scope="scope">
            <span style="color: #f40">￥{{ scope.row.purchasePrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deductionPrice" label="联盟卡抵扣价格" width="150" align="center">
          <template slot-scope="scope">
            <span style="color: #f40">￥{{ scope.row.deductionPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="receiptCount" label="发行张数" width="120" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.receiptCount }}张</span>
          </template>
        </el-table-column>

        <el-table-column prop="expirationTime" label="到期时间" width="180" align="center" />
        <el-table-column prop="headOfCommission" label="团长佣金" width="120" align="center">
          <template slot-scope="scope">
            <span style="color: #f40">￥{{ scope.row.headOfCommission || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="partnerCommission" label="合伙人佣金" width="120" align="center">
          <template slot-scope="scope">
            <span style="color: #f40">￥{{ scope.row.partnerCommission || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="statement" label="权益信息" width="150" align="center" />
        <el-table-column show-overflow-tooltip prop="useInstructions" label="使用说明" width="150" align="center" />
        <el-table-column prop="createTime" label="创建时间" width="180" align="center" />

        <el-table-column align="center" label="操作" width="280" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="{ row }">
            <el-button @click="$refs.checkDialogRef && $refs.checkDialogRef.handleOpen(row)" :disabled="row.state !== 1" type="warning" size="mini">审核</el-button>
            <el-button type="primary" size="mini" @click="$refs.detailDialogRef && $refs.detailDialogRef.handleOpen(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-pagination
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="(val) => (listQuery.pageSize = val) && getList()"
        @current-change="(val) => (listQuery.page = val) && getList()"
      />
    </div>

    <!-- 查看详情 -->
    <DetailDialog ref="detailDialogRef"></DetailDialog>
    <!-- 审核 -->
    <CheckDialog @success="getList" ref="checkDialogRef"></CheckDialog>
  </div>
</template>

<script>
import { getAllianceCardListApi } from '@/api/business'
import DetailDialog from './components/DetailDialog'
import CheckDialog from './components/CheckDialog'

export default {
  name: 'allianceCardList',
  components: { DetailDialog, CheckDialog },
  data() {
    // 这里存放数据
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 20,
        search: '',
        state: ''
      },
      checkLoading: false
    }
  },
  filters: {
    stateText(value) {
      return { 1: '审核中', 2: '通过', 3: '不通过' }[value] || '未知状态'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listLoading = true
      try {
        const res = await getAllianceCardListApi(this.listQuery)
        this.list = res.data.list
        this.total = res.data.total
      } finally {
        this.listLoading = false
      }
    },
    handleSearch() {
      this.listQuery.page = 1
      this.getList()
    },
    getStateTagType(state) {
      switch (state + '') {
        case '1':
          return 'warning'
        case '2':
          return 'success'
        case '3':
          return 'danger'
        default:
          return ''
      }
    },

    handleReset(){
      this.listQuery.search = ''
      this.listQuery.state = ''
      this.handleSearch()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  display: flex;
  flex-direction: column;

  .filter-container {
    .filter-item {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
    }
  }

  .small-padding {
    .cell {
      padding-left: 5px;
      padding-right: 5px;
    }
  }

  .fixed-width {
    .el-button--mini {
      padding: 7px 10px;
    }
  }
}
</style>