This commit is contained in:
parent
8fb277ad92
commit
3c361aef23
|
@ -1,5 +1,9 @@
|
||||||
import axios from "@/utils/axios.js";
|
import axios from "@/utils/axios.js";
|
||||||
|
|
||||||
|
export const getStreet = (data) => {
|
||||||
|
return axios.get('city/get_street', { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
export const orderList = (data) => {
|
export const orderList = (data) => {
|
||||||
return axios.get('dataview/curr_order_info', { params: data });
|
return axios.get('dataview/curr_order_info', { params: data });
|
||||||
}
|
}
|
||||||
|
@ -7,3 +11,16 @@ export const orderList = (data) => {
|
||||||
export const orderRanking = (data) => {
|
export const orderRanking = (data) => {
|
||||||
return axios.get('dataview/order_ranking', { params: data });
|
return axios.get('dataview/order_ranking', { params: data });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const deliveredProductRanking = (data) => {
|
||||||
|
return axios.get('dataview/delivered_product_ranking', { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
export const vehicleList = (data) => {
|
||||||
|
return axios.get('dataview/vehicle_list', { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
export const latestLogistics = (data) => {
|
||||||
|
return axios.get('dataview/latest_logistics', { params: data });
|
||||||
|
}
|
|
@ -1,48 +1,67 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { defineProps, defineEmits, ref, nextTick, onMounted, } from "vue"
|
import { defineProps, defineEmits, ref, nextTick, onMounted, } from "vue"
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useAppStore } from "@/store/app.js";
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const emit = defineEmits(['offAreaList']);
|
const emit = defineEmits(['offAreaList']);
|
||||||
const choseArea = ref(false);
|
const choseArea = ref(false);
|
||||||
import { useAppStore } from "@/store/app.js";
|
|
||||||
|
|
||||||
const list = ref([
|
const props = defineProps({
|
||||||
{
|
list: {
|
||||||
name: '泸县',
|
type: Object,
|
||||||
pinyin: 'luxian',
|
default: () => []
|
||||||
},
|
}
|
||||||
{
|
})
|
||||||
name: '江阳区',
|
|
||||||
pinyin: 'jiangyang',
|
// const list = ref([
|
||||||
},
|
// {
|
||||||
{
|
// name: '泸县',
|
||||||
name: '龙马潭区',
|
// pinyin: 'luxian',
|
||||||
pinyin: 'longma',
|
// },
|
||||||
},
|
// // {
|
||||||
{
|
// // name: '江阳区',
|
||||||
name: '纳溪区',
|
// // pinyin: 'jiangyang',
|
||||||
pinyin: 'naxi',
|
// // },
|
||||||
},
|
// // {
|
||||||
{
|
// // name: '龙马潭区',
|
||||||
name: '合江县',
|
// // pinyin: 'longma',
|
||||||
pinyin: 'hejiang',
|
// // },
|
||||||
},
|
// // {
|
||||||
{
|
// // name: '纳溪区',
|
||||||
name: '叙永县',
|
// // pinyin: 'naxi',
|
||||||
pinyin: 'xuyong',
|
// // },
|
||||||
},
|
// // {
|
||||||
{
|
// // name: '合江县',
|
||||||
name: '古蔺县',
|
// // pinyin: 'hejiang',
|
||||||
pinyin: 'gulin',
|
// // },
|
||||||
},
|
// // {
|
||||||
])
|
// // name: '叙永县',
|
||||||
|
// // pinyin: 'xuyong',
|
||||||
|
// // },
|
||||||
|
// // {
|
||||||
|
// // name: '古蔺县',
|
||||||
|
// // pinyin: 'gulin',
|
||||||
|
// // },
|
||||||
|
// ])
|
||||||
|
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
|
|
||||||
// 选镇
|
// 选镇
|
||||||
const choseTownFn = (item) => {
|
const choseTownFn = (item) => {
|
||||||
emit('offAreaList', item);
|
emit('offAreaList', item);
|
||||||
appStore.setMapInfo(item.pinyin);
|
if (item.code.length == 6) {
|
||||||
|
appStore.setMapInfo('luxian');
|
||||||
|
appStore.setAddress({
|
||||||
|
areaCode: item.code,
|
||||||
|
streetCode: ''
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
appStore.setAddress({
|
||||||
|
areaCode: appStore.address.areaCode,
|
||||||
|
streetCode: item.code
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const open = () => {
|
const open = () => {
|
||||||
|
@ -62,11 +81,11 @@ defineExpose({
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
list.value.forEach(item => {
|
// list.value.forEach(item => {
|
||||||
if (item.pinyin == appStore.map_info) {
|
// if (item.pinyin == appStore.map_info) {
|
||||||
choseTownFn(item)
|
// choseTownFn(item)
|
||||||
}
|
// }
|
||||||
})
|
// })
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -3,12 +3,16 @@ import { reactive, ref, provide, nextTick, onMounted } from "vue";
|
||||||
import areaList from "./areaList.vue";
|
import areaList from "./areaList.vue";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import mitt from "@/utils/mitt";
|
import mitt from "@/utils/mitt";
|
||||||
|
import { getStreet } from "@/api/index.js"
|
||||||
|
import { useAppStore } from "@/store/app.js";
|
||||||
|
|
||||||
const info = reactive({
|
const info = reactive({
|
||||||
address: '泸县',
|
address: '泸县',
|
||||||
pinyin: 'luxian'
|
pinyin: 'luxian'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const appStore = useAppStore();
|
||||||
|
|
||||||
const areaListRef = ref(null);
|
const areaListRef = ref(null);
|
||||||
|
|
||||||
// 选择镇
|
// 选择镇
|
||||||
|
@ -27,11 +31,29 @@ const offAreaList = (e) => {
|
||||||
mitt.emit('map_info', info);
|
mitt.emit('map_info', info);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const list = ref([])
|
||||||
|
const initList = () => {
|
||||||
|
getStreet({
|
||||||
|
area_code: appStore.address.areaCode
|
||||||
|
}).then(res => {
|
||||||
|
list.value = res.data;
|
||||||
|
appStore.setAddress({
|
||||||
|
areaCode: appStore.address.appStore,
|
||||||
|
streetCode: res.data[0].code
|
||||||
|
})
|
||||||
|
info.address = res.data[0].name
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
const navToDelivery = () => {
|
const navToDelivery = () => {
|
||||||
if (route.path == '/') router.push('/delivery');
|
if (route.path == '/') {
|
||||||
|
// router.push('/delivery');
|
||||||
|
return;
|
||||||
|
}
|
||||||
else router.back();
|
else router.back();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -57,6 +79,8 @@ onMounted(() => {
|
||||||
|
|
||||||
mitt.emit('map_info', info);
|
mitt.emit('map_info', info);
|
||||||
|
|
||||||
|
initList();
|
||||||
|
|
||||||
// 每秒钟更新一次时间
|
// 每秒钟更新一次时间
|
||||||
setInterval(updateClock, 1000);
|
setInterval(updateClock, 1000);
|
||||||
})
|
})
|
||||||
|
@ -81,6 +105,7 @@ onMounted(() => {
|
||||||
{{ info.address }}
|
{{ info.address }}
|
||||||
<areaList
|
<areaList
|
||||||
ref="areaListRef"
|
ref="areaListRef"
|
||||||
|
:list="list"
|
||||||
:choseArea="choseArea"
|
:choseArea="choseArea"
|
||||||
@offAreaList="offAreaList"
|
@offAreaList="offAreaList"
|
||||||
style="position: absolute; top: 100%; left: 0"
|
style="position: absolute; top: 100%; left: 0"
|
||||||
|
|
|
@ -4,13 +4,26 @@ import { ref } from "vue"
|
||||||
export const useAppStore = defineStore('app', () => {
|
export const useAppStore = defineStore('app', () => {
|
||||||
const map_info = ref(localStorage.getItem('map_info') || 'luxian');
|
const map_info = ref(localStorage.getItem('map_info') || 'luxian');
|
||||||
|
|
||||||
|
const address = ref(JSON.parse(localStorage.getItem('address') || '{}'));
|
||||||
|
if (!address.value.areaCode) {
|
||||||
|
address.value = { areaCode: 510521, streetCode: 510521100 };
|
||||||
|
}
|
||||||
|
|
||||||
const setMapInfo = (e) => {
|
const setMapInfo = (e) => {
|
||||||
map_info.value = e;
|
map_info.value = e;
|
||||||
localStorage.setItem('map_info', e);
|
localStorage.setItem('map_info', e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const setAddress = (e) => {
|
||||||
|
address.value.areaCode = e.areaCode;
|
||||||
|
address.value.streetCode = e.streetCode;
|
||||||
|
localStorage.setItem('address', JSON.stringify(e));
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
map_info,
|
map_info,
|
||||||
setMapInfo
|
address,
|
||||||
|
setMapInfo,
|
||||||
|
setAddress
|
||||||
}
|
}
|
||||||
})
|
})
|
|
@ -192,7 +192,7 @@ const initEcahrts = () => {
|
||||||
seriesData.push(obj3);
|
seriesData.push(obj3);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
console.log(seriesData);
|
// console.log(seriesData);
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: "rgba(0,0,0,0)",
|
backgroundColor: "rgba(0,0,0,0)",
|
||||||
grid: {
|
grid: {
|
||||||
|
|
|
@ -3,18 +3,19 @@ import { onMounted, reactive, ref } from "vue"
|
||||||
import border from "@/components/border.vue";
|
import border from "@/components/border.vue";
|
||||||
import AMapLeft from "./AMapLeft.vue";
|
import AMapLeft from "./AMapLeft.vue";
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
import { useRoute } from "vue-router"
|
||||||
|
import { latestLogistics } from "@/api/index.js";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
var fontColor = "#000";
|
|
||||||
var seriesName = "";
|
|
||||||
let noramlSize = 16;
|
let noramlSize = 16;
|
||||||
var datas = {
|
var datas = {
|
||||||
textValue: "100%",
|
textValue: "100%",
|
||||||
colors: ["#31829d", "#009cff", "#4b5fdb"],
|
colors: ["#31829d", "#009cff", "#4b5fdb"],
|
||||||
legendArr: ["待取货", "待配送", "已送达"],
|
legendArr: ["待取货", "配送中", "已送达"],
|
||||||
dataArr: [
|
dataArr: [
|
||||||
{ value: 335, name: "待取货" },
|
{ value: 335, name: "待取货" },
|
||||||
{ value: 210, name: "待配送" },
|
{ value: 210, name: "配送中" },
|
||||||
{ value: 410, name: "已送达" },
|
{ value: 410, name: "已送达" },
|
||||||
],
|
],
|
||||||
company: "个"
|
company: "个"
|
||||||
|
@ -121,8 +122,20 @@ const initEcahrts = () => {
|
||||||
chart.setOption(option);
|
chart.setOption(option);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const info = ref({});
|
||||||
|
|
||||||
|
const loadInfo = () => {
|
||||||
|
latestLogistics({
|
||||||
|
areaCode: 510524,
|
||||||
|
streetCode: 510524100,
|
||||||
|
}).then(res => {
|
||||||
|
info.value = res.data;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initEcahrts()
|
loadInfo();
|
||||||
|
initEcahrts();
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -136,11 +149,9 @@ onMounted(() => {
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div>
|
<div>
|
||||||
订单编号
|
订单编号
|
||||||
<span style="margin-left: 1rem"
|
<span style="margin-left: 1rem">{{ info.order_sn }}</span>
|
||||||
>bzj20230923163643650ea39ba256c</span
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
<div>23-11-20</div>
|
<div>{{ info.create_time?.split(" ")[0] }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<div class="c"></div>
|
<div class="c"></div>
|
||||||
|
@ -156,7 +167,7 @@ onMounted(() => {
|
||||||
<div>商户名称</div>
|
<div>商户名称</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name2">
|
<div class="name2">
|
||||||
<div>天天超市</div>
|
<div>{{ info.mer_name }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name">
|
<div class="name">
|
||||||
|
@ -164,7 +175,7 @@ onMounted(() => {
|
||||||
<div>商品名称</div>
|
<div>商品名称</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name2">
|
<div class="name2">
|
||||||
<div>山花纯牛奶100ml</div>
|
<div>{{ info.store_name || "-" }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -183,7 +194,7 @@ onMounted(() => {
|
||||||
<div>收件人</div>
|
<div>收件人</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name2">
|
<div class="name2">
|
||||||
<div>王**</div>
|
<div>{{ info.real_name }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name">
|
<div class="name">
|
||||||
|
@ -191,7 +202,7 @@ onMounted(() => {
|
||||||
<div>收件人电话</div>
|
<div>收件人电话</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name2">
|
<div class="name2">
|
||||||
<div>159****3366</div>
|
<div>{{ info.user_phone }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -209,7 +220,7 @@ onMounted(() => {
|
||||||
<div>收件地址</div>
|
<div>收件地址</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name2">
|
<div class="name2">
|
||||||
<div>泸县草芥幸福小区一号楼10-22</div>
|
<div>{{ info.user_address }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name">
|
<div class="name">
|
||||||
|
@ -217,7 +228,7 @@ onMounted(() => {
|
||||||
<div>当前状态</div>
|
<div>当前状态</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name2">
|
<div class="name2">
|
||||||
<div>订单已完成</div>
|
<div>{{ info.status }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -151,6 +151,7 @@ onUnmounted(() => {
|
||||||
height: 0.8rem;
|
height: 0.8rem;
|
||||||
background-color: #0a385b;
|
background-color: #0a385b;
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
|
overflow: hidden;
|
||||||
.line-body {
|
.line-body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
|
|
|
@ -186,8 +186,13 @@ const initMap = () => {
|
||||||
{
|
{
|
||||||
type: "map",
|
type: "map",
|
||||||
map: mapType.name,
|
map: mapType.name,
|
||||||
|
label: {
|
||||||
emphasis: {
|
emphasis: {
|
||||||
disabled: true
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
disabled: false,
|
||||||
},
|
},
|
||||||
select: {
|
select: {
|
||||||
disabled: true
|
disabled: true
|
||||||
|
|
|
@ -145,6 +145,7 @@ onUnmounted(() => {
|
||||||
height: 0.8rem;
|
height: 0.8rem;
|
||||||
background-color: #0a385b;
|
background-color: #0a385b;
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
|
overflow: hidden;
|
||||||
.line-body {
|
.line-body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
|
|
|
@ -1,6 +1,42 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import border from "../../../components/border.vue"
|
import border from "@/components/border.vue"
|
||||||
|
import { vehicleList } from "@/api/index.js";
|
||||||
|
import { onMounted, ref } from "vue";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
|
||||||
|
const list = ref([])
|
||||||
|
const count = ref(0);
|
||||||
|
|
||||||
|
const loadList = () => {
|
||||||
|
vehicleList({
|
||||||
|
eaCode: '510524',
|
||||||
|
streetCode: '510524100',
|
||||||
|
}).then(res => {
|
||||||
|
list.value = res.data.list;
|
||||||
|
count.value = res.data.count;
|
||||||
|
// for (let i = 0; i < 2; i++) {
|
||||||
|
// list.value = [...list.value, ...res.data.list];
|
||||||
|
// }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const navToDelivery = (id) => {
|
||||||
|
if (route.path == '/') router.push({
|
||||||
|
path: '/delivery',
|
||||||
|
query: {
|
||||||
|
id
|
||||||
|
}
|
||||||
|
});
|
||||||
|
else router.back();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadList()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -9,7 +45,7 @@ import border from "../../../components/border.vue"
|
||||||
<div class="title">三轮车列表</div>
|
<div class="title">三轮车列表</div>
|
||||||
<div class="car-box">
|
<div class="car-box">
|
||||||
<div class="car">
|
<div class="car">
|
||||||
<div class="count">13</div>
|
<div class="count">{{ count }}</div>
|
||||||
<div class="name">三轮车总数</div>
|
<div class="name">三轮车总数</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
|
@ -21,12 +57,20 @@ import border from "../../../components/border.vue"
|
||||||
<div
|
<div
|
||||||
class="car-item"
|
class="car-item"
|
||||||
:class="{ 'car-item2': index > 1 }"
|
:class="{ 'car-item2': index > 1 }"
|
||||||
v-for="(item, index) in 4"
|
v-for="(item, index) in list.slice(0, 4)"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
@click="navToDelivery(item.id)"
|
||||||
>
|
>
|
||||||
<img class="img" src="/src/assets/img/icon-car.png" />
|
<img class="img" src="/src/assets/img/icon-car.png" />
|
||||||
<div>川A E792P</div>
|
<div>{{ item.license }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="car-item"
|
||||||
|
:class="{ 'car-item2': index > 2 && index < 5 }"
|
||||||
|
v-for="(item, index) in 4 - list.length"
|
||||||
|
:key="'em' + index"
|
||||||
|
style="background-image: none"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -35,12 +79,20 @@ import border from "../../../components/border.vue"
|
||||||
<div
|
<div
|
||||||
class="car-item"
|
class="car-item"
|
||||||
:class="{ 'car-item2': index > 2 && index < 5 }"
|
:class="{ 'car-item2': index > 2 && index < 5 }"
|
||||||
v-for="(item, index) in 9"
|
v-for="(item, index) in list.slice(4, 13)"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
@click="navToDelivery(item.id)"
|
||||||
>
|
>
|
||||||
<img class="img" src="/src/assets/img/icon-car.png" />
|
<img class="img" src="/src/assets/img/icon-car.png" />
|
||||||
<div>川A E792P</div>
|
<div>{{ item.license }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="car-item"
|
||||||
|
:class="{ 'car-item2': index > 2 && index < 5 }"
|
||||||
|
v-for="(item, index) in 13 - list.length"
|
||||||
|
:key="'em' + index"
|
||||||
|
style="background-image: none"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -119,6 +171,11 @@ import border from "../../../components/border.vue"
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
div {
|
||||||
|
max-width: 60%;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -127,7 +184,8 @@ import border from "../../../components/border.vue"
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-evenly;
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
.car-item {
|
.car-item {
|
||||||
height: 33%;
|
height: 33%;
|
||||||
width: 33.33%;
|
width: 33.33%;
|
||||||
|
@ -136,6 +194,11 @@ import border from "../../../components/border.vue"
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
div {
|
||||||
|
max-width: 60%;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.car-item {
|
.car-item {
|
||||||
|
|
|
@ -1,28 +1,10 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue"
|
||||||
import border from "../../../components/border.vue"
|
import border from "../../../components/border.vue"
|
||||||
const items = reactive([
|
import { deliveredProductRanking } from "@/api/index.js"
|
||||||
{ id: 1, text: '莲花池 1' },
|
|
||||||
{ id: 2, text: '莲花池 2' },
|
const items = ref([]);
|
||||||
{ id: 3, text: '莲花池 3' },
|
const max = ref(0);
|
||||||
{ id: 3, text: '莲花池 4' },
|
|
||||||
{ id: 3, text: '莲花池 5' },
|
|
||||||
{ id: 3, text: '莲花池 6' },
|
|
||||||
{ id: 3, text: '莲花池 7' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
{ id: 3, text: '莲花池 8' },
|
|
||||||
])
|
|
||||||
const scrollContainerRef = ref(null);
|
const scrollContainerRef = ref(null);
|
||||||
let timer = null;
|
let timer = null;
|
||||||
const autoScroll = () => {
|
const autoScroll = () => {
|
||||||
|
@ -39,7 +21,27 @@ const autoScroll = () => {
|
||||||
}, 50)
|
}, 50)
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const loadList = () => {
|
||||||
|
deliveredProductRanking({
|
||||||
|
areaCode: 510524,
|
||||||
|
streetCode: 510524100,
|
||||||
|
}).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(() => {
|
onMounted(() => {
|
||||||
|
loadList()
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
autoScroll();
|
autoScroll();
|
||||||
})
|
})
|
||||||
|
@ -70,15 +72,17 @@ onUnmounted(() => {
|
||||||
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
<div class="rank" :class="index < 3 ? 'rank1' : 'rank2'">
|
||||||
{{ index + 1 }}
|
{{ index + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div class="name">{{ item.text }}</div>
|
<div class="name">
|
||||||
|
<div>{{ item.store_name }}</div>
|
||||||
|
</div>
|
||||||
<div class="line">
|
<div class="line">
|
||||||
<div
|
<div
|
||||||
class="line-body"
|
class="line-body"
|
||||||
:style="{ width: '80%' }"
|
:style="{ width: cWidth(item.total_quantity) + '%' }"
|
||||||
:class="{ 'line-body2': index >= 3 }"
|
:class="{ 'line-body2': index >= 3 }"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="count">6000</div>
|
<div class="count">{{ item.total_quantity }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -128,6 +132,7 @@ onUnmounted(() => {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
|
||||||
.rank {
|
.rank {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 1.5em;
|
height: 1.5em;
|
||||||
|
@ -142,12 +147,24 @@ onUnmounted(() => {
|
||||||
}
|
}
|
||||||
.name {
|
.name {
|
||||||
flex: 5;
|
flex: 5;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
div {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2; /* 这里的数字表示要显示的行数 */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.line {
|
.line {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 0.8rem;
|
height: 0.8rem;
|
||||||
background-color: #0a385b;
|
background-color: #0a385b;
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
|
overflow: hidden;
|
||||||
.line-body {
|
.line-body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.8rem;
|
||||||
|
|
Loading…
Reference in New Issue