Skip to content

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

chore: 首页页面内容尽可能动态化渲染

上级 a9345c05
正在显示 包含 261 行增加 和 239 行删除
src/pages/shouye/shouye.vue
<script>
export default {
components: {},
props: {},
data() {
return {}
},
methods: {},
<script setup lang="ts">
import { reactive } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
onPullDownRefresh() {
// 下拉刷新
onPullDownRefresh(() => {
setTimeout(function () {
uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
})
// 页面数据
const pageData = reactive({
// 顶部标题和搜索
header: {
title: '湖南省农业服务平台',
searchPlaceholder: '请输入搜索内容',
},
// 天气信息
weather: {
location: '长沙',
date: '08-30 初八',
temperature: '36°C',
condition: '晴｜适宜喷药',
forecast: [
{ day: '明天', temp: '24-28°' },
{ day: '周三', temp: '25-29°' },
{ day: '周四', temp: '26-31°' },
],
warning: '台风"尤特"12号 预计今晚登陆',
},
// 功能菜单
menuItems: [
{ id: 1, name: '农业政策', icon: '/static/images/codefun/4d9a15cf0dce9c5b1f274f99eb3e4718.png' },
{ id: 2, name: '灵活用工', icon: '/static/images/codefun/24864cd4c6f680714e327688c6ee9977.png' },
{ id: 3, name: '可信农资', icon: '/static/images/codefun/0c9b2418502708fc8414e7b2c04dc8e2.png' },
{ id: 4, name: '农机租购', icon: '/static/images/codefun/15059d8b705006d875ca9460b696a316.png' },
],
// 其他服务
serviceItems: [
{ id: 1, name: '惠农金融', icon: '/static/images/codefun/9f300d453071240f6f56ff6f83e223db.png' },
{ id: 2, name: '助农保险', icon: '/static/images/codefun/f422ac97718981ce225a7f595779f2be.png' },
{ id: 3, name: '品牌策划', icon: '/static/images/codefun/c0669727e6384083a7493979154183a9.png' },
{ id: 4, name: '农知农技', icon: '/static/images/codefun/182a345a5e2d417c944035b240ba2e64.png' },
],
// 新闻资讯
newsItems: [
{ id: 1, type: '最新', title: '积极防范持续高温对农作物的影响', date: '2025-08-29' },
{ id: 2, type: '预警', title: '', date: '2025-08-29' },
],
// 农产品行情
productMarket: {
title: '热门产地行情',
updateTime: '08-30日更新',
products: [
{ id: 1, name: '晚稻13号', price: '¥4120', change: '+1.2%', isUp: true },
{ id: 2, name: '晚稻9号', price: '¥3211', change: '+1.2%', isUp: true },
{ id: 3, name: '晚稻11号', price: '¥2120', change: '-1.2%', isUp: false },
],
},
// 服务展示窗
serviceStats: [
{
id: 1,
name: '农场入驻',
value: '2,360',
unit: '个',
icon: '/static/images/codefun/15911306636a361a8dc16ce0283f3830.png',
},
{
id: 2,
name: '空闲农机',
value: '126',
unit: '台',
icon: '/static/images/codefun/1d0cd168eeffbaf37a90aa949c6ad806.png',
},
{
id: 3,
name: '产销对接',
value: '156',
unit: '笔',
icon: '/static/images/codefun/24dd00386672f240ef00394b746c2ff0.png',
},
{
id: 4,
name: '服务农户',
value: '12,580',
unit: '人',
icon: '/static/images/codefun/3fd6a50eaf22431687a6151df0581156.png',
},
{
id: 5,
name: '覆盖面积',
value: '268',
unit: 'km',
icon: '/static/images/codefun/87773a17a1b64dc686bf935708262002.png',
},
{
id: 6,
name: '覆盖区县',
value: '21',
unit: '个',
icon: '/static/images/codefun/329a4404092545f2924ad095c531cc66.png',
},
],
// 农技课堂
agricultureClass: {
title: '专家实录—鸡饲养技术',
expert: '张教授',
info: '23:15｜2.3万次播放',
},
})
// 菜单点击事件
function onMenuItemClick(item: any) {
console.log('点击菜单项:', item)
// 在这里添加具体的菜单点击逻辑
}
// 服务项点击事件
function onServiceItemClick(item: any) {
console.log('点击服务项:', item)
// 在这里添加具体的服务项点击逻辑
}
// 服务统计点击事件
function onServiceStatClick(item: any) {
console.log('点击服务统计项:', item)
// 在这里添加具体的服务统计点击逻辑
}
// 农产品关注点击事件
function onProductFollowClick(product: any) {
console.log('点击关注农产品:', product)
// 在这里添加具体的关注逻辑
}
// 查看更多农技课堂
function onViewMoreClass() {
console.log('查看全部农技课堂')
// 在这里添加具体的查看逻辑
}
</script>
......@@ -21,10 +154,10 @@
<view class="codefun-flex-col page">
<view class="codefun-flex-col group">
<view class="codefun-flex-col section">
<text class="codefun-self-start text">湖南省农业服务平台</text>
<text class="codefun-self-start text">{{ pageData.header.title }}</text>
<view class="codefun-flex-row codefun-items-center codefun-self-stretch section_2">
<image class="image_5" src="/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png" />
<text class="font text_2 codefun-ml-8">请输入搜索内容</text>
<text class="font text_2 codefun-ml-8">{{ pageData.header.searchPlaceholder }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-relative group_3">
......@@ -36,7 +169,7 @@
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper"
>
<text class="font_2 text_4">长沙</text>
<text class="font_2 text_4">{{ pageData.weather.location }}</text>
</view>
<image
class="image_6 codefun-ml-6"
......@@ -44,7 +177,7 @@
/>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_2">
<text class="text_3">08-30 初八</text>
<text class="text_3">{{ pageData.weather.date }}</text>
</view>
</view>
<view class="codefun-flex-row group_5">
......@@ -54,8 +187,10 @@
src="/static/images/codefun/a71412d52492c982e8d3ff9798de3145.png"
/>
<view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-10">
<text class="text_5">36°C</text>
<text class="font_2 text_8 !text-26rpx codefun-mt-16">晴｜适宜喷药</text>
<text class="text_5">{{ pageData.weather.temperature }}</text>
<text class="font_2 text_8 !text-26rpx codefun-mt-16">{{
pageData.weather.condition
}}</text>
</view>
</view>
<view class="codefun-flex-col group_6 codefun-ml-22">
......@@ -74,30 +209,30 @@
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_9"
>
<text class="font_3 text_6">明天</text>
<text class="font_3 text_6">{{ pageData.weather.forecast[0].day }}</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
>
<text class="font_3 text_52">周三</text>
<text class="font_3 text_52">{{ pageData.weather.forecast[1].day }}</text>
</view>
<text class="font_3 text_7">周四</text>
<text class="font_3 text_7">{{ pageData.weather.forecast[2].day }}</text>
</view>
<view class="codefun-flex-row codefun-justify-center">
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
>
<text class="font_4 text_9">24-28°</text>
<text class="font_4 text_9">{{ pageData.weather.forecast[0].temp }}</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1 ml-17"
>
<text class="font_4 text_10">25-29°</text>
<text class="font_4 text_10">{{ pageData.weather.forecast[1].temp }}</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 ml-17"
>
<text class="font_4 text_9">26-31°</text>
<text class="font_4 text_9">{{ pageData.weather.forecast[2].temp }}</text>
</view>
</view>
</view>
......@@ -110,77 +245,45 @@
<view
class="codefun-flex-col codefun-justify-start codefun-shrink-0 text-wrapper_5 codefun-ml-6"
>
<text class="text_12">台风"尤特"12号 预计今晚登陆</text>
<text class="text_12">{{ pageData.weather.warning }}</text>
</view>
</view>
</view>
<view class="codefun-flex-col codefun-relative section_5">
<view class="codefun-flex-row">
<view class="codefun-flex-col codefun-items-center group_10 group_43">
<image
class="image_11"
src="/static/images/codefun/4d9a15cf0dce9c5b1f274f99eb3e4718.png"
/>
<text class="font_2 text_50 mt-11">农业政策</text>
</view>
<view class="codefun-flex-col codefun-items-center group_10 group_42">
<image
class="image_11"
src="/static/images/codefun/24864cd4c6f680714e327688c6ee9977.png"
/>
<text class="font_2 text_13 codefun-mt-12">灵活用工</text>
</view>
<view class="codefun-flex-col codefun-items-center group_10 group_37">
<image
class="image_11"
src="/static/images/codefun/0c9b2418502708fc8414e7b2c04dc8e2.png"
/>
<text class="font_2 text_51 mt-11">可信农资</text>
</view>
<view class="codefun-flex-col codefun-items-center group_10 group_40">
<image
class="image_11"
src="/static/images/codefun/15059d8b705006d875ca9460b696a316.png"
/>
<text class="font_2 mt-11">农机租购</text>
<view
v-for="item in pageData.menuItems"
:key="item.id"
class="codefun-flex-col codefun-items-center group_10"
@click="onMenuItemClick(item)"
>
<image class="image_11" :src="item.icon" />
<text class="font_2 mt-11">{{ item.name }}</text>
</view>
</view>
<view class="codefun-flex-col group_11 codefun-mt-20">
<view class="codefun-flex-row group_38">
<image
class="image_12"
src="/static/images/codefun/9f300d453071240f6f56ff6f83e223db.png"
/>
<image
class="image_12 ml-43"
src="/static/images/codefun/f422ac97718981ce225a7f595779f2be.png"
/>
<image
class="image_12 ml-43"
src="/static/images/codefun/c0669727e6384083a7493979154183a9.png"
/>
<image
class="image_12 ml-43"
src="/static/images/codefun/182a345a5e2d417c944035b240ba2e64.png"
/>
<view class="codefun-flex-col codefun-mt-20">
<view class="codefun-flex-row">
<view
v-for="service in pageData.serviceItems"
:key="service.id"
class="codefun-flex-col codefun-items-center group_10"
@click="onServiceItemClick(service)"
>
<image class="image_11" :src="service.icon" />
<text class="font_2 mt-11">{{ service.name }}</text>
</view>
<view class="codefun-flex-row codefun-justify-between mt-13">
<text class="font_2 text_14">惠农金融</text>
<text class="font_2 text_15">助农保险</text>
<text class="font_2">品牌策划</text>
<text class="font_2 text_16">农知农技</text>
</view>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center section_6">
<view class="codefun-flex-col">
<view class="codefun-flex-row codefun-items-baseline">
<text class="font_5 text_17">最新</text>
<text class="font_2 text_18 ml-11">积极防范持续高温对农作物的影响</text>
<text class="font_5 text_17">{{ pageData.newsItems[0].type }}</text>
<text class="font_2 text_18 ml-11">{{ pageData.newsItems[0].title }}</text>
</view>
<view class="codefun-flex-row codefun-items-baseline">
<text class="font_5 text_19">预警</text>
<text class="text-26 text_20 text_21 ml-11">2025-08-29</text>
<text class="font_5 text_19">{{ pageData.newsItems[1].type }}</text>
<text class="text-26 text_20 text_21 ml-11">{{ pageData.newsItems[1].date }}</text>
</view>
</view>
<image class="image_13" src="/static/images/codefun/64d85a99ca3de5fab9ce0e8dc71aa791.png" />
......@@ -189,68 +292,62 @@
<view class="codefun-self-end section_7" />
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline group_12">
<text class="font_6">热门产地行情</text>
<text class="font_7 text_22">08-30日更新</text>
<text class="font_6">{{ pageData.productMarket.title }}</text>
<text class="font_7 text_22">{{ pageData.productMarket.updateTime }}</text>
</view>
<view class="codefun-flex-row equal-division section_8">
<view class="codefun-flex-col group_13 group_17">
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-center codefun-relative group_41"
v-for="(product, index) in pageData.productMarket.products"
:key="product.id"
class="codefun-flex-col group_13"
:class="{
group_17: index === 0,
group_39: index === 1,
group_21: index === 2,
}"
>
<text class="font_8 text_23">晚稻13号</text>
<text class="font_9 pos">¥4120</text>
</view>
<view class="codefun-flex-row codefun-items-center codefun-self-stretch section_10">
<image
class="codefun-shrink-0 image_14"
src="/static/images/codefun/c6f953be58ac3e9752ab9475a2a53c14.png"
/>
<text class="font_10 text_25 ml-3">+1.2%</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_6"
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-center codefun-relative"
:class="{
group_41: index === 0,
group_20: index === 1,
group_1: index === 2,
}"
>
<text class="font_11">点击关注</text>
<text class="font_8 text_23">{{ product.name }}</text>
<text class="font_9" :class="`pos${index > 0 ? `_${index + 1}` : ''}`">{{
product.price
}}</text>
</view>
</view>
<view class="section_9 horiz-divider" />
<view class="codefun-flex-col group_13 group_39">
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-center codefun-relative group_20"
class="codefun-flex-row codefun-items-center codefun-self-stretch"
:class="{
section_10: product.isUp,
section_11: !product.isUp,
}"
>
<text class="font_8 text_23">晚稻9号</text>
<text class="font_9 pos_2">¥3211</text>
</view>
<view class="codefun-flex-row codefun-items-center codefun-self-stretch section_10">
<image
class="codefun-shrink-0 image_14"
src="/static/images/codefun/c6f953be58ac3e9752ab9475a2a53c14.png"
:src="
product.isUp
? '/static/images/codefun/c6f953be58ac3e9752ab9475a2a53c14.png'
: '/static/images/codefun/c7e797cc626699dcc8999a72145e9f8b.png'
"
/>
<text class="font_10 text_25 ml-3">+1.2%</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_6"
<text
class="font_10 ml-3"
:class="{
text_25: product.isUp,
text_24: !product.isUp,
text_26: !product.isUp,
}"
>
<text class="font_11">点击关注</text>
</view>
</view>
<view class="section_9 horiz-divider" />
<view class="codefun-flex-col group_13 group_21">
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-center codefun-relative group_1"
>
<text class="font_8 text_23">晚稻11号</text>
<text class="font_9 text_24 pos_3">¥2120</text>
</view>
<view class="codefun-flex-row codefun-items-center codefun-self-stretch section_11">
<image
class="codefun-shrink-0 image_14"
src="/static/images/codefun/c7e797cc626699dcc8999a72145e9f8b.png"
/>
<text class="font_10 text_24 text_26">-1.2%</text>
{{ product.change }}
</text>
</view>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_6"
@click="onProductFollowClick(product)"
>
<text class="font_11">点击关注</text>
</view>
......@@ -261,103 +358,57 @@
<text class="font_7 text_20 text_29">实时数据</text>
</view>
<view class="codefun-flex-row equal-division_2 group_16">
<view class="codefun-flex-col section_12 section_18">
<view
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative group_25"
v-for="stat in pageData.serviceStats"
:key="stat.id"
class="codefun-flex-col section_12"
:class="{
section_18: stat.id === 1,
section_1: stat.id === 2,
section_19: stat.id > 2,
}"
@click="onServiceStatClick(stat)"
>
<image
class="image_5 pos_4"
src="/static/images/codefun/15911306636a361a8dc16ce0283f3830.png"
/>
<text class="font_13 text_30">农场入驻</text>
</view>
<view class="codefun-self-start group_28 mt-11">
<text class="font_12 text_47">2,360</text>
<text class="font_7 text_49">个</text>
</view>
</view>
<view class="codefun-flex-col section_12 section_1">
<view
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative group_26"
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative"
:class="{
group_25: stat.id === 1,
group_26: stat.id === 2,
group_27: stat.id > 2,
}"
>
<image
class="image_5 pos_5"
src="/static/images/codefun/1d0cd168eeffbaf37a90aa949c6ad806.png"
/>
<text class="font_13 text_1">空闲农机</text>
</view>
<view class="codefun-self-start group_18 mt-11">
<text class="font_12 text_48">126</text>
<text class="font_7">台</text>
</view>
</view>
<view class="codefun-flex-col section_12 section_19">
<view
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative group_27"
<image class="image_5 mr-1" :class="`pos_${stat.id}`" :src="stat.icon" />
<text
class="font_13"
:class="`text_${stat.id === 1 ? 30 : stat.id === 2 ? 1 : stat.id > 4 ? 46 : 37}`"
>{{ stat.name }}</text
>
<image
class="image_5 pos_6"
src="/static/images/codefun/24dd00386672f240ef00394b746c2ff0.png"
/>
<text class="font_13 text_46">产销对接</text>
</view>
<view class="codefun-self-start group_30 mt-11">
<text class="font_12 text_37">156</text>
<text class="font_7 text_31">笔</text>
</view>
</view>
<view class="codefun-flex-col section_12 section_19">
<view
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative group_27"
class="codefun-flex-row codefun-justify-center codefun-items-baseline mt-11"
:class="{
group_28: stat.id === 1,
group_18: stat.id === 2,
group_30: stat.id > 2,
}"
>
<image
class="image_5 pos_6"
src="/static/images/codefun/3fd6a50eaf22431687a6151df0581156.png"
/>
<text class="font_13 text_46">服务农户</text>
</view>
<view class="codefun-self-start group_30 mt-11">
<text class="font_12 text_37">12,580</text>
<text class="font_7 text_31">人</text>
</view>
</view>
<view class="codefun-flex-col section_12 section_19">
<view
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative group_27"
<text class="font_12" :class="`text_${stat.id === 1 ? 47 : stat.id === 2 ? 48 : 37}`">{{
stat.value
}}</text>
<text
class="font_7"
:class="`text_${stat.id === 1 ? 49 : stat.id === 2 ? '' : stat.id > 4 ? 31 : 31}`"
>{{ stat.unit }}</text
>
<image
class="image_5 pos_6"
src="/static/images/codefun/87773a17a1b64dc686bf935708262002.png"
/>
<text class="font_13 text_46">覆盖面积</text>
</view>
<view class="codefun-self-start group_30 mt-11">
<text class="font_12 text_37">268</text>
<text class="font_7 text_31">km</text>
</view>
</view>
<view class="codefun-flex-col section_12 section_19">
<view
class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative group_27"
>
<image
class="image_5 pos_6"
src="/static/images/codefun/329a4404092545f2924ad095c531cc66.png"
/>
<text class="font_13 text_46">覆盖区县</text>
</view>
<view class="codefun-self-start group_30 mt-11">
<text class="font_12 text_37">21</text>
<text class="font_7 text_31">个</text>
</view>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_19">
<text class="font_6 text_32">农技课堂</text>
<text class="font_7 text_33">查看全部</text>
<text class="font_7 text_33" @click="onViewMoreClass">查看全部</text>
</view>
<view class="codefun-flex-col section_13">
<text class="codefun-self-start font text_34">专家实录—鸡饲养技术</text>
<text class="codefun-self-start font text_34">{{ pageData.agricultureClass.title }}</text>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-13"
>
......@@ -366,9 +417,9 @@
class="codefun-shrink-0 image_15"
src="/static/images/codefun/893f216142f5ca20cf9f2496d9b793c8.png"
/>
<text class="font_14 text_35 ml-5">张教授</text>
<text class="font_14 text_35 ml-5">{{ pageData.agricultureClass.expert }}</text>
</view>
<text class="font_14 text_36">23:15｜2.3万次播放</text>
<text class="font_14 text_36">{{ pageData.agricultureClass.info }}</text>
</view>
<view class="codefun-flex-row codefun-justify-center codefun-self-stretch mt-13">
<view class="section_14" />
......@@ -425,10 +476,9 @@
overflow-y: auto;
overflow-x: hidden;
height: 100%;
padding-bottom: 20rpx;
padding-bottom: 30rpx;
.group {
height: 2530rpx;
.section {
padding: 48rpx 28rpx 220rpx;
background-image: url('/static/images/codefun/1086a098c06f7f52e77bd7a646747a13.png');
......@@ -749,20 +799,12 @@
margin-top: 32.72rpx;
.group_13 {
flex: 1 1 231.34rpx;
height: 184rpx;
.group_41 {
padding: 10rpx 0 4.92rpx;
width: 106rpx;
height: calc(100% - 30rpx);
.pos {
position: absolute;
left: 0;
right: 0;
bottom: 36.54rpx;
}
}
.section_10 {
margin: 0 16rpx;
margin: 24rpx 0 0 0;
padding: 0 14rpx;
background-color: #da14141a;
border-radius: 1998rpx;
......@@ -783,13 +825,6 @@
.group_20 {
padding: 10rpx 0 4.92rpx;
width: 100rpx;
height: calc(100% - 30rpx);
.pos_2 {
position: absolute;
left: 0;
right: 0;
bottom: 36.54rpx;
}
}
.font_8 {
font-size: 28rpx;
......@@ -807,21 +842,14 @@
.group_1 {
padding: 10rpx 0 4.92rpx;
width: 106rpx;
height: calc(100% - 30rpx);
.text_24 {
color: #5db66f;
}
.pos_3 {
position: absolute;
left: 0;
right: 0;
bottom: 36.54rpx;
}
}
.section_11 {
margin: 0 16rpx;
margin: 24rpx 0 0 0;
padding: 0 14rpx;
background-color: #5db66f1a;
background-color: rgba(93, 182, 111, 0.2);
border-radius: 1998rpx;
mix-blend-mode: NOTTHROUGH;
.text_26 {
......@@ -936,12 +964,6 @@
}
.group_27 {
padding: 5.3rpx 0 4.52rpx;
.pos_6 {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.text_46 {
line-height: 22.18rpx;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论