vhall-mini-sdk 0.4.0 → 0.4.3

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

@@ -0,0 +1,62 @@
+<view class="slot-machine">
+    <!-- 顶部横幅：抽奖进行中，文字跑马灯，常显 -->
+    <view class="slot-banner">
+        <view class="slot-banner-inner">
+            <text class="slot-banner-text">{{remark}}</text>
+        </view>
+    </view>
+
+    <!-- 机器主体 -->
+    <view class="slot-body">
+        <!-- 顶部装饰灯条 -->
+        <view class="slot-top-lights">
+            <view wx:for="{{12}}" wx:key="index" class="slot-light-bulb {{index % 2 === 0 ? 'on' : ''}}"></view>
+        </view>
+
+        <!-- 滚轴区域 -->
+        <view class="slot-reels-container">
+            <!-- 滚轴窗口 -->
+            <view class="slot-reels-window">
+                <!-- 滚轴1 -->
+                <view class="slot-reel-wrap">
+                    <view class="slot-reel {{stopped1 ? 'stopped' : ''}}" style="transform: translateY({{offset1}}rpx);">
+                        <view wx:for="{{reelList}}" wx:key="index" class="slot-item">
+                            <text class="slot-emoji">{{item.emoji}}</text>
+                            <text class="slot-label">{{item.label}}</text>
+                        </view>
+                    </view>
+                </view>
+                <!-- 滚轴2 -->
+                <view class="slot-reel-wrap">
+                    <view class="slot-reel {{stopped2 ? 'stopped' : ''}}" style="transform: translateY({{offset2}}rpx);">
+                        <view wx:for="{{reelList}}" wx:key="index" class="slot-item">
+                            <text class="slot-emoji">{{item.emoji}}</text>
+                            <text class="slot-label">{{item.label}}</text>
+                        </view>
+                    </view>
+                </view>
+                <!-- 滚轴3 -->
+                <view class="slot-reel-wrap">
+                    <view class="slot-reel {{stopped3 ? 'stopped' : ''}}" style="transform: translateY({{offset3}}rpx);">
+                        <view wx:for="{{reelList}}" wx:key="index" class="slot-item">
+                            <text class="slot-emoji">{{item.emoji}}</text>
+                            <text class="slot-label">{{item.label}}</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 底部操作区 -->
+        <view class="slot-bottom-area">
+            <!-- 装饰小圆点 -->
+            <view class="slot-dots">
+                <view class="slot-dot" wx:for="{{7}}" wx:key="i"></view>
+            </view>
+            <!-- 抽奖按钮 -->
+            <view class="slot-draw-btn" bindtap="onDrawTap">
+                <text class="slot-btn-text">点我抽奖</text>
+            </view>
+        </view>
+    </view>
+</view>

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

