trike-datav/src/view/delivery/components/right.vue

<script setup>
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
import border from "../../../components/border.vue"
import { deliveredProductRanking } from "@/api/index.js"
import { useAppStore } from "@/store/app.js"

const appStore = useAppStore();

const items = ref([])
const scrollContainerRef = ref(null);
let timer = null;
const autoScroll = () => {
  setTimeout(() => {
    timer = setInterval(() => {
      if (scrollContainerRef.value) {
        scrollContainerRef.value.scrollTop += 1;
        if (scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >= scrollContainerRef.value.scrollHeight - 1) {
          scrollContainerRef.value.scrollTop = 0;
          clearInterval(timer);
          autoScroll();
        }
      }
    }, 50)
  }, 1000)
}

const max = ref(0)

const loadList = () => {
  deliveredProductRanking({
    areaCode: appStore.delivery_address.areaCode,
    streetCode: appStore.delivery_address.streetCode,
    courier_id: appStore.delivery_address.courier_id
  }).then((res) => {
    items.value = res.data;
    res.data.forEach(e => {
      if (+e.total_quantity >= max.value) {
        max.value = +e.total_quantity;
      }
    });
  })
}

const cWidth = (e) => {
  return (e / max.value * 100).toFixed(0);
}


onMounted(() => {
  loadList();
  nextTick(() => {
    autoScroll();
  })
})
onUnmounted(() => {
  clearInterval(timer);
})
</script>

<template>
  <border>
    <div class="box">
      <div class="title">配送商品排行榜</div>
      <div
        style="
          height: calc(100% - 3.75rem);
          width: 100%;
          overflow: hidden;
          position: relative;
        "
      >
        <div class="scroll-container" ref="scrollContainerRef">
          <div
            v-for="(item, index) in items"
            :key="item.id"
            class="b-list-item"
          >
            <div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
              {{ index + 1 }}
            </div>
            <div class="name">
              <div>{{ item.store_name }}</div>
            </div>
            <div class="line">
              <div
                class="line-body"
                :style="{ width: cWidth(item.total_quantity) + '%' }"
                :class="{ 'line-body2': index >= 3 }"
              ></div>
            </div>
            <div class="count">{{ item.total_quantity }}</div>
          </div>
        </div>
      </div>
    </div>
  </border>
</template>

<style scoped lang="scss">
.box {
  padding: 1.25rem;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .title {
    width: 100%;
    background-image: url(../../../assets/img/title.png);
    background-size: 100% 100%;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "ifonts";
    font-size: 1.2rem;
  }
  .scroll-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
    .b-list-item {
      height: 3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.63rem;
      .rank {
        width: 3.1rem;
        height: 1.5em;
      }
      .rank1 {
        background-image: url(../../../assets/img/ranking1.png);
        background-size: 100% 100%;
      }
      .rank2 {
        background-image: url(../../../assets/img/ranking2.png);
        background-size: 100% 100%;
      }
      .name {
        flex: 5;
      }
      .line {
        width: 50%;
        height: 0.8rem;
        background-color: #0a385b;
        border-radius: 0.8rem;
        overflow: hidden;
        .line-body {
          height: 100%;
          border-radius: 0.8rem;
          width: 0%;
          background: linear-gradient(270deg, #00c0fe 0%, #0f87fa 100%);
        }
        .line-body2 {
          background: linear-gradient(270deg, #5bdbf6 0%, #5bdbf6 100%);
        }
      }
      .count {
        flex: 2;
        font-size: 1rem;
        font-family: "ifonts";
      }
    }
  }
}
</style>