h5-shangjinyaojiang/pages/join/index.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="logo">
        <u-image style="display:flex;justify-content: center;" mode="heightFix" height="54rpx" :src="require('@/static/guangdian-logo.png')"></u-image>
      </view>

      <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="present">
        <u-image style="display: flex;justify-content: center;" mode="heightFix" width="auto" height="720rpx" :src="require('@/static/present.png')"></u-image>
      </view>

      <view class="qrcode">
        <view class="qrcode__img">

        </view>
        <view class="qrcode__text">
          扫码立即参与
        </view>
      </view>

      <view class="footer">
        江苏省广电有线信息网络股份有限公司苏州分公司
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      notices: []
    }
  },
  onLoad() {
  },
  methods: {
    async getNotices() {
      const res = await this.$u.api.getPrize()
      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 : ''}`)
    },
  },
  computed: {
  },
  watch: {
    vuex_token: {
      handler(newVal){
        if(newVal) {
          this.getNotices()
        }
      },
      immediate: true
    }
  }
}
</script>

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

  position: relative;

  & .logo {

    margin-top: 4vh;
  }

  & .title {

    margin-top: 4vh;
  }

  & .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;
  }

  .present {

    margin-top: 0.75vh;
  }

  .qrcode {
    width: 310rpx;
    background: #FFFFFF;
    border: 6px solid #D5252D;
    box-shadow: 4rpx 16rpx 44rpx 0 rgba(3,46,63,0.63);
    border-radius: 12rpx;

    margin: 3.2vh auto 0 auto;

    &__img {
      width: 220rpx;
      height: 220rpx;
      background: #000;

      margin: 30rpx auto 26rpx auto;
    }
    &__text {
      font-size: 36rpx;
      font-weight: 400;
      color: #000000;
      text-align: center;

      padding-bottom: 18rpx;
    }
  }

  .footer {
    font-size: 22rpx;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 32rpx;
    text-align: center;

    padding-top: 4.8vh;
    padding-bottom: 2.28vh;
  }
}

</style>