优惠券分享

index.js 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516
  1. /*封装一些公用的事件或者公用的方法*/
  2. /*定义的一个命名空间*/
  3. window.my = {};
  4. /* 获取url参数 */
  5. my.getURLCode = function (){
  6. var search = location.search.length > 0 ? location.search.substring(1) : '',
  7. args = {},
  8. items = search.length ? search.split('&') : [],
  9. item = null,
  10. name = null,
  11. value = null,
  12. i = 0,
  13. len = items.length,
  14. data = '';
  15. for (i = 0; i < len; i++) {
  16. item = items[i].split('=');
  17. name = decodeURIComponent(item[0]);
  18. value = decodeURIComponent(item[1]);
  19. if (item.length) {args[name] = value }
  20. }
  21. return args;
  22. }
  23. /*copy to clipboard*/
  24. function toCopy(copy01,copy02,cb) {
  25. if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  26. //区分iPhone设备
  27. window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
  28. var Url2=document.getElementById(copy02);//要复制文字的节点
  29. var range = document.createRange();
  30. // 选中需要复制的节点
  31. range.selectNode(Url2);
  32. // 执行选中元素
  33. window.getSelection().addRange(range);
  34. // 执行 copy 操作
  35. var successful = document.execCommand('copy');
  36. // 移除选中的元素
  37. window.getSelection().removeAllRanges();
  38. cb();
  39. }else{
  40. var Url2=document.getElementById(copy01);//要复制文字的节点
  41. Url2.select(); // 选择对象
  42. document.execCommand("Copy"); // 执行浏览器复制命令
  43. cb()
  44. }
  45. }
  46. //is_coupon 是否有券
  47. var args = my.getURLCode();
  48. var goods_id = args['goods_id'] || 0,
  49. is_coupon = args['is_coupon'] || 0,
  50. user_id = args['user_id'] || 0;
  51. union_id = args['union_id'] || 0;
  52. // var btn = document.querySelector('.btn-wrapper .btn');
  53. var selectGoodThingsList = [];//精选好物数据
  54. var selectGoodThingsPage = 1;//精选好物的分页
  55. var red_active_status = 0,red_active_money = 0;//是否是红包活动商品
  56. var commission_price = 0;//返利
  57. window.onload = function () {
  58. goodsAndStockList();//精选好物
  59. $(window).scroll(function(){
  60. if(selectGoodThingsList.length != 0 && ($(window).scrollTop() >= $(document).height()-$(window).height())){
  61. //到达底部加载数据
  62. if($(".loading").css('display') == 'none'){
  63. selectGoodThingsPage ++ ;
  64. goodsAndStockList();//精选好物
  65. }
  66. }
  67. });
  68. writeLogH5({action:'SG-details',channel:'H5',url:window.location.href});//商品详情埋点
  69. _czc.push(["_trackEvent",'猎豆详情页','页面',]);
  70. $(".loading").show();
  71. axios.post('/api/v2/goods/tdetail', {
  72. goods_id: goods_id,
  73. is_coupon: is_coupon,
  74. user_id: user_id
  75. },{
  76. headers:{
  77. source:6000
  78. }
  79. })
  80. .then(function (response) {
  81. $(".loading").hide();
  82. var res = response.data, data = null, html = '', imgList = [], swiperStr = '',
  83. pointStr = '', len = 0,sourceImg = '',commodityDetailDiscount = '',quan_small = '';
  84. var swiper = document.querySelector('.swiper-container .swiper-wrapper'),
  85. point = document.querySelector('.swiper-wrapper .swiper-point'),
  86. detailsWrapper = document.querySelector('.details-wrapper'),
  87. copy_2 = document.getElementById("copy_2"),
  88. copy_1 = document.getElementById("copy_1");
  89. copyName_1 = document.getElementById("copyName_1");
  90. copyName_2 = document.getElementById("copyName_2");
  91. // toast = document.getElementById("toast")
  92. // console.log(swiper);
  93. if (res.errno == 0) {
  94. data = res.rst.data;
  95. imgList = res.rst.data.small_img;
  96. len = imgList.length;
  97. if (len > 0) {
  98. for (var i = 0; i < len; i++) {
  99. swiperStr += '<div class="swiper-slide"><img src="'+ imgList[i] +'"></div>';
  100. }
  101. }
  102. if(data.shop_type == 1){
  103. //天猫
  104. sourceImg = '<img src="img/tianmao.png"/>';
  105. }else if(data.shop_type == 0){
  106. sourceImg = '<img src="img/taobao.png"/>'
  107. }
  108. if(data.red_active_status == 1){//红包
  109. red_active_status = 1;
  110. red_active_money = data.red_active_money;
  111. commodityDetailDiscount += `<li class="redEnvelopes">
  112. <div class="redEnvelopes_01">
  113. <img src="img/redEnvelopes.png"/>
  114. <span>${data.red_active_money}元红包</span>
  115. </div>
  116. <p>下载App下单可得${data.red_active_money}元红包</p>
  117. </li>`
  118. }
  119. commission_price = data.commission_price;//返利金额
  120. // if(data.commission_price){//返利
  121. // commodityDetailDiscount += `<li class="rebate">
  122. // <div class="rebate_01">
  123. // 返 ¥${data.commission_price}
  124. // </div>
  125. // <p>下载App购买可返¥${data.commission_price}</p>
  126. // </li>`
  127. // }
  128. if(data.is_coupon == 1){//券
  129. commodityDetailDiscount += `<li class="discount_coupon">
  130. <div class="rebate_01">
  131. 券 ${data.coupon_price}元
  132. </div>
  133. <p>数量有限 先到先领</p>
  134. </li>`
  135. quan_small = `<div class="quan_small"><i>券</i><span>${data.coupon_price}元</span></div>`
  136. }
  137. html = `<div class="details-wrapper-con">
  138. <h5 class="price">
  139. <div>
  140. <em>¥${data.discount_price}</em>
  141. <span class="before-price">原价${data.price}元</span>
  142. <span class="quantity"> 月销 ${data.volume}</span>
  143. </div>
  144. ${quan_small}
  145. </h5>
  146. <div class="info">
  147. <p class="elli desc">${sourceImg}${data.title}</p>
  148. </div>
  149. <ul class="discount">
  150. ${commodityDetailDiscount}
  151. </ul>
  152. </div>`;
  153. if(data.shop){
  154. html += `<div class="shop_info">
  155. <img src="${data.shop.pic_path}"/>
  156. <div class="shop_detail">
  157. <h3>${data.shop.title}</h3>
  158. <div class="shop_evaluate">
  159. 商品描述:${data.shop.item_score}${data.shop.item_score_pre == 1 ? '<span>低</span>&ensp;': (data.shop.item_score_pre == 2 ? '<span>平</span>&ensp;' : (data.shop.item_score_pre == 3 ? '<span>高</span>&ensp;' : ''))}
  160. 服务态度:${data.shop.service_score}${data.shop.service_score_pre == 1 ? '<span>低</span>&ensp;': (data.shop.service_score_pre == 2 ? '<span>平</span>&ensp;' : (data.shop.service_score_pre == 3 ? '<span>高</span>&ensp;' : ''))}
  161. 发货速度:${data.shop.delivery_score}${data.shop.delivery_score_pre == 1 ? '<span>低</span>': (data.shop.delivery_score_pre == 2 ? '<span>平</span>' : (data.shop.delivery_score_pre == 3 ? '<span>高</span>' : ''))}
  162. </div>
  163. </div>
  164. </div>`
  165. }
  166. copyName_2.innerHTML = data.title;
  167. // console.log(copy_1);
  168. copyName_1.value = data.title;
  169. detailsWrapper.innerHTML = html;
  170. swiper.innerHTML = swiperStr;
  171. var mySwiper = new Swiper ('.swiper-container', {
  172. autoplay: 3000,
  173. loop: true,
  174. pagination: '.swiper-pagination',
  175. })
  176. var titleName = document.getElementsByClassName("details-wrapper")[0].getElementsByClassName("desc")[0];
  177. titleName.addEventListener('click', function () {
  178. toCopy("copyName_1","copyName_2",function () {
  179. showMsg("商品复制成功")
  180. });
  181. }, false)
  182. }
  183. })
  184. .catch(function (error) {
  185. console.log(error);
  186. $(".loading").hide();
  187. });
  188. axios.post('/api/v2/adzoneCreate/h5CopyOfTheNaughtyPassword', {
  189. goods_id: goods_id,
  190. is_coupon: is_coupon,
  191. user_id: user_id
  192. },{
  193. headers:{
  194. source:6000
  195. }
  196. })
  197. .then(function (response) {
  198. console.log(response)
  199. var res = response.data, data = null;
  200. if (res.errno == 0) {
  201. data = res.rst.data;
  202. copy_2.innerHTML = data;
  203. copy_1.value = data;
  204. document.getElementsByClassName('coupon_purchase_bottom')[0].addEventListener('click', function () {
  205. toCopy("copy_1","copy_2",function () {
  206. $(".coupon_purchase_mask").show();
  207. if(red_active_status == 1){//红包活动商品
  208. $(".coupon_purchase_mask .coupon_purchase_mask_con h3").html('可得' + red_active_money + '元红包')
  209. }else{
  210. $(".coupon_purchase_mask .coupon_purchase_mask_con h3").html('可返' + commission_price + '元')
  211. }
  212. });
  213. }, false)
  214. }
  215. })
  216. .catch(function (error) {
  217. console.log(error);
  218. });
  219. }
  220. //gxl
  221. var isClickFlag = true;//是否可以点击获取验证码
  222. var copyName = document.getElementsByClassName("copyName");
  223. var copyNameArr = Array.prototype.slice.call(copyName);
  224. copyNameArr.forEach(function (item, index) {
  225. item.addEventListener('click', function () {
  226. toCopy("copyName_1","copyName_2",function () {
  227. window.location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.kuxuan.coupon_liedou"
  228. });
  229. }, false)
  230. })
  231. function closeMask () {
  232. //关闭弹款
  233. $(".coupon_purchase_mask").hide();
  234. }
  235. //获取手机验证码
  236. function getYzm () {
  237. var phoneNumber = getIdHtml("phone").value;
  238. var ttl = new Date().getTime();
  239. var sign = hex_md5('phone=' + phoneNumber + '&ttl=' + ttl + 'cNHWj7pqBSXTi2DS4uvxqMTzuXOk5xvL');
  240. if(phoneNumber.length != 11){
  241. showMsg('请正确输入手机号');
  242. return;
  243. }
  244. if(!isClickFlag){
  245. return;
  246. }
  247. axios.post('/api/v2/users/sendCode', {
  248. phone: phoneNumber,
  249. ttl: ttl,
  250. sign: sign,
  251. union_id: union_id
  252. },{
  253. headers:{
  254. source:6000
  255. }
  256. })
  257. .then(function (response) {
  258. var res = response.data,wait_time;
  259. if (res.errno == 0 && res.rst.success) {
  260. wait_time = res.rst.wait_time;
  261. var time = setInterval(function () {
  262. wait_time--;
  263. getClassHtml('yzmButton').innerHTML = wait_time + 's';
  264. isClickFlag = false;//不可获取验证码
  265. if(wait_time == 0){
  266. clearInterval(time);
  267. getClassHtml('yzmButton').innerHTML = '获取验证码';
  268. isClickFlag = true;//可以获取验证码
  269. }
  270. },1000)
  271. }else if(res.errno == 0 && !res.rst.success){
  272. showMsg('请稍后再试哦~')
  273. }else if(res.errno == '1011'){//errno==1011 该手机号已绑定其他微信
  274. showMsg(res.err);
  275. }
  276. })
  277. .catch(function (error) {
  278. showMsg('请稍后再试哦~')
  279. });
  280. }
  281. //注册事件
  282. function registerEvent () {
  283. if(getIdHtml("phone").value.length != 11){
  284. showMsg('请正确输入手机号');
  285. return;
  286. }
  287. if((getIdHtml('yzm').value).trim().length == 0){
  288. showMsg('请输入手机验证码')
  289. return;
  290. }
  291. //验证注册
  292. axios.post('/api/v2/users/loginCode', {
  293. phone: getIdHtml("phone").value,
  294. code: getIdHtml('yzm').value,
  295. union_id: union_id
  296. },{
  297. headers:{
  298. source:6000
  299. }
  300. })
  301. .then(function (response) {
  302. var res = response.data;
  303. if (res.errno == 0) {
  304. writeLogH5({action:'SG-success',channel:'H5',url:window.location.href});//未注册手机注册成功埋点
  305. _czc.push(["_trackEvent",'猎豆详情页','手机注册成功',]);
  306. var mask = document.getElementById('registerMask');
  307. mask.style.visibility='hidden';
  308. document.getElementById('registerSuccess').style.visibility='visible';
  309. copyEvent(res.rst.user_id);//获取淘口令接口
  310. }else{
  311. showMsg(res.err);
  312. }
  313. })
  314. .catch(function (error) {
  315. showMsg('请稍后再试哦~')
  316. });
  317. }
  318. //获取淘口令接口
  319. function copyEvent (id) {
  320. axios.post('/api/v2/adzoneCreate/h5CopyOfTheNaughtyPassword', {
  321. goods_id: goods_id,
  322. is_coupon: is_coupon,
  323. user_id: id
  324. },{
  325. headers:{
  326. source:6000
  327. }
  328. })
  329. .then(function (response) {
  330. var res = response.data, data = null;
  331. if (res.errno == 0) {
  332. data = res.rst.data;
  333. var copy1 = getIdHtml("copy1");
  334. var copy2 = getIdHtml("copy2");
  335. copy2.innerHTML = data;
  336. copy1.value = data;
  337. getIdHtml("copyRegisterTkl").addEventListener('click', function () {
  338. toCopy("copy1","copy2",function () {
  339. showMsg('复制成功');
  340. });
  341. }, false)
  342. }
  343. })
  344. .catch(function (error) {
  345. console.log(error);
  346. });
  347. }
  348. //点击赚佣金购买
  349. function makeMoney(){
  350. if(union_id == 0){
  351. var mask = document.getElementsByClassName('mask')[1];
  352. mask.style.visibility='visible';
  353. return;//union_id为空
  354. }
  355. axios.get('/api/v2/user/h5ShareIfregist', {
  356. headers:{
  357. source:6000,
  358. unionid:union_id
  359. }
  360. })
  361. .then(function (response) {
  362. var res = response.data;
  363. if (res.errno == 0) {
  364. if (res.rst.code == 10000) {
  365. //未注册
  366. getClassHtml('alert-info').style.top='4.35rem';
  367. getIdHtml('registerMask').style.visibility='visible';
  368. writeLogH5({action:'SG-register',channel:'H5',url:window.location.href});//未注册手机注册埋点
  369. _czc.push(["_trackEvent",'猎豆详情页','手机注册弹框',]);
  370. }else{
  371. document.getElementsByClassName('mask')[1].style.visibility='visible';
  372. }
  373. }else{
  374. document.getElementsByClassName('mask')[1].style.visibility='visible';
  375. }
  376. })
  377. .catch(function (error) {
  378. document.getElementsByClassName('mask')[1].style.visibility='visible';
  379. });
  380. }
  381. function closeMake () {
  382. var mask = document.getElementById('registerMask');
  383. mask.style.visibility='hidden';
  384. document.getElementById('registerSuccess').style.visibility='hidden';
  385. getClassHtml('alert-info').style.top='9.35rem';
  386. }
  387. //封装 id标签
  388. function getIdHtml (name){
  389. return document.getElementById(name)
  390. }
  391. //封装 class标签
  392. function getClassHtml (name){
  393. return document.getElementsByClassName(name)[0]
  394. }
  395. /**
  396. * [showMsg 提示各种错误信息,3s后消失]
  397. */
  398. function showMsg(msg) {
  399. var msgBox = document.getElementsByClassName('alert-info')[0];
  400. msgBox.getElementsByTagName("p")[0].innerHTML=msg;
  401. msgBox.style.display="block";
  402. setTimeout(function() {
  403. msgBox.style.display="none";
  404. }, 1000);
  405. }
  406. //埋点
  407. function writeLogH5 (data) {
  408. axios.post('/api/v2/channel/writeLogH5', data,{
  409. headers:{
  410. source:6000
  411. }
  412. })
  413. .then(function (response) {
  414. })
  415. .catch(function (error) {
  416. });
  417. }
  418. function goodsAndStockList () {
  419. //首页商品广告位混合页 精选好物
  420. if(selectGoodThingsPage != 1){//为了确定tdetail接口返回数据后按钮才可点击
  421. $(".loading").show();
  422. }
  423. axios.post('/api/v2/goods/goodsAndStockList', {
  424. 'page':selectGoodThingsPage,
  425. "category_id":13,
  426. "is_has_coupon":1,
  427. "sort":1,
  428. "stype":0
  429. },{
  430. headers:{
  431. source:6000
  432. }
  433. })
  434. .then(function (response) {
  435. console.log(response)
  436. if(selectGoodThingsPage != 1){
  437. $(".loading").hide();
  438. }
  439. var res = response.data, data = null;
  440. if (res.errno == 0) {
  441. var selectGoodThingsListHtml= '';
  442. if(selectGoodThingsList.length == 0){
  443. selectGoodThingsList = res.rst;
  444. }else{
  445. selectGoodThingsList = [...selectGoodThingsList,...res.rst];
  446. }
  447. selectGoodThingsList.forEach(function (item,index){
  448. if(item.goods){
  449. var shop_type_img = '',commodityDiscount = '';
  450. if(item.goods.shop_type == 1){
  451. shop_type_img = '<img src="img/tianmao.png"/>'//天猫
  452. }else if(item.goods.shop_type == 0){
  453. shop_type_img = '<img src="img/taobao.png"/>'//淘宝
  454. }
  455. if(item.goods.red_active_status == 1){//红包
  456. commodityDiscount += `<div class="red"><img src="img/redEnvelopes.png"/> ${item.goods.red_active_money}元红包</div>`
  457. }
  458. if(item.goods.commission_price){//返利
  459. commodityDiscount += `<div class="rebate">
  460. 返 ${item.goods.commission_price} 元
  461. </div>`
  462. }
  463. if(item.goods.is_coupon == 1){//券
  464. commodityDiscount += `<div class="quan">
  465. <em>券</em>
  466. <span>${item.goods.coupon_price}元</span>
  467. </div>`
  468. }
  469. selectGoodThingsListHtml += `<li onclick="goCommodityDetail(${item.goods.goods_id},${item.goods.is_coupon})">
  470. <img class="commodity-img" src="${item.goods.img}"/>
  471. <div class="commodity-info">
  472. <p class="title">${item.goods.title}</p>
  473. <div class="commodity-shop">
  474. ${shop_type_img}
  475. <span>${item.goods.shop_title}</span>
  476. </div>
  477. <div class="commodity-price">
  478. <span>¥${item.goods.discount_price}</span>
  479. 月销 ${item.goods.volume}
  480. </div>
  481. <div class="commodity-discount">
  482. ${commodityDiscount}
  483. </div>
  484. </div>
  485. </li>`
  486. }
  487. })
  488. document.getElementsByClassName('select-good-things-list')[0].innerHTML= selectGoodThingsListHtml;
  489. }
  490. })
  491. .catch(function (error) {
  492. if(selectGoodThingsPage != 1){
  493. $(".loading").hide();
  494. }
  495. });
  496. }
  497. function goCommodityDetail (goods_id,is_coupon) {
  498. //去商品详情页
  499. window.location.href='/coupon-share/index.html?goods_id=' + goods_id + '&is_coupon=' + is_coupon + '&user_id=' + user_id + '&union_id=' + union_id
  500. }