289 lines
8.0 KiB
Vue
289 lines
8.0 KiB
Vue
<template>
|
|
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
|
<section>
|
|
<common>
|
|
<template #main>
|
|
<el-card shadow="none" style="border-radius: 14px">
|
|
<div class="tabs">
|
|
<div class="tab" style="color: rgba(153, 153, 153, 1)">仓储分类</div>
|
|
<div class="tab cursor" :class="{ active: currentTab === 0 }" @click.stop="currentTab = 0">普通仓库</div>
|
|
<!-- <div class="tab cursor" :class="{ active: currentTab === 1 }" @click.stop="currentTab = 1">恒温仓库</div>-->
|
|
<div class="tab cursor" :class="{ active: currentTab === 2 }" @click.stop="currentTab = 2">冷库</div>
|
|
<!-- <div class="tab cursor" :class="{ active: currentTab === 3 }" @click.stop="currentTab = 3">气调仓库</div>-->
|
|
<div class="tab"> </div>
|
|
</div>
|
|
</el-card>
|
|
<el-row :gutter="20" style="margin-top: 10px">
|
|
<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.imgPath" fit="cover" class="storage-image" />
|
|
<div class="storage-info">
|
|
<h3 class="storage-title">{{ item.name }}</h3>
|
|
<div class="storage-desc">
|
|
<span>{{ item.parentTitle }}</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
|
|
v-for="(tags, indexT) in item.tag"
|
|
:key="indexT"
|
|
effect="plain"
|
|
round
|
|
style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
|
|
>
|
|
{{ tags }}
|
|
</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.address }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="storage-price">
|
|
<div class="storage-price-left">
|
|
<span class="price-label">报价</span>
|
|
<span class="price-amount"
|
|
>¥{{ item.price }}/{{ item.priceSpec === 1 ? 'm³' : item.priceSpec === 2 ? '间' : item.priceSpec === 3 ? '㎡' : '' }}/{{
|
|
item.timeSpec === 1 ? '天' : item.timeSpec === 2 ? '月' : item.timeSpec === 3 ? '年' : ''
|
|
}}
|
|
</span>
|
|
</div>
|
|
<el-button type="success" class="contact-btn">
|
|
<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">
|
|
<!-- {{ item.rank }}-->
|
|
<img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<page-pagination :total="20" @current-change="currentChange" />
|
|
</template>
|
|
</common>
|
|
</section>
|
|
</template>
|
|
<script setup name="page-menu">
|
|
import { ref, reactive, watch, onMounted } from 'vue';
|
|
import { getAssetsFile } from '@/utils';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { warehouseList } from '@/apis/warehouseLogistics.js';
|
|
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
|
import Common from '../components/common.vue';
|
|
import { useGetCommonData } from '@/store/modules/common.js';
|
|
import { storeToRefs } from 'pinia';
|
|
const store = useGetCommonData();
|
|
const { data } = storeToRefs(store);
|
|
|
|
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: '2',
|
|
},
|
|
{
|
|
imageUrl: '/storage3.jpg',
|
|
title: '果蔬保鲜仓储',
|
|
description: '绿鲜蔬选果蔬仓储中心 ',
|
|
location: '临沧市-耿马县',
|
|
price: '600.0',
|
|
rank: '3',
|
|
},
|
|
{
|
|
imageUrl: '/storage3.jpg',
|
|
title: '果蔬保鲜仓储',
|
|
description: '绿鲜蔬选果蔬仓储中心 ',
|
|
location: '临沧市-耿马县',
|
|
price: '600.0',
|
|
rank: '',
|
|
},
|
|
{
|
|
imageUrl: '/storage3.jpg',
|
|
title: '果蔬保鲜仓储',
|
|
description: '绿鲜蔬选果蔬仓储中心 ',
|
|
location: '临沧市-耿马县',
|
|
price: '600.0',
|
|
rank: '',
|
|
},
|
|
{
|
|
imageUrl: '/storage3.jpg',
|
|
title: '果蔬保鲜仓储',
|
|
description: '绿鲜蔬选果蔬仓储中心 ',
|
|
location: '临沧市-耿马县',
|
|
price: '600.0',
|
|
rank: '',
|
|
},
|
|
],
|
|
});
|
|
|
|
onMounted(() => {
|
|
warehouseList().then((res) => {
|
|
state.data = [];
|
|
if (res.code === 200) {
|
|
state.data = res.data.records;
|
|
for (let i in state.data) {
|
|
state.data[i].tag = state.data[i].tags.split(',');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
const currentTab = ref(0);
|
|
|
|
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>
|
|
.tabs {
|
|
height: 50px;
|
|
line-height: 50px;
|
|
display: flex;
|
|
font-size: 18px;
|
|
justify-content: flex-start;
|
|
padding: 0 20px;
|
|
.tab {
|
|
margin: 0 20px;
|
|
}
|
|
}
|
|
.cursor {
|
|
cursor: pointer;
|
|
}
|
|
.active {
|
|
color: rgba(37, 191, 130, 1);
|
|
}
|
|
.storage-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
border: 0;
|
|
border-radius: 24px;
|
|
}
|
|
.storage-content {
|
|
@include flex-column;
|
|
|
|
gap: 16px;
|
|
&-top {
|
|
@include flex-row;
|
|
|
|
align-items: center;
|
|
}
|
|
}
|
|
.storage-image {
|
|
margin-right: 16px;
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 8px;
|
|
object-fit: cover;
|
|
}
|
|
.storage-info {
|
|
padding-right: 50px;
|
|
flex: 1;
|
|
cursor: pointer;
|
|
}
|
|
.storage-title,
|
|
.storage-desc,
|
|
.storage-tags,
|
|
.storage-location {
|
|
overflow: hidden;
|
|
margin: 10px 0;
|
|
width: 100%;
|
|
}
|
|
.storage-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #000000;
|
|
@include ellipsis;
|
|
}
|
|
.storage-desc {
|
|
font-size: 16px;
|
|
color: #999999;
|
|
@include ellipsis;
|
|
i {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
.storage-tags {
|
|
span {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.storage-location {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #000000;
|
|
}
|
|
.storage-price {
|
|
display: flex;
|
|
align-items: center;
|
|
&-left {
|
|
flex: 1;
|
|
}
|
|
}
|
|
.price-label {
|
|
margin-right: 10px;
|
|
font-size: 16px;
|
|
color: #999999;
|
|
}
|
|
.price-amount {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: $color-primary;
|
|
}
|
|
.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>
|