Explorar el Código

feat(app): 优化活动页面图片展示

- 添加天数标题和日期显示
- 增加视频和图片的长按菜单功能
- 优化页面加载逻辑
EvilDragon hace 3 semanas
padre
commit
28cf356e1b
Se han modificado 1 ficheros con 7 adiciones y 2 borrados
  1. 7 2
      packages/app/src/pages/home/activity/images/index.vue

+ 7 - 2
packages/app/src/pages/home/activity/images/index.vue

@@ -8,6 +8,8 @@
 </route>
 <script setup lang="ts">
 import { getPhotoList } from '../../../../core/libs/requests'
+import SectionHeading from '@/components/section-heading.vue'
+import dayjs from 'dayjs'
 
 const id = ref()
 const type = ref()
@@ -21,7 +23,7 @@ const { data, run: setData } = useRequest(
   { initialData: { list: [], total: 0 } },
 )
 onLoad(async (query: { id: string; type: 'activity' | 'studyTour'; title: string }) => {
-  uni.setNavigationBarTitle({ title: query.title })
+  await uni.setNavigationBarTitle({ title: query.title })
   id.value = query.id
   type.value = query.type
   await setData()
@@ -30,11 +32,14 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour'; title: string
 <template>
   <div class="flex flex-col flex-grow p-4 bg-white gap-4">
     <template v-for="(it, i) in data.list" :key="i">
+      <SectionHeading
+        :title="'第' + Number(i + 1) + '天 ' + dayjs(it.travelDate).format('MM月DD日')"
+      ></SectionHeading>
       <template v-for="(video, index) in it.video" :key="index">
         <video class="w-full" :src="video"></video>
       </template>
       <template v-for="(img, index) in it.picture" :key="index">
-        <wd-img width="100%" mode="widthFix" :src="img" />
+        <wd-img width="100%" mode="widthFix" :src="img" enable-preview show-menu-by-longpress />
       </template>
     </template>
   </div>