vhall-mini-sdk 0.4.1 → 0.4.3

package/dist/components/lottery/lottery-shake/lottery-shake.js

@@ -0,0 +1,328 @@
+Component({
+  properties: {
+    remark: { type: String, value: '' },
+    // 抽奖 ID：用于区分不同抽奖的缓存 key
+    lotteryId: { type: String, value: '' },
+    autoplay: { type: Boolean, value: false },
+    loop: { type: Boolean, value: false },
+    // 外部控制：true 开始摇晃，false 平滑停止（与转盘/老虎机一致）
+    running: {
+      type: Boolean,
+      value: false,
+      observer(val) {
+        if (val) {
+          this.spin();
+        } else {
+          this.stop();
+        }
+      },
+    },
+  },
+
+  data: {
+    spinning: false,
+    stopping: false,
+    stopped: false,
+    // 球列表（每球独立位置、速度、大小）
+    balls: [],
+    // 中奖结果展示
+    resultVisible: false,
+    resultEmoji: '',
+    resultLabel: '',
+  },
+
+  lifetimes: {
+    attached() {
+      this._initBalls();
+      // 与转盘/老虎机逻辑一致：先判断 running，再判断缓存恢复；不再因 autoplay 自动启动
+      if (this.data.running) {
+        this.spin();
+      } else if (this._hasSpinCache()) {
+        // 刷新前抽奖仍在进行（有缓存），进入页面后自动恢复摇晃动画
+        this.spin();
+      }
+    },
+    detached() {
+      this._clearTimers();
+    },
+  },
+
+  methods: {
+    // 初始化 12 颗球（不同颜色、表情、初始位置）
+    _initBalls() {
+      const colors = ['#ff9a3c', '#ff6b35', '#ffd93d', '#ff4757', '#ff7f50', '#ffb347'];
+      const emojis = ['😊', '😄', '🎉', '🤩', '😋', '🥳', '😆', '🤗', '✨', '🎁', '💫', '⭐'];
+      const labels = ['谢谢参与', '参与奖励', '一等奖', '二等奖', '三等奖', '参与奖励'];
+      const balls = [];
+      const n = 12;
+      const xMin = 22;
+      const xMax = 78;
+      const bowlR = 44; // 碗内半径(%)，与 _animFrame 碰撞半径一致
+      const ballR = 7; // 球碰撞半径(%)，与 _animFrame 一致
+      for (let i = 0; i < n; i++) {
+        // 均匀铺在碗底：x 从 xMin 到 xMax，y 落在碗底内壁上（静止、零速度）
+        const x = xMin + ((xMax - xMin) * i) / (n - 1);
+        const dx = x - 50;
+        const y = 50 + Math.sqrt(Math.max(0, bowlR * bowlR - dx * dx)) - ballR;
+        balls.push({
+          id: i,
+          color: colors[i % colors.length],
+          emoji: emojis[i % emojis.length],
+          label: labels[i % labels.length],
+          // 初始化时全部静止沉在碗底，未开始动画不运动
+          x,
+          y,
+          size: 66, // 统一大小(rpx)，稍大
+          vx: 0,
+          vy: 0,
+          rotation: 0,
+          scale: 1, // 统一缩放
+          opacity: 1,
+          zIndex: i,
+        });
+      }
+      this.setData({ balls });
+    },
+
+    // 开始摇晃动画
+    spin() {
+      // 进行中或减速停止阶段，忽略重复点击，避免动画重复执行 / 重复上报抽奖
+      if (this.data.spinning || this.data.stopping) return;
+      this._clearTimers();
+      // 阶段状态机：tumble=翻滚，settle=落底；循环往复模拟摇奖机
+      this._phase = 'tumble';
+      this._phaseStart = Date.now();
+      this._tumbleMs = 1300; // 一次翻滚时长（约两圈）
+      this._settleMs = 1000; // 落底静置时长
+      this.setData({
+        spinning: true,
+        stopping: false,
+        stopped: false,
+        resultVisible: false,
+      });
+      // 记录缓存：抽奖进行中，刷新后可据此恢复动画
+      this._setSpinCache();
+
+      // 起步给一个抖动爆发力，把球从瓶底掀起来翻滚
+      this._applyShake();
+      // 物理弹跳模拟
+      this._animFrame();
+      this.triggerEvent('draw');
+    },
+
+    // 每帧更新球位置（物理碰撞 + 持续滚动 / 停止落定）
+    _animFrame() {
+      if (!this.data.spinning || this.data.stopped) return;
+      const stopping = this.data.stopping;
+
+      // 阶段循环：翻滚(tumble) → 落底(settle) → 抖动爆发力 → 翻滚 ...
+      if (!stopping) {
+        const now = Date.now();
+        const phaseDur = this._phase === 'tumble' ? this._tumbleMs : this._settleMs;
+        if (now - this._phaseStart >= phaseDur) {
+          if (this._phase === 'tumble') {
+            // 翻滚结束 → 进入落底阶段（小球沉到瓶底）
+            this._phase = 'settle';
+            this._phaseStart = now;
+          } else {
+            // 落底结束 → 施加抖动爆发力，重新翻滚
+            this._phase = 'tumble';
+            this._phaseStart = now;
+            this._applyShake();
+          }
+        }
+      }
+
+      const phase = stopping ? 'settle' : this._phase;
+      const damp = phase === 'settle' ? 0.92 : 0.99; // 落底时衰减更快，便于沉底
+      const bounce = 0.6;
+      const minSpeed = phase === 'tumble' ? 3.0 : 0;  // 仅翻滚期维持速度（贴壁匀速转）
+      const maxSpeed = 6;
+      const ballR = 7; // 球碰撞半径（%）
+
+      const updated = this.data.balls.map((ball) => {
+        let { x, y, vx, vy, rotation } = ball;
+
+        if (phase === 'tumble') {
+          // 以瓶心为基准的径向 / 切向（圆形玻璃球，圆心 50,50）
+          const dx = x - 50;
+          const dy = y - 50;
+          const tlen = Math.sqrt(dx * dx + dy * dy) || 1;
+          const tx = -dy; // 切向（绕圈方向）
+          const ty = dx;
+          // 切向力：让球顺着瓶壁环绕翻滚（加大，转动更明显）
+          vx += (tx / tlen) * 0.42;
+          vy += (ty / tlen) * 0.42;
+          // 径向离心力：把球向外推，贴住玻璃瓶壁（加大，明确贴壁）
+          vx += (dx / tlen) * 0.3;
+          vy += (dy / tlen) * 0.3;
+          // 轻随机扰动：仅制造细微错落，不破坏贴壁轨道
+          vx += (Math.random() - 0.5) * 0.12;
+          vy += (Math.random() - 0.5) * 0.12;
+          // 速度维持区间 [minSpeed, maxSpeed]：保证翻滚期始终贴壁在动
+          let sp = Math.sqrt(vx * vx + vy * vy);
+          if (sp < minSpeed) {
+            const k = minSpeed / (sp || 0.001);
+            vx *= k;
+            vy *= k;
+          } else if (sp > maxSpeed) {
+            const k = maxSpeed / sp;
+            vx *= k;
+            vy *= k;
+          }
+        } else {
+          // 落底阶段：重力 + 阻尼，小球自然沉到瓶底
+          vy += 0.22;
+        }
+        vx *= damp;
+        vy *= damp;
+
+        // 更新位置
+        x += vx;
+        y += vy;
+        rotation += vx * 4;
+
+        // 圆形碗壁碰撞（圆方程：(x-50)^2 + (y-50)^2 = R^2）
+        const nx = (x - 50) / 44; // 半径 ~44%
+        const ny = (y - 50) / 44;
+        const dist = nx * nx + ny * ny;
+
+        if (dist > 1) {
+          // 碰到碗壁，反射
+          const normalX = nx / Math.sqrt(dist);
+          const normalY = ny / Math.sqrt(dist);
+          const dot = vx * normalX + vy * normalY;
+          vx = (vx - 2 * dot * normalX) * bounce;
+          vy = (vy - 2 * dot * normalY) * bounce;
+          // 推回碗内
+          x = 50 + normalX * 43.5;
+          y = 50 + normalY * 43.5;
+        }
+
+        return { ...ball, x, y, vx, vy, rotation };
+      });
+
+      // 球与球弹性碰撞：彼此撞击、翻滚、填充整个瓶身
+      for (let i = 0; i < updated.length; i++) {
+        for (let j = i + 1; j < updated.length; j++) {
+          const a = updated[i];
+          const b = updated[j];
+          let dx = b.x - a.x;
+          let dy = b.y - a.y;
+          let d = Math.sqrt(dx * dx + dy * dy);
+          const minD = ballR * 2;
+          if (d < minD && d > 0.0001) {
+            const nX = dx / d;
+            const nY = dy / d;
+            const overlap = (minD - d) / 2;
+            // 分离重叠
+            a.x -= nX * overlap;
+            a.y -= nY * overlap;
+            b.x += nX * overlap;
+            b.y += nY * overlap;
+            // 沿法向交换动量（弹性碰撞）
+            const rvx = b.vx - a.vx;
+            const rvy = b.vy - a.vy;
+            const velN = rvx * nX + rvy * nY;
+            if (velN < 0) {
+              const rest = 0.85;
+              const imp = (-(1 + rest) * velN) / 2;
+              a.vx -= imp * nX;
+              a.vy -= imp * nY;
+              b.vx += imp * nX;
+              b.vy += imp * nY;
+            }
+          }
+        }
+      }
+
+      this.setData({ balls: updated });
+
+      if (stopping || phase === 'settle') {
+        // stop() 触发 → 等待小球全部沉底静止再开奖
+        const totalV = updated.reduce((s, b) => s + Math.abs(b.vx) + Math.abs(b.vy), 0);
+        if (stopping && totalV < 0.8) {
+          this.setData({ stopped: true, spinning: false, stopping: false });
+          this._onStopComplete();
+          return;
+        }
+      }
+
+      // 小程序无 requestAnimationFrame，用 setTimeout 递归维持动画循环（~20ms/帧）
+      this._frameReq = setTimeout(() => this._animFrame(), 20);
+    },
+
+    // 抖动瞬间：给所有球一个向上的爆发力，从瓶底重新掀起来翻滚
+    _applyShake() {
+      const balls = this.data.balls.map((b) => ({
+        ...b,
+        vx: (Math.random() - 0.5) * 9,
+        vy: -(3 + Math.random() * 5),
+      }));
+      this.setData({ balls });
+    },
+
+    // 外部调用停止（LOTTERY_END 触发）
+    stop(targetIndex) {
+      if (!this.data.spinning || this.data.stopping || this.data.stopped) return false;
+      // 抽奖已结束（服务端已返回结果），清除进行中缓存
+      this._clearSpinCache();
+      this.setData({ stopping: true });
+      // targetIndex 用于确定中奖球（0~11 映射到奖品），默认随机选一颗
+      this._targetBallIndex = targetIndex !== undefined ? targetIndex : Math.floor(Math.random() * 12);
+
+      // 让目标球高亮突出
+      setTimeout(() => {
+        const balls = this.data.balls.map((b, i) => {
+          if (i === this._targetBallIndex) {
+            return { ...b, scale: 1.4, opacity: 1, zIndex: 20 };
+          }
+          return { ...b, scale: 0.6, opacity: 0.4 };
+        });
+        this.setData({ balls });
+      }, 800);
+
+      return true;
+    },
+
+    _onStopComplete() {
+      // 抽奖真正结束（开奖结果展示），确保进行中缓存被删除（双保险，stop 中已删一次）
+      this._clearSpinCache();
+      // 展示中奖结果
+      const idx = this._targetBallIndex ?? 0;
+      const ball = this.data.balls[idx] || this.data.balls[0];
+      this.setData({
+        resultVisible: true,
+        resultEmoji: ball.emoji,
+        resultLabel: ball.label,
+      });
+      this.triggerEvent('stopped', { detail: { index: idx, label: ball.label } });
+    },
+
+    _clearTimers() {
+      if (this._frameReq) {
+        clearTimeout(this._frameReq);
+        this._frameReq = null;
+      }
+    },
+
+    // 缓存 key：lottery_<lotteryId>_cache，标记"该抽奖仍在摇晃/进行中"
+    _cacheKey() {
+      return `lottery_${this.data.lotteryId}_cache`;
+    },
+    _hasSpinCache() {
+      return !!wx.getStorageSync(this._cacheKey());
+    },
+    _setSpinCache() {
+      wx.setStorageSync(this._cacheKey(), true);
+    },
+    _clearSpinCache() {
+      wx.removeStorageSync(this._cacheKey());
+    },
+
+    onDrawBtnTap() {
+      if (this.data.spinning) return;
+      this.spin();
+    },
+  },
+});

