预订单

pages/advanceOrder/index.vue

@@ -10,9 +10,6 @@
         <span class="right-item" :class="{ active: active == 2 }" @click="active = 2">外卖</span>
       </div>
     </div>
-    <!-- <div class="top-cont-wrap">
-    </div>
-    <div style="height: 55px;"></div> -->
 
     <u-row class="footer-cont" align="top">
       <u-col :span="3" class="left-wrap">
@@ -24,9 +21,6 @@
       </u-col>
       <u-col :span="9">
         <div class="right-wrap" v-for="(book, index) in cookbook" :key="index">
-          <!-- <div class="left-balance" :class="{ active: current == index }" @click="scrollToDetail(index)">
-            {{ handleRecipeType(book.recipeType) }}
-          </div> -->
           <div
             class="right-balance"
             :ref="'detail-' + index + '-' + itemIndex"
@@ -36,26 +30,149 @@
             <div class="top-name">{{ item.intervalName }}</div>
             <div class="cont-list" v-for="(food, foodIndex) in item.mealList">
               <div>
-                <u-image :src="food.imageUrl" width="80px" height="80px" />
+                <u-image :src="food.imageUrl" showLoading width="80px" height="80px" />
+              </div>
+
+              <div class="center-cont">
+                <div class="meal-name">{{ food.mealName }}</div>
+                <div class="sale-num">月销 {{ food.saleNum }}</div>
+                <div class="num-cont">
+                  <span style="margin-right: 5px">{{ '库存' + food.supplyNum }}</span>
+                  <span>{{ '限购' + food.restrictNum }}</span>
+                </div>
+                <div class="sale-price">
+                  <span style="font-size: 11px">￥</span>
+                  {{ food.salePrice }}
+                </div>
+              </div>
+
+              <div class="right-cont">
+                <u-icon
+                  v-if="food.num > 0"
+                  name="../../static/images/delete.png"
+                  size="16"
+                  @click="handleFoodNum(1, food)"
+                />
+                <span style="margin: 0 10px">{{ food.num || 0 }}</span>
+                <u-icon
+                  v-if="food.num < food.restrictNum"
+                  name="../../static/images/add.png"
+                  size="16"
+                  @click="handleFoodNum(2, food)"
+                />
+                <u-icon v-if="food.num == food.restrictNum" name="../../static/images/no-add.png" size="16" />
               </div>
             </div>
           </div>
         </div>
       </u-col>
     </u-row>
+
+    <!-- 购物车 -->
+    <div class="shop-car">
+      <div class="car-cont">
+        <div class="flex align-center" @click="openCar">
+          <u-icon name="../../static/images/shop-car.png" size="25"></u-icon>
+          <span class="money">
+            <span style="font-size: 11px">￥</span>
+            {{ totalPrice }}
+          </span>
+        </div>
+
+        <div>
+          <u-button shape="circle" color="#FF6816" style="width: 79px; height: 28px" @click="">结算</u-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 购物车-pop -->
+    <u-popup :show="showCar" position="bottom" :round="12" @close="showCar = false">
+      <div class="popup-cont">
+        <div class="flex justify-between align-center">
+          <div style="font-weight: 500; font-size: 14px">已加购菜品</div>
+          <div style="font-weight: 400; font-size: 12px; color: #ff6816" @click="showModal = true">清空</div>
+        </div>
+
+        <div class="flex justify-between align-center" style="margin: 20.5px 0 12.5px">
+          <div class="flex align-center">
+            {{ canteenName }}
+            <span class="name-type">{{ canteenType }}</span>
+          </div>
+
+          <div>
+            {{ newDate2 }}
+          </div>
+        </div>
+
+        <div class="list-wrap">
+          <div class="cont-list" v-for="(food, foodIndex) in addFood">
+            <div>
+              <u-image :src="food.imageUrl" showLoading width="80px" height="80px" />
+            </div>
+
+            <div class="center-cont">
+              <div class="meal-name">{{ food.mealName }}</div>
+              <div class="sale-num">月销 {{ food.saleNum }}</div>
+              <div class="num-cont">
+                <span style="margin-right: 5px">{{ '库存' + food.supplyNum }}</span>
+                <span>{{ '限购' + food.restrictNum }}</span>
+              </div>
+              <div class="sale-price">
+                <span style="font-size: 11px">￥</span>
+                {{ food.salePrice }}
+              </div>
+            </div>
+
+            <div class="right-cont">
+              <div class="num-wrap">
+                <u-icon
+                  v-if="food.num > 0"
+                  name="../../static/images/del.png"
+                  size="16"
+                  @click="handleFoodNum(1, food)"
+                />
+                <span class="cont-num">{{ food.num || 0 }}</span>
+                <u-icon
+                  :disabled="food.num < food.restrictNum"
+                  name="../../static/images/add2.png"
+                  size="16"
+                  @click="handleFoodNum(2, food)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </u-popup>
+
+    <u-modal
+      :show="showModal"
+      showCancelButton
+      title="提示"
+      @cancel="showModal = false"
+      @confirm="clearCar"
+    >
+      <view class="slot-content" style="text-align: center">
+        <span>是否确认清空购物车?</span>
+      </view>
+    </u-modal>
   </view>
 </template>
 
 <script>
