提交

src/api/task.ts

@@ -24,4 +24,12 @@ export function positionTypeList(data:any) {
       method: 'get',
       params:data
   })
+}
+//筛选接口
+export function screenList(data: any) {
+  return request({
+    url: '/task/getTaskAll',
+    method: 'get',
+    params: data
+  })
 }

src/store/task.ts

@@ -7,7 +7,8 @@ import { bannerList, positionTypeList } from '../api/task';
         cityList: [],
         cityValue: localStorage.getItem('city') || '北京',
         bannerList: [],
-        positionList:[]
+        positionList: [],
+        screenList: {}
     }
   },
      actions: {
@@ -22,6 +23,9 @@ import { bannerList, positionTypeList } from '../api/task';
        },
        setPositionList(data: any) { 
          this.positionList=data
+       },
+       setScreenList(data: any) { 
+           this.screenList=data
        }
   }
  })

src/view/task/components/PositionType.vue

@@ -6,6 +6,9 @@ import { showToast } from 'vant'
 const state=reactive({
     typeKey:0
 })
+const setKey=(key:number)=>{
+    state.typeKey=key
+}
 const  { closePositionType }:any  = inject('popup')
 const store=taskStore()
 const leftBack = ()=>{
@@ -30,10 +33,10 @@ const leftBack = ()=>{
         <van-nav-bar title="职位" left-arrow   @click-left="leftBack"/> 
         <div class="position-type">
             <div class="position-type-left">
-                <h5 :class="state.typeKey==index?'active':''" v-for="(item, index) in store.positionList" :key="index" >{{item.name}}</h5>
+                <h5 :class="state.typeKey==index?'active':''" v-for="(item, index) in store.positionList"  @click="setKey(index)" :key="index" >{{item.name}}</h5>
             </div>
             <div class="position-type-right">
-                <span v-for="(item, index) in store.positionList[state.typeKey] && store.positionList[state.typeKey].children" :key="index">{{item.name}}</span>
+                <span v-for="(item, index) in store.positionList[state.typeKey] && store.positionList[state.typeKey].children" @click="closePositionType(item.name)" :key="index">{{item.name}}</span>
             </div>
         </div>
 
@@ -58,7 +61,7 @@ const leftBack = ()=>{
     color: #333333;
     text-align: center;
 }
-.position-type-left h5.active{
+.position-type-left h5 .active{
     background: #EFEFEF;
 }
 .position-type-right{

src/view/task/components/Screen.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+ import { inject,reactive } from 'vue';
+import { screenList } from "../../../api/task";
+import {  taskStore  } from "../../../store/task";
+import { showToast } from 'vant'
+const state=reactive({
+  mode:'',
+  cycle:'',
+})
+const  { closeScreenBool }:any  = inject('popup')
+const store=taskStore()
+const leftBack = ()=>{
+  closeScreenBool()
+}
+const getsSreenList=async ()=>{
+        const res:any =await screenList({})
+        console.log('getPositionTypeList------',res.data);
+        if(res){
+            store.setScreenList(res.data)
+        }else{
+            showToast(res.msg)
+        }
+}
+const clearScreen=()=>{
+  state.cycle=''
+  state.mode=''
+}
+const modeChange=(name:string)=>{
+   state.mode=name
+}
+const cycleChange=(name:string)=>{
+   state.cycle=name
+}
+if(!store.screenList.serviceMode){
+      getsSreenList()
+}
+   
+</script>
+<template>
+ 
+        <van-nav-bar title="筛选" left-arrow   @click-left="leftBack">
+             <template #left>
+                 <van-icon name="cross"  size="18"/>
+             </template>  
+        </van-nav-bar> 
+        <div class="task-screen">
+            <h3>服务方式</h3>
+            <div class="screen-item">
+                 <span :class="state.mode==item?'active':''" v-for="(item, index) in store.screenList.serviceMode" :key="index" @click="modeChange(item)">
+                   {{ item }}
+                </span>
+            </div>
+            <h3>服务周期</h3>
+            <div class="screen-item">
+                 <span :class="state.cycle==item?'active':''" v-for="(item, index) in store.screenList.taskCycle" :key="index" @click="cycleChange(item)"> 
+                {{ item }}</span>
+            </div>
+        </div>
+        <div class="screen-footer">
+            <button class="screen-clear" @click="clearScreen()">清除</button>
+            <van-button type="primary" block @click="closeScreenBool(state)">确定</van-button>
+        </div>
+</template>
+<style  scoped>
+ .task-screen{
+        padding: 0 0.6rem;
+    }
+    .task-screen h3{
+        font-size: 0.96rem;
+        line-height: 0.96rem;
+        font-weight: 500;
+        color: #333333;
+        margin: 0.8rem 0;
+    }
+    .task-screen span{
+        width: 5.76rem;
+        height: 1.6rem;
+        line-height: 1.6rem;
+        background: #F5F6F8;
+        border: 1px solid #F5F6F8;
+        border-radius: 0.16rem;
+        font-size: 0.75rem;
+        font-weight: 400;
+        color: #666666;
+        text-align: center;
+        display: inline-block;
+        margin: 0 0.59rem 0.51rem 0;
+    }
+    .task-screen span:nth-child(3n){
+        margin-right: 0;
+    }
+    .task-screen span.active{
+        color: #FF8A00;
+        border: 1px solid #FE8F27;
+        background: #ffffff;
+    }
+    .screen-footer{
+        position: fixed;
+        bottom: 0;
+        background: #FFFFFF;
+        box-shadow: 0rem 0rem 1rem 0rem rgba(208,208,208,0.39);
+        padding: 0.83rem 0.64rem;
+        display: flex;
+        width: calc(100vw - 1.28rem);
+    }
+    .screen-clear{
+        width: 5.33rem;
+        height: 2.35rem;
+        background: #F5F6F8;
+        border-radius: 0.27rem;
+        border: 0;
+        font-size: 0.8rem;
+        font-weight: bold;
+        color: #666565;
+        margin-right: 0.64rem;
+    }
+</style>

src/view/task/index.vue

@@ -3,6 +3,7 @@ import { reactive, ref ,provide} from 'vue';
 import FooterTabbar from '@/components/FooterTabbar.vue'
 import TaskList from '@/components/list/TaskList.vue'
 import Banner from "./components/Banner.vue";
+import Screen from "./components/Screen.vue";
 import CitySwitch from "./components/CitySwitch.vue";
 import { taskStore } from "../../store/task";
 import PositionType from './components/PositionType.vue'
@@ -17,7 +18,12 @@ const taskList=reactive([
 ])
 const state=reactive({
   citySwitchBool:false,
-  PositionTypeBool:true
+  PositionTypeBool:false,
+  ScreenBool:false,
+  positionValue:'',
+  serviceMode:'',
+  taskCycle:''
+
 })
 const closeCitySwitch=(name:string)=>{
   if(name){
@@ -25,12 +31,26 @@ const closeCitySwitch=(name:string)=>{
   }
   state.citySwitchBool=false
 }
-const closePositionType=(name:sring)=>{
+const closePositionType=(name:string)=>{
+  if(name){
+       state.positionValue=name
+  }
   state.PositionTypeBool=false
 }
+const screenClick=()=>{
+  state.ScreenBool=true
+}
+const closeScreenBool=(obj:any)=>{
+  if(obj){
+        state.serviceMode=obj.mode
+        state.taskCycle=obj.cycle
+  }
+  state.ScreenBool=false
+}
 provide('popup',{
         closeCitySwitch,
-        closePositionType
+        closePositionType,
+        closeScreenBool
       }
   )
 
@@ -52,8 +72,8 @@ provide('popup',{
         <!-- <Banner></Banner> -->
         <div class="task-title">
               <h3>最新的任务</h3>
-              <div class="task-position-pop">职位类型 <span></span></div>
-              <div class="task-screen-pop">筛选<span></span></div>
+              <div class="task-position-pop" @click="state.PositionTypeBool=true">{{ state.positionValue || '职位类型' }} <span></span></div>
+              <div class="task-screen-pop" @click="screenClick()">筛选<span></span></div>
         </div>
         <Banner></Banner>
         <TaskList :taskList="taskList"></TaskList>
@@ -73,6 +93,15 @@ provide('popup',{
           >
           <PositionType></PositionType>
         </van-popup>
+        <!-- 筛选弹窗 -->
+        <van-popup
+            v-model:show="state.ScreenBool"
+            position="left"
+            duration="0"
+            :style="{ width: '100%', height: '100%' }"
+          >
+          <Screen></Screen>
+        </van-popup>
     </div>
         
         <FooterTabbar></FooterTabbar>