123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339 |
- /*封装一些公用的事件或者公用的方法*/
- /*定义的一个命名空间*/
- 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");
- //
- // // 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">券 '+ 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>';
- // }
- // 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);
- }
|