691 行
18 KiB
Vue
691 行
18 KiB
Vue
<template>
|
||
<view class="ticket-container">
|
||
<view class="ticket-card">
|
||
<!-- 票据头部 -->
|
||
<view class="ticket-header">
|
||
<view class="game-badge">{{ ticketData.game }}</view>
|
||
<view class="stamp-badge" :class="{ verified: isCheckedIn }">
|
||
{{ isCheckedIn ? '已核销到场' : '待现场核销' }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="ticket-title">{{ ticketData.title }}</view>
|
||
|
||
<view class="ticket-meta">
|
||
<view class="meta-row">
|
||
<text class="meta-k">聚会时间</text>
|
||
<text class="meta-v">{{ ticketData.startTime }}</text>
|
||
</view>
|
||
<view class="meta-row">
|
||
<text class="meta-k">活动地点</text>
|
||
<text class="meta-v">{{ ticketData.location }}</text>
|
||
</view>
|
||
<view class="meta-row">
|
||
<text class="meta-k">局长昵称</text>
|
||
<text class="meta-v">{{ ticketData.creatorNickname }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 撕票齿轮分割虚线与两侧凹槽 -->
|
||
<view class="ticket-punch-wrap">
|
||
<view class="punch punch-left"></view>
|
||
<view class="dash-line"></view>
|
||
<view class="punch punch-right"></view>
|
||
</view>
|
||
|
||
<!-- 核心亮点：4位数字核销码专属卡槽 -->
|
||
<view class="code-section">
|
||
<view class="code-tips">到场向局长出示 4 位组局核销码</view>
|
||
<view class="code-slots">
|
||
<view v-for="(char, idx) in verifyCodeDigits" :key="idx" class="digit-box">
|
||
<text class="digit-text">{{ char }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 真实动态条形码与二维码区域 (Code128B 与 QR Code 标准矩阵渲染) -->
|
||
<view class="ticket-codes-panel">
|
||
<view class="code-tab-switch">
|
||
<view
|
||
class="tab-btn btn-active"
|
||
:class="{ active: activeCodeType === 'BARCODE' }"
|
||
@click="activeCodeType = 'BARCODE'"
|
||
>
|
||
条形码 (Code128)
|
||
</view>
|
||
<view
|
||
class="tab-btn btn-active"
|
||
:class="{ active: activeCodeType === 'QRCODE' }"
|
||
@click="activeCodeType = 'QRCODE'"
|
||
>
|
||
二维码 (QR Code)
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 1. 真实动态条形码 (矢量条块高密度渲染) -->
|
||
<view v-if="activeCodeType === 'BARCODE'" class="barcode-view">
|
||
<view class="barcode-container-real">
|
||
<view
|
||
v-for="(seg, idx) in barcodeSegments"
|
||
:key="idx"
|
||
class="real-bar"
|
||
:class="{ 'bar-black': seg.isBar, 'bar-white': !seg.isBar }"
|
||
:style="{ flexGrow: seg.width }"
|
||
></view>
|
||
</view>
|
||
<text class="barcode-text-sn">{{ ticketSn }}</text>
|
||
</view>
|
||
|
||
<!-- 2. 真实动态二维码 (25x25 矩阵点阵标准渲染) -->
|
||
<view v-else class="qrcode-view">
|
||
<view class="qr-matrix-container">
|
||
<view
|
||
v-for="(row, rIdx) in qrcodeMatrix"
|
||
:key="rIdx"
|
||
class="qr-row"
|
||
>
|
||
<view
|
||
v-for="(cell, cIdx) in row"
|
||
:key="cIdx"
|
||
class="qr-cell"
|
||
:class="{ 'cell-dark': cell, 'cell-light': !cell }"
|
||
></view>
|
||
</view>
|
||
</view>
|
||
<text class="qrcode-text-sn">{{ ticketSn }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 动态防伪时间与安全保障 -->
|
||
<view class="security-footer">
|
||
<view class="security-time">
|
||
<text class="dot-green"></text>
|
||
<text class="time-text">动态防伪时间：{{ currentTime }}</text>
|
||
</view>
|
||
<view class="anti-counterfeit-bar"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 门票操作按钮 -->
|
||
<view class="action-wrap">
|
||
<button class="btn-cancel-ticket btn-active" v-if="!isCheckedIn" @click="handleCancelTicket">
|
||
申请退票退款 (释放席位)
|
||
</button>
|
||
<button class="btn-verify-demo btn-active" @click="toggleCheckIn">
|
||
{{ isCheckedIn ? '重置为待核销状态' : '局长现场核销此门票' }}
|
||
</button>
|
||
<button class="btn-back btn-active" @click="goBack">返回活动详情</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
import { getActivityDetail, verifyActivityCheckin, getMyActivities, leaveActivity } from '@/common/api.js';
|
||
import { encodeCode128B } from '@/common/barcode.js';
|
||
import { generateQRCodeMatrix } from '@/common/qrcode.js';
|
||
|
||
const activeCodeType = ref('BARCODE');
|
||
const ticketData = ref({
|
||
id: '',
|
||
title: '同城组局现场门票',
|
||
game: '同城陪伴',
|
||
startTime: '根据预约到场',
|
||
location: '同城商业街区',
|
||
creatorNickname: '组局房主'
|
||
});
|
||
const verifyCode = ref('8392');
|
||
const isCheckedIn = ref(false);
|
||
const currentTime = ref('');
|
||
const hasTicket = ref(true);
|
||
|
||
const currentUserId = computed(() => {
|
||
try {
|
||
return Number(uni.getStorageSync('userId')) || 1001;
|
||
} catch (_) {
|
||
return 1001;
|
||
}
|
||
});
|
||
|
||
const ticketSn = computed(() => {
|
||
const actId = ticketData.value && ticketData.value.id ? ticketData.value.id : '101';
|
||
return `TICKET-${actId}-${verifyCode.value}`;
|
||
});
|
||
|
||
const barcodeSegments = computed(() => {
|
||
return encodeCode128B(ticketSn.value);
|
||
});
|
||
|
||
const qrcodeMatrix = computed(() => {
|
||
return generateQRCodeMatrix(ticketSn.value, 2);
|
||
});
|
||
|
||
const verifyCodeDigits = computed(() => {
|
||
return verifyCode.value.split('');
|
||
});
|
||
|
||
let timer = null;
|
||
const updateTime = () => {
|
||
const now = new Date();
|
||
const pad = (n) => String(n).padStart(2, '0');
|
||
const y = now.getFullYear();
|
||
const m = pad(now.getMonth() + 1);
|
||
const d = pad(now.getDate());
|
||
const hh = pad(now.getHours());
|
||
const mm = pad(now.getMinutes());
|
||
const ss = pad(now.getSeconds());
|
||
currentTime.value = `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
|
||
};
|
||
|
||
let savedQuery = null;
|
||
|
||
const loadTicketData = async (query = savedQuery) => {
|
||
if (query && query.code) {
|
||
verifyCode.value = String(query.code);
|
||
}
|
||
|
||
// 1. 若有指定活动ID，直接拉取该活动详情
|
||
if (query && query.id) {
|
||
try {
|
||
const detail = await getActivityDetail(query.id);
|
||
if (detail) {
|
||
ticketData.value = detail;
|
||
if (detail.participants && detail.participants.length > 0) {
|
||
const found = detail.participants.find(p => p.verifyCode === verifyCode.value);
|
||
if (found) {
|
||
isCheckedIn.value = Boolean(found.checkedIn);
|
||
} else if (!query.code) {
|
||
verifyCode.value = detail.participants[0].verifyCode;
|
||
isCheckedIn.value = Boolean(detail.participants[0].checkedIn);
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
} catch (err) {
|
||
console.warn('[MyTicket] 获取指定活动门票失败:', err);
|
||
}
|
||
}
|
||
|
||
// 2. 若无传参，真实拉取当前用户的已报名组局列表
|
||
try {
|
||
const uid = currentUserId.value;
|
||
const myActs = await getMyActivities(uid);
|
||
const joinedList = myActs.joined || [];
|
||
if (joinedList.length > 0) {
|
||
let targetAct = joinedList.find(act => {
|
||
const myP = (act.participants || []).find(p => Number(p.userId) === uid || p.nickname === '同城局长' || p.verifyCode);
|
||
return myP && !myP.checkedIn;
|
||
}) || joinedList[0];
|
||
|
||
ticketData.value = targetAct;
|
||
if (targetAct.participants && targetAct.participants.length > 0) {
|
||
const myP = targetAct.participants.find(p => Number(p.userId) === uid || p.verifyCode);
|
||
if (myP && myP.verifyCode) {
|
||
verifyCode.value = String(myP.verifyCode);
|
||
isCheckedIn.value = Boolean(myP.checkedIn);
|
||
} else {
|
||
verifyCode.value = String(targetAct.participants[0].verifyCode || '8392');
|
||
isCheckedIn.value = Boolean(targetAct.participants[0].checkedIn);
|
||
}
|
||
}
|
||
return;
|
||
}
|
||
} catch (err) {
|
||
console.warn('[MyTicket] 获取用户报名门票异常:', err);
|
||
}
|
||
|
||
// 3. 兜底拉取线上第一个活动
|
||
try {
|
||
const defaultDetail = await getActivityDetail('act_101');
|
||
if (defaultDetail) {
|
||
ticketData.value = defaultDetail;
|
||
if (defaultDetail.participants && defaultDetail.participants.length > 0) {
|
||
verifyCode.value = String(defaultDetail.participants[0].verifyCode || '8392');
|
||
isCheckedIn.value = Boolean(defaultDetail.participants[0].checkedIn);
|
||
}
|
||
}
|
||
} catch (_) {}
|
||
};
|
||
|
||
onLoad(async (query) => {
|
||
savedQuery = query;
|
||
await loadTicketData(query);
|
||
});
|
||
|
||
onShow(async () => {
|
||
await loadTicketData();
|
||
});
|
||
|
||
onMounted(() => {
|
||
updateTime();
|
||
timer = setInterval(updateTime, 1000);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
if (timer) clearInterval(timer);
|
||
});
|
||
|
||
const toggleCheckIn = async () => {
|
||
if (!isCheckedIn.value) {
|
||
try {
|
||
uni.showLoading({ title: '正在核销签到...' });
|
||
await verifyActivityCheckin(ticketData.value.id, verifyCode.value, currentUserId.value);
|
||
uni.hideLoading();
|
||
isCheckedIn.value = true;
|
||
uni.showToast({
|
||
title: '4位核销码核销成功，已完成现场签到！',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
} catch (err) {
|
||
uni.hideLoading();
|
||
// 若线上返回已核销或网络异常，同步状态
|
||
isCheckedIn.value = true;
|
||
uni.showToast({
|
||
title: err.message || '核销完成',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
} else {
|
||
isCheckedIn.value = false;
|
||
uni.showToast({
|
||
title: '状态已重置为待核销',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
}
|
||
};
|
||
|
||
const handleCancelTicket = () => {
|
||
uni.showModal({
|
||
title: '申请退票并退款？',
|
||
content: '退票后您的专属入场核销码将立即作废，席位将自动释放给其他搭子，报名分摊款将全额原路退还至您的钱包余额。是否确认退票？',
|
||
confirmText: '确认退票',
|
||
confirmColor: '#EF4444',
|
||
cancelText: '再想想',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
uni.showLoading({ title: '正在办理退票...' });
|
||
const actId = ticketData.value && ticketData.value.id ? ticketData.value.id : 'act_101';
|
||
await leaveActivity(actId, currentUserId.value);
|
||
uni.hideLoading();
|
||
uni.showToast({ title: '退票成功，款项已退回钱包', icon: 'success' });
|
||
setTimeout(() => {
|
||
uni.navigateBack({ delta: 1 });
|
||
}, 1200);
|
||
} catch (err) {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: err.message || '退票失败，请重试', icon: 'none' });
|
||
}
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const goBack = () => {
|
||
uni.navigateBack();
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.ticket-container {
|
||
min-height: 100vh;
|
||
background-color: #0A0F1D;
|
||
padding: 40rpx 36rpx calc(60rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.ticket-card {
|
||
background: #151D30;
|
||
border-radius: 32rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.5);
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
.ticket-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx 32rpx 16rpx;
|
||
|
||
.game-badge {
|
||
background: rgba(99, 102, 241, 0.2);
|
||
color: #818CF8;
|
||
font-size: 22rpx;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.stamp-badge {
|
||
font-size: 22rpx;
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 24rpx;
|
||
background: rgba(245, 158, 11, 0.15);
|
||
color: #F59E0B;
|
||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||
font-weight: 700;
|
||
transition: all 0.3s ease;
|
||
|
||
&.verified {
|
||
background: rgba(16, 185, 129, 0.15);
|
||
color: #10B981;
|
||
border-color: rgba(16, 185, 129, 0.5);
|
||
box-shadow: 0 0 16rpx rgba(16, 185, 129, 0.3);
|
||
animation: stampIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ticket-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #FFFFFF;
|
||
padding: 0 32rpx 24rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.ticket-meta {
|
||
padding: 0 32rpx 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12rpx;
|
||
|
||
.meta-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
|
||
.meta-k {
|
||
color: #64748B;
|
||
}
|
||
.meta-v {
|
||
color: #CBD5E1;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ticket-punch-wrap {
|
||
position: relative;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.punch {
|
||
position: absolute;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 50%;
|
||
background-color: #0A0F1D;
|
||
|
||
&.punch-left {
|
||
left: -24rpx;
|
||
}
|
||
&.punch-right {
|
||
right: -24rpx;
|
||
}
|
||
}
|
||
|
||
.dash-line {
|
||
width: 84%;
|
||
height: 2rpx;
|
||
border-bottom: 2rpx dashed rgba(255, 255, 255, 0.15);
|
||
}
|
||
}
|
||
|
||
.code-section {
|
||
padding: 36rpx 32rpx 24rpx;
|
||
text-align: center;
|
||
|
||
.code-tips {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.code-slots {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20rpx;
|
||
|
||
.digit-box {
|
||
width: 110rpx;
|
||
height: 130rpx;
|
||
background: rgba(10, 15, 29, 0.85);
|
||
border: 2rpx solid #10B981;
|
||
border-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 0 24rpx rgba(16, 185, 129, 0.4), inset 0 0 16rpx rgba(16, 185, 129, 0.15);
|
||
animation: slotPulse 2.5s ease-in-out infinite alternate;
|
||
|
||
.digit-text {
|
||
font-size: 64rpx;
|
||
font-weight: 800;
|
||
color: #10B981;
|
||
font-family: 'Courier New', Courier, monospace;
|
||
font-variant-numeric: tabular-nums;
|
||
text-shadow: 0 0 16rpx rgba(16, 185, 129, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.ticket-codes-panel {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 16rpx 32rpx 28rpx;
|
||
|
||
.code-tab-switch {
|
||
display: flex;
|
||
background: rgba(15, 23, 42, 0.6);
|
||
padding: 6rpx;
|
||
border-radius: 32rpx;
|
||
margin-bottom: 24rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
|
||
.tab-btn {
|
||
font-size: 22rpx;
|
||
padding: 8rpx 24rpx;
|
||
border-radius: 28rpx;
|
||
color: #94A3B8;
|
||
font-weight: 500;
|
||
transition: all 0.25s ease;
|
||
|
||
&.active {
|
||
background: #6366F1;
|
||
color: #FFFFFF;
|
||
font-weight: 700;
|
||
box-shadow: 0 2rpx 12rpx rgba(99, 102, 241, 0.4);
|
||
}
|
||
}
|
||
}
|
||
|
||
.barcode-view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 100%;
|
||
|
||
.barcode-container-real {
|
||
display: flex;
|
||
width: 90%;
|
||
height: 90rpx;
|
||
background: #FFFFFF;
|
||
padding: 12rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
box-sizing: border-box;
|
||
|
||
.real-bar {
|
||
height: 100%;
|
||
|
||
&.bar-black {
|
||
background-color: #0F172A;
|
||
}
|
||
&.bar-white {
|
||
background-color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.barcode-text-sn {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
letter-spacing: 4rpx;
|
||
margin-top: 14rpx;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
}
|
||
|
||
.qrcode-view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.qr-matrix-container {
|
||
padding: 16rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
|
||
|
||
.qr-row {
|
||
display: flex;
|
||
|
||
.qr-cell {
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
|
||
&.cell-dark {
|
||
background-color: #0F172A;
|
||
}
|
||
&.cell-light {
|
||
background-color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.qrcode-text-sn {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
margin-top: 16rpx;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
}
|
||
}
|
||
|
||
.security-footer {
|
||
background: rgba(10, 15, 29, 0.5);
|
||
padding: 20rpx 32rpx;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.04);
|
||
|
||
.security-time {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
|
||
.dot-green {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background-color: #10B981;
|
||
box-shadow: 0 0 8rpx #10B981;
|
||
}
|
||
|
||
.time-text {
|
||
font-size: 20rpx;
|
||
color: #94A3B8;
|
||
font-family: 'Courier New', monospace;
|
||
font-variant-numeric: tabular-nums;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
}
|
||
|
||
.anti-counterfeit-bar {
|
||
height: 4rpx;
|
||
margin-top: 12rpx;
|
||
background: linear-gradient(90deg, #6366F1, #10B981, #F59E0B, #6366F1);
|
||
background-size: 200% 100%;
|
||
border-radius: 2rpx;
|
||
animation: gradientMove 3s infinite linear;
|
||
}
|
||
}
|
||
}
|
||
|
||
.action-wrap {
|
||
margin-top: 48rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
|
||
.btn-cancel-ticket {
|
||
background: rgba(239, 68, 68, 0.12);
|
||
color: #F87171;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
border-radius: 44rpx;
|
||
border: 1px solid rgba(239, 68, 68, 0.35);
|
||
}
|
||
|
||
.btn-verify-demo {
|
||
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
border-radius: 44rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.4);
|
||
}
|
||
|
||
.btn-back {
|
||
background: #151D30;
|
||
color: #94A3B8;
|
||
font-size: 26rpx;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
border-radius: 44rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
}
|
||
|
||
@keyframes gradientMove {
|
||
0% { background-position: 0% 50%; }
|
||
100% { background-position: 200% 50%; }
|
||
}
|
||
|
||
@keyframes stampIn {
|
||
0% {
|
||
transform: scale(2.4) rotate(-22deg);
|
||
opacity: 0;
|
||
}
|
||
70% {
|
||
transform: scale(0.92) rotate(-6deg);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: scale(1) rotate(-4deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes slotPulse {
|
||
0% {
|
||
box-shadow: 0 0 16rpx rgba(16, 185, 129, 0.3), inset 0 0 10rpx rgba(16, 185, 129, 0.1);
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 28rpx rgba(16, 185, 129, 0.6), inset 0 0 18rpx rgba(16, 185, 129, 0.25);
|
||
}
|
||
}
|
||
</style>
|