vhall-mini-sdk 0.4.0 → 0.4.3

package/dist/components/mall-reward/f-count-down/index.js

@@ -0,0 +1,61 @@
+import { formatSeconds2Time } from '../../../shared/utils';
+Component({
+  properties: {
+    info: {
+      type: Object,
+      value: {},
+    },
+    onlineDuration: {
+      type: Number,
+      value: 0,
+    },
+    tipMode: {
+      type: Number,
+      value: 1,
+    },
+  },
+  data: {
+    second: undefined,
+    _ttl: '--:--',
+    _title: '',
+  },
+
+  observers: {
+    info: function (info) {
+      this.setData({
+        _title: info?.tip_setting?.title || info?.title || '',
+      });
+    },
+    'info, onlineDuration': function (info, onlineDuration) {
+      // console.log('info, onlineDuration', onlineDuration);
+      if (info?.viewing_minutes > 0 && !isNaN(onlineDuration)) {
+        this.setData({
+          second: Math.max(info.viewing_minutes * 60 - onlineDuration, 0),
+        });
+      }
+    },
+    second: function (ss) {
+      const text = this.calcTtl(ss);
+      this.setData({
+        _ttl: text,
+      });
+    },
+  },
+  methods: {
+    calcTtl(ss) {
+      // 无当前活动红包信息，但显示小图标，说明参与过有记录
+      if (!this.properties.info) return '已领取';
+
+      // 当前活动红包信息是无条件红包
+      if (this.properties.info.viewing_minutes == 0) return '领福利';
+
+      // 当前活动红包信息是时长红包
+      if (this.properties.info.viewing_minutes > 0 && !isNaN(ss)) {
+        if (ss <= 0) return '领福利';
+
+        return formatSeconds2Time(ss);
+      }
+      return '--:--';
+    },
+  },
+});

package/dist/components/mall-reward/f-count-down/index.json

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

package/dist/components/mall-reward/f-count-down/index.wxml

@@ -0,0 +1,9 @@
+<view class="mall-reward-countdown mode-{{tipMode}}">
+  <!-- 自定义内容 -->
+  <view class="custom-content">
+    <view class="main-title">{{_title}}</view>
+    <!-- 倒计时 -->
+    <view class="countdown-box">{{_ttl}} 后可领取</view>
+  </view>
+</view>
+

package/dist/components/mall-reward/f-count-down/index.wxss

