hello-dd-code
baeb5bd179
- uni-app (Vue3) + Vite 框架 - 7个页面：首页、赛程、比赛详情、球队、球队详情、球员、个人中心 - API 接口配置 (开发/生产环境) - 状态管理 (Pinia)
149 lines
3.7 KiB
Vue
149 lines
3.7 KiB
Vue
<template>
|
|
<view class="page safe-bottom">
|
|
<view class="nav-title">球队百科</view>
|
|
<view class="search-box card">
|
|
<input v-model="keyword" placeholder="搜索球队、外号或三字码" confirm-type="search" @confirm="loadTeams" />
|
|
<button class="search-btn" @tap="loadTeams">搜索</button>
|
|
</view>
|
|
|
|
<view class="team-list" v-if="teams.length">
|
|
<view class="team-card card" v-for="team in teams" :key="team.id" @tap="openTeam(team.id)">
|
|
<view class="team-top">
|
|
<view>
|
|
<text class="team-name">{{ team.name_zh || team.name_en }}</text>
|
|
<text class="team-code">{{ team.short_name }} · {{ team.group_code || '未分组' }}</text>
|
|
</view>
|
|
<text class="stars" v-if="team.world_cup_titles">{{ team.world_cup_titles }} 星</text>
|
|
</view>
|
|
<view class="nickname-row">
|
|
<text class="tag" v-for="name in (team.nicknames || []).slice(0, 2)" :key="name">{{ name }}</text>
|
|
</view>
|
|
<text class="intro">{{ team.intro_short || team.best_result || '查看外号、历史成绩和球队梗图' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fallback" v-else>
|
|
<view class="team-card card" v-for="team in fallbackTeams" :key="team.name_zh">
|
|
<view class="team-top">
|
|
<view>
|
|
<text class="team-name">{{ team.name_zh }}</text>
|
|
<text class="team-code">{{ team.short_name }}</text>
|
|
</view>
|
|
<text class="stars">{{ team.stars }}</text>
|
|
</view>
|
|
<view class="nickname-row">
|
|
<text class="tag" v-for="name in team.nicknames" :key="name">{{ name }}</text>
|
|
</view>
|
|
<text class="intro">{{ team.copy }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
|
|
import { getTeams } from '@/api/worldcup'
|
|
|
|
const keyword = ref('')
|
|
const teams = ref([])
|
|
|
|
const fallbackTeams = [
|
|
{ name_zh: '巴西', short_name: 'BRA', stars: '5 星', nicknames: ['五星巴西', '桑巴军团'], copy: '五次世界杯冠军，进攻足球的世界级记忆点。' },
|
|
{ name_zh: '阿根廷', short_name: 'ARG', stars: '3 星', nicknames: ['潘帕斯雄鹰', '蓝白军团'], copy: '技术、速度与自由，是中文球迷熟悉的南美想象。' },
|
|
{ name_zh: '德国', short_name: 'GER', stars: '4 星', nicknames: ['德国战车'], copy: '纪律、力量和效率，是德国队最经典的传播标签。' }
|
|
]
|
|
|
|
onLoad(loadTeams)
|
|
onPullDownRefresh(async () => {
|
|
await loadTeams()
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
|
|
async function loadTeams() {
|
|
try {
|
|
const res = await getTeams({ keyword: keyword.value })
|
|
teams.value = res.data?.items || []
|
|
} catch (e) {}
|
|
}
|
|
|
|
function openTeam(id) {
|
|
uni.navigateTo({ url: `/pages/team-detail/index?id=${id}` })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 82rpx;
|
|
padding: 0 18rpx;
|
|
}
|
|
|
|
input {
|
|
flex: 1;
|
|
height: 82rpx;
|
|
font-size: 27rpx;
|
|
}
|
|
|
|
.search-btn {
|
|
width: 112rpx;
|
|
height: 56rpx;
|
|
border-radius: 8rpx;
|
|
color: #ffffff;
|
|
background: #0b6b53;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.team-list,
|
|
.fallback {
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.team-card {
|
|
padding: 24rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
|
|
.team-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.team-name {
|
|
display: block;
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.team-code {
|
|
display: block;
|
|
margin-top: 8rpx;
|
|
color: #66736d;
|
|
font-size: 23rpx;
|
|
}
|
|
|
|
.stars {
|
|
color: #c8493a;
|
|
font-size: 28rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.nickname-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
margin-top: 18rpx;
|
|
}
|
|
|
|
.intro {
|
|
display: block;
|
|
margin-top: 18rpx;
|
|
color: #66736d;
|
|
font-size: 25rpx;
|
|
line-height: 1.45;
|
|
}
|
|
</style>
|
|
|