vhall-mini-sdk 0.4.1 → 0.4.4

package/dist/components/gift/gift-display/gift-display.js

@@ -0,0 +1,118 @@
+Component({
+  properties: {
+    sdkInstance: {
+      type: Object,
+      value: null,
+    }
+  },
+  data: {
+    giftMessages: []
+  },
+  observers: {
+    sdkInstance: function sdkInstance(_sdkInstance) {
+      if (!_sdkInstance) return;
+      this.sdkInstance = _sdkInstance;
+      this.initListener();
+    },
+  },
+  lifetimes: {
+    detached() {
+      // 组件销毁时清除监听
+      this.unlistener && this.unlistener();
+    },
+  },
+  methods: {
+    // 初始化事件监听
+    initListener() {
+      this.unlistener && this.unlistener();
+      const obj = {};
+      obj[this.sdkInstance.EVENT.GIFT_MSG] = (msg) => {
+        this.handleGiftMessage(msg);
+      };
+      this.unlistener = this.sdkInstance.on(obj);
+    },
+    
+    // 处理礼物消息
+    handleGiftMessage(data) {
+      // 生成唯一ID
+      const id = Date.now() + Math.random().toString(36).substr(2, 9);
+      
+      // 构建礼物消息对象
+      const giftMessage = {
+        id,
+        nickname: data.gift_user_name || '匿名用户',
+        gift: {
+          icon: data.gift_image_url || '',
+          name: data.gift_name || '礼物'
+        }
+      };
+      
+      // 添加到礼物消息列表
+      const newGiftMessages = [...this.data.giftMessages, giftMessage];
+      this.setData({ giftMessages: newGiftMessages });
+      
+      // 触发动画
+      this.triggerAnimation(id);
+      
+      // 3秒后移除礼物消息
+      setTimeout(() => {
+        this.removeGiftMessage(id);
+      }, 3000);
+    },
+    
+    // 触发动画
+    triggerAnimation(id) {
+      // 创建进入动画
+      const animation = wx.createAnimation({
+        duration: 500,
+        timingFunction: 'ease-out'
+      });
+      
+      // 从左侧滑入并稍微向上移动
+      animation.translateX(0).translateY(-20).opacity(1).step();
+      
+      // 更新动画
+      const newGiftMessages = this.data.giftMessages.map(item => {
+        if (item.id === id) {
+          return { ...item, animation: animation.export() };
+        }
+        return item;
+      });
+      
+      this.setData({ giftMessages: newGiftMessages });
+      
+      // 2秒后开始飘出动画
+      setTimeout(() => {
+        this.floatAnimation(id);
+      }, 2000);
+    },
+    
+    // 飘出动画
+    floatAnimation(id) {
+      // 创建飘出动画
+      const animation = wx.createAnimation({
+        duration: 1000,
+        timingFunction: 'ease-in-out'
+      });
+      
+      // 向上飘动并逐渐透明
+      animation.translateY(-60).opacity(0).step();
+      
+      // 更新动画
+      const newGiftMessages = this.data.giftMessages.map(item => {
+        if (item.id === id) {
+          return { ...item, animation: animation.export() };
+        }
+        return item;
+      });
+      
+      this.setData({ giftMessages: newGiftMessages });
+    },
+    
+    // 移除礼物消息
+    removeGiftMessage(id) {
+      const finalGiftMessages = this.data.giftMessages.filter(item => item.id !== id);
+      this.setData({ giftMessages: finalGiftMessages });
+    },
+  },
+});

package/dist/components/gift/gift-display/gift-display.json

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

package/dist/components/gift/gift-display/gift-display.wxml

