Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 52c973a6 作者: guolinhua
操作

fix(api): 调整首页与农场字段显示

上级 730d68c6
正在显示 包含 262 行增加 和 145 行删除
src/api/model/nongchang.ts
......@@ -3,8 +3,8 @@ import { otherHttp } from '/@/utils/http/axios'
enum Api {
zoneList = '/online/cgform/api/getData/01fd687ecb164aea914e92047e144d66', // 功能菜单数据
agricultureModelsList = '/online/cgform/api/getData/7b2983df6ddf416aba68db8b0ab234ab', // 农业模型数据
baseManagementList = '/online/cgform/api/getData/3a7fbb877f304b7d83935caa454859c4', // 基地管理数据
commonToolsList = '/online/cgform/api/getData/e4e4e6c901254b60b1e7a005097999ec', // 常用工具数据
baseManagementList = '/online/cgform/api/getData/e4e4e6c901254b60b1e7a005097999ec', // 基地管理数据
commonToolsList = '/online/cgform/api/getData/3a7fbb877f304b7d83935caa454859c4', // 常用工具数据
}
/**
......
src/pages.json
......@@ -143,53 +143,43 @@
}
}
},
// pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "Basic APP"
}
},
// ================================ 通用页面分割线 ====================================
// === 关于我们 ===
{
"path": "pages/common/about/index",
"style": {
"navigationBarTitleText": "关于我们"
}
},
// === 问题反馈 ===
{
"path": "pages/common/feedback/index",
"style": {
"navigationBarTitleText": "问题反馈"
}
},
// === Webview ===
{
"path": "pages/common/webview/index",
"style": {
"navigationBarTitleText": ""
}
},
// === PDF 文件预览 ===
{
"path": "pages/common/viewer/pdf",
"style": {
"navigationBarTitleText": ""
}
},
// === 空页面（开发中...） ===
{
"path": "pages/common/coding/coding",
"style": {
// #ifdef H5
"titleNView": false,
// #endif
"navigationBarTitleText": "开发中"
}
},
// === 版本更新 ===
{
"path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
"style": {
......@@ -206,7 +196,6 @@
"disableScroll": true
}
},
// === 应用全屏通知弹窗（场景：应用维护通知、用户通知公告等） ===
{
"path": "pages/common/notice/index",
"style": {
......@@ -230,9 +219,7 @@
"easycom": {
"autoscan": true,
"custom": {
// https://doc.firstui.cn/docs/introduce.html
"^fui-(.*)": "@/components/FirstUI/fui-$1/fui-$1.vue",
// https://ext.dcloud.net.cn/plugin?id=55#detail
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
......
src/pages/linghuoyonggong/linghuoyonggong.vue
......@@ -11,12 +11,14 @@
{ id: 4, name: '采摘' },
{ id: 5, name: '其他' },
],
currentCategoryId: 1,
// 用工类型标签
employmentTabs: [
{ id: 1, name: '推荐用工' },
{ id: 2, name: '我的用工' },
],
currentEmploymentId: 1,
// 用工列表
employmentList: [
......@@ -87,12 +89,14 @@
// 分类标签点击事件
function onCategoryTabClick(tab: any) {
console.log('点击分类标签:', tab)
pageData.currentCategoryId = tab.id
// 在这里添加具体的分类标签点击逻辑
}
// 用工类型标签点击事件
function onEmploymentTabClick(tab: any) {
console.log('点击用工类型标签:', tab)
pageData.currentEmploymentId = tab.id
// 在这里添加具体的用工类型标签点击逻辑
}
......@@ -117,10 +121,13 @@
v-for="tab in pageData.categoryTabs"
:key="tab.id"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="[tab.id === 1 ? 'text-wrapper' : 'text-wrapper_2', tab.id > 1 ? 'codefun-ml-12' : '']"
:class="[
tab.id === pageData.currentCategoryId ? 'text-wrapper' : 'text-wrapper_2',
tab.id > 1 ? 'codefun-ml-12' : '',
]"
@click="onCategoryTabClick(tab)"
>
<text class="font_2" :class="[`text_${tab.id + 1}`]">
<text class="font_2 text_2">
{{ tab.name }}
</text>
</view>
......@@ -130,15 +137,11 @@
<view
v-for="tab in pageData.employmentTabs"
: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' : '',
]"
class="codefun-flex-col codefun-justify-start codefun-items-center text-50p"
:class="[tab.id === pageData.currentEmploymentId ? 'text-wrapper_3' : 'codefun-self-start']"
@click="onEmploymentTabClick(tab)"
>
<text class="font_2" :class="[`text_${tab.id + 6}`]">
<text class="font_2">
{{ tab.name }}
</text>
</view>
......@@ -309,16 +312,25 @@
border-right: solid 2rpx #ffffffcc;
border-top: solid 2rpx #ffffffcc;
border-bottom: solid 2rpx #ffffffcc;
.text-50p {
width: 50%;
padding: 0.75rem 0 1.625rem;
}
.text-wrapper_3 {
padding: 24rpx 0 52rpx;
background-color: #ffffff;
border-radius: 32rpx;
width: 348rpx;
height: 102rpx;
.text_7 {
color: #333333;
line-height: 26.16rpx;
}
.font_2 {
color: #1f2937;
}
}
.codefun-self-start {
.font_2 {
color: #5db66f;
}
}
.text_8 {
margin-top: 20rpx;
......@@ -343,11 +355,11 @@
.font_4 {
font-size: 24rpx;
font-family: DingTalk Sans;
line-height: 22rpx;
// line-height: 22rpx;
color: #999999;
}
.text_10 {
line-height: 23.36rpx;
// line-height: 23.36rpx;
}
}
.image_8 {
......
src/pages/nongchang/nongchang.vue
......@@ -3,6 +3,7 @@
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app'
import Navigate from '@/utils/page/navigate'
import * as HomeAPI from '@/api/model/home'
import * as NongChangAPI from '@/api/model/nongchang'
onShow(() => {
......@@ -14,6 +15,8 @@
getBaseManagementList()
// 获取常用工具数据
getCommonToolsList()
// 农技课堂
getAgricultureClassList()
})
// 下拉刷新
......@@ -54,30 +57,30 @@
// 农业模型
agricultureModels: [
{
id: 1,
image: '/static/images/codefun/d8106d6756782001856157ea8933e6f0.png',
name: '柑橘模型',
description: '精准预测柑橘生长周期',
actionText: '查看介绍',
link: '/pages/nongyedamoxing/nongyedamoxing',
},
{
id: 2,
image: '/static/images/codefun/2716e8578a8409fc69b6b25ca47dd988.png',
name: '作物生长监测',
description: 'AI识别生长状况',
actionText: '查看介绍',
link: '/pages/nongyedamoxing/nongyedamoxing',
},
{
id: 3,
image: '/static/images/codefun/f29a54a031b5665bf1522b973b109416.png',
name: '产能模型',
description: '基于作物生长状况产能构建模型',
actionText: '查看介绍',
link: '/pages/nongyedamoxing/nongyedamoxing',
},
// {
// id: 1,
// image: '/static/images/codefun/d8106d6756782001856157ea8933e6f0.png',
// name: '柑橘模型',
// description: '精准预测柑橘生长周期',
// actionText: '查看介绍',
// link: '/pages/nongyedamoxing/nongyedamoxing',
// },
// {
// id: 2,
// image: '/static/images/codefun/2716e8578a8409fc69b6b25ca47dd988.png',
// name: '作物生长监测',
// description: 'AI识别生长状况',
// actionText: '查看介绍',
// link: '/pages/nongyedamoxing/nongyedamoxing',
// },
// {
// id: 3,
// image: '/static/images/codefun/f29a54a031b5665bf1522b973b109416.png',
// name: '产能模型',
// description: '基于作物生长状况产能构建模型',
// actionText: '查看介绍',
// link: '/pages/nongyedamoxing/nongyedamoxing',
// },
],
// 灵活用工
......@@ -89,41 +92,41 @@
// 基地管理
baseManagement: [
{
id: 1,
name: '基础信息',
icon: '/static/images/codefun/652ff68221e41e59bd253d90a260a9d2.png',
value: 3,
unit: '个',
},
{
id: 2,
name: '作物管理',
icon: '/static/images/codefun/73f2cd7926e10ad8d0222682c6f0dd44.png',
value: 3,
unit: '种',
},
{
id: 3,
name: '农资管理',
icon: '/static/images/codefun/d5224faf803b94f41aea2c682a8b30fe.png',
value: 4,
unit: '项',
},
{
id: 4,
name: '销售记录',
icon: '/static/images/codefun/9489121f8d1fa3d7847a2ef3e45b8753.png',
value: 5,
unit: '笔',
},
{
id: 5,
name: '收支概览',
icon: '/static/images/codefun/68ae1a4d9d9f5bcd80dd2a4603ac7cdf.png',
value: 8300,
unit: '元',
},
// {
// id: 1,
// name: '基础信息',
// icon: '/static/images/codefun/652ff68221e41e59bd253d90a260a9d2.png',
// value: 3,
// unit: '个',
// },
// {
// id: 2,
// name: '作物管理',
// icon: '/static/images/codefun/73f2cd7926e10ad8d0222682c6f0dd44.png',
// value: 3,
// unit: '种',
// },
// {
// id: 3,
// name: '农资管理',
// icon: '/static/images/codefun/d5224faf803b94f41aea2c682a8b30fe.png',
// value: 4,
// unit: '项',
// },
// {
// id: 4,
// name: '销售记录',
// icon: '/static/images/codefun/9489121f8d1fa3d7847a2ef3e45b8753.png',
// value: 5,
// unit: '笔',
// },
// {
// id: 5,
// name: '收支概览',
// icon: '/static/images/codefun/68ae1a4d9d9f5bcd80dd2a4603ac7cdf.png',
// value: 8300,
// unit: '元',
// },
],
// 监测预警图表数据
......@@ -207,9 +210,10 @@
// 农技学习
agricultureClass: {
title: '专家实录—鸡饲养技术',
expert: '张教授',
info: '23:15｜2.3万次播放',
time: '',
videoList: [],
},
current: 0,
})
function getZoomList() {
......@@ -225,26 +229,43 @@
})
}
function getAgricultureModelsList() {
NongChangAPI.agricultureModelsList().then((res) => {
NongChangAPI.agricultureModelsList({
status: 1,
}).then((res) => {
const { records } = res
pageData.agricultureModels = []
pageData.agricultureModels = records
})
}
function getBaseManagementList() {
NongChangAPI.baseManagementList().then((res) => {
NongChangAPI.baseManagementList({
pageNo: 1,
pageSize: 5,
status: 1,
}).then((res) => {
const { records } = res
pageData.baseManagement = []
pageData.baseManagement = records
})
}
function getCommonToolsList() {
NongChangAPI.commonToolsList().then((res) => {
NongChangAPI.commonToolsList({
status: 1,
}).then((res) => {
const { records } = res
pageData.commonTools = []
pageData.commonTools = records
})
}
function getAgricultureClassList() {
HomeAPI.agricultureClassList({
status: 1,
}).then((res) => {
const { records } = res
pageData.agricultureClass.videoList = records
pageData.agricultureClass.title = records[0]?.title
})
}
// 菜单点击事件
function onMenuItemClick(item: any) {
......@@ -258,7 +279,7 @@
// 在这里添加具体的农业模型点击逻辑
// 打开模型详情页面
Navigate.to(model.link)
Navigate.to('/pages/nongyedamoxing/nongyedamoxing')
}
// 基地管理点击事件
......@@ -302,6 +323,18 @@
console.log('点击常用工具:', tool)
// 在这里添加具体的常用工具点击逻辑
}
// 轮播视频切换的时候触发
function handleChangeVideo(e: any) {
// console.log('切换视频', e.detail.current)
pageData.current = e.detail.current
pageData.agricultureClass.title = pageData.agricultureClass.videoList[pageData.current]?.title
}
// 获取视频时长
function handleMetadataLoaded(e: any) {
pageData.agricultureClass.time = e.target.duration
}
</script>
<template>
......@@ -372,14 +405,14 @@
<view class="codefun-flex-row equal-division_3">
<template v-for="(model, index) in pageData.agricultureModels" :key="model.id">
<view class="codefun-flex-col equal-division-item_5 group_11">
<image class="codefun-self-center image_7" :src="model.image" />
<image class="codefun-self-center image_7" :src="model.icon_url" />
<text class="codefun-self-center font_5 text_18">{{ model.name }}</text>
<text class="codefun-self-center font_7 text_21">{{ model.description }}</text>
<text class="codefun-self-center font_7 text_21">{{ model.describes }}</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center text-wrapper_3"
@click="onAgricultureModelClick(model)"
>
<text class="font_8 text_24">{{ model.actionText }}</text>
<text class="font_8 text_24">查看介绍</text>
</view>
</view>
......@@ -428,14 +461,13 @@
<view
v-for="item in pageData.baseManagement"
:key="item.id"
class="codefun-flex-col codefun-items-start section_11 equal-division-item_7"
:class="{ 'ml-9': item.id > 1 }"
class="codefun-flex-col codefun-items-start section_11 equal-division-item_7 ml-9"
@click="onBaseManagementClick(item)"
>
<image :class="item.id === 1 ? 'image_10' : 'image_5'" :src="item.icon" />
<image class="image_5" :src="item.icon" />
<text class="font_11" :class="`text_${30 + item.id - 1}`">{{ item.name }}</text>
<view :class="`group_${15 + item.id}`">
<text class="font_12" :class="`text_${35 + item.id - 1}`">{{ item.value }}</text>
<view class="group_25">
<text class="font_12" :class="`text_${35 + item.id - 1}`">{{ item.num }}</text>
<text class="font_10" :class="`text_${35 + item.id + 3}`">{{ item.unit }}</text>
</view>
</view>
......@@ -602,6 +634,54 @@
<text class="font_6 text_43 text_67" @click="onViewMoreClass">查看更多</text>
</view>
<view class="codefun-flex-col section_20">
<fui-swiper-dot
:items="pageData.agricultureClass.videoList"
:current="pageData.current"
:styles="{
height: 10,
activeWidth: 40,
background: '#dff0e2',
activeBackground: '#5db66f',
bottom: 10,
}"
>
<swiper
class="fui-banner__wrap"
circular
:indicator-dots="false"
autoplay
:interval="4000"
:duration="150"
@change="handleChangeVideo"
>
<swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index">
<video
:src="video.media_video"
:poster="video.cover_image"
:controls="false"
style="width: 654rpx; height: 358rpx"
@loadedmetadata="handleMetadataLoaded"
></video>
</swiper-item>
</swiper>
</fui-swiper-dot>
<view class="describe">
<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"
>
<!-- <view class="codefun-flex-row codefun-items-center">
<image
class="codefun-shrink-0 image_15"
src="/static/images/codefun/893f216142f5ca20cf9f2496d9b793c8.png"
/>
<text class="font_14 text_35 ml-5">{{ pageData.agricultureClass.expert }}</text>
</view> -->
<text class="font_14 text_36">{{ pageData.agricultureClass.time }}</text>
</view>
</view>
</view>
<!-- <view class="codefun-flex-col section_20">
<text class="codefun-self-start font_2 text_68">{{ pageData.agricultureClass.title }}</text>
<view
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_31"
......@@ -635,7 +715,7 @@
/>
</view>
</view>
</view>
</view> -->
</view>
</view>
</view>
......@@ -1444,16 +1524,47 @@
.group_30 {
margin-top: 48rpx;
.section_20 {
position: relative;
margin-right: 28rpx;
padding: 272rpx 36rpx 22rpx 48rpx;
margin-top: 32.86rpx;
height: 418rpx;
// padding: 271.06rpx 36.64rpx 22rpx 48rpx;
padding: 20rpx;
padding-bottom: 0;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
background-image: url('/static/images/codefun/de7f2f0177d74c2b9c784b3825ea9832.png');
background-size: 94%;
background-repeat: no-repeat;
background-position-x: 20rpx;
background-position-y: 20rpx;
// background-image: url('/static/images/codefun/de7f2f0177d74c2b9c784b3825ea9832.png');
// background-size: 94%;
// background-repeat: no-repeat;
// background-position-x: 20rpx;
// background-position-y: 20rpx;
.fui-banner__item {
height: 358rpx;
border-radius: 20rpx;
}
.fui-banner__wrap {
height: 358rpx;
:deep(.uni-video-cover) {
.uni-video-cover-play-button {
width: 70rpx;
height: 70rpx;
line-height: 40rpx;
font-size: 56rpx;
}
}
}
.describe {
width: 88%;
position: absolute;
bottom: 52rpx;
left: 40rpx;
.text_34 {
color: #ffffff;
}
}
.text_68 {
line-height: 26.58rpx;
}
......@@ -1525,7 +1636,6 @@
}
.font {
font-size: 32rpx;
line-height: 29.32rpx;
color: #333333;
}
......
src/pages/nongjifuwu/nongjifuwu.vue
<script>
export default {
components: {},
props: {},
data() {
return {}
},
<script setup lang="ts">
import { reactive } from 'vue'
methods: {},
const pageData = reactive({
// 分类标签
categoryTabs: [
{ id: 1, name: '找农机' },
{ id: 2, name: '干农活' },
],
currentCategoryId: 1,
})
// 分类标签点击事件
function onCategoryTabClick(tab: any) {
console.log('点击分类标签:', tab)
pageData.currentCategoryId = tab.id
// 在这里添加具体的分类标签点击逻辑
}
</script>
......@@ -24,10 +32,17 @@
</view>
</view>
<view class="codefun-flex-row section_3">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_2 text_4">找农机</text>
<view
v-for="item in pageData.categoryTabs"
:key="item.id"
class="codefun-flex-col codefun-justify-start codefun-items-center text-50p"
:class="item.id === pageData.currentCategoryId ? 'text-wrapper' : ''"
@click="onCategoryTabClick(item)"
>
<text class="font_2" :class="item.id === pageData.currentCategoryId ? 'text_4' : 'text_5'">{{
item.name
}}</text>
</view>
<text class="codefun-self-start font_2 text_5 codefun-ml-56">干农活</text>
</view>
<view class="codefun-flex-col codefun-relative section_4">
<view class="codefun-flex-row group_6">
......@@ -272,18 +287,20 @@
background-color: #ffffff66;
border-radius: 32rpx;
border: solid 2rpx #ffffffcc;
.text-50p {
width: 50%;
height: 102rpx;
padding: 0.75rem 0 1.625rem;
}
.text-wrapper {
padding: 24rpx 0 56rpx;
background-color: #ffffff;
border-radius: 32rpx;
width: 348rpx;
height: 102rpx;
.text_4 {
line-height: 26.02rpx;
}
}
.text_5 {
margin-top: 24rpx;
color: #5db66f;
line-height: 25.82rpx;
}
......
src/pages/nongyedamoxing/nongyedamoxing.vue
<script>
export default {
components: {},
props: {},
data() {
return {}
},
methods: {},
}
</script>
<script setup lang="ts"></script>
<template>
<view class="codefun-flex-col page">
......
src/pages/shouye/shouye.vue
......@@ -220,7 +220,9 @@
})
}
function getProductMarketList() {
HomeAPI.productMarketList().then((res) => {
HomeAPI.productMarketList({
status: 1,
}).then((res) => {
const { records } = res
console.log(res)
pageData.productMarket.products = records
......@@ -237,13 +239,17 @@
})
}
function getServiceStatsList() {
HomeAPI.serviceStatsList().then((res) => {
HomeAPI.serviceStatsList({
status: 1,
}).then((res) => {
const { records } = res
pageData.serviceStats = records
})
}
function getAgricultureClassList() {
HomeAPI.agricultureClassList().then((res) => {
HomeAPI.agricultureClassList({
status: 1,
}).then((res) => {
const { records } = res
pageData.agricultureClass.videoList = records
pageData.agricultureClass.title = records[0]?.title
......@@ -462,12 +468,7 @@
}"
>
<view
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,
}"
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-center codefun-relative group_1"
>
<text class="font_8 text_23">{{ product.name }}</text>
<text class="font_9 text_23" :class="`pos${index > 0 ? `_${index + 1}` : ''}`">{{
......@@ -992,7 +993,7 @@
}
.group_1 {
padding: 10rpx 0 4.92rpx;
width: 106rpx;
// width: 106rpx;
.text_24 {
color: #5db66f;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论