vhall-mini-sdk 0.4.0 → 0.4.3

package/dist/components/lottery/lottery.js

@@ -0,0 +1,388 @@
+Component({
+  properties: {
+    sdkInstance: {
+      type: Object,
+      value: null,
+    },
+  },
+  data: {
+    visible: false,
+    lotteryStatus: '',
+    currentLottery: null,
+    winners: [],
+    animating: false,
+    isWinner: false,
+    prizeName: '',
+    prizeImage: '',
+    nickname: '',
+    winnersList: [],
+    receiveAwardWay: '',
+    showReceiveModal: false,
+    showHistory: false,
+    showHistoryIcon: false,
+    lotteryCount: 0,
+    winLotteryHistory: [],
+    showAwardPool: false,
+    awardList: [],
+    drawAwareFiled: {},
+    showWinnersList: false,
+  },
+  observers: {
+    sdkInstance: function sdkInstance(_sdkInstance) {
+      if (!_sdkInstance) return;
+      this.sdkInstance = _sdkInstance;
+      this.initSubscribe();
+      this.initEventListener();
+      this.initLotteryHistory(); // 初始化抽奖历史相关
+    },
+  },
+  lifetimes: {
+    attached() {},
+    detached() {
+      this.lotteryListUnsub && this.lotteryListUnsub();
+      this.unlistener && this.unlistener();
+      this._resultTimer && clearTimeout(this._resultTimer);
+    },
+  },
+  methods: {
+    // 初始化订阅监听
+    initSubscribe() {
+      // 监听 lotteryList 变化
+      this.lotteryListUnsub && this.lotteryListUnsub();
+      const store = this.sdkInstance.store;
+      this.lotteryListUnsub = store.get({
+        lotteryList: (lotteryList) => {
+          if (!lotteryList || !Array.isArray(lotteryList)) return;
+          const winHistory = lotteryList.filter((item) => item.win == 1);
+          this.setData({
+            showHistoryIcon: lotteryList.length > 0,
+            lotteryCount: lotteryList.length,
+            winLotteryHistory: winHistory,
+          });
+        },
+      });
+    },
+    // 初始化事件监听
+    initEventListener() {
+      this.unlistener && this.unlistener();
+      const obj = {};
+
+      // 抽奖开始
+      obj[this.sdkInstance.EVENT.LOTTERY_START] = (data) => {
+        data.lotteryStatus = 0;
+        this.setData({ currentLottery: data });
+        this.showLottery(data);
+      };
+
+      // 抽奖结束
+      obj[this.sdkInstance.EVENT.LOTTERY_END] = (data, curLottery) => {
+        // console.log('LOTTERY_END', data, curLottery);
+        // 抽奖已结束，兜底清除该抽奖"进行中"缓存（即便对应组件当时未渲染）
+        const endedLotteryId = curLottery && (curLottery.lottery_id || curLottery.id);
+        if (endedLotteryId) wx.removeStorageSync(`lottery_${endedLotteryId}_cache`);
+        const isWinner = data && data.award_name;
+        const user = this.sdkInstance?.store?.get('user') || {};
+        const resultData = {
+          visible: true,
+          lotteryStatus: 1,
+          isWinner: !!isWinner,
+          prizeName: data?.award_name || '',
+          prizeImage: data?.image_url || '',
+          nickname: user.nickname,
+          receiveAwardWay: data?.receive_award_way,
+          drawAwareFiled: JSON.parse(curLottery?.draw_aware_filed || '[]')[0],
+          animating: false,
+          currentLottery: curLottery,
+        };
+        // 通过消息控制动画停止：先平滑减速，过渡结束后再展示结果
+        const mode = this.data.currentLottery && this.data.currentLottery.img_order;
+        const wheel = this.selectComponent('#lotteryWheel');
+        const slot = this.selectComponent('#lotterySlot');
+        const shake = this.selectComponent('#lotteryShake');
+        if (mode == 3 && shake && this.data.lotteryStatus === 0) {
+          // 摇奖机模式：停止弹跳球聚落
+          const stopped = shake.stop();
+          if (stopped) {
+            this._resultTimer && clearTimeout(this._resultTimer);
+            this._resultTimer = setTimeout(() => {
+              this.setData(resultData);
+            }, 2500); // 等摇奖机球停止聚落
+            return;
+          }
+        }
+        if (mode == 2 && slot && this.data.lotteryStatus === 0) {
+          // 老虎机模式：停止滚轴，传入是否中奖（决定三轴落定在谢谢参与/恭喜中奖）
+          const stopped = slot.stop(resultData.isWinner);
+          if (stopped) {
+            this._resultTimer && clearTimeout(this._resultTimer);
+            this._resultTimer = setTimeout(() => {
+              this.setData(resultData);
+            }, 3200); // 等老虎机三轴依次停止
+            return;
+          }
+        }
+        if (mode != 2 && wheel && this.data.lotteryStatus === 0) {
+          // 转盘模式（默认）：平滑减速
+          const stopped = wheel.stop();
+          if (stopped) {
+            this._resultTimer && clearTimeout(this._resultTimer);
+            this._resultTimer = setTimeout(() => {
+              this.setData(resultData);
+            }, 4200); // 略大于减速过渡时长(4s)
+            return;
+          }
+        }
+        this.setData(resultData);
+      };
+
+      // 切回前台刷新：重新拉取抽奖列表与历史（时机与后台时长由 sdk 统一控制）
+      obj[this.sdkInstance.EVENT.FOREGROUND_REFRESH] = () => {
+        this.initLotteryHistory();
+      };
+
+      this.unlistener = this.sdkInstance.on(obj);
+    },
+
+    showLottery(data) {
+      this.closeAllModals();
+      this.setData({
+        visible: true,
+        lotteryStatus: data.lotteryStatus,
+        currentLottery: data,
+        animating: data.lotteryStatus == 0,
+      });
+
+      if (data.lotteryStatus == 1) {
+        this.checkWinner(data);
+      }
+    },
+
+    // 检查是否中奖
+    checkWinner(data) {
+      const user = this.sdkInstance?.store?.get('user') || {};
+      const currentUserId = user.id || user.uid || user.openid || '';
+      const winners = data.lottery_winners || '';
+      const winnerIds = winners.split(',').map((id) => id.trim());
+      const isWinner = winnerIds.includes(currentUserId);
+
+      let prizeName = '';
+      let prizeImage = '';
+      const winnersAward = data.lottery_winners_award || [];
+
+      if (isWinner && winnersAward.length > 0) {
+        const userAward = winnersAward.find((award) => award.uid == currentUserId);
+        if (userAward) {
+          prizeName = userAward.award_name;
+          prizeImage = userAward.image_url;
+        }
+      }
+
+      const winnersList = winnersAward.map((item) => ({
+        uid: item.uid,
+        prizeName: item.award_name || item.prize_name || item.name || '',
+        imageUrl: item.image_url || item.image || item.img || '',
+      }));
+
+      this.setData({
+        isWinner,
+        prizeName,
+        prizeImage,
+        winnersList,
+        animating: false,
+      });
+    },
+
+    closeAllModals() {
+      this.setData({
+        visible: false,
+        animating: false,
+        showReceiveModal: false,
+        showHistory: false,
+        showAwardPool: false,
+        showWinnersList: false,
+      });
+    },
+
+    // 用户点击转盘中心按钮触发的抽奖意图（透传，可在此接入服务端抽奖）
+    onWheelDraw() {
+      // 当前抽奖由 SDK 的 LOTTERY_START/LOTTERY_END 驱动，点击仅作为动画开始信号；
+      // 若需要点击即发起服务端抽奖，可在此调用对应接口。
+    },
+
+    // 转盘减速停止完成回调（结果已在 LOTTERY_END 中延时展示，这里可做兜底）
+    onWheelStopped() {},
+
+    // 老虎机用户点击抽奖
+    onSlotDraw() {},
+
+    // 老虎机停止回调
+    onSlotStopped() {},
+
+    // 摇奖机用户点击抽奖
+    onShakeDraw() {},
+
+    // 摇奖机停止回调
+    onShakeStopped() {},
+
+    onClose() {
+      this.closeAllModals();
+    },
+
+    receiveAward() {
+      if (this.data.receiveAwardWay == 4) {
+        wx.openUrl({
+          url: this.data.drawAwareFiled.custom_link,
+          success() {},
+          fail(err) {
+            wx.showToast({
+              title: '请联系主办方',
+              icon: 'error',
+            });
+          },
+        });
+        return;
+      }
+      this.closeAllModals();
+      this.setData({ showReceiveModal: true });
+    },
+    onReceiveModalClose() {
+      this.setData({ showReceiveModal: false });
+    },
+    onReceiveSuccess() {},
+
+    // 初始化抽奖历史（获取列表 + 监听变化）
+    initLotteryHistory() {
+      this.closeAllModals();
+      // 获取抽奖列表
+      const lotteryServer = this.sdkInstance.get('lotteryServer');
+      if (!lotteryServer) return;
+      const webinarId = this.sdkInstance.store.get('webinarId');
+      lotteryServer
+        .getLotteryList({ webinar_id: webinarId || '' })
+        .then((res) => {
+          if (res && res.data && res.data.length > 0) {
+            const ongoingLottery = res.data.find((item) => item.lottery_status == 0);
+            if (ongoingLottery) {
+              this.showLottery({
+                ...ongoingLottery,
+                lotteryStatus: 0,
+              });
+            }
+          }
+        })
+        .catch((err) => {
+          console.error('获取抽奖列表失败:', err);
+        });
+    },
+
+    showLotteryHistory() {
+      const lotteryServer = this.sdkInstance.get('lotteryServer');
+      if (!lotteryServer) return;
+      const webinarId = this.sdkInstance.store.get('webinarId');
+      lotteryServer
+        .getLotteryList({ webinar_id: webinarId || '' })
+        .then((res) => {
+          if (!res || !res.data) return;
+          const lotteryList = res.data;
+          let ongoingLottery = null;
+          let hasWinner = false;
+          for (let i = 0, len = lotteryList.length; i < len; i++) {
+            const item = lotteryList[i];
+            if (!ongoingLottery && item.lottery_status == 0) {
+              ongoingLottery = item;
+            }
+            if (!hasWinner && item.win == 1) {
+              hasWinner = true;
+            }
+            if (ongoingLottery && hasWinner) break;
+          }
+
+          this.closeAllModals();
+
+          // 无抽奖数据时不展示任何面板
+          if (lotteryList.length === 0) return;
+
+          if (ongoingLottery) {
+            this.setData({
+              visible: true,
+              lotteryStatus: 0,
+              currentLottery: ongoingLottery,
+              animating: true,
+            });
+          } else if (!hasWinner) {
+            this.setData({
+              visible: true,
+              lotteryStatus: 1,
+              isWinner: false,
+            });
+          } else {
+            this.setData({ showHistory: true });
+          }
+        })
+        .catch((err) => {
+          console.error('获取抽奖列表失败:', err);
+          this.closeAllModals();
+          this.setData({ showHistory: true });
+        });
+    },
+    onHistoryClose() {
+      this.closeAllModals();
+    },
+    onTakeAward(e) {
+      this.closeAllModals();
+      this.setData({
+        showReceiveModal: true,
+        currentLottery: e.detail,
+      });
+    },
+
+    onHistoryItemClick(e) {
+      const lottery = e.detail;
+      this.closeAllModals();
+      this.setData({
+        visible: true,
+        lotteryStatus: 1,
+        isWinner: true,
+        prizeName: lottery.award_snapshoot?.award_name || '',
+        prizeImage: lottery.award_snapshoot?.image_url || '',
+        receiveAwardWay: lottery.receive_award_way,
+        drawAwareFiled: JSON.parse(lottery?.draw_aware_filed || '[]')[0],
+        currentLottery: lottery,
+      });
+    },
+
+    async showAwardPool() {
+      const lotteryServer = this.sdkInstance.get('lotteryServer');
+      if (!lotteryServer) return;
+      const currentLottery = this.data.currentLottery;
+      if (!currentLottery) return;
+
+      this.closeAllModals();
+
+      const res = await lotteryServer.getAwardList({
+        lottery_id: currentLottery.lottery_id || currentLottery.id,
+      });
+
+      if (res.code == 200) {
+        this.setData({
+          awardList: res.data.list || [],
+          showAwardPool: true,
+        });
+      }
+    },
+
+    onAwardPoolClose() {
+      this.closeAllModals();
+      this.setData({ visible: true });
+    },
+
+    viewWinnersList() {
+      this.closeAllModals();
+      this.setData({ showWinnersList: true });
+    },
+
+    onWinnersClose() {
+      this.closeAllModals();
+    },
+  },
+});

