tuanfeng-pc-admin/src/views/business/alliance/components/BaseInfo.vue

<template>
  <div>
    <el-descriptions class="margin-top" title="基础信息" :column="1" :size="size" border>
      <el-descriptions-item>
        <template slot="label">联盟卡名称</template>
        {{ card.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">联盟卡封面</template>
        <el-image :preview-src-list="[card.coverUrl]" v-if="card.coverUrl" :src="card.coverUrl" fit="fill" style="width: 127px; height: 73px"></el-image>
        <span v-else>--</span>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" title="联盟卡信息" :column="2" :size="size" border>
      <el-descriptions-item>
        <template slot="label">联盟卡ID</template>
        {{ card.id }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">到期时间</template>
        {{ card.expirationTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">发售价格</template>
        <span style="color: #f40">￥{{ card.purchasePrice }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">抵扣价格</template>
        <span style="color: #f40">￥{{ card.deductionPrice }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">团长佣金</template>
        <span style="color: #f40">￥{{ card.headOfCommission || '--' }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">合伙人佣金</template>
        <span style="color: #f40">￥{{ card.partnerCommission || '--' }}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">发行张数</template>
        <el-tag>{{ card.receiptCount }}张</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">状态</template>
        <el-tag type="info" v-if="card.state === 1" size="mini">审核中</el-tag>
        <el-tag type="success" v-if="card.state === 2" size="mini">通过</el-tag>
        <el-tag type="danger" v-if="card.state === 3" size="mini">不通过</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">是否发行</template>
        <el-tag type="success" v-if="card.isIssuance === 1" size="mini">发行</el-tag>
        <el-tag type="danger" v-if="card.isIssuance === 0" size="mini">停售</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">创建时间</template>
        {{ card.createTime }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" title="权益信息" :column="1" :size="size" border>
      <el-descriptions-item>
        <template slot="label">权益信息</template>
        {{ card.statement }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">使用说明</template>
        {{ card.useInstructions }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  props: {
    card: { type: Object, required: true }
  },
  data() {
    return {
      size: "mini"
      
    }
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__label {
  width: 168px;
}

.margin-top {
  margin-top: 24px;
}
</style>