Dining_Hall/pages/advanceOrder/index.vue

<template>
  <view>
    <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 class="balance-area" 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"
        v-for="(item, itemIndex) in book.recipeDetailList"
        :key="itemIndex"
      >
        <div class="top-name">{{ item.intervalName }}</div>
				<div v-for="(food, foodIndex) in item.mealList">
					{{ food.mealName }}
				</div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      newDate: '',
      active: 1, // 1 自取 2 外卖
      // 菜谱
      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 // 菜品价格
                }
              ]
            }
          ]
        }
      ]
    }
  },
  onLoad() {
    this.getNowFormatDate()
  },
  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]}`
    },
    // 处理recipeType
    handleRecipeType(type) {
      if (type === 1) {
        return '默认'
      } else if (type === 2) {
        return '按天'
      } else if (type === 3) {
        return '按周'
      } else if (type === 4) {
        return '按月'
      }
    },
    scrollToDetail(index) {
      console.log('🚀 ~ scrollToDetail ~ index', index)
			this.current = index
      const detailElement = this.$refs['detail-' + index + '-0'][0]
      if (detailElement) {
        detailElement.scrollIntoView({ behavior: 'smooth' })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  /* padding-top: env(safe-area-inset-top); */
  background: #f9fbff;
}
.top-cont {
  padding: 0 16px 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;
      }
    }
  }
}
.balance-area {
  display: flex;

  .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-balance {
    width: calc(100vw - 88px);
    /* min-height: 90vh; */
    overflow: auto;
    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;
    }
  }
}
</style>