@@ -0,0 +1 @@
+.slot-machine{align-items:center;display:flex;flex-direction:column;width:500rpx}.slot-banner{margin-bottom:-20rpx;overflow:hidden;position:relative;width:100%;z-index:5}.slot-banner-inner{align-items:center;background:linear-gradient(90deg,#ff6b6b,#ee5a5a 50%,#ff6b6b);border:4rpx solid rgba(255,220,180,.8);border-bottom:none;border-radius:40rpx 40rpx 0 0;box-shadow:inset 0 2rpx 8rpx hsla(0,0%,100%,.3),0 -4rpx 12rpx rgba(200,50,30,.3);display:flex;overflow:hidden;padding:12rpx 30rpx;white-space:nowrap}.slot-banner-text{animation:slot-marquee 3s linear infinite;color:#fff;display:inline-block;font-size:28rpx;font-weight:700;letter-spacing:4rpx;line-height:1.2;padding-left:100%;text-shadow:0 2rpx 4rpx rgba(150,30,10,.5);white-space:nowrap}@keyframes slot-marquee{0%{transform:translateX(0)}to{transform:translateX(-100%)}}.slot-body{background:linear-gradient(180deg,#ff8c42,#ff6b35 25%,#e85d24 60%,#d14d18);border:4rpx solid rgba(255,200,140,.7);border-radius:16rpx;box-shadow:0 12rpx 40rpx rgba(200,70,20,.45),inset 0 2rpx 8rpx rgba(255,220,160,.25);padding:24rpx 20rpx 32rpx;position:relative;width:100%;z-index:3}.slot-top-lights{display:flex;gap:12rpx;justify-content:center;margin-bottom:20rpx;padding:0 10rpx}.slot-light-bulb{background:#c42;border-radius:50%;box-shadow:inset 0 -2rpx 4rpx rgba(0,0,0,.4);height:16rpx;width:16rpx}.slot-light-bulb.on{animation:slot-blink .6s ease-in-out infinite alternate;background:radial-gradient(circle at 35% 35%,#fff 0,#ffd93d 50%,#fa0 100%);box-shadow:0 0 10rpx 4rpx rgba(255,217,61,.7),inset 0 -2rpx 4rpx rgba(0,0,0,.15)}@keyframes slot-blink{0%{opacity:.6}to{opacity:1}}.slot-reels-container{align-items:stretch;display:flex;gap:0}.slot-reels-window{align-items:stretch;background:linear-gradient(180deg,#d9531e,#b8430f);border:12rpx solid #ffd93d;border-radius:16rpx;box-shadow:inset 0 0 0 5rpx rgba(120,45,10,.75),inset 0 5rpx 12rpx rgba(255,224,160,.45),inset 0 -10rpx 20rpx rgba(80,25,0,.5),0 0 0 4rpx rgba(255,217,61,.25),0 10rpx 32rpx rgba(120,40,10,.55);display:flex;flex:1;justify-content:space-evenly;overflow:hidden}.slot-reel-wrap{flex-shrink:0;height:240rpx;overflow:hidden;position:relative;width:140rpx}.slot-reel{display:flex;flex-direction:column;gap:4rpx;transition:none}.slot-reel.stopped{transition:transform .8s cubic-bezier(.17,.67,.12,.99)}.slot-item{align-items:center;background:linear-gradient(180deg,#fffdf8,#fff2dc);border:2rpx solid rgba(230,130,60,.4);border-radius:12rpx;box-shadow:inset 0 2rpx 4rpx hsla(0,0%,100%,.7),0 1rpx 3rpx rgba(180,100,40,.12);box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;gap:4rpx;height:130rpx;justify-content:center;margin:0;width:140rpx}.slot-emoji{font-size:44rpx;line-height:1}.slot-label{color:#8b6914;font-size:20rpx;font-weight:500;line-height:1.2;white-space:nowrap}.slot-divider{background:linear-gradient(180deg,transparent,rgba(210,130,50,.4) 20%,rgba(210,130,50,.6) 50%,rgba(210,130,50,.4) 80%,transparent);flex-shrink:0;width:3rpx}.slot-bottom-area{align-items:center;flex-direction:column;margin-top:24rpx}.slot-bottom-area,.slot-dots{display:flex;gap:16rpx}.slot-dot{background:rgba(255,200,120,.6);border-radius:50%;box-shadow:inset 0 -1rpx 2rpx rgba(180,80,20,.3);height:12rpx;width:12rpx}.slot-draw-btn{animation:slot-btn-pulse 1.5s ease-in-out infinite;background:linear-gradient(180deg,#ffe066,#ffb830 40%,#f5a000);border:3rpx solid #e89400;border-radius:48rpx;box-shadow:0 6rpx 20rpx rgba(200,100,0,.4),inset 0 2rpx 4rpx rgba(255,255,220,.6),inset 0 -2rpx 4rpx rgba(180,80,0,.2);padding:18rpx 72rpx}@keyframes slot-btn-pulse{0%,to{box-shadow:0 6rpx 20rpx rgba(200,100,0,.4),inset 0 2rpx 4rpx rgba(255,255,220,.6),inset 0 -2rpx 4rpx rgba(180,80,0,.2);transform:scale(1)}50%{box-shadow:0 10rpx 30rpx rgba(200,100,0,.55),inset 0 2rpx 4rpx rgba(255,255,220,.7),inset 0 -2rpx 4rpx rgba(180,80,0,.2);transform:scale(1.04)}}.slot-btn-text{color:#8b4513;font-size:32rpx;font-weight:700;letter-spacing:6rpx;text-shadow:0 1rpx 2rpx rgba(255,250,230,.8)}

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

@@ -0,0 +1,153 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 1,
+    },
+    // 抽奖 ID：用于区分不同抽奖的缓存 key
+    lotteryId: {
+      type: String,
+      value: '',
+    },
+    width: {
+      type: String,
+      value: '100%',
+    },
+    height: {
+      type: String,
+      value: '100%',
+    },
+    remark: {
+      type: String,
+      value: '抽奖进行中...',
+    },
+    // 兼容原 lottie 版的属性透传，避免未知属性告警
+    autoplay: {
+      type: Boolean,
+      value: false,
+    },
+    loop: {
+      type: Boolean,
+      value: false,
+    },
+    // 外部"消息"控制：true 开始无限转，false 平滑停止
+    running: {
+      type: Boolean,
+      value: false,
+      observer(val) {
+        if (val) {
+          this.playSegment();
+        } else {
+          this.stop();
+        }
+      },
+    },
+  },
+
+  data: {
+    spinning: false, // 是否处于无限旋转状态
+    stopping: false, // 是否处于减速停止过渡
+    angle: 0, // 当前旋转角度（deg），由 JS 驱动
+  },
+
+  lifetimes: {
+    attached() {
+      if (this.data.running) {
+        // running 初始为 true 时直接开始
+        this.playSegment();
+      } else if (this._hasSpinCache()) {
+        // 刷新前抽奖仍在进行（有缓存），进入页面后自动恢复旋转动画
+        this.playSegment();
+      }
+    },
+    detached() {
+      // 注意：不在此清除缓存，保证刷新后仍能恢复动画
+      this._clearTimer();
+    },
+  },
+
+  methods: {
+    _clearTimer() {
+      if (this._timer) {
+        clearInterval(this._timer);
+        this._timer = null;
+      }
+      if (this._stopTimer) {
+        clearTimeout(this._stopTimer);
+        this._stopTimer = 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());
+    },
+
+    // 点击中心按钮：开始无限循环旋转，并通知父组件"用户发起抽奖"
+    playSegment() {
+      // 进行中或减速过渡阶段，忽略重复点击，避免动画重复执行 / 重复上报抽奖
+      if (this.data.spinning || this.data.stopping) return;
+      this._clearTimer();
+      this.setData({ spinning: true, stopping: false });
+      // 记录缓存：抽奖进行中，刷新后可据此恢复动画
+      this._setSpinCache();
+      // 每帧递增角度，约 360deg/s，纯 CSS 旋转由 transform 驱动
+      this._timer = setInterval(() => {
+        this.data.angle += 6;
+        this.setData({ angle: this.data.angle });
+      }, 16);
+      // 透传给父组件，便于其触发服务端抽奖
+      this.triggerEvent('draw');
+    },
+
+    // 兼容旧接口：开始旋转
+    play() {
+      this.playSegment();
+    },
+
+    // 平滑停止。resultIndex 可选：停到该扇区中心（指针在正上方）
+    // 返回 true 表示确实触发了减速停止；false 表示当前并未在转（无需等待）
+    stop(resultIndex) {
+      if (!this.data.spinning && !this.data.stopping) return false;
+      this._clearTimer();
+      // 抽奖已结束（服务端已返回结果），清除进行中缓存
+      this._clearSpinCache();
+      const current = this.data.angle;
+      let finalAngle = current + 360 * 5; // 默认再转 5 圈后停在当前相对位置
+      if (typeof resultIndex === 'number') {
+        // 扇区 i 中心角度（顺时针、自正上方起） = i*45 + 22.5
+        const center = (resultIndex % 8) * 45 + 22.5;
+        // 旋转后使该扇区中心对齐到正上方(0deg)：R ≡ -center (mod 360)
+        const land = (360 - center) % 360;
+        const base = current - (current % 360);
+        finalAngle = base + 360 * 5 + land;
+        // 保证比当前角度更大（始终向前转）
+        if (finalAngle < current + 360) finalAngle += 360;
+      }
+      // 先切到 stopping（带 transition），再写入最终角度触发平滑减速
+      this.setData({ spinning: false, stopping: true }, () => {
+        this.setData({ angle: finalAngle });
+      });
+      // 减速过渡结束后复位 stopping 状态，并通知父组件"已停止"
+      this._stopTimer = setTimeout(() => {
+        this.setData({ stopping: false });
+        this.triggerEvent('stopped', { angle: finalAngle, resultIndex });
+      }, 4000);
+      return true;
+    },
+
+    // 兼容旧接口：暂停（不带落点）
+    pause() {
+      this.stop();
+    },
+  },
+});

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

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

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

