/*封装一些公用的事件或者公用的方法*/ /*定义的一个命名空间*/ 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(copy01,copy02,cb) { if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //区分iPhone设备 window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效 var Url2=document.getElementById(copy02);//要复制文字的节点 var range = document.createRange(); // 选中需要复制的节点 range.selectNode(Url2); // 执行选中元素 window.getSelection().addRange(range); // 执行 copy 操作 var successful = document.execCommand('copy'); // 移除选中的元素 window.getSelection().removeAllRanges(); cb(); }else{ var Url2=document.getElementById(copy01);//要复制文字的节点 Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 cb() } } 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"); copyName_1 = document.getElementById("copyName_1"); copyName_2 = document.getElementById("copyName_2"); // 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 += '
'; } } if (is_coupon == 1) { html = '
券后 ¥'+ data.discount_price +'券   '+ data.coupon_price +'元

价格 '+ data.price +'

月销 '+ data.volume +'

'+ data.title +'

'; }else{ html = '
折后 ¥'+ data.discount_price +'

价格 '+ data.price +'

月销 '+ data.volume +'

'+ data.title +'

'; } if(data.commission_price){ var btn_yj = document.getElementsByClassName("btn2")[0].getElementsByTagName("span")[0]; btn_yj.innerHTML = " " + data.commission_price + " 元" } copyName_2.innerHTML = data.title; // console.log(copy_1); copyName_1.value = data.title; detailsWrapper.innerHTML = html; swiper.innerHTML = swiperStr; var mySwiper = new Swiper ('.swiper-container', { autoplay: 3000, loop: true, pagination: '.swiper-pagination', }) var titleName = document.getElementsByClassName("details-wrapper")[0].getElementsByClassName("desc")[0]; titleName.addEventListener('click', function () { toCopy("copyName_1","copyName_2",function () { showMsg("商品复制成功") }); }, false) } }) .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("copy_1","copy_2",function () { var mask = document.getElementsByClassName('mask')[0]; mask.style.visibility='visible'; }); // setTimeout(function () { // toast.classList.remove('show'); // toast.classList.add('hide') // }, 2000) }, false) } }) .catch(function (error) { console.log(error); }); } //gxl var copyName = document.getElementsByClassName("copyName"); var copyNameArr = Array.prototype.slice.call(copyName); copyNameArr.forEach(function (item, index) { item.addEventListener('click', function () { toCopy("copyName_1","copyName_2",function () { window.location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.kuxuan.coupon" }); }, false) }) /** * [showMsg 提示各种错误信息,3s后消失] */ function showMsg(msg) { var msgBox = document.getElementsByClassName('alert-info')[0]; msgBox.getElementsByTagName("p")[0].innerHTML=msg; msgBox.style.display="block"; setTimeout(function() { msgBox.style.display="none"; }, 1500); }