refactor(pages): 重构页面路由和组件以提升可维护性

src/components/section-heading.vue

@@ -10,6 +10,11 @@ defineProps({
     type: String,
     default: () => '',
   },
+  path: {
+    type: String as PropType<string | undefined>,
+    default: () => undefined,
+    required: false,
+  },
 })
 </script>
 <template>
@@ -17,7 +22,10 @@ defineProps({
     <div class="text-black text-xl font-normal font-['PingFang SC'] leading-[10.18px]">
       {{ title }}
     </div>
-    <div class="text-right text-black/30 text-sm font-normal font-['PingFang SC'] leading-tight">
+    <div
+      v-if="path"
+      class="text-right text-black/30 text-sm font-normal font-['PingFang SC'] leading-tight"
+    >
       查看全部
       <wd-img :src="right" width="10" height="10"></wd-img>
     </div>

src/pages.json

@@ -43,7 +43,7 @@
   },
   "pages": [
     {
-      "path": "pages/index/index",
+      "path": "pages/home/index",
       "type": "home",
       "layout": "tabbar",
       "style": {
@@ -87,28 +87,29 @@
       }
     },
     {
-      "path": "pages/offline-activity/index",
+      "path": "pages/publish/index",
       "type": "page",
       "style": {
-        "navigationBarTitleText": "线下活动"
+        "navigationBarTitleText": "发布"
       }
     },
     {
-      "path": "pages/publish/index",
+      "path": "pages/spread/index",
       "type": "page",
       "style": {
-        "navigationBarTitleText": "发布"
+        "navigationBarTitleText": "设计传播"
       }
     },
     {
-      "path": "pages/spread/index",
+      "path": "pages/home/offline-activity/index",
       "type": "page",
       "style": {
-        "navigationBarTitleText": "设计传播"
+        "navigationBarTitleText": "线下活动",
+        "navigationBarBackgroundColor": "#fff"
       }
     },
     {
-      "path": "pages/index/study-tour/index",
+      "path": "pages/home/study-tour/index",
       "type": "page",
       "style": {
         "navigationBarTitleText": "设计游学",

src/pages/index/components/menus.vue → src/pages/home/components/menus.vue

@@ -6,14 +6,14 @@ const items = [
     id: 1,
     title: '设计游学',
     desc: '游学项目',
-    path: '/pages/index/study-tour/index',
+    path: '/pages/home/study-tour/index',
     icon: '/static/svgs/iconly-glass-edit.svg',
   },
   {
     id: 2,
     title: '线下活动',
     desc: '骑行俱乐部',
-    path: '/pages/offine-activity/index',
+    path: '/pages/home/offline-activity/index',
     icon: '/static/svgs/iconly-glass-star.svg',
   },
   {

src/pages/home/components/register-card.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import Card from '@/components/card.vue'
+
+defineProps({
+  customClass: {
+    type: String,
+    default: () => '',
+  },
+})
+</script>
+<template>
+  <card custom-class="my-6 p-0!">
+    <view class="relative">
+      <wd-img
+        custom-class="vertical-bottom"
+        width="100%"
+        height="275"
+        src="https://via.placeholder.com/347x464"
+      ></wd-img>
+      <div
+        class="w-[63px] h-[29px] bg-black/60 rounded-[20px] backdrop-blur-[15px] absolute top-5 right-3.5 flex items-center justify-center"
+      >
+        <div class="text-white text-sm font-normal font-['PingFang SC'] leading-relaxed">
+          报名中
+        </div>
+      </div>
+      <view class="absolute left-3.5 bottom-2.5 flex items-center">
+        <avatar-group-casual
+          :show-number="3"
+          :urls="[
+            'https://via.placeholder.com/20x20',
+            'https://via.placeholder.com/20x20',
+            'https://via.placeholder.com/20x20',
+          ]"
+        ></avatar-group-casual>
+        <div class="ml-1 text-white/60 text-sm font-normal font-['PingFang SC'] leading-[10.18px]">
+          40人已报名
+        </div>
+      </view>
+    </view>
+    <div class="bg-[#27130d]/50 rounded-bl-2xl rounded-br-2xl backdrop-blur-[20px] p-3.5">
+      <div class="w-[293px] text-white text-xl font-normal font-['PingFang SC'] leading-relaxed">
+        日本研学·东京艺术大学设计游学
+      </div>
+      <view class="flex items-center">
+        <div class="text-white/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
+          游学时间：
+        </div>
+        <div class="text-white/60 text-base font-normal font-['PingFang SC'] leading-[34px]">
+          07.15 08.10
+        </div>
+      </view>
+      <div
+        class="text-justify text-white/60 text-sm font-normal font-['PingFang SC'] leading-relaxed"
+      >
+        等级限制：黄金会员以上
+      </div>
+      <view class="flex items-center justify-between">
+        <view class="flex items-end">
+          <div class="text-white text-3xl font-bold font-['D-DIN Exp'] leading-normal">16000</div>
+          <div class="ml-1 text-white/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
+            积分
+          </div>
+        </view>
+        <tilted-button custom-class="" size="large" color="white">立即报名</tilted-button>
+      </view>
+    </div>
+  </card>
+</template>

src/pages/home/offline-activity/index.vue

@@ -0,0 +1,42 @@
+<route lang="json5">
+{
+  style: {
+    navigationBarTitleText: '线下活动',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script setup lang="ts">
+import SectionHeading from '@/components/section-heading.vue'
+import Card from '@/components/card.vue'
+import RegisterCard from '../components/register-card.vue'
+
+const tab = ref<number>(0)
+</script>
+
+<template>
+  <view class="px-3.5">
+    <section-heading custom-class="my-6" title="线下活动"></section-heading>
+    <register-card></register-card>
+    <card custom-class="my-6">
+      <div class="my-7.5 text-black text-xl font-normal font-['PingFang SC'] leading-[10.18px]">
+        筑巢荟-活动营
+      </div>
+      <div
+        class="w-[319px] h-[264px] text-justify text-black/40 text-base font-normal font-['PingFang SC'] leading-relaxed"
+      >
+        我们为您精心打造了一个独特且极具价值的活动营。这个项目的核心旨在全方位提升您作为设计师的能力。
+        在这里，您将拥有无比优质的游学资源。我们与全球知名的设计学府、顶尖设计工作室以及具有代表性的经典建筑和室内空间建立了紧密合作。您将有机会深入这些卓越的场所，亲身体验最前沿的设计理念和实践。
+        参与专业的研讨会和工作坊，与同行们分享见解、碰撞思维火花，进一步深化对设计的理解。
+      </div>
+    </card>
+    <wd-tabs v-model="tab">
+      <block v-for="item in 4" :key="item">
+        <wd-tab :title="`标签${item}`"></wd-tab>
+      </block>
+    </wd-tabs>
+  </view>
+</template>
+
+<style scoped lang="scss"></style>

src/pages/offline-activity/index.vue

@@ -1,11 +0,0 @@
-<route lang="json5">
-{ style: { navigationBarTitleText: '线下活动' } }
-</route>
-
-<script setup lang="ts"></script>
-
-<template>
-  <view></view>
-</template>
-
-<style scoped lang="scss"></style>

src/types/uni-pages.d.ts

@@ -4,16 +4,16 @@
 // Generated by vite-plugin-uni-pages
 
 interface NavigateToOptions {
-  url: "/pages/index/index" |
+  url: "/pages/home/index" |
        "/pages/about/about" |
        "/pages/mall/index" |
        "/pages/material/index" |
        "/pages/messages/index" |
        "/pages/mine/index" |
-       "/pages/offline-activity/index" |
        "/pages/publish/index" |
        "/pages/spread/index" |
-       "/pages/index/study-tour/index";
+       "/pages/home/offline-activity/index" |
+       "/pages/home/study-tour/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}