296 lines
8.2 KiB
Vue
296 lines
8.2 KiB
Vue
<template>
|
||
<section>
|
||
<common>
|
||
<template #main>
|
||
<el-card shadow="never" style="border-radius: 14px">
|
||
<div class="title">
|
||
<span @click="toBack(-2)">物流</span>
|
||
<span class="mx-10"> > </span>
|
||
<span @click="toBack(-1)">在线寄货</span>
|
||
<span class="mx-10"> > </span>
|
||
<span style="color: rgba(37, 191, 130, 1)">资源匹配</span>
|
||
</div>
|
||
<div style="display: flex">
|
||
<div style="width: 60%">
|
||
<el-descriptions title="发货信息" :column="3" style="margin-top: 20px">
|
||
<el-descriptions-item label="姓名:">张超</el-descriptions-item>
|
||
<el-descriptions-item label="电话:">15684968769</el-descriptions-item>
|
||
<el-descriptions-item label="位置:">临沧市-耿马县</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions title="收货信息" :column="3">
|
||
<el-descriptions-item label="姓名:">刘美丽</el-descriptions-item>
|
||
<el-descriptions-item label="电话:">13375869426</el-descriptions-item>
|
||
<el-descriptions-item label="位置:">临沧市-耿马县</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions title="收货信息" :column="3">
|
||
<el-descriptions-item label="货物名称:">西红柿</el-descriptions-item>
|
||
<el-descriptions-item label="货物重量:">500吨</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
<div style="flex: 1; text-align: right">
|
||
<el-button type="primary" size="large" style="width: 100px; margin-top: 100px">重新匹配</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
|
||
<div class="storage-content">
|
||
<div class="content-custom-title">平台匹配仓储资源</div>
|
||
<div class="tabs">
|
||
<div class="tab cursor">
|
||
<div
|
||
v-for="(item, index) in tab1"
|
||
:key="index"
|
||
class="tab_list_li"
|
||
:class="{ active: currentTab1 === index }"
|
||
@click="handleTab1Click(item, index)"
|
||
>
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<el-row :gutter="20">
|
||
<el-col v-for="(item, index) in allData" :key="index" :span="8">
|
||
<div class="resource-item">
|
||
<div class="resource-item-img">
|
||
<img :src="item.imageUrl" fit="cover" draggable="false" class="storage-image" />
|
||
</div>
|
||
<p class="center-title">
|
||
{{ item.title }}
|
||
</p>
|
||
<div class="resource-custom-text">距离您的位置：{{ item.distance }}</div>
|
||
<div class="center-text">
|
||
<div class="center-text-lable">发布企业：</div>
|
||
<div class="flex-1" :title="item.operationUnit">{{ item.operationUnit }}</div>
|
||
</div>
|
||
<div class="center-text">
|
||
<div class="center-text-lable">联系电话：</div>
|
||
<div class="flex-1" :title="item.phoneNumber">{{ item.phoneNumber }}</div>
|
||
</div>
|
||
<div class="center-text" style="margin: 10px 0">
|
||
<div class="center-text-lable" style="color: 000; font-weight: bold">参考价格：</div>
|
||
<div class="flex-1" style="font-size: 20px; color: #25bf82; font-weight: bold">{{ item.price }}</div>
|
||
</div>
|
||
<div style="display: flex">
|
||
<el-button type="primary" size="large" style="flex: 1; margin: 10px 20px">立即查看</el-button>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
</common>
|
||
</section>
|
||
</template>
|
||
<script setup>
|
||
import { ref, reactive, watch, onMounted } from 'vue';
|
||
import { getAssetsFile } from '@/utils';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import Common from '../components/common.vue';
|
||
import { warehouseDetail } from '@/apis/warehouseLogistics.js';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
const tab1 = reactive(['全部', '距离最近', '价格最便宜']);
|
||
const currentTab1 = ref(0);
|
||
const handleTab1Click = (item, index) => {
|
||
currentTab1.value = index;
|
||
};
|
||
|
||
import img1 from './images/car1.png';
|
||
import img2 from './images/car2.png';
|
||
import img3 from './images/car3.png';
|
||
const allData = ref([
|
||
{
|
||
imageUrl: img1,
|
||
title: '长途货车',
|
||
operationUnit: '昌盛伟业运输有限公司 ',
|
||
phoneNumber: '15684968769',
|
||
pricingUnit: '元/㎡·月',
|
||
location: '孟定镇中缅大道8号',
|
||
cargoVolume: '61.2m³',
|
||
price: '￥19元/吨/公里',
|
||
distance: '9.1km',
|
||
},
|
||
{
|
||
imageUrl: img2,
|
||
title: '长途货车',
|
||
operationUnit: '昌盛伟业运输有限公司',
|
||
phoneNumber: '13375869426',
|
||
pricingUnit: '元/吨·天',
|
||
location: '绿色食品园区二期',
|
||
cargoVolume: '63m³',
|
||
price: '￥20元/吨/公里',
|
||
distance: '10.3km',
|
||
},
|
||
{
|
||
imageUrl: img3,
|
||
title: '长途货车',
|
||
operationUnit: '昌盛伟业运输有限公司',
|
||
phoneNumber: '15958621375',
|
||
pricingUnit: '元/托·月',
|
||
location: '耿马糖厂东侧',
|
||
cargoVolume: '63m³',
|
||
price: '￥20元/吨/公里',
|
||
distance: '12.6km',
|
||
},
|
||
]);
|
||
|
||
const toBack = (level) => {
|
||
router.go(level);
|
||
};
|
||
|
||
const param = ref({
|
||
id: '100',
|
||
});
|
||
const queryDetail = () => {
|
||
warehouseDetail(param).then((res) => {
|
||
if (res.code === 200) {
|
||
allData.value = res.data;
|
||
for (let i in allData.value) {
|
||
allData.value[i].tag = allData.value[i].tags.split(',');
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
param.value.id = route.query.id ?? '100';
|
||
// queryDetail();
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.title {
|
||
text-align: left;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.storage-content {
|
||
padding: 20px 20px 0 20px;
|
||
margin-top: 20px;
|
||
border-radius: 14px;
|
||
background-color: #fff;
|
||
}
|
||
.content-custom-title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.tabs {
|
||
//height: 160px;
|
||
line-height: 50px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 18px;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
.tabs0 {
|
||
padding: 0;
|
||
}
|
||
.tab {
|
||
// height: 100px;
|
||
width: 850px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
overflow-x: auto;
|
||
overflow: auto; /* 启用滚动 */
|
||
white-space: nowrap; /* 强制单行显示 */
|
||
-ms-overflow-style: none; /* IE/Edge 兼容 */
|
||
scrollbar-width: none; /* 隐藏滚动条 */
|
||
.tab_list {
|
||
color: #999999;
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
}
|
||
.tab_list_li {
|
||
margin-left: 40px;
|
||
color: #666;
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
transition: color 0.3s ease;
|
||
}
|
||
.tab_list_li:first-child {
|
||
margin-left: 0px;
|
||
}
|
||
.tab_list_li.active {
|
||
color: #25bf82;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.cursor {
|
||
cursor: pointer;
|
||
}
|
||
.active {
|
||
color: #25bf82;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.resource-item {
|
||
width: 100%;
|
||
min-height: 300px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 20px;
|
||
text-align: left;
|
||
.resource-item-img {
|
||
width: 100%;
|
||
height: 250px;
|
||
border-radius: 14px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-color: rgb(102 102 102 / 10%);
|
||
img {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
min-width: 100%;
|
||
min-height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
.center-title {
|
||
color: #666;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
.highlight {
|
||
color: #25bf82;
|
||
}
|
||
}
|
||
.resource-custom-text {
|
||
margin-bottom: 10px;
|
||
font-size: 16px;
|
||
color: #25bf82;
|
||
}
|
||
.center-text {
|
||
font-size: 16px;
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
.center-text-lable {
|
||
color: #666;
|
||
width: 86px;
|
||
line-height: 20px;
|
||
}
|
||
.flex-1 {
|
||
flex: 1;
|
||
line-height: 20px;
|
||
text-align: left;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
</style>
|