Compare commits
2 Commits
9b43946421
...
ea02ab8cb6
| Author | SHA1 | Date | |
|---|---|---|---|
| ea02ab8cb6 | |||
| 505855ab52 |
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
BIN
sub-operation-service/src/assets/images/11.jpg
Normal file
BIN
sub-operation-service/src/assets/images/11.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
BIN
sub-operation-service/src/assets/images/22.jpg
Normal file
BIN
sub-operation-service/src/assets/images/22.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 73 KiB |
BIN
sub-operation-service/src/assets/images/33.jpg
Normal file
BIN
sub-operation-service/src/assets/images/33.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
BIN
sub-operation-service/src/assets/images/4.png
Normal file
BIN
sub-operation-service/src/assets/images/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 MiB |
BIN
sub-operation-service/src/assets/images/44.jpg
Normal file
BIN
sub-operation-service/src/assets/images/44.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
sub-operation-service/src/assets/images/5.png
Normal file
BIN
sub-operation-service/src/assets/images/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 871 KiB |
BIN
sub-operation-service/src/assets/images/6.png
Normal file
BIN
sub-operation-service/src/assets/images/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
sub-operation-service/src/assets/images/7.png
Normal file
BIN
sub-operation-service/src/assets/images/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
BIN
sub-operation-service/src/assets/images/dz.png
Normal file
BIN
sub-operation-service/src/assets/images/dz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
@ -3,47 +3,78 @@
|
||||
<template #main>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="title" @click="toBack(-1)">分拣 > <span style="color: rgba(37, 191, 130, 1)">申请分拣</span></div>
|
||||
<img src="@/assets/images/warehouseLogistics/img25.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<!-- <div class="flex items-center mb-4">
|
||||
<h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
|
||||
<h1 style="margin-bottom: 20px">填写需求表</h1>
|
||||
<el-form :model="form" label-width="auto" :rules="rules">
|
||||
<el-form-item label="您的称呼" prop="name">
|
||||
<el-input v-model="form.name" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="您的电话" prop="phone">
|
||||
<el-input v-model="form.phone" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="详细地址" prop="address1">
|
||||
<el-select v-model="form.address1" placeholder="请选择地址" style="width: 44%">
|
||||
<el-option v-for="item in addressOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<span style="width: 2%"></span>
|
||||
<el-form-item prop="address2" style="display: inline-block; width: 44%; margin-bottom: 0">
|
||||
<el-input v-model="form.address2" />
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="详细地址" required>
|
||||
<div style="display: flex; gap: 16px">
|
||||
<el-form-item prop="selectedAddress">
|
||||
<el-cascader
|
||||
v-model="form.selectedAddress"
|
||||
:options="addressOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择地址"
|
||||
:style="{ width: unifiedWidth }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="detailAddress">
|
||||
<el-input v-model="form.detailAddress" placeholder="详细地址（如街道、门牌号等）" :style="{ width: unifiedWidth }" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 分拣物品 -->
|
||||
<el-form-item label="分拣物品" prop="goods">
|
||||
<!-- <el-input v-model="form.goods" style="width: 44%" /> -->
|
||||
<el-select v-model="form.goods" placeholder="请选择分拣物品" style="width: 400px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 分拣数量 -->
|
||||
<el-form-item label="分拣数量" prop="num">
|
||||
<!-- <el-input v-model="form.num" style="width: 44%" /> -->
|
||||
<el-select v-model="form.num" placeholder="请选择分拣数量" style="width: 400px">
|
||||
<template #prefix> <span style="position: absolute; right: 40px"> | 吨</span> </template
|
||||
><el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 分拣类型 -->
|
||||
<el-form-item label="分拣类型" prop="type">
|
||||
<!-- <el-input v-model="form.type" style="width: 44%" /> -->
|
||||
<el-select v-model="form.type" placeholder="请选择分拣类型" style="width: 400px">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 截至日期 -->
|
||||
<el-form-item label="截至日期" prop="date">
|
||||
<el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分拣要求" prop="desc">
|
||||
<el-input v-model="form.desc" type="textarea" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="text-align: left; font-size: 22px; margin-bottom: 10px">
|
||||
<span>合计：</span>
|
||||
<span style="color: rgb(37, 191, 130)">...</span>
|
||||
<span style="font-size: 16px; color: rgb(37, 191, 130)">元</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
|
||||
<p class="text-gray-600 mb-2">{{ route.description }}</p>
|
||||
<div class="flex items-center space-x-2 text-green-500 text-sm">
|
||||
<div class="bac">{{ route.data[0] }}</div>
|
||||
<div class="bac">{{ route.data[1] }}</div>
|
||||
<div class="bac">{{ route.data[2] }}</div>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：李涛</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：13888569833</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ route.location }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/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>
|
||||
<div>
|
||||
<el-button type="primary" style="width: 150px" @click="onSubmit">提交</el-button>
|
||||
<el-button style="width: 150px">取消</el-button>
|
||||
</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">{{ route.description }} 目前暂无介绍哦~</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
</Common>
|
||||
@ -52,41 +83,122 @@
|
||||
<script setup>
|
||||
import Common from './components/common.vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { ref, reactive, watch, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { getRegion } from '@/apis/common';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const dialogVisible = ref(false);
|
||||
const formRef = ref(null);
|
||||
|
||||
const unifiedWidth = '400px';
|
||||
const formSize = 'large';
|
||||
const form = reactive({
|
||||
quantity: '',
|
||||
title: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
address1: '',
|
||||
address2: '',
|
||||
selectedAddress: [], //选中的区域编码数组
|
||||
areaAddress: '', //区域地址
|
||||
detailAddress: '', //详细地址
|
||||
goods: '',
|
||||
num: '',
|
||||
type: '',
|
||||
date: '',
|
||||
desc: '',
|
||||
});
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入您的称呼', trigger: 'blur' }],
|
||||
phone: [{ required: true, message: '请输入您的电话', trigger: 'blur' }],
|
||||
address1: [{ required: true, message: '请选择地址', trigger: 'change' }],
|
||||
address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
|
||||
goods: [{ required: true, message: '请输入分拣物品', trigger: 'blur' }],
|
||||
num: [{ required: true, message: '请输入分拣数量', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请输入分拣类型', trigger: 'blur' }],
|
||||
date: [{ required: true, message: '请选择截至日期', trigger: 'blur' }],
|
||||
desc: [{ required: true, message: '请输入分拣要求', trigger: 'blur' }],
|
||||
});
|
||||
const options = [
|
||||
{
|
||||
value: '1',
|
||||
label: '西红柿',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '茄子',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '辣椒',
|
||||
},
|
||||
];
|
||||
const options1 = [
|
||||
{
|
||||
value: '1',
|
||||
label: '100',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '200',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '300',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '400',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '500',
|
||||
},
|
||||
];
|
||||
const options2 = [
|
||||
{
|
||||
value: '1',
|
||||
label: '人工分拣',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '自动化分拣',
|
||||
},
|
||||
];
|
||||
|
||||
// const addressOptions = [
|
||||
// // 下拉框的选项数据
|
||||
// { value: 'beijing', label: '北京市' },
|
||||
// { value: 'shanghai', label: '上海市' },
|
||||
// { value: 'guangzhou', label: '广州市' },
|
||||
// // 可以继续添加更多选项
|
||||
// ];
|
||||
|
||||
// 级联选择器配置
|
||||
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 toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const diotext = ref('');
|
||||
const diodescription = ref('');
|
||||
|
||||
const goDei = (data) => {
|
||||
// diodescription.value = data.description;
|
||||
// diotext.value = data.title;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('提交数据:', form);
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getArea();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -97,136 +209,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;
|
||||
.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: 47%;
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
@ -247,83 +229,4 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
.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>
|
||||
|
||||
@ -3,32 +3,37 @@
|
||||
<template #main>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="title" @click="toBack(-1)">分拣 > <span style="color: rgba(37, 191, 130, 1)">查看详情</span></div>
|
||||
<img src="@/assets/images/warehouseLogistics/img24.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<!-- <img src="@/assets/images/warehouseLogistics/img24.png" fit="cover" class="storage-image" @click="toLink" /> -->
|
||||
<!-- <div class="flex items-center mb-4">
|
||||
<h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
<img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
|
||||
<p class="text-gray-600 mb-2">{{ route.description }}</p>
|
||||
<div class="flex items-center space-x-2 text-green-500 text-sm">
|
||||
<div class="bac">{{ route.data[0] }}</div>
|
||||
<div class="bac">{{ route.data[1] }}</div>
|
||||
<div class="bac">{{ route.data[2] }}</div>
|
||||
<h3 class="text-xl font-bold mb-2">{{ data.title }}</h3>
|
||||
<!-- <p class="text-gray-600 mb-2">{{ data.description }}</p> -->
|
||||
<!-- <div class="flex items-center space-x-2 text-green-500 text-sm">
|
||||
<div class="bac">{{ data.data[0] }}</div>
|
||||
<div class="bac">{{ data.data[1] }}</div>
|
||||
<div class="bac">{{ data.data[2] }}</div>
|
||||
</div> -->
|
||||
<p class="mt-2 text-gray-700">报价：{{ data.price }}元/吨</p>
|
||||
<p class="mt-2 text-gray-700">关键词：{{ data.type }}</p>
|
||||
<p class="mt-2 text-gray-700">所在地：{{ data.location }}</p>
|
||||
<p class="mt-2 text-gray-700">联系人：{{ data.contact }}</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：{{ data.phone }}</p>
|
||||
<div>
|
||||
<el-button style="width: 100px" size="large" type="primary" @click="goDei"> 立即预约 </el-button>
|
||||
<el-button style="width: 100px" size="large"> 收藏 </el-button>
|
||||
<el-button style="width: 100px" size="large"> 分享 </el-button>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：李涛</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：13888569833</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ route.location }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center">
|
||||
<!-- <div class="text-gray-500 text-sm flex items-center">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
|
||||
<span class="ml-2 text-green-500 font-bold">￥{{ data.price }}/m</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei"
|
||||
@ -36,14 +41,30 @@
|
||||
留下信息
|
||||
</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
|
||||
<img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/product.png" alt="" />
|
||||
基本信息
|
||||
</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700">{{ data.introduce ? data.introduce : ' 目前暂无介绍哦~' }}</p>
|
||||
</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">{{ route.description }} 目前暂无介绍哦~</p>
|
||||
</div>
|
||||
</div> -->
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
|
||||
<img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/location.png" alt="" />
|
||||
地理位置
|
||||
</h3>
|
||||
<img :src="getAssetsFile(`${data.locationUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
|
||||
<img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/image.png" alt="" />图片
|
||||
</h3>
|
||||
<img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Common>
|
||||
@ -66,6 +87,9 @@ const form = reactive({
|
||||
name: '',
|
||||
});
|
||||
|
||||
console.log(route);
|
||||
let data = route.query;
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
@ -201,6 +225,10 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
.breadth {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
height: 300px;
|
||||
@ -254,6 +282,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
@ -263,6 +292,9 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.mt-6 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
color: #25bf82;
|
||||
@ -271,6 +303,8 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
@ -298,7 +332,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
.text-gray-700 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
|
||||
@ -3,32 +3,37 @@
|
||||
<template #main>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="title" @click="toBack(-1)">包装 > <span style="color: rgba(37, 191, 130, 1)">查看详情</span></div>
|
||||
<img src="@/assets/images/warehouseLogistics/img26.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<!-- <img src="@/assets/images/warehouseLogistics/img24.png" fit="cover" class="storage-image" @click="toLink" /> -->
|
||||
<!-- <div class="flex items-center mb-4">
|
||||
<h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
<img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
|
||||
<p class="text-gray-600 mb-2">{{ route.description }}</p>
|
||||
<div class="flex items-center space-x-2 text-green-500 text-sm">
|
||||
<div class="bac">{{ route.data[0] }}</div>
|
||||
<div class="bac">{{ route.data[1] }}</div>
|
||||
<div class="bac">{{ route.data[2] }}</div>
|
||||
<h3 class="text-xl font-bold mb-2">{{ data.title }}</h3>
|
||||
<!-- <p class="text-gray-600 mb-2">{{ data.description }}</p> -->
|
||||
<!-- <div class="flex items-center space-x-2 text-green-500 text-sm">
|
||||
<div class="bac">{{ data.data[0] }}</div>
|
||||
<div class="bac">{{ data.data[1] }}</div>
|
||||
<div class="bac">{{ data.data[2] }}</div>
|
||||
</div> -->
|
||||
<p class="mt-2 text-gray-700">报价：{{ data.price }}元/吨</p>
|
||||
<p class="mt-2 text-gray-700">关键词：{{ data.type }}</p>
|
||||
<p class="mt-2 text-gray-700">所在地：{{ data.location }}</p>
|
||||
<p class="mt-2 text-gray-700">联系人：{{ data.contact }}</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：{{ data.phone }}</p>
|
||||
<div>
|
||||
<el-button style="width: 100px" size="large" type="primary" @click="goDei"> 立即预约 </el-button>
|
||||
<el-button style="width: 100px" size="large"> 收藏 </el-button>
|
||||
<el-button style="width: 100px" size="large"> 分享 </el-button>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：李涛</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：13888569833</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ route.location }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center">
|
||||
<!-- <div class="text-gray-500 text-sm flex items-center">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
|
||||
<span class="ml-2 text-green-500 font-bold">￥{{ data.price }}/m</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei"
|
||||
@ -36,14 +41,30 @@
|
||||
留下信息
|
||||
</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
|
||||
<img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/product.png" alt="" />
|
||||
基本信息
|
||||
</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700">{{ data.introduce ? data.introduce : ' 目前暂无介绍哦~' }}</p>
|
||||
</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">{{ route.description }} 目前暂无介绍哦~</p>
|
||||
</div>
|
||||
</div> -->
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
|
||||
<img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/location.png" alt="" />
|
||||
地理位置
|
||||
</h3>
|
||||
<img :src="getAssetsFile(`${data.locationUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
|
||||
<img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/image.png" alt="" />图片
|
||||
</h3>
|
||||
<img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Common>
|
||||
@ -66,6 +87,9 @@ const form = reactive({
|
||||
name: '',
|
||||
});
|
||||
|
||||
console.log(route);
|
||||
let data = route.query;
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
@ -201,6 +225,10 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
.breadth {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
height: 300px;
|
||||
@ -254,6 +282,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
@ -263,6 +292,9 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
.mr-4 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.mt-6 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
color: #25bf82;
|
||||
@ -271,6 +303,8 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
@ -298,7 +332,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
|
||||
.text-gray-700 {
|
||||
color: #000000;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
|
||||
@ -3,47 +3,82 @@
|
||||
<template #main>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="title" @click="toBack(-1)">包装 > <span style="color: rgba(37, 191, 130, 1)">申请包装</span></div>
|
||||
<img src="@/assets/images/warehouseLogistics/img27.png" fit="cover" class="storage-image" @click="toLink" />
|
||||
<!-- <div class="flex items-center mb-4">
|
||||
<h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
|
||||
<h1 style="margin-bottom: 20px">填写需求表</h1>
|
||||
<el-form :model="form" label-width="auto" :rules="rules">
|
||||
<el-form-item label="您的称呼" prop="name">
|
||||
<el-input v-model="form.name" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="您的电话" prop="phone">
|
||||
<el-input v-model="form.phone" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="详细地址" prop="address1">
|
||||
<el-select v-model="form.address1" placeholder="请选择地址" style="width: 44%">
|
||||
<el-option v-for="item in addressOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<span style="width: 2%"></span>
|
||||
<el-form-item prop="address2" style="display: inline-block; width: 44%; margin-bottom: 0">
|
||||
<el-input v-model="form.address2" />
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="详细地址" required>
|
||||
<div style="display: flex; gap: 16px">
|
||||
<el-form-item prop="selectedAddress">
|
||||
<el-cascader
|
||||
v-model="form.selectedAddress"
|
||||
:options="addressOptions"
|
||||
:props="cascaderProps"
|
||||
placeholder="请选择地址"
|
||||
:style="{ width: unifiedWidth }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="detailAddress">
|
||||
<el-input v-model="form.detailAddress" placeholder="详细地址（如街道、门牌号等）" :style="{ width: unifiedWidth }" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<!-- 分拣物品 -->
|
||||
<el-form-item label="包装物品" prop="goods">
|
||||
<!-- <el-input v-model="form.goods" style="width: 44%" /> -->
|
||||
<el-select v-model="form.goods" placeholder="请选择分拣物品" style="width: 400px">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 分拣数量 -->
|
||||
<el-form-item label="包装数量" prop="num">
|
||||
<!-- <el-input v-model="form.num" style="width: 44%" /> -->
|
||||
<el-select v-model="form.num" placeholder="请选择分拣数量" style="width: 400px">
|
||||
<template #prefix> <span style="position: absolute; right: 40px"> | 吨</span> </template
|
||||
><el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 分拣类型 -->
|
||||
<el-form-item label="容器类型" prop="type">
|
||||
<!-- <el-input v-model="form.type" style="width: 44%" /> -->
|
||||
<el-select v-model="form.type" placeholder="请选择分拣类型" style="width: 400px">
|
||||
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 开始日期 -->
|
||||
<el-form-item label="开始日期" prop="date">
|
||||
<el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<!-- 截至日期 -->
|
||||
<el-form-item label="截至日期" prop="date">
|
||||
<el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" style="width: 400px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="包装要求" prop="desc">
|
||||
<el-input v-model="form.desc" type="textarea" style="width: 400px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="text-align: left; font-size: 22px; margin-bottom: 10px">
|
||||
<span>合计：</span>
|
||||
<span style="color: rgb(37, 191, 130)">...</span>
|
||||
<span style="font-size: 16px; color: rgb(37, 191, 130)">元</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-8">
|
||||
<div class="flex items-center mr-4">
|
||||
<img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
|
||||
<p class="text-gray-600 mb-2">{{ route.description }}</p>
|
||||
<div class="flex items-center space-x-2 text-green-500 text-sm">
|
||||
<div class="bac">{{ route.data[0] }}</div>
|
||||
<div class="bac">{{ route.data[1] }}</div>
|
||||
<div class="bac">{{ route.data[2] }}</div>
|
||||
</div>
|
||||
<p class="mt-2 text-gray-700">联系人：李涛</p>
|
||||
<p class="mt-2 text-gray-700">联系电话：13888569833</p>
|
||||
<p class="mt-2 text-gray-700">
|
||||
<el-icon><Location /></el-icon> {{ route.location }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-gray-500 text-sm flex items-center">
|
||||
<div>
|
||||
<span style="color: #999999">报价：</span>
|
||||
<span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/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>
|
||||
<div>
|
||||
<el-button type="primary" style="width: 150px" @click="onSubmit">提交</el-button>
|
||||
<el-button style="width: 150px">取消</el-button>
|
||||
</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">{{ route.description }} 目前暂无介绍哦~</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
</Common>
|
||||
@ -52,41 +87,123 @@
|
||||
<script setup>
|
||||
import Common from './components/common.vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { ref, reactive, watch, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { getRegion } from '@/apis/common';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const dialogVisible = ref(false);
|
||||
const formRef = ref(null);
|
||||
|
||||
const unifiedWidth = '400px';
|
||||
const formSize = 'large';
|
||||
const form = reactive({
|
||||
quantity: '',
|
||||
title: '',
|
||||
phone: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
address1: '',
|
||||
address2: '',
|
||||
selectedAddress: [], //选中的区域编码数组
|
||||
areaAddress: '', //区域地址
|
||||
detailAddress: '', //详细地址
|
||||
goods: '',
|
||||
num: '',
|
||||
type: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
desc: '',
|
||||
});
|
||||
const rules = reactive({
|
||||
name: [{ required: true, message: '请输入您的称呼', trigger: 'blur' }],
|
||||
phone: [{ required: true, message: '请输入您的电话', trigger: 'blur' }],
|
||||
address1: [{ required: true, message: '请选择地址', trigger: 'change' }],
|
||||
address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
|
||||
goods: [{ required: true, message: '请输入分拣物品', trigger: 'blur' }],
|
||||
num: [{ required: true, message: '请输入分拣数量', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请输入分拣类型', trigger: 'blur' }],
|
||||
date: [{ required: true, message: '请选择截至日期', trigger: 'blur' }],
|
||||
desc: [{ required: true, message: '请输入分拣要求', trigger: 'blur' }],
|
||||
});
|
||||
const options = [
|
||||
{
|
||||
value: '1',
|
||||
label: '西红柿',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '茄子',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '辣椒',
|
||||
},
|
||||
];
|
||||
const options1 = [
|
||||
{
|
||||
value: '1',
|
||||
label: '100',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '200',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '300',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '400',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '500',
|
||||
},
|
||||
];
|
||||
const options2 = [
|
||||
{
|
||||
value: '1',
|
||||
label: '人工分拣',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '自动化分拣',
|
||||
},
|
||||
];
|
||||
|
||||
// const addressOptions = [
|
||||
// // 下拉框的选项数据
|
||||
// { value: 'beijing', label: '北京市' },
|
||||
// { value: 'shanghai', label: '上海市' },
|
||||
// { value: 'guangzhou', label: '广州市' },
|
||||
// // 可以继续添加更多选项
|
||||
// ];
|
||||
|
||||
// 级联选择器配置
|
||||
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 toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const diotext = ref('');
|
||||
const diodescription = ref('');
|
||||
|
||||
const goDei = (data) => {
|
||||
// diodescription.value = data.description;
|
||||
// diotext.value = data.title;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('提交数据:', form);
|
||||
dialogVisible.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getArea();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -97,136 +214,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;
|
||||
.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: 47%;
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
@ -247,83 +234,4 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
.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>
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<el-card shadow="none" style="border-radius: 14px; position: relative">
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
@ -91,18 +91,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: absolute; right: 3%; top: 27%">
|
||||
<el-button style="padding: 10px 50px" size="large" type="primary" @click="applicationPackaging">发布需求</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row v-if="currentTab0 === 0" :gutter="20" style="margin-top: 10px">
|
||||
<el-col :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/img4.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- <el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
||||
<el-row :gutter="20" style="margin-top: 10px">
|
||||
<el-col v-for="(item, index) in state.data" :key="index" :span="24">
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
@ -110,59 +104,20 @@
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.title }}</h3>
|
||||
<div class="storage-desc">
|
||||
<span>{{ item.description }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">高品质</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">杀菌灭毒</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag>
|
||||
</div>
|
||||
<div class="storage-location">
|
||||
<el-icon><Location /></el-icon>
|
||||
{{ item.location }}
|
||||
<span>{{ item.type }} | </span><span>{{ item.description }}</span>
|
||||
</div>
|
||||
<p class="storage-location storage-location1">{{ item.introduce }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="storage-price">
|
||||
<div class="storage-price-left">
|
||||
<span class="price-label">报价</span>
|
||||
<span class="price-amount">¥{{ item.price }}/kg</span>
|
||||
</div>
|
||||
<el-button type="success" class="contact-btn" @click="goDei(item)">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
|
||||
<span>联系卖家</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="item.rank" class="rank-badge">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col> -->
|
||||
</el-row>
|
||||
<el-row v-if="currentTab0 === 1" :gutter="20" style="margin-top: 10px">
|
||||
<el-col :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/img5.png" fit="cover" class="storage-image storage-image1" />
|
||||
</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/img6.png" fit="cover" class="storage-image storage-image1" />
|
||||
<p style="text-align: right; font-size: 22px; color: #25bf82">￥{{ item.price }}/个</p>
|
||||
<el-button style="padding: 5px 50px; margin-top: 50px" type="primary" @click="handleClick">购买</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 50px" size="large" type="primary" @click="applicationPackaging">发布需求</el-button>
|
||||
</div>
|
||||
|
||||
<page-pagination :total="5" @current-change="currentChange" />
|
||||
</template>
|
||||
</common>
|
||||
@ -191,44 +146,76 @@ const state = reactive({
|
||||
},
|
||||
data: [
|
||||
{
|
||||
title: '蔬菜分拣服务',
|
||||
description: '绿鲜甄选蔬菜分拣中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
title: '5L堆码桶',
|
||||
description: '5L 7元/个',
|
||||
introduce:
|
||||
'5L堆码桶是一种专为液体包装设计的塑料容器，容量为5升，具备堆码功能，可节省存储和运输空间。其材质通常采用高密度聚乙烯（HDPE），具有耐酸碱、抗腐蚀、耐冲击、耐高低温等特性，符合食品级和化工级标准，广泛应用于化工、涂料、润滑油、食品、医药等行业。',
|
||||
price: '7.00',
|
||||
//地址
|
||||
address: '临沧市耿马县孟定镇100号',
|
||||
locationUrl: 'images/dz.png',
|
||||
//联系人
|
||||
contact: '刘冬冬',
|
||||
type: '塑料容器',
|
||||
//电话
|
||||
phone: '15678459087',
|
||||
|
||||
rank: '1',
|
||||
imageUrl: 'images/vegetable.png',
|
||||
imageUrl: 'images/11.jpg',
|
||||
},
|
||||
{
|
||||
title: '水果分拣服务',
|
||||
description: '果韵鲜享分拣站',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '2',
|
||||
imageUrl: 'images/fruit.png',
|
||||
title: '二手吨桶,八九成新两百升蓝桶',
|
||||
description: '100 380元/个',
|
||||
introduce:
|
||||
'材质与结构内容器：采用进口高密度聚乙烯（HDPE）或线性低密度聚乙烯（LLDPE），耐酸碱、抗腐蚀，符合食品级标准。外框架：镀锌钢管焊接网格，底盘为四向进叉型全钢托盘，结构稳固，可用铲车直接装卸。工艺：旋转滚塑一次成型，无缝焊接，壁厚≥5mm，强度高，使用寿命长。性能参数容量：标称1000L（实际灌装密度1.5时容积约1060L）。尺寸：外型尺寸约1200×1000×1160mm，净重60±1KG。压力测试：液压试验压力120kPa，渗漏试验压力22kPa，跌落试验高度2m。堆码能力：灌装密度≤1.5时可堆码2层，密度＞1.5时堆码1层，满载静态堆码高度可达4层。',
|
||||
price: '380.00',
|
||||
//地址
|
||||
address: '临沧市耿马县孟定镇100号',
|
||||
locationUrl: 'images/dz.png',
|
||||
//联系人
|
||||
contact: '李伟',
|
||||
type: '塑料容器',
|
||||
//电话
|
||||
phone: '15678459087',
|
||||
|
||||
rank: '1',
|
||||
imageUrl: 'images/22.jpg',
|
||||
},
|
||||
{
|
||||
title: '水果分拣服务',
|
||||
description: '好果分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '3',
|
||||
imageUrl: 'images/fruit.png',
|
||||
title: '快递水果纸箱,苹果橙子纸箱定做印刷纸箱',
|
||||
description: '4号箱 1.4元/件',
|
||||
introduce:
|
||||
'基础材质瓦楞纸板：主流采用三层或五层结构，由面纸、瓦楞芯纸和里纸复合而成。五层纸板（如“B楞+C楞”组合）抗压强度提升40%，适合长途运输或堆码存储。环保材料：部分厂家使用再生纸浆或FSC认证纸板，符合欧盟环保标准，可降解率达90%以上。结构优化加强设计：针对苹果、橙子等重果，箱体四角增加L型护角或内置十字隔板，抗压强度从500kg提升至800kg。防潮处理：外层涂布防水膜或使用PE淋膜纸板，防潮性能提升3倍，适应冷链运输环境。',
|
||||
price: '1.40',
|
||||
//地址
|
||||
address: '临沧市耿马县孟定镇100号',
|
||||
locationUrl: 'images/dz.png',
|
||||
//联系人
|
||||
contact: '张可然',
|
||||
type: '纸箱',
|
||||
//电话
|
||||
phone: '15678459087',
|
||||
|
||||
rank: '1',
|
||||
imageUrl: 'images/33.jpg',
|
||||
},
|
||||
{
|
||||
title: '水果分拣服务',
|
||||
description: '果美分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '',
|
||||
imageUrl: 'images/fruit.png',
|
||||
},
|
||||
{
|
||||
title: '水果分拣服务',
|
||||
description: '好果存分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '',
|
||||
imageUrl: 'images/fruit.png',
|
||||
title: '纸箱包装盒,物流箱包装箱',
|
||||
description: '通货 0.5元/个',
|
||||
introduce:
|
||||
'材质与结构基础材料：以瓦楞纸板为主，分为三层（单瓦楞）、五层（双瓦楞）和七层结构。三层瓦楞：面纸+瓦楞芯纸+里纸，成本低，适用于轻量商品（如日用品、电子产品配件）。五层瓦楞：增加一层芯纸和面纸，抗压强度提升50%-80%，常用于家电、家具等重物包装。七层瓦楞：超强承重设计，适用于工业设备、大型机械等极端承重需求。环保升级：部分采用再生纸浆或FSC认证材料，可降解率达90%以上，符合欧盟ROHS标准。',
|
||||
price: '0.50',
|
||||
//地址
|
||||
address: '临沧市耿马县孟定镇100号',
|
||||
locationUrl: 'images/dz.png',
|
||||
//联系人
|
||||
contact: '张可然',
|
||||
type: '纸箱',
|
||||
//电话
|
||||
phone: '15678459087',
|
||||
|
||||
rank: '1',
|
||||
imageUrl: 'images/44.jpg',
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -273,7 +260,7 @@ const toLink = (row) => {
|
||||
row.data = ['高品质', '杀菌灭毒', '绿色'];
|
||||
router.push({
|
||||
path: '/sub-operation-service/packaging/details1',
|
||||
// query: row,
|
||||
query: row,
|
||||
});
|
||||
};
|
||||
const applicationPackaging = () => {
|
||||
@ -474,9 +461,8 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
.storage-desc,
|
||||
.storage-tags,
|
||||
.storage-location {
|
||||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
width: 70%;
|
||||
text-align: left;
|
||||
}
|
||||
.storage-title {
|
||||
@ -487,7 +473,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
}
|
||||
.storage-desc {
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
color: #000000;
|
||||
@include ellipsis;
|
||||
i {
|
||||
display: inline-block;
|
||||
@ -507,6 +493,15 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.storage-location1 {
|
||||
color: #adadad;
|
||||
//超出两行省略
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.storage-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -537,9 +532,9 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
}
|
||||
.rank-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 30px;
|
||||
right: 20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
// width: 80px;
|
||||
// height: 80px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<el-card shadow="none" style="border-radius: 14px; position: relative">
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
@ -72,7 +72,7 @@
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
@click.stop="switchTab(item, index)"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
@ -91,42 +91,30 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: absolute; right: 3%; top: 27%">
|
||||
<el-button style="padding: 10px 50px" size="large" type="primary" @click="handleApply">发布需求</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row v-if="currentTab0 === 0" :gutter="20" style="margin-top: 10px">
|
||||
<el-col :span="12">
|
||||
<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/img1.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<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/img2.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- <el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
||||
<el-col v-for="(item, index) in state.data0" :key="index" :span="12">
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<img :src="getAssetsFile(`${item.imageUrl}`)" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.title }}</h3>
|
||||
<h2 class="storage-title">
|
||||
<span class="span">{{ item.title }}</span>
|
||||
<span><img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" /></span>
|
||||
</h2>
|
||||
<div class="storage-desc">
|
||||
<span>{{ item.description }}</span>
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
|
||||
<!-- <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" /> -->
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">高品质</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">杀菌灭毒</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">{{ item.type }}</el-tag>
|
||||
<el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">{{ item.monitor }}</el-tag>
|
||||
<!-- <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag> -->
|
||||
</div>
|
||||
<div class="storage-location">
|
||||
<el-icon><Location /></el-icon>
|
||||
@ -136,20 +124,20 @@
|
||||
</div>
|
||||
<div class="storage-price">
|
||||
<div class="storage-price-left">
|
||||
<span class="price-label">报价</span>
|
||||
<!-- <span class="price-label">报价</span> -->
|
||||
<span class="price-amount">¥{{ item.price }}/kg</span>
|
||||
</div>
|
||||
<el-button type="success" class="contact-btn" @click="goDei(item)">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
|
||||
<span>联系卖家</span>
|
||||
<!-- <img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" /> -->
|
||||
<span>预约</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="item.rank" class="rank-badge">
|
||||
<!-- <div v-if="item.rank" class="rank-badge">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="currentTab0 === 1" :gutter="20" style="margin-top: 10px">
|
||||
<el-col :span="24">
|
||||
@ -162,9 +150,7 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 50px" size="large" type="primary" @click="handleApply">发布需求</el-button>
|
||||
</div>
|
||||
|
||||
<page-pagination :total="5" @current-change="currentChange" />
|
||||
</template>
|
||||
</common>
|
||||
@ -172,7 +158,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { onMounted, ref, reactive, watch } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
@ -191,46 +177,81 @@ const state = reactive({
|
||||
query: {
|
||||
current: 1,
|
||||
},
|
||||
data0: [],
|
||||
data: [
|
||||
{
|
||||
title: '蔬菜分拣服务',
|
||||
description: '绿鲜甄选蔬菜分拣中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
title: '云南绿源生态农业有限公司',
|
||||
description: '根茎类 ',
|
||||
location: '临沧市·耿马县',
|
||||
locationUrl: 'images/dz.png',
|
||||
//分拣
|
||||
type: '自动化分拣',
|
||||
//监控方式
|
||||
monitor: '全程实时监控',
|
||||
price: '3.00~5.00',
|
||||
rank: '1',
|
||||
imageUrl: 'images/vegetable.png',
|
||||
imageUrl: 'images/5.png',
|
||||
//联系人
|
||||
contact: '李志强',
|
||||
phone: '13988324687',
|
||||
//介绍
|
||||
introduce:
|
||||
'云南绿源生态农业有限公司专注耿马高原根茎类作物，拥有5000㎡无尘车间，自动滚轴分选线可精准区分大小、糖度；全程冷链+云端监控，客户手机即可查看货位温湿度；3-5元/kg为当季地头价，量大可议价，支持京东冷链直发、边贸自提。',
|
||||
},
|
||||
{
|
||||
title: '水果分拣服务',
|
||||
description: '果韵鲜享分拣站',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '2',
|
||||
imageUrl: 'images/fruit.png',
|
||||
title: '云南丰瑞农业发展有限公司',
|
||||
description: '豆类 ',
|
||||
location: '临沧市·耿马县',
|
||||
locationUrl: 'images/dz.png',
|
||||
//分拣
|
||||
type: '人工分拣',
|
||||
//监控方式
|
||||
monitor: '全程实时监控',
|
||||
price: '2.50~4.00',
|
||||
rank: '1',
|
||||
imageUrl: 'images/6.png',
|
||||
//联系人
|
||||
contact: '张 莉',
|
||||
phone: '13888013256',
|
||||
//介绍
|
||||
introduce:
|
||||
'云南丰瑞农业发展主打滇西蚕豆、芸豆，人工手选保证完整无破损，200㎡恒温库+24h摄像监控，价格2.5-4元/kg含简易真空小袋；可提供出口级质检报告，孟定口岸当天装车，适合电商小包及边贸批量。',
|
||||
},
|
||||
{
|
||||
title: '水果分拣服务',
|
||||
description: '好果分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '3',
|
||||
imageUrl: 'images/fruit.png',
|
||||
title: '云南田园牧歌农业科技有限公司',
|
||||
description: '菌菇类 ',
|
||||
location: '临沧市·耿马县',
|
||||
locationUrl: 'images/dz.png',
|
||||
//分拣
|
||||
type: '自动化分拣',
|
||||
//监控方式
|
||||
monitor: '全程实时监控',
|
||||
price: '4.00~6.00',
|
||||
rank: '1',
|
||||
imageUrl: 'images/7.png',
|
||||
contact: '王 磊',
|
||||
phone: '15987925518',
|
||||
//介绍
|
||||
introduce:
|
||||
'云南田园牧歌农业科技依托耿马原始松林，年产野生菌鲜货800吨；自动光学分拣机剔除虫蛀、畸形，4-6元/kg为产地批发价，全程-2℃冷藏车直达昆明机场；支持顺丰冷运、泡沫箱+冰袋包装，24小时温湿度云端可查。',
|
||||
},
|
||||
{
|
||||
title: '水果分拣服务',
|
||||
description: '果美分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '',
|
||||
imageUrl: 'images/fruit.png',
|
||||
},
|
||||
{
|
||||
title: '水果分拣服务',
|
||||
description: '好果存分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '',
|
||||
imageUrl: 'images/fruit.png',
|
||||
title: '云南金土地农业有限公司',
|
||||
description: '坚果类 ',
|
||||
location: '临沧市·耿马县',
|
||||
locationUrl: 'images/dz.png',
|
||||
//分拣
|
||||
type: '人工分拣',
|
||||
//监控方式
|
||||
monitor: '全程实时监控',
|
||||
price: '5.00~7.00',
|
||||
rank: '1',
|
||||
imageUrl: 'images/4.png',
|
||||
contact: '陈 刚',
|
||||
phone: '13759347102',
|
||||
//介绍
|
||||
introduce:
|
||||
'云南金土地农业专注澳洲坚果、薄壳核桃，人工色选+比重筛选，碎仁率＜2%；500㎡充氮保鲜库全程可视监控，5-7元/kg含麻袋或礼盒包装；提供有机认证，可代发全国，边贸客户可孟定口岸自提，散称或整柜均可。',
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -252,10 +273,24 @@ const form = reactive({
|
||||
const diotext = ref('');
|
||||
const diodescription = ref('');
|
||||
|
||||
//切换
|
||||
const switchTab = (item, index) => {
|
||||
console.log(item);
|
||||
if (item === '全部') {
|
||||
state.data0 = state.data;
|
||||
} else if (item === '人工分拣') {
|
||||
state.data0 = state.data.filter((item) => item.type === '人工分拣');
|
||||
} else {
|
||||
state.data0 = state.data.filter((item) => item.type === '自动化分拣');
|
||||
}
|
||||
|
||||
currentTab1.value = index;
|
||||
};
|
||||
|
||||
const goDei = (data) => {
|
||||
diodescription.value = data.description;
|
||||
diotext.value = data.title;
|
||||
dialogVisible.value = true;
|
||||
// diodescription.value = data.description;
|
||||
// diotext.value = data.title;
|
||||
// dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
@ -283,6 +318,10 @@ const handleApply = () => {
|
||||
path: '/sub-operation-service/packaging/apply',
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log('state.data', state.data);
|
||||
state.data0 = state.data;
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// 基础颜色配置
|
||||
@ -443,7 +482,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
border-radius: 16px;
|
||||
}
|
||||
.storage-content {
|
||||
@include flex-column;
|
||||
// @include flex-column;
|
||||
|
||||
gap: 16px;
|
||||
&-top {
|
||||
@ -468,7 +507,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
cursor: pointer;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
// padding-right: 50px;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -480,12 +519,21 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.storage-title {
|
||||
font-size: 20px;
|
||||
margin-top: 0 !important;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
@include ellipsis;
|
||||
.span {
|
||||
width: 250px;
|
||||
//超出宽度显示省略号
|
||||
@include ellipsis;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.storage-desc {
|
||||
font-size: 16px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user