@@ -0,0 +1,91 @@
+<view class="lottery-wheel-container lottery-wheel-{{type}}">
+    <view class="lottery-wheel-wrapper">
+        <!-- 底座 -->
+        <view class="lottery-base"></view>
+
+        <!-- 转盘主体（angle 由 JS 驱动，stopping 触发减速过渡） -->
+        <view class="lottery-wheel-disc {{stopping ? 'stopping' : ''}}" style="transform: rotate({{angle}}deg);">
+            <!-- 8 个扇区（含文字+emoji） -->
+            <view class="lottery-segment lottery-segment-even" style="--i:0; --rot:0deg;">
+                <view class="lottery-segment-content">
+                    <text class="lottery-segment-text">恭喜中奖</text>
+                    <text class="lottery-segment-emoji">🎁</text>
+                </view>
+            </view>
+            <view class="lottery-segment lottery-segment-odd" style="--i:1; --rot:45deg;">
+                <view class="lottery-segment-content">
+                    <text class="lottery-segment-text">谢谢参与</text>
+                    <text class="lottery-segment-emoji">😊</text>
+                </view>
+            </view>
+            <view class="lottery-segment lottery-segment-even" style="--i:2; --rot:90deg;">
+                <view class="lottery-segment-content">
+                    <text class="lottery-segment-text">恭喜中奖</text>
+                    <text class="lottery-segment-emoji">🎁</text>
+                </view>
+            </view>
+            <view class="lottery-segment lottery-segment-odd" style="--i:3; --rot:135deg;">
+                <view class="lottery-segment-content">
+                    <text class="lottery-segment-text">谢谢参与</text>
+                    <text class="lottery-segment-emoji">😊</text>
+                </view>
+            </view>
+            <view class="lottery-segment lottery-segment-even" style="--i:4; --rot:180deg;">
+                <view class="lottery-segment-content">
+                    <text class="lottery-segment-text">恭喜中奖</text>
+                    <text class="lottery-segment-emoji">🎁</text>
+                </view>
+            </view>
+            <view class="lottery-segment lottery-segment-odd" style="--i:5; --rot:225deg;">
+                <view class="lottery-segment-content">
+                    <text class="lottery-segment-text">谢谢参与</text>
+                    <text class="lottery-segment-emoji">😊</text>
+                </view>
+            </view>
+            <view class="lottery-segment lottery-segment-even" style="--i:6; --rot:270deg;">
+                <view class="lottery-segment-content">
+                    <text class="lottery-segment-text">恭喜中奖</text>
+                    <text class="lottery-segment-emoji">🎁</text>
+                </view>
+            </view>
+            <view class="lottery-segment lottery-segment-odd" style="--i:7; --rot:315deg;">
+                <view class="lottery-segment-content">
+                    <text class="lottery-segment-text">谢谢参与</text>
+                    <text class="lottery-segment-emoji">😊</text>
+                </view>
+            </view>
+        </view>
+
+        <!-- 外圈灯泡装饰（兄弟节点，避免被盘面圆形裁剪；与盘面同步旋转） -->
+        <view class="lottery-lights {{stopping ? 'stopping' : ''}}" style="transform: rotate({{angle}}deg);">
+            <view class="lottery-light"></view>
+            <view class="lottery-light"></view>
+            <view class="lottery-light"></view>
+            <view class="lottery-light"></view>
+            <view class="lottery-light"></view>
+            <view class="lottery-light"></view>
+            <view class="lottery-light"></view>
+            <view class="lottery-light"></view>
+            <view class="lottery-light"></view>
+            <view class="lottery-light"></view>
+            <view class="lottery-light"></view>
+            <view class="lottery-light"></view>
+        </view>
+
+        <!-- 顶部抽奖指针（向上，底部贴着中心按钮） -->
+        <view class="lottery-pointer">
+            <view class="lottery-pointer-inner"></view>
+        </view>
+
+        <!-- 中心按钮：点我抽奖（不随盘面旋转，独立无限缩放） -->
+        <view class="lottery-center-btn" bindtap="playSegment">
+            <text class="lottery-center-btn-text">点我</text>
+            <text class="lottery-center-btn-text">抽奖</text>
+        </view>
+
+        <!-- 状态文案：常显 -->
+        <view class="lotterying">
+            <view class="lotterying-text">{{remark}}</view>
+        </view>
+    </view>
+</view>

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

