AI模块联调

packageA/pages/complete-info/components/map-location-picker.vue

@@ -0,0 +1,820 @@
+<template>
+    <AppLayout title="选择地址" :showBack="true">
+        <view class="map-container">
+            <!-- 搜索框 -->
+            <view class="search-box">
+                <view class="search-input-wrapper">
+                    <uni-icons type="search" size="20" color="#999"></uni-icons>
+                    <input 
+                        class="search-input" 
+                        v-model="searchKeyword" 
+                        placeholder="输入关键词搜索地址（支持模糊搜索）"
+                        @input="onSearchInput"
+                        @confirm="searchLocation"
+                    />
+                    <uni-icons 
+                        v-if="searchKeyword" 
+                        type="clear" 
+                        size="18" 
+                        color="#999" 
+                        @click="clearSearch"
+                    ></uni-icons>
+                </view>
+            </view>
+            
+            <!-- 搜索结果列表 -->
+            <view class="search-results" v-if="showSearchResults">
+                <scroll-view scroll-y class="results-scroll" v-if="searchResults.length > 0">
+                    <view 
+                        class="result-item" 
+                        v-for="(item, index) in searchResults" 
+                        :key="index"
+                        @click="selectSearchResult(item)"
+                    >
+                        <view class="result-name">{{ item.name }}</view>
+                        <view class="result-address">{{ item.address }}</view>
+                    </view>
+                </scroll-view>
+                <view class="empty-results" v-else-if="isSearching">
+                    <view class="loading-icon">
+                        <uni-icons type="loop" size="40" color="#999"></uni-icons>
+                    </view>
+                    <text>搜索中...</text>
+                </view>
+                <view class="empty-results" v-else>
+                    <uni-icons type="info" size="40" color="#999"></uni-icons>
+                    <text>未找到相关地址，请尝试其他关键词</text>
+                    <view class="search-tips">
+                        <text class="tip-title">搜索建议：</text>
+                        <text class="tip-item">• 输入具体地址名称</text>
+                        <text class="tip-item">• 输入地标建筑名称</text>
+                        <text class="tip-item">• 输入街道或区域名称</text>
+                    </view>
+                </view>
+            </view>
+            
+            <!-- 地图 -->
+            <view class="map-wrapper" v-show="!showSearchResults">
+                <!-- #ifdef H5 -->
+                <view id="amap-container" class="amap-container"></view>
+                <!-- #endif -->
+                
+                <!-- #ifndef H5 -->
+                <map
+                    id="map"
+                    class="map"
+                    :latitude="latitude"
+                    :longitude="longitude"
+                    :markers="markers"
+                    :show-location="true"
+                    @markertap="onMarkerTap"
+                    @regionchange="onRegionChange"
+                    @tap="onMapTap"
+                >
+                    <cover-view class="map-center-marker">
+                        <cover-image src="/static/icon/Location.png" class="marker-icon"></cover-image>
+                    </cover-view>
+                </map>
+                <!-- #endif -->
+            </view>
+            
+            <!-- 当前位置信息 -->
+            <view class="location-info" v-if="currentAddress && !showSearchResults">
+                <view class="info-title">当前选择位置</view>
+                <view class="info-name">{{ currentAddress.name }}</view>
+                <view class="info-address">{{ currentAddress.address }}</view>
+            </view>
+            
+            <!-- 底部按钮 -->
+            <view class="bottom-actions">
+                <button class="locate-btn" @click="getCurrentLocation" :disabled="isLocating">
+                    <uni-icons type="location-filled" size="20" color="#256BFA"></uni-icons>
+                    <text>{{ isLocating ? '定位中...' : '定位' }}</text>
+                </button>
+                <button class="confirm-btn" @click="confirmLocation">确认选择</button>
+            </view>
+        </view>
+    </AppLayout>
+</template>
+
+<script setup>
+import { ref, inject, onMounted } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+
+const { $api } = inject('globalFunction')
+
+// 搜索相关
+const searchKeyword = ref('')
+const searchResults = ref([])
+const showSearchResults = ref(false)
+const isSearching = ref(false)
+const isLocating = ref(false)
+let searchTimer = null
+
+// 地图相关
+const latitude = ref(36.066938)
+const longitude = ref(120.382665)
+const markers = ref([])
+const currentAddress = ref(null)
+
+// H5地图实例
+let map = null
+let AMap = null
+let geocoder = null
+let placeSearch = null
+
+onLoad((options) => {
+    // 可以接收初始位置参数
+    if (options.latitude && options.longitude) {
+        latitude.value = parseFloat(options.latitude)
+        longitude.value = parseFloat(options.longitude)
+    }
+})
+
+onMounted(() => {
+    // #ifdef H5
+    initAmapH5()
+    // #endif
+    
+    // #ifndef H5
+    // 先设置默认位置，避免地图显示空白
+    markers.value = [{
+        id: 1,
+        latitude: latitude.value,
+        longitude: longitude.value,
+        iconPath: '/static/icon/Location.png',
+        width: 30,
+        height: 30
+    }]
+    
+    // 延迟执行定位，避免页面加载时立即定位失败
+    setTimeout(() => {
+        getCurrentLocation()
+    }, 1000)
+    // #endif
+})
+
+// H5端初始化高德地图
+const initAmapH5 = () => {
+    // #ifdef H5
+    if (window.AMap) {
+        AMap = window.AMap
+        initMap()
+    } else {
+        const script = document.createElement('script')
+        script.src = 'https://webapi.amap.com/maps?v=2.0&key=9cfc9370bd8a941951da1cea0308e9e3&plugin=AMap.Geocoder,AMap.PlaceSearch'
+        script.onload = () => {
+            AMap = window.AMap
+            initMap()
+        }
+        document.head.appendChild(script)
+    }
+    // #endif
+}
+
+// 初始化地图
+const initMap = () => {
+    // #ifdef H5
+    map = new AMap.Map('amap-container', {
+        zoom: 15,
+        center: [longitude.value, latitude.value],
+        resizeEnable: true
+    })
+    
+    // 创建标记
+    const marker = new AMap.Marker({
+        position: [longitude.value, latitude.value],
+        draggable: true
+    })
+    
+    marker.on('dragend', (e) => {
+        const position = e.target.getPosition()
+        longitude.value = position.lng
+        latitude.value = position.lat
+        reverseGeocode(position.lng, position.lat)
+    })
+    
+    map.add(marker)
+    
+    // 初始化地理编码
+    geocoder = new AMap.Geocoder({
+        city: '全国'
+    })
+    
+    // 初始化地点搜索
+    placeSearch = new AMap.PlaceSearch({
+        city: '全国',
+        pageSize: 10
+    })
+    
+    // 地图点击事件
+    map.on('click', (e) => {
+        const { lng, lat } = e.lnglat
+        longitude.value = lng
+        latitude.value = lat
+        marker.setPosition([lng, lat])
+        reverseGeocode(lng, lat)
+    })
+    
+    // 获取当前位置信息
+    reverseGeocode(longitude.value, latitude.value)
+    // #endif
+}
+
+// 搜索输入
+const onSearchInput = () => {
+    if (searchTimer) {
+        clearTimeout(searchTimer)
+    }
+    
+    if (!searchKeyword.value.trim()) {
+        showSearchResults.value = false
+        searchResults.value = []
+        isSearching.value = false
+        return
+    }
+    
+    showSearchResults.value = true
+    isSearching.value = true
+    
+    searchTimer = setTimeout(() => {
+        if (searchKeyword.value.trim()) {
+            searchLocation()
+        }
+    }, 300) // 优化防抖时间从500ms改为300ms
+}
+
+// 搜索地点
+const searchLocation = () => {
+    if (!searchKeyword.value.trim()) {
+        return
+    }
+    
+    showSearchResults.value = true
+    isSearching.value = true
+    
+    // #ifdef H5
+    if (placeSearch) {
+        placeSearch.search(searchKeyword.value, (status, result) => {
+            isSearching.value = false
+            if (status === 'complete' && result.poiList) {
+                searchResults.value = result.poiList.pois.map(poi => ({
+                    name: poi.name,
+                    address: poi.address || poi.pname + poi.cityname + poi.adname,
+                    location: poi.location,
+                    lng: poi.location.lng,
+                    lat: poi.location.lat
+                }))
+            } else {
+                searchResults.value = []
+            }
+        })
+    }
+    // #endif
+    
+    // #ifndef H5
+    // 小程序端使用uni.request调用高德API
+    uni.request({
+        url: 'https://restapi.amap.com/v3/place/text',
+        data: {
+            key: '9cfc9370bd8a941951da1cea0308e9e3',
+            keywords: searchKeyword.value,
+            city: '全国',
+            offset: 20,
+            citylimit: false, // 不限制城市，支持全国搜索
+            extensions: 'all' // 返回详细信息
+        },
+        success: (res) => {
+            isSearching.value = false
+            console.log('搜索响应:', res.data) // 调试日志
+            
+            if (res.data.status === '1' && res.data.pois && res.data.pois.length > 0) {
+                searchResults.value = res.data.pois.map(poi => {
+                    const [lng, lat] = poi.location.split(',')
+                    return {
+                        name: poi.name,
+                        address: poi.address || `${poi.pname || ''}${poi.cityname || ''}${poi.adname || ''}`,
+                        lng: parseFloat(lng),
+                        lat: parseFloat(lat)
+                    }
+                })
+                console.log('搜索结果:', searchResults.value) // 调试日志
+            } else {
+                // 如果第一次搜索没有结果，尝试更宽泛的搜索
+                if (searchKeyword.value.length > 2) {
+                    tryAlternativeSearch()
+                } else {
+                    searchResults.value = []
+                    console.log('搜索无结果:', res.data) // 调试日志
+                }
+            }
+        },
+        fail: (err) => {
+            isSearching.value = false
+            searchResults.value = []
+            console.error('搜索请求失败:', err) // 调试日志
+            $api.msg('搜索失败，请检查网络连接')
+        }
+    })
+    // #endif
+}
+
+// 备用搜索策略
+const tryAlternativeSearch = () => {
+    // 尝试使用地理编码API搜索
+    uni.request({
+        url: 'https://restapi.amap.com/v3/geocode/geo',
+        data: {
+            key: '9cfc9370bd8a941951da1cea0308e9e3',
+            address: searchKeyword.value,
+            city: '全国'
+        },
+        success: (res) => {
+            isSearching.value = false
+            console.log('备用搜索响应:', res.data) // 调试日志
+            
+            if (res.data.status === '1' && res.data.geocodes && res.data.geocodes.length > 0) {
+                searchResults.value = res.data.geocodes.map(geo => {
+                    const [lng, lat] = geo.location.split(',')
+                    return {
+                        name: geo.formatted_address,
+                        address: geo.formatted_address,
+                        lng: parseFloat(lng),
+                        lat: parseFloat(lat)
+                    }
+                })
+                console.log('备用搜索结果:', searchResults.value) // 调试日志
+            } else {
+                searchResults.value = []
+                console.log('备用搜索也无结果:', res.data) // 调试日志
+            }
+        },
+        fail: (err) => {
+            isSearching.value = false
+            searchResults.value = []
+            console.error('备用搜索失败:', err) // 调试日志
+        }
+    })
+}
+
+// 选择搜索结果
+const selectSearchResult = (item) => {
+    longitude.value = item.lng
+    latitude.value = item.lat
+    currentAddress.value = {
+        name: item.name,
+        address: item.address,
+        longitude: item.lng,
+        latitude: item.lat
+    }
+    
+    // #ifdef H5
+    if (map) {
+        map.setCenter([item.lng, item.lat])
+        const marker = map.getAllOverlays('marker')[0]
+        if (marker) {
+            marker.setPosition([item.lng, item.lat])
+        }
+    }
+    // #endif
+    
+    // #ifndef H5
+    markers.value = [{
+        id: 1,
+        latitude: item.lat,
+        longitude: item.lng,
+        iconPath: '/static/icon/Location.png',
+        width: 30,
+        height: 30
+    }]
+    // #endif
+    
+    showSearchResults.value = false
+    searchKeyword.value = ''
+}
+
+// 清除搜索
+const clearSearch = () => {
+    searchKeyword.value = ''
+    searchResults.value = []
+    showSearchResults.value = false
+    isSearching.value = false
+    if (searchTimer) {
+        clearTimeout(searchTimer)
+    }
+}
+
+// 逆地理编码（根据坐标获取地址）
+const reverseGeocode = (lng, lat) => {
+    // #ifdef H5
+    if (geocoder) {
+        geocoder.getAddress([lng, lat], (status, result) => {
+            if (status === 'complete' && result.regeocode) {
+                const addressComponent = result.regeocode.addressComponent
+                const formattedAddress = result.regeocode.formattedAddress
+                currentAddress.value = {
+                    name: addressComponent.building || addressComponent.township,
+                    address: formattedAddress,
+                    longitude: lng,
+                    latitude: lat
+                }
+            }
+        })
+    }
+    // #endif
+    
+    // #ifndef H5
+    uni.request({
+        url: 'https://restapi.amap.com/v3/geocode/regeo',
+        data: {
+            key: '9cfc9370bd8a941951da1cea0308e9e3',
+            location: `${lng},${lat}`
+        },
+        success: (res) => {
+            if (res.data.status === '1' && res.data.regeocode) {
+                const addressComponent = res.data.regeocode.addressComponent
+                const formattedAddress = res.data.regeocode.formatted_address
+                currentAddress.value = {
+                    name: addressComponent.building || addressComponent.township || '选择的位置',
+                    address: formattedAddress,
+                    longitude: lng,
+                    latitude: lat
+                }
+            }
+        }
+    })
+    // #endif
+}
+
+// 获取当前定位
+const getCurrentLocation = () => {
+    if (isLocating.value) return // 防止重复定位
+    
+    isLocating.value = true
+    uni.showLoading({ title: '定位中...' })
+    
+    // 先检查定位权限
+    uni.getSetting({
+        success: (settingRes) => {
+            if (settingRes.authSetting['scope.userLocation'] === false) {
+                // 用户拒绝了定位权限，引导用户开启
+                isLocating.value = false
+                uni.hideLoading()
+                uni.showModal({
+                    title: '定位权限',
+                    content: '需要获取您的位置信息来提供更好的服务，请在设置中开启定位权限',
+                    confirmText: '去设置',
+                    success: (modalRes) => {
+                        if (modalRes.confirm) {
+                            uni.openSetting()
+                        }
+                    }
+                })
+                return
+            }
+            
+            // 执行定位
+            uni.getLocation({
+                type: 'gcj02',
+                altitude: false,
+                success: (res) => {
+                    console.log('定位成功:', res) // 调试日志
+                    longitude.value = res.longitude
+                    latitude.value = res.latitude
+                    
+                    // #ifdef H5
+                    if (map) {
+                        map.setCenter([res.longitude, res.latitude])
+                        const marker = map.getAllOverlays('marker')[0]
+                        if (marker) {
+                            marker.setPosition([res.longitude, res.latitude])
+                        }
+                    }
+                    // #endif
+                    
+                    // #ifndef H5
+                    // 更新小程序端标记
+                    markers.value = [{
+                        id: 1,
+                        latitude: res.latitude,
+                        longitude: res.longitude,
+                        iconPath: '/static/icon/Location.png',
+                        width: 30,
+                        height: 30
+                    }]
+                    // #endif
+                    
+                    reverseGeocode(res.longitude, res.latitude)
+                    uni.hideLoading()
+                    isLocating.value = false
+                },
+                fail: (err) => {
+                    console.error('定位失败:', err) // 调试日志
+                    uni.hideLoading()
+                    isLocating.value = false
+                    
+                    // 根据错误类型给出不同提示
+                    // let errorMsg = '定位失败'
+                    // if (err.errMsg.includes('auth deny')) {
+                    //     errorMsg = '定位权限被拒绝，请在设置中开启'
+                    // } else if (err.errMsg.includes('timeout')) {
+                    //     errorMsg = '定位超时，请重试'
+                    // } else if (err.errMsg.includes('network')) {
+                    //     errorMsg = '网络异常，请检查网络连接'
+                    // }
+                    
+                    // uni.showModal({
+                    //     title: '定位失败',
+                    //     content: errorMsg + '，是否使用默认位置？',
+                    //     confirmText: '使用默认位置',
+                    //     cancelText: '重试',
+                    //     success: (modalRes) => {
+                    //         if (modalRes.confirm) {
+                    //             // 使用默认位置（北京）
+                    //             longitude.value = 116.397428
+                    //             latitude.value = 39.90923
+                    //             reverseGeocode(longitude.value, latitude.value)
+                    //         } else {
+                    //             // 重试定位
+                    //             setTimeout(() => {
+                    //                 getCurrentLocation()
+                    //             }, 2000)
+                    //         }
+                    //     }
+                    // })
+                }
+            })
+        },
+        fail: () => {
+            uni.hideLoading()
+            isLocating.value = false
+            $api.msg('无法获取定位权限设置')
+        }
+    })
+}
+
+// 地图区域变化（小程序端）
+const onRegionChange = (e) => {
+    // #ifndef H5
+    // 只有在用户手动拖动地图结束时才更新位置
+    if (e.type === 'end' && e.causedBy === 'drag') {
+        const mapContext = uni.createMapContext('map')
+        mapContext.getCenterLocation({
+            success: (res) => {
+                longitude.value = res.longitude
+                latitude.value = res.latitude
+                reverseGeocode(res.longitude, res.latitude)
+            }
+        })
+    }
+    // #endif
+}
+
+// 地图点击事件（小程序端）
+const onMapTap = (e) => {
+    // #ifndef H5
+    const { latitude: lat, longitude: lng } = e.detail
+    longitude.value = lng
+    latitude.value = lat
+    
+    // 更新标记
+    markers.value = [{
+        id: 1,
+        latitude: lat,
+        longitude: lng,
+        iconPath: '/static/icon/Location.png',
+        width: 30,
+        height: 30
+    }]
+    
+    reverseGeocode(lng, lat)
+    // #endif
+}
+
+// 确认选择
+const confirmLocation = () => {
+    if (!currentAddress.value) {
+        $api.msg('请选择地址')
+        return
+    }
+    
+    // 返回上一页并传递数据
+    const pages = getCurrentPages()
+    const prevPage = pages[pages.length - 2]
+    
+    if (prevPage) {
+        prevPage.$vm.handleLocationSelected({
+            address: currentAddress.value.address,
+            name: currentAddress.value.name,
+            longitude: currentAddress.value.longitude,
+            latitude: currentAddress.value.latitude
+        })
+    }
+    
+    uni.navigateBack()
+}
+
+const onMarkerTap = (e) => {
+    console.log('marker点击', e)
+}
+</script>
+
+<style lang="stylus" scoped>
+.map-container
+    width: 100%
+    height: 100vh
+    position: relative
+    display: flex
+    flex-direction: column
+
+.search-box
+    position: absolute
+    top: 20rpx
+    left: 32rpx
+    right: 32rpx
+    z-index: 10
+    
+    .search-input-wrapper
+        background: #fff
+        border-radius: 40rpx
+        padding: 20rpx 30rpx
+        display: flex
+        align-items: center
+        box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1)
+        
+        .search-input
+            flex: 1
+            margin: 0 20rpx
+            font-size: 28rpx
+            
+        uni-icons
+            flex-shrink: 0
+
+.search-results
+    position: absolute
+    top: 100rpx
+    left: 32rpx
+    right: 32rpx
+    bottom: 180rpx
+    background: #fff
+    border-radius: 20rpx
+    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1)
+    z-index: 9
+    overflow: hidden
+    
+    .results-scroll
+        height: 100%
+        
+    .result-item
+        padding: 30rpx
+        border-bottom: 1rpx solid #f0f0f0
+        
+        &:active
+            background: #f5f5f5
+            
+        .result-name
+            font-size: 32rpx
+            color: #333
+            font-weight: 500
+            margin-bottom: 10rpx
+            
+        .result-address
+            font-size: 26rpx
+            color: #999
+    
+    .empty-results
+        height: 100%
+        display: flex
+        flex-direction: column
+        align-items: center
+        justify-content: center
+        color: #999
+        font-size: 28rpx
+        
+        .loading-icon
+            animation: rotate 1s linear infinite
+            margin-bottom: 20rpx
+            
+        uni-icons
+            margin-bottom: 20rpx
+            
+        text
+            padding: 0 60rpx
+            text-align: center
+            line-height: 1.5
+            
+        .search-tips
+            margin-top: 40rpx
+            padding: 0 40rpx
+            
+            .tip-title
+                font-size: 26rpx
+                color: #666
+                font-weight: 500
+                margin-bottom: 20rpx
+                display: block
+                
+            .tip-item
+                font-size: 24rpx
+                color: #999
+                line-height: 1.8
+                display: block
+                margin-bottom: 8rpx
+
+@keyframes rotate
+    from
+        transform: rotate(0deg)
+    to
+        transform: rotate(360deg)
+
+.map-wrapper
+    flex: 1
+    position: relative
+    
+    .map, .amap-container
+        width: 100%
+        height: 100%
+        
+    .map-center-marker
+        position: absolute
+        left: 50%
+        top: 50%
+        transform: translate(-50%, -100%)
+        z-index: 5
+        
+        .marker-icon
+            width: 60rpx
+            height: 80rpx
+
+.location-info
+    position: absolute
+    bottom: 180rpx
+    left: 32rpx
+    right: 32rpx
+    background: #fff
+    border-radius: 20rpx
+    padding: 30rpx
+    box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.1)
+    z-index: 10
+    
+    .info-title
+        font-size: 24rpx
+        color: #999
+        margin-bottom: 10rpx
+        
+    .info-name
+        font-size: 32rpx
+        color: #333
+        font-weight: 500
+        margin-bottom: 10rpx
+        
+    .info-address
+        font-size: 28rpx
+        color: #666
+
+.bottom-actions
+    position: absolute
+    bottom: 0
+    left: 0
+    right: 0
+    background: #fff
+    padding: 20rpx 32rpx
+    display: flex
+    gap: 20rpx
+    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1)
+    z-index: 11
+    
+    .locate-btn
+        width: 120rpx
+        height: 80rpx
+        background: #fff
+        border: 2rpx solid #256BFA
+        border-radius: 40rpx
+        display: flex
+        flex-direction: column
+        align-items: center
+        justify-content: center
+        font-size: 24rpx
+        color: #256BFA
+        
+        &:disabled
+            opacity: 0.5
+            color: #999
+            border-color: #999
+        
+        text
+            margin-top: 4rpx
+            
+    .confirm-btn
+        flex: 1
+        height: 80rpx
+        background: #256BFA
+        color: #fff
+        border-radius: 40rpx
+        font-size: 32rpx
+        border: none
+
+button::after
+    border: none
+</style>
+

