update: 增加图库可进行配置是否使用瀑布流还是列表、调整文章详情和关于页面图片配置

This commit is contained in:
小莫唐尼 2024-07-04 10:42:32 +08:00
parent c312fab4b1
commit ca723bae80
4 changed files with 66 additions and 69 deletions

View File

@ -8,6 +8,7 @@ export const DefaultAppConfigs = {
authorConfig: {}, authorConfig: {},
appConfig: {}, appConfig: {},
pluginConfig: {}, pluginConfig: {},
pageConfig:{}
} }
/** /**

View File

@ -132,43 +132,36 @@ export default {
haloConfigs() { haloConfigs() {
return this.$tm.vx.getters().getConfigs return this.$tm.vx.getters().getConfigs
}, },
calcDefaultImageConfig() { pageConfig() {
return this.haloConfigs.imagesConfig return this.$tm.vx.getters().getConfigs?.pageConfig?.aboutConfig || {};
}, },
bloggerInfo() { bloggerInfo() {
return this.haloConfigs.authorConfig.blogger; return this.haloConfigs.authorConfig.blogger;
}, },
calcProfileStyle() { calcProfileStyle() {
const _imgUrlOr = this.calcDefaultImageConfig.aboutProfileImageUrl; const _imgUrlOr = this.pageConfig.bgImageUrl;
return { return {
backgroundImage: `url(${this.$utils.checkImageUrl(_imgUrlOr)})` backgroundImage: `url(${this.$utils.checkImageUrl(_imgUrlOr)})`
} }
}, },
calcWaveUrl() { calcWaveUrl() {
return this.$utils.checkImageUrl(this.calcDefaultImageConfig.waveImageUrl); return this.$utils.checkImageUrl(this.pageConfig.waveImageUrl);
}, },
copyrightConfig() { copyrightConfig() {
return this.haloConfigs.basicConfig.copyrightConfig; return this.haloConfigs.basicConfig.copyrightConfig;
} }
}, },
watch: { watch: {
globalAppSettings: {
deep: true,
handler(val) {
this.statisticsShowMore = val.about.showAllCount;
this.fnGetNavList();
}
},
haloConfigs: { haloConfigs: {
handler(val) {
if (!val) return;
this.fnGetNavList();
},
deep: true, deep: true,
immediate: true, immediate: true,
handler(val) {
this.fnGetNavList();
}
} }
}, },
created() { created() {
this.statisticsShowMore = this.globalAppSettings.about.showAllCount;
this.fnGetData(); this.fnGetData();
}, },
onPullDownRefresh() { onPullDownRefresh() {

View File

@ -21,7 +21,9 @@
<tm-empty icon="icon-shiliangzhinengduixiang-" label="博主还没有分享图片~"></tm-empty> <tm-empty icon="icon-shiliangzhinengduixiang-" label="博主还没有分享图片~"></tm-empty>
</view> </view>
<block v-else> <block v-else>
<tm-flowLayout ref="wafll" model="desc" style="width: 100%;"> <block v-if="galleryConfig.useWaterfall">
<!--瀑布流-->
<tm-flowLayout ref="wafll" style="width: 100%;">
<template v-slot:left="{ hdata }"> <template v-slot:left="{ hdata }">
<tm-translate animation-name="fadeUp"> <tm-translate animation-name="fadeUp">
<view class="card round-3 overflow white"> <view class="card round-3 overflow white">
@ -39,17 +41,18 @@
</tm-translate> </tm-translate>
</template> </template>
</tm-flowLayout> </tm-flowLayout>
</block>
<!-- 瀑布流 --> <!-- 列表 -->
<!-- <block v-for="(item, index) in dataList" :key="index"> <block v-else>
<tm-translate style="box-sizing: border-box;padding: 6rpx;width: 50%;height: 250rpx;" <tm-translate v-for="(item, index) in dataList" :key="index"
style="box-sizing: border-box;padding: 6rpx;width: 50%;height: 250rpx;"
animation-name="fadeUp" :wait="calcAniWait(index)"> animation-name="fadeUp" :wait="calcAniWait(index)">
<view style="border-radius: 12rpx;overflow: hidden;width: 100%;height: 250rpx;"> <view style="border-radius: 12rpx;overflow: hidden;width: 100%;height: 250rpx;">
<image style="width: 100%;height: 100%;" mode="aspectFill" :src="item.spec.cover" <image style="width: 100%;height: 100%;" mode="aspectFill" :src="item.spec.cover"
@click="fnPreview(index)"/> @click="fnPreview(item)"/>
</view> </view>
</tm-translate> </tm-translate>
</block> --> </block>
<tm-flotbutton @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton> <tm-flotbutton @click="fnToTopPage" color="light-blue" size="m" icon="icon-angle-up"></tm-flotbutton>
<view class="load-text">{{ loadMoreText }}</view> <view class="load-text">{{ loadMoreText }}</view>
@ -96,25 +99,28 @@ export default {
page: 1, page: 1,
group: "" group: ""
}, },
cache: {
dataList: [],
total: 0
},
isLoadMore: false, isLoadMore: false,
loadMoreText: '', loadMoreText: '',
hasNext: false, hasNext: false,
dataList: [] dataList: []
}; };
}, },
filters: { computed: {
filterTakeTime(val) { galleryConfig() {
return uni.$tm.dayjs(val).format('DD/MM/YYYY'); return this.$tm.vx.getters().getConfigs?.pageConfig?.galleryConfig || {useWaterfall: true, pageTitle: "图库"};
} }
}, },
onLoad() { watch: {
this.fnSetPageTitle('个人图库'); galleryConfig: {
handler(newValue, oldValue) {
if (!newValue) return;
this.fnSetPageTitle(newValue.pageTitle);
this.fnGetCategory(); this.fnGetCategory();
}, },
deep: true,
immediate: true
}
},
onPullDownRefresh() { onPullDownRefresh() {
this.dataList = [] this.dataList = []
this.isLoadMore = false; this.isLoadMore = false;
@ -136,15 +142,19 @@ export default {
methods: { methods: {
fnOnCategoryChange(index) { fnOnCategoryChange(index) {
this.fnResetSetAniWaitIndex(); this.fnResetSetAniWaitIndex();
this.cache.dataList = []
this.dataList = [];
this.queryParams.group = this.category.list[index].name; this.queryParams.group = this.category.list[index].name;
this.queryParams.page = 1; this.queryParams.page = 1;
this.fnToTopPage(); this.fnToTopPage();
if (this.galleryConfig.useWaterfall) {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.wafll.clear(); this.$refs.wafll.clear();
this.dataList = [];
this.fnGetData(); this.fnGetData();
}) })
} else {
this.dataList = [];
this.fnGetData();
}
}, },
fnGetCategory() { fnGetCategory() {
this.$httpApi.v2.getPhotoGroupList({ this.$httpApi.v2.getPhotoGroupList({
@ -179,23 +189,23 @@ export default {
item.spec.cover = this.$utils.checkImageUrl(item.spec.cover); item.spec.cover = this.$utils.checkImageUrl(item.spec.cover);
return item; return item;
}); });
this.fnCacheDataList(_list);
if (this.isLoadMore) { if (this.isLoadMore) {
this.dataList = this.dataList.concat(_list); this.dataList = this.dataList.concat(_list);
} else { } else {
this.dataList = _list; this.dataList = _list;
} }
if (this.galleryConfig.useWaterfall) {
this.$nextTick(() => { this.$nextTick(() => {
console.log('_list', _list)
this.$refs.wafll.pushData(_list) this.$refs.wafll.pushData(_list)
}) })
} }
}
this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~'; this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~';
}) })
.catch(err => { .catch(err => {
console.error(err); console.error(err);
this.loading = 'error'; this.loading = 'error';
this.waterfall.loading = 'finish';
this.loadMoreText = '加载失败,请下拉刷新!'; this.loadMoreText = '加载失败,请下拉刷新!';
}) })
.finally(() => { .finally(() => {
@ -205,14 +215,7 @@ export default {
}, 500); }, 500);
}); });
}, },
//
fnCacheDataList(dataList) {
if (this.queryParams.page == 1) {
this.cache.dataList = dataList;
} else {
this.cache.dataList = [...this.cache.dataList, ...dataList];
}
},
// //
fnPreview(data) { fnPreview(data) {
uni.previewImage({ uni.previewImage({

View File

@ -633,7 +633,7 @@ export default {
// //
await this.$refs.rCanvas await this.$refs.rCanvas
.drawImage({ .drawImage({
url: this.$utils.checkImageUrl(this.haloConfig.imagesConfig.miniCodeImageUrl), url: this.$utils.checkImageUrl(this.haloConfigs?.appConfig?.appInfo?.qrCodeImageUrl),
x: 20, x: 20,
y: 360, y: 360,
w: 80, w: 80,