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

<template>
  <view class="daily-page">
    <NavBar title="每日精选" color="#333" />

    <!-- Header -->
    <view class="page-header">
      <view class="header-left">
        <uni-icons type="sun-filled" size="24" color="#ff9800" />
        <text class="header-title">{{ greetingTitle }}</text>
      </view>
      <view class="streak-badge">
        <text>已连续问候</text>
        <text class="streak-count">{{ streakDays }}</text>
        <text>天</text>
        <text class="fire-icon">🔥</text>
      </view>
    </view>

    <!-- Main Card -->
    <view class="main-card-container">
      <view
        class="quote-card"
        :style="
          currentQuote.backgroundUrl
            ? {
                backgroundImage: `url(${currentQuote.backgroundUrl})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
              }
            : {}
        "
      >
        <view class="quote-icon">❝</view>
        <view class="quote-content">
          <text class="quote-text">{{ currentQuote.text }}</text>
          <text class="quote-highlight" v-if="currentQuote.highlight">{{
            currentQuote.highlight
          }}</text>
        </view>
        <view class="quote-divider"></view>
        <view class="quote-author" v-if="authorName">
          <text>—— {{ authorName }} 的专属问候</text>
        </view>

        <view class="card-actions">
          <view class="refresh-btn" @tap="refreshQuote">
            <uni-icons type="loop" size="16" color="#666" />
            <text>换一句</text>
          </view>

          <view class="author-edit-box">
            <input
              class="input"
              type="text"
              v-model="authorName"
              placeholder="输入名字生成专属问候"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- Categories -->
    <view class="category-section">
      <view class="category-grid">
        <view
          v-for="(cat, index) in scenes"
          :key="index"
          class="category-item"
          @tap="selectCategory(cat.id)"
        >
          <view
            class="cat-icon-box"
            :class="{ active: currentCategory === cat.id }"
            :style="{ background: cat.bg }"
          >
            <text class="cat-emoji">{{ cat.icon }}</text>
          </view>
          <text
            class="cat-name"
            :class="{ active: currentCategory === cat.id }"
            >{{ cat.name }}</text
          >
        </view>
      </view>
    </view>

    <!-- Hot List -->
    <view class="hot-list-section">
      <view class="section-title-row">
        <view class="title-bar"></view>
        <text class="section-title">今日最热榜单</text>
        <text class="section-subtitle">REAL-TIME DATA</text>
      </view>

      <view class="hot-list">
        <view
          v-for="(item, index) in hotList"
          :key="index"
          class="hot-item"
          @tap="useHotItem(item)"
        >
          <view class="rank-icon">
            <uni-icons
              v-if="index === 0"
              type="vip-filled"
              size="24"
              color="#ffbc00"
            />
            <uni-icons
              v-else-if="index === 1"
              type="vip-filled"
              size="24"
              color="#b0bec5"
            />
            <uni-icons v-else type="vip-filled" size="24" color="#cd7f32" />
          </view>
          <view class="hot-content">
            <text class="hot-text">{{ item.text }}</text>
            <view class="hot-meta">
              <text class="fire">🔥</text>
              <text class="hot-count">{{ item.count }}w 人正在使用</text>
            </view>
          </view>
          <uni-icons type="right" size="16" color="#ccc" />
        </view>
      </view>
    </view>

    <!-- Bottom Actions -->
    <view class="bottom-actions safe-area-bottom">
      <view class="action-btn-group">
        <button class="save-btn" @tap="saveCard">
          <view class="icon-circle">
            <uni-icons type="download" size="20" color="#333" />
          </view>
          <text class="btn-text">保存</text>
        </button>
        <button class="send-btn" open-type="share">
          <uni-icons type="paperplane-filled" size="20" color="#fff" />
          <text>立即发送今日问候</text>
        </button>
      </view>
    </view>

    <!-- 登录弹窗 -->
    <LoginPopup />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import NavBar from "@/components/NavBar/NavBar.vue";
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user";
import {
  getDailyInfo,
  getDailyRandomGreeting,
  saveDailyGreeting,
} from "@/api/daily";
import {
  getShareToken,
  saveViewRequest,
  generateObjectId,
} from "@/utils/common.js";
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";

const userStore = useUserStore();
const streakDays = ref(0);

const greetingTitle = computed(() => {
  const hour = new Date().getHours();
  if (hour < 9) return "早安，今天也要好运";
  if (hour < 12) return "上午好，元气满满";
  if (hour < 14) return "午安，记得休息";
  if (hour < 18) return "下午好，继续加油";
  return "晚安，好梦相伴";
});

const scenes = ref([]);
const currentCategory = ref("");

const currentQuote = ref({
  text: "",
  highlight: "",
  author: "",
  backgroundUrl: "",
  id: "",
});
const authorName = ref("");

const loadDailyInfo = async () => {
  try {
    const res = await getDailyInfo();
    if (res) {
      streakDays.value = res.streakDays || 0;
      if (res.lastSignature && !authorName.value) {
        authorName.value = res.lastSignature;
      }

      if (res.scenes && res.scenes.length > 0) {
        scenes.value = res.scenes;
        if (!currentCategory.value) {
          currentCategory.value = res.scenes[0].id;
        }
      }

      if (res.mainHero) {
        const { greetingContent, backgroundUrl, greetingId, greetingScene } =
          res.mainHero;
        let text = "";
        let highlight = "";
        if (greetingContent) {
          const parts = greetingContent.split(" ");
          if (parts.length > 1) {
            highlight = parts.pop();
            text = parts.join("\n");
          } else {
            text = greetingContent;
          }
        }

        currentQuote.value = {
          text,
          highlight,
          author: authorName.value, // Will be reactive in template via authorName ref
          backgroundUrl: backgroundUrl || "",
          id: greetingId,
          content: greetingContent,
        };

        if (greetingScene) {
          currentCategory.value = greetingScene;
        }
      }
    }
  } catch (e) {
    console.error("Failed to load daily info:", e);
  }
};

onMounted(() => {
  loadDailyInfo();
});

const hotList = ref([
  { text: "新的一年，愿灵马带走烦恼...", count: "2.4" },
  { text: "事事顺意，岁岁平安。", count: "1.8" },
]);

const selectCategory = (id) => {
  currentCategory.value = id;
  refreshQuote();
};

const refreshQuote = async () => {
  try {
    const res = await getDailyRandomGreeting(currentCategory.value);
    if (res) {
      const { greetingContent, backgroundUrl, greetingId } = res;
      let text = "";
      let highlight = "";
      if (greetingContent) {
        const parts = greetingContent.split(" ");
        if (parts.length > 1) {
          highlight = parts.pop();
          text = parts.join("\n");
        } else {
          text = greetingContent;
        }
      }

      currentQuote.value = {
        ...currentQuote.value,
        text,
        highlight,
        backgroundUrl: backgroundUrl || "",
        id: greetingId,
        content: greetingContent,
      };
    }
  } catch (e) {
    console.error("Failed to refresh quote:", e);
  }
};

const useHotItem = (item) => {
  currentQuote.value = {
    ...currentQuote.value,
    text: item.text,
    highlight: "",
    author: "热榜推荐",
  };
};

const saveCard = () => {
  uni.showToast({ title: "保存功能开发中", icon: "none" });
};

// const sendGreeting = () => {
//   // Use uni.navigateTo for normal flow if not open-type="share"
//   // But here we might want to trigger share directly or just navigate to make page as before
//   // Based on user request "share after friend opens page", it implies we need to handle share
//   // Let's keep the navigation to make page for "Sending" (which usually means making a card first)
//   // BUT also add onShareAppMessage so the top right menu share works
//   uni.navigateTo({
//     url: `/pages/make/index?scene=daily&content=${encodeURIComponent(
//       currentQuote.value.text,
//     )}&author=${encodeURIComponent(authorName.value)}`,
//   });
// };

onShareAppMessage(async (options) => {
  const id = createGreeting();
  const shareToken = await getShareToken("daily_greeting", id);

  return {
    title: `${authorName.value}给你发来了一份今日问候`,
    path: "/pages/greeting/share?shareToken=" + shareToken,
  };

  const fromUser = userStore.userInfo?.nickName || "神秘好友";
  const fromAvatar = userStore.userInfo?.avatarUrl || "";

  // Log the share attempt and path
  console.log("Sharing daily greeting", {
    res,
    fromUser,
    content: currentQuote.value.text,
  });

  const path = `/pages/greeting/share?content=${encodeURIComponent(
    currentQuote.value.text,
  )}&author=${encodeURIComponent(
    authorName.value || currentQuote.value.author,
  )}&fromUser=${encodeURIComponent(fromUser)}&fromAvatar=${encodeURIComponent(
    fromAvatar,
  )}`;

  console.log("Share path:", path);

  return {
    title: `${fromUser}给你发来了一份今日问候`,
    path: path,
  };
});

const createGreeting = () => {
  const id = generateObjectId();
  saveDailyGreeting({
    id,
    greetingId: currentQuote.value.id,
    content: currentQuote.value.content,
    signature: authorName.value,
    imageUrl: currentQuote.value.backgroundUrl,
    sceneId: currentCategory.value,
  });
  return id;
};

onShareTimeline(() => {
  const fromUser = userStore.userInfo?.nickName || "神秘好友";
  return {
    title: `${fromUser}给你发来了一份今日问候`,
    query: `content=${encodeURIComponent(
      currentQuote.value.text,
    )}&author=${encodeURIComponent(
      authorName.value || currentQuote.value.author,
    )}`,
    imageUrl: "", // Optional: add a custom image if needed
  };
});
</script>

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

.page-header {
  padding: 0 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 800;
  color: #333;
}

.streak-badge {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 6rpx 20rpx;
  border-radius: 30rpx;
  font-size: 22rpx;
  color: #666;
  border: 1rpx solid #eee;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .streak-count {
    font-size: 28rpx;
    font-weight: bold;
    color: #ff3b30;
    margin: 0 4rpx;
  }

  .fire-icon {
    margin-left: 4rpx;
    font-size: 24rpx;
  }
}

.sub-header {
  padding: 0 32rpx;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 40rpx;
}

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

.quote-card {
  background: #fff;
  border-radius: 40rpx;
  padding: 60rpx 40rpx 40rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.08);
  border: 4rpx solid #f5e6d3; /* Gold-ish border */
  position: relative;
  min-height: 600rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Inner Border Effect */
  &::after {
    content: "";
    position: absolute;
    inset: 12rpx;
    border: 2rpx solid #f9f3e8;
    border-radius: 32rpx;
    pointer-events: none;
  }
}

.quote-icon {
  font-size: 80rpx;
  color: #f5e6d3;
  margin-bottom: 40rpx;
  line-height: 1;
}

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

.quote-text {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
  line-height: 1.6;
  font-family: "Songti SC", serif;
  display: block;
  white-space: pre-wrap;
}

.quote-highlight {
  display: block;
  font-size: 44rpx;
  color: #d81e06;
  font-weight: 800;
  margin-top: 20rpx;
  font-family: "Songti SC", serif;
}

.quote-divider {
  width: 80rpx;
  height: 2rpx;
  background: #eee;
  margin-bottom: 30rpx;
}

.quote-author {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 60rpx;
  font-style: italic;
}

.card-actions {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx 32rpx;
  background: #fff;
  border: 1rpx solid #eee;
  border-radius: 40rpx;
  font-size: 26rpx;
  color: #666;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  &:active {
    background: #f5f5f5;
  }
}

