购物车列表

src/pages/assistingAgriculture/cart/cart.vue

 <template>
   <div class="cart-wrap">
-    <div class="shop" v-for="(shop, i) in list" :key="i">
+    <div class="shop" v-for="(shop, i) in cartList" :key="i">
       <div class="flex-align-center shop-info">
         <div
           class="check"
@@ -13,7 +13,7 @@
         <div class="shop-name">{{ shop.shopName }}</div>
       </div>
       <div class="commodity-list">
-        <div class="commodity-item flex-align-center" v-for="(item, j) in shop.children" :key="j">
+        <div class="commodity-item flex-align-center" v-for="(item, j) in secondaryList" :key="j">
           <div
             class="check"
             :class="{ 'is-checked': item.isChecked }"
@@ -21,14 +21,14 @@
           >
             <wd-icon v-if="item.isChecked" name="check1"></wd-icon>
           </div>
-          <img :src="item.img" alt="" />
+          <img :src="item.imgUrl" alt="" />
           <div class="commodity-info">
-            <div class="name">{{ item.name }}</div>
+            <div class="name">{{ item.prodName }}</div>
             <div class="tag">{{ item.tag }}</div>
             <div class="flex-between">
               <div class="price">
                 <span>￥</span>
-                {{ item.price }}
+                {{ item.skuPrice }}
               </div>
               <wd-input-number v-model="item.count" />
             </div>
@@ -56,90 +56,66 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
+import { getshoppingCartList } from '../../../api/packageDetail';
+import { categoryPresaleList } from '../../../api/assistingAgriculture/building';
 // 计算是否全选
 const checkedAll = computed(() => {
-  return list.value.every((item) => item.isChecked);
+  return cartList.value.every((item) => item.isChecked);
 });
 const totalPrice = computed(() => {
   let total = 0;
-  list.value.forEach((item) => {
-    item.children.forEach((c) => {
+  cartList.value.forEach((item) => {
+    item.prodInfos.forEach((c) => {
       if (c.isChecked) {
-        total += c.price;
+        total += c.skuPrice * c.count;
       }
     });
   });
   return total || 0;
 });
-const list = ref([
-  {
-    shopName: '杨家黄焖鸡',
-    type: '店铺',
-    isChecked: true,
-    children: [
-      {
-        img: '/src/static/assistingAgriculture/assets/fruit.png',
-        name: '招牌黄焖鸡+米饭（土豆+生菜）',
-        price: 28.8,
-        count: 1,
-        tag: '约1000克',
-        isChecked: false,
-      },
-    ],
-  },
-  {
-    shopName: '杨家黄焖鸡',
-    type: '店铺',
-    isChecked: false,
-    children: [
-      {
-        img: '/src/static/assistingAgriculture/assets/fruit.png',
-        name: '招牌黄焖鸡+米饭（土豆+生菜）',
-        price: 28.8,
-        count: 1,
-        tag: '约1000克',
-        isChecked: false,
-      },
-      {
-        img: '/src/static/assistingAgriculture/assets/fruit.png',
-        name: '招牌黄焖鸡+米饭（土豆+生菜）',
-        price: 28.8,
-        count: 1,
-        tag: '约1000克',
-        isChecked: false,
-      },
-      {
-        img: '/src/static/assistingAgriculture/assets/fruit.png',
-        name: '招牌黄焖鸡+米饭（土豆+生菜）',
-        price: 28.8,
-        count: 1,
-        tag: '约1000克',
-        isChecked: false,
-      },
-    ],
-  },
-]);
+const list = ref([]);
+const secondaryList = ref([]);
+const hhh = ref([]);
+
+const cartList = ref([]);
+onMounted(async () => {
+  presaleSortList();
+});
 // 店铺
 const changeShopChecked = (s) => {
   s.isChecked = !s.isChecked;
-  s.children.forEach((v) => {
+  s.prodInfos.forEach((v) => {
     v.isChecked = s.isChecked;
   });
 };
 // 商品 店铺
 const changeCommodityChecked = (c, s) => {
   c.isChecked = !c.isChecked;
-  s.isChecked = s.children.every((v) => v.isChecked);
+  s.isChecked = s.prodInfos.every((v) => v.isChecked);
 };
 // 全选
 const changeCheckedAll = () => {
   const temp = checkedAll.value;
-  list.value.forEach((v) => {
+  cartList.value.forEach((v) => {
     v.isChecked = temp;
     changeShopChecked(v);
   });
 };
+// 购物车列表
+const presaleSortList = (index) => {
+  getshoppingCartList({}).then((res) => {
+    cartList.value = res.data;
+    cartList.value.forEach((shop) => {
+      secondaryList.value = shop.prodInfos;
+      secondaryList.value.forEach((item) => {
+        item.count = item.basket.basketCount;
+        item.imgUrl = import.meta.env.VITE_APP_IMG_URL + item.pic;
+      });
+    });
+  });
+};
+
 function toSettle() {
   // TODO: 跳转到结算页面
   xma.navigateTo({
@@ -276,4 +252,7 @@ uni-page-body {
     }
   }
 }
+.wd-input-number {
+  margin-left: 120rpx;
+}
 </style>