ks-app-employment-service/pages/search/search.vue

<template>
    <view class="container">
        <view class="top">
            <image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image>
            <view class="search-box">
                <uni-icons
                    class="iconsearch"
                    color="#666666"
                    type="search"
                    size="18"
                    @confirm="searchCollection"
                ></uni-icons>
                <input
                    class="inputed"
                    type="text"
                    focus
                    v-model="searchValue"
                    placeholder="搜索职位名称"
                    placeholder-class="placeholder"
                />
            </view>
            <view class="search-btn button-click" @click="searchBtn">搜索</view>
        </view>
        <scroll-view scroll-y class="Detailscroll-view" v-show="list.length" @scrolltolower="getJobList('add')">
            <view class="cards-box">
                <renderJobs :list="list" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
            </view>
        </scroll-view>
        <view class="main-content" v-show="!list.length">
            <view class="content-top">
                <view class="top-left">历史搜索</view>
                <view class="top-right button-click" @click="remove">
                    <uni-icons type="trash" color="#C1C1C1" size="20"></uni-icons>
                </view>
            </view>
            <view class="content-history">
                <view class="history-tag" v-for="(item, index) in historyList" :key="index" @click="searchFn(item)">
                    {{ item }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
const { $api, navBack } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
import { storeToRefs } from 'pinia';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const searchValue = ref('');
const historyList = ref([]);
const list = ref([]);
const pageState = reactive({
    page: 0,
    total: 0,
    maxPage: 2,
    pageSize: 10,
    search: {
        order: 0,
    },
});

onLoad(() => {
    let arr = uni.getStorageSync('searchList');
    if (arr) {
        historyList.value = uni.getStorageSync('searchList');
    }
});

function searchFn(item) {
    searchValue.value = item;
    searchBtn();
}

function searchBtn() {
    if (!searchValue.value) {
        return;
    }
    historyList.value.unshift(searchValue.value);
    historyList.value = unique(historyList.value);
    uni.setStorageSync('searchList', historyList.value);
    getJobList('refresh');
}

function searchCollection(e) {
    const value = e.detail.value;
    pageState.search.jobTitle = value;
    getJobList('refresh');
}

function unique(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) {
                //第一个等同于第二个，splice方法删除第二个
                arr.splice(j, 1);
                j--;
            }
        }
    }
    return arr;
}

function remove() {
    uni.removeStorage({
        key: 'searchList',
    });
    historyList.value = [];
}

function getJobList(type = 'add') {
    console.log(type);
    if (type === 'add' && pageState.page < pageState.maxPage) {
        pageState.page += 1;
    }
    if (type === 'refresh') {
        list.value = [];
        pageState.page = 1;
        pageState.maxPage = 2;
    }
    let params = {
        current: pageState.page,
        pageSize: pageState.pageSize,
        ...pageState.search,
        jobTitle: searchValue.value,
    };

    $api.createRequest('/app/job/list', params).then((resData) => {
        const { rows, total } = resData;
        if (type === 'add') {
            const str = pageState.pageSize * (pageState.page - 1);
            const end = list.value.length;
            const reslist = rows;
            list.value.splice(str, end, ...reslist);
        } else {
            list.value = rows;
        }
        pageState.total = resData.total;
        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
        if (rows.length < pageState.pageSize) {
            // loadmoreRef.value?.change('noMore');
        } else {
            // loadmoreRef.value?.change('more');
        }
    });
}
</script>

<style lang="stylus" scoped>
.cards-box{
     padding: 0 28rpx 28rpx 28rpx
}
.Detailscroll-view{
    flex: 1
    overflow: hidden
}
.container{
    display: flex
    flex-direction: column
    background: #F4f4f4
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    .main-content{
        background: #FFFFFF
        height: 100%
        .content-top{
            padding: 28rpx
            display: flex
            justify-content: space-between
            align-items: center
            .top-left{
                font-weight: 600;
                font-size: 36rpx;
                color: #000000;
                line-height: 42rpx;
            }
        }
        .content-history{
            padding: 0 28rpx;
            display: flex
            flex-wrap: wrap
            .history-tag{
                margin-right: 40rpx
                margin-bottom: 20rpx
                white-space: nowrap
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
                background: #F5F5F5;
                border-radius: 12rpx 12rpx 12rpx 12rpx;
                width: fit-content;
                padding: 12rpx 20rpx
            }
        }
    }
    .top {
		display: flex;
		align-items: center;
        justify-content: space-between
		background-color: #fff;
		padding: 20rpx 20rpx;
        position: sticky;
        top: 0
        .btnback{
            width: 60rpx;
            height: 60rpx;
        }
        .search-box{
            flex: 1;
            padding: 0 24rpx 0 6rpx;
            position: relative
            .inputed {
                padding-left: 30rpx
                width: 100%;
            	background: #F8F8F8;
            	font-size: 28rpx;
            	font-family: PingFang SC;
            	font-weight: 400;
            	line-height: 36rpx;
            	color: #666666;
            	padding: 0 30rpx 0 80rpx;
            	box-sizing: border-box;
                height: 80rpx;
                background: #F5F5F5;
                border-radius: 75rpx 75rpx 75rpx 75rpx;
            }
            .iconsearch{
                position: absolute
                top: 50%
                left: 36rpx
                transform: translate(0, -50%)
            }
        }
		.search-btn {
            padding-right: 18rpx;
			text-align: center;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #256BFA;
		}
	}
}
</style>