shiziyu18/Themes/Home/default/Bonus/bonus.html

<extend name="Public:pinduoduobase" />
<block name="content">
  <script type="text/javascript">
    window.use_screen_base = '750';
    (function (a, b) {
      var c = "orientationchange" in b ? "orientationchange" : "resize",
        d = use_screen_base.indexOf("_mate"),
        e = parseInt(use_screen_base),
        f = a.documentElement,
        g = function () {
          var a = f.clientWidth,
            c = b.innerWidth;
          c >= 750 ? c = 750 : c;
          f.style.fontSize = 100 * (c / e) + "px"
        };
      if (/iPad.*OS|iPhone.*OS/.test(navigator.userAgent) && d > 0) {
        var h = a.querySelectorAll("meta[name=viewport]"),
          i = b.devicePixelRatio;
        i = i != 1 ? 2 : 1, h[0] && h[0].setAttribute("content",
          "width=device-width, user-scalable=no, minimum-scale=" + 1 / i + ", maximum-scale=" + 1 / i +
          ", initial-scale=" + 1 / i)
      }
      g(), b.addEventListener(c, g, !1), delete use_screen_base
    })(document, window);
  </script>
  <link rel="stylesheet" href="__PUBLIC__/mogu/bonus/css/index.css">

  <div id="main">
    <div class="duo-red-packet-container mobile-container" id="app">
      <div class="loadding" v-if="isLoading">
        <div class="ring-1"></div>
      </div>
      <div id="loaded" style="display: none;">
        <div class="rp-mask" v-if="type">
          <div class="rp-container">
            <img src="__PUBLIC__/mogu/bonus/image/red_packet_popup_back.png" class="popup-rp-back">
            <div class="main-title" style="background-image: url('//pinduoduoimg.yangkeduo.com/jinbao/red_packet_popup_paper.png'); font-size: 0.25rem;">
              <p class="main-title-1">恭喜获得</p>
              <p class="main-title-2">{{credit}}元现金红包</p>
            </div>
            <img src="__PUBLIC__/mogu/bonus/image/red_packet_popup_ribbon.png" class="popup-rp-ribbon">
            <img src="__PUBLIC__/mogu/bonus/image/red_packet_popup_rps.png" class="popup-rp-rps">
            <img src="__PUBLIC__/mogu/bonus/image/red_packet_popup_front.png" class="popup-rp-front">
            <div class="coupon-detail">
              <div class="coupon-detail-content">
                <div class="detail-left">
                  <p class="price-top"><span class="yuan">￥</span><span class="money">{{credit}}</span></p>
                  <p class="price-bottom">现金红包</p>
                </div>
                <div class="detail-right">
                  <p class="detail-right-desc">全场通用</p>
                  <div class="count-down"><span class="time-hours time">{{ctime.h}}</span><span class="symbol-colon symbol">:</span><span class="time-minutes time">{{ctime.m}}</span><span class="symbol-colon symbol">:</span><span class="time-seconds time">{{ctime.s}}</span><span class="symbol-dot symbol">.</span><span class="time-milliseconds time">{{ctime.ms}}</span><span class="desc">后过期</span></div>
                </div>
              </div>
            </div><img src="__PUBLIC__/mogu/bonus/image/red_packet_popup_sub_title.png" class="sub-title">
            <div class="confirm-button" role="button" @click="handleApply">立即使用</div>
          </div>
        </div>
        <div class="rp-recommend-v2">
          <div class="coupon-info-v2">
            <img class="img-rectangle" src="__PUBLIC__/mogu/bonus/image/red_packet_result_rectangle_v2.png" alt="">
            <img class="img-ribbon1" src="__PUBLIC__/mogu/bonus/image/red_packet_result_ribbon1.png" alt="">
            <img class="img-ribbon2" src="__PUBLIC__/mogu/bonus/image/red_packet_result_ribbon2.png" alt="">
            <div class="coupon-detail" style="background-image: url('__PUBLIC__/mogu/bonus/image/red_packet_result_bg.png');">
              <p class="coupon-detail-price">{{credit}}元现金红包</p>
              <div class="coupon-detail-count-down">
                <span class="time-hours time">{{ctime.h}}</span>
                <span class="symbol-colon symbol">:</span>
                <span class="time-minutes time">{{ctime.m}}</span>
                <span class="symbol-colon symbol">:</span>
                <span class="time-seconds time">{{ctime.s}}</span>
                <span class="symbol-dot symbol">.</span>
                <span class="time-milliseconds time">{{ctime.ms}}</span>
                <span class="desc">后过期</span>
              </div>
              <p class="coupon-detail-desc">· 仅此会场可用 ·</p>
            </div>
          </div>
          <div class="red-packet-list">
            <div id="duo-opt-wrapper" class="duo-opt-wrapper">
              <div class="duo-opt-container">
                <ul class="duo-opt-list" id="duo-opt-list">
                  <li :class="['opt-item',curGids == 0?'current':'']" @click="selectCate(0)"><span class="desc">精选</span></li>
                  <li v-for="item in category_list" @click="selectCate(item.id)" :class="[curGids == item.id ? 'current' : '', 'opt-item']" :data-id="item.id"><span class="desc">{{item.name}}</span></li>
                </ul>
              </div>
            </div>
            <ul class="duo-goods-list">
              <li>
                <div class="react-base-list-wrapper ">
                  <a :data-id="item.goods" :href="item.url" class="double-grid-one" v-for="(item, idx) of goods_list">
                    <div :class="['double-grid-item', idx%2==0 ? 'gap-right' : 'gap-left']" role="button">
                      <div class="std-goods-image-square goods-image">
                          <img :src="item.image">
                        <div class="goods-name-bg">
                          <div class="goods-name">{{item.name}}</div>
                        </div>
                      </div>
                      <div class="detail"><b class="after-price-hint">券后价</b><b class="price-icon">￥</b><b class="after-price">{{item.quan_after_price}}</b>
                        <div class="info"><del>￥{{item.pinprice}}</del></div>
                      </div><button class="buy-btn">立即抢购</button>
                    </div>
                  </a>
                </div>
                <div class="no-data" v-if="noData">^_^已经到底了</div>
              </li>
            </ul>
          </div>
          <div class="available-coupon" v-if="!type">
            <div class="available-coupon-container">
              <div class="coupon-info coupon-info-type">
                <div class="coupon-info-amount"><span class="amount-icon">￥</span><span class="amount-price">{{credit}}</span></div>
              </div>
              <div class="coupon-timer">
                <div class="count-down"><span class="time-hours time">{{ctime.h}}</span><span class="symbol-colon symbol">:</span><span class="time-minutes time">{{ctime.m}}</span><span class="symbol-colon symbol">:</span><span class="time-seconds time">{{ctime.s}}</span><span class="symbol-dot symbol">.</span><span class="time-milliseconds time">{{ctime.ms}}</span></div>
                <div>后过期</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  {~W('Share/common_quan_share',array($id))}
  
  <script type="text/javascript" src="__PUBLIC__/mogu/bonus/js/polyfill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript">
    var id = {$id};
    var type = {$type};
    var eTime; // 结束时间
    var nowTime; // 现在时间
    var endDate; // 剩余时间
    var endDate2 = 0; // 计时毫秒  默认7200*1000   2h
    var sw = true;
    var app = new Vue({
      el: '#app',
      data: {
        isLoading: true,
        noData: false,
        credit: 0,
        category_list: [],
        goods_list: [],
        ctime: {
          h: 0,
          m: 0,
          s: 0,
          ms: 0
        },
        curGids: 0,
        type: 0,
        page: 1
      },
      created: function() {
        this.load_voucher_info();
      },
      mounted() {
        var _this = this;
        _this.get_goods_list();
        window.addEventListener('scroll', function () {
          if (document.body.scrollTop + window.innerHeight >= document.body.offsetHeight) {
            // 如果开关打开则加载数据
            if (sw == true) {
              sw = false;
              axios.get('index.php?s=/bonus/get_voucher_goods_list/voucher_id/' + id + '/gid/' + _this.curGids + '/page/' + _this.page)
                .then(function (res) {
                  var resObj = res.data;
                  if (resObj.code == 1) {
                    _this.noData = true;
                    return;
                  }
                  if (resObj.code == 0) {
                    var slist = _this.goods_list;
                    _this.goods_list = slist.concat(resObj.data);
                    _this.page +=1;
                  }
                  sw = true;
                })
                .catch(function (error) {
                  console.log(error);
                });
            }
          }
        });
        $('#loaded').show();
      },
      methods: {
        load_voucher_info: function () {
          var self = this
          return axios.get('index.php?s=/bonus/load_voucher_info/voucher_id/'+id)
            .then(function (res) {
              var resObj = res.data;
              if(resObj.code == 1){
                alert('优惠券不存在');
                window.location.href= '{:U("bonus/index")}';
                return;
              }
              if(resObj.code == 0){
                eTime = parseInt(resObj.get_voucher_info.end_time);
                nowTime = resObj.cur_time;
                if (eTime <= nowTime){
                  window.location.href= '{:U("bonus/overdue")}';
                  return;
                }
                self.credit = parseInt(resObj.get_voucher_info.credit);
                endDate = (eTime - nowTime)*1000;
                if (endDate >= 0) endDate2 = endDate;
                self.count_time();
                self.type = type;
                self.category_list = resObj.category_list;
              }
              self.posts = res.data.posts
            })
            .catch(function (error) {
              self.fetchError = error
              console.log(error)
            })
        },
        get_goods_list: function () {
          var _this = this
          return axios.get('index.php?s=/bonus/get_voucher_goods_list/voucher_id/' + id + '/gid/' + _this.curGids)
            .then(function (res) {
              var resObj = res.data;
              if(res.data.code == 1) {
                _this.noData = true;
                _this.isLoading = false;
                return;
              }
              if(res.data.code == 0) {
                _this.goods_list = resObj.data;
                _this.page +=1;
              }
              _this.isLoading = false;
            })
            .catch(function (error) {
              _this.fetchError = error
              console.log(error)
            })
        },
        count_time: function () {
          var self = this
          var leftTime = endDate2;
          var h, m, s, ms;
          if (leftTime >= 0) {
            h = Math.floor(leftTime / 1000 / 60 / 60);
            m = Math.floor((leftTime - h * 3600 * 1000) / 60 / 1000);
            s = Math.floor((leftTime - h * 3600 * 1000 - m * 60 * 1000) / 1000);
            ms = Math.floor(leftTime % 1000 / 100);
            s = s < 10 ? "0" + s : s;
            m = m < 10 ? "0" + m : m;
            h = h < 10 ? "0" + h : h;
            this.ctime = {h,m,s,ms}
            //递归每秒调用countTime方法，显示动态时间效果
            setTimeout(function () {
              endDate2 -= 100;
              self.count_time();
            }, 100);
          } else {
            console.log('已截止')
            window.location.href= '{:U("bonus/overdue")}';
          }
        },
        handleApply: function () {
          this.type = 0;
        },
        selectCate: function (id) {
          this.curGids = parseInt(id);
          sw = true;
          this.page = 1;
          this.noData = false;
          this.goods_list = [];
          this.get_goods_list();
        }
      }
    })
    
  </script>
</block>