package/dist/components/lottery/lottery-shake/lottery-shake.json

@@ -0,0 +1 @@
+{"component": true, "usingComponents": {}}

package/dist/components/lottery/lottery-shake/lottery-shake.wxml

@@ -0,0 +1,52 @@
+<view class="shake-machine">
+  <!-- 透明碗 + 弹跳球 -->
+  <view class="shake-bowl-area">
+    <!-- 碗体（透明玻璃效果） -->
+    <view class="shake-bowl">
+      <!-- 球 -->
+      <view wx:for="{{balls}}" wx:key="id" class="shake-ball" style="left: {{item.x}}%; top: {{item.y}}%; width: {{item.size}}rpx; height: {{item.size}}rpx; background: {{item.color}}; transform: translate(-50%, -50%) rotate({{item.rotation}}deg) scale({{item.scale}}); opacity: {{item.opacity}}; z-index: {{item.zIndex}}; {{stopping && item.zIndex==20 ? 'box-shadow: 0 0 30rpx rgba(255,200,0,0.9), 0 0 60rpx rgba(255,100,0,0.5);' : ''}}">
+        <text class="ball-emoji">{{item.emoji}}</text>
+      </view>
+      <!-- 碗口高光 -->
+      <view class="bowl-rim"></view>
+      <!-- 碗身反光 -->
+      <view class="bowl-highlight"></view>
+    </view>
+    <!-- 碗底座 -->
+    <view class="shake-base">
+      <view class="base-body"></view>
+      <view class="base-ring"></view>
+      <!-- 底座顶部标签：常显，文字跑马灯 -->
+      <view class="shake-banner">
+        <view class="shake-banner-bg">
+          <text class="shake-banner-text">{{remark || '抽奖进行中...'}}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+  <!-- 底部控制区 -->
+  <view class="shake-control-area">
+    <!-- 奖品预览 -->
+    <view class="shake-prize-preview">
+      <view wx:if="{{resultVisible}}" class="prize-showcase">
+        <text class="prize-big-emoji">{{resultEmoji}}</text>
+        <text class="prize-name-text">{{resultLabel}}</text>
+      </view>
+      <view wx:else class="prize-placeholder">
+        <view class="placeholder-icon-wrap">
+          <text class="placeholder-icon">🎁</text>
+        </view>
+      </view>
+    </view>
+    <!-- 抽奖按钮 -->
+    <view class="shake-btn-wrap">
+      <view class="shake-draw-btn {{spinning?'shaking':''}} {{stopped?'btn-done':''}}" bindtap="onDrawBtnTap">
+        <text class="draw-btn-text">{{stopped ? '开奖完成' : (spinning ? '摇奖中...' : '点我抽奖')}}</text>
+      </view>
+    </view>
+  </view>
+  <!-- 装饰光点 -->
+  <view class="sparkle sparkle-1"></view>
+  <view class="sparkle sparkle-2"></view>
+  <view class="sparkle sparkle-3"></view>
+</view>

