xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

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

@@ -0,0 +1,144 @@
+/* eslint-disable promise/catch-or-return */
+/* eslint-disable camelcase */
+import {getInfoCollectionData} from 'mp-plugins-info-collection'
+import {sensorLog} from 'live-mp-tools'
+import {LOTTERY_STATUS, PRIZE_TYPE, PARTICIPATION_CONDITION} from '../../../constants'
+import remotePic from '../../../remotePic'
+import {connect} from '../../../store/index'
+import eventBus from '../../../eventBus'
+import {getLotteryPrize} from '../../../store/effect'
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+const mapState = state => ({
+  baseInfo: state.baseInfo,
+  lotteryStatus: state.lotteryStatus,
+  participationCondition: state.participationCondition,
+  isShowParticipant: state.isShowParticipant
+})
+Component(
+  connect(mapState)({
+    behaviors: [computedBehavior],
+    properties: {
+      resultInfo: {
+        type: Object,
+        value: {}
+      }
+    },
+    data: {
+      hasReceived: false,
+      remotePic
+    },
+    computed: {
+      isCustomPrize(data) {
+        const winProductInfo = data.resultInfo.win_product_info
+        if (!winProductInfo) {
+          return false
+        }
+        return winProductInfo.prize_type === PRIZE_TYPE.CUSTOM
+      }
+    },
+    observers: {
+      lotteryStatus(val) {
+        if (val === LOTTERY_STATUS.WAITING) {
+          this.setData({hasReceived: false})
+        }
+      }
+    },
+    lifetimes: {
+      attached() {}
+    },
+    methods: {
+      onReceivePrize() {
+        this.clickReportData('立即领取')
+        this.store.dispatch({type: 'hide_lottery_result'})
+        if (this.data.isPrizeReceived) {
+          if (this.data.isCustomPrize) {
+            this.showContactPopup()
+          }
+        } else {
+          const {resource_id, resource_type, prize_type} = this.data.resultInfo.win_product_info
+          getInfoCollectionData(resource_id, resource_type, {
+            isAliveDraw: true,
+            resource_class: prize_type === PRIZE_TYPE.PROMO_CODE ? '105' : '',
+            operationBtn: '提交并领取奖品',
+            content: this,
+            next: this.getPrize
+          })
+            .then(({isNeedInfoCollection}) => {
+              if (isNeedInfoCollection) {
+                eventBus.emit(
+                  'dialog_confirm',
+                  {
+                    title: '领取奖品',
+                    message: '为了给您提供更优质的服务，请先填写报名信息',
+                    confirmButtonText: '去填写',
+                    cancelButtonText: '我再想想'
+                  },
+                  () => {
+                    eventBus.emit('collect_info')
+                  }
+                )
+              } else {
+                this.getPrize()
+              }
+            })
+            .catch(err => {
+              console.error(err)
+              this.getPrize()
+            })
+        }
+      },
+      getPrize() {
+        this.store
+          .dispatch(getLotteryPrize(this.data.resultInfo.win_product_info))
+          .then(() => {
+            this.setData({hasReceived: true})
+            this.store.dispatch({type: 'hide_lottery_result'})
+          })
+          .finally(() => {
+            this.store.dispatch({type: 'hide_my_lottery'})
+          })
+      },
+      checkWinners() {
+        this.clickReportData('中奖名单')
+        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: 'win_lottery'})
+        this.store.dispatch({type: 'set_current_prize_id', payload: this.data.resultInfo.win_product_info.prize_id})
+        this.store.dispatch({type: 'show_my_lottery'})
+      },
+      showContactPopup() {
+        this.store.dispatch({
+          type: 'set_merchant_contact_info',
+          payload: this.data.resultInfo.win_product_info.prize_value.contact_information
+        })
+        this.store.dispatch({type: 'show_merchant_contact_info'})
+      },
+      clickReportData(pageButton) {
+        const drawWayMap = {
+          [PARTICIPATION_CONDITION.ONLINE]: '在线',
+          [PARTICIPATION_CONDITION.ANY_COMMENT]: '任意评论',
+          [PARTICIPATION_CONDITION.SPECIFY_COMMENT]: '指定评论',
+          [PARTICIPATION_CONDITION.SHARE]: '分享直播间'
+        }
+        const drawWay = drawWayMap[this.data.participationCondition] || ''
+        const data = {
+          page_id: 'e_alive#mini#first#alive_room',
+          page_name: this.data.baseInfo.title,
+          page_module: '直播间当前页',
+          l_program: '鹅直播',
+          current_role: this.data.baseInfo.user_type === 0 ? 'C端用户' : '讲师',
+          type: this.data.baseInfo.alive_mode === 0 ? '横屏' : '竖屏',
+          h_live_state: this.data.baseInfo.alive_state,
+          page_button: pageButton, // '立即领取' | '中奖名单'
+          draw_way: drawWay, // '在线' | '任意评论' | '指定评论' | '分享直播间'
+          c_user_id: this.data.baseInfo.user_id,
+          app_id: this.data.baseInfo.app_id
+        }
+        sensorLog.sensors.track('click_butt', data)
+        console.log('reportData:', data)
+      }
+    }
+  })
+)

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

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

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