@@ -0,0 +1 @@
+.lottery-wheel-container{align-items:center;display:flex;flex-direction:column;justify-content:center}.lottery-wheel-wrapper{height:720rpx;position:relative;width:750rpx}.lottery-base{background:linear-gradient(180deg,#e63e30,#c41a0d);border-radius:20rpx 20rpx 60rpx 60rpx;bottom:0;box-shadow:0 10rpx 30rpx rgba(198,26,13,.5),inset 0 4rpx 0 hsla(0,0%,100%,.2);height:120rpx;width:360rpx;z-index:16}.lottery-base,.lottery-base:after{left:50%;position:absolute;transform:translateX(-50%)}.lottery-base:after{background:rgba(0,0,0,.15);border-radius:20rpx;content:"";height:40rpx;top:20rpx;width:320rpx}.lottery-wheel-disc{background:transparent;border-radius:50%;box-shadow:0 8rpx 30rpx rgba(0,0,0,.25);height:440rpx;left:50%;margin-left:-220rpx;margin-top:-200rpx;overflow:hidden;position:absolute;top:50%;width:440rpx;z-index:10}.lottery-wheel-disc:after{border:8rpx solid rgba(230,62,48,.7);border-radius:50%;z-index:6}.lottery-wheel-disc:after,.lottery-wheel-disc:before{content:"";inset:0;pointer-events:none;position:absolute}.lottery-wheel-disc:before{background:repeating-conic-gradient(from 22.5deg,transparent 0deg 44deg,rgba(200,60,40,.45) 44deg 45deg);border-radius:50%;z-index:5}.lottery-wheel-disc.stopping{transition:transform 4s cubic-bezier(.17,.67,.12,.99)}.lottery-segment{height:100%;left:0;position:absolute;top:0;transform:rotate(calc(var(--rot)));transform-origin:center center;width:100%}.lottery-segment .lottery-segment-content{align-items:center;display:flex;flex-direction:column;justify-content:center;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%) translateY(-145rpx);width:150rpx}.lottery-segment .lottery-segment-text{font-size:24rpx;font-weight:700;white-space:nowrap}.lottery-segment .lottery-segment-emoji{font-size:36rpx;line-height:1.2}.lottery-segment-even{background:conic-gradient(from -22.5deg,#ff8c42 0deg 45deg,transparent 45deg 1turn)}.lottery-segment-even .lottery-segment-text{color:#fff;text-shadow:0 2rpx 4rpx rgba(0,0,0,.25)}.lottery-segment-odd{background:conic-gradient(from -22.5deg,#fff1d6 0deg 45deg,transparent 45deg 1turn)}.lottery-segment-odd .lottery-segment-text{color:#c41a0d}.lottery-lights{border-radius:50%;height:440rpx;left:50%;margin-left:-220rpx;margin-top:-200rpx;pointer-events:none;position:absolute;top:50%;width:440rpx;z-index:15}.lottery-lights.stopping{transition:transform 4s cubic-bezier(.17,.67,.12,.99)}.lottery-lights .lottery-light{animation:lottery-light-blink .8s ease-in-out infinite alternate;background:radial-gradient(circle at 35% 35%,#fff 0,#ffd93d 50%,#fa0 100%);border-radius:50%;box-shadow:0 0 12rpx 4rpx rgba(255,217,61,.8);height:20rpx;left:50%;margin-left:-10rpx;margin-top:-10rpx;position:absolute;top:50%;transform-origin:center;width:20rpx}.lottery-lights .lottery-light:first-child{transform:rotate(0deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(2){transform:rotate(30deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(3){transform:rotate(60deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(4){transform:rotate(90deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(5){transform:rotate(120deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(6){transform:rotate(150deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(7){transform:rotate(180deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(8){transform:rotate(210deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(9){transform:rotate(240deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(10){transform:rotate(270deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(11){transform:rotate(300deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(12){transform:rotate(330deg) translateX(235rpx)}.lottery-lights .lottery-light:nth-child(2n){animation-delay:.4s}@keyframes lottery-light-blink{0%{box-shadow:0 0 12rpx 4rpx rgba(255,217,61,.9);opacity:1}to{box-shadow:0 0 6rpx 2rpx rgba(255,217,61,.4);opacity:.5}}.lottery-center-btn{align-items:center;animation:lottery-btn-zoom .8s ease-in-out infinite alternate;background:linear-gradient(145deg,#ff6b5b,#e63e30);border:3rpx solid #ffd93d;border-radius:50%;box-shadow:0 4rpx 16rpx rgba(198,26,13,.5),inset 0 2rpx 4rpx hsla(0,0%,100%,.3);color:#fff;display:flex;flex-direction:column;height:100rpx;justify-content:center;left:50%;margin-left:-50rpx;margin-top:-30rpx;position:absolute;top:50%;width:100rpx;z-index:20}.lottery-center-btn:active{opacity:.85}.lottery-center-btn .lottery-center-btn-text{font-size:20rpx;font-weight:700;line-height:1.2;text-shadow:0 2rpx 4rpx rgba(0,0,0,.2)}.lottery-pointer{background:#ffd93d;-webkit-filter:drop-shadow(0 3rpx 6rpx rgba(0,0,0,.25));filter:drop-shadow(0 3rpx 6rpx rgba(0,0,0,.25));height:40rpx;left:50%;top:290rpx;transform:translateX(-50%);width:44rpx;z-index:18}.lottery-pointer,.lottery-pointer-inner{-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%);position:absolute}.lottery-pointer-inner{background:linear-gradient(90deg,#ff7a6a,#ff7a6a 50%,#d62f23 0,#d62f23);bottom:0;left:4rpx;right:4rpx;top:4rpx}@keyframes lottery-btn-zoom{0%{transform:scale(1)}to{transform:scale(1.12)}}.lotterying{bottom:60rpx;color:#fff;font-size:28rpx;left:50%;margin-left:-150rpx;overflow:hidden;position:absolute;width:300rpx;z-index:999}.lotterying .lotterying-text{animation:marquee 3s linear infinite;display:inline-block;padding-left:100%;white-space:nowrap}@keyframes marquee{0%{transform:translateX(0)}to{transform:translateX(-100%)}}

package/dist/components/lottery/lottery-winners/index.js

@@ -0,0 +1,101 @@
+Component({
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false,
+    },
+    lotteryId: {
+      type: String,
+      value: '',
+    },
+    sdkInstance: {
+      type: Object,
+      value: null,
+    },
+  },
+
+  data: {
+    winnersList: [],
+    total: 0,
+    pos: 0,
+    limit: 20,
+    loading: false,
+    hasMore: true,
+  },
+
+  observers: {
+    visible: function (visible) {
+      if (visible) {
+        this.initWinnersList();
+      } else {
+        this.setData({
+          winnersList: [],
+          pos: 0,
+          hasMore: true,
+        });
+      }
+    },
+  },
+
+  methods: {
+    async initWinnersList() {
+      this.setData({
+        winnersList: [],
+        pos: 0,
+        hasMore: true,
+        loading: true,
+      });
+      await this.loadWinnersList();
+    },
+
+    async loadWinnersList() {
+      if (!this.properties.lotteryId || !this.properties.sdkInstance) return;
+
+      const { lotteryId, sdkInstance } = this.properties;
+      const { pos, limit } = this.data;
+
+      try {
+        const lotteryServer = sdkInstance.get('lotteryServer');
+        if (!lotteryServer) return;
+        const res = await lotteryServer.getWinnerList({
+          lottery_id: lotteryId,
+          pos,
+          limit,
+        });
+
+        if (res && res.code === 200 && res.data) {
+          const newList = res.data.list || [];
+          const total = res.data.total || 0;
+
+          this.setData({
+            winnersList: pos === 0 ? newList : [...this.data.winnersList, ...newList],
+            total,
+            hasMore: pos + newList.length < total,
+            loading: false,
+          });
+        } else {
+          this.setData({ loading: false });
+        }
+      } catch (err) {
+        console.error('获取中奖名单失败:', err);
+        this.setData({ loading: false });
+      }
+    },
+
+    onScrollToLower() {
+      if (this.data.loading || !this.data.hasMore) return;
+
+      this.setData({
+        pos: this.data.pos + this.data.limit,
+        loading: true,
+      });
+
+      this.loadWinnersList();
+    },
+
+    close() {
+      this.setData({ visible: false });
+      this.triggerEvent('close');
+    },
+  },
+});

