|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- <Navbar title="出国劳务" /> -->
|
|
|
+
|
|
|
+ <div class="px-15 pt-15">
|
|
|
+ <swiper class="h-150 rounded-lg overflow-hidden" circular autoplay :interval="5000">
|
|
|
+ <swiper-item v-for="item in bannerList" :key="item.id" class="h-full w-full">
|
|
|
+ <image
|
|
|
+ class="object-cover w-full h-full"
|
|
|
+ :src="item.imgUrlsAfterConvert[0]"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+ <div class="pt-15 flex justify-between items-center">
|
|
|
+ <input
|
|
|
+ v-model="searchQuery.searchString"
|
|
|
+ placeholder="请输入搜索关键词"
|
|
|
+ shape="round"
|
|
|
+ @confirm="onSearch"
|
|
|
+ confirm-type="search"
|
|
|
+ class="flex-1"
|
|
|
+ />
|
|
|
+ <div style="color: rgb(170 176 191)" class="w-40 flex items-center justify-center" @click="handleFilter">
|
|
|
+ <!-- <icon name="filter-o" color="#fe8e2c" size="25" /> -->
|
|
|
+ 筛选
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <scroll-view
|
|
|
+ v-if="dataList.length"
|
|
|
+ type="list"
|
|
|
+ @scrolltolower="loadMore"
|
|
|
+ class="scroll-container"
|
|
|
+ scroll-y="true"
|
|
|
+ >
|
|
|
+ <LabourJobItem v-for="item in dataList" :key="item.id" :item-data="item"> </LabourJobItem>
|
|
|
+ </scroll-view>
|
|
|
+ <Empty v-else-if="!dataList.length && !loading" />
|
|
|
+ </div>
|
|
|
+ <!-- <Tabbar /> -->
|
|
|
+
|
|
|
+ <uni-popup ref="popupRef" background-color="#fff" :style="{ width: '80%', height: '100%' }">
|
|
|
+ <div class="flex flex-col justify-between h-full">
|
|
|
+ <div class="flex-1 pt-40 px-15">
|
|
|
+ <div>选择区域</div>
|
|
|
+ <div class="grid grid-cols-2 gap-15 pt-20">
|
|
|
+ <div
|
|
|
+ v-for="item in areaList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="handleClick(item)"
|
|
|
+ class="h-36 flex items-center rounded-sm justify-center text-sm transition-all"
|
|
|
+ :class="[
|
|
|
+ currentArea.id === item.id
|
|
|
+ ? 'bg-primary text-white'
|
|
|
+ : 'bg-[#f2f4f8] text-[#72809F]',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ {{ item.menuName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="h-60 flex items-center bg-white justify-center border-t space-x-10 px-20">
|
|
|
+ <button class="w-full mr-10 h-28" plain @click="handleReset">重置</button>
|
|
|
+ <button class="w-full h-28" type="primary" @click="handleConfirm">确定</button>
|
|
|
+ </div>
|
|
|
+ <div class="safe-area-bottom"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </uni-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import LabourJobItem from '@/components/Labour/JobItem.vue';
|
|
|
+import { getBannerList, getDirectoryList, getProjects } from '@/api/common';
|
|
|
+const bannerList = ref([]);
|
|
|
+async function requestBannerList() {
|
|
|
+ const { data } = await getBannerList({ belongTab: 10 });
|
|
|
+ bannerList.value = data.dataList;
|
|
|
+}
|
|
|
+
|
|
|
+const defaultFirstArea = {
|
|
|
+ id: 16,
|
|
|
+ menuName: '全部',
|
|
|
+};
|
|
|
+
|
|
|
+const searchQuery = reactive({
|
|
|
+ belongTab: defaultFirstArea.id,
|
|
|
+ searchString: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+});
|
|
|
+
|
|
|
+const dataList = ref([]);
|
|
|
+const loading = ref(true);
|
|
|
+const finished = ref(false);
|
|
|
+async function requestProjects() {
|
|
|
+ const { data } = await getProjects(searchQuery);
|
|
|
+ dataList.value = dataList.value.concat(data.dataList);
|
|
|
+ loading.value = false;
|
|
|
+ if (dataList.value.length >= data.totalCount) {
|
|
|
+ finished.value = true;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function loadMore() {
|
|
|
+ searchQuery.pageNum++;
|
|
|
+ requestProjects();
|
|
|
+}
|
|
|
+
|
|
|
+function onSearch() {
|
|
|
+ searchQuery.pageNum = 1;
|
|
|
+ dataList.value = [];
|
|
|
+ finished.value = false;
|
|
|
+ requestProjects();
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ requestBannerList();
|
|
|
+ requestProjects();
|
|
|
+ getAreaList();
|
|
|
+});
|
|
|
+
|
|
|
+// 创建一个 ref 对象
|
|
|
+const popupRef = ref(null);
|
|
|
+// 侧边过滤逻辑
|
|
|
+const showFilter = ref(false);
|
|
|
+function handleFilter() {
|
|
|
+ popupRef.value.open('right');
|
|
|
+ showFilter.value = !showFilter.value;
|
|
|
+}
|
|
|
+const areaList = ref([]);
|
|
|
+const currentArea = ref(defaultFirstArea);
|
|
|
+async function getAreaList() {
|
|
|
+ const { data } = await getDirectoryList({ parentId: 16 });
|
|
|
+ areaList.value = [defaultFirstArea, ...data.dataList];
|
|
|
+}
|
|
|
+
|
|
|
+function handleClick(item) {
|
|
|
+ currentArea.value = item;
|
|
|
+}
|
|
|
+
|
|
|
+function handleReset() {
|
|
|
+ currentArea.value = defaultFirstArea;
|
|
|
+}
|
|
|
+function handleConfirm() {
|
|
|
+ searchQuery.belongTab = currentArea.value.id;
|
|
|
+ showFilter.value = false;
|
|
|
+ reSearch();
|
|
|
+}
|
|
|
+
|
|
|
+function reSearch() {
|
|
|
+ searchQuery.pageNum = 1;
|
|
|
+ dataList.value = [];
|
|
|
+ finished.value = false;
|
|
|
+ requestProjects();
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.safe-area-bottom {
|
|
|
+ // height: 50px;
|
|
|
+}
|
|
|
+.scroll-container {
|
|
|
+ height: calc(100vh - 200px);
|
|
|
+}
|
|
|
+button {
|
|
|
+ line-height: 28px;
|
|
|
+}
|
|
|
+input {
|
|
|
+ color: rgb(50, 50, 51);
|
|
|
+ border: 1px solid rgb(226 230 239);
|
|
|
+ background-color: rgb(226 230 239);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 24px;
|
|
|
+}
|
|
|
+</style>
|