xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

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

@@ -0,0 +1,50 @@
+<common-popup type="red" isOverlayTransparent="{{true}}" visible="{{visible}}" bind:visibleChange="onVisibleChange">
+  <view class="lottery-info">
+    <image class="title" src="{{remotePic.draw_background_new_title}}" />
+    <view wx:if="{{isLotteryEnd}}" class="check-winners">
+      <block wx:if="{{prizeInfo.prize_activity_num}}">
+        <text>共{{prizeInfo.prize_activity_num}}人参与，</text>
+        <view class="inner" bind:tap="checkWinners">
+          <text>查看中奖名单</text>
+          <image class="right-arrow-icon" src="../../../common/assets/images/lottery/white_right_arrow.png" />
+        </view>
+      </block>
+      <text wx:else>本次抽奖无人中奖</text>
+    </view>
+    <view wx:else class="countdown-box">
+      <text class="label" wx:if="{{isShowParticipant}}">{{countdownLabel}}，</text><text class="label">开奖倒计时</text>
+      <lottery-countdown></lottery-countdown>
+    </view>
+    <view class="prize-box">
+      <swiper
+        class="swiper-box"
+        current="{{selectedIndex}}"
+        duration="{{200}}"
+        indicator-dots="{{false}}"
+        previous-margin="{{swiperMargin}}rpx"
+        next-margin="{{swiperMargin}}rpx"
+        bind:change="onSwiperChange"
+      >
+        <swiper-item class="swiper-item-box" wx:for="{{prizeInfo.prize_product_list}}" wx:key="prize_product_id" wx:for-item="prize" wx:for-index="index">
+          <view class="prize-card-box {{index === selectedIndex ? 'swell' : ''}}">
+            <prize-card prize="{{prize}}"></prize-card>
+          </view>
+        </swiper-item>
+      </swiper>
+      <indicator wx:if="{{indicatorDotsVisible}}" num="{{prizeInfo.prize_product_list.length}}" selection="{{selectedIndex}}"></indicator>
+    </view>
+    <view class="join">
+      <view class="prompt">{{joinPrompt}}</view>
+      <van-button
+        custom-class="join-btn"
+        type="info"
+        round
+        disabled="{{joinBtnDisabled}}"
+        open-type="{{isShareButton ? 'share' : ''}}"
+        bind:click="onJoinLottery"
+      >
+        {{joinBtnText}}
+      </van-button>
+    </view>
+  </view>
+</common-popup>

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

@@ -0,0 +1,104 @@
+.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;
+}
+.lottery-info .title {
+  width: 530rpx;
+  height: 128rpx;
+}
+.lottery-info .countdown-box {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  font-weight: 500;
+  font-size: 28rpx;
+}
+.lottery-info .countdown-box .label {
+  margin-right: 10rpx;
+}
+.lottery-info .check-winners {
+  color: #fff;
+  font-weight: 500;
+  font-size: 28rpx;
+  display: inline-flex;
+  align-items: center;
+}
+.lottery-info .check-winners .inner {
+  display: inline-flex;
+  align-items: center;
+}
+.lottery-info .check-winners .inner .right-arrow-icon {
+  width: 36rpx;
+  height: 36rpx;
+}
+.lottery-info .prize-box {
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.lottery-info .prize-box .swiper-box {
+  box-sizing: border-box;
+  width: 100%;
+  height: 472rpx;
+}
+@media only screen and (min-width: 376px) and (max-width: 414px) and (max-height: 736px) {
+  .lottery-info .prize-box .swiper-box {
+    zoom: 0.75;
+  }
+}
+@media only screen and (min-width: 321px) and (max-width: 375px) and (max-height: 667px) {
+  .lottery-info .prize-box .swiper-box {
+    zoom: 0.7;
+  }
+}
+@media only screen and (max-width: 320px) and (max-height: 568px) {
+  .lottery-info .prize-box .swiper-box {
+    zoom: 0.65;
+  }
+}
+.lottery-info .prize-box .swiper-box .swiper-item-box {
+  overflow: unset !important;
+}
+.lottery-info .prize-box .swiper-box .prize-card-box {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 200ms;
+  transform: scale(0.8);
+}
+.lottery-info .prize-box .swiper-box .prize-card-box.swell {
+  transform: scale(1);
+}
+.lottery-info .join {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-bottom: 20rpx;
+}
+.lottery-info .join .prompt {
+  padding-bottom: 20rpx;
+  height: 36rpx;
+  color: #fff;
+  font-size: 26rpx;
+  opacity: 0.8;
+}
+.lottery-info .join .join-btn {
+  box-sizing: border-box;
+  width: 480rpx;
+  height: 80rpx;
+  border: none;
+  background: #ffeb66;
+  box-shadow: 0 6px 8px 0 rgba(233, 27, 22, 0.3);
+  color: #ff3c38;
+  font-weight: 500;
+  font-size: 32rpx;
+}

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

@@ -0,0 +1,42 @@
+import {connect} from '../../store/index'
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+const TYPE = {
+  START: 'start',
+  WIN: 'win'
+}
+/**
+ * attention: 此组件暂未在业务侧使用
+ */
+Component(
+  connect()({
+    options: {},
+    behaviors: [computedBehavior],
+    properties: {
+      type: {
+        type: String,
+        value: ''
+      },
+      nickname: {
+        type: String,
+        value: ''
+      }
+    },
+    data: {},
+    computed: {
+      isStartType(data) {
+        return data.type === TYPE.START
+      },
+      isWinType(data) {
+        return data.type === TYPE.WIN
+      }
+    },
+    methods: {
+      checkPrize() {
+        this.store.dispatch({type: 'set_my_lottery_content', payload: 'reward_list'})
+        this.store.dispatch({type: 'show_my_lottery'})
+      }
+    }
+  })
+)

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

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

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

@@ -0,0 +1,22 @@
+.lottery-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  color: #999;
+  font-size: 24rpx;
+  .icon {
+    width: 36rpx;
+  }
+  .role {
+    padding: 0 16rpx;
+  }
+  .desc {
+  }
+  .label {
+    padding-left: 16rpx;
+  }
+  .check {
+    color: #ee6723;
+  }
+}

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

