h5-shangjinyaojiang/pages/raffle/raffle.vue

<template>
  <view>
    <view class="bkg">
      <u-image width="100%" height="100vh" :src="require('@/static/home-bkg.jpg')"></u-image>
    </view>

    <view class="content">
      <view class="title">
        <u-image style="display: flex;justify-content: center;" mode="heightFix" width="auto" height="220rpx" :src="require('@/static/title.png')"></u-image>
      </view>

      <view class="notice">
        <u-notice-bar :speed="80" color="#fff" bg-color="transparent" :volume-icon="false" :more-icon="false" :list="notices"></u-notice-bar>
      </view>

      <view class="raffle">
        <view class="raffle-bkg">
          <u-image style="display: flex;justify-content: center;" mode="scaleToFill" width="680rpx" height="924rpx" :src="require('@/static/raffle-phone.png')"></u-image>
        </view>

        <view class="raffle-box">
          <view class="raffle-box__hello">
            尊敬的192用户，您好
          </view>

          <view class="raffle-box__times">
            剩余抽奖次数：<span>{{ usrInfo.score || 0 }}次</span>
          </view>

          <view class="raffle-box__turntable">
            <view v-for="(item,index) in prizeList" class="raffle-box__turntable--item" :style="{ 'grid-area': 'shop'+(index+1) }">
              <view class="item-shop">
                <view class="item-shop__box" :style="{ 'background': index === flag ? '#eb5036' : '' }">
                  <view class="item-shop__box--img">
                    <u-image bg-color="transparent" mode="heightFix" height="84rpx" :src="item.image_file ? item.image_file.url : ''"></u-image>
                  </view>
                  <view class="item-shop__box--text" :style="{ 'color': index === flag ? '#fff' : '' }">{{ item.name }}</view>
                </view>
              </view>
            </view>
            <view class="raffle-box__turntable--item" :style="{ 'grid-area': 'center' }">
              <view class="center-btn" @click="$u.throttle(draw)">
                <view></view>
              </view>
            </view>
          </view>

          <view class="raffle-box__tip">
            仅限中国广电（苏州地区用户）手机号参与活动
          </view>
        </view>
      </view>

      <view class="bottom">
        <u-image mode="widthFix" width="114rpx" :src="require('@/static/activity-rule.png')" @click="popoverType = 1,$refs['popover'].show()"></u-image>
        <u-image style="margin-left: 66rpx;" mode="widthFix" width="114rpx" :src="require('@/static/me-center.png')" @click="toMe"></u-image>
      </view>
    </view>

    <popover :icon="getIcon" height="1128rpx" ref="popover">
      <view slot="box-content">
        <view v-if="popoverType === 1">
          <view class="box-text__title">活动规则</view>
          <view class="box-text__top">
            一、 参与方式及参与对象
          </view>
          <view class="box-text__content">
            本次活动奖品数量有限，仅限中国广电（苏州地区用户）手机号参与活动，输入其他手机号均无效。
          </view>
          <view class="box-text__top">
            二、 活动规则
          </view>
          <view class="box-text__content">
            1. 活动期间，每个号码每日可有三次抽奖机会 2. 分享活动页面可增加一次机会。关注江苏有线苏州分公司公众号或视频号可增加一次机会。下载“视界观”App可增加一次机会。 3. 每个手机号每天最多6次抽奖机会。 4. 实物奖品会在活动结束后3个工作日内，根据您参与活动的中奖号码与您联系并安排派奖，联系未果视为主动放弃奖品。
          </view>
        </view>

        <view v-if="popoverType === 2">
          <view class="box-text__title">谢谢参与</view>
          <u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx','margin-top': '56rpx' }" @click="$refs['popover'].hidden(),draw()">再来一次</u-button>
        </view>

        <view v-if="popoverType === 3">
          <view class="box-text__title">恭喜您获得{{ result.name }}</view>
          <view class="box-text__subtitle">请至个人中心查看</view>
          <view class="box-text__prize">
            <u-image style="display: flex;justify-content: center;" mode="heightFix" :height="300" :src="result.image_file ? result.image_file.url : ''"></u-image>
          </view>
          <view class="box-text__tip">
            型号请以实物为准
          </view>
        </view>

        <view v-if="popoverType === 4">
          <view class="box-text__title">抱歉</view>
          <view class="box-text__subtitle">没有机会了</view>
          <u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx','margin-top': '56rpx' }" @click="$refs['popover'].hidden(),popoverType = 5,$refs['popover'].show()">去做任务</u-button>
        </view>

        <view v-if="popoverType === 5">
          <view class="box-text__title-5">做任务增加抽奖机会</view>
          <view class="box-text__item-5" v-for="(item,index) in
          [
            {
              v: '将活动分享给小伙伴',
              b: '去分享'
            },
            {
              v: '关注江苏有线苏州分公司公众号或视频号',
              b: '去关注'
            },
            {
              v: '下载“视界观”App',
              b: '去下载'
            }
          ]">
            <view>{{ item.v }}</view>
            <u-button :custom-style="{
              background: '#FFD553',
              color: '#fff',
              fontSize: '28rpx',
              width: '166rpx',
              height: '56rpx'
            }" shape="circle" :hair-line="false" :ripple="true" @click="index === 0 ? toShare = true : ''">{{ item.b }}</u-button>
          </view>
        </view>
      </view>

      <view slot="content-bottom" class="content-bottom" v-if="popoverType === 3">
        <view class="content-bottom__title">奖品领取：</view>
        <view class="content-bottom__text">实物奖品会在活动结束后3个工作日内，根据您参与
          活动的中奖号码与您联系并安排派奖，联系未果视
          为主动放奔奖品。苏州地区用户） 手机息参与活动
          礼品兑换成功后，概不退换。到对应地点领取，逾期视为自动放弃。</view>
      </view>
    </popover>

    <transition name="share-pop" enter-active-class="fade-in" leave-to-class="fade-out">
      <view class="share_cover" v-show="toShare" @click="toShare = false">
        <image src="/static/share.png" class="share_cover_arrow"></image>
        <view class="share_cover_word">
          请点击右上角将它发送给指定朋友或分享到朋友圈
        </view>
      </view>
    </transition>
  </view>
