android-cloud-H5/pages/activity/doubleEleven/pc.vue

<template>
    <div class="double-eleven">
      <img src="~/assets/image/activity/double-eleven/head.png" width="100%">
    <div class="double-eleven-body">
      <van-overlay :show="login" style="background: transparent;">
        <div class="wrapper">
          <div class="wrapper-login">
            请先登录
          </div>
        </div>
      </van-overlay>
        <div class="double-eleven-container">

          <div class="default" v-if="!couponsList.length">
          <img src="~/assets/image/activity/double-eleven/couponbj.png" width="100%" >
          <div class="default-img" >
            <img src="~/assets/image/activity/double-eleven/default.png" >
            暂无优惠券哦～
          </div>
          </div>
  
           <!-- <div class="coupon" >
            <div class="let-title">
              <div><span>7</span>折</div>
              <div>折扣券</div>
            </div>
            <div class="content">
              <div class="title">月卡套餐7折优惠券</div>
              <div class="tips">满90元可用，优惠券有效期<span style="color:#D358A8">3</span>天</div>
              <div class="number">剩余数量：2893张</div>
            </div>
            <div class="btn" @click="receiveCouponRewards({id:11})"></div>
          </div> -->
  
          <div class="coupon" v-for="item in couponsList" :key="item.id">
            <!-- <div class="icon">{{item.couponName}}</div> -->
            <div class="let-title">
              <div  v-if="item.couponType===1">¥<span>{{item.couponValue}}</span></div>
              <div  v-else><span>{{item.deductionPrice}}</span>折</div>
              <div v-if="item.maxValue" class="maxValue">满{{ item.maxValue }}元减</div>
              <div v-else class="maxValue">{{ item.useThreshold }}</div>
            </div>
            <div class="content">
              <div class="title-coupon">{{item.couponName}}</div>
              <div class="tips">{{item.couponExplain}}</div>
              <div class="number">剩余数量：{{item.remainder}}张</div>
            </div>
            <div v-if="item.receivingStatus===1" class="btn" @click="receiveCouponRewards(item)"></div>
            <div v-else-if="item.receivingStatus===2" class="btn-collect"></div>
            <div v-else-if="item.receivingStatus===3" class="btn-nocoupon"></div>
          </div>
  
         
  
        <img src="~/assets/image/activity/double-eleven/game.png" width="100%" style="margin-top:30px">
        <img src="~/assets/image/activity/double-eleven/blacktechnology.png" width="100%">
        <img src="~/assets/image/activity/double-eleven/advantage.png" width="100%">
        </div>
    </div>
  
    <van-popup v-model="show" style="background: transparent;" :close-on-click-overlay="false">
           <div class="popup-container">
            <div class="coupon">
              <div class="let-title">
                <div v-if="coupons.couponType===1">¥<span>{{coupons.couponValue}}</span></div>
                <div v-else><span>{{coupons.deductionPrice}}</span>折</div>
                <div v-if="coupons.maxValue" class="maxValue">满{{ coupons.maxValue }}元减</div>
                <div v-else class="maxValue">{{ coupons.useThreshold }}</div>
              </div>
                <div class="content">
                  <div class="title-coupon">{{coupons.couponName}}</div>
                  <div class="tips">{{coupons.couponExplain}}</div>
                  <div class="number">有效期至 {{coupons.validityPeriod}}</div>
                </div>
            </div>
  
              <!-- <div class="coupon" >
                <div class="let-title">
                  <div><span>7</span>折</div>
                  <div class="maxValue">折扣券</div>
                </div>
                <div class="content">
                  <div class="title-coupon">月卡套餐7折优惠券</div>
                  <div class="tips">满90元可用，优惠券有效期<span style="color:#D358A8">3</span>天</div>
                  <div class="number">有效期至 2022.11.10 16:28</div>
                </div>
              </div> -->
  
  
            <img src="~/assets/image/activity/double-eleven/btn2.png" width="100%"  @click="goOrder">
           </div>
  
              <div class="coupon-tips">优惠券可在【我的】-【卡券】内查看</div>
              <img src="~/assets/image/activity/double-eleven/close.png" class="close" @click="show=false"/>
           </van-popup>
  </div>
  </template>
  
  <script>
  import { Toast } from 'vant';
  export default {
    name: 'doubleEleven',
    auth: false,
    components: {
    },
    data() {
      return {
        show:false,
        coupons:{},
        login:false,
        loading:false,
        couponsList:[],
        token:'',
        client:''
      };
    },
    async fetch() {
      if (this.$route.query.type === 'pc') {
        this.token =  window.vgeminipc.getToken()
      } else if(this.$route.query.token && this.$route.query.token != 'needToken'){
        this.token = this.$route.query.token;
      }
  
      this.getCoupons()
  
      if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
        this.client = 1;
      } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
        this.client = 2;
      } else if (this.$userAgent.isMiniProgram) {
        this.client = 5;
      } else {
        this.client = 7;
      }
      this.visit()
  
    },
    head: {
      title: '双十一 大额优惠券免费领',
    },
    created() {
      // const _this = this
      // setInterval(() => {
      //   _this.getCoupons()
      // }, 600000);
    },
    methods: {
    visit() {
      this.$axios.$post('/user/v5/userAccess/user/visit', 
        {
          loginType: this.token ? 1 : 2,
          accessType: 13
        },
      );
    },
      goOrder()
      {
        const productId = !this.coupons.products || this.coupons.products.split(',').length > 1 ? -1 : parseInt(this.coupons.products)
        window.vgeminipc.startPhoneMeal(productId)
      },
      async getCoupons()
      {
        const res = await this.$axios.$post('/activity/v5/couponActivity/getCouponActivityInfo', {},
        { headers: { Authorization: this.token }});
        if(res.status === 0)
        {
          res.data.forEach(element => {
            if(element.receivingStatus !== 3)
            {
              element.remainder = element.remainder
            }
          });
          this.couponsList = res.data;
        }
    
      },
      async receiveCouponRewards(row)
      {
        if(!this.token)
          {
            this.login = true
            const _this = this
            setTimeout(() => {window.location.href='https://client.phone.androidscloud.com/cloud/phone/web/#/pages/login/index';_this.login = false},1000);
            // setTimeout(() => {window.location.href='https://prese.phone.androidscloud.com/cloud/phone/web/#/pages/index/index';_this.login = false},1000);
            return
          }
      
        if(this.loading) return
        this.loading = true
        Toast.loading({ duration: 0, forbidClick: true,});
          
        try {
            const data = { goodsId: row.id, };
            const res = await this.$axios.$get('/activity/v5/couponActivity/receiveCouponRewards',{ params: { goodsId:row.id} ,headers: { Authorization: this.token }});
             if(res.status === 0)
             {
               this.coupons = res.data
               this.show = true
             }
             else{
              Toast({
                message: res.msg, 
                position: 'top',
                duration: 4000,
              });
            }
  
            await this.getCoupons()
            this.loading = false
            Toast.clear();
  
            }catch (error) {
              Toast.clear();
              this.loading = false
              // await this.getCoupons()
              Toast({
                message: error.message,
                position: 'top',
                duration: 4000,
              });
            }
  
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  @media (min-width: 0px) {
  .double-eleven{
    width: 400px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }
  .double-eleven-body{
    background-image: url('../../../assets/image/activity/double-eleven/bj.png');
    background-size: cover;
    background-repeat: round;
    min-height: 100vh;
    overflow: hidden;
    margin: 0 auto;
    margin-top: -1px;
  }
  img{
    display: block;
  }
  .double-eleven-container{
   padding: 10px;
   img{
    margin-bottom: 30px;
   }
  }
  
  .coupon{
    width: 100%;
    height: 100px;
    background: #FDFFFD;
    box-shadow: 0px 11px 12px 0px rgba(255,121,168,0.46);
    border-radius: 12px;
    margin-bottom: 10px;
    display: flex;
    // padding: 18px 10px 8px 10px;
  
  
    .let-title{
      width: 100px;
      height: 100px;
      display: inline-block;
      background: #F6E1E1;
      font-size: 24px;
      font-family: Source Han Sans;
      font-weight: bold;
      color: #F04545;
      text-align: center;
      padding: 5px 0;
      border-radius: 12px 0 0 12px;
      vertical-align: top;
      span{
        font-size: 32px;
      }
      .maxValue{
        font-size: 17px;
      }
    }
  
    .content{
      width: calc(100% - 182px);
      height: 50px;
      display: inline-block;
      // margin-top: -2px;
      margin-left: 5px;
      padding: 5px 5px;
     
      .title-coupon{
          font-size: 24px !important;
          font-family: Source Han Sans CN;
          font-weight: 800;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 39px;
      }
      .tips{
        font-size: 10px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        // line-height: 25px;
      }
  
      .number{
        margin-top: 5px;
        height: 20px;
        line-height: 20px;
        background: linear-gradient(90deg, #FF4BD3, #7492FE);
        font-size: 10px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF; 
        padding: 0 5px;
        width: fit-content;
        // display: block;
      }
  
    }
    .btn{
      width: 60px;
      height: 60px;
      background: url('../../../assets/image/activity/double-eleven/btn.png') no-repeat;
      background-size: 100% 100%;
      line-height: 80px;
      text-align: center;
      font-size: 15px;
      font-family: Yuanti SC;
      font-weight: bold;
      color: #F0F3FC;
      display: inline-block;
      margin-left: 2px;
      margin-top: 19px;
    }
    .btn-collect{
      width: 60px;
      height: 60px;
      background: url('../../../assets/image/activity/double-eleven/collect.png') no-repeat;
      background-size: 100% 100%;
      line-height: 80px;
      text-align: center;
      font-size: 15px;
      font-family: Yuanti SC;
      font-weight: bold;
      color: #F0F3FC;
      display: inline-block;
      margin-left: 2px;
      margin-top: 19px;
    }
  
    .btn-nocoupon{
      width: 60px;
      height: 60px;
      background: url('../../../assets/image/activity/double-eleven/nocoupon.png') no-repeat;
      background-size: 100% 100%;
      line-height: 80px;
      text-align: center;
      font-size: 15px;
      font-family: Yuanti SC;
      font-weight: bold;
      color: #F0F3FC;
      display: inline-block;
      margin-left: 2px;
      margin-top: 19px;
    }
  }
  
  
  .popup-container{
    width: 325px;
    height: 407px;
    background: url('../../../assets/image/activity/double-eleven/bj2.png') no-repeat;
    background-size: 100% 100%;
    padding-top: 210px;
    padding-left: 15px;
    padding-right: 15px;
  
    .coupon{
      width: 295px;
      height: 95px;
      margin-bottom: 20px;
      .let-title{
      width: 90px;
      height: 95px;
      display: inline-block;
      background: #F6E1E1;
      font-size: 18px;
      font-family: Source Han Sans;
      font-weight: bold;
      color: #F04545;
      text-align: center;
      padding: 16px 0;
      border-radius: 12px 0 0 12px;
      vertical-align: top;
      span{
        font-size: 24px;
      }
      .maxValue{
        font-size: 14px;
      }
    }
      .content{
        width: calc(100% - 100px);
        margin-bottom: 25px;
        // margin-right: 5px;
        // padding: 10px 2px;
                .title-coupon{
                    font-size: 21px !important; 
                    font-family: Source Han Sans CN;
                    font-weight: 800;
                    color: #333333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    line-height: 31px;
                  
                }
              .tips{
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #333333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                // line-height: 20px;
              }
  
              .number{
                margin-top: 7px;
                height: 20px;
                line-height: 20px;
                background: linear-gradient(90deg, #FF4BD3, #7492FE);
                font-size: 10px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF; 
                padding: 0 5px;
                width: fit-content;
              }
  
      }
    }
  }
  
  .coupon-tips{
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 30px;
    width: 100%;
    text-align: center;
    margin-top: 5px;
  }
  .close{
      margin-top: 15px;
      margin-left: calc(50% - 22px);
      width: 44px;
    }
  
  
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  
    .wrapper-login{
      width: 150px;
      height: 40px;
      background: #000000;
      opacity: 0.6;
      border-radius: 45px;
      color: #ffffff;
      line-height: 40px;
      text-align:center;
    }
  
    .login{
      background-color:transparent;
    }

    .default{
    width:100%;
    position: relative;
    border-radius: 24px;
    font-size: 14px;
    .default-img{
      position: absolute;
      top: calc(50% - 60px);
      left: calc(50% - 50px);
      color: #333;
      img {
        width: 100px;
        margin-bottom: 20px;
      }
    }
  }
}
  </style>