@@ -0,0 +1,11 @@
+<view class="lottery-msg">
+  <image class="icon" mode="widthFix" src="../../../common/assets/images/lottery/prize_icon_new_land.png" />
+  <block wx:if="{{isStartType}}">
+    <view class="role">{{nickname}}</view>
+    <text class="desc">发起抽奖</text>
+  </block>
+  <block wx:elif="{{isWinType}}">
+    <text class="label">恭喜你已中奖，</text>
+    <text class="check" bind:tap="checkPrize">查看奖品</text>
+  </block>
+</view>

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

@@ -0,0 +1,20 @@
+.lottery-msg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  color: #999;
+  font-size: 24rpx;
+}
+.lottery-msg .icon {
+  width: 36rpx;
+}
+.lottery-msg .role {
+  padding: 0 16rpx;
+}
+.lottery-msg .label {
+  padding-left: 16rpx;
+}
+.lottery-msg .check {
+  color: #ee6723;
+}

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

@@ -0,0 +1,178 @@
+/* eslint-disable promise/catch-or-return */
+/* eslint-disable no-undef */
+import Dialog from '@vant/weapp/dialog/dialog'
+import {
+  PARTICIPATION_CONDITION, LOTTERY_MSG_TYPE, LOTTERY_STATUS, MSG_EVENT
+} from '../../constants'
+import {connect} from '../../store/index'
+import {
+  fetchLotteryInfo, participateLottery, drawLottery, joinLottery
+} from '../../store/effect'
+import {joinCommentLottery} from '../../../common/api/lottery'
+import eventBus from '../../eventBus'
+import countdownInstance from '../../countdown'
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+const mapState = state => ({
+  lotteryInfo: state.lotteryInfo,
+  lotteryStatus: state.lotteryStatus,
+  isReadyToComment: state.isReadyToComment
+})
+Component(
+  connect(mapState)({
+    behaviors: [computedBehavior],
+    properties: {
+      baseInfo: {
+        type: Object,
+        value: {}
+      }
+    },
+    data: {},
+    computed: {},
+    observers: {
+      lotteryInfo(val) {
+        if (Object.keys(val).length && this.isWaitingStatus()) {
+          countdownInstance.updateTargetDate(val.current_prize_draw_time).start()
+        }
+      }
+    },
+    lifetimes: {
+      attached() {
+        this.onTriggerEvents()
+        this.onDialogEvent()
+        this.onSelfContentMsg()
+        this.onLotteryMsg()
+        this.store.dispatch({type: 'init_state'})
+        this.store.dispatch({
+          type: 'set_base_info',
+          payload: this.data.baseInfo
+        })
+        this.store.dispatch(fetchLotteryInfo())
+      },
+      detached() {
+        countdownInstance.stop()
+        this.store.dispatch({type: 'init_state'})
+      }
+    },
+    methods: {
+      // 抽奖组件内所有 triggerEvent 统一在 popups emit 给外层
+      onTriggerEvents() {
+        eventBus
+          .on('input_focus', () => {
+            this.triggerEvent('inputFocus')
+          })
+          .on('input_blur', () => {
+            this.triggerEvent('inputBlur')
+          })
+          .on('input_change', value => {
+            this.triggerEvent('inputChange', value)
+          })
+          .on('collect_info', () => {
+            this.triggerEvent('collectInfo')
+          })
+      },
+      // 由于小程序 vant dialog 必须绑定组件 this，在 js 文件中调用统一用 eventBus 触发
+      onDialogEvent() {
+        eventBus.on('dialog_confirm', (options, confirm, cancel) => {
+          Dialog.confirm({
+            ...options,
+            context: this
+          })
+            .then(confirm)
+            .catch(cancel)
+        })
+      },
+      // 记录点击按钮状态，作为参与评论抽奖的前置条件（必须满足条件: 1.点击了按钮 2.发送评论）
+      recordLotteryJoin(type) {
+        joinCommentLottery({
+          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.lotteryInfo.current_prize_id,
+          type
+        })
+        .then(res=>{
+          if(res.code !== 0) {
+            return Promise.reject(res);
+          }
+        })
+        .catch(console.error)
+      },
+      onSelfContentMsg() {
+        getApp().globalData.$im.on(MSG_EVENT.GET_CONTENT_MSG, msg => {
+          console.log('dispatch 监听所有content msg: ', msg)
+          if (msg.user_id !== this.data.baseInfo.user_id) return
+          if (this.data.lotteryInfo.is_join) return
+          if (!this.data.isReadyToComment) return
+
+          if (this.isAnyCommentCondition()) {
+            this.store.dispatch(participateLottery())
+            this.recordLotteryJoin(2)
+          } else if (this.isSpecifyCommentCondition()) {
+            if (msg.msg_content === this.data.lotteryInfo.prize_param.ext.content) {
+              this.store.dispatch(participateLottery())
+              this.recordLotteryJoin(2)
+            }
+          }
+        })
+      },
+      onLotteryMsg() {
+        getApp().globalData.$im.on(MSG_EVENT.GET_NEW_PRIZE_MSG, msg => {
+          const msgType = Number(msg.type)
+          switch (msgType) {
+            case LOTTERY_MSG_TYPE.START:
+              console.log('dispatch:发起抽奖IM', msg)
+              if (this.isOriginStatus()) {
+                this.store.dispatch(fetchLotteryInfo()).then(() => {
+                  this.store.dispatch({type: 'hide_merchant_contact_info'})
+                  this.store.dispatch({type: 'hide_lottery_result'})
+                  this.store.dispatch({type: 'hide_nobody_attend'})
+                  this.store.dispatch({type: 'hide_my_lottery'})
+
+                  this.store.dispatch({type: 'show_lottery_info'})
+                })
+              }
+              break
+
+            case LOTTERY_MSG_TYPE.TEACHER_DRAW:
+              console.log('dispatch:讲师开奖IM', msg)
+              break
+
+            case LOTTERY_MSG_TYPE.DRAW:
+              console.log('dispatch:开奖结果IM', msg)
+              // 讲师手动开奖和倒计时结束自动开奖都走这段开奖逻辑
+              // 自动开奖收到 IM7
+              // 手动开奖先后收到 IM6 和 IM7
+              if (this.isWaitingStatus()) {
+                this.store.dispatch(drawLottery(msg.msg_content))
+              }
+              break
+
+            case LOTTERY_MSG_TYPE.JOINED:
+              console.log('dispatch:已参与抽奖IM', msg)
+              if (this.isWaitingStatus()) {
+                this.store.dispatch(joinLottery(msg.msg_content))
+              }
+              break
+
+            default:
+              break
+          }
+        })
+      },
+      isOriginStatus() {
+        return this.data.lotteryStatus === LOTTERY_STATUS.ORIGIN
+      },
+      isWaitingStatus() {
+        return this.data.lotteryStatus === LOTTERY_STATUS.WAITING
+      },
+      isAnyCommentCondition() {
+        return this.data.lotteryInfo.current_prize_condition === PARTICIPATION_CONDITION.ANY_COMMENT
+      },
+      isSpecifyCommentCondition() {
+        return this.data.lotteryInfo.current_prize_condition === PARTICIPATION_CONDITION.SPECIFY_COMMENT
+      }
+    }
+  })
+)

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

