feat: 初始化世界杯观赛助手小程序

- uni-app (Vue3) + Vite 框架 - 7个页面：首页、赛程、比赛详情、球队、球队详情、球员、个人中心 - API 接口配置 (开发/生产环境) - 状态管理 (Pinia)
2026-04-28 15:55:35 +08:00
commit baeb5bd179
25 changed files with 14040 additions and 0 deletions
@@ -0,0 +1,148 @@
+<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>
+