shopList.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  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. if(checks){
  121. checkArr.push(checks);
  122. $(this).parents('li').addClass('active')
  123. $(this).siblings('.checkImg').removeClass('checkNoImg');
  124. }else{
  125. checkArr.pop();
  126. $(this).parents('li').removeClass('active')
  127. $(this).siblings('.checkImg').addClass('checkNoImg');
  128. }
  129. if(checkArr.length==$('.shopLists li').length){
  130. $('.checkboxAll').prop('checked',true);
  131. $('.checkboxAll').siblings('.checkImg').removeClass('checkNoImg')
  132. }else{
  133. $('.checkboxAll').prop('checked',false);
  134. $('.checkboxAll').siblings('.checkImg').addClass('checkNoImg')
  135. }
  136. if(checkArr.length){
  137. $('.orderOk').addClass('active');
  138. }else{
  139. $('.orderOk').removeClass('active');
  140. }
  141. nubTol();
  142. })
  143. //全选
  144. $('.checkboxAll').click(function(){
  145. let checkS = $(this).prop('checked');
  146. if(checkS){
  147. $('.shopLists li').addClass('active');
  148. $('.checkSingle').prop('checked',true);
  149. $('.checkImg').removeClass('checkNoImg');
  150. $('.orderOk').addClass('active');
  151. }else{
  152. checkArr=[];
  153. $('.checkSingle').prop('checked',false);
  154. $('.checkImg').addClass('checkNoImg');
  155. $('.shopLists li').removeClass('active');
  156. $('.orderOk').removeClass('active');
  157. }
  158. nubTol()
  159. })
  160. }
  161. //数量计算
  162. function nubTol(){
  163. let liCheck = $('.shopLists li.active'),nub=0,
  164. licheckOk = $('.shopLists li'),totalNub=0;
  165. for(let i =0;i<liCheck.length;i++){
  166. let num = liCheck.eq(i).find('.number').val();
  167. nub+=parseInt(num);
  168. }
  169. for(let i =0;i<licheckOk.length;i++){
  170. let num = licheckOk.eq(i).find('.number').val();
  171. totalNub+=parseInt(num);
  172. }
  173. $()
  174. $('.numberTotal').text(totalNub);
  175. $('.nubTotal').text(nub)
  176. }
  177. //删除
  178. $('.del').click(function(){
  179. $(this).parents('li').remove();
  180. lacStor()
  181. })
  182. function lacStor(){
  183. let lis= $('.shopLists li'),shopArr=[];
  184. for(let i=0;i<lis.length;i++){
  185. for(let j=0;j<(shopData.data).length;j++){
  186. if(lis.eq(i).attr('dataid')==(shopData.data)[j].id){
  187. shopArr.push((shopData.data)[j])
  188. }
  189. }
  190. }
  191. nubTol();
  192. let datas=new Object();
  193. datas.data=shopArr;
  194. if(!(datas.data.length)){
  195. $('.totalFooter').hide();
  196. $('.shopNull').show();
  197. $('.checkboxAll').prop('checked',false);
  198. $('.checkboxAll').siblings('.checkImg').addClass('checkNoImg');
  199. }
  200. let setData = JSON.stringify(datas);
  201. //本地存储
  202. localStorage.setItem('shopList',setData);
  203. }
  204. //删除选中的商品
  205. $('.btnDel').click(function(){
  206. if($('.shopLists li.active').length){
  207. $('.shopLists li.active').remove();
  208. lacStor();
  209. }else{
  210. msg('请选择需要删除的商品.')
  211. }
  212. })
  213. //提交订单
  214. $('.totalFooter .orderOk').click(function(){
  215. let lis= $('.shopLists li.active'),list=[];
  216. if(!lis.length){
  217. msg('亲,请选择商品!')
  218. return;
  219. }
  220. for(let i=0;i<lis.length;i++){
  221. let id=lis.eq(i).attr('dataid'),
  222. number=lis.eq(i).find('.number').val(),
  223. type=lis.eq(i).attr('type');
  224. list.push({
  225. commodityId:id,
  226. commodityQuantity:number,
  227. commodityType:type,
  228. orderChannel:1
  229. })
  230. };
  231. $.ajax({
  232. method: "post",
  233. dataType: "json",
  234. url: globalConfig.context + "/api/user/jtOrder/apply",
  235. data: {
  236. orderList:JSON.stringify(list)
  237. },
  238. success: function (data) {
  239. if(data&&data.error.length){
  240. remask(false,data.error[0].message)
  241. }else{
  242. $('.shopLists li.active').remove('');
  243. lacStor();
  244. remask(true,data.data)
  245. };
  246. }
  247. })
  248. })
  249. function remask(state,data){
  250. if(state){
  251. $('.shopMarsk').show();
  252. $('.shopMarsk .shopOrderCancel').hide();
  253. let list =[];
  254. data.map(item=>{
  255. list.push(`
  256. <p>订单号 : <span>${item.orderNo}</span></p>
  257. `)
  258. })
  259. $('.orderNoList').html(list.join(''));
  260. }else{
  261. $('.shopMarsk').show();
  262. $('.shopMarsk .shopOrderOk').hide();
  263. $('.orderNumber').text(data);
  264. };
  265. var t=3;
  266. var time =setInterval(()=>{
  267. t--;
  268. $('.shopTime span').text(t);
  269. if(t<=0){
  270. clearInterval(time);
  271. $('.shopMarsk').hide();
  272. }
  273. },1000);
  274. $('.shopClose').click(function(){
  275. clearInterval(time);
  276. $('.shopMarsk').hide();
  277. })
  278. }
  279. //提示框渐隐函数
  280. function msg(txt) {
  281. if($('.smg').hasClass('active')){
  282. return ;
  283. }
  284. $('.smg').addClass('active');
  285. var lit = $('#msg').val(txt);
  286. setTimeout(function () {
  287. $('.smg').removeClass('active');
  288. $('#msg').val('');
  289. }, 2000)
  290. }
  291. })