@@ -0,0 +1,13 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-button": "@vant/weapp/button/index",
+    "van-dialog": "@vant/weapp/dialog/index",
+    "my-lottery": "../MyLottery/index",
+    "merchant-contact-info": "../MerchantContactInfo/index",
+    "lottery-info": "../LotteryInfo/index",
+    "lottery-result": "../LotteryResult/index",
+    "nobody-attend": "../NobodyAttend/index",
+    "lottery-animation": "../LotteryAnimation/index"
+  }
+}

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

@@ -0,0 +1,7 @@
+<my-lottery></my-lottery>
+<lottery-info></lottery-info>
+<lottery-result></lottery-result>
+<merchant-contact-info></merchant-contact-info>
+<nobody-attend></nobody-attend>
+<lottery-animation></lottery-animation>
+<van-dialog id="van-dialog" />

package/miniprogram_dist/Lottery/components/LotteryResult/LosingLottery/index.js

@@ -0,0 +1,35 @@
+import remotePic from '../../../remotePic'
+import {connect} from '../../../store/index'
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+const mapState = state => ({
+  lotteryInfo: state.lotteryInfo,
+  isShowParticipant: state.isShowParticipant
+})
+Component(
+  connect(mapState)({
+    behaviors: [computedBehavior],
+    properties: {
+      resultInfo: {
+        type: Object,
+        value: {}
+      }
+    },
+    data: {remotePic},
+    computed: {},
+    observers: {},
+    lifetimes: {
+      attached() {}
+    },
+    methods: {
+      checkWinners() {
+        this.store.dispatch({type: 'hide_lottery_result'})
+        this.store.dispatch({type: 'set_my_lottery_content', payload: 'winners'})
+        this.store.dispatch({type: 'set_winners_back_to', payload: 'losing_lottery'})
+        this.store.dispatch({type: 'set_current_prize_id', payload: this.data.lotteryInfo.current_prize_id})
+        this.store.dispatch({type: 'show_my_lottery'})
+      }
+    }
+  })
+)

