ts

src/api/task.ts

@@ -32,4 +32,13 @@ export function screenList(data: any) {
     method: 'get',
     params: data
   })
+}
+
+//任务列表接口
+export function taskAllList(data: any) {
+  return request({
+    url: '/task/taskAllList',
+    method: 'get',
+    params: data
+  })
 }

src/components/FooterTabbar.vue

@@ -33,6 +33,8 @@
        height:3rem;
        position:fixed;
        bottom:0px;
+       z-index: 100;
+       background: #ffffff;
        left:0px;
        border-top:1px solid #dddddd;
    } 

src/components/list/TaskList.vue

@@ -1,35 +1,35 @@
 <template>
-    <div class="task-item" v-for="(item,index) in taskList" :key="index" @click="gotoDetail(item.id)">
-         <div class="task-item-top">
-             <h3>移动端小程序前端开发</h3>
-             <span>紧急</span>
-         </div>
-         <dl>
+    <div class="task-item" v-for="(item,index) in taskList" :key="index" @click="gotoDetail(item.task_id)">
+        <div class="task-item-top">
+            <h3>{{item.task_name}}</h3>
+            <span v-if="item.is_emergency == 1">紧急</span>
+        </div>
+        <dl>
             <dt>
                 <h5>任务预算</h5>
-                <strong>1000</strong>
+                <strong>￥{{item.task_budget}}</strong>
             </dt>
             <dt>
                 <h5>任务周期</h5>
-                <strong>90天</strong>
+                <strong>{{item.task_cycle}}天</strong>
             </dt>
             <dt>
                 <h5>服务方式</h5>
-                <strong>驻场</strong>
+                <strong>{{item.service_mode}}</strong>
             </dt>
-         </dl>
-         <p>任务要求：混合小程序开发为覅缺乏我切夫齐王府全额付后期无法秋风起恭王府哦去我服和求我盖饭齐王府...</p>
-         <div class="task-item-bottom">
-            <label>北京驻场</label>
-            <span><van-icon name="location-o" /></span>
-         </div>
+        </dl>
+        <p>任务要求：{{item.task_ask}}</p>
+        <div class="task-item-bottom">
+            <label>{{item.company_name}}</label>
+            <span><van-icon name="location-o" />{{item.city}}</span>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
   import { useRouter } from "vue-router";    
   const props=defineProps({
     taskList:{
-        type:Array,
+        type:Array<any>,
         default:()=>[]
     }
   })