package/dist/components/lottery/lottery-winners/index.json

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

package/dist/components/lottery/lottery-winners/index.wxml

@@ -0,0 +1,39 @@
+<view wx:if="{{visible}}" class="lottery-winners-modal">
+    <view class="lottery-winners-mask" bindtap="close"></view>
+    <view class="lottery-winners-content">
+        <view class="lottery-winners-header">
+            <text class="lottery-winners-title">中奖名单</text>
+            <view class="lottery-winners-close" bindtap="close">
+                <icon type="cancel" size="24" color="#ffb029;" />
+            </view>
+        </view>
+        <view class="lottery-winners-body">
+            <scroll-view class="lottery-winners-list" scroll-y bindscrolltolower="onScrollToLower">
+                <view class="lottery-winners-list-inner">
+                    <view wx:for="{{winnersList}}" wx:key="lottery_user_id" class="lottery-winners-item" wx:class="{ isSelf: item.win }">
+                        <view class="lottery-winners-rank">
+                            {{index < 9 ? '0' + (index + 1) : (index + 1)}}
+                        </view>
+                        <image class="lottery-winners-avatar" src="{{item.lottery_user_avatar || 'https://cnstatic01.e.vhall.com/common-static/images/default_avatar.png'}}" mode="aspectFill" />
+                        <view class="lottery-winners-nickname">
+                            {{item.lottery_user_nickname }}
+                        </view>
+                        <view class="lottery-winners-prize">
+                            获得"{{item.lottery_award_name || ''}}"
+                        </view>
+                    </view>
+                </view>
+                <view wx:if="{{loading}}" class="lottery-winners-loading">
+                    <text>加载中...</text>
+                </view>
+                <view wx:if="{{!loading && !hasMore && winnersList.length > 0}}" class="lottery-winners-end">
+                    <text>没有更多了</text>
+                </view>
+                <view wx:if="{{!loading && winnersList.length == 0}}" class="lottery-winners-empty">
+                    <text class="empty-emoji">🙁</text>
+                    <text class="empty-text">当前无中奖用户</text>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</view>