package/miniprogram_dist/Lottery/components/LotteryResult/LosingLottery/index.json

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

package/miniprogram_dist/Lottery/components/LotteryResult/LosingLottery/index.less

@@ -0,0 +1,48 @@
+.losing-lottery {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  height: 100%;
+  .title-box {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    .title {
+      width: 348rpx;
+      height: 108rpx;
+      margin-bottom: 20rpx;
+    }
+    .thanks {
+      color: #ff6b5c;
+      font-size: 28rpx;
+      font-weight: 500;
+    }
+  }
+  .losing-icon {
+    width: 320rpx;
+    height: 320rpx;
+  }
+  .check-winners {
+    margin-bottom: 8rpx;
+    color: #666;
+    font-weight: 500;
+    font-size: 28rpx;
+    display: inline-flex;
+    align-items: center;
+    .inner {
+      display: inline-flex;
+      align-items: center;
+      .inner-under-line {
+        text-decoration: underline;
+        color: #2d8cf0;
+      }
+      .right-arrow-icon {
+        width: 40rpx;
+        height: 40rpx;
+      }
+    }
+  }
+}

package/miniprogram_dist/Lottery/components/LotteryResult/LosingLottery/index.wxml

@@ -0,0 +1,16 @@
+<view class="losing-lottery">
+  <view class="title-box">
+    <image class="title" src="{{remotePic.is_not_winner_title}}" />
+    <view class="thanks">谢谢参与！祝你下次好运满满</view>
+  </view>
+  <image class="losing-icon" mode="widthFix" src="{{remotePic.losing_lottery}}" />
+  <view class="check-winners">
+    <block wx:if="{{resultInfo.prize_activity_num}}">
+      <text wx:if="{{isShowParticipant}}">共{{resultInfo.prize_activity_num}}人参与，</text>
+      <view class="inner" bind:tap="checkWinners">
+        <text class="inner-under-line">查看中奖名单</text>
+      </view>
+    </block>
+    <text wx:else>本次抽奖无人中奖</text>
+  </view>
+</view>

package/miniprogram_dist/Lottery/components/LotteryResult/LosingLottery/index.wxss

@@ -0,0 +1,48 @@
+.losing-lottery {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  height: 100%;
+}
+.losing-lottery .title-box {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.losing-lottery .title-box .title {
+  width: 348rpx;
+  height: 108rpx;
+  margin-bottom: 20rpx;
+}
+.losing-lottery .title-box .thanks {
+  color: #ff6b5c;
+  font-size: 28rpx;
+  font-weight: 500;
+}
+.losing-lottery .losing-icon {
+  width: 320rpx;
+  height: 320rpx;
+}
+.losing-lottery .check-winners {
+  margin-bottom: 8rpx;
+  color: #666;
+  font-weight: 500;
+  font-size: 28rpx;
+  display: inline-flex;
+  align-items: center;
+}
+.losing-lottery .check-winners .inner {
+  display: inline-flex;
+  align-items: center;
+}
+.losing-lottery .check-winners .inner .inner-under-line {
+  text-decoration: underline;
+  color: #2d8cf0;
+}
+.losing-lottery .check-winners .inner .right-arrow-icon {
+  width: 40rpx;
+  height: 40rpx;
+}