|  | @@ -0,0 +1,196 @@
 | 
	
		
			
				|  |  | +<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-s-tools" 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>
 |