</template>

<script>
import popover from "@/component/popover/index.vue";
export default {
  components: {
    popover
  },
  data() {
    return {
      toShare: false,
      popoverType: 1,//1为规则，2为未中奖，3中奖，4没有机会，5做任务
      flag: '',//当前奖品显示
      prizeList: [],
      usrInfo: {},
      notices: [],
      result: {},
    }
  },
  onLoad() {
  },
  methods: {
    toMe() {
      uni.navigateTo({
        url: '/pages/me/index'
      })
    },

    easeOut(t) {
      return 1 - Math.pow(1 - t, 3);
    },
    getRandomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    async fetchRandomNumbers(count) {
      for (let i = 0; i < count; i++) {
        const t = this.easeOut(i / (count - 1));
        const delay = t * 400;
        await new Promise((resolve) => setTimeout(resolve, delay));
        this.flag = this.getRandomNumber(0, this.prizeList.length - 1);
      }
    },

    async getProducts() {
      const res = await this.$u.api.getPrize()
      let len = res.list.length
      let arr = res.list
      if(len < 8) {
        const diff = 8 - len;
        for (let i = 0; i < diff; i++) {
          const randomIndex = Math.floor(Math.random() * len);
          arr.push(arr[randomIndex]);
        }
      } else {
        arr = arr.slice(0, 8);
      }
      this.prizeList = arr
      this.usrInfo = res.user
      this.notices = res.draw_log_day?.filter(i => i.draw_prize?.name !== '谢谢参与')?.map(i => `恭喜${i.mobile.slice(0,3)}****${i.mobile.slice(-4)}获得${i.draw_prize ? i.draw_prize.name : ''}`)
    },
    async draw() {
      try{
        const res = await this.$u.api.draw()
        console.log(111,res)
        let resPrize = this.prizeList.find(i => i.id === res.id)
        this.result = resPrize
        await this.fetchRandomNumbers(25)
        this.flag = this.prizeList.indexOf(resPrize);

        if(resPrize.name === "谢谢参与") {
          this.popoverType = 2
          this.$refs['popover'].show();
        } else {
          this.popoverType = 3
          this.$refs['popover'].show();
        }

        await this.getProducts();
      }catch (err) {
        this.popoverType = 4
        this.$refs['popover'].show();
      }
    }
  },
  computed: {
    getIcon() {
      switch (this.popoverType) {
        case 1: return 'smile';
        case 2: return 'sad';
        case 3: return 'laugh';
        case 4: return 'sad';
        case 5: return 'smile';
      }
    }
  },
  onShow() {
    this.getProducts()
  }
}
</script>

