1. 给按钮绑定点击事件并传递下标
2. 给需要跳转的位置进行 some 循环
3. 判断点击按钮传递过来的下标是否等于 some 循环的下标
4. 等于则根据距离顶部的距离进行跳转（把需要滑动元素的 scrollTop 赋值为条件成立的标签距离顶部的距离）
5. 滑动时点击事件跟随显示
6. 给需要滑动的标签绑定 scroll 事件
7. 给点击按钮进行 some 循环
8. 判断滑动标签距离顶部的距离是否大于需要跳转的位置距离顶部的距离
9. 判断成功则给当前标签选中，其他全部取消选中

<template>
  <div class="box" ref="box">
    <ul class="left" ref="left">
      <li
        v-for="(item, index) in listd"
        :key="index"
        ref="title"
        @click="meal(item, index)"
      >
        <router-link :to="'#' + index">
          <span ref="titles">{{ item }}</span>
        </router-link>
      </li>
    </ul>
    <ul class="right" ref="commodity" @scroll="scrolls">
      <li v-for="(item, index) in listds" :key="index">
        <p class="title" ref="sell" :id="index">
          <span>{{ item.name }}</span>
        </p>
        <div v-for="(items, index) in item.foods" :key="index" class="all">
          <div class="lileft" @click="details(items, item)">
            <img :src="items.image" alt="" />
            <span class="content"
              ><p class="name">{{ items.name }}</p>
              <p class="description">{{ items.description }}</p>
              <p class="sellCount">
                月售{{ items.sellCount }}<span>好评率{{ items.rating }}%</span>
              </p>
              <p class="price">
                <span class="newprice"><span>￥</span>{{ items.price }}</span>
                <span
                  class="oldPrice"
                  v-if="items.oldPrice == '' ? false : true"
                  >￥{{ items.oldPrice }}</span
                >
              </p></span
            >
          </div>
          <div class="liright">
            <button v-show="num[index] > 0" @click="add(items, index)">
              <img src="@/assets/商品/remove_circle_outline.svg" alt="" />
            </button>
            <span ref="num" v-show="num[index] > 0">{{ num[index] }}</span>
            <!-- <span ref="num" v-show="num == 0"></span> -->
            <button @click="addition(items, index)">
              <img src="@/assets/商品/add_circle.svg" alt="" />
            </button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      listd: [],
      listds: [],
      setmeal: "热销榜",
      scrollHeights: 0,
      heightArr: [0, 0],
      num: [],
    };
  },
  created() {
    if (this.$route.query.name) {
      this.setmeal = this.$route.query.name;
    } else {
      this.setmeal = "热销榜";
    }
    this.request();
    this.requestgoods();
  },
  mounted() {
    if (localStorage.getItem("num")) {
      this.num = localStorage.getItem("num").split(",");
    }
    if (this.$refs.box.scrollHeight < 860) {
      this.$refs.left.className = "left lefts";
      let arr = 352 - this.$refs.left.offsetTop + 860;
      this.$refs.commodity.style.height = arr + "px";
    }
  },
  computed: {
    ...mapState(["pitch"]),
  },
  methods: {
    request() {
      this.$axios.get(`/before/goods/help`).then((err) => {
        console.log(err.data);
        this.listd = err.data;
      });
    },
    requestgoods() {
      this.$axios.get(`/before/goods`).then((err) => {
        this.listds = err.data;
        this.listds.some((item) => {
          item.foods.some((items) => {
            this.num.push(0);
          });
        });
      });
    },
    meal(items, indexs) {
      this.$refs.sell.some((item, index) => {
        if (indexs == index) {
          this.$refs.commodity.scrollTop = item.offsetTop - 350;
        }
      });
    },
    scrolls() {
      this.$refs.title.some((item, index) => {
        if (
          this.$refs.commodity.scrollTop >
          this.$refs.sell[index].offsetTop - 352
        ) {
          this.$refs.title.some((item) => {
            item.style.backgroundColor = "#f3f5f7";
          });
          item.style.backgroundColor = "#fff";
        }
      });
    },
    addition(item, index) {
      let num = 0;
      for (let i = 0; i < this.pitch.length; i++) {
        if (this.pitch[i].name == item.name) {
          num = i;
        }
        if (item.name == this.pitch[i].name) {
          console.log(item.name);
        }
      }
      this.$store.commit("addshopping", item);
      this.$set(this.num, index, this.pitch[num].num);
      localStorage.setItem("num", this.num);
    },
    add(item, index) {
      let num = 0;
      for (let i = 0; i < this.pitch.length; i++) {
        if (this.pitch[i].name == item.name) {
          num = i;
        }
        if (item.name == this.pitch[i].name) {
          console.log(item.name);
        }
      }
      this.$store.commit("addj", num);
      this.$set(this.num, index, this.pitch[num].num);
      localStorage.setItem("num", this.num);
    },
    details(item, title) {
      console.log(item.name);
      this.$router.push({
        name: "Details",
        query: { title: title.name, name: item.name },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  // height: 100%;
  display: flex;
  .lefts {
    overflow: auto !important;
    height: 100% !important;
  }
  .left {
    width: 1.7rem;
    height: 8.6rem;
    overflow: auto;
    scrollbar-width: none;
    li {
      list-style: none;
      width: 1.6rem;
      height: 1.08rem;
      display: flex;
      flex-wrap: wrap;
      background-color: #f3f5f7;
      a {
        width: 100%;
        height: 100%;
        padding: 0 0.24rem;
        color: rgba(7, 17, 27, 0.8);
        display: flex;
        align-items: center;
        text-decoration: none;
        span {
          width: 1.6rem;
          height: 1.08rem;
          font-size: 0.24rem;
          line-height: 0.28rem;
          display: flex;
          align-items: center;
          font-weight: 200;
          color: rgba(7, 17, 27, 0.8);
          border-bottom: 0.01rem solid rgba(7, 17, 27, 0.1);
        }
      }
    }
  }
  .left::-webkit-scrollbar {
    display: none;
  }
  .right {
    width: 100%;
    height: 8.6rem;
    overflow: auto;
    // padding-bottom: 1rem;
    li {
      list-style: none;
      .title {
        width: 100%;
        height: 0.52rem;
        background-color: #f3f5f7;
        border-left: 0.04rem solid #d9dde1;
        span {
          margin-left: 0.28rem;
          font-size: 0.24rem;
          line-height: 0.52rem;
          color: rgb(147, 153, 159);
        }
      }
      .all {
        list-style: none;
        margin: 0 0.36rem;
        padding: 0.36rem 0;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        border-bottom: 0.01rem solid rgba(7, 17, 27, 0.1);
        .lileft {
          display: flex;
          img {
            width: 1.15rem;
            height: 1.15rem;
          }
          .content {
            margin: 0.04rem 0 0 0.2rem;
            .name {
              font-size: 0.28rem;
              color: rgba(7, 17, 27);
              line-height: 0.28rem;
            }
            .description {
              font-size: 0.2rem;
              color: rgb(147, 153, 159);
              line-height: 0.2rem;
              margin: 0.16rem 0;
            }
            .sellCount {
              font-size: 0.2rem;
              color: rgb(147, 153, 159);
              line-height: 0.2rem;
              span {
                font-size: 0.2rem;
                line-height: 0.2rem;
                margin-left: 0.24rem;
              }
            }
            .price {
              .newprice {
                font-size: 0.28rem;
                line-height: 0.48rem;
                color: rgb(240, 20, 20);
                font-weight: 700;
                span {
                  font-size: 0.2rem;
                }
              }
              .oldPrice {
                font-size: 0.2rem;
                line-height: 0.48rem;
                color: rgb(147, 153, 159);
                font-weight: 700;
                margin-left: 0.16rem;
                text-decoration: line-through;
              }
            }
          }
        }
        .liright {
          display: flex;
          align-items: center;
          button {
            background-color: #fff;
            border: none;
            overflow: hidden;
            img {
              width: 0.48rem;
              height: 0.48rem;
              filter: drop-shadow(rgb(0, 160, 220) 100px 0);
              transform: translateX(-100px);
            }
          }
          span {
            width: 0.48rem;
            // height: 0.48rem;
            text-align: center;
            font-size: 0.2rem;
            line-height: 0.48rem;
            color: rgb(147, 153, 159);
          }
        }
      }
    }
  }
}
</style>