@@ -0,0 +1,68 @@
+.win-lottery {
+  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;
+  }
+  .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-card-box {
+    display: flex;
+    align-items: center;
+    height: 424rpx;
+    // 缩放以兼容不同机型（主要是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;
+    }
+  }
+  .join {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding-bottom: 20rpx;
+    .prompt {
+      margin-bottom: 20rpx;
+      height: 32rpx;
+      color: #fff;
+      font-size: 24rpx;
+    }
+    .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;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+<view class="win-lottery">
+  <image class="title" src="{{remotePic.winner_background_new_title}}" />
+  <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>查看中奖名单</text>
+        <image class="right-arrow-icon" src="../../../../common/assets/images/lottery/white_right_arrow.png" />
+      </view>
+    </block>
+    <text wx:else>本次抽奖无人中奖</text>
+  </view>
+  <view class="prize-card-box">
+    <prize-card prize="{{resultInfo.win_product_info}}"></prize-card>
+  </view>
+  <view class="join">
+    <view class="prompt">可在“更多-我的抽奖”查看奖品</view>
+    <van-button custom-class="join-btn" type="info" round disabled="{{hasReceived}}" bind:click="onReceivePrize">
+      <block wx:if="{{hasReceived}}">已领取</block>
+      <block wx:else>立即领取</block>
+    </van-button>
+  </view>
+</view>

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

@@ -0,0 +1,73 @@
+.win-lottery {
+  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;
+}
+.win-lottery .title {
+  width: 530rpx;
+  height: 128rpx;
+}
+.win-lottery .check-winners {
+  color: #fff;
+  font-weight: 500;
+  font-size: 28rpx;
+  display: inline-flex;
+  align-items: center;
+}
+.win-lottery .check-winners .inner {
+  display: inline-flex;
+  align-items: center;
+}
+.win-lottery .check-winners .inner .right-arrow-icon {
+  width: 36rpx;
+  height: 36rpx;
+}
+.win-lottery .prize-card-box {
+  display: flex;
+  align-items: center;
+  height: 424rpx;
+}
+@media only screen and (min-width: 376px) and (max-width: 414px) and (max-height: 736px) {
+  .win-lottery .prize-card-box {
+    zoom: 0.75;
+  }
+}
+@media only screen and (min-width: 321px) and (max-width: 375px) and (max-height: 667px) {
+  .win-lottery .prize-card-box {
+    zoom: 0.7;
+  }
+}
+@media only screen and (max-width: 320px) and (max-height: 568px) {
+  .win-lottery .prize-card-box {
+    zoom: 0.65;
+  }
+}
+.win-lottery .join {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-bottom: 20rpx;
+}
+.win-lottery .join .prompt {
+  margin-bottom: 20rpx;
+  height: 32rpx;
+  color: #fff;
+  font-size: 24rpx;
+}
+.win-lottery .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/LotteryResult/index.js

@@ -0,0 +1,56 @@
+import {sensorLog} from 'live-mp-tools'
+import {connect} from '../../store/index'
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+const mapState = state => ({
+  visible: state.lotteryResultVisible,
+  lotteryInfo: state.lotteryInfo,
+  resultInfo: state.lotteryResultInfo,
+  baseInfo: state.baseInfo
+})
+Component(
+  connect(mapState)({
+    behaviors: [computedBehavior],
+    computed: {
+      isResultInfoReady(data) {
+        return Object.keys(data.resultInfo).length > 0
+      },
+      isWin(data) {
+        return data.resultInfo.is_win
+      }
+    },
+    // observers: {
+    //   visible(val) {
+    //     if (val && this.data.isWin) {
+    //       this.reportData()
+    //     }
+    //   }
+    // },
+    lifetimes: {
+      attached() {}
+    },
+    methods: {
+      onVisibleChange({detail: visible}) {
+        this.store.dispatch({
+          type: visible ? 'show_lottery_result' : 'hide_lottery_result'
+        })
+      },
+      // reportData() {
+      //   const data = {
+      //     page_id: 'e_alive#mini#first#alive_room',
+      //     page_name: this.data.baseInfo.title,
+      //     page_module: '中奖页面',
+      //     l_program: '鹅直播',
+      //     current_role: this.data.baseInfo.user_type === 0 ? 'C端用户' : '讲师',
+      //     type: this.data.baseInfo.alive_mode === 0 ? '横屏' : '竖屏',
+      //     h_live_state: this.data.baseInfo.alive_state,
+      //     c_user_id: this.data.baseInfo.user_id,
+      //     app_id: this.data.baseInfo.app_id
+      //   }
+      //   sensorLog.sensors.track('view_page', data)
+      //   console.log('reportData:', data)
+      // }
+    }
+  })
+)

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

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-button": "@vant/weapp/button/index",
+    "common-popup": "../CommonPopup/index",
+    "win-lottery": "./WinLottery/index",
+    "losing-lottery": "./LosingLottery/index"
+  }
+}

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

