预订单

pages/advanceOrder/index.vue

@@ -1,15 +1,18 @@
 <template>
   <view>
-    <div class="top-cont flex justify-between align-center">
+    <div class="top-wrap">
-      <div class="flex align-center">
+      <div class="top-cont flex justify-between align-center">
-        <u-icon name="../../static/images/time.png" size="16"></u-icon>
+        <div class="flex align-center">
-        <span style="margin-left: 5px">{{ newDate }}</span>
+          <u-icon name="../../static/images/time.png" size="16"></u-icon>
-      </div>
+          <span style="margin-left: 5px">{{ newDate }}</span>
-      <div class="top-right-cont">
+        </div>
-        <span class="right-item" :class="{ active: active == 1 }" @click="active = 1">自取</span>
+        <div class="top-right-cont">
-        <span class="right-item" :class="{ active: active == 2 }" @click="active = 2">外卖</span>
+          <span class="right-item" :class="{ active: active == 1 }" @click="active = 1">自取</span>
+          <span class="right-item" :class="{ active: active == 2 }" @click="active = 2">外卖</span>
+        </div>
       </div>
     </div>
+    <div style="height: 55px"></div>
 
     <u-row class="footer-cont" align="top">
       <u-col :span="3" class="left-wrap">
@@ -21,12 +24,7 @@
       </u-col>
       <u-col :span="9">
         <div class="right-wrap" v-for="(book, index) in cookbook" :key="index">
-          <div
+          <div class="right-balance" :id="'detail-' + index" v-for="(item, itemIndex) in book.recipeDetailList" :key="itemIndex">
-            class="right-balance"
-            :ref="'detail-' + index + '-' + itemIndex"
-            v-for="(item, itemIndex) in book.recipeDetailList"
-            :key="itemIndex"
-          >
             <div class="top-name">{{ item.intervalName }}</div>
             <div class="cont-list" v-for="(food, foodIndex) in item.mealList">
               <div>
@@ -69,6 +67,7 @@
     </u-row>
 
     <!-- 购物车 -->
+    <div style="height: 60px"></div>
     <div class="shop-car">
       <div class="car-cont">
         <div class="flex align-center" @click="openCar">
@@ -145,13 +144,7 @@
       </div>
     </u-popup>
 
-    <u-modal
+    <u-modal :show="showModal" showCancelButton title="提示" @cancel="showModal = false" @confirm="clearCar">
-      :show="showModal"
-      showCancelButton
-      title="提示"
-      @cancel="showModal = false"
-      @confirm="clearCar"
-    >
       <view class="slot-content" style="text-align: center">
         <span>是否确认清空购物车?</span>
       </view>
@@ -360,37 +353,27 @@ export default {
     },
     scrollToDetail(index) {
       console.log('🚀 ~ scrollToDetail ~ index', index)
+      if (this.current != 0 && this.current == index) return
       this.current = index
       this.$nextTick(() => {
-        const detailElement = this.$refs['detail-' + index + '-0'][0]
+        const query = uni.createSelectorQuery().in(this)
-        if (detailElement) {
+        query
-          setTimeout(() => {
+          .select(`#detail-${index}`)
-            detailElement.scrollIntoView({ behavior: 'smooth' })
+          .boundingClientRect(rect => {
-          }, 100)
+            console.log('🚀 ~ scrollToDetail ~ rect', rect)
-        }
+            if (rect) {
+              setTimeout(() => {
+                console.log('🚀 ~ scrollToDetail ~ rect.top', rect.top)
+                uni.pageScrollTo({
+                  scrollTop: rect.top - 55,
+                  duration: 300
+                })
+              }, 100)
+            }
+          })
+          .exec()
       })
     },
-    // scrollToDetail(index) {
-    //   console.log('🚀 ~ scrollToDetail ~ index', index)
-    //   this.current = index
-    //   this.$nextTick(() => {
-    //     const query = uni.createSelectorQuery().in(this)
-    //     const targetElement = this.$refs['detail-' + index + '-0'][0]
-    //     if (targetElement) {
-    //       query
-    //         .select(`#${targetElement.id}`)
-    //         .boundingClientRect(rect => {
-    //           if (rect) {
-    //             uni.pageScrollTo({
-    //               scrollTop: rect.top + uni.getSystemInfoSync().statusBarHeight, // 需要加上状态栏高度
-    //               duration: 300 // 滚动的时间
-    //             })
-    //           }
-    //         })
-    //         .exec()
-    //     }
-    //   })
-    // },
     handleFoodNum(type, food) {
       console.log('🚀 ~ handleFoodNum ~ food:', food)
       console.log('🚀 ~ handleFoodNum ~ type', type)
@@ -453,10 +436,15 @@ export default {
   z-index: 10090 !important;
 }
 page {
-  /* padding-top: env(safe-area-inset-top); */
   background: #f9fbff;
   position: relative;
 }
+.top-wrap {
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 999;
+}
 .top-cont {
   height: 55px;
   padding: 0 16px;
@@ -481,7 +469,7 @@ page {
 }
 
 .footer-cont {
-  height: calc(100vh - 115px);
+  /* height: calc(100vh - 115px); */
   overflow: auto;
 }
 .left-wrap {