Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 c2516e5b 作者: 方治民
操作

feat: 产销、农贸交易、助农金融页面

上级 457096ff
正在显示 包含 1634 行增加 和 8 行删除
src/pages.json
......@@ -16,7 +16,6 @@
"path": "pages/shouye/shouye",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#e6f5e8",
"backgroundColorTop": "#e6f5e8",
"backgroundColorBottom": "#e6f5e8",
"enablePullDownRefresh": true,
......@@ -30,7 +29,19 @@
"path": "pages/nongchang/nongchang",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#e6f5e8",
"backgroundColorTop": "#e6f5e8",
"backgroundColorBottom": "#e6f5e8",
"enablePullDownRefresh": true,
"app-plus": {
"titleNView": false,
"bounce": false
}
}
},
{
"path": "pages/chanxiao/chanxiao",
"style": {
"navigationBarTitleText": "",
"backgroundColorTop": "#e6f5e8",
"backgroundColorBottom": "#e6f5e8",
"enablePullDownRefresh": true,
......@@ -44,7 +55,6 @@
"path": "pages/nongzhi/nongzhi",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#e6f5e8",
"backgroundColorTop": "#e6f5e8",
"backgroundColorBottom": "#e6f5e8",
"enablePullDownRefresh": true,
......@@ -58,7 +68,6 @@
"path": "pages/fuwu/fuwu",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#e6f5e8",
"backgroundColorTop": "#e6f5e8",
"backgroundColorBottom": "#e6f5e8",
"enablePullDownRefresh": true,
......@@ -143,6 +152,32 @@
}
}
},
{
"path": "pages/zhunongjinrong/zhunongjinrong",
"style": {
"navigationBarTitleText": "助农金融",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"app-plus": {
"titleNView": {}
}
}
},
{
"path": "pages/nongmaojiaoyi/nongmaojiaoyi",
"style": {
"navigationBarTitleText": "农贸交易",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"app-plus": {
"titleNView": {}
}
}
},
// pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
......@@ -281,10 +316,10 @@
"text": "服务"
},
{
"pagePath": "pages/nongzhi/nongzhi",
"iconPath": "static/images/codefun/nongzhi.png",
"selectedIconPath": "static/images/codefun/nongzhi.active.png",
"text": "农知"
"pagePath": "pages/chanxiao/chanxiao",
"iconPath": "static/images/codefun/chanxiao.png",
"selectedIconPath": "static/images/codefun/chanxiao.active.png",
"text": "产销"
},
{
"pagePath": "pages/mine/index",
......
src/pages/chanxiao/chanxiao.vue 0 → 100644
<script setup lang="ts">
import { reactive } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
// 下拉刷新
onPullDownRefresh(() => {
setTimeout(function () {
uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
})
// 页面数据
const pageData = reactive({
// 顶部标题和搜索
header: {
title: '产销',
bannerImage: '/static/images/codefun/8a063bccb4a75c449a7ba2a1adc8caaf.png',
},
// 分类标签
categoryTabs: [
{ id: 1, name: '全部' },
{ id: 2, name: '蔬菜' },
{ id: 3, name: '水果' },
{ id: 4, name: '粮食' },
{ id: 5, name: '畜牧' },
{ id: 6, name: '其他' },
],
// 采购/供应标签
transactionTabs: [
{ id: 1, name: '采购需求' },
{ id: 2, name: '供应发布' },
],
// 新需求提醒
newDemandNotice: {
icon: '/static/images/codefun/48f77b33e9b33c48eda3cfc9708d8c28.png',
text: '3 条新需求发布，点击刷新查看',
},
// 采购需求列表
purchaseDemands: [
{
id: 1,
image: '/static/images/codefun/028ebd16358e350cdd341698948bf156.png',
tag: {
text: '急需',
show: true,
},
title: '精品有机白菜 50吨',
deadline: '2025.11.12 前',
location: '山东合肥',
price: '1.5-2.0',
unit: '/斤',
quoteCount: '12人报价',
actionText: '立即报价',
icons: {
deadline: '/static/images/codefun/56353ebdea095baedbcb33fc53f68a03.png',
location: '/static/images/codefun/c98744e63719b5413f260ec6a899ee20.png',
quote: '/static/images/codefun/bcf6538c8728a2894c90d4463c4c9520.png',
},
},
{
id: 2,
image: '/static/images/codefun/361ea05e8940b0235c696764775a3f00.png',
tag: {
text: '',
show: false,
},
title: '红富士苹果 20吨',
deadline: '2025.11.12 前',
location: '山东烟台',
price: '5.5-6.5',
unit: '/斤',
quoteCount: '8人报价',
actionText: '立即报价',
icons: {
deadline: '/static/images/codefun/56353ebdea095baedbcb33fc53f68a03.png',
location: '/static/images/codefun/c98744e63719b5413f260ec6a899ee20.png',
quote: '/static/images/codefun/bcf6538c8728a2894c90d4463c4c9520.png',
},
},
{
id: 3,
image: '/static/images/codefun/361ea05e8940b0235c696764775a3f00.png',
tag: {
text: '',
show: false,
},
title: '胡萝卜 30吨',
deadline: '2025.11.12 前',
location: '河北石家庄',
price: '',
unit: '',
quoteCount: '8人报价',
actionText: '立即报价',
contactText: '在线咨询',
icons: {
deadline: '/static/images/codefun/56353ebdea095baedbcb33fc53f68a03.png',
location: '/static/images/codefun/c98744e63719b5413f260ec6a899ee20.png',
quote: '/static/images/codefun/bcf6538c8728a2894c90d4463c4c9520.png',
},
},
],
// 供应信息列表
supplyInfos: [
{
id: 1,
image: '/static/images/codefun/b9ce5bff0be96948372f9f688c49fdb3.png',
tag: {
text: '推广',
show: true,
},
title: '优质草莓供应商',
description: '多品种优质草莓常年供应，品质保证',
location: '广东深圳',
actionText: '立即报价',
icons: {
location: '/static/images/codefun/c98744e63719b5413f260ec6a899ee20.png',
},
},
],
})
// 分类标签点击事件
function onCategoryTabClick(tab: any) {
console.log('点击分类标签:', tab)
// 在这里添加具体的分类标签点击逻辑
}
// 采购/供应标签点击事件
function onTransactionTabClick(tab: any) {
console.log('点击采购/供应标签:', tab)
// 在这里添加具体的采购/供应标签点击逻辑
}
// 新需求提醒点击事件
function onNewDemandNoticeClick() {
console.log('点击新需求提醒')
// 在这里添加具体的新需求提醒点击逻辑
}
// 采购需求点击事件
function onPurchaseDemandClick(demand: any) {
console.log('点击采购需求:', demand)
// 在这里添加具体的采购需求点击逻辑
}
// 立即报价点击事件
function onQuoteClick(item: any) {
console.log('点击立即报价:', item)
// 在这里添加具体的立即报价点击逻辑
}
// 供应信息点击事件
function onSupplyInfoClick(info: any) {
console.log('点击供应信息:', info)
// 在这里添加具体的供应信息点击逻辑
}
</script>
<template>
<view class="codefun-flex-col page">
<view class="codefun-flex-col section">
<view class="codefun-mt-22 codefun-flex-col">
<text class="codefun-self-center text">{{ pageData.header.title }}</text>
<view class="codefun-mt-22 codefun-flex-col codefun-self-stretch">
<image class="image_5" :src="pageData.header.bannerImage" />
<view class="codefun-mt-14 codefun-flex-row">
<view
v-for="tab in pageData.categoryTabs"
:key="tab.id"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="[tab.id === 1 ? 'section_2' : 'text-wrapper', tab.id > 1 ? 'ml-7' : '']"
@click="onCategoryTabClick(tab)"
>
<view
v-if="tab.id === 1"
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2"
>
<text class="font text_2">{{ tab.name }}</text>
</view>
<text v-else class="font" :class="`text_${tab.id + 1}`">
{{ tab.name }}
</text>
</view>
</view>
</view>
</view>
</view>
<view class="codefun-flex-row section_3">
<view
v-for="tab in pageData.transactionTabs"
:key="tab.id"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="[
tab.id === 1 ? 'text-wrapper_3' : '',
tab.id > 1 ? 'codefun-self-start' : '',
tab.id > 1 ? 'ml-55' : '',
]"
@click="onTransactionTabClick(tab)"
>
<text class="font" :class="`text_${tab.id + 7}`">
{{ tab.name }}
</text>
</view>
</view>
<view class="codefun-flex-col codefun-relative section_4">
<view class="codefun-flex-row codefun-items-center section_5" @click="onNewDemandNoticeClick">
<image class="codefun-shrink-0 image_6" :src="pageData.newDemandNotice.icon" />
<text class="codefun-ml-12 font_2 text_10">{{ pageData.newDemandNotice.text }}</text>
</view>
<!-- 供应信息列表 -->
<template v-for="(info, index) in pageData.supplyInfos" :key="info.id">
<view
class="codefun-flex-row"
:class="[index === 0 ? 'group_10' : 'group_12']"
@click="onSupplyInfoClick(info)"
>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center codefun-relative"
:class="index === 0 ? 'section_7' : 'image-wrapper view'"
>
<image class="image_7" :src="info.image" />
<view
v-if="info.tag.show"
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6"
:class="index === 0 ? 'pos_2' : ''"
>
<text class="font_3" :class="`text_${index === 0 ? 25 : 31}`">{{ info.tag.text }}</text>
</view>
</view>
<view
class="codefun-ml-12 codefun-flex-col codefun-flex-1"
:class="index === 0 ? 'codefun-self-start group_11' : ''"
>
<text class="codefun-self-start font_4" :class="index === 0 ? 'text_24' : ''">
{{ info.title }}
</text>
<text
v-if="info.description"
class="codefun-self-start font_2"
:class="index === 0 ? 'text_26 mt-11' : 'mt-11'"
>
{{ info.description }}
</text>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch"
:class="index === 0 ? 'mt-11' : 'mt-11'"
>
<view class="codefun-flex-row">
<image class="codefun-shrink-0 image_9" :src="info.icons.location" />
<text class="codefun-ml-4 font_2" :class="`text_${index === 0 ? 27 : 30}`">{{
info.location
}}</text>
</view>
<view
v-if="info.actionText"
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
@click.stop="onQuoteClick(info)"
>
<text class="font_9">{{ info.actionText }}</text>
</view>
</view>
</view>
</view>
</template>
<!-- 采购需求列表 -->
<template v-for="(demand, index) in pageData.purchaseDemands" :key="demand.id">
<view
class="codefun-flex-row codefun-items-center my-3"
:class="[index === 0 ? 'group_2' : '', index === 1 ? 'group_6' : '']"
@click="onPurchaseDemandClick(demand)"
>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-relative"
:class="index === 0 ? 'section_6' : 'image-wrapper'"
>
<image class="image_7" :src="demand.image" />
<view
v-if="demand.tag.show"
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
:class="index === 0 ? 'pos' : ''"
>
<text class="font_3 text_11">{{ demand.tag.text }}</text>
</view>
</view>
<view class="codefun-ml-12 codefun-flex-col codefun-flex-1">
<text class="codefun-self-start font_4">{{ demand.title }}</text>
<view class="codefun-flex-row codefun-self-stretch mt-2">
<image class="image_8" :src="demand.icons.deadline" />
<text class="codefun-ml-4 font_2" :class="`text_${index === 0 ? 13 : 19}`">{{
demand.deadline
}}</text>
</view>
<view class="codefun-flex-row codefun-self-stretch mt-2">
<image class="image_9" :src="demand.icons.location" />
<text class="codefun-ml-4 font_2" :class="`text_${index === 0 ? 14 : 20}`">{{
demand.location
}}</text>
</view>
<view class="codefun-self-start" :class="index === 0 ? 'group_4' : 'group_8'">
<text v-if="demand.price" class="font_6" :class="`text_${index === 0 ? 15 : 21}`">¥</text>
<text v-if="demand.price" class="font_5">{{ demand.price }}</text>
<text v-if="demand.unit" class="font_7" :class="`text_${index === 0 ? 16 : 22}`">{{
demand.unit
}}</text>
</view>
</view>
</view>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center"
:class="[index === 0 ? 'group_5' : '', index === 1 ? 'group_9' : '']"
>
<view class="codefun-flex-row codefun-items-center">
<image class="codefun-shrink-0 image_10" :src="demand.icons.quote" />
<text
class="font_8"
:class="[index === 0 ? 'text_17' : 'text_23', index === 0 ? 'ml-5' : 'codefun-ml-4']"
>
{{ demand.quoteCount }}
</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
@click.stop="onQuoteClick(demand)"
>
<text class="font_9">{{ demand.actionText }}</text>
</view>
</view>
<!-- 分隔线 -->
<view class="divider" v-if="index < pageData.purchaseDemands.length - 1" />
</template>
</view>
</view>
</template>
<style scoped lang="scss">
.ml-7 {
margin-left: 14rpx;
}
.ml-55 {
margin-left: 110rpx;
}
.ml-5 {
margin-left: 10rpx;
}
.mt-11 {
margin-top: 22rpx;
}
.mt-5 {
margin-top: 10rpx;
}
.page {
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 32rpx;
.section {
padding: 28rpx 28rpx 8rpx;
background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
background-size: 100% 100%;
background-repeat: no-repeat;
.group {
padding-left: 16rpx;
.image {
border-radius: 64rpx;
width: 108rpx;
height: 42rpx;
}
.image_2 {
mix-blend-mode: NOTTHROUGH;
width: 34rpx;
height: 22rpx;
}
.image_3 {
mix-blend-mode: NOTTHROUGH;
width: 30rpx;
height: 22rpx;
}
.image_4 {
width: 48rpx;
height: 22rpx;
}
}
.text {
color: #ffffffe6;
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 29.7rpx;
}
.image_5 {
width: 92.5333vw;
height: 37.3333vw;
}
.section_2 {
padding: 16rpx 0;
flex: 1 1 104rpx;
background-color: #5db66f;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
.text-wrapper_2 {
padding: 8rpx 0;
overflow: hidden;
width: 56rpx;
.text_2 {
color: #ffffff;
line-height: 26.02rpx;
}
}
}
.text-wrapper {
flex: 1 1 104rpx;
padding: 24rpx 0 20rpx;
background-color: #ffffff;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
.text_3 {
line-height: 25.76rpx;
}
.text_4 {
line-height: 25.74rpx;
}
.text_5 {
line-height: 26.02rpx;
}
.text_6 {
line-height: 26.04rpx;
}
.text_7 {
line-height: 25.68rpx;
}
}
}
.section_3 {
margin: 20rpx 28rpx 0;
padding-bottom: 8rpx;
background-color: #ffffff66;
border-radius: 32rpx;
border-left: solid 2rpx #ffffffcc;
border-right: solid 2rpx #ffffffcc;
border-top: solid 2rpx #ffffffcc;
border-bottom: solid 2rpx #ffffffcc;
.text-wrapper_3 {
padding: 24rpx 0 52rpx;
background-color: #ffffff;
border-radius: 32rpx;
width: 348rpx;
height: 102rpx;
.text_8 {
color: #333333;
line-height: 26.02rpx;
}
}
.text_9 {
margin-top: 20rpx;
color: #5db66f;
line-height: 26.18rpx;
}
}
.font {
font-size: 28rpx;
font-family: DingTalk Sans;
line-height: 24.44rpx;
color: #1f2937;
}
.section_4 {
margin: -44rpx 28rpx 0;
padding: 12rpx 24rpx 20rpx;
background-color: #ffffff;
border-radius: 21.8rpx;
mix-blend-mode: NOTTHROUGH;
.image_7 {
width: 100%;
height: 100%;
}
.section_5 {
padding: 16rpx 20rpx 8rpx;
background-color: #fff7ec;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
.image_6 {
width: 26rpx;
height: 32rpx;
}
.text_10 {
color: #ff8d1a;
line-height: 40rpx;
}
}
.group_2 {
margin-top: 24rpx;
.section_6 {
background-color: #f9fafb;
border-radius: 8rpx;
width: 160rpx;
height: 160rpx;
.text-wrapper_4 {
padding: 8rpx 0;
background-image: linear-gradient(90deg, #fb6c26 0%, #f2130d 100%);
border-radius: 0rpx 8rpx 8rpx 0rpx;
mix-blend-mode: NOTTHROUGH;
width: 64rpx;
.text_11 {
line-height: 18.46rpx;
}
}
.pos {
position: absolute;
left: 0;
top: 8rpx;
}
}
.group_3 {
margin-top: 16rpx;
.text_13 {
line-height: 22.1rpx;
}
.text_14 {
line-height: 22.24rpx;
}
}
.group_4 {
margin-left: 8rpx;
margin-top: 36rpx;
line-height: 24.44rpx;
.text_15 {
line-height: 17.3rpx;
}
.text_16 {
line-height: 24.24rpx;
}
}
}
.font_2 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 22.42rpx;
color: #999999;
}
.group_5 {
margin-top: 8rpx;
}
.divider {
margin-top: 20rpx;
background-color: #eeeeee;
height: 2rpx;
}
.group_6 {
margin-top: 18rpx;
.group_7 {
margin-top: 16rpx;
.text_19 {
line-height: 22.1rpx;
}
.text_20 {
line-height: 22.28rpx;
}
}
.group_8 {
margin-left: 8rpx;
margin-top: 36rpx;
line-height: 24.44rpx;
.text_21 {
line-height: 17.3rpx;
}
.text_22 {
line-height: 24.24rpx;
}
}
}
.font_4 {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 40rpx;
color: #333333;
}
.image_8 {
width: 24rpx;
height: 24rpx;
}
.image_9 {
width: 22rpx;
height: 26rpx;
}
.font_6 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 18.44rpx;
font-weight: 700;
color: #f2130d;
}
.font_5 {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 24.44rpx;
color: #f2130d;
}
.font_7 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 24.44rpx;
color: #999999;
}
.group_9 {
margin-top: 8rpx;
}
.image_10 {
width: 80rpx;
height: 30rpx;
}
.font_8 {
font-size: 20rpx;
font-family: DingTalk Sans;
color: #999999;
}
.text-wrapper_5 {
padding: 12rpx 0;
background-color: #5db66f;
border-radius: 400rpx;
mix-blend-mode: NOTTHROUGH;
width: 136rpx;
height: 48rpx;
.font_9 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 22.42rpx;
color: #ffffff;
}
}
.group_10 {
margin-top: 0;
padding: 30rpx 0;
border-bottom: solid 2rpx #eeeeee;
.section_7 {
padding: 30rpx 0 16rpx;
background-color: #f9fafb;
border-radius: 8rpx;
width: 160rpx;
height: 160rpx;
.image_12 {
width: 152rpx;
height: 114rpx;
}
.text-wrapper_6 {
padding: 8rpx 0;
background-color: #ffb700;
border-radius: 0rpx 8rpx 8rpx 0rpx;
mix-blend-mode: NOTTHROUGH;
width: 64rpx;
.text_25 {
line-height: 18.62rpx;
}
}
.pos_2 {
position: absolute;
left: 0;
top: 16rpx;
}
}
.group_11 {
margin-top: 16rpx;
.text_24 {
line-height: 30.28rpx;
}
.text_26 {
line-height: 22.92rpx;
}
.text_27 {
line-height: 22.46rpx;
}
}
}
.font_3 {
font-size: 20rpx;
font-family: DingTalk Sans;
line-height: 18.44rpx;
color: #ffffff;
}
.group_12 {
margin-top: 18rpx;
.view {
margin-bottom: 8rpx;
}
.group_13 {
margin-top: 16rpx;
.text_29 {
line-height: 22.1rpx;
}
.text_30 {
line-height: 22.46rpx;
}
}
.group_14 {
margin-left: 8rpx;
margin-top: 28rpx;
.text_31 {
margin-left: 20rpx;
margin-right: -104rpx;
color: #f2130d;
line-height: 40rpx;
}
.text_32 {
line-height: 40rpx;
position: relative;
left: -24rpx;
}
}
}
.image-wrapper {
padding: 30rpx 0 20rpx;
background-color: #f9fafb;
border-radius: 8rpx;
width: 160rpx;
height: 160rpx;
.image_11 {
width: 114rpx;
height: 110rpx;
}
}
.text_33 {
line-height: 18.6rpx;
}
}
.equal-division {
margin-top: 40rpx;
.group_15 {
flex: 1 1 146.74rpx;
.image_13 {
width: 32rpx;
height: 32rpx;
}
.font_10 {
font-size: 20rpx;
font-family: DingTalk Sans;
line-height: 18.44rpx;
color: #666666;
}
}
.equal-division-item {
padding: 12rpx 0;
}
}
.section_8 {
padding: 12rpx 8rpx;
background-color: #ffffff;
mix-blend-mode: NOTTHROUGH;
border-top: solid 1rpx #e7e7e7;
}
}
</style>
src/pages/fuwu/fuwu.vue
......@@ -232,18 +232,24 @@
function onFinancialProductClick(product: any) {
console.log('点击助农金融产品:', product)
// 在这里添加具体的产品点击逻辑
Navigate.to('/pages/zhunongjinrong/zhunongjinrong')
}
// 查看全部助农金融产品
function onViewAllFinancialProducts() {
console.log('查看全部助农金融产品')
// 在这里添加具体的查看逻辑
Navigate.to('/pages/zhunongjinrong/zhunongjinrong')
}
// 农资商品点击事件
function onAgriculturalProductClick(product: any) {
console.log('点击农资商品:', product)
// 在这里添加具体的商品点击逻辑
Navigate.to('/pages/nongmaojiaoyi/nongmaojiaoyi')
}
// 农机服务点击事件
......
src/pages/nongmaojiaoyi/nongmaojiaoyi.vue 0 → 100644
<script setup lang="ts">
import { reactive } from 'vue'
// 页面数据
const pageData = reactive({
// 顶部横幅
bannerImage: '/static/images/codefun/d31968c08e972e2a5fbc02faa5bd4317.png',
// 排序选项
sortOptions: [
{ id: 1, name: '全部农资', icon: '/static/images/codefun/9d95536ccd060c6fc9346ac04d0aae51.png' },
{ id: 2, name: '销量优先', icon: '/static/images/codefun/9d95536ccd060c6fc9346ac04d0aae51.png' },
],
// 商品列表
products: [
{
id: 1,
tag: {
text: '政府背书',
show: true,
},
image: '/static/images/codefun/00db5a56fec86b1852516ae34b6d443a.png',
title: '有机肥料',
description: '高效环保有机肥，适合各类农作物',
price: '220',
actionText: '我要购买',
},
{
id: 2,
tag: {
text: '',
show: false,
},
image: '/static/images/codefun/00db5a56fec86b1852516ae34b6d443a.png',
title: '复合肥料',
description: '氮磷钾均衡配方，促进作物全面发育',
price: '180',
actionText: '我要购买',
},
{
id: 3,
tag: {
text: '热销',
show: true,
},
image: '/static/images/codefun/00db5a56fec86b1852516ae34b6d443a.png',
title: '生物农药',
description: '天然无害杀虫剂，保护作物安全',
price: '120',
actionText: '我要购买',
},
{
id: 4,
tag: {
text: '推荐',
show: true,
},
image: '/static/images/codefun/00db5a56fec86b1852516ae34b6d443a.png',
title: '农用薄膜',
description: '高透光耐老化，保温保湿效果好',
price: '350',
actionText: '我要购买',
},
],
})
// 排序选项点击事件
function onSortOptionClick(option: any) {
console.log('点击排序选项:', option)
// 在这里添加具体的排序选项点击逻辑
}
// 商品点击事件
function onProductClick(product: any) {
console.log('点击商品:', product)
// 在这里添加具体的商品点击逻辑
}
// 购买按钮点击事件
function onPurchaseClick(product: any) {
console.log('点击购买按钮:', product)
// 在这里添加具体的购买按钮点击逻辑
}
</script>
<template>
<view class="codefun-flex-col page">
<view class="codefun-mt-14 codefun-flex-col group_3">
<image class="image_8" :src="pageData.bannerImage" />
<view class="codefun-mt-12 codefun-flex-col section_2">
<view class="codefun-flex-row codefun-justify-between equal-division group_4">
<view
v-for="option in pageData.sortOptions"
:key="option.id"
class="codefun-flex-row codefun-items-center"
@click="onSortOptionClick(option)"
>
<text class="font_2" :class="`text_${option.id + 1}`">{{ option.name }}</text>
<image class="codefun-ml-6 codefun-shrink-0 image_9" :src="option.icon" />
</view>
</view>
<view class="codefun-mt-6 codefun-flex-col codefun-self-stretch">
<view
class="codefun-flex-row list-item"
v-for="product in pageData.products"
:key="product.id"
@click="onProductClick(product)"
>
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-center section_3"
>
<view v-if="product.tag.show" class="codefun-flex-col codefun-justify-start text-wrapper">
<text class="font_3 text_4">{{ product.tag.text }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-flex-1 codefun-self-start group_5 ml-13">
<text class="codefun-self-start font">{{ product.title }}</text>
<text class="codefun-self-start font_4 text_5 mt-11">{{ product.description }}</text>
<view class="codefun-flex-row codefun-justify-between codefun-self-stretch group_6 mt-11">
<view class="codefun-self-start group_7">
<text class="font_7">¥</text>
<text class="font_5">{{ product.price }}</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2"
@click.stop="onPurchaseClick(product)"
>
<text class="font_6">{{ product.actionText }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.ml-5 {
margin-left: 10rpx;
}
.ml-13 {
margin-left: 26rpx;
}
.mt-11 {
margin-top: 22rpx;
}
.page {
padding-bottom: 32rpx;
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
.section {
padding: 28rpx 28rpx 28rpx 36rpx;
background-color: #5db66f;
mix-blend-mode: NOTTHROUGH;
.group {
padding: 4rpx 0;
.image {
border-radius: 64rpx;
width: 108rpx;
height: 42rpx;
}
.image_2 {
mix-blend-mode: NOTTHROUGH;
width: 34rpx;
height: 22rpx;
}
.image_3 {
mix-blend-mode: NOTTHROUGH;
width: 30rpx;
height: 22rpx;
}
.image_4 {
width: 48rpx;
height: 22rpx;
}
}
.group_2 {
padding: 4rpx 0 4rpx 6rpx;
.image_6 {
mix-blend-mode: NOTTHROUGH;
width: 14rpx;
height: 26rpx;
}
.pos_2 {
position: absolute;
left: 6rpx;
top: 50%;
transform: translateY(-50%);
}
.text {
color: #ffffffe6;
line-height: 29.88rpx;
}
.pos {
position: absolute;
right: 0.66rpx;
top: 50%;
transform: translateY(-50%);
.image_5 {
width: 42rpx;
height: 40rpx;
}
.image_7 {
width: 34rpx;
height: 30rpx;
}
}
}
}
.group_3 {
padding: 0 28rpx;
.image_8 {
width: 92.5333vw;
height: 37.3333vw;
}
.section_2 {
padding: 28rpx 24rpx 0;
background-color: #ffffff;
border-radius: 18.56rpx;
mix-blend-mode: NOTTHROUGH;
.equal-division {
align-self: center;
.font_2 {
font-size: 28rpx;
font-family: DingTalk Sans;
line-height: 24.44rpx;
color: #333333;
}
.text_2 {
line-height: 25.92rpx;
}
.image_9 {
width: 20rpx;
height: 10rpx;
}
.text_3 {
line-height: 25.92rpx;
}
}
.group_4 {
width: 495.28rpx;
}
.list-item {
padding: 24rpx 0;
border-bottom: solid 2rpx #eeeeee;
.section_3 {
padding: 12rpx 0 116rpx;
background-image: url('/static/images/codefun/00db5a56fec86b1852516ae34b6d443a.png');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 160rpx;
height: 160rpx;
.text-wrapper {
padding: 8rpx 0;
background-image: linear-gradient(90deg, #43cf7c 0%, #5db66f 100%);
border-radius: 0rpx 8rpx 8rpx 0rpx;
mix-blend-mode: NOTTHROUGH;
.font_3 {
font-size: 20rpx;
font-family: DingTalk Sans;
line-height: 17.3rpx;
color: #ffffff;
}
.text_4 {
margin-left: 12rpx;
margin-right: 4rpx;
line-height: 18.7rpx;
}
}
}
.group_5 {
margin-top: 16rpx;
.font_4 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 24.44rpx;
color: #999999;
}
.text_5 {
line-height: 22.92rpx;
}
.group_6 {
padding-left: 4rpx;
.group_7 {
margin-top: 16rpx;
line-height: 24.44rpx;
height: 24.44rpx;
.font_7 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 17.3rpx;
font-weight: 700;
color: #f2130d;
}
.font_5 {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 24.44rpx;
color: #f2130d;
}
}
.text-wrapper_2 {
padding: 12rpx 0;
background-color: #5db66f;
border-radius: 400rpx;
mix-blend-mode: NOTTHROUGH;
width: 136rpx;
height: 48rpx;
.font_6 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 22.16rpx;
color: #ffffff;
}
}
}
}
}
}
}
.font {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 29.8rpx;
color: #333333;
}
}
</style>
src/pages/zhunongjinrong/zhunongjinrong.vue 0 → 100644
<script>
export default {
components: {},
props: {},
data() {
return {}
},
methods: {},
}
</script>
<template>
<view class="codefun-flex-col page">
<view class="codefun-mt-14 codefun-flex-col group_2">
<view class="codefun-flex-row group_3">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_2 text_2">惠农贷款</text>
</view>
<view class="codefun-ml-10 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
<text class="font_3 text_3">振兴贷款</text>
</view>
<view class="codefun-ml-10 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
<text class="font_3 text_4">灾害保险</text>
</view>
<view class="codefun-ml-10 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
<text class="font_3 text_5">价格保险</text>
</view>
<view
class="codefun-ml-10 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2 view"
>
<text class="font_3 text_5">更多服务</text>
</view>
</view>
<view class="codefun-mt-22 codefun-flex-col section_2">
<text class="codefun-self-start font text_6">惠农贷款政策</text>
<text class="codefun-self-start font_2 text_7">面向新型农业经营主体，提供便捷资金支持</text>
<view class="codefun-flex-row equal-division">
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item">
<image class="image_6" src="/static/images/codefun/65805aa8bc30e1adb6350da711c623c5.png" />
<text class="font_4 mt-11">5-50万</text>
<text class="font_5 mt-11">额度高</text>
</view>
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item ml-11">
<image class="image_6" src="/static/images/codefun/80992404de789827f849f53777c64863.png" />
<text class="codefun-mt-10 font_4">3.85%起</text>
<text class="codefun-mt-10 font_5">利率低</text>
</view>
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item ml-11">
<image class="image_6" src="/static/images/codefun/c67aaf6f01b1cbde47843318ac8be555.png" />
<text class="codefun-mt-10 font_4">最长3年</text>
<text class="codefun-mt-10 font_6">期限长</text>
</view>
</view>
<text class="codefun-self-start font text_8">申请条件</text>
<view class="codefun-flex-col codefun-self-stretch section_4">
<view class="codefun-flex-row codefun-items-center">
<view class="section_5" />
<text class="font_2 text_9 ml-9">年龄18-65周岁，具有完全民事行为能力</text>
</view>
<view class="codefun-flex-row codefun-items-center mt-15">
<view class="section_5" />
<text class="font_2 text_10 ml-9">具有本地户籍或有效居住证明</text>
</view>
<view class="codefun-flex-row codefun-items-center mt-15">
<view class="section_5" />
<text class="font_2 text_11 ml-9">从事农业生产经营或农产品加工活动</text>
</view>
<view class="codefun-flex-row codefun-items-center mt-15">
<view class="section_5" />
<text class="font_2 text_12 ml-9">信用记录良好，无不良征信记录</text>
</view>
</view>
<text class="codefun-self-start font text_13">办理流程</text>
<view class="codefun-flex-col codefun-self-stretch section_6">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_4">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3">
<text class="font_7 text_14">1</text>
</view>
<view class="section_7" />
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3">
<text class="font_7 text_15">2</text>
</view>
<view class="section_7" />
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3">
<text class="font_7 text_16">3</text>
</view>
<view class="section_7" />
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 view_2">
<text class="font_7 text_17">4</text>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between mt-9">
<text class="font_8 text_18">提交申请</text>
<text class="font_8 text_19">资料审核</text>
<text class="font_8 text_20">签约授信</text>
<text class="font_8 text_21">放款到账</text>
</view>
</view>
<text class="codefun-self-start font text_22">申请案例</text>
<view class="codefun-flex-row equal-division_2">
<view class="codefun-flex-col codefun-items-center section_8 equal-division-item_2">
<text class="font_9">576人</text>
<text class="font_5 text_23 mt-11">本县已申请</text>
</view>
<view class="codefun-flex-col codefun-items-center section_8 equal-division-item_2 ml-11">
<text class="font_9">3天</text>
<text class="font_5 text_23 mt-11">平均放款</text>
</view>
<view class="codefun-flex-col codefun-items-center section_8 equal-division-item_2 ml-11">
<text class="font_9">98%</text>
<text class="font_6 text_23 mt-11">满意度</text>
</view>
</view>
<view class="codefun-flex-col codefun-self-stretch section_9">
<view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch">
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_7"
src="/static/images/codefun/a3188845d5d70f8bff3e95dcca8e2ff3.png"
/>
<text class="font_2 text_24 ml-9">李**</text>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
<text class="font_5 text_25">农户认证</text>
</view>
</view>
<text class="codefun-mt-10 codefun-self-stretch font_2 text_26">
种植大户，申请20万元贷款用于扩大生产模，3天放款，节省利息8000元/年
</text>
<text class="codefun-mt-10 codefun-self-start font_5 text_27">2025.09.10</text>
</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.ml-5 {
margin-left: 10rpx;
}
.mt-23 {
margin-top: 46rpx;
}
.mt-15 {
margin-top: 30rpx;
}
.mt-9 {
margin-top: 18rpx;
}
.ml-11 {
margin-left: 22rpx;
}
.mt-11 {
margin-top: 22rpx;
}
.ml-9 {
margin-left: 18rpx;
}
.page {
padding-bottom: 148rpx;
background-color: #e6f5e8;
mix-blend-mode: NOTTHROUGH;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
.section {
padding: 26rpx 28rpx 32rpx 36rpx;
background-color: #5db66f;
mix-blend-mode: NOTTHROUGH;
.image {
border-radius: 64rpx;
width: 108rpx;
height: 42rpx;
}
.image_2 {
mix-blend-mode: NOTTHROUGH;
width: 34rpx;
height: 22rpx;
}
.image_3 {
mix-blend-mode: NOTTHROUGH;
width: 30rpx;
height: 22rpx;
}
.image_4 {
width: 48rpx;
height: 22rpx;
}
.group {
padding: 0 6rpx;
.image_5 {
mix-blend-mode: NOTTHROUGH;
width: 14rpx;
height: 26rpx;
}
.pos {
position: absolute;
left: 6rpx;
top: 50%;
transform: translateY(-50%);
}
.text {
color: #ffffffe6;
line-height: 29.8rpx;
}
}
}
.group_2 {
padding-left: 28rpx;
.group_3 {
overflow-x: auto;
.text-wrapper {
padding: 24rpx;
background-color: #5db66f;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
.text_2 {
color: #ffffff;
line-height: 25.92rpx;
}
}
.text-wrapper_2 {
padding: 24rpx;
background-color: #ffffff;
border-radius: 19998rpx;
mix-blend-mode: NOTTHROUGH;
height: 72rpx;
.font_3 {
font-size: 28rpx;
font-family: DingTalk Sans;
line-height: 27.42rpx;
color: #1f2937;
}
.text_3 {
line-height: 25.92rpx;
}
.text_4 {
line-height: 26.02rpx;
}
.text_5 {
line-height: 26.18rpx;
}
}
.view {
margin-right: 20rpx;
}
}
.section_2 {
margin-right: 28rpx;
padding: 16rpx 24rpx 24rpx;
background-color: #ffffff;
border-radius: 17.54rpx;
mix-blend-mode: NOTTHROUGH;
.text_6 {
line-height: 29.96rpx;
}
.text_7 {
margin-top: 32rpx;
line-height: 26.54rpx;
}
.equal-division {
align-self: stretch;
margin-top: 20rpx;
.section_3 {
flex: 1 1 200.54rpx;
.image_6 {
width: 48rpx;
height: 48rpx;
}
.font_4 {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 27.42rpx;
color: #5db66f;
}
}
.equal-division-item {
padding: 16rpx 0;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
height: 178rpx;
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
}
}
.text_8 {
margin-top: 40rpx;
line-height: 29.76rpx;
}
.section_4 {
margin-top: 24rpx;
padding: 24rpx 16rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
.section_5 {
background-color: #5db66f;
border-radius: 19998rpx;
width: 16rpx;
height: 16rpx;
}
.text_9 {
line-height: 26.62rpx;
}
.text_10 {
line-height: 25.98rpx;
}
.text_11 {
line-height: 25.9rpx;
}
.text_12 {
line-height: 26.54rpx;
}
}
.text_13 {
margin-top: 40rpx;
}
.section_6 {
margin-top: 24rpx;
padding: 24rpx 32rpx 24rpx 40rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
.group_4 {
padding: 0 16rpx;
.text-wrapper_3 {
padding: 20rpx 0;
background-color: #5db66f;
border-radius: 19998rpx;
width: 60rpx;
height: 60rpx;
.font_7 {
font-size: 28rpx;
font-family: DingTalk Sans;
line-height: 21.96rpx;
color: #ffffff;
}
.text_14 {
line-height: 20.64rpx;
}
.text_15 {
line-height: 21rpx;
}
.text_16 {
line-height: 21.4rpx;
}
.text_17 {
line-height: 20.64rpx;
}
}
.section_7 {
background-color: #5db66f;
width: 40rpx;
height: 1.74rpx;
}
.view_2 {
margin-right: 8rpx;
}
}
.font_8 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 21.96rpx;
color: #666666;
}
.text_18 {
line-height: 22.28rpx;
}
.text_19 {
line-height: 22.2rpx;
}
.text_20 {
line-height: 22.18rpx;
}
.text_21 {
line-height: 22.18rpx;
}
}
.text_22 {
margin-top: 40rpx;
line-height: 29.92rpx;
}
.equal-division_2 {
align-self: stretch;
margin-top: 32rpx;
.section_8 {
flex: 1 1 200.36rpx;
.font_9 {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 24.44rpx;
color: #5db66f;
}
.text_23 {
line-height: 22.08rpx;
}
}
.equal-division-item_2 {
padding: 28rpx 0 16rpx;
background-color: #f9fafb;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
backdrop-filter: blur(4rpx);
height: 120rpx;
border-left: solid 2rpx #ffffff;
border-right: solid 2rpx #ffffff;
border-top: solid 2rpx #ffffff;
border-bottom: solid 2rpx #ffffff;
}
}
.font_5 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 21.96rpx;
color: #999999;
}
.font_6 {
font-size: 24rpx;
font-family: HarmonyOSSansSC;
line-height: 21.96rpx;
color: #999999;
}
.section_9 {
margin-top: 16rpx;
padding: 24rpx 24rpx 28rpx;
background-color: #f9fafb;
border-radius: 16rpx;
.image_7 {
width: 64rpx;
height: 64rpx;
}
.text_24 {
color: #5db66f;
line-height: 25.68rpx;
}
.text-wrapper_4 {
padding: 8rpx 0;
background-color: #5db66f33;
border-radius: 19998rpx;
width: 128rpx;
height: 40rpx;
.text_25 {
color: #5db66f;
line-height: 22.34rpx;
}
}
.text_26 {
line-height: 40rpx;
text-align: justify;
}
.text_27 {
line-height: 18.22rpx;
}
}
}
.font_2 {
font-size: 28rpx;
font-family: DingTalk Sans;
line-height: 27.42rpx;
color: #666666;
}
}
.font {
font-size: 32rpx;
font-family: DingTalk Sans;
line-height: 29.88rpx;
color: #333333;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论