spring-festival-greetings/pages/avatar/detail.vue

<template>
  <view class="avatar-detail-page">
    <NavBar title="专属头像" />

    <view class="content-wrap">
      <!-- User Info -->
      <view class="user-info-section" v-if="detailData">
        <image
          :src="detailData.from?.avatar || defaultAvatar"
          class="user-avatar"
          mode="aspectFill"
        />
        <view class="user-text">
          <view class="name-row">
            <text class="nickname">{{
              detailData.from?.nickname || "神秘用户"
            }}</text>
            <view class="tag">马年专属</view>
          </view>
          <text class="action-text">换上了新春头像</text>
        </view>
      </view>

      <!-- Main Image Card -->
      <view class="main-card">
        <view class="card-inner">
          <image
            v-if="detailData?.imageUrl"
            :src="detailData.imageUrl"
            class="generated-avatar"
            mode="aspectFill"
            @tap="previewImage"
          />
          <view class="loading-box" v-else>
            <text>加载中...</text>
          </view>
          <!-- Decorative Elements -->
          <view class="card-footer-text">
            <text class="icon">🌸</text> 2026 丙午马年限定
          </view>
        </view>
      </view>

      <!-- Action Buttons -->
      <view class="action-group">
        <button class="btn primary-btn" @tap="goToMake">
          <text class="icon">🎨</text> 我也要领同款制作
        </button>
      </view>

      <!-- Recommended Frames -->
      <view class="section recommended-section">
        <view class="section-header">
          <view class="left">
            <view class="bar"></view>
            <text class="title">热门新春头像</text>
          </view>
          <text class="more" @tap="goToMake">查看全部</text>
        </view>
        <view class="frame-grid">
          <view
            class="frame-item"
            v-for="(item, index) in frameList"
            :key="index"
            @tap="goToMake"
          >
            <view class="frame-img-box">
              <image :src="item.imageUrl" class="frame-img" mode="aspectFit" />
            </view>
            <text class="frame-name">{{
              item.type === "decor"
                ? "新春饰品"
                : item.type === "avatar"
                  ? "新春头像"
                  : "新春相框"
            }}</text>
          </view>
        </view>
      </view>

      <!-- Wallpaper Banner -->
      <view class="wallpaper-banner" @tap="goToFortune">
        <view class="banner-icon">
          <text>🏮</text>
        </view>
        <view class="banner-content">
          <text class="banner-title">去抽取新年运势</text>
          <text class="banner-desc">每日一签，开启你的新年好运</text>
        </view>
        <text class="banner-arrow">›</text>
      </view>
      <view class="wallpaper-banner" @tap="goToGreeting">
        <view class="banner-icon">
          <text>🧧</text>
        </view>
        <view class="banner-content">
          <text class="banner-title">去制作新年贺卡</text>
          <text class="banner-desc">定制专属祝福，传递浓浓年味</text>
        </view>
        <text class="banner-arrow">›</text>
      </view>
      <view class="wallpaper-banner" @tap="goToWallpaper">
        <view class="banner-icon">
          <text>🖼</text>
        </view>
        <view class="banner-content">
          <text class="banner-title">去挑选新年壁纸</text>
          <text class="banner-desc">精选新年壁纸，让手机也过年</text>
        </view>
        <text class="banner-arrow">›</text>
      </view>

      <!-- Footer -->
      <view class="page-footer">
        <view class="footer-line">
          <text class="line"></text>
          <text class="text">2026 HAPPY NEW YEAR</text>
          <text class="line"></text>
        </view>
        <text class="footer-sub">新春祝福 · 传递温情</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { getPageDetail, getShareReward } from "@/api/system";
import { getAvatarRecommendList } from "@/api/avatar.js";
import { getShareToken, saveViewRequest } from "@/utils/common.js";
import NavBar from "@/components/NavBar/NavBar.vue";

const defaultAvatar =
  "https://file.lihailezzc.com/resource/d9b329082b32f8305101f708593a4882.png";
const detailData = ref(null);
const frameList = ref([]);
const shareToken = ref("");

onLoad((options) => {
  if (options.shareToken) {
    shareToken.value = options.shareToken;
    fetchDetail();
  }
  fetchFrames();
});

onShareAppMessage(async () => {
  const token = await getShareToken("avatar_download", detailData.value?.id);
  getShareReward({ scene: "avatar_download" });
  return {
    title: "快来看看我刚领到的新年专属头像 🎊",
    path: `/pages/avatar/detail?shareToken=${token}`,
    imageUrl:
      detailData.value?.imageUrl ||
      "https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
  };
});

