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

<template>
  <div>
    <img src="~/assets/image/activity/double-eleven/head.png" width="100%">
  <div class="double-eleven">
    <van-overlay :show="login" style="background: transparent;">
      <div class="wrapper">
        <div class="wrapper-login">
          请先登录
        </div>
      </div>
    </van-overlay>
token:{{this.token}}
 
      <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> -->
          <!-- 类型（1.抵扣券 2.折扣券 3.红包券)" -->
          <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">{{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.couponValue}}</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">{{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">满5000元减</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> -->


          <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';
const webUni = require('../../../plugins/uni');
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.$router.push({ path: '/activity/doubleEleven/pc', query: { token: this.$route.query.token, type: 'pc' } })
    }
    if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
      this.token = await window.native.getToken();
    } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
      window.webkit.messageHandlers.getToken.postMessage('获取token');

     let _this = this
      window.getIosToken=(token) => {
      _this.token = token
      resolve();
      };
    }else if(this.$route.query.token){
      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)
        if (this.$route.query.type === 'pc') {
          window.vgeminipc.startPhoneMeal(productId)
        } else if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
          window.native.startPurchasePage(productId);
        } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
          window.webkit.messageHandlers.activity202211.postMessage({productId:productId});
        } else if (this.$userAgent.isMiniProgram) {
          this.$wx.miniProgram.navigateTo({
            url:
              '/packageA/order/buy/index',
          });
        } else {
          webUni.webView.navigateTo({
            url: '/pages/order/order?productId=' + productId
          });
        }
    },
    async getCoupons()
    {
      const res = await this.$axios.$post('/activity/v5/couponActivity/getCouponActivityInfo', {},
      { headers: { Authorization: this.token }});
      res.data.forEach(element => {
          if(element.receivingStatus !== 3)
          {
             element.remainder = element.remainder * 4
          }
      });
      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='http://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>
.double-eleven{
  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: 105px;
  background: #FDFFFD;
  box-shadow: 0px 11px 12px 0px rgba(255,121,168,0.46);
  border-radius: 12px;
  margin-bottom: 10px;
  // padding: 18px 10px 8px 10px;

  .icon{
    width: 70px;
    height: 70px;
    background: url('../../../assets/image/activity/double-eleven/icon.png') no-repeat;
    background-size: 100% 100%;
    line-height: 70px;
    text-align: center;
    font-size: 10px;
    font-family: Yuanti SC;
    font-weight: bold;
    color: #F0F3FC;
    display: inline-block;
    margin-right: 5px;
    vertical-align: top;
  }

  .let-title{
    width: 100px;
    height: 105px;
    display: inline-block;
    background: #F6E1E1;
    font-size: 20px;
    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: 17px;
    }
  }

  .content{
    width: calc(100% - 180px);
    height: 105px;
    display: inline-block;
    // margin-top: -2px;
    // margin-left: 5px;
    padding: 10px 5px;
   
    .title{
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 800;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .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;
      margin-top: 3px;
      // 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;
    vertical-align: top;
    margin-top: 23px;
    // vertical-align: initial;
    // display: inline-block;
    // vertical-align:text-bottom;
    // float:right;
  }
  .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;
    vertical-align: top;
    margin-top: 23px;
  }

  .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;
    vertical-align: top;
    margin-top: 23px;
  }
}


.popup-container{
  width: 295px;
  height: 407px;
  background: url('../../../assets/image/activity/double-eleven/bj2.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 210px;
  padding-left: 20px;
  padding-right: 20px;

  .coupon{
    width: 255px;
    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: 20px;
    }
    .maxValue{
      font-size: 14px;
    }
  }
    .content{
      width: calc(100% - 100px);
      margin-bottom: 25px;
              .title{
                  font-size: 14px !important; 
                  font-family: Source Han Sans CN;
                  font-weight: 800;
                  color: #333333;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  line-height: 23px;
                
              }
            .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: 15px;
              line-height: 15px;
              background: linear-gradient(90deg, #FF4BD3, #7492FE);
              font-size: 12px;
              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;
    .default-img{
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
      color: #333;
      img {
        width: 100px;
        margin-bottom: 20px;
      }
    }
  }
</style>