xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/Lottery/components/LotteryFAB/index.js

@@ -0,0 +1,99 @@
+import countdownInstance, {Countdown} from '../../countdown'
+import remotePic from '../../remotePic'
+import {connect} from '../../store/index'
+import {LOTTERY_STATUS} from '../../constants'
+import {isWinPrize} from '../../../common/api/lottery'
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+/**
+ * 抽奖悬浮按钮
+ */
+const mapState = state => ({
+  visible: state.lotteryFabVisible,
+  lotteryInfo: state.lotteryInfo,
+  lotteryStatus: state.lotteryStatus
+})
+Component(
+  connect(mapState)({
+    behaviors: [computedBehavior],
+    data: {
+      countdown: {},
+      remotePic
+    },
+    computed: {
+      isLotteryInfoReady(data) {
+        return Object.keys(data.lotteryInfo).length > 0
+      },
+      isLotteryEnd(data) {
+        return data.lotteryStatus === LOTTERY_STATUS.ORIGIN
+      }
+    },
+    observers: {
+      lotteryStatus(val) {
+        if (val === LOTTERY_STATUS.ORIGIN) {
+          clearTimeout(this.delayHiddenTimer)
+          this.delayHiddenTimer = setTimeout(() => {
+            this.store.dispatch({type: 'hide_lottery_fab'})
+          }, 60 * 1000)
+        }
+        if (val === LOTTERY_STATUS.WAITING) {
+          clearTimeout(this.delayHiddenTimer)
+        }
+      }
+    },
+    lifetimes: {
+      attached() {
+        this.onCountdown()
+      },
+      detached() {
+      }
+    },
+    methods: {
+      showLotteryDetail() {
+        if (this.data.lotteryStatus === LOTTERY_STATUS.WAITING) {
+          this.store.dispatch({type: 'show_lottery_info'})
+        }
+        if (this.data.lotteryStatus === LOTTERY_STATUS.ORIGIN) {
+          this.showLotteryResult()
+        }
+      },
+      showLotteryResult() {
+        const prizeId = this.data.lotteryInfo.current_prize_id
+        const params = {prize_id: prizeId}
+        isWinPrize(params)
+          .then(({data}) => {
+            if (data.code === 0) {
+              this.store.dispatch({type: 'set_lottery_result_info', payload: data.data})
+              if (this.data.lotteryInfo.is_join) {
+                this.store.dispatch({type: 'show_lottery_result'})
+              } else if (data.data.prize_activity_num) {
+                this.store.dispatch({type: 'set_winners_back_to', payload: ''})
+                this.store.dispatch({type: 'set_current_prize_id', payload: prizeId})
+                this.store.dispatch({type: 'set_my_lottery_content', payload: 'winners'})
+                this.store.dispatch({type: 'show_my_lottery'})
+              } else {
+                this.store.dispatch({type: 'show_nobody_attend'})
+              }
+            }
+          })
+          .catch(err => {
+            console.error(err)
+          })
+      },
+      onCountdown() {
+        const fix2 = x => `${x < 10 ? `0${x}` : x}`
+        countdownInstance.onTick(countdown => {
+          const {h, m, s} = Countdown.parseCountdown(countdown)
+          this.setData({
+            countdown: {
+              hours: fix2(h),
+              minutes: fix2(m),
+              seconds: fix2(s)
+            }
+          })
+        })
+      }
+    }
+  })
+)

package/miniprogram_dist/Lottery/components/LotteryFAB/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-button": "@vant/weapp/button/index"
+  }
+}

package/miniprogram_dist/Lottery/components/LotteryFAB/index.less

@@ -0,0 +1,36 @@
+.lottery-fab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 72rpx;
+  margin: 0 32rpx 32rpx 0;
+  z-index: 10;
+  .icon-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: 50%;
+    .icon {
+      width: 64rpx;
+      height: 64rpx;
+    }
+  }
+  .countdown-box {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: -16rpx;
+    padding: 0 8rpx;
+    min-width: 64rpx;
+    height: 24rpx;
+    border-radius: 16rpx;
+    background: rgba(0,0,0,0.4);
+    color: #fff;
+    font-size: 16rpx;
+    font-weight: 500;
+  }
+}

package/miniprogram_dist/Lottery/components/LotteryFAB/index.wxml

@@ -0,0 +1,17 @@
+<view wx:if="{{isLotteryInfoReady && visible}}" class="lottery-fab" bind:tap="showLotteryDetail">
+  <view class="icon-box">
+    <image class="icon" src="{{remotePic.prize_icon_new_land}}" />
+  </view>
+  <view class="countdown-box">
+    <text wx:if="{{isLotteryEnd}}">已开奖</text>
+    <block wx:else>
+      <block wx:if="{{countdown.hours !== '00'}}">
+        <text>{{ countdown.hours || '00' }}</text>
+        <text>:</text>
+      </block>
+      <text>{{ countdown.minutes || "00" }}</text>
+      <text>:</text>
+      <text>{{ countdown.seconds || "00" }}</text>
+    </block>
+  </view>
+</view>