.author-edit-box {
  flex: 1;
  margin-left: 24rpx;
  background: #f9f9f9;
  border: 2rpx solid #eee;
  border-radius: 40rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  transition: all 0.3s ease;

  &:active,
  &:focus-within {
    background: #fff;
    border-color: #ff9800;
    box-shadow: 0 4rpx 16rpx rgba(255, 152, 0, 0.15);
  }

  .label {
    font-size: 24rpx;
    color: #999;
    margin-right: 12rpx;
    font-weight: 500;
    white-space: nowrap;
  }

  .input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    color: #333;
  }
}

/* Categories */
.category-section {
  padding: 0 32rpx;
  margin-bottom: 60rpx;
}

.category-grid {
  display: flex;
  justify-content: space-between;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.cat-icon-box {
  width: 100rpx;
  height: 100rpx;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  border: 2rpx solid transparent;

  &.active {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.05);
  }
}

.cat-emoji {
  font-size: 48rpx;
}

.cat-name {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;

  &.active {
    color: #333;
    font-weight: bold;
  }
}

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

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

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

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 16rpx;
}

.section-subtitle {
  font-size: 20rpx;
  color: #ccc;
  font-weight: 500;
}

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

.hot-item {
  background: #fff;
  border-radius: 24rpx;
  padding: 24rpx 32rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);

  &:active {
    background: #f9f9f9;
  }
}

