<template>
|
<view :class="['app', theme]">
|
<up-sticky bgColor="#ffffff">
|
<view class="header">
|
<up-icon name="list" size="40rpx" color="#333333" @click="onSettingClick" />
|
<view>
|
<!-- <up-tabs :list="list1"> -->
|
<up-tabs :list="userTabList">
|
<!-- <template #left>
|
<up-icon name="list" size="40rpx" color="#333333" />
|
</template> -->
|
<!-- <template #right>
|
<up-icon name="search" size="48rpx" color="#333333" />
|
</template> -->
|
</up-tabs>
|
</view>
|
<up-icon name="search" size="48rpx" color="#333333" @click="toSearchPage()" />
|
</view>
|
</up-sticky>
|
|
<view style="margin: 10px 10px 10px 10px; ">
|
<up-tabs :list="tabList" :itemStyle="{ padding: '0 16rpx', textAlign: 'center', flex: '1' }">
|
<template #right>
|
<up-icon name="arrow-down" size="15" color="#333333" />
|
</template>
|
</up-tabs>
|
</view>
|
<view class="content-area">
|
<up-waterfall v-model="flowList">
|
<template #left="{ leftList }">
|
<FlowCard v-for="(item, index) in leftList" :key="index" :item="item" @click="handleDetailClick" />
|
</template>
|
|
<template #right="{ rightList }">
|
<FlowCard v-for="(item, index) in rightList" :key="index" :item="item" @click="handleDetailClick" />
|
</template>
|
</up-waterfall>
|
</view>
|
<!-- <view v-for="(item, index) in 100">safsafda</view> -->
|
<common-footer flg="0"></common-footer>
|
<setting-popup v-model="settingShow" />
|
</view>
|
</template>
|
<script setup lang="ts">
|
import SettingPopup from '@/components/setting/setting-popup.vue';
|
import { reactive, ref, onMounted } from 'vue';
|
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 { getTabList } from '@/sub-pages/utils/api'
|
// 控制设置弹窗显示
|
const settingShow = ref(false);
|
// 方法定义
|
function onSettingClick() {
|
settingShow.value = true;
|
}
|
|
// 创建响应式数据
|
// const list1 = reactive([
|
// { name: '关注' },
|
// { name: '发现' },
|
// { name: '苏州' },
|
// ]);
|
const userTabList = ref<FilmCategoryTree[]>([])
|
const tabList = ref<FilmCategoryTree[]>([])
|
|
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 toSearchPage = () => {
|
uni.navigateTo({
|
url: '/sub-pages/community/search-page'
|
})
|
}
|
|
const theme = ref('light')
|
onLoad(() => {
|
const storedTheme = uni.getStorageSync('theme') || 'light'
|
theme.value = storedTheme
|
})
|
|
|
onShow(() => {
|
getTabList(FilmTabCategory.USER_TYPE,userTabList,false)
|
getTabList(FilmTabCategory.FILM_TYPE, tabList)
|
});
|
|
</script>
|
<style lang="scss" scoped>
|
.header {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.content-area {
|
// padding: 20rpx;
|
}
|
</style>
|
