Dining_Hall/pages/advanceOrder/index.vue

<template>
  <view>
    <div class="top-wrap">
      <div class="top-cont flex justify-between align-center">
        <div class="flex align-center">
          <u-icon name="../../static/images/time.png" size="16"></u-icon>
          <span style="margin-left: 5px">{{ newDate }}</span>
        </div>
        <div class="top-right-cont">
          <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">
        <div v-for="(book, index) in cookbook" :key="index">
          <div class="left-balance" :class="{ active: current == index }" @click="scrollToDetail(index)">
            {{ handleRecipeType(book.recipeType) }}
          </div>
        </div>
      </u-col>
      <u-col :span="9">
        <div class="right-wrap" v-for="(book, index) in cookbook" :key="index">
          <div class="right-balance" :id="'detail-' + index" 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>
                <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 style="height: 60px"></div>
    <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="handleOrder">结算</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>
export default {
  data() {
    return {
      current: 0,
      newDate: '',
      newDate2: '',
      active: 1, // 1 自取 2 外卖
      canteenName: '宏源工业园/本周菜谱',
      canteenType: '外卖', // 1 自取 2 外卖
      // 总价格
      totalPrice: 0,
      showCar: false, // 购物车
      showModal: false, // 清空购物车
      // 菜谱
      cookbook: [
        {
          recipeType: 1, // 菜谱类型(1默认,2按天,3按周,4按月)
          // 菜谱详情
          recipeDetailList: [
            {
              intervalName: '午餐', // 餐次名称
              // 菜品列表
              mealList: [
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                },
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                },
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                },
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                }
              ]
            }
          ]
        },
        {
          recipeType: 2, // 菜谱类型(1默认,2按天,3按周,4按月)
          // 菜谱详情
          recipeDetailList: [
            {
              intervalName: '晚餐', // 餐次名称
              // 菜品列表
              mealList: [
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                },
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                },
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                },
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                }
              ]
            }
          ]
        },
        {
          recipeType: 3, // 菜谱类型(1默认,2按天,3按周,4按月)
          // 菜谱详情
          recipeDetailList: [
            {
              intervalName: '默认', // 餐次名称
              // 菜品列表
              mealList: [
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                },
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                },
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                },
                {
                  mealName: '西红柿炒鸡蛋', // 菜品名称
                  imageUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg', // 菜品图片
                  saleNum: 100,
                  supplyNum: 100, // 库存
                  restrictNum: 2, // 限购数量
                  salePrice: 10.2 // 菜品价格
                }
              ]
            }
          ]
        }
      ],
      // 添加的菜品
      addFood: []
    }
  },
  onLoad() {
    this.getNowFormatDate()
    this.getNowFormatDate2()
    this.handleCookBook()
  },
  methods: {
    // 获取当前时间
    getNowFormatDate() {
      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')
      let week = date.getDay()
      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) {
        return '默认'
      } else if (type === 2) {
        return '按天'
      } else if (type === 3) {
        return '按周'
      } else if (type === 4) {
        return '按月'
      }
    },
    // 处理菜品数量
    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)
      if (this.current != 0 && this.current == index) return
      this.current = index
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this)
        query
          .select(`#detail-${index}`)
          .boundingClientRect(rect => {
            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()
      })
    },
    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
    },
    // 订单结算
    handleOrder() {
      console.log('结算')
      // 购物车为空 不可结算
      if (this.totalPrice == 0) {
        uni.showToast({
          title: '请添加菜品',
          icon: 'none'
        })
        return
      }
      const params = {
        canteenName: this.canteenName, // 餐厅名称
        canteenType: this.canteenType, // 餐厅类型
        totalPrice: this.totalPrice, // 总价格
        diningTime: this.newDate2, // 就餐时间
        addFood: this.addFood // 添加的菜品
      }
      // 跳转订单结算页面
      uni.navigateTo({
        url: '/pages/advanceOrder/orderDetails?params=' + JSON.stringify(params)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .u-transition {
  z-index: 10090 !important;
}
page {
  background: #f9fbff;
  position: relative;
}
.top-wrap {
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 999;
}
.top-cont {
  height: 55px;
  padding: 0 16px;
  background: #fff;
  .top-right-cont {
    background: rgba(15, 39, 75, 0.05);
    border-radius: 11px 11px 11px 11px;
    display: flex;
    justify-content: space-around;
    color: #0f274b;
    font-size: 12px;
    .right-item {
      padding: 3px 10px;
      border-radius: 11px 11px 11px 11px;
      cursor: pointer;
      &.active {
        background: linear-gradient(180deg, #ffae82 0%, #ff6816 100%);
        color: #fff;
      }
    }
  }
}

.footer-cont {
  /* height: calc(100vh - 115px); */
  overflow: auto;
}
.left-wrap {
  position: fixed;
  top: 55px;
  height: calc(100vh - 115px);
  overflow: auto;
  .left-balance {
    width: 88px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    color: #0f274b;
    &.active {
      background: #fff;
    }
  }
}
.right-wrap {
  margin-left: 88px;
  width: calc(100vw - 88px);
  overflow: auto;
  .right-balance {
    padding: 0 8px;
    background-color: #fff;
    .top-name {
      height: 44px;
      font-weight: 400;
      font-size: 12px;
      color: rgba(15, 39, 75, 0.6);
      display: flex;
      align-items: center;
    }
  }
}
.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;
      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>