chanpin_details.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
  1. var flag = true,
  2. param = null,
  3. pStatus = true,
  4. goodStatus = true,
  5. colorId = '',
  6. shareOpenid = '',
  7. productId = '',
  8. openId='',
  9. orderId='',
  10. yuanjia = '';
  11. mui.ready(function() {
  12. var nowUrl = location.href;
  13. productId = getParam("productId");
  14. colorId = getParam("colorId");
  15. openId=getParam("openId");
  16. orderId=getParam("orderId");
  17. param = nowUrl.split("?")[1];
  18. //springFestivalPop();
  19. marquee_Show();
  20. selectProductInfo(productId);
  21. selectProductImageText(productId);
  22. mui('body').on('tap', '#click-product-desc', function() {
  23. if(flag) {
  24. selectProductImageText(productId);
  25. flag = false
  26. }
  27. });
  28. mui('body').on('tap', '.go_gwc', function() {
  29. mui.openWindow({
  30. url: 'shopping_cart.html'
  31. })
  32. });
  33. fenxiang();
  34. getCartNum();
  35. if(openId!='' && openId!=null){
  36. console.log(openId)
  37. $.ajax(base_path + '/agent/member?dates=' + new Date().getTime(), {
  38. data:{
  39. openId:openId
  40. },
  41. dataType: 'json',
  42. type: 'post',
  43. timeout: 15000,
  44. xhrFields: {
  45. withCredentials: true
  46. },
  47. crossDomain: true,
  48. success: function(dt) {
  49. if(dt.isRedirect) {
  50. location.href = dt.redirectURL;
  51. } else {
  52. var data = dt.data;
  53. if(dt.status) {
  54. if(typeof(data.userHead) != "undefined"){
  55. if(data.userHead != null && data.userHead != '') {
  56. $(".userHeader").attr('src',data.userHead)
  57. }
  58. }
  59. $('#userNickname').text(decodeURI(data.userNickname));
  60. $('.friend-ping').show();
  61. } else {
  62. }
  63. }
  64. },
  65. error: function(xhr, type, errorThrown) {
  66. console.log(xhr)
  67. }
  68. });
  69. }
  70. document.querySelector('.loading-bg').style.display = 'none'
  71. });
  72. function selectProductInfo(productId) {
  73. var btnArray = ['否', '是'];
  74. $.ajax(base_path + '/product/getProductByProductId?productId=' + productId + '&colorId=' + colorId + '&dates=' + new Date().getTime(), {
  75. dataType: 'json',
  76. async: false,
  77. type: 'GET',
  78. timeout: 15000,
  79. xhrFields: {
  80. withCredentials: true
  81. },
  82. crossDomain: true,
  83. success: function(dt) {
  84. if(dt.isRedirect) {
  85. location.href = dt.redirectURL;
  86. } else {
  87. if(dt.status) {
  88. console.log(dt.data.product);
  89. if(dt.data.product.productId == 28) {
  90. goodStatus = false
  91. }
  92. shareOpenid = dt.data.shareOpenid;
  93. var imageNote = "<div class='mui-slider-item mui-slider-item-duplicate'><a href='#'><img src='" + dt.data.product.pictureList[0].pictureUrl + "'></a></div>";
  94. for(var i = 0; i < dt.data.product.pictureList.length; i += 1) {
  95. imageNote += "<div class='mui-slider-item'><a href='#'><img src='" + dt.data.product.pictureList[i].pictureUrl + "'></a></div>";
  96. if(i == 0) {
  97. $("#active-div").append("<div class='mui-indicator mui-active'></div>")
  98. } else {
  99. $("#active-div").append("<div class='mui-indicator'></div>")
  100. }
  101. }
  102. imageNote += "<div class='mui-slider-item mui-slider-item-duplicate'><a href='#'><img src='" + dt.data.product.pictureList[0].pictureUrl + "'></a></div>";
  103. $("#group-images-div").append(imageNote);
  104. var banner = mui('#detail-slider');
  105. banner.slider({
  106. interval: 5000 //banner循环间隔时间
  107. });
  108. $("#product-name-font").html(dt.data.product.productName);
  109. if(marquee != '' && dt.data.product.productDiscount == '328000') {
  110. $('<span class="mui-h6">购买即赠3年滤芯</span>').insertAfter('.price-sp')
  111. }
  112. let accPrice=accDiv(dt.data.product.productDiscount, 100);
  113. //拼单=2 accPrice 拼单价
  114. if(dt.data.product.productIsSpell==2){
  115. accPrice=accDiv(dt.data.colorList[0].colorSpellAmount, 100);
  116. $('#add-cart-div,#shopp-div').hide();
  117. $('#add-cart-div').before('<div class="mui-table-cell mui-col-xs-4 table-middle div-btn-buy" id="btn-buy">¥'+accDiv(dt.data.product.productDiscount, 100)+'<br/>单独购买</div><div class="mui-table-cell mui-col-xs-4 table-middle div-btn-ping" id="btn-ping">¥'+accDiv(dt.data.product.colorSpellAmount, 100)+'<br/>发起拼单</div>');
  118. }
  119. $("#product-price-span").html("¥" + accPrice);
  120. //原价
  121. if(yuanjia == '') {
  122. yuanjia = '<s>¥' + accDiv(dt.data.product.productPrice, 100) + '</s>'
  123. }
  124. $("#product-price-s").html(yuanjia);
  125. $("#product-access-span").html("已售"+dt.data.product.productSalesnum + "件");
  126. if(dt.data.product.productStatus == 1) {
  127. pStatus = true
  128. } else {
  129. pStatus = false
  130. }
  131. //添加颜色列表弹窗
  132. var btn = '<div class="mui-table"><div class="mui-table-cell mui-col-xs-6 table-middle mui-hidden"><button class="mui-btn my-btn-block my-btn-add-cart">加入购物车</button></div><div class="mui-table-cell mui-col-xs-6 table-middle mui-hidden"><button class="mui-btn my-btn-block my-btn-buy-know">立即购买</button></div><div class="mui-table-cell mui-col-xs-12 table-middle mui-hidden buy-box"><button class="mui-btn my-btn-block my-btn-buy-know">确定</button></div><div class="mui-table-cell mui-col-xs-12 table-middle mui-hidden ping-box"><button class="mui-btn my-btn-block my-btn-ping-know">确定</button></div></div>';
  133. var colorList = '',
  134. pic = '',
  135. price = '';
  136. mui.each(dt.data.colorList, function() { //遍历产品颜色集合
  137. var active = '';
  138. if(colorId == this.colorId) {
  139. active = 'active'; //弹窗选中当前颜色
  140. $(".select-color span").text(this.colorName); //当前颜色
  141. pic = this.colorImg; //当前图片
  142. price = '¥' + (this.colorDiscount / 100).toFixed(2);
  143. if(dt.data.product.productIsSpell==2){
  144. price=accPrice; //拼单价
  145. }
  146. $(".price").text(price); //当前价格
  147. colorName = this.colorName;
  148. }
  149. colorList += '<span class="pro-select-color ' + active + '" name="' + this.colorId + '" src="' + this.colorImg + '" accPrice="'+dt.data.colorList[0].colorSpellAmount+'" price="' + this.colorDiscount + '">' + this.colorName + '</span>';
  150. });
  151. $("body").append('<div class="my-picker"><ul class="mui-table-view mui-table-view-striped mui-table-view-condensed my-grid-view-no"><li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-3 table-middle"><img class="dalog-proPic" style="background: #f8f8f8;" width="90%" src="' + pic + '" /></div><div class="mui-table-cell mui-col-xs-8 table-middle"><div>' + dt.data.product.productName + '</div><h6 class="dalog-colorPresent" style="line-height: 14px;"></h6><div class="dalog-proPrice">¥' + price + '</div></div></div></li><li class="mui-table-view-cell">选择颜色</li><li style="padding: 0 15px;"><div class="mui-table" ><div class="mui-table-cell mui-col-xs-12">' + colorList + '</div></div></li><li class="mui-table-view-cell"><div class="mui-table"><div class="mui-table-cell mui-col-xs-6">选择数量</div><div class="mui-table-cell mui-text-right mui-col-xs-6"><div class="mui-numbox" data-numbox-min="0" data-numbox-max="99" name="0"><button class="mui-btn mui-btn-numbox-minus" type="button">-</button><input class="mui-input-numbox" type="number" value="0" readonly="readonly" disabled="disabled"><button class="mui-btn mui-btn-numbox-plus" type="button">+</button></div></div></div></li></ul><br />' + btn + '<span class="iconfont icon-guanbi"></span></div>');
  152. if(colorId == 310) {
  153. $(".dalog-colorPresent").css("color", "red");
  154. }
  155. getColorNumber(); //获取单个购物项id数量
  156. mui(".mui-numbox").numbox(); //激活加减按钮组合
  157. } else {
  158. mui.confirm(dt.message + '是否重新加载页面?', '提示', btnArray, function(e) {
  159. if(e.index == 1) {
  160. location.reload(true)
  161. }
  162. })
  163. }
  164. }
  165. },
  166. error: function(xhr, type, errorThrown) {
  167. console.log(xhr)
  168. }
  169. })
  170. };
  171. function selectProductImageText(productId) {
  172. var btnArray = ['否', '是'];
  173. $.ajax(base_path + '/product/getPictureByProductId?productId=' + productId, {
  174. dataType: 'json',
  175. type: 'POST',
  176. timeout: 15000,
  177. xhrFields: {
  178. withCredentials: true
  179. },
  180. crossDomain: true,
  181. success: function(dt) {
  182. if(dt.isRedirect) {
  183. location.href = dt.redirectURL;
  184. } else {
  185. if(dt.status) {
  186. if(dt.data != null) {
  187. $("#product-param-img").html(dt.data.imagetextContext)
  188. } else {
  189. $("#item2").empty();
  190. mui.alert('商品详情获取失败')
  191. }
  192. } else {
  193. mui.confirm(dt.message + '是否刷新页面?', '提示', btnArray, function(e) {
  194. if(e.index == 1) {
  195. location.reload(true)
  196. }
  197. })
  198. }
  199. }
  200. },
  201. error: function(xhr, type, errorThrown) {
  202. mui.confirm('您的网络开小差了,是否重新加载页面?', '提示', btnArray, function(e) {
  203. if(e.index == 1) {
  204. location.reload(true)
  205. }
  206. })
  207. }
  208. })
  209. };
  210. //跳转购物车
  211. $(document).on('tap', '.cart', function() {
  212. location.href = 'shopping_cart.html';
  213. });
  214. $(window).on("scroll", function() {
  215. if($(window).scrollTop() > 120) {
  216. $(".return").show()
  217. } else {
  218. $(".return").hide()
  219. }
  220. });
  221. //callback为用户点击蒙版时自动执行的回调;
  222. var mask = mui.createMask(function() {
  223. $(".my-picker").removeClass("active"); //隐藏颜色列表
  224. });
  225. //加入购物车弹出层
  226. var btnTap = '';
  227. var cartStatus = "";
  228. $(document).on('tap', '.mui-bar-tab .div-btn-buy-cart,.mui-bar-tab .div-btn-buy-know,.select-color,#btn-buy', function() {
  229. if($(".my-picker").length > 0) { //判断是否已有弹窗
  230. getColorNumber(); //重新获取单个购物项id数量
  231. var pullcolor = $('.pro-select-color.active');
  232. colorId = pullcolor.attr("name");
  233. $(".mui-btn-numbox-minus,.mui-btn-numbox-plus").removeAttr("disabled");
  234. getColorNumber(); //重新获取单个购物项id数量
  235. $(".dalog-proPic").attr("src", pullcolor.attr("src")); //替换当前选择颜色的图片
  236. colorName = pullcolor.text();
  237. fenxiang();
  238. btnTap='';
  239. $('.dalog-proPrice').text('¥'+accDiv(parseInt(pullcolor.attr('price')),100));
  240. var th = $(this);
  241. mask.show(); //显示遮罩层
  242. //判断点击进来的按钮
  243. if(th.hasClass("select-color") || th.hasClass("div-btn-buy")) {
  244. $(".my-picker>.mui-table .mui-col-xs-12").addClass("mui-hidden");
  245. $(".my-picker>.mui-table .mui-col-xs-6").removeClass("mui-hidden");
  246. } else {
  247. $(".my-picker>.mui-table .mui-col-xs-6,.my-picker>.mui-table .ping-box").addClass("mui-hidden");
  248. $(".my-picker>.mui-table .buy-box").removeClass("mui-hidden");
  249. if(th.hasClass("div-btn-buy-cart")) {
  250. btnTap = 'addCart';
  251. cartStatus = null;
  252. } else {
  253. btnTap = 'buyknow';
  254. cartStatus = 1;
  255. console.log(btnTap)
  256. }
  257. }
  258. $(".my-picker").addClass("active"); //显示颜色列表弹窗
  259. console.log(btnTap)
  260. }
  261. });
  262. //发起拼单
  263. $(document).on('tap', '#btn-ping,#btn-ping-1', function() {
  264. if($(".my-picker").length > 0) { //判断是否已有弹窗
  265. $('.dalog-proPrice').text('¥'+accDiv(parseInt($('.pro-select-color.active').attr('accprice')),100));
  266. $(".mui-input-numbox").val(1);
  267. $(".mui-btn-numbox-minus,.mui-btn-numbox-plus").attr("disabled", "disabled");
  268. var th = $(this);
  269. mask.show(); //显示遮罩层
  270. $(".my-picker>.mui-table .mui-col-xs-6,.my-picker>.mui-table .buy-box").addClass("mui-hidden");
  271. $(".my-picker>.mui-table .ping-box").removeClass("mui-hidden");
  272. btnTap = 'ping';
  273. cartStatus = 1;
  274. $(".my-picker").addClass("active"); //显示颜色列表弹窗
  275. }
  276. });
  277. //切换颜色
  278. $(document).on('tap', '.pro-select-color', function() {
  279. var th = $(this);
  280. colorId = th.attr("name");
  281. th.addClass("active").siblings().removeClass("active"); //选中自己再把前后的兄弟元素取消选中
  282. if(btnTap=='ping'){
  283. $(".mui-input-numbox").val(1);
  284. $(".mui-btn-numbox-minus,.mui-btn-numbox-plus").attr("disabled", "disabled");
  285. }else{
  286. $(".select-color span").text(th.text());
  287. getColorNumber(); //重新获取单个购物项id数量
  288. }
  289. $(".dalog-proPic").attr("src", th.attr("src")); //替换当前选择颜色的图片
  290. colorName = th.text();
  291. fenxiang();
  292. });
  293. //弹窗的确定
  294. $(document).on('tap', '.my-picker .my-btn-buy-know,.my-picker .my-btn-add-cart,.my-picker .my-btn-ping-know', function() {
  295. let th=$(this)
  296. var number = $(".mui-input-numbox").val();
  297. if(number != 0) {
  298. if(th.hasClass('my-btn-add-cart')){
  299. btnTap = 'addCart'
  300. }else if(th.hasClass('my-btn-ping-know')){
  301. btnTap = 'ping'
  302. }else{
  303. btnTap = 'buyknow'
  304. }
  305. add();
  306. console.log(btnTap)
  307. if(btnTap == 'addCart') {
  308. mui.toast('加入购物车成功!');
  309. }
  310. } else {
  311. mui.toast('请选择商品数量!');
  312. }
  313. });
  314. //判断是加减删,ajax分别调用不同的URLclearing.html
  315. function add() {
  316. var parameter = {}; //ajax参数json集合
  317. var src = '/cart/addProductToCart';
  318. if(typeof($(".my-picker .pro-select-color.active").attr("name")) != "undefined") {
  319. parameter["productId"] = productId; //产品id
  320. parameter["colorId"] = $(".my-picker .pro-select-color.active").attr("name"); //颜色id
  321. console.log($(".mui-input-numbox").val() - $(".mui-numbox").attr("name") < 0)
  322. if($(".mui-input-numbox").val() - $(".mui-numbox").attr("name") < 0) {
  323. if($(".mui-input-numbox").val() == 0) {
  324. src = '/cart/deleteCart';
  325. addCart(parameter, src)
  326. } else {
  327. parameter["cartNum"] = Math.abs($(".mui-input-numbox").val() - $(".mui-numbox").attr("name"));
  328. src = '/cart/deleteCart';
  329. addCart(parameter, src)
  330. }
  331. getCartNum();
  332. } else if($(".mui-input-numbox").val() - $(".mui-numbox").attr("name") > 0) {
  333. parameter["cartNum"] = Math.abs($(".mui-input-numbox").val() - $(".mui-numbox").attr("name"));
  334. addCart(parameter, src);
  335. getCartNum();
  336. } else {
  337. if($(".mui-input-numbox").val() < 1) {
  338. mui.toast("请选择商品数量!"); //如果数量为0提示用户去选
  339. } else {
  340. $(".my-picker").removeClass("active"); //隐藏颜色列表
  341. $(".mui-backdrop").remove(); //移除遮罩层
  342. if(btnTap == 'buyknow') {
  343. if(!window.sessionStorage) {
  344. mui.alert("您的浏览器不支持sessionStorage");
  345. } else {
  346. //自定义json数据
  347. var obj = {
  348. text: [$(".mui-numbox").attr("cartid")]
  349. };
  350. //json格式化插入 购物项id集合
  351. sessionStorage.setItem('pay_data', JSON.stringify(obj));
  352. location.href = 'clearing.html?cartId=' + $(".mui-numbox").attr("cartid");
  353. }
  354. }else if(btnTap=='ping'){
  355. if(!window.sessionStorage) {
  356. mui.alert("您的浏览器不支持sessionStorage");
  357. } else {
  358. //自定义json数据
  359. var obj = {
  360. text: [$(".mui-numbox").attr("cartid")],
  361. isSpell:1
  362. };
  363. let orderStr='';
  364. if(orderId!='' && orderId!=null){
  365. orderStr='&orderId='+orderId;
  366. obj[orderId]=orderId;
  367. }
  368. //json格式化插入 购物项id集合
  369. sessionStorage.setItem('pay_data', JSON.stringify(obj));
  370. console.log(btnTap)
  371. location.href = 'clearing.html?cartId=' + $(".mui-numbox").attr("cartid") + '&isSpell=1'+orderStr;
  372. }
  373. }
  374. }
  375. }
  376. } else {
  377. mui.alert("没有获取到产品颜色!");
  378. }
  379. };
  380. //商品加减删三个ajax接口集合,parameter参数,src接口的路径
  381. function addCart(parameter, src) {
  382. $.ajax(base_path + src + '?dates=' + new Date().getTime(), {
  383. data: parameter,
  384. dataType: 'json',
  385. xhrFields: {
  386. withCredentials: true
  387. },
  388. crossDomain: true,
  389. type: 'get',
  390. timeout: 15000,
  391. success: function(dt) {
  392. if(dt.isRedirect) {
  393. location.href = dt.redirectURL;
  394. } else {
  395. if(dt.status) {
  396. getColorNumber(); //重新获取单个购物项id数量
  397. getCartNum(); //重新获取购物车总数量
  398. if(btnTap == 'buyknow') {
  399. if($(".mui-input-numbox").val() > 0) {
  400. $(".my-picker").removeClass("active"); //隐藏颜色列表
  401. $(".mui-backdrop").remove(); //移除遮罩层
  402. if(!window.sessionStorage) {
  403. mui.alert("您的浏览器不支持sessionStorage");
  404. } else {
  405. getColorNumber();
  406. setTimeout(function() {
  407. //自定义json数据
  408. var obj = {
  409. text: [$(".mui-numbox").attr("cartid")]
  410. };
  411. //json格式化插入 购物项id集合
  412. sessionStorage.setItem('pay_data', JSON.stringify(obj));
  413. location.href = 'clearing.html?cartId=' + $(".mui-numbox").attr("cartid") + "&tiemstamp=" + new Date().getTime()
  414. }, 500);
  415. }
  416. } else {
  417. mui.toast("请选择商品数量!");
  418. }
  419. } else {
  420. $(".my-picker").removeClass("active"); //隐藏颜色列表
  421. $(".mui-backdrop").remove(); //移除遮罩层
  422. }
  423. } else {
  424. mui.alert("添加失败!");
  425. }
  426. }
  427. },
  428. error: function(xhr, type, errorThrown) {
  429. console.log(xhr);
  430. mui.alert("添加失败!网络错误");
  431. }
  432. });
  433. };
  434. //获取单个购物项id数量
  435. function getColorNumber() {
  436. $.ajax(base_path + '/cart/getCartColorNum?dates=' + new Date().getTime(), {
  437. data: {
  438. "colorId": colorId
  439. },
  440. dataType: 'json',
  441. xhrFields: {
  442. withCredentials: true
  443. },
  444. crossDomain: true,
  445. type: 'get', //减少数量后台限制用get
  446. timeout: 15000,
  447. success: function(dt) {
  448. if(dt.isRedirect) {
  449. location.href = dt.redirectURL;
  450. } else {
  451. if(dt.status) {
  452. if(typeof(dt.data) != "undefined") {
  453. $(".mui-input-numbox").val(dt.data.cartNum);
  454. $(".mui-numbox").attr("name", dt.data.cartNum);
  455. $(".mui-numbox").attr("cartid", dt.data.cartId);
  456. if(dt.data.cartNum > 0) {
  457. $(".mui-btn-numbox-minus").removeAttr("disabled");
  458. } else {
  459. $(".mui-btn-numbox-minus").attr("disabled", "disabled");
  460. }
  461. } else {
  462. $(".mui-numbox").removeAttr("cartid");
  463. $(".mui-numbox").attr("name", "0");
  464. $(".mui-input-numbox").val(1);
  465. $(".mui-btn-numbox-minus").attr("disabled", "disabled");
  466. }
  467. } else {
  468. console.log("失败!");
  469. }
  470. }
  471. },
  472. error: function(xhr, type, errorThrown) {
  473. console.log(xhr);
  474. }
  475. });
  476. };
  477. //关闭弹窗
  478. $(document).on('tap', '.icon-guanbi', function() {
  479. $(".mui-backdrop").remove(); //移除遮罩层
  480. $(".my-picker").removeClass("active"); //隐藏弹窗
  481. });
  482. //分享弹窗
  483. $(document).on('tap', '.share_wechat', function() {
  484. $(".share-dalog").show();
  485. });
  486. //关闭分享弹窗
  487. $(document).on('tap', '.share-dalog', function() {
  488. $(this).hide();
  489. });
  490. //分享
  491. function fenxiang() {
  492. var url = domanUrl + "/watero/wechat/chanpin_details.html?productId=" + productId + '&colorId=' + colorId + "&shareOpenid=" + shareOpenid;
  493. window.repleFlag = false;
  494. window.wxFriend = {
  495. "appId": "",
  496. "imgUrl": domanUrl + '/watero/wechat/images/index.jpg',
  497. "link": url,
  498. "desc": "美国标准,4级净化,5档水温,废水比3:1,水质TDS智能显示。",
  499. "title": "Watero,美国高端净水专家,4级净化,5档水温,免安装饮水一体机。",
  500. "netError": "您的网络异常,请刷新重试!如多次刷新无效,请向我们反应 ~",
  501. "shareTimeSuccess": "分享成功",
  502. "shareTimeCancel": "已取消分享",
  503. "shareAppSuccess": "分享成功!",
  504. "shareAppCancel": "已取消分享"
  505. };
  506. getConfig();
  507. }
  508. $(document).on('tap', '.go-home', function() {
  509. location.href='index.html';
  510. });