package/miniprogram_dist/Lottery/components/LotteryFAB/index.wxss

@@ -0,0 +1,36 @@
+.lottery-fab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 72rpx;
+  margin: 0 32rpx 32rpx 0;
+  z-index: 10;
+}
+.lottery-fab .icon-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+}
+.lottery-fab .icon-box .icon {
+  width: 64rpx;
+  height: 64rpx;
+}
+.lottery-fab .countdown-box {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: -16rpx;
+  padding: 0 8rpx;
+  min-width: 64rpx;
+  height: 24rpx;
+  border-radius: 16rpx;
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  font-size: 16rpx;
+  font-weight: 500;
+}

package/miniprogram_dist/Lottery/components/LotteryInfo/Indicator/index.js

@@ -0,0 +1,34 @@
+Component({
+  properties: {
+    num: {
+      type: Number,
+      default: 0
+    },
+    selection: {
+      type: Number,
+      default: 0
+    }
+  },
+  data: {
+    dots: []
+  },
+  computed: {
+  },
+  observers: {
+    num(val) {
+      this.setData({
+        dots: Array(val)
+          .fill()
+          .map((item, index) => index)
+      });
+    }
+  },
+  lifetimes: {
+    attached() {
+    },
+    detached() {
+    }
+  },
+  methods: {
+  }
+})

package/miniprogram_dist/Lottery/components/LotteryInfo/Indicator/index.json

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

package/miniprogram_dist/Lottery/components/LotteryInfo/Indicator/index.less

@@ -0,0 +1,17 @@
+.indicator {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  .dot {
+    width: 16rpx;
+    height: 8rpx;
+    border-radius: 4rpx;
+    background: #ff9747;
+    margin: 0 6rpx;
+    transition: background-color 0.2s;
+    &.selected {
+      width: 24rpx;
+      background: #ffd25a;
+    }
+  }
+}

package/miniprogram_dist/Lottery/components/LotteryInfo/Indicator/index.wxml

@@ -0,0 +1,3 @@
+<view class="indicator">
+  <view class="dot {{selection === dot ? 'selected' : ''}}" wx:for="{{dots}}" wx:for-item="dot" wx:key="{{dot}}"></view>
+</view>

package/miniprogram_dist/Lottery/components/LotteryInfo/Indicator/index.wxss

@@ -0,0 +1,17 @@
+.indicator {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.indicator .dot {
+  width: 16rpx;
+  height: 8rpx;
+  border-radius: 4rpx;
+  background: #ff9747;
+  margin: 0 6rpx;
+  transition: background-color 0.2s;
+}
+.indicator .dot.selected {
+  width: 24rpx;
+  background: #ffd25a;
+}

package/miniprogram_dist/Lottery/components/LotteryInfo/LotteryCountdown/index.js

@@ -0,0 +1,37 @@
+import countdownInstance, {Countdown} from '../../../countdown'
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+Component({
+  behaviors: [computedBehavior],
+  properties: {
+  },
+  data: {
+    countdown: {}
+  },
+  computed: {},
+  observers: {
+  },
+  lifetimes: {
+    attached() {
+      this.onCountdown()
+    },
+    detached() {
+    }
+  },
+  methods: {
+    onCountdown() {
+      const fix2 = x => `${x < 10 ? `0${x}` : x}`
+      countdownInstance.onTick(countdown => {
+        const {h, m, s} = Countdown.parseCountdown(countdown)
+        this.setData({
+          countdown: {
+            hours: fix2(h),
+            minutes: fix2(m),
+            seconds: fix2(s)
+          }
+        })
+      })
+    }
+  }
+})

package/miniprogram_dist/Lottery/components/LotteryInfo/LotteryCountdown/index.json

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

package/miniprogram_dist/Lottery/components/LotteryInfo/LotteryCountdown/index.less

@@ -0,0 +1,17 @@
+.lottery-countdown {
+  display: flex;
+  .time-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    margin: 0 10rpx;
+    width: 48rpx;
+    height: 48rpx;
+    border-radius: 8rpx;
+    background: #fff;
+    color: #ff5024;
+    font-size: 32rpx;
+    font-weight: 500;
+  }
+}

package/miniprogram_dist/Lottery/components/LotteryInfo/LotteryCountdown/index.wxml

@@ -0,0 +1,9 @@
+<view class="lottery-countdown">
+  <block wx:if="{{countdown.hours !== '00'}}">
+    <view class="time-item">{{ countdown.hours || '00' }}</view>
+    <text>:</text>
+  </block>
+  <view class="time-item">{{ countdown.minutes || "00" }}</view>
+  <text>:</text>
+  <view class="time-item">{{ countdown.seconds || "00" }}</view>
+</view>

