refactor: 重构页面框架，配置全局底部导航栏并优化资源

移除废弃的AppShell、BottomNav、PlayTopBar组件，统一所有页面的根布局结构。在pages.json中配置全局小程序底部导航栏，新增配套的tabbar图标资源。将本地静态图片替换为远程CDN资源，重构资源加载工具函数。更新小程序后台appid，调整全局样式与部分页面的布局样式。拆分我的页面为未登录访客态和已登录会员态，新增对应业务组件。重构登录页、首页、玩法页等多个页面的代码，移除对旧组件的依赖。
2026-08-12 21:09:18 +08:00
1 parent 16caad1c40
commit 988f7c3f4c
@@ -0,0 +1,108 @@
+<template>
+  <view class="min-h-screen bg-transparent">
+    <TopHeader title="我的" subtitle="需求、收藏和最近浏览" search @back="$emit('backHome')" @search="$emit('search', $event ?? '贵州')" />
+    <view class="px-4 pt-4">
+      <view class="brand-panel rounded-[26px] p-5 text-white">
+        <view class="relative z-10 flex items-center justify-between">
+          <view>
+            <text class="block text-[12px] font-semibold uppercase tracking-[0.12em] text-[#f6dfb7]">万趣旅行</text>
+            <text class="mt-1 block text-[24px] font-bold">旅行需求中心</text>
+            <text class="mt-2 block text-[12px] leading-5 text-white/80">{{ customerLine }}</text>
+          </view>
+          <view
+            class="flex h-16 w-16 items-center justify-center rounded-full border border-white/15 bg-white/15 text-[22px] font-bold shadow-[inset_0_1px_rgba(255,255,255,0.24)]"
+          >
+            我
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="grid grid-cols-3 gap-2 px-4 py-4">
+      <button
+        v-for="item in tabs"
+        :key="item.id"
+        class="tap-feedback m-0 min-h-[76px] rounded-[20px] border px-3 py-4 text-center"
+        :class="tab === item.id ? 'border-[#245c45] bg-[#245c45] text-white shadow-[0_10px_20px_rgba(36,92,69,0.16)]' : 'border-[#245c45]/10 bg-white/90 text-[#718073]'"
+        @click="tab = item.id"
+      >
+        <text class="block text-[18px] font-bold">{{ item.count }}</text>
+        <text class="mt-1 block text-[11px]">{{ item.label }}</text>
+      </button>
+    </view>
+
+    <view class="px-4 pb-6">
+      <view v-if="tab === 'requests'" class="space-y-3">
+        <view v-if="latestBooking" class="elevated-card rounded-[22px] p-4">
+          <view class="mb-3 flex items-center justify-between">
+            <text class="font-bold text-[#1f2c25]">{{ latestBooking.status }}</text>
+            <text class="text-[11px] text-[#718073]">{{ latestBooking.time }}</text>
+          </view>
+          <button class="m-0 flex w-full gap-3 bg-transparent p-0 text-left" @click="$emit('goDetail', latestBooking.product)">
+            <image class="h-[86px] w-[104px] rounded-[16px]" :src="latestBooking.product.image" mode="aspectFill" />
+            <view class="min-w-0 flex-1">
+              <text class="text-clamp-2 text-[14px] font-bold text-[#1f2c25]">{{ stripTitle(latestBooking.product.title) }}</text>
+              <text class="mt-2 block text-[11px] text-[#718073]">{{ latestBooking.product.tags.slice(0, 3).join(" / ") }}</text>
+            </view>
+          </button>
+        </view>
+        <EmptyState v-else title="暂无提交记录" action="去提交需求" @action="$emit('goDemand')" />
+      </view>
+
+      <view v-if="tab === 'favorites'" class="space-y-3">
+        <MineProductRow
+          v-for="product in favoriteProducts"
+          :key="productKey(product)"
+          :product="product"
+          primary="查看详情"
+          secondary="取消收藏"
+          @primary="$emit('goDetail', product)"
+          @secondary="$emit('toggleFavorite', product)"
+        />
+        <EmptyState v-if="!favoriteProducts.length" title="暂无收藏线路" action="去首页看看" @action="$emit('goHome')" />
+      </view>
+
+      <view v-if="tab === 'history'" class="space-y-3">
+        <MineProductRow
+          v-for="product in browsingHistory"
+          :key="productKey(product)"
+          :product="product"
+          primary="再次查看"
+          @primary="$emit('goDetail', product)"
+        />
+        <EmptyState v-if="!browsingHistory.length" title="暂无浏览记录" action="去找线路" @action="$emit('goSearch', $event ?? '贵州')" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import EmptyState from "@/components/EmptyState.vue";
+import MineProductRow from "@/components/MineProductRow.vue";
+import TopHeader from "@/components/TopHeader.vue";
+import { productKey, stripTitle } from "@/lib/data";
+import type { BookingRecord, Product } from "@/lib/types";
+
+type MineTab = "requests" | "favorites" | "history";
+
+defineProps<{
+  customerLine: string;
+  tabs: { id: MineTab; label: string; count: number }[];
+  latestBooking: BookingRecord | null;
+  favoriteProducts: Product[];
+  browsingHistory: Product[];
+}>();
+
+defineEmits<{
+  backHome: [];
+  search: [keyword: string];
+  goDetail: [product: Product];
+  toggleFavorite: [product: Product];
+  goDemand: [];
+  goHome: [];
+  goSearch: [keyword: string];
+}>();
+
+const tab = ref<MineTab>("requests");
+</script>