@@ -0,0 +1,16 @@
+<view class="gift-display">
+  <view 
+    wx:for="{{giftMessages}}" 
+    wx:key="id" 
+    class="gift-item" 
+    style="top: {{index * 80}}rpx;" 
+    animation="{{item.animation}}"
+  >
+    <view class="gift-content">
+      <text class="gift-user">{{item.nickname}}</text>
+      <text class="gift-action">送出了</text>
+      <text class="gift-name">{{item.gift.name}}</text>
+      <image class="gift-icon" src="{{item.gift.icon}}" mode="aspectFit"></image>
+    </view>
+  </view>
+</view>

package/dist/components/gift/gift-display/gift-display.wxss

@@ -0,0 +1 @@
+.gift-display{left:0;pointer-events:none;position:absolute;top:100rpx;z-index:9999;z-index:100}.gift-item{background:linear-gradient(90deg,#8274ff 2.98%,rgba(249,51,249,.4) 118.57%);border-radius:25rpx;left:20rpx;margin-bottom:10rpx;min-width:300rpx;opacity:0;padding:10rpx 20rpx;position:absolute;transform:translateX(-100%)}.gift-content,.gift-item{align-items:center;display:flex}.gift-content{flex-wrap:nowrap}.gift-action,.gift-user{color:#fff;font-size:.86rem;margin-right:10rpx;white-space:nowrap}.gift-icon{height:40rpx;margin-right:10rpx;transform:scale(2);transform-origin:left center;width:40rpx}.gift-name{color:gold;font-size:.86rem;font-weight:700;white-space:nowrap}

package/dist/components/gift/gift-sender/gift-sender.js

@@ -0,0 +1,63 @@
+Component({
+  properties: {
+    sdkInstance: {
+      type: Object,
+      value: null,
+    }
+  },
+  data: {
+    giftList: [],
+    selectedGift: null
+  },
+  lifetimes: {
+    attached() {
+      // 组件挂载时调用获取礼物列表
+      if (this.properties.sdkInstance) {
+        this.sdkInstance = this.properties.sdkInstance;
+        this.getGiftList();
+      }
+    }
+  },
+  methods: {
+    // 获取礼物列表
+    async getGiftList() {
+     
+      const interactServer = this.sdkInstance.get('interactServer');
+      if (!interactServer) {
+        console.error('InteractServer不存在');
+        return;
+      }
+      
+      // 调用 InteractServer 的 getGiftList 方法获取礼物列表
+      const giftList = await interactServer.getGiftList();
+      this.setData({ giftList });
+    },
+    
+    // 选择礼物
+    selectGift(e) {
+      const gift = e.currentTarget.dataset.gift;
+      this.setData({ selectedGift: gift });
+    },
+    
+    // 发送礼物
+    async sendGift(e) {
+      
+      if (!this.data.selectedGift) return;
+      
+      const interactServer = this.sdkInstance.get('interactServer');
+      if (interactServer) {
+         const res =   await interactServer.sendGift(this.data.selectedGift);
+         if(res.code==200){
+          // 触发关闭事件，通知父组件关闭弹窗
+          this.triggerEvent('onSendFinished');
+         }else{
+           wx.showToast({
+            title: res.msg,
+            icon: 'none',
+            duration: 2000
+          });
+         }
+      }
+    },
+  },
+});

package/dist/components/gift/gift-sender/gift-sender.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "vh-popup": "../../../pubComponents/popup/popup"
+  }
+}

package/dist/components/gift/gift-sender/gift-sender.wxml

@@ -0,0 +1,19 @@
+<view class="gift-popup-content">
+  <view class="gift-popup-header">
+  </view>
+  <view class="gift-list">
+    <view 
+      wx:for="{{giftList}}" 
+      wx:key="id" 
+      class="gift-item {{selectedGift && selectedGift.id == item.id ? 'gift-item-selected' : ''}}" 
+      bindtap="selectGift" 
+      data-gift="{{item}}"
+    >
+      <image class="gift-item-icon" src="{{item.icon}}" mode="aspectFit"></image>
+      <text class="gift-item-name" wx:if="{{selectedGift.id != item.id}}">{{item.name}}</text>
+      <view class="gift-item-button" wx:if="{{selectedGift && selectedGift.id == item.id}}"  catchtap="sendGift">
+        <text class="gift-item-button-text">赠送</text>
+      </view>
+    </view>
+  </view>
+</view>

