spring-festival-greetings/pages/greeting/share.vue

<template>
  <view class="share-page">
    <NavBar title="今日问候" :transparent="true" color="#333" />

    <!-- Top User Info -->
    <view class="user-header" :style="{ paddingTop: navBarHeight + 'px' }">
      <image
        class="user-avatar"
        :src="fromAvatar || defaultAvatar"
        mode="aspectFill"
      />
      <view class="user-info">
        <view class="user-name">
          <text>你的好友</text>
          <text class="highlight-name">{{ fromUser || "神秘好友" }}</text>
        </view>
        <text class="user-desc">给你发来了一份今日问候</text>
      </view>
    </view>

    <!-- Main Card -->
    <view class="main-card-container">
      <view class="greeting-card" id="shareCard">
        <view class="card-icon">
          <uni-icons type="star-filled" size="32" color="#e6b800" />
          <view class="sparkle s1">✨</view>
          <view class="sparkle s2">✨</view>
        </view>

        <view class="card-content">
          <text class="card-text">{{ content }}</text>
        </view>

        <view class="card-divider"></view>

        <view class="card-footer">
          <text class="footer-label">SIGNATURE</text>
          <text class="footer-name">—— {{ author || "专属问候" }}</text>
        </view>
      </view>
    </view>

    <!-- Action Buttons -->
    <view class="action-buttons">
      <button class="btn secondary" @tap="navToMake">
        <view class="btn-icon red-icon">
          <uni-icons type="paperplane-filled" size="18" color="#d81e06" />
        </view>
        <text>我也要送问候</text>
      </button>
      <button class="btn secondary" @tap="savePoster">
        <view class="btn-icon">
          <uni-icons type="camera-filled" size="18" color="#666" />
        </view>
        <text>保存为海报</text>
      </button>
    </view>

    <!-- Hot List -->
    <view class="hot-list-section">
      <view class="section-header">
        <view class="title-bar"></view>
        <text class="section-title">大家都在送的温暖</text>
      </view>

      <view class="hot-list">
        <view
          v-for="(item, index) in hotList"
          :key="index"
          class="hot-item"
          @tap="useHotItem(item)"
        >
          <view class="item-icon-box" :style="{ background: item.bg }">
            <text class="item-emoji">{{ item.emoji }}</text>
          </view>
          <view class="item-content">
            <text class="item-text">{{ item.text }}</text>
            <text class="item-count">{{ item.count }} 人已收藏</text>
          </view>
          <uni-icons type="right" size="14" color="#ccc" />
        </view>
      </view>
    </view>

    <!-- Floating Lucky Button -->
    <view class="lucky-btn-container safe-area-bottom">
      <button class="lucky-btn" @tap="navToDaily">
        <view class="btn-content">
          <view class="stars">✨</view>
          <text>抽一句我的今日好运</text>
          <view class="badge">LUCKY</view>
        </view>
      </button>
    </view>

    <!-- Canvas for Poster -->
    <canvas
      type="2d"
      id="posterCanvas"
      class="hidden-canvas"
      style="width: 375px; height: 600px"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";
import { getBavBarHeight } from "@/utils/system";
import NavBar from "@/components/NavBar/NavBar.vue";

const navBarHeight = getBavBarHeight();
const defaultAvatar =
  "https://file.lihailezzc.com/resource/96023631c6ab9c3496b7620097af3d6f.png";

const fromUser = ref("");
const fromAvatar = ref("");
const content = ref("万事顺遂\n岁岁平安\n愿你的生活\n日日有小确幸");
const author = ref("陈小明");

const hotList = ref([
  {
    text: "新的一年，愿灵马带走烦恼，留下...",
    count: "3.2k",
    emoji: "🌅",
    bg: "#fff8e1",
  },
  {
    text: "星光不问赶路人，时光不负有心人。",
    count: "1.8k",
    emoji: "✨",
    bg: "#e8f5e9",
  },
]);

onLoad((options) => {
  if (options.content) content.value = decodeURIComponent(options.content);
  if (options.author) author.value = decodeURIComponent(options.author);
  if (options.fromUser) fromUser.value = decodeURIComponent(options.fromUser);
  if (options.fromAvatar)
    fromAvatar.value = decodeURIComponent(options.fromAvatar);
});

const navToMake = () => {
  uni.navigateTo({
    url: "/pages/make/index?scene=daily",
  });
};

const navToDaily = () => {
  uni.navigateTo({
    url: "/pages/greeting/daily",
  });
};

