165 lines
3.1 KiB
Vue
165 lines
3.1 KiB
Vue
<template>
|
||
<view class="search-bar-wrapper">
|
||
<!-- 搜索框 -->
|
||
<view class="search-bar">
|
||
<view class="search-input-wrapper">
|
||
<uni-icons type="search" size="20" color="#A0AEC0" class="search-icon" />
|
||
<input
|
||
class="search-input"
|
||
v-model="keyword"
|
||
placeholder="搜索课程名称"
|
||
placeholder-class="input-placeholder"
|
||
@confirm="handleSearch"
|
||
/>
|
||
<uni-icons
|
||
v-if="keyword"
|
||
type="closeempty"
|
||
size="16"
|
||
color="#A0AEC0"
|
||
class="clear-icon"
|
||
@click="clearSearch"
|
||
/>
|
||
</view>
|
||
<view class="search-btn" @click="handleSearch">搜索</view>
|
||
</view>
|
||
|
||
<!-- 热门关键词 -->
|
||
<view class="hot-keywords">
|
||
<text class="hot-label">热门搜索：</text>
|
||
<view
|
||
v-for="(kw, index) in hotKeywords"
|
||
:key="index"
|
||
:class="['hot-tag', { active: keyword === kw }]"
|
||
@click="selectKeyword(kw)"
|
||
>
|
||
{{ kw }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch } from 'vue'
|
||
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
hotKeywords: {
|
||
type: Array,
|
||
default: () => ['燃脂', '瑜伽', '单车', '普拉提', '高强度']
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['update:modelValue', 'search'])
|
||
|
||
const keyword = ref(props.modelValue)
|
||
|
||
watch(() => props.modelValue, (val) => {
|
||
keyword.value = val
|
||
})
|
||
|
||
const handleSearch = () => {
|
||
console.log('[SearchBar] 搜索参数:', { keyword: keyword.value })
|
||
emit('update:modelValue', keyword.value)
|
||
emit('search', { keyword: keyword.value })
|
||
}
|
||
|
||
const clearSearch = () => {
|
||
keyword.value = ''
|
||
emit('update:modelValue', '')
|
||
console.log('[SearchBar] 已清除搜索关键词')
|
||
}
|
||
|
||
const selectKeyword = (kw) => {
|
||
keyword.value = kw
|
||
handleSearch()
|
||
}
|
||
|
||
const getSearchParams = () => {
|
||
console.log('[SearchBar] 获取搜索参数:', { keyword: keyword.value })
|
||
return { keyword: keyword.value }
|
||
}
|
||
|
||
defineExpose({
|
||
getSearchParams,
|
||
clearSearch
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 搜索框 */
|
||
.search-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.search-input-wrapper {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #F5F7FA;
|
||
border-radius: 44rpx;
|
||
padding: 0 24rpx;
|
||
height: 72rpx;
|
||
|
||
.search-icon {
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #1a202c;
|
||
}
|
||
|
||
.input-placeholder {
|
||
color: #A0AEC0;
|
||
}
|
||
|
||
.clear-icon {
|
||
padding: 8rpx;
|
||
}
|
||
}
|
||
|
||
.search-btn {
|
||
padding: 0 32rpx;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
border-radius: 44rpx;
|
||
}
|
||
}
|
||
|
||
/* 热门关键词 */
|
||
.hot-keywords {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
|
||
.hot-label {
|
||
font-size: 26rpx;
|
||
color: #8A99B4;
|
||
}
|
||
|
||
.hot-tag {
|
||
padding: 8rpx 20rpx;
|
||
background: #F5F7FA;
|
||
color: #5E6F8D;
|
||
font-size: 24rpx;
|
||
border-radius: 28rpx;
|
||
transition: all 0.2s ease;
|
||
|
||
&.active {
|
||
background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
</style> |