coupon-share/dist/index.js

/*封装一些公用的事件或者公用的方法*/

/*定义的一个命名空间*/
window.my = {};
/* 获取url参数 */
my.getURLCode = function (){
        var search = location.search.length > 0 ? location.search.substring(1) : '',
              args = {},
              items = search.length ? search.split('&') : [],
              item = null,
              name = null,
              value = null,
              i = 0,
              len = items.length,
              data = '';
        for (i = 0; i < len; i++) {
          item = items[i].split('=');
          name = decodeURIComponent(item[0]);
          value = decodeURIComponent(item[1]);
          if (item.length) {args[name] = value }
        }
        return args;
    },
/*封装一个事件 过渡结束事件*/
my.transitionEnd = function(dom,callback){
    //1.给谁加事件
    //2.事件触发后处理什么业务
    if(!dom || typeof dom != 'object'){
        //没dom的时候或者不是一个对象的时候 程序停止
        return false;
    }
    dom.addEventListener('transitionEnd', function(){
        callback && callback();
    });
    dom.addEventListener('webkitTransitionEnd', function(){
        callback && callback();
    });
}

//封装一个tap事件
my.tap = function(dom,callback){
    if(!dom || typeof dom != 'object'){
        //没dom的时候或者不是一个对象的时候 程序停止
        return false;
    }

    var isMove = false; //是否滑动过
    var time = 0;   //刚刚触摸屏幕的事件  touchstart的触发事件

    dom.addEventListener('touchstart',function(){
        //记录触发这个事件的时间
        time = Date.now();  //时间戳 毫秒
    });
    dom.addEventListener('touchmove',function(){
        isMove = true;
    });
    window.addEventListener('touchend',function(e){
        //1.没有滑动过
        //2.响应事件在150ms以内   要求比click要响应快
        if(!isMove && (Date.now()-time)<150 ){
            callback && callback(e);
        }

        //重置参数
        isMove = false;
        time = 0;
    });

}
/* to swiper */
function startSwiper(imageCount) {
    var banner = document.querySelector('.swiper-wrapper');   //轮播图大盒子
    var imageBox = banner.querySelector('.swiper-wrapper .swiper-item');   //图片盒子
    var pointBox = banner.querySelector('.swiper-wrapper .swiper-point');   //点盒子
    var imageCount = imageCount; //页面中用来轮播的图片有5张不同的
    var width = banner.offsetWidth;  //图片的宽度
    var points = pointBox.querySelectorAll('li'); //所有的点

    //加过渡
    var addTransition = function(){
        imageBox.style.transition = "all 0.3s";
        imageBox.style.webkitTransition = "all 0.3s";/*做兼容*/
    };
    //清除过渡
    var removeTransition = function(){
        imageBox.style.transition = "none";
        imageBox.style.webkitTransition = "none";
    }
    //定位
    var setTranslateX = function(translateX){
        var translateX = translateX + 375;
        imageBox.style.transform = "translateX("+translateX+"px)";
        imageBox.style.webkitTransform = "translateX("+translateX+"px)";
    }

    //自动轮播  定时器  无缝衔接  动画结束瞬间定位
    var index = 1;
    var timer = setInterval(function(){
        index++ ;   //自动轮播到下一张
        //改变定位  动画的形式去改变  transition transform translate
        addTransition();    //加过渡动画
        // console.log(index, -index * width);
        setTranslateX(-index * width);  //定位
    }, 3000);

    //等过渡结束之后来做无缝衔接
    my.transitionEnd(imageBox, function(){
        //处理事件结束后的业务逻辑
        if(index > imageCount ){
            index = 1;
        }else if(index <= 0){
            index = imageCount;
        }
        removeTransition(); //清除过渡
        setTranslateX(-index * width);  //定位
        setPoint(); //设置底部显示当前图片对应的圆角
    });

    //改变当前样式  当前图片的索引
    var setPoint = function(){
        //清除上一次的now
        for(var i = 0 ; i < points.length ; i++){
            points[i].className = " ";
        }
        //给图片对应的点加上样式
        points[index-1].className = "now";
    }

    /*
     手指滑动的时候让轮播图滑动   touch事件  记录坐标轴的改变 改变轮播图的定位（位移css3）
     当滑动的距离不超过一定的距离的时候  需要吸附回去  过渡的形式去做
     当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向） 一定的距离（屏幕的三分之一）
     */
    //touch事件
    var startX = 0; //记录起始  刚刚触摸的点的位置 x的坐标
    var moveX = 0;  //滑动的时候x的位置
    var distanceX = 0;  //滑动的距离
    var isMove = false; //是否滑动过

    imageBox.addEventListener('touchstart', function(e){
        clearInterval(timer);   //清除定时器
        startX = e.touches[0].clientX;  //记录起始X
    });

    imageBox.addEventListener('touchmove',function(e){
        moveX = e.touches[0].clientX;   //滑动时候的X
        distanceX = moveX - startX; //计算移动的距离
        //计算当前定位  -index*width+distanceX
        removeTransition(); //清除过渡
        setTranslateX(-index * width + distanceX);  //实时的定位
        isMove = true;  //证明滑动过
    });

    //在模拟器上模拟的滑动会有问题 丢失的情况  最后在模拟器的时候用window
    imageBox.addEventListener('touchend', function(e){
        // 滑动超过 1/3 即为滑动有效，否则即为无效，则吸附回去
        if(isMove && Math.abs(distanceX) > width/3){
            //5.当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向）*/
            if(distanceX > 0){  //上一张
                index --;
            }
            else{   //下一张
                index ++;
            }
        }
        addTransition();    //加过渡动画
        setTranslateX(-index * width);    //定位

        if(index > imageCount ){
            index = 1;
        }else if(index <= 0){
            index = imageCount;
        }
        setPoint();

        //重置参数
        startX = 0;
        moveX = 0;
        distanceX = 0;
        isMove = false;
        //加定时器
        clearInterval(timer);   //严谨 再清除一次定时器
        timer= setInterval(function(){
            index++ ;  //自动轮播到下一张
            addTransition();    //加过渡动画
            setTranslateX(-index * width);    //定位
        },3000);
    });
}

