紫微斗数结果页分享功能样式优化
- 参考八字结果页的分享功能样式 - 分享按钮固定在页面底部 - 添加渐变背景和阴影效果 - 优化页面底部padding，避免内容被遮挡
This commit is contained in:
H1d3rOne committed
1 parent
24eab9cb67
commit
869ffb58c6
17 files changed
+1086
-29
No files matched your search
@@ -0,0 +1,76 @@
|
||||
package xuan.controller;
|
||||
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
import xuan.entity.ShareRecord;
|
||||
import xuan.repository.ShareRecordRepository;
|
||||
|
||||
import java.util.HashMap;
|
||||
import java.util.Map;
|
||||
import java.util.UUID;
|
||||
|
||||
@RestController
|
||||
@RequestMapping("/api/share")
|
||||
public class ShareController {
|
||||
|
||||
@Autowired
|
||||
private ShareRecordRepository shareRecordRepository;
|
||||
|
||||
@PostMapping("/create")
|
||||
public Map<String, Object> createShare(@RequestBody Map<String, Object> params) {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
|
||||
try {
|
||||
String type = (String) params.get("type");
|
||||
String resultData = (String) params.get("resultData");
|
||||
String name = (String) params.get("name");
|
||||
|
||||
ShareRecord shareRecord = new ShareRecord();
|
||||
shareRecord.setShareId(UUID.randomUUID().toString().replace("-", "").substring(0, 16));
|
||||
shareRecord.setType(type);
|
||||
shareRecord.setResultData(resultData);
|
||||
shareRecord.setName(name);
|
||||
|
||||
shareRecordRepository.save(shareRecord);
|
||||
|
||||
result.put("success", true);
|
||||
result.put("shareId", shareRecord.getShareId());
|
||||
result.put("message", "分享链接创建成功");
|
||||
} catch (Exception e) {
|
||||
result.put("success", false);
|
||||
result.put("error", "创建分享链接失败：" + e.getMessage());
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
@GetMapping("/view/{shareId}")
|
||||
public Map<String, Object> viewShare(@PathVariable String shareId) {
|
||||
Map<String, Object> result = new HashMap<>();
|
||||
|
||||
try {
|
||||
ShareRecord shareRecord = shareRecordRepository.findByShareId(shareId)
|
||||
.orElse(null);
|
||||
|
||||
if (shareRecord == null) {
|
||||
result.put("success", false);
|
||||
result.put("error", "分享链接不存在或已过期");
|
||||
return result;
|
||||
}
|
||||
|
||||
if (shareRecord.getExpireTime() != null && shareRecord.getExpireTime().before(new java.util.Date())) {
|
||||
result.put("success", false);
|
||||
result.put("error", "分享链接已过期");
|
||||
return result;
|
||||
}
|
||||
|
||||
result.put("success", true);
|
||||
result.put("data", shareRecord);
|
||||
} catch (Exception e) {
|
||||
result.put("success", false);
|
||||
result.put("error", "获取分享数据失败：" + e.getMessage());
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
package xuan.entity;
|
||||
|
||||
import javax.persistence.*;
|
||||
import java.util.Date;
|
||||
|
||||
@Entity
|
||||
@Table(name = "share_record")
|
||||
public class ShareRecord {
|
||||
|
||||
@Id
|
||||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
||||
private Long id;
|
||||
|
||||
@Column(unique = true, nullable = false, length = 32)
|
||||
private String shareId;
|
||||
|
||||
@Column(nullable = false, length = 20)
|
||||
private String type;
|
||||
|
||||
@Column(columnDefinition = "TEXT")
|
||||
private String resultData;
|
||||
|
||||
@Column(length = 50)
|
||||
private String name;
|
||||
|
||||
@Column(updatable = false)
|
||||
private Date createTime;
|
||||
|
||||
private Date expireTime;
|
||||
|
||||
@PrePersist
|
||||
protected void onCreate() {
|
||||
createTime = new Date();
|
||||
if (expireTime == null) {
|
||||
expireTime = new Date(System.currentTimeMillis() + 30L * 24 * 60 * 60 * 1000);
|
||||
}
|
||||
}
|
||||
|
||||
public Long getId() {
|
||||
return id;
|
||||
}
|
||||
|
||||
public void setId(Long id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
public String getShareId() {
|
||||
return shareId;
|
||||
}
|
||||
|
||||
public void setShareId(String shareId) {
|
||||
this.shareId = shareId;
|
||||
}
|
||||
|
||||
public String getType() {
|
||||
return type;
|
||||
}
|
||||
|
||||
public void setType(String type) {
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
public String getResultData() {
|
||||
return resultData;
|
||||
}
|
||||
|
||||
public void setResultData(String resultData) {
|
||||
this.resultData = resultData;
|
||||
}
|
||||
|
||||
public String getName() {
|
||||
return name;
|
||||
}
|
||||
|
||||
public void setName(String name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
public Date getCreateTime() {
|
||||
return createTime;
|
||||
}
|
||||
|
||||
public void setCreateTime(Date createTime) {
|
||||
this.createTime = createTime;
|
||||
}
|
||||
|
||||
public Date getExpireTime() {
|
||||
return expireTime;
|
||||
}
|
||||
|
||||
public void setExpireTime(Date expireTime) {
|
||||
this.expireTime = expireTime;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
package xuan.repository;
|
||||
|
||||
import org.springframework.data.jpa.repository.JpaRepository;
|
||||
import org.springframework.stereotype.Repository;
|
||||
import xuan.entity.ShareRecord;
|
||||
|
||||
import java.util.Optional;
|
||||
|
||||
@Repository
|
||||
public interface ShareRecordRepository extends JpaRepository<ShareRecord, Long> {
|
||||
Optional<ShareRecord> findByShareId(String shareId);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view class="share-container">
|
||||
<button class="share-button" @click="handleShare">
|
||||
<text class="share-icon">📤</text>
|
||||
<text class="share-text">分享给好友</text>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from '@/utils/api.js'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '测算结果'
|
||||
},
|
||||
result: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async handleShare() {
|
||||
try {
|
||||
uni.showLoading({ title: '创建分享链接...' })
|
||||
|
||||
const shareData = {
|
||||
type: this.type,
|
||||
resultData: JSON.stringify(this.result),
|
||||
name: this.name
|
||||
}
|
||||
|
||||
const res = await api.shareApi.create(shareData)
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
if (res.success) {
|
||||
const shareUrl = `/pages/share/view?shareId=${res.shareId}`
|
||||
|
||||
uni.showModal({
|
||||
title: '分享成功',
|
||||
content: '点击确定转发给微信好友',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.shareAppMessage({
|
||||
title: `${this.name}的测算结果`,
|
||||
path: shareUrl,
|
||||
imageUrl: '/static/share.png'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.error || '创建分享失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '分享失败：' + (e.message || '未知错误'),
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.share-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 32rpx;
|
||||
background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.95) 20%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.share-button{
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(220, 38, 38, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.share-icon {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.share-text{
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
import api from '@/utils/api.js'
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
async shareResult(type, name) {
|
||||
try {
|
||||
uni.showLoading({ title: '创建分享链接...' })
|
||||
|
||||
const shareData = {
|
||||
type: type,
|
||||
resultData: JSON.stringify(this.result),
|
||||
name: name || '测算结果'
|
||||
}
|
||||
|
||||
const res = await api.shareApi.create(shareData)
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
if (res.success) {
|
||||
const shareUrl = `/pages/share/view?shareId=${res.shareId}`
|
||||
|
||||
uni.showModal({
|
||||
title: '分享成功',
|
||||
content: '点击确定转发给微信好友',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.shareAppMessage({
|
||||
title: `${name}的测算结果`,
|
||||
path: shareUrl,
|
||||
imageUrl: '/static/share.png'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.error || '创建分享失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '分享失败：' + (e.message || '未知错误'),
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -264,6 +264,14 @@
|
||||
"navigationBarBackgroundColor": "#EC4899",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/share/view",
|
||||
"style": {
|
||||
"navigationBarTitleText": "测算结果分享",
|
||||
"navigationBarBackgroundColor": "#667eea",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
@@ -160,6 +160,12 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="share-card">
|
||||
<button class="share-btn" @click="shareResult">
|
||||
<text class="share-btn-text">📤 分享给好友</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -265,6 +271,50 @@ export default {
|
||||
return this.result.baZiKongWang[index]
|
||||
}
|
||||
return '-'
|
||||
},
|
||||
async shareResult() {
|
||||
try {
|
||||
uni.showLoading({ title: '创建分享链接...' })
|
||||
|
||||
const shareData = {
|
||||
type: 'bazi',
|
||||
resultData: JSON.stringify(this.result),
|
||||
name: this.result.name || '八字命盘'
|
||||
}
|
||||
|
||||
const res = await api.shareApi.create(shareData)
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
if (res.success) {
|
||||
const shareUrl = `/pages/share/view?shareId=${res.shareId}`
|
||||
|
||||
uni.showModal({
|
||||
title: '分享成功',
|
||||
content: '点击确定转发给微信好友',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.shareAppMessage({
|
||||
title: `${this.result.name || '八字命盘'}的测算结果`,
|
||||
path: shareUrl,
|
||||
imageUrl: '/static/share.png'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.error || '创建分享失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '分享失败：' + (e.message || '未知错误'),
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -279,6 +329,7 @@ page {
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
@@ -750,4 +801,29 @@ page {
|
||||
color: #374151;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.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, #DC2626 0%, #B91C1C 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
.share-btn-text {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -72,12 +72,12 @@
|
||||
<text class="form-label">日期类型</text>
|
||||
</view>
|
||||
<view class="gender-group">
|
||||
<view class="gender-item" :class="{ active: dateType === 0 }" @click="dateType = 0">
|
||||
<text class="gender-text">公历</text>
|
||||
</view>
|
||||
<view class="gender-item" :class="{ active: dateType === 1 }" @click="dateType = 1">
|
||||
<text class="gender-text">农历</text>
|
||||
</view>
|
||||
<view class="gender-item" :class="{ active: dateType === 0 }" @click="dateType = 0">
|
||||
<text class="gender-text">公历</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -125,7 +125,7 @@ export default {
|
||||
solarDate: '2024-01-01',
|
||||
birthTime: '12:00',
|
||||
gender: '男',
|
||||
dateType: 0,
|
||||
dateType: 1,
|
||||
guiRenType: 0,
|
||||
loading: false
|
||||
}
|
||||
|
||||
@@ -213,11 +213,18 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="share-card">
|
||||
<button class="share-btn" @click="shareResult">
|
||||
<text class="share-btn-text">📤 分享给好友</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { markdownToHtml } from '@/utils/markdownToHtml.js'
|
||||
import api from '@/utils/api.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -255,6 +262,52 @@ export default {
|
||||
onLoad() {
|
||||
this.result = getApp().globalData.daliurenResult || {}
|
||||
console.log('大六壬结果:', this.result)
|
||||
},
|
||||
methods: {
|
||||
async shareResult() {
|
||||
try {
|
||||
uni.showLoading({ title: '创建分享链接...' })
|
||||
|
||||
const shareData = {
|
||||
type: 'daliuren',
|
||||
resultData: JSON.stringify(this.result),
|
||||
name: this.result.name || '大六壬'
|
||||
}
|
||||
|
||||
const res = await api.shareApi.create(shareData)
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
if (res.success) {
|
||||
const shareUrl = `/pages/share/view?shareId=${res.shareId}`
|
||||
|
||||
uni.showModal({
|
||||
title: '分享成功',
|
||||
content: '点击确定转发给微信好友',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.shareAppMessage({
|
||||
title: `${this.result.name || '大六壬'}的测算结果`,
|
||||
path: shareUrl,
|
||||
imageUrl: '/static/share.png'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.error || '创建分享失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '分享失败：' + (e.message || '未知错误'),
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -268,6 +321,7 @@ page {
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 24rpx;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
@@ -656,4 +710,32 @@ page {
|
||||
font-weight: 600;
|
||||
color: #DC2626;
|
||||
}
|
||||
|
||||
.share-card {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 32rpx;
|
||||
background: linear-gradient(180deg, transparent 0%, #F5F3FF 20%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(124, 58, 237, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.share-btn-text {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,16 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header-card">
|
||||
<view class="avatar">
|
||||
<text class="avatar-text">👤</text>
|
||||
<view class="avatar" @click="editUserInfo">
|
||||
<image v-if="avatar" :src="avatar" class="avatar-image" mode="aspectFill"></image>
|
||||
<text v-else class="avatar-text">👤</text>
|
||||
<view class="avatar-edit-icon">
|
||||
<text class="edit-icon-text">✎</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="user-name-row">
|
||||
<text class="username">玄机用户</text>
|
||||
<text class="username">{{ username }}</text>
|
||||
<view class="vip-tag" :class="vipClass">
|
||||
<text class="vip-tag-text">{{ vipText }}</text>
|
||||
</view>
|
||||
@@ -59,6 +63,8 @@ export default {
|
||||
return {
|
||||
coins: 10,
|
||||
vipLevel: 0,
|
||||
username: '玄机用户',
|
||||
avatar: '',
|
||||
menus: [
|
||||
{ name: '开通会员', icon: '👑', path: '/pages/mine/vip' },
|
||||
{ name: '金币任务', icon: '🪙', path: '/pages/mine/coins' },
|
||||
@@ -84,11 +90,18 @@ export default {
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '玄机排盘 - 探索命理奥秘',
|
||||
title: '玄机排盘 - 专业命理测算工具，八字、紫微、奇门遁甲等应有尽有！',
|
||||
path: '/pages/index/index',
|
||||
imageUrl: '/static/share.png'
|
||||
}
|
||||
},
|
||||
onShareTimeline() {
|
||||
return {
|
||||
title: '玄机排盘 - 专业命理测算工具',
|
||||
query: '',
|
||||
imageUrl: '/static/share.png'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadUserData() {
|
||||
const coins = uni.getStorageSync('userCoins')
|
||||
@@ -99,6 +112,60 @@ export default {
|
||||
if (vipLevel) {
|
||||
this.vipLevel = parseInt(vipLevel)
|
||||
}
|
||||
const username = uni.getStorageSync('username')
|
||||
if (username) {
|
||||
this.username = username
|
||||
}
|
||||
const avatar = uni.getStorageSync('userAvatar')
|
||||
if (avatar) {
|
||||
this.avatar = avatar
|
||||
}
|
||||
},
|
||||
editUserInfo() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['修改用户名', '更换头像', '取消'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
this.editUsername()
|
||||
} else if (res.tapIndex === 1) {
|
||||
this.changeAvatar()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
editUsername() {
|
||||
uni.showModal({
|
||||
title: '修改用户名',
|
||||
editable: true,
|
||||
placeholderText: '请输入用户名',
|
||||
content: this.username,
|
||||
success: (res) => {
|
||||
if (res.confirm && res.content) {
|
||||
this.username = res.content
|
||||
uni.setStorageSync('username', res.content)
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
changeAvatar() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePaths = res.tempFilePaths
|
||||
this.avatar = tempFilePaths[0]
|
||||
uni.setStorageSync('userAvatar', tempFilePaths[0])
|
||||
uni.showToast({
|
||||
title: '头像已更新',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
openVip() {
|
||||
uni.navigateTo({ url: '/pages/mine/vip' })
|
||||
@@ -111,9 +178,11 @@ export default {
|
||||
}
|
||||
},
|
||||
shareApp() {
|
||||
uni.showShareMenu({
|
||||
withShareTicket: true,
|
||||
menus: ['shareAppMessage', 'shareTimeline']
|
||||
uni.showModal({
|
||||
title: '推荐好友',
|
||||
content: '点击右上角"..."按钮，选择"转发"即可分享给微信好友',
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -141,7 +210,7 @@ page {
|
||||
box-shadow: 0 16rpx 48rpx rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
.avatar{
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
@@ -150,12 +219,39 @@ page {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 24rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
.avatar-edit-icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background: #10B981;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.edit-icon-text {
|
||||
font-size: 20rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -88,14 +88,11 @@ export default {
|
||||
content: `确定要开通${planName}吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.setStorageSync('vipLevel', this.selectedPlan)
|
||||
uni.showToast({
|
||||
title: '开通成功',
|
||||
icon: 'success'
|
||||
title: '暂不支持开通会员',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -72,12 +72,12 @@
|
||||
<text class="form-label">日期类型</text>
|
||||
</view>
|
||||
<view class="gender-group">
|
||||
<view class="gender-item" :class="{ active: dateType === 0 }" @click="dateType = 0">
|
||||
<text class="gender-text">公历</text>
|
||||
</view>
|
||||
<view class="gender-item" :class="{ active: dateType === 1 }" @click="dateType = 1">
|
||||
<text class="gender-text">农历</text>
|
||||
</view>
|
||||
<view class="gender-item" :class="{ active: dateType === 0 }" @click="dateType = 0">
|
||||
<text class="gender-text">公历</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -139,7 +139,7 @@ export default {
|
||||
solarDate: '2000-01-01',
|
||||
birthTime: '12:00',
|
||||
gender: '男',
|
||||
dateType: 0,
|
||||
dateType: 1,
|
||||
paiPanTypeIndex: 3,
|
||||
zhiShiTypeIndex: 0,
|
||||
paiPanTypes: [
|
||||
|
||||
@@ -266,11 +266,18 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="share-card">
|
||||
<button class="share-btn" @click="shareResult">
|
||||
<text class="share-btn-text">📤 分享给好友</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { markdownToHtml } from '@/utils/markdownToHtml.js'
|
||||
import api from '@/utils/api.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -313,6 +320,50 @@ export default {
|
||||
formatList(list) {
|
||||
if (!list || !Array.isArray(list)) return ''
|
||||
return list.filter(item => item && item !== '').join('、')
|
||||
},
|
||||
async shareResult() {
|
||||
try {
|
||||
uni.showLoading({ title: '创建分享链接...' })
|
||||
|
||||
const shareData = {
|
||||
type: 'qimen',
|
||||
resultData: JSON.stringify(this.data),
|
||||
name: this.data.name || '奇门遁甲'
|
||||
}
|
||||
|
||||
const res = await api.shareApi.create(shareData)
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
if (res.success) {
|
||||
const shareUrl = `/pages/share/view?shareId=${res.shareId}`
|
||||
|
||||
uni.showModal({
|
||||
title: '分享成功',
|
||||
content: '点击确定转发给微信好友',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.shareAppMessage({
|
||||
title: `${this.data.name || '奇门遁甲'}的测算结果`,
|
||||
path: shareUrl,
|
||||
imageUrl: '/static/share.png'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.error || '创建分享失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '分享失败：' + (e.message || '未知错误'),
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -327,6 +378,7 @@ page {
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
@@ -645,4 +697,29 @@ page {
|
||||
.detail-text.warning {
|
||||
color: #DC2626;
|
||||
}
|
||||
|
||||
.share-card {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 32rpx;
|
||||
background: linear-gradient(180deg, transparent 0%, #FEF3C7 20%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(217, 119, 6, 0.3);
|
||||
}
|
||||
|
||||
.share-btn-text {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="loading" class="loading">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="error" class="error">
|
||||
<text class="error-text">{{ error }}</text>
|
||||
<button class="retry-btn" @click="loadShareData">重试</button>
|
||||
</view>
|
||||
|
||||
<view v-else class="content">
|
||||
<view class="header-card">
|
||||
<view class="header-row">
|
||||
<view class="header-icon">
|
||||
<text class="icon-text">{{ typeIcon }}</text>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="header-title">{{ typeName }}测算结果</text>
|
||||
<text class="header-subtitle">{{ result.name || '分享结果' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<text class="info-text">这是好友分享给您的测算结果</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="result-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">测算详情</text>
|
||||
</view>
|
||||
<view class="result-content">
|
||||
<rich-text :nodes="resultHtml" class="result-html"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer-card">
|
||||
<button class="open-btn" @click="openApp">打开玄机排盘</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from '@/utils/api.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
shareId: '',
|
||||
loading: true,
|
||||
error: '',
|
||||
result: {},
|
||||
typeConfig: {
|
||||
bazi: { name: '八字命理', icon: '命' },
|
||||
ziwei: { name: '紫微斗数', icon: '斗' },
|
||||
qimen: { name: '奇门遁甲', icon: '奇' },
|
||||
daliuren: { name: '大六壬', icon: '壬' },
|
||||
liuyao: { name: '六爻占卜', icon: '爻' },
|
||||
meihua: { name: '梅花易数', icon: '梅' },
|
||||
zhanxing: { name: '西方占星', icon: '星' },
|
||||
taluo: { name: '塔罗牌', icon: '塔' }
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
typeName() {
|
||||
return this.typeConfig[this.result.type]?.name || '命理测算'
|
||||
},
|
||||
typeIcon() {
|
||||
return this.typeConfig[this.result.type]?.icon || '玄'
|
||||
},
|
||||
resultHtml() {
|
||||
if (!this.result.resultData) return ''
|
||||
try {
|
||||
const data = JSON.parse(this.result.resultData)
|
||||
return this.formatResult(data)
|
||||
} catch (e) {
|
||||
return this.result.resultData
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.shareId = options.shareId || ''
|
||||
if (this.shareId) {
|
||||
this.loadShareData()
|
||||
} else {
|
||||
this.error = '分享链接无效'
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async loadShareData() {
|
||||
this.loading = true
|
||||
this.error = ''
|
||||
|
||||
try {
|
||||
const res = await api.shareApi.view(this.shareId)
|
||||
if (res.success) {
|
||||
this.result = res.data
|
||||
} else {
|
||||
this.error = res.error || '加载失败'
|
||||
}
|
||||
} catch (e) {
|
||||
this.error = '网络错误，请稍后重试'
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
formatResult(data) {
|
||||
let html = ''
|
||||
|
||||
if (data.aiAnalysis) {
|
||||
html += `<div style="margin-bottom: 20rpx; padding: 20rpx; background: #f5f5f5; border-radius: 12rpx;">
|
||||
<div style="font-weight: bold; margin-bottom: 10rpx;">AI分析</div>
|
||||
<div>${data.aiAnalysis}</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
const fields = ['solar', 'lunar', 'shengXiao', 'xingZuo']
|
||||
fields.forEach(field => {
|
||||
if (data[field]) {
|
||||
html += `<div style="margin-bottom: 10rpx;"><strong>${field}:</strong> ${data[field]}</div>`
|
||||
}
|
||||
})
|
||||
|
||||
return html || JSON.stringify(data, null, 2)
|
||||
},
|
||||
openApp() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background: linear-gradient(180deg, #FDF2F8 0%, #FCE7F3 50%, #FBCFE8 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.loading, .error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 32rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 20rpx 60rpx;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 32rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 16rpx 48rpx rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 36rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.08);
|
||||
}
|
||||
|
||||
.info-row {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.08);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.result-html {
|
||||
font-size: 28rpx;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.footer-card {
|
||||
margin-top: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.open-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 24rpx 80rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -127,11 +127,18 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="share-card">
|
||||
<button class="share-btn" @click="shareResult">
|
||||
<text class="share-btn-text">📤 分享给好友</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { markdownToHtml } from '@/utils/markdownToHtml.js'
|
||||
import api from '@/utils/api.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -206,6 +213,50 @@ export default {
|
||||
return sihua[index].includes(type)
|
||||
}
|
||||
return false
|
||||
},
|
||||
async shareResult() {
|
||||
try {
|
||||
uni.showLoading({ title: '创建分享链接...' })
|
||||
|
||||
const shareData = {
|
||||
type: 'ziwei',
|
||||
resultData: JSON.stringify(this.result),
|
||||
name: this.result.name || '紫微命盘'
|
||||
}
|
||||
|
||||
const res = await api.shareApi.create(shareData)
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
if (res.success) {
|
||||
const shareUrl = `/pages/share/view?shareId=${res.shareId}`
|
||||
|
||||
uni.showModal({
|
||||
title: '分享成功',
|
||||
content: '点击确定转发给微信好友',
|
||||
success: (modalRes) => {
|
||||
if (modalRes.confirm) {
|
||||
uni.shareAppMessage({
|
||||
title: `${this.result.name || '紫微命盘'}的测算结果`,
|
||||
path: shareUrl,
|
||||
imageUrl: '/static/share.png'
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.error || '创建分享失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '分享失败：' + (e.message || '未知错误'),
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -220,6 +271,7 @@ page {
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 32rpx;
|
||||
padding-bottom: 160rpx;
|
||||
}
|
||||
|
||||
.date-card {
|
||||
@@ -584,4 +636,29 @@ page {
|
||||
color: #1F2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.share-card {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 32rpx;
|
||||
background: linear-gradient(180deg, transparent 0%, #EEF2FF 20%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 24rpx 0;
|
||||
border-radius: 50rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 8rpx 24rpx rgba(124, 58, 237, 0.3);
|
||||
}
|
||||
|
||||
.share-btn-text {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -65,12 +65,12 @@
|
||||
<text class="form-label">日期类型</text>
|
||||
</view>
|
||||
<view class="gender-group">
|
||||
<view class="gender-item" :class="{ active: dateType === 0 }" @click="dateType = 0">
|
||||
<text class="gender-text">公历</text>
|
||||
</view>
|
||||
<view class="gender-item" :class="{ active: dateType === 1 }" @click="dateType = 1">
|
||||
<text class="gender-text">农历</text>
|
||||
</view>
|
||||
<view class="gender-item" :class="{ active: dateType === 0 }" @click="dateType = 0">
|
||||
<text class="gender-text">公历</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -100,7 +100,7 @@ export default {
|
||||
solarDate: '2000-01-01',
|
||||
birthTime: '12:00',
|
||||
gender: '男',
|
||||
dateType: 0,
|
||||
dateType: 1,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
|
||||
@@ -245,6 +245,22 @@ const recordApi = {
|
||||
}
|
||||
}
|
||||
|
||||
const shareApi = {
|
||||
create: (data) => {
|
||||
return request({
|
||||
url: '/share/create',
|
||||
method: 'POST',
|
||||
data: data
|
||||
})
|
||||
},
|
||||
view: (shareId) => {
|
||||
return request({
|
||||
url: '/share/view/' + shareId,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const toolApi = {
|
||||
lunar: (data) => {
|
||||
return request({
|
||||
@@ -334,11 +350,11 @@ export default {
|
||||
daliurenApi,
|
||||
qimenApi,
|
||||
ziweiApi,
|
||||
meihuaApi,
|
||||
zhanxingApi,
|
||||
taLuoApi,
|
||||
meihuaApi,
|
||||
recordApi,
|
||||
shareApi,
|
||||
toolApi,
|
||||
userApi,
|
||||
request
|
||||
userApi
|
||||
}
|
||||
Reference in new issue
Block a user