mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2025-05-24 04:20:15 +09:00
329 lines
9.9 KiB
Vue
329 lines
9.9 KiB
Vue
<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 :class="{ 'bg-white': dataList.length !== 0 }">
|
|
<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="false" :src="hdata.item.image" @click="fnPreview(hdata.item)"></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="false" :src="hdata.item.image" @click="fnPreview(hdata.item)"></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 => {
|
|
if (res.status == 200) {
|
|
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 ? '上拉加载更多' : '呜呜，没有更多数据啦~';
|
|
} else {
|
|
this.loading = 'error';
|
|
this.waterfall.loading = 'finish';
|
|
this.loadMoreText = '';
|
|
}
|
|
})
|
|
.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) {
|
|
if (!index) {
|
|
index = this.dataList.findIndex(x => x.id == item.id);
|
|
}
|
|
uni.previewImage({
|
|
current: index,
|
|
urls: this.dataList.map(x => x.image),
|
|
indicator: 'number',
|
|
loop: true
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-page {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: 24rpx;
|
|
background-color: #fafafd;
|
|
|
|
&.is-balck {
|
|
background-color: #212121;
|
|
}
|
|
}
|
|
.content {
|
|
box-sizing: border-box;
|
|
padding: 0 24rpx;
|
|
padding-top: 24rpx;
|
|
|
|
.content-empty {
|
|
height: 60vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.loading-wrap {
|
|
box-sizing: border-box;
|
|
padding: 24rpx;
|
|
}
|
|
</style>
|