package/miniprogram_dist/Lottery/components/LotteryInfo/LotteryCountdown/index.wxss

@@ -0,0 +1,17 @@
+.lottery-countdown {
+  display: flex;
+}
+.lottery-countdown .time-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0 10rpx;
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 8rpx;
+  background: #fff;
+  color: #ff5024;
+  font-size: 32rpx;
+  font-weight: 500;
+}

package/miniprogram_dist/Lottery/components/LotteryInfo/index.js

@@ -0,0 +1,159 @@
+/* eslint-disable no-undef */
+import {connect} from '../../store/index'
+import {fetchPrizeCardInfo, joinCommentLottery} from '../../../common/api/lottery'
+import {PARTICIPATION_CONDITION} from '../../constants'
+import remotePic from '../../remotePic'
+import eventBus from '../../eventBus'
+import {participateLottery} from '../../store/effect'
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+const mapState = state => ({
+  visible: state.lotteryInfoVisible,
+  baseInfo: state.baseInfo,
+  lotteryInfo: state.lotteryInfo
+})
+Component(
+  connect(mapState)({
+    behaviors: [computedBehavior],
+    properties: {},
+    data: {
+      remotePic,
+      prizeInfo: {},
+      selectedIndex: 0,
+      isShowParticipant: 0 //0 不展示，1 展示
+    },
+    computed: {
+      countdownLabel(data) {
+        return `${
+          data.prizeInfo.prize_activity_num ? `${data.prizeInfo.prize_activity_num}人已参与` : '暂无人参与'
+        }`
+      },
+      joinPrompt(data) {
+        const joinBtnMap = {
+          [PARTICIPATION_CONDITION.ONLINE]: '观看直播参与抽奖',
+          [PARTICIPATION_CONDITION.ANY_COMMENT]: '评论任意内容参与抽奖',
+          [PARTICIPATION_CONDITION.SPECIFY_COMMENT]: `评论#${data.prizeInfo.prize_content}#参与抽奖`,
+          [PARTICIPATION_CONDITION.SHARE]: '分享直播间参与抽奖'
+        }
+        return joinBtnMap[data.prizeInfo.prize_condition] || ''
+      },
+      joinBtnText(data) {
+        if (data.prizeInfo.count_down <= 0) {
+          return '已结束'
+        }
+        if (data.lotteryInfo.is_join) {
+          return '已参与抽奖'
+        }
+        return '参与抽奖'
+      },
+      joinBtnDisabled(data) {
+        return data.lotteryInfo.is_join || data.prizeInfo.count_down <= 0
+      },
+      isShareButton(data) {
+        return data.prizeInfo.prize_condition === PARTICIPATION_CONDITION.SHARE
+      },
+      isLotteryEnd(data) {
+        return data.prizeInfo.count_down <= 0
+      },
+      indicatorDotsVisible(data) {
+        return data.prizeInfo.prize_product_list && data.prizeInfo.prize_product_list.length > 1
+      },
+      swiperMargin() {
+        // 缩放以兼容不同机型（主要是iphone5/6/7/8 & plus）
+        const {screenWidth, screenHeight} = wx.getSystemInfoSync()
+        if (screenWidth === 414 && screenHeight === 736) {
+          return 280
+        }
+        if (screenWidth >= 320 && screenWidth <= 375 && screenHeight <= 736) {
+          return 296
+        }
+        return 160
+      }
+    },
+    observers: {
+      visible(val) {
+        if (val) {
+          this.setData({selectedIndex: 0})
+          this.fetchPrizeInfo()
+        }
+      }
+    },
+    lifetimes: {
+      attached() {},
+      detached() {}
+    },
+    methods: {
+      onVisibleChange({detail: visible}) {
+        this.store.dispatch({
+          type: visible ? 'show_lottery_info' : 'hide_lottery_info'
+        })
+      },
+      onSwiperChange({detail}) {
+        this.setData({selectedIndex: detail.current})
+      },
+      checkWinners() {
+        this.store.dispatch({type: 'hide_lottery_info'})
+        this.store.dispatch({type: 'set_my_lottery_content', payload: 'winners'})
+        this.store.dispatch({type: 'set_winners_back_to', payload: 'lottery_info'})
+        this.store.dispatch({type: 'set_current_prize_id', payload: this.data.lotteryInfo.current_prize_id})
+        this.store.dispatch({type: 'show_my_lottery'})
+      },
+      fetchPrizeInfo() {
+        const params = {
+          prize_id: this.data.lotteryInfo.current_prize_id,
+          alive_id: this.data.baseInfo.alive_id
+        }
+        fetchPrizeCardInfo(params)
+          .then(({data}) => {
+            if (data.code === 0) {
+              const prizeInfo = data.data || {}
+              this.setData({prizeInfo})
+              this.setData({isShowParticipant: prizeInfo.is_show_participant})
+              this.store.dispatch({type: 'set_participation_condition', payload: prizeInfo.prize_condition})
+              this.store.dispatch({type: 'is_show_participant', payload: prizeInfo.is_show_participant})
+            }
+          })
+          .catch(err => {
+            console.error(err)
+          })
+      },
+      onJoinLottery() {
+        const prizeCondition = this.data.prizeInfo.prize_condition
+
+        if ([PARTICIPATION_CONDITION.ANY_COMMENT, PARTICIPATION_CONDITION.SPECIFY_COMMENT].includes(prizeCondition)) {
+          // 记录点击按钮状态，作为参与评论抽奖的前置条件（必须满足条件: 1.点击了按钮 2.发送评论）
+          const params = {
+            app_id: this.data.baseInfo.app_id, // 店铺id
+            alive_id: this.data.baseInfo.alive_id,
+            user_id: this.data.baseInfo.user_id,
+            prize_id: this.data.prizeInfo.prize_id,
+            type: 1
+          }
+          joinCommentLottery(params)
+            .then(({data}) => {
+              if (data.code !== 0) {
+                return Promise.reject(data);
+              }
+            })
+            .catch(err => {
+              console.error(err)
+            });
+
+            this.store.dispatch({type: 'set_is_ready_to_comment', payload: true})
+            this.store.dispatch({type: 'hide_lottery_info'})
+            if (prizeCondition === PARTICIPATION_CONDITION.SPECIFY_COMMENT) {
+              eventBus.emit('input_change', this.data.lotteryInfo.prize_param.ext.content)
+            }
+            eventBus.emit('input_focus')
+          return
+        }
+
+        if (prizeCondition === PARTICIPATION_CONDITION.SHARE) {
+          this.store.dispatch({type: 'hide_lottery_info'})
+        }
+        this.store.dispatch(participateLottery())
+      }
+    }
+  })
+)

