范例

范例:

(function(window) {
  'use strict';
 
  let isSend = false;
  const url = 'https://rocky.zhuopu.net';
  const getOrderUrl = url + '/api/store/jd/order';
  const orderNotifyUrl = function(orderId) {
    return url + '/api/store/jd/order/' + orderId + '/notify';
  };
  const numberKeyCode = [96,97,98,99,100,101,102,103,104,105];
 
  // 加载 script
  function loadScript(url, done) {
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.body.appendChild(script);
    script.onload = script.onreadystatechange = function() {
      if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
        if (done) done();
      }
 
      script.onload = script.onreadystatechange = null;
    };
  }
 
  // 获取 URL 后面的参数
  function getUrlParam(name) {
    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)'); // 构造一个含有目标参数的正则表达式对象
    let r = window.location.search.substr(1).match(reg); // 匹配目标参数
    if (r != null) return unescape(r[2]);
    return null; // 返回参数值
  }
 
  // 大王卡对象
  function KingCard() {
    this.$certName = $('#certName');
    this.$certNo = $('#certNo');
    this.$mobilePhone = $('#mobilePhone');
    this.$address = $('#address');
    this.$orderNoElement;
    this.$ChoseMobile = $('#number').find('.p-content');
    this.$province = $('#province');
    this.$city = $('#city');
    this.$postProvince = $('#post-province');
    this.$postCity = $('#post-city');
    this.$postDistrict = $('#post-district');
    this.$mask = $('.mask');
    this.$errorAll = $('#errorAll');
    // 购买的号码
    this.buyer_number = '';
  }
 
  // 初始化 王卡对象
  KingCard.prototype.init = function() {
    const $div = $('<div id="kingCard" class="btn-box"></div>');
    $div.css({
      position: 'absolute',
      top: 0,
      left: 0,
      width: 'auto',
      height: 'auto',
      zIndex: 10000
    });
 
    const $orderBtn = $('<a href="javascript:void(0);"></a>');
    $orderBtn.attr('id', 'getOrder');
 
    $orderBtn.css({
      display: 'inline-block',
      backgroundColor: '#f57e1f',
      margin: '10px 20px',
      textDecoration: 'none',
      fontSize: '1rem',
      height: '2rem',
      lineHeight: '2rem',
      padding: '0 10px',
      borderRadius: '.1875rem',
      color: '#FFF'
    });
 
    $orderBtn.text('获取订单');
    $orderBtn.on('click', this.handleClick.bind(this));
    const $successBtn = $orderBtn.clone();
    $successBtn.attr('id', 'orderSuccess');
    $successBtn.text('订单成功');
    $successBtn.on('click', this.handleClick.bind(this));
 
    const $failBtn = $orderBtn.clone();
    $failBtn.attr('id', 'orderFail');
    $failBtn.text('订单失败');
    $failBtn.on('click', this.handleClick.bind(this));
    $div.append($orderBtn);
    $div.append($successBtn);
    $div.append($failBtn);
    this.$orderNoElement = $('<p id="JDOrderId"></p>');
    this.$orderNoElement.css({
      fontSize: '20px',
      padding: '10px',
      color: '#999'
    });
 
    $div.append(this.$orderNoElement);
    $('body').after($div);
  };
 
  // 按钮处理方法
 
  KingCard.prototype.handleClick = function(evt) {
    switch ($(evt.target).attr('id')) {
      case 'getOrder':
        this.getOrder();
        break;
      case 'orderSuccess':
        this.orderStatus('produce_succeed');
        break;
      case 'orderFail':
        this.orderStatus('produce_failed');
        break;
    }
  };
 
  // 获取订单 按钮 事件方法
  KingCard.prototype.getOrder = function() {
    const self = this;
    let channel = getUrlParam('channel');
    if (!channel) {
      let param = getUrlParam('param');
      if (param) {
        if (param.startsWith('qZ6wqd4tEGk7')) {
          channel = 'jl001';
        } else if (param.startsWith('P2guLDMlC7Iab')) {
          channel = '151';
        }
      }
    }
 
    if (isSend) {
      alert('请先处理当前订单');
      return;
    }
 
    isSend = true;
    // 要比三个按钮的高度还要高,防止点过快
    this.$mask.css('zIndex', 10001).show();
    $.get(getOrderUrl, {
      channel
    })
      .done(function(res, error) {
        console.log(res);
        isSend = false;
        self.$mask.removeAttr('style');
        const data = res.data;
        if (data) {
          self.$certName.val(data.buyer_name);
          self.$certNo.val(data.id_card);
          const mobile_arr = data.mobile.split('');
          self.$mobilePhone.focus();
          self.$mobilePhone.val(data.mobile);
          self.$address.val(data.address);
          window.localStorage.setItem('_kc_info', data.id);
          let text = '订单号: ' + data.order_id;
          data.buy_mobile ? (text = text + '  购买号码: ' + data.buy_mobile) : '';
          self.$orderNoElement.text(text);
          self.buyer_number = data.buy_mobile;
          self.choseArea(data);
          self.randomNumber();
          self.checkMobile();
        } else {
          alert('目前暂无需要生产的订单了,你可以稍事休息之后再来获取订单.');
        }
      })
      .fail(function(err) {
        console.log('网络异常');
        console.log(err);
        self.$mask.removeAttr('style');
        alert('获取订单信息时发生网络错误,请联系技术.不要关闭当前页面.');
      });
  };
 
  // 选择号码归属地以及所在地区
 
  KingCard.prototype.choseArea = function(data) {
    let local_province = data.location_province;
    let local_city = data.location_city;
    let province = data.province;
    let city = data.city;
    let county = data.county;
 
    // 归属地
    $.each(this.$province.children(), function(idx, ele) {
      if (~local_province.indexOf(ele.innerText) || ~ele.innerText.indexOf(local_province)) {
        $(ele).trigger('click');
        return;
      }
    });
 
    $.each(this.$city.children(), function(idx, ele) {
      if (~local_city.indexOf(ele.innerText) || ~ele.innerText.indexOf(local_city)) {
        $(ele).trigger('click');
        return;
      }
    });
 
    // 所在区域
    $.each(this.$postProvince.children(), function(idx, ele) {
      if (~province.indexOf(ele.innerText) || ~ele.innerText.indexOf(province)) {
        $(ele).trigger('click');
        return;
      }
    });
 
    $.each(this.$postCity.children(), function(idx, ele) {
      if (~city.indexOf(ele.innerText) || ~ele.innerText.indexOf(city)) {
        $(ele).trigger('click');
        return;
      }
    });
 
    $.each(this.$postDistrict.children(), function(idx, ele) {
      if (~county.indexOf(ele.innerText) || ~ele.innerText.indexOf(county)) {
        $(ele).trigger('click');
        return;
      }
    });
    $('#number').trigger('click');
  };
 
  // 随机选个号码
  KingCard.prototype.randomNumber = function() {
    const self = this;
    // 如果存在用户购买的号码,那就输入上然后去搜索下
    if (this.buyer_number) {
      $('#search').val(this.buyer_number.slice(-4));
      setTimeout(function(){
        document.getElementById('search-btn').click();
      },500);
 
      setTimeout(function() {
        const lis = document.querySelectorAll('.number-list li');
        if (lis.length === 0) {
          self.randomNumber();
          return;
        }
 
        for (let i = 0; i < lis.length; i++) {
          if (lis[i].innerText.replace(/\n/g, '') == self.buyer_number) {
            $(lis[i])
              .children('a')[0]
              .click();
            break;
          } else {
            continue;
          }
        }
      }, 800);
      return;
    }
 
    setTimeout(function() {
      const len = document.querySelectorAll('.number-list li').length;
      if (len !== 0) {
        const random = Math.floor(Math.random() * len);
        $('#number-popup .number-list li')
          .eq(random)
          .children('a')[0]
          .click();
      } else {
        self.randomNumber();
      }
    }, 800);
  };
 
  // 发送订单状态
  KingCard.prototype.orderStatus = function(status) {
    const self = this;
    if (isSend) return;
    let msg = '订单提交成功';
    if (status === 'produce_failed') {
      msg = window.prompt('请输入失败原因');
    }
 
    isSend = true;
    // 防止点过快
    this.$mask.css('zIndex', 10001).show();
    const info = window.localStorage.getItem('_kc_info');
    const id = info.split('|')[0];
    const mobile = info.split('|')[1];
    console.log('当前订单后台编号: ', id);
 
    if (!id) {
      alert('缺少当前订单号,请联系技术部门!不要关闭页面');
      return;
    }
 
    $.post(orderNotifyUrl(id), {
      status: status,
      mobile: mobile,
      remark: msg,
      current_url: window.location.href
    })
      .done(function(res) {
        console.log(res);
        self.$mask.removeAttr('style');
        window.localStorage.removeItem('_kc_info');
        const msg = res.msg;
        if (msg.code === 0) {
          self.$certName.val('');
          self.$certNo.val('');
          self.$mobilePhone.val('');
          self.$address.val('');
          self.orderId = '';
          self.$orderNoElement.text('');
 
          if (res.data && res.data.next_url) {
            window.location.href = res.data.next_url;
          } else {
            if (status === 'produce_succeed') {
              alert('页面没有自动跳转,请联系技术,不要关闭当前页面.');
            }
          }
        } else {
          alert(msg.info);
        }
      })
      .fail(function(err) {
        console.error(err);
        alert('后台更新订单状态市网络发生异常,请联系技术.不要关闭当前页面.');
      });
  };
 
  // 检查是不是选完号码了
  KingCard.prototype.checkMobile = function() {
    const self = this;
    setTimeout(function() {
      let mobile = self.$ChoseMobile.text();
      if (mobile) {
        let id = window.localStorage.getItem('_kc_info');
        window.localStorage.setItem('_kc_info', id + '|' + mobile);
      } else {
        self.checkMobile();
      }
    }, 500);
  };
 
  let kc = new KingCard();
  kc.init();
})(window);