@@ -0,0 +1 @@
+.mall-reward-countdown{background-color:initial;background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_1.png);background-repeat:no-repeat;background-size:contain;height:750rpx;position:relative;width:750rpx}.mall-reward-countdown .custom-content{bottom:0;left:0;position:absolute;right:0;top:0;z-index:9}.mall-reward-countdown .main-title{align-items:center;color:#fff9e6;display:flex;font-size:1.93rem;font-weight:600;height:128rpx;justify-content:center;line-height:2.29rem;margin:0 160rpx;overflow:hidden;position:relative;text-align:center}.mall-reward-countdown .countdown-box{align-items:center;background:rgba(0,0,0,.25);border-radius:88rpx;color:rgba(255,249,230,.8);display:flex;justify-content:center;left:50%;overflow:hidden;padding:16rpx 44rpx;position:absolute;transform:translateX(-50%);z-index:10}.mall-reward-countdown.mode-1{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_1.png)}.mall-reward-countdown.mode-2{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_2.png)}.mall-reward-countdown.mode-3{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_3.png)}.mall-reward-countdown.mode-1 .main-title{top:380rpx}.mall-reward-countdown.mode-1 .countdown-box{top:560rpx}.mall-reward-countdown.mode-2 .main-title{top:380rpx}.mall-reward-countdown.mode-2 .countdown-box{top:550rpx}.mall-reward-countdown.mode-3 .main-title{color:#fb2626;top:270rpx}.mall-reward-countdown.mode-3 .countdown-box{top:560rpx}

package/dist/components/mall-reward/f-empty/index.js

@@ -0,0 +1,11 @@
+Component({
+  methods: {
+    // 点击"我知道了"
+    handleClick() {
+      this.triggerEvent('close', this.properties.info, {
+        bubbles: true,
+        composed: true,
+      });
+    },
+  },
+});

package/dist/components/mall-reward/f-empty/index.json

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

package/dist/components/mall-reward/f-empty/index.wxml

@@ -0,0 +1,8 @@
+<view class="mall-reward-empty">
+  <!-- 自定义内容 -->
+  <view class="custom-content">
+    <view class="main-title">很遗憾，您未领取到奖励</view>
+    <!-- 按钮 -->
+    <button class="weui-btn btn-main" bindtap="handleClick">知道了</button>
+  </view>
+</view>

package/dist/components/mall-reward/f-empty/index.wxss

@@ -0,0 +1 @@
+.mall-reward-empty{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_empty_bg.png);background-repeat:no-repeat;background-size:contain;border-radius:20rpx;height:524rpx;position:relative;width:640rpx}.mall-reward-empty .custom-content{bottom:0;left:0;position:absolute;right:0;top:0;z-index:8}.mall-reward-empty .main-title{color:#262626;font-size:1.14rem;font-weight:600px;line-height:1.57rem;margin:0 55rpx;position:relative;text-align:center;top:80rpx}.mall-reward-empty .btn-main{background:linear-gradient(#fff7ec,#fdd8ac);border:3rpx solid #fdd8ac;border-radius:44px;color:#fb2626;font-size:1.14rem;height:80rpx;position:relative;top:340rpx;width:320rpx;z-index:10}

package/dist/components/mall-reward/f-history/index.js

@@ -0,0 +1,84 @@
+import { debounce } from '../../../shared/utils';
+
+Component({
+  properties: {
+    onlineDuration: {
+      type: Number,
+      value: 0,
+    },
+    dataList: {
+      type: Array,
+      value: [],
+    },
+  },
+
+  data: {
+    _list: [],
+  },
+
+  observers: {
+    'dataList, onlineDuration': function (dataList, onlineDuration) {
+      if (!dataList || !dataList.length) {
+        this.setData({ _list: [] });
+        return;
+      }
+      const list = dataList.map((item) => ({
+        ...item,
+        _desc: this.buildDesc(item, Number(onlineDuration) || 0),
+      }));
+      this.setData({ _list: list });
+    },
+  },
+
+  methods: {
+    formatTime(ms) {
+      if (typeof ms !== 'number' || isNaN(ms)) return '';
+      if (ms < 0) return '00:00';
+      const totalSeconds = Math.floor(ms / 1000);
+      const hours = Math.floor(totalSeconds / 3600);
+      const minutes = Math.floor((totalSeconds % 3600) / 60);
+      const seconds = totalSeconds % 60;
+      const pad = (n) => String(n).padStart(2, '0');
+      if (hours > 0) {
+        return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+      }
+      return `${pad(minutes)}:${pad(seconds)}`;
+    },
+
+    buildDesc(item, onlineDuration) {
+      const viewingMinutes = Number(item.viewing_minutes) || 0;
+      if (viewingMinutes === 0) {
+        return `推送时间：${item.push_time || ''}`;
+      }
+      if (item.claim_status == 1 || (item.status !== 2 && onlineDuration >= viewingMinutes * 60)) {
+        return `已达标，您已观看${this.formatTime(viewingMinutes * 60 * 1000)}`;
+      } else if (item.status !== 2 && item.remaining_quota > 0) {
+        const remain = Math.max(0, viewingMinutes * 60 - onlineDuration);
+        return `继续观看 ${this.formatTime(remain * 1000)} 可领取`;
+      }
+      return '';
+    },
+
+    handleClaim: debounce(function (e) {
+      const item = this.data._list[e.currentTarget.dataset.index];
+      if (!item) return;
+      this.triggerEvent('claim', item, {
+        bubbles: true,
+        composed: true,
+      });
+    }, 300),
+
+    handleToWatch() {
+      this.triggerEvent('close', this.properties.info, {
+        bubbles: true,
+        composed: true,
+      });
+    },
+    onClose() {
+      this.triggerEvent('close', this.properties.info, {
+        bubbles: true,
+        composed: true,
+      });
+    },
+  },
+});

package/dist/components/mall-reward/f-history/index.json

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

package/dist/components/mall-reward/f-history/index.wxml

@@ -0,0 +1,38 @@
+<!-- 半屏面板 -->
+<view class="mall-reward-history">
+  <view class="mall-reward-history-head">
+    <text class="main-title">直播福利</text>
+    <view class="head-close" bindtap="onClose">✕</view>
+  </view>
+  <scroll-view class="mall-reward-history-body" scroll-y enhanced show-scrollbar="{{false}}">
+    <view class="data-list" wx:if="{{_list.length > 0}}">
+      <view wx:for="{{_list}}" wx:key="id" class="data-list-item">
+        <view class="data-list-item__bd">
+          <view class="item-title">{{ item.title }}</view>
+          <view class="item-description">{{item._desc}}</view>
+        </view>
+        <view class="data-list-item__ft">
+          <!-- 已领取 -->
+          <view wx:if="{{item.claim_status == 1}}" class="status-box status-box--claimed">已领取</view>
+          <view wx:elif="{{item.status == 2 && item.claim_status == 0}}" class="status-box">
+            已结束
+          </view>
+          <view wx:elif="{{item.claim_status == 0 && item.remaining_quota === 0}}" class="status-box">
+            已领光
+          </view>
+          <button wx:elif="{{item.claim_status == 0 && item.remaining_quota > 0 && ((item.viewing_minutes > 0 && onlineDuration >= item.viewing_minutes * 60) || item.viewing_minutes == 0)}}" class="weui-btn btn-reward" type="primary" size="mini" data-index="{{index}}" bindtap="handleClaim">
+            我要领取
+          </button>
+          <button wx:elif="{{item.claim_status == 0 && item.remaining_quota > 0 && item.viewing_minutes > 0 && onlineDuration < item.viewing_minutes * 60}}" class="weui-btn btn-reward" type="primary" size="mini" bindtap="handleToWatch">
+            去观看
+          </button>
+        </view>
+      </view>
+    </view>
+    <!-- 空态 -->
+    <view class="empty-data" wx:else>
+      <image class="empty-img" src="https://cnstatic01.e.vhall.com/common-static/images/mp/sofa.png" mode="aspectFit" />
+      <view class="empty-text">暂无福利记录</view>
+    </view>
+  </scroll-view>
+</view>

package/dist/components/mall-reward/f-history/index.wxss

@@ -0,0 +1 @@
+.mall-reward-history{background:linear-gradient(#ffebd9,#fcf1e7);border-top-left-radius:24rpx;border-top-right-radius:24rpx;box-sizing:border-box;display:flex;flex-direction:column;height:736rpx}.mall-reward-history .mall-reward-history-head{box-sizing:border-box;padding:22rpx 0;position:relative;text-align:center}.mall-reward-history .mall-reward-history-head .main-title{font-size:1.14rem;font-weight:700}.mall-reward-history .mall-reward-history-head .head-close{align-items:center;border-radius:50%;color:#999;display:flex;font-size:1.14rem;height:48rpx;justify-content:center;position:absolute;right:32rpx;top:50%;transform:translateY(-50%);width:48rpx}.mall-reward-history .mall-reward-history-body{box-sizing:border-box;height:650rpx;padding:0 24rpx}.mall-reward-history .mall-reward-history-body .data-list{background-color:#fff;border-top-left-radius:24rpx;border-top-right-radius:24rpx;box-sizing:border-box;min-height:100%;width:100%}.mall-reward-history .mall-reward-history-body .data-list-item{align-items:center;border-bottom:1px solid #fcf1e7;box-sizing:border-box;display:flex;padding:24rpx 32rpx;width:100%}.mall-reward-history .mall-reward-history-body .data-list-item__bd{box-sizing:border-box;flex:1;overflow:hidden;text-align:left}.mall-reward-history .mall-reward-history-body .data-list-item__bd .item-title{color:#262626;font-size:1.07rem;font-weight:500;line-height:1.5rem;margin-bottom:4rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:462rpx}.mall-reward-history .mall-reward-history-body .data-list-item__bd .item-description{color:#8c8c8c;font-size:.86rem;line-height:1.14rem}.mall-reward-history .mall-reward-history-body .data-list-item__ft{box-sizing:border-box}.mall-reward-history .mall-reward-history-body .data-list-item__ft .status-box{align-items:center;background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/seal_bg.png);background-size:100% 100%;color:rgba(0,0,0,.25);display:flex;font-size:.71rem;height:100rpx;justify-content:center;margin-right:20rpx;transform:rotate(25deg);width:100rpx}.mall-reward-history .mall-reward-history-body .data-list-item__ft .status-box--claimed{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/received_icon.png);color:#55d483}.mall-reward-history .mall-reward-history-body .data-list-item__ft .btn-reward{font-size:1rem}

package/dist/components/mall-reward/f-open/index.js

@@ -0,0 +1,36 @@
+Component({
+  properties: {
+    info: { type: Object, value: null },
+    tipMode: { type: Number, value: 1 },
+    isBubble: { type: Boolean, value: false }, //气泡模式
+  },
+
+  data: {
+    _title: '',
+    _desc: '',
+  },
+
+  observers: {
+    info: function (info) {
+      this.setData({
+        _title: info?.tip_setting?.title || info?.title || '',
+        _desc: info?.tip_setting?.description || '',
+      });
+    },
+  },
+
+  methods: {
+    onClaimNow() {
+      this.triggerEvent('claim', this.properties.info, {
+        bubbles: true,
+        composed: true,
+      });
+    },
+    onClose() {
+      this.triggerEvent('close', this.properties.info, {
+        bubbles: true,
+        composed: true,
+      });
+    },
+  },
+});

package/dist/components/mall-reward/f-open/index.json

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

package/dist/components/mall-reward/f-open/index.wxml

@@ -0,0 +1,10 @@
+<view class="mall-reward-open {{ isBubble?'is-bubble':'is-full' }} mode-{{tipMode}}">
+  <!-- 自定义内容 -->
+  <view class="custom-content">
+    <view class="main-title">{{_title}}</view>
+    <button class="weui-btn btn-main" bindtap="onClaimNow">立即领取</button>
+    <view class="tip-description" wx:if="{{!isBubble}}">{{_desc}}</view>
+    <!-- 气泡模式才有的关闭按钮 -->
+    <view wx:if="{{isBubble}}" class="close-btn-for-bubble" bindtap="onClose">✕</view>
+  </view>
+</view>

package/dist/components/mall-reward/f-open/index.wxss

@@ -0,0 +1 @@
+.mall-reward-open{background-color:initial;background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_1.png);background-repeat:no-repeat;background-size:contain;position:relative}.mall-reward-open .custom-content{bottom:0;left:0;position:absolute;right:0;top:0;z-index:9}.mall-reward-open .main-title{align-items:center;color:#fff9e6;display:flex;font-weight:600;justify-content:center;overflow:hidden;position:relative;text-align:center}.mall-reward-open.mode-1{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_1.png)}.mall-reward-open.mode-2{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_2.png)}.mall-reward-open.mode-3{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_3.png)}.mall-reward-open.is-full{height:750rpx;width:750rpx}.mall-reward-open.is-full .main-title{font-size:1.93rem;height:128rpx;line-height:2.29rem;margin:0 160rpx}.mall-reward-open.is-full .btn-main{background:linear-gradient(#fff7ec,#fdd8ac);border-radius:44px;color:#fb2626;height:80rpx;left:50%;position:absolute;transform:translateX(-50%);width:320rpx;z-index:10}.mall-reward-open.is-full .tip-description{align-items:center;color:rgba(255,249,230,.8);display:flex;font-size:.79rem;height:60rpx;justify-content:center;left:50%;line-height:1.07rem;overflow:hidden;position:absolute;transform:translateX(-50%);width:380rpx}.mall-reward-open.is-full.mode-1 .main-title{top:380rpx}.mall-reward-open.is-full.mode-1 .btn-main{top:550rpx}.mall-reward-open.is-full.mode-1 .tip-description{top:640rpx}.mall-reward-open.is-full.mode-2 .main-title{top:380rpx}.mall-reward-open.is-full.mode-2 .btn-main{top:540rpx}.mall-reward-open.is-full.mode-2 .tip-description{top:630rpx}.mall-reward-open.is-full.mode-3 .main-title{color:#fb2626;top:270rpx}.mall-reward-open.is-full.mode-3 .btn-main{top:540rpx}.mall-reward-open.is-full.mode-3 .tip-description{top:624rpx}.mall-reward-open.is-bubble{height:368rpx;margin-bottom:150rpx;width:368rpx}.mall-reward-open.is-bubble .close-btn-for-bubble{align-items:center;background-color:rgba(0,0,0,.25);border-radius:50%;box-shadow:0 2rpx 8rpx rgba(0,0,0,.15);color:#fff;display:flex;flex-direction:column;font-size:1.14rem;height:48rpx;justify-content:center;position:absolute;right:24rpx;top:12rpx;width:48rpx}.mall-reward-open.is-bubble .main-title{font-size:1.14rem;height:80rpx;line-height:1.43rem;margin:0 100rpx}.mall-reward-open.is-bubble .btn-main{background:linear-gradient(#fff7ec,#fdd8ac);border:1px solid #fdd8ac;border-radius:44px;color:#fb2626;font-size:14px;left:50%;padding:4rpx 22rpx;position:absolute;transform:translateX(-50%);width:auto;z-index:10}.mall-reward-open.is-bubble.mode-1 .main-title{top:180rpx}.mall-reward-open.is-bubble.mode-1 .btn-main{bottom:40rpx;top:auto}.mall-reward-open.is-bubble.mode-2 .main-title{top:180rpx}.mall-reward-open.is-bubble.mode-2 .btn-main{bottom:50rpx;top:auto}.mall-reward-open.is-bubble.mode-3 .main-title{color:#fb2626;top:120rpx}.mall-reward-open.is-bubble.mode-3 .btn-main{bottom:40rpx;top:auto}

package/dist/components/mall-reward/f-receive/index.js

@@ -0,0 +1,36 @@
+Component({
+  properties: {
+    info: {
+      type: Object,
+      value: {},
+    },
+    tipMode: {
+      type: Number,
+      value: 1,
+    },
+  },
+
+  data: {
+    _title: '',
+    _desc: '',
+  },
+
+  observers: {
+    info: function (info) {
+      console.log('info123', info);
+      this.setData({
+        _title: info?.tip_setting?.title || info?.title || '',
+        _desc: info?.tip_setting?.description || '',
+      });
+    },
+  },
+
+  methods: {
+    onRecive() {
+      this.triggerEvent('close', this.properties.info, {
+        bubbles: true,
+        composed: true,
+      });
+    },
+  },
+});

package/dist/components/mall-reward/f-receive/index.json

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

package/dist/components/mall-reward/f-receive/index.wxml

@@ -0,0 +1,9 @@
+<view class="mall-reward-receive mode-{{tipMode}}">
+  <view class="colorful-title"></view>
+  <!-- 自定义内容 -->
+  <view class="custom-content">
+    <view class="main-title">{{_title}}</view>
+    <button class="weui-btn btn-main" bindtap="onRecive">开心收下</button>
+    <view class="tip-description">{{_desc}}</view>
+  </view>
+</view>

package/dist/components/mall-reward/f-receive/index.wxss

@@ -0,0 +1 @@
+.mall-reward-receive{background-color:initial;background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_1.png);background-repeat:no-repeat;background-size:contain;height:750rpx;position:relative;width:750rpx}.mall-reward-receive .colorful-title{background-color:initial;background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/colorful_title.png);background-repeat:no-repeat;background-size:100% 100%;height:56rpx;left:50%;margin-left:-180rpx;position:absolute;top:24rpx;width:380rpx}.mall-reward-receive .custom-content{bottom:0;left:0;position:absolute;right:0;top:0;z-index:9}.mall-reward-receive .main-title{align-items:center;color:#fff9e6;display:flex;font-size:1.93rem;font-weight:600;height:128rpx;justify-content:center;line-height:2.29rem;margin:0 160rpx;overflow:hidden;position:relative;text-align:center}.mall-reward-receive .btn-main{background:linear-gradient(#fff7ec,#fdd8ac);border-radius:44px;color:#fb2626;height:80rpx;left:50%;position:absolute;transform:translateX(-50%);width:320rpx;z-index:10}.mall-reward-receive .tip-description{align-items:center;color:rgba(255,249,230,.8);display:flex;font-size:.79rem;height:60rpx;justify-content:center;left:50%;line-height:1.07rem;overflow:hidden;position:absolute;transform:translateX(-50%);width:380rpx}.mall-reward-receive.mode-1{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_1.png)}.mall-reward-receive.mode-2{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_2.png)}.mall-reward-receive.mode-3{background-image:url(https://cnstatic01.e.vhall.com/common-static/images/mp/mr_bg_3.png)}.mall-reward-receive.mode-1 .main-title{top:380rpx}.mall-reward-receive.mode-1 .btn-main{top:560rpx}.mall-reward-receive.mode-1 .tip-description{top:640rpx}.mall-reward-receive.mode-1 .colorful-title{top:24rpx}.mall-reward-receive.mode-2 .main-title{top:370rpx}.mall-reward-receive.mode-2 .btn-main{top:550rpx}.mall-reward-receive.mode-2 .tip-description{top:630rpx}.mall-reward-receive.mode-3 .colorful-title{top:0}.mall-reward-receive.mode-3 .main-title{color:#fb2626;top:260rpx}.mall-reward-receive.mode-3 .btn-main{top:550rpx}.mall-reward-receive.mode-3 .tip-description{top:630rpx}