refactor: 重构页面框架，配置全局底部导航栏并优化资源
移除废弃的AppShell、BottomNav、PlayTopBar组件，统一所有页面的根布局结构。在pages.json中配置全局小程序底部导航栏，新增配套的tabbar图标资源。将本地静态图片替换为远程CDN资源，重构资源加载工具函数。更新小程序后台appid，调整全局样式与部分页面的布局样式。拆分我的页面为未登录访客态和已登录会员态，新增对应业务组件。重构登录页、首页、玩法页等多个页面的代码，移除对旧组件的依赖。
This commit is contained in:
duanshuwen committed
1 parent
16caad1c40
commit
988f7c3f4c
31 files changed
+372
-325
No files matched your search
@@ -1,14 +1,19 @@
|
||||
<template>
|
||||
<AppShell>
|
||||
<view class="safe-bottom min-h-screen bg-transparent">
|
||||
<view class="wq-page">
|
||||
<view class="wq-phone">
|
||||
<view class="min-h-screen bg-transparent">
|
||||
<scroll-view scroll-y class="h-screen pb-[118px]">
|
||||
<view class="relative h-[430px] text-white">
|
||||
<image class="absolute inset-0 h-full w-full" :src="product.image" mode="aspectFill" />
|
||||
<view class="hero-scrim absolute inset-0" />
|
||||
<view class="top-safe absolute left-0 right-0 top-0 z-10 flex items-center justify-between px-4 pt-2">
|
||||
<button class="tap-feedback m-0 h-11 w-11 rounded-full bg-black/30 p-0 text-[28px] leading-none text-white backdrop-blur" @click="goBack()">‹</button>
|
||||
<button
|
||||
class="tap-feedback m-0 h-11 w-11 rounded-full bg-black/30 p-0 text-[28px] leading-none text-white backdrop-blur"
|
||||
@click="goBack()">‹</button>
|
||||
<view class="flex gap-2">
|
||||
<button class="tap-feedback m-0 h-11 min-w-[48px] rounded-full bg-black/30 px-3 text-[12px] font-semibold text-white backdrop-blur" @click="toggleFavorite">{{ favorite ? "已藏" : "收藏" }}</button>
|
||||
<button
|
||||
class="tap-feedback m-0 h-11 min-w-[48px] rounded-full bg-black/30 px-3 text-[12px] font-semibold text-white backdrop-blur"
|
||||
@click="toggleFavorite">{{ favorite ? "已藏" : "收藏" }}</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="absolute bottom-8 left-0 right-0 px-5">
|
||||
@@ -18,15 +23,13 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sticky top-0 z-20 border-b border-[#245c45]/10 bg-[#fffaf2]/95 px-3 py-3 shadow-[0_8px_20px_rgba(31,44,37,0.05)] backdrop-blur">
|
||||
<view
|
||||
class="sticky top-0 z-20 border-b border-[#245c45]/10 bg-[#fffaf2]/95 px-3 py-3 shadow-[0_8px_20px_rgba(31,44,37,0.05)] backdrop-blur">
|
||||
<scroll-view scroll-x class="no-scrollbar whitespace-nowrap">
|
||||
<button
|
||||
v-for="section in detailSections"
|
||||
:key="section.key"
|
||||
<button v-for="section in detailSections" :key="section.key"
|
||||
class="tap-feedback m-0 mr-2 min-h-[40px] rounded-full border px-4 py-2 text-[13px]"
|
||||
:class="activeTab === section.key ? 'border-[#245c45] bg-[#245c45] text-white shadow-[0_8px_16px_rgba(36,92,69,0.16)]' : 'border-[#245c45]/10 bg-white/90 text-[#526256]'"
|
||||
@click="activeTab = section.key"
|
||||
>
|
||||
@click="activeTab = section.key">
|
||||
{{ section.label }}
|
||||
</button>
|
||||
</scroll-view>
|
||||
@@ -35,7 +38,9 @@
|
||||
<view class="px-4 py-4">
|
||||
<view class="elevated-card rounded-[24px] p-4">
|
||||
<view class="flex flex-wrap gap-2">
|
||||
<text v-for="tag in product.tags" :key="tag" class="rounded-full border border-[#245c45]/10 bg-[#edf4ee] px-3 py-1 text-[11px] font-semibold text-[#245c45]">{{ tag }}</text>
|
||||
<text v-for="tag in product.tags" :key="tag"
|
||||
class="rounded-full border border-[#245c45]/10 bg-[#edf4ee] px-3 py-1 text-[11px] font-semibold text-[#245c45]">{{
|
||||
tag }}</text>
|
||||
</view>
|
||||
<view class="mt-4 flex items-end justify-between">
|
||||
<text class="text-[12px] text-[#718073]">参考起价</text>
|
||||
@@ -45,18 +50,16 @@
|
||||
</view>
|
||||
|
||||
<view class="px-4">
|
||||
<view
|
||||
v-for="section in visibleSections"
|
||||
:key="section.key"
|
||||
class="elevated-card mb-4 rounded-[24px] p-4"
|
||||
>
|
||||
<view v-for="section in visibleSections" :key="section.key" class="elevated-card mb-4 rounded-[24px] p-4">
|
||||
<text class="block text-[18px] font-bold text-[#1f2c25]">{{ section.title || section.label }}</text>
|
||||
<view class="mt-3 space-y-3">
|
||||
<template v-for="(block, index) in section.blocks" :key="`${section.key}-${index}`">
|
||||
<text v-if="block.type === 'text'" class="block text-[13px] leading-6 text-[#526256]">{{ block.text }}</text>
|
||||
<text v-if="block.type === 'text'" class="block text-[13px] leading-6 text-[#526256]">{{ block.text
|
||||
}}</text>
|
||||
<view v-else class="overflow-hidden rounded-[20px] border border-[#245c45]/10">
|
||||
<image class="h-[210px] w-full" :src="block.url" mode="aspectFill" />
|
||||
<text v-if="block.alt" class="block bg-[#f6f7f2] px-3 py-2 text-[11px] text-[#718073]">{{ block.alt }}</text>
|
||||
<text v-if="block.alt" class="block bg-[#f6f7f2] px-3 py-2 text-[11px] text-[#718073]">{{ block.alt
|
||||
}}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
@@ -69,17 +72,19 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="fixed bottom-0 left-1/2 z-40 flex w-full max-w-[430px] -translate-x-1/2 items-center justify-end gap-3 border-t border-[#245c45]/10 bg-[#fffaf2]/95 px-4 pb-[calc(12px+env(safe-area-inset-bottom))] pt-3 shadow-[0_-14px_32px_rgba(31,44,37,0.1)] backdrop-blur">
|
||||
<button class="primary-action tap-feedback m-0 w-full text-[15px] font-bold" @click="goBooking(product)">预订咨询</button>
|
||||
<view
|
||||
class="fixed bottom-0 left-1/2 z-40 flex w-full max-w-[430px] -translate-x-1/2 items-center justify-end gap-3 border-t border-[#245c45]/10 bg-[#fffaf2]/95 px-4 pb-[calc(12px+env(safe-area-inset-bottom))] pt-3 shadow-[0_-14px_32px_rgba(31,44,37,0.1)] backdrop-blur">
|
||||
<button class="primary-action tap-feedback m-0 w-full text-[15px] font-bold"
|
||||
@click="goBooking(product)">预订咨询</button>
|
||||
</view>
|
||||
</view>
|
||||
</AppShell>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import AppShell from "@/components/AppShell.vue";
|
||||
import ProductList from "@/components/ProductList.vue";
|
||||
import SectionHeading from "@/components/SectionHeading.vue";
|
||||
import { formatWan, getDetailMeta, getProductDetailSections, productKey, stripTitle } from "@/lib/data";
|
||||
|
||||
Reference in new issue
Block a user