package/dist/components/lottery/lottery-winners/index.wxss

@@ -0,0 +1 @@
+.lottery-winners-modal{align-items:flex-end;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.lottery-winners-mask{background:rgba(0,0,0,.5);bottom:0;left:0;position:absolute;right:0;top:0}.lottery-winners-content{background:linear-gradient(37.94deg,#fffbe8 3.86%,#fbf0e6 84.36%);border-radius:32rpx 32rpx 0 0;display:flex;flex-direction:column;max-height:70vh;position:relative;width:100%}.lottery-winners-header{align-items:center;display:flex;justify-content:center;padding:30rpx;position:relative}.lottery-winners-title{color:#ad2000;font-size:1.29rem}.lottery-winners-close{align-items:center;display:flex;height:48rpx;justify-content:center;position:absolute;right:30rpx;top:50%;transform:translateY(-50%);width:48rpx}.lottery-winners-body{flex:1;overflow:hidden;padding:0 30rpx 30rpx}.lottery-winners-list{height:55vh}.lottery-winners-list-inner{background:#fff;border-radius:24rpx;overflow:hidden}.lottery-winners-item{align-items:center;border-bottom:1rpx solid #f5f5f5;color:#333;display:flex;padding:30rpx}.lottery-winners-item:last-child{border-bottom:none}.lottery-winners-item.isSelf .lottery-winners-nickname,.lottery-winners-item.isSelf .lottery-winners-prize,.lottery-winners-item.isSelf .lottery-winners-rank{color:#fb2626}.lottery-winners-rank{color:#333;font-size:1.14rem;font-weight:700;margin-right:24rpx;width:60rpx}.lottery-winners-avatar{background:#f5f5f5;border-radius:50%;height:80rpx;margin-right:24rpx;width:80rpx}.lottery-winners-nickname{color:#333;flex:1;font-size:1.14rem}.lottery-winners-prize{color:#333;font-size:1rem}.lottery-winners-end,.lottery-winners-loading{color:#999;font-size:.93rem;padding:30rpx;text-align:center}.lottery-winners-empty{align-items:center;background:#fff;border-radius:24rpx;display:flex;flex-direction:column;height:100%;justify-content:center}.lottery-winners-empty .empty-emoji{font-size:4.29rem;margin-bottom:30rpx}.lottery-winners-empty .empty-text{color:#999;font-size:1.07rem}