1
0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-07-27 04:20:43 +08:00

16 Commits

Author SHA1 Message Date
小莫唐尼 7c15c84dba update: 调整获取模拟参数请求策略 2024-10-28 18:38:29 +08:00
小莫唐尼 e8edc03526 update: 修改我的页面文章归档的显示策略 2024-10-28 18:28:56 +08:00
小莫唐尼 2b717ad449 update: 修改模拟数据请求地址为动态配置 2024-10-28 18:25:40 +08:00
小莫唐尼 5efc877a89 feat: 添加模拟数据模板 2024-10-28 18:00:19 +08:00
小莫唐尼 75a133415a fix: 修复README内容链接丢失 2024-10-28 17:57:37 +08:00
小莫唐尼 bf41b08b35 update: 优化审核模式,新增审核使用模拟数据 2024-10-28 17:53:43 +08:00
小莫唐尼 74a5efb596 Merge branch 'main' of https://github.com/ialley-workshop-open/uni-halo 2024-10-22 18:26:29 +08:00
小莫唐尼 40dd4f4b7f update: 调整审核模式隐藏部分内容,修复分类显示控制不生效 2024-10-22 18:19:23 +08:00
小莫唐尼 341670adcf fix: 修复恋爱日记图标丢失问题 2024-10-22 18:06:34 +08:00
小莫唐尼 115aea2580 fix: 修复文章分享功能 2024-10-22 17:03:06 +08:00
小莫唐尼 58f1e7f131 fix: 修复文章分享功能 2024-10-22 16:30:30 +08:00
小莫唐尼 26ce84b950 fix: 修复瞬间视频不显示bug 2024-10-17 18:49:28 +08:00
小莫唐尼 32b3bbaa74 fix: 修复文章归档 2024-10-17 18:07:15 +08:00
小莫唐尼 76c00f31f6 update: 恋爱配置导航内图标支持后台配置 2024-10-17 17:29:15 +08:00
小莫唐尼 e28ea6ca08 fix: 修复文章归档功能 2024-10-17 17:19:39 +08:00
小莫唐尼 a98254e6cc fix: 修复编译到app时,启动页按钮样式丢失问题 2024-10-17 11:28:13 +08:00
14 changed files with 2681 additions and 1977 deletions
+2 -2
View File
@@ -1,6 +1,6 @@
<p align="center"> <p align="center">
<a href="https://uni-halo.925i.cn" target="_blank" rel="noopener noreferrer"> <a href="https://uni-halo.925i.cn" target="_blank" rel="noopener noreferrer">
<img width="100" src="https://b.925i.cn/uni_halo/uni_halo_logo.png" alt="uni-halo logo" /> <img width="100" src="https://uni-halo.925i.cn/logo.png" alt="uni-halo logo" />
</a> </a>
</p> </p>
@@ -22,7 +22,7 @@
| 支付宝 | 微信 | QQ | | 支付宝 | 微信 | QQ |
|:----------------------------------------------:|:---------------------------------------------:|:---------------------------------------------:| |:----------------------------------------------:|:---------------------------------------------:|:---------------------------------------------:|
| ![支付宝赞赏](https://b.925i.cn/skm/zf_zfb_skm.png) | ![微信赞赏](https://b.925i.cn/skm/zf_wx_zsm.png) | ![QQ赞赏](https://b.925i.cn/skm/zf_qq_skm.png) | | ![支付宝赞赏](https://blog.925i.cn/upload/zf_zfb_skm.png) | ![微信赞赏](https://blog.925i.cn/upload/zf_wx_zsm.png) | ![QQ赞赏](https://blog.925i.cn/upload/zf_qq_skm.png) |
## 一、项目介绍 ## 一、项目介绍
+31 -11
View File
@@ -1,30 +1,50 @@
// 应用设置存储key值 // 应用设置存储key值
export const _AppConfigKey = 'APP_GLOBAL_CONFIGS'; export const _AppConfigKey = 'APP_GLOBAL_CONFIGS';
export const _AppMockJsonKey = 'APP_GLOBAL_MOCK_JSON';
// 默认的应用设置 // 默认的应用设置
export const DefaultAppConfigs = { export const DefaultAppConfigs = {
loveConfig: {}, loveConfig: {},
imagesConfig: {}, imagesConfig: {},
authorConfig: {}, authorConfig: {},
appConfig: {}, appConfig: {},
pluginConfig: {}, pluginConfig: {},
pageConfig:{} pageConfig: {}
} }
/** /**
* 获取应用设置 * 获取应用设置
*/ */
export const getAppConfigs = () => { export const getAppConfigs = () => {
let configs = uni.getStorageSync(_AppConfigKey) let configs = uni.getStorageSync(_AppConfigKey)
if (configs) return JSON.parse(configs) if (configs) return JSON.parse(configs)
uni.setStorageSync(_AppConfigKey, JSON.stringify(DefaultAppConfigs)) uni.setStorageSync(_AppConfigKey, JSON.stringify(DefaultAppConfigs))
return DefaultAppConfigs; return DefaultAppConfigs;
} }
/** /**
* 保存应用设置 * 保存应用设置
*/ */
export const setAppConfigs = (configs) => { export const setAppConfigs = (configs) => {
uni.setStorageSync(_AppConfigKey, JSON.stringify(configs)) uni.setStorageSync(_AppConfigKey, JSON.stringify(configs))
}
/**
* 获取应用模拟数据
*/
export const getAppMockJson = () => {
let json = uni.getStorageSync(_AppMockJsonKey)
if (json) return JSON.parse(json)
uni.setStorageSync(_AppMockJsonKey, JSON.stringify({}))
return {};
}
/**
* 保存应用模拟数据
*/
export const setAppMockJson = (json) => {
uni.setStorageSync(_AppMockJsonKey, JSON.stringify(json))
} }
+177
View File
@@ -0,0 +1,177 @@
{
"home": {
"bannerList": [
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
}
],
"categoryList": [
{
"title": "uni-halo",
"desc": "",
"cover": "/upload/uni_halo_ad_cover.png",
"time": ""
},
{
"title": "uni-halo",
"desc": "",
"cover": "/upload/uni_halo_ad_cover.png",
"time": ""
},
{
"title": "uni-halo",
"desc": "",
"cover": "/upload/uni_halo_ad_cover.png",
"time": ""
},
{
"title": "uni-halo",
"desc": "",
"cover": "/upload/uni_halo_ad_cover.png",
"time": ""
}
],
"postList": [
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
}
]
},
"category": {
"list": [
{
"title": "uni-halo",
"desc": "",
"cover": "/upload/uni_halo_ad_cover.png",
"time": ""
},
{
"title": "uni-halo",
"desc": "",
"cover": "/upload/uni_halo_ad_cover.png",
"time": ""
},
{
"title": "uni-halo",
"desc": "",
"cover": "/upload/uni_halo_ad_cover.png",
"time": ""
},
{
"title": "uni-halo",
"desc": "",
"cover": "/upload/uni_halo_ad_cover.png",
"time": ""
}
]
},
"moments": {
"list": [
{
"content": "你好啊,这是我的一条生活记录",
"time": "2024-05-25 08:59:00",
"images": [
"/upload/uni_halo_ad_cover.png",
"/upload/uni_halo_ad_cover.png",
"/upload/uni_halo_ad_cover.png"
]
}
]
},
"gallery": {
"list": [
"/upload/uni_halo_ad_cover.png",
"/upload/uni_halo_ad_cover.png",
"/upload/uni_halo_ad_cover.png",
"/upload/uni_halo_ad_cover.png"
]
},
"archives": {
"list": [
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
},
{
"title": "uni-halo2.0)开源啦!!!",
"desc": "uni-halo 2.0 已独立兼容 Halo2.x 应用,欢迎小伙伴们体验。",
"cover": "/upload/uni_halo_ad_cover.png",
"time": "2024-05-25 08:59:00"
}
]
}
}
+36 -29
View File
@@ -12,30 +12,37 @@ export default {
return this.$tm.vx.getters().getConfigs; return this.$tm.vx.getters().getConfigs;
} }
}, },
onLoad: function (options) { onLoad: function (options) {
uni.$tm.vx.actions('config/fetchConfigs').then(async (res) => { uni.$tm.vx.actions('config/fetchConfigs').then(async (res) => {
if (options.scene) { if (options.scene) {
if ('' !== options.scene) { if ('' !== options.scene) {
const postId = await this.getPostIdByQRCode(options.scene); const postId = await this.getPostIdByQRCode(options.scene);
if (postId) { if (postId) {
uni.redirectTo({ uni.redirectTo({
url: articleDetailPath + `?name=${postId}`, url: articleDetailPath + `?name=${postId}`,
animationType: 'slide-in-right' animationType: 'slide-in-right'
}); });
} }
} }
} }
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// uni.$tm.vx.commit('setWxShare', res.shareConfig); // uni.$tm.vx.commit('setWxShare', res.shareConfig);
// #endif // #endif
this.fnCheckShowStarted();
}).catch((err) => { // 获取mockjson
uni.switchTab({ if (res.basicConfig.auditModeEnabled) {
url: homePagePath await uni.$tm.vx.actions('config/fetchMockJson')
}); }
})
}, // 进入检查
this.fnCheckShowStarted();
}).catch((err) => {
uni.switchTab({
url: homePagePath
});
})
},
methods: { methods: {
fnCheckShowStarted() { fnCheckShowStarted() {
if (!this.configs.appConfig.startConfig.enabled) { if (!this.configs.appConfig.startConfig.enabled) {
@@ -66,13 +73,13 @@ export default {
} }
}, },
async getPostIdByQRCode(key) { async getPostIdByQRCode(key) {
const response = await this.$httpApi.v2.getQRCodeInfo(key); const response = await this.$httpApi.v2.getQRCodeInfo(key);
if (response) { if (response) {
if(response && response.postId) { if (response && response.postId) {
return response.postId; return response.postId;
}
} }
} return null;
return null;
} }
} }
}; };
+33 -53
View File
@@ -177,37 +177,38 @@ export default {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
_isWx = true; _isWx = true;
// #endif // #endif
this.navList = [{ this.navList = [
key: 'archives', {
title: '文章归档', key: 'archives',
leftIcon: 'halocoloricon-classify', title: this.haloConfigs.basicConfig.auditModeEnabled ? '内容归档' : '文章归档',
leftIconColor: 'red', leftIcon: 'halocoloricon-classify',
rightText: '已归档的文章', leftIconColor: 'red',
path: '/pagesA/archives/archives', rightText: this.haloConfigs.basicConfig.auditModeEnabled ? '已归档的内容' : '已归档的文章',
isAdmin: false, path: '/pagesA/archives/archives',
type: 'page', isAdmin: false,
show: false type: 'page',
}, { show: true
key: 'love', }, {
title: '恋爱日记', key: 'love',
leftIcon: 'halocoloricon-attent', title: '恋爱日记',
leftIconColor: 'red', leftIcon: 'halocoloricon-attent',
rightText: '甜蜜恋人的专属', leftIconColor: 'red',
path: '/pagesA/love/love', rightText: '甜蜜恋人的专属',
isAdmin: false, path: '/pagesA/love/love',
type: 'page', isAdmin: false,
show: this.haloConfigs.loveConfig.loveEnabled type: 'page',
}, { show: this.haloConfigs.loveConfig.loveEnabled
key: 'disclaimers', }, {
title: '友情链接', key: 'disclaimers',
leftIcon: 'icon-lianjie', title: '友情链接',
leftIconColor: 'blue', leftIcon: 'icon-lianjie',
rightText: '看看朋友们吧', leftIconColor: 'blue',
path: '/pagesA/friend-links/friend-links', rightText: '看看朋友们吧',
isAdmin: false, path: '/pagesA/friend-links/friend-links',
type: 'page', isAdmin: false,
show: true type: 'page',
}, show: true
},
{ {
key: 'disclaimers', key: 'disclaimers',
title: '免责声明', title: '免责声明',
@@ -287,28 +288,7 @@ export default {
// type: 'poup', // type: 'poup',
// show: true // show: true
// }, // },
// {
// key: 'setting',
// title: '应用设置',
// leftIcon: 'icon-cog',
// leftIconColor: 'indigo',
// rightText: `进入系统常用设置`,
// path: '/pagesA/setting/setting',
// isAdmin: false,
// type: 'page',
// show: false
// },
// {
// key: 'admin',
// title: '后台管理',
// leftIcon: 'icon-lock',
// leftIconColor: 'gray',
// rightText: '博客后台系统入口',
// path: '/pagesB/admin/admin',
// isAdmin: true,
// type: 'page',
// show: false
// }
]; ];
}, },
fnGetData() { fnGetData() {
+238 -194
View File
@@ -1,214 +1,258 @@
<template> <template>
<view class="app-page"> <view class="app-page">
<view v-if="loading != 'success'" class="loading-wrap">
<tm-skeleton model="listAvatr"></tm-skeleton> <view v-if="loading !== 'success'" class="loading-wrap">
<tm-skeleton model="listAvatr"></tm-skeleton> <tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton> <tm-skeleton model="listAvatr"></tm-skeleton>
</view> <tm-skeleton model="listAvatr"></tm-skeleton>
<!-- 内容区域 --> </view>
<view v-else class="app-page-content"> <!-- 内容区域 -->
<view v-if="dataList.length == 0" class="content-empty flex flex-center" style="height: 70vh;"> <view v-else class="app-page-content">
<!-- 空布局 --> <view v-if="dataList.length === 0" class="content-empty flex flex-center" style="height: 70vh;">
<tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无数据"></tm-empty> <!-- 空布局 -->
</view> <tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无数据"></tm-empty>
<block v-else> </view>
<tm-translate v-for="(item, index) in dataList" :key="index" <block v-else>
style="box-sizing: border-box;width: 50%;padding: 0 8rpx;" animation-name="fadeUp" <tm-translate v-for="(item, index) in dataList" :key="index"
:wait="calcAniWait(index)"> style="box-sizing: border-box;width: 50%;padding: 0 8rpx;" animation-name="fadeUp"
<view class="catgory-card" :style="{backgroundImage:`url(${item.spec.cover})`}"> :wait="calcAniWait(index)">
<view class="content" @click="handleToCategory(item)"> <view class="catgory-card" :style="{backgroundImage:`url(${item.spec.cover})`}">
<view style="font-size: 32rpx;color: #ffffff;">{{ item.spec.displayName }}</view> <view class="content" @click="handleToCategory(item)">
<view style="font-size: 24rpx;color: #ffffff;margin-top: 6rpx;"> <view style="font-size: 32rpx;color: #ffffff;">{{ item.spec.displayName }}</view>
{{ item.postCount }} 篇文章 <view v-if="!haloConfigs.basicConfig.auditModeEnabled" style="font-size: 24rpx;color: #ffffff;margin-top: 6rpx;">
</view> {{ item.postCount }} 篇文章
</view> </view>
</view> <view v-else style="font-size: 24rpx;color: #ffffff;margin-top: 6rpx;">
</tm-translate> {{ item.postCount }} 篇内容
<tm-flotbutton @click="fnToTopPage" size="m" color="light-blue" icon="icon-angle-up"></tm-flotbutton> </view>
<view class="load-text">{{ loadMoreText }}</view> </view>
</block> </view>
</view> </tm-translate>
</view> <tm-flotbutton @click="fnToTopPage" size="m" color="light-blue"
icon="icon-angle-up"></tm-flotbutton>
<view class="load-text">{{ loadMoreText }}</view>
</block>
</view>
</view>
</template> </template>
<script> <script>
import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue'; import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue'; import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue'; import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue'; import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import MarkdownConfig from '@/common/markdown/markdown.config.js'; import MarkdownConfig from '@/common/markdown/markdown.config.js';
import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue'; import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
export default { export default {
components: { components: {
tmSkeleton, tmSkeleton,
tmFlotbutton, tmFlotbutton,
tmTranslate, tmTranslate,
tmEmpty, tmEmpty,
mpHtml mpHtml
},
data() {
return {
markdownConfig: MarkdownConfig,
loading: 'loading',
queryParams: {
size: 20,
page: 1
},
hasNext: false,
dataList: [],
isLoadMore: false,
loadMoreText: '加载中...'
};
},
computed: {
haloConfigs() {
return this.$tm.vx.getters().getConfigs;
},
}, },
onLoad() { data() {
this.fnGetData(); return {
}, markdownConfig: MarkdownConfig,
onPullDownRefresh() { loading: 'loading',
this.isLoadMore = false; queryParams: {
this.queryParams.page = 0; size: 20,
this.fnGetData(); page: 1
}, },
hasNext: false,
onReachBottom(e) { dataList: [],
if (this.hasNext) { isLoadMore: false,
this.queryParams.page += 1; loadMoreText: '加载中...'
this.isLoadMore = true; };
this.fnGetData(); },
} else { computed: {
uni.showToast({ haloConfigs() {
icon: 'none', return this.$tm.vx.getters().getConfigs;
title: '没有更多数据了' },
}); mockJson() {
} return this.$tm.vx.getters().getMockJson;
},
methods: {
fnGetData() {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
return;
} }
uni.showLoading({ },
mask: true, onLoad() {
title: '加载中...' this.fnGetData();
}); },
// 设置状态为加载中 onPullDownRefresh() {
if (!this.isLoadMore) { this.isLoadMore = false;
this.loading = 'loading'; this.queryParams.page = 0;
} this.fnGetData();
this.loadMoreText = '加载中...'; },
this.$httpApi.v2
.getCategoryList(this.queryParams)
.then(res => {
console.log('请求结果:');
console.log(res);
this.loading = 'success'; onReachBottom(e) {
this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~'; if (this.haloConfigs.basicConfig.auditModeEnabled) {
// 处理数据 uni.showToast({
this.hasNext = res.hasNext; icon: 'none',
title: '没有更多数据了'
});
return
}
if (this.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: {
fnGetData() {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
this.dataList = this.mockJson.category.list.map((item) => {
return {
metadata: {
name: Date.now() * Math.random(),
},
spec: {
displayName: item.title,
cover: this.$utils.checkImageUrl(item.cover)
},
postCount: 0
}
});
this.loading = 'success';
this.loadMoreText = '呜呜,没有更多数据啦~';
uni.hideLoading();
uni.stopPullDownRefresh();
return;
}
uni.showLoading({
mask: true,
title: '加载中...'
});
// 设置状态为加载中
if (!this.isLoadMore) {
this.loading = 'loading';
}
this.loadMoreText = '加载中...';
this.$httpApi.v2
.getCategoryList(this.queryParams)
.then(res => {
console.log('请求结果:');
console.log(res);
const tempItems = res.items.map(item => { this.loading = 'success';
item.spec.cover = this.$utils.checkThumbnailUrl(item.spec.cover, true) this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~';
return item; // 处理数据
}) this.hasNext = res.hasNext;
if (this.isLoadMore) { const tempItems = res.items.map(item => {
this.dataList = this.dataList.concat(tempItems); item.spec.cover = this.$utils.checkThumbnailUrl(item.spec.cover, true)
} else { return item;
this.dataList = tempItems; })
}
}) if (this.isLoadMore) {
.catch(err => { this.dataList = this.dataList.concat(tempItems);
console.error(err); } else {
this.loading = 'error'; this.dataList = tempItems;
this.loadMoreText = '加载失败,请下拉刷新!'; }
}) })
.finally(() => { .catch(err => {
setTimeout(() => { console.error(err);
uni.hideLoading(); this.loading = 'error';
uni.stopPullDownRefresh(); this.loadMoreText = '加载失败,请下拉刷新!';
}, 500); })
}); .finally(() => {
}, setTimeout(() => {
handlePreview(index, list) { uni.hideLoading();
uni.previewImage({ uni.stopPullDownRefresh();
current: index, }, 500);
urls: list.map(item => item.url) });
}) },
}, handlePreview(index, list) {
handleToCategory(data) { uni.previewImage({
uni.navigateTo({ current: index,
url: `/pagesA/category-detail/category-detail?name=${data.metadata.name}&title=${data.spec.displayName}` urls: list.map(item => item.url)
}) })
} },
} handleToCategory(data) {
}; if (this.haloConfigs.basicConfig.auditModeEnabled) {
return;
}
uni.navigateTo({
url: `/pagesA/category-detail/category-detail?name=${data.metadata.name}&title=${data.spec.displayName}`
})
}
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-page { .app-page {
width: 100vw; width: 100vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 24rpx 0; padding: 24rpx 0;
} }
.loading-wrap { .auditModeEnabled {
padding: 24rpx; width: 100%;
} height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.app-page-content { .loading-wrap {
display: flex; padding: 24rpx;
flex-wrap: wrap; }
padding: 0 12rpx;
gap: 20rpx 0;
}
.catgory-card { .app-page-content {
width: 100%; display: flex;
height: 200rpx; flex-wrap: wrap;
position: relative; padding: 0 12rpx;
display: flex; gap: 20rpx 0;
flex-direction: column; }
box-sizing: border-box;
border-radius: 12rpx;
background-color: #ffff;
box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
&:before { .catgory-card {
content: ''; width: 100%;
position: absolute; height: 200rpx;
left: 0; position: relative;
top: 0; display: flex;
right: 0; flex-direction: column;
bottom: 0; box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.15); border-radius: 12rpx;
z-index: 1; background-color: #ffff;
} box-shadow: 0rpx 2rpx 24rpx rgba(0, 0, 0, 0.03);
} overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
.content { &:before {
width: 100%; content: '';
height: 100%; position: absolute;
position: relative; left: 0;
z-index: 2; top: 0;
display: flex; right: 0;
flex-direction: column; bottom: 0;
align-items: center; background-color: rgba(0, 0, 0, 0.15);
justify-content: center; z-index: 1;
} }
}
.load-text { .content {
width: 100%; width: 100%;
text-align: center; height: 100%;
} position: relative;
</style> z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.load-text {
width: 100%;
text-align: center;
}
</style>
+53 -6
View File
@@ -94,6 +94,12 @@ export default {
computed: { computed: {
galleryConfig() { galleryConfig() {
return this.$tm.vx.getters().getConfigs.pageConfig.galleryConfig; return this.$tm.vx.getters().getConfigs.pageConfig.galleryConfig;
},
haloConfigs() {
return this.$tm.vx.getters().getConfigs;
},
mockJson() {
return this.$tm.vx.getters().getMockJson;
} }
}, },
watch: { watch: {
@@ -114,6 +120,13 @@ export default {
this.fnGetData(true); this.fnGetData(true);
}, },
onReachBottom(e) { onReachBottom(e) {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
return;
}
if (this.hasNext) { if (this.hasNext) {
this.queryParams.page += 1; this.queryParams.page += 1;
this.isLoadMore = true; this.isLoadMore = true;
@@ -130,11 +143,15 @@ export default {
this.fnResetSetAniWaitIndex(); this.fnResetSetAniWaitIndex();
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();
this.dataList = []; this.dataList = [];
this.fnGetData(true); this.fnGetData(true);
}, },
fnGetCategory() { fnGetCategory() {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
this.fnGetData(true);
return
}
this.$httpApi.v2.getPhotoGroupList({ this.$httpApi.v2.getPhotoGroupList({
page: 1, page: 1,
size: 0 size: 0
@@ -151,7 +168,37 @@ export default {
} }
}); });
}, },
fnGetData(isClearWallfull = false) { fnGetData(isClearWaterfall = false) {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
this.dataList = this.mockJson.gallery.list.map(item => {
return {
metadata: {
name: Date.now() * Math.random(),
},
spec: {
url: this.$utils.checkImageUrl(item)
}
}
})
this.loading = 'success';
if (this.galleryConfig.useWaterfall) {
this.$nextTick(() => {
if (isClearWaterfall) {
this.$refs.wafll.clear()
}
setTimeout(() => {
this.$refs.wafll.pushData(this.dataList)
}, 50)
})
}
this.loadMoreText = '呜呜,没有更多数据啦~';
uni.hideLoading();
uni.stopPullDownRefresh();
return;
}
// 设置状态为加载中 // 设置状态为加载中
if (!this.isLoadMore) { if (!this.isLoadMore) {
this.loading = 'loading'; this.loading = 'loading';
@@ -174,9 +221,9 @@ export default {
} }
if (this.galleryConfig.useWaterfall) { if (this.galleryConfig.useWaterfall) {
this.$nextTick(() => { this.$nextTick(() => {
if(isClearWallfull){ if (isClearWaterfall) {
this.$refs.wafll.clear() this.$refs.wafll.clear()
} }
this.$refs.wafll.pushData(_list) this.$refs.wafll.pushData(_list)
}) })
} }
+112 -30
View File
@@ -9,7 +9,7 @@
<view class="search-input_text pl-12 text-size-m text-grey">搜索内容...</view> <view class="search-input_text pl-12 text-size-m text-grey">搜索内容...</view>
</view> </view>
<!-- #ifdef APP-PLUS || H5 --> <!-- #ifdef APP-PLUS || H5 -->
<view slot="right" class="mr-24 text-size-m text-grey">{{ appInfo.name }}</view> <view slot="right" class="mr-24 text-size-m text-grey text-overflow">{{ appInfo.name }}</view>
<!-- #endif --> <!-- #endif -->
</tm-menubars> </tm-menubars>
<view v-if="loading !== 'success' && articleList.length===0" class="loading-wrap"> <view v-if="loading !== 'success' && articleList.length===0" class="loading-wrap">
@@ -22,33 +22,37 @@
</view> </view>
<block v-else> <block v-else>
<view class="bg-white pb-24"> <view class="bg-white pb-24">
<view class="banner bg-white ml-24 mr-24 mt-12 round-3" v-if="bannerList.length != 0"> <view class="banner bg-white ml-24 mr-24 mt-12 round-3" v-if="bannerList.length !== 0">
<e-swiper :dotPosition="globalAppSettings.banner.dotPosition" :autoplay="true" <e-swiper :dotPosition="globalAppSettings.banner.dotPosition" :autoplay="true"
:useDot="globalAppSettings.banner.useDot" :list="bannerList" :useDot="globalAppSettings.banner.useDot" :list="bannerList"
@on-click="fnOnBannerClick"></e-swiper> @on-click="fnOnBannerClick"></e-swiper>
</view> </view>
</view> </view>
<view class="flex flex-between mt-16 mb-24 pl-24 pr-24"> <!-- 精品分类 -->
<view class="page-item_title text-weight-b ">精品分类</view> <block v-if="calcIsShowCategory">
<view class="show-more flex flex-center bg-white round-3" @click="fnToCategoryPage"> <view class="flex flex-between mt-16 mb-24 pl-24 pr-24">
<text class="iconfont icon-angle-right text-size-s text-grey-darken-1"></text> <view class="page-item_title text-weight-b ">精品分类</view>
</view> <view class="show-more flex flex-center bg-white round-3" @click="fnToCategoryPage">
<view v-if="false" class="flex flex-center text-size-s text-grey-darken-1" @click="fnToCategoryPage"> <text class="iconfont icon-angle-right text-size-s text-grey-darken-1"></text>
<text class=" text-size-m">查看更多</text>
<text class="iconfont icon-angle-right text-size-s "></text>
</view>
</view>
<scroll-view class="category" scroll-x="true">
<view v-if="categoryList.length == 0" class="cate-empty round-3 mr-5 flex flex-center text-grey">
还没有任何分类~
</view>
<block v-else>
<view class="content" v-for="(category, index) in categoryList" :key="category.metadata.name"
@click="fnToCategoryBy(category)">
<category-mini-card :category="category"></category-mini-card>
</view> </view>
</block> <view v-if="false" class="flex flex-center text-size-s text-grey-darken-1"
</scroll-view> @click="fnToCategoryPage">
<text class=" text-size-m">查看更多</text>
<text class="iconfont icon-angle-right text-size-s "></text>
</view>
</view>
<scroll-view class="category" scroll-x="true">
<view v-if="categoryList.length === 0" class="cate-empty round-3 mr-5 flex flex-center text-grey">
还没有任何分类~
</view>
<block v-else>
<view class="content" v-for="(category, index) in categoryList" :key="category.metadata.name"
@click="fnToCategoryBy(category)">
<category-mini-card :category="category"></category-mini-card>
</view>
</block>
</scroll-view>
</block>
<!-- 最新文章 --> <!-- 最新文章 -->
<view class="flex flex-between mt-24 mb-24 pl-24 pr-24"> <view class="flex flex-between mt-24 mb-24 pl-24 pr-24">
@@ -61,7 +65,7 @@
<text class="iconfont icon-angle-right text-size-s "></text> <text class="iconfont icon-angle-right text-size-s "></text>
</view> </view>
</view> </view>
<view v-if="articleList.length == 0" class="article-empty"> <view v-if="articleList.length === 0" class="article-empty">
<tm-empty icon="icon-shiliangzhinengduixiang-" label="博主还没有发表任何内容~"></tm-empty> <tm-empty icon="icon-shiliangzhinengduixiang-" label="博主还没有发表任何内容~"></tm-empty>
</view> </view>
<block v-else> <block v-else>
@@ -132,12 +136,23 @@ export default {
const appInfo = this.haloConfigs.appConfig.appInfo; const appInfo = this.haloConfigs.appConfig.appInfo;
appInfo.logo = this.$utils.checkImageUrl(appInfo.logo) appInfo.logo = this.$utils.checkImageUrl(appInfo.logo)
return appInfo; return appInfo;
},
mockJson() {
return this.$tm.vx.getters().getMockJson;
},
calcIsShowCategory() {
if (this.haloConfigs.basicConfig.auditModeEnabled && this.categoryList.length !== 0) {
return false
}
if (this.haloConfigs.basicConfig.auditModeEnabled) {
return false
}
return this.haloConfigs.pageConfig.homeConfig.useCategory
} }
}, },
onLoad() { onLoad() {
this.fnSetPageTitle(); this.fnSetPageTitle();
}, },
created() { created() {
this.fnQuery(); this.fnQuery();
}, },
@@ -146,8 +161,14 @@ export default {
this.queryParams.page = 1; this.queryParams.page = 1;
this.fnQuery(); this.fnQuery();
}, },
onReachBottom(e) { onReachBottom(e) {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
return
}
if (this.result.hasNext) { if (this.result.hasNext) {
this.queryParams.page += 1; this.queryParams.page += 1;
this.isLoadMore = true; this.isLoadMore = true;
@@ -161,15 +182,32 @@ export default {
}, },
methods: { methods: {
fnQuery() { fnQuery() {
console.log('this.mockJson', this.mockJson)
this.fnGetBanner(); this.fnGetBanner();
this.fnGetArticleList(); this.fnGetArticleList();
this.fnGetCategoryList(); this.fnGetCategoryList();
}, },
fnGetCategoryList() { fnGetCategoryList() {
if (this.haloConfigs.basicConfig.auditModeEnabled) { if (this.haloConfigs.basicConfig.auditModeEnabled) {
return; this.categoryList = this.mockJson.home.categoryList.map((item) => {
return {
metadata: {
name: Date.now() * Math.random(),
},
spec: {
displayName: item.title,
cover: item.cover
},
postCount: 0
}
});
return;
} }
if (!this.calcIsShowCategory) {
return;
}
this.$httpApi.v2 this.$httpApi.v2
.getCategoryList({}) .getCategoryList({})
.then(res => { .then(res => {
@@ -195,7 +233,20 @@ export default {
// 获取轮播图 // 获取轮播图
fnGetBanner() { fnGetBanner() {
if (this.haloConfigs.basicConfig.auditModeEnabled) { if (this.haloConfigs.basicConfig.auditModeEnabled) {
return; this.bannerList = this.mockJson.home.bannerList.map((item) => {
return {
mp4: '',
id: Date.now() * Math.random(),
nickname: this.haloConfigs.authorConfig.blogger.nickname,
avatar: this.$utils.checkAvatarUrl(this.haloConfigs.authorConfig.blogger.avatar),
address: '',
createTime: item.time,
title: item.title,
src: this.$utils.checkThumbnailUrl(item.cover),
image: this.$utils.checkThumbnailUrl(item.cover)
}
});
return;
} }
const _this = this; const _this = this;
const _format = function (list) { const _format = function (list) {
@@ -236,7 +287,10 @@ export default {
this.bannerCurrent = e.current; this.bannerCurrent = e.current;
}, },
fnOnBannerClick(item) { fnOnBannerClick(item) {
if (item.id == '') return; if (this.haloConfigs.basicConfig.auditModeEnabled) {
return;
}
if (item.id === '') return;
this.fnToArticleDetail({ this.fnToArticleDetail({
metadata: { metadata: {
name: item.id name: item.id
@@ -246,6 +300,29 @@ export default {
// 文章列表 // 文章列表
fnGetArticleList() { fnGetArticleList() {
if (this.haloConfigs.basicConfig.auditModeEnabled) { if (this.haloConfigs.basicConfig.auditModeEnabled) {
this.articleList = this.mockJson.home.postList.map((item) => {
return {
metadata: {
name: Date.now() * Math.random(),
},
spec: {
pinned: false,
cover: item.cover,
title: item.title,
publishTime: item.time
},
status: {
excerpt: item.desc
},
stats: {
visit: 0
}
}
});
this.loading = 'success';
this.loadMoreText = '呜呜,没有更多数据啦~';
uni.hideLoading();
uni.stopPullDownRefresh();
return; return;
} }
// 设置状态为加载中 // 设置状态为加载中
@@ -285,9 +362,11 @@ export default {
} }
}) })
}, },
//跳转文章详情 //跳转文章详情
fnToArticleDetail(article) { fnToArticleDetail(article) {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
return;
}
uni.navigateTo({ uni.navigateTo({
url: '/pagesA/article-detail/article-detail?name=' + article.metadata.name, url: '/pagesA/article-detail/article-detail?name=' + article.metadata.name,
animationType: 'slide-in-right' animationType: 'slide-in-right'
@@ -323,6 +402,9 @@ export default {
// 根据slug查询分类下的文章 // 根据slug查询分类下的文章
fnToCategoryBy(category) { fnToCategoryBy(category) {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
return;
}
uni.navigateTo({ uni.navigateTo({
url: `/pagesA/category-detail/category-detail?name=${category.metadata.name}&title=${category.spec.displayName}` url: `/pagesA/category-detail/category-detail?name=${category.metadata.name}&title=${category.spec.displayName}`
}); });
+66 -13
View File
@@ -1,13 +1,13 @@
<template> <template>
<view class="app-page"> <view class="app-page">
<view v-if="loading != 'success'" class="loading-wrap"> <view v-if="loading !== 'success'" class="loading-wrap">
<tm-skeleton model="listAvatr"></tm-skeleton> <tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton> <tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton> <tm-skeleton model="listAvatr"></tm-skeleton>
</view> </view>
<!-- 内容区域 --> <!-- 内容区域 -->
<view v-else class="app-page-content"> <view v-else class="app-page-content">
<view v-if="dataList.length == 0" class="content-empty flex flex-center" style="min-height: 70vh;"> <view v-if="dataList.length === 0" class="content-empty flex flex-center" style="min-height: 70vh;">
<!-- 空布局 --> <!-- 空布局 -->
<tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无数据"></tm-empty> <tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无数据"></tm-empty>
</view> </view>
@@ -37,13 +37,21 @@
:content="moment.spec.content.html" :markdown="true" :showLineNumber="true" :content="moment.spec.content.html" :markdown="true" :showLineNumber="true"
:showLanguageName="true" :copyByLongPress="true"/> :showLanguageName="true" :copyByLongPress="true"/>
</view> </view>
<view v-if="moment.spec.content.medium.length!==0" class="images" <view class="mb-12 mt--12" v-if="moment.videos.length!==0"
:class="['images-'+moment.spec.content.medium.length]"> style="display: flex; flex-direction: column; gap: 12rpx 0;padding: 0 24rpx; ">
<view class="image-item" v-for="(image,mediumIndex) in moment.spec.content.medium" <video
style="width:100%;height: 400rpx;border-radius: 12rpx;"
v-for="(video,index) in moment.videos"
:key="index" :src="video.url"></video>
</view>
<view v-if="moment.images.length!==0" class="images"
:class="['images-'+moment.images.length]">
<view class="image-item"
v-for="(image,mediumIndex) in moment.images"
:key="mediumIndex"> :key="mediumIndex">
<image mode="aspectFill" style="width: 100%;height: 100%;border-radius: 6rpx;" <image mode="aspectFill" style="width: 100%;height: 100%;border-radius: 6rpx;"
:src="image.url" :src="image.url"
@click="handlePreview(mediumIndex,moment.spec.content.medium)"/> @click="handlePreview(mediumIndex,moment.images)"/>
</view> </view>
</view> </view>
</view> </view>
@@ -93,6 +101,12 @@ export default {
let blogger = this.$tm.vx.getters().getConfigs.authorConfig.blogger; let blogger = this.$tm.vx.getters().getConfigs.authorConfig.blogger;
blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true); blogger.avatar = this.$utils.checkAvatarUrl(blogger.avatar, true);
return blogger; return blogger;
},
haloConfigs() {
return this.$tm.vx.getters().getConfigs;
},
mockJson() {
return this.$tm.vx.getters().getMockJson;
} }
}, },
@@ -106,6 +120,13 @@ export default {
}, },
onReachBottom(e) { onReachBottom(e) {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
return
}
if (this.hasNext) { if (this.hasNext) {
this.queryParams.page += 1; this.queryParams.page += 1;
this.isLoadMore = true; this.isLoadMore = true;
@@ -119,6 +140,37 @@ export default {
}, },
methods: { methods: {
fnGetData() { fnGetData() {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
this.dataList = this.mockJson.moments.list.map((item) => {
return {
metadata: {
name: Date.now() * Math.random(),
},
spec: {
user: {
displayName: this.bloggerInfo.nickname,
avatar: this.$utils.checkAvatarUrl(this.bloggerInfo.avatar),
},
content: {
html: item.content
},
releaseTime: item.time
},
images: item.images.map((img) => {
return {
type: "PHOTO",
url: this.$utils.checkThumbnailUrl(img),
}
}),
videos: []
}
});
this.loading = 'success';
this.loadMoreText = '呜呜,没有更多数据啦~';
uni.hideLoading();
uni.stopPullDownRefresh();
return;
}
uni.showLoading({ uni.showLoading({
mask: true, mask: true,
title: '加载中...' title: '加载中...'
@@ -131,9 +183,6 @@ export default {
this.$httpApi.v2 this.$httpApi.v2
.getMomentList(this.queryParams) .getMomentList(this.queryParams)
.then(res => { .then(res => {
console.log('请求结果:');
console.log(res);
this.loading = 'success'; this.loading = 'success';
this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~'; this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~';
this.hasNext = res.hasNext; this.hasNext = res.hasNext;
@@ -143,11 +192,15 @@ export default {
displayName: this.bloggerInfo.nickname, displayName: this.bloggerInfo.nickname,
avatar: this.$utils.checkAvatarUrl(this.bloggerInfo.avatar) avatar: this.$utils.checkAvatarUrl(this.bloggerInfo.avatar)
} }
item.spec.content.medium item.spec.content.medium.map(medium => {
medium.url = this.$utils.checkThumbnailUrl(medium.url, true)
})
item['images'] = item.spec.content.medium
.filter(x => x.type === 'PHOTO') .filter(x => x.type === 'PHOTO')
.map(medium => {
medium.url = this.$utils.checkThumbnailUrl(medium.url, true) item['videos'] = item.spec.content.medium
}) .filter(x => x.type === 'VIDEO')
return item; return item;
}) })
+279 -61
View File
@@ -1,13 +1,15 @@
<template> <template>
<view class="app-page"> <view class="app-page">
<view class="e-fixed"> <view class="e-fixed">
<tm-tabs color="light-blue" v-model="tab.activeIndex" :list="tab.list" align="center" @change="fnOnTabChange"></tm-tabs> <tm-tabs color="light-blue" v-model="tab.activeIndex" :list="tab.list" align="center"
@change="fnOnTabChange"></tm-tabs>
</view> </view>
<!-- 占位区域 --> <!-- 占位区域 -->
<view style="width: 100vw;height: 90rpx;"></view> <view style="width: 100vw;height: 90rpx;"></view>
<!-- 骨架屏加载区域 --> <!-- 骨架屏加载区域 -->
<view v-if="loading != 'success'" class="loading-wrap"> <view v-if="loading !== 'success'" class="loading-wrap">
<tm-skeleton model="listAvatr"></tm-skeleton> <tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton> <tm-skeleton model="listAvatr"></tm-skeleton>
<tm-skeleton model="listAvatr"></tm-skeleton> <tm-skeleton model="listAvatr"></tm-skeleton>
@@ -15,46 +17,55 @@
<!-- 加载完成区域 --> <!-- 加载完成区域 -->
<block v-else> <block v-else>
<view v-if="dataList.length == 0" class="list-empty flex flex-center"> <view v-if="dataList.length === 0" class="list-empty flex flex-center">
<tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无归档的文章"></tm-empty> <tm-empty v-if="haloConfigs.basicConfig.auditModeEnabled" icon="icon-shiliangzhinengduixiang-" label="暂无归档的内容"></tm-empty>
<tm-empty v-else icon="icon-shiliangzhinengduixiang-" label="暂无归档的文章"></tm-empty>
</view> </view>
<view v-else class="e-timeline tm-timeline mt-24"> <view v-else class="e-timeline tm-timeline mt-24">
<block v-for="(item, index) in dataList" :key="index"> <block v-for="(item, index) in dataList" :key="index">
<view class="tm-timeline-item tm-timeline-item--leftDir"> <view class="tm-timeline-item tm-timeline-item--leftDir">
<view style="width: 160rpx;"> <view style="width: 160rpx;">
<view :style="{ width: '24rpx', height: '24rpx' }" :class="[black_tmeme ? 'bk' : '']" <view :style="{ width: '24rpx', height: '24rpx' }" :class="[black_tmeme ? 'bk' : '']"
class="flex-center rounded tm-timeline-jidian border-white-a-2 grey-lighten-2 light-blue shadow-primary-4"></view> class="flex-center rounded tm-timeline-jidian border-white-a-2 grey-lighten-2 light-blue shadow-primary-4">
</view>
<view :style="{ marginTop: '-24rpx' }" <view :style="{ marginTop: '-24rpx' }"
:class="[index !== dataList.length - 1 ? 'tm-timeline-item-boder' : '', black_tmeme ? 'bk' : '']" :class="[index !== dataList.length - 1 ? 'tm-timeline-item-boder' : '', black_tmeme ? 'bk' : '']"
class="grey-lighten-2"></view> class="grey-lighten-2"></view>
</view> </view>
<view class="tm-timeline-item-content relative"> <view class="tm-timeline-item-content relative">
<view class="tm-timeline-item-left"> <view class="tm-timeline-item-left">
<view class="time text-weight-b mb-24"> <view class="flex time text-weight-b mb-24">
{{ item.year }} <text>{{ item.year }}</text>
<block v-if="tab.activeIndex == 0">{{ item.month }}</block> <text v-if="tab.activeIndex === 0">{{ item.month }}</text>
<text class="text-size-s text-grey-darken-1 ml-24">共发布 {{ item.posts.length }} 篇文章</text> <view v-if="haloConfigs.basicConfig.auditModeEnabled" class="text-size-s text-grey-darken-1 ml-12">
{{ item.posts.length }} 篇内容
</view>
<view v-else class="text-size-s text-grey-darken-1 ml-12">
{{ item.posts.length }} 篇文章
</view>
</view> </view>
<block v-if="item.posts.length != 0"> <block v-if="item.posts.length !== 0">
<block v-for="(post, postIndex) in item.posts" :key="post.id"> <block v-for="(post, postIndex) in item.posts" :key="post.metadata.name">
<tm-translate animation-name="fadeUp" :wait="calcAniWait(postIndex)"> <view class="flex post shadow-3 pa-24 mb-24"
<view class="flex post shadow-3 pa-24 mb-24" :class="[globalAppSettings.layout.cardType]" :class="[globalAppSettings.layout.cardType]"
@click="fnToArticleDetail(post)"> @click="fnToArticleDetail(post)">
<image class="post-thumbnail" :src="$utils.checkThumbnailUrl(post.thumbnail)" <image class="post-thumbnail"
mode="aspectFill"></image> :src="$utils.checkThumbnailUrl(post.spec.cover)" mode="aspectFill">
<view class="post-info pl-20"> </image>
<view class="post-info_title text-overflow">{{ post.title }}</view> <view class="post-info pl-20">
<view class="post-info_summary text-overflow-2 mt-12 text-size-s text-grey-darken-1"> <view class="post-info_title text-overflow">{{ post.spec.title }}
{{ post.summary }} </view>
</view> <view
<view class="post-info_time mt-12 text-size-s text-grey-darken-1"> class="post-info_summary text-overflow-2 mt-12 text-size-s text-grey-darken-1">
<text class="iconfont icon-clock text-size-s mr-6"></text> {{ post.status.excerpt }}
<text class="time-label">发布时间</text> </view>
{{ {d: post.createTime, f: 'yyyy年MM月dd日 星期w'} | formatTime }} <view class="post-info_time mt-12 text-size-s text-grey-darken-1">
</view> <text class="iconfont icon-clock text-size-s mr-6"></text>
<text class="time-label">发布时间</text>
{{ {d: post.spec.publishTime, f: 'yyyy年MM月dd日 星期w'} | formatTime }}
</view> </view>
</view> </view>
</tm-translate> </view>
</block> </block>
</block> </block>
<view v-else class="post-empty text-size-m text-grey-darken-1">该日期下暂无归档文章</view> <view v-else class="post-empty text-size-m text-grey-darken-1">该日期下暂无归档文章</view>
@@ -63,8 +74,10 @@
</view> </view>
</block> </block>
</view> </view>
<view class="load-text mt-12">{{ loadMoreText }}</view>
<!-- 返回顶部 --> <!-- 返回顶部 -->
<tm-flotbutton @click="fnToTopPage" size="m" color="bg-gradient-light-blue-accent" icon="icon-angle-up"></tm-flotbutton> <tm-flotbutton @click="fnToTopPage" size="m" color="bg-gradient-light-blue-accent"
icon="icon-angle-up"></tm-flotbutton>
</block> </block>
</view> </view>
</template> </template>
@@ -75,6 +88,7 @@ import tmTranslate from '@/tm-vuetify/components/tm-translate/tm-translate.vue';
import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue'; import tmFlotbutton from '@/tm-vuetify/components/tm-flotbutton/tm-flotbutton.vue';
import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue'; import tmTabs from '@/tm-vuetify/components/tm-tabs/tm-tabs.vue';
import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue'; import tmEmpty from '@/tm-vuetify/components/tm-empty/tm-empty.vue';
import qs from 'qs'
export default { export default {
components: { components: {
@@ -93,11 +107,13 @@ export default {
}, },
queryParams: { queryParams: {
size: 10, size: 10,
page: 0 page: 1
}, },
result: null, result: {},
dataList: [], cacheDataList: [], // 所有请求的缓存数据
api: 'getMonthArchives' dataList: [], // 显示的数据
isLoadMore: false,
loadMoreText: "加载中..."
}; };
}, },
computed: { computed: {
@@ -106,53 +122,242 @@ export default {
}, },
color_tmeme: function () { color_tmeme: function () {
return this.$tm.vx.state().tmVuetify.color; return this.$tm.vx.state().tmVuetify.color;
},
haloConfigs() {
return this.$tm.vx.getters().getConfigs;
},
mockJson() {
return this.$tm.vx.getters().getMockJson;
} }
}, },
created() { created() {
this.fnGetData(); this.fnGetData();
}, },
onPullDownRefresh() { onPullDownRefresh() {
this.isLoadMore = false;
this.queryParams.page = 1;
this.fnGetData(); this.fnGetData();
this.queryParams.page = 0;
}, },
onReachBottom(e) {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
return
}
if (this.result.hasNext) {
this.queryParams.page += 1;
this.isLoadMore = true;
this.fnGetData();
} else {
uni.showToast({
icon: 'none',
title: '没有更多数据了'
});
}
},
methods: { methods: {
fnOnTabChange(index) { fnOnTabChange(index) {
this.fnResetSetAniWaitIndex(); this.fnResetSetAniWaitIndex();
const _api = ['getMonthArchives', 'getYearArchives'];
this.api = _api[index];
this.queryParams.page = 0; this.queryParams.page = 0;
this.fnGetData(); this.dataList = this.handleGetShowDataList(this.handleGetPosts(this.cacheDataList))
this.fnToTopPage();
}, },
fnGetData() { fnGetData() {
this.loading = 'loading'; if (this.haloConfigs.basicConfig.auditModeEnabled) {
// uni.showLoading({ const dataList = this.mockJson.archives.list.map(item => {
// mask: true, const date = new Date(item.time)
// title: '加载中...' const year = date.getFullYear()
// }); const month = date.getMonth() + 1
this.$httpApi[this.api](this.queryParams) return {
.then(res => { metadata: {
this.result = res.data; name: Date.now() * Math.random(),
this.dataList = res.data; labels: {
setTimeout(() => { "content.halo.run/archive-year": year,
this.loading = 'success'; "content.halo.run/archive-month": month
}, 500); }
}) },
.catch(err => { spec: {
console.error(err); pinned: false,
this.loading = 'error'; cover: item.cover,
}) title: item.title,
.finally(() => { publishTime: item.time
setTimeout(() => { },
uni.hideLoading(); status: {
uni.stopPullDownRefresh(); excerpt: item.desc
}, 500); },
stats: {
visit: 0
}
}
}); });
const posts = this.handleGetPosts(dataList)
this.dataList = []
this.cacheDataList = dataList;
this.dataList = this.handleGetShowDataList(posts)
this.loading = 'success';
this.loadMoreText = '呜呜,没有更多数据啦~';
uni.hideLoading();
uni.stopPullDownRefresh();
return;
}
if (this.isLoadMore) {
uni.showLoading({
title: "加载中..."
})
} else {
this.loading = 'loading';
}
this.loadMoreText = "加载中...";
const paramsStr = qs.stringify(this.queryParams, {
allowDots: true,
encodeValuesOnly: true,
skipNulls: true,
encode: true,
arrayFormat: 'repeat'
})
uni.request({
url: this.$baseApiUrl + '/apis/api.content.halo.run/v1alpha1/posts?' + paramsStr,
method: 'GET',
success: (res) => {
const data = res.data;
this.result = data;
const posts = this.handleGetPosts(data.items)
const showDataList = this.handleGetShowDataList(posts)
if (this.isLoadMore) {
this.cacheDataList = this.handleUniqueCacheDatalist([
...this.cacheDataList, ...data.items
]);
this.handleMergeDataList2(showDataList)
} else {
this.dataList = []
this.cacheDataList = data.items;
this.dataList = showDataList
}
this.loading = 'success';
this.loadMoreText = data.hasNext ? '上拉加载更多' : '呜呜,没有更多数据啦~';
uni.hideLoading();
uni.stopPullDownRefresh();
},
fail: (err) => {
this.loading = 'error';
this.loadMoreText = '加载失败,请下拉刷新!';
uni.$tm.toast(err.message || '数据加载失败!');
uni.hideLoading();
uni.stopPullDownRefresh();
}
})
},
// 处理数据分类
handleGetPosts(dataList) {
const posts = {}
const postLabelYearKey = "content.halo.run/archive-year"
const postLabelMonthKey = "content.halo.run/archive-month"
dataList.forEach(item => {
let postItemKey = ""
if (this.tab.activeIndex === 0) {
postItemKey =
`${item.metadata.labels[postLabelYearKey]}-${item.metadata.labels[postLabelMonthKey]}`
} else {
postItemKey = `${item.metadata.labels[postLabelYearKey]}`
}
if (posts[postItemKey]) {
posts[postItemKey].push(item)
} else {
posts[postItemKey] = [item]
}
})
return posts;
},
// 根据分类的数据,处理成显示的数据
handleGetShowDataList(posts) {
const dataListResult = []
Object.keys(posts).forEach((key) => {
const postData = {
sort: 0,
key: key,
year: key,
month: "",
posts: posts[key]
}
if (this.tab.activeIndex == 0) {
const splitDate = key.split("-")
postData.year = splitDate[0]
postData.month = splitDate[1]
postData.sort = Number(key.replace("-", ""))
} else {
postData.sort = Number(key)
}
dataListResult.push(postData)
})
dataListResult.sort((a, b) => {
return Number(b.sort) - Number(a.sort)
})
return dataListResult;
},
handleMergeDataList(list1, list2) {
// 将list1转换为以key为键的对象
let merged = list1.reduce((acc, item) => {
acc[item.key] = {
...item
};
return acc;
}, {});
// 遍历list2,合并posts数组或添加新对象
list2.forEach(item => {
if (merged[item.key]) {
// 如果key已存在,合并posts数组
merged[item.key].posts = [...merged[item.key].posts, ...item.posts];
} else {
// 如果key不存在,添加新对象
merged[item.key] = {
...item
};
}
});
// 将对象转换回数组
return Object.values(merged);
},
handleMergeDataList2(list) {
list.forEach((item, index) => {
const find = this.dataList.find(x => x.key == item.key)
if (find) {
item.posts.forEach(post => {
if (!find.posts.find(x => x.metadata.name == post.metadata.name)) {
find.posts.push(post)
}
})
}
})
list.forEach(post => {
if (!this.dataList.find(x => x.key === post.key)) {
this.dataList.push(post)
}
})
this.dataList.sort((a, b) => {
return Number(b.sort) - Number(a.sort)
})
},
handleUniqueCacheDatalist(dataList) {
const seen = new Set();
return dataList.filter(item => {
return seen.has(item.metadata.name) ? false : seen.add(item.metadata.name);
});
}, },
//跳转文章详情
fnToArticleDetail(article) { fnToArticleDetail(article) {
if (this.haloConfigs.basicConfig.auditModeEnabled) {
return;
}
uni.navigateTo({ uni.navigateTo({
url: '/pagesA/article-detail/article-detail?articleId=' + article.id, url: '/pagesA/article-detail/article-detail?name=' + article.metadata.name,
animationType: 'slide-in-right' animationType: 'slide-in-right'
}); });
} }
@@ -169,6 +374,15 @@ export default {
background-color: #fafafd; background-color: #fafafd;
} }
.auditModeEnabled {
width: 100%;
height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.loading-wrap { .loading-wrap {
padding: 24rpx; padding: 24rpx;
} }
@@ -376,4 +590,8 @@ export default {
} }
} }
} }
.time {
align-items: center;
}
</style> </style>
File diff suppressed because it is too large Load Diff
+5 -5
View File
@@ -7,7 +7,7 @@
<image class="avatar" :src="$utils.checkAvatarUrl(loveConfig.loveInfo.boyAvatar)" mode="aspectFit"></image> <image class="avatar" :src="$utils.checkAvatarUrl(loveConfig.loveInfo.boyAvatar)" mode="aspectFit"></image>
<view class="name">{{ loveConfig.loveInfo.boyNickname }}</view> <view class="name">{{ loveConfig.loveInfo.boyNickname }}</view>
</view> </view>
<image class="like" :src="$utils.checkImageUrl(loveConfig.loveImageUrl)" mode="scaleToFill"></image> <image class="like" :src="$utils.checkImageUrl(loveConfig.pageImages.heartImageUrl)" mode="scaleToFill"></image>
<view class="girl"> <view class="girl">
<image class="avatar" :src="$utils.checkAvatarUrl(loveConfig.loveInfo.girlAvatar)" mode="aspectFit"></image> <image class="avatar" :src="$utils.checkAvatarUrl(loveConfig.loveInfo.girlAvatar)" mode="aspectFit"></image>
<view class="name">{{ loveConfig.loveInfo.girlNickname }}</view> <view class="name">{{ loveConfig.loveInfo.girlNickname }}</view>
@@ -43,7 +43,7 @@
<block v-for="(nav, index) in navList" :key="index"> <block v-for="(nav, index) in navList" :key="index">
<view v-if="nav.use" class="list-item" @click="fnToPage(nav.key)"> <view v-if="nav.use" class="list-item" @click="fnToPage(nav.key)">
<view class="left"> <view class="left">
<image class="icon" :src="nav.iconImageUrl" mode="aspectFit"></image> <image class="icon" :src="$utils.checkImageUrl(nav.iconImageUrl)" mode="aspectFit"></image>
</view> </view>
<view class="right"> <view class="right">
<view class="name">{{ nav.title }}</view> <view class="name">{{ nav.title }}</view>
@@ -100,21 +100,21 @@ export default {
{ {
key: 'journey', key: 'journey',
use: configs.ourStory.enabled, use: configs.ourStory.enabled,
iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png', iconImageUrl: configs.ourStory.iconUrl,
title: '关于我们', title: '关于我们',
desc: '我们一起度过的那些经历' desc: '我们一起度过的那些经历'
}, },
{ {
key: 'album', key: 'album',
use: configs.lovePhoto.enabled, use: configs.lovePhoto.enabled,
iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png', iconImageUrl: configs.lovePhoto.iconUrl,
title: '恋爱相册', title: '恋爱相册',
desc: '定格了我们的那些小美好' desc: '定格了我们的那些小美好'
}, },
{ {
key: 'list', key: 'list',
use: configs.loveDaily.enabled, use: configs.loveDaily.enabled,
iconImageUrl: 'https://b.925i.cn/uni_halo_love/diandian.png', iconImageUrl: configs.loveDaily.iconUrl,
title: '恋爱清单', title: '恋爱清单',
desc: '你我之间的约定我们都在努力实现' desc: '你我之间的约定我们都在努力实现'
}, },
+462 -439
View File
@@ -1,508 +1,531 @@
<template> <template>
<view class="app-page bg-gradient-blue-lighten-b" :class="calcPageClass" :style="[calcPageStyle]"> <view class="app-page bg-gradient-blue-lighten-b" :class="calcPageClass" :style="[calcPageStyle]">
<view v-if="calcBackgroundType!=='video'" class="tn-satr"> <view v-if="calcBackgroundType!=='video'" class="tn-satr">
<view class="sky"></view> <view class="sky"></view>
<view class="stars"> <view class="stars">
<view class="falling-stars"> <view class="falling-stars">
<view class="star-fall"></view> <view class="star-fall"></view>
<view class="star-fall"></view> <view class="star-fall"></view>
<view class="star-fall"></view> <view class="star-fall"></view>
<view class="star-fall"></view> <view class="star-fall"></view>
</view> </view>
<view class="small-stars"> <view class="small-stars">
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
</view> </view>
<view class="medium-stars"> <view class="medium-stars">
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
<view class="star"></view> <view class="star"></view>
</view> </view>
</view> </view>
</view> </view>
<video v-else class="video-bg" :object-fit="startConfig.bgVideoFit" :src="startConfig.bgVideo" :loop="true" :autoplay="true" <video v-else class="video-bg" :object-fit="startConfig.bgVideoFit" :src="startConfig.bgVideo" :loop="true"
:muted="true" :controls="false" :show-fullscreen-btn="false" :show-play-btn="false" :autoplay="true" :muted="true" :controls="false" :show-fullscreen-btn="false" :show-play-btn="false"
:show-center-play-btn="false" :show-loading="false" :enable-progress-gesture="false" :show-center-play-btn="false" :show-loading="false" :enable-progress-gesture="false"
:show-progress="false"></video> :show-progress="false"></video>
<cover-view v-if="startConfig.title || startConfig.logo" class="title-container"> <cover-view v-if="startConfig.title || startConfig.logo" class="title-container">
<cover-view v-if="startConfig.logo" class="app-logo"> <cover-view v-if="startConfig.logo" class="app-logo">
<cover-view class="app-logo-border"> <cover-view class="app-logo-border">
<cover-image class="app-logo-image" :src="$utils.checkImageUrl(startConfig.logo)" <cover-image class="app-logo-image" :src="$utils.checkImageUrl(startConfig.logo)"
mode="aspectFill"></cover-image> mode="aspectFill"></cover-image>
</cover-view> </cover-view>
</cover-view> </cover-view>
<cover-view v-if="startConfig.title" class="app-title" :style="startConfig.titleStyle"> <cover-view v-if="startConfig.title" class="app-title" :style="startConfig.titleStyle">
{{ startConfig.title }} {{ startConfig.title }}
</cover-view> </cover-view>
</cover-view> </cover-view>
<cover-view v-if="startConfig.desc1 || startConfig.desc2" class="bottom-container"> <cover-view class="bottom-container">
<cover-view class="text-align-center" :style="startConfig.descStyle" <cover-view class="text-align-center" :style="startConfig.descStyle"
style="color:white;padding: 60vh 0 0 0;"> style="color:white;padding: 60vh 0 0 0;">
<cover-view class="" style="font-size: 44rpx;" v-if="startConfig.desc1">{{ startConfig.desc1 }} <cover-view style="font-size: 44rpx;" v-show="startConfig.desc1">
</cover-view> {{ startConfig.desc1 }}
<cover-view class="mt-30 text-size-m" v-if="startConfig.desc2">{{ startConfig.desc2 }}</cover-view> </cover-view>
</cover-view> <cover-view class="mt-30 text-size-m" v-show="startConfig.desc2">
{{ startConfig.desc2 }}
<cover-view class="" style="padding: 120rpx 200rpx;z-index: 999;position: relative;"> </cover-view>
<cover-view class="start-btn" :class="[startConfig.btnClass]" @click="fnStart()" </cover-view>
:style="startConfig.btnStyle">{{ startConfig.btnText || '开始体验' }} <!-- #ifdef APP-PLUS -->
</cover-view> <cover-view class="start-btn-app" :style="[startConfig.btnStyle]" @click="fnStart()">
</cover-view> {{ startConfig.btnText || '开始体验' }}
</cover-view> </cover-view>
<!-- 波浪效果 --> <!-- #endif -->
<wave v-if="startConfig.useWave"></wave> <!-- #ifndef APP-PLUS -->
</view> <cover-view class="start-btn" :class="[startConfig.btnClass]" @click="fnStart()"
:style="[startConfig.btnStyle]">{{ startConfig.btnText || '开始体验' }}
</cover-view>
<!-- #endif -->
</cover-view>
<!-- 波浪效果 -->
<wave v-if="startConfig.useWave"></wave>
</view>
</template> </template>
<script> <script>
import wave from '@/components/wave/wave.vue'; import wave from '@/components/wave/wave.vue';
export default { export default {
components: { components: {
wave wave
}, },
computed: { computed: {
startConfig() { startConfig() {
return this.$tm.vx.getters().getConfigs.appConfig.startConfig; return this.$tm.vx.getters().getConfigs.appConfig.startConfig;
}, },
calcBackgroundType() { calcBackgroundType() {
return this.startConfig.backgroundType; return this.startConfig.backgroundType;
}, },
calcPageClass() { calcPageClass() {
if (this.calcBackgroundType === 'color') { if (this.calcBackgroundType === 'color') {
return [this.startConfig.bg] return [this.startConfig.bg]
} }
return [] return []
}, },
calcPageStyle() { calcPageStyle() {
if (this.calcBackgroundType === 'color') { if (this.calcBackgroundType === 'color') {
return {} return {}
} }
if (this.calcBackgroundType === 'image') { if (this.calcBackgroundType === 'image') {
return { return {
backgroundImage: `url(${this.$utils.checkImageUrl(this.startConfig.bgImage)})!important`, backgroundImage: `url(${this.$utils.checkImageUrl(this.startConfig.bgImage)})!important`,
backgroundSize: this.startConfig.bgImageFit backgroundSize: this.startConfig.bgImageFit
} }
} }
if (this.calcBackgroundType === 'video') { if (this.calcBackgroundType === 'video') {
return { return {
background: '#ffffff' background: '#ffffff'
} }
} }
return {}; return {};
} }
}, },
methods: { methods: {
fnStart() { fnStart() {
uni.switchTab({ uni.switchTab({
url: '/pages/tabbar/home/home', url: '/pages/tabbar/home/home',
success: () => { success: () => {
uni.setStorageSync('APP_HAS_STARTED', true); uni.setStorageSync('APP_HAS_STARTED', true);
} }
}); });
} }
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-page { .app-page {
position: relative; position: relative;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.start-btn { .start-btn {
box-sizing: border-box; box-sizing: border-box;
background-color: transparent; background-color: transparent;
padding: 16rpx 50rpx; padding: 16rpx 50rpx;
border-radius: 50rpx; border-radius: 50rpx;
border: 2rpx solid #ffffff; border: 2rpx solid #ffffff;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
font-size: 28rpx; font-size: 28rpx;
} margin-top: 60rpx;
margin-bottom: 120rpx;
}
.bottom-container { .start-btn-app {
position: absolute; border-radius: 50rpx;
bottom: 50rpx; color: #ffffff;
left: 50%; text-align: center;
transform: translateX(-50%); font-size: 28rpx;
z-index: 999; margin: 60rpx auto 120rpx auto;
} width: 40vw;
height: 60rpx;
line-height: 60rpx;
border: 2rpx solid #ffffff;
}
.video-bg { .bottom-container {
position: absolute; display: flex;
left: 0; flex-direction: column;
top: 0; position: absolute;
width: 100vw; bottom: 50rpx;
height: 100vh; left: 50%;
z-index: 0; transform: translateX(-50%);
} z-index: 999;
}
.title-container { .video-bg {
width: 100vw; position: absolute;
position: absolute; left: 0;
top: 20vh; top: 0;
left: 0; width: 100vw;
z-index: 999; height: 100vh;
display: flex; z-index: 0;
flex-direction: column; }
align-items: center;
justify-content: center;
}
.app-logo { .title-container {
width: 200rpx; width: 100vw;
height: 200rpx; position: absolute;
top: 20vh;
left: 0;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&-border { .app-logo {
width: 100%; width: 200rpx;
height: 100%; height: 200rpx;
box-sizing: border-box;
border: 8rpx solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
overflow: hidden;
}
&-image { &-border {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; box-sizing: border-box;
} border: 8rpx solid rgba(255, 255, 255, 0.35);
} border-radius: 50%;
overflow: hidden;
}
.app-title { &-image {
color: #ffffff; width: 100%;
margin-top: 26rpx; height: 100%;
font-size: 36rpx; border-radius: 50%;
font-weight: 600; }
text-align: center; }
}
.app-title {
color: #ffffff;
margin-top: 26rpx;
font-size: 36rpx;
font-weight: 600;
text-align: center;
}
.tn-satr { .tn-satr {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 600px; height: 600px;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
z-index: 998; z-index: 998;
} }
.stars { .stars {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
height: 400px; height: 400px;
} }
.star { .star {
border-radius: 50%; border-radius: 50%;
background: #ffffff; background: #ffffff;
box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.8);
} }
.small-stars .star { .small-stars .star {
position: absolute; position: absolute;
width: 3px; width: 3px;
height: 3px; height: 3px;
} }
.small-stars .star:nth-child(2n) { .small-stars .star:nth-child(2n) {
opacity: 0; opacity: 0;
-webkit-animation: star-blink 1.2s linear infinite alternate; -webkit-animation: star-blink 1.2s linear infinite alternate;
animation: star-blink 1.2s linear infinite alternate; animation: star-blink 1.2s linear infinite alternate;
} }
.small-stars .star:nth-child(1) { .small-stars .star:nth-child(1) {
left: 40px; left: 40px;
bottom: 50px; bottom: 50px;
} }
.small-stars .star:nth-child(2) { .small-stars .star:nth-child(2) {
left: 200px; left: 200px;
bottom: 40px; bottom: 40px;
} }
.small-stars .star:nth-child(3) { .small-stars .star:nth-child(3) {
left: 60px; left: 60px;
bottom: 120px; bottom: 120px;
} }
.small-stars .star:nth-child(4) { .small-stars .star:nth-child(4) {
left: 140px; left: 140px;
bottom: 250px; bottom: 250px;
} }
.small-stars .star:nth-child(5) { .small-stars .star:nth-child(5) {
left: 400px; left: 400px;
bottom: 300px; bottom: 300px;
} }
.small-stars .star:nth-child(6) { .small-stars .star:nth-child(6) {
left: 170px; left: 170px;
bottom: 80px; bottom: 80px;
} }
.small-stars .star:nth-child(7) { .small-stars .star:nth-child(7) {
left: 200px; left: 200px;
bottom: 360px; bottom: 360px;
-webkit-animation-delay: 0.2s; -webkit-animation-delay: 0.2s;
animation-delay: 0.2s; animation-delay: 0.2s;
} }
.small-stars .star:nth-child(8) { .small-stars .star:nth-child(8) {
left: 250px; left: 250px;
bottom: 320px; bottom: 320px;
} }
.small-stars .star:nth-child(9) { .small-stars .star:nth-child(9) {
left: 300px; left: 300px;
bottom: 340px; bottom: 340px;
} }
.small-stars .star:nth-child(10) { .small-stars .star:nth-child(10) {
left: 130px; left: 130px;
bottom: 320px; bottom: 320px;
-webkit-animation-delay: 0.5s; -webkit-animation-delay: 0.5s;
animation-delay: 0.5s; animation-delay: 0.5s;
} }
.small-stars .star:nth-child(11) { .small-stars .star:nth-child(11) {
left: 230px; left: 230px;
bottom: 330px; bottom: 330px;
-webkit-animation-delay: 7s; -webkit-animation-delay: 7s;
animation-delay: 7s; animation-delay: 7s;
} }
.small-stars .star:nth-child(12) { .small-stars .star:nth-child(12) {
left: 300px; left: 300px;
bottom: 360px; bottom: 360px;
-webkit-animation-delay: 0.3s; -webkit-animation-delay: 0.3s;
animation-delay: 0.3s; animation-delay: 0.3s;
} }
@-webkit-keyframes star-blink { @-webkit-keyframes star-blink {
50% { 50% {
width: 3px; width: 3px;
height: 3px; height: 3px;
opacity: 1; opacity: 1;
} }
} }
@keyframes star-blink { @keyframes star-blink {
50% { 50% {
width: 3px; width: 3px;
height: 3px; height: 3px;
opacity: 1; opacity: 1;
} }
} }
.medium-stars .star { .medium-stars .star {
position: absolute; position: absolute;
width: 3px; width: 3px;
height: 3px; height: 3px;
opacity: 0; opacity: 0;
-webkit-animation: star-blink 1.2s ease-in infinite alternate; -webkit-animation: star-blink 1.2s ease-in infinite alternate;
animation: star-blink 1.2s ease-in infinite alternate; animation: star-blink 1.2s ease-in infinite alternate;
} }
.medium-stars .star:nth-child(1) { .medium-stars .star:nth-child(1) {
left: 300px; left: 300px;
bottom: 50px; bottom: 50px;
} }
.medium-stars .star:nth-child(2) { .medium-stars .star:nth-child(2) {
left: 400px; left: 400px;
bottom: 40px; bottom: 40px;
-webkit-animation-delay: 0.4s; -webkit-animation-delay: 0.4s;
animation-delay: 0.4s; animation-delay: 0.4s;
} }
.medium-stars .star:nth-child(3) { .medium-stars .star:nth-child(3) {
left: 330px; left: 330px;
bottom: 300px; bottom: 300px;
-webkit-animation-delay: 0.2s; -webkit-animation-delay: 0.2s;
animation-delay: 0.2s; animation-delay: 0.2s;
} }
.medium-stars .star:nth-child(4) { .medium-stars .star:nth-child(4) {
left: 460px; left: 460px;
bottom: 300px; bottom: 300px;
-webkit-animation-delay: 0.9s; -webkit-animation-delay: 0.9s;
animation-delay: 0.9s; animation-delay: 0.9s;
} }
.medium-stars .star:nth-child(5) { .medium-stars .star:nth-child(5) {
left: 300px; left: 300px;
bottom: 150px; bottom: 150px;
-webkit-animation-delay: 1.2s; -webkit-animation-delay: 1.2s;
animation-delay: 1.2s; animation-delay: 1.2s;
} }
.medium-stars .star:nth-child(6) { .medium-stars .star:nth-child(6) {
left: 440px; left: 440px;
bottom: 120px; bottom: 120px;
-webkit-animation-delay: 1s; -webkit-animation-delay: 1s;
animation-delay: 1s; animation-delay: 1s;
} }
.medium-stars .star:nth-child(7) { .medium-stars .star:nth-child(7) {
left: 200px; left: 200px;
bottom: 140px; bottom: 140px;
-webkit-animation-delay: 0.8s; -webkit-animation-delay: 0.8s;
animation-delay: 0.8s; animation-delay: 0.8s;
} }
.medium-stars .star:nth-child(8) { .medium-stars .star:nth-child(8) {
left: 30px; left: 30px;
bottom: 480px; bottom: 480px;
-webkit-animation-delay: 0.3s; -webkit-animation-delay: 0.3s;
animation-delay: 0.3s; animation-delay: 0.3s;
} }
.medium-stars .star:nth-child(9) { .medium-stars .star:nth-child(9) {
left: 460px; left: 460px;
bottom: 400px; bottom: 400px;
-webkit-animation-delay: 1.2s; -webkit-animation-delay: 1.2s;
animation-delay: 1.2s; animation-delay: 1.2s;
} }
.medium-stars .star:nth-child(10) { .medium-stars .star:nth-child(10) {
left: 150px; left: 150px;
bottom: 10px; bottom: 10px;
-webkit-animation-delay: 1s; -webkit-animation-delay: 1s;
animation-delay: 1s; animation-delay: 1s;
} }
.medium-stars .star:nth-child(11) { .medium-stars .star:nth-child(11) {
left: 420px; left: 420px;
bottom: 450px; bottom: 450px;
-webkit-animation-delay: 1.2s; -webkit-animation-delay: 1.2s;
animation-delay: 1.2s; animation-delay: 1.2s;
} }
.medium-stars .star:nth-child(12) { .medium-stars .star:nth-child(12) {
left: 340px; left: 340px;
bottom: 180px; bottom: 180px;
-webkit-animation-delay: 1.1s; -webkit-animation-delay: 1.1s;
animation-delay: 1.1s; animation-delay: 1.1s;
} }
@keyframes star-blink { @keyframes star-blink {
50% { 50% {
width: 4px; width: 4px;
height: 4px; height: 4px;
opacity: 1; opacity: 1;
} }
} }
.star-fall { .star-fall {
position: relative; position: relative;
border-radius: 2px; border-radius: 2px;
width: 80px; width: 80px;
height: 2px; height: 2px;
overflow: hidden; overflow: hidden;
-webkit-transform: rotate(-20deg); -webkit-transform: rotate(-20deg);
transform: rotate(-20deg); transform: rotate(-20deg);
} }
.star-fall:after { .star-fall:after {
content: ''; content: '';
position: absolute; position: absolute;
width: 50px; width: 50px;
height: 2px; height: 2px;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.4))); background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.4)));
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%); background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
left: 100%; left: 100%;
-webkit-animation: star-fall 3.6s linear infinite; -webkit-animation: star-fall 3.6s linear infinite;
animation: star-fall 3.6s linear infinite; animation: star-fall 3.6s linear infinite;
} }
.star-fall:nth-child(1) { .star-fall:nth-child(1) {
left: 80px; left: 80px;
bottom: -100px; bottom: -100px;
} }
.star-fall:nth-child(1):after { .star-fall:nth-child(1):after {
-webkit-animation-delay: 2.4s; -webkit-animation-delay: 2.4s;
animation-delay: 2.4s; animation-delay: 2.4s;
} }
.star-fall:nth-child(2) { .star-fall:nth-child(2) {
left: 200px; left: 200px;
bottom: -200px; bottom: -200px;
} }
.star-fall:nth-child(2):after { .star-fall:nth-child(2):after {
-webkit-animation-delay: 2s; -webkit-animation-delay: 2s;
animation-delay: 2s; animation-delay: 2s;
} }
.star-fall:nth-child(3) { .star-fall:nth-child(3) {
left: 430px; left: 430px;
bottom: -50px; bottom: -50px;
} }
.star-fall:nth-child(3):after { .star-fall:nth-child(3):after {
-webkit-animation-delay: 3.6s; -webkit-animation-delay: 3.6s;
animation-delay: 3.6s; animation-delay: 3.6s;
} }
.star-fall:nth-child(4) { .star-fall:nth-child(4) {
left: 400px; left: 400px;
bottom: 100px; bottom: 100px;
} }
.star-fall:nth-child(4):after { .star-fall:nth-child(4):after {
-webkit-animation-delay: 0.2s; -webkit-animation-delay: 0.2s;
animation-delay: 0.2s; animation-delay: 0.2s;
} }
@-webkit-keyframes star-fall { @-webkit-keyframes star-fall {
20% { 20% {
left: -100%; left: -100%;
} }
100% { 100% {
left: -100%; left: -100%;
} }
} }
@keyframes star-fall { @keyframes star-fall {
20% { 20% {
left: -100%; left: -100%;
} }
100% { 100% {
left: -100%; left: -100%;
} }
} }
</style> </style>
+35 -1
View File
@@ -5,25 +5,35 @@
* 时间:2024年06月22日 12:00:44 * 时间:2024年06月22日 12:00:44
* 版本:v0.1.0 * 版本:v0.1.0
*/ */
import {DefaultAppConfigs, getAppConfigs, setAppConfigs} from '@/config/index.js' import {DefaultAppConfigs, getAppConfigs, setAppConfigs,setAppMockJson,getAppMockJson} from '@/config/index.js'
import v2Config from '@/api/v2/all.config.js' import v2Config from '@/api/v2/all.config.js'
import utils from '@/utils/index.js'
export default { export default {
namespaced: true, namespaced: true,
state: { state: {
configs: getAppConfigs(), configs: getAppConfigs(),
mockJson: getAppMockJson(),
}, },
getters: { getters: {
getConfigs(state) { getConfigs(state) {
if (state.configs) return state.configs; if (state.configs) return state.configs;
return getAppConfigs() return getAppConfigs()
}, },
getMockJson(state) {
if(state.mockJson) return state.mockJson;
return getAppMockJson()
}
}, },
mutations: { mutations: {
setConfigs(state, data) { setConfigs(state, data) {
state.configs = data; state.configs = data;
setAppConfigs(data) setAppConfigs(data)
}, },
setMockJson(state, data) {
setAppMockJson(data)
state.mockJson = data;
}
}, },
actions: { actions: {
fetchConfigs({commit, dispatch}) { fetchConfigs({commit, dispatch}) {
@@ -47,5 +57,29 @@ export default {
setDefaultAppSettings({commit}) { setDefaultAppSettings({commit}) {
commit('setConfigs', JSON.parse(JSON.stringify(DefaultAppConfigs))) commit('setConfigs', JSON.parse(JSON.stringify(DefaultAppConfigs)))
}, },
// 请求模拟数据
fetchMockJson({state, commit, dispatch}) {
return new Promise(async (resolve, reject) => {
const mockJsonUrl = utils.checkUrl(state.configs.basicConfig.auditModeMockUrl)
uni.request({
url: mockJsonUrl,
method: "GET",
success: (res) => {
console.log("mockJson", res.data)
commit('setMockJson', res.data)
resolve({
ok: true,
data: res.data
})
},
fail: (err) => {
resolve({
ok: false,
data: err
})
}
})
})
},
} }
}; };