package/miniprogram_dist/Lottery/components/LotteryInfo/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-button": "@vant/weapp/button/index",
+    "lottery-countdown": "./LotteryCountdown/index",
+    "indicator": "./Indicator/index",
+    "common-popup": "../CommonPopup/index",
+    "prize-card": "../PrizeCard/index"
+  }
+}

package/miniprogram_dist/Lottery/components/LotteryInfo/index.less

@@ -0,0 +1,99 @@
+.lottery-info {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  height: 100%;
+  padding-top: 108rpx;
+  .title {
+    width: 530rpx;
+    height: 128rpx;
+  }
+  .countdown-box {
+    display: flex;
+    align-items: center;
+    color: #fff;
+    font-weight: 500;
+    font-size: 28rpx;
+    .label {
+      margin-right: 10rpx;
+    }
+  }
+  .check-winners {
+    color: #fff;
+    font-weight: 500;
+    font-size: 28rpx;
+    display: inline-flex;
+    align-items: center;
+    .inner {
+      display: inline-flex;
+      align-items: center;
+      .right-arrow-icon {
+        width: 36rpx;
+        height: 36rpx;
+      }
+    }
+  }
+  .prize-box {
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .swiper-box {
+      box-sizing: border-box;
+      width: 100%;
+      height: 472rpx;
+      // 缩放以兼容不同机型（主要是iphone5/6/7/8/plus）
+      @media only screen and (min-width: 376px) and (max-width : 414px) and (max-height : 736px) {
+        zoom: 0.75;
+      }
+      @media only screen and (min-width: 321px) and (max-width: 375px) and (max-height: 667px) {
+        zoom: 0.7;
+      }
+      @media only screen and (max-width: 320px) and (max-height: 568px) {
+        zoom: 0.65;
+      }
+      .swiper-item-box {
+        overflow: unset !important; // 防止box-shadow展示不全
+      }
+      .prize-card-box {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: transform 200ms;
+        transform: scale(0.8);
+        &.swell {
+          transform: scale(1);
+        }
+      }
+    }
+  }
+  .join {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding-bottom: 20rpx;
+    .prompt {
+      padding-bottom: 20rpx;
+      height: 36rpx;
+      color: #fff;
+      font-size: 26rpx;
+      opacity: 0.8;
+    }
+    .join-btn {
+      box-sizing: border-box;
+      width: 480rpx;
+      height: 80rpx;
+      border: none;
+      background: #ffeb66;
+      box-shadow: 0 6px 8px 0 rgb(233 27 22 / 30%);
+      color: #ff3c38;
+      font-weight: 500;
+      font-size: 32rpx;
+    }
+  }
+}