h5-shangjinyaojiang/pages/index/index.vue

<template>
	<view>
    <view class="icon">
      <u-image mode="widthFix" width="114rpx" :src="require('@/static/activity-rule.png')" @click="popoverType = 1,$refs['popover'].show()"></u-image>
      <u-image style="margin-top: 28rpx;" mode="widthFix" width="114rpx" :src="require('@/static/me-center.png')" @click="toMe"></u-image>
    </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 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="700rpx" :src="require('@/static/present.png')"></u-image>
      </view>

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

        <view class="login-text">
          短信验证
        </view>

        <view class="login-phone">
          <u-icon width="30rpx" height="46rpx" name="/static/phone.png" ></u-icon>

          <span>192</span>

          <u-input v-model="inputMobile" placeholder-style="color:#969696" :custom-style="{ 'margin-left': '8rpx','color': '#333333' }" placeholder="请填写手机后8位"></u-input>
        </view>

        <view class="login-validate">
          <u-input v-model="code" placeholder-style="color:#969696" :custom-style="{ 'color': '#333333' }" @input="$u.debounce(bindMobile, 1000)"></u-input>
          <u-verification-code :keep-running="true" :seconds="60" ref="uCode" start-text="发送验证码"
                               @change="t => tips = t"></u-verification-code>
          <u-button :ripple="true" :hair-line="false" :custom-style="{ 'height': '100%','background': '#969696','color': '#fff' }" shape="circle" @click="sendCode">{{ tips }}</u-button>
        </view>

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

      <view class="footer">
        江苏省广电有线信息网络股份有限公司苏州分公司
      </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' }" @click="code = '',$refs['popover'].hidden()">重新验证</u-button>
          </view>

          <view v-if="popoverType === 3">
            <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' }" @click="toRaffle">去抽奖</u-button>
          </view>
        </view>
      </popover>
    </view>
	</view>
</template>

<script>
import popover from "@/component/popover/index.vue";
	export default {
    components: {
      popover
    },
		data() {
			return {
        tips: '',
        popoverType: 1,//1为规则，2为验证失败，3验证通过
        inputMobile: '',
        code: '',
        notices: []
			}
		},
		onLoad() {
		},
		methods: {
      toRaffle() {
        uni.navigateTo({
          url: '/pages/raffle/raffle'
        })
      },
      toMe() {
        uni.navigateTo({
          url: '/pages/me/index'
        })
      },

      async getNotices() {
        const res = await this.$u.api.getPrize()
        this.notices = res.draw_log_day?.map(i => `恭喜${i.mobile.slice(0,3)}****${i.mobile.slice(-4)}获得${i.draw_prize ? i.draw_prize.name : ''}`)
      },

      sendCode() {
        // if(!/^1[3-9]\d{9}$/.test(`192${this.inputMobile}`)) {
        //   uni.showToast({
        //     icon: 'none',
        //     title: '手机号不正确'
        //   })
        //   return
        // }
        if(this.$refs.uCode.canGetCode) {
          this.$refs.uCode.start()
          this.$u.api.sendSms({
            tempate_key: 'sms_code_template',
            mobile: this.inputMobile
              //`192${this.inputMobile}`
          }).then(res => {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          })
        } else {
          this.$u.toast('倒计时结束后再发送');
        }
      },

      bindMobile() {
        if(this.code) {
          this.$u.api.bindMobile({
            mobile: this.inputMobile,
              //`192${this.inputMobile}`,
            code: this.code
          }).then(res => {
            this.popoverType = 3;
            this.$refs['popover'].show();
          }).catch(err => {
            this.popoverType = 2;
            this.$refs['popover'].show();
          })
        }
      }
		},
    computed: {
      getIcon() {
        switch (this.popoverType) {
          case 1:
            return 'smile';
          case 2:
            return 'frown';
          case 3:
            return 'laugh';
        }
      }
    },
    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;
}
.icon {
  display: flex;
  flex-direction: column;

  z-index: 3;
  position: fixed;
  top: 30vh;
  right: 24rpx;
}
.content {
  min-height: 100vh;

  position: relative;

  & .logo {

    margin-top: 3vh;
    margin-left: 40rpx;
  }

  & .title {

    margin-top: 3vh;
  }

  & .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: .1vh 140rpx 0 140rpx;
  }

  .present {

    margin-top: 0.5vh;
  }

  .login {
    height: 448rpx;
    position: relative;

    margin: -12vh 60rpx 0 60rpx;
    padding: 0 52rpx 3.5vh 40rpx;
    &-bkg {
      filter: drop-shadow(14rpx 14rpx 4rpx rgba(0,0,0,0.3));

      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    &-text {
      font-size: 34rpx;
      font-weight: 500;
      color: #C82F34;
      text-align: center;

      padding-top: 90rpx;
      position: relative;
      z-index: 2;
    }

    &-phone {
      height: 70rpx;
      background: #E2DFD6;
      opacity: 0.3;
      border-radius: 34rpx;
      display: flex;
      align-items: center;

      padding: 0 0 0 38rpx;
      margin-top: 34rpx;

      & > span {
        font-size: 28rpx;
        line-height: 22rpx;
        font-weight: 500;
        color: #333333;
        border-right: 2rpx solid #333;

        padding-left: 30rpx;
        padding-right: 8rpx;
      }
    }
    &-validate {
      height: 70rpx;
      background: #E2DFD6;
      opacity: 0.3;
      border-radius: 34rpx;
      display: flex;
      align-items: center;

      margin-top: 28rpx;
      padding-left: 38rpx;
    }
    &-tip {
      text-align: center;
      font-size: 22rpx;
      zoom: 0.85;
      font-weight: 400;
      color: #333333;

      padding-top: 1.5vh;
      position: relative;
    }
  }

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

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


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

    padding-bottom: 56rpx;
  }

  &__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;
  }
}
</style>