修复了无限赏的按钮,背包的积分显示

This commit is contained in:
tsui110 2025-12-23 22:35:15 +08:00
parent 321189a3fe
commit f57ecfbaee
2 changed files with 72 additions and 39 deletions

View File

@ -51,46 +51,25 @@
</scroll-view> </scroll-view>
</view> </view>
<view class="section-container selector-container animate-enter stagger-2">
<view class="issue-header" v-if="showIssues && issues.length">
<view class="issue-switch-btn" @click="prevIssue">
<text class="arrow"></text>
</view>
<view class="issue-info-center">
<text class="issue-current-text">{{ currentIssueTitle }}</text>
<text class="issue-status-badge">{{ statusText || '进行中' }}</text>
</view>
<view class="issue-switch-btn" @click="nextIssue">
<text class="arrow"></text>
</view>
</view>
<view class="gameplay-tags">
<view class="tag tag-pool">聚宝盆</view>
<view class="tag tag-drop">随机掉落 10%</view>
<view class="tag tag-free">随机免单 10%</view>
</view>
</view>
<view style="height: 220rpx;"></view> <view style="height: 220rpx;"></view>
</scroll-view> </scroll-view>
</view> </view>
<!-- 底部多档位抽赏按钮 --> <!-- 底部多档位抽赏按钮 -->
<view class="bottom-actions"> <view class="bottom-actions">
<button class="tier-btn" @click="() => openPayment(1)"> <button class="tier-btn" @tap="openPayment(1)">
<text class="tier-price">¥{{ (pricePerDrawYuan * 1).toFixed(2) }}</text> <text class="tier-price">¥{{ (pricePerDrawYuan * 1).toFixed(2) }}</text>
<text class="tier-label">抽1发</text> <text class="tier-label">抽1发</text>
</button> </button>
<button class="tier-btn" @click="() => openPayment(3)"> <button class="tier-btn" @tap="openPayment(3)">
<text class="tier-price">¥{{ (pricePerDrawYuan * 3).toFixed(2) }}</text> <text class="tier-price">¥{{ (pricePerDrawYuan * 3).toFixed(2) }}</text>
<text class="tier-label">抽3发</text> <text class="tier-label">抽3发</text>
</button> </button>
<button class="tier-btn" @click="() => openPayment(5)"> <button class="tier-btn" @tap="openPayment(5)">
<text class="tier-price">¥{{ (pricePerDrawYuan * 5).toFixed(2) }}</text> <text class="tier-price">¥{{ (pricePerDrawYuan * 5).toFixed(2) }}</text>
<text class="tier-label">抽5发</text> <text class="tier-label">抽5发</text>
</button> </button>
<button class="tier-btn tier-hot" @click="() => openPayment(10)"> <button class="tier-btn tier-hot" @tap="openPayment(10)">
<text class="tier-price">¥{{ (pricePerDrawYuan * 10).toFixed(2) }}</text> <text class="tier-price">¥{{ (pricePerDrawYuan * 10).toFixed(2) }}</text>
<text class="tier-label">抽10发</text> <text class="tier-label">抽10发</text>
</button> </button>
@ -206,7 +185,7 @@ function showRules() {
} }
function goCabinet() { function goCabinet() {
uni.navigateTo({ url: '/pages/cabinet/index' }) uni.switchTab({ url: '/pages/cabinet/index' })
} }
async function fetchDetail(id) { async function fetchDetail(id) {
@ -1037,6 +1016,7 @@ function closeFlip() { showFlip.value = false }
} }
.tier-btn { .tier-btn {
flex: 1; flex: 1;
min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -1067,28 +1047,50 @@ function closeFlip() { showFlip.value = false }
} }
.tier-hot { .tier-hot {
background: $gradient-brand; background: $gradient-red;
border: none; border: none;
box-shadow: $shadow-warm; box-shadow: 0 6rpx 14rpx rgba($accent-red, 0.12);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: $radius-lg;
transform: translateZ(0);
.tier-price, .tier-label { .tier-price, .tier-label {
color: #fff; color: #fff !important;
position: relative;
z-index: 2;
}
&::before {
content: '';
position: absolute;
left: -40%;
top: 0;
width: 60%;
height: 100%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-18deg);
opacity: 0.9;
z-index: 1;
pointer-events: none;
animation: hotShine 2.6s ease-in-out infinite;
} }
&::after { &::after {
content: 'HOT'; content: 'HOT';
position: absolute; position: absolute;
top: 0; top: 8rpx;
right: 0; right: 8rpx;
background: linear-gradient(135deg, $accent-red, #D32F2F); background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
color: #fff; color: #fff;
font-size: 18rpx; font-size: 20rpx;
font-weight: 800; font-weight: 800;
padding: 4rpx 10rpx; padding: 3rpx 10rpx;
border-bottom-left-radius: $radius-md; border-radius: 999rpx;
box-shadow: -2rpx 2rpx 4rpx rgba(0,0,0,0.1); border: 1rpx solid rgba(255,255,255,0.35);
text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.18);
z-index: 3;
pointer-events: none;
} }
&:active { &:active {
@ -1100,6 +1102,13 @@ function closeFlip() { showFlip.value = false }
color: #FFFFFF; color: #FFFFFF;
} }
@keyframes hotShine {
0% { transform: translateX(-10%) skewX(-18deg); opacity: 0; }
15% { opacity: 0.9; }
55% { transform: translateX(220%) skewX(-18deg); opacity: 0.35; }
100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}
.rewards-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9000; } .rewards-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9000; }
.rewards-mask { .rewards-mask {
position: absolute; left: 0; right: 0; top: 0; bottom: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0;

View File

@ -50,7 +50,10 @@
<!-- 底部操作栏 --> <!-- 底部操作栏 -->
<view class="bottom-bar" v-if="hasSelected"> <view class="bottom-bar" v-if="hasSelected">
<view class="selected-info">已选 {{ totalSelectedCount }} </view> <view class="selected-info">
<text>已选 {{ totalSelectedCount }} </text>
<text class="selected-points">预计兑换 {{ totalRedeemPoints }} 积分</text>
</view>
<view class="btn-group"> <view class="btn-group">
<button class="action-btn btn-ship" @tap="onShip">发货</button> <button class="action-btn btn-ship" @tap="onShip">发货</button>
<button class="action-btn btn-redeem" @tap="onRedeem">兑换</button> <button class="action-btn btn-redeem" @tap="onRedeem">兑换</button>
@ -154,6 +157,10 @@ const totalSelectedCount = computed(() => {
return aggregatedList.value.reduce((sum, item) => sum + (item.selected ? item.selectedCount : 0), 0) return aggregatedList.value.reduce((sum, item) => sum + (item.selected ? item.selectedCount : 0), 0)
}) })
const totalRedeemPoints = computed(() => {
return aggregatedList.value.reduce((sum, item) => sum + (item.selected ? (Number(item.points) || 0) * (item.selectedCount || 0) : 0), 0)
})
const isAllSelected = computed(() => { const isAllSelected = computed(() => {
return aggregatedList.value.length > 0 && aggregatedList.value.every(item => item.selected) return aggregatedList.value.length > 0 && aggregatedList.value.every(item => item.selected)
}) })
@ -552,15 +559,24 @@ async function fetchProductPrices() {
const list = currentList.value const list = currentList.value
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
const item = list[i] const item = list[i]
if (item.id && !item.price) { if (item.id && (!item.price || item.points === undefined || item.points === null)) {
try { try {
const res = await getProductDetail(item.id) const res = await getProductDetail(item.id)
const p = res && (res.data ?? res.result ?? res)
if (res && (res.price !== undefined || res.data?.price !== undefined)) { if (res && (res.price !== undefined || res.data?.price !== undefined)) {
// res.price res.data.price () // res.price res.data.price ()
const raw = res.price !== undefined ? res.price : res.data?.price const raw = res.price !== undefined ? res.price : res.data?.price
const num = Number(raw) const num = Number(raw)
item.price = isNaN(num) ? null : (num / 100) item.price = isNaN(num) ? null : (num / 100)
} }
if (p) {
const cands = [
p.redeem_points, p.recycle_points, p.exchange_points,
p.points_redeem, p.points_value, p.points, p.points_required
]
const val = cands.find(v => Number.isFinite(Number(v)) && Number(v) >= 0)
item.points = val !== undefined ? Number(val) : (item.points ?? 0)
}
} catch (e) { } catch (e) {
console.error('Fetch price failed for:', item.id, e) console.error('Fetch price failed for:', item.id, e)
} }
@ -619,7 +635,7 @@ async function onRedeem() {
uni.showModal({ uni.showModal({
title: '确认兑换', title: '确认兑换',
content: `确定要兑换选中的 ${allIds.length} 件物品吗?此操作不可撤销。`, content: `确定要兑换选中的 ${allIds.length} 件物品,预计获得 ${totalRedeemPoints.value} 积分吗?此操作不可撤销。`,
success: async (res) => { success: async (res) => {
if (res.confirm) { if (res.confirm) {
uni.showLoading({ title: '处理中...' }) uni.showLoading({ title: '处理中...' })
@ -957,6 +973,14 @@ async function onShip() {
font-size: 28rpx; font-size: 28rpx;
color: $text-main; color: $text-main;
font-weight: 600; font-weight: 600;
display: flex;
flex-direction: column;
gap: 6rpx;
}
.selected-points {
font-size: 22rpx;
color: $brand-primary;
font-weight: 700;
} }
.btn-group { .btn-group {
display: flex; display: flex;