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 v-if="!couponsList.length" class="default">
          <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 v-for="item in couponsList" :key="item.id" class="coupon">
          <!-- <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: ''
    };
  },
  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 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: 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;
        }

        .maxValue {
          font-size: 14px;
        }
      }

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

  .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>