const useHotItem = (item) => {
  uni.navigateTo({
    url: `/pages/make/index?scene=daily&content=${encodeURIComponent(item.text)}`,
  });
};

const savePoster = () => {
  uni.showToast({ title: "海报生成功能开发中", icon: "none" });
  // Implementation for poster generation would go here
};

onShareAppMessage(() => {
  return {
    title: `${fromUser.value || "好友"}给你发来了一份今日问候`,
    path: `/pages/greeting/share?content=${encodeURIComponent(content.value)}&author=${encodeURIComponent(author.value)}&fromUser=${encodeURIComponent(fromUser.value)}&fromAvatar=${encodeURIComponent(fromAvatar.value)}`,
  };
});
</script>

<style lang="scss" scoped>
.share-page {
  min-height: 100vh;
  background: #fbfbf9;
  padding-bottom: 200rpx;
}

.user-header {
  padding: 20rpx 40rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 2rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 4rpx;

  .highlight-name {
    color: #d81e06;
    font-weight: bold;
    margin-left: 8rpx;
  }
}

.user-desc {
  font-size: 24rpx;
  color: #999;
}

/* Greeting Card */
.main-card-container {
  padding: 0 40rpx;
  margin-bottom: 60rpx;
}

.greeting-card {
  background: #fff;
  border-radius: 40rpx;
  padding: 60rpx 40rpx;
  min-height: 700rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.06);
  border: 2rpx solid #fff;
  position: relative;
}

.card-icon {
  position: relative;
  margin-bottom: 60rpx;

  .sparkle {
    position: absolute;
    font-size: 24rpx;
  }

  .s1 {
    top: -10rpx;
    right: -20rpx;
    opacity: 0.8;
  }
  .s2 {
    bottom: -10rpx;
    left: -20rpx;
    opacity: 0.6;
    font-size: 20rpx;
  }
}

.card-content {
  margin-bottom: 60rpx;
  text-align: center;
}

.card-text {
  font-size: 44rpx;
  color: #333;
  font-weight: bold;
  line-height: 1.8;
  font-family: "Songti SC", serif;
  white-space: pre-wrap;
}

.card-divider {
  width: 60rpx;
  height: 2rpx;
  background: #f0f0f0;
  margin-bottom: 30rpx;
}

.card-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
}

.footer-label {
  font-size: 20rpx;
  color: #d4a017;
  letter-spacing: 2rpx;
  font-weight: bold;
  text-transform: uppercase;
}

.footer-name {
  font-size: 28rpx;
  color: #666;
  font-style: italic;
  font-family: "Songti SC", serif;
}

/* Action Buttons */
.action-buttons {
  padding: 0 40rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-bottom: 60rpx;
}

.btn {
  height: 100rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-weight: bold;
  border: none;
  position: relative;

  &::after {
    border: none;
  }
  &:active {
    transform: scale(0.98);
  }
}

.btn.secondary {
  background: #fff;
  color: #333;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.03);

  .btn-icon {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;

    &.red-icon {
      background: #ffebee;
    }
  }
}

/* Hot List */
.hot-list-section {
  padding: 0 40rpx;
  margin-bottom: 40rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title-bar {
  width: 8rpx;
  height: 28rpx;
  background: #d4a017;
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.hot-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.hot-item {
  background: #fff;
  padding: 24rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;

  &:active {
    background: #f9f9f9;
  }
}

.item-icon-box {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-emoji {
  font-size: 40rpx;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  overflow: hidden;
}

.item-text {
  font-size: 26rpx;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-count {
  font-size: 22rpx;
  color: #999;
}

/* Lucky Button */
.lucky-btn-container {
  position: fixed;
  bottom: 40rpx;
  left: 40rpx;
  right: 40rpx;
  z-index: 100;
}

.lucky-btn {
  background: linear-gradient(135deg, #a33b3b 0%, #8e0000 100%);
  color: #fff;
  height: 110rpx;
  border-radius: 55rpx;
  border: none;
  box-shadow: 0 10rpx 30rpx rgba(142, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;

  &::after {
    border: none;
  }
  &:active {
    transform: scale(0.98);
  }
}

.btn-content {
  display: flex;
  align-items: center;
  gap: 16rpx;
  font-size: 32rpx;
  font-weight: bold;

  .stars {
    font-size: 36rpx;
  }

  .badge {
    background: #ffd700;
    color: #8e0000;
    font-size: 20rpx;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    font-weight: 800;
    margin-left: 8rpx;
  }
}

.hidden-canvas {
  position: fixed;
  left: 9999px;
  top: 0;
}
</style>