|
@@ -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));
|
|
|
});
|
|
|
|