392 lines
9.1 KiB
Vue
392 lines
9.1 KiB
Vue
<template>
|
||
<view
|
||
class="fortune-detail-page"
|
||
:style="{ paddingTop: navHeight + 10 + 'px' }"
|
||
>
|
||
<NavBar title="" :transparent="true" color="#ffd700" />
|
||
|
||
<!-- 顶部提示条 -->
|
||
<view class="top-banner">
|
||
<view class="banner-left">
|
||
<image
|
||
class="avatar-icon"
|
||
v-if="inviterName && inviterAvatar"
|
||
:src="inviterAvatar"
|
||
mode="aspectFill"
|
||
/>
|
||
<text class="banner-icon" v-else-if="!inviterName">✨</text>
|
||
<text class="banner-text" v-if="inviterName"
|
||
>你的好友 {{ inviterName }} 正在抽取2026新年运势</text
|
||
>
|
||
<text class="banner-text" v-else>2026 灵马贺岁 · 开启你的新年好运</text>
|
||
</view>
|
||
<view class="mini-btn" @click="goTest">
|
||
我也要测 <text class="mini-arrow">↗</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 页面标题 -->
|
||
<view class="page-header">
|
||
<view class="main-title">2026 灵马贺岁</view>
|
||
<view class="sub-title">SPIRIT HORSE · LUNAR NEW YEAR FORTUNE</view>
|
||
</view>
|
||
|
||
<!-- 运势卡片 -->
|
||
<view class="fortune-card">
|
||
<view class="card-image-wrapper">
|
||
<image
|
||
class="card-image"
|
||
:src="fortuneData.imageUrl || defaultImage"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
|
||
<view class="card-content">
|
||
<view class="content-header">
|
||
<text class="content-sub">2026 灵马贺岁 · 运势卡片</text>
|
||
</view>
|
||
<view class="content-title">{{
|
||
fortuneData.title || "锦鲤附身 · 万事顺遂"
|
||
}}</view>
|
||
<view class="content-desc">
|
||
{{
|
||
fortuneData.content ||
|
||
"灵马奔腾，瑞气盈门。此签预示您在2026年如同千里骏马，不仅拥有敏锐的洞察力，更有贵人暗中相助。事业将如破竹之势，学业更有意外惊喜，心之所向，皆能圆满。"
|
||
}}
|
||
</view>
|
||
<view class="lucky-score">
|
||
<text class="score-label">幸运指数：</text>
|
||
<view class="stars">
|
||
<text v-for="i in 5" :key="i" class="star">★</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部按钮区 -->
|
||
<view class="action-area">
|
||
<button class="primary-btn" @click="goTest">
|
||
我也要测运势 <text class="arrow">↗</text>
|
||
</button>
|
||
<button class="secondary-btn" @click="saveCard">
|
||
<text class="download-icon">📥</text> 保存好运卡片
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 底部信息 -->
|
||
<view class="footer-info">
|
||
<!-- <view class="qr-box">
|
||
<view class="qr-placeholder"></view>
|
||
</view> -->
|
||
<view class="footer-text">2026 灵马贺岁 · 测出你的新年锦鲤关键词</view>
|
||
<view class="footer-sub">2026 HAPPY NEW YEAR</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import { getPageDetail } from "@/api/system.js";
|
||
import { saveViewRequest } from "@/utils/common.js";
|
||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||
import { getBavBarHeight } from "@/utils/system.js";
|
||
|
||
const inviterName = ref("");
|
||
const inviterAvatar = ref("");
|
||
const navHeight = ref(88);
|
||
|
||
onMounted(() => {
|
||
navHeight.value = getBavBarHeight();
|
||
});
|
||
|
||
const fortuneData = ref({
|
||
imageUrl: "",
|
||
title: "",
|
||
desc: "",
|
||
});
|
||
const defaultImage =
|
||
"https://file.lihailezzc.com/resource/2a30c7983af2646058a386fcc36d2ab8.png"; // 占位图，实际需替换
|
||
|
||
onLoad((options) => {
|
||
if (options.shareToken) {
|
||
loadPageDetail(options.shareToken);
|
||
} else {
|
||
// 仅作演示，如果没传数据，使用默认mock数据
|
||
// 在实际场景中，可能需要根据 fortuneId 去后端拉取详情
|
||
if (options.id) {
|
||
// fetchFortuneDetail(options.id)
|
||
}
|
||
}
|
||
});
|
||
|
||
const loadPageDetail = async (shareToken) => {
|
||
const data = await getPageDetail(shareToken);
|
||
fortuneData.value = data;
|
||
inviterName.value = data?.from?.nickname || "";
|
||
inviterAvatar.value = data?.from?.avatar || "";
|
||
saveViewRequest(shareToken, "fortune_draw", data.fortuneId);
|
||
};
|
||
|
||
const goHome = () => {
|
||
uni.switchTab({ url: "/pages/index/index" });
|
||
};
|
||
|
||
const goTest = () => {
|
||
// 如果是 tabbar 页面用 switchTab，否则用 navigateTo
|
||
// 假设 /pages/fortune/index 不是 tabbar 页面
|
||
uni.reLaunch({ url: "/pages/fortune/index" });
|
||
};
|
||
|
||
const saveCard = () => {
|
||
// 这里应该是保存图片逻辑
|
||
// 由于这是一个网页展示页，如果需要保存整张卡片，通常需要 canvas 绘图
|
||
// 或者如果 imageUrl 本身就是合成好的海报，直接保存 imageUrl
|
||
// 简单起见，这里先保存 imageUrl
|
||
const url = fortuneData.value.imageUrl || defaultImage;
|
||
|
||
uni.downloadFile({
|
||
url: url,
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: res.tempFilePath,
|
||
success: () => {
|
||
uni.showToast({ title: "保存成功", icon: "success" });
|
||
},
|
||
fail: () => {
|
||
uni.showToast({ title: "保存失败", icon: "none" });
|
||
},
|
||
});
|
||
}
|
||
},
|
||
fail: () => {
|
||
uni.showToast({ title: "下载失败", icon: "none" });
|
||
},
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fortune-detail-page {
|
||
min-height: 100vh;
|
||
background-color: #2c1e1c;
|
||
padding: 0 20px 40px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-family: sans-serif;
|
||
}
|
||
|
||
.top-banner {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: rgba(255, 215, 0, 0.1);
|
||
border: 1px solid rgba(255, 215, 0, 0.2);
|
||
border-radius: 30px;
|
||
padding: 6px 6px 6px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 24px;
|
||
margin-top: 10px;
|
||
}
|
||
.banner-left {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
.banner-icon {
|
||
margin-right: 6px;
|
||
font-size: 14px;
|
||
}
|
||
.avatar-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
margin-right: 8px;
|
||
border: 1px solid rgba(255, 215, 0, 0.3);
|
||
}
|
||
.banner-text {
|
||
font-size: 12px;
|
||
color: #ffd700;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.mini-btn {
|
||
background: linear-gradient(90deg, #ffd700 0%, #ffa500 100%);
|
||
color: #333;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
padding: 6px 12px;
|
||
border-radius: 20px;
|
||
margin-left: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
}
|
||
.mini-arrow {
|
||
margin-left: 2px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.page-header {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
.main-title {
|
||
font-size: 28px;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 4px;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
.sub-title {
|
||
font-size: 10px;
|
||
color: #d4af37;
|
||
letter-spacing: 1px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.fortune-card {
|
||
width: 100%;
|
||
background: #3a2a28;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||
margin-bottom: 30px;
|
||
border: 1px solid #4a3a38;
|
||
}
|
||
|
||
.card-image-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
/* 保持图片区域有一定高度，防止加载时塌陷 */
|
||
min-height: 200px;
|
||
}
|
||
.card-image {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.card-content {
|
||
padding: 24px;
|
||
}
|
||
.content-header {
|
||
margin-bottom: 12px;
|
||
}
|
||
.content-sub {
|
||
font-size: 12px;
|
||
color: #d4af37;
|
||
opacity: 0.8;
|
||
}
|
||
.content-title {
|
||
font-size: 24px;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
margin-bottom: 16px;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.content-desc {
|
||
font-size: 14px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1.8;
|
||
margin-bottom: 20px;
|
||
text-align: justify;
|
||
}
|
||
|
||
.lucky-score {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.score-label {
|
||
font-size: 12px;
|
||
color: #ffd700;
|
||
margin-right: 8px;
|
||
}
|
||
.stars {
|
||
display: flex;
|
||
}
|
||
.star {
|
||
color: #ffd700;
|
||
font-size: 14px;
|
||
margin-right: 2px;
|
||
}
|
||
|
||
.action-area {
|
||
width: 100%;
|
||
margin-bottom: 30px;
|
||
}
|
||
.primary-btn {
|
||
background: linear-gradient(90deg, #ffd700 0%, #ffa500 100%);
|
||
color: #333;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
border-radius: 25px;
|
||
margin-bottom: 16px;
|
||
box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: none;
|
||
}
|
||
.arrow {
|
||
margin-left: 6px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.secondary-btn {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
color: #fff;
|
||
font-size: 14px;
|
||
height: 46px;
|
||
line-height: 46px;
|
||
border-radius: 23px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
.download-icon {
|
||
margin-right: 6px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.footer-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.qr-box {
|
||
width: 60px;
|
||
height: 60px;
|
||
background: #fff;
|
||
padding: 4px;
|
||
border-radius: 8px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.qr-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #eee;
|
||
background-image: url("https://file.lihailezzc.com/resource/qr-placeholder.png");
|
||
background-size: cover;
|
||
border-radius: 4px;
|
||
}
|
||
.footer-text {
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
margin-bottom: 4px;
|
||
}
|
||
.footer-sub {
|
||
font-size: 10px;
|
||
color: rgba(255, 255, 255, 0.3);
|
||
transform: scale(0.9);
|
||
}
|
||
</style>
|