为占星术、塔罗牌、梅花易数结果页添加分享功能
- 占星术结果页：添加分享功能，包含星座信息和命理解读 - 塔罗牌结果页：添加分享功能，包含抽牌结果和综合解读 - 梅花易数结果页：添加分享功能，包含卦象信息和卦辞 - 所有分享按钮固定在页面底部，样式统一 - 添加渐变背景和阴影效果 - 优化页面底部padding，避免内容被遮挡 - 分享内容自动复制到剪贴板
This commit is contained in:
H1d3rOne committed
1 parent
869ffb58c6
commit
5dd2c1ac90
5 files changed
+214
-2
No files matched your search
@@ -184,7 +184,7 @@ export default {
|
||||
this.loading = true
|
||||
|
||||
uni.showLoading({
|
||||
title: '排盘中...',
|
||||
title: '测算中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
|
||||
@@ -180,7 +180,7 @@ export default {
|
||||
this.loading = true
|
||||
|
||||
uni.showLoading({
|
||||
title: '排盘中...',
|
||||
title: '测算中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
|
||||
@@ -147,6 +147,12 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="share-card">
|
||||
<button class="share-btn" @click="shareResult">
|
||||
<text class="share-btn-text">📤 分享给好友</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -201,6 +207,40 @@ export default {
|
||||
},
|
||||
onLoad() {
|
||||
this.result = getApp().globalData.meihuaResult || {}
|
||||
},
|
||||
|
||||
methods: {
|
||||
shareResult() {
|
||||
const shareText = `【梅花易数占卜结果】
|
||||
|
||||
👤 占卜者：${this.result.name || '某人'}
|
||||
📅 时间：${this.formatSolarTime}
|
||||
🌙 农历：${this.result.lunar || '-'}
|
||||
|
||||
【卦象总览】
|
||||
本卦：${this.result.benGuaName} ${this.result.benGuaAs}
|
||||
变卦：${this.result.bianGuaName} ${this.result.bianGuaAs}
|
||||
互卦：${this.result.huGuaName} ${this.result.huGuaAs}
|
||||
动爻：${this.result.dongYaoStr}爻
|
||||
|
||||
【本卦卦辞】
|
||||
${this.result.benGuaGuaCi || '暂无'}
|
||||
|
||||
【变卦卦辞】
|
||||
${this.result.bianGuaGuaCi || '暂无'}
|
||||
|
||||
——来自玄学测算APP`
|
||||
|
||||
uni.setClipboardData({
|
||||
data: shareText,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已复制到剪贴板',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -214,6 +254,7 @@ page {
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
@@ -523,4 +564,29 @@ page {
|
||||
color: #1F2937;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.share-card {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 32rpx;
|
||||
background: linear-gradient(180deg, transparent 0%, #A7F3D0 20%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(5, 150, 105, 0.3);
|
||||
}
|
||||
|
||||
.share-btn-text {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -105,6 +105,12 @@
|
||||
<text class="btn-text">重新占卜</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="share-card">
|
||||
<button class="share-btn" @click="shareResult">
|
||||
<text class="share-btn-text">📤 分享给好友</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -147,6 +153,50 @@ export default {
|
||||
},
|
||||
retry() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
|
||||
shareResult() {
|
||||
const cardsText = this.result.cards ? this.result.cards.map(card => {
|
||||
const position = card.isReversed ? '逆位' : '正位'
|
||||
return `${card.positionMeaning}：${card.name}（${position}）`
|
||||
}).join('\n') : ''
|
||||
|
||||
const summaryText = this.result.summary ? `
|
||||
【性格特质】
|
||||
${this.result.summary.personality}
|
||||
|
||||
【感情运势】
|
||||
${this.result.summary.emotion}
|
||||
|
||||
【事业发展】
|
||||
${this.result.summary.career}
|
||||
|
||||
【总体建议】
|
||||
${this.result.summary.overall}
|
||||
` : ''
|
||||
|
||||
const shareText = `【塔罗牌占卜结果】
|
||||
|
||||
🔮 牌阵：${this.result.spreadName || '塔罗牌占卜'}
|
||||
❓ 问题：${this.result.question || '神秘指引'}
|
||||
|
||||
【抽到的牌】
|
||||
${cardsText}
|
||||
|
||||
【牌义解读】
|
||||
${this.result.interpretation || ''}
|
||||
${summaryText}
|
||||
——来自玄学测算APP`
|
||||
|
||||
uni.setClipboardData({
|
||||
data: shareText,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已复制到剪贴板',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -155,6 +205,7 @@ export default {
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
padding-bottom: 160rpx;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -455,4 +506,29 @@ export default {
|
||||
line-height: 1.8;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.share-card {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 32rpx;
|
||||
background: linear-gradient(180deg, transparent 0%, #f5f5f5 20%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
.share-btn-text {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -202,6 +202,12 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="share-card">
|
||||
<button class="share-btn" @click="shareResult">
|
||||
<text class="share-btn-text">📤 分享给好友</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -380,6 +386,44 @@ export default {
|
||||
'双鱼座': '温柔浪漫'
|
||||
}
|
||||
return influences[sign] || '独特'
|
||||
},
|
||||
|
||||
shareResult() {
|
||||
const shareText = `【${this.result.name || '某人'}的星盘解析】
|
||||
|
||||
☀️ 太阳星座：${this.result.sunSign || '-'}
|
||||
🌙 月亮星座：${this.result.moonSign || '-'}
|
||||
⬆️ 上升星座：${this.result.risingSign || '-'}
|
||||
|
||||
【性格特质】
|
||||
${this.interpretation.personality}
|
||||
|
||||
【感情运势】
|
||||
${this.interpretation.love}
|
||||
|
||||
【事业发展】
|
||||
${this.interpretation.career}
|
||||
|
||||
【财运状况】
|
||||
${this.interpretation.wealth}
|
||||
|
||||
【健康建议】
|
||||
${this.interpretation.health}
|
||||
|
||||
【人生建议】
|
||||
${this.interpretation.advice}
|
||||
|
||||
——来自玄学测算APP`
|
||||
|
||||
uni.setClipboardData({
|
||||
data: shareText,
|
||||
success: () => {
|
||||
uni.showToast({
|
||||
title: '已复制到剪贴板',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -388,6 +432,7 @@ export default {
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
padding-bottom: 160rpx;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -789,4 +834,29 @@ export default {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.share-card {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 32rpx;
|
||||
background: linear-gradient(180deg, transparent 0%, #FDF2F8 20%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
background: linear-gradient(135deg, #DB2777 0%, #BE185D 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(219, 39, 119, 0.3);
|
||||
}
|
||||
|
||||
.share-btn-text {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user