packageA/pages/complete-info/skill-search.vue

@@ -0,0 +1,377 @@
+<template>
+    <AppLayout>
+        <view class="skill-search-container">
+            <!-- 固定顶部区域 -->
+            <view class="fixed-header">
+                <!-- 搜索框 -->
+                <view class="search-box">
+                    <input 
+                        class="search-input" 
+                        v-model="searchKeyword" 
+                        placeholder="请输入技能名称进行搜索"
+                        @input="handleSearch"
+                        confirm-type="search"
+                    />
+                    <view class="search-icon" @click="handleSearch">搜索</view>
+                </view>
+
+        <!-- 已选技能提示 -->
+        <view class="selected-tip" v-if="selectedSkill">
+            已选择技能：{{ selectedSkill }}
+        </view>
+            </view>
+
+            <!-- 可滚动内容区域 -->
+            <scroll-view class="scroll-content" scroll-y>
+                <view class="scroll-inner">
+                    <!-- 搜索结果列表 -->
+                    <view class="result-list" v-if="searchResults.length > 0">
+                        <view 
+                            class="result-item" 
+                            v-for="(item, index) in searchResults" 
+                            :key="index"
+                            @click="toggleSelect(item)"
+                        >
+                            <view class="item-content">
+                                <text class="item-name">{{ item.name }}</text>
+                            </view>
+                            <view 
+                                class="item-checkbox" 
+                                :class="{ 'checked': isSelected(item) }"
+                            >
+                                <text v-if="isSelected(item)" class="check-icon">✓</text>
+                            </view>
+                        </view>
+                    </view>
+
+                    <!-- 空状态 -->
+                    <view class="empty-state" v-if="!isSearching && searchResults.length === 0 && searchKeyword">
+                        <text class="empty-text">未找到相关技能</text>
+                    </view>
+
+                    <!-- 初始提示 -->
+                    <view class="empty-state" v-if="!isSearching && searchResults.length === 0 && !searchKeyword">
+                        <text class="empty-text">请输入技能名称进行搜索</text>
+                    </view>
+                </view>
+            </scroll-view>
+
+            <!-- 固定底部操作栏 -->
+            <view class="bottom-bar">
+                <view class="selected-skills" v-if="selectedSkill">
+                    <view class="skill-tag">
+                        <text class="tag-text">{{ selectedSkill }}</text>
+                        <text class="tag-close" @click.stop="removeSkill">×</text>
+                    </view>
+                </view>
+                <view class="action-buttons">
+                    <button class="btn-cancel" @click="handleCancel">取消</button>
+                    <button 
+                        class="btn-confirm" 
+                        :class="{ 'disabled': !selectedSkill }"
+                        @click="handleConfirm"
+                        :disabled="!selectedSkill"
+                    >
+                        确定
+                    </button>
+                </view>
+            </view>
+        </view>
+    </AppLayout>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import { inject } from 'vue';
+
+const { $api } = inject('globalFunction');
+
+const searchKeyword = ref('');
+const searchResults = ref([]);
+const selectedSkill = ref(''); // 改为单选，存储单个技能名称
+const isSearching = ref(false);
+let searchTimer = null;
+
+onLoad((options) => {
+    // 接收已选中的技能（单选模式，只接收单个技能）
+    if (options.selected) {
+        try {
+            const skills = JSON.parse(decodeURIComponent(options.selected));
+            if (Array.isArray(skills) && skills.length > 0) {
+                selectedSkill.value = skills[0]; // 只取第一个技能
+            }
+        } catch (e) {
+            console.error('解析已选技能失败:', e);
+        }
+    }
+});
+
+// 搜索处理（防抖）
+function handleSearch() {
+    const keyword = searchKeyword.value.trim();
+    
+    if (!keyword) {
+        searchResults.value = [];
+        return;
+    }
+
+    // 清除之前的定时器
+    if (searchTimer) {
+        clearTimeout(searchTimer);
+    }
+
+    // 防抖处理，500ms后执行搜索
+    searchTimer = setTimeout(() => {
+        performSearch(keyword);
+    }, 500);
+}
+
+// 执行搜索
+async function performSearch(keyword) {
+    if (!keyword.trim()) {
+        searchResults.value = [];
+        return;
+    }
+
+    isSearching.value = true;
+    
+    try {
+        const response = await $api.createRequest('/cms/dict/jobCategory', { name: keyword }, 'GET');
+        
+        // 处理接口返回的数据，支持多种可能的返回格式
+        let results = [];
+        if (response) {
+            if (Array.isArray(response)) {
+                // 如果直接返回数组
+                results = response;
+            } else if (response.data) {
+                // 如果返回 { data: [...] }
+                results = Array.isArray(response.data) ? response.data : [];
+            } else if (response.list) {
+                // 如果返回 { list: [...] }
+                results = Array.isArray(response.list) ? response.list : [];
+            }
+        }
+        
+        // 确保每个结果都有name字段
+        searchResults.value = results.map(item => {
+            if (typeof item === 'string') {
+                return { name: item };
+            }
+            return item;
+        });
+    } catch (error) {
+        console.error('搜索技能失败:', error);
+        $api.msg('搜索失败，请稍后重试');
+        searchResults.value = [];
+    } finally {
+        isSearching.value = false;
+    }
+}
+
+// 判断技能是否已选中
+function isSelected(item) {
+    return selectedSkill.value === item.name;
+}
+
+// 切换技能选择状态（单选模式）
+function toggleSelect(item) {
+    const skillName = item.name;
+    
+    if (selectedSkill.value === skillName) {
+        // 已选中，取消选择
+        selectedSkill.value = '';
+    } else {
+        // 选择新的技能
+        selectedSkill.value = skillName;
+    }
+}
+
+// 移除技能（单选模式，直接清空）
+function removeSkill() {
+    selectedSkill.value = '';
+}
+
+// 取消操作
+function handleCancel() {
+    uni.navigateBack();
+}
+
+// 确定操作
+function handleConfirm() {
+    if (!selectedSkill.value) {
+        $api.msg('请选择一个技能');
+        return;
+    }
+    
+    // 通过事件总线传递选中的技能（单选模式，传递单个技能名称）
+    uni.$emit('skillSelected', selectedSkill.value);
+    
+    // 返回上一页
+    uni.navigateBack();
+}
+
+onUnmounted(() => {
+    // 清理定时器
+    if (searchTimer) {
+        clearTimeout(searchTimer);
+    }
+});
+</script>
+
+<style lang="stylus" scoped>
+.skill-search-container
+    display: flex
+    flex-direction: column
+    height: 100%
+    background-color: #f5f5f5
+
+.fixed-header
+    flex-shrink: 0
+    background-color: #fff
+    border-bottom: 2rpx solid #ebebeb
+
+    .search-box
+        display: flex
+        align-items: center
+        padding: 24rpx
+        background-color: #fff
+
+        .search-input
+            flex: 1
+            height: 72rpx
+            padding: 0 24rpx
+            background-color: #f5f5f5
+            border-radius: 36rpx
+            font-size: 28rpx
+            color: #333
+
+        .search-icon
+            margin-left: 24rpx
+            padding: 16rpx 32rpx
+            background-color: #256bfa
+            color: #fff
+            border-radius: 36rpx
+            font-size: 28rpx
+
+    .selected-tip
+        padding: 16rpx 24rpx
+        background-color: #fff3cd
+        color: #856404
+        font-size: 24rpx
+        text-align: center
+
+.scroll-content
+    flex: 1
+    overflow: hidden
+    height: 0  // 关键：让flex布局正确计算高度
+    background-color: #fff
+
+    .scroll-inner
+        padding-bottom: 40rpx
+
+        .result-list
+            background-color: #fff
+            padding: 0 24rpx
+
+            .result-item
+                display: flex
+                align-items: center
+                justify-content: space-between
+                padding: 32rpx 0
+                border-bottom: 2rpx solid #ebebeb
+
+                .item-content
+                    flex: 1
+
+                    .item-name
+                        font-size: 32rpx
+                        color: #333
+
+                .item-checkbox
+                    width: 48rpx
+                    height: 48rpx
+                    border: 2rpx solid #ddd
+                    border-radius: 50%
+                    display: flex
+                    align-items: center
+                    justify-content: center
+                    margin-left: 24rpx
+
+                    &.checked
+                        background-color: #256bfa
+                        border-color: #256bfa
+
+                        .check-icon
+                            color: #fff
+                            font-size: 32rpx
+                            font-weight: bold
+
+        .empty-state
+            display: flex
+            align-items: center
+            justify-content: center
+            min-height: 400rpx
+
+            .empty-text
+                font-size: 28rpx
+                color: #999
+
+.bottom-bar
+    flex-shrink: 0
+    background-color: #fff
+    border-top: 2rpx solid #ebebeb
+    padding: 24rpx
+    box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05)  // 添加阴影，让底部栏更明显
+
+    .selected-skills
+        display: flex
+        flex-wrap: wrap
+        margin-bottom: 24rpx
+        min-height: 60rpx
+
+        .skill-tag
+            display: inline-flex
+            align-items: center
+            padding: 12rpx 24rpx
+            margin-right: 16rpx
+            margin-bottom: 16rpx
+            background-color: #e8f4ff
+            border-radius: 32rpx
+            border: 2rpx solid #256bfa
+
+            .tag-text
+                font-size: 26rpx
+                color: #256bfa
+                margin-right: 12rpx
+
+            .tag-close
+                font-size: 32rpx
+                color: #256bfa
+                line-height: 1
+                cursor: pointer
+
+    .action-buttons
+        display: flex
+        gap: 24rpx
+
+        .btn-cancel, .btn-confirm
+            flex: 1
+            height: 88rpx
+            border-radius: 12rpx
+            font-size: 32rpx
+            border: none
+
+        .btn-cancel
+            background-color: #f5f5f5
+            color: #666
+
+        .btn-confirm
+            background-color: #256bfa
+            color: #fff
+
+            &.disabled
+                background-color: #ccc
+                color: #999
+</style>