325 lines
13 KiB
Vue
325 lines
13 KiB
Vue
<template>
|
||
<section>
|
||
<common>
|
||
<template #main>
|
||
<div class="warehouse-detail">
|
||
<div class="title">
|
||
<span @click="toBack(-1)">物流</span>
|
||
<span class="mx-10"> > </span>
|
||
<span style="color: rgba(37, 191, 130, 1)">查看详情</span>
|
||
</div>
|
||
|
||
<div class="detail-content-box">
|
||
<div class="detail-content-box-left">
|
||
<img :src="state.data.imageUrl" fit="cover" />
|
||
</div>
|
||
<div class="detail-content-box-center">
|
||
<p class="center-title">
|
||
{{ state.data.title }}
|
||
</p>
|
||
<div class="center-text">
|
||
<div class="center-text-lable" style="line-height: 32px; color: #000">参考价格：</div>
|
||
<div class="flex-1">
|
||
<p class="top-text" style="line-height: 32px">{{ state.data.price }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="center-text">
|
||
<div class="center-text-lable">发布企业：</div>
|
||
<div class="flex-1">{{ state.data.operationUnit }}</div>
|
||
</div>
|
||
<div class="center-text">
|
||
<div class="center-text-lable">所在地址：</div>
|
||
<div class="flex-1">{{ state.data.location }}</div>
|
||
</div>
|
||
<div class="center-text">
|
||
<div class="center-text-lable">联系电话：</div>
|
||
<div class="flex-1">{{ state.data.contactNumber }}</div>
|
||
</div>
|
||
<div class="center-text">
|
||
<div class="center-text-lable">成功服务：</div>
|
||
<div class="flex-1">{{ state.data.serviceTimes }}</div>
|
||
</div>
|
||
<p style="color: #25bf82; font-size: 14px">距离指定位置：30km</p>
|
||
<div style="position: absolute; right: 20px; top: 190px">
|
||
<el-button size="large" type="primary" @click="reservation">立即预约</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="warehouse-detail-title">
|
||
<img :src="getAssetsFile('images/warehouseLogistics/car-icon.png')" alt="" style="width: 30px" draggable="false" />
|
||
<div class="center-title page-title">车辆信息</div>
|
||
</div>
|
||
<div class="warehouse-content-align">
|
||
<div class="center-text">
|
||
<div class="center-text-lable">车牌：</div>
|
||
<div class="flex-1">{{ state.carInfor.licensePlate }}</div>
|
||
<div class="center-text-lable">车长：</div>
|
||
<div class="flex-1">{{ state.carInfor.conductor }}</div>
|
||
</div>
|
||
<div class="center-text">
|
||
<div class="center-text-lable">车辆性质：</div>
|
||
<div class="flex-1">{{ state.carInfor.vehicleNature }}</div>
|
||
<div class="center-text-lable">车型：</div>
|
||
<div class="flex-1">{{ state.carInfor.vehicleModel }}</div>
|
||
</div>
|
||
<div class="center-text">
|
||
<div class="center-text-lable">最大载重：</div>
|
||
<div class="flex-1">{{ state.carInfor.maximumPayload }}</div>
|
||
<div class="center-text-lable">空闲时间：</div>
|
||
<div class="flex-1">{{ state.carInfor.freeTime }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="warehouse-detail-title">
|
||
<img :src="getAssetsFile('images/warehouseLogistics/location.png')" alt="" style="width: 30px" />
|
||
<div class="center-title page-title">服务区域</div>
|
||
</div>
|
||
<p class="body-text">云南昆明 玉溪 普洱 红河 保山 大理 丽江 临沧贵州毕节 六盘水 遵义 安顺</p>
|
||
|
||
<div class="warehouse-detail-title">
|
||
<img :src="getAssetsFile('images/warehouseLogistics/product.png')" alt="" style="width: 30px" />
|
||
<div class="center-title page-title">公司简介</div>
|
||
</div>
|
||
<p class="body-text">
|
||
昌盛伟业运输有限公司，是一家专注于农产品物流领域的现代化企业，凭借多年深耕，公司已构建起源盖全国主要农产品产区与消费市场的物流网络，旨在为农产品的流涌保驾护航，确保从田间到餐桌的高效、安全运输。
|
||
</p>
|
||
<p class="body-text">
|
||
<b>服务范围：</b>
|
||
1.生鲜农产品配送:涵需蔬菜、水果、肉类、禽蛋、水产等各类牛鲜食材，与众多农户、农业合作社以及大型牛鲜供万商建立紧密合作关系，确保货源稳定目新鲜。无论是超市日常补货、餐饮企业批量采购，还是电商生鲜订单，都能精准、及时送达。2.千货农产品运输:针对粮食、坚果、干苗菇、干辣椒等干货农产品，公司配备专业的干货仓储设施与运输车辆，根据产品特性制定适宜的运输方案，有效防止受潮、变、虫虻等问题，保障干货品质在长途运输与长期储存中不受损。农产品加工辅助物流;为农产品加工企业提供原材料入厂与成品出厂的配套物流服务，例如协助果汁厂运输新鲜水果原料，助3.力面粉厂配送小麦等，深度参与农产品产业链各环节，提高产业协同效率。
|
||
</p>
|
||
<p class="body-text">
|
||
<b>核心优势：</b>
|
||
1.冷链物流实力:公司投入巨资打造先进的冷链物流体系，冷藏车、冷冻车数量充足目配备先进的温度监探设备，可实现全程精准控温，对于生鲜农产品，如低温保鲜的奶制品运输途中温度波动控制在
|
||
+2℃℃以内，确保产品新鲜度与品质，极大降低损耗率。专业仓储设施:拥有多样化的仓储资源，包括常温库、冷藏库、冷冻库、气调库等，以满足不同农产品的储存需求。气调库能2精准调节气体成分，延长果蔬保鲜期:冷冻库温度可低至:25℃，为肉类、水产等冷冻产品提供优质储存环境。3.高效配送网络:通过大数据与物流优化算法，构建智能配送路线规划系统，结合公司在全国各地的物流节点，实现农产品配送的快速与精准，以北京为中心，向周边城市配送农产品，当日达或次日达的配送比例高达%，大幅提升客户满意度。4:农产品追湖体系:自主研发农产品追溯平台，利用物联网、区块链等技术，为每件农产品赋予唯一的身份标识。消费者通过扫码或输入编码、即可查询农产品的产地、种枯!养殖过程、采摘)居宰时间、物流轨迹等详细信息，实现全程透明化，保障食品安全。
|
||
</p>
|
||
<p class="body-text">
|
||
<b>专业团队：</b>
|
||
公司员工队伍由物流专家、农产品保鲜技术人员、农业知识顾问等专业人才组成，物流专家确保运输配送高效5.顺畅:保鲜技术人员为合储保鲜提供技术支持:农业知识顾问深入产地，指导农户规范生产、科学包装，提升农产品源头质量，
|
||
</p>
|
||
<p class="body-text">
|
||
<b>质量控制：</b>
|
||
1.源头把控:派遣专业团队深入农产品产地、对农户的种植、养殖环境进行评估、检测土壤、水质、空气质量，确保符合绿色有机标准，协助农户采用科学的病虫害防治方法，避免农药残留超标，从源头上保障农产品质量，2.仓储保鲜监控:,在仓储环节、利用传感器实时监测仓库内温湿度、气体成分等关键参数，一旦出现异常，立即启动预警机制及时调整仓储条件，防止农产品变质。
|
||
3.运输涂中监管:冷藏车、冷冻车搭载的温度监控设备，实时向监控中心传输温度数据，若温度偏离设定范围、系统自动涌知司机采取措施纠正，同时调度中心远程协助，确保运输过程农产品质量稳定。
|
||
</p>
|
||
|
||
<div class="warehouse-detail-title">
|
||
<img :src="getAssetsFile('images/warehouseLogistics/image.png')" alt="" style="width: 30px" />
|
||
<div class="center-title page-title">仓库图片</div>
|
||
</div>
|
||
<img :src="getAssetsFile('images/warehouseLogistics/company-vehicles1.png')" alt="" class="fill-img" draggable="false" />
|
||
<img :src="getAssetsFile('images/warehouseLogistics/company-vehicles2.png')" alt="" class="fill-img" draggable="false" />
|
||
<img :src="getAssetsFile('images/warehouseLogistics/company-vehicles3.png')" alt="" class="fill-img" draggable="false" />
|
||
</div>
|
||
|
||
<el-dialog v-model="dialogVisible" title="立即预约" width="500">
|
||
<div style="min-height: 50px">
|
||
<span style="color: #666">联系人：</span>{{ state.data.contacts }} <span style="margin-left: 20px; color: #666">联系电话：</span
|
||
>{{ state.data.contactNumber }}
|
||
</div>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" @click="dialogVisible = false">确认</el-button>
|
||
<el-button @click="dialogVisible = false">取消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</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 { logisticDetail } from '@/apis/warehouseLogistics.js';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
|
||
import img1 from './images/big-xiangshi.png';
|
||
const state = reactive({
|
||
query: {},
|
||
data: {
|
||
imageUrl: img1,
|
||
typeId: 1,
|
||
typeName: '普通仓储',
|
||
title: '长途大车',
|
||
operationUnit: '昌盛伟业运输有限公司 ',
|
||
pricingUnit: '元/㎡·月',
|
||
storageArea: '8,600㎡',
|
||
usableArea: '2,300㎡',
|
||
location: '孟定镇中缅大道8号',
|
||
price: '￥12元/㎡/月',
|
||
contacts: '张强',
|
||
contactNumber: '13356846589',
|
||
serviceTimes: '206次',
|
||
},
|
||
carInfor: {
|
||
title: '长途大车',
|
||
licensePlate: '云AL6AB7',
|
||
conductor: '15m',
|
||
vehicleNature: '物流公司',
|
||
vehicleModel: '厢式',
|
||
maximumPayload: '1000吨',
|
||
freeTime: '2025.05.05',
|
||
price: '￥20元/吨/公里',
|
||
},
|
||
});
|
||
|
||
const dialogVisible = ref(false);
|
||
const reservation = () => {
|
||
dialogVisible.value = true;
|
||
};
|
||
|
||
const toBack = (level) => {
|
||
router.go(level);
|
||
};
|
||
const queryDetail = () => {
|
||
logisticDetail(state.query.id).then((res) => {
|
||
if (res.code === 200) {
|
||
state.data = res.data;
|
||
for (let i in state.data) {
|
||
state.data[i].tag = state.data[i].tags.split(',');
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
onMounted(() => {
|
||
state.query.id = route.query.id;
|
||
// queryDetail();
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.warehouse-detail {
|
||
border-radius: 14px;
|
||
background-color: #fff;
|
||
padding: 20px 20px 0 20px;
|
||
}
|
||
.title {
|
||
text-align: left;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
/* 根据需要添加样式，这里仅提供基础样式 */
|
||
// 基础颜色配置
|
||
$primary-color: #25bf82; // 主色调
|
||
$text-dark: #25bf82; // 深色文字
|
||
$text-regular: #606266; // 常规文字
|
||
$border-color: #dcdfe6; // 边框颜色
|
||
|
||
// 按钮组样式
|
||
.dialog-footer {
|
||
text-align: center;
|
||
.el-button {
|
||
padding: 10px 24px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
.cancel-btn {
|
||
color: $text-regular;
|
||
&:hover {
|
||
color: $primary-color;
|
||
border-color: $primary-color;
|
||
}
|
||
}
|
||
.submit-btn {
|
||
color: #fff;
|
||
background: $primary-color;
|
||
&:hover {
|
||
background: mix($primary-color, #fff, 85%);
|
||
}
|
||
}
|
||
}
|
||
|
||
.warehouse-detail-title {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
margin: 20px 0 15px 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
.body-text {
|
||
font-size: 16px;
|
||
text-align: left;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.detail-content-box {
|
||
height: 276px;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
.detail-content-box-left {
|
||
height: 100%;
|
||
width: 40%;
|
||
border-radius: 14px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
img {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
min-width: 100%;
|
||
min-height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
.detail-content-box-center {
|
||
flex: 1;
|
||
text-align: left;
|
||
position: relative;
|
||
}
|
||
.center-title {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
margin-bottom: 10px;
|
||
.highlight {
|
||
color: #25bf82;
|
||
}
|
||
}
|
||
.page-title {
|
||
margin: 0 0 4px 10px;
|
||
}
|
||
.warehouse-content-align {
|
||
text-align: left;
|
||
}
|
||
.center-text {
|
||
font-size: 16px;
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
.center-text-lable {
|
||
color: #666;
|
||
width: 86px;
|
||
}
|
||
.flex-1 {
|
||
flex: 1;
|
||
text-align: left;
|
||
}
|
||
}
|
||
.top-text {
|
||
font-size: 22px;
|
||
color: #25bf82;
|
||
font-weight: bold;
|
||
}
|
||
.fill-img {
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.dialog-custom-title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
}
|
||
</style>
|