|
@@ -17,6 +17,7 @@
|
|
|
color="#949494"
|
|
|
></uni-icons>
|
|
|
<text>{{ detailInfo.address }}</text>
|
|
|
+ <text>营业时间:{{ detailInfo.workTime }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="section-title">点菜</view>
|
|
@@ -38,21 +39,22 @@
|
|
|
</scroll-view>
|
|
|
<scroll-view
|
|
|
scroll-y
|
|
|
+ :scroll-into-view="scrollIntoView"
|
|
|
class="food-list"
|
|
|
:style="{ height: contentHeight + 'px' }"
|
|
|
>
|
|
|
- <FoodItem v-for="item in foodList" :key="item.id" :item-data="item" />
|
|
|
+ <FoodItem v-for="item in foodList" :id="`food-item-${item.id}`" :key="item.id" :item-data="item" @update:food="handleFoodUpdate" />
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- <ShoppingCartBar /> -->
|
|
|
+ <ShoppingCartBar :cartItems="cartItems" :totalPrice="totalPrice" @update:food="handleFoodUpdate" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { computed, getCurrentInstance, onMounted } from "vue";
|
|
|
import FoodItem from "./comps/FoodItem.vue";
|
|
|
-// import ShoppingCartBar from "./comps/ShoppingCartBar.vue";
|
|
|
+import ShoppingCartBar from "./comps/ShoppingCartBar.vue";
|
|
|
import useSystemInfo from "@/hooks/useSystemInfo";
|
|
|
import {
|
|
|
getRestaurantsDetail,
|
|
@@ -72,6 +74,8 @@ const detailInfo = ref({});
|
|
|
const typeList = ref([]);
|
|
|
const currentyType = ref({});
|
|
|
const foodList = ref([]);
|
|
|
+const cartItems = ref([]);
|
|
|
+const scrollIntoView = ref(''); // 用于控制滚动到哪个元素
|
|
|
|
|
|
async function getDetail() {
|
|
|
const { data } = await getRestaurantsDetail({
|
|
@@ -102,6 +106,26 @@ async function getCartData() {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+function handleFoodUpdate({itemData, count}) {
|
|
|
+ const existingItem = cartItems.value.find(item => item.id === itemData.id);
|
|
|
+ if (count > 0) {
|
|
|
+ if (existingItem) {
|
|
|
+ existingItem.count = count;
|
|
|
+ } else {
|
|
|
+ cartItems.value.push({ ...itemData, count });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (existingItem) {
|
|
|
+ const index = cartItems.value.indexOf(existingItem);
|
|
|
+ cartItems.value.splice(index, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const totalPrice = computed(() => {
|
|
|
+ return cartItems.value.reduce((sum, item) => sum + (item.price * item.count), 0);
|
|
|
+});
|
|
|
+
|
|
|
onReady(() => {
|
|
|
getDetail();
|
|
|
getTypes();
|
|
@@ -110,6 +134,11 @@ onReady(() => {
|
|
|
|
|
|
function handleChangeType(type) {
|
|
|
currentyType.value = type;
|
|
|
+ const selectedTypeId = type.id;
|
|
|
+ const firstFoodInCategory = foodList.value.find(food => food.foodTypeId === selectedTypeId);
|
|
|
+ if (firstFoodInCategory) {
|
|
|
+ scrollIntoView.value = `food-item-${firstFoodInCategory.id}`;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// onMounted(() => {
|