package/dist/components/gift/gift-sender/gift-sender.wxss

@@ -0,0 +1 @@
+.gift-popup-content{background:#fff;border-radius:20rpx 20rpx 0 0;padding:20rpx}.gift-list{display:grid;gap:20rpx;grid-template-columns:repeat(4,1fr);max-height:400rpx;overflow-y:auto;padding:20rpx 0}.gift-item{align-items:center;border-radius:10rpx;box-sizing:border-box;display:flex;flex-direction:column;height:180rpx;justify-content:space-between;position:relative;transition:all .3s}.gift-item:active{background:#f5f5f5;transform:scale(.95)}.gift-item-selected{border:1px solid #ff4d4f}.gift-item-icon{height:120rpx;margin-bottom:10rpx;width:120rpx}.gift-item-name{color:#333;margin-bottom:5rpx}.gift-item-button,.gift-item-name{font-size:.86rem;text-align:center}.gift-item-button{background:#ff4d4f;color:#fff;display:block;line-height:1.71rem;width:100%}.gift-popup-footer{border-top:1rpx solid #f0f0f0;justify-content:space-between;margin-top:20rpx;padding:20rpx 0}.gift-popup-footer,.selected-gift-info{align-items:center;display:flex}.selected-gift-icon{height:40rpx;margin-right:10rpx;width:40rpx}.selected-gift-name{color:#333;font-size:1rem;margin-right:10rpx}.selected-gift-price{color:#ff4d4f;font-size:1rem;font-weight:700}.send-button{background:#ff4d4f;border-radius:25rpx;color:#fff;font-size:1rem;font-weight:700;padding:15rpx 40rpx}.send-button:active{background:#ff7875;transform:scale(.95)}.gift-loading{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:100rpx 0}.gift-loading-spinner{animation:spin 1s linear infinite;border:4rpx solid #f0f0f0;border-radius:50%;border-top-color:#ff4d4f;height:60rpx;margin-bottom:20rpx;width:60rpx}.gift-loading-text{color:#999;font-size:1rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

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

@@ -0,0 +1,249 @@
+Component({
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false,
+    },
+    lotteryId: {
+      type: String,
+      value: '',
+    },
+    sdkInstance: {
+      type: Object,
+      value: null,
+    },
+    publishWinner: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  data: {
+    acceptType: 1, // 1表单,2客服,3无需领奖
+    winForm: [], // 中奖信息表单
+    customerServiceInfo: {}, // 客服信息
+    verified: false, // 表单是否验证通过
+    showSuccess: false, // 是否显示提交成功弹框
+  },
+
+  observers: {
+    visible: function (visible) {
+      if (visible && this.properties.lotteryId && this.properties.sdkInstance) {
+        this.initAcceptConfig();
+      } else {
+        this.setData({ showSuccess: false });
+      }
+    },
+  },
+
+  methods: {
+    // 获取领奖配置
+    async initAcceptConfig() {
+      try {
+        const lotteryServer = this.properties.sdkInstance.get('lotteryServer');
+        const webinarId = this.properties.sdkInstance.store.get('webinarId');
+        const res = await lotteryServer.getReceiveAwardSetting({
+          lottery_id: this.properties.lotteryId || '',
+          webinar_id: webinarId || '',
+        });
+        if (res.code === 200) {
+          const data = res.data;
+          if (data.receive_award_way === 1) {
+            // 表单领奖
+            this.setData({
+              acceptType: 1,
+              winForm: this.paseFormInfo(data.json_data),
+            });
+            this.fillUserInfo();
+          } else if (data.receive_award_way === 2) {
+            // 客服领奖
+            this.setData({
+              acceptType: 2,
+              customerServiceInfo: this.paseCustomerServiceInfo(data.json_data),
+            });
+          }
+        }
+      } catch (err) {
+        console.error('获取领奖配置失败:', err);
+      }
+    },
+
+    // 解析表单信息
+    paseFormInfo(jsonString) {
+      let info = [];
+      try {
+        const jsonObj = JSON.parse(jsonString);
+        if (Array.isArray(jsonObj)) {
+          jsonObj.map((item) => {
+            if (item.field_key == 'phone') {
+              item.maxLength = 20;
+            } else if (item.field_key == 'name') {
+              item.maxLength = 20;
+            } else if (item.field_key == 'address') {
+              item.maxLength = 50;
+            } else {
+              item.maxLength = 100;
+            }
+            item.field_value = '';
+            item.error = false;
+            info.push(item);
+          });
+        }
+      } catch (e) {
+        info = [];
+      }
+      return info;
+    },
+
+    // 解析客服信息
+    paseCustomerServiceInfo(jsonString) {
+      let info = {};
+      try {
+        const jsonObj = JSON.parse(jsonString);
+        if (Array.isArray(jsonObj)) {
+          jsonObj.forEach((filedItem) => {
+            info[filedItem.field_key] = filedItem.placeholder;
+          });
+        }
+      } catch (e) {
+        info = {};
+      }
+      return info;
+    },
+
+    // 验证表单是否可提交
+    validateForm() {
+      const winForm = this.data.winForm;
+      const verified = winForm.every((form) => {
+        return !form.is_required || (form.field_value && form.field_value.trim() !== '');
+      });
+      this.setData({ verified });
+    },
+
+    // 表单输入监听
+    onFormInput(e) {
+      const { index } = e.currentTarget.dataset;
+      const value = e.detail.value;
+      const winForm = this.data.winForm;
+      winForm[index].field_value = value;
+      winForm[index].error = false;
+      this.setData({ winForm });
+      this.validateForm();
+    },
+
+    // 验证表单
+    verify() {
+      const winForm = this.data.winForm;
+      const errorItem = winForm.find((item) => {
+        if (
+          item.field_key == 'phone' &&
+          ((item.field_value != '' && item.field_value != null) || !!item.is_required)
+        ) {
+          const phone = item.field_value.replace(/\s+/g, '');
+          // 简单的手机号校验
+          if (!/^1[3-9]\d{9}$/.test(phone)) {
+            return true;
+          }
+        } else if (!!item.is_required && item.field_value == '') {
+          return true;
+        }
+        return false;
+      });
+
+      if (errorItem) {
+        errorItem.error = true;
+        this.setData({ winForm });
+        wx.showToast({
+          title: `请输入正确的信息${errorItem.field}`,
+          icon: 'none',
+        });
+        return false;
+      }
+      return true;
+    },
+
+    // 提交领奖信息
+    async submit() {
+      if (!this.verify()) return;
+
+      const winForm = this.data.winForm;
+      const remark = winForm.map((item) => ({
+        field_value: item.field_value,
+        field: item.field,
+        field_key: item.field_key,
+        is_required: item.is_required,
+        is_system: item.is_system,
+        placeholder: item.placeholder,
+        rank: item.rank,
+      }));
+
+      try {
+        const lotteryServer = this.properties.sdkInstance.get('lotteryServer');
+        if (!lotteryServer) return;
+        const watchInitData = this.properties.sdkInstance.store.get('watchInitData');
+        const roomId = watchInitData?.interact?.room_id || '';
+        const res = await lotteryServer.submitLotteryAward({
+          lottery_user_name: winForm[0]?.field_value || '',
+          lottery_user_phone: winForm[1]?.field_value || '',
+          lottery_user_remark: JSON.stringify(remark),
+          lottery_id: this.properties.lotteryId || '',
+          room_id: roomId,
+        });
+
+        if (res.code === 200) {
+          this.setData({ showSuccess: true });
+          this.triggerEvent('success');
+        } else {
+          wx.showToast({
+            title: res.msg || '提交失败',
+            icon: 'none',
+          });
+        }
+      } catch (err) {
+        wx.showToast({
+          title: '提交失败',
+          icon: 'none',
+        });
+      }
+    },
+
+    // 预填用户信息
+    async fillUserInfo() {
+      try {
+        const lotteryServer = this.properties.sdkInstance.get('lotteryServer');
+        if (!lotteryServer) return;
+        const res = await lotteryServer.getLotteryUserInfo();
+        if (res.code === 200 && res.data) {
+          const data = res.data;
+          const winForm = this.data.winForm;
+          winForm.map((item) => {
+            if (item.field_key == 'name') {
+              item.field_value = data.lottery_user_name || '';
+              item.error = false;
+            } else if (item.field_key == 'phone') {
+              item.field_value = data.lottery_user_phone || '';
+            } else if (item.field_key == 'address') {
+              item.field_value = data.lottery_user_address || '';
+            }
+          });
+          this.setData({ winForm });
+          this.validateForm();
+        }
+      } catch (err) {
+        console.error('获取用户信息失败:', err);
+      }
+    },
+
+    // 关闭弹框
+    close() {
+      this.setData({ showSuccess: false });
+      this.triggerEvent('close');
+    },
+
+    // 查看中奖名单
+    viewWinnersList() {
+      this.setData({ showSuccess: false });
+      this.triggerEvent('viewWinners');
+    },
+  },
+});

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

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

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

