641 lines
17 KiB
Vue
641 lines
17 KiB
Vue
<template>
|
||
<ActivityPageLayout :cover-url="coverUrl" bottom-padding="220rpx">
|
||
<template #header>
|
||
<ActivityHeader
|
||
:title="detail.name || detail.title || '无限赏'"
|
||
:price="detail.price_draw"
|
||
price-unit="/发"
|
||
:cover-url="coverUrl"
|
||
:tags="['公开透明', '随机掉落']"
|
||
@show-rules="showRules"
|
||
@go-cabinet="goCabinet"
|
||
/>
|
||
</template>
|
||
|
||
<template #content>
|
||
<ActivityTabs v-model="tabActive" :stagger="1">
|
||
<template #pool>
|
||
<RewardsPreview
|
||
title="奖池配置"
|
||
:rewards="currentIssueRewards"
|
||
:grouped="true"
|
||
@view-all="rewardsVisible = true"
|
||
/>
|
||
</template>
|
||
<template #records>
|
||
<RecordsList :records="winRecords" />
|
||
</template>
|
||
</ActivityTabs>
|
||
</template>
|
||
|
||
<template #footer>
|
||
<!-- 底部多档位抽赏按钮 -->
|
||
<view class="bottom-actions" v-if="!isDevMode">
|
||
<view class="tier-btn" @tap="openPayment(1)">
|
||
<text class="tier-price">¥{{ (pricePerDraw * 1).toFixed(2) }}</text>
|
||
<text class="tier-label">抽1发</text>
|
||
</view>
|
||
<view class="tier-btn" @tap="openPayment(3)">
|
||
<text class="tier-price">¥{{ (pricePerDraw * 3).toFixed(2) }}</text>
|
||
<text class="tier-label">抽3发</text>
|
||
</view>
|
||
<view class="tier-btn" @tap="openPayment(5)">
|
||
<text class="tier-price">¥{{ (pricePerDraw * 5).toFixed(2) }}</text>
|
||
<text class="tier-label">抽5发</text>
|
||
</view>
|
||
<view class="tier-btn tier-hot" @tap="openPayment(10)">
|
||
<text class="tier-price">¥{{ (pricePerDraw * 10).toFixed(2) }}</text>
|
||
<text class="tier-label">抽10发</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 开发者模式 -->
|
||
<view class="bottom-actions dev-actions" v-else>
|
||
<view class="dev-input-wrapper">
|
||
<text class="dev-label">自定义发数:</text>
|
||
<input
|
||
class="dev-input"
|
||
type="number"
|
||
v-model="customDrawCount"
|
||
placeholder="输入数量"
|
||
/>
|
||
</view>
|
||
<view class="tier-btn tier-hot" @tap="openPayment(customDrawCount)">
|
||
<text class="tier-price">Go</text>
|
||
<text class="tier-label">抽{{ customDrawCount }}发</text>
|
||
</view>
|
||
<view class="tier-btn" @tap="isDevMode = false">
|
||
<text class="tier-price">Exit</text>
|
||
<text class="tier-label">退出</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Dev Toggle Button -->
|
||
<view class="dev-fab" @tap="isDevMode = !isDevMode">Dev</view>
|
||
</template>
|
||
|
||
<template #modals>
|
||
<RewardsPopup
|
||
v-model:visible="rewardsVisible"
|
||
:title="`${currentIssueTitle} · 奖池与概率`"
|
||
:reward-groups="rewardGroups"
|
||
/>
|
||
|
||
<LotteryResultPopup
|
||
v-model:visible="showResultPopup"
|
||
:results="drawResults"
|
||
@close="onResultClose"
|
||
/>
|
||
|
||
<PaymentPopup
|
||
v-model:visible="paymentVisible"
|
||
:amount="paymentAmount"
|
||
:coupons="coupons"
|
||
:propCards="propCards"
|
||
@confirm="onPaymentConfirm"
|
||
/>
|
||
<RulesPopup
|
||
v-model:visible="rulesVisible"
|
||
:content="detail.gameplay_intro"
|
||
/>
|
||
|
||
<CabinetPreviewPopup
|
||
v-model:visible="cabinetVisible"
|
||
:activity-id="activityId"
|
||
/>
|
||
|
||
<!-- 开奖加载弹窗 -->
|
||
<DrawLoadingPopup
|
||
:visible="showDrawLoading"
|
||
:progress="drawProgress"
|
||
:total="drawTotal"
|
||
/>
|
||
</template>
|
||
</ActivityPageLayout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, nextTick, watch } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
// 公共组件 - uni-app需要直接导入.vue文件
|
||
import ActivityPageLayout from '@/components/activity/ActivityPageLayout.vue'
|
||
import ActivityHeader from '@/components/activity/ActivityHeader.vue'
|
||
import ActivityTabs from '@/components/activity/ActivityTabs.vue'
|
||
import RewardsPreview from '@/components/activity/RewardsPreview.vue'
|
||
import RewardsPopup from '@/components/activity/RewardsPopup.vue'
|
||
import RecordsList from '@/components/activity/RecordsList.vue'
|
||
import RulesPopup from '@/components/activity/RulesPopup.vue'
|
||
import CabinetPreviewPopup from '@/components/activity/CabinetPreviewPopup.vue'
|
||
import LotteryResultPopup from '@/components/activity/LotteryResultPopup.vue'
|
||
import DrawLoadingPopup from '@/components/activity/DrawLoadingPopup.vue'
|
||
import PaymentPopup from '@/components/PaymentPopup.vue'
|
||
// Composables
|
||
import { useActivity, useIssues, useRewards, useRecords } from '../../composables'
|
||
// API
|
||
import { joinLottery, createWechatOrder, getLotteryResult, getItemCards, getUserCoupons } from '@/api/appUser'
|
||
|
||
// ============ 使用Composables ============
|
||
const activityId = ref('')
|
||
|
||
const {
|
||
detail,
|
||
coverUrl,
|
||
fetchDetail,
|
||
setNavigationTitle
|
||
} = useActivity(activityId)
|
||
|
||
const pricePerDraw = computed(() => Number(detail.value?.price_draw || 0) / 100)
|
||
|
||
const {
|
||
issues,
|
||
currentIssueId,
|
||
currentIssueTitle,
|
||
fetchIssues
|
||
} = useIssues(activityId)
|
||
|
||
const {
|
||
currentIssueRewards,
|
||
rewardGroups,
|
||
fetchRewardsForIssues
|
||
} = useRewards(activityId, currentIssueId)
|
||
|
||
const {
|
||
winRecords,
|
||
fetchWinRecords
|
||
} = useRecords()
|
||
|
||
// ============ 本地状态 ============
|
||
const tabActive = ref('pool')
|
||
const rewardsVisible = ref(false)
|
||
const rulesVisible = ref(false)
|
||
const cabinetVisible = ref(false)
|
||
const showResultPopup = ref(false)
|
||
const drawResults = ref([])
|
||
const drawLoading = ref(false)
|
||
const showDrawLoading = ref(false)
|
||
const drawProgress = ref(0)
|
||
const drawTotal = ref(1)
|
||
|
||
const isDevMode = ref(false)
|
||
const customDrawCount = ref(1)
|
||
|
||
// 支付相关
|
||
const paymentVisible = ref(false)
|
||
const paymentAmount = ref('0.00')
|
||
const coupons = ref([])
|
||
const propCards = ref([])
|
||
const pendingCount = ref(1)
|
||
const selectedCoupon = ref(null)
|
||
const selectedCard = ref(null)
|
||
|
||
// ============ 业务方法 ============
|
||
function showRules() {
|
||
rulesVisible.value = true
|
||
}
|
||
|
||
function goCabinet() {
|
||
cabinetVisible.value = true
|
||
}
|
||
|
||
function onResultClose() {
|
||
showResultPopup.value = false
|
||
drawResults.value = []
|
||
}
|
||
|
||
function openPayment(count) {
|
||
const times = Math.max(1, Number(count || 1))
|
||
pendingCount.value = times
|
||
paymentAmount.value = (pricePerDraw.value * times).toFixed(2)
|
||
const token = uni.getStorageSync('token')
|
||
const phoneBound = !!uni.getStorageSync('phone_bound')
|
||
if (!token || !phoneBound) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先登录并绑定手机号',
|
||
confirmText: '去登录',
|
||
success: (res) => { if (res.confirm) uni.navigateTo({ url: '/pages/login/index' }) }
|
||
})
|
||
return
|
||
}
|
||
paymentVisible.value = true
|
||
// 并行获取道具卡和优惠券
|
||
Promise.all([fetchPropCards(), fetchCoupons()])
|
||
}
|
||
|
||
async function onPaymentConfirm(data) {
|
||
selectedCoupon.value = data?.coupon || null
|
||
selectedCard.value = data?.card || null
|
||
paymentVisible.value = false
|
||
await onMachineDraw(pendingCount.value)
|
||
}
|
||
|
||
async function fetchPropCards() {
|
||
const user_id = uni.getStorageSync('user_id')
|
||
if (!user_id) return
|
||
try {
|
||
const res = await getItemCards(user_id)
|
||
let list = Array.isArray(res) ? res : (res?.list || res?.data || [])
|
||
|
||
// Group identical cards by name
|
||
const groupedMap = new Map()
|
||
list.forEach((i, idx) => {
|
||
const name = i.name ?? i.title ?? '道具卡'
|
||
if (!groupedMap.has(name)) {
|
||
groupedMap.set(name, {
|
||
id: i.id ?? i.card_id ?? String(idx),
|
||
name: name,
|
||
count: 0
|
||
})
|
||
}
|
||
groupedMap.get(name).count++
|
||
})
|
||
|
||
propCards.value = Array.from(groupedMap.values())
|
||
} catch (e) {
|
||
propCards.value = []
|
||
}
|
||
}
|
||
|
||
async function fetchCoupons() {
|
||
const user_id = uni.getStorageSync('user_id')
|
||
if (!user_id) return
|
||
try {
|
||
const res = await getUserCoupons(user_id, 0, 1, 100)
|
||
let list = Array.isArray(res) ? res : (res?.list || res?.data || [])
|
||
coupons.value = list.map((i, idx) => {
|
||
const amountCents = i.remaining ?? i.amount ?? i.value ?? 0
|
||
const amt = isNaN(amountCents) ? 0 : (Number(amountCents) / 100)
|
||
return {
|
||
id: i.id ?? i.coupon_id ?? String(idx),
|
||
name: i.name ?? i.title ?? '优惠券',
|
||
amount: amt.toFixed(2)
|
||
}
|
||
})
|
||
} catch (e) {
|
||
coupons.value = []
|
||
}
|
||
}
|
||
|
||
function extractResultList(resultRes) {
|
||
const root = resultRes?.data ?? resultRes?.result ?? resultRes
|
||
if (!root) return []
|
||
// Backend now returns results array with all draw logs including doubled
|
||
if (resultRes?.results && Array.isArray(resultRes.results) && resultRes.results.length > 0) {
|
||
return resultRes.results
|
||
}
|
||
return root.results || root.list || root.items || root.data || []
|
||
}
|
||
|
||
function mapResultsToFlipItems(resultRes, poolRewards) {
|
||
const list = extractResultList(resultRes)
|
||
const poolArr = Array.isArray(poolRewards) ? poolRewards : []
|
||
const lookup = new Map()
|
||
poolArr.forEach(it => {
|
||
const id = it?.id ?? it?.reward_id ?? it?.product_id
|
||
if (id !== undefined) lookup.set(Number(id), it)
|
||
})
|
||
|
||
return list.filter(Boolean).map(d => {
|
||
const rewardId = d.reward_id ?? d.rewardId ?? d.product_id ?? d.productId ?? d.id
|
||
const rewardName = String(d.reward_name ?? d.rewardName ?? d.product_name ?? d.productName ?? d.title ?? d.name ?? '')
|
||
const fromId = Number.isFinite(Number(rewardId)) ? lookup.get(Number(rewardId)) : null
|
||
const fromName = !fromId && rewardName ? poolArr.find(x => x?.title === rewardName) : null
|
||
const it = fromId || fromName || null
|
||
return {
|
||
reward_id: rewardId, // 添加reward_id用于正确分组
|
||
title: rewardName || it?.title || '奖励',
|
||
image: d.image || it?.image || d.img || d.pic || d.product_image || ''
|
||
}
|
||
})
|
||
}
|
||
|
||
async function onMachineDraw(count) {
|
||
const aid = activityId.value
|
||
const iid = currentIssueId.value
|
||
if (!aid || !iid) {
|
||
uni.showToast({ title: '期数未选择', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
const token = uni.getStorageSync('token')
|
||
const phoneBound = !!uni.getStorageSync('phone_bound')
|
||
if (!token || !phoneBound) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先登录并绑定手机号',
|
||
confirmText: '去登录',
|
||
success: (res) => { if (res.confirm) uni.navigateTo({ url: '/pages/login/index' }) }
|
||
})
|
||
return
|
||
}
|
||
|
||
const openid = uni.getStorageSync('openid')
|
||
if (!openid) {
|
||
uni.showToast({ title: '缺少OpenID，请重新登录', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
drawLoading.value = true
|
||
try {
|
||
const times = Math.max(1, Number(count || 1))
|
||
const joinRes = await joinLottery({
|
||
activity_id: Number(aid),
|
||
issue_id: Number(iid),
|
||
channel: 'miniapp',
|
||
count: times,
|
||
coupon_id: selectedCoupon.value?.id ? Number(selectedCoupon.value.id) : 0,
|
||
item_card_id: selectedCard.value?.id ? Number(selectedCard.value.id) : 0
|
||
})
|
||
|
||
const orderNo = joinRes?.order_no || joinRes?.data?.order_no || joinRes?.result?.order_no
|
||
if (!orderNo) throw new Error('未获取到订单号')
|
||
|
||
const payRes = await createWechatOrder({ openid, order_no: orderNo })
|
||
await new Promise((resolve, reject) => {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: payRes.timeStamp || payRes.timestamp,
|
||
nonceStr: payRes.nonceStr || payRes.noncestr,
|
||
package: payRes.package,
|
||
signType: payRes.signType || 'MD5',
|
||
paySign: payRes.paySign,
|
||
success: resolve,
|
||
fail: reject
|
||
})
|
||
})
|
||
|
||
// 支付成功后立即显示开奖加载弹窗
|
||
drawTotal.value = times
|
||
drawProgress.value = 0
|
||
showDrawLoading.value = true
|
||
|
||
// 轮询等待开奖完成
|
||
let resultRes = await getLotteryResult(orderNo)
|
||
let pollCount = 0
|
||
const maxPolls = 15 // 最多轮询15次，每次2秒，共30秒
|
||
|
||
while (resultRes?.status === 'paid_waiting' &&
|
||
resultRes?.completed < resultRes?.count &&
|
||
pollCount < maxPolls) {
|
||
// 更新进度
|
||
drawProgress.value = resultRes?.completed || 0
|
||
await new Promise(r => setTimeout(r, resultRes?.nextPollMs || 2000))
|
||
resultRes = await getLotteryResult(orderNo)
|
||
pollCount++
|
||
}
|
||
|
||
// 隐藏加载弹窗
|
||
showDrawLoading.value = false
|
||
|
||
const items = mapResultsToFlipItems(resultRes, currentIssueRewards.value)
|
||
|
||
drawResults.value = items
|
||
showResultPopup.value = true
|
||
} catch (e) {
|
||
showDrawLoading.value = false
|
||
uni.showToast({ title: e.message || '操作失败', icon: 'none' })
|
||
} finally {
|
||
drawLoading.value = false
|
||
}
|
||
}
|
||
|
||
// ============ 生命周期 ============
|
||
onLoad(async (opts) => {
|
||
const id = opts?.id || ''
|
||
if (!id) return
|
||
activityId.value = id
|
||
// 并行获取活动详情和期数信息
|
||
await Promise.all([fetchDetail(), fetchIssues()])
|
||
setNavigationTitle('无限赏')
|
||
// 期数获取完成后获取奖励
|
||
await fetchRewardsForIssues(issues.value)
|
||
// 异步获取记录（不阻塞渲染）
|
||
if (currentIssueId.value) {
|
||
fetchWinRecords(id, currentIssueId.value)
|
||
}
|
||
})
|
||
|
||
// 监听期切换，刷新记录
|
||
watch(currentIssueId, (newId) => {
|
||
if (newId && activityId.value) {
|
||
fetchWinRecords(activityId.value, newId)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 底部多档位操作按钮 - 原始设计 */
|
||
.bottom-actions {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
padding: 32rpx 32rpx;
|
||
padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: blur(30rpx);
|
||
box-shadow: 0 -12rpx 40rpx rgba(0, 0, 0, 0.08);
|
||
z-index: 999;
|
||
border-top: 1rpx solid rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.tier-btn {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 24rpx 10rpx;
|
||
background: #FFF;
|
||
border: 2rpx solid rgba($brand-primary, 0.1);
|
||
border-radius: 28rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
|
||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||
margin: 0;
|
||
line-height: normal;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.92);
|
||
background: #F9F9F9;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
.tier-price {
|
||
font-size: 34rpx;
|
||
font-weight: 900;
|
||
color: $text-main;
|
||
font-family: 'DIN Alternate', sans-serif;
|
||
letter-spacing: -1rpx;
|
||
}
|
||
|
||
.tier-label {
|
||
font-size: 22rpx;
|
||
color: $brand-primary;
|
||
margin-top: 6rpx;
|
||
font-weight: 800;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* 热门/最高档位 - 高级动效 */
|
||
.tier-hot {
|
||
background: $gradient-brand !important;
|
||
border: none !important;
|
||
box-shadow: 0 12rpx 32rpx rgba($brand-primary, 0.35) !important;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.tier-price {
|
||
color: #FFF !important;
|
||
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.tier-label {
|
||
color: rgba(255, 255, 255, 0.9) !important;
|
||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 流光效果 */
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -150%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: linear-gradient(
|
||
to right,
|
||
transparent,
|
||
rgba(255, 255, 255, 0.25),
|
||
transparent
|
||
);
|
||
transform: rotate(30deg);
|
||
animation: shine 3s ease-in-out infinite;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.92);
|
||
box-shadow: 0 6rpx 16rpx rgba($brand-primary, 0.25) !important;
|
||
}
|
||
}
|
||
|
||
@keyframes shine {
|
||
0% { left: -150%; }
|
||
50%, 100% { left: 150%; }
|
||
}
|
||
|
||
/* 翻牌弹窗 */
|
||
.flip-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1001;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.flip-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
backdrop-filter: blur(10rpx);
|
||
}
|
||
|
||
.flip-content {
|
||
position: relative;
|
||
width: 90%;
|
||
max-height: 85vh;
|
||
background: rgba($bg-card, 0.95);
|
||
border-radius: $radius-xl;
|
||
padding: $spacing-lg;
|
||
overflow: hidden;
|
||
box-shadow: $shadow-card;
|
||
}
|
||
|
||
.overlay-close {
|
||
margin-top: $spacing-lg;
|
||
width: 100%;
|
||
background: $gradient-brand;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: $radius-lg;
|
||
font-size: $font-md;
|
||
font-weight: 600;
|
||
padding: $spacing-md;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.dev-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.dev-input-wrapper {
|
||
flex: 2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
background: #f5f5f5;
|
||
border-radius: 20rpx;
|
||
padding: 10rpx 20rpx;
|
||
height: 100%;
|
||
}
|
||
|
||
.dev-label {
|
||
font-size: 20rpx;
|
||
color: #666;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.dev-input {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
color: #333;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.dev-fab {
|
||
position: fixed;
|
||
right: 32rpx;
|
||
bottom: 280rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
backdrop-filter: blur(10rpx);
|
||
color: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
z-index: 990;
|
||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
|
||
border: 1rpx solid rgba(255,255,255,0.2);
|
||
transition: all 0.3s;
|
||
|
||
&:active {
|
||
transform: scale(0.9);
|
||
background: rgba(0, 0, 0, 0.7);
|
||
}
|
||
}
|
||
</style>
|