Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
adaf7c1110
2
.gitignore
vendored
2
.gitignore
vendored
@ -12,6 +12,8 @@ dist
|
||||
dist-ssr
|
||||
.history
|
||||
*.local
|
||||
*.zip
|
||||
*.rar
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
|
||||
@ -6,6 +6,7 @@ VITE_APP_SUB_OA = '//localhost:8090/sub-operation-admin/'
|
||||
VITE_APP_SUB_GAS = '//localhost:8090/sub-government-affairs-service/'
|
||||
VITE_APP_SUB_GAA = '//localhost:8090/sub-government-admin/'
|
||||
VITE_APP_SUB_GSS = '//localhost:8090/sub-government-screen-service/'
|
||||
VITE_APP_VIST_URL = 'http://localhost'
|
||||
# 接口
|
||||
VITE_APP_BASE_API = '/apis'
|
||||
VITE_APP_BASE_URL = ''
|
||||
|
||||
@ -12,3 +12,4 @@ VITE_APP_BASE_API = '/apis'
|
||||
VITE_APP_BASE_URL = ''
|
||||
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
VITE_APP_UPLOAD_URL = ''
|
||||
VITE_APP_VIST_URL = 'http://192.168.18.99'
|
||||
@ -44,7 +44,7 @@ export const rightApps = [
|
||||
{
|
||||
name: 'sub-government-admin',
|
||||
entry: VITE_APP_SUB_GAS,
|
||||
activeRule: `${VITE_APP_VIST_URL}:82/login`,
|
||||
activeRule: `${VITE_APP_VIST_URL}:81/login`,
|
||||
title: '管理后台',
|
||||
icon: 'images/platform/icon-admin.png',
|
||||
},
|
||||
|
||||
@ -36,7 +36,6 @@ import { getAssetsFile } from '@/utils';
|
||||
|
||||
const gotoPage = (row) => {
|
||||
// window.history.pushState({}, row.name, row.activeRule);
|
||||
console.log(row.activeRule);
|
||||
if (row.name == 'sub-app1') {
|
||||
window.location.href = 'https://www.pgyer.com/MXd3uUrO';
|
||||
} else if (row.name == 'sub-app2') {
|
||||
|
||||
2
new-digital-agriculture-screen/.gitignore
vendored
2
new-digital-agriculture-screen/.gitignore
vendored
@ -64,6 +64,8 @@ web_modules/
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
*.zip
|
||||
*.rar
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
@ -12,7 +12,7 @@ export function transaction(params = {}) {
|
||||
|
||||
//获取农资列表数据
|
||||
export function agriculturalList(params) {
|
||||
return request('goods/goodInfoManage/transactionGoodInfo', {
|
||||
return request('goods/goodInfoManage/transactionGoodInfo?type=1', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
// src/apis/brand.js
|
||||
import axios from '@/utils/axios';
|
||||
import request from '@/utils/axios.js';
|
||||
|
||||
export const getProducts = (params) => {
|
||||
return axios.get('/api/brand/products', {
|
||||
@ -19,3 +20,10 @@ export const getMonitorList = () => {
|
||||
apisType: 'mock',
|
||||
});
|
||||
};
|
||||
|
||||
export function brandList(params) {
|
||||
return request('brand/brandbase/page?status=1&auditStatus=2', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@ export function transaction(params = {}) {
|
||||
|
||||
//获取农资列表数据
|
||||
export function agriculturalList(params) {
|
||||
return request('goods/goodInfoManage/transactionGoodInfo', {
|
||||
return request('goods/goodInfoManage/transactionGoodInfo?type=2', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
|
||||
39
sub-operation-service/src/apis/warehouseLogistics.js
Normal file
39
sub-operation-service/src/apis/warehouseLogistics.js
Normal file
@ -0,0 +1,39 @@
|
||||
import request from '@/utils/axios';
|
||||
|
||||
// 获取仓储查询数据
|
||||
export function warehouseList(params = {}) {
|
||||
return request('logistics/logisticwarehouse/page?status=1', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
// 获取仓储查询数据
|
||||
export function logisticList(params = {}) {
|
||||
return request('logistics/logisticlogistic/page?', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取仓储详情
|
||||
export function warehouseDetail(id, params = {}) {
|
||||
return request(`logistics/logisticwarehouse/detail/${id}`, {
|
||||
method: 'GET',
|
||||
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,
|
||||
});
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 906 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 679 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/broccoliTop.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/broccoliTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 735 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/chiliBottom0.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/chiliBottom0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/chiliBottom1.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/chiliBottom1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 352 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/chiliBottom2.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/chiliBottom2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/chiliBottom3.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/chiliBottom3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/chiliTop.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/chiliTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 760 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/choyBottom0.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/choyBottom0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/choyBottom1.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/choyBottom1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 620 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/choyBottom2.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/choyBottom2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/choyBottom3.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/choyBottom3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/choyTop.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/choyTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 522 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 896 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/ganzheTop.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/ganzheTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/leafyBottom0.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/leafyBottom0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/leafyBottom1.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/leafyBottom1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 551 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/leafyBottom2.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/leafyBottom2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 506 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/leafyTop.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/leafyTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 918 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/shihuBottom0.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/shihuBottom0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 644 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/shihuBottom1.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/shihuBottom1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1016 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/shihuBottom2.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/shihuBottom2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 580 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/shihuBottom3.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/shihuBottom3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
BIN
sub-operation-service/src/assets/images/mockPic/shihuTop.png
Normal file
BIN
sub-operation-service/src/assets/images/mockPic/shihuTop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
@ -281,6 +281,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: '物流详情' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<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="getAssetsFile(product.imageUrl)" alt="商品图" class="img" />
|
||||
<img :src="getAssetsFile(product.imgPath)" alt="商品图" class="img" />
|
||||
<div class="flex-1 flex-around">
|
||||
<p>{{ product.name }}</p>
|
||||
<p>{{ product.title }}</p>
|
||||
<el-button type="success" class="button" @click="gotoApplication(product.id)">我要申请</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -16,9 +16,10 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { getApplyList } from '@/apis/brand';
|
||||
import { getApplyList, brandList } from '@/apis/brand';
|
||||
import { getAssetsFile } from '@/utils/index.js';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const router = useRouter();
|
||||
|
||||
const products = ref([]);
|
||||
@ -29,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) {
|
||||
@ -46,9 +47,20 @@ function data() {
|
||||
products.value = applyData;
|
||||
}
|
||||
|
||||
function getApplyData() {
|
||||
brandList().then((res) => {
|
||||
console.log(res);
|
||||
if (res.code === 200) {
|
||||
products.value = res.data.records;
|
||||
} else {
|
||||
ElMessage.error(res.errmsg);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
// getApplyList;
|
||||
// getApplyData();
|
||||
data();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -4,7 +4,9 @@
|
||||
<template #main>
|
||||
<div class="agricultural-detail-info">
|
||||
<div class="top-title">
|
||||
<div class="father-title" @click="toBack(-1)">农资交易</div>
|
||||
<div class="father-title" @click="toBack(-1)">
|
||||
<el-icon><ArrowLeftBold /></el-icon>商品信息
|
||||
</div>
|
||||
<div class="current-title">查看详情</div>
|
||||
</div>
|
||||
|
||||
@ -76,88 +78,89 @@
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
<div v-if="tabVal == 'detail'" class="content-detail">
|
||||
<!-- <el-descriptions class="detail-des" title=" " :column="2" size="Large" border>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">品牌</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>遇合堂</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">系列</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>农用百货</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">型号</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>禽畜药</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">产地</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>中国大陆</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">省份</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>云南省</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">城市</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>昆明市</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">储存条件</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>常温</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">包装方式</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>盒装</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">净含量</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>250ml、500ml、750ml、1000ml</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">使用方式</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>饲喂</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">厂名</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>遇合堂禽畜药品有限公司</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">厂址</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>云南省昆明市呈贡区彩云南路100号</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">保质期</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>7天</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- </el-descriptions>-->
|
||||
<!-- <el-image :src="getAssetsFile('images/ecommerce/' + 'goods.png')?.href ?? ''" fit="cover" />-->
|
||||
<div v-if="tabVal === 'detail'" class="content-detail">
|
||||
<div v-if="showDetail">
|
||||
<el-descriptions class="detail-des" title=" " :column="2" size="Large" border>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">品牌</div>
|
||||
</template>
|
||||
<span>童涵春堂</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">系列</div>
|
||||
</template>
|
||||
<span>农用百货</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">型号</div>
|
||||
</template>
|
||||
<span>种子种苗</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">产地</div>
|
||||
</template>
|
||||
<span>耿马县</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">省份</div>
|
||||
</template>
|
||||
<span>云南省</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">城市</div>
|
||||
</template>
|
||||
<span>临沧市</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">储存条件</div>
|
||||
</template>
|
||||
<span>15~25℃（避免高温或冷冻）</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">包装方式</div>
|
||||
</template>
|
||||
<span>盒装</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">净含量</div>
|
||||
</template>
|
||||
<span>50g、100g、250g、500g</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<div class="cell-item">使用方式</div>
|
||||
</template>
|
||||
<span>种植</span>
|
||||
</el-descriptions-item>
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">厂名</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>遇合堂禽畜药品有限公司</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">厂址</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>云南省昆明市呈贡区彩云南路100号</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
<!-- <el-descriptions-item>-->
|
||||
<!-- <template #label>-->
|
||||
<!-- <div class="cell-item">保质期</div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <span>7天</span>-->
|
||||
<!-- </el-descriptions-item>-->
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; flex-wrap: wrap">
|
||||
<el-image
|
||||
v-for="(item, index) in mockData[currentIndex].bigImages"
|
||||
@ -212,7 +215,7 @@ import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const goodId = route.params.id; // 获取参数
|
||||
const goodId = route.query.id; // 获取参数
|
||||
const pId = route.query.pid;
|
||||
|
||||
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.png']);
|
||||
@ -223,6 +226,7 @@ const tabList = reactive([
|
||||
]);
|
||||
|
||||
const currentIndex = ref(0);
|
||||
const showDetail = ref(true);
|
||||
|
||||
const mockData = [
|
||||
{
|
||||
@ -305,6 +309,66 @@ const mockData = [
|
||||
images: ['images/mockPic/nyTop.png'],
|
||||
bigImages: ['nyBottom1.png', 'nyBottom2.png', 'nyBottom3.png', 'nyBottom4.png'],
|
||||
},
|
||||
{
|
||||
titleName: '铁皮石斛种子',
|
||||
sold: 13,
|
||||
price: '80/g',
|
||||
soldAddress: '耿马县',
|
||||
right: '七天保价',
|
||||
weight: ['1g', '2g', '5g', '10g'],
|
||||
images: ['images/mockPic/shihuTop.png'],
|
||||
bigImages: ['shihuBottom0.png', 'shihuBottom1.png', 'shihuBottom2.png', 'shihuBottom3.png'],
|
||||
},
|
||||
{
|
||||
titleName: '黑皮甘蔗苗',
|
||||
sold: 1400,
|
||||
price: '0.7/株',
|
||||
soldAddress: '耿马县',
|
||||
right: '七天保价',
|
||||
weight: ['10株', '50株', '200株', '500株'],
|
||||
images: ['images/mockPic/ganzheTop.png'],
|
||||
bigImages: ['ganzheBottom0.png', 'ganzheBottom1.png', 'ganzheBottom2.png', 'ganzheBottom3.png'],
|
||||
},
|
||||
{
|
||||
titleName: '美人椒种子 -辣椒种子',
|
||||
sold: 548,
|
||||
price: '43/斤',
|
||||
soldAddress: '耿马县',
|
||||
right: '七天保价',
|
||||
weight: ['1斤', '2斤'],
|
||||
images: ['images/mockPic/chiliTop.png'],
|
||||
bigImages: ['chiliBottom0.png', 'chiliBottom1.png', 'chiliBottom2.png', 'chiliBottom3.png'],
|
||||
},
|
||||
{
|
||||
titleName: '四季青种子',
|
||||
sold: 548,
|
||||
price: '19.5/包',
|
||||
soldAddress: '耿马县',
|
||||
right: '七天保价',
|
||||
weight: ['1包（500-2000粒）', '2包', '4包'],
|
||||
images: ['images/mockPic/leafyTop.png'],
|
||||
bigImages: ['leafyBottom0.png', 'leafyBottom1.png', 'leafyBottom2.png'],
|
||||
},
|
||||
{
|
||||
titleName: '青花菜种子',
|
||||
sold: 548,
|
||||
price: '10/包',
|
||||
soldAddress: '耿马县',
|
||||
right: '七天保价',
|
||||
weight: ['1包（300-800粒）', '2包', '4包'],
|
||||
images: ['images/mockPic/broccoliTop.png'],
|
||||
bigImages: ['broccoliBottom2.png', 'broccoliBottom1.png', 'broccoliBottom0.png'],
|
||||
},
|
||||
{
|
||||
titleName: '黑叶小白菜种子',
|
||||
sold: 82,
|
||||
price: '60/公斤',
|
||||
soldAddress: '耿马县',
|
||||
right: '七天保价',
|
||||
weight: ['1公斤', '2公斤', '5公斤'],
|
||||
images: ['images/mockPic/choyTop.png'],
|
||||
bigImages: ['choyBottom0.png', 'choyBottom1.png', 'choyBottom2.png', 'choyBottom3.png'],
|
||||
},
|
||||
];
|
||||
|
||||
let tabVal = ref('detail');
|
||||
@ -313,6 +377,7 @@ let saveInfo = reactive({
|
||||
num: 0,
|
||||
});
|
||||
onMounted(() => {
|
||||
showDetail.value = false;
|
||||
const num = Number(pId);
|
||||
if (num === 55) {
|
||||
// 1. 获取前四个元素的索引（0, 1, 2, 3）
|
||||
@ -336,6 +401,22 @@ onMounted(() => {
|
||||
// 3. 选择第一个
|
||||
currentIndex.value = shuffledIndices.slice(0, 1)[0];
|
||||
}
|
||||
if (Number(goodId) === 2140012566 || Number(goodId) === 2140012569) {
|
||||
currentIndex.value = 8;
|
||||
showDetail.value = true;
|
||||
} else if (Number(goodId) === 2140012546 || Number(goodId) === 2140012547) {
|
||||
currentIndex.value = 9;
|
||||
} else if (Number(goodId) === 2140012562) {
|
||||
currentIndex.value = 2;
|
||||
} else if (Number(goodId) === 2140012563) {
|
||||
currentIndex.value = 10;
|
||||
} else if (Number(goodId) === 2140012586) {
|
||||
currentIndex.value = 11;
|
||||
} else if (Number(goodId) === 2140012587) {
|
||||
currentIndex.value = 12;
|
||||
} else if (Number(goodId) === 2140012588) {
|
||||
currentIndex.value = 13;
|
||||
}
|
||||
});
|
||||
|
||||
const toCodeDetail = () => {
|
||||
|
||||
@ -115,7 +115,7 @@ const selectItem = (index, key, item) => {
|
||||
if (key && item.id) {
|
||||
currentLevel.value = index || 0;
|
||||
select[key] = { id: item.id, parentId: item.parentId ? item.parentId : null };
|
||||
emit('select', select);
|
||||
emit('select', { id: item.id });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
<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 }}</div>
|
||||
<div class="price txt-ellipsis clamp">{{ data.goodPrice }}/{{ data.unit }}</div>
|
||||
<div class="do">
|
||||
<div class="iconfont icon-cart"></div>
|
||||
</div>
|
||||
@ -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;
|
||||
|
||||
@ -119,19 +119,20 @@ let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce
|
||||
|
||||
const selected = (data) => {
|
||||
// 获取所有值并转为数组
|
||||
const val = Object.values(data);
|
||||
// const val = Object.values(data);
|
||||
console.log(data);
|
||||
if (val.length === 1) {
|
||||
params.parentId = val[0].id;
|
||||
} else {
|
||||
if (val[0].id === '') {
|
||||
params.childrenId = '';
|
||||
params.parentId = null;
|
||||
} else {
|
||||
params.childrenId = val[val.length - 1].id;
|
||||
params.parentId = val[val.length - 1].parentId;
|
||||
}
|
||||
}
|
||||
params.categoryId = data.id;
|
||||
// if (val.length === 1) {
|
||||
// params.parentId = val[0].id;
|
||||
// } else {
|
||||
// if (val[0].id === '') {
|
||||
// params.childrenId = null;
|
||||
// params.parentId = null;
|
||||
// } else {
|
||||
// params.childrenId = val[val.length - 1].id;
|
||||
// params.parentId = val[val.length - 1].parentId;
|
||||
// }
|
||||
// }
|
||||
getList();
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -209,7 +209,7 @@ const handleUpdate = (data) => {
|
||||
onMounted(() => {
|
||||
console.info('onMounted');
|
||||
getTree();
|
||||
getTreeList();
|
||||
// getTreeList();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -216,11 +216,35 @@ const handleCurrentChange = (val) => {
|
||||
pagination.current = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
const sortTreeByDescendingId = (nodes) => {
|
||||
if (!nodes || !nodes.length) return [];
|
||||
|
||||
// 对当前层级节点排序（BigInt 安全比较）
|
||||
const sortedNodes = [...nodes].sort((a, b) => {
|
||||
const idA = BigInt(a.id);
|
||||
const idB = BigInt(b.id);
|
||||
return idA > idB ? -1 : idA < idB ? 1 : 0; // 降序
|
||||
});
|
||||
|
||||
// 递归排序每个节点的 children
|
||||
sortedNodes.forEach((node) => {
|
||||
if (node.children && node.children.length) {
|
||||
node.children = sortTreeByDescendingId(node.children);
|
||||
}
|
||||
});
|
||||
|
||||
return sortedNodes;
|
||||
};
|
||||
|
||||
const getTree = () => {
|
||||
transaction().then((res) => {
|
||||
if (res.code === 200) {
|
||||
let a = res.data.sort((a, b) => Number(b.id) - Number(a.id));
|
||||
treeList.splice(0, treeList.length, ...a);
|
||||
// 2. 使用排序函数
|
||||
const sortedData = sortTreeByDescendingId(res.data);
|
||||
treeList.splice(0, treeList.length, ...sortedData);
|
||||
// let a = res.data.sort((a, b) => Number(b.id) - Number(a.id));
|
||||
// treeList.splice(0, treeList.length, ...a);
|
||||
// console.log('treeList', treeList);
|
||||
}
|
||||
});
|
||||
@ -228,19 +252,20 @@ const getTree = () => {
|
||||
|
||||
const selected = (data) => {
|
||||
console.log(data);
|
||||
params.categoryId = data.id;
|
||||
// 获取所有值并转为数组
|
||||
const val = Object.values(data);
|
||||
if (val.length === 1) {
|
||||
params.parentId = Number(val[0].id);
|
||||
} else {
|
||||
if (val[0].id === '') {
|
||||
params.childrenId = '';
|
||||
params.parentId = null;
|
||||
} else {
|
||||
params.childrenId = Number(val[val.length - 1].id);
|
||||
params.parentId = Number(val[val.length - 1].parentId);
|
||||
}
|
||||
}
|
||||
// const val = Object.values(data);
|
||||
// if (val.length === 1) {
|
||||
// params.parentId = Number(val[0].id);
|
||||
// } else {
|
||||
// if (val[0].id === '') {
|
||||
// params.childrenId = '';
|
||||
// params.parentId = null;
|
||||
// } else {
|
||||
// params.childrenId = Number(val[val.length - 1].id);
|
||||
// params.parentId = Number(val[val.length - 1].parentId);
|
||||
// }
|
||||
// }
|
||||
getList();
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -281,13 +281,17 @@ const showMaxValueTooltip = () => {
|
||||
|
||||
// 组件挂载时初始化图表
|
||||
onMounted(() => {
|
||||
const fertilizer = getAssetsFile('images/mockPic/fertilizerReport.png');
|
||||
const seed = getAssetsFile('images/mockPic/seedReport.png');
|
||||
const Irrigation = getAssetsFile('images/mockPic/irrigationReport.png');
|
||||
console.log(fertilizer);
|
||||
initChart();
|
||||
if (props.title.indexOf('灌溉') !== -1) {
|
||||
Pics.value = [getAssetsFile('images/mockPic/智能灌溉.png')];
|
||||
Pics.value = [Irrigation];
|
||||
} else if (props.title.indexOf('浸种') !== -1) {
|
||||
Pics.value = [getAssetsFile('images/mockPic/智能浸种.png')];
|
||||
Pics.value = [seed];
|
||||
} else if (props.title.indexOf('配肥') !== -1) {
|
||||
Pics.value = [getAssetsFile('images/mockPic/智能配肥.png')];
|
||||
Pics.value = [fertilizer];
|
||||
}
|
||||
});
|
||||
// 组件卸载前销毁图表
|
||||
|
||||
Binary file not shown.
@ -23,6 +23,13 @@ const props = defineProps({
|
||||
return items;
|
||||
},
|
||||
},
|
||||
num: {
|
||||
type: Number,
|
||||
default: () => 1,
|
||||
validator: (items) => {
|
||||
return items;
|
||||
},
|
||||
},
|
||||
devices: {
|
||||
type: Array,
|
||||
required: true,
|
||||
@ -99,7 +106,8 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div class="video-wrapper">
|
||||
<video ref="videoPlayer" src="../components/jiankong.mp4" controls autoplay muted></video>
|
||||
<video v-if="num === 1" ref="videoPlayer" src="../components/jiankong.mp4" controls loop autoplay muted></video>
|
||||
<video v-else ref="videoPlayer" src="../components/jiankong1.mp4" controls loop autoplay muted></video>
|
||||
<div v-if="loading" class="status-message">正在加载直播流...</div>
|
||||
<div v-if="error" class="status-message error">{{ error }}</div>
|
||||
</div>
|
||||
|
||||
@ -158,7 +158,7 @@ const chooseIcon = (type) => {
|
||||
</div>
|
||||
<div style="margin-top: 10px; display: flex; justify-content: space-between">
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 10px; width: 100%">
|
||||
<stream :title="'虫害监测实时监控'" :devices="devices" style="width: 60%; height: fit-content"></stream>
|
||||
<stream :title="'虫害监测实时监控'" :num="2" :devices="devices" style="width: 60%; height: fit-content"></stream>
|
||||
<div style="width: 38%">
|
||||
<el-card style="border-radius: 16px; padding: 10px">
|
||||
<div style="font-size: 16px; font-weight: bold; text-align: left; color: #000">虫害数据</div>
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
<div style="margin-top: 20px">
|
||||
<el-image
|
||||
style="width: 100%"
|
||||
:src="getAssetsFile('images/mockPic/智能配肥.png')"
|
||||
:src="getAssetsFile('images/mockPic/fertilizerReport.png')"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="7"
|
||||
:min-scale="0.2"
|
||||
@ -106,11 +106,10 @@ const devices = ref([
|
||||
id: 9,
|
||||
},
|
||||
]);
|
||||
const srcList = ref([getAssetsFile('images/mockPic/水质检测.png')]);
|
||||
const srcList = ref([getAssetsFile('images/mockPic/fertilizerReport.png')]);
|
||||
// #endregion
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<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);
|
||||
const imgUrl = ref('/images/smartFarm/banner.png');
|
||||
const srcList = ref([getAssetsFile('images/mockPic/水质检测.png')]);
|
||||
const srcList = ref([getAssetsFile('images/mockPic/waterReport.png')]);
|
||||
const devices = ref([
|
||||
{
|
||||
name: 'A-001',
|
||||
@ -134,6 +134,10 @@ const chooseIcon = (type) => {
|
||||
return '酸碱度.png';
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getAssetsFile('images/mockPic/waterReport.png');
|
||||
});
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
@ -182,7 +186,7 @@ const chooseIcon = (type) => {
|
||||
<div style="margin-top: 20px">
|
||||
<el-image
|
||||
style="width: 100%"
|
||||
:src="getAssetsFile('images/mockPic/水质检测.png')"
|
||||
:src="getAssetsFile('images/mockPic/waterReport.png')"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="7"
|
||||
:min-scale="0.2"
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -3,17 +3,75 @@
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="title">仓储 · <span style="color: rgba(37, 191, 130, 1)">查看详情</span></div>
|
||||
<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 ? 'm³' : state.data.priceSpec === 2 ? '间' : state.data.priceSpec === 3 ? '㎡' : ''
|
||||
}}/{{ state.data.timeSpec === 1 ? '天' : state.data.timeSpec === 2 ? '月' : state.data.timeSpec === 3 ? '年' : '' }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="large" type="primary" @click="goDei">
|
||||
<el-icon class="el-icon--right"><ChatLineRound /></el-icon>
|
||||
留下信息
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm">
|
||||
<p style="text-align: left" class="mb-4 text-gray-700" v-html="state.data.content ? state.data.content : '暂无介绍内容'"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</common>
|
||||
</section>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { ref, reactive, watch, onMounted } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import Common from '../components/common.vue';
|
||||
import { warehouseDetail } from '@/apis/warehouseLogistics.js';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@ -22,5 +80,262 @@ const state = reactive({
|
||||
query: {},
|
||||
data: {},
|
||||
});
|
||||
|
||||
const toBack = (level) => {
|
||||
router.go(level);
|
||||
};
|
||||
|
||||
const queryDetail = () => {
|
||||
warehouseDetail(state.query.id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
state.data = res.data;
|
||||
for (let i in state.data) {
|
||||
state.data[i].tag = state.data[i].tags.split(',');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
state.query.id = route.query.id;
|
||||
queryDetail();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></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>
|
||||
|
||||
@ -5,11 +5,29 @@
|
||||
<template #main>
|
||||
<el-card shadow="none" style="border-radius: 14px">
|
||||
<div class="tabs">
|
||||
<div class="tab" style="color: rgba(153, 153, 153, 1)">仓储分类({{ data.title }})</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" style="color: rgba(153, 153, 153, 1)">仓储分类</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;
|
||||
getWarehouseList('3');
|
||||
"
|
||||
>
|
||||
冷库
|
||||
</div>
|
||||
<!-- <div class="tab cursor" :class="{ active: currentTab === 3 }" @click.stop="currentTab = 3">气调仓库</div>-->
|
||||
<div class="tab"> </div>
|
||||
</div>
|
||||
</el-card>
|
||||
@ -18,55 +36,111 @@
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<el-image :src="item.imageUrl" fit="cover" class="storage-image" />
|
||||
<el-image :src="item.imgPath" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.title }}</h3>
|
||||
<h3 class="storage-title">{{ item.name }}</h3>
|
||||
<div class="storage-desc">
|
||||
<span>{{ item.description }}</span>
|
||||
<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 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
|
||||
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.location }}
|
||||
{{ 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 }}/间/月</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">
|
||||
<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">
|
||||
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 { getWarehouseInfo, warehouseList } from '@/apis/warehouseLogistics.js';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
import Common from '../components/common.vue';
|
||||
import { useGetCommonData } from '../../../store/modules/common';
|
||||
import { useGetCommonData } from '@/store/modules/common.js';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const store = useGetCommonData();
|
||||
const { data } = storeToRefs(store);
|
||||
|
||||
@ -76,7 +150,7 @@ const router = useRouter();
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {
|
||||
current: 1,
|
||||
current: {},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
@ -129,28 +203,103 @@ const state = reactive({
|
||||
},
|
||||
],
|
||||
});
|
||||
const formData = reactive({});
|
||||
const paginations = reactive({
|
||||
page: 1,
|
||||
size: 2,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const dialogFormVisible = ref(false);
|
||||
const formLabelWidth = ref('120px');
|
||||
|
||||
onMounted(() => {
|
||||
getWarehouseList('1');
|
||||
});
|
||||
|
||||
const currentTab = ref(0);
|
||||
|
||||
const currentChange = (current) => {
|
||||
state.query.current = 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) {
|
||||
state.data[i].tag = state.data[i].tags.split(',');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const toLink = (row) => {
|
||||
router.push({
|
||||
path: '/sub-operation-service/warehouse-detail',
|
||||
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];
|
||||
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;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
padding: 0 20px;
|
||||
.tab {
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
@ -175,6 +324,9 @@ const toLink = (row) => {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.storage-price-left {
|
||||
text-align: left;
|
||||
}
|
||||
.storage-image {
|
||||
margin-right: 16px;
|
||||
width: 120px;
|
||||
@ -238,7 +390,7 @@ const toLink = (row) => {
|
||||
.price-amount {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: $color-primary;
|
||||
color: #25bf82;
|
||||
}
|
||||
.contact-btn {
|
||||
width: 152px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user