Skip to content

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

feat: 我的农场页面将静态页面改为数据驱动

上级 6616765c
正在显示 包含 305 行增加 和 153 行删除
src/pages/wode/wode.vue
<script>
export default {
components: {},
props: {},
data() {
return {
items: [null, null, null],
}
<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({
// 用户信息
userInfo: {
avatar: '/static/images/codefun/8653455b786fbf94ae1c3946f11e7d40.png',
farmName: '007农场',
certification: {
icon: '/static/images/codefun/b6079649e1f0ba231d158cb10bea118f.png',
text: '已认证农场主',
},
farmDescription: '华北绿色农业示范基地',
settingsIcon: '/static/images/codefun/1458747d012f7cb820f99627876e8fa6.png',
},
// 统计数据
statistics: [
{ id: 1, value: '44', label: '我的基地' },
{ id: 2, value: '¥3266', label: '累计收益' },
{ id: 3, value: '8', label: '服务订单' },
],
// 消息中心
messageCenter: {
icon: '/static/images/codefun/41d4366b8b071c40d285a8f48c696d8a.png',
title: '消息中心',
description: '预警通知/服务进度/订单状态',
notificationCount: '6',
arrowIcon: '/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png',
},
methods: {},
// 功能模块
features: [
{
id: 1,
icon: '/static/images/codefun/a1b5d5fd677e3e3c32cdfe7a476aee19.png',
title: '资源库',
count: '38个资源可用',
description: '合同模板/政策文件/财务表',
status: '离线可用',
statusClass: 'text_14',
arrowIcon: '/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png',
},
{
id: 2,
icon: '/static/images/codefun/d38158bc612aa1c6a022fae41afd8a42.png',
title: '物联设备',
count: '2台在线',
description: '灌溉设备/气象站绑定管理',
actionText: '添加设备',
arrowIcon: '/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png',
addIcon: '/static/images/codefun/2ff61f748e26b18760ca166aa8cfa15a.png',
},
],
onPullDownRefresh() {
setTimeout(function () {
uni.stopPullDownRefresh()
Message.toast('刷新成功')
}, 1000)
// 常用资源
commonResources: {
title: '常用资源',
actionText: '全部',
resources: [
{
id: 1,
icon: '/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png',
title: '水稻种植合同模版',
size: '125kb',
actionText: '下载',
},
{
id: 2,
icon: '/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png',
title: '玉米种植技术指南',
size: '210kb',
actionText: '下载',
},
{
id: 3,
icon: '/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png',
title: '肥料使用记录表',
size: '86kb',
actionText: '下载',
},
],
},
// 我的设备
myDevices: {
title: '我的设备',
actionText: '添加设备',
devices: [
{
id: 1,
image: '/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png',
name: '智能灌溉控制器',
lastConnection: '上次链接：10分钟前',
status: '正常',
statusIcon: '/static/images/codefun/e9da7be7465ae5310ccbc8a61ec653af.png',
statusClass: 'text_24',
},
{
id: 2,
image: '/static/images/codefun/81937c2666c800cf5966c29c2891b7c4.png',
name: '土壤监测传感器',
lastConnection: '上次链接：10分钟前',
status: '离线',
statusIcon: '/static/images/codefun/1d16bdeaf73b863640e5855843a54682.png',
},
],
},
// 客服与帮助
support: {
services: [
{
id: 1,
icon: '/static/images/codefun/e4267d4e96c1020d60dfbbf315b662cb.png',
title: '在线客服',
arrowIcon: '/static/images/codefun/543b9b7cb3072527207b45b678ca5794.png',
},
],
helps: [
{
id: 1,
icon: '/static/images/codefun/46ebd858a611104ee741fc252ca6f0ce.png',
title: '帮助中心',
arrowIcon: '/static/images/codefun/0314db942874f91963bc16e91b9798bc.png',
},
{
id: 2,
icon: '/static/images/codefun/559cc3a424e888da63761cafa26dad82.png',
title: '问题反馈',
arrowIcon: '/static/images/codefun/0314db942874f91963bc16e91b9798bc.png',
},
],
},
})
// 用户信息设置点击事件
function onSettingsClick() {
console.log('点击设置')
// 在这里添加具体的设置点击逻辑
}
// 消息中心点击事件
function onMessageCenterClick() {
console.log('点击消息中心')
// 在这里添加具体的消息中心点击逻辑
}
// 功能模块点击事件
function onFeatureClick(feature: any) {
console.log('点击功能模块:', feature)
// 在这里添加具体的功能模块点击逻辑
}
// 常用资源点击事件
function onResourceClick(resource: any) {
console.log('点击资源:', resource)
// 在这里添加具体的资源点击逻辑
}
// 资源下载点击事件
function onDownloadClick(resource: any) {
console.log('点击下载:', resource)
// 在这里添加具体的下载点击逻辑
}
// 查看所有资源
function onViewAllResources() {
console.log('查看所有资源')
// 在这里添加具体的查看所有资源逻辑
}
// 我的设备标题点击事件
function onMyDevicesTitleClick() {
console.log('点击我的设备标题')
// 在这里添加具体的设备标题点击逻辑
}
// 设备点击事件
function onDeviceClick(device: any) {
console.log('点击设备:', device)
// 在这里添加具体的设备点击逻辑
}
// 客服点击事件
function onServiceClick(service: any) {
console.log('点击客服:', service)
// 在这里添加具体的客服点击逻辑
}
// 帮助点击事件
function onHelpClick(help: any) {
console.log('点击帮助:', help)
// 在这里添加具体的帮助点击逻辑
}
</script>
......@@ -25,236 +212,201 @@
<view class="codefun-flex-col section">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_4">
<view class="codefun-flex-row">
<image class="image_6" src="/static/images/codefun/8653455b786fbf94ae1c3946f11e7d40.png" />
<image class="image_6" :src="pageData.userInfo.avatar" />
<view class="codefun-flex-col group_5 codefun-ml-8">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<text class="font_2 text_2">007农场</text>
<text class="font_2 text_2">{{ pageData.userInfo.farmName }}</text>
<view
class="codefun-flex-row codefun-items-center codefun-shrink-0 section_2 codefun-ml-6"
>
<image
class="codefun-shrink-0 image_7"
src="/static/images/codefun/b6079649e1f0ba231d158cb10bea118f.png"
:src="pageData.userInfo.certification.icon"
/>
<text class="font_3 text_3 codefun-ml-4">已认证农场主</text>
<text class="font_3 text_3 codefun-ml-4">{{
pageData.userInfo.certification.text
}}</text>
</view>
</view>
<text class="codefun-self-start font_1 codefun-mt-10">华北绿色农业示范基地</text>
<text class="codefun-self-start font_1 codefun-mt-10">{{
pageData.userInfo.farmDescription
}}</text>
</view>
</view>
<image class="image_8 image_9" src="/static/images/codefun/1458747d012f7cb820f99627876e8fa6.png" />
<image class="image_8 image_9" :src="pageData.userInfo.settingsIcon" @click="onSettingsClick" />
</view>
<view class="codefun-flex-col codefun-justify-start section_3">
<view class="codefun-flex-row">
<view class="codefun-flex-col codefun-items-center group_6 equal-division-item">
<text class="font_4">44</text>
<text class="font_5 codefun-mt-16">我的基地</text>
</view>
<view class="codefun-flex-col codefun-items-center group_6 equal-division-item codefun-ml-32">
<text class="font_4">¥3266</text>
<text class="font_5 codefun-mt-16">累计收益</text>
</view>
<view class="codefun-flex-col codefun-items-center group_6 equal-division-item codefun-ml-32">
<text class="font_4">8</text>
<text class="font_5 codefun-mt-16">服务订单</text>
<view
v-for="stat in pageData.statistics"
:key="stat.id"
class="codefun-flex-col codefun-items-center group_6 equal-division-item"
:class="{ 'codefun-ml-32': stat.id > 1 }"
>
<text class="font_4">{{ stat.value }}</text>
<text class="font_5 codefun-mt-16">{{ stat.label }}</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-col codefun-relative group_7">
<view class="codefun-flex-col">
<view class="codefun-flex-row codefun-justify-between codefun-items-center section_12">
<view
class="codefun-flex-row codefun-justify-between codefun-items-center section_12"
@click="onMessageCenterClick"
>
<view class="codefun-flex-row group_8">
<image class="image_10" src="/static/images/codefun/41d4366b8b071c40d285a8f48c696d8a.png" />
<image class="image_10" :src="pageData.messageCenter.icon" />
<view class="codefun-flex-col group_9 codefun-ml-12">
<text class="codefun-self-start font">消息中心</text>
<text class="codefun-self-start font">{{ pageData.messageCenter.title }}</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch text-wrapper_2 codefun-mt-4"
>
<text class="font_7">预警通知/服务进度/订单状态</text>
<text class="font_7">{{ pageData.messageCenter.description }}</text>
</view>
</view>
</view>
<view class="codefun-flex-row codefun-items-center group_10">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_1 !lh-26rpx">6</text>
<text class="font_1 !lh-26rpx">{{ pageData.messageCenter.notificationCount }}</text>
</view>
<image
class="image_11 codefun-ml-12"
src="/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png"
/>
<image class="image_11 codefun-ml-12" :src="pageData.messageCenter.arrowIcon" />
</view>
</view>
<view class="codefun-flex-row equal-division codefun-mt-12">
<view class="codefun-flex-col section_5 section_11">
<view
v-for="(feature, index) in pageData.features"
:key="feature.id"
class="codefun-flex-col section_5 section_11"
:class="{ 'codefun-ml-12': index > 0 }"
@click="onFeatureClick(feature)"
>
<view class="codefun-flex-row codefun-self-stretch">
<view class="codefun-flex-row codefun-items-center codefun-flex-1">
<image
class="codefun-shrink-0 image_10"
src="/static/images/codefun/a1b5d5fd677e3e3c32cdfe7a476aee19.png"
/>
<image class="codefun-shrink-0 image_10" :src="feature.icon" />
<view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-8">
<text class="font">资源库</text>
<text class="font_8 codefun-mt-8">38个资源可用</text>
<text class="font">{{ feature.title }}</text>
<text class="font_8 codefun-mt-8">{{ feature.count }}</text>
</view>
</view>
<image
class="codefun-shrink-0 codefun-self-start image_11 image_12 codefun-ml-8"
src="/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png"
class="codefun-shrink-0 codefun-self-start image_11"
:class="{
image_12: feature.id === 1,
image_13: feature.id === 2,
'codefun-ml-8': feature.id === 1,
}"
:src="feature.arrowIcon"
/>
</view>
<text class="codefun-self-stretch font_7 codefun-mt-10">合同模板/政策文件/财务表</text>
<text class="codefun-self-stretch font_7 codefun-mt-10">{{ feature.description }}</text>
<view
v-if="feature.status"
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start view mt-2"
>
<text class="font_6 text_14">离线可用</text>
<text class="font_6" :class="feature.statusClass">{{ feature.status }}</text>
</view>
</view>
<view class="codefun-flex-col section_5 section_11 codefun-ml-12">
<view class="codefun-flex-row codefun-self-stretch">
<image
class="codefun-shrink-0 image_10"
src="/static/images/codefun/d38158bc612aa1c6a022fae41afd8a42.png"
/>
<view
class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-self-center group_12"
>
<text class="font">物联设备</text>
<text class="font_8 codefun-mt-8">2台在线</text>
</view>
<image
class="codefun-shrink-0 codefun-self-start image_11 image_13"
src="/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png"
/>
</view>
<text class="codefun-self-stretch font_7 codefun-mt-10">灌溉设备/气象站绑定管理</text>
<view
v-if="feature.actionText && feature.addIcon"
class="codefun-flex-row codefun-justify-evenly codefun-items-center codefun-self-start view_2 mt-2"
>
<image
class="image_14"
src="/static/images/codefun/2ff61f748e26b18760ca166aa8cfa15a.png"
/>
<text class="font_3">添加设备</text>
<image class="image_14" :src="feature.addIcon" />
<text class="font_3">{{ feature.actionText }}</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-col codefun-mt-24">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_13">
<text class="font_2">常用资源</text>
<text class="font_3 text_16">全部</text>
<text class="font_2">{{ pageData.commonResources.title }}</text>
<text class="font_3 text_16" @click="onViewAllResources">{{
pageData.commonResources.actionText
}}</text>
</view>
<view class="codefun-flex-col list">
<view
class="codefun-flex-row codefun-justify-between codefun-items-center list-item codefun-mt-24"
v-for="(item, index) in items"
:key="index"
v-for="resource in pageData.commonResources.resources"
:key="resource.id"
@click="onResourceClick(resource)"
>
<view class="codefun-flex-row">
<image
class="image_15"
src="/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png"
/>
<image class="image_15" :src="resource.icon" />
<view class="codefun-flex-col codefun-items-start group_14 codefun-ml-12">
<text class="font_9">水稻种植合同模版</text>
<text class="font_6 codefun-mt-12">125kb</text>
<text class="font_9">{{ resource.title }}</text>
<text class="font_6 codefun-mt-12">{{ resource.size }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
<text class="font_10">下载</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
@click.stop="onDownloadClick(resource)"
>
<text class="font_10">{{ resource.actionText }}</text>
</view>
</view>
</view>
</view>
<view class="codefun-flex-col codefun-mt-24">
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline">
<text class="font_2">我的设备</text>
<text class="font_3 text_22">添加设备</text>
<text class="font_2">{{ pageData.myDevices.title }}</text>
<text class="font_3 text_22" @click="onMyDevicesTitleClick">{{
pageData.myDevices.actionText
}}</text>
</view>
<view class="codefun-flex-col codefun-mt-16">
<view class="codefun-flex-col section_12">
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
<view class="codefun-flex-row codefun-items-center">
<image
class="image_17"
src="/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png"
/>
<view class="codefun-flex-col codefun-items-start codefun-ml-8">
<text class="font_11">智能灌溉控制器</text>
<text class="font_6 codefun-mt-12">上次链接：10分钟前</text>
</view>
</view>
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_18"
src="/static/images/codefun/e9da7be7465ae5310ccbc8a61ec653af.png"
/>
<text class="font_6 text_24 codefun-ml-4">正常</text>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-mt-16">
<view
class="codefun-flex-row codefun-justify-between codefun-items-center"
v-for="(device, index) in pageData.myDevices.devices"
:key="device.id"
:class="{ 'codefun-mt-16': index > 0 }"
@click="onDeviceClick(device)"
>
<view class="codefun-flex-row codefun-items-center">
<image
class="image_17"
src="/static/images/codefun/81937c2666c800cf5966c29c2891b7c4.png"
/>
<image class="image_17" :src="device.image" />
<view class="codefun-flex-col codefun-items-start codefun-ml-8">
<text class="font_11">智能灌溉控制器</text>
<text class="font_6 codefun-mt-12">上次链接：10分钟前</text>
<text class="font_11">{{ device.name }}</text>
<text class="font_6 codefun-mt-12">{{ device.lastConnection }}</text>
</view>
</view>
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_18"
src="/static/images/codefun/1d16bdeaf73b863640e5855843a54682.png"
/>
<text class="font_6 codefun-ml-4">离线</text>
<image class="codefun-shrink-0 image_18" :src="device.statusIcon" />
<text
class="font_6"
:class="device.statusClass || ''"
:style="{ color: device.status === '正常' ? '#13e000' : '#999999' }"
>
{{ device.status }}
</text>
</view>
</view>
</view>
<view class="codefun-flex-col section_9 codefun-mt-12">
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
<view
class="codefun-flex-row codefun-justify-between codefun-items-center"
v-for="service in pageData.support.services"
:key="service.id"
@click="onServiceClick(service)"
>
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_19"
src="/static/images/codefun/e4267d4e96c1020d60dfbbf315b662cb.png"
/>
<text class="font_13 codefun-ml-8">在线客服</text>
<image class="codefun-shrink-0 image_19" :src="service.icon" />
<text class="font_13 codefun-ml-8">{{ service.title }}</text>
</view>
<image
class="image_20"
src="/static/images/codefun/543b9b7cb3072527207b45b678ca5794.png"
/>
<image class="image_20" :src="service.arrowIcon" />
</view>
<view class="codefun-flex-col codefun-mt-20">
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_21"
src="/static/images/codefun/46ebd858a611104ee741fc252ca6f0ce.png"
/>
<text class="font_13 codefun-ml-8">帮助中心</text>
</view>
<image
class="image_20"
src="/static/images/codefun/0314db942874f91963bc16e91b9798bc.png"
/>
</view>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-mt-20"
class="codefun-flex-row codefun-justify-between codefun-items-center"
v-for="help in pageData.support.helps"
:key="help.id"
:class="{ 'codefun-mt-20': help.id > 1 }"
@click="onHelpClick(help)"
>
<view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_8"
src="/static/images/codefun/559cc3a424e888da63761cafa26dad82.png"
/>
<text class="font_13 codefun-ml-8">问题反馈</text>
<image class="codefun-shrink-0 image_21" :src="help.icon" />
<text class="font_13 codefun-ml-8">{{ help.title }}</text>
</view>
<image
class="image_20"
src="/static/images/codefun/0314db942874f91963bc16e91b9798bc.png"
/>
<image class="image_20" :src="help.arrowIcon" />
</view>
</view>
</view>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论