Web/daimp-front
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

仓储物流页面接口对接、电商页面参数修改

Browse Source
This commit is contained in:
姚俊旭 2025-06-04 09:24:46 +08:00
parent 78a72e7668
commit 381c25a69d
10 changed files with 965 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
sub-operation-service/src/apis/warehouseLogistics.js
View File

@ -7,6 +7,13 @@ export function warehouseList(params = {}) {
params,
});
}
// 获取仓储查询数据
export function logisticList(params = {}) {
return request('logistics/logisticlogistic/page?', {
method: 'GET',
params,
});
}
// 获取仓储详情
export function warehouseDetail(id, params = {}) {
@ -15,3 +22,18 @@ export function warehouseDetail(id, params = {}) {
params,
});
}
// 获取物流详情
export function logisticDetail(id, params = {}) {
return request(`logistics/logisticlogistic/detail/${id}`, {
method: 'GET',
params,
});
}
// 获取仓储详情
export function getWarehouseInfo(data = {}) {
return request(`logistics/getwarehouseinfo/save`, {
method: 'POST',
data,
});
}

6
sub-operation-service/src/router/index.js
View File

@ -269,6 +269,12 @@ export const constantRoutes = [
name: 'logistics-list',
meta: { title: '物流首页' },
},
{
path: '/sub-operation-service/logistics-detail',
component: () => import('@/views/warehouseLogistics/logistics/detail.vue'),
name: 'logistics-detail',
meta: { title: '物流详情' },
},
],
},
{

4
sub-operation-service/src/views/brand/components/ApplyDetail.vue
View File

@ -1,7 +1,9 @@
<template>
<div class="container">
<el-breadcrumb separator="·">
<el-breadcrumb-item style="cursor: pointer" @click="backToList">使用申请</el-breadcrumb-item>
<el-breadcrumb-item style="cursor: pointer" @click="backToList"
><el-icon><ArrowLeftBold /></el-icon>使用申请</el-breadcrumb-item
>
<el-breadcrumb-item><a href="#">我要申请</a></el-breadcrumb-item>
</el-breadcrumb>

18
sub-operation-service/src/views/brand/components/ApplyList.vue
View File

@ -3,7 +3,7 @@
<el-col v-for="product in products" :key="product.id" :span="6">
<el-card class="box-card" :body-style="{ padding: '8px', height: '100%' }">
<div class="flex-column">
<img :src="product.imgPath" alt="商品图" class="img" />
<img :src="getAssetsFile(product.imgPath)" alt="商品图" class="img" />
<div class="flex-1 flex-around">
<p>{{ product.title }}</p>
<el-button type="success" class="button" @click="gotoApplication(product.id)">我要申请</el-button>
@ -30,12 +30,12 @@ const products = ref([]);
// });
const applyData = [
{ id: 1, name: '耿马绿色蔬菜', imageUrl: 'images/brand/11.png' },
{ id: 2, name: '耿马云斛石斛', imageUrl: 'images/brand/12.png' },
{ id: 3, name: '耿马蒸酶茶', imageUrl: 'images/brand/15.png' },
{ id: 4, name: '孟定蔬菜', imageUrl: 'images/brand/14.png' },
{ id: 5, name: '耿马芒抗金丝凤梨', imageUrl: 'images/brand/16.png' },
// { id: 6, name: '四川泡菜', imageUrl: 'images/brand/16.png' },
{ id: 1, title: '耿马绿色蔬菜', imgPath: 'images/brand/11.png' },
{ id: 2, title: '耿马云斛石斛', imgPath: 'images/brand/12.png' },
{ id: 3, title: '耿马蒸酶茶', imgPath: 'images/brand/15.png' },
{ id: 4, title: '孟定蔬菜', imgPath: 'images/brand/14.png' },
{ id: 5, title: '耿马芒抗金丝凤梨', imgPath: 'images/brand/16.png' },
// { id: 6, name: '四川泡菜', imgPath: 'images/brand/16.png' },
];
function gotoApplication(id) {
@ -60,8 +60,8 @@ function getApplyData() {
// 组件挂载时获取数据
onMounted(() => {
getApplyData();
// data();
// getApplyData();
data();
});
</script>

3
sub-operation-service/src/views/ecommerce/components/goodsItem.vue
View File

@ -4,7 +4,7 @@
<img :src="data.goodUrl ? data.goodUrl : ''" alt="" style="width: 100%" />
<!-- <el-image :src="encodeURIComponent(data.goodUrl) ? encodeURIComponent(data.goodUrl) : ''" fit="cover" @error="handleImageError" />-->
</div>
<div class="goods-name txt-ellipsis clamp2">{{ data.title }}</div>
<div class="goods-name txt-ellipsis clamp2">{{ data.goodName }}</div>
<div class="goods-do">
<div class="price txt-ellipsis clamp">{{ data.goodPrice }}/{{ data.unit }}</div>
<div class="do">
@ -57,6 +57,7 @@ const toDetail = (id, pid) => {
margin-top: 8px;
font-size: 16px;
color: $color-666;
text-align: left;
}
.goods-do {
display: inline-flex;

2
sub-operation-service/src/views/ecommerce/purchaser.vue
View File

@ -209,7 +209,7 @@ const handleUpdate = (data) => {
onMounted(() => {
console.info('onMounted');
getTree();
getTreeList();
// getTreeList();
});
</script>
<style lang="scss" scoped>

6
sub-operation-service/src/views/smartFarm/inspection/waterInspection.vue
View File

@ -1,7 +1,7 @@
<script setup>
import Devices from '@/views/smartFarm/components/devices.vue';
import Common from '@/views/smartFarm/components/common.vue';
import { ref } from 'vue';
import { ref, onMounted } from 'vue';
import { getAssetsFile } from '@/utils/index.js';
const currentDevice = ref(0);
@ -134,6 +134,10 @@ const chooseIcon = (type) => {
return '酸碱度.png';
}
};
onMounted(() => {
getAssetsFile('images/mockPic/waterReport.png');
});
// #endregion
</script>

334
sub-operation-service/src/views/warehouseLogistics/logistics/detail.vue
View File

@ -1,19 +1,341 @@
<template>
<page-layout :menus="state.menus"> 详情 </page-layout>
<section>
<common>
<template #main>
<el-card shadow="none" style="border-radius: 14px">
<div class="title" @click="toBack(-1)">
<el-icon><ArrowLeftBold /></el-icon>物流 · <span style="color: rgba(37, 191, 130, 1)">查看详情</span>
</div>
<div class="max-w-7xl mx-auto p-4">
<div class="flex items-center mb-8">
<div class="flex items-center mr-4">
<!-- 占位符图片，实际使用时替换为真实图片 -->
<img :src="state.data.imgPath" fit="cover" class="rounded-lg shadow image-box" />
</div>
<div class="flex-1">
<h3 class="text-xl font-bold mb-2">{{ state.data.name }}</h3>
<div class="text-gray-600 mb-2">
<span>{{ state.data.parentTitle }}</span>
<img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px; margin: 0 5px" />
<img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
</div>
<div class="storage-tags">
<el-tag
v-for="(tags, indexT) in state.data.tag"
:key="indexT"
effect="plain"
round
style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82"
>
{{ tags }}
</el-tag>
<!-- <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">保鲜储存</el-tag>-->
</div>
<p class="mt-2 text-gray-700">联系人：{{ state.data.contactName }}</p>
<p class="mt-2 text-gray-700">联系电话：{{ state.data.contactPhone }}</p>
<p class="mt-2 text-gray-700">
<el-icon><Location /></el-icon> {{ state.data.address }}
</p>
</div>
<div class="text-gray-500 text-sm flex items-center" style="text-align: right">
<div>
<span style="color: #999999">报价：</span>
<span class="ml-2 text-green-500 font-bold">
¥{{ state.data.price }}/{{
state.data.priceSpec === 1 ? 'kg' : state.data.priceSpec === 2 ? '件' : state.data.priceSpec === 3 ? 'm³' : ''
}}
</span>
</div>
<div>
<el-button size="large" type="primary" @click="goDei">
<el-icon class="el-icon--right"><ChatLineRound /></el-icon>
留下信息
</el-button>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
<div class="bg-white p-4 rounded-lg shadow-sm">
<p style="text-align: left" class="mb-4 text-gray-700" v-html="state.data.content ? state.data.content : '暂无介绍内容'"></p>
</div>
</div>
</div>
</el-card>
</template>
</common>
</section>
</template>
<script setup name="page-menu">
import { ref, reactive, watch } from 'vue';
<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
import Common from '../components/common.vue';
import { logisticDetail } from '@/apis/warehouseLogistics.js';
const route = useRoute();
const router = useRouter();
const state = reactive({
menus: warehouseLogisticsRoutes[0].children,
query: {},
data: {},
});
const toBack = (level) => {
router.go(level);
};
const queryDetail = () => {
logisticDetail(state.query.id).then((res) => {
if (res.code === 200) {
state.data = res.data;
for (let i in state.data) {
state.data[i].tag = state.data[i].tags.split(',');
}
}
});
};
onMounted(() => {
state.query.id = route.query.id;
queryDetail();
});
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.title {
text-align: left;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
/* 根据需要添加样式，这里仅提供基础样式 */
// 基础颜色配置
$primary-color: #25bf82; // 主色调
$text-dark: #25bf82; // 深色文字
$text-regular: #606266; // 常规文字
$border-color: #dcdfe6; // 边框颜色
// 弹窗整体样式
:deep(.custom-inquiry-dialog) {
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
.el-dialog__header {
padding: 20px;
border-bottom: 1px solid #f2f6fc;
.el-dialog__title {
font-size: 18px;
color: $text-dark;
font-weight: 600;
}
}
.el-dialog__body {
padding: 20px 28px;
}
.el-form-item__label {
color: $text-regular;
font-size: 14px;
padding-bottom: 6px;
}
}
.info-section {
padding: 0px 50px;
margin-bottom: 24px;
.info-item {
margin-bottom: 12px;
.label {
color: $text-regular;
margin-right: 8px;
font-size: 20px;
}
.value {
color: $text-dark;
font-weight: 500;
font-size: 20px;
}
}
}
// 输入框样式覆盖
:deep(.el-input) {
.el-input__inner {
height: 40px;
line-height: 40px;
border-radius: 4px;
&:focus {
border-color: $primary-color;
}
}
.el-input__suffix {
color: $text-regular;
right: 12px;
}
}
// 下拉菜单样式
:deep(.custom-select-dropdown) {
.el-select-dropdown__item {
color: $text-regular;
&.selected {
color: $primary-color;
}
}
}
// 按钮组样式
.dialog-footer {
text-align: right;
.el-button {
padding: 10px 24px;
border-radius: 4px;
font-size: 14px;
}
.cancel-btn {
color: $text-regular;
&:hover {
color: $primary-color;
border-color: $primary-color;
}
}
.submit-btn {
color: #fff;
background: $primary-color;
&:hover {
background: mix($primary-color, #fff, 85%);
}
}
}
.bac {
background: rgba(37, 191, 130, 0.1);
border: 1px solid rgba(37, 191, 130, 0.5);
border-radius: 8px;
padding: 2px 5px;
}
.image-box {
width: 300px;
height: 300px;
}
.text-gray-500 {
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start !important;
font-size: 20px !important;
color: #000000 !important;
padding-top: 30px;
}
.text-gray-600 {
font-size: 20px;
color: #000000 !important;
}
.flex-1 {
width: 40%;
height: 300px;
flex-direction: column;
display: flex;
align-items: flex-start;
justify-content: space-evenly;
}
.max-w-7xl {
max-width: 80rem;
background-color: #fff;
border-radius: 10px;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.p-4 {
padding: 1rem;
}
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.mb-4 {
margin-bottom: 1rem;
}
.mr-4 {
margin-right: 1rem;
}
.text-green-500 {
color: #25bf82;
}
.text-lg {
font-size: 1.125rem;
text-align: left;
}
.font-bold {
font-weight: 700;
}
.rounded-lg {
border-radius: 0.5rem;
background-color: #f5f5f5;
}
.shadow {
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.text-xl {
font-size: 24px;
}
.text-gray-600 {
color: #757575;
}
.text-gray-700 {
color: #000000;
font-size: 18px;
}
.text-sm {
font-size: 0.875rem;
}
.space-x-2 {
gap: 0.5rem;
}
.bg-green-500 {
background-color: #4caf50;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.mt-4 {
margin-top: 1rem;
}
</style>

452
sub-operation-service/src/views/warehouseLogistics/logistics/index.vue
View File

@ -1,18 +1,460 @@
<template>
<section>
<common>
<template #main> 物流 </template>
<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="tab cursor"
:class="{ active: currentTab === 0 }"
@click.stop="
currentTab = 0;
getLogisticList(currentTab, currentTab1);
"
>
粮食作物物流
</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);
"
>
水产品物流
</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
class="tab cursor"
:class="{ active: currentTab1 === 0 }"
@click.stop="
currentTab1 = 0;
getLogisticList(currentTab, currentTab1);
"
>
公路
</div>
<div
class="tab cursor"
:class="{ active: currentTab1 === 1 }"
@click.stop="
currentTab1 = 1;
getLogisticList(currentTab, currentTab1);
"
>
铁路
</div>
<div
class="tab cursor"
:class="{ active: currentTab1 === 2 }"
@click.stop="
currentTab1 = 2;
getLogisticList(currentTab, currentTab1);
"
>
水路
</div>
<div
class="tab cursor"
:class="{ active: currentTab1 === 3 }"
@click.stop="
currentTab1 = 3;
getLogisticList(currentTab, currentTab1);
"
>
航空
</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="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>
<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>
</div>
</el-card>
</el-col>
</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>
</template>
<script setup name="page-menu">
import { ref, reactive, watch } from 'vue';
<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
import Common from '../components/common.vue';
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics.js';
import { getWarehouseInfo, logisticList } from '@/apis/warehouseLogistics.js';
import { ElMessage } from 'element-plus';
const route = useRoute();
const router = useRouter();
const state = reactive({
menus: warehouseLogisticsRoutes[0].children,
query: {
current: {},
},
data: [
{
imageUrl: '/storage1.jpg',
title: '果蔬保鲜仓储',
description: '绿鲜蔬选果蔬仓储中心 ',
location: '临沧市-耿马县',
price: '3.0',
rank: '1',
},
{
imageUrl: '/storage2.jpg',
title: '果蔬保鲜仓储',
description: '绿鲜蔬选果蔬仓储中心',
location: '临沧市-耿马县',
price: '3.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: '',
},
],
});
const formData = reactive({});
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' },
});
};
const getLogisticList = (cropsType, logisticsType) => {
logisticList({ cropsType: cropsType + 1, logisticsType: logisticsType + 1 }).then((res) => {
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 goDetail = (id) => {
for (let i in state.data) {
if (state.data[i].id === id) {
state.query.current = state.data[i];
state.query.current.contactName = state.query.current.contactName.substring(0, 1);
}
}
formData.value = {
warehouseId: state.query.current.id,
type: 2,
demand: '',
surname: '',
sex: '',
phoneNum: '',
};
dialogFormVisible.value = true;
};
const priceConfirm = () => {
// 遍历 formData 的所有键
for (const key of Object.keys(formData.value)) {
if (formData.value[key] === '') {
ElMessage({
message: '请完整填写信息！',
type: 'warning',
});
return; // 这里 return 会直接退出整个函数
}
}
if (!/^1[3-9]\d{9}$/.test(formData.value.phoneNum)) {
ElMessage.warning('请填写正确的11位手机号码！');
return;
}
getWarehouseInfo(formData.value).then((res) => {
if (res.code === 200) {
ElMessage.success('询价成功,后续请关注手机信息，我们将第一时间联系您');
} else {
ElMessage.error(res.errmsg);
}
});
};
onMounted(() => {
getLogisticList(0, 0);
});
</script>
<script setup></script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.el-form-item--large {
--font-size: 20px;
}
.tabs {
display: flex;
flex-direction: column;
font-size: 18px;
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 {
text-align: left;
}
.storage-desc {
text-align: left;
margin-top: 5px;
}
.storage-tags {
text-align: left;
margin-top: 10px;
}
.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: #25bf82;
}
.contact-btn {
width: 152px;
height: 48px;
font-size: 20px;
border-radius: 8px;
background: #25bf82 !important;
:deep(.el-icon) {
margin-right: 10px;
}
}
.storage-price-left {
text-align: left;
}
.rank-badge {
position: absolute;
top: 0;
right: 20px;
width: 80px;
height: 80px;
}
</style>

160
sub-operation-service/src/views/warehouseLogistics/warehouse/index.vue
View File

@ -6,9 +6,27 @@
<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 === 0 }"
@click.stop="
currentTab = 0;
getWarehouseList('1');
"
>
普通仓库
</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 === 2 }"
@click.stop="
currentTab = 2;
getWarehouseList('3');
"
>
冷库
</div>
<!-- <div class="tab cursor" :class="{ active: currentTab === 3 }" @click.stop="currentTab = 3">气调仓库</div>-->
<div class="tab">&nbsp;</div>
</div>
@ -53,33 +71,76 @@
}}
</span>
</div>
<el-button type="success" class="contact-btn">
<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="item.rank" class="rank-badge">
<!-- {{ item.rank }}-->
<img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
<div v-if="index >= 0 && index < 3" class="rank-badge">
<img :src="getAssetsFile('images/warehouseLogistics/top' + (index + 1) + '.png')" alt="" style="width: 80px" />
</div>
</div>
</el-card>
</el-col>
<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>
<page-pagination :total="20" @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>
</template>
<script setup name="page-menu">
<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
import { warehouseList } from '@/apis/warehouseLogistics.js';
import { getWarehouseInfo, 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';
import { ElMessage } from 'element-plus';
const store = useGetCommonData();
const { data } = storeToRefs(store);
@ -89,7 +150,7 @@ const router = useRouter();
const state = reactive({
menus: warehouseLogisticsRoutes[0].children,
query: {
current: 1,
current: {},
},
data: [
{
@ -142,10 +203,31 @@ const state = reactive({
},
],
});
const formData = reactive({});
const paginations = reactive({
page: 1,
size: 2,
total: 0,
});
const dialogFormVisible = ref(false);
const formLabelWidth = ref('120px');
onMounted(() => {
warehouseList().then((res) => {
getWarehouseList('1');
});
const currentTab = ref(0);
const currentChange = (current) => {
paginations.page = current;
getWarehouseList(currentTab.value + 1);
};
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) {
@ -153,12 +235,6 @@ onMounted(() => {
}
}
});
});
const currentTab = ref(0);
const currentChange = (current) => {
state.query.current = current;
};
const toLink = (row) => {
@ -167,8 +243,53 @@ const toLink = (row) => {
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];
state.query.current.contactName = state.query.current.contactName.substring(0, 1);
}
}
formData.value = {
warehouseId: state.query.current.id,
type: 1,
demand: '',
surname: '',
sex: '',
phoneNum: '',
};
dialogFormVisible.value = true;
};
const priceConfirm = () => {
// 遍历 formData 的所有键
for (const key of Object.keys(formData.value)) {
if (formData.value[key] === '') {
ElMessage({
message: '请完整填写信息！',
type: 'warning',
});
return; // 这里 return 会直接退出整个函数
}
}
if (!/^1[3-9]\d{9}$/.test(formData.value.phoneNum)) {
ElMessage.warning('请填写正确的11位手机号码！');
return;
}
getWarehouseInfo(formData.value).then((res) => {
if (res.code === 200) {
ElMessage.success('询价成功,后续请关注手机信息，我们将第一时间联系您');
} else {
ElMessage.error(res.errmsg);
}
});
};
</script>
<style lang="scss" scoped>
.el-form-item--large {
--font-size: 20px;
}
.tabs {
height: 50px;
line-height: 50px;
@ -203,6 +324,9 @@ const toLink = (row) => {
align-items: center;
}
}
.storage-price-left {
text-align: left;
}
.storage-image {
margin-right: 16px;
width: 120px;
@ -266,7 +390,7 @@ const toLink = (row) => {
.price-amount {
font-size: 20px;
font-weight: 700;
color: $color-primary;
color: #25bf82;
}
.contact-btn {
width: 152px;