bindbox-mini/components/FlipGrid.vue

<template>
  <view class="flip-root">
    <view v-if="controls" class="flip-actions">
      <button class="flip-btn" @tap="onDraw(1)">单次抽选</button>
      <button class="flip-btn" @tap="onDraw(10)">十次抽选</button>
    </view>
    <view class="flip-grid">
      <view v-for="(cell, i) in cells" :key="i" class="flip-card" :class="{ flipped: cell.flipped }">
        <view class="flip-inner">
          <view class="flip-front">
            <view class="front-placeholder"></view>
          </view>
          <view class="flip-back" @tap="onPreview(cell)">
            <image v-if="cell.image" class="flip-image" :src="cell.image" mode="widthFix" />
            <text class="flip-title">{{ cell.title || '' }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="controls" class="flip-toolbar">
      <button class="flip-reset" @tap="reset">重置</button>
    </view>
  </view>
</template>

<script setup>
import { ref, defineExpose } from 'vue'

const props = defineProps({ rewards: { type: Array, default: () => [] }, controls: { type: Boolean, default: true } })
const emit = defineEmits(['draw'])

const total = 16
const cells = ref(Array(total).fill(0).map(() => ({ flipped: false, title: '', image: '' })))

function onDraw(count) { emit('draw', count) }

function revealResults(list) {
  const arr = Array.isArray(list) ? list : list ? [list] : []
  const toFill = Math.min(arr.length, total)
  const indices = Array(total).fill(0).map((_, i) => i)
  for (let i = indices.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); const tmp = indices[i]; indices[i] = indices[j]; indices[j] = tmp }
  const chosen = indices.slice(0, toFill)
  const res = arr.slice(0, toFill)
  for (let i = res.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); const t = res[i]; res[i] = res[j]; res[j] = t }
  chosen.forEach((pos, i) => {
    const it = res[i] || {}
    const title = String(it.title || it.name || '')
    const image = String(it.image || it.img || it.pic || '')
    cells.value[pos] = { flipped: false, title, image }
    const delay = 100 * i + Math.floor(Math.random() * 120)
    setTimeout(() => { cells.value[pos].flipped = true }, delay)
  })
}

function reset() {
  cells.value = Array(total).fill(0).map(() => ({ flipped: false, title: '', image: '' }))
}

function onPreview(cell) {
  const img = String(cell && cell.image || '')
  if (img) uni.previewImage({ urls: [img], current: img })
}

defineExpose({ revealResults, reset })
</script>

<style scoped>
/* ============================================
   奇盒潮玩 - 翻牌动画组件
   采用暖橙色调的开箱效果
   ============================================ */

.flip-root {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 20rpx;
}

.flip-actions {
  display: flex;
  gap: 16rpx;
}
.flip-btn {
  flex: 1;
  background: linear-gradient(135deg, #FF9F43, #FF6B35) !important;
  color: #FFFFFF !important;
  border-radius: 16rpx;
  font-weight: 600;
  box-shadow: 0 6rpx 16rpx rgba(255, 107, 53, 0.35);
}
.flip-btn:active {
  transform: scale(0.97);
}

.flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16rpx;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10rpx);
  border-radius: 24rpx;
  padding: 16rpx;
}

.flip-card {
  perspective: 1000px;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 220rpx;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-front, .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16rpx;
  overflow: hidden;
}

.flip-front {
  background: linear-gradient(145deg, #FFF8F3, #FFE8D1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid rgba(255, 159, 67, 0.2);
  box-shadow: 0 4rpx 12rpx rgba(255, 159, 67, 0.15);
}

.front-placeholder {
  width: 60%;
  height: 60%;
  border-radius: 16rpx;
  background: linear-gradient(135deg, rgba(255, 159, 67, 0.3), rgba(255, 107, 53, 0.2));
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.flip-back {
  background: #FFFFFF;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16rpx;
  border: 2rpx solid rgba(255, 159, 67, 0.3);
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.2);
}

.flip-image {
  width: 75%;
  border-radius: 12rpx;
  margin-bottom: 8rpx;
  background: linear-gradient(145deg, #FFF8F3, #FFF4E6);
}

.flip-title {
  font-size: 24rpx;
  font-weight: 600;
  color: #1F2937;
  text-align: center;
  max-width: 90%;
  word-break: break-all;
  line-height: 1.3;
}

.flip-toolbar {
  display: flex;
  justify-content: flex-end;
}

.flip-reset {
  background: linear-gradient(135deg, #FFD166, #FF9F43) !important;
  color: #6b4b1f !important;
  border-radius: 999rpx;
  font-weight: 600;
  box-shadow: 0 6rpx 16rpx rgba(255, 159, 67, 0.35);
}
.flip-reset:active {
  transform: scale(0.96);
}
</style>