.rank-icon {
  margin-right: 24rpx;
  display: flex;
  align-items: center;
}

.hot-content {
  flex: 1;
}

.hot-text {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 450rpx;
}

.hot-meta {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #999;
}

.fire {
  color: #ff3b30;
  margin-right: 4rpx;
  font-size: 20rpx;
}

/* Bottom Actions */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff; /* Glass effect if supported */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  padding: 20rpx 32rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.action-btn-group {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.save-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 0;
  margin: 0;
  line-height: 1;
  border: none;
  width: 100rpx;

  &::after {
    border: none;
  }

  .icon-circle {
    width: 80rpx;
    height: 80rpx;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8rpx;
    transition: all 0.2s;
  }

  .btn-text {
    font-size: 20rpx;
    color: #666;
    font-weight: 500;
  }

  &:active .icon-circle {
    background: #eee;
    transform: scale(0.95);
  }
}

.send-btn {
  flex: 1;
  height: 96rpx;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  background: #8e0000; /* Deep Red/Brown */
  color: #fff;
  background: linear-gradient(135deg, #8e0000 0%, #600000 100%);
  box-shadow: 0 8rpx 24rpx rgba(142, 0, 0, 0.3);
  transition: all 0.2s;

  &::after {
    border: none;
  }

  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba(142, 0, 0, 0.2);
  }
}
</style>