feat: 更新

src/pages/food/restaurant-foods/comps/Count.vue

@@ -20,13 +20,19 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, inject } from "vue";
+
+const updateCart = inject('updateCart');
 
 const props = defineProps({
   modelValue: {
     type: Number,
     default: 0,
   },
+  itemData: {
+    type: Object,
+    default: () => {},
+  },
 });
 
 const count = ref(props.modelValue);
@@ -39,18 +45,16 @@ watch(
   { immediate: true }
 );
 
-const emit = defineEmits(['update:count']);
-
 function handleMinus() {
   if (count.value > 0) {
     count.value--;
-    emit('update:count', count.value);
+    updateCart({ itemData: props.itemData, count: count.value })
   }
 }
 
 function handleAdd() {
   count.value++;
-  emit('update:count', count.value);
+  updateCart({ itemData: props.itemData, count: count.value })
 }
 </script>
 

src/pages/food/restaurant-foods/comps/FoodItem.vue

@@ -22,7 +22,7 @@
           ></uni-icons>
           <text class="sales">{{ itemData.sales }}</text>
         </view>
-        <Count v-model="itemData.count" @update:count="handleCountChange(itemData, $event)" />
+        <Count v-model="itemData.count" :item-data="itemData" />
       </view>
       <text class="price">{{ itemData.priceUnit }}{{ itemData.price }}</text>
     </view>
@@ -31,6 +31,7 @@
 
 <script setup>
 import Count from "./Count.vue";
+import { watch } from "vue";
 
 const props = defineProps({
   itemData: {
@@ -39,13 +40,6 @@ const props = defineProps({
   },
 });
 
-const count = ref(0);
-
-const emit = defineEmits(['update:food']);
-function handleCountChange(itemData, count) {
-  emit('update:food', {itemData, count});
-}
-
 watch(
   () => props.itemData.count,
   (val) => {

src/pages/food/restaurant-foods/comps/ShoppingCartBar.vue

@@ -43,7 +43,7 @@
         </view>
 
         <scroll-view scroll-y style="height: 230px">
-          <FoodItem v-for="item in cartItems" :item-data="item" :key="item.id" @update:food="handleCountChange" />
+          <FoodItem v-for="item in cartItems" :item-data="item" :key="item.id" />
         </scroll-view>
       </view>
     </view>
@@ -68,10 +68,6 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:food']);
-function handleCountChange({itemData, count}) {
-  emit('update:food', {itemData, count});
-}
 
 const navigateToDetail = async () => {
   await uni.setStorageSync('cartItems', JSON.stringify(props.cartItems));

src/pages/food/restaurant-foods/index.vue

@@ -43,16 +43,16 @@
         class="food-list"
         :style="{ height: contentHeight + 'px' }"
       >
-        <FoodItem v-for="item in foodList" :id="`food-item-${item.id}`" :key="item.id" :item-data="item" @update:food="handleFoodUpdate" />
+        <FoodItem v-for="item in foodList" :id="`food-item-${item.id}`" :key="item.id" :item-data="item" />
       </scroll-view>
     </view>
 
-    <ShoppingCartBar :cartItems="cartItems" :totalPrice="totalPrice" @update:food="handleFoodUpdate" />
+    <ShoppingCartBar :cartItems="cartItems" :totalPrice="totalPrice" />
   </view>
 </template>
 
 <script setup>
-import { computed, getCurrentInstance, onMounted } from "vue";
+import { computed, getCurrentInstance, onMounted, provide } from "vue";
 import FoodItem from "./comps/FoodItem.vue";
 import ShoppingCartBar from "./comps/ShoppingCartBar.vue";
 import useSystemInfo from "@/hooks/useSystemInfo";
@@ -74,9 +74,12 @@ const detailInfo = ref({});
 const typeList = ref([]);
 const currentyType = ref({});
 const foodList = ref([]);
-const cartItems = ref([]);
+const cartItems = reactive([]);
 const scrollIntoView = ref(''); // 用于控制滚动到哪个元素
 
+provide('cartItems', cartItems);
+provide('updateCart', (data) => handleCartUpdate(data));
+
 async function getDetail() {
   const { data } = await getRestaurantsDetail({
     id: props.id,
@@ -106,24 +109,29 @@ async function getCartData() {
   });
 }
 
-function handleFoodUpdate({itemData, count}) {
-  const existingItem = cartItems.value.find(item => item.id === itemData.id);
+function handleCartUpdate({itemData, count}) {
+  foodList.value.forEach(i => {
+    if (i.id === itemData.id) {
+      i.count = count;
+    }
+  })
+  const existingItem = cartItems.find(item => item.id === itemData.id);
   if (count > 0) {
     if (existingItem) {
       existingItem.count = count;
     } else {
-      cartItems.value.push({ ...itemData, count });
+      cartItems.push({ ...itemData, count });
     }
   } else {
     if (existingItem) {
-      const index = cartItems.value.indexOf(existingItem);
-      cartItems.value.splice(index, 1);
+      const index = cartItems.indexOf(existingItem);
+      cartItems.splice(index, 1);
     }
   }
 }
 
 const totalPrice = computed(() => {
-  const sum = cartItems.value.reduce((sum, item) => sum + (item.price * item.count), 0);
+  const sum = cartItems.reduce((sum, item) => sum + (item.price * item.count), 0);
   return parseFloat((sum).toFixed(2));
 });