feat: 更新

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

@@ -20,18 +20,37 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
-const count = ref(0);
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const count = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    count.value = newValue;
+  },
+  { immediate: true }
+);
+
+const emit = defineEmits(['update:count']);
 
 function handleMinus() {
   if (count.value > 0) {
     count.value--;
+    emit('update:count', count.value);
   }
 }
 
 function handleAdd() {
   count.value++;
+  emit('update: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" />
+        <Count v-model="itemData.count" @update:count="handleCountChange(itemData, $event)" />
       </view>
       <text class="price">{{ itemData.priceUnit }}{{ itemData.price }}</text>
     </view>
@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { Count } from "./Count.vue";
+import Count from "./Count.vue";
 
 const props = defineProps({
   itemData: {
@@ -41,6 +41,11 @@ 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

@@ -8,10 +8,10 @@
           size="30"
           color="white"
         ></uni-icons>
-        <view class="count">20</view>
+        <view class="count">{{ cartItems.length }}</view>
       </view>
-      <text class="price">合计：￥15</text>
-      <view class="btn">去结算</view>
+      <text class="price">合计：￥{{ totalPrice }}</text>
+      <view class="btn" @click="navigateToDetail">去结算</view>
     </view>
     <view
       class="content"
@@ -43,7 +43,7 @@
         </view>
 
         <scroll-view scroll-y style="height: 230px">
-          <FoodItem v-for="item in 10" :key="item" />
+          <FoodItem v-for="item in cartItems" :item-data="item" :key="item.id" @update:food="handleCountChange" />
         </scroll-view>
       </view>
     </view>
@@ -52,11 +52,34 @@
 
 <script setup>
 import useSystemInfo from "@/hooks/useSystemInfo";
-import { FoodItem } from "./FoodItem.vue";
+import FoodItem from "./FoodItem.vue";
 import { ref } from "vue";
 
 const { safeAreaInsetsBottom } = useSystemInfo();
 
+const props = defineProps({
+  cartItems: {
+    type: Array,
+    default: () => [],
+  },
+  totalPrice: {
+    type: Number,
+    default: 0,
+  },
+});
+
+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));
+  uni.navigateTo({
+    url: `/pages/food/submit-order/index?totalPrice=${props.totalPrice}`
+  });
+};
+
 const isShoppingCartPopupShow = ref(false);
 function handleToggleCart() {
   isShoppingCartPopupShow.value = !isShoppingCartPopupShow.value;

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

@@ -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(() => {

src/pages/food/submit-order/index.vue

@@ -11,10 +11,10 @@
     <BaseCard>
       <view class="order-info">
         <text class="restaurant">美味的黄焖鸡德州店</text>
-        <view class="info">
+        <view class="info" v-for="item in cartItems" :key="item.id">
           <up-image
             class="img"
-            src="https://www.xiaoyaotravel.com/api/admin/app/tourismProject/download?id=1839692541117599744&fieldName=homeHotPicture&asImage=true&filename=848405f9421245cc92845f9af83ae949.jpg"
+            :src="item.urlAfterConvert[0]"
             fade
             show-loading
             width="64px"
@@ -24,10 +24,10 @@
           />
           <view class="right">
             <view class="food-price">
-              <text class="name">黄焖鸡+</text>
-              <text class="price">$15.5</text>
+              <text class="name">{{ item.name }}</text>
+              <text class="price">{{ item.priceUnit }}{{ item.price }}</text>
             </view>
-            <view class="count">x1份</view>
+            <view class="count">x{{ item.count }}份</view>
           </view>
         </view>
         <view class="packing-fee">
@@ -41,7 +41,7 @@
         <view class="line"></view>
         <view class="total-fee">
           <text>总计</text>
-          <text>$2</text>
+          <text>${{ totalPrice }}</text>
         </view>
       </view>
     </BaseCard>
@@ -68,7 +68,7 @@
     </BaseCard>
     <BottomSafeWrapper>
       <view class="bottom-wrapper">
-        <text class="price">合计: ￥15</text>
+        <text class="price">合计: ￥{{ totalPrice }}</text>
         <view style="width: 150px">
           <up-button text="去结算" @click="settlement" color="#fd9a00"></up-button>
         </view>
@@ -132,8 +132,25 @@ function handleToRemark() {
 }
 
 async function settlement() {
- const { data } = await createOrder(param)
+  const deliveryOrderItemsDtoList = cartItems.value.map(i => {
+    return {
+      foodName: i.name,
+      price: i.price,
+      number: i.count
+    }
+  })
+ const { data } = await createOrder({deliveryOrderItemsDtoList, deliveryOrderDto:param.deliveryOrderDto})
 }
+
+const totalPrice = computed(() => {
+  return cartItems.value.reduce((sum, item) => sum + (item.price * item.count), 0);
+});
+
+const cartItems = ref([]);
+
+onLoad(async () => {
+  cartItems.value = await JSON.parse(uni.getStorageSync('cartItems') || '[]');
+})
 </script>
 
 <style lang="scss">