<style lang="scss">
.bkg {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.content {
  min-height: 100vh;

  position: relative;

  & .title {

    margin-top: 5vh;
  }

  & .notice {
    background: rgba(254, 210, 141, 0.6);
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(3,46,63,0.45);
    border-radius: 28rpx;
    color: #fff;
    text-align: center;

    margin: .2vh 140rpx 0 140rpx;
  }

  .raffle {
    width: 680rpx;
    height: 924rpx;

    position: relative;
    margin: 2.4vh auto 0 auto;
    &-bkg {

      z-index: 1;
      position: absolute;
    }
    &-box {
      width: 100%;
      height: 100%;

      z-index: 2;
      position: relative;
      top: 0;

      &__hello {
        text-align: center;
        font-size: 38rpx;
        font-weight: normal;
        color: #FFFFFF;

        padding-top: 100rpx;
      }
      &__times {
        text-align: center;
        font-size: 46rpx;
        font-weight: normal;
        color: #FFFFFF;

        padding-top: 16rpx;

        & > span {
          color: #FCE534;
        }
      }
      &__turntable {
        height: 560rpx;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 12rpx;
        grid-template-areas:
          "shop1 shop2 shop3"
          "shop4 center shop5"
          "shop6 shop7 shop8";

        margin-top: 40rpx;
        padding: 0 70rpx;

        &--item {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .item-shop {
          width: 100%;
          height: 100%;
          background: linear-gradient(to bottom, #fff 88%, #FECDC0);
          border-radius: 22rpx;

          &__box {
            width: calc(100% - 12rpx);
            height: calc(100% - 12rpx);
            border: 1rpx dashed #C5352B;
            border-radius: 22rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            margin: 6rpx;

            &--text {
              font-size: 24rpx;
              font-weight: normal;
              color: #E3473C;

              padding-top: 16rpx;
            }
          }
        }
        & .center-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 166rpx;
          height: 166rpx;
          background: linear-gradient(180deg, #FCE2C9, #FED491);
          box-shadow: 0px 8rpx 18px 0px rgba(155,22,40,0.35);
          border-radius: 50%;

          & > view {
            width: 142rpx;
            height: 142rpx;
            background: linear-gradient(180deg, #FCE2C9, #FED491);
            box-shadow: 0px 4px 9px 0px rgba(155,22,40,0.35);
            border-radius: 50%;

            position: relative;
            &::after {
              width: 80rpx;
              content: "开始抽奖";
              font-size: 40rpx;
              font-weight: normal;
              color: #D8372C;
              text-shadow: 0 2rpx 0 #FCF4CA;

              transform: translate(-50%, -50%);
              position: absolute;
              top: 50%;
              left: 50%;
            }
          }
        }
      }
      &__tip {
        zoom: .9;
        font-size: 22rpx;
        text-align: center;
        color: #F9DAC1;

        position: absolute;
        left: 0;
        right: 0;
        bottom: 46rpx;
      }
    }
  }

  .bottom {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 1.85vh;
  }
}


.box-text {
  &__title {
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;

  }

  &__subtitle {
    font-size: 30rpx;
    font-weight: 400;
    color: #545454;
    text-align: center;

    padding-bottom: 40rpx;
  }

  &__top {
    color: rgba(51, 51, 51, 1);
    font-size: 36rpx;
    text-align: left;

    padding: 20rpx 0;
  }
  &__content {
    color: rgba(51, 51, 51, 1);
    font-size: 26rpx;
    text-align: left;
  }
  &__tip {
    font-size: 26rpx;
    font-weight: 400;
    color: #9a9a9a;
    text-align: center;

    margin-top: 20rpx;
  }

  &__title-5 {
    font-size: 30rpx;
    font-weight: 400;
    color: #9a9a9a;
    text-align: left;

    padding-bottom: 40rpx;
  }
  &__item-5 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20rpx;

    & > view {
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      flex: 1;

      padding-right: 40rpx;
    }
  }
}
.content-bottom {

  padding: 50rpx 60rpx;

  &__title {
    font-size: 36rpx;
    color: #e5c592;
    font-weight: 500;
    text-shadow: 0 1rpx 0 #FCF4CA;
  }
  &__text {
    color: #e5c592;
    font-size: 28rpx;
    font-weight: 400;
    text-shadow: 0 1rpx 0 #FCF4CA;
  }
}

.share_cover {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  z-index: 100000;

  .share_cover_word {
    color: #FFFFFF;
    font-size: 48rpx;
    width: 60%;
    margin: 400rpx auto;
    text-align: center;
    line-height: 40px;

  }

  .share_cover_arrow {
    position: absolute;
    right: 0;
    top: 0;
    width: 300rpx;
    height: 400rpx;
  }
}


.fade-in {
  animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-out {
  animation: fade-out .8s ease-out both;
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

</style>