@@ -0,0 +1,10 @@
+<common-popup
+  wx:if="{{isResultInfoReady}}"
+  type="{{isWin ? 'red' : 'white'}}"
+  isOverlayTransparent="{{true}}"
+  visible="{{visible}}"
+  bind:visibleChange="onVisibleChange"
+>
+  <win-lottery wx:if="{{isWin}}" resultInfo="{{resultInfo}}"></win-lottery>
+  <losing-lottery wx:else resultInfo="{{resultInfo}}"></losing-lottery>
+</common-popup>

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

@@ -0,0 +1,40 @@
+import {connect} from '../../store/index'
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+/**
+ * 自定义奖品兑奖弹窗
+ */
+const mapState = state => ({
+  visible: state.merchantContactInfoVisible,
+  contactInfo: state.merchantContactInfo
+})
+Component(
+  connect(mapState)({
+    behaviors: [computedBehavior],
+    data: {},
+    computed: {
+      hasWxNumber(data) {
+        return String(data.contactInfo.is_wx_number) === '1'
+      },
+      hasQrcode(data) {
+        return String(data.contactInfo.is_qrcode) === '1'
+      }
+    },
+    methods: {
+      onVisibleChange({detail: visible}) {
+        this.store.dispatch({
+          type: visible ? 'show_merchant_contact_info' : 'hide_merchant_contact_info'
+        })
+      },
+      copyWechatNumber() {
+        wx.setClipboardData({
+          data: this.data.contactInfo.wx_number,
+          success: () => {
+            this.store.dispatch({type: 'hide_merchant_contact_info'})
+          }
+        })
+      }
+    }
+  })
+)

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

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

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

@@ -0,0 +1,61 @@
+.merchant-contact-info {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 0 32rpx 24rpx 32rpx;
+  .title {
+    padding: 36rpx 0;
+    color: #333;
+    text-align: center;
+    font-weight: 500;
+    font-size: 36rpx;
+    line-height: 32rpx;
+  }
+  .prompt {
+    margin-bottom: 20rpx;
+    color: #999;
+    text-align: center;
+    font-size: 24rpx;
+  }
+  .qrcode-box {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    box-sizing: border-box;
+    margin-bottom: 30rpx;
+    .qrcode {
+      width: 400rpx;
+    }
+    .qrcode-prompt {
+      margin-top: 20rpx;
+      color: #aaa;
+      font-size: 24rpx;
+    }
+    &.swell {
+      padding: 40rpx 0;
+      .qrcode {
+        width: 500rpx;
+      }
+    }
+  }
+  .wechat-number-box {
+    box-sizing: border-box;
+    margin-bottom: 30rpx;
+    padding: 24rpx 36rpx;
+    width: 100%;
+    border-radius: 20rpx;
+    background: #f5f6f9;
+    line-height: 40rpx;
+    .desc {
+      color: #999;
+      font-size: 22rpx;
+    }
+    .num {
+      font-size: 24rpx;
+    }
+  }
+  .copy-btn {
+    width: 400rpx;
+    height: 76rpx;
+  }
+}

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

@@ -0,0 +1,19 @@
+<common-popup visible="{{visible}}" type="basic" bind:visibleChange="onVisibleChange">
+  <view class="merchant-contact-info">
+    <text class="title">奖品领取方式</text>
+    <text class="prompt">请通过以下方式联系兑奖</text>
+    <view wx:if="{{hasQrcode}}" class="qrcode-box {{hasWxNumber ? '' : 'swell'}}">
+      <image class="qrcode" mode="widthFix" src="{{contactInfo.qrcode}}" show-menu-by-longpress />
+      <text class="qrcode-prompt">长按识别二维码，或保存图片</text>
+    </view>
+    <block wx:if="{{hasWxNumber}}">
+      <view class="wechat-number-box">
+        <view class="desc">微信号</view>
+        <view class="num">{{contactInfo.wx_number}}</view>
+      </view>
+      <van-button round type="info" custom-class="copy-btn" bind:tap="copyWechatNumber">
+        复制微信号
+      </van-button>
+    </block>
+  </view>
+</common-popup>

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