@@ -0,0 +1,49 @@
+<view wx:if="{{visible}}" class="lottery-accept-modal">
+    <view class="lottery-accept-mask" bindtap="close"></view>
+    <view class="lottery-accept-content">
+        <view class="lottery-accept-title">领奖信息</view>
+        <!-- 表单领奖 -->
+        <view wx:if="{{acceptType === 1}}" class="form-wrap">
+            <view class="form">
+                <view wx:for="{{winForm}}" wx:key="index" class="form-item">
+                    <view class="form-item__input {{item.is_required ? 'required' : ''}}">
+                        <input class="form-input" value="{{item.field_value}}" type="text" maxlength="{{item.maxLength}}" placeholder="{{item.placeholder}}" data-index="{{index}}" bindinput="onFormInput" />
+                    </view>
+                </view>
+            </view>
+            <button class="vmp-lottery-btn {{verified ? '' : 'disabled'}}" bindtap="submit">
+                提交
+            </button>
+        </view>
+        <!-- 客服领奖 -->
+        <view wx:if="{{acceptType === 2}}" class="customer-service-container">
+            <view wx:if="{{customerServiceInfo.private_number}}" class="wechat">
+                {{customerServiceInfo.private_number}}
+            </view>
+            <image wx:if="{{customerServiceInfo.private_qrcode}}" src="{{customerServiceInfo.private_qrcode}}" class="qrcode" mode="aspectFit" />
+            <view wx:if="{{customerServiceInfo.tip_note}}" class="tip">
+                {{customerServiceInfo.tip_note}}
+            </view>
+            <button wx:if="{{publishWinner == 1}}" class="lottery-success-btn" bindtap="viewWinnersList">
+                查看中奖名单
+            </button>
+        </view>
+    </view>
+
+    <!-- 提交成功弹框 -->
+    <view wx:if="{{showSuccess}}" class="lottery-success-modal">
+        <view class="lottery-success-mask" bindtap="close"></view>
+        <view class="lottery-success-content">
+            <view class="lottery-success-close" bindtap="close">
+                <icon type="cancel" size="24" color="#999" />
+            </view>
+            <view class="lottery-success-icon">
+                <view class="success-check"></view>
+            </view>
+            <text class="lottery-success-title">信息提交成功</text>
+            <button wx:if="{{publishWinner == 1}}" class="lottery-success-btn" bindtap="viewWinnersList">
+                查看中奖名单
+            </button>
+        </view>
+    </view>
+</view>

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

