分拣包装，仓储物流
This commit is contained in:
parent
3ac220221e
commit
0727005a57
@ -13,9 +13,9 @@ VITE_APP_SUB_GSR = '//localhost:9530/new-digital-agriculture-screen/'
|
||||
VITE_APP_BASE_API = '/apis'
|
||||
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
# 阿里云接口地址
|
||||
VITE_APP_BASE_URL = 'http://47.109.205.240:8080'
|
||||
VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9300'
|
||||
# VITE_APP_BASE_URL = 'http://47.109.205.240:8080'
|
||||
# VITE_APP_UPLOAD_URL = 'http://47.109.205.240:9300'
|
||||
# 内网接口地址
|
||||
# VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||
# VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
|
||||
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||
VITE_APP_UPLOAD_URL = 'http://192.168.18.99:8080'
|
||||
# VITE_APP_VIST_URL = 'http://192.168.18.99'
|
||||
|
||||
1
sub-operation-service/components.d.ts
vendored
1
sub-operation-service/components.d.ts
vendored
@ -10,7 +10,6 @@ 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: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
@ -376,30 +376,30 @@ export const constantRoutes = [
|
||||
redirect: '/sub-operation-service/packaging/sorting',
|
||||
meta: { title: '分拣包装' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/packaging/sorting',
|
||||
component: () => import('@/views/error/blank.vue'),
|
||||
name: 'sortingMain',
|
||||
meta: { title: '分拣首页' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-operation-service/packaging/sorting',
|
||||
// component: () => import('@/views/packaging/sorting.vue'),
|
||||
// component: () => import('@/views/error/blank.vue'),
|
||||
// name: 'sortingMain',
|
||||
// meta: { title: '分拣首页' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-operation-service/packaging/index',
|
||||
component: () => import('@/views/error/blank.vue'),
|
||||
name: 'packagingMain',
|
||||
meta: { title: '包装首页' },
|
||||
path: '/sub-operation-service/packaging/sorting',
|
||||
component: () => import('@/views/packaging/sorting.vue'),
|
||||
name: 'sortingMain',
|
||||
meta: { title: '分拣首页' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-operation-service/packaging/index',
|
||||
// component: () => import('@/views/packaging/index.vue'),
|
||||
// component: () => import('@/views/error/blank.vue'),
|
||||
// name: 'packagingMain',
|
||||
// meta: { title: '包装首页' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-operation-service/packaging/index',
|
||||
component: () => import('@/views/packaging/index.vue'),
|
||||
name: 'packagingMain',
|
||||
meta: { title: '包装首页' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/packaging/details',
|
||||
component: () => import('@/views/packaging/details.vue'),
|
||||
@ -415,36 +415,36 @@ export const constantRoutes = [
|
||||
redirect: '/sub-operation-service/warehouse',
|
||||
meta: { title: '仓储物流' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/warehouse',
|
||||
component: () => import('@/views/error/blank.vue'),
|
||||
name: 'warehouseMain',
|
||||
meta: { title: '仓储首页' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-operation-service/warehouse',
|
||||
// component: () => import('@/views/warehouseLogistics/warehouse/index.vue'),
|
||||
// component: () => import('@/views/error/blank.vue'),
|
||||
// name: 'warehouseMain',
|
||||
// meta: { title: '仓储首页' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-operation-service/warehouse',
|
||||
component: () => import('@/views/warehouseLogistics/warehouse/index.vue'),
|
||||
name: 'warehouseMain',
|
||||
meta: { title: '仓储首页' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/warehouse-detail',
|
||||
component: () => import('@/views/warehouseLogistics/warehouse/detail.vue'),
|
||||
name: 'warehouse-detail',
|
||||
meta: { title: '仓储详情' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/logistics',
|
||||
component: () => import('@/views/error/blank.vue'),
|
||||
name: 'logistics-list',
|
||||
meta: { title: '物流首页' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-operation-service/logistics',
|
||||
// component: () => import('@/views/warehouseLogistics/logistics/index.vue'),
|
||||
// component: () => import('@/views/error/blank.vue'),
|
||||
// name: 'logistics-list',
|
||||
// meta: { title: '物流首页' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-operation-service/logistics',
|
||||
component: () => import('@/views/warehouseLogistics/logistics/index.vue'),
|
||||
name: 'logistics-list',
|
||||
meta: { title: '物流首页' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/logistics-detail',
|
||||
component: () => import('@/views/warehouseLogistics/logistics/detail.vue'),
|
||||
|
||||
@ -104,7 +104,7 @@ const menus = reactive([
|
||||
height: 100%;
|
||||
.left-menu,
|
||||
.common-content {
|
||||
overflow-y: auto;
|
||||
// overflow-y: auto;
|
||||
padding: 8px;
|
||||
height: calc(100% - 16px);
|
||||
border-radius: 8px;
|
||||
|
||||
@ -1,136 +1,173 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<span class="label">首选商家：</span>
|
||||
<span class="value">{{ diodescription }}</span>
|
||||
<div>
|
||||
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<span class="label">首选商家：</span>
|
||||
<span class="value">{{ diodescription }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">选择服务：</span>
|
||||
<span class="value">{{ diotext }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">选择服务：</span>
|
||||
<span class="value">{{ diotext }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="formRef" :model="form" label-position="top">
|
||||
<el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
|
||||
<el-input v-model="form.quantity" placeholder="请输入重量（kg）">
|
||||
<template #suffix>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form ref="formRef" :model="form" label-position="top">
|
||||
<el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
|
||||
<el-input v-model="form.quantity" placeholder="请输入重量（kg）">
|
||||
<template #suffix>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
|
||||
<el-input v-model="form.name" placeholder="请输入您的称呼" />
|
||||
</el-form-item>
|
||||
<el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
|
||||
<el-input v-model="form.name" placeholder="请输入您的称呼" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="您的电话："
|
||||
prop="phone"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入电话' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="form.phone" placeholder="请输入电话号码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form-item
|
||||
label="您的电话："
|
||||
prop="phone"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入电话' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="form.phone" placeholder="请输入电话号码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px; height: 200px">
|
||||
<div class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div class="tab_list">塑料类包装</div>
|
||||
<div
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab cursor">
|
||||
<div class="tab_list">纸类包装</div>
|
||||
<div
|
||||
v-for="(item, index) in tab2"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab cursor">
|
||||
<div class="tab_list">金属类包装</div>
|
||||
<div
|
||||
v-for="(item, index) in tab3"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab3 === index }"
|
||||
@click.stop="currentTab3 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</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)">
|
||||
<img :src="getAssetsFile(`${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>
|
||||
<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 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="storage-price">
|
||||
<div class="storage-price-left">
|
||||
<span class="price-label">报价</span>
|
||||
<span class="price-amount">¥{{ item.price }}/m</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">
|
||||
<!-- {{ 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="6" @current-change="currentChange" />
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</el-dialog>
|
||||
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab0"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
style="margin-left: 20px; margin-bottom: 10px"
|
||||
:class="{ active: currentTab0 === index, tab_list_li0: currentTab0 === index }"
|
||||
@click.stop="
|
||||
currentTab0 = index;
|
||||
currentTab1 = 0;
|
||||
currentTab2 = 0;
|
||||
"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab2"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- <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)">
|
||||
<img :src="getAssetsFile(`${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>
|
||||
<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 }}
|
||||
</div>
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布包装{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
</div>
|
||||
<page-pagination :total="5" @current-change="currentChange" />
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
@ -142,9 +179,10 @@ import Common from './components/common.vue';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab1 = reactive(['塑料类薄膜袋', '塑料瓶/壶', '塑料桶', '塑料盒', '塑料箱', '其他塑料包装制品']);
|
||||
const tab2 = reactive(['纸盒', '纸箱', '纸袋', '其他纸类包装容器']);
|
||||
const tab3 = reactive(['金属罐', '金属桶', '金属盒', '其他金属类包装容器']);
|
||||
const tab0 = reactive(['包装服务', '包装需求']);
|
||||
const tab1 = reactive(['全部', '熟料容器', '金属容器', '纸类容器']);
|
||||
const tab2 = reactive(['全部', '塑料袋', '塑料瓶', '塑料桶', '塑料盒']);
|
||||
const tab3 = reactive(['水产', '其他类']);
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {
|
||||
@ -152,40 +190,49 @@ const state = reactive({
|
||||
},
|
||||
data: [
|
||||
{
|
||||
imageUrl: 'images/film.png',
|
||||
title: '薄膜包装服务',
|
||||
description: '薄膜包装有限公司 ',
|
||||
title: '蔬菜分拣服务',
|
||||
description: '绿鲜甄选蔬菜分拣中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '3',
|
||||
price: '150',
|
||||
rank: '1',
|
||||
imageUrl: 'images/vegetable.png',
|
||||
},
|
||||
{
|
||||
imageUrl: 'images/plastics.png',
|
||||
title: '塑料袋包装服务',
|
||||
description: '塑料包装有限公司',
|
||||
title: '水果分拣服务',
|
||||
description: '果韵鲜享分拣站',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '2',
|
||||
imageUrl: 'images/fruit.png',
|
||||
},
|
||||
{
|
||||
imageUrl: 'images/carton.png',
|
||||
title: '纸盒包装服务',
|
||||
description: '保和纸盒包装厂',
|
||||
title: '水果分拣服务',
|
||||
description: '好果分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '5',
|
||||
price: '150',
|
||||
rank: '3',
|
||||
imageUrl: 'images/fruit.png',
|
||||
},
|
||||
{
|
||||
imageUrl: 'images/metal.png',
|
||||
title: '金属罐包装服务',
|
||||
description: '金属罐头厂',
|
||||
title: '水果分拣服务',
|
||||
description: '果美分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '8',
|
||||
price: '150',
|
||||
rank: '',
|
||||
imageUrl: 'images/fruit.png',
|
||||
},
|
||||
{
|
||||
title: '水果分拣服务',
|
||||
description: '好果存分拣站 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '150',
|
||||
rank: '',
|
||||
imageUrl: 'images/fruit.png',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const currentTab0 = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
const currentTab2 = ref(0);
|
||||
const currentTab3 = ref(0);
|
||||
@ -222,7 +269,7 @@ const currentChange = (current) => {
|
||||
};
|
||||
|
||||
const toLink = (row) => {
|
||||
row.data = ['高品质', '食品级', '塑料'];
|
||||
row.data = ['高品质', '杀菌灭毒', '绿色'];
|
||||
router.push({
|
||||
path: '/sub-operation-service/packaging/details',
|
||||
query: row,
|
||||
@ -330,17 +377,20 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
height: 160px;
|
||||
//height: 160px;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
// padding: 0 20px;
|
||||
}
|
||||
.tabs0 {
|
||||
padding: 0;
|
||||
}
|
||||
.tab {
|
||||
height: 100px;
|
||||
// height: 100px;
|
||||
width: 850px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -361,9 +411,15 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.tab_list_li.active {
|
||||
color: rgba(37, 191, 130, 1);
|
||||
}
|
||||
.tab_list_li0 {
|
||||
border-bottom: 2px solid rgba(37, 191, 130, 1);
|
||||
}
|
||||
}
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
@ -376,7 +432,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
border-radius: 24px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.storage-content {
|
||||
@include flex-column;
|
||||
@ -395,6 +451,13 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-image1 {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
flex: 1;
|
||||
|
||||
@ -1,136 +1,175 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<span class="label">首选商家：</span>
|
||||
<span class="value">{{ diodescription }}</span>
|
||||
<div>
|
||||
<el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<span class="label">首选商家：</span>
|
||||
<span class="value">{{ diodescription }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">选择服务：</span>
|
||||
<span class="value">{{ diotext }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">选择服务：</span>
|
||||
<span class="value">{{ diotext }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-form ref="formRef" :model="form" label-position="top">
|
||||
<el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
|
||||
<el-input v-model="form.quantity" placeholder="请输入重量（kg）">
|
||||
<template #suffix>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form ref="formRef" :model="form" label-position="top">
|
||||
<el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
|
||||
<el-input v-model="form.quantity" placeholder="请输入重量（kg）">
|
||||
<template #suffix>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
|
||||
<el-input v-model="form.name" placeholder="请输入您的称呼" />
|
||||
</el-form-item>
|
||||
<el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
|
||||
<el-input v-model="form.name" placeholder="请输入您的称呼" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="您的电话："
|
||||
prop="phone"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入电话' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="form.phone" placeholder="请输入电话号码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form-item
|
||||
label="您的电话："
|
||||
prop="phone"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入电话' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
|
||||
]"
|
||||
>
|
||||
<el-input v-model="form.phone" placeholder="请输入电话号码" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px; height: 200px">
|
||||
<div class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div class="tab_list">蔬菜分拣</div>
|
||||
<div
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab cursor">
|
||||
<div class="tab_list">水果分拣</div>
|
||||
<div
|
||||
v-for="(item, index) in tab2"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="tab cursor">
|
||||
<div class="tab_list">水果分拣</div>
|
||||
<div
|
||||
v-for="(item, index) in tab3"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab3 === index }"
|
||||
@click.stop="currentTab3 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</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)">
|
||||
<img :src="getAssetsFile(`${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>
|
||||
<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 }}
|
||||
</div>
|
||||
</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">
|
||||
<!-- {{ 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="5" @current-change="currentChange" />
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
|
||||
<el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</el-dialog>
|
||||
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab0"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
style="margin-left: 20px; margin-bottom: 10px"
|
||||
:class="{ active: currentTab0 === index, tab_list_li0: currentTab0 === index }"
|
||||
@click.stop="
|
||||
currentTab0 = index;
|
||||
currentTab1 = 0;
|
||||
currentTab2 = 0;
|
||||
"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentTab0 === 1" class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab2"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- <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)">
|
||||
<img :src="getAssetsFile(`${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>
|
||||
<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 }}
|
||||
</div>
|
||||
</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/img3.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布分拣{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
</div>
|
||||
<page-pagination :total="5" @current-change="currentChange" />
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
@ -142,8 +181,9 @@ import Common from './components/common.vue';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab1 = reactive(['叶菜类', '豆菜类', '根茎类', '茄果菜类', '食用菌类', '其他类蔬菜']);
|
||||
const tab2 = reactive(['甘蔗', '热带水果', '其他类水果']);
|
||||
const tab0 = reactive(['分拣服务', '分拣需求']);
|
||||
const tab1 = reactive(['全部', '人工分拣', '自动化分拣']);
|
||||
const tab2 = reactive(['全部', '已完成', '分拣中', '已接单', '待接单']);
|
||||
const tab3 = reactive(['水产', '其他类']);
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
@ -194,6 +234,7 @@ const state = reactive({
|
||||
],
|
||||
});
|
||||
|
||||
const currentTab0 = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
const currentTab2 = ref(0);
|
||||
const currentTab3 = ref(0);
|
||||
@ -338,17 +379,20 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
height: 160px;
|
||||
//height: 160px;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
// padding: 0 20px;
|
||||
}
|
||||
.tabs0 {
|
||||
padding: 0;
|
||||
}
|
||||
.tab {
|
||||
height: 100px;
|
||||
// height: 100px;
|
||||
width: 850px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -369,9 +413,15 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.tab_list_li.active {
|
||||
color: rgba(37, 191, 130, 1);
|
||||
}
|
||||
.tab_list_li0 {
|
||||
border-bottom: 2px solid rgba(37, 191, 130, 1);
|
||||
}
|
||||
}
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
@ -384,7 +434,7 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border: 0;
|
||||
border-radius: 24px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.storage-content {
|
||||
@include flex-column;
|
||||
@ -403,6 +453,13 @@ $border-color: #dcdfe6; // 边框颜色
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-image1 {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
flex: 1;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { ref, watch, onMounted, onUnmounted, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import Hls from 'hls.js';
|
||||
// import Hls from 'hls.js';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@ const menus = reactive([
|
||||
height: 100%;
|
||||
.left-menu,
|
||||
.common-content {
|
||||
overflow-y: auto;
|
||||
// overflow-y: auto;
|
||||
padding: 8px;
|
||||
height: calc(100% - 16px);
|
||||
border-radius: 8px;
|
||||
|
||||
@ -1,193 +1,106 @@
|
||||
<template>
|
||||
<!-- <page-layout :menus="state.menus"> </page-layout>-->
|
||||
<section>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="tabs">
|
||||
<div style="display: flex">
|
||||
<div class="tab" style="color: rgba(153, 153, 153, 1); width: 100px; text-align: right">农产品类型</div>
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 0 }"
|
||||
v-for="(item, index) in tab0"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
style="margin-left: 20px; margin-bottom: 10px"
|
||||
:class="{ active: currentTab0 === index, tab_list_li0: currentTab0 === index }"
|
||||
@click.stop="
|
||||
currentTab = 0;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
currentTab0 = index;
|
||||
currentTab1 = 0;
|
||||
currentTab2 = 0;
|
||||
"
|
||||
>
|
||||
粮食作物物流
|
||||
</div>
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 1 }"
|
||||
@click.stop="
|
||||
currentTab = 1;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
>
|
||||
经济作物物流
|
||||
</div>
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 2 }"
|
||||
@click.stop="
|
||||
currentTab = 2;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
>
|
||||
果蔬物流
|
||||
</div>
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 3 }"
|
||||
@click.stop="
|
||||
currentTab = 3;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
>
|
||||
畜牧产品物流
|
||||
</div>
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab === 4 }"
|
||||
@click.stop="
|
||||
currentTab = 4;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
>
|
||||
水产品物流
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 10px">
|
||||
<div class="tab" style="color: rgba(153, 153, 153, 1); width: 100px; text-align: right">运输方式</div>
|
||||
</div>
|
||||
<div v-if="currentTab0 === 0" class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab1 === 0 }"
|
||||
@click.stop="
|
||||
currentTab1 = 0;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
公路
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentTab0 === 1" class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab1 === 1 }"
|
||||
@click.stop="
|
||||
currentTab1 = 1;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
v-for="(item, index) in tab2"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab2 === index }"
|
||||
@click.stop="currentTab2 = index"
|
||||
>
|
||||
铁路
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentTab0 === 1" class="tabs">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab1 === 2 }"
|
||||
@click.stop="
|
||||
currentTab1 = 2;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
v-for="(item, index) in tab3"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
水路
|
||||
</div>
|
||||
<div
|
||||
class="tab cursor"
|
||||
:class="{ active: currentTab1 === 3 }"
|
||||
@click.stop="
|
||||
currentTab1 = 3;
|
||||
getLogisticList(currentTab, currentTab1);
|
||||
"
|
||||
>
|
||||
航空
|
||||
{{ item }}
|
||||
</div>
|
||||
</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">
|
||||
<el-col v-if="currentTab0 === 0" :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<img :src="item.imgPath" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.name }}</h3>
|
||||
<div class="storage-desc">
|
||||
<span style="text-align: left">{{ 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>
|
||||
</div>
|
||||
<div class="storage-location">
|
||||
<el-icon><Location /></el-icon>
|
||||
{{ item.address }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img11.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
<div class="storage-price">
|
||||
<div class="storage-price-left">
|
||||
<span class="price-label">报价</span>
|
||||
<span class="price-amount"
|
||||
>¥{{ item.price }}/{{ item.priceSpec === 1 ? 'kg' : item.priceSpec === 2 ? '件' : item.priceSpec === 3 ? 'm³' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<el-button type="success" class="contact-btn" @click="goDetail(item.id)">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
|
||||
<span>联系卖家</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="index >= 0 && index < 3" class="rank-badge">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/top' + (index + 1) + '.png')" alt="" style="width: 80px" />
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col v-else :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img13.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布物流{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
</div>
|
||||
<!-- <el-pagination
|
||||
:size="'large'"
|
||||
:page-size="paginations.size"
|
||||
:current-page="paginations.page"
|
||||
:total="paginations.total"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
@current-change="currentChange"
|
||||
/> -->
|
||||
</el-row>
|
||||
<el-pagination background layout="prev, pager, next" :total="1000" />
|
||||
<!-- <page-pagination :total="6" @current-change="currentChange" />-->
|
||||
<el-dialog v-model="dialogFormVisible" width="600" style="padding: 60px; border-radius: 16px">
|
||||
<el-form :size="'large'" :model="state.query.current">
|
||||
<el-form-item label="首选商家：" :label-width="formLabelWidth" style="color: #25bf82; font-size: 20px">
|
||||
{{ state.query.current.parentTitle }}
|
||||
</el-form-item>
|
||||
<el-form-item label="选择服务：" :label-width="formLabelWidth" style="color: #25bf82">
|
||||
{{ state.query.current.name }}
|
||||
</el-form-item>
|
||||
<el-form-item label="需求量：" :label-width="formLabelWidth">
|
||||
<el-input v-model="formData.value.demand" autocomplete="off" placeholder="请填写您的需求量" style="font-size: 20px">
|
||||
<template #append>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的称呼：" :label-width="formLabelWidth">
|
||||
<el-input
|
||||
v-model="formData.value.surname"
|
||||
autocomplete="off"
|
||||
placeholder="姓氏"
|
||||
style="display: inline; width: 100px; font-size: 20px"
|
||||
/>
|
||||
<el-radio-group v-model="formData.value.sex" style="display: inline; margin-left: 20px">
|
||||
<el-radio value="1">先生</el-radio>
|
||||
<el-radio value="2">女士</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的电话：" :label-width="formLabelWidth">
|
||||
<el-input v-model="formData.value.phoneNum" autocomplete="off" style="font-size: 20px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer" style="text-align: center">
|
||||
<el-button style="height: 50px; padding: 0 40px; border-radius: 16px" type="primary" @click="priceConfirm"> 发送询价 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
@ -196,14 +109,27 @@
|
||||
import { ref, reactive, watch, onMounted } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { getWarehouseInfo, warehouseList } from '@/apis/warehouseLogistics.js';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
import Common from '../components/common.vue';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics.js';
|
||||
import { getWarehouseInfo, logisticList } from '@/apis/warehouseLogistics.js';
|
||||
import { useGetCommonData } from '@/store/modules/common.js';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const store = useGetCommonData();
|
||||
const { data } = storeToRefs(store);
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab0 = reactive(['物流服务', '物流需求']);
|
||||
const tab1 = reactive(['全部', '物流公司', '个人']);
|
||||
const tab2 = reactive(['全部', '11米7', '13米', '13米7', '15米']);
|
||||
const tab3 = reactive(['全部', '厢式', '平板', '高栏', '飞翼', '开顶']);
|
||||
const currentTab0 = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
const currentTab2 = ref(0);
|
||||
const currentTab3 = ref(0);
|
||||
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {
|
||||
@ -215,7 +141,7 @@ const state = reactive({
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '3.0',
|
||||
price: '600.0',
|
||||
rank: '1',
|
||||
},
|
||||
{
|
||||
@ -223,7 +149,7 @@ const state = reactive({
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心',
|
||||
location: '临沧市-耿马县',
|
||||
price: '3.0',
|
||||
price: '600.0',
|
||||
rank: '2',
|
||||
},
|
||||
{
|
||||
@ -261,20 +187,30 @@ const state = reactive({
|
||||
],
|
||||
});
|
||||
const formData = reactive({});
|
||||
const paginations = reactive({
|
||||
page: 1,
|
||||
size: 2,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
const currentTab = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
const formLabelWidth = ref('120px');
|
||||
const toLink = (row) => {
|
||||
router.push({
|
||||
name: 'logistics-detail',
|
||||
query: { id: row?.id ?? '100' },
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getWarehouseList('1');
|
||||
});
|
||||
|
||||
const currentTab = ref(0);
|
||||
|
||||
const currentChange = (current) => {
|
||||
paginations.page = current;
|
||||
getWarehouseList(currentTab.value + 1);
|
||||
};
|
||||
|
||||
const getLogisticList = (cropsType, logisticsType) => {
|
||||
logisticList({ cropsType: cropsType + 1, logisticsType: logisticsType + 1 }).then((res) => {
|
||||
const getWarehouseList = (type) => {
|
||||
warehouseList({ type: type, current: paginations.page, size: paginations.size }).then((res) => {
|
||||
state.data = [];
|
||||
paginations.total = res.total;
|
||||
if (res.code === 200) {
|
||||
state.data = res.data.records;
|
||||
for (let i in state.data) {
|
||||
@ -284,7 +220,14 @@ const getLogisticList = (cropsType, logisticsType) => {
|
||||
});
|
||||
};
|
||||
|
||||
const goDetail = (id) => {
|
||||
const toLink = (row) => {
|
||||
router.push({
|
||||
name: 'warehouse-detail',
|
||||
query: { id: row?.id ?? '100' },
|
||||
});
|
||||
};
|
||||
|
||||
const contact = (id) => {
|
||||
for (let i in state.data) {
|
||||
if (state.data[i].id === id) {
|
||||
state.query.current = state.data[i];
|
||||
@ -293,7 +236,7 @@ const goDetail = (id) => {
|
||||
}
|
||||
formData.value = {
|
||||
warehouseId: state.query.current.id,
|
||||
type: 2,
|
||||
type: 1,
|
||||
demand: '',
|
||||
surname: '',
|
||||
sex: '',
|
||||
@ -301,6 +244,7 @@ const goDetail = (id) => {
|
||||
};
|
||||
dialogFormVisible.value = true;
|
||||
};
|
||||
|
||||
const priceConfirm = () => {
|
||||
// 遍历 formData 的所有键
|
||||
for (const key of Object.keys(formData.value)) {
|
||||
@ -324,21 +268,54 @@ const priceConfirm = () => {
|
||||
}
|
||||
});
|
||||
};
|
||||
onMounted(() => {
|
||||
getLogisticList(0, 0);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-form-item--large {
|
||||
--font-size: 20px;
|
||||
}
|
||||
.tabs {
|
||||
//height: 160px;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
padding: 0 20px;
|
||||
.tab {
|
||||
margin: 0 20px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
// padding: 0 20px;
|
||||
}
|
||||
.tabs0 {
|
||||
padding: 0;
|
||||
}
|
||||
.tab {
|
||||
// height: 100px;
|
||||
width: 850px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
overflow: auto; /* 启用滚动 */
|
||||
white-space: nowrap; /* 强制单行显示 */
|
||||
-ms-overflow-style: none; /* IE/Edge 兼容 */
|
||||
scrollbar-width: none; /* 隐藏滚动条 */
|
||||
.tab_list {
|
||||
color: #999999;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li {
|
||||
margin-left: 40px;
|
||||
color: #000000;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.tab_list_li.active {
|
||||
color: rgba(37, 191, 130, 1);
|
||||
}
|
||||
.tab_list_li0 {
|
||||
border-bottom: 2px solid rgba(37, 191, 130, 1);
|
||||
}
|
||||
}
|
||||
.cursor {
|
||||
@ -364,6 +341,9 @@ onMounted(() => {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.storage-price-left {
|
||||
text-align: left;
|
||||
}
|
||||
.storage-image {
|
||||
margin-right: 16px;
|
||||
width: 120px;
|
||||
@ -371,22 +351,21 @@ onMounted(() => {
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-image1 {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.storage-title {
|
||||
text-align: left;
|
||||
}
|
||||
.storage-desc {
|
||||
text-align: left;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.storage-tags {
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.storage-title,
|
||||
.storage-desc,
|
||||
.storage-tags,
|
||||
.storage-location {
|
||||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
@ -447,9 +426,6 @@ onMounted(() => {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.storage-price-left {
|
||||
text-align: left;
|
||||
}
|
||||
.rank-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@ -4,85 +4,75 @@
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="tabs tabs0">
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab0"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
style="margin-left: 20px; margin-bottom: 10px"
|
||||
:class="{ active: currentTab0 === index, tab_list_li0: currentTab0 === index }"
|
||||
@click.stop="
|
||||
currentTab0 = index;
|
||||
currentTab1 = 0;
|
||||
currentTab2 = 0;
|
||||
"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div 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;
|
||||
getWarehouseList('1');
|
||||
"
|
||||
>
|
||||
普通仓库
|
||||
<div class="tab cursor">
|
||||
<div
|
||||
v-for="(item, index) in tab1"
|
||||
:key="index"
|
||||
class="tab_list_li"
|
||||
:class="{ active: currentTab1 === index }"
|
||||
@click.stop="currentTab1 = index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <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;
|
||||
getWarehouseList('3');
|
||||
"
|
||||
>
|
||||
冷库
|
||||
</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">
|
||||
<el-col v-if="currentTab0 === 0" :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<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 class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img7.png" fit="cover" class="storage-image storage-image1" />
|
||||
</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" @click="contact(item.id)">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
|
||||
<span>联系卖家</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="index >= 0 && index < 3" class="rank-badge">
|
||||
<img :src="getAssetsFile('images/warehouseLogistics/top' + (index + 1) + '.png')" alt="" style="width: 80px" />
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-pagination
|
||||
<el-col v-else :span="24">
|
||||
<el-card class="storage-card" shadow="hover" body-style="padding: 0">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top">
|
||||
<img src="@/assets/images/warehouseLogistics/img9.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/img10.png" fit="cover" class="storage-image storage-image1" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<div style="position: fixed; left: 50%; bottom: 7%">
|
||||
<el-button style="padding: 10px 100px" size="large" type="primary">发布仓储{{ currentTab0 === 0 ? '服务' : '需求' }}</el-button>
|
||||
</div>
|
||||
<!-- <el-pagination
|
||||
:size="'large'"
|
||||
:page-size="paginations.size"
|
||||
:current-page="paginations.page"
|
||||
@ -90,43 +80,8 @@
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
@current-change="currentChange"
|
||||
/>
|
||||
/> -->
|
||||
</el-row>
|
||||
<el-dialog v-model="dialogFormVisible" width="600" style="padding: 60px; border-radius: 16px">
|
||||
<el-form :size="'large'" :model="state.query.current">
|
||||
<el-form-item label="首选商家：" :label-width="formLabelWidth" style="color: #25bf82; font-size: 20px">
|
||||
{{ state.query.current.parentTitle }}
|
||||
</el-form-item>
|
||||
<el-form-item label="选择服务：" :label-width="formLabelWidth" style="color: #25bf82">
|
||||
{{ state.query.current.name }}
|
||||
</el-form-item>
|
||||
<el-form-item label="需求量：" :label-width="formLabelWidth">
|
||||
<el-input v-model="formData.value.demand" autocomplete="off" placeholder="请填写您的需求量" style="font-size: 20px">
|
||||
<template #append>kg</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的称呼：" :label-width="formLabelWidth">
|
||||
<el-input
|
||||
v-model="formData.value.surname"
|
||||
autocomplete="off"
|
||||
placeholder="姓氏"
|
||||
style="display: inline; width: 100px; font-size: 20px"
|
||||
/>
|
||||
<el-radio-group v-model="formData.value.sex" style="display: inline; margin-left: 20px">
|
||||
<el-radio value="1">先生</el-radio>
|
||||
<el-radio value="2">女士</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="您的电话：" :label-width="formLabelWidth">
|
||||
<el-input v-model="formData.value.phoneNum" autocomplete="off" style="font-size: 20px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer" style="text-align: center">
|
||||
<el-button style="height: 50px; padding: 0 40px; border-radius: 16px" type="primary" @click="priceConfirm"> 发送询价 </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
@ -147,6 +102,13 @@ const { data } = storeToRefs(store);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const tab0 = reactive(['仓储服务', '仓储需求']);
|
||||
const tab1 = reactive(['全部', '普通仓储', '恒温仓储', '冷库', '气调仓储']);
|
||||
const currentTab0 = ref(0);
|
||||
const currentTab1 = ref(0);
|
||||
const currentTab2 = ref(0);
|
||||
const currentTab3 = ref(0);
|
||||
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {
|
||||
@ -291,14 +253,48 @@ const priceConfirm = () => {
|
||||
--font-size: 20px;
|
||||
}
|
||||
.tabs {
|
||||
height: 50px;
|
||||
//height: 160px;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
// padding: 0 20px;
|
||||
}
|
||||
.tabs0 {
|
||||
padding: 0;
|
||||
}
|
||||
.tab {
|
||||
// height: 100px;
|
||||
width: 850px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0 20px;
|
||||
.tab {
|
||||
margin: 0 20px;
|
||||
overflow-x: auto;
|
||||
overflow: auto; /* 启用滚动 */
|
||||
white-space: nowrap; /* 强制单行显示 */
|
||||
-ms-overflow-style: none; /* IE/Edge 兼容 */
|
||||
scrollbar-width: none; /* 隐藏滚动条 */
|
||||
.tab_list {
|
||||
color: #999999;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li {
|
||||
margin-left: 40px;
|
||||
color: #000000;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.tab_list_li:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.tab_list_li.active {
|
||||
color: rgba(37, 191, 130, 1);
|
||||
}
|
||||
.tab_list_li0 {
|
||||
border-bottom: 2px solid rgba(37, 191, 130, 1);
|
||||
}
|
||||
}
|
||||
.cursor {
|
||||
@ -334,6 +330,13 @@ const priceConfirm = () => {
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-image1 {
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
flex: 1;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user