designer-hub/packages/app/src/pages-sub/home/activity/images/index.vue

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "活动图片",
    "navigationBarBackgroundColor": "#ffffff"
  }
}
</route>
<script setup lang="ts">
import { getPhotoList, getPhotoList2 } from '../../../../core/libs/requests'
import SectionHeading from '@/components/section-heading.vue'
import dayjs from 'dayjs'

const id = ref()
const type = ref()
const img = ref()
const imgTab = ref([])
const imgTabIndex = ref(0)
const pageNo = ref(1)
const imgList = ref([])
const more = ref(false)
const { data, run: setData } = useRequest(
  () =>
    getPhotoList({
      bizId: id.value,
      bizType: { studyTour: '2', activity: '1' }[type.value],
      pageSize: 10,
    }),
  { initialData: { list: [], total: 0 } },
)
const { data: imgData, run: setImgData } = useRequest(
  () =>
    getPhotoList2({
      id: img.value?.id,
      bizType: { studyTour: '2', activity: '1' }[type.value],
	  pageNo:pageNo.value,
      pageSize: 10,
    }),
  { initialData: { list: [], total: 0 } },
)
const previewImg = (i,index) => {
	console.log(data)
	uni.previewImage({
		urls:data.value?.list[i].picture,
		current:index
	})
}
const previewImgNew = (i) => {
	console.log(data)
	uni.previewImage({
		urls:[i]
	})
}
const timeTabChange = async (it,i) =>{
	more.value = false;
	pageNo.value = 1;
	img.value = it
	imgTabIndex.value = i;
	let imgInfo = await setImgData()
	console.log(imgInfo)
	imgList.value = imgInfo.list
	if(imgList.value.length >= imgInfo.total){
		more.value = true
	}
}

onReachBottom(async ()=>{
	if(!more.value){
		pageNo.value ++ 
		let imgInfo = await setImgData()
		imgList.value = imgList.value.concat(imgInfo.list)
		if(imgList.value.length >= imgInfo.total){
			more.value = true
		}
	}
})
onLoad(async (query: { id: string; type: 'activity' | 'studyTour'; title: string }) => {
  await uni.setNavigationBarTitle({ title: query.title })
  id.value = query.id
  type.value = query.type
  let res = await setData();
  imgTab.value = res.list
  console.log(imgTab.value)
  if(imgTab.value.length > 0){
	  img.value = imgTab.value[0]
	  let imgInfo = await setImgData()
	  console.log(imgInfo)
	  imgList.value = imgInfo.list
	  if(imgList.value.length >= imgInfo.total){
		  more.value = true
	  }
  }
})
</script>
<template>
  <div class="flex flex-col flex-grow p-4 bg-white gap-4">
	<div class="flex items-center overflow-x-scroll">
		<div class="px-[14rpx] py-[8rpx] text-[24rpx] rounded-[10rpx] mr-[20rpx] shrink-0" :class="imgTabIndex===i?'bg-black text-white':'bg-black/10'" v-for="(it, i) in imgTab" :key="i" @click="timeTabChange(it,i)">{{ dayjs(it.travelDate).format('YYYY-MM-DD') || "2022" }}</div>
	</div>  
    <template v-for="(it, i) in imgList" :key="i">
      <!-- <SectionHeading
        :title="'第' + Number(i + 1) + '天 ' + dayjs(img.travelDate).format('YYYY-MM-DD')"
      ></SectionHeading> -->
	  <video v-if="it.type=='1'" class="w-full" :src="it.url"></video>
	  <wd-img v-else width="100%" mode="widthFix" :src="it.url" @click="previewImgNew(it.url)" />
      <!-- <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" @click="previewImg(i,index)" />
      </template> -->
    </template>
  </div>
</template>