136 lines
4.4 KiB
Vue
136 lines
4.4 KiB
Vue
<template>
|
|
<AppLayout title="附近" :use-scroll-view="false">
|
|
<template #headerleft>
|
|
<view class="btnback">
|
|
<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">
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
<component :is="components[index]" :ref="(el) => handelComponentsRef(el, index)" />
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<oneComponent v-show="currentIndex === 0" :ref="(el) => handelComponentsRef(el, index)" />
|
|
<twoComponent v-show="currentIndex === 1" :ref="(el) => handelComponentsRef(el, index)" />
|
|
<threeComponent v-show="currentIndex === 2" :ref="(el) => handelComponentsRef(el, index)" />
|
|
<fourComponent v-show="currentIndex === 3" :ref="(el) => handelComponentsRef(el, index)" />
|
|
<!-- #endif -->
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</AppLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
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, 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];
|
|
|
|
const filterId = ref(0);
|
|
const showFilter = ref(false);
|
|
const showFilter1 = ref(false);
|
|
const showFilter2 = ref(false);
|
|
const showFilter3 = ref(false);
|
|
|
|
const state = reactive({
|
|
current: 0,
|
|
all: [{}],
|
|
});
|
|
|
|
onMounted(() => {
|
|
handleTabChange(state.current);
|
|
});
|
|
|
|
const handelComponentsRef = (el, index) => {
|
|
if (el) {
|
|
swiperRefs[index].value = el;
|
|
}
|
|
};
|
|
// 查看消息类型
|
|
function changeSwiperType(e) {
|
|
const index = e.detail.current;
|
|
state.current = index;
|
|
handleTabChange(index);
|
|
}
|
|
function changeType(index) {
|
|
state.current = index;
|
|
handleTabChange(index);
|
|
}
|
|
|
|
function handleTabChange(index) {
|
|
if (!loadedMap[index]) {
|
|
swiperRefs[index].value?.loadData();
|
|
loadedMap[index] = true;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.btnback{
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
}
|
|
image {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.app-container
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.nearby-head
|
|
height: 63rpx;
|
|
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;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
.nearby-content
|
|
flex: 1;
|
|
overflow: hidden;
|
|
.swiper
|
|
height: 100%;
|
|
.swiper-item
|
|
display: flex;
|
|
flex-direction: column;
|
|
</style>
|