haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add match handicap comparison panel

Browse Source
This commit is contained in:
hajimi
2026-08-03 02:38:11 +08:00
parent f53873c49b
commit 348ffa8db4
2 changed files with 264 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/components/match-odds-detail/match-odds-detail.vue
+122 -312
View File
@@ -1,72 +1,70 @@
<template>
<view class="match-odds-detail">
<scroll-view scroll-x class="match-odds-detail__tabs" show-scrollbar="false">
<view class="match-odds-detail__tabs-inner">
<view v-for="item in platformOptions" :key="item.key" class="match-odds-detail__tab"
:class="{ 'match-odds-detail__tab--active': sourceSite === item.key }"
@tap="switchPlatform(item.key)">
<text>{{ item.label }}</text>
</view>
<view class="odds-board">
<view class="odds-board__heading">
<view>
<text class="odds-board__title">全网盘口对比</text>
<text class="odds-board__hint">数据仅供参考 · 实时更新</text>
</view>
</scroll-view>
<view v-if="loading" class="match-odds-detail__state">
<u-loading mode="circle" />
<text>赔率加载中...</text>
<text class="odds-board__time">{{ latestUpdateText }}</text>
</view>
<view v-else-if="loadError" class="match-odds-detail__state">
<view class="market-tabs">
<view v-for="item in marketTabs" :key="item.key" class="market-tabs__item"
:class="{ 'market-tabs__item--active': activeMarket === item.key }"
@tap="activeMarket = item.key">
<text>{{ item.label }}</text>
</view>
</view>
<view v-if="loading" class="odds-board__state">
<u-loading mode="circle" color="#1769ff" />
<text>盘口加载中...</text>
</view>
<view v-else-if="loadError" class="odds-board__state">
<text>{{ loadError }}</text>
<u-button size="mini" type="primary" @click="retryFetch">重新加载</u-button>
</view>
<view v-else-if="platforms.length" class="match-odds-detail__list">
<view v-for="platform in platforms"
:key="`${platform.platform_key}-${platform.source_match_id || platform.update_time || 0}`"
class="match-odds-platform">
<view class="match-odds-platform__head">
<view class="match-odds-platform__name">
<text>{{ platform.platform_name }}</text>
<text v-if="platform.show_type_text" class="match-odds-platform__tag">
{{ platform.show_type_text }}
</text>
</view>
<text class="match-odds-platform__update">{{ formatUpdateTime(platform.update_time) }}</text>
<view v-else-if="rows.length" class="odds-table-wrap">
<view class="odds-table">
<view class="odds-table__row odds-table__row--head">
<text>来源</text>
<text>主队</text>
<text>盘口</text>
<text>客队</text>
<text>更新时间</text>
</view>
<view v-for="market in platform.markets" :key="`${platform.source_match_id}-${market.label}`"
class="match-odds-market">
<view class="match-odds-market__title">
<text>{{ market.label }}</text>
<text v-if="market.line" class="match-odds-market__line">{{ market.line }}</text>
</view>
<view class="match-odds-market__values">
<view v-for="item in market.values" :key="`${market.label}-${item.label}`"
class="match-odds-value">
<text class="match-odds-value__label">{{ item.label }}</text>
<text class="match-odds-value__number">{{ item.value }}</text>
</view>
</view>
<view v-for="row in rows" :key="row.key" class="odds-table__row">
<text class="odds-table__source">{{ row.source }}</text>
<text :class="['odds-table__odd', oddsTone(row.home)]">{{ row.home || '--' }} <i>{{ oddsArrow(row.home) }}</i></text>
<text class="odds-table__line">{{ row.line || '--' }}</text>
<text :class="['odds-table__odd', oddsTone(row.away)]">{{ row.away || '--' }} <i>{{ oddsArrow(row.away) }}</i></text>
<text class="odds-table__update">{{ formatUpdateTime(row.updateTime) }}</text>
</view>
</view>
<view class="odds-board__more" @tap="showMore = !showMore">
<text>{{ showMore ? '收起盘口变化' : '查看盘口变化' }}</text>
</view>
</view>
<view v-else class="odds-board__state odds-board__state--empty">
<text>暂无{{ activeMarketLabel }}数据</text>
</view>
<view v-else class="match-odds-detail__state">
<u-empty text="暂无赔率" mode="data" />
<view v-if="showMore" class="odds-trend">
<view class="odds-trend__head">
<text>近24小时变化</text>
<text class="odds-trend__empty">暂无历史盘口数据</text>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import {
getMatchOdds,
type WorldCupOddsPlatform,
type MatchOddsMatchItem,
} from '@/api/match'
import { getMatchOdds, type WorldCupOddsMatchItem, type WorldCupOddsPlatform } from '@/api/match'
import { getLocalMatchDate } from '@/utils/match-time'
type PlatformOption = { key: string; label: string }
type MarketKey = 'europe' | 'handicap' | 'total'
type OddsRow = { key: string; source: string; home: string; line: string; away: string; updateTime: number }
const props = withDefaults(defineProps<{
homeTeam?: string
@@ -74,306 +72,118 @@ const props = withDefaults(defineProps<{
matchTime?: number | string
competitionId?: number | string
leagueName?: string
}>(), {
homeTeam: '',
awayTeam: '',
matchTime: 0,
competitionId: 0,
leagueName: '',
})
}>(), { homeTeam: '', awayTeam: '', matchTime: 0, competitionId: 0, leagueName: '' })
const defaultPlatformOptions: PlatformOption[] = [
{ key: '', label: '全部平台' },
{ key: 'hg', label: '皇冠' },
{ key: 'titan007', label: '球探' },
const marketTabs: { key: MarketKey; label: string }[] = [
{ key: 'europe', label: '欧赔' },
{ key: 'handicap', label: '亚盘' },
{ key: 'total', label: '大小球' },
]
const oddsList = ref<MatchOddsMatchItem[]>([])
const platformOptions = ref<PlatformOption[]>([...defaultPlatformOptions])
const sourceSite = ref('')
const activeMarket = ref<MarketKey>('handicap')
const oddsList = ref<WorldCupOddsMatchItem[]>([])
const loading = ref(false)
const loaded = ref(false)
const loadError = ref('')
const showMore = ref(false)
const requestSeq = ref(0)
const normalizePlatformLabel = (key: string, label: string) => {
return key === 'hg' ? '皇冠' : label
}
const platforms = computed<WorldCupOddsPlatform[]>(() => {
const result: WorldCupOddsPlatform[] = []
const seen = new Set<string>()
oddsList.value.forEach((match) => {
const matchPlatforms = match.platforms || []
matchPlatforms.forEach((platform) => {
const key = `${platform.platform_key}-${platform.source_match_id || ''}`
if (seen.has(key)) return
seen.add(key)
result.push({
...platform,
platform_name: normalizePlatformLabel(platform.platform_key, platform.platform_name),
})
})
})
return result
})
const matchDate = computed(() => {
const date = getLocalMatchDate(props.matchTime, {
competition_id: props.competitionId,
league_name: props.leagueName,
})
const date = getLocalMatchDate(props.matchTime, { competition_id: props.competitionId, league_name: props.leagueName })
if (!date) return ''
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
})
const mergePlatformOptions = (options: unknown) => {
const map = new Map<string, PlatformOption>()
defaultPlatformOptions.forEach((item) => map.set(item.key, item))
if (Array.isArray(options)) {
options.forEach((item: any) => {
const key = String(item?.key || '').trim()
const label = String(item?.label || '').trim()
if (key && label) map.set(key, { key, label: normalizePlatformLabel(key, label) })
})
const activeMarketLabel = computed(() => marketTabs.find((item) => item.key === activeMarket.value)?.label || '盘口')
const platformList = computed<WorldCupOddsPlatform[]>(() => oddsList.value.flatMap((item) => item.platforms || []))
const latestUpdate = computed(() => platformList.value.reduce((latest, item) => Math.max(latest, Number(item.update_time || 0)), 0))
const latestUpdateText = computed(() => latestUpdate.value ? `更新 ${formatUpdateTime(latestUpdate.value)}` : '实时更新')
const rows = computed<OddsRow[]>(() => platformList.value.map((platform, index) => {
const marketLabel = activeMarket.value === 'europe' ? '独赢' : activeMarket.value === 'handicap' ? '让球' : '大小球'
const market = (platform.markets || []).find((item) => item.label === marketLabel)
const values = market?.values || []
return {
key: `${platform.platform_key}-${platform.source_match_id || index}-${activeMarket.value}`,
source: normalizePlatformLabel(platform.platform_key, platform.platform_name),
home: values[0]?.value || '',
line: market?.line || '',
away: values[activeMarket.value === 'europe' ? 2 : 1]?.value || '',
updateTime: Number(platform.update_time || 0),
}
platformOptions.value = Array.from(map.values())
}).filter((row) => row.home || row.away))
const normalizePlatformLabel = (key: string, label?: string) => key === 'hg' ? '皇冠' : (label || key || '未知来源')
const oddsTone = (value: string) => {
if (!value) return 'odds-table__odd--muted'
const number = Number(value)
return Number.isFinite(number) && number >= 0.95 ? 'odds-table__odd--up' : 'odds-table__odd--down'
}
const oddsArrow = (value: string) => value ? (Number(value) >= 0.95 ? '▲' : '▼') : '—'
const formatUpdateTime = (timestamp: number) => {
if (!timestamp) return '--'
const date = new Date(timestamp * 1000)
return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}
const fetchOdds = async (force = false) => {
if (!force && (loaded.value || loading.value)) return
if (!props.homeTeam.trim() || !props.awayTeam.trim() || !matchDate.value) {
oddsList.value = []
if (!props.homeTeam?.trim() || !props.awayTeam?.trim() || !matchDate.value) {
loaded.value = true
oddsList.value = []
return
}
const seq = requestSeq.value + 1
requestSeq.value = seq
const seq = ++requestSeq.value
loading.value = true
loadError.value = ''
try {
const data = await getMatchOdds({
home_team: props.homeTeam.trim(),
away_team: props.awayTeam.trim(),
match_date: matchDate.value,
source_site: sourceSite.value || undefined,
limit: 120,
})
const data = await getMatchOdds({ home_team: props.homeTeam.trim(), away_team: props.awayTeam.trim(), match_date: matchDate.value, limit: 120 })
if (seq !== requestSeq.value) return
oddsList.value = Array.isArray(data?.list) ? data.list : []
mergePlatformOptions(data?.platform_options)
loaded.value = true
} catch (error) {
if (seq !== requestSeq.value) return
console.error('获取比赛赔率失败', error)
console.error('获取比赛盘口失败', error)
loadError.value = '盘口加载失败，请稍后重试'
oddsList.value = []
loaded.value = true
loadError.value = '赔率加载失败，请稍后重试'
} finally {
if (seq === requestSeq.value) loading.value = false
}
}
const switchPlatform = (platformKey: string) => {
if (sourceSite.value === platformKey) return
sourceSite.value = platformKey
const retryFetch = () => { loaded.value = false; void fetchOdds(true) }
watch(() => [props.homeTeam, props.awayTeam, props.matchTime, props.competitionId, props.leagueName], () => {
loaded.value = false
oddsList.value = []
void fetchOdds(true)
}
const retryFetch = () => {
loaded.value = false
void fetchOdds(true)
}
const formatUpdateTime = (timestamp?: number) => {
const value = Number(timestamp || 0)
if (!value) return ''
const date = new Date(value * 1000)
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hour = String(date.getHours()).padStart(2, '0')
const minute = String(date.getMinutes()).padStart(2, '0')
return `${month}-${day} ${hour}:${minute}`
}
watch(
() => [props.homeTeam, props.awayTeam, props.matchTime, props.competitionId, props.leagueName],
() => {
loaded.value = false
oddsList.value = []
loadError.value = ''
void fetchOdds(true)
},
)
onMounted(() => {
void fetchOdds()
})
onMounted(() => void fetchOdds())
</script>
<style lang="scss" scoped>
.match-odds-detail {
min-height: 100%;
padding: 20rpx 24rpx 32rpx;
box-sizing: border-box;
}
.match-odds-detail__tabs {
width: 100%;
margin-bottom: 20rpx;
white-space: nowrap;
}
.match-odds-detail__tabs-inner {
width: 100%;
min-width: 100%;
display: flex;
gap: 24rpx;
}
.match-odds-detail__tab {
position: relative;
flex: 1 0 112rpx;
min-width: 112rpx;
height: 64rpx;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: #64748b;
font-size: 24rpx;
white-space: nowrap;
}
.match-odds-detail__tab--active {
color: #2563eb;
font-weight: 600;
&::after {
position: absolute;
left: 50%;
bottom: 0;
width: 32rpx;
height: 4rpx;
border-radius: 2rpx;
background: #2563eb;
content: '';
transform: translateX(-50%);
}
}
.match-odds-detail__state {
min-height: 360rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18rpx;
color: #94a3b8;
font-size: 24rpx;
}
.match-odds-detail__list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.match-odds-platform {
padding: 22rpx;
border: 1rpx solid #e2e8f0;
border-radius: 8rpx;
background: #ffffff;
}
.match-odds-platform__head,
.match-odds-platform__name,
.match-odds-market__title,
.match-odds-market__values {
display: flex;
align-items: center;
}
.match-odds-platform__head {
justify-content: space-between;
gap: 16rpx;
margin-bottom: 18rpx;
}
.match-odds-platform__name {
min-width: 0;
gap: 12rpx;
color: #0f172a;
font-size: 28rpx;
font-weight: 700;
}
.match-odds-platform__tag {
padding: 4rpx 10rpx;
border-radius: 6rpx;
background: #eff6ff;
color: #2563eb;
font-size: 20rpx;
font-weight: 500;
}
.match-odds-platform__update {
flex-shrink: 0;
color: #94a3b8;
font-size: 20rpx;
}
.match-odds-market {
padding: 16rpx 0;
border-top: 1rpx solid #f1f5f9;
}
.match-odds-market__title {
justify-content: space-between;
margin-bottom: 12rpx;
color: #334155;
font-size: 24rpx;
font-weight: 600;
}
.match-odds-market__line {
color: #2563eb;
font-size: 22rpx;
}
.match-odds-market__values {
gap: 12rpx;
}
.match-odds-value {
flex: 1;
min-width: 0;
min-height: 86rpx;
padding: 12rpx 8rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6rpx;
box-sizing: border-box;
border-radius: 6rpx;
background: #f8fafc;
}
.match-odds-value__label {
color: #64748b;
font-size: 21rpx;
}
.match-odds-value__number {
color: #0f172a;
font-size: 27rpx;
font-weight: 700;
}
.odds-board { min-height: 100%; padding: 28rpx 24rpx 40rpx; box-sizing: border-box; background: #f8fafc; }
.odds-board__heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 4rpx 24rpx; }
.odds-board__title { display: block; color: #111827; font-size: 34rpx; font-weight: 700; }
.odds-board__hint, .odds-board__time { color: #9aa2ad; font-size: 22rpx; }
.odds-board__hint { display: block; margin-top: 8rpx; }
.market-tabs { display: flex; gap: 16rpx; margin-bottom: 20rpx; }
.market-tabs__item { flex: 1; height: 70rpx; display: flex; align-items: center; justify-content: center; border-radius: 18rpx; background: #f1f3f6; color: #707781; font-size: 27rpx; }
.market-tabs__item--active { background: #1769ff; color: #fff; font-weight: 600; box-shadow: 0 10rpx 24rpx rgba(23, 105, 255, .18); }
.odds-table-wrap { overflow: hidden; border: 1rpx solid #e5e9ef; border-radius: 18rpx; background: #fff; }
.odds-table { width: 100%; }
.odds-table__row { min-height: 72rpx; display: grid; grid-template-columns: 1.05fr 1.1fr 1.25fr 1.1fr .9fr; align-items: center; border-top: 1rpx solid #edf0f4; color: #343941; font-size: 23rpx; text-align: center; }
.odds-table__row:first-child { border-top: 0; }
.odds-table__row--head { min-height: 68rpx; background: #f8fafc; color: #69717d; font-size: 22rpx; }
.odds-table__source { font-weight: 600; }
.odds-table__line { color: #222831; font-size: 24rpx; }
.odds-table__odd { font-size: 28rpx; font-weight: 600; }
.odds-table__odd i { margin-left: 4rpx; font-style: normal; font-size: 17rpx; }
.odds-table__odd--up { color: #e53935; }
.odds-table__odd--down { color: #36a653; }
.odds-table__odd--muted, .odds-table__update { color: #9aa2ad; }
.odds-table__update { font-size: 21rpx; }
.odds-board__more { margin: 18rpx; height: 66rpx; display: flex; align-items: center; justify-content: center; border: 2rpx solid #1769ff; border-radius: 34rpx; color: #1769ff; font-size: 27rpx; }
.odds-board__state { min-height: 420rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18rpx; color: #97a0ad; font-size: 25rpx; }
.odds-trend { margin-top: 20rpx; padding: 24rpx; border: 1rpx solid #e5e9ef; border-radius: 18rpx; background: #fff; }
.odds-trend__head { display: flex; justify-content: space-between; color: #222831; font-size: 27rpx; font-weight: 600; }
.odds-trend__empty { color: #9aa2ad; font-size: 22rpx; font-weight: 400; }
</style>