sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flat: 暂存

Browse Source
This commit is contained in:
史典卓
2025-05-13 11:10:38 +08:00
parent 582e432e6a
commit fd74b7d4df
109 changed files with 8644 additions and 5205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
pages/nearby/nearby.vue
View File

@@ -1,56 +1,36 @@
<template>
<view class="app-container">
<view class="nearby-head">
<view class="head-item" :class="{ actived: state.current === 0 }" @click="changeType(0)">附近工作</view>
<view class="head-item" :class="{ actived: state.current === 1 }" @click="changeType(1)">区县工作</view>
<view class="head-item" :class="{ actived: state.current === 2 }" @click="changeType(2)">地铁周边</view>
<view class="head-item" :class="{ actived: state.current === 3 }" @click="changeType(3)">商圈附近</view>
<AppLayout title="附近" :use-scroll-view="false">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<view class="app-container">
<view class="nearby-head">
<view class="head-item" :class="{ actived: state.current === 0 }" @click="changeType(0)">附近工作</view>
<view class="head-item" :class="{ actived: state.current === 1 }" @click="changeType(1)">区县工作</view>
<view class="head-item" :class="{ actived: state.current === 2 }" @click="changeType(2)">地铁周边</view>
<view class="head-item" :class="{ actived: state.current === 3 }" @click="changeType(3)">商圈附近</view>
</view>
<view class="nearby-content">
<swiper class="swiper" :current="state.current" @change="changeSwiperType">
<swiper-item class="swiper-item" v-for="(_, index) in 4" :key="index">
<component :is="components[index]" :ref="(el) => handelComponentsRef(el, index)" />
</swiper-item>
</swiper>
</view>
</view>
<view class="nearby-content">
<swiper class="swiper" :current="state.current" @change="changeSwiperType">
<!-- 动态绑定ref -->
<swiper-item class="swiper-item" v-for="(_, index) in 4" :key="index">
<component
:is="components[index]"
@onFilter="addfileter"
:ref="(el) => handelComponentsRef(el, index)"
/>
</swiper-item>
</swiper>
</view>
<!-- 弹窗 -->
<screeningJobRequirementsVue
:area="false"
v-model:show="showFilter"
@confirm="handleFilterConfirm"
></screeningJobRequirementsVue>
<screeningJobRequirementsVue
:area="false"
v-model:show="showFilter1"
@confirm="handleFilterConfirm"
></screeningJobRequirementsVue>
<screeningJobRequirementsVue
:area="false"
v-model:show="showFilter2"
@confirm="handleFilterConfirm"
></screeningJobRequirementsVue>
<screeningJobRequirementsVue
:area="false"
v-model:show="showFilter3"
@confirm="handleFilterConfirm"
></screeningJobRequirementsVue>
</view>
</AppLayout>
</template>
<script setup>
import screeningJobRequirementsVue from '@/components/screening-job-requirements/screening-job-requirements.vue';
import oneComponent from './components/one.vue';
import twoComponent from './components/two.vue';
import threeComponent from './components/three.vue';
import fourComponent from './components/four.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, debounce, throttle } = inject('globalFunction');
const { $api, debounce, throttle, navBack } = inject('globalFunction');
const loadedMap = reactive([false, false, false, false]);
const swiperRefs = [ref(null), ref(null), ref(null), ref(null)];
const components = [oneComponent, twoComponent, threeComponent, fourComponent];
@@ -66,35 +46,13 @@ const state = reactive({
all: [{}],
});
// filter education aera scale 。。。。
function handleFilterConfirm(e) {
swiperRefs[filterId.value].value?.handleFilterConfirm(e);
}
function addfileter(val) {
filterId.value = val;
switch (val) {
case 0:
showFilter.value = true;
break;
case 1:
showFilter1.value = true;
break;
case 2:
showFilter2.value = true;
break;
case 3:
showFilter3.value = true;
break;
}
}
onMounted(() => {
handleTabChange(state.current);
});
const handelComponentsRef = (el, index) => {
if (el) {
console.log(el);
swiperRefs[index].value = el;
}
};
@@ -118,29 +76,43 @@ function handleTabChange(index) {
</script>
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
image {
height: 100%;
width: 100%;
}
.app-container
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
height: 100%;
display: flex;
flex-direction: column;
.nearby-head
height: 63rpx;
font-size: 28rpx;
color: #FFFFFF;
line-height: 63rpx;
text-align: center;
display: flex;
align-items: center;
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
.head-item
width: calc(100% / 4);
z-index: 9
.actived
// width: 169rpx;
height: 63rpx;
background: #13C57C;
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
border-radius: 0rpx 0rpx 0rpx 0rpx;
// height: 63rpx;
// background: #13C57C;
// box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
// border-radius: 0rpx 0rpx 0rpx 0rpx;
font-weight: 500;
font-size: 32rpx;
color: #000000;
.nearby-content
flex: 1;
overflow: hidden;