@@ -0,0 +1 @@
+.lottery-accept-modal{bottom:0;display:flex;flex-direction:column;justify-content:flex-end;left:0;position:fixed;right:0;top:0;z-index:1000}.lottery-accept-mask{background:rgba(0,0,0,.5);bottom:0;left:0;position:absolute;right:0;top:0}.lottery-accept-content{background:linear-gradient(37.94deg,#fffbe8 3.86%,#fbf0e6 84.36%);border-radius:32rpx 32rpx 0 0;max-height:85vh;overflow-y:auto;padding:0 40rpx 80rpx;position:relative}.lottery-accept-title{color:#333;font-size:1.36rem;font-weight:600;line-height:4.29rem;text-align:center}.customer-service-container{align-items:center;display:flex;flex-direction:column}.customer-service-container .wechat{color:#333;font-size:1.14rem;line-height:1.71rem;text-align:center;word-break:break-all}.customer-service-container .qrcode{height:400rpx;margin-top:40rpx;width:400rpx}.customer-service-container .tip{color:#999;font-size:1rem;line-height:1.43rem;margin-top:30rpx;text-align:center}.form-item{align-items:center;background:#f8f8f8;border-radius:16rpx;display:flex;height:100rpx;margin-bottom:24rpx;overflow:hidden;position:relative}.form-item__input{flex:1;padding-left:80rpx;position:relative}.form-item__input.required:before{color:#ff4d4f;content:"*";display:inline-block;font-size:1.14rem;height:20rpx;left:30rpx;position:absolute;top:50%;transform:translateY(-50%);width:20rpx}.form-input{background:transparent;color:#333;font-size:1.14rem;height:100%;line-height:3.57rem;outline:0;vertical-align:middle}.form-input,.vmp-lottery-btn{box-sizing:border-box;width:100%}.vmp-lottery-btn{align-items:center;background:#fb2626;border:none;border-radius:60rpx;color:#fff;display:flex;font-size:1.29rem;font-weight:700;height:96rpx;justify-content:center;margin:60rpx auto 0}.vmp-lottery-btn.disabled{opacity:.4;pointer-events:none}.lottery-success-modal{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:2000}.lottery-success-mask{background:rgba(0,0,0,.5);bottom:0;left:0;position:absolute;right:0;top:0}.lottery-success-content{align-items:center;background:linear-gradient(37.94deg,#fffbe8 3.86%,#fbf0e6 84.36%);border-radius:32rpx;display:flex;flex-direction:column;padding:80rpx 40rpx;position:relative;width:600rpx}.lottery-success-close{height:48rpx;position:absolute;right:30rpx;top:30rpx;width:48rpx}.lottery-success-close,.lottery-success-icon{align-items:center;display:flex;justify-content:center}.lottery-success-icon{background:linear-gradient(135deg,gold,#ffb700);border-radius:50%;box-shadow:0 8rpx 32rpx rgba(255,183,0,.4);height:160rpx;margin-bottom:40rpx;width:160rpx}.lottery-success-icon .success-check{border-bottom:6rpx solid #fff;border-left:6rpx solid #fff;height:40rpx;margin-top:-20rpx;transform:rotate(-45deg);width:80rpx}.lottery-success-title{color:#333;font-size:1.29rem;font-weight:600;margin-bottom:60rpx}.lottery-success-btn{align-items:center;background:#fb2626;border:none;border-radius:60rpx;color:#fff;display:flex;font-size:1.14rem;font-weight:700;height:88rpx;justify-content:center;width:400rpx}

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

@@ -0,0 +1,36 @@
+Component({
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false,
+    },
+    winLotteryHistory: {
+      type: Array,
+      value: [],
+    },
+  },
+
+  data: {
+    defaultLotteryImg: 'https://cnstatic01.e.vhall.com/upload/webinars/spread-imgs/default-lottery.png',
+  },
+
+  methods: {
+    takeAward(e) {
+      const { index } = e.currentTarget.dataset;
+      const lottery = this.properties.winLotteryHistory[index];
+      lottery.lottery_id=lottery.id;
+      this.triggerEvent('takeAward', lottery);
+    },
+
+    onItemClick(e) {
+      const { index } = e.currentTarget.dataset;
+      const lottery = this.properties.winLotteryHistory[index];
+      lottery.lottery_id = lottery.id;
+      this.triggerEvent('itemClick', lottery);
+    },
+
+    close() {
+      this.triggerEvent('close');
+    },
+  },
+});

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

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

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

