jobslink-user-clent/pageMy/my/resume/skill.vue

<template>
    <view>
		<view class="search">
			<input 
				v-model="searchKeyword"
				type="text"
				class="search-input"
				placeholder="请输入关键词搜索"
				@input="handleSearch"
				@focus="isSearchFocused = true"
			    @blur="handleSearchBlur"
			/>
		</view>
		<view class="title">
		    全部
		</view>
        <block v-for="(item, index) in filteredResults" :key="index">
            <view class="cityList" @click="cityClick(item)">
                {{ item.name }}
                <image src="../../../static/img/correct.svg" v-if="id === item.id" mode=""></image>
                <image v-else-if="layer !== maxLayer" src="../../../static/img/right.svg" mode=""></image>
            </view>
        </block>
		
        <view class="" v-if="layer === maxLayer" style="height: 230rpx;background-color: #f6f6f6;"></view>
        <view class="btn" v-if="layer === maxLayer" @click="comfirm">
            <view class="bottombtn">
                确定
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getWorktypesList
    } from '@/api/resume.js'

    export default {
        data() {
            return {
                workTypeList: [],

                choose: false,
                chooseIndex: '',
                parentId: undefined,
                layer: 1,
                maxLayer: 2,
                id: '',
                label: '',

                tradeId: '',
				searchKeyword: '', // 模糊关键字搜索
				isSearchFocused: true,
				searchFields: ['name'],
				type: 1
            }
        },
        computed: {
            city() {
                console.log(this.parentId, this.workTypeList)
                if (this.parentId) {
                    const parentItem = this.workTypeList.find(item => item.id == this.parentId);
                    if (parentItem) {
                        return parentItem.child;
                    }
                } else {
                    return this.workTypeList;
                }
            },
			filteredResults() {
			  if (!this.searchKeyword) {
				return this.city
			  }
			  
			  const keyword = this.searchKeyword.toLowerCase()
			  return this.city.filter(item => {
				return this.searchFields.some(field => {
				  const value = this.getObjectValue(item, field)
				  return value && value.toLowerCase().includes(keyword)
				})
			  })
			}
        },
        mounted() {
            getWorktypesList(1).then(res => {
                this.workTypeList = res.data.data;

            })
        },

        onLoad({
            tradeId,
            parentId,
            layer,
            maxLayer,
			type
        }) {
            this.parentId = parentId
            this.tradeId = tradeId || 0
            this.layer = parseInt(layer || 1)
            this.maxLayer = parseInt(maxLayer || 2)
			console.log(type, 'type')
			this.type = type
        },
        onShow: function() {},
        methods: {
            cityClick(item) {
                if (this.layer === this.maxLayer) {
                    this.selectCity(item)
                } else {
                    this.goCityInfo(item)
                }
            },
            selectCity(item) {
                console.log(item, "item");
                this.id = item.id;
                this.label = item.name;

            },
            goCityInfo(item) {
                uni.navigateTo({
                    url: `./skill?layer=${this.layer + 1}&maxLayer=${this.maxLayer}&parentId=${item.id}&parentLabel=${item.name}&type=${this.type}`
                })
            },
            comfirm: function() {
                if (this.id) {
					console.log(this.type)
					if (this.type == '1') {
						console.log('00000000')
						uni.$emit('setworkTypes', {
						    detail: {
						        id: this.id,
						        label: this.label,
						        parentLabel: this.$route.query.parentLabel
						    }
						})
					} else {
						console.log('1111111')
						uni.$emit('setSkill', {
						    detail: {
						        id: this.id,
						        label: this.label,
						        parentLabel: this.$route.query.parentLabel,
						        parentTwoLabel: this.$route.query.parentTwoLabel
						    },
						})
					}
                    uni.navigateBack({
                        delta: this.layer
                    })
                } else {
                    uni.showToast({
                        title: "请选择类别",
                        icon: "none"
                    })
                }
            },
			
			// 模糊搜索
			handleSearch() {
				
				console.log(this.searchKeyword)
			},
			// 失去焦点
			handleSearchBlur() {
				
			},
			// 获取对象深层值
			getObjectValue(obj, path) {
			    return path.split('.').reduce((current, key) => {
			    return current && current[key] !== undefined ? current[key] : ''
			    }, obj)
			},

        }
    }
</script>

<style>
    .bottombtn {
        background-color: #1B66FF;
        color: #fff;
        text-align: center;
        border-radius: 10rpx;
        font-family: PingFangSC-Medium;
        font-size: 32rpx;
        height: 90rpx;
        line-height: 90rpx;
    }

    .btn {
        background-color: #fefefe;
        width: 690rpx;
        padding: 30rpx;
        padding-bottom: 80rpx;
        position: fixed;
        bottom: 0;
        left: 0;
    }

    .cityList image {
        width: 32rpx;
        height: 32rpx;
    }

    .cityList {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFangSC-Regular;
        font-size: 32rpx;
        color: #333333;
        padding: 30rpx;
        padding-left: 0;
        margin-left: 30rpx;
        width: 690rpx;
        border-bottom: 1rpx solid #dddddd;
    }

    .location {
        font-family: PingFangSC-Regular;
        font-size: 32rpx;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 30rpx;
    }

    .comfirm {
        margin-left: auto;
    }

    .location image {
        width: 40rpx;
        height: 40rpx;
    }

    .title {
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #999999;
        background-color: #f6f6f6;
        padding: 30rpx;
    }

    page {
        background-color: #fefefe;
    }
	
	.search {
		width: 80%;
		height: 60rpx;
		margin: 10rpx auto;
		border: 1rpx solid #dddddd;
		border-radius: 40rpx;
		padding-left: 30rpx;
	}
	.search-input {
		width: 80%;
		height: 60rpx;
	}
</style>