You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
528 lines
14 KiB
528 lines
14 KiB
<template>
|
|
<view class="page-container">
|
|
<!-- 导航栏组件 -->
|
|
<headerVue fixed></headerVue>
|
|
|
|
<!-- 灵动岛组件 -->
|
|
<DynamicIsland
|
|
ref="dynamicIsland"
|
|
:page-id="'timeShopBank_page'"
|
|
:style-type="'timeShop'"
|
|
/>
|
|
<view class="desc-box">
|
|
<view class="">
|
|
欢迎来到「旅行时间行」，你的精神财富储蓄所。
|
|
</view>
|
|
<view class="">
|
|
在这里，你的每一次人文漫游、每一次灵感闪现，都值得被郑重记录。我们鼓励你分享高质量的图文笔记，将旅途中的美与感动，化为这座精神星球上的璀璨星辰。
|
|
</view>
|
|
<view class="">
|
|
为他人的美好驻足、点赞、留言，每一次真诚的互动，都是在为你的时间银行存入一笔宝贵的「精神货币」。这些资产不仅可以兑换独家福利与实体好物，更能为你解锁专属的荣誉身份，让你成为这座星球上最闪耀的共创者。
|
|
</view>
|
|
<view class="">
|
|
即刻发布你的第一篇笔记，开启你的财富积累之旅吧！
|
|
</view>
|
|
</view>
|
|
|
|
<image style="width: 700rpx;height: 14rpx;margin: 20rpx auto;display: block;" :src="showImg('/uploads/20250829/f7214bc2a4f4e236561de893ca7b9113.png')"></image>
|
|
|
|
<!-- Tab切换组件 -->
|
|
<view class="tab-container">
|
|
<view class="tab-wrapper">
|
|
<view
|
|
v-for="(tab, index) in tabs"
|
|
:key="index"
|
|
class="tab-item"
|
|
:class="{ active: currentTab === index }"
|
|
@click="switchTab(index)"
|
|
>
|
|
<text class="tab-text">{{ tab.name }}</text>
|
|
<view v-if="currentTab === index" class="tab-indicator"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<view class="content-area">
|
|
<!-- <view v-if="currentTab === 0" class="notes-content">
|
|
<view class="fab-container">
|
|
<image
|
|
:src="
|
|
showImg('/uploads/20250825/7ea7864b8abb89c3dd7834f025e49b3f.png')
|
|
"
|
|
style="width: 91rpx; height: 91rpx"
|
|
></image>
|
|
</view>
|
|
<WaterfallLayout
|
|
:items="waterfallItems"
|
|
:column-count="2"
|
|
:column-gap="16"
|
|
:item-gap="16"
|
|
@item-click="handleItemClick"
|
|
style="margin-top: 20rpx"
|
|
/>
|
|
<text class="coming-soon">关注功能开发中...</text>
|
|
</view> -->
|
|
<view v-if="currentTab === 0" class="follow-content recommend-content">
|
|
<!-- <FollowTab /> -->
|
|
<text class="coming-soon">笔记功能开发中...</text>
|
|
</view>
|
|
<!-- 关注tab内容 -->
|
|
<view v-if="currentTab === 1" class="follow-content recommend-content">
|
|
<!-- <FollowTab /> -->
|
|
<text class="coming-soon">关注功能开发中...</text>
|
|
</view>
|
|
|
|
<!-- 推荐tab内容 -->
|
|
<view v-if="currentTab === 2" class="recommend-content">
|
|
<text class="coming-soon">推荐功能开发中...</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 控制按钮 -->
|
|
<!-- <view class="controls">
|
|
<button @click="addRandomItem" class="control-btn primary">
|
|
添加项目
|
|
</button>
|
|
<button @click="clearAllItems" class="control-btn danger">清空</button>
|
|
</view> -->
|
|
|
|
<!-- 底部占位区域，防止内容被TabBar遮挡 -->
|
|
<view class="tab-bar-placeholder"></view>
|
|
|
|
<!-- 底部TabBar组件 -->
|
|
<CustomTabBar :currentTab="2" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import WaterfallLayout from "@/components/WaterfallLayout.vue";
|
|
import headerVue from "@/components/header.vue";
|
|
import CustomTabBar from "@/components/CustomTabBar.vue";
|
|
import DynamicIsland from "@/components/DynamicIsland.vue";
|
|
import FollowTab from "./components/FollowTab.vue";
|
|
|
|
export default {
|
|
name: "TimeShopBank",
|
|
components: {
|
|
WaterfallLayout,
|
|
headerVue,
|
|
CustomTabBar,
|
|
DynamicIsland,
|
|
FollowTab,
|
|
},
|
|
data() {
|
|
return {
|
|
currentTab: 0, // 默认选中"笔记"
|
|
tabs: [
|
|
{ name: "笔记", id: "notes" },
|
|
{ name: "关注", id: "follow" },
|
|
{ name: "推荐", id: "recommend" },
|
|
],
|
|
waterfallItems: [
|
|
{
|
|
title: "生命的扶持|风景之旅",
|
|
image: "/uploads/20250824/2cf1f49920b911c9d14e4abf3b67a59c.png",
|
|
},
|
|
{
|
|
title: "苏州丨园林之美 鱼戏莲叶间心随鱼鸟闲",
|
|
image: "/uploads/20250824/c209044a821630158f6e6771805682a7.png",
|
|
},
|
|
{
|
|
title: "蘇州｜你一句春不晚，我便出现在真江南",
|
|
image: "/uploads/20250824/74101a77233375625282209392dc69e3.png",
|
|
},
|
|
{
|
|
title: "收好这天然氧吧",
|
|
image: "/uploads/20250824/e0ab7fd0483d05742451e8f10ab3ce24.png",
|
|
},
|
|
],
|
|
autoAddEnabled: false,
|
|
// 图片URL数组
|
|
images: [
|
|
"/uploads/20250824/2cf1f49920b911c9d14e4abf3b67a59c.png",
|
|
"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=800",
|
|
"https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=800",
|
|
"https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=800",
|
|
"https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?auto=format&fit=crop&w=800",
|
|
],
|
|
// 用户头像数组
|
|
avatars: [
|
|
"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=100",
|
|
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100",
|
|
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=100",
|
|
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=100",
|
|
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=100",
|
|
],
|
|
// 用户名数组
|
|
usernames: [
|
|
"杨璐摄影",
|
|
"旅行者小王",
|
|
"风景猎人",
|
|
"自然探索者",
|
|
"摄影师阿明",
|
|
],
|
|
// 不同长度的标题
|
|
shortTitles: ["城市风光", "自然美景", "湖光山色", "森林小径", "日出东方"],
|
|
mediumTitles: [
|
|
"繁华都市的夜景与灯光",
|
|
"壮丽的山脉与蓝天白云",
|
|
"宁静的湖泊与秋日树木",
|
|
"蜿蜒的小路穿过金色森林",
|
|
"清晨第一缕阳光照亮大地",
|
|
],
|
|
longTitles: [
|
|
"现代都市天际线在黄昏时分展现出迷人的轮廓，灯火辉煌的建筑倒映在水面上",
|
|
"雄伟的山脉在云雾缭绕中若隐若现，展现出大自然的壮丽与神秘",
|
|
"平静如镜的湖面倒映着五彩斑斓的秋叶，构成一幅完美的自然画卷",
|
|
"阳光透过茂密的树叶，在铺满落叶的林间小路上投下斑驳的光影",
|
|
"清晨的太阳从地平线缓缓升起，金色的光芒洒满整个大地，带来新的一天",
|
|
],
|
|
descriptions: [
|
|
"探索城市中隐藏的美丽角落，发现不为人知的风景",
|
|
"大自然的鬼斧神工创造了无数令人惊叹的景观",
|
|
"水与山的完美结合，创造出宁静致远的意境",
|
|
"漫步在森林中，感受大自然的清新与宁静",
|
|
"日出时分的美景总能带给人们希望和力量",
|
|
],
|
|
tagsList: [
|
|
["城市", "摄影", "旅行"],
|
|
["自然", "山脉", "探险"],
|
|
["湖泊", "秋天", "风景"],
|
|
["森林", "小路", "自然"],
|
|
["日出", "早晨", "美景"],
|
|
],
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.initializeData();
|
|
this.userInfo =
|
|
(uni.getStorageSync("userInfo") &&
|
|
JSON.parse(uni.getStorageSync("userInfo"))) ||
|
|
this.$store.state.user.userInfo ||
|
|
{};
|
|
},
|
|
onShow() {
|
|
if (this.userInfo && this.userInfo.id) {
|
|
this.getUserInfo();
|
|
}
|
|
},
|
|
|
|
// 页面滚动到底部时触发
|
|
onReachBottom() {
|
|
this.loadMoreItems();
|
|
},
|
|
|
|
// 页面滚动时触发 - 用于灵动岛样式切换
|
|
onPageScroll(e) {
|
|
// 只触发带页面ID的事件，避免不同页面间的状态冲突
|
|
uni.$emit("pageScroll_timeShopBank_page", e.scrollTop);
|
|
},
|
|
methods: {
|
|
getUserInfo() {
|
|
this.Post({}, "/framework/user/getInfo", "DES").then((res) => {
|
|
res.data.token = this.userInfo.token;
|
|
uni.setStorageSync("userInfo", JSON.stringify(res.data));
|
|
this.userInfo = res.data;
|
|
this.$nextTick(() => {
|
|
this.$refs.dynamicIsland.getUserInfo();
|
|
});
|
|
});
|
|
},
|
|
// 获取随机数据项
|
|
getRandomItem() {
|
|
const titleType =
|
|
Math.random() > 0.5
|
|
? Math.random() > 0.5
|
|
? this.longTitles
|
|
: this.mediumTitles
|
|
: this.shortTitles;
|
|
|
|
return {
|
|
id: Date.now() + Math.floor(Math.random() * 1000),
|
|
title: titleType[Math.floor(Math.random() * titleType.length)],
|
|
image: this.images[Math.floor(Math.random() * this.images.length)],
|
|
// description:
|
|
// this.descriptions[
|
|
// Math.floor(Math.random() * this.descriptions.length)
|
|
// ],
|
|
// tags: this.tagsList[Math.floor(Math.random() * this.tagsList.length)],
|
|
// 新增用户信息
|
|
user: {
|
|
avatar: this.avatars[Math.floor(Math.random() * this.avatars.length)],
|
|
name: this.usernames[
|
|
Math.floor(Math.random() * this.usernames.length)
|
|
],
|
|
},
|
|
likes: Math.floor(Math.random() * 999) + 1, // 1-999的随机点赞数
|
|
};
|
|
},
|
|
|
|
// 初始化数据
|
|
initializeData() {
|
|
const initialItems = [];
|
|
for (let i = 0; i < 20; i++) {
|
|
initialItems.push(this.getRandomItem());
|
|
}
|
|
// this.waterfallItems = initialItems;
|
|
},
|
|
|
|
// 添加随机项目
|
|
addRandomItem() {
|
|
const newItem = this.getRandomItem();
|
|
// this.waterfallItems.push(newItem);
|
|
},
|
|
|
|
// 清空所有项目
|
|
clearAllItems() {
|
|
uni.showModal({
|
|
title: "确认清空",
|
|
content: "确定要清空所有项目吗？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.waterfallItems = [];
|
|
}
|
|
},
|
|
});
|
|
},
|
|
|
|
// 处理项目点击
|
|
handleItemClick(item) {
|
|
// 跳转到笔记详情页面
|
|
uni.navigateTo({
|
|
url: `/pages/notes/detail`,
|
|
});
|
|
},
|
|
|
|
// 跳转到发布页面
|
|
goToPublish() {
|
|
uni.navigateTo({
|
|
url: "/pages/notes/publish",
|
|
});
|
|
},
|
|
|
|
// 处理项目添加
|
|
handleItemAdded(item) {},
|
|
|
|
// 处理自动添加请求
|
|
handleAutoAddRequest() {
|
|
this.addRandomItem();
|
|
},
|
|
|
|
// 加载更多项目（到达底部时调用）
|
|
loadMoreItems() {
|
|
const newItems = [];
|
|
for (let i = 0; i < 10; i++) {
|
|
newItems.push(this.getRandomItem());
|
|
}
|
|
// this.waterfallItems.push(...newItems);
|
|
},
|
|
|
|
// Tab切换方法
|
|
switchTab(index) {
|
|
this.currentTab = index;
|
|
// 根据不同tab加载不同内容
|
|
this.loadTabContent(this.tabs[index].id);
|
|
},
|
|
|
|
// 加载tab对应的内容
|
|
loadTabContent(tabId) {
|
|
// 这里可以根据不同的tabId加载不同的数据
|
|
// 重新初始化数据
|
|
this.initializeData();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
page {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.page-container {
|
|
min-height: 100vh;
|
|
background: white;
|
|
color: #333;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
justify-content: center;
|
|
margin: 40rpx 0;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.control-btn {
|
|
padding: 24rpx 48rpx;
|
|
border-radius: 48rpx;
|
|
font-size: 28rpx;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background: white;
|
|
color: #333;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.control-btn.primary {
|
|
background: #ff4757;
|
|
color: white;
|
|
}
|
|
|
|
.control-btn.danger {
|
|
background: #ff6b6b;
|
|
color: white;
|
|
}
|
|
|
|
.control-btn:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.tab-bar-placeholder {
|
|
height: 120rpx;
|
|
}
|
|
|
|
/* Tab切换样式 */
|
|
.tab-container {
|
|
background: #ffffff;
|
|
padding: 0 32rpx;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.tab-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
height: 88rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
font-weight: 400;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tab-item.active .tab-text {
|
|
color: #333333;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-indicator {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80rpx;
|
|
height: 4rpx;
|
|
background: #33fefe;
|
|
border-radius: 3rpx;
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
width: 80rpx;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 悬浮发布按钮 */
|
|
.fab-container {
|
|
position: fixed;
|
|
bottom: 250rpx;
|
|
right: 40rpx;
|
|
z-index: 999;
|
|
}
|
|
|
|
.fab-btn {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
background: linear-gradient(135deg, #ff4757, #ff6b7a);
|
|
color: #fff;
|
|
border: none;
|
|
box-shadow: 0 8rpx 24rpx rgba(255, 71, 87, 0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.3);
|
|
}
|
|
|
|
.fab-icon {
|
|
font-size: 48rpx;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
/* 内容区域样式 */
|
|
.content-area {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.notes-content {
|
|
position: relative;
|
|
height: 100%;
|
|
}
|
|
|
|
.follow-content {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.recommend-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 400rpx;
|
|
|
|
.coming-soon {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
.desc-box{
|
|
padding: 0 20rpx;
|
|
color: #616161;
|
|
margin: 30rpx 0;
|
|
font-size: 24rpx;
|
|
padding: 0 40rpx;
|
|
view{
|
|
margin-bottom: 20rpx;
|
|
&:nth-child(1){
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 自定义样式已移至WaterfallLayout组件内部 */
|
|
</style>
|
|
|