cart.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. // 获取应用实例
  2. const {API} = require('../../service/api.js');
  3. Page({
  4. data:{
  5. cartList: [
  6. { id: 1, name: "商品A商品A商品A商品A商品A", price: 100, checked: false, count: 1 },
  7. { id: 2, name: "商品B商品B商品B商品B商品B", price: 200, checked: false, count: 2 },
  8. { id: 3, name: "商品C", price: 300, checked: false, count: 1 }
  9. ],
  10. isAllChecked: false, // 全选状态
  11. totalPrice:0,
  12. checkedCount:0,
  13. isManage:false, // 是否进入管理模式
  14. },
  15. // 获取购物车商品
  16. getCartProds(){
  17. API.getCartProds().then(res=>{
  18. this.handleCartsFn(res);
  19. })
  20. },
  21. // 处理商品函数
  22. handleCartsFn(value){
  23. let num = 0,checkIds=[];
  24. value.carts.forEach(item=>{
  25. if(item.checkFlag === "1"){
  26. num+=1;
  27. checkIds.push(item.id+'');
  28. }
  29. })
  30. this.setData({
  31. cartList:value.carts,
  32. totalPrice:value.checkedSumAmount,
  33. checkedIds:checkIds,
  34. isAllChecked:num === value.carts.length
  35. })
  36. },
  37. // 购物车选中/取消
  38. handleCheckboxFn(prodId){
  39. let {id} = this.data.cartList.filter(item=>item.id == prodId)[0];
  40. API.checkedCartProds({id}).then(res=>{
  41. this.handleCartsFn(res);
  42. })
  43. },
  44. // 选中/取消选中所有
  45. handleCheckedAll(){
  46. API.handleCheckedAll().then(res=>{
  47. this.handleCartsFn(res);
  48. })
  49. },
  50. // 取消选中所有
  51. handleUncheckedAll(){
  52. API.handleUncheckedAll().then(res=>{
  53. this.handleCartsFn(res);
  54. })
  55. },
  56. // 删除选中的商品
  57. deleteProd(){
  58. let ids = this.data.checkedIds;
  59. API.deleteCartProds({ids}).then(res=>{
  60. this.handleCartsFn(res);
  61. })
  62. },
  63. // 复选框变化事件
  64. handleCheckboxChange(e) {
  65. const oldCheckIds = this.data.checkedIds;
  66. const checkedIds = e.detail.value; // 选中的商品id数组(如 ['1', '2'])
  67. const cartList = this.data.cartList.map(item => {
  68. item.checkFlag = checkedIds.includes(item.id.toString());
  69. return item;
  70. });
  71. // 取消选中
  72. if(oldCheckIds.length > checkedIds.length){
  73. let id = oldCheckIds.filter(item=>!checkedIds.includes(item));
  74. this.handleCheckboxFn(id[0]);
  75. }else{
  76. this.handleCheckboxFn(checkedIds.at(-1));
  77. }
  78. this.setData({
  79. cartList,
  80. checkedIds,
  81. isAllChecked: checkedIds.length === this.data.cartList.length
  82. });
  83. this.calculateTotal(); // 计算总价
  84. },
  85. // 全选/取消全选
  86. toggleAll() {
  87. const isAllChecked = !this.data.isAllChecked;
  88. const cartList = this.data.cartList.map(item => {
  89. item.checkFlag = isAllChecked;
  90. return item;
  91. });
  92. this.setData({ cartList, isAllChecked });
  93. if(isAllChecked){
  94. this.handleCheckedAll();
  95. }else{
  96. this.handleUncheckedAll();
  97. }
  98. this.calculateTotal();
  99. },
  100. // 增加数量
  101. increaseCount(e) {
  102. const id = e.currentTarget.dataset.id;
  103. API.addCartProdCount({id}).then(res=>{
  104. this.handleCartsFn(res);
  105. })
  106. },
  107. // 减少数量
  108. decreaseCount(e) {
  109. const id = e.currentTarget.dataset.id;
  110. API.subCartProdCount({id}).then(res=>{
  111. this.handleCartsFn(res);
  112. })
  113. },
  114. // 计算总价和选中数量
  115. calculateTotal() {
  116. let totalPrice = 0;
  117. let checkedCount = 0;
  118. this.data.cartList.forEach(item => {
  119. if (item.checkFlag) {
  120. totalPrice += item.price * item.quantity;
  121. checkedCount++;
  122. }
  123. });
  124. this.setData({ totalPrice, checkedCount });
  125. },
  126. // 管理按钮
  127. manageBut(){
  128. this.setData({
  129. isManage:!this.data.isManage
  130. })
  131. },
  132. // 确认下单
  133. confirmOrder(){
  134. let prods = this.data.cartList.filter(item=>item.checkFlag === "1");
  135. wx.navigateTo({
  136. url: '/pages/order/confirmOrder/confirmOrder?prods='+encodeURIComponent(JSON.stringify(prods)),
  137. })
  138. },
  139. onLoad(){
  140. },
  141. onShow(){
  142. this.getCartProds();
  143. }
  144. })