shanghaipeiwan/pwuniapp/pages/activity/my-ticket.vue

<template>
  <view class="ticket-container" :class="['theme-' + currentThemeKey]">
    <view class="ticket-card" v-if="hasTicket">
      <!-- 票据头部 -->
      <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" v-if="hasTicket">
      <button class="btn-cancel-ticket btn-active" v-if="!isCheckedIn" @click="handleCancelTicket">
        申请退票退款 (释放席位)
      </button>
      <button class="btn-back btn-active" @click="goBack">返回活动详情</button>
    </view>

    <view class="ticket-empty" v-else>
      <text class="ticket-empty-title">暂无可用门票</text>
      <text class="ticket-empty-desc">报名组局后，专属入场核销码会出现在这里</text>
      <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, getMyActivities, leaveActivity, normalizeUserId } from '@/common/api.js';
import { encodeCode128B } from '@/common/barcode.js';
import { generateQRCodeMatrix } from '@/common/qrcode.js';
import { getCurrentThemeKey, applyThemeToNativeUI } from '@/common/theme.js';
import { useShare } from '@/common/share.js';

useShare(() => {
  const t = ticketData.value;
  return {
    title: t && t.title ? `我的活动门票 · 【${t.title}】` : '我的活动门票 · 同行凭据与4位核销码',
    timelineTitle: t && t.title ? `【活动门票】${t.title}` : '同城活动同行门票',
    path: '/pages/activity/list'
  };
});

const currentThemeKey = ref(getCurrentThemeKey());

const activeCodeType = ref('BARCODE');
const ticketData = ref({
  id: '',
  title: '',
  game: '',
  startTime: '',
  location: '',
  creatorNickname: ''
});
const verifyCode = ref('');
const isCheckedIn = ref(false);
const currentTime = ref('');
const hasTicket = ref(false);

const currentUserId = computed(() => normalizeUserId());

const ticketSn = computed(() => {
  const actId = ticketData.value && ticketData.value.id ? ticketData.value.id : '';
  const code = String(verifyCode.value || '');
  if (!actId || !code) return '';
  return `TICKET-${actId}-${code}`;
});

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) => {
  hasTicket.value = false;
  verifyCode.value = query && query.code ? String(query.code) : '';

  // 1. 若有指定活动ID，直接拉取该活动详情
  if (query && query.id) {
    try {
      const detail = await getActivityDetail(query.id);
      if (detail) {
        ticketData.value = detail;
        const uid = Number(currentUserId.value);
        const mine = (detail.participants || []).find(p => Number(p.userId) === uid);
        if (mine) {
          if (mine.verifyCode) verifyCode.value = String(mine.verifyCode);
          isCheckedIn.value = Boolean(mine.checkedIn);
        }
        hasTicket.value = Boolean(detail.id && verifyCode.value);
        return;
      }
    } catch (err) {
      console.warn('[MyTicket] 获取指定活动门票失败:', err);
    }
  }

  // 2. 若无传参，真实拉取当前用户的已报名组局列表
  try {
    const uid = Number(currentUserId.value);
    const myActs = await getMyActivities(uid);
    const joinedList = (myActs && myActs.joined) || [];
    const withTicket = joinedList.filter((act) => {
      const mine = (act.participants || []).find(p => Number(p.userId) === uid && p.verifyCode);
      return Boolean(mine);
    });
    if (withTicket.length > 0) {
      const targetAct = withTicket.find((act) => {
        const mine = (act.participants || []).find(p => Number(p.userId) === uid);
        return mine && !mine.checkedIn;
      }) || withTicket[0];
      const mine = (targetAct.participants || []).find(p => Number(p.userId) === uid) || {};
      ticketData.value = targetAct;
      verifyCode.value = String(mine.verifyCode || '');
      isCheckedIn.value = Boolean(mine.checkedIn);
      hasTicket.value = Boolean(targetAct.id && verifyCode.value);
    }
  } catch (err) {
    console.warn('[MyTicket] 获取用户报名门票异常:', err);
  }
};

const onThemeChanged = (key) => {
  currentThemeKey.value = key;
  applyThemeToNativeUI(key);
};

onLoad(async (query) => {
  currentThemeKey.value = getCurrentThemeKey();
  applyThemeToNativeUI(currentThemeKey.value);
  savedQuery = query;
  await loadTicketData(query);
});

onShow(async () => {
  currentThemeKey.value = getCurrentThemeKey();
  applyThemeToNativeUI(currentThemeKey.value);
  await loadTicketData();
});

onMounted(() => {
  currentThemeKey.value = getCurrentThemeKey();
  applyThemeToNativeUI(currentThemeKey.value);
  uni.$on('theme-change', onThemeChanged);
  updateTime();
  timer = setInterval(updateTime, 1000);
});

onUnmounted(() => {
  uni.$off('theme-change', onThemeChanged);
  if (timer) clearInterval(timer);
});

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;
          if (!actId) {
            uni.hideLoading();
            uni.showToast({ title: '门票信息缺失，无法退票', icon: 'none' });
            return;
          }
          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: var(--bg-primary);
  padding: 40rpx 36rpx calc(60rpx + env(safe-area-inset-bottom));
}

