fix
This commit is contained in:
parent
259219053d
commit
3ed137b757
13
main/.env.pre
Normal file
13
main/.env.pre
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
# 本地环境
|
||||||
|
VITE_APP_NAME = 'daimp-front-main'
|
||||||
|
VITE_APP_TITLE = '数字农业产业管理平台'
|
||||||
|
VITE_APP_SUB_OS = '//localhost:8090/sub-operation-service/'
|
||||||
|
VITE_APP_SUB_OA = '//localhost:8090/sub-operation-admin/'
|
||||||
|
VITE_APP_SUB_GAS = '//localhost:8090/sub-government-affairs-service/'
|
||||||
|
VITE_APP_SUB_GAA = '//localhost:8090/sub-government-admin/'
|
||||||
|
VITE_APP_SUB_GSS = '//localhost:8090/sub-government-screen-service/'
|
||||||
|
# 接口
|
||||||
|
VITE_APP_BASE_API = '/apis'
|
||||||
|
VITE_APP_BASE_URL = ''
|
||||||
|
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||||
|
VITE_APP_UPLOAD_URL = ''
|
||||||
9
sub-government-affairs-service/.env.pre
Normal file
9
sub-government-affairs-service/.env.pre
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
# 本地环境
|
||||||
|
VITE_APP_MIAN = 'daimp-front-main'
|
||||||
|
VITE_APP_MIAN_URL = 'http://localhost:8090'
|
||||||
|
VITE_APP_NAME = 'sub-government-affairs-service'
|
||||||
|
# 接口
|
||||||
|
VITE_APP_BASE_API = '/apis'
|
||||||
|
VITE_APP_BASE_URL = ''
|
||||||
|
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||||
|
VITE_APP_UPLOAD_URL = ''
|
||||||
9
sub-government-screen-service/.env.pre
Normal file
9
sub-government-screen-service/.env.pre
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
# 本地环境
|
||||||
|
VITE_APP_MIAN = 'daimp-front-main'
|
||||||
|
VITE_APP_MIAN_URL = 'http://localhost:8090'
|
||||||
|
VITE_APP_NAME = 'sub-government-screen-service'
|
||||||
|
# 接口
|
||||||
|
VITE_APP_BASE_API = '/apis'
|
||||||
|
VITE_APP_BASE_URL = ''
|
||||||
|
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||||
|
VITE_APP_UPLOAD_URL = ''
|
||||||
9
sub-operation-admin/.env.pre
Normal file
9
sub-operation-admin/.env.pre
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
# 本地环境
|
||||||
|
VITE_APP_MIAN = 'daimp-front-main'
|
||||||
|
VITE_APP_MIAN_URL = 'http://localhost:8090'
|
||||||
|
VITE_APP_NAME = 'sub-operation-admin'
|
||||||
|
# 接口
|
||||||
|
VITE_APP_BASE_API = '/apis'
|
||||||
|
VITE_APP_BASE_URL = ''
|
||||||
|
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||||
|
VITE_APP_UPLOAD_URL = ''
|
||||||
9
sub-operation-service/.env.pre
Normal file
9
sub-operation-service/.env.pre
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
# 本地环境
|
||||||
|
VITE_APP_MIAN = 'daimp-front-main'
|
||||||
|
VITE_APP_MIAN_URL = 'http://localhost:8090'
|
||||||
|
VITE_APP_NAME = 'sub-operation-admin'
|
||||||
|
# 接口
|
||||||
|
VITE_APP_BASE_API = '/apis'
|
||||||
|
VITE_APP_BASE_URL = ''
|
||||||
|
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||||
|
VITE_APP_UPLOAD_URL = ''
|
||||||
48
sub-operation-service/src/components/page-layout/index.vue
Normal file
48
sub-operation-service/src/components/page-layout/index.vue
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-layout">
|
||||||
|
<div class="page-layout-left">
|
||||||
|
<page-menu :menus="menus" />
|
||||||
|
</div>
|
||||||
|
<div class="page-layout-main">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup name="page-layout">
|
||||||
|
const props = defineProps({
|
||||||
|
menus: { type: Array, default: () => [] },
|
||||||
|
showMenu: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-layout {
|
||||||
|
width: $width-main;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 100%;
|
||||||
|
min-height: calc(100vh - 230px);
|
||||||
|
@include flex-row();
|
||||||
|
|
||||||
|
&-left,
|
||||||
|
&-main {
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
&-left {
|
||||||
|
width: 240px;
|
||||||
|
margin-right: 16px;
|
||||||
|
background: $color-fff;
|
||||||
|
}
|
||||||
|
&-main {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
126
sub-operation-service/src/components/page-menu/index-bak.vue
Normal file
126
sub-operation-service/src/components/page-menu/index-bak.vue
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-menu">
|
||||||
|
<div v-for="menu in menus" :key="menu.name" class="page-menu-item">
|
||||||
|
<div class="menu" :class="isActive(menu) ? 'active' : ''" @click="todo(menu, true)">
|
||||||
|
<span class="item-img"><img :src="getAssetsFile(menu.icon)" /></span>
|
||||||
|
<span class="item-title">{{ menu.meta.title }}</span>
|
||||||
|
<el-icon v-if="!isEmpty(menu?.children)">
|
||||||
|
<template v-if="menu.toggle"><ArrowDownBold /></template>
|
||||||
|
<template v-else><ArrowUpBold /></template>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<ul :class="`sub-menu ${menu?.toggle ? 'toggle' : ''}`">
|
||||||
|
<li v-for="item in menu?.children" :key="item.name" :class="isActive(item) ? 'active' : ''" @click="todo(item, false)">
|
||||||
|
<span class="sub-title">{{ item.meta.title }}</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup name="page-menu">
|
||||||
|
import { isEmpty, getAssetsFile } from '@/utils';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
menus: { type: Array, default: () => [] },
|
||||||
|
});
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const isActive = (row) => {
|
||||||
|
return route.path === row.path;
|
||||||
|
};
|
||||||
|
|
||||||
|
const todo = (row, toggle) => {
|
||||||
|
if (toggle && !isEmpty(row.children)) {
|
||||||
|
row.toggle = !row.toggle;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (typeof row.event === 'function') {
|
||||||
|
row.event(row);
|
||||||
|
} else {
|
||||||
|
router.push(row.path);
|
||||||
|
}
|
||||||
|
console.log(route.path, row.path);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-menu {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
width: 100%;
|
||||||
|
@include flex-column();
|
||||||
|
padding: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
@include flex-row();
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.item-img,
|
||||||
|
.item-title {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.item-img {
|
||||||
|
display: inline-block;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
.item-title {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-left: 8px;
|
||||||
|
@include ellipsis();
|
||||||
|
}
|
||||||
|
.el-icon {
|
||||||
|
color: $color-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-menu {
|
||||||
|
padding: 10px 0;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
&.toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 16px;
|
||||||
|
@include flex-row();
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
@include icon-space();
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: #000;
|
||||||
|
margin-right: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-title {
|
||||||
|
font-size: 16px;
|
||||||
|
@include ellipsis();
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
&::before {
|
||||||
|
background-color: $color-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
color: $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
91
sub-operation-service/src/components/page-menu/index.vue
Normal file
91
sub-operation-service/src/components/page-menu/index.vue
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-menu">
|
||||||
|
<el-scrollbar wrap-class="page-menu-scrollbar">
|
||||||
|
<el-menu
|
||||||
|
class="page-menu__menu"
|
||||||
|
background-color="#fff"
|
||||||
|
text-color="#000"
|
||||||
|
active-text-color="#25bf82"
|
||||||
|
:collapse-transition="true"
|
||||||
|
:unique-opened="true"
|
||||||
|
:default-active="active"
|
||||||
|
:default-openeds="openeds"
|
||||||
|
>
|
||||||
|
<SubItem v-for="item in menus" :key="item.path" :item="item" />
|
||||||
|
</el-menu>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup name="page-menu">
|
||||||
|
import { computed } from 'vue';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
import { findParentRoute } from '@/utils/router';
|
||||||
|
import { isEmpty } from '@/utils';
|
||||||
|
import SubItem from '@/layouts/component/Menu/SubItem';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
menus: { type: Array, default: () => [] },
|
||||||
|
});
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const openeds = computed(() => {
|
||||||
|
const item = findParentRoute(props.menus, route.path);
|
||||||
|
return !isEmpty(item) ? [item.path] : [];
|
||||||
|
});
|
||||||
|
|
||||||
|
const active = computed(() => {
|
||||||
|
const item = findParentRoute(props.menus, route.path);
|
||||||
|
return !isEmpty(item) ? item.path : '';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-menu {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
transition: width 0.28s;
|
||||||
|
&-scrollbar {
|
||||||
|
height: calc(100vh - 60px) !important;
|
||||||
|
}
|
||||||
|
:deep(.el-scrollbar__wrap) {
|
||||||
|
height: calc(100vh - 60px) !important;
|
||||||
|
}
|
||||||
|
&__menu {
|
||||||
|
border-right: 0;
|
||||||
|
:deep(.el-menu-item),
|
||||||
|
:deep(.el-sub-menu__title) {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #fff;
|
||||||
|
color: $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-menu-item) {
|
||||||
|
@include flex-row();
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 16px !important;
|
||||||
|
}
|
||||||
|
:deep(.el-sub-menu .el-menu-item) {
|
||||||
|
font-size: 16px;
|
||||||
|
padding-left: 50px !important;
|
||||||
|
&:hover {
|
||||||
|
.icon-dot {
|
||||||
|
background-color: $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.el-sub-menu .el-icon) {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
:deep(.el-menu-item.is-active) {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
&:not(.el-menu--collapse) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div class="page-pagination">
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
hide-on-single-page
|
||||||
|
:page-size="size"
|
||||||
|
:layout="layout"
|
||||||
|
:total="total"
|
||||||
|
@current-change="emit('current-change', $event)"
|
||||||
|
@size-change="emit('size-change', $event)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup name="page-pagination">
|
||||||
|
const props = defineProps({
|
||||||
|
layout: {
|
||||||
|
type: String,
|
||||||
|
default: 'prev, pager, next',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 10,
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['current-change', 'size-change']);
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-pagination {
|
||||||
|
width: 100%;
|
||||||
|
padding: 50px 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -3,7 +3,7 @@
|
|||||||
* @Author: zenghua.wang
|
* @Author: zenghua.wang
|
||||||
* @Date: 2023-06-20 11:48:41
|
* @Date: 2023-06-20 11:48:41
|
||||||
* @LastEditors: zenghua.wang
|
* @LastEditors: zenghua.wang
|
||||||
* @LastEditTime: 2025-04-12 14:48:27
|
* @LastEditTime: 2025-04-14 09:27:05
|
||||||
*/
|
*/
|
||||||
import { createRouter, createWebHistory } from 'vue-router';
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
import Layout from '@/layouts/index.vue';
|
import Layout from '@/layouts/index.vue';
|
||||||
@ -28,7 +28,7 @@ export const constantRoutes = [
|
|||||||
name: 'layout',
|
name: 'layout',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
redirect: '/sub-operation-service/ecommerce',
|
redirect: '/sub-operation-service/ecommerce',
|
||||||
meta: { title: '首页' },
|
meta: { title: '运营服务' },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/sub-operation-service/home',
|
path: '/sub-operation-service/home',
|
||||||
|
|||||||
@ -0,0 +1,81 @@
|
|||||||
|
import Layout from '@/layouts/index.vue';
|
||||||
|
import Views from '@/layouts/Views.vue';
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/warehouseLogistics',
|
||||||
|
name: 'warehouseLogistics',
|
||||||
|
component: Layout,
|
||||||
|
redirect: '/sub-operation-service/warehouse',
|
||||||
|
meta: { title: '仓储物流', icon: '' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/warehouse',
|
||||||
|
component: Views,
|
||||||
|
name: 'warehouse',
|
||||||
|
redirect: '/sub-operation-service/warehouse-list',
|
||||||
|
meta: { title: '仓储', icon: 'images/ecommerce/menu1.png' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/warehouse-list',
|
||||||
|
component: () => import('@/views/warehouseLogistics/warehouse/index.vue'),
|
||||||
|
name: 'warehouse-list',
|
||||||
|
meta: { title: '仓储列表', icon: '' },
|
||||||
|
hidden: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/warehouse-detail',
|
||||||
|
component: () => import('@/views/warehouseLogistics/warehouse/detail.vue'),
|
||||||
|
name: 'warehouse-detail',
|
||||||
|
meta: { title: '仓储详情', icon: '' },
|
||||||
|
hidden: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/logistics',
|
||||||
|
component: Views,
|
||||||
|
name: 'logistics',
|
||||||
|
redirect: '/sub-operation-service/logistics-list',
|
||||||
|
meta: { title: '物流', icon: 'images/ecommerce/menu1.png' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/logistics-list',
|
||||||
|
component: () => import('@/views/warehouseLogistics/logistics/index.vue'),
|
||||||
|
name: 'logistics-list',
|
||||||
|
meta: { title: '物流列表', icon: '' },
|
||||||
|
hidden: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/logistics-detail',
|
||||||
|
component: () => import('@/views/warehouseLogistics/logistics/detail.vue'),
|
||||||
|
name: 'logistics-detail',
|
||||||
|
meta: { title: '物流详情', icon: '' },
|
||||||
|
hidden: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/test',
|
||||||
|
component: Views,
|
||||||
|
redirect: '/sub-operation-service/test1',
|
||||||
|
name: 'test',
|
||||||
|
meta: { title: '测试', icon: 'images/ecommerce/menu3.png' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/test1',
|
||||||
|
component: () => import('@/views/warehouseLogistics/test/test1.vue'),
|
||||||
|
name: 'test1',
|
||||||
|
meta: { title: '子菜单1', icon: '' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/sub-operation-service/test2',
|
||||||
|
component: () => import('@/views/warehouseLogistics/test/test1.vue'),
|
||||||
|
name: 'test2',
|
||||||
|
meta: { title: '子菜单2', icon: '' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<page-layout :menus="state.menus"> 详情 </page-layout>
|
||||||
|
</template>
|
||||||
|
<script setup name="page-menu">
|
||||||
|
import { ref, reactive, watch } from 'vue';
|
||||||
|
import { getAssetsFile } from '@/utils';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
menus: warehouseLogisticsRoutes[0].children,
|
||||||
|
query: {},
|
||||||
|
data: {},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<page-layout :menus="state.menus"> 物流 </page-layout>
|
||||||
|
</template>
|
||||||
|
<script setup name="page-menu">
|
||||||
|
import { ref, reactive, watch } from 'vue';
|
||||||
|
import { getAssetsFile } from '@/utils';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
menus: warehouseLogisticsRoutes[0].children,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<page-layout :menus="state.menus"> test1 </page-layout>
|
||||||
|
</template>
|
||||||
|
<script setup name="page-menu">
|
||||||
|
import { ref, reactive, watch } from 'vue';
|
||||||
|
import { getAssetsFile } from '@/utils';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
menus: warehouseLogisticsRoutes[0].children,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<page-layout :menus="state.menus"> test2 </page-layout>
|
||||||
|
</template>
|
||||||
|
<script setup name="page-menu">
|
||||||
|
import { ref, reactive, watch } from 'vue';
|
||||||
|
import { getAssetsFile } from '@/utils';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
menus: warehouseLogisticsRoutes[0].children,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<page-layout :menus="state.menus"> 详情123 </page-layout>
|
||||||
|
</template>
|
||||||
|
<script setup name="page-menu">
|
||||||
|
import { ref, reactive, watch } from 'vue';
|
||||||
|
import { getAssetsFile } from '@/utils';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
menus: warehouseLogisticsRoutes[0].children,
|
||||||
|
query: {},
|
||||||
|
data: {},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@ -0,0 +1,214 @@
|
|||||||
|
<template>
|
||||||
|
<page-layout :menus="state.menus">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
||||||
|
<el-card class="storage-card" shadow="hover">
|
||||||
|
<div class="storage-content">
|
||||||
|
<div class="storage-content-top" @click="toLink(item)">
|
||||||
|
<el-image :src="item.imageUrl" fit="cover" class="storage-image" />
|
||||||
|
<div class="storage-info">
|
||||||
|
<h3 class="storage-title">{{ item.title }}</h3>
|
||||||
|
<div class="storage-desc">
|
||||||
|
<span>{{ item.description }}</span>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
<div class="storage-tags">
|
||||||
|
<el-tag effect="plain" round>延长仓储</el-tag>
|
||||||
|
<el-tag effect="plain" round>保鲜储存</el-tag>
|
||||||
|
</div>
|
||||||
|
<div class="storage-location">
|
||||||
|
<el-icon><Location /></el-icon>
|
||||||
|
{{ item.location }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="storage-price">
|
||||||
|
<div class="storage-price-left">
|
||||||
|
<span class="price-label">报价</span>
|
||||||
|
<span class="price-amount">¥{{ item.price }}/间/月</span>
|
||||||
|
</div>
|
||||||
|
<el-button type="success" class="contact-btn">
|
||||||
|
<el-icon><ChatDotRound /></el-icon>
|
||||||
|
<span>联系卖家</span>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.rank" class="rank-badge">
|
||||||
|
{{ item.rank }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<page-pagination :total="20" @current-change="currentChange" />
|
||||||
|
</page-layout>
|
||||||
|
</template>
|
||||||
|
<script setup name="page-menu">
|
||||||
|
import { ref, reactive, watch } from 'vue';
|
||||||
|
import { getAssetsFile } from '@/utils';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
menus: warehouseLogisticsRoutes[0].children,
|
||||||
|
query: {
|
||||||
|
current: 1,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
imageUrl: '/storage1.jpg',
|
||||||
|
title: '果蔬保鲜仓储',
|
||||||
|
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||||
|
location: '临沧市-耿马县',
|
||||||
|
price: '600.0',
|
||||||
|
rank: '1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageUrl: '/storage2.jpg',
|
||||||
|
title: '果蔬保鲜仓储',
|
||||||
|
description: '绿鲜蔬选果蔬仓储中心',
|
||||||
|
location: '临沧市-耿马县',
|
||||||
|
price: '600.0',
|
||||||
|
rank: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageUrl: '/storage3.jpg',
|
||||||
|
title: '果蔬保鲜仓储',
|
||||||
|
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||||
|
location: '临沧市-耿马县',
|
||||||
|
price: '600.0',
|
||||||
|
rank: '3',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
const currentChange = (current) => {
|
||||||
|
state.query.current = current;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toLink = (row) => {
|
||||||
|
router.push({
|
||||||
|
path: '/sub-operation-service/warehouse-detail',
|
||||||
|
query: { id: row?.id ?? '100' },
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.storage-card {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-radius: 24px;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-content {
|
||||||
|
@include flex-column();
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
&-top {
|
||||||
|
@include flex-row();
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-image {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
margin-right: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-info {
|
||||||
|
padding-right: 50px;
|
||||||
|
flex: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-title,
|
||||||
|
.storage-desc,
|
||||||
|
.storage-tags,
|
||||||
|
.storage-location {
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #000;
|
||||||
|
@include ellipsis();
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-desc {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999;
|
||||||
|
@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: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-price {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&-left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-label {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #999;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-amount {
|
||||||
|
color: $color-primary;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user