package/dist/components/lottery/lottery-shake/lottery-shake.wxss

@@ -0,0 +1 @@
+.shake-machine{align-items:center;display:flex;flex-direction:column;padding:0 20rpx 20rpx}.shake-banner{background:#f5c842;box-shadow:0 4rpx 16rpx rgba(230,168,50,.45),inset 0 2rpx 4rpx hsla(0,0%,100%,.3);left:50%;padding:12rpx 20rpx;position:absolute;top:10rpx;transform:translateX(-50%);width:220rpx;z-index:6}.shake-banner,.shake-banner-bg{border-radius:20rpx;overflow:hidden}.shake-banner-bg{align-items:center;background:#7a6bfd;display:flex;height:32rpx;white-space:nowrap}.shake-banner-text{animation:shake-marquee 3s linear infinite;color:#fff;display:inline-block;font-size:22rpx;font-weight:700;letter-spacing:2rpx;line-height:1;padding-left:100%;text-shadow:0 1rpx 3rpx rgba(0,0,0,.25);white-space:nowrap}@keyframes shake-marquee{0%{transform:translateX(0)}to{transform:translateX(-100%)}}.shake-bowl-area{align-items:center;display:flex;flex-direction:column;height:560rpx;margin-top:10rpx;position:relative;width:520rpx}.shake-bowl{background:radial-gradient(circle at 32% 28%,hsla(0,0%,100%,.22) 0,rgba(200,230,255,.1) 38%,rgba(100,150,220,.07) 70%,rgba(60,100,180,.12) 100%);border:4rpx solid #fff;border-radius:50%;box-shadow:inset 0 -30rpx 60rpx rgba(0,0,0,.1),inset 0 10rpx 30rpx hsla(0,0%,100%,.15),0 8rpx 32rpx rgba(0,0,0,.15);height:440rpx;overflow:hidden;position:relative;width:440rpx;z-index:3}.bowl-rim{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.45) 30%,hsla(0,0%,100%,.6) 50%,hsla(0,0%,100%,.45) 70%,transparent);border-radius:50%;-webkit-filter:blur(1rpx);filter:blur(1rpx);height:24rpx;left:8%;position:absolute;top:-2rpx;width:84%}.bowl-highlight{background:linear-gradient(180deg,hsla(0,0%,100%,.3),hsla(0,0%,100%,.08) 50%,transparent);border-radius:120rpx;height:240rpx;left:6%;position:absolute;top:18%;transform:rotate(-8deg);width:80rpx}.shake-ball{align-items:center;border-radius:50%;box-shadow:inset -6rpx -6rpx 16rpx rgba(0,0,0,.25),inset 4rpx 4rpx 12rpx hsla(0,0%,100%,.4),0 4rpx 12rpx rgba(0,0,0,.2);display:flex;justify-content:center;position:absolute;transition:opacity .5s ease}.ball-emoji{-webkit-filter:drop-shadow(0 1rpx 1rpx rgba(0,0,0,.2));filter:drop-shadow(0 1rpx 1rpx rgba(0,0,0,.2));font-size:36rpx;line-height:1}.shake-base{border-radius:28rpx 28rpx 48rpx 48rpx;height:120rpx;margin-top:-50rpx;position:relative;width:460rpx;z-index:4}.base-body{background:linear-gradient(180deg,#8b6afc,#6a4fed 40%,#5538d4 70%,#4229b8);border-radius:0 0 48rpx 48rpx;box-shadow:0 10rpx 30rpx rgba(66,41,184,.45),0 4rpx 12rpx rgba(66,41,184,.3),inset 0 4rpx 14rpx hsla(0,0%,100%,.15);height:100%;width:100%}.base-ring{background:linear-gradient(90deg,#a78bff,#d4bfff,#a78bff);border-radius:11rpx;bottom:0;height:22rpx;left:50%;opacity:.65;position:absolute;transform:translateX(-50%);width:340rpx}.shake-control-area{align-items:center;background:linear-gradient(145deg,#7a5bfd,#5e45dd 40%,#4a35c2 80%,#3d29a6);border-radius:36rpx;box-shadow:0 10rpx 36rpx rgba(61,41,166,.45),inset 0 2rpx 10rpx hsla(0,0%,100%,.12);display:flex;justify-content:space-between;margin-top:-48rpx;max-width:520rpx;padding:20rpx 30rpx;width:100%}.shake-prize-preview{align-items:center;display:flex;flex:1;justify-content:center;min-height:100rpx}.prize-showcase{align-items:center;animation:prizePopIn .5s cubic-bezier(.175,.885,.32,1.275) both;display:flex;flex-direction:column}.prize-big-emoji{font-size:52rpx;line-height:1.2}.prize-name-text{color:#ffd93d;font-size:24rpx;font-weight:700;margin-top:4rpx;text-shadow:0 1rpx 4rpx rgba(0,0,0,.3)}.placeholder-icon-wrap,.prize-placeholder{align-items:center;display:flex;justify-content:center}.placeholder-icon-wrap{background:linear-gradient(145deg,rgba(0,0,0,.25),rgba(0,0,0,.4));border-radius:50%;box-shadow:inset 0 2rpx 6rpx hsla(0,0%,100%,.08),0 2rpx 8rpx rgba(0,0,0,.2);height:96rpx;width:96rpx}.placeholder-icon{font-size:52rpx;line-height:1}@keyframes prizePopIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.shake-btn-wrap{flex-shrink:0;margin-left:20rpx}.shake-draw-btn{background:linear-gradient(135deg,#ffd93d,#ffb830 40%,#ff9a2e);border:none;border-radius:48rpx;box-shadow:0 6rpx 20rpx rgba(255,154,46,.55),inset 0 2rpx 5rpx hsla(0,0%,100%,.45),inset 0 -2rpx 4rpx rgba(200,120,0,.15);padding:20rpx 36rpx}.draw-btn-text{color:#8b4513;font-size:26rpx;font-weight:700;letter-spacing:1rpx;text-shadow:0 1rpx 1rpx hsla(0,0%,100%,.4);white-space:nowrap}.shake-draw-btn:not(.btn-done):not(.shaking){animation:shakePulse 1.5s ease-in-out infinite}@keyframes shakePulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.shake-draw-btn.shaking{animation:btnShake .3s ease-in-out infinite}@keyframes btnShake{0%,to{transform:rotate(0deg)}25%{transform:rotate(-4deg) scale(1.02)}75%{transform:rotate(4deg) scale(1.02)}}.shake-draw-btn.btn-done{background:linear-gradient(135deg,#4ade80,#22c55e);box-shadow:0 4rpx 16rpx rgba(34,197,94,.4)}.shake-draw-btn.btn-done .draw-btn-text{color:#fff}.sparkle{animation:sparkleTwinkle 1.5s ease-in-out infinite alternate;background:radial-gradient(circle,#fff 0,#ffd93d 60%,transparent 100%);border-radius:50%;height:12rpx;position:absolute;width:12rpx}.sparkle-1{animation-delay:0s;left:30rpx;top:60rpx}.sparkle-2{animation-delay:.5s;height:16rpx;right:40rpx;top:100rpx;width:16rpx}.sparkle-3{animation-delay:1s;height:10rpx;left:10rpx;top:280rpx;width:10rpx}@keyframes sparkleTwinkle{0%{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1.3)}}

package/dist/components/lottery/lottery-slot/lottery-slot.js

@@ -0,0 +1,230 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: '2',
+    },
+    // 抽奖 ID：用于区分不同抽奖的缓存 key
+    lotteryId: {
+      type: String,
+      value: '',
+    },
+    remark: {
+      type: String,
+      value: '抽奖进行中...',
+    },
+    autoplay: {
+      type: Boolean,
+      value: false,
+    },
+    loop: {
+      type: Boolean,
+      value: false,
+    },
+    // 外部控制：true 开始转，false 停止
+    running: {
+      type: Boolean,
+      value: false,
+      observer(val) {
+        if (val) {
+          this.spin();
+        } else {
+          this.stop();
+        }
+      },
+    },
+  },
+
+  data: {
+    spinning: false,
+    stopping: false,
+    // 单个滚轴的奖品列表（基础 6 项，每列仅 1 个"谢谢参与"，其余为礼品图标+恭喜中奖）
+    basePrizes: [
+      { emoji: '😊', label: '谢谢参与' },
+      { emoji: '🎁', label: '恭喜中奖' },
+      { emoji: '🎁', label: '恭喜中奖' },
+      { emoji: '🎁', label: '恭喜中奖' },
+      { emoji: '🎁', label: '恭喜中奖' },
+      { emoji: '🎁', label: '恭喜中奖' },
+    ],
+    // 滚轴实际渲染列表：基础列表重复多份，保证连续滚动不露底
+    reelList: [],
+    // 每个滚轴当前位移（rpx），由 JS 连续驱动
+    // 初始让 item0 落在中间某一份上居中（55 - 一份周期804 = -749），使上下各露出相邻方块
+    offset1: -749,
+    offset2: -749,
+    offset3: -749,
+    // 停止状态：每个轴是否已停
+    stopped1: true,
+    stopped2: true,
+    stopped3: true,
+  },
+
+  lifetimes: {
+    attached() {
+      // 基础 6 项重复 12 份 = 72 项(9936rpx)，覆盖停止落定时的最大位移(约 6624rpx)+窗口高(240)，不露底
+      const repeated = [];
+      for (let i = 0; i < 12; i++) {
+        this.data.basePrizes.forEach((p) => repeated.push(p));
+      }
+      this.setData({ reelList: repeated });
+      if (this.data.running) {
+        this.spin();
+      } else if (this._hasSpinCache()) {
+        // 刷新前抽奖仍在进行（有缓存），进入页面后自动恢复滚动动画
+        this.spin();
+      }
+    },
+    detached() {
+      this._clearTimers();
+    },
+  },
+
+  methods: {
+    _clearTimers() {
+      if (this._spinTimer) {
+        clearInterval(this._spinTimer);
+        this._spinTimer = null;
+      }
+      [1, 2, 3].forEach((i) => {
+        if (this['_stopTimer' + i]) {
+          clearTimeout(this['_stopTimer' + i]);
+          this['_stopTimer' + i] = null;
+        }
+      });
+    },
+
+    // 缓存 key：lottery_<lotteryId>_cache，标记"该抽奖仍在滚动/进行中"
+    _cacheKey() {
+      return `lottery_${this.data.lotteryId}_cache`;
+    },
+    _hasSpinCache() {
+      return !!wx.getStorageSync(this._cacheKey());
+    },
+    _setSpinCache() {
+      wx.setStorageSync(this._cacheKey(), true);
+    },
+    _clearSpinCache() {
+      wx.removeStorageSync(this._cacheKey());
+    },
+
+    // 单格高度与循环周期（与 less 中 .slot-item 高度一致）
+    _itemH() {
+      // 每项垂直占用（含 .slot-reel 的 gap 4rpx）：130 + 4 = 134，用于循环/步进计算
+      return 134;
+    },
+    _itemBoxH() {
+      // 单项真实高度（与 less 中 .slot-item height 一致，不含 gap）
+      return 130;
+    },
+    _cycle() {
+      return this.data.basePrizes.length * this._itemH(); // 6 * 168 = 1008
+    },
+
+    // 开始连续滚动：位移持续递减，显示值对周期取模（内容已重复，取模无缝）
+    spin() {
+      // 进行中或减速停止阶段，忽略重复点击，避免动画重复执行 / 重复上报抽奖
+      if (this.data.spinning || this.data.stopping) return;
+      this._clearTimers();
+      this.setData({
+        spinning: true,
+        stopping: false,
+        stopped1: false,
+        stopped2: false,
+        stopped3: false,
+        offset1: -749,
+        offset2: -749,
+        offset3: -749,
+      });
+      // 记录缓存：抽奖进行中，刷新后可据此恢复动画
+      this._setSpinCache();
+      const cycle = this._cycle();
+      // 三个滚轴各自独立的位置与速度（速度刻意不同，更有老虎机层次感）
+      // _pos 初始与 offset=-749 同余，使滚动首帧与 idle 视觉连续、避免点击瞬间跳变
+      this._pos = [-749, -749, -749];
+      this._step = [18, 13, 23]; // 每帧位移(rpx)：左中右速度各异（调慢，原 [30,22,38]）
+      this._spinTimer = setInterval(() => {
+        const next = {};
+        for (let i = 0; i < 3; i++) {
+          this._pos[i] -= this._step[i];
+          // 对周期取模并归一到 (-cycle, 0]，配合重复内容实现无缝循环
+          const shown = ((this._pos[i] % cycle) + cycle) % cycle;
+          next['offset' + (i + 1)] = shown === 0 ? 0 : -shown;
+        }
+        this.setData(next);
+      }, 30);
+
+      this.triggerEvent('draw');
+    },
+
+    // 把某轴平滑停止到目标项 T(0~5)，加减速过渡；返回最终位移
+    _landReel(num, currentOffset, targetT, extraCycles) {
+      const itemBoxH = this._itemBoxH(); // 单项真实高度 130
+      const step = this._itemH(); // 含间距步进 138
+      const cycle = this._cycle();
+      const windowCenter = 120; // .slot-reel-wrap 高度 240 / 2
+      // 使目标项 T 的中心对齐窗口中心(120)：滚动量 = T*step - (窗口中心 - 半高)
+      const sT = targetT * step - (windowCenter - itemBoxH / 2);
+      const curAbs = -currentOffset; // 当前已滚动量
+      const targetMod = ((sT % cycle) + cycle) % cycle; // 目标模周期
+      // 在当前滚动量基础上再推进 extraCycles 整圈后对齐到目标项
+      const delta = (((targetMod - (curAbs % cycle)) % cycle) + cycle) % cycle;
+      // + cycle：额外推进一整份，使目标项落在中间某一份（而非头部份），
+      // 保证停止后上下都露出相邻方块，与初始/idle 状态一致
+      const finalAbs = curAbs + extraCycles * cycle + delta + cycle;
+      const finalOffset = -finalAbs;
+      this.setData({ ['offset' + num]: finalOffset, ['stopped' + num]: true });
+      return finalOffset;
+    },
+
+    // 停止滚动；won=true 表示中奖（三轴都停在"恭喜中奖"），否则三轴都停在"谢谢参与"
+    stop(won) {
+      if (!this.data.spinning || this.data.stopping) return false;
+      this._clearTimers();
+      // 抽奖已结束（服务端已返回结果），清除进行中缓存
+      this._clearSpinCache();
+      this.setData({ stopping: true });
+
+      // 根据中奖结果决定三轴落定目标：
+      //   - 未中奖(won 非 true)：三个"谢谢参与" → 基础列表 index 0
+      //   - 中奖(won === true)：三个"恭喜中奖" → 基础列表 index 1~5（取同一个，保证整齐一致）
+      let r1, r2, r3;
+      if (won === true) {
+        const winIdx = 1 + Math.floor(Math.random() * 5); // 1~5 均为"恭喜中奖"
+        r1 = r2 = r3 = winIdx;
+      } else {
+        r1 = r2 = r3 = 0; // index 0 为"谢谢参与"
+      }
+
+      // 依次停止（左→右），制造老虎机逐列停下的效果
+      // 注：过渡时长由 less 中 .slot-reel.stopped 控制
+      this._stopTimer1 = setTimeout(() => {
+        this._landReel(1, this.data.offset1, r1, 5);
+      }, 0);
+      this._stopTimer2 = setTimeout(() => {
+        this._landReel(2, this.data.offset2, r2, 5);
+      }, 500);
+      this._stopTimer3 = setTimeout(() => {
+        this._landReel(3, this.data.offset3, r3, 5);
+        setTimeout(() => {
+          this.setData({ spinning: false, stopping: false });
+          this.triggerEvent('stopped', { resultIndex: [r1, r2, r3], won: won === true });
+        }, 1400); // 等最后一条轴过渡完
+      }, 1000);
+
+      return true;
+    },
+
+    play() {
+      this.spin();
+    },
+
+    pause() {
+      this.stop();
+    },
+
+    onDrawTap() {
+      this.spin();
+    },
+  },
+});

package/dist/components/lottery/lottery-slot/lottery-slot.json

@@ -0,0 +1 @@
+{"component": true, "usingComponents": {}}