This commit is contained in:
13713575202 2025-06-12 15:47:19 +08:00
commit 836ddc9f0e
14 changed files with 622 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@ -98,9 +98,8 @@ const meuns = ref([
},
{
label: '涉农金融',
path: '/sub-operation-service/ruralFinance',
path: '/sub-operation-service/finance',
},
{
label: '分拣包装',
path: '/sub-operation-service/packaging',
@ -146,7 +145,7 @@ const toHome = () => {
const toUserCenter = () => {
console.info('toUserCenter', router);
router.push('/sub-operation-service/userCenter');
router.push('/sub-operation-service/userCenter?from=userCenter');
};
const toCart = () => {

View File

@ -161,6 +161,41 @@ export const constantRoutes = [
},
],
},
{
path: '/sub-operation-service/finance',
component: Layout,
name: 'RuralFinance',
redirect: '/sub-operation-service/finance/integratedSector',
meta: { title: '涉农金融' },
children: [
{
path: 'integratedSector',
component: Views,
name: 'integratedSectors',
meta: { title: '综合板块' },
children: [
{
path: '',
component: () => import('@/views/ruralFinance/integratedSector/index.vue'),
name: 'integratedSectorMain',
meta: { title: '综合板块', hideInBread: true },
},
{
path: 'detail',
component: () => import('@/views/ruralFinance/integratedSector/detail.vue'),
name: 'integratedSectorDetail',
meta: { title: '查看详情', hideInBread: true },
},
{
path: 'loan',
component: () => import('@/views/ruralFinance/integratedSector/loan.vue'),
name: 'integratedSectorLoan',
meta: { title: '我要贷款', hideInBread: true },
},
],
},
],
},
{
path: '/sub-operation-service/farmService',
component: Layout,

View File

@ -44,7 +44,7 @@ const chartsData = reactive({
containLabel: true,
},
legend: {
data: ['款', '投保'],
data: ['款', '投保'],
left: '35%', // 10%
top: '0', //
itemWidth: 20, //
@ -97,7 +97,7 @@ const chartsData = reactive({
],
series: [
{
name: '款',
name: '款',
type: 'bar',
barWidth: '10px',
itemStyle: {

View File

@ -155,7 +155,7 @@
</el-col>
<el-col :span="12" class="des-item">
<span class="label">法人</span>
<span class="val">张三</span>
<span class="val">顾翔</span>
</el-col>
<el-col :span="24" class="des-item">
<span class="label">公司地址</span>

View File

@ -0,0 +1,124 @@
<template>
<div class="smartFarm-common-warp">
<div class="smartFarm-common-content">
<div class="left-menu">
<slot v-if="$slots.left" name="left"></slot>
<template v-else>
<left-menu :menus="menus"></left-menu>
</template>
</div>
<div class="common-content">
<bread-comp></bread-comp>
<slot v-if="$slots.main" name="main"></slot>
<template v-else></template>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import leftMenu from './leftMenu.vue';
import BreadComp from '@/components/breadComp.vue';
const props = defineProps({
currentName: { type: String, default: 'agricultural' },
});
const menus = reactive([
{
name: 'supplier',
title: '农业环境监测',
icon: 'menu1.png',
path: '/sub-operation-service/smartFarm/main',
isOpen: true,
children: [
{
name: 'supplier',
title: '田间监测',
path: '/sub-operation-service/smartFarm/inspection',
},
{
name: 'supplier',
title: '水质监测',
path: '/sub-operation-service/ecommerce-supplier',
},
{
name: 'supplier',
title: '病虫害监测',
path: '/sub-operation-service/ecommerce-supplier',
},
],
},
{
name: 'control',
title: '生产管理控制',
icon: 'menu3.png',
path: '',
isOpen: false,
children: [
{
name: 'control',
title: '一体育苗',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/manageControl/growSeedlings',
},
{
name: 'control',
title: '病虫害预防',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/manageControl/pestPrevention',
},
{
name: 'control',
title: '喷灌滴灌',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/manageControl/irrigationSystem',
},
{
name: 'control',
title: '排集水控制',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/manageControl/drainageControl',
},
{
name: 'control',
title: '开窗卷帘',
icon: 'menu3.png',
path: '/sub-operation-service/smartFarm/manageControl/openCurtain',
},
],
},
]);
</script>
<style lang="scss" scoped>
.smartFarm-common-warp {
width: 100%;
height: calc(100vh - 230px);
text-align: center;
.smartFarm-common-content {
width: $width-main;
margin: auto;
height: 100%;
display: inline-flex;
justify-content: space-between;
margin: auto;
width: $width-main;
height: 100%;
.left-menu,
.common-content {
overflow-y: auto;
padding: 8px;
height: calc(100% - 16px);
border-radius: 8px;
}
.left-menu {
width: 240px;
background: $color-fff;
}
.common-content {
margin-left: 16px;
width: calc(100% - 240px);
}
}
}
</style>

View File

@ -0,0 +1,172 @@
<template>
<div class="smartFarm-left-menu-warp">
<div class="left-menu">
<div
v-for="(n, index) in leftMenu"
:key="index"
class="left-menu-item"
style="position: relative"
@click.stop="
toLink(index);
openList(index);
"
>
<div style="display: flex; justify-content: flex-start; align-items: center">
<div class="item-img">
<img :src="getAssetsFile('images/smartFarm/' + n.icon)?.href ?? ''" alt="" />
</div>
<span :class="n.isOpen ? 'active' : ''" class="item-title">{{ n.title }}</span>
<img v-if="n.children && n.isOpen" alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" />
<img
v-if="n.children && !n.isOpen"
alt=""
:src="getAssetsFile('images/smartFarm/down_1@2x.png')"
class="isOpen fz"
@click.stop="openList(index)"
/>
</div>
<div v-if="n.children && n.isOpen" class="item-children">
<div v-for="(item, indexC) in n.children" :key="indexC">
<ul style="overflow: visible; padding-left: 40px; text-align: left; list-style-type: disc !important">
<li :class="item.name === currentCIndex ? 'active' : ''" @click.stop="toLinkSub(index, item.name)">
<div class="dot"></div>
{{ item.title }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const leftMenu = reactive([
{
name: 'inspection',
title: '综合板块',
icon: 'menu1.png',
path: '/sub-operation-service/finance/integratedSector',
},
]);
let currentIndex = ref(0);
let currentCIndex = ref('');
const toLink = (index) => {
currentIndex.value = index;
window.sessionStorage.setItem('currentOpen', index);
if (index === 0) {
window.sessionStorage.setItem('currentChild', 'main');
}
currentCIndex.value = '';
let path = index !== undefined ? leftMenu[index].path : null;
if (path) {
router.push(path);
}
};
const toLinkSub = (index, name) => {
console.info('index', index);
console.info('currentChild', name);
currentCIndex.value = name;
window.sessionStorage.setItem('currentChild', name);
let path;
for (let i in leftMenu[index].children) {
if (leftMenu[index].children[i].name === name) {
path = leftMenu[index].children[i].path;
}
}
if (path) {
console.info('path', path);
router.push(path);
}
};
const openList = (index) => {
currentIndex.value = index;
leftMenu[index].isOpen = !leftMenu[index].isOpen;
};
onMounted(() => {
const currentMenu = window.sessionStorage.getItem('currentOpen');
if (currentMenu) {
for (let i in leftMenu) {
leftMenu[i].isOpen = i === currentMenu;
}
}
const currentChild = window.sessionStorage.getItem('currentChild');
if (currentChild && currentChild === 'main') {
currentIndex.value = 0;
currentCIndex.value = '';
} else if (currentChild) {
currentCIndex.value = currentChild;
}
});
</script>
<style lang="scss" scoped>
.fz {
transform: rotate(180deg);
}
.isOpen {
position: absolute;
right: -24px;
width: 20px;
height: 20px;
}
.active {
color: $color-main;
}
.smartFarm-left-menu-warp {
padding: 0 30px 0 10px;
width: 100%;
height: 100%;
.left-menu {
.left-menu-item {
padding: 16px 0;
width: 100%;
cursor: pointer;
&.active {
color: $color-main;
}
.item-img,
.item-title {
vertical-align: middle;
}
.item-img {
display: inline-block;
width: 32px;
height: 32px;
}
.item-title {
padding-left: 8px;
font-size: 18px;
font-weight: 400;
}
.item-children {
margin-top: 8px;
font-size: 16px;
text-align: center;
transition: transform 0.3s ease;
.dot {
display: inline-block;
margin-right: 15px;
width: 4px;
height: 4px;
border-radius: 90px;
background-color: black;
vertical-align: middle;
}
li {
margin: 5px auto;
height: 35px;
line-height: 35px;
}
}
}
}
}
</style>

View File

@ -0,0 +1,19 @@
<template>
<div></div>
</template>
<script setup>
import { ref } from 'vue';
/* --------------- data --------------- */
// #region
// #endregion
/* --------------- methods --------------- */
// #region
// #endregion
</script>
<style lang="scss" scoped></style>

View File

@ -0,0 +1,248 @@
<template>
<div>
<common>
<template #main>
<el-card style="border-radius: 16px">
<div class="choose">
<div class="searchType">贷款金额</div>
<div :class="{ active: chooseMoney === 0 }" class="chooseAll" @click="changeChoose('money', 0)">不限</div>
<div :class="{ active: chooseMoney === 1 }" class="chooseItem" @click="changeChoose('money', 1)">50万元及以下</div>
<div :class="{ active: chooseMoney === 2 }" class="chooseItem" @click="changeChoose('money', 2)">50~100万元</div>
<div :class="{ active: chooseMoney === 3 }" class="chooseItem" @click="changeChoose('money', 3)">100~300万元</div>
<div :class="{ active: chooseMoney === 4 }" class="chooseItem" @click="changeChoose('money', 4)">300~500万元</div>
<div :class="{ active: chooseMoney === 5 }" class="chooseItem" @click="changeChoose('money', 5)">500万元及以下</div>
</div>
<div class="choose">
<div class="searchType">贷款期限</div>
<div :class="{ active: chooseDate === 0 }" class="chooseAll" @click="changeChoose('date', 0)">不限</div>
<div :class="{ active: chooseDate === 1 }" class="chooseItem" @click="changeChoose('date', 1)">6个月及以下</div>
<div :class="{ active: chooseDate === 2 }" class="chooseItem" @click="changeChoose('date', 2)">6~12个月</div>
<div :class="{ active: chooseDate === 3 }" class="chooseItem" @click="changeChoose('date', 3)">12~24个月</div>
<div :class="{ active: chooseDate === 4 }" class="chooseItem" @click="changeChoose('date', 4)">24~36个月</div>
<div :class="{ active: chooseDate === 5 }" class="chooseItem" @click="changeChoose('date', 5)">36个月及以下</div>
</div>
<div class="choose">
<div class="searchType">投保方式</div>
<div :class="{ active: chooseWay === 0 }" class="chooseAll" @click="changeChoose('way', 0)">不限</div>
<div :class="{ active: chooseWay === 1 }" class="chooseItem" @click="changeChoose('way', 1)">信用</div>
<div :class="{ active: chooseWay === 2 }" class="chooseItem" @click="changeChoose('way', 2)">抵押</div>
<div :class="{ active: chooseWay === 3 }" class="chooseItem" @click="changeChoose('way', 3)">质保</div>
<div :class="{ active: chooseWay === 4 }" class="chooseItem" @click="changeChoose('way', 4)">保证</div>
<div :class="{ active: chooseWay === 5 }" class="chooseItem" @click="changeChoose('way', 5)">其他</div>
</div>
<div class="choose">
<div class="searchType">消费主体</div>
<div :class="{ active: chooseUse === 0 }" class="chooseAll" @click="changeChoose('use', 0)">不限</div>
<div :class="{ active: chooseUse === 1 }" class="chooseItem" @click="changeChoose('use', 1)">种植</div>
<div :class="{ active: chooseUse === 2 }" class="chooseItem" @click="changeChoose('use', 2)">养殖</div>
<div :class="{ active: chooseUse === 3 }" class="chooseItem" @click="changeChoose('use', 3)">加工</div>
<div :class="{ active: chooseUse === 4 }" class="chooseItem" @click="changeChoose('use', 4)">仓储</div>
<div :class="{ active: chooseUse === 5 }" class="chooseItem" @click="changeChoose('use', 5)">流通</div>
</div>
<div class="choose">
<div class="searchType">产品类型</div>
<div :class="{ active: chooseType === 0 }" class="chooseAll" @click="changeChoose('type', 0)">不限</div>
<div :class="{ active: chooseType === 1 }" class="chooseItem" @click="changeChoose('type', 1)">线上审批</div>
<div :class="{ active: chooseType === 2 }" class="chooseItem" @click="changeChoose('type', 2)">线下审批</div>
<div :class="{ active: chooseType === 3 }" class="chooseItem" @click="changeChoose('type', 3)">秒批秒贷</div>
</div>
<div style="margin-top: 20px; display: flex; justify-content: space-between; font-size: 18px">
<div>
共匹配到 <span style="color: #25bf82">{{ pagination.total }}</span> 个结果
</div>
<div class="sort" @click="sortFunction(0)">线下审批<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
<div class="sort" @click="sortFunction(1)">贷款额度<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
<div class="sort" @click="sortFunction(2)">贷款利率<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
<div class="sort" @click="sortFunction(3)">贷款期限<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
</div>
</el-card>
<el-card v-for="(item, index) in dataList" :key="index" :body-style="{ padding: '0' }" style="border-radius: 16px; margin-top: 20px">
<div style="display: flex; justify-content: space-between; padding: 20px">
<div>
<img :src="getAssetsFile(item.imgPath)" alt="" style="width: 160px" />
</div>
<div style="display: flex; flex-direction: column; justify-content: space-between; padding: 40px 20px">
<div style="font-size: 20px; font-weight: bold; text-align: left">{{ item.name }}</div>
<div style="display: flex" class="tags">
<div>额度高</div>
<div>政策扶持</div>
</div>
</div>
<div style="display: flex" class="bankInfo">
<div style="display: flex">
<div class="infoTitle">最快放款</div>
<div class="infoValue">{{ item.fast }}</div>
</div>
<div style="display: flex">
<div class="infoTitle">申请额度</div>
<div>{{ item.maxMoney }}</div>
</div>
<div style="display: flex">
<div class="infoTitle">最长期限</div>
<div>{{ item.maxDate }}</div>
</div>
<div style="display: flex">
<div class="infoTitle">年利率</div>
<div>{{ item.rate }}</div>
</div>
<div style="display: flex">
<div class="infoTitle">投保方式</div>
<div>{{ item.ways }}</div>
</div>
</div>
<div style="margin: auto 0">
<el-button style="background-color: #25bf82; color: #ffffff; border-radius: 11px; padding: 20px; font-size: 18px"> 查看详情 </el-button>
</div>
</div>
</el-card>
</template>
</common>
</div>
</template>
<script setup>
import { ref } from 'vue';
import common from '../components/common.vue';
import { getAssetsFile } from '../../../utils/index.js';
/* --------------- data --------------- */
// #region
const chooseMoney = ref(0);
const chooseDate = ref(0);
const chooseWay = ref(0);
const chooseUse = ref(0);
const chooseType = ref(0);
const pagination = ref({
total: 2,
size: 20,
page: 1,
});
const dataList = ref([
{
id: 1,
name: '惠农e贷',
fast: '1周',
maxMoney: '最高100万',
maxDate: '最长60个月',
rate: '4.05%起',
ways: '信用',
imgPath: 'images/finance/nyyh.png',
},
{
id: 2,
name: '农贷通',
fast: '2周',
maxMoney: '最高50万',
maxDate: '最长60个月',
rate: '4.15%起',
ways: '信用',
imgPath: 'images/finance/yzcx.png',
},
]);
// #endregion
/* --------------- methods --------------- */
// #region
const changeChoose = (type, index) => {
switch (type) {
case 'money':
chooseMoney.value = index;
break;
case 'date':
chooseDate.value = index;
break;
case 'way':
chooseWay.value = index;
break;
case 'use':
chooseUse.value = index;
break;
case 'type':
chooseType.value = index;
break;
}
getList();
};
const sortMap = ref({
currentSorting: '',
currentStatus: '',
});
const sortFunction = (type) => {};
const getList = () => {
console.log('刷新数据');
};
// #endregion
</script>
<style lang="scss" scoped>
.bankInfo {
width: calc(100% - 460px);
justify-content: space-around;
padding: 45px 20px;
.infoValue {
font-size: 14px;
font-weight: 400;
}
div {
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
}
.infoTitle {
color: #999999;
font-size: 14px;
}
}
.choose {
display: flex;
justify-content: flex-start;
font-size: 18px;
font-weight: 400;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
.searchType {
color: #999999;
}
.chooseAll {
margin: 0 30px;
cursor: pointer;
}
.chooseItem {
cursor: pointer;
margin-right: 20px;
}
}
.active {
color: #25bf82;
font-weight: bold;
}
.tags {
font-size: 14px;
color: #25bf82;
div {
margin-right: 10px;
padding: 5px;
border: 1px solid #25bf82;
background-color: rgba(37, 191, 130, 0.1);
border-radius: 8px;
}
}
.sort {
display: flex;
align-items: center;
cursor: pointer;
img {
width: 15px;
height: 15px;
}
}
</style>

View File

@ -0,0 +1,19 @@
<template>
<div></div>
</template>
<script setup>
import { ref } from 'vue';
/* --------------- data --------------- */
// #region
// #endregion
/* --------------- methods --------------- */
// #region
// #endregion
</script>
<style lang="scss" scoped></style>