mx_0006_health_bak/src/views/MyNutrition.vue

<template>
  <div class="page-content">
    <div class="left-content">
      <div class="item-left score-content">
        <div class="score-title-box">
          <div class="score-title">营养评分</div>
          <img @click="show.showMaskQA = true" class="inquiry" src="@/assets/icon_action_help.png" alt="">
        </div>
        <div class="score-box">
          <img class="score-level-img" src="@/assets/Purple.png" alt="">
          <div class="echarts_box">
            <div class="echarts">
              <Score size="120px" />
              <div>蛋白质</div>
            </div>
            <div class="echarts">
              <Score size="120px" :name="'良好'" :color="'#FFA900'" :value="76.8" />
              <div>脂肪</div>
            </div>
            <div class="echarts">
              <Score size="120px" :name="'及格'" :color="'#FD6C3B'" :value="10" />
              <div>碳水化合物</div>
            </div>
          </div>
        </div>
      </div>
      <div class="dish_items">
        <div class="item-left dish_item" v-for="(itemFood, index) in selectedFoods" :key="itemFood.type">
          <div class="breakfast_top">
            <img :src="itemFood.icon" alt="">
            <div>{{itemFood.name}}</div>
          </div>
          <div class="item-container" ref="box">
            <div class="draggable-item-horizontal selected-item"  v-for="item in itemFood.items">
              <div class="selected-item-content">
                <img class="selected-item-img" :src="item.img" :alt="item.data">
                <span>{{item.data}}</span>
              </div>
            </div>
            <div :class="['container-selected-item',itemFood.items.length > 0 ? '':'no-items']"  :style="{border:isEnter?'2px dashed red':'6px dashed #F0F0F0',position:'relative'}">
              <Container
                behaviour="contain"
                group-name="1"
                :get-child-payload="getChildPayload2(itemFood.type)"
                @drop="onDrop($event, index)"
                @drag-enter="onEnter"
                @drag-leave="onLeave"
                @drag-end="onEnd"
                drag-class="card-ghost">
                <div
                  :style="{
                           color: itemFood.items.length || isEnter > 0 ? '#00000000' : '#00000038' ,
                           height:itemFood.items.length > 0 ? '80px':'150px',
                           lineHeight:itemFood.items.length > 0 ? '80px':'160px',
                           top:0,left:0,
                           textAlign:'center',
                           width:'100%'}">
                  {{ itemFood.items.length > 0 ? '1':'从右边可拖入菜品' }}
                </div>
              </Container>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-content">
      <div class="dish_select_list">
        <Container
          :drag-begin-delay="20"
          behaviour="copy"
          group-name="1"

          :get-child-payload="getChildPayload1"
          drag-class="card-ghost">
          <Draggable v-for="item in items1">
            <div class="draggable-item">
              <div class="selected-item-content">
                <img class="selected-item-img" :src="item.img" :alt="item.data">
                <span>{{item.data}}</span>
              </div>
            </div>
          </Draggable>
        </Container>
      </div>
    </div>
  </div>
</template>

