flexJobMiniApp.git

			@@ -8,10 +8,15 @@
			<div class="home-header">
			<div class="home-searchbar-wrapper">
			<div class="searchbar-container">
			<BlSearchbar v-model.trim="searchValue" placeholder="搜索任务"></BlSearchbar>
			<BlSearchbar
			v-model.trim="searchValue"
			placeholder="搜索任务"
			@search="handleSearch"
			@change="handleSearch"
			></BlSearchbar>
			</div>
			<div class="city-btn" @click="goCitySelect">
			<Location2 :size="16" />
			<img :src="IconLocaltion" class="city-btn-icon" />
			<div class="city-btn-text">{{ locationCity }}</div>
			</div>
			</div>
			@@ -27,24 +32,22 @@
			v-model="queryState.orderType"
			name="home-tab"
			:showPaneContent="false"
			:showSmile="false"
			class="home-tabs"
			isTransparent
			title-gutter="12"
			title-gutter="8"
			title-scroll
			>
			<ProTabPane :title="`推荐`" :pane-key="HomeOrderType.Recommend"></ProTabPane>
			<ProTabPane :title="`最新`" :pane-key="HomeOrderType.LastShelfTime"></ProTabPane>
			<template #right>
			<Menu>
			<MenuItem
			v-model="queryState.orderByProperty"
			title="筛选"
			ref="selectItem"
			:options="[
			{ text: '排序', value: 'userId' },
			{ text: '按关注时间', value: 'creationTime' },
			]"
			/>
			<MenuItem title="筛选" ref="selectItem">
			<HomeQueryMenuView
			v-model:query="queryMenuState"
			@close="handleMenuSelectClose"
			></HomeQueryMenuView>
			</MenuItem>
			</Menu>
			</template>
			</ProTabs>
			@@ -54,45 +57,37 @@
			:key="queryState.orderType"
			>
			<template #renderItem="{ item }">
			<TaskCard />
			<TaskCard @click="goTaskDetail(item)" />
			</template>
			</InfiniteLoading>
			</PageLayoutWithBg>
			</template>

			<script setup lang="ts">
			import { useUser } from '@/hooks';
			import { useUser, useTaskList, HomeOrderType } from '@/hooks';
			import { useUserStore } from '@/stores/modules/user';
			import { RectDown, Location2 } from '@nutui/icons-vue-taro';
			import Taro from '@tarojs/taro';
			import { LocationUtils, trim } from '@12333/utils';
			import { setLocationCity } from '@/utils';
			import _ from 'lodash';
			import IconLogo from '@/assets/home/icon-logo.png';
			import { useInfiniteLoading } from '@12333/hooks';
			import { OrderInputType } from '@12333/constants';
			import * as orderServices from '@12333/services/api/Order';
			import { TaskCard, ProTabs, ProTabPane } from '@12333/components';
			import { HomeOrderType } from './constants';
			import HomeQueryMenuView from './HomeQueryMenuView.vue';
			import IconLocaltion from '@/assets/task/icon-localtion.png';

			const { locationCity } = useUser();

			Taro.usePageScroll(() => {
			console.log('11', 11);
			});

			const searchValue = ref('');

			const queryState = reactive({
			searchValueTrim: '',
			orderType: HomeOrderType.Recommend,
			orderByProperty: 'userId',
			});

			const handleSearch = _.debounce(function () {
			queryState.searchValueTrim = trim(searchValue.value);
			}, 300);

			const userStore = useUserStore();

			const { searchValue, queryState, handleSearch, infiniteLoadingProps, queryMenuState } = useTaskList(
			{ cityName: locationCity }
			);

			onMounted(async () => {
			try {
			await setLocationCity();
			} catch (error) {}
			});

			function goCitySelect() {
			Taro.navigateTo({
			@@ -107,28 +102,17 @@
			'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
			]);

			const { infiniteLoadingProps } = useInfiniteLoading(
			({ pageParam }) => {
			let params: API.FrontOrderListInput = {
			pageModel: {
			rows: 20,
			page: pageParam,
			orderInput: [
			queryState.orderType === HomeOrderType.Recommend
			? { property: 'isRecommend', order: OrderInputType.Desc }
			: { property: 'lastShelfTime', order: OrderInputType.Desc },
			],
			},
			};
			const selectItem = ref();

			return orderServices.getFrontOrderList(params, {
			showLoading: false,
			});
			},
			{
			queryKey: ['orderServices/getFrontOrderList', queryState],
			}
			);
			function handleMenuSelectClose() {
			selectItem.value?.toggle?.();
			}

			function goTaskDetail(item: API.GetFlexTaskListOutput) {
			Taro.navigateTo({
			url: `${RouterPath.taskDetail}?id=${item.id}`,
			});
			}
			</script>

			<style lang="scss">
			@@ -159,6 +143,11 @@
			padding-left: 36px;
			color: boleGetCssVar('text-color', 'primary');

			.city-btn-icon {
			width: 40px;
			height: 40px;
			}

			.city-btn-text {
			max-width: 200px;
			@include ellipsis;