@@ -51,7 +51,6 @@
 }
 .task-item-top{
     display: flex;
-
 }
 .task-item-top h3{
     font-size: 0.91rem;

src/main.ts

@@ -5,7 +5,7 @@ import App from './App.vue'
 import store from "./store/index.ts";
 import router from "./router";
 import './utils/rem'
-import { Button,NavBar,Tabbar,TabbarItem,Checkbox,Toast,Icon ,Popup , Swipe, SwipeItem} from "vant";
+import { Button,NavBar,Tabbar,TabbarItem,Checkbox,Toast,Icon ,Popup , Swipe, SwipeItem,List,PullRefresh  } from "vant";
 const app = createApp(App)
 app.use(Button)
 app.use(NavBar)
@@ -15,9 +15,10 @@ app.use(Checkbox)
 app.use(Popup)
 app.use(Toast)
 app.use(Icon)
+app.use(List)
 app.use(Swipe)
 app.use(SwipeItem)
-
+app.use(PullRefresh)
 app.use(store)
 app.use(router)
 app.mount('#app')

src/view/task/components/Banner.vue

@@ -4,7 +4,7 @@ import { bannerList } from "../../../api/task";
 import {  taskStore  } from "../../../store/task";
 import { showToast } from 'vant'
 
-const store=taskStore()
+const store:any=taskStore()
     const getBannerList=async ()=>{
         const res:any =await bannerList({type:2})
         console.log('city------',res);

src/view/task/components/PositionType.vue

@@ -10,19 +10,19 @@ const setKey=(key:number)=>{
     state.typeKey=key
 }
 const  { closePositionType }:any  = inject('popup')
-const store=taskStore()
+const store :any=taskStore()
 const leftBack = ()=>{
     closePositionType()
 }
-    const getPositionTypeList=async ()=>{
-        const res:any =await positionTypeList({})
-        console.log('getPositionTypeList------',res);
-        if(res){
-            store.setPositionList(res)
-        }else{
-            showToast(res.msg)
-        }
+const getPositionTypeList=async ()=>{
+    const res:any =await positionTypeList({})
+    console.log('getPositionTypeList------',res);
+    if(res){
+        store.setPositionList(res)
+    }else{
+        showToast(res.msg)
     }
+}
     if(store.positionList.length<=0){
         getPositionTypeList()
     }

src/view/task/index.vue

@@ -7,43 +7,83 @@ import Screen from "./components/Screen.vue";
 import CitySwitch from "./components/CitySwitch.vue";
 import { taskStore } from "../../store/task";
 import PositionType from './components/PositionType.vue'
+import { taskAllList } from "@/api/task";
+import { showToast } from 'vant'
 const store=taskStore()
-const taskList=reactive([
-    {
-       id:1
-    },
-    {
-       id:2
-    },
-])
 const state=reactive({
   citySwitchBool:false,
   PositionTypeBool:false,
   ScreenBool:false,
   positionValue:'',
   serviceMode:'',
-  taskCycle:''
+  taskCycle:'',
+  taskList:[],
+  pageNum:0,
+  pageSize:10,
+  loading:false,
+  finished:false
+
 
 })
+
+
+const gettaskAllList=async ()=>{
+    state.loading=true
+    if(state.pageNum==1){
+         state.taskList=[]
+    }
+    const res:any =await taskAllList({
+      "position_name": state.positionValue, 
+      "service_mode": state.serviceMode,
+      "task_cycle": state.taskCycle, 
+      "pageNum": state.pageNum,
+      "pageSize": state.pageSize,
+      "city": store.cityValue, 
+    })
+    console.log('getPositionTypeList------',res);
+    if(res){
+      state.taskList=state.taskList.concat(res.records)
+      state.loading=false
+      if(state.taskList.length>=res.total){
+          state.finished=true
+      }else{
+          state.finished = false
+      }
+    }else{
+        showToast(res.msg)
+        state.loading=false
+    }
+}
+const onLoad=()=>{
+  state.pageNum=state.pageNum+1
+  gettaskAllList()
+}
+const onRefresh=()=>{
+    state.pageNum=1
+    gettaskAllList()
+}
 const closeCitySwitch=(name:string)=>{
   if(name){
-    store.setCityValue(name)
+      store.setCityValue(name)
+      onRefresh()
   }
   state.citySwitchBool=false
 }
 const closePositionType=(name:string)=>{
   if(name){
        state.positionValue=name
+       onRefresh()
   }
   state.PositionTypeBool=false
 }
 const screenClick=()=>{
-  state.ScreenBool=true
+       state.ScreenBool=true
 }
 const closeScreenBool=(obj:any)=>{
   if(obj){
         state.serviceMode=obj.mode
         state.taskCycle=obj.cycle
+        onRefresh()
   }
   state.ScreenBool=false
 }
@@ -53,9 +93,6 @@ provide('popup',{
         closeScreenBool
       }
   )
-
-
-
 </script>
 
 <template>
@@ -76,7 +113,19 @@ provide('popup',{
               <div class="task-screen-pop" @click="screenClick()">筛选<span></span></div>
         </div>
         <Banner></Banner>
-        <TaskList :taskList="taskList"></TaskList>
+        <van-pull-refresh v-model="state.loading" @refresh="onRefresh">
+          <van-list
+              v-model:loading="state.loading"
+              :finished="state.finished"
+              finished-text="没有更多了"
+              @load="onLoad"
+           >
+             <TaskList :taskList="state.taskList"></TaskList>
+             <div class="wy-no-data" v-if="!state.loading && state.taskList.length==0">暂无数据</div>
+          </van-list>
+        </van-pull-refresh>
+       
+
         <van-popup
             v-model:show="state.citySwitchBool"
             position="left"
@@ -107,8 +156,8 @@ provide('popup',{
         <FooterTabbar></FooterTabbar>
     
 </template>
-<style  scoped>
-.task-page{
+<style scoped>
+  .task-page{
     background: #f9f9f9;
     padding: 0 0.59rem 3rem;
     min-height: calc(100vh - 3rem);
@@ -187,5 +236,16 @@ provide('popup',{
     border-top: 0.36rem solid #333333;
     margin-left: 0.25rem;
   }
-  
+  .wy-no-data{
+    width: 8.96rem;
+    height: 5.73rem;
+    background: url('../../assets/img/icon/icon-no-data.png') no-repeat;
+    background-size: 100%;
+    padding-top: 7.5rem;
+    text-align: center;
+    color: #666666;
+    margin: 6rem auto 0;
+    
+
+  }
 </style>