<script>
  import { Container, Draggable } from 'vue3-smooth-dnd'
  import Score from '@/components/Echarts/Score.vue'
  const applyDrag = (arr, dragResult) => {
    const { removedIndex, addedIndex, payload } = dragResult
    if (removedIndex === null && addedIndex === null) return arr

    const result = [...arr]
    let itemToAdd = payload

    if (removedIndex !== null) {
      itemToAdd = result.splice(removedIndex, 1)[0]
    }

    if (addedIndex !== null) {
      result.splice(addedIndex, 0, itemToAdd)
    }

    return result
  }

  export default {
    name: 'Copy',
    components: {Container, Draggable,Score},
    data () {
      return {
        isEnter: false,
        selectedFoods:[{
          name:'早餐',
          type:'1',
          icon:require('@/assets/Dinner_breakfas.png'),
          items:[],
        },{
          name:'中餐',
          type:'2',
          icon: require('@/assets/Dinner_lunch.png'),
          items:[],
        },{
          name:'晚餐',
          type:'3',
          icon: require('@/assets/Dinner_supper.png'),
          items:[],
        }],
        items2:[],
        items1: [{
          id:1,
          data:'xx_drag_1',
          img:'https://do-while.oss-cn-beijing.aliyuncs.com/exhibition/1635177107%281%29.jpg'
        },{
          id:2,
          data:'xx_drag_2',
          img:'https://do-while.oss-cn-beijing.aliyuncs.com/exhibition/1635175644%281%29.jpg'
        }]
      }
    },
    methods: {
      onDrop (dropResult,index) {
        const { removedIndex, addedIndex, payload } = dropResult
        let itemToAdd = payload
        if(addedIndex == null && removedIndex == null) return
        this.selectedFoods[index].items.splice(this.selectedFoods[index].items.length, 0, itemToAdd)
      },
      getChildPayload1 (index) {
        return this.items1[index]
      },
      getChildPayload2 (type) {
        return  this.selectedFoods[type-1].items
      },
      getChildPayload3 (index) {
        return this.items3[index]
      },
      onEnter(e){
        console.log(e)
        this.isEnter = true
      },
      onLeave(e){
        this.isEnter = false
      },
      onEnd(){
        this.isEnter = false
        this.$nextTick(()=>{
          this.$refs.box.scrollLeft = this.$refs.box.scrollWidth
        })
      }
    }
  }
</script>

<style lang="less">
  *::-webkit-scrollbar {
    display: none !important;
  }
  .dish_items{
    flex: 1;
    overflow-y: scroll;
  }
  .page-content{
    display: flex;
    margin: 0 auto;
    width: 96%;
    height: 100%;
    overflow: hidden;
  }
  .left-content{
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    margin-right: 26px;
  }
  .right-content{
    width: 342px;
    padding-top: 15px;
  }
  .horizontal{
    width: 100% !important;
    display: flex;
    text-align: left;
  }
  .smooth-dnd-container.horizontal > .smooth-dnd-draggable-wrapper{
    display: inline-block;
    margin-left: 20px;
  }

  .draggable-item{
    display: inline;
  }
  .dish_select_list .smooth-dnd-container{
    display: flex;
    flex-direction: column;
  }
  .dish_select_list .smooth-dnd-container .smooth-dnd-draggable-wrapper{
    display: inline-block;
    width: 57px;
  }
  .item-container{
    height: 175px;
    max-width: 610px;
    overflow-x: scroll;
    white-space: nowrap; /* 内容超出不换行 */

  }
  .container-selected-item{
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: inline-block;
  }
  .no-items{
    width: 600px !important;
    height: 160px !important;
  }
  .selected-item {
    height: 160px;
    width: 90px;
    display: inline-block;
  }
  .smooth-dnd-disable-touch-action *{
    touch-action: auto;
  }
  .dish_item{
    margin-top: 24px;
    display: flex;
    flex-direction: column;
  }
  .selected-item-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .selected-item-img{
    width: 40px;
    height: 40px;
  }
  .echarts_box {
    display: flex;
    background: #FAFAFC;
    flex: 1;
    height: 170px;
    align-items: center;
    border-radius: 16px;
    justify-content: space-around;
  }

  .echarts {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .score-box{
    display: flex;

    justify-content: center;
    align-items: center;
  }
  .score-level-img{
    margin: 0 40px;
    width: 140px;
    height: 140px;
  }
  .score-title-box{
    display: flex;
    align-items: center;
    margin: 0 30px 30px 30px;
  }
  .inquiry {
    width: 2rem;
    height: 2rem;
  }
  .score-title{
    font-size: 24px;
    margin-right: 11px;
    font-weight: 600;
  }
  .score-space{
    width: 32px;
    height: 1px;
  }
  .item-left{
    background: white;
    padding: 20px;
    border-radius: 16px;
    align-items: start;
  }
  .breakfast_top {
    display: flex;
    align-items: center;
    padding: 25px 0;
    img {
      width: 3.3rem;
      height: 3.3rem;
    }

    div {
      margin-left: 1.1rem;
      font-size: 1.8em;
      font-weight: bold;
    }
  }
</style>