feat(schedule): 游学日程

env/.env

@@ -5,7 +5,7 @@ VITE_UNI_APPID = 'H57F2ACE4'
 VITE_WX_APPID = 'wxd1448abee19288cd'
 
 # h5部署网站的base，配置到 manifest.config.ts 里的 h5.router.base
-VITE_APP_PUBLIC_BASE=/unibest/
+VITE_APP_PUBLIC_BASE=/
 
 VITE_SERVER_BASEURL = 'https://ukw0y1.laf.run'
 VITE_UPLOAD_BASEURL = 'https://ukw0y1.laf.run/upload'

src/core/libs/requests.ts

@@ -0,0 +1,34 @@
+import { http, httpGet } from '@/utils/http'
+import { Schedule } from '../models/schedule'
+
+export const getUserInfo = () =>
+  httpGetMock<any>({
+    avatar: 'https://via.placeholder.com/21x21',
+    nickname: '苏小萌',
+  })
+export const getSchedule = () =>
+  httpGetMock<Schedule>({
+    name: '东京艺术设计研习营',
+    cover: 'https://via.placeholder.com/375x297',
+    items: [
+      {
+        title: '早稻田大学课程',
+        time: '9:00',
+        content:
+          '是位于日本东京都新宿区的一所著名的私立大学。它由早稻田大学的创始人大隈重信于1882年创立，是日本超级国际化大学计划（Top Global University Project）选定的大学之一，也是日本顶尖的高等教育机构之一。',
+        momentExample: 'https://via.placeholder.com/285x157',
+        monentHint: '*说明：打卡地XX，收集上课素材',
+      },
+      {
+        title: '早稻田大学博物馆参观',
+        time: '11:00',
+        content:
+          '早稻田大学拥有多座博物馆，‌其中最著名的是早稻田大学历史馆。‌早稻田大学历史馆收藏、‌展示着著名校友在运动方面的杰出表现和成就，‌馆内的解说牌以日语和英语标示，‌展现了传统样式风格的建筑。',
+        momentExample: 'https://via.placeholder.com/285x157',
+        monentHint: '*说明：打卡地XX，收集上课素材',
+      },
+    ],
+  })
+
+export const httpGetMock = <T>(data: T) =>
+  new Promise<IResData<T>>((resolve) => resolve({ code: 1, msg: '', data } as IResData<T>))

src/core/libs/svgs.ts

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

src/core/models/schedule.ts

@@ -0,0 +1,12 @@
+export interface ScheduleItem {
+  title: string
+  time: string
+  content: string
+  momentExample?: string
+  monentHint?: string
+}
+export interface Schedule {
+  name: string
+  cover: string
+  items: ScheduleItem[]
+}

src/manifest.json

@@ -105,7 +105,7 @@
   "vueVersion": "3",
   "h5": {
     "router": {
-      "base": "/unibest/"
+      "base": "/"
     }
   }
 }

src/pages.json

