spring-festival-greetings/pages/spring/index.vue

<template>
  <view class="spring-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
    <!-- 顶部 Banner -->
    <view class="hero">
      <view class="hero-badge">
        <text class="badge-dot">•</text>
        <text class="badge-text">距春节还有 15 天</text>
      </view>
      <view class="hero-title">
        <text class="year">2026</text>
        <text class="main">新春祝福</text>
      </view>
      <text class="hero-sub">新年快乐，万事如意</text>
      <image
        class="hero-decor"
        src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png"
        mode="aspectFill"
      />
    </view>

    <!-- 功能入口宫格 -->
    <view class="feature-grid">
      <view
        v-for="(item, idx) in features"
        :key="idx"
        class="feature-item"
        @tap="onFeatureTap(item)"
      >
        <image class="feature-icon" :src="item.icon" mode="aspectFill" />
        <view class="feature-texts">
          <text class="feature-title">{{ item.title }}</text>
          <text class="feature-sub">{{ item.subtitle }}</text>
        </view>
      </view>
    </view>

    <!-- 大家都在用 -->
    <view class="section">
      <view class="section-header">
        <view class="section-bar"></view>
        <text class="section-title">大家都在用</text>
        <text class="section-more" @tap="onMore('use')">更多</text>
      </view>
      <scroll-view scroll-x class="cards-scroll" show-scrollbar="false">
        <view class="cards-wrap">
          <view
            v-for="(card, i) in popularCards"
            :key="i"
            class="use-card"
            @tap="previewCard(card)"
          >
            <image :src="card.cover" class="use-cover" mode="aspectFill" />
            <view class="use-info">
              <text class="use-title">{{ card.title }}</text>
              <text class="use-sub">{{ card.sub }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 最新祝福 -->
    <view class="section">
      <view class="section-header">
        <view class="section-bar"></view>
        <text class="section-title">最新祝福</text>
      </view>

      <view class="feed-list">
        <view v-for="(post, i) in feeds" :key="i" class="feed-item">
          <view class="feed-header">
            <image :src="post.avatar" class="feed-avatar" mode="aspectFill" />
            <view class="feed-user">
              <text class="feed-name">{{ post.name }}</text>
              <text class="feed-time">{{ post.time }}</text>
            </view>
          </view>
          <view class="feed-content">
            <text class="feed-text">{{ post.text }}</text>
            <image
              v-if="post.image"
              :src="post.image"
              class="feed-image"
              mode="aspectFill"
            />
          </view>
          <view class="feed-actions">
            <view class="action" @tap="like(i)">
              <text class="icon">❤</text>
              <text>{{ post.likes }}</text>
            </view>
            <view class="action" @tap="comment(i)">
              <text class="icon">💬</text>
              <text>{{ post.comments }}</text>
            </view>
            <view class="action" @tap="share(i)">
              <text class="icon">↗</text>
              <text>分享</text>
            </view>
          </view>
        </view>
      </view>

      <view class="see-more" @tap="onMore('feed')">查看更多祝福…</view>
    </view>

    <!-- 底部中间发布按钮 -->
    <view class="fab" @tap="createGreeting">
      <text class="fab-plus">＋</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import {
  onPullDownRefresh,
  onShareAppMessage,
  onShareTimeline,
} from "@dcloudio/uni-app";
import { getBavBarHeight } from "@/utils/system";
import { getShareReward } from "@/api/system";
import { getShareToken } from "@/utils/common";

const features = ref([
  {
    title: "新春祝福卡片",
    subtitle: "龙年贺卡",
    icon: "https://file.lihailezzc.com/resource/6b6cb83abf3a9c9b78a4744238b5b851.png",
    type: "card",
  },
  {
    title: "视频拜年",
    subtitle: "AI合成短视频",
    icon: "https://file.lihailezzc.com/resource/1a7b4b9d2b9b4bcb88f14c9f1ef4413a.png",
    type: "video",
  },
  {
    title: "新春头像装饰",
    subtitle: "锦上添花",
    icon: "https://file.lihailezzc.com/resource/5e7d2b8d1c34c22f9c4f4f4cb4cba70d.png",
    type: "avatar_decor",
  },
  {
    title: "马年主题头像框",
    subtitle: "2026限定",
    icon: "https://file.lihailezzc.com/resource/9f80ab295b7e0a7a5f62c3b0f2d7a11c.png",
    type: "avatar_frame",
  },
]);

const popularCards = ref([
  {
    title: "极简祝福金框",
    sub: "极简风格",
    cover:
      "https://file.lihailezzc.com/resource/7a5b2f2f5d6c42b5b21b8b1c9b28a3a1.jpg",
  },
  {
    title: "红包封面",
    sub: "新春限定",
    cover:
      "https://file.lihailezzc.com/resource/9b3d2a1a4c7b4a4a9e3b94c4a2b9c3e2.jpg",
  },
  {
    title: "新春大拜年卡",
    sub: "全家福",
    cover:
      "https://file.lihailezzc.com/resource/3a2b1c9d7e6f5a4b3c2d1e0f9a8b7c6d.jpg",
  },
]);

const feeds = ref([
  {
    name: "陈小明",
    time: "刚刚",
    avatar:
      "https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg",
    text: "祝大家新的一年万事如意，阖家幸福！龙年行大运，喜气满满～✨",
    image:
      "https://file.lihailezzc.com/resource/02b7d1f8a9c34f2b8a2a7d4e9b1a5c8d.jpg",
    likes: 12,
    comments: 3,
  },
  {
    name: "李华",
    time: "5分钟前",
    avatar:
      "https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg",
    text: "新年快乐！祝朋友们身体健康、工作顺利，2026马到成功～",
    image: "",
    likes: 8,
    comments: 2,
  },
  {
    name: "王伟",
    time: "10分钟前",
    avatar:
      "https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg",
    text: "给你们拜年啦！",
    image:
      "https://file.lihailezzc.com/resource/1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f.jpg",
    likes: 6,
    comments: 1,
  },
]);

const onFeatureTap = (item) => {
  uni.showToast({ title: `进入：${item.title}`, icon: "none" });
  // 可跳转到对应功能页面
  // uni.navigateTo({ url: `/pages/${item.type}/index` })
};

const previewCard = (card) => {
  uni.previewImage({ urls: [card.cover] });
};

const onMore = (type) => {
  uni.showToast({ title: "即将开放～", icon: "none" });
};

const like = (index) => {
  feeds.value[index].likes += 1;
};

const comment = (index) => {
  uni.showToast({ title: "评论功能开发中～", icon: "none" });
};

const share = () => {
  uni.showShareMenu && uni.showShareMenu();
};

onShareAppMessage(async () => {
  const shareToken = await getShareToken("spring_index");
  getShareReward({ scene: "spring_index" });
  return {
    title: "2026 丙午马年，送你一份新春祝福 🎊",
    path: `/pages/spring/index?shareToken=${shareToken}`,
    imageUrl:
      "https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
  };
});

onShareTimeline(async () => {
  const shareToken = await getShareToken("spring_timeline");
  return {
    title: "2026 丙午马年，送你一份新春祝福 🎊",
    query: `shareToken=${shareToken}`,
    imageUrl:
      "https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
  };
});

const createGreeting = () => {
  uni.showToast({ title: "去发布祝福～", icon: "none" });
};

onPullDownRefresh(() => {
  setTimeout(() => {
    uni.stopPullDownRefresh();
    uni.showToast({ title: "已为你更新内容", icon: "success" });
  }, 600);
});
</script>

<style lang="scss" scoped>
.spring-page {
  min-height: 100vh;
  box-sizing: border-box;
  background: #fff;
}

/* 顶部 Banner */
.hero {
  position: relative;
  margin: 24rpx;
  padding: 32rpx;
  border-radius: 24rpx;
  color: #fff;
  background: linear-gradient(180deg, #e52e2e 0%, #c61a1a 100%);
  overflow: hidden;

  .hero-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999rpx;
    padding: 8rpx 16rpx;
    font-size: 22rpx;
    .badge-dot {
      margin-right: 8rpx;
    }
  }
  .hero-title {
    margin-top: 24rpx;
    display: flex;
    align-items: baseline;
    .year {
      font-size: 44rpx;
      font-weight: 700;
      margin-right: 12rpx;
    }
    .main {
      font-size: 44rpx;
      font-weight: 700;
    }
  }
  .hero-sub {
    margin-top: 8rpx;
    font-size: 24rpx;
    opacity: 0.9;
  }
  .hero-decor {
    position: absolute;
    right: 12rpx;
    bottom: 12rpx;
    width: 160rpx;
    height: 160rpx;
    opacity: 0.3;
    border-radius: 16rpx;
  }
}

/* 功能入口宫格 - 2x2 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20rpx;
  padding: 0 24rpx;
  margin-top: 8rpx;

  .feature-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-radius: 18rpx;
    background: #f9f5f0;
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
  }
  .feature-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 12rpx;
    margin-right: 16rpx;
    background: #fff;
  }
  .feature-texts {
    display: flex;
    flex-direction: column;
    .feature-title {
      font-size: 28rpx;
      color: #222;
      font-weight: 600;
    }
    .feature-sub {
      font-size: 22rpx;
      color: #888;
      margin-top: 8rpx;
    }
  }
}

/* 通用区块标题 */
.section {
  margin-top: 28rpx;

  .section-header {
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    .section-bar {
      width: 10rpx;
      height: 30rpx;
      border-radius: 6rpx;
      background: #ff3b30;
      margin-right: 12rpx;
    }
    .section-title {
      font-size: 28rpx;
      color: #222;
      flex: 1;
      font-weight: 600;
    }
    .section-more {
      font-size: 24rpx;
      color: #999;
    }
  }
}

/* 大家都在用 - 横滑卡片 */
.cards-scroll {
  margin-top: 16rpx;
  padding-left: 24rpx;
}
.cards-wrap {
  display: flex;
}
.use-card {
  width: 260rpx;
  flex-shrink: 0;
  margin-right: 18rpx;
  border-radius: 18rpx;
  background: #fff;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;

  .use-cover {
    width: 100%;
    height: 200rpx;
  }
  .use-info {
    padding: 16rpx;
  }
  .use-title {
    font-size: 26rpx;
    color: #333;
    font-weight: 600;
  }
  .use-sub {
    font-size: 22rpx;
    color: #999;
    margin-top: 6rpx;
  }
}

/* 已移除：.cards-scroll、feed-list、feed-item、feed-header、feed-avatar、feed-user、feed-name、feed-time、feed-content、feed-text、feed-image、feed-actions、.see-more */
.feed-list {
  padding: 0 24rpx;
}
.feed-item {
  padding: 22rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}
.feed-header {
  display: flex;
  align-items: center;
}
.feed-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}
.feed-user {
  display: flex;
  flex-direction: column;
}
.feed-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 600;
}
.feed-time {
  font-size: 22rpx;
  color: #999;
  margin-top: 6rpx;
}
.feed-content {
  margin-top: 12rpx;
}
.feed-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
}
.feed-image {
  width: 100%;
  height: 280rpx;
  border-radius: 12rpx;
  margin-top: 12rpx;
  background: #f6f6f6;
}
.feed-actions {
  margin-top: 12rpx;
  display: flex;
  .action {
    display: inline-flex;
    align-items: center;
    margin-right: 24rpx;
    color: #666;
    .icon {
      margin-right: 8rpx;
    }
  }
}

.see-more {
  margin: 24rpx;
  padding: 18rpx 0;
  text-align: center;
  color: #999;
  font-size: 24rpx;
}

/* 发布悬浮按钮 */
.fab {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 60rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: #ff3b30;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12rpx 24rpx rgba(255, 59, 48, 0.4);
  .fab-plus {
    font-size: 48rpx;
    line-height: 1;
  }
}
</style>