sporttery/web/apps/web-antd/src/views/match/components/match_card.vue

<script setup>
import { Tooltip } from 'ant-design-vue';

const parseEventKey = (key) => {
  if (key == 'm') {
    return '独赢';
  }
  else if (key?.startsWith('wm')) {
    const ratio = key.split('_')[1];
    return `净胜 ${ratio}`;
  }
  else if (key?.startsWith('ou')) {
    const ratio = key.split('_')[1];
    return `大/小 ${ratio}`;
  }
  else if (key?.startsWith('ot')) {
    const ratio = key.split('_')[1];
    return `进球数 ${ratio}`;
  }
  return key;
}
defineProps({
  eventId: {
    type: Number,
    required: true
  },
  teamHomeName: {
    type: String,
    required: true
  },
  teamAwayName: {
    type: String,
    required: true
  },
  events: {
    type: Array,
    required: true
  },
  // matchNumStr: {
  //   type: String,
  //   required: false
  // },
  selected: {
    type: Array,
    required: false
  },
  iorGroups: {
    type: Array,
    required: false
  },
})
</script>

<template>
  <div class="match-card">
    <template v-if="eventId">
      <div class="team-name">
        <span class="home-name">{{ teamHomeName }}</span>
        <em>VS</em>
        <span class="away-name">{{ teamAwayName }}</span>
      </div>
      <div class="events-list" v-if="events.length">
        <table>
          <tr v-for="item in events">
            <th>{{ parseEventKey(item[0]) }}</th>
            <td>
              <span class="value-box" :class="{
                'selected': selected.includes(item[1]?.key),
                'highlight': iorGroups?.includes(item[1]?.key),
                'strikethrough': item[1]?.qualified === 0,
                'subsidy': item[1]?.source && !item[1]?.returnRate,
                'adjusted': item[1]?.returnRate
              }">
                <Tooltip>
                  <template #title v-if="item[1]?.source">
                    {{ item[1].source }} <span v-if="item[1]?.returnRate">({{ item[1].returnRate }}%)</span>
                  </template>
                  {{ item[1]?.value ? item[1].value : '-' }}
                </Tooltip>
              </span>
              <em class="origin-box" v-if="item[1]?.origin">{{ item[1].origin }}</em>
            </td>
            <td>
              <span class="value-box" :class="{
                'selected': selected.includes(item[2]?.key),
                'highlight': iorGroups?.includes(item[2]?.key),
                'strikethrough': item[2]?.qualified === 0,
                'subsidy': item[2]?.source && !item[2]?.returnRate,
                'adjusted': item[2]?.returnRate
              }">
                <Tooltip>
                  <template #title v-if="item[2]?.source">
                    {{ item[2].source }} <span v-if="item[2]?.returnRate">({{ item[2].returnRate }}%)</span>
                  </template>
                  {{ item[2]?.value ? item[2].value : '-' }}
                </Tooltip>
              </span>
              <em class="origin-box" v-if="item[2]?.origin">{{ item[2].origin }}</em>
            </td>
            <td>
              <span class="value-box" :class="{
                'selected': selected.includes(item[3]?.key),
                'highlight': iorGroups?.includes(item[3]?.key),
                'strikethrough': item[3]?.qualified === 0,
                'subsidy': item[3]?.source && !item[3]?.returnRate,
                'adjusted': item[3]?.returnRate
              }">
                <Tooltip>
                  <template #title v-if="item[3]?.source">
                    {{ item[3].source }} <span v-if="item[3]?.returnRate">({{ item[3].returnRate }}%)</span>
                  </template>
                  {{ item[3]?.value ? item[3].value : '-' }}
                </Tooltip>
              </span>
              <em class="origin-box" v-if="item[3]?.origin">{{ item[3].origin }}</em>
            </td>
          </tr>
        </table>
      </div>
      <div class="events-empty" v-else>无盘口数据</div>
    </template>
    <div class="events-empty" v-else>无关联比赛</div>
  </div>
</template>

<style lang="scss" scoped>
.match-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.team-name {
  display: flex;
  align-items: center;
  font-size: 14px;
  .disabled & {
    display: none;
  }
  span, em {
    display: block;
  }
  span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &:first-child {
      text-align: left;
    }
    &:last-child {
      text-align: right;
    }
  }
  em {
    margin: 0 10px;
    font-style: normal;
    color: #ff9d4a;
  }
  .home-name {
    color: hsl(var(--primary));
  }
  .away-name {
    color: hsl(var(--destructive));
  }
}
.events-list {
  margin-top: 10px;
  .disabled & {
    display: none;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    th, td {
      padding: 5px;
      border: 1px solid hsl(var(--border));
      text-align: center;
    }
    th {
      width: 80px;
      font-weight: normal;
    }
    td {
      width: calc((100% - 64px) / 2);
      font-size: 0;
    }
    .value-box {
      display: inline-block;
      height: 20px;
      padding: 0 5px;
      line-height: 20px;
      vertical-align: middle;
      font-size: 14px;
      border-radius: 4px;
      &.highlight {
        background-color: hsl(var(--primary) / 0.15);
        color: hsl(var(--primary));
      }
      &.selected {
        background-color: hsl(var(--primary));
        color: hsl(var(--primary-foreground));
      }
      &.strikethrough {
        text-decoration: line-through;
        color: hsl(var(--foreground) / 0.35);
      }
      &.subsidy {
        color: #c16d00;
        &.highlight {
          background-color: #ffe2bc;
        }
        &.selected {
          color: #fff;
          background-color: #c16d00;
        }
      }
      &.adjusted {
        color: #039f00;
        &.highlight {
          background-color: #e2fce1;
        }
        &.selected {
          color: #fff;
          background-color: #039f00;
        }
      }
    }
    .origin-box {
      display: block;
      height: 18px;
      margin-top: -3px;
      line-height: 18px;
      font-style: normal;
      font-size: 12px;
      color: hsl(var(--foreground) / 0.5);
    }
  }
}
.events-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  margin-top: 10px;
  font-size: 14px;
  border: 1px solid hsl(var(--border));
}
</style>