shopList.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. // import 'css/bootstrap.less';
  2. // import 'bootstrap/dist/js/bootstrap.js';
  3. import 'css/newMenu/public.css';
  4. import 'css/newMenu/header.css'
  5. import 'css/newMenu/shopList.css';
  6. import 'js/public.js';
  7. $(function(){
  8. var shopData={};
  9. init();
  10. function init(){
  11. listData();
  12. add();
  13. selectFun()
  14. };
  15. function listData(){
  16. var data = localStorage.getItem('shopList');
  17. if(data){
  18. let shops = JSON.parse(data);
  19. shopData.data=shops.data
  20. list(shops.data);
  21. if((shops.data).length){
  22. $('.totalFooter').show();
  23. $('.shopNull').hide();
  24. }else{
  25. $('.totalFooter').hide();
  26. $('.shopNull').show();
  27. }
  28. }else{
  29. $('.totalFooter').hide();
  30. $('.shopNull').show();
  31. }
  32. };
  33. function list(data){
  34. let divs=[];
  35. data.map((item)=>{
  36. divs.push(`<li dataId="${item.id}" type="${item.type}">
  37. <p><span class="companyImg"></span>${item.companyName?item.companyName:''}</p>
  38. <div class="shopBox">
  39. <div class="shopTr">
  40. <div class="checkIcon">
  41. <span class="checkImg checkNoImg"></span>
  42. <input type="checkbox" class='checkSingle'>
  43. </div>
  44. <div class="tdImg">
  45. <img src="${item.img}"/>
  46. <div class="tdText">
  47. <p>${unescape(item.name)}</p>
  48. </div>
  49. </div>
  50. </div>
  51. <div><span class="price">${parseInt(item.price)>0?parseInt(item.price).toFixed(2)+'万元':'面议'}</span></div>
  52. <div class="inpG">
  53. <button class="reduce">-</button>
  54. <input type="text" class="number" value="${item.number}">
  55. <button class="add">+</button>
  56. </div>
  57. <div><p class="priceTotal">${parseInt(item.price)>0?(parseInt(item.price)*parseInt(item.number)).toFixed(2)+'万元':'面议'}</p></div>
  58. <div><a class="del">删除</a></div>
  59. </div>
  60. </li>
  61. ` )
  62. })
  63. $('.shopLists').html(divs);
  64. }
  65. //数量加减;
  66. var nub=0;
  67. function add(){
  68. $('.add').click(function(){
  69. nub = $(this).siblings('.number').val();
  70. nub++;
  71. if(nub>99){
  72. nub=99
  73. }
  74. $(this).siblings('.number').val(nub);
  75. let price = $(this).parents('.shopBox').find('.price').text();
  76. $(this).parents('.shopBox').find('.priceTotal').text(parseInt(nub)*parseInt(price)>0?(parseInt(nub)*parseInt(price)).toFixed(2)+'万元':'面议')
  77. let index=$(this).parents('li').index();
  78. shopData.data[index].number=nub;
  79. nubTol();
  80. lacStor();
  81. })
  82. $('.reduce').click(function(){
  83. nub = $(this).siblings('.number').val();
  84. nub--;
  85. if(nub<1){
  86. nub=1
  87. }
  88. $(this).siblings('.number').val(nub);
  89. let price = $(this).parents('.shopBox').find('.price').text();
  90. $(this).parents('.shopBox').find('.priceTotal').text(parseInt(nub)*parseInt(price)>0?(parseInt(nub)*parseInt(price)).toFixed(2)+'万元':'面议')
  91. let index=$(this).parents('li').index();
  92. shopData.data[index].number=nub;
  93. nubTol();
  94. lacStor();
  95. })
  96. $('.number').keyup(function(){
  97. let val = $(this).val();
  98. if(isNaN(val)){
  99. $(this).val(1)
  100. };
  101. if(val>99){
  102. $(this).val(99)
  103. };
  104. if(val<1){
  105. $(this).val(1)
  106. };
  107. let price = $(this).parents('.shopBox').find('.price').text();
  108. let vals = $(this).val();
  109. $(this).parents('.shopBox').find('.priceTotal').text(parseInt(vals)*parseInt(price)>0?(parseInt(vals)*parseInt(price)).toFixed(2)+'万元':'面议')
  110. })
  111. }
  112. //单选图像处理
  113. $('.checkSingle').prop('checked',false);
  114. $('.checkboxAll').prop('checked',false);
  115. var nub=0;
  116. function selectFun(){
  117. let checkArr =[];
  118. $('.checkSingle').click(function(){
  119. let checks = $(this).prop('checked');
  120. let checkList = $('.shopBox .checkSingle:checked');
  121. if(checks){
  122. checkArr.push(checks);
  123. $(this).parents('li').addClass('active')
  124. $(this).siblings('.checkImg').removeClass('checkNoImg');
  125. }else{
  126. checkArr.pop();
  127. $(this).parents('li').removeClass('active')
  128. $(this).siblings('.checkImg').addClass('checkNoImg');
  129. }
  130. if(checkArr.length==$('.shopLists li').length){
  131. $('.checkboxAll').prop('checked',true);
  132. $('.checkboxAll').siblings('.checkImg').removeClass('checkNoImg')
  133. }else{
  134. $('.checkboxAll').prop('checked',false);
  135. $('.checkboxAll').siblings('.checkImg').addClass('checkNoImg')
  136. }
  137. if(checkList.length>0){
  138. $('.orderOk').addClass('active');
  139. }else{
  140. $('.orderOk').removeClass('active');
  141. }
  142. nubTol();
  143. })
  144. //全选
  145. $('.checkboxAll').click(function(){
  146. let checkS = $(this).prop('checked');
  147. if(checkS){
  148. $('.shopLists li').addClass('active');
  149. $('.checkSingle').prop('checked',true);
  150. $('.checkImg').removeClass('checkNoImg');
  151. $('.orderOk').addClass('active');
  152. }else{
  153. checkArr=[];
  154. $('.checkSingle').prop('checked',false);
  155. $('.checkImg').addClass('checkNoImg');
  156. $('.shopLists li').removeClass('active');
  157. $('.orderOk').removeClass('active');
  158. }
  159. nubTol()
  160. })
  161. }
  162. //数量计算
  163. function nubTol(){
  164. let liCheck = $('.shopLists li.active'),nub=0,
  165. licheckOk = $('.shopLists li'),totalNub=0;
  166. for(let i =0;i<liCheck.length;i++){
  167. let num = liCheck.eq(i).find('.number').val();
  168. nub+=parseInt(num);
  169. }
  170. for(let i =0;i<licheckOk.length;i++){
  171. let num = licheckOk.eq(i).find('.number').val();
  172. totalNub+=parseInt(num);
  173. }
  174. $()
  175. $('.numberTotal').text(totalNub);
  176. $('.nubTotal').text(nub)
  177. }
  178. //删除
  179. $('.del').click(function(){
  180. $(this).parents('li').remove();
  181. lacStor()
  182. })
  183. function lacStor(){
  184. let lis= $('.shopLists li'),shopArr=[];
  185. for(let i=0;i<lis.length;i++){
  186. for(let j=0;j<(shopData.data).length;j++){
  187. if(lis.eq(i).attr('dataid')==(shopData.data)[j].id){
  188. shopArr.push((shopData.data)[j])
  189. }
  190. }
  191. }
  192. nubTol();
  193. let datas=new Object();
  194. datas.data=shopArr;
  195. if(!(datas.data.length)){
  196. $('.totalFooter').hide();
  197. $('.shopNull').show();
  198. $('.checkboxAll').prop('checked',false);
  199. $('.checkboxAll').siblings('.checkImg').addClass('checkNoImg');
  200. }
  201. let setData = JSON.stringify(datas);
  202. //本地存储
  203. localStorage.setItem('shopList',setData);
  204. }
  205. //删除选中的商品
  206. $('.btnDel').click(function(){
  207. if($('.shopLists li.active').length){
  208. $('.shopLists li.active').remove();
  209. lacStor();
  210. }else{
  211. msg('请选择需要删除的商品.')
  212. }
  213. })
  214. //提交订单
  215. $('.totalFooter .orderOk').click(function(){
  216. let lis= $('.shopLists li.active'),list=[];
  217. if(!lis.length){
  218. msg('亲,请选择商品!')
  219. return;
  220. }
  221. for(let i=0;i<lis.length;i++){
  222. let id=lis.eq(i).attr('dataid'),
  223. number=lis.eq(i).find('.number').val(),
  224. type=lis.eq(i).attr('type');
  225. list.push({
  226. commodityId:id,
  227. commodityQuantity:number,
  228. commodityType:type,
  229. orderChannel:1
  230. })
  231. };
  232. $.ajax({
  233. method: "post",
  234. dataType: "json",
  235. url: globalConfig.context + "/api/user/jtOrder/apply",
  236. data: {
  237. orderList:JSON.stringify(list)
  238. },
  239. success: function (data) {
  240. if(data&&data.error.length){
  241. remask(false,data.error[0].message)
  242. }else{
  243. $('.shopLists li.active').remove('');
  244. lacStor();
  245. remask(true,data.data)
  246. };
  247. }
  248. })
  249. })
  250. function remask(state,data){
  251. if(state){
  252. $('.shopMarsk').show();
  253. $('.shopMarsk .shopOrderCancel').hide();
  254. let list =[];
  255. data.map(item=>{
  256. list.push(`
  257. <p>订单号 : <span>${item.orderNo}</span></p>
  258. `)
  259. })
  260. $('.orderNoList').html(list.join(''));
  261. }else{
  262. $('.shopMarsk').show();
  263. $('.shopMarsk .shopOrderOk').hide();
  264. $('.orderNumber').text(data);
  265. };
  266. var t=3;
  267. var time =setInterval(()=>{
  268. t--;
  269. $('.shopTime span').text(t);
  270. if(t<=0){
  271. clearInterval(time);
  272. $('.shopMarsk').hide();
  273. }
  274. },1000);
  275. $('.shopClose').click(function(){
  276. clearInterval(time);
  277. $('.shopMarsk').hide();
  278. })
  279. }
  280. //提示框渐隐函数
  281. function msg(txt) {
  282. if($('.smg').hasClass('active')){
  283. return ;
  284. }
  285. $('.smg').addClass('active');
  286. var lit = $('#msg').val(txt);
  287. setTimeout(function () {
  288. $('.smg').removeClass('active');
  289. $('#msg').val('');
  290. }, 2000)
  291. }
  292. })