@@ -103,6 +103,14 @@
       }
     },
     {
+      "path": "pages/home/schedule/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "游学日程"
+      }
+    },
+    {
       "path": "pages/home/spread/index",
       "type": "page",
       "style": {

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

@@ -25,6 +25,9 @@ const pull = () => {
 const push = () => {
   data.value = props.options.items.slice(0, 2)
 }
+const handleClick = async () => {
+  uni.navigateTo({ url: '/pages/home/schedule/index' })
+}
 onMounted(() => {
   push()
 })
@@ -58,7 +61,7 @@ onMounted(() => {
             学习灯光设计师课程
           </div>
           <div
-            v-if="index !== data.length - 1"
+            v-if="index !== data?.length - 1"
             class="absolute left-1.25 top-6 bottom--4 border border-dashed border-gray bg-gray-500"
           ></div>
         </view>
@@ -69,13 +72,15 @@ onMounted(() => {
       <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="data.length > 2 ? 'arrow-up' : 'arrow-down'"
+          :name="data?.length > 2 ? 'arrow-up' : 'arrow-down'"
           size="22px"
           color="#4f4f4f"
-          @click="data.length > 2 ? push() : pull()"
+          @click="data?.length > 2 ? push() : pull()"
         ></wd-icon>
         <view class="w-full">
-          <wd-button block size="large">查看全部行程</wd-button>
+          <wd-button block size="large" custom-class="rd!" @click="handleClick">
+            查看全部行程
+          </wd-button>
         </view>
       </view>
     </view>

src/pages/home/schedule/index.vue

@@ -0,0 +1,118 @@
+<route lang="yaml">
+style:
+  navigationStyle: custom
+  navigationBarTitleText: 游学日程
+</route>
+<script setup lang="ts">
+import TiltedButton from '@/components/tilted-button.vue'
+import { getSchedule, getUserInfo } from '@/core/libs/requests'
+import { camera, map } from '@/core/libs/svgs'
+
+const { data, run } = useRequest(getSchedule)
+const { data: userInfo, run: runUserInfo } = useRequest(getUserInfo)
+
+onMounted(() => {
+  run()
+  runUserInfo()
+})
+</script>
+<template>
+  <view class="">
+    <view class="bg-black w-full pos-relative aspect-[1.26/1]">
+      <wd-img width="100%" height="100%" :src="data?.cover" />
+      <div
+        class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
+      >
+        <view class="mx-7">
+          <wd-button plain custom-class="bg-transparent! border-white! text-white!">
+            02:30
+          </wd-button>
+        </view>
+      </div>
+    </view>
+    <view class="bg-white relative bottom-4 rounded-t-2xl p-6.5">
+      <view class="border-b border-black/10 border-b-solid pb-5">
+        <div class="text-black/90 text-2xl font-normal font-['PingFang SC'] leading-normal">
+          {{ data?.name }}
+        </div>
+        <view class="flex mt-5">
+          <wd-img
+            custom-class="rounded-full overflow-hidden mr-1"
+            width="22"
+            height="22"
+            :src="userInfo?.avatar"
+          />
+          <div class="text-black/40 text-base font-normal font-['PingFang SC'] leading-normal">
+            {{ userInfo?.nickname }}
+          </div>
+          <div class="flex text-black/40 text-base font-normal font-['PingFang SC'] leading-normal">
+            <view class="mx-3.5">|</view>
+            6月26日 第二天
+          </div>
+        </view>
+      </view>
+      <template v-for="(it, index) in data.items" :key="index">
+        <view class="grid grid-gap-2 mt-8">
+          <view class="col-start-1 row-start-1 flex items-center justify-center">
+            <view
+              class="w-[27px] h-[27px] bg-[#f6f6f6] rounded-full flex justify-center items-center"
+            >
+              <wd-img width="16" height="16" :src="map"></wd-img>
+            </view>
+          </view>
+          <view class="col-start-2 row-start-1 flex">
+            <div
+              class="text-black/90 text-base font-normal font-['PingFang SC'] leading-normal mr-5"
+            >
+              {{ it.time }}
+            </div>
+            <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-normal">
+              {{ it.title }}
+            </div>
+          </view>
+          <view class="col-start-2 row-start-2 border-b border-black/10 border-b-solid pb-5">
+            <div class="">
+              <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-[23px]">
+                行程介绍:
+              </span>
+              <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[23px]">
+                {{ it.content }}
+              </span>
+            </div>
+            <view class="flex items-center my-4">
+              <wd-img width="16" height="16" :src="camera"></wd-img>
+              <div
+                class="ml-1 text-black/90 text-xs font-normal font-['PingFang SC'] leading-normal"
+              >
+                打卡示例
+              </div>
+            </view>
+            <img class="w-[285px] h-[157px] rounded-lg" :src="it.momentExample" />
+            <div
+              class="mt-2.5 text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal"
+            >
+              {{ it.monentHint }}
+            </div>
+          </view>
+        </view>
+      </template>
+    </view>
+    <div
+      class="mx-3.5 p-3.5 bg-white/90 rounded-2xl backdrop-blur-[20px] fixed bottom-4 left-0 right-0 flex items-center justify-between"
+    >
+      <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">
+        发布圈子可得
+      </div>
+      <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
+        16000
+      </div>
+      <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">积分</div>
+      <view class="flex-1"></view>
+      <view>
+        <TiltedButton size="large" custom-class="">
+          <view class="px-3">发圈子</view>
+        </TiltedButton>
+      </view>
+    </div>
+  </view>
+</template>

src/types/uni-pages.d.ts

@@ -12,6 +12,7 @@ interface NavigateToOptions {
        "/pages/publish/index" |
        "/pages/home/mall/index" |
        "/pages/home/offline-activity/index" |
+       "/pages/home/schedule/index" |
        "/pages/home/spread/index" |
        "/pages/home/study-tour/index";
 }