涉农金融页面新增

This commit is contained in:
姚俊旭 2025-06-12 14:53:41 +08:00
parent e858c83717
commit 102ae28ace
4 changed files with 90 additions and 29 deletions

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,11 +145,11 @@ const toHome = () => {
const toUserCenter = () => {
console.info('toUserCenter', router);
router.push('/sub-operation-service/userCenter');
router.push('/sub-operation-service/userCenter?from=userCenter');
};
const toCart = () => {
router.push('/sub-operation-service/userCenter');
router.push('/sub-operation-service/userCenter?from=toCart');
};
</script>

View File

@ -51,47 +51,49 @@
<div>
共匹配到 <span style="color: #25bf82">{{ pagination.total }}</span> 个结果
</div>
<div>线下审批</div>
<div>贷款额度</div>
<div>贷款利率</div>
<div>贷款期限</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 style="border-radius: 16px; margin-top: 20px">
<div style="display: flex; justify-content: space-between">
<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('images/finance/nyyh.png')" alt="" style="width: 160px" />
<img :src="getAssetsFile(item.imgPath)" alt="" style="width: 160px" />
</div>
<div style="display: flex; flex-direction: column; justify-content: space-between; padding: 20px">
<div>惠农e贷</div>
<div style="display: flex">
<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 style="display: flex">
<div>最快放款</div>
<div>2</div>
<div class="infoTitle">最快放款</div>
<div class="infoValue">{{ item.fast }}</div>
</div>
<div style="display: flex">
<div>申请额度</div>
<div>最高50万</div>
<div class="infoTitle">申请额度</div>
<div>{{ item.maxMoney }}</div>
</div>
<div style="display: flex">
<div>最快放款</div>
<div>最长60个月</div>
<div class="infoTitle">最长期限</div>
<div>{{ item.maxDate }}</div>
</div>
<div style="display: flex">
<div>年利率</div>
<div>4.15%</div>
<div class="infoTitle">年利率</div>
<div>{{ item.rate }}</div>
</div>
<div style="display: flex">
<div>投保方式</div>
<div>信用</div>
<div class="infoTitle">投保方式</div>
<div>{{ item.ways }}</div>
</div>
</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>
@ -113,7 +115,7 @@ const chooseUse = ref(0);
const chooseType = ref(0);
const pagination = ref({
total: 0,
total: 2,
size: 20,
page: 1,
});
@ -121,8 +123,23 @@ const pagination = ref({
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',
},
]);
@ -151,6 +168,13 @@ const changeChoose = (type, index) => {
getList();
};
const sortMap = ref({
currentSorting: '',
currentStatus: '',
});
const sortFunction = (type) => {};
const getList = () => {
console.log('刷新数据');
};
@ -158,6 +182,24 @@ const getList = () => {
</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;
@ -183,4 +225,24 @@ const getList = () => {
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>