.ticket-card {
  background: var(--bg-surface);
  border-radius: 32rpx;
  border: 1px solid var(--border-subtle);
  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: var(--color-brand-light);
      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: var(--text-muted);
      }
      .meta-v {
        color: var(--text-secondary);
        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: var(--bg-primary);

      &.punch-left {
        left: -24rpx;
      }
      &.punch-right {
        right: -24rpx;
      }
    }

    .dash-line {
      width: 84%;
      height: 2rpx;
      border-bottom: 2rpx dashed var(--border-subtle);
    }
  }

  .code-section {
    padding: 36rpx 32rpx 24rpx;
    text-align: center;

    .code-tips {
      font-size: 22rpx;
      color: var(--text-secondary);
      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 var(--border-subtle);

      .tab-btn {
        font-size: 22rpx;
        padding: 8rpx 24rpx;
        border-radius: 28rpx;
        color: var(--text-secondary);
        font-weight: 500;
        transition: all 0.25s ease;

        &.active {
          background: var(--color-brand);
          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: var(--text-secondary);
        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: var(--text-secondary);
        margin-top: 16rpx;
        font-family: 'Courier New', monospace;
      }
    }
  }

  .security-footer {
    background: rgba(10, 15, 29, 0.5);
    padding: 20rpx 32rpx;
    border-top: 1px solid var(--border-subtle);

    .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: var(--text-secondary);
        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, var(--color-brand), #10B981, #F59E0B, var(--color-brand));
      background-size: 200% 100%;
      border-radius: 2rpx;
      animation: gradientMove 3s infinite linear;
    }
  }
}

.ticket-empty {
  margin-top: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  padding: 60rpx 32rpx;
  border-radius: 24rpx;
  background: var(--bg-surface, #151D30);
  border: 1rpx dashed rgba(148, 163, 184, 0.35);

  .ticket-empty-title {
    font-size: 30rpx;
    font-weight: 600;
    color: var(--text-primary, #F8FAFC);
  }

  .ticket-empty-desc {
    font-size: 24rpx;
    color: var(--text-muted, #94A3B8);
    text-align: center;
  }

  .btn-back {
    margin-top: 20rpx;
  }
}

.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: var(--color-brand-gradient);
    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: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 26rpx;
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 44rpx;
    border: 1px solid var(--border-subtle);
  }
}

@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);
  }
}
/* ===== Premium visual layer: 我的门票 ===== */
.ticket-container {
  background:
    radial-gradient(100% 40% at 50% -6%, rgba(16, 185, 129, 0.12), transparent 62%),
    var(--surface-0);
}

.ticket-card {
  background:
    radial-gradient(circle at 86% 6%, rgba(217, 164, 65, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(22, 31, 51, 0.96) 0%, rgba(13, 20, 36, 0.98) 100%);
  border-color: var(--hairline);
  box-shadow:
    inset 0 1rpx 0 rgba(255, 255, 255, 0.05),
    0 22rpx 56rpx rgba(0, 0, 0, 0.32);

  .ticket-title {
    font-size: 34rpx;
    letter-spacing: 0.3rpx;
  }

  .code-section .code-slots .digit-box {
    width: 112rpx;
    height: 132rpx;
    background: rgba(5, 9, 18, 0.78);
    border-width: 2rpx;
    box-shadow:
      0 0 0 1rpx rgba(16, 185, 129, 0.12),
      0 12rpx 28rpx rgba(0, 0, 0, 0.22);

    .digit-text {
      font-family: var(--font-num, monospace);
      font-size: 66rpx;
      text-shadow: 0 0 14rpx rgba(16, 185, 129, 0.45);
    }
  }

  .ticket-codes-panel .code-tab-switch {
    background: rgba(5, 9, 18, 0.55);
    border-color: var(--hairline);
  }

  .security-footer {
    background: rgba(5, 9, 18, 0.42);
    border-top-color: rgba(255, 255, 255, 0.05);
  }
}

.ticket-container.theme-warm {
  background:
    radial-gradient(100% 38% at 50% -6%, rgba(16, 185, 129, 0.06), transparent 62%),
    #FDFBF7;

  .ticket-card {
    background:
      radial-gradient(circle at 86% 6%, rgba(234, 88, 12, 0.05), transparent 40%),
      #FFFFFF;
    border-color: #F0ECE4;
    box-shadow: 0 20rpx 48rpx rgba(28, 25, 23, 0.07);

    .ticket-title {
      color: #1C1917;
    }

    .ticket-meta .meta-v {
      color: #57534E;
    }

    .ticket-punch-wrap .punch {
      background-color: #FDFBF7;
    }

    .code-section .code-slots .digit-box {
      background: #FAF8F4;
      border-color: #34D399;
      box-shadow: 0 0 0 1rpx rgba(16, 185, 129, 0.08);

      .digit-text {
        color: #047857;
        text-shadow: none;
      }
    }

    .ticket-codes-panel .code-tab-switch {
      background: #F8F5F0;
      border-color: #F0ECE4;
    }

    .security-footer {
      background: #FAF8F4;
      border-top-color: #F0ECE4;
    }
  }

  .ticket-empty {
    background: #FFFFFF;
    border-color: #E7E5E4;
  }
}
</style>