新增消费详情功能,记录金币使用明细

后端实现:
- 新增CoinConsumeRecord实体类,记录消费明细
- 新增CoinConsumeRecordRepository和CoinConsumeRecordService
- 新增CoinConsumeController,提供消费记录API
- 支持分页查询和按类型查询

前端实现:
- 新增消费详情页面consume-details.vue
- 显示累计消费和消费次数统计
- 展示消费记录列表,包含类型、描述、时间、金额
- 支持分页加载

功能集成:
- 在“我的”页面“金币任务”下方添加“消费详情”入口
- 修改coinUtils.js,consumeCoin方法增加参数
- 金币消耗时自动记录消费明细
- 记录消费类型、描述、关联ID等信息

API接口:
- POST /api/coin-consume/save - 保存消费记录
- GET /api/coin-consume/list - 分页查询消费记录
- GET /api/coin-consume/all - 查询所有消费记录
- GET /api/coin-consume/type - 按类型查询消费记录
This commit is contained in:
H1d3rOne committed 2026-03-08 22:12:49 +08:00
1 parent 1d76df3ead
commit 14b209bf85
8 files changed
+630 -12

No files matched your search

@@ -0,0 +1,88 @@
package xuan.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.*;
import xuan.entity.CoinConsumeRecord;
import xuan.service.CoinConsumeRecordService;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/api/coin-consume")
public class CoinConsumeController {
@Autowired
private CoinConsumeRecordService recordService;
@PostMapping("/save")
public Map<String, Object> saveRecord(@RequestBody CoinConsumeRecord record) {
Map<String, Object> result = new HashMap<>();
try {
CoinConsumeRecord saved = recordService.saveRecord(record);
result.put("success", true);
result.put("data", saved);
} catch (Exception e) {
result.put("success", false);
result.put("error", e.getMessage());
}
return result;
}
@GetMapping("/list")
public Map<String, Object> getRecords(
@RequestParam String userId,
@RequestParam(defaultValue = "1") int page,
@RequestParam(defaultValue = "10") int size) {
Map<String, Object> result = new HashMap<>();
try {
Page<CoinConsumeRecord> pageResult = recordService.findByUserId(userId, page, size);
Map<String, Object> data = new HashMap<>();
data.put("records", pageResult.getContent());
data.put("total", pageResult.getTotalElements());
data.put("page", page);
data.put("size", size);
data.put("totalPages", pageResult.getTotalPages());
result.put("success", true);
result.put("data", data);
} catch (Exception e) {
result.put("success", false);
result.put("error", e.getMessage());
}
return result;
}
@GetMapping("/all")
public Map<String, Object> getAllRecords(@RequestParam String userId) {
Map<String, Object> result = new HashMap<>();
try {
List<CoinConsumeRecord> records = recordService.findByUserId(userId);
result.put("success", true);
result.put("data", records);
} catch (Exception e) {
result.put("success", false);
result.put("error", e.getMessage());
}
return result;
}
@GetMapping("/type")
public Map<String, Object> getRecordsByType(
@RequestParam String userId,
@RequestParam String type) {
Map<String, Object> result = new HashMap<>();
try {
List<CoinConsumeRecord> records = recordService.findByUserIdAndType(userId, type);
result.put("success", true);
result.put("data", records);
} catch (Exception e) {
result.put("success", false);
result.put("error", e.getMessage());
}
return result;
}
}
@@ -0,0 +1,55 @@
package xuan.entity;
import javax.persistence.*;
import java.time.LocalDateTime;
@Entity
@Table(name = "coin_consume_record")
public class CoinConsumeRecord {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false)
private String userId;
@Column(nullable = false)
private Integer amount;
@Column(nullable = false)
private String type;
private String description;
private String relatedId;
@Column(nullable = false, updatable = false)
private LocalDateTime createTime;
@PrePersist
protected void onCreate() {
createTime = LocalDateTime.now();
}
public Long getId() { return id; }
public void setId(Long id) { this.id = id; }
public String getUserId() { return userId; }
public void setUserId(String userId) { this.userId = userId; }
public Integer getAmount() { return amount; }
public void setAmount(Integer amount) { this.amount = amount; }
public String getType() { return type; }
public void setType(String type) { this.type = type; }
public String getDescription() { return description; }
public void setDescription(String description) { this.description = description; }
public String getRelatedId() { return relatedId; }
public void setRelatedId(String relatedId) { this.relatedId = relatedId; }
public LocalDateTime getCreateTime() { return createTime; }
public void setCreateTime(LocalDateTime createTime) { this.createTime = createTime; }
}
@@ -0,0 +1,19 @@
package xuan.repository;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import xuan.entity.CoinConsumeRecord;
import java.util.List;
@Repository
public interface CoinConsumeRecordRepository extends JpaRepository<CoinConsumeRecord, Long> {
List<CoinConsumeRecord> findByUserIdOrderByCreateTimeDesc(String userId);
Page<CoinConsumeRecord> findByUserIdOrderByCreateTimeDesc(String userId, Pageable pageable);
List<CoinConsumeRecord> findByUserIdAndTypeOrderByCreateTimeDesc(String userId, String type);
}
@@ -0,0 +1,53 @@
package xuan.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import xuan.entity.CoinConsumeRecord;
import xuan.repository.CoinConsumeRecordRepository;
import java.util.List;
import java.util.Optional;
@Service
public class CoinConsumeRecordService {
@Autowired
private CoinConsumeRecordRepository recordRepository;
@Transactional
public CoinConsumeRecord saveRecord(CoinConsumeRecord record) {
return recordRepository.save(record);
}
public Optional<CoinConsumeRecord> findById(Long id) {
return recordRepository.findById(id);
}
public List<CoinConsumeRecord> findByUserId(String userId) {
return recordRepository.findByUserIdOrderByCreateTimeDesc(userId);
}
public Page<CoinConsumeRecord> findByUserId(String userId, int page, int size) {
Pageable pageable = PageRequest.of(page - 1, size);
return recordRepository.findByUserIdOrderByCreateTimeDesc(userId, pageable);
}
public List<CoinConsumeRecord> findByUserIdAndType(String userId, String type) {
return recordRepository.findByUserIdAndTypeOrderByCreateTimeDesc(userId, type);
}
@Transactional
public void deleteById(Long id) {
recordRepository.deleteById(id);
}
@Transactional
public void deleteByUserId(String userId) {
List<CoinConsumeRecord> records = recordRepository.findByUserIdOrderByCreateTimeDesc(userId);
recordRepository.deleteAll(records);
}
}
@@ -0,0 +1,382 @@
<template>
<view class="container">
<view class="header-card">
<view class="header-icon">
<text class="icon-text">💰</text>
</view>
<text class="header-title">消费详情</text>
<text class="header-subtitle">金币使用明细</text>
</view>
<view class="stats-card">
<view class="stat-item">
<text class="stat-value">{{ totalConsume }}</text>
<text class="stat-label">累计消费</text>
</view>
<view class="stat-divider"></view>
<view class="stat-item">
<text class="stat-value">{{ records.length }}</text>
<text class="stat-label">消费次数</text>
</view>
</view>
<view class="empty-state" v-if="records.length === 0 && !loading">
<text class="empty-icon">📝</text>
<text class="empty-text">暂无消费记录</text>
<text class="empty-desc">开始您的第一次测算吧</text>
</view>
<view class="record-list" v-else>
<view class="record-item" v-for="(item, index) in records" :key="item.id">
<view class="record-icon" :style="{ background: getTypeColor(item.type) }">
<text class="record-icon-text">{{ getTypeIcon(item.type) }}</text>
</view>
<view class="record-info">
<text class="record-title">{{ getTypeName(item.type) }}</text>
<text class="record-desc">{{ item.description || '测算消费' }}</text>
<text class="record-time">{{ formatTime(item.createTime) }}</text>
</view>
<view class="record-amount">
<text class="amount-text">-{{ item.amount }}</text>
<text class="amount-unit">金币</text>
</view>
</view>
</view>
<view class="pagination" v-if="totalPages > 1">
<button class="page-btn" :disabled="page === 1" @click="changePage(page - 1)">上一页</button>
<text class="page-info">{{ page }} / {{ totalPages }}</text>
<button class="page-btn" :disabled="page === totalPages" @click="changePage(page + 1)">下一页</button>
</view>
</view>
</template>
<script>
import api from '@/utils/api.js'
export default {
data() {
return {
records: [],
page: 1,
size: 10,
total: 0,
totalPages: 0,
loading: false,
totalConsume: 0
}
},
onShow() {
this.loadRecords()
},
methods: {
async loadRecords() {
if (this.loading) return
this.loading = true
try {
const userInfoStr = uni.getStorageSync('userInfo')
const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
const userId = userInfo?.userId || 'default_user'
const data = await api.coinConsumeApi.getRecords({
userId: userId,
page: this.page,
size: this.size
})
if (data && data.success) {
const resultData = data.data || {}
this.records = resultData.records || []
this.total = resultData.total || 0
this.totalPages = resultData.totalPages || 0
this.totalConsume = this.records.reduce((sum, record) => sum + (record.amount || 0), 0)
} else {
this.records = []
this.total = 0
this.totalPages = 0
}
} catch (e) {
console.error('加载消费记录失败:', e)
this.records = []
this.total = 0
this.totalPages = 0
} finally {
this.loading = false
}
},
changePage(newPage) {
if (newPage < 1 || newPage > this.totalPages) return
this.page = newPage
this.loadRecords()
},
formatTime(time) {
if (!time) return ''
if (Array.isArray(time)) {
const [year, month, day, hour = 0, minute = 0] = time
return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`
}
const date = new Date(time)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hour = String(date.getHours()).padStart(2, '0')
const minute = String(date.getMinutes()).padStart(2, '0')
return `${year}-${month}-${day} ${hour}:${minute}`
},
getTypeIcon(type) {
const icons = {
bazi: '命',
ziwei: '紫',
liuyao: '卦',
meihua: '梅',
qimen: '奇',
daliuren: '壬',
taluo: '塔',
zhanxing: '星'
}
return icons[type] || '算'
},
getTypeColor(type) {
const colors = {
bazi: '#3B82F6',
ziwei: '#6366F1',
liuyao: '#0EA5E9',
meihua: '#06B6D4',
qimen: '#0284C7',
daliuren: '#2563EB',
taluo: '#1D4ED8',
zhanxing: '#1E40AF'
}
return colors[type] || '#3B82F6'
},
getTypeName(type) {
const names = {
bazi: '八字命理',
ziwei: '紫微斗数',
liuyao: '六爻占卜',
meihua: '梅花易数',
qimen: '奇门遁甲',
daliuren: '大六壬',
taluo: '塔罗牌',
zhanxing: '西方占星'
}
return names[type] || '命理测算'
}
}
}
</script>
<style>
page {
background: linear-gradient(180deg, #FEF3C7 0%, #FDE68A 50%, #FCD34D 100%);
min-height: 100vh;
}
.container {
min-height: 100vh;
padding: 32rpx;
padding-bottom: 32rpx;
}
.header-card {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
border-radius: 32rpx;
padding: 48rpx 32rpx;
text-align: center;
margin-bottom: 32rpx;
box-shadow: 0 16rpx 48rpx rgba(245, 158, 11, 0.25);
}
.header-icon {
width: 96rpx;
height: 96rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24rpx;
}
.icon-text {
font-size: 48rpx;
}
.header-title {
font-size: 44rpx;
font-weight: 700;
color: #ffffff;
display: block;
margin-bottom: 12rpx;
}
.header-subtitle {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.8);
}
.stats-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 24rpx;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 8rpx 32rpx rgba(245, 158, 11, 0.1);
}
.stat-item {
text-align: center;
flex: 1;
}
.stat-value {
font-size: 48rpx;
font-weight: bold;
color: #F59E0B;
display: block;
margin-bottom: 8rpx;
}
.stat-label {
font-size: 24rpx;
color: #92400E;
}
.stat-divider {
width: 2rpx;
height: 60rpx;
background: #FDE68A;
}
.empty-state {
text-align: center;
padding: 120rpx 0;
}
.empty-icon {
font-size: 120rpx;
display: block;
margin-bottom: 32rpx;
}
.empty-text {
font-size: 32rpx;
color: #F59E0B;
display: block;
margin-bottom: 16rpx;
}
.empty-desc {
font-size: 26rpx;
color: #FBBF24;
}
.record-list {
display: flex;
flex-direction: column;
gap: 24rpx;
}
.record-item {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.95);
border-radius: 24rpx;
padding: 28rpx 32rpx;
box-shadow: 0 8rpx 32rpx rgba(245, 158, 11, 0.1);
border: 2rpx solid rgba(245, 158, 11, 0.1);
}
.record-icon {
width: 80rpx;
height: 80rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 24rpx;
}
.record-icon-text {
font-size: 40rpx;
color: #ffffff;
font-weight: bold;
}
.record-info {
flex: 1;
}
.record-title {
font-size: 30rpx;
font-weight: 600;
color: #92400E;
display: block;
margin-bottom: 8rpx;
}
.record-desc {
font-size: 24rpx;
color: #B45309;
display: block;
margin-bottom: 8rpx;
}
.record-time {
font-size: 22rpx;
color: #D97706;
}
.record-amount {
text-align: right;
}
.amount-text {
font-size: 36rpx;
font-weight: bold;
color: #DC2626;
display: block;
}
.amount-unit {
font-size: 22rpx;
color: #EF4444;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 24rpx;
margin-top: 32rpx;
padding: 20rpx;
}
.page-btn {
background: rgba(255, 255, 255, 0.95);
color: #F59E0B;
border: 2rpx solid #F59E0B;
padding: 12rpx 32rpx;
border-radius: 16rpx;
font-size: 26rpx;
}
.page-btn[disabled] {
opacity: 0.5;
}
.page-info {
font-size: 28rpx;
color: #92400E;
font-weight: 600;
}
</style>
@@ -68,6 +68,7 @@ export default {
menus: [
{ name: '开通会员', icon: '👑', path: '/pages/mine/vip' },
{ name: '金币任务', icon: '🪙', path: '/pages/mine/coins' },
{ name: '消费详情', icon: '💰', path: '/pages/mine/consume-details' },
{ name: '推荐好友', icon: '🎁', action: 'share' },
{ name: '设置', icon: '⚙️', path: '/pages/mine/settings' },
{ name: '帮助与反馈', icon: '💬', path: '/pages/mine/feedback' },
+22 -11
View File
@@ -297,26 +297,36 @@ const toolApi = {
method: 'POST',
data: data
})
},
xingzuo: (data) => {
}
}
const coinConsumeApi = {
save: (data) => {
return request({
url: '/tools/xingzuo',
url: '/coin-consume/save',
method: 'POST',
data: data
})
},
wuxing: (data) => {
getRecords: (params) => {
return request({
url: '/tools/wuxing',
method: 'POST',
data: data
url: '/coin-consume/list',
method: 'GET',
data: params
})
},
jiri: (data) => {
getAll: (userId) => {
return request({
url: '/tools/jiri',
method: 'POST',
data: data
url: '/coin-consume/all',
method: 'GET',
data: { userId: userId || 'default_user' }
})
},
getByType: (userId, type) => {
return request({
url: '/coin-consume/type',
method: 'GET',
data: { userId: userId || 'default_user', type: type }
})
}
}
@@ -371,5 +381,6 @@ export default {
recordApi,
shareApi,
toolApi,
coinConsumeApi,
userApi
}
+10 -1
View File
@@ -32,7 +32,7 @@ const checkCoinsAndConsume = () => {
return { canUse: true, needCoins: false }
}
const consumeCoin = async () => {
const consumeCoin = async (type = 'bazi', description = '测算消费', relatedId = null) => {
const vipLevel = uni.getStorageSync('vipLevel') || 0
if (vipLevel > 0) {
return
@@ -53,6 +53,15 @@ const consumeCoin = async () => {
if (userInfoStr) {
const userInfo = JSON.parse(userInfoStr)
await api.userApi.updateCoins(userInfo.userId, coins)
const recordData = {
userId: userInfo.userId,
amount: 1,
type: type,
description: description,
relatedId: relatedId
}
await api.coinConsumeApi.save(recordData)
}
} catch (e) {
console.error('更新金币失败:', e)