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="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><span>7</span>折</div>
              <div>折扣券</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><span>7</span>折</div>
                  <div>折扣券</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>折扣券</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 RSA = require('../../../plugins/wx_rsa');
  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 {
        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;
      }
  
  
    },
    head: {
      title: '双十一 大额优惠券免费领',
    },
    created() {
      const _this = this
      setInterval(() => {
        _this.getCoupons()
      }, 600000);
    },
    methods: {
      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 }});
        res.data.forEach(element => {
            if(element.receivingStatus !== 3)
            {
               element.remainder = element.remainder * 4
            }
        });
        this.couponsList = res.data;
    
      },
      async receiveCouponRewards(row)
      {
        if(!this.$route.query.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);
            return
          }
      
        if(this.loading) return
        this.loading = true
        Toast.loading({ duration: 0, forbidClick: true,});
          
        try {
            const data = { goodsId: row.id, };
            const sign = this.jiaqian(JSON.stringify(data));
            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.message, 
                position: 'top',
                duration: 4000,
              });
            }
  
                // this.coupons ={"couponName":"8855","couponExplain":"双十一劵1","products":"","validityPeriod":"88天","rebate":88.00,"discount":0.0,"doorsill":0,"fullReduction":0.00}
                // this.show = true
  
            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,
              });
            }
  
      },
      jiaqian(content) {
        const PrivateKey =
          '-----BEGIN PRIVATE KEY-----MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAKCIK/zTSJCP4XhNsb7Mc5lALog+oAja/spMjg8U6rAmVzRtKv8qhw1HK0CRbW/XV66uM+kY7fhjaYbjbbzu2PMMfs2GVpG15jCWLug9fn2hvPT1wkXfooJX61yHK7+inxAXPi4vPNi263mSQGbhZTeqbU5p7nLeRGbdFyBQXVKpAgMBAAECgYAu/475RxZAlI8rPHvkY1EYteypoMQTs6HSslUI31PSXHc9dxSWfenqHkLwdWM30jDuiDvUa6MIDHrRrfXr0XWcQ0IJ93jT7ABkFCdxcKEOG1WE8f1kZ5JyPDJjeQiI9R4jJCukpGU0DdzO7ORvRb4oTFQ15quM+3+SjnK5TtfUsQJBAOLLk03D2s7t2R0GPLZq+WL/ebowbRSy4VHP/IQi4K1bJrll0HLznov60m9UML1ATlS2ub98fBRFXEAaAwJE2O0CQQC1NDEWhrAPU5o3xjjcxIUbbYskskbhjaiX/1Vz0UzS4XfYek4SL68WBWPGWTrSbgbvXtaXj0gmcChF5jxOHtUtAkA4mPsqxfy99UdgYeUW1P1lgkH7gAhIyRdH1nK6+wU83el9DPaHKVrgrfiEBeuf3wNtSqhyK/u/B0wtRxCHKW1FAkAXfwcGdryJoDuVE9z3s3vXDKNIRN2wDaBY5UD9XZxqk9XoeiN5dDltz5EafSOFecLocxG8YVXntg9i0PHs506ZAkEAge9AKaXisZ4jCNHRn1LR2R82RtHTLb2mN3Cc6sGo+SnAKczwRwVg9RgnmaLG4Z/7kJpq0ALgEBlkOmy+9joxAw==-----END PRIVATE KEY-----';
        const signature = new RSA.KJUR.crypto.Signature({
          alg: 'SHA256withRSA',
        });
        signature.init(PrivateKey);
        signature.updateString(content);
        const signData = signature.sign();
        // 将内容转成base64
        return RSA.hex2b64(signData);
      }
    },
  };
  </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;
      }
    }
  
    .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;
     // 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: initial;
    }
  
    .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: initial;
    }
  }
  
  
  .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: 24px;
      }
    }
      .content{
        width: calc(100% - 100px);
        margin-bottom: 25px;
        margin-right: 5px;
                .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: 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;
    }
}
  </style>