onShareTimeline(async () => {
  const token = await getShareToken("avatar_download", detailData.value?.id);
  return {
    title: "快来看看我刚领到的新年专属头像 🎊",
    query: `shareToken=${token}`,
    imageUrl:
      detailData.value?.imageUrl ||
      "https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
  };
});

const fetchDetail = async () => {
  try {
    // uni.showLoading({ title: "加载中..." });
    const res = await getPageDetail(shareToken.value);
    saveViewRequest(shareToken.value, "avatar_detail", res.id);
    if (res) {
      detailData.value = res;
    }
  } catch (e) {
    console.error(e);
    // uni.showToast({ title: "获取详情失败", icon: "none" });
  } finally {
    // uni.hideLoading();
  }
};

const fetchFrames = async () => {
  try {
    const res = await getAvatarRecommendList();
    frameList.value = res;
  } catch (e) {
    console.error(e);
  }
};

const previewImage = () => {
  if (detailData.value?.imageUrl) {
    uni.previewImage({
      urls: [detailData.value.imageUrl],
    });
  }
};

const goToMake = () => {
  uni.navigateTo({
    url: "/pages/avatar/index",
  });
};

const goToFortune = () => {
  uni.navigateTo({
    url: "/pages/fortune/index",
  });
};

const goToGreeting = () => {
  uni.switchTab({ url: "/pages/make/index" });
};

const goToWallpaper = () => {
  uni.navigateTo({
    url: "/pages/wallpaper/index",
  });
};
</script>

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

.content-wrap {
  padding: 30rpx 40rpx 60rpx;
}

/* User Info */
.user-info-section {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
  margin-right: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.user-text {
  flex: 1;
}

.name-row {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

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

.tag {
  background: #ff3b30;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 99rpx;
}

.action-text {
  font-size: 24rpx;
  color: #999;
}

/* Main Card */
.main-card {
  background: #ffffff;
  border-radius: 40rpx;
  padding: 24rpx;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.06);
  margin-bottom: 60rpx;
  border: 2rpx solid #f5f5f5;
}

.card-inner {
  position: relative;
  background: #fff9f9;
  border-radius: 30rpx;
  padding: 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.generated-avatar {
  width: 400rpx;
  height: 400rpx;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  border: 8rpx solid #ff3b30;
}

.loading-box {
  width: 400rpx;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  background: #f0f0f0;
  border-radius: 20rpx;
}

.decor-tag {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  background: #fff;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  color: #ff3b30;
}

.card-footer-text {
  margin-top: 40rpx;
  font-size: 28rpx;
  color: #ff3b30;
  font-weight: bold;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10rpx 30rpx;
  border-radius: 99rpx;
  box-shadow: 0 4rpx 10rpx rgba(255, 59, 48, 0.1);
}

.card-footer-text .icon {
  margin-right: 10rpx;
}

/* Buttons */
.action-group {
  margin-bottom: 60rpx;
}

.btn {
  height: 100rpx;
  border-radius: 99rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 30rpx;
  border: none;
}

.btn::after {
  border: none;
}

.primary-btn {
  background: #ff3b30;
  color: #fff;
  box-shadow: 0 10rpx 20rpx rgba(255, 59, 48, 0.3);
}

.secondary-btn {
  background: #f5f5f5;
  color: #333;
}

.btn .icon {
  margin-right: 16rpx;
  font-size: 36rpx;
}

/* Recommended Section */
.section {
  margin-bottom: 40rpx;
}

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

.section-header .left {
  display: flex;
  align-items: center;
}

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

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

.section-header .more {
  font-size: 24rpx;
  color: #999;
}

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

.frame-item {
  width: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f8f8f8;
  border-radius: 24rpx;
  padding: 20rpx;
}

.frame-img-box {
  width: 140rpx;
  height: 140rpx;
  margin-bottom: 16rpx;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}

.frame-img {
  width: 100%;
  height: 100%;
}

.frame-name {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

/* Wallpaper Banner */
.wallpaper-banner {
  background: #f8f8f8;
  border-radius: 24rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  margin-bottom: 60rpx;
}

.banner-icon {
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.banner-icon text {
  font-size: 40rpx;
  color: #ff3b30;
}

.banner-content {
  flex: 1;
}

.banner-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.banner-desc {
  font-size: 22rpx;
  color: #999;
}

.banner-arrow {
  font-size: 36rpx;
  color: #ccc;
}

/* Footer */
.page-footer {
  text-align: center;
  padding-bottom: 40rpx;
}

.footer-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}

.footer-line .line {
  width: 60rpx;
  height: 2rpx;
  background: #eee;
}

.footer-line .text {
  font-size: 20rpx;
  color: #ccc;
  margin: 0 20rpx;
  letter-spacing: 2rpx;
}

.footer-sub {
  font-size: 20rpx;
  color: #ddd;
}
</style>