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>
      <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> -->
          <!-- 类型（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.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">{{ 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">有效期至 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';
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' } })
      return
    }
    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');

      const _this = this
      window.getIosToken = (token) => {
        _this.token = token
      };
    } 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)
      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 });
      } 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 } });
      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>
.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;
        white-space: nowrap;
    }

  }

  .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: 15px;
  padding-right: 15px;

  .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;
        white-space: nowrap;
      }

    }
  }
}

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