zzc/spring-festival-greetings
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: gretting page

Browse Source
This commit is contained in:
zzc
2026-02-03 10:25:47 +08:00
parent b2e41c9a7b
commit 82fc0f80a5
3 changed files with 263 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/make/index.vue
View File

@@ -250,7 +250,7 @@
v-model="signatureName"
placeholder="请输入署名"
placeholder-style="color:#ccc"
maxlength="5"
maxlength="10"
@blur="handleSignatureBlur"
/>
<text class="edit-icon">✎</text>

549
pages/mine/greeting.vue
View File

@@ -1,13 +1,13 @@
<template>
<view class="greeting-page" >
<NavBar title="我的祝福" />
<view class="greeting-page">
<NavBar title="我的新春祝福" background="transparent" />
<!-- Header Stats -->
<view class="header-stats">
<view class="stats-card">
<view class="stats-left">
<view class="icon-circle">
<text>✨</text>
<text class="sparkle-emoji">✨</text>
</view>
<view class="stats-info">
<text class="label">已累计创作</text>
@@ -28,69 +28,63 @@
<!-- List Section -->
<view class="list-section">
<view class="section-header">
<text class="section-title">祝福列表</text>
<text class="section-tip">左滑删除记录</text>
<text class="section-title">祝福库</text>
</view>
<view class="list-container">
<view v-for="item in list" :key="item.id" class="list-item-wrap">
<view class="swipe-container">
<!-- Delete Action (Behind) -->
<view class="delete-action" @tap.stop="onDelete(item)">
<text>删除</text>
<view class="list-grid">
<view
v-for="item in list"
:key="item.id"
class="card-item"
@tap="onDetail(item)"
>
<view class="card-image-wrap">
<image :src="item.imageUrl" mode="aspectFill" class="card-img" />
<view class="year-badge" v-if="item.year">{{ item.year }}</view>
<view class="draft-overlay" v-if="item.status === 'draft'">
<text class="lock-icon">🔒</text>
</view>
<!-- Card Content (Front) -->
<view
class="card-item"
:style="{
transform: `translateX(${item.translateX || 0}px)`,
transition: item.useTransition ? 'transform 0.3s' : 'none',
}"
@touchstart="onTouchStart($event, item)"
@touchmove="onTouchMove($event, item)"
@touchend="onTouchEnd($event, item)"
</view>
<view class="card-info">
<view class="card-title"
>{{ item.blessingTo || "祝全家" }}福寿双全</view
>
<image :src="item.imageUrl" mode="aspectFill" class="card-img" />
<view class="card-content">
<view class="card-title"
>{{ item.blessingTo
}}{{
item.blessingFrom ? item.blessingFrom : "好友"
}}身体健康</view
>
<view class="card-date"
>更新时间：{{ formatDate(item.updatedAt) }}</view
>
<view class="tags">
<view class="tag yellow" v-if="item.festival">{{
item.festival
}}</view>
<view class="tag red" v-if="item.year">{{ item.year }}</view>
</view>
</view>
<view class="card-actions">
<view class="card-date">{{ formatDate(item.updatedAt) }}</view>
<view class="card-footer">
<view class="tag" :class="getTagClass(item)">{{
getTagText(item)
}}</view>
<view class="actions">
<view class="action-btn" @tap.stop="onShare(item)">
<text class="icon">🔗</text>
<text class="action-emoji">🔗</text>
</view>
<view class="action-btn" @tap.stop="onEdit(item)">
<text class="icon">✎</text>
<view class="action-btn" @tap.stop="onMore(item)">
<text class="action-emoji">⋯</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- Loading State -->
<view class="loading-state" v-if="loading">
<text>加载中...</text>
</view>
<view class="empty-state" v-if="!loading && list.length === 0">
<text>暂无祝福记录</text>
</view>
<view class="no-more" v-if="!loading && !hasMore && list.length > 0">
<text>没有更多了</text>
</view>
<!-- Loading State -->
<view class="loading-state" v-if="loading">
<text>加载中...</text>
</view>
<view class="empty-state" v-if="!loading && list.length === 0">
<text>暂无祝福记录</text>
</view>
<view class="footer-note" v-if="!loading && list.length > 0">
<text>2026 丙午马年 · 祝福管理助手</text>
</view>
</view>
<!-- FAB -->
<view class="fab-btn" @tap="onMake">
<view class="fab-content">
<text class="fab-emoji">✍️</text>
<text>新春制作</text>
</view>
</view>
</view>
@@ -102,92 +96,24 @@ import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { getMyCard } from "@/api/mine.js";
import NavBar from "@/components/NavBar/NavBar.vue";
const navBarTop = ref(0);
const navBarHeight = ref(44);
const list = ref([]);
const page = ref(1);
const loading = ref(false);
const hasMore = ref(true);
const isRefreshing = ref(false);
const totalCount = ref(0);
const deleteOptions = ref([
{
text: "删除",
style: {
backgroundColor: "#ff3b30",
},
},
]);
// Swipe Logic
const startX = ref(0);
const activeItem = ref(null);
const MAX_SWIPE_WIDTH = 80;
const onTouchStart = (e, item) => {
if (e.touches.length > 1) return;
// Close other items
if (activeItem.value && activeItem.value.id !== item.id) {
activeItem.value.translateX = 0;
activeItem.value.useTransition = true;
}
startX.value = e.touches[0].clientX;
item.useTransition = false;
activeItem.value = item;
};
const onTouchMove = (e, item) => {
if (e.touches.length > 1) return;
const currentX = e.touches[0].clientX;
const deltaX = currentX - startX.value;
// Allow swiping left (negative) up to -MAX_SWIPE_WIDTH
// If already open (translateX = -80), deltaX needs to be adjusted
// But simpler: just use delta from 0 position.
// Actually, standard swipe logic needs to account for current position.
// For simplicity: assume always starting from 0 (closed) or -80 (open).
// But if we start drag from open state, we need to handle it.
// Let's stick to "start from 0" logic for now, assuming auto-close.
// If item is already open, and we swipe right, we close it.
// Re-calculate based on initial offset if we want to support dragging from open.
// For now: simple close-on-touch-other logic covers most cases.
// We assume startX is from a state where it is either 0 or -80.
// But `item.translateX` might be -80.
let targetX = deltaX;
if (item.translateX === -MAX_SWIPE_WIDTH) {
targetX = -MAX_SWIPE_WIDTH + deltaX;
}
if (targetX < -MAX_SWIPE_WIDTH) targetX = -MAX_SWIPE_WIDTH;
if (targetX > 0) targetX = 0;
item.translateX = targetX;
};
const onTouchEnd = (e, item) => {
item.useTransition = true;
if (item.translateX < -30) {
item.translateX = -MAX_SWIPE_WIDTH;
} else {
item.translateX = 0;
}
};
onMounted(() => {
fetchList(true);
});
onPullDownRefresh(() => {
onRefresh();
fetchList(true);
});
onReachBottom(() => {
loadMore();
if (hasMore.value && !loading.value) {
fetchList();
}
});
const fetchList = async (reset = false) => {
@@ -216,27 +142,12 @@ const fetchList = async (reset = false) => {
}
} catch (e) {
console.error("Failed to fetch greeting list", e);
uni.showToast({ title: "加载失败", icon: "none" });
} finally {
loading.value = false;
isRefreshing.value = false;
uni.stopPullDownRefresh();
}
};
const loadMore = () => {
fetchList();
};
const onRefresh = () => {
isRefreshing.value = true;
fetchList(true);
};
const goBack = () => {
uni.navigateBack();
};
const formatDate = (dateStr) => {
if (!dateStr) return "";
const date = new Date(dateStr);
@@ -246,75 +157,103 @@ const formatDate = (dateStr) => {
return `${y}-${m}-${d}`;
};
const getTagText = (item) => {
if (item.status === "draft") return "草稿";
return item.festival || "金榜";
};
const getTagClass = (item) => {
if (item.status === "draft") return "tag-draft";
const tagMap = {
春节: "tag-spring",
金榜: "tag-gold",
马到: "tag-horse",
水墨: "tag-ink",
};
return tagMap[item.festival] || "tag-gold";
};
const onDetail = (item) => {
uni.navigateTo({
url: `/pages/detail/index?id=${item.id}`,
});
};
const onMake = () => {
uni.switchTab({
url: "/pages/make/index",
});
};
const onShare = (item) => {
uni.showToast({ title: "分享功能开发中", icon: "none" });
};
const onMore = (item) => {
uni.showActionSheet({
itemList: ["编辑", "删除"],
success: (res) => {
if (res.tapIndex === 0) {
// Edit
} else if (res.tapIndex === 1) {
onDelete(item);
}
},
});
};
const onDelete = (item) => {
uni.showModal({
title: "提示",
content: "确定要删除这条祝福吗？",
success: (res) => {
if (res.confirm) {
// Implement delete API call here
// For now just remove from list locally
list.value = list.value.filter((i) => i.id !== item.id);
totalCount.value = Math.max(0, totalCount.value - 1);
uni.showToast({ title: "删除成功", icon: "none" });
} else {
// Reset swipe state if cancelled
item.translateX = 0;
}
},
});
};
const onShare = (item) => {
// Implement share logic
uni.showToast({ title: "分享功能开发中", icon: "none" });
};
const onEdit = (item) => {
// Implement edit logic
uni.showToast({ title: "编辑功能开发中", icon: "none" });
};
</script>
<style lang="scss" scoped>
.greeting-page {
min-height: 100vh;
background: #f9f9f9;
display: flex;
flex-direction: column;
background: #fbf9f2;
padding-bottom: 120rpx;
box-sizing: border-box;
}
.header-stats {
padding: 20px;
background: #f9f9f9;
margin-top: 44px; // Initial offset for fixed nav
padding: 30rpx 40rpx;
margin-top: 20rpx;
.stats-card {
background: #fff;
border-radius: 20px;
padding: 24px;
border-radius: 40rpx;
padding: 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.02);
.stats-left {
display: flex;
align-items: center;
.icon-circle {
width: 48px;
height: 48px;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background: #fff0f0;
background: #fff5f5;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
margin-right: 24rpx;
text {
font-size: 24px;
.sparkle-emoji {
font-size: 50rpx;
}
}
@@ -323,9 +262,9 @@ const onEdit = (item) => {
flex-direction: column;
.label {
font-size: 12px;
font-size: 24rpx;
color: #999;
margin-bottom: 4px;
margin-bottom: 8rpx;
}
.value-wrap {
@@ -333,14 +272,14 @@ const onEdit = (item) => {
align-items: baseline;
.value {
font-size: 24px;
font-size: 40rpx;
font-weight: bold;
color: #333;
margin-right: 4px;
margin-right: 8rpx;
}
.unit {
font-size: 12px;
font-size: 24rpx;
color: #666;
}
}
@@ -348,30 +287,29 @@ const onEdit = (item) => {
}
.divider {
width: 1px;
height: 40px;
background: #eee;
margin: 0 20px;
width: 1rpx;
height: 80rpx;
background: #f0f0f0;
}
.stats-right {
display: flex;
flex-direction: column;
align-items: center;
min-width: 80px;
padding-left: 20rpx;
.label {
font-size: 12px;
font-size: 24rpx;
color: #999;
margin-bottom: 8px;
margin-bottom: 12rpx;
}
.value {
font-size: 16px;
font-weight: 600;
font-size: 32rpx;
font-weight: bold;
&.red-text {
color: #ff3b30;
color: #ff4d4f;
}
}
}
@@ -379,89 +317,86 @@ const onEdit = (item) => {
}
.list-section {
flex: 1;
display: flex;
flex-direction: column;
padding: 0 20px;
padding: 0 40rpx;
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
margin: 40rpx 0 24rpx;
.section-title {
font-size: 16px;
font-weight: 600;
color: #666;
}
.section-tip {
font-size: 12px;
color: #ccc;
font-size: 32rpx;
font-weight: bold;
color: #7c6d5d;
}
}
.list-container {
padding-bottom: 40px;
.list-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30rpx;
}
}
.list-item-wrap {
margin-bottom: 16px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.swipe-container {
position: relative;
width: 100%;
background: #ff3b30; // Delete background color
}
.delete-action {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
background-color: #ff3b30;
color: #fff;
font-size: 14px;
z-index: 1;
}
.card-item {
background: #fff;
padding: 16px;
display: flex;
align-items: center;
position: relative;
z-index: 2;
width: 100%;
box-sizing: border-box;
border-radius: 48rpx;
overflow: hidden;
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);
.card-img {
width: 80px;
height: 80px;
border-radius: 12px;
margin-right: 16px;
background: #f5f5f5;
.card-image-wrap {
position: relative;
width: 100%;
padding-bottom: 133%; // 3:4 aspect ratio
background: #fdf3e7;
.card-img {
position: absolute;
top: 20rpx;
left: 20rpx;
right: 20rpx;
bottom: 20rpx;
width: auto;
height: auto;
border-radius: 12rpx;
}
.year-badge {
position: absolute;
top: 20rpx;
left: 20rpx;
background: #ff4d4f;
color: #fff;
font-size: 20rpx;
padding: 4rpx 12rpx;
border-radius: 8rpx;
font-weight: bold;
}
.draft-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
.icon {
font-size: 40rpx;
opacity: 0.3;
}
}
}
.card-content {
flex: 1;
margin-right: 12px;
.card-info {
padding: 24rpx;
.card-title {
font-size: 16px;
font-weight: 600;
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 8px;
margin-bottom: 8rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
@@ -469,68 +404,104 @@ const onEdit = (item) => {
}
.card-date {
font-size: 12px;
font-size: 22rpx;
color: #999;
margin-bottom: 8px;
margin-bottom: 20rpx;
}
.tags {
.card-footer {
display: flex;
gap: 8px;
justify-content: space-between;
align-items: center;
.tag {
font-size: 10px;
padding: 2px 8px;
border-radius: 8px;
font-size: 20rpx;
padding: 4rpx 16rpx;
border-radius: 20rpx;
&.yellow {
background: #fff8e1;
color: #ffb300;
&.tag-gold {
background: #fff8e6;
color: #ffb800;
}
&.red {
background: #ffebee;
color: #ff3b30;
&.tag-horse {
background: #fff1f0;
color: #ff4d4f;
}
&.tag-ink {
background: #f0f5ff;
color: #2f54eb;
}
&.tag-draft {
background: #f5f5f5;
color: #bfbfbf;
}
&.tag-spring {
background: #fff1f0;
color: #ff4d4f;
}
}
&.blue {
background: #e3f2fd;
color: #2196f3;
.actions {
display: flex;
gap: 16rpx;
.action-btn {
.action-emoji {
font-size: 32rpx;
opacity: 0.6;
}
}
}
}
}
}
.card-actions {
.fab-btn {
position: fixed;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
z-index: 100;
.fab-content {
background: #ff4d4f;
padding: 20rpx 48rpx;
border-radius: 100rpx;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
box-shadow: 0 10rpx 30rpx rgba(255, 77, 79, 0.3);
.action-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
.fab-emoji {
font-size: 36rpx;
margin-right: 12rpx;
}
.icon {
font-size: 20px;
color: #666;
}
&:active {
opacity: 0.6;
}
text {
color: #fff;
font-size: 32rpx;
font-weight: bold;
}
}
&:active {
opacity: 0.9;
transform: translateX(-50%) scale(0.95);
}
}
.footer-note {
text-align: center;
padding: 60rpx 0 40rpx;
font-size: 24rpx;
color: #ccc;
}
.loading-state,
.empty-state,
.no-more {
.empty-state {
grid-column: span 2;
text-align: center;
padding: 20px;
padding: 100rpx 0;
color: #999;
font-size: 12px;
font-size: 28rpx;
}
</style>

4
pages/mine/mine.vue
View File

@@ -63,11 +63,11 @@
<!-- My Creations -->
<view class="section-title">我的创作</view>
<view class="menu-group">
<!-- <view class="menu-item" @tap="navTo('greetings')">
<view class="menu-item" @tap="navTo('greetings')">
<view class="icon-box red-bg"><text>🧧</text></view>
<text class="menu-text">我的新春祝福</text>
<text class="arrow">›</text>
</view> -->
</view>
<view class="menu-item" @tap="navTo('fortune-record')">
<view class="icon-box orange-bg"><text>📹</text></view>
<text class="menu-text">我的新年运势</text>