Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
76332c0251
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 665 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 771 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 597 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@ -2,7 +2,7 @@
|
||||
<div class="ecommerce-left-menu-warp">
|
||||
<div class="left-menu">
|
||||
<div>
|
||||
<img :src="getAssetsFile('images/logo3.png')?.href" style="width: 90%; height: 60px" />
|
||||
<img :src="getAssetsFile('images/logo3.png')?.href" style="width: 90%" />
|
||||
</div>
|
||||
<view
|
||||
v-for="(n, index) in leftMenu"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="ecommerce-left-menu-warp">
|
||||
<div class="left-menu">
|
||||
<div>
|
||||
<img :src="getAssetsFile('images/logo3.png')?.href" style="width: 90%; height: 60px" />
|
||||
<img :src="getAssetsFile('images/logo3.png')?.href" style="width: 90%" />
|
||||
</div>
|
||||
<view
|
||||
v-for="(n, index) in leftMenu"
|
||||
|
||||
@ -2,65 +2,128 @@
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="title" @click="toBack(-1)">
|
||||
<el-icon><ArrowLeftBold /></el-icon>物流 · <span style="color: rgba(37, 191, 130, 1)">查看详情</span>
|
||||
<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="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img20.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<!-- <div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
|
||||
|
||||
<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="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ state.data.name }}</h3>
|
||||
<div class="text-gray-600 mb-2">
|
||||
<span>{{ state.data.parentTitle }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px; margin: 0 5px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag
|
||||
v-for="(tags, indexT) in state.data.tag"
|
||||
:key="indexT"
|
||||
effect="plain"
|
||||
round
|
||||
style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
|
||||
>
|
||||
{{ tags }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：{{ state.data.contactName }}</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：{{ state.data.contactPhone }}</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ state.data.address }}
|
||||
</p>
|
||||
<div class="center-text">
|
||||
<div class="center-text-lable">发布企业：</div>
|
||||
<div class="flex-1">{{ state.data.operationUnit }}</div>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center" style="text-align: right">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">
|
||||
¥{{ state.data.price }}/{{
|
||||
state.data.priceSpec === 1 ? 'kg' : state.data.priceSpec === 2 ? '件' : state.data.priceSpec === 3 ? 'm³' : ''
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei">
|
||||
<el-icon class="el-icon--right"><ChatLineRound /></el-icon>
|
||||
留下信息
|
||||
</el-button>
|
||||
</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 class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700" v-html="state.data.content ? state.data.content : '暂无介绍内容'"></p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<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>
|
||||
@ -75,15 +138,44 @@ import { logisticDetail } from '@/apis/warehouseLogistics.js';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
import img1 from './images/big-xiangshi.png';
|
||||
const state = reactive({
|
||||
query: {},
|
||||
data: {},
|
||||
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) {
|
||||
@ -97,10 +189,15 @@ const queryDetail = () => {
|
||||
|
||||
onMounted(() => {
|
||||
state.query.id = route.query.id;
|
||||
queryDetail();
|
||||
// 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;
|
||||
@ -114,79 +211,9 @@ $text-dark: #25bf82; // 深色文字
|
||||
$text-regular: #606266; // 常规文字
|
||||
$border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
// 弹窗整体样式
|
||||
:deep(.custom-inquiry-dialog) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f2f6fc;
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
color: $text-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px 28px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: $text-regular;
|
||||
font-size: 14px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 0px 50px;
|
||||
margin-bottom: 24px;
|
||||
.info-item {
|
||||
margin-bottom: 12px;
|
||||
.label {
|
||||
color: $text-regular;
|
||||
margin-right: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.value {
|
||||
color: $text-dark;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框样式覆盖
|
||||
:deep(.el-input) {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.el-input__suffix {
|
||||
color: $text-regular;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单样式
|
||||
:deep(.custom-select-dropdown) {
|
||||
.el-select-dropdown__item {
|
||||
color: $text-regular;
|
||||
&.selected {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
text-align: center;
|
||||
.el-button {
|
||||
padding: 10px 24px;
|
||||
border-radius: 4px;
|
||||
@ -207,137 +234,91 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
.bac {
|
||||
background: rgba(37, 191, 130, 0.1);
|
||||
border: 1px solid rgba(37, 191, 130, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
height: 300px;
|
||||
.warehouse-detail-title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
margin: 20px 0 15px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start !important;
|
||||
font-size: 20px !important;
|
||||
color: #000000 !important;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
font-size: 20px;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
width: 40%;
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
.storage-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
.body-text {
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
.detail-content-box {
|
||||
height: 276px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
color: #25bf82;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
.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;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
.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;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.space-x-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
.dialog-custom-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -3,12 +3,7 @@
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img19.png" fit="cover" class="storage-image" />
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- <el-card shadow="none" style="border-radius: 14px">
|
||||
<el-card shadow="never" style="border-radius: 14px">
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
@ -17,86 +12,67 @@
|
||||
class="tab_list_li"
|
||||
style="margin-left: 20px; margin-bottom: 10px"
|
||||
:class="{ active: currentTab0 === index, tab_list_li0: currentTab0 === index }"
|
||||
@click.stop="
|
||||
currentTab0 = index;
|
||||
currentTab1 = 0;
|
||||
currentTab2 = 0;
|
||||
"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentTab0 === 0" class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div style="flex: 1; text-align: left">
|
||||
<el-cascader
|
||||
v-model="state.query.selectedAddress"
|
||||
:options="addressOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择省市区"
|
||||
:size="formSize"
|
||||
style="width: 500px; margin-bottom: 20px"
|
||||
/>
|
||||
<el-input v-model="state.query.detailAddress" :size="formSize" placeholder="详细位置（如街道、门牌号等）" style="width: 500px" />
|
||||
</div>
|
||||
<div style="width: 150px; text-align: right">
|
||||
<el-button type="primary" size="large" style="width: 100px">查询</el-button>
|
||||
<el-button type="primary" size="large" style="width: 100px; margin-top: 20px" @click="shippingGoods">在线寄货</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentTab0 === 1" class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab2"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</el-card>
|
||||
|
||||
<div v-if="state.data == 0" class="warehouse-content-box no-data">暂无数据</div>
|
||||
<div v-else style="padding-bottom: 20px">
|
||||
<div v-for="(item, index) in state.data" :key="index" class="warehouse-content-box">
|
||||
<div class="warehouse-content-box-left">
|
||||
<img :src="item.imageUrl" fit="cover" draggable="false" />
|
||||
</div>
|
||||
<div class="warehouse-content-box-center">
|
||||
<p class="center-title">
|
||||
{{ item.title }}
|
||||
</p>
|
||||
<div class="center-text">
|
||||
<div class="center-text-lable">车牌：</div>
|
||||
<div class="flex-1">{{ item.licensePlate }}</div>
|
||||
<div class="center-text-lable">车长：</div>
|
||||
<div class="flex-1">{{ item.conductor }}</div>
|
||||
</div>
|
||||
<div class="center-text">
|
||||
<div class="center-text-lable">车辆性质：</div>
|
||||
<div class="flex-1">{{ item.vehicleNature }}</div>
|
||||
<div class="center-text-lable">车型：</div>
|
||||
<div class="flex-1">{{ item.vehicleModel }}</div>
|
||||
</div>
|
||||
<div class="center-text">
|
||||
<div class="center-text-lable">最大载重：</div>
|
||||
<div class="flex-1">{{ item.maximumPayload }}</div>
|
||||
<div class="center-text-lable">空闲时间：</div>
|
||||
<div class="flex-1">{{ item.freeTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentTab0 === 1" class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab3"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="warehouse-content-box-right">
|
||||
<p class="top-text">{{ item.price }}</p>
|
||||
<el-button size="large" type="primary" class="right-button" @click="toLink(item)">预约</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card> -->
|
||||
<el-row :gutter="20" style="margin-top: 10px">
|
||||
<el-col v-if="currentTab0 === 0" :span="24" style="margin-bottom: 100px !important">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img11.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img12.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-else :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img13.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 50px" size="large" type="primary" @click="shippingGoods">在线寄货</el-button>
|
||||
</div>
|
||||
<!-- <el-pagination
|
||||
</div>
|
||||
|
||||
<!-- <el-pagination
|
||||
:size="'large'"
|
||||
:page-size="paginations.size"
|
||||
:current-page="paginations.page"
|
||||
@ -105,7 +81,6 @@
|
||||
layout="prev, pager, next"
|
||||
@current-change="currentChange"
|
||||
/> -->
|
||||
</el-row>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
@ -120,74 +95,48 @@ import Common from '../components/common.vue';
|
||||
import { useGetCommonData } from '@/store/modules/common.js';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { getRegion } from '@/apis/common';
|
||||
const store = useGetCommonData();
|
||||
const { data } = storeToRefs(store);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab0 = reactive(['物流服务', '物流需求']);
|
||||
const tab1 = reactive(['全部', '物流公司', '个人']);
|
||||
const tab2 = reactive(['全部', '11米7', '13米', '13米7', '15米']);
|
||||
const tab3 = reactive(['全部', '厢式', '平板', '高栏', '飞翼', '开顶']);
|
||||
const tab0 = reactive(['选择位置']);
|
||||
const currentTab0 = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
const currentTab2 = ref(0);
|
||||
const currentTab3 = ref(0);
|
||||
|
||||
const formSize = 'large';
|
||||
|
||||
import img1 from './images/xiangshi.png';
|
||||
import img2 from './images/gaolan.png';
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {
|
||||
current: {},
|
||||
selectedAddress: [],
|
||||
detailAddress: '',
|
||||
},
|
||||
data: [
|
||||
{
|
||||
imageUrl: '/storage1.jpg',
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '600.0',
|
||||
rank: '1',
|
||||
imageUrl: img1,
|
||||
title: '长途大车',
|
||||
licensePlate: '云AL6AB7',
|
||||
conductor: '15m',
|
||||
vehicleNature: '物流公司',
|
||||
vehicleModel: '厢式',
|
||||
maximumPayload: '1000吨',
|
||||
freeTime: '2025.05.05',
|
||||
price: '￥20元/吨/公里',
|
||||
},
|
||||
{
|
||||
imageUrl: '/storage2.jpg',
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心',
|
||||
location: '临沧市-耿马县',
|
||||
price: '600.0',
|
||||
rank: '2',
|
||||
},
|
||||
{
|
||||
imageUrl: '/storage3.jpg',
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '600.0',
|
||||
rank: '3',
|
||||
},
|
||||
{
|
||||
imageUrl: '/storage3.jpg',
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '600.0',
|
||||
rank: '',
|
||||
},
|
||||
{
|
||||
imageUrl: '/storage3.jpg',
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '600.0',
|
||||
rank: '',
|
||||
},
|
||||
{
|
||||
imageUrl: '/storage3.jpg',
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '600.0',
|
||||
rank: '',
|
||||
imageUrl: img2,
|
||||
title: '长途大车',
|
||||
licensePlate: '云AL5B15',
|
||||
conductor: '13m',
|
||||
vehicleNature: '个人',
|
||||
vehicleModel: '高栏',
|
||||
maximumPayload: '800吨',
|
||||
freeTime: '2025.05.08',
|
||||
price: '￥20元/吨/公里',
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -200,13 +149,7 @@ const paginations = reactive({
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = ref('120px');
|
||||
|
||||
onMounted(() => {
|
||||
getWarehouseList('1');
|
||||
});
|
||||
|
||||
const currentTab = ref(0);
|
||||
|
||||
const currentChange = (current) => {
|
||||
paginations.page = current;
|
||||
getWarehouseList(currentTab.value + 1);
|
||||
@ -279,6 +222,30 @@ const priceConfirm = () => {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 级联选择器配置
|
||||
const cascaderProps = ref({
|
||||
label: 'areaName', // 选项标签字段名
|
||||
value: 'areaCode', // 选项值字段名
|
||||
children: 'areaChildVOS', // 子选项字段名
|
||||
emitPath: true,
|
||||
expandTrigger: 'hover',
|
||||
});
|
||||
// 省市区数据（示例）
|
||||
const addressOptions = ref([]);
|
||||
const getArea = async () => {
|
||||
const res = await getRegion();
|
||||
if (res.code === 200) {
|
||||
addressOptions.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.message);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// getWarehouseList('1');
|
||||
getArea();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-form-item--large {
|
||||
@ -318,6 +285,7 @@ const priceConfirm = () => {
|
||||
color: #000000;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.tab_list_li:first-child {
|
||||
margin-left: 20px;
|
||||
@ -326,7 +294,19 @@ const priceConfirm = () => {
|
||||
color: rgba(37, 191, 130, 1);
|
||||
}
|
||||
.tab_list_li0 {
|
||||
border-bottom: 2px solid rgba(37, 191, 130, 1);
|
||||
position: relative;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
.tab_list_li0::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
height: 4px;
|
||||
background: rgba(37, 191, 130, 1);
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.cursor {
|
||||
@ -335,115 +315,83 @@ const priceConfirm = () => {
|
||||
.active {
|
||||
color: rgba(37, 191, 130, 1);
|
||||
}
|
||||
.storage-card {
|
||||
|
||||
.warehouse-content-box {
|
||||
min-height: 150px;
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
border-radius: 14px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
.no-data {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.warehouse-content-box-left {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
border-radius: 14px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.storage-content {
|
||||
@include flex-column;
|
||||
|
||||
gap: 16px;
|
||||
&-top {
|
||||
@include flex-row;
|
||||
|
||||
align-items: center;
|
||||
img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.storage-price-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.storage-image1 {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
.warehouse-content-box-center {
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
.center-title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.center-text {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
.center-text-lable {
|
||||
color: #666;
|
||||
width: 70px;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
.center-text-cont {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
.center-location {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
.el-icon {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
.storage-title,
|
||||
.storage-desc,
|
||||
.storage-tags,
|
||||
.storage-location {
|
||||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
.storage-title {
|
||||
.warehouse-content-box-right {
|
||||
width: 160px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
@include ellipsis;
|
||||
}
|
||||
.storage-desc {
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
@include ellipsis;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.storage-tags {
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.storage-location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.storage-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-left {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
.top-text {
|
||||
font-size: 22px;
|
||||
color: #25bf82;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.price-label {
|
||||
margin-right: 10px;
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
}
|
||||
.price-amount {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #25bf82;
|
||||
}
|
||||
.contact-btn {
|
||||
width: 152px;
|
||||
height: 48px;
|
||||
font-size: 20px;
|
||||
border-radius: 8px;
|
||||
background: #25bf82 !important;
|
||||
:deep(.el-icon) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.rank-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
.storage-image {
|
||||
.right-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,74 +2,82 @@
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<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>
|
||||
<span style="color: rgba(37, 191, 130, 1)">资源匹配</span>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img22.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<!-- <div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ state.data.name }}</h3>
|
||||
<div class="text-gray-600 mb-2">
|
||||
<span>{{ state.data.parentTitle }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px; margin: 0 5px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag
|
||||
v-for="(tags, indexT) in state.data.tag"
|
||||
:key="indexT"
|
||||
effect="plain"
|
||||
round
|
||||
style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
|
||||
>
|
||||
{{ tags }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：{{ state.data.contactName }}</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：{{ state.data.contactPhone }}</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ state.data.address }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center" style="text-align: right">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">
|
||||
¥{{ state.data.price }}/{{
|
||||
state.data.priceSpec === 1 ? 'kg' : state.data.priceSpec === 2 ? '件' : state.data.priceSpec === 3 ? 'm³' : ''
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei">
|
||||
<el-icon class="el-icon--right"><ChatLineRound /></el-icon>
|
||||
留下信息
|
||||
</el-button>
|
||||
</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 class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700" v-html="state.data.content ? state.data.content : '暂无介绍内容'"></p>
|
||||
</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>
|
||||
</div> -->
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="none" style="border-radius: 14px; margin-top: 20px">
|
||||
<div class="max-w-7xl mx-auto p-4" style="padding: 0">
|
||||
<img src="@/assets/images/warehouseLogistics/img23.png" fit="cover" class="storage-image" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
@ -79,33 +87,76 @@ 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';
|
||||
import { warehouseDetail } from '@/apis/warehouseLogistics.js';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
query: {},
|
||||
data: {},
|
||||
});
|
||||
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 = () => {
|
||||
logisticDetail(state.query.id).then((res) => {
|
||||
warehouseDetail(param).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(',');
|
||||
allData.value = res.data;
|
||||
for (let i in allData.value) {
|
||||
allData.value[i].tag = allData.value[i].tags.split(',');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
state.query.id = route.query.id;
|
||||
param.value.id = route.query.id ?? '100';
|
||||
// queryDetail();
|
||||
});
|
||||
</script>
|
||||
@ -116,238 +167,129 @@ onMounted(() => {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 根据需要添加样式，这里仅提供基础样式 */
|
||||
// 基础颜色配置
|
||||
$primary-color: #25bf82; // 主色调
|
||||
$text-dark: #25bf82; // 深色文字
|
||||
$text-regular: #606266; // 常规文字
|
||||
$border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
// 弹窗整体样式
|
||||
:deep(.custom-inquiry-dialog) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f2f6fc;
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
color: $text-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px 28px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: $text-regular;
|
||||
font-size: 14px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 0px 50px;
|
||||
margin-bottom: 24px;
|
||||
.info-item {
|
||||
margin-bottom: 12px;
|
||||
.label {
|
||||
color: $text-regular;
|
||||
margin-right: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.value {
|
||||
color: $text-dark;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框样式覆盖
|
||||
:deep(.el-input) {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.el-input__suffix {
|
||||
color: $text-regular;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单样式
|
||||
:deep(.custom-select-dropdown) {
|
||||
.el-select-dropdown__item {
|
||||
color: $text-regular;
|
||||
&.selected {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bac {
|
||||
background: rgba(37, 191, 130, 0.1);
|
||||
border: 1px solid rgba(37, 191, 130, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start !important;
|
||||
font-size: 20px !important;
|
||||
color: #000000 !important;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
font-size: 20px;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
width: 40%;
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
.storage-content {
|
||||
padding: 20px 20px 0 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 14px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
.storage-image {
|
||||
width: 100%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
.active {
|
||||
color: #25bf82;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
.resource-item {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.space-x-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
.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>
|
||||
|
||||
@ -2,72 +2,155 @@
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="title" @click="toBack(-1)">
|
||||
<el-icon><ArrowLeftBold /></el-icon>物流 · <span style="color: rgba(37, 191, 130, 1)">在线寄货</span>
|
||||
<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="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img21.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
|
||||
|
||||
<div class="storage-content">
|
||||
<el-form ref="formRef" :model="formInline" :rules="dialogRules" required class="dialog-form-container" :label-width="'80'">
|
||||
<div class="shipping-custom-title" style="margin-top: 0">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/shipper.png')" alt="" draggable="false" />
|
||||
<div class="page-title">发货地址</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ state.data.name }}</h3>
|
||||
<div class="text-gray-600 mb-2">
|
||||
<span>{{ state.data.parentTitle }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px; margin: 0 5px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
<el-form-item label="发货人" prop="shipperName">
|
||||
<el-input
|
||||
v-model="formInline.shipperName"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入发货人姓名"
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="shipperPhone">
|
||||
<el-input
|
||||
v-model="formInline.shipperPhone"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入发货人电话"
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="发货地址" required>
|
||||
<div style="display: flex; gap: 16px">
|
||||
<el-form-item prop="selectedAddress">
|
||||
<el-cascader
|
||||
v-model="formInline.selectedAddress"
|
||||
:options="addressOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择省市区"
|
||||
:size="formSize"
|
||||
:style="{ width: unifiedWidth }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="detailAddress">
|
||||
<el-input
|
||||
v-model="formInline.detailAddress"
|
||||
:size="formSize"
|
||||
placeholder="详细地址（如街道、门牌号等）"
|
||||
:style="{ width: unifiedWidth }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag
|
||||
v-for="(tags, indexT) in state.data.tag"
|
||||
:key="indexT"
|
||||
effect="plain"
|
||||
round
|
||||
style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
|
||||
>
|
||||
{{ tags }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：{{ state.data.contactName }}</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：{{ state.data.contactPhone }}</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ state.data.address }}
|
||||
</p>
|
||||
</el-form-item>
|
||||
|
||||
<div class="shipping-custom-title">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/consignee.png')" alt="" draggable="false" />
|
||||
<div class="page-title">收货地址</div>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center" style="text-align: right">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">
|
||||
¥{{ state.data.price }}/{{
|
||||
state.data.priceSpec === 1 ? 'kg' : state.data.priceSpec === 2 ? '件' : state.data.priceSpec === 3 ? 'm³' : ''
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei">
|
||||
<el-icon class="el-icon--right"><ChatLineRound /></el-icon>
|
||||
留下信息
|
||||
</el-button>
|
||||
<el-form-item label="收货人" prop="consigneeName">
|
||||
<el-input
|
||||
v-model="formInline.consigneeName"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入收货人姓名"
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="consigneePhone">
|
||||
<el-input
|
||||
v-model="formInline.consigneePhone"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入收货人电话"
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="收货地址" required>
|
||||
<div style="display: flex; gap: 16px">
|
||||
<el-form-item prop="consigneeArea">
|
||||
<el-cascader
|
||||
v-model="formInline.consigneeArea"
|
||||
:options="addressOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择省市区"
|
||||
:size="formSize"
|
||||
:style="{ width: unifiedWidth }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="consigneeAddress">
|
||||
<el-input
|
||||
v-model="formInline.consigneeAddress"
|
||||
:size="formSize"
|
||||
placeholder="详细地址（如街道、门牌号等）"
|
||||
:style="{ width: unifiedWidth }"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div class="shipping-custom-title">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/goods.png')" alt="" draggable="false" />
|
||||
<div class="page-title">货物信息</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700" v-html="state.data.content ? state.data.content : '暂无介绍内容'"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img21.png" fit="cover" class="storage-image" />
|
||||
<div>
|
||||
<el-button style="padding: 10px 40px" size="default" type="primary" @click="application">提交</el-button>
|
||||
<el-button style="padding: 10px 40px" size="default" type="plain">取消</el-button>
|
||||
</div>
|
||||
<el-form-item label="货物名称" prop="goodsName">
|
||||
<el-input
|
||||
v-model="formInline.goodsName"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入货物名称"
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="货物类型" prop="goodsType">
|
||||
<el-select v-model="formInline.goodsType" placeholder="请选择" :size="formSize" :style="{ width: unifiedWidth }">
|
||||
<el-option v-for="item in goodsList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="货物重量" prop="goodsWeight">
|
||||
<el-input v-model="formInline.goodsWeight" :size="formSize" clearable placeholder="请输入货物重量" :style="{ width: unifiedWidth }">
|
||||
<template #append>Kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="货物体积" prop="goodsVolume">
|
||||
<el-input v-model="formInline.goodsVolume" :size="formSize" clearable placeholder="请输入货物体积" :style="{ width: unifiedWidth }">
|
||||
<template #append>m³</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="货物数量" prop="goodsQuantity">
|
||||
<el-input v-model="formInline.goodsQuantity" :size="formSize" clearable placeholder="请输入货物数量" :style="{ width: unifiedWidth }">
|
||||
<template #append>件</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="货物高度" prop="goodsHeight">
|
||||
<el-input v-model="formInline.goodsHeight" :size="formSize" clearable placeholder="请输入货物高度" :style="{ width: unifiedWidth }">
|
||||
<template #append>m</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="货物长度" prop="goodsLength">
|
||||
<el-input v-model="formInline.goodsLength" :size="formSize" clearable placeholder="请输入货物长度" :style="{ width: unifiedWidth }">
|
||||
<template #append>m</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
<div>
|
||||
<el-button style="width: 150px" size="large" type="primary" @click="application">提交</el-button>
|
||||
<el-button style="width: 150px" size="large" type="plain">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
@ -78,6 +161,8 @@ import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import Common from '../components/common.vue';
|
||||
import { logisticDetail } from '@/apis/warehouseLogistics.js';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { getRegion } from '@/apis/common';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@ -87,7 +172,226 @@ const state = reactive({
|
||||
data: {},
|
||||
});
|
||||
|
||||
const application = () => {
|
||||
const unifiedWidth = '300px';
|
||||
const formSize = 'large';
|
||||
const formRef = ref(null);
|
||||
const formInline = reactive({
|
||||
shipperName: '', //发货人
|
||||
shipperPhone: '', //联系电话
|
||||
selectedAddress: [], //选中的区域（编码数组）
|
||||
detailAddress: '', //详细地址
|
||||
|
||||
consigneeName: '', //收货人姓名
|
||||
consigneePhone: '', //收货人电话
|
||||
consigneeArea: '', //收货人区域（编码数组）
|
||||
consigneeAddress: '', //收货人详细地址
|
||||
|
||||
goodsName: '', //货物名称
|
||||
goodsType: '', //货物类型
|
||||
goodsWeight: '', //货物重量
|
||||
goodsVolume: '', //货物体积
|
||||
goodsQuantity: '', //货物数量
|
||||
goodsHeight: '', //货物高度
|
||||
goodsLength: '', //货物长度
|
||||
});
|
||||
const dialogRules = reactive({
|
||||
// 发货人信息
|
||||
shipperName: [
|
||||
{ required: true, message: '请输入发货人姓名', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '姓名长度在2到20个字符', trigger: 'blur' },
|
||||
],
|
||||
shipperPhone: [
|
||||
{ required: true, message: '请输入发货人电话', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
|
||||
message: '请输入正确的手机号或固话（如010-12345678）',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
|
||||
// 发货地址（级联选择器+详细地址）
|
||||
selectedAddress: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value, callback) => {
|
||||
if (!value || value.length !== 3) {
|
||||
callback(new Error('请选择完整的省市区'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
detailAddress: [
|
||||
{ required: true, message: '请输入详细地址', trigger: 'blur' },
|
||||
{ min: 3, max: 100, message: '地址长度在3到100个字符', trigger: 'blur' },
|
||||
],
|
||||
|
||||
// 收货人信息
|
||||
consigneeName: [
|
||||
{ required: true, message: '请输入收货人姓名', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '姓名长度在2到20个字符', trigger: 'blur' },
|
||||
],
|
||||
consigneePhone: [
|
||||
{ required: true, message: '请输入收货人电话', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
|
||||
message: '请输入正确的手机号或固话（如010-12345678）',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
|
||||
// 收货地址（级联选择器+详细地址）
|
||||
consigneeArea: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value, callback) => {
|
||||
if (!value || value.length !== 3) {
|
||||
callback(new Error('请选择完整的省市区'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
consigneeAddress: [
|
||||
{ required: true, message: '请输入详细地址', trigger: 'blur' },
|
||||
{ min: 3, max: 100, message: '地址长度在3到100个字符', trigger: 'blur' },
|
||||
],
|
||||
|
||||
// 货物信息
|
||||
goodsName: [
|
||||
{ required: true, message: '请输入货物名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '名称长度在2到50个字符', trigger: 'blur' },
|
||||
],
|
||||
goodsType: [{ required: true, message: '请选择货物类型', trigger: 'change' }],
|
||||
goodsWeight: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入货物重量'));
|
||||
} else if (!/^\d+(\.\d{1,2})?$/.test(value)) {
|
||||
callback(new Error('请输入有效数字（最多两位小数）'));
|
||||
} else if (Number(value) <= 0) {
|
||||
callback(new Error('重量必须大于0'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
goodsVolume: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入货物体积'));
|
||||
} else if (value && !/^\d+(\.\d{1,2})?$/.test(value)) {
|
||||
callback(new Error('请输入有效数字（最多两位小数）'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
goodsQuantity: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入货物数量'));
|
||||
} else if (!/^\d+$/.test(value)) {
|
||||
callback(new Error('请输入正整数'));
|
||||
} else if (Number(value) <= 0) {
|
||||
callback(new Error('数量必须大于0'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
goodsHeight: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入货物高度'));
|
||||
} else if (value && !/^\d+(\.\d{1,2})?$/.test(value)) {
|
||||
callback(new Error('请输入有效数字（最多两位小数）'));
|
||||
} else if (value && Number(value) <= 0) {
|
||||
callback(new Error('高度必须大于0'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
goodsLength: [
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入货物长度'));
|
||||
} else if (value && !/^\d+(\.\d{1,2})?$/.test(value)) {
|
||||
callback(new Error('请输入有效数字（最多两位小数）'));
|
||||
} else if (value && Number(value) <= 0) {
|
||||
callback(new Error('长度必须大于0'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
});
|
||||
const resetForm = ref({ ...formInline });
|
||||
// 级联选择器配置
|
||||
const cascaderProps = ref({
|
||||
label: 'areaName', // 选项标签字段名
|
||||
value: 'areaCode', // 选项值字段名
|
||||
children: 'areaChildVOS', // 子选项字段名
|
||||
emitPath: true,
|
||||
expandTrigger: 'hover',
|
||||
});
|
||||
// 省市区数据（示例）
|
||||
const addressOptions = ref([]);
|
||||
const getArea = async () => {
|
||||
const res = await getRegion();
|
||||
if (res.code === 200) {
|
||||
addressOptions.value = res.data;
|
||||
} else {
|
||||
ElMessage.error(res.message);
|
||||
}
|
||||
};
|
||||
const goodsList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '普通货物',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '特殊货物',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '冷藏货物',
|
||||
},
|
||||
]);
|
||||
|
||||
const application = async () => {
|
||||
// await formRef.value.validate();
|
||||
// ElMessage.success('提交成功');
|
||||
// console.log(formInline);
|
||||
// 发起请求
|
||||
|
||||
// 请求返回成功后跳转（资源分配）页面
|
||||
router.push({
|
||||
name: 'logistics-match',
|
||||
});
|
||||
@ -111,9 +415,15 @@ const queryDetail = () => {
|
||||
onMounted(() => {
|
||||
state.query.id = route.query.id;
|
||||
// queryDetail();
|
||||
getArea();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.warehouse-detail {
|
||||
border-radius: 14px;
|
||||
background-color: #fff;
|
||||
padding: 20px 20px 20px 20px;
|
||||
}
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
@ -127,76 +437,6 @@ $text-dark: #25bf82; // 深色文字
|
||||
$text-regular: #606266; // 常规文字
|
||||
$border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
// 弹窗整体样式
|
||||
:deep(.custom-inquiry-dialog) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f2f6fc;
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
color: $text-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px 28px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: $text-regular;
|
||||
font-size: 14px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 0px 50px;
|
||||
margin-bottom: 24px;
|
||||
.info-item {
|
||||
margin-bottom: 12px;
|
||||
.label {
|
||||
color: $text-regular;
|
||||
margin-right: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.value {
|
||||
color: $text-dark;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框样式覆盖
|
||||
:deep(.el-input) {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.el-input__suffix {
|
||||
color: $text-regular;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单样式
|
||||
:deep(.custom-select-dropdown) {
|
||||
.el-select-dropdown__item {
|
||||
color: $text-regular;
|
||||
&.selected {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
@ -220,137 +460,32 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
.bac {
|
||||
background: rgba(37, 191, 130, 0.1);
|
||||
border: 1px solid rgba(37, 191, 130, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start !important;
|
||||
font-size: 20px !important;
|
||||
color: #000000 !important;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
font-size: 20px;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
width: 40%;
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
.storage-content {
|
||||
padding: 20px;
|
||||
border-radius: 14px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
.storage-image {
|
||||
width: 100%;
|
||||
.storage-content-title {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.shipping-custom-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
margin: 40px 0 20px -20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
.page-title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
color: #25bf82;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.space-x-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,74 +2,86 @@
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<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 @click="toBack(-1)">发布需求</span>
|
||||
<span class="mx-10"> > </span>
|
||||
<span style="color: rgba(37, 191, 130, 1)">资源分配</span>
|
||||
<span style="color: rgba(37, 191, 130, 1)">资源匹配</span>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img15.png" fit="cover" class="storage-image" />
|
||||
<!-- <div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ state.data.name }}</h3>
|
||||
<div class="text-gray-600 mb-2">
|
||||
<span>{{ state.data.parentTitle }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px; margin: 0 5px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag
|
||||
v-for="(tags, indexT) in state.data.tag"
|
||||
:key="indexT"
|
||||
effect="plain"
|
||||
round
|
||||
style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
|
||||
>
|
||||
{{ tags }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：{{ state.data.contactName }}</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：{{ state.data.contactPhone }}</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ state.data.address }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center" style="text-align: right">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">
|
||||
¥{{ state.data.price }}/{{
|
||||
state.data.priceSpec === 1 ? 'm³' : state.data.priceSpec === 2 ? '间' : state.data.priceSpec === 3 ? '㎡' : ''
|
||||
}}/{{ state.data.timeSpec === 1 ? '天' : state.data.timeSpec === 2 ? '月' : state.data.timeSpec === 3 ? '年' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei">
|
||||
<el-icon class="el-icon--right"><ChatLineRound /></el-icon>
|
||||
留下信息
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="content-custom-title" style="margin-top: 20px">耿马县农业公司</div>
|
||||
<div style="display: flex">
|
||||
<div style="width: 60%">
|
||||
<el-descriptions class="mb-20" :column="2">
|
||||
<el-descriptions-item label="预约使用时间">2025.05.20</el-descriptions-item>
|
||||
<el-descriptions-item label="位置">临沧市-耿马县</el-descriptions-item>
|
||||
<el-descriptions-item label="货物类型">水果</el-descriptions-item>
|
||||
<el-descriptions-item label="仓库用途">存储</el-descriptions-item>
|
||||
<el-descriptions-item label="仓库类型">冷库</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div style="flex: 1; text-align: right">
|
||||
<el-button type="primary" size="large" style="width: 100px; margin-top: 20px">重新匹配</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 class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700" v-html="state.data.content ? state.data.content : '暂无介绍内容'"></p>
|
||||
</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">
|
||||
<span class="highlight">【{{ item.typeName }}】</span>{{ item.title }}
|
||||
</p>
|
||||
<div>
|
||||
<div class="resource-custom-tag">符合温湿度</div>
|
||||
<div class="resource-custom-tag">24小时运营</div>
|
||||
</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.location">{{ item.location }}</div>
|
||||
</div>
|
||||
<div class="center-text">
|
||||
<div class="center-text-lable">仓库面积：</div>
|
||||
<div class="flex-1" :title="item.storageArea + '(可用' + item.usableArea + ')'">
|
||||
{{ item.storageArea }}（可用{{ item.usableArea }}）
|
||||
</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-top: 10px">立即预约</el-button>
|
||||
<el-button size="large" plain style="flex: 1; margin-top: 10px">查看详情</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card shadow="none" style="border-radius: 14px; margin-top: 20px">
|
||||
<div class="max-w-7xl mx-auto p-4" style="padding: 0">
|
||||
<img src="@/assets/images/warehouseLogistics/img16.png" fit="cover" class="storage-image" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
@ -84,28 +96,105 @@ import { warehouseDetail } from '@/apis/warehouseLogistics.js';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
query: {},
|
||||
data: {},
|
||||
});
|
||||
const tab1 = reactive(['全部', '距离最近', '价格最便宜']);
|
||||
const currentTab1 = ref(0);
|
||||
const handleTab1Click = (item, index) => {
|
||||
currentTab1.value = index;
|
||||
};
|
||||
|
||||
import img1 from './../images/普通仓储/1.jpg';
|
||||
import img2 from './../images/普通仓储/2.jpg';
|
||||
import img3 from './../images/恒温仓储/1.jpg';
|
||||
import img4 from './../images/冷库/4.jpg';
|
||||
import img5 from './../images/气调仓储/1.jpg';
|
||||
const allData = ref([
|
||||
{
|
||||
imageUrl: img1,
|
||||
typeId: 1,
|
||||
typeName: '普通仓储',
|
||||
title: '孟定边贸仓储中心',
|
||||
operationUnit: '耿马宏泰物流有限公司，耿马宏泰物流有限公司 ',
|
||||
pricingUnit: '元/㎡·月',
|
||||
storageArea: '8,600㎡',
|
||||
usableArea: '2,300㎡',
|
||||
location: '孟定镇中缅大道8号',
|
||||
price: '￥12元/㎡/月',
|
||||
rank: '1',
|
||||
},
|
||||
{
|
||||
imageUrl: img2,
|
||||
typeId: 2,
|
||||
typeName: '普通仓储',
|
||||
title: '绿色食品园区集散仓',
|
||||
operationUnit: '耿马县供销集团',
|
||||
pricingUnit: '元/吨·天',
|
||||
storageArea: '12,000㎡',
|
||||
usableArea: '4,500㎡',
|
||||
location: '绿色食品园区二期',
|
||||
price: '￥1.5元/吨/月',
|
||||
rank: '2',
|
||||
},
|
||||
{
|
||||
imageUrl: img3,
|
||||
typeId: 3,
|
||||
typeName: '恒温仓储',
|
||||
title: '蔗糖储备恒温库',
|
||||
operationUnit: '耿马糖业有限公司',
|
||||
pricingUnit: '元/托·月',
|
||||
storageArea: '3,200㎡',
|
||||
usableArea: '800㎡',
|
||||
location: '耿马糖厂东侧',
|
||||
price: '￥28元/托/月',
|
||||
rank: '3',
|
||||
},
|
||||
{
|
||||
imageUrl: img4,
|
||||
typeId: 4,
|
||||
typeName: '冷库',
|
||||
title: '孟定果蔬冷链中心',
|
||||
operationUnit: '临沧边境合作区管委会 ',
|
||||
pricingUnit: '元/板·天',
|
||||
storageArea: '5,000㎡',
|
||||
usableArea: '1,200㎡',
|
||||
location: '孟定海关监管区旁',
|
||||
price: '￥2.8元/板/月',
|
||||
rank: '4',
|
||||
},
|
||||
{
|
||||
imageUrl: img5,
|
||||
typeId: 5,
|
||||
typeName: '气调仓储',
|
||||
title: '高原蔬菜气调保鲜库',
|
||||
operationUnit: '耿马高原农业合作社 ',
|
||||
pricingUnit: '元/吨·月',
|
||||
storageArea: '1,800㎡',
|
||||
usableArea: '300㎡',
|
||||
location: '勐撒镇蔬菜基地',
|
||||
price: '￥45元/吨/月',
|
||||
rank: '5',
|
||||
},
|
||||
]);
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const param = ref({
|
||||
id: '100',
|
||||
});
|
||||
const queryDetail = () => {
|
||||
warehouseDetail(state.query.id).then((res) => {
|
||||
warehouseDetail(param).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(',');
|
||||
allData.value = res.data;
|
||||
for (let i in allData.value) {
|
||||
allData.value[i].tag = allData.value[i].tags.split(',');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
state.query.id = route.query.id;
|
||||
param.value.id = route.query.id ?? '100';
|
||||
// queryDetail();
|
||||
});
|
||||
</script>
|
||||
@ -116,238 +205,135 @@ onMounted(() => {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 根据需要添加样式，这里仅提供基础样式 */
|
||||
// 基础颜色配置
|
||||
$primary-color: #25bf82; // 主色调
|
||||
$text-dark: #25bf82; // 深色文字
|
||||
$text-regular: #606266; // 常规文字
|
||||
$border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
// 弹窗整体样式
|
||||
:deep(.custom-inquiry-dialog) {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #f2f6fc;
|
||||
.el-dialog__title {
|
||||
font-size: 18px;
|
||||
color: $text-dark;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 20px 28px;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
color: $text-regular;
|
||||
font-size: 14px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 0px 50px;
|
||||
margin-bottom: 24px;
|
||||
.info-item {
|
||||
margin-bottom: 12px;
|
||||
.label {
|
||||
color: $text-regular;
|
||||
margin-right: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.value {
|
||||
color: $text-dark;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 输入框样式覆盖
|
||||
:deep(.el-input) {
|
||||
.el-input__inner {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
&:focus {
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
.el-input__suffix {
|
||||
color: $text-regular;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单样式
|
||||
:deep(.custom-select-dropdown) {
|
||||
.el-select-dropdown__item {
|
||||
color: $text-regular;
|
||||
&.selected {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮组样式
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.bac {
|
||||
background: rgba(37, 191, 130, 0.1);
|
||||
border: 1px solid rgba(37, 191, 130, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.image-box {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start !important;
|
||||
font-size: 20px !important;
|
||||
color: #000000 !important;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
font-size: 20px;
|
||||
color: #000000 !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
width: 40%;
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
.storage-content {
|
||||
padding: 20px 20px 0 20px;
|
||||
margin-top: 20px;
|
||||
border-radius: 14px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
.storage-image {
|
||||
width: 100%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
.active {
|
||||
color: #25bf82;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
.resource-item {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.space-x-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: #4caf50;
|
||||
}
|
||||
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
.resource-item-img {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.center-title {
|
||||
color: #666;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
.highlight {
|
||||
color: #25bf82;
|
||||
}
|
||||
}
|
||||
.resource-custom-tag {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 4px 6px;
|
||||
background: rgba(37, 191, 130, 0.1);
|
||||
border: 1px solid rgba(37, 191, 130, 0.5);
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
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>
|
||||
|
||||
@ -120,6 +120,119 @@
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="dialog-custom-title">分拣包装需要</div>
|
||||
<el-form-item label="分拣包装服务" prop="sortingService" :label-width="'110'">
|
||||
<el-radio-group v-model="formInline.sortingService">
|
||||
<el-radio :value="1">需要</el-radio>
|
||||
<el-radio :value="2">不需要</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div v-show="formInline.sortingService === 1">
|
||||
<el-form-item label="分拣类型" prop="sortingType">
|
||||
<el-select v-model="formInline.sortingType" placeholder="请选择" :size="formSize" :style="{ width: unifiedWidth }">
|
||||
<el-option v-for="item in sortingTypeList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="分拣标准" prop="sortingStandards">
|
||||
<el-select v-model="formInline.sortingStandards" placeholder="请选择" :size="formSize" :style="{ width: unifiedWidth }">
|
||||
<el-option v-for="item in sortingStandardList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="包装类型" prop="packagingType">
|
||||
<el-select v-model="formInline.packagingType" placeholder="请选择" :size="formSize" :style="{ width: unifiedWidth }">
|
||||
<el-option v-for="item in packagingTypesList" :key="item.id" :value="item.id" :label="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="包装规格" prop="packagingSpecifications">
|
||||
<el-input
|
||||
v-model="formInline.packagingSpecifications"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入包装规格"
|
||||
:style="{ width: unifiedWidth }"
|
||||
>
|
||||
<template #append>Kg/箱</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="日分拣包装量" prop="dailySortingVolume" :label-width="'110'">
|
||||
<el-input
|
||||
v-model="formInline.dailySortingVolume"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入日分拣包装量"
|
||||
:style="{ width: '270px' }"
|
||||
>
|
||||
<template #append>吨/天</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="其他需求" prop="otherRequirements">
|
||||
<el-input
|
||||
v-model="formInline.otherRequirements"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入其他需求"
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="dialog-custom-title">附加服务</div>
|
||||
<el-form-item label="服务项目">
|
||||
<el-checkbox-group v-model="formInline.additionalServicesList">
|
||||
<el-checkbox label="预冷处理" :value="1" />
|
||||
<el-checkbox label="质量检测" :value="2" />
|
||||
<el-checkbox label="贴标服务" :value="3" />
|
||||
<el-checkbox label="条形码生成" :value="4" />
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="其他服务" prop="otherServices">
|
||||
<el-input
|
||||
v-model="formInline.otherServices"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入其他服务"
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div class="dialog-custom-title">企业信息</div>
|
||||
<el-form-item label="企业名称" prop="enterpriseName">
|
||||
<el-input
|
||||
v-model="formInline.enterpriseName"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入企业名称"
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系人" prop="contacts">
|
||||
<el-input
|
||||
v-model="formInline.contacts"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入联系人"
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" prop="contactNumber">
|
||||
<el-input
|
||||
v-model="formInline.contactNumber"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入联系电话"
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电子邮箱" prop="email">
|
||||
<el-input
|
||||
v-model="formInline.email"
|
||||
:size="formSize"
|
||||
clearable
|
||||
placeholder="请输入电子邮箱"
|
||||
:style="{ width: unifiedWidth }"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" size="large" style="width: 200px; margin-top: 20px" @click="application"> 提交 </el-button>
|
||||
@ -146,7 +259,6 @@ const state = reactive({
|
||||
data: {},
|
||||
});
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const unifiedWidth = '300px';
|
||||
const formSize = 'large';
|
||||
const formRef = ref(null);
|
||||
@ -164,6 +276,22 @@ const formInline = reactive({
|
||||
goodsWeight: '', //货物重量
|
||||
temperature: '', //温度要求
|
||||
detailedDescription: '', //详情描述
|
||||
|
||||
sortingService: 2, //分拣包装服务
|
||||
sortingType: '', //分拣类型
|
||||
sortingStandards: '', //分拣标准
|
||||
packagingType: '', //包装类型
|
||||
packagingSpecifications: '', //包装规格
|
||||
dailySortingVolume: '', //日分拣量
|
||||
otherRequirements: '', //其他需求
|
||||
|
||||
additionalServicesList: [], //附加服务
|
||||
otherServices: '', //其他服务
|
||||
|
||||
enterpriseName: '', //企业名称
|
||||
contacts: '', //联系人
|
||||
contactNumber: '', //联系电话
|
||||
email: '', //电子邮箱
|
||||
});
|
||||
const resetForm = ref({ ...formInline });
|
||||
const dialogRules = reactive({
|
||||
@ -251,6 +379,117 @@ const dialogRules = reactive({
|
||||
{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效数字（最多两位小数）', trigger: 'blur' },
|
||||
],
|
||||
detailedDescription: [{ required: true, message: '请输入详情描述', trigger: 'blur' }],
|
||||
sortingType: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (formInline.sortingService === 1 && !value) {
|
||||
callback(new Error('请选择分拣类型'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
|
||||
sortingStandards: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (formInline.sortingService === 1 && !value) {
|
||||
callback(new Error('请选择分拣标准'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
|
||||
packagingType: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (formInline.sortingService === 1 && !value) {
|
||||
callback(new Error('请选择包装类型'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
|
||||
packagingSpecifications: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (formInline.sortingService === 1 && !value) {
|
||||
callback(new Error('请输入包装规格'));
|
||||
} else if (formInline.sortingService === 1 && !/^\d+(\.\d{1,2})?$/.test(value)) {
|
||||
callback(new Error('请输入有效数字（最多两位小数）'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
|
||||
dailySortingVolume: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (formInline.sortingService === 1 && !value) {
|
||||
callback(new Error('请输入日分拣量'));
|
||||
} else if (formInline.sortingService === 1 && !/^\d+(\.\d{1,2})?$/.test(value)) {
|
||||
callback(new Error('请输入有效数字（最多两位小数）'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
// 其他需求
|
||||
otherRequirements: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (formInline.sortingService === 1 && !value) {
|
||||
callback(new Error('请输入其他需求'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
|
||||
// 附加服务部分
|
||||
otherServices: [{ required: false, message: '请输入其他服务', trigger: 'blur' }],
|
||||
|
||||
// 联系信息部分
|
||||
enterpriseName: [
|
||||
{ required: true, message: '请输入企业名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' },
|
||||
],
|
||||
|
||||
contacts: [
|
||||
{ required: true, message: '请输入联系人', trigger: 'blur' },
|
||||
{ min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur' },
|
||||
],
|
||||
|
||||
contactNumber: [
|
||||
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
|
||||
],
|
||||
|
||||
email: [
|
||||
{ required: true, message: '请输入电子邮箱', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] },
|
||||
],
|
||||
});
|
||||
// 禁用开始日期的逻辑（不能晚于已选的结束日期）
|
||||
const disableStartDate = (time) => {
|
||||
@ -323,6 +562,28 @@ const goodsList = ref([
|
||||
name: '冷藏货物',
|
||||
},
|
||||
]);
|
||||
const sortingTypeList = ref([
|
||||
{ id: 1, name: '分拣类型一' },
|
||||
{ id: 2, name: '分拣类型二' },
|
||||
]);
|
||||
const sortingStandardList = ref([
|
||||
{ id: 1, name: '分拣标准一' },
|
||||
{ id: 2, name: '分拣标准二' },
|
||||
]);
|
||||
const packagingTypesList = ref([
|
||||
{ id: 1, name: '包装类型一' },
|
||||
{ id: 2, name: '包装类型二' },
|
||||
]);
|
||||
const sortingServiceChange = (val) => {
|
||||
if (val === 2) {
|
||||
formInline.sortingType = '';
|
||||
formInline.sortingStandards = '';
|
||||
formInline.packagingType = '';
|
||||
formInline.packagingSpecifications = '';
|
||||
formInline.dailySortingVolume = '';
|
||||
formInline.otherRequirements = '';
|
||||
}
|
||||
};
|
||||
|
||||
// 级联选择器配置
|
||||
const cascaderProps = ref({
|
||||
@ -342,22 +603,28 @@ const getArea = async () => {
|
||||
ElMessage.error(res.message);
|
||||
}
|
||||
};
|
||||
const reservation = () => {
|
||||
dialogVisible.value = true;
|
||||
Object.assign(formInline, resetForm.value);
|
||||
};
|
||||
const onSubmit = async () => {
|
||||
await formRef.value.validate();
|
||||
ElMessage.success('提交成功');
|
||||
console.log(formInline);
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const application = () => {
|
||||
const application = async () => {
|
||||
// await formRef.value.validate();
|
||||
// ElMessage.success('提交成功');
|
||||
// console.log(formInline);
|
||||
// if (formInline.sortingService === 2) {
|
||||
// formInline.sortingType = '';
|
||||
// formInline.sortingStandards = '';
|
||||
// formInline.packagingType = '';
|
||||
// formInline.packagingSpecifications = '';
|
||||
// formInline.dailySortingVolume = '';
|
||||
// formInline.otherRequirements = '';
|
||||
// }
|
||||
// 发起请求
|
||||
|
||||
// 请求返回成功后重置表单
|
||||
Object.assign(formInline, resetForm.value);
|
||||
// 请求返回成功后跳转（资源分配）页面
|
||||
router.push({
|
||||
name: 'warehouse-allocation',
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user