@@ -0,0 +1,28 @@
+<view wx:if="{{visible}}" class="lottery-history-modal">
+    <view class="lottery-history-mask" bindtap="close"></view>
+    <view class="lottery-history-content">
+        <view class="lottery-history-title">中奖记录</view>
+        <view class="lottery-wrap-container">
+            <scroll-view class="lottery-wrap" scroll-y>
+                <view wx:for="{{winLotteryHistory}}" wx:key="index" class="win-lottery" bindtap="onItemClick" data-index="{{index}}">
+                    <view class="lottery-item">
+                        <image class="lottery-item__img" src="{{(item.award_snapshoot && item.award_snapshoot.image_url) || defaultLotteryImg}}" mode="aspectFill" />
+                        <view class="lottery-item__content">
+                            <p class="award-name">{{item.award_snapshoot.award_name}}</p>
+                            <p class="award-time">{{item.created_at}}</p>
+                        </view>
+                        <view class="lottery-item__status">
+                            <text wx:if="{{item.take_award == 1}}" class="status-text">已领取</text>
+                            <text wx:elif="{{item.need_take_award == 0}}" class="status-text">
+                                已中奖
+                            </text>
+                            <button wx:else class="take-award-btn" bindtap="takeAward" data-index="{{index}}">
+                                领取
+                            </button>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+        </view>
+    </view>
+</view>

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

