user edit

tj

2025-06-05 859352ee2e233e8ae80277539af62d982a317c6a

 sub-pages/community/index.vue

@@ -4,7 +4,8 @@
      <view class="header">
        <up-icon name="list" size="40rpx" color="#333333" @click="onSettingClick" />
        <view>
          <up-tabs :list="list1">
          <!-- <up-tabs :list="list1"> -->
          <up-tabs v-model:current="parentTabIndex" :list="userTabList" @click="onChangeTab">
            <!-- <template #left>
            <up-icon name="list" size="40rpx" color="#333333" />
          </template> -->
@@ -25,7 +26,7 @@
      </up-tabs>
    </view>
    <view class="content-area">
      <up-waterfall v-model="flowList">
      <up-waterfall v-model="films">
        <template #left="{ leftList }">
          <FlowCard v-for="(item, index) in leftList" :key="index" :item="item" @click="handleDetailClick" />
        </template>
@@ -34,8 +35,9 @@
          <FlowCard v-for="(item, index) in rightList" :key="index" :item="item" @click="handleDetailClick" />
        </template>
      </up-waterfall>
      <up-loadmore :status="filmStatus" :line="true" />
    </view>
    <!-- <view v-for="(item, index) in 100">safsafda</view> -->
    <view style="height: 50px; width: 100%;"></view>
    <common-footer flg="0"></common-footer>
    <setting-popup v-model="settingShow" />
  </view>
@@ -43,7 +45,16 @@
<script setup lang="ts">
import SettingPopup from '@/components/setting/setting-popup.vue';
import { reactive, ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { FilmCategoryTree, FilmWorks } from '@/types/index'
import { onLoad, onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { FilmTabCategory, FilmWorksCategory } from '@/enums/dict'
import { useGlobal } from '@/composables/useGlobal'
const { $http, $message, $store } = useGlobal()
import { getParentTabList, getTabList, getFilmWorksBase } from '@/sub-pages/utils/api'
import { FilmWorksQueryDTO } from '@/types/index'

import { useNavigator } from '@/composables/useNavigator'
const { navigateTo } = useNavigator()

// 控制设置弹窗显示
const settingShow = ref(false);
@@ -53,69 +64,28 @@
}

// 创建响应式数据  
const list1 = reactive([
  { name: '关注' },
  { name: '发现' },
  { name: '苏州' },
]);
// const list1 = reactive([
//   { name: '关注' },
//   { name: '发现' },
//   { name: '苏州' },
// ]);
const parentTabIndex = ref<number>(0)
const userTabList = ref<FilmCategoryTree[]>([])
const tabList = ref<FilmCategoryTree[]>([])

const tabList = ref([
  { id: 'recommend', name: '推荐' },
  { id: 'straight', name: '直播' },
  { id: 'short', name: '短剧' },
  { id: 'food', name: '美食' },
  { id: 'travel', name: '穿搭' },
  { id: 'beauty', name: '美甲' },
  { id: 'more', name: '更多' },
])

const flowList = ref([
  {
    id: 1,
    title: 'iPhone 高清全屏壁纸，划走就后悔',
    imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
    username: '草莓喵喵',
    avatar: '/static/avatar1.jpg',
    likes: 1397
  },
  {
    id: 2,
    title: '高清 4K 全屏手机壁纸 #高质量壁纸',
    imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
    username: '4K wallpaper',
    avatar: '/static/avatar2.jpg',
    likes: 167
  },
  {
    id: 3,
    title: 'iPhone 实况动态壁纸 #动态壁纸',
    imgurl: 'https://img.yzcdn.cn/vant/cat.jpeg',
    username: '图墙精选',
    avatar: '/static/avatar3.jpg',
    likes: 980
  },
  {
    id: 4,
    title: '高清小清新壁纸 浪漫的人都有自己的海',
    imgurl: 'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
    username: 'wallpaper',
    avatar: '/static/avatar4.jpg',
    likes: 456
  }
])

const handleDetailClick = (item: Item) => {
  const url =
    item.id === 1
      ? `/sub-pages/film-list/film-official-detail?id=${item.id}`
      : `/sub-pages/film-list/film-detail?id=${item.id}`
  uni.navigateTo({ url })
const handleDetailClick = (item: FilmCategoryTree) => {
  const urlOfficicl = `/sub-pages/film-list/film-official-detail?id=${item.id}`;
  const url = `/sub-pages/film-list/film-detail?id=${item.id}`
  navigateTo(url)
}

const toSearchPage = () => {
  uni.navigateTo({
    url: '/sub-pages/community/search-page'
  })
  const url = `/sub-pages/community/search-page`
  navigateTo(url)
}

const onChangeTab = (item: FilmCategoryTree) => {
  getTabList(item.id, tabList)
}

const theme = ref('light')
@@ -123,6 +93,68 @@
  const storedTheme = uni.getStorageSync('theme') || 'light'
  theme.value = storedTheme
})


onShow(() => {
  getDefaultTabList()
  // 获取电影
  getfilms()
});

onPullDownRefresh(async () => {
  console.log('用户下拉刷新了')
  filmPage.value = 1
  getfilms()
  uni.stopPullDownRefresh() // 停止下拉刷新动画
})

onReachBottom(() => {
  console.log('用户触底了')
  getfilms()
})

const getDefaultTabList = async () => {
  await getParentTabList(userTabList, false)
  const curItem = userTabList.value[parentTabIndex.value]
  getTabList(curItem.id, tabList)
}

const films = ref<FilmWorks[]>([])
const filmPage = ref(1)
const filmSize = 10
const filmStatus = ref('loading')

const getfilms = async () => {
  if (filmStatus.value === 'nomore') return

  filmStatus.value = 'loading'

  // TODO 暂时使用光影社区的类别
  const query: FilmWorksQueryDTO = {
    classify: '',
    type: '',
    current: filmPage.value,
    size: filmSize,
  };
  const records = await getFilmWorksBase(query)

  if (records && records.length > 0) {
    // 使用 Set 进行去重
    const existingIds = new Set(films.value.map(item => item.id))
    const uniqueRecords = records.filter(item => !existingIds.has(item.id))

    films.value = [...films.value, ...uniqueRecords]

    // 如果返回的记录数少于请求的 size，说明没有更多数据
    if (records.length < filmSize) {
      filmStatus.value = 'noMore'
    }

    filmPage.value++
  } else {
    filmStatus.value = 'noMore'
  }
}

</script>
<style lang="scss" scoped>
@@ -133,5 +165,6 @@

.content-area {
  // padding: 20rpx;
  margin-bottom: 100px;
}
</style>