@@ -0,0 +1,61 @@
+.merchant-contact-info {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 0 32rpx 24rpx 32rpx;
+}
+.merchant-contact-info .title {
+  padding: 36rpx 0;
+  color: #333;
+  text-align: center;
+  font-weight: 500;
+  font-size: 36rpx;
+  line-height: 32rpx;
+}
+.merchant-contact-info .prompt {
+  margin-bottom: 20rpx;
+  color: #999;
+  text-align: center;
+  font-size: 24rpx;
+}
+.merchant-contact-info .qrcode-box {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  box-sizing: border-box;
+  margin-bottom: 30rpx;
+}
+.merchant-contact-info .qrcode-box .qrcode {
+  width: 400rpx;
+}
+.merchant-contact-info .qrcode-box .qrcode-prompt {
+  margin-top: 20rpx;
+  color: #aaa;
+  font-size: 24rpx;
+}
+.merchant-contact-info .qrcode-box.swell {
+  padding: 40rpx 0;
+}
+.merchant-contact-info .qrcode-box.swell .qrcode {
+  width: 500rpx;
+}
+.merchant-contact-info .wechat-number-box {
+  box-sizing: border-box;
+  margin-bottom: 30rpx;
+  padding: 24rpx 36rpx;
+  width: 100%;
+  border-radius: 20rpx;
+  background: #f5f6f9;
+  line-height: 40rpx;
+}
+.merchant-contact-info .wechat-number-box .desc {
+  color: #999;
+  font-size: 22rpx;
+}
+.merchant-contact-info .wechat-number-box .num {
+  font-size: 24rpx;
+}
+.merchant-contact-info .copy-btn {
+  width: 400rpx;
+  height: 76rpx;
+}

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

@@ -0,0 +1,52 @@
+import remotePic from '../../remotePic'
+import {connect} from '../../store/index'
+import {MY_LOTTERY_CONTENT_TYPE} from '../../constants'
+
+const computedBehavior = require('miniprogram-computed').behavior
+
+const mapState = state => ({
+  visible: state.myLotteryVisible,
+  content: state.myLotteryContent
+})
+Component(
+  connect(mapState)({
+    options: {},
+    behaviors: [computedBehavior],
+    properties: {},
+    data: {
+      remotePic
+    },
+    computed: {
+      isRewardListContent(data) {
+        return data.content === MY_LOTTERY_CONTENT_TYPE.REWARD_LIST
+      },
+      isJoinRecordsContent(data) {
+        return data.content === MY_LOTTERY_CONTENT_TYPE.JOIN_RECORDS
+      },
+      isWinnersContent(data) {
+        return data.content === MY_LOTTERY_CONTENT_TYPE.WINNERS
+      },
+      isAddressContent(data) {
+        return data.content === MY_LOTTERY_CONTENT_TYPE.ADDRESS_COLLECTION
+      }
+    },
+    observers: {},
+    lifetimes: {
+      attached() {}
+    },
+    methods: {
+      onVisibleChange({detail: visible}) {
+        if (visible) {
+          this.store.dispatch({type: 'show_my_lottery'})
+        } else {
+          this.store.dispatch({type: 'hide_my_lottery'})
+          // 先等弹窗收起再清空内容
+          const POPUP_SLIDE_DURATION = 300
+          setTimeout(() => {
+            this.store.dispatch({type: 'set_my_lottery_content', payload: ''})
+          }, POPUP_SLIDE_DURATION)
+        }
+      }
+    }
+  })
+)

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

@@ -0,0 +1,11 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-button": "@vant/weapp/button/index",
+    "common-popup": "../CommonPopup/index",
+    "reward-list": "../RewardList/index",
+    "join-records": "../JoinRecords/index",
+    "winners": "../Winners/index",
+    "address-collection": "../AddressCollection/index"
+  }
+}

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

@@ -0,0 +1,12 @@
+<common-popup
+  visible="{{visible}}"
+  type="{{isAddressContent ? 'basic' : 'orange'}}"
+  customCls="{{isAddressContent ? 'address-collection-popup' : ''}}"
+  isOverlayTransparent="{{true}}"
+  bind:visibleChange="onVisibleChange"
+>
+  <reward-list wx:if="{{isRewardListContent}}"></reward-list>
+  <join-records wx:elif="{{isJoinRecordsContent}}"></join-records>
+  <winners wx:elif="{{isWinnersContent}}"></winners>
+  <address-collection wx:elif="{{isAddressContent}}"></address-collection>
+</common-popup>