@@ -0,0 +1 @@
+.lottery-history-modal{bottom:0;display:flex;flex-direction:column;justify-content:flex-end;left:0;position:fixed;right:0;top:0;z-index:1000}.lottery-history-mask{background:rgba(0,0,0,.5);bottom:0;left:0;position:absolute;right:0;top:0}.lottery-history-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}.lottery-history-title{border-bottom:2rpx solid #f0f0f0;color:#333;font-size:1.36rem;font-weight:600;height:100rpx;line-height:3.57rem;text-align:center}.lottery-wrap-container{padding-right:4rpx}.lottery-wrap{max-height:432rpx;min-height:128rpx}.win-lottery{margin-bottom:24rpx}.lottery-item{align-items:center;background:#fff;border-radius:24rpx;display:flex;flex-direction:row;height:144rpx;padding:28rpx 32rpx}.lottery-item__img{border:2rpx solid #d9d9d9;border-radius:24rpx;flex-shrink:0;height:160rpx;width:160rpx}.lottery-item__content{display:flex;flex:1;flex-direction:column;height:100%;justify-content:center;margin-left:30rpx}.award-name{color:#262626;font-size:1.14rem;font-weight:500;height:48rpx;line-height:1.71rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.award-time{color:#8c8c8c;font-size:.86rem;height:36rpx;line-height:1.29rem;margin-top:8rpx}.take-award-btn{align-items:center;background:linear-gradient(135deg,#ff4d4f,#ff7875);border:none;border-radius:32rpx;color:#fff;display:flex;font-size:1rem;font-weight:500;height:64rpx;justify-content:center;padding:0 40rpx;width:auto!important}.status-text{color:#bfbfbf;font-size:1rem}