refactor(home): 移动商城页面并更新导航结构

src/assets/svgs/schedule-card-bg.svg

@@ -0,0 +1,14 @@
+<svg width="349" height="138" viewBox="0 0 349 138" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_b_1_1190)">
+<path d="M1 7C1 3.68629 3.68629 1 7 1H56.9443C61.5848 1 66.162 2.07653 70.3161 4.14494L87.8089 12.8551C91.963 14.9235 96.5402 16 101.181 16H247.22C251.844 16 256.405 14.9312 260.548 12.8771L278.202 4.12291C282.345 2.06879 286.906 1 291.53 1H342C345.314 1 348 3.68629 348 7V121C348 129.837 340.837 137 332 137H17C8.16344 137 1 129.837 1 121V7Z" fill="white" fill-opacity="0.6"/>
+<path d="M1 7C1 3.68629 3.68629 1 7 1H56.9443C61.5848 1 66.162 2.07653 70.3161 4.14494L87.8089 12.8551C91.963 14.9235 96.5402 16 101.181 16H247.22C251.844 16 256.405 14.9312 260.548 12.8771L278.202 4.12291C282.345 2.06879 286.906 1 291.53 1H342C345.314 1 348 3.68629 348 7V121C348 129.837 340.837 137 332 137H17C8.16344 137 1 129.837 1 121V7Z" stroke="white"/>
+</g>
+<defs>
+<filter id="filter0_b_1_1190" x="-29.5" y="-29.5" width="408" height="197" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="15"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1_1190"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1_1190" result="shape"/>
+</filter>
+</defs>
+</svg>

src/core/libs/pngs.ts

@@ -0,0 +1,3 @@
+import scheduleCardBg from '@/assets/pngs/schedule-card-bg.png'
+
+export { scheduleCardBg }

src/core/libs/svgs.ts

@@ -5,4 +5,5 @@ import right from '@/assets/svgs/right.svg'
 import wechat from '@/assets/svgs/wechat.svg'
 import award from '@/assets/svgs/award.svg'
 import camera from '@/assets/svgs/camera.svg'
-export { polygon16, frame, peoples, right, wechat, award, camera }
+import scheduleCardBg from '@/assets/svgs/schedule-card-bg.svg'
+export { polygon16, frame, peoples, right, wechat, award, camera, scheduleCardBg }

src/pages.json

@@ -59,13 +59,6 @@
       }
     },
     {
-      "path": "pages/mall/index",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "品质商城"
-      }
-    },
-    {
       "path": "pages/material/index",
       "type": "page",
       "style": {
@@ -94,6 +87,14 @@
       }
     },
     {
+      "path": "pages/home/mall/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "品质商城",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
       "path": "pages/home/offline-activity/index",
       "type": "page",
       "style": {

src/pages/home/components/menus.vue

@@ -27,7 +27,7 @@ const items = [
     id: 4,
     title: '品质商城',
     desc: '所需周边',
-    path: '/mall/index',
+    path: '/pages/home/mall/index',
     icon: '/static/svgs/message.svg',
   },
 ]

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import SectionHeading from '@/components/section-heading.vue'
+import { scheduleCardBg } from '@/core/libs/pngs'
+
+defineProps({
+  customClass: {
+    type: String,
+    default: () => '',
+  },
+  options: {
+    type: Object,
+    default: () => ({
+      items: [
+        { date: '9:00', title: '早稻田大学课程', desc: '学习灯光设计师课程' },
+        { date: '11:00', title: '早稻田大学博物馆参观', desc: '了解博物馆历史' },
+        { date: '15:00', title: '早稻田大学设计交流会', desc: '交流学习设计心得' },
+      ],
+    }),
+  },
+})
+</script>
+<template>
+  <view class="flex flex-col items-center" :class="[customClass]">
+    <SectionHeading title="我的游学日程" custom-class="w-full"></SectionHeading>
+    <div
+      class="w-full my-3.5 text-[#acacac] text-sm font-normal font-['PingFang SC'] leading-normal"
+    >
+      6月26日 第二天
+    </div>
+    <div
+      class="w-80 bg-gradient-to-r from-[#141414] to-[#4b4949] rounded-tl-2xl rounded-tr-2xl p-6 box-border"
+    >
+      <template v-for="(it, index) in options.items" :key="index">
+        <view class="relative mb-4">
+          <view class="flex items-center">
+            <div class="w-2 h-2 left-0 top-0 rounded-full border-2 border-solid border-white"></div>
+
+            <div
+              class="w-12 ml-3.5 text-white text-base font-normal font-['PingFang SC'] leading-normal"
+            >
+              9:00
+            </div>
+            <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal">
+              早稻田大学课程
+            </div>
+          </view>
+          <div class="ml-6.5 text-white/40 text-sm font-normal font-['PingFang SC'] leading-normal">
+            学习灯光设计师课程
+          </div>
+          <div
+            v-if="index !== options.items.length - 1"
+            class="absolute left-1.25 top-6 bottom--4 border border-dashed border-gray bg-gray-500"
+          ></div>
+        </view>
+      </template>
+    </div>
+    <view class="w-full relative bottom-7 mb--9">
+      <wd-img :src="scheduleCardBg" width="100%" mode="widthFix"></wd-img>
+      <view class="absolute bottom-0 left-0 right-0 px-3.5 py-7 flex flex-col items-center">
+        <wd-icon
+          custom-class="relative bottom-6"
+          :name="options.items.length > 2 ? 'arrow-up' : 'arrow-down'"
+          size="22px"
+          color="#4f4f4f"
+        ></wd-icon>
+        <view class="w-full">
+          <wd-button block size="large">查看全部行程</wd-button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>

src/pages/home/index.vue

@@ -18,6 +18,7 @@ import TiltedButton from '@/components/tilted-button.vue'
 import useRequest from '@/hooks/useRequest'
 import dayjs from 'dayjs'
 import Menus from './components/menus.vue'
+import ScheduleCard from './components/schedule-card.vue'
 
 defineOptions({
   name: 'Home',
@@ -113,6 +114,7 @@ onLoad(() => {})
       </div>
     </view>
     <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
+      <ScheduleCard custom-class="my-6 mx-3.5"></ScheduleCard>
       <menus></menus>
       <view class="my-6 mx-3.5">
         <HotActivity></HotActivity>

src/pages/mall/index.vue → src/pages/home/mall/index.vue

@@ -1,5 +1,10 @@
 <route lang="json5">
-{ style: { navigationBarTitleText: '品质商城' } }
+{
+  style: {
+    navigationBarTitleText: '品质商城',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
 </route>
 
 <script setup lang="ts"></script>

src/types/uni-pages.d.ts

@@ -6,11 +6,11 @@
 interface NavigateToOptions {
   url: "/pages/home/index" |
        "/pages/about/about" |
-       "/pages/mall/index" |
        "/pages/material/index" |
        "/pages/messages/index" |
        "/pages/mine/index" |
        "/pages/publish/index" |
+       "/pages/home/mall/index" |
        "/pages/home/offline-activity/index" |
        "/pages/home/spread/index" |
        "/pages/home/study-tour/index";