package/dist/components/lottery/lottery.json

@@ -0,0 +1,11 @@
+{
+  "component": true,
+  "usingComponents": {
+    "lottery-wheel":"./lottery-wheel/lottery-wheel",
+    "lottery-slot":"./lottery-slot/lottery-slot",
+    "lottery-shake":"./lottery-shake/lottery-shake",
+    "lottery-accept":"./lottery-accept",
+    "lottery-history":"./lottery-history",
+    "lottery-winners":"./lottery-winners"
+  }
+}

package/dist/components/lottery/lottery.wxml

@@ -0,0 +1,78 @@
+<view class="lottery-container mode-{{currentLottery.img_order}} display-{{currentLottery.display_of_results}}" wx:if="{{visible}}" catchtouchmove="true">
+    <!-- <view class="lottery-overlay" bindtap="onClose"></view> -->
+    <view class="lottery-modal">
+        <!-- 抽奖进行中 -->
+        <view wx:if="{{lotteryStatus==0}}" class="lottery-content">
+            <!-- 抽奖形式由 img_order 决定：1=转盘，2=老虎机，3=摇奖机 -->
+            <!-- 摇奖机模式 (img_order == 3) -->
+            <lottery-shake wx:if="{{currentLottery.img_order == 3}}" id="lotteryShake" lotteryId="{{currentLottery.lottery_id || currentLottery.id}}" remark="{{currentLottery.remark}}" autoplay loop bind:draw="onShakeDraw" bind:stopped="onShakeStopped" />
+            <!-- 老虎机模式 (img_order == 2) -->
+            <lottery-slot wx:elif="{{currentLottery.img_order == 2}}" id="lotterySlot" lotteryId="{{currentLottery.lottery_id || currentLottery.id}}" remark="{{currentLottery.remark}}" autoplay loop bind:draw="onSlotDraw" bind:stopped="onSlotStopped" />
+            <!-- 转盘模式（默认回退：img_order == 1 或其它未识别值都走转盘） -->
+            <lottery-wheel wx:else id="lotteryWheel" type="{{currentLottery.img_order || 1}}" lotteryId="{{currentLottery.lottery_id || currentLottery.id}}" autoplay loop remark="{{currentLottery.remark}}" bind:draw="onWheelDraw" bind:stopped="onWheelStopped" />
+            <!-- 新增形式：在对应位置插入 wx:elif="{{currentLottery.img_order == N}}" 分支即可 -->
+            <view wx:if="{{currentLottery && currentLottery.can_look_award_pool == 1}}" class="lottery-award-pool-btn" bindtap="showAwardPool">
+                <text class="lottery-award-pool-text">查看奖池 ></text>
+            </view>
+        </view>
+        <!-- 中奖结果展示 -->
+        <view wx:if="{{lotteryStatus==1}}" class="lottery-content">
+            <!-- 中奖 -->
+            <view wx:if="{{isWinner}}" class="lottery-result lottery-win">
+                <text class="lottery-win-title stroked-text" data-text="恭喜您中奖啦">恭喜您中奖啦</text>
+                <text class="lottery-win-nickname">{{nickname}}</text>
+                <view class="prize-card">
+                    <image wx:if="{{prizeImage}}" class="prize-image" src="{{prizeImage}}" mode="aspectFit"></image>
+                </view>
+                <text class="prize-name">奖品【{{prizeName}}】</text>
+                <view wx:if="{{receiveAwardWay&&receiveAwardWay!=3}}" class="receive-btn" bindtap="receiveAward">
+                    {{receiveAwardWay==4?drawAwareFiled.custom_btn_txt:'立即领奖'}}
+                </view>
+                <button wx:if="{{receiveAwardWay==3 && currentLottery.publish_winner == 1}}" class="lottery-success-btn" bindtap="viewWinnersList">
+                    查看中奖名单
+                </button>
+            </view>
+            <!-- 未中奖 -->
+            <view wx:else class="lottery-result lottery-lose">
+                <view class="lottery-lose-content">
+                    <text class="lottery-lose-title stroked-text" data-text="谢谢参与">谢谢参与</text>
+                </view>
+                <button wx:if="{{currentLottery.publish_winner == 1}}" class="lottery-success-btn" bindtap="viewWinnersList">
+                    查看中奖名单
+                </button>
+            </view>
+        </view>
+        <view class="lottery-close-btn" bindtap="onClose">
+            <icon class="lottery-close-icon" type="cancel" size="{{currentLottery.display_of_results==1?'30':'40'}}" color="#fff" />
+        </view>
+    </view>
+</view>
+<!-- 右下角抽奖历史图标 -->
+<view wx:if="{{showHistoryIcon}}" class="lottery-history-icon" bindtap="showLotteryHistory">
+    <image class="history-icon-img" src="https://cnstatic01.e.vhall.com/common-static/saas-wap/static/img/icon.f669b92c.png" mode="aspectFit"></image>
+    <view wx:if="{{showHistoryBadge}}" class="history-badge"></view>
+</view>
+<!-- 领奖弹框组件 -->
+<lottery-accept visible="{{showReceiveModal}}" lotteryId="{{currentLottery && (currentLottery.lottery_id || currentLottery.id)}}" sdkInstance="{{sdkInstance}}" publishWinner="{{currentLottery && currentLottery.publish_winner}}" bind:close="onReceiveModalClose" bind:success="onReceiveSuccess" bind:viewWinners="viewWinnersList"></lottery-accept>
+<!-- 抽奖历史弹窗组件 -->
+<lottery-history visible="{{showHistory}}" winLotteryHistory="{{winLotteryHistory}}" bind:takeAward="onTakeAward" bind:close="onHistoryClose" bind:itemClick="onHistoryItemClick"></lottery-history>
+<!-- 奖池底部弹窗 -->
+<view wx:if="{{showAwardPool}}" class="award-pool-modal">
+    <view class="award-pool-mask" bindtap="onAwardPoolClose"></view>
+    <view class="award-pool-content">
+        <view class="award-pool-title">奖池奖品</view>
+        <view class="award-pool-wrap-container">
+            <scroll-view class="award-pool-wrap" scroll-y>
+                <view wx:for="{{awardList}}" wx:key="id" class="award-pool-item">
+                    <image class="award-pool-item__img" src="{{item.award_img_url}}" mode="aspectFill" />
+                    <view class="award-pool-item__content">
+                        <p class="award-pool-item-name">{{item.award_name}}</p>
+                        <p class="award-pool-item-desc">{{item.award_desc}}</p>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</view>
+<!-- 中奖名单弹窗组件 -->
+<lottery-winners visible="{{showWinnersList}}" lotteryId="{{currentLottery && (currentLottery.lottery_id || currentLottery.id)}}" sdkInstance="{{sdkInstance}}" bind:close="onWinnersClose"></lottery-winners>

