政务云数据----运营仓储物流
This commit is contained in:
parent
30cbeeedb7
commit
9a1b7b5a52
127
main/vite.config.js.timestamp-1751366989906-7f0aabc0a2e79.mjs
Normal file
127
main/vite.config.js.timestamp-1751366989906-7f0aabc0a2e79.mjs
Normal file
File diff suppressed because one or more lines are too long
@ -158,22 +158,6 @@ const resetForm = () => {
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
batchCode: '20230101001',
|
||||
productTypes: '种子',
|
||||
name: '小麦种子',
|
||||
purchaseDate: '2023-01-01',
|
||||
number: 100,
|
||||
Unit: 'kg',
|
||||
baseCode: '20230101001',
|
||||
baseName: '张三',
|
||||
baseAddress: '张三',
|
||||
plotCode: '20230101001',
|
||||
plotName: '张三',
|
||||
businessEntity: '张三',
|
||||
record: '张三',
|
||||
createDate: '2023-01-01',
|
||||
},
|
||||
{
|
||||
batchCode: 'QY-GM-001',
|
||||
productTypes: '耿马蔗香食品有限公司',
|
||||
|
||||
1
sub-operation-service/components.d.ts
vendored
1
sub-operation-service/components.d.ts
vendored
@ -10,6 +10,7 @@ declare module 'vue' {
|
||||
BreadComp: typeof import('./src/components/breadComp.vue')['default']
|
||||
CenterMap: typeof import('./src/components/centerMap.vue')['default']
|
||||
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
||||
copy: typeof import('./src/components/custom-scroll-title copy/index.vue')['default']
|
||||
CostomImg: typeof import('./src/components/costomImg.vue')['default']
|
||||
CustomBack: typeof import('./src/components/customBack.vue')['default']
|
||||
CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 586 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 390 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 59 KiB |
@ -433,6 +433,18 @@ export const constantRoutes = [
|
||||
name: 'warehouse-detail',
|
||||
meta: { title: '仓储详情' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/warehouse-application',
|
||||
component: () => import('@/views/warehouseLogistics/warehouse/application.vue'),
|
||||
name: 'warehouse-application',
|
||||
meta: { title: '申请仓储需求' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/warehouse-allocation',
|
||||
component: () => import('@/views/warehouseLogistics/warehouse/allocation.vue'),
|
||||
name: 'warehouse-allocation',
|
||||
meta: { title: '平台自动分配' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-operation-service/logistics',
|
||||
// component: () => import('@/views/error/blank.vue'),
|
||||
|
||||
@ -7,9 +7,9 @@
|
||||
<el-icon><ArrowLeftBold /></el-icon>物流 · <span style="color: rgba(37, 191, 130, 1)">查看详情</span>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<div class="flex items-center mb-8">
|
||||
<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>
|
||||
<div class="flex-1">
|
||||
@ -29,7 +29,6 @@
|
||||
>
|
||||
{{ tags }}
|
||||
</el-tag>
|
||||
<!-- <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">保鲜储存</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>
|
||||
@ -59,7 +58,7 @@
|
||||
<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>
|
||||
</el-card>
|
||||
</template>
|
||||
@ -249,6 +248,9 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
.storage-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
|
||||
@ -4,6 +4,11 @@
|
||||
<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">
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
@ -61,20 +66,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-card> -->
|
||||
<el-row :gutter="20" style="margin-top: 10px">
|
||||
<el-col v-if="currentTab0 === 0" :span="24">
|
||||
<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" />
|
||||
<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" />
|
||||
<img src="@/assets/images/warehouseLogistics/img12.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -89,7 +94,7 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布物流{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
<el-button style="padding: 10px 50px" size="large" type="primary">在线寄货</el-button>
|
||||
</div>
|
||||
<!-- <el-pagination
|
||||
:size="'large'"
|
||||
@ -222,7 +227,7 @@ const getWarehouseList = (type) => {
|
||||
|
||||
const toLink = (row) => {
|
||||
router.push({
|
||||
name: 'warehouse-detail',
|
||||
name: 'logistics-detail',
|
||||
query: { id: row?.id ?? '100' },
|
||||
});
|
||||
};
|
||||
@ -344,19 +349,14 @@ const priceConfirm = () => {
|
||||
.storage-price-left {
|
||||
text-align: left;
|
||||
}
|
||||
.storage-image {
|
||||
margin-right: 16px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.storage-image1 {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
@ -433,4 +433,12 @@ const priceConfirm = () => {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.max-w-7xl {
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
.storage-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="title">
|
||||
<span @click="toBack(-2)">仓储</span>
|
||||
<span class="mx-10"> > </span>
|
||||
<span @click="toBack(-1)">申请仓储</span>
|
||||
<span class="mx-10"> > </span>
|
||||
<span style="color: rgba(37, 191, 130, 1)">资源分配</span>
|
||||
</div>
|
||||
<div 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>
|
||||
</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>
|
||||
<el-card shadow="none" style="border-radius: 14px; margin-top: 20px">
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img16.png" fit="cover" class="storage-image" />
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import Common from '../components/common.vue';
|
||||
import { warehouseDetail } from '@/apis/warehouseLogistics.js';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
query: {},
|
||||
data: {},
|
||||
});
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const queryDetail = () => {
|
||||
warehouseDetail(state.query.id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
state.data = res.data;
|
||||
for (let i in state.data) {
|
||||
state.data[i].tag = state.data[i].tags.split(',');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
state.query.id = route.query.id;
|
||||
// queryDetail();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
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;
|
||||
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 {
|
||||
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>
|
||||
@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<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/img17.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>
|
||||
</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>
|
||||
<el-card shadow="none" style="border-radius: 14px; margin-top: 20px">
|
||||
<div class="max-w-7xl mx-auto p-4">
|
||||
<img src="@/assets/images/warehouseLogistics/img18.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>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import Common from '../components/common.vue';
|
||||
import { warehouseDetail } from '@/apis/warehouseLogistics.js';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
query: {},
|
||||
data: {},
|
||||
});
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const application = () => {
|
||||
router.push({
|
||||
name: 'warehouse-allocation',
|
||||
});
|
||||
};
|
||||
|
||||
const queryDetail = () => {
|
||||
warehouseDetail(state.query.id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
state.data = res.data;
|
||||
for (let i in state.data) {
|
||||
state.data[i].tag = state.data[i].tags.split(',');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
state.query.id = route.query.id;
|
||||
// queryDetail();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
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;
|
||||
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 {
|
||||
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,13 +3,15 @@
|
||||
<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="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">
|
||||
<div class="flex items-center mb-8">
|
||||
<img src="@/assets/images/warehouseLogistics/img14.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">
|
||||
@ -29,7 +31,6 @@
|
||||
>
|
||||
{{ tags }}
|
||||
</el-tag>
|
||||
<!-- <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">保鲜储存</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>
|
||||
@ -59,7 +60,7 @@
|
||||
<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>
|
||||
</el-card>
|
||||
</template>
|
||||
@ -249,6 +250,9 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
max-width: 80rem;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
.storage-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
|
||||
@ -41,14 +41,14 @@
|
||||
<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/img7.png" fit="cover" class="storage-image storage-image1" />
|
||||
<img src="@/assets/images/warehouseLogistics/img7.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/img8.png" fit="cover" class="storage-image storage-image1" />
|
||||
<img src="@/assets/images/warehouseLogistics/img8.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -70,7 +70,7 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布仓储{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
<el-button v-if="currentTab0 === 0" style="padding: 10px 100px" size="large" type="primary" @click="application">申请仓储</el-button>
|
||||
</div>
|
||||
<!-- <el-pagination
|
||||
:size="'large'"
|
||||
@ -102,7 +102,8 @@ const { data } = storeToRefs(store);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab0 = reactive(['仓储服务', '仓储需求']);
|
||||
// const tab0 = reactive(['仓储服务', '仓储需求']);
|
||||
const tab0 = reactive(['仓储服务']);
|
||||
const tab1 = reactive(['全部', '普通仓储', '恒温仓储', '冷库', '气调仓储']);
|
||||
const currentTab0 = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
@ -199,12 +200,19 @@ const getWarehouseList = (type) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 跳转详情页
|
||||
const toLink = (row) => {
|
||||
router.push({
|
||||
name: 'warehouse-detail',
|
||||
query: { id: row?.id ?? '100' },
|
||||
});
|
||||
};
|
||||
// 跳转申请仓储需求
|
||||
const application = () => {
|
||||
router.push({
|
||||
name: 'warehouse-application',
|
||||
});
|
||||
};
|
||||
|
||||
const contact = (id) => {
|
||||
for (let i in state.data) {
|
||||
@ -329,6 +337,7 @@ const priceConfirm = () => {
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
.storage-image1 {
|
||||
margin-right: 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user