shopList.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  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. }else{
  24. $('.totalFooter').hide();
  25. }
  26. }
  27. };
  28. function list(data){
  29. let divs=[];
  30. data.map((item)=>{
  31. divs.push(`<li dataId="${item.id}" type="${item.type}">
  32. <p><span class="companyImg"></span>${'有限公司'}</p>
  33. <div class="shopBox">
  34. <div class="shopTr">
  35. <div class="checkIcon">
  36. <span class="checkImg checkNoImg"></span>
  37. <input type="checkbox" class='checkSingle'>
  38. </div>
  39. <div class="tdImg">
  40. <img src="${item.img}"/>
  41. <div class="tdText">
  42. <p>${unescape(item.name)}</p>
  43. </div>
  44. </div>
  45. </div>
  46. <div><span class="price">${item.price?'¥'+item.price:'面议'}</span></div>
  47. <div class="inpG">
  48. <button class="reduce">-</button>
  49. <input type="text" class="number" value="${item.number}">
  50. <button class="add">+</button>
  51. </div>
  52. <div><p class="priceTotal">${parseInt(item.price)>0?'¥'+parseInt(item.price)*item.number:'面议'}</p></div>
  53. <div><a class="del">删除</a></div>
  54. </div>
  55. </li>
  56. ` )
  57. })
  58. $('.shopLists').html(divs);
  59. }
  60. //数量加减;
  61. var nub=0;
  62. function add(){
  63. $('.add').click(function(){
  64. nub = $(this).siblings('.number').val();
  65. nub++;
  66. if(nub>99){
  67. nub=99
  68. }
  69. $(this).siblings('.number').val(nub);
  70. let index=$(this).parents('li').index();
  71. shopData.data[index].number=nub;
  72. nubTol();
  73. lacStor();
  74. })
  75. $('.reduce').click(function(){
  76. nub = $(this).siblings('.number').val();
  77. nub--;
  78. if(nub<1){
  79. nub=1
  80. }
  81. $(this).siblings('.number').val(nub);
  82. let index=$(this).parents('li').index();
  83. shopData.data[index].number=nub;
  84. nubTol();
  85. lacStor();
  86. })
  87. $('.number').keyup(function(){
  88. let val = $(this).val();
  89. if(isNaN(val)){
  90. $(this).val(1)
  91. };
  92. if(val>99){
  93. $(this).val(99)
  94. };
  95. if(val<1){
  96. $(this).val(1)
  97. };
  98. })
  99. }
  100. //单选图像处理
  101. $('.checkSingle').prop('checked',false);
  102. $('.checkboxAll').prop('checked',false);
  103. var nub=0;
  104. function selectFun(){
  105. let checkArr =[];
  106. $('.checkSingle').click(function(){
  107. let checks = $(this).prop('checked');
  108. if(checks){
  109. checkArr.push(checks);
  110. $(this).parents('li').addClass('active')
  111. $(this).siblings('.checkImg').removeClass('checkNoImg');
  112. }else{
  113. checkArr.pop();
  114. $(this).parents('li').removeClass('active')
  115. $(this).siblings('.checkImg').addClass('checkNoImg');
  116. }
  117. if(checkArr.length==$('.shopLists li').length){
  118. $('.checkboxAll').prop('checked',true);
  119. $('.checkboxAll').siblings('.checkImg').removeClass('checkNoImg')
  120. }else{
  121. $('.checkboxAll').prop('checked',false);
  122. $('.checkboxAll').siblings('.checkImg').addClass('checkNoImg')
  123. }
  124. if(checkArr.length){
  125. $('.orderOk').addClass('active');
  126. }else{
  127. $('.orderOk').removeClass('active');
  128. }
  129. nubTol();
  130. })
  131. //全选
  132. $('.checkboxAll').click(function(){
  133. let checkS = $(this).prop('checked');
  134. if(checkS){
  135. $('.shopLists li').addClass('active');
  136. $('.checkSingle').prop('checked',true);
  137. $('.checkImg').removeClass('checkNoImg');
  138. $('.orderOk').addClass('active');
  139. }else{
  140. checkArr=[];
  141. $('.checkSingle').prop('checked',false);
  142. $('.checkImg').addClass('checkNoImg');
  143. $('.shopLists li').removeClass('active');
  144. $('.orderOk').removeClass('active');
  145. }
  146. nubTol()
  147. })
  148. }
  149. //数量计算
  150. function nubTol(){
  151. let liCheck = $('.shopLists li.active'),nub=0,
  152. licheckOk = $('.shopLists li'),totalNub=0;
  153. for(let i =0;i<liCheck.length;i++){
  154. let num = liCheck.eq(i).find('.number').val();
  155. nub+=parseInt(num);
  156. }
  157. for(let i =0;i<licheckOk.length;i++){
  158. let num = licheckOk.eq(i).find('.number').val();
  159. totalNub+=parseInt(num);
  160. }
  161. $('.numberTotal').text(totalNub);
  162. $('.nubTotal').text(nub)
  163. }
  164. //删除
  165. $('.del').click(function(){
  166. $(this).parents('li').remove();
  167. lacStor()
  168. })
  169. function lacStor(){
  170. let lis= $('.shopLists li'),shopArr=[];
  171. for(let i=0;i<lis.length;i++){
  172. for(let j=0;j<(shopData.data).length;j++){
  173. if(lis.eq(i).attr('dataid')==(shopData.data)[j].id){
  174. shopArr.push((shopData.data)[j])
  175. }
  176. }
  177. }
  178. nubTol();
  179. let datas=new Object();
  180. datas.data=shopArr;
  181. if(!(datas.data.length)){
  182. $('.totalFooter').hide();
  183. $('.checkboxAll').prop('checked',false);
  184. $('.checkboxAll').siblings('.checkImg').addClass('checkNoImg');
  185. }
  186. let setData = JSON.stringify(datas);
  187. //本地存储
  188. localStorage.setItem('shopList',setData);
  189. }
  190. //删除选中的商品
  191. $('.btnDel').click(function(){
  192. if($('.shopLists li.active').length){
  193. $('.shopLists li.active').remove();
  194. lacStor();
  195. }else{
  196. msg('请选择需要删除的商品.')
  197. }
  198. })
  199. //提交订单
  200. $('.totalFooter .orderOk').click(function(){
  201. let lis= $('.shopLists li.active'),list=[];
  202. if(!lis.length){
  203. msg('亲,请选择商品!')
  204. return;
  205. }
  206. for(let i=0;i<lis.length;i++){
  207. let id=lis.eq(i).attr('dataid'),
  208. number=lis.eq(i).find('.number').val(),
  209. type=lis.eq(i).attr('type');
  210. list.push({
  211. commodityId:id,
  212. commodityQuantity:number,
  213. commodityType:type,
  214. orderChannel:1
  215. })
  216. };
  217. $.ajax({
  218. method: "get",
  219. dataType: "json",
  220. url: globalConfig.context + "/api/user/jtOrder/apply",
  221. data: {
  222. orderList:JSON.stringify(list)
  223. },
  224. success: function (data) {
  225. if(data&&data.error.length){
  226. }else{
  227. };
  228. }
  229. })
  230. })
  231. //提示框渐隐函数
  232. function msg(txt) {
  233. if($('.smg').hasClass('active')){
  234. return ;
  235. }
  236. $('.smg').addClass('active');
  237. var lit = $('#msg').val(txt);
  238. setTimeout(function () {
  239. $('.smg').removeClass('active');
  240. $('#msg').val('');
  241. }, 2000)
  242. }
  243. })