package/dist/components/lottery/lottery.wxss

@@ -0,0 +1 @@
+.lottery-container{align-items:center;background:rgba(0,0,0,.7);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:10000}.lottery-container.display-1{background:url(https://s1.e.vhall.com/common-static/saas-wap/static/img/popupBg.35704976.png) no-repeat top;background-size:100% 100%;bottom:0;height:auto;top:56.25vw}.lottery-container.display-1 .lottery-close-btn{border-radius:50%;height:60rpx;position:absolute;right:20rpx;top:20rpx;width:60rpx}.lottery-overlay{background:rgba(0,0,0,.7);height:100%;left:0;position:absolute;top:0;width:100%}.lottery-modal{border-radius:24rpx;box-sizing:border-box;flex-direction:column;height:100%;position:relative;width:100%}.lottery-close,.lottery-modal{display:flex;justify-content:center}.lottery-close{align-items:center;height:50rpx;position:absolute;right:20rpx;top:20rpx;width:50rpx}.lottery-close .lottery-close-icon{height:40rpx;width:40rpx}.lottery-header{margin-bottom:30rpx;text-align:center}.lottery-title{color:#fff;font-size:36rpx;font-weight:700;text-shadow:0 2rpx 4rpx rgba(0,0,0,.3)}.lottery-content{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-bottom:30rpx}.svga-canvas{height:400rpx;width:400rpx}.lottery-footer{margin-bottom:20rpx;text-align:center}.lottery-join-btn{animation:bounce .6s ease-in-out infinite;background:linear-gradient(135deg,#ffd32a,#ff9f1a);border:none;border-radius:50rpx;box-shadow:0 6rpx 20rpx rgba(255,159,26,.5);color:#d63031;display:inline-block;font-size:32rpx;font-weight:700;padding:20rpx 60rpx}.lottery-join-btn:after{border:none}.lottery-hint{animation:pulse 1s ease-in-out infinite;color:#fff;display:block;font-size:28rpx}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.lottery-winners{background:hsla(0,0%,100%,.95);border-radius:16rpx;max-height:200rpx;padding:20rpx}.lottery-winners-title{color:#d63031;font-size:26rpx;font-weight:700;margin-bottom:15rpx;text-align:center}.lottery-winners-list{max-height:150rpx}.lottery-winner-item{align-items:center;display:flex;padding:10rpx 0}.lottery-winner-item:not(:last-child){border-bottom:1rpx solid #f0f0f0}.lottery-winner-avatar{border-radius:50%;height:50rpx;margin-right:15rpx;width:50rpx}.lottery-winner-name{color:#333;font-size:24rpx}.lottery-close-btn{border-radius:50%;height:80rpx;margin:0rpx auto;width:80rpx}.lottery-close-btn,.lottery-result{align-items:center;display:flex;justify-content:center}.lottery-result{flex-direction:column;padding:40rpx;text-align:center}.lottery-win-title{margin-bottom:20rpx}.stroked-text{color:#fff;font-size:48rpx;font-weight:700;letter-spacing:5px;transform:matrix(.99,0,-.15,1,0,0)}.stroked-text:after,.stroked-text:before{content:attr(data-text);left:0;position:absolute;top:0}.stroked-text:before{-webkit-text-stroke:5px #fb2626;z-index:-1}.stroked-text:after{-webkit-text-stroke:8px #ffecb7;z-index:-2}.lottery-win-nickname{background:linear-gradient(270deg,rgba(255,107,38,0) 5.07%,#ff6b26 25.41%,#f52c03);border-radius:50rpx 0 0 50rpx;color:#fff;display:inline-block;margin-bottom:20rpx;max-width:340rpx;padding:6rpx 40rpx 6rpx 20rpx}.lottery-prize{background:linear-gradient(135deg,#ffd32a,#ff9f1a);border-radius:40rpx;color:#fff;font-size:36rpx;font-weight:700;padding:20rpx 40rpx}.lottery-lose-content{align-items:center;background:url(https://cnstatic01.e.vhall.com/common-static/saas-wap/static/img/lottery-miss.5a1292bf.png) no-repeat 50%;background-size:contain;display:flex;flex-direction:row;height:420rpx;justify-content:center;width:420rpx}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.lottery-animation{padding:40rpx}.lottery-animation,.lottery-spinner{align-items:center;display:flex;justify-content:center}.lottery-spinner{animation:spin 2s linear infinite;background:linear-gradient(135deg,#ffd32a,#ff9f1a);border-radius:50%;box-shadow:0 10rpx 30rpx rgba(255,159,26,.5);height:200rpx;width:200rpx}.lottery-ball{animation:bounce .6s ease-in-out infinite;background:#fff;border-radius:50%;height:60rpx;width:60rpx}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.lottery-result{background:url(https://cnstatic01.e.vhall.com/common-static/saas-wap/static/img/lottery-win-gold-coin.1bcfdf22.png) no-repeat 50%;background-size:contain}.lottery-win{align-items:center;display:flex;flex-direction:column;padding:40rpx}.win-icon{animation:bounce .5s ease;font-size:100rpx;margin-bottom:20rpx}.prize-card{align-items:center;background:url(https://cnstatic01.e.vhall.com/common-static/saas-wap/static/img/lottery-win-annulus.ec2c80bd.png) no-repeat 50%;background-size:contain;display:flex;flex-direction:column;margin-top:-100rpx;padding:160rpx}.prize-image{border-radius:140rpx;height:280rpx;width:280rpx}.prize-name{background:linear-gradient(270deg,rgba(255,226,73,0) 2.54%,#ffeb32 32.61%,#ffeb32 59.83%,rgba(255,215,73,0) 94.2%);color:#d63031;display:block;font-size:32rpx;line-height:60rpx;margin-top:-140rpx;width:100%}.lottery-win-hint{color:hsla(0,0%,100%,.8);font-size:26rpx;margin-top:10rpx}.lottery-success-btn,.receive-btn{background:#fb2626;border-radius:50rpx;color:#fff;margin-top:30rpx;padding:20rpx 60rpx}.lottery-success-btn .receive-btn-text,.receive-btn .receive-btn-text{color:#fff;font-size:32rpx}.lottery-history-icon{align-items:center;border-radius:50%;bottom:200rpx;display:flex;justify-content:center;position:fixed;right:40rpx;z-index:500}.lottery-history-icon .history-icon-img{height:70rpx;width:70rpx}.lottery-history-icon .history-badge{background-color:#fb2626;border:4rpx solid #fff;border-radius:50%;height:24rpx;position:absolute;right:-4rpx;top:-4rpx;width:24rpx}.lottery-award-pool-btn .lottery-award-pool-text{color:#fce09e;font-size:32rpx}.award-pool-modal{bottom:0;display:flex;flex-direction:column;justify-content:flex-end;left:0;position:fixed;right:0;top:0;z-index:10001}.award-pool-mask{background:rgba(0,0,0,.5);bottom:0;left:0;position:absolute;right:0;top:0}.award-pool-content{background:linear-gradient(37.94deg,#fffbe8 3.86%,#fbf0e6 84.36%);border-radius:32rpx 32rpx 0 0;max-height:70vh;overflow:hidden;padding:0 40rpx 80rpx;position:relative}.award-pool-title{border-bottom:2rpx solid #f0f0f0;color:#333;font-size:38rpx;font-weight:600;height:100rpx;line-height:100rpx;text-align:center}.award-pool-wrap-container{padding-right:4rpx}.award-pool-wrap{max-height:432rpx;min-height:128rpx}.award-pool-item-wrapper{margin-bottom:24rpx}.award-pool-item{align-items:center;background:#fff;border-radius:24rpx;display:flex;flex-direction:row;padding:28rpx 32rpx}.award-pool-item__img{border:2rpx solid #d9d9d9;border-radius:24rpx;flex-shrink:0;height:160rpx;width:160rpx}.award-pool-item__content{display:flex;flex:1;flex-direction:column;height:100%;justify-content:center;margin-left:30rpx;width:0}.award-pool-item-name{color:#262626;font-size:32rpx;font-weight:500;line-height:48rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.award-pool-item-desc{color:#8c8c8c;font-size:28rpx;line-height:36rpx;margin-top:8rpx}

package/dist/components/lottery/wheel.json

@@ -0,0 +1,49 @@
+{
+  "v":"5.12.0",
+  "fr":30,
+  "ip":0,
+  "op":60,
+  "w":300,
+  "h":300,
+  "nm":"抽奖转盘",
+  "ddd":0,
+  "assets":[],
+  "layers":[
+    {
+      "ddd":0,
+      "ind":1,
+      "ty":1,
+      "nm":"转盘底座",
+      "sr":1,
+      "ks":{
+        "o":{"a":0,"k":100},
+        "r":{"a":1,"k":[{"t":0,"s":[0]},{"t":60,"s":[720]}]},
+        "p":{"a":0,"k":[150,150,0]},
+        "a":{"a":0,"k":[150,150,0]}
+      },
+      "shapes":[
+        {
+          "ty":"gr",
+          "it":[
+            {
+              "ty":"el",
+              "s":{"a":0,"k":[150,150]},
+              "p":{"a":0,"k":[0,0]}
+            },
+            {
+              "ty":"st",
+              "c":{"a":0,"k":[1,0.8,0.2]},
+              "o":{"a":0,"k":100},
+              "w":{"a":0,"k":8}
+            },
+            {
+              "ty":"fl",
+              "c":{"a":0,"k":[0.95,0.25,0.25]},
+              "o":{"a":0,"k":100}
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/dist/components/mall-reward/duration-icon/index.js

@@ -0,0 +1,101 @@
+import { formatSeconds2Time } from '../../../shared/utils';
+Component({
+  properties: {
+    showIcon: {
+      type: Boolean,
+      value: false,
+    },
+    mallRewardInfo: {
+      type: Object,
+      value: null,
+    },
+    activeMallReward: {
+      type: Object,
+      value: null,
+    },
+    onlineDuration: {
+      type: Number,
+      value: 0,
+    },
+  },
+  data: {
+    x: 20,
+    y: 100,
+    startX: 0,
+    startY: 0,
+    hasMoved: false,
+
+    second: 0, // 倒计时秒数
+    displayText: '--:--', // 倒计时展示内容
+  },
+  observers: {
+    onlineDuration: function () {
+      this.updateOnlineDuration(this.properties.onlineDuration);
+    },
+    'activeMallReward.reward_id': function () {
+      this.calcSecond(this.properties.onlineDuration);
+    },
+    'mallRewardInfo.is_received': function () {
+      this.calcSecond(this.properties.onlineDuration);
+    },
+    'mallRewardInfo.list.length': function () {
+      this.calcSecond(this.properties.onlineDuration);
+    },
+  },
+  methods: {
+    fmtDuration(ss) {
+      // 无当前活动红包信息，但显示小图标，说明参与过有记录
+      if (!this.properties.activeMallReward) {
+        return this.properties.mallRewardInfo?.is_received === 1 ? '已领取' : '领福利';
+      }
+
+      // 当前活动红包信息是无条件红包
+      if (this.properties.activeMallReward?.viewing_minutes == 0) return '领福利';
+
+      // 当前活动红包信息是时长红包
+      if (this.properties.activeMallReward?.viewing_minutes > 0 && !isNaN(ss)) {
+        if (ss <= 0) return '领福利';
+
+        return formatSeconds2Time(ss);
+      }
+      return '--:--';
+    },
+    // 更新在线时长
+    updateOnlineDuration(ol) {
+      if (this.properties.activeMallReward?.viewing_minutes > 0 && this.data.second > 0) {
+        this.calcSecond(ol);
+        if (this.data.second < 1) {
+          // 倒计时完成
+          this.triggerEvent('countdownEnd', this.properties.activeMallReward);
+        }
+      }
+    },
+    // 计时倒计时秒数
+    calcSecond(ol) {
+      const ss = Math.max(this.properties.activeMallReward?.viewing_minutes * 60 - ol || 0, 0);
+      const text = this.fmtDuration(ss);
+      this.setData({
+        second: ss,
+        displayText: text,
+      });
+    },
+
+    onTouchStart(e) {
+      this.setData({ hasMoved: false });
+    },
+
+    onTouchEnd(e) {
+      this.data.hasMoved = false;
+    },
+
+    onDragChange(e) {
+      const { x, y } = e.detail;
+      this.setData({ x, y, hasMoved: true });
+    },
+
+    onTapIcon() {
+      if (this.data.hasMoved) return;
+      this.triggerEvent('onTapIcon');
+    },
+  },
+});

package/dist/components/mall-reward/duration-icon/index.json

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

package/dist/components/mall-reward/duration-icon/index.wxml

@@ -0,0 +1,7 @@
+<movable-area class="drag-area">
+  <movable-view class="drag-view" direction="all" x="{{x}}" y="{{y}}" damping="{{40}}" out-of-bounds="{{false}}" bindchange="onDragChange" bindtouchstart="onTouchStart" bindtouchend="onTouchEnd">
+    <view class="mall-reward-icon" bindtap="onTapIcon">
+      <view class="mall-reward-icon-content {{second>=3600?'is-long':''}}">{{displayText}}</view>
+    </view>
+  </movable-view>
+</movable-area>

package/dist/components/mall-reward/duration-icon/index.wxss

@@ -0,0 +1 @@
+.drag-area{height:100vh;left:0;pointer-events:none;position:fixed;top:0;width:100vw;z-index:100}.drag-view{height:160rpx;pointer-events:auto;width:140rpx}.mall-reward-icon{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/dr_bg.png);height:120rpx;position:relative;width:120rpx}.mall-reward-icon,.mall-reward-icon-content{background-repeat:no-repeat;background-size:100% 100%}.mall-reward-icon-content{align-items:center;background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/dr_time_bg.png);background-position:50%;border-radius:100rpx;bottom:-14rpx;color:#fff;display:flex;font-size:.79rem;justify-content:center;left:10rpx;overflow:visible;position:absolute;text-align:center;white-space:nowrap;width:100rpx}.mall-reward-icon-content.is-long{left:4rpx;width:112rpx}