Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 7735899f 作者: 王定
操作

feat: 完成灵活用工列表页面

上级 239ddaca
正在显示 包含 239 行增加 和 44 行删除
.env.development
# API 接口地址
VITE_GLOB_API_URL=http://111.22.182.169:49600
# VITE_GLOB_API_URL=http://36.133.16.81:42111
# VITE_GLOB_API_URL=http://111.22.182.169:49600
VITE_GLOB_API_URL=http://36.133.16.81:42111
# API 接口地址前缀
VITE_GLOB_API_URL_PREFIX=/jeecgboot
# VITE_GLOB_API_URL_PREFIX=/jeecg-boot
# VITE_GLOB_API_URL_PREFIX=/jeecgboot
VITE_GLOB_API_URL_PREFIX=/jeecg-boot
src/pages.json
......@@ -414,6 +414,19 @@
}
},
{
"path": "pages/linghuoyonggong/details",
"style": {
"navigationBarTitleText": "详情",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#5DB66F",
"navigationBarTextStyle": "white",
"backgroundColorBottom": "#F2F2F2",
"app-plus": {
"titleNView": {}
}
}
},
{
"path": "pages/zhunongjinrong/zhunongjinrong",
"style": {
"navigationBarTitleText": "助农金融",
......
src/pages/linghuoyonggong/details.vue 0 → 100644
<script setup lang="ts">
import { reactive, toRefs } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
onLoad((option) => {
console.log(option.id);
uni.setNavigationBarTitle({
title: '详情'+option.id
});
})
onShow(() => {
})
const pageData = reactive({
loading: false,
options: {
area: [],
urgentdegree: [],
type: [],
},
position: [],
})
</script>
<template>
<view class="details_page">
</view>
<fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
</template>
<style lang="scss" scoped>
.details_page{
background: rgba(230, 245, 232, 1);
min-height: 100vh;
width: 750rpx;
}
</style>
src/pages/linghuoyonggong/linghuoyonggong.vue
......@@ -10,16 +10,16 @@
const userStore = useUserStore()
onLoad((option) => {
pageData.currentEmploymentId = Number(option.type) || 1
pageData.currentEmploymentId = Number(option.type) || 2
})
onShow(() => {
pageData.search.pageNo = 1
if (pageData.currentEmploymentId === 1) {
pageData.search.publishstatu = 1
if (pageData.currentEmploymentId === 2) {
pageData.search.publishstatu = 2
pageData.search.createBy = ''
}
if (pageData.currentEmploymentId === 2) {
if (pageData.currentEmploymentId === 1) {
pageData.search.createBy = userStore.getUserInfo.username
}
pageData.employmentList = []
......@@ -29,27 +29,19 @@
// 页面数据
const pageData = reactive({
loading: false,
// 分类标签
categoryTabs: [
{ id: null, name: '全部' },
{ id: 1, name: '种植' },
{ id: 2, name: '养殖' },
{ id: 3, name: '采摘' },
{ id: 4, name: '其他' },
],
search: {
pageNo: 1,
pageSize: 10,
publishstatu: 1,
publishstatu: 2,
type: null,
createBy: '',
},
// 用工类型标签
employmentTabs: [
{ id: 1, name: '出工赚钱' },
{ id: 2, name: '找人干活' },
{ id: 1, name: '出工赚钱' },
],
currentEmploymentId: 1,
currentEmploymentId: 2,
// 用工列表
employmentList: [],
......@@ -112,9 +104,60 @@
pageData.requestDebounce = setTimeout(async () => {
try {
const res = await fetchWithRetry(() => LinghuoyonggongAPI.employmentList(pageData.search))
const { records, total } = res
/* const res = await fetchWithRetry(() => LinghuoyonggongAPI.employmentList(pageData.search))
const { records, total } = res */
const total = 18;
const records = [
{
"id": "1",
"updateBy": "admin",
"updateTime": "2025/12/17",
"sysOrgCode": "技术部",
"name": "名称",
"picture": "https://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
"type": "种值",
"content": "工作内容",
"workers": 101,
"price": 220,
"area": "张家界市",
"address": "荷花村",
"longitude": "110.465501",
"latitude": "29.114429",
"urgentdegree": 1,
"starttime": "2025-12-17",
"estimatedendtime": "2025-12-19",
"createBy": "老王",
"createTime": "2025-12-17",
"reviewstatu": "审核状态",
"reviewinfo": " 审核信息",
"publishstatu": "发布状态"
},
{
"id": "1",
"updateBy": "admin",
"updateTime": "2025/12/17",
"sysOrgCode": "技术部",
"name": "名称2",
"picture": "https://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
"type": "种值2",
"content": "工作内容",
"workers": 101,
"price": 220,
"area": "张家界市",
"address": "荷花村",
"longitude": "110.465501",
"latitude": "29.114429",
"urgentdegree": 1,
"starttime": "2025-12-17",
"estimatedendtime": "2025-12-19",
"createBy": "老王",
"createTime": "2025-12-17",
"reviewstatu": "审核状态",
"reviewinfo": " 审核信息",
"publishstatu": "发布状态"
}
];
// 批量处理数据，避免多次DOM操作
const processedRecords = records.map((item) => {
......@@ -151,16 +194,6 @@
}, 150)
}
// 分类标签点击事件
function onCategoryTabClick(tab: any) {
console.log('点击分类标签:', tab)
pageData.search.type = tab.id
pageData.search.pageNo = 1
pageData.employmentList = []
getEmploymentList()
// 在这里添加具体的分类标签点击逻辑
}
// 用工类型标签点击事件
function onEmploymentTabClick(tab: any) {
pageData.currentEmploymentId = tab.id
......@@ -230,12 +263,19 @@
onNavigationBarButtonTap(() => {
Navigate.to('/pages/linghuoyonggong/components/yonggongmap')
})
// 查看找人干活详情
function onDetailsClick(item: any) {
Navigate.to(`/pages/linghuoyonggong/details?id=${item.id}`)
}
</script>
<template>
<view class="codefun-flex-col page">
<!-- <fui-search-bar></fui-search-bar> -->
<view class="codefun-flex-col codefun-self-stretch">
<view class="codefun-mt-14 codefun-flex-row group_2 gap-2">
<!-- <view class="codefun-mt-14 codefun-flex-row group_2 gap-2">
<view
v-for="tab in pageData.categoryTabs"
:key="tab.id"
......@@ -247,7 +287,7 @@
{{ tab.name }}
</text>
</view>
</view>
</view> -->
<view class="codefun-mt-14 codefun-flex-col group_3">
<view class="codefun-flex-row section_2">
......@@ -268,6 +308,7 @@
<fui-empty marginTop="100" src="/static/images/no-data.png" title="暂无数据" />
</view>
<template v-else>
<template v-if="pageData.currentEmploymentId == 1">
<view
class="codefun-flex-col list-item"
v-for="item in pageData.employmentList"
......@@ -324,6 +365,30 @@
</view>
</view>
</template>
<template v-else>
<view class="work_list_view" v-for="(item,index) in 10" :key="index">
<view class="d-flex j-sb">
<view class="left-width village_number_view">
<view class="village_view text_overflow_ellipsis">先锋村{{index}}</view>
<view class="d-flex align-center"><image class="avatar_icon" src="/static/images/linghuoyonggong/avatar.png" /><text class="text-color">待工人员20名</text></view>
</view>
<view class="d-flex align-center justify-center right-width village_distance">
<image class="distance_icon" src="/static/images/linghuoyonggong/distance.png" />
<text class="distance_val text-color">3.2km</text>
</view>
</view>
<view class="d-flex j-sb skill_details_view">
<view class="left-width d-flex j-sb align-center">
<image class="skill_icon" src="/static/images/linghuoyonggong/skill.png" />
<view class="skill_view text_overflow_ellipsis">技能：采摘、饲养、编织、粉刷、种植...</view>
</view>
<view class="right-width see_details_btn" @click="onDetailsClick({id:index})">查看详情</view>
</view>
</view>
</template>
</template>
</view>
</view>
</view>
......@@ -582,4 +647,78 @@
background: linear-gradient(124.25deg, #a5d63f 0%, #5db66f 100%) !important;
box-shadow: 0px 1px 8px #5db66f;
}
.work_list_view{
border-bottom: 2rpx solid #EEEEEE;
padding-top: 24rpx;
.text-color{color: #5DB66F;font-size: 24rpx;}
.d-flex{display: flex;}
.j-sb{justify-content:space-between;}
.text_overflow_ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.left-width{
width:440rpx;
}
.right-width{
width:140rpx;
}
.village_number_view{
.village_view{
height: 40rpx;
line-height: 40rpx;
margin-bottom: 12rpx;
font-size: 32rpx;
color: #333333;
}
.avatar_icon{
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
}
.village_distance{
height: 26rpx;
margin-top: 16rpx;
.distance_icon{
width: 24rpx;
height: 28rpx;
}
.distance_val{
margin-left: 6rpx;
}
}
.skill_details_view{
margin-top: 10rpx;
padding-bottom: 24rpx;
.skill_icon{
width: 24rpx;
height: 26rpx;
}
.skill_view{
width:416rpx;
font-size: 24rpx;
height: 40rpx;
line-height: 40rpx;
color: #999999;
margin-left: 10rpx;
}
.see_details_btn{
height: 48rpx;
border-radius: 200rpx;
background: #5DB66F;
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx;
font-size: 24rpx;
color: #FFFFFF;
}
}
}
</style>
src/pages/nongchang/nongchang.vue
<script setup lang="ts">
import { reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import WeatherForecast from './components/WeatherForecast.vue'
// import WeatherForecast from './components/WeatherForecast.vue'
import Navigate from '@/utils/page/navigate'
import dayjs from 'dayjs'
......@@ -493,7 +493,7 @@ onHide(() => {
<view class="codefun-flex-col group">
<view class="codefun-flex-col section">
<view class="codefun-flex-col">
<WeatherForecast />
<!-- <WeatherForecast /> -->
<!-- <text class="codefun-self-center font text">{{ pageData.header.title }}</text> -->
<view class="codefun-flex-col codefun-self-stretch !hidden">
<!-- <view class="codefun-flex-row codefun-items-center section_2">
......@@ -548,11 +548,10 @@ onHide(() => {
</view>
</view>
<view class="codefun-flex-col mt-4">
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
<!-- <view class="codefun-flex-row codefun-justify-between codefun-items-center">
<text class="font">我的农场</text>
<!-- <text class="font_6 text_17">全部</text> -->
</view>
<view class="h-300rpx codefun-flex-col mr-3.5 mt-17 nongchang_box relative">
</view> -->
<view class="h-300rpx codefun-flex-col mr-3.5 mt-7 nongchang_box relative">
<image class="w-full h-full" src="/static/images/nongchang/mynongchang-1.png" />
<view
v-show="pageData.hasFarm"
......@@ -807,8 +806,12 @@ onHide(() => {
.group {
.section {
padding: 0 28rpx 98rpx;
background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
// padding: 0 28rpx 98rpx;
// background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
padding-top: 98rpx;
height: 574rpx;
width: 750rpx;
background-image: linear-gradient(179.89deg, rgba(93, 182, 111, 1) 0%, rgba(230, 245, 232, 1) 100%);
background-size: 100% 100%;
background-repeat: no-repeat;
......@@ -936,9 +939,9 @@ onHide(() => {
}
.group_6 {
margin-top: -92rpx;
margin-top: -574rpx;
padding-left: 28rpx;
z-index: 10;
.section_4 {
margin-right: 28rpx;
padding: 28rpx 28rpx 24rpx;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论