-import uImage from '../../uni_modules/uview-ui/components/u--image/u--image.vue'
-import URow from '../../uni_modules/uview-ui/components/u-row/u-row.vue'
 export default {
-  components: { uImage, URow },
   data() {
     return {
       current: 0,
       newDate: '',
+      newDate2: '',
       active: 1, // 1 自取 2 外卖
+      canteenName: '宏源工业园/本周菜谱',
+      canteenType: '外卖', // 1 自取 2 外卖
+      // 总价格
+      totalPrice: 0,
+      showCar: false, // 购物车
+      showModal: false, // 清空购物车
       // 菜谱
       cookbook: [
         {
@@ -190,11 +307,15 @@ export default {
             }
           ]
         }
-      ]
+      ],
+      // 添加的菜品
+      addFood: []
     }
   },
   onLoad() {
     this.getNowFormatDate()
+    this.getNowFormatDate2()
+    this.handleCookBook()
   },
   methods: {
     // 获取当前时间
@@ -207,6 +328,14 @@ export default {
       let weeks = ['日', '一', '二', '三', '四', '五', '六']
       this.newDate = `${month}-${day} 星期${weeks[week]}`
     },
+    // 当前时间 2025-01-03
+    getNowFormatDate2() {
+      let date = new Date()
+      let year = date.getFullYear()
+      let month = (date.getMonth() + 1).toString().padStart(2, '0')
+      let day = date.getDate().toString().padStart(2, '0')
+      this.newDate2 = `${year}-${month}-${day}`
+    },
     // 处理recipeType
     handleRecipeType(type) {
       if (type === 1) {
@@ -219,18 +348,28 @@ export default {
         return '按月'
       }
     },
-    // scrollToDetail(index) {
-    //   console.log('🚀 ~ scrollToDetail ~ index', index)
-    //   this.current = index
-    //   this.$nextTick(() => {
-    //     const detailElement = this.$refs['detail-' + index + '-0'][0]
-    //     if (detailElement) {
-    //       setTimeout(() => {
-    //         detailElement.scrollIntoView({ behavior: 'smooth' })
-    //       }, 100)
-    //     }
-    //   })
-    // }
+    // 处理菜品数量
+    handleCookBook() {
+      this.cookbook.forEach(item => {
+        item.recipeDetailList.forEach(detail => {
+          detail.mealList.forEach(food => {
+            this.$set(food, 'num', 0)
+          })
+        })
+      })
+    },
+    scrollToDetail(index) {
+      console.log('🚀 ~ scrollToDetail ~ index', index)
+      this.current = index
+      this.$nextTick(() => {
+        const detailElement = this.$refs['detail-' + index + '-0'][0]
+        if (detailElement) {
+          setTimeout(() => {
+            detailElement.scrollIntoView({ behavior: 'smooth' })
+          }, 100)
+        }
+      })
+    },
     // scrollToDetail(index) {
     //   console.log('🚀 ~ scrollToDetail ~ index', index)
     //   this.current = index
@@ -251,12 +390,68 @@ export default {
     //         .exec()
     //     }
     //   })
-    // }
+    // },
+    handleFoodNum(type, food) {
+      console.log('🚀 ~ handleFoodNum ~ food:', food)
+      console.log('🚀 ~ handleFoodNum ~ type', type)
+      if (type === 1) {
+        console.log('减少')
+        if (food.num > 0) {
+          food.num--
+        }
+      } else {
+        console.log('增加')
+        if (food.num < food.restrictNum) {
+          food.num++
+        }
+        console.log('food', food)
+      }
+      this.handleTotalPrice()
+    },
+    // 打开购物车
+    openCar() {
+      if (this.totalPrice == 0) return
+      this.showCar = true
+    },
+    // 计算总价格与添加的菜品-购物车-每次添加删减菜品都得计算
+    handleTotalPrice() {
+      let total = 0
+      let addFood = []
+      this.cookbook.forEach(item => {
+        item.recipeDetailList.forEach(detail => {
+          detail.mealList.forEach(food => {
+            if (food.num > 0) {
+              total += food.num * food.salePrice
+              addFood.push(food)
+            }
+          })
+        })
+      })
+      this.totalPrice = total.toFixed(1)
+      this.addFood = addFood
+      if (this.addFood.length == 0) this.showCar = false
+      console.log('🚀 ~ handleTotalPrice ~ total', this.totalPrice)
+      console.log('🚀 ~ handleTotalPrice ~ addFood', this.addFood)
+    },
+    clearCar() {
+      this.cookbook.forEach(item => {
+        item.recipeDetailList.forEach(detail => {
+          detail.mealList.forEach(food => {
+            food.num = 0
+          })
+        })
+      })
+      this.handleTotalPrice()
+      this.showModal = false
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+::v-deep .u-transition {
+  z-index: 10090 !important;
+}
 page {
   /* padding-top: env(safe-area-inset-top); */
   background: #f9fbff;
@@ -323,11 +518,131 @@ page {
       display: flex;
       align-items: center;
     }
-    .cont-list {
+  }
+}
+.cont-list {
+  display: flex;
+  padding: 8px;
+  position: relative;
+  /* border-bottom: 1px solid #f0f0f0; */
+  .center-cont {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-left: 8px;
+
+    .meal-name {
+      font-weight: 500;
+      font-size: 14px;
+      color: #0f274b;
+    }
+    .sale-num {
+      font-weight: 400;
+      font-size: 12px;
+      color: rgba(15, 39, 75, 0.6);
+      line-height: 14px;
+    }
+    .num-cont {
       display: flex;
-      padding: 8px;
-      /* border-bottom: 1px solid #f0f0f0; */
+      align-items: center;
+      font-size: 10px;
+      color: #ff6816;
+      span {
+        border: 1px solid #ff6816;
+        padding: 0 2px;
+        border-radius: 2px;
+      }
+    }
+    .sale-price {
+      font-weight: 500;
+      font-size: 16px;
+      color: #0f274b;
+    }
+  }
+
+  .right-cont {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    display: flex;
+    align-items: center;
+
+    span {
+      font-weight: 400;
+      font-size: 12px;
+      color: #0f274b;
+    }
+
+    .num-wrap {
+      padding: 0 4px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 63px;
+      height: 20px;
+      border-radius: 13px 13px 13px 13px;
+      border: 1px solid rgba(15, 39, 75, 0.2);
+      .cont-num {
+        width: 20px;
+        height: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+        color: #0f274b;
+
+        // 第二个展示左右边框
+        &:nth-child(2) {
+          border-left: 1px solid rgba(15, 39, 75, 0.2);
+          border-right: 1px solid rgba(15, 39, 75, 0.2);
+        }
+      }
     }
   }
 }
+
+.shop-car {
+  height: 60px;
+  background: #fff;
+  box-shadow: 0px -1px 4px 0px rgba(0, 102, 204, 0.1);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9999999;
+
+  .car-cont {
+    margin: 15px 20px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .money {
+      margin-left: 8px;
+      font-weight: 600;
+      font-size: 18px;
+      color: #0f274b;
+    }
+  }
+}
+
+.popup-cont {
+  height: 330px;
+  padding: 16px;
+  color: #0f274b;
+
+  .name-type {
+    margin-left: 5px;
+    font-weight: 400;
+    font-size: 10px;
+    color: #fff;
+    padding: 2px 7px;
+    background: linear-gradient(180deg, #ffae82 0%, #ff6816 100%);
+    border-radius: 11px 11px 11px 11px;
+  }
+}
+.list-wrap {
+  height: 200px;
+  overflow: auto;
+}
 </style>