cnbugs/uni-halo
1
0
Fork 0
鏡像自 https://github.com/ialley-workshop-open/uni-halo.git 已同步 2026-06-12 13:19:31 +08:00
程式碼 問題 動態

v1.0.0-beta 源码正式开源

瀏覽代碼
此提交包含在：
小莫唐尼
2022-12-06 15:08:29 +08:00
當前提交 636ae7b169
共有 461 個檔案被更改，包括 116817 行新增 和 0 行删除
下載 Patch 檔 下載差異檔 展開所有檔案 折疊所有檔案
pages/tabbar/gallery/gallery.vue
+317
查看文件
@@ -0,0 +1,317 @@
<template>
<view class="app-page" :class="{ 'is-balck grey-darken-6': isBlackTheme }">
<!-- 顶部切换 -->
<view class="e-fixed" v-if="category.list.length > 2">
<tm-tabs color="light-blue" v-model="category.activeIndex" :list="category.list" align="left" @change="fnOnCategoryChange"></tm-tabs>
</view>
<!-- 占位区域 -->
<view style="width: 100vw;height: 90rpx;"></view>
<!-- 加载区域 -->
<view v-if="loading != 'success'" class="loading-wrap">
<tm-skeleton model="card"></tm-skeleton>
<tm-skeleton model="cardActions"></tm-skeleton>
<tm-skeleton model="list"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton>
</view>
<!-- 内容区域 -->
<view class="content" v-else>
<view v-if="dataList.length == 0" class="content-empty">
<!-- 空布局 -->
<tm-empty icon="icon-shiliangzhinengduixiang-" label="该分类下暂无数据"></tm-empty>
</view>
<block v-else>
<tm-flowLayout v-if="globalAppSettings.gallery.useWaterfull" @click="fnOnClick" ref="wafll">
<template v-slot:left="{ hdata }">
<tm-translate animation-name="fadeUp">
<view class="round-3 shadow-2 overflow white">
<tm-images :previmage="true" :src="hdata.item.image"></tm-images>
<view class="pa-10 text-size-s">
<view class="text-overflow-2">
<tm-tags color="bg-gradient-amber-accent" :shadow="0" :dense="true" size="s" model="fill">{{ hdata.item.team }}</tm-tags>
<text class="pl-6">{{ hdata.item.name }}</text>
</view>
<view v-if="hdata.item.description" class="ma-10">{{ hdata.item.description }}</view>
<view v-if="hdata.item.location" class="mt-10 text-grey-lighten-1">
<tm-icons name="icon-position-fill"></tm-icons>
<text class="pl-5">{{ hdata.item.location }}</text>
</view>
<view class="flex-between mt-12 flex-center">
<view>
<text class="text-size-xs text-red ml-5">{{ hdata.item.likes }}</text>
<text class="text-size-xs text-red ml-5">喜欢</text>
</view>
<view class="pl-10 text-size-xs text-grey-lighten-1">{{ hdata.item.takeTime }}</view>
</view>
</view>
</view>
</tm-translate>
</template>
<template v-slot:right="{ hdata }">
<tm-translate animation-name="fadeUp">
<view class="round-3 shadow-2 overflow white">
<tm-images :previmage="true" :src="hdata.item.image"></tm-images>
<view class="pa-10 text-size-s">
<view class="text-overflow-2">
<tm-tags :shadow="0" :dense="true" color="bg-gradient-amber-accent" size="s" model="fill">{{ hdata.item.team }}</tm-tags>
<text class="pl-6">{{ hdata.item.name }}</text>
</view>
<view v-if="hdata.item.description" class="ma-10">{{ hdata.item.description }}</view>
<view v-if="hdata.item.location" class="mt-10 text-grey-lighten-1">
<tm-icons name="icon-position-fill"></tm-icons>
<text class="pl-5">{{ hdata.item.location }}</text>
</view>
<view class="flex-between mt-12 flex-center">
<view>
<text class="text-size-xs text-red ml-5">{{ hdata.item.likes }}</text>
<text class="text-size-xs text-red ml-5">喜欢</text>
</view>
<view class="pl-10 text-size-xs text-grey-lighten-1">{{ hdata.item.takeTime }}</view>
</view>
</view>
</view>
</tm-translate>
</template>
</tm-flowLayout>
<block v-else>
<block v-for="(item, index) in dataList" :key="index">
<tm-translate animation-name="fadeUp" :wait="(index + 1) * 50">
<view class="round-3 shadow-2 overflow white mb-24">
<tm-images :previmage="false" :src="item.image" @click="fnPreview(item, index)"></tm-images>
<view class="pa-24 text-size-m">
<view class="text-overflow-2">
<tm-tags :shadow="0" :dense="true" color="bg-gradient-amber-accent" size="s" model="fill">{{ item.team }}</tm-tags>
<text class="pl-6">{{ item.name }}</text>
</view>
<view v-if="item.description" class="ma-10">{{ item.description }}</view>
<view v-if="item.location" class="mt-10 text-grey-lighten-1">
<tm-icons name="icon-position-fill"></tm-icons>
<text class="pl-5">{{ item.location }}</text>
</view>
<view class="flex-between mt-12 flex-center">
<view>
<text class="text-size-m text-red ml-5">{{ item.likes }}</text>
<text class="text-size-m text-red ml-5">喜欢</text>
</view>
<view class="pl-10 text-size-m text-grey-lighten-1">{{ item.takeTime }}</view>
</view>
</view>
</view>
</tm-translate>
</block>
</block>
<tm-flotbutton @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton>
<view class="load-text">{{ loadMoreText }}</view>
</block>
</view>
</view>
</template>
<script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
import tmFlowLayout from '@/tm-vuetify/components/tm-flowLayout/tm-flowLayout.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
export default {
components: {
tmSkeleton,
tmTranslate,
tmFlotbutton,
tmTags,
tmEmpty,
tmIcons,
tmImages,
tmFlowLayout,
tmTabs
},
data() {
return {
isBlackTheme: false,
loading: 'loading',
category: {
activeIndex: 0,
activeValue: '',
list: []
},
queryParams: {
size: 10,
page: 0,
team: null,
keyword: ''
},
cache: {
dataList: [],
total: 0
},
isLoadMore: false,
loadMoreText: '',
result: {},
dataList: []
};
},
filters: {
filterTakeTime(val) {
return uni.$tm.dayjs(val).format('DD/MM/YYYY');
}
},
watch: {
globalAppSettings: {
deep: true,
handler() {
// this.isLoadMore = false;
// this.queryParams.page = 0;
// this.dataList = [];
// this.cache.list = [];
// this.cache.total = 0;
}
}
},
onLoad() {
this.fnSetPageTitle('个人图库');
this.fnGetCategory();
},
created() {
this.fnGetData();
},
onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 0;
this.fnGetData();
},
onReachBottom(e) {
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnOnCategoryChange(index) {
this.dataList = [];
if (index == 0) {
this.queryParams.team = null;
} else {
this.queryParams.team = this.category.list[index];
}
this.queryParams.page = 0;
this.fnToTopPage();
this.fnGetData();
},
fnGetCategory() {
this.$httpApi.getPhotoTeams().then(res => {
this.category.list = ['全部', ...res.data];
});
},
fnGetData() {
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '';
this.$httpApi
.getPhotoListByPage(this.queryParams)
.then(res => {
this.loading = 'success';
this.result = res.data;
if (res.data.content.length != 0) {
const _list = res.data.content.map((item, index) => {
item['image'] = this.$utils.checkImageUrl(item.thumbnail);
item['model'] = 'text';
item['takeTime'] = this.$tm.dayjs(item['takeTime']).format('DD/MM/YYYY');
return item;
});
this.fnCacheDataList(_list);
if (this.globalAppSettings.gallery.useWaterfull) {
this.dataList = _list;
this.$nextTick(() => {
this.$refs.wafll.pushData(_list);
});
} else {
this.dataList = this.dataList.concat(_list);
}
}
this.loadMoreText = res.data.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
})
.catch(err => {
console.error(err);
this.loading = 'error';
this.waterfall.loading = 'finish';
this.loadMoreText = '加载失败，请下拉刷新！';
})
.finally(() => {
setTimeout(() => {
uni.hideLoading();
uni.stopPullDownRefresh();
}, 500);
});
},
// 缓存数据
fnCacheDataList(dataList) {
if (this.queryParams.page == 0) {
this.cache.dataList = dataList;
} else {
this.cache.dataList = [...this.cache.dataList, ...dataList];
}
},
// 瀑布流组件点击事件
fnOnClick(data) {
console.log('点击数据', data);
},
// 预览
fnPreview(item, index) {
uni.previewImage({
current: index,
urls: this.dataList.map(x => x.image),
indicator: 'number',
loop: true
});
}
}
};
</script>
<style lang="scss">
.app-page {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
padding-bottom: 24rpx;
background-color: #fafafd;
&.is-balck {
background-color: #212121;
}
}
.content {
padding: 0 24rpx;
padding-top: 24rpx;
.content-empty {
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
}
.loading-wrap {
padding: 24rpx;
}
</style>