/*copy to clipboard*/
function toCopy() {
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
        //区分iPhone设备
        window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
        var Url2=document.getElementById("copy_2");//要复制文字的节点
        var range = document.createRange();
        // 选中需要复制的节点
        range.selectNode(Url2);
        // 执行选中元素
        window.getSelection().addRange(range);
        // 执行 copy 操作
        var successful = document.execCommand('copy');

        // 移除选中的元素
        window.getSelection().removeAllRanges();
    }else{
        var Url2=document.getElementById("copy_1");//要复制文字的节点
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
    }
}

window.onload = function () {
    var args = my.getURLCode();
    var goods_id = args['goods_id'] || 0,
         is_coupon = args['is_coupon'] || 0,
         user_id = args['user_id'] || 0;
    var btn = document.querySelector('.btn-wrapper .btn');
    axios.post('/api/v2/goods/tdetail', {
        goods_id: goods_id,
        is_coupon: is_coupon,
        user_id: user_id
      })
      .then(function (response) {
        var res = response.data, data = null, html = '', imgList = [], swiperStr = '', pointStr = '', len = 0;
        var swiper = document.querySelector('.swiper-container .swiper-wrapper'),
              point = document.querySelector('.swiper-wrapper .swiper-point'),
              detailsWrapper = document.querySelector('.details-wrapper'),
              copy_2 = document.getElementById("copy_2"),
              copy_1 = document.getElementById("copy_1"),
              toast = document.getElementById("toast")
              ;
        // console.log(swiper);
        if (res.errno == 0) {
            data = res.rst.data;
            imgList = res.rst.data.small_img;
            len = imgList.length;
            if (len > 0) {
                for (var i = 0; i < len; i++) {
                    swiperStr += '<div class="swiper-slide"><img src="'+ imgList[i] +'"></div>';
                }
            }
            if (is_coupon == 1) {
                html = '<h5 class="price"><span>券后 ¥</span><em>'+ data.discount_price +'</em><span class="icon icon-price">券&nbsp;&nbsp; '+ data.coupon_price
 +'元</span></h5><div class="info"><p class="before-price">价格 <span>'+ data.price +'</span></p><p class="quantity"> 月销 '+ data.volume +'</p></div><p class="elli desc">'+ data.title +'</p>';
            }else{
                html = '<h5 class="price"><span>折后 ¥</span><em>'+ data.discount_price +'</em></h5><div class="info"><p class="before-price">价格 <span>'+ data.price +'</span></p><p class="quantity"> 月销 '+ data.volume +'</p></div><p class="elli desc">'+ data.title +'</p>';
            }


            detailsWrapper.innerHTML = html;
            swiper.innerHTML = swiperStr;

            var mySwiper = new Swiper ('.swiper-container', {
                autoplay: 3000,
               loop: true,
               pagination: '.swiper-pagination',
             })
        }
      })
      .catch(function (error) {
        console.log(error);
      });

      axios.post('/api/v2/adzoneCreate/h5CopyOfTheNaughtyPassword', {
          goods_id: goods_id,
          is_coupon: is_coupon,
          user_id: user_id
        })
        .then(function (response) {
            var res = response.data, data = null;
            if (res.errno == 0) {
                data = res.rst.data;
                copy_2.innerHTML = data;
                // console.log(copy_1);
                copy_1.value = data;
                btn.addEventListener('click', function () {
                    // console.log('test');
                    toast.classList.add('show');
                    toCopy();
                    setTimeout(function () {
                        toast.classList.add('hide').remove('show');
                    }, 2000)
                }, false)
            }
        })
        .catch(function (error) {
          console.log(error);
        });
}