jiazhipeng
/
EpicSoul
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 时间银行

dev_des
1054425342@qq.com 3 months ago
parent
0863897eca
commit
7c5e7c19df
2 changed files with 219 additions and 234 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 182
      components/DynamicIsland.vue
  2. 271
      components/WaterfallLayout.vue

182
components/DynamicIsland.vue
View File

@ -16,54 +16,75 @@
>
<!-- 展开状态 -->
<view v-if="!actualCompactState" class="expanded-content">
<template v-if="styleType!='timeShop'">
<view class="top-section" >
<text class="welcome-text">{{ title }}</text>
<view class="qr-code">
<image style="width: 39rpx;height: 39rpx;" src="https://epic.js-dyyj.com/uploads/20250728/88e0991e58e692c86c25e42537edc6ca.png"></image>
</view>
</view>
<view class="bottom-section">
<view class="stats-section">
<view class="stat-item">
<text class="stat-number">{{ getStatNumber("权益") }}</text>
<text class="stat-label">权益</text>
</view>
<view class="stat-item">
<text class="stat-number">{{ getStatNumber("时间银行") }}</text>
<text class="stat-label">时间银行</text>
</view>
</view>
<view class="divider"></view>
<view class="action-section">
<text class="action-text">{{ actionText }}</text>
<image class="avatar" src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" mode="aspectFill"></image>
</view>
</view>
</template>
<template v-if="styleType=='timeShop'">
<view class="bottom-section">
<view class="stats-section">
<view class="stat-item">
<text class="stat-number">{{ getStatNumber("时间银行") }}</text>
<text class="stat-label">时间银行</text>
</view>
</view>
<view class="divider"></view>
<view class="action-section">
<view class="action-text-box">
<view class="action-text-box-des">
在努力一点点，为更好的未来蓄力吧！
</view>
<view class="action-text-box-msg">
<image class="action-text-box-img" :src="showImg('/uploads/20250728/d7ac383902515c9b507c78fdc8d29520.png')"></image>
今日点赞和留言<text style="font-size: 30rpx;font-weight: bold;margin: 0 10rpx;">100</text>条
</view>
</view>
<image class="avatar" src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" mode="aspectFill"></image>
</view>
</view>
</template>
<template v-if="styleType != 'timeShop'">
<view class="top-section">
<text class="welcome-text">{{ title }}</text>
<view class="qr-code">
<image
style="width: 39rpx; height: 39rpx"
src="https://epic.js-dyyj.com/uploads/20250728/88e0991e58e692c86c25e42537edc6ca.png"
></image>
</view>
</view>
<view class="bottom-section">
<view class="stats-section">
<view class="stat-item">
<text class="stat-number">{{ getStatNumber("权益") }}</text>
<text class="stat-label">权益</text>
</view>
<view class="stat-item">
<text class="stat-number">{{ getStatNumber("时间银行") }}</text>
<text class="stat-label">时间银行</text>
</view>
</view>
<view class="divider"></view>
<view class="action-section">
<text class="action-text">{{ actionText }}</text>
<image
class="avatar"
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
mode="aspectFill"
></image>
</view>
</view>
</template>
<template v-if="styleType == 'timeShop'">
<view class="bottom-section">
<view class="stats-section">
<view class="stat-item">
<text class="stat-number">{{ getStatNumber("时间银行") }}</text>
<text class="stat-label">时间银行</text>
</view>
</view>
<view class="divider"></view>
<view class="action-section">
<view class="action-text-box">
<view class="action-text-box-des">
在努力一点点，为更好的未来蓄力吧！
</view>
<view class="action-text-box-msg">
<image
class="action-text-box-img"
:src="
showImg(
'/uploads/20250728/d7ac383902515c9b507c78fdc8d29520.png'
)
"
></image>
今日点赞和留言<text
style="font-size: 30rpx; font-weight: bold; margin: 0 10rpx"
>100</text
>条
</view>
</view>
<image
class="avatar"
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
mode="aspectFill"
></image>
</view>
</view>
</template>
</view>
<!-- 紧凑状态 -->
@ -71,7 +92,7 @@
<text class="compact-name">{{ getCompactName() }}</text>
<image
class="compact-avatar"
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
mode="aspectFill"
></image>
</view>
@ -87,7 +108,7 @@ export default {
type: Boolean,
default: false,
},
styleType: {
styleType: {
type: String,
default: "",
},
@ -113,9 +134,8 @@ export default {
},
// 新增页面标识符，用于区分不同页面的灵动岛实例
pageId: {
type: String,
default: 'default_page'
default: "default_page",
},
},
data() {
@ -143,7 +163,7 @@ export default {
// 计算固定定位的top值
fixedTopPosition() {
// 状态栏高度 + 导航栏高度(40px) + 间距(20px)
return this.statusBarHeight + 40+20 ;
return this.statusBarHeight + 40 + 20;
},
// 计算占位区域高度 - 始终保持固定高度，等于灵动岛大卡片高度
placeholderHeight() {
@ -209,7 +229,7 @@ export default {
addScrollListener() {
// 只监听带页面ID的滚动事件，避免不同页面间的状态冲突
const eventName = `pageScroll_${this.pageId}`;
console.log('DynamicIsland 添加滚动监听:', eventName);
console.log("DynamicIsland 添加滚动监听:", eventName);
uni.$on(eventName, this.handlePageScroll);
},
// 移除滚动监听
@ -222,18 +242,9 @@ export default {
handlePageScroll(e) {
const scrollTop = e.scrollTop || e;
const shouldScroll = scrollTop > this.scrollThreshold;
console.log('DynamicIsland 接收到滚动事件:', {
pageId: this.pageId,
scrollTop,
shouldScroll,
currentIsScrolled: this.isScrolled
});
if (this.isScrolled !== shouldScroll) {
this.isScrolled = shouldScroll;
console.log('DynamicIsland 状态切换:', shouldScroll ? '紧凑模式' : '展开模式');
// 添加触觉反馈
if (uni.vibrateShort) {
uni.vibrateShort();
@ -278,7 +289,11 @@ export default {
// 获取用户信息
getUserInfo() {
try {
this.userInfo = (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))) || this.$store.state.user.userInfo || {};
this.userInfo =
(uni.getStorageSync("userInfo") &&
JSON.parse(uni.getStorageSync("userInfo"))) ||
this.$store.state.user.userInfo ||
{};
// 更新标题显示用户昵称
if (this.userInfo && this.userInfo.nickname) {
this.currentTitle = `Hi！${this.userInfo.nickname}，欢迎回来～`;
@ -321,8 +336,8 @@ export default {
-webkit-backdrop-filter: blur(20rpx);
border: 1rpx solid rgba(255, 255, 255, 0.1);
border-radius: 40rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3),
0 0 0 1rpx rgba(255, 255, 255, 0.05) inset;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3),
0 0 0 1rpx rgba(255, 255, 255, 0.05) inset;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
@ -395,7 +410,6 @@ export default {
.qr-code {
width: 32rpx;
height: 32rpx;
}
.qr-icon {
@ -563,22 +577,22 @@ export default {
// }
// }
// }
.action-text-box{
color: white;
.action-text-box-des{
font-size: 20rpx;
}
.action-text-box-msg{
font-size: 24rpx;
display: flex;
align-items: center;
margin-top: 20rpx;
}
.action-text-box-img{
width: 57rpx;
height: 46rpx;
margin-right: 10rpx;
}
.action-text-box {
color: white;
.action-text-box-des {
font-size: 20rpx;
}
.action-text-box-msg {
font-size: 24rpx;
display: flex;
align-items: center;
margin-top: 20rpx;
}
.action-text-box-img {
width: 57rpx;
height: 46rpx;
margin-right: 10rpx;
}
}
</style>

271
components/WaterfallLayout.vue
View File

@ -1,49 +1,69 @@
<template>
<view class="waterfall-layout">
<!-- 瀑布流容器 -->
<view
class="waterfall-container"
:style="{ height: containerHeight + 'rpx' }"
>
<view
class="waterfall-item"
v-for="(item, index) in positionedItems"
:key="item.id"
:style="{
position: 'absolute',
left: item.left + 'rpx',
top: item.top + 'rpx',
width: item.width + 'rpx',
}"
@click="handleItemClick(item)"
>
<!-- 图片 -->
<image
v-if="item.image"
:src="item.image"
class="item-image"
mode="aspectFill"
/>
<!-- 内容区域 -->
<view class="item-content">
<text v-if="item.title" class="item-title">{{ item.title }}</text>
<!-- <text v-if="item.description" class="item-desc">{{ item.description }}</text> -->
<!-- <view v-if="item.tags && item.tags.length" class="item-tags">
<text class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</text>
</view> -->
<!-- 用户信息和点赞 -->
<view v-if="item.user" class="item-footer">
<view class="user-info">
<image
:src="item.user.avatar"
class="user-avatar"
mode="aspectFill"
/>
<text class="username">{{ item.user.name }}</text>
<view class="waterfall-container">
<!-- 左列 -->
<view class="column">
<view
v-for="(item, index) in leftItems"
:key="item.id || index"
class="waterfall-item"
@click="handleItemClick(item)"
>
<image
v-if="item.image"
:src="item.image"
class="item-image"
mode="aspectFill"
/>
<view class="item-content">
<text v-if="item.title" class="item-title">{{ item.title }}</text>
<view v-if="item.user" class="item-footer">
<view class="user-info">
<image
:src="item.user.avatar"
class="user-avatar"
mode="aspectFill"
/>
<text class="username">{{ item.user.name }}</text>
</view>
<view class="like-info">
<text class="like-icon">♥</text>
<text class="like-count">{{ item.likes }}</text>
</view>
</view>
<view class="like-info">
<text class="like-icon">♥</text>
<text class="like-count">{{ item.likes }}</text>
</view>
</view>
</view>
<!-- 右列 -->
<view class="column">
<view
v-for="(item, index) in rightItems"
:key="item.id || index"
class="waterfall-item"
@click="handleItemClick(item)"
>
<image
v-if="item.image"
:src="item.image"
class="item-image"
mode="aspectFill"
/>
<view class="item-content">
<text v-if="item.title" class="item-title">{{ item.title }}</text>
<view v-if="item.user" class="item-footer">
<view class="user-info">
<image
:src="item.user.avatar"
class="user-avatar"
mode="aspectFill"
/>
<text class="username">{{ item.user.name }}</text>
</view>
<view class="like-info">
<text class="like-icon">♥</text>
<text class="like-count">{{ item.likes }}</text>
</view>
</view>
</view>
</view>
@ -61,7 +81,7 @@ export default {
type: Array,
default: () => [],
},
// 列数
// 列数（固定为2列）
columnCount: {
type: Number,
default: 2,
@ -79,128 +99,66 @@ export default {
},
data() {
return {
positionedItems: [],
containerHeight: 0,
columnHeights: [],
leftItems: [],
rightItems: [],
};
},
watch: {
items: {
handler() {
this.$nextTick(() => {
this.calculateLayout();
});
handler(newItems) {
this.calculateLayout(newItems);
},
immediate: true,
deep: true,
},
},
mounted() {
this.calculateLayout();
this.calculateLayout(this.items);
},
methods: {
// 计算布局
calculateLayout() {
if (!this.items.length) {
this.positionedItems = [];
this.containerHeight = 0;
return;
}
// 初始化列高度
this.columnHeights = new Array(this.columnCount).fill(0);
this.positionedItems = [];
// 逐个处理项目
this.items.forEach((item, index) => {
this.calculateItemPosition(item, index);
// 获取列的实际高度（通过DOM查询）
getColumnHeight(columnRef) {
if (!columnRef) return 0;
const query = uni.createSelectorQuery().in(this);
return new Promise((resolve) => {
query.select(columnRef).boundingClientRect((data) => {
resolve(data ? data.height : 0);
}).exec();
});
// 设置容器高度
this.containerHeight = Math.max(...this.columnHeights) + this.itemGap;
},
// 计算单个项目位置
calculateItemPosition(item, index) {
// 找到最短的列
const shortestColumnIndex = this.columnHeights.indexOf(Math.min(...this.columnHeights))
// 协调的间距计算：左右边距20rpx，列间距16rpx
const sideMargin = 20 // 左右边距
const columnGap = 16 // 列间距
// 确保左右边距都是20rpx的计算方式
const availableWidth = 750 - 2 * sideMargin // 可用宽度 = 750 - 40 = 710rpx
const itemWidth = Math.floor((availableWidth - (this.columnCount - 1) * columnGap) / this.columnCount)
// 计算位置 - 确保左右边距都是20rpx
const left = sideMargin + shortestColumnIndex * (itemWidth + columnGap)
// 修正top计算：第一行距离顶部itemGap，后续项目距离上一个项目itemGap
const top = this.columnHeights[shortestColumnIndex] === 0 ? this.itemGap : this.columnHeights[shortestColumnIndex] + this.itemGap;
// 估算项目高度
const estimatedHeight = this.estimateItemHeight(item);
// 添加到定位项目数组
this.positionedItems.push({
...item,
left,
top,
width: itemWidth,
});
// 更新列高度
this.columnHeights[shortestColumnIndex] = top + estimatedHeight;
},
// 估算项目高度
estimateItemHeight(item) {
let height = 0;
// 图片高度
if (item.image) {
height += 476; // 图片固定高度
// 计算布局
calculateLayout(items) {
if (!items || !items.length) {
this.leftItems = [];
this.rightItems = [];
return;
}
// 内容区域padding
height += 32; // 上下padding各16rpx
// 清空现有数据
this.leftItems = [];
this.rightItems = [];
// 标题高度 - 更精确的计算
if (item.title) {
// 基于字符数和换行估算，考虑中英文混合
const titleLength = item.title.length;
const charsPerLine = 12; // 每行大约12个字符（考虑中文字符较宽）
const titleLines = Math.min(Math.ceil(titleLength / charsPerLine), 2);
height += titleLines * 40 + 12; // 行高40rpx（稍微增加） + 底部间距
// 逐个添加项目
for (let i = 0; i < items.length; i++) {
this.addItem(items[i]);
}
},
// 描述高度 - 更精确的计算
// if (item.description) {
// const descLength = item.description.length;
// const charsPerLine = 15; // 描述文字稍小，每行约15个字符
// const descLines = Math.min(Math.ceil(descLength / charsPerLine), 2);
// height += descLines * 36 + 16; // 行高36rpx + 底部间距
// }
// 标签高度 - 考虑多行标签
// if (item.tags && item.tags.length) {
// // 估算标签可能占用的行数
// const tagRows = Math.ceil(item.tags.length / 3); // 假设每行最多3个标签
// height += tagRows * 36 + 16; // 每行标签高度36rpx + 底部间距
// }
// 用户信息区域
if (item.user) {
height += 48 + 16; // 用户信息高度 + 底部间距
// 添加单个项目到合适的列
addItem(item) {
// 简单的交替分配逻辑：比较两列的项目数量
if (this.leftItems.length <= this.rightItems.length) {
this.leftItems.push(item);
} else {
this.rightItems.push(item);
}
return height;
},
// 清空所有项目
clearItems() {
this.positionedItems = [];
this.containerHeight = 0;
this.columnHeights = new Array(this.columnCount).fill(0);
this.leftItems = [];
this.rightItems = [];
this.$emit("items-cleared");
},
@ -211,19 +169,25 @@ export default {
// 获取所有项目
getAllItems() {
return this.positionedItems;
return [...this.leftItems, ...this.rightItems];
},
// 移除项目
removeItem(itemId) {
const index = this.positionedItems.findIndex(
(item) => item.id === itemId
);
// 从左列移除
let index = this.leftItems.findIndex(item => item.id === itemId);
if (index !== -1) {
this.positionedItems.splice(index, 1);
this.calculateLayout(); // 重新计算布局
this.leftItems.splice(index, 1);
this.$emit("item-removed", itemId);
return;
}
// 从右列移除
index = this.rightItems.findIndex(item => item.id === itemId);
if (index !== -1) {
this.rightItems.splice(index, 1);
this.$emit("item-removed", itemId);
}
this.$emit("item-removed", itemId);
},
},
};
@ -236,12 +200,19 @@ export default {
}
.waterfall-container {
position: relative;
width: 100%;
display: flex;
gap: 16rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
.column {
flex: 1;
display: flex;
flex-direction: column;
gap: 16rpx;
}
.waterfall-item {
box-sizing: border-box;
border-radius: 12rpx;

Write Preview
Loading…
Cancel
Save