完成团课列表页面布局以及基础交互，使用测试数据

2026-06-04 13:05:26 +08:00
parent f0d97e58d1
commit 2357dcfc67
13 changed files with 2653 additions and 0 deletions
@@ -0,0 +1,165 @@
+<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>