172 lines
4.1 KiB
Vue
172 lines
4.1 KiB
Vue
<script setup>
|
|
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
|
import border from "../../../components/border.vue"
|
|
import { orderRanking } 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 loadOrderList = () => {
|
|
orderRanking({
|
|
areaCode: appStore.address.areaCode,
|
|
streetCode: appStore.address.streetCode,
|
|
type: 1, // 1表示今日, 2表示总计
|
|
}).then((res) => {
|
|
items.value = res.data.townOrderList;
|
|
items.value.forEach(e => {
|
|
if (e.order_count > max.value) max.value = e.order_count;
|
|
})
|
|
nextTick(() => {
|
|
autoScroll();
|
|
})
|
|
})
|
|
}
|
|
|
|
const cWidth = (e) => {
|
|
return (e / max.value * 100).toFixed(0);
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadOrderList();
|
|
})
|
|
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="index" class="b-list-item">
|
|
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
|
{{ index + 1 }}
|
|
</div>
|
|
<div class="name">{{ item.street_name }}</div>
|
|
<div class="line">
|
|
<div
|
|
class="line-body"
|
|
:style="{ width: cWidth(item.order_count) + '%' }"
|
|
:class="{ 'line-body2': index >= 3 }"
|
|
></div>
|
|
</div>
|
|
<div class="count">{{ item.order_count }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</border>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.box {
|
|
height: 100%;
|
|
width: 100%;
|
|
font-size: 0.8rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1.25rem;
|
|
box-sizing: border-box;
|
|
|
|
.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>
|