622 lines
18 KiB
Dart
622 lines
18 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:get/get.dart';
|
||
import 'package:loopin/service/http.dart';
|
||
import 'package:loopin/components/my_toast.dart';
|
||
import '../../behavior/custom_scroll_behavior.dart';
|
||
|
||
class SearchResultPage extends StatefulWidget {
|
||
const SearchResultPage({super.key});
|
||
|
||
@override
|
||
State<SearchResultPage> createState() => _SearchResultPageState();
|
||
}
|
||
|
||
class _SearchResultPageState extends State<SearchResultPage>
|
||
with SingleTickerProviderStateMixin {
|
||
late TabController _tabController;
|
||
String _searchQuery = Get.parameters?['searchWords'] ?? '';
|
||
int _initialTabIndex = 0;
|
||
final TextEditingController _searchController = TextEditingController();
|
||
final FocusNode _searchFocusNode = FocusNode();
|
||
|
||
// 三个tab的数据
|
||
List<dynamic> _videoResults = [];
|
||
List<dynamic> _productResults = [];
|
||
List<dynamic> _userResults = [];
|
||
bool _isLoading = true;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
|
||
// 初始化搜索控制器
|
||
_searchController.text = _searchQuery;
|
||
|
||
// 解析tab参数
|
||
final tabParam = Get.parameters?['tab'];
|
||
if (tabParam != null && tabParam.isNotEmpty) {
|
||
_initialTabIndex = int.tryParse(tabParam) ?? 0;
|
||
}
|
||
|
||
_tabController = TabController(
|
||
length: 4,
|
||
vsync: this,
|
||
initialIndex: _initialTabIndex,
|
||
);
|
||
|
||
// 监听Tab切换
|
||
_tabController.addListener(_onTabChanged);
|
||
|
||
// 加载初始数据
|
||
_loadInitialData();
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
_tabController.removeListener(_onTabChanged);
|
||
_tabController.dispose();
|
||
_searchController.dispose();
|
||
_searchFocusNode.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
void _onTabChanged() {
|
||
if (_tabController.indexIsChanging) {
|
||
// 加载对应Tab的数据
|
||
_loadTabData(_tabController.index);
|
||
}
|
||
}
|
||
|
||
// 执行搜索
|
||
void _performSearch() {
|
||
final newQuery = _searchController.text.trim();
|
||
if (newQuery.isEmpty) {
|
||
MyToast().tip(
|
||
title: '请输入搜索关键词',
|
||
position: 'center',
|
||
type: 'warning',
|
||
);
|
||
return;
|
||
}
|
||
|
||
if (newQuery == _searchQuery) {
|
||
return; // 搜索关键词相同，不需要重新搜索
|
||
}
|
||
|
||
setState(() {
|
||
_searchQuery = newQuery;
|
||
_isLoading = true;
|
||
});
|
||
|
||
// 关闭键盘
|
||
_searchFocusNode.unfocus();
|
||
|
||
// 重新加载数据
|
||
_loadInitialData();
|
||
}
|
||
|
||
// 加载初始数据
|
||
Future<void> _loadInitialData() async {
|
||
try {
|
||
setState(() {
|
||
_isLoading = true;
|
||
});
|
||
|
||
// 加载第一个Tab的数据
|
||
await _loadTabData(_initialTabIndex);
|
||
} catch (e) {
|
||
print('加载数据失败: $e');
|
||
MyToast().tip(
|
||
title: '加载失败',
|
||
position: 'center',
|
||
type: 'error',
|
||
);
|
||
} finally {
|
||
setState(() {
|
||
_isLoading = false;
|
||
});
|
||
}
|
||
}
|
||
|
||
// 加载指定Tab的数据
|
||
Future<void> _loadTabData(int tabIndex) async {
|
||
try {
|
||
setState(() {
|
||
_isLoading = true;
|
||
});
|
||
|
||
switch (tabIndex) {
|
||
case 0: // 视频
|
||
final res = await Http.get('/api/search/videos', params: {
|
||
'keyword': _searchQuery,
|
||
'page': 1,
|
||
'current': 20,
|
||
});
|
||
if (res['code'] == 200) {
|
||
setState(() {
|
||
_videoResults = res['data']['list'] ?? [];
|
||
});
|
||
}
|
||
break;
|
||
case 1: // 商品
|
||
final res = await Http.get('/api/search/products', params: {
|
||
'keyword': _searchQuery,
|
||
'page': 1,
|
||
'current': 20,
|
||
});
|
||
if (res['code'] == 200) {
|
||
setState(() {
|
||
_productResults = res['data']['list'] ?? [];
|
||
});
|
||
}
|
||
break;
|
||
case 2: // 用户
|
||
final res = await Http.get('/api/search/users', params: {
|
||
'keyword': _searchQuery,
|
||
'page': 1,
|
||
'current': 20,
|
||
});
|
||
if (res['code'] == 200) {
|
||
setState(() {
|
||
_userResults = res['data']['list'] ?? [];
|
||
});
|
||
}
|
||
break;
|
||
}
|
||
} catch (e) {
|
||
print('加载Tab数据失败: $e');
|
||
MyToast().tip(
|
||
title: '加载失败',
|
||
position: 'center',
|
||
type: 'error',
|
||
);
|
||
} finally {
|
||
setState(() {
|
||
_isLoading = false;
|
||
});
|
||
}
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
backgroundColor: Colors.white,
|
||
appBar: AppBar(
|
||
title: Container(
|
||
height: 36,
|
||
decoration: BoxDecoration(
|
||
color: Colors.grey[800],
|
||
borderRadius: BorderRadius.circular(18),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
const SizedBox(width: 12),
|
||
const Icon(Icons.search, color: Colors.grey, size: 20),
|
||
const SizedBox(width: 8),
|
||
Expanded(
|
||
child: TextField(
|
||
controller: _searchController,
|
||
focusNode: _searchFocusNode,
|
||
style: const TextStyle(
|
||
color: Colors.white,
|
||
fontSize: 14,
|
||
height: 1.2,
|
||
),
|
||
decoration: const InputDecoration(
|
||
hintText: '搜索视频、商品、用户、团购...',
|
||
hintStyle: TextStyle(
|
||
color: Colors.grey,
|
||
fontSize: 14,
|
||
height: 1.2,
|
||
),
|
||
border: InputBorder.none,
|
||
contentPadding: EdgeInsets.symmetric(vertical: 8),
|
||
isDense: true,
|
||
),
|
||
onSubmitted: (_) => _performSearch(),
|
||
),
|
||
),
|
||
IconButton(
|
||
icon: const Icon(Icons.close, color: Colors.grey, size: 18),
|
||
onPressed: () {
|
||
_searchController.clear();
|
||
},
|
||
padding: const EdgeInsets.all(4),
|
||
constraints: const BoxConstraints(),
|
||
),
|
||
const SizedBox(width: 4),
|
||
],
|
||
),
|
||
),
|
||
backgroundColor: Colors.black,
|
||
foregroundColor: Colors.white,
|
||
elevation: 0.5,
|
||
actions: [
|
||
TextButton(
|
||
onPressed: _performSearch,
|
||
child: const Text(
|
||
'搜索',
|
||
style: TextStyle(
|
||
color: Colors.white,
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 8),
|
||
],
|
||
),
|
||
body: Column(
|
||
children: [
|
||
Container(
|
||
color: Colors.white,
|
||
padding: const EdgeInsets.only(top: 8),
|
||
child: TabBar(
|
||
controller: _tabController,
|
||
// isScrollable: true,
|
||
indicatorColor: Colors.pink,
|
||
labelColor: Colors.pink,
|
||
unselectedLabelColor: Colors.grey,
|
||
labelStyle: const TextStyle(fontWeight: FontWeight.bold),
|
||
unselectedLabelStyle: const TextStyle(fontWeight: FontWeight.normal),
|
||
padding: const EdgeInsets.only(left: 16), // 添加左侧内边距
|
||
indicatorPadding: EdgeInsets.zero,
|
||
labelPadding: const EdgeInsets.symmetric(horizontal: 16), // 保持标签间距
|
||
indicatorSize: TabBarIndicatorSize.label, // 改为label宽度，与文字一样宽
|
||
dividerColor: Colors.transparent,
|
||
tabs: const [
|
||
Tab(text: '视频'),
|
||
Tab(text: '商品'),
|
||
Tab(text: '用户'),
|
||
],
|
||
),
|
||
),
|
||
// Tab内容区域
|
||
Expanded(
|
||
child: _isLoading
|
||
? const Center(child: CircularProgressIndicator())
|
||
: TabBarView(
|
||
controller: _tabController,
|
||
children: [
|
||
// 视频Tab
|
||
_buildVideoTab(),
|
||
// 商品Tab
|
||
_buildProductTab(),
|
||
// 用户Tab
|
||
_buildUserTab(),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
// 视频Tab
|
||
Widget _buildVideoTab() {
|
||
if (_videoResults.isEmpty) {
|
||
return _buildEmptyView('暂无视频结果');
|
||
}
|
||
|
||
return ScrollConfiguration(
|
||
behavior: CustomScrollBehavior().copyWith(scrollbars: false),
|
||
child: ListView.builder(
|
||
padding: const EdgeInsets.all(12),
|
||
itemCount: _videoResults.length,
|
||
itemBuilder: (context, index) {
|
||
final video = _videoResults[index] as Map<String, dynamic>;
|
||
return _buildVideoItem(video);
|
||
},
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildVideoItem(Map<String, dynamic> video) {
|
||
return Container(
|
||
margin: const EdgeInsets.only(bottom: 12),
|
||
child: Row(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// 视频封面
|
||
Container(
|
||
width: 120,
|
||
height: 80,
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(6),
|
||
color: Colors.grey[200],
|
||
image: video['cover'] != null
|
||
? DecorationImage(
|
||
image: NetworkImage(video['cover'].toString()),
|
||
fit: BoxFit.cover,
|
||
)
|
||
: null,
|
||
),
|
||
child: video['cover'] == null
|
||
? const Icon(Icons.videocam, color: Colors.grey)
|
||
: null,
|
||
),
|
||
const SizedBox(width: 12),
|
||
// 视频信息
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
video['title']?.toString() ?? '无标题',
|
||
style: const TextStyle(
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
maxLines: 2,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
const SizedBox(height: 4),
|
||
Text(
|
||
video['author']?.toString() ?? '未知作者',
|
||
style: const TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.grey,
|
||
),
|
||
),
|
||
const SizedBox(height: 4),
|
||
Row(
|
||
children: [
|
||
Text(
|
||
'#${video['tag']?.toString() ?? '无标签'}',
|
||
style: const TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.blue,
|
||
),
|
||
),
|
||
const SizedBox(width: 8),
|
||
Text(
|
||
video['location']?.toString() ?? '',
|
||
style: const TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.grey,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
// 商品Tab
|
||
Widget _buildProductTab() {
|
||
if (_productResults.isEmpty) {
|
||
return _buildEmptyView('暂无商品结果');
|
||
}
|
||
|
||
return ScrollConfiguration(
|
||
behavior: CustomScrollBehavior().copyWith(scrollbars: false),
|
||
child: ListView.builder(
|
||
padding: const EdgeInsets.all(12),
|
||
itemCount: _productResults.length,
|
||
itemBuilder: (context, index) {
|
||
final product = _productResults[index] as Map<String, dynamic>;
|
||
return _buildProductItem(product);
|
||
},
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildProductItem(Map<String, dynamic> product) {
|
||
return Container(
|
||
margin: const EdgeInsets.only(bottom: 12),
|
||
padding: const EdgeInsets.all(12),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(8),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: Colors.grey.withOpacity(0.1),
|
||
blurRadius: 4,
|
||
offset: const Offset(0, 2),
|
||
),
|
||
],
|
||
),
|
||
child: Row(
|
||
children: [
|
||
// 商品图片
|
||
Container(
|
||
width: 80,
|
||
height: 80,
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(6),
|
||
color: Colors.grey[200],
|
||
image: product['image'] != null
|
||
? DecorationImage(
|
||
image: NetworkImage(product['image'].toString()),
|
||
fit: BoxFit.cover,
|
||
)
|
||
: null,
|
||
),
|
||
child: product['image'] == null
|
||
? const Icon(Icons.shopping_bag, color: Colors.grey)
|
||
: null,
|
||
),
|
||
const SizedBox(width: 12),
|
||
// 商品信息
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
product['name']?.toString() ?? '未知商品',
|
||
style: const TextStyle(
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
maxLines: 2,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
const SizedBox(height: 6),
|
||
Text(
|
||
'¥${product['price']?.toString() ?? '0.00'}',
|
||
style: const TextStyle(
|
||
fontSize: 16,
|
||
fontWeight: FontWeight.bold,
|
||
color: Colors.pink,
|
||
),
|
||
),
|
||
const SizedBox(height: 6),
|
||
Row(
|
||
children: [
|
||
Text(
|
||
'已售 ${product['sold']?.toString() ?? '0'}',
|
||
style: const TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.grey,
|
||
),
|
||
),
|
||
const SizedBox(width: 12),
|
||
Text(
|
||
'${product['comments']?.toString() ?? '0'}条评论',
|
||
style: const TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.grey,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
// 购买按钮
|
||
IconButton(
|
||
onPressed: () {
|
||
// 跳转到商品详情
|
||
},
|
||
icon: const Icon(Icons.shopping_cart, size: 20),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
// 用户Tab
|
||
Widget _buildUserTab() {
|
||
if (_userResults.isEmpty) {
|
||
return _buildEmptyView('暂无用户结果');
|
||
}
|
||
|
||
return ScrollConfiguration(
|
||
behavior: CustomScrollBehavior().copyWith(scrollbars: false),
|
||
child: ListView.builder(
|
||
padding: const EdgeInsets.all(12),
|
||
itemCount: _userResults.length,
|
||
itemBuilder: (context, index) {
|
||
final user = _userResults[index] as Map<String, dynamic>;
|
||
return _buildUserItem(user);
|
||
},
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildUserItem(Map<String, dynamic> user) {
|
||
return Container(
|
||
margin: const EdgeInsets.only(bottom: 12),
|
||
padding: const EdgeInsets.all(12),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(8),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: Colors.grey.withOpacity(0.1),
|
||
blurRadius: 4,
|
||
offset: const Offset(0, 2),
|
||
),
|
||
],
|
||
),
|
||
child: Row(
|
||
children: [
|
||
// 用户头像
|
||
Container(
|
||
width: 50,
|
||
height: 50,
|
||
decoration: BoxDecoration(
|
||
shape: BoxShape.circle,
|
||
color: Colors.grey[200],
|
||
image: user['avatar'] != null
|
||
? DecorationImage(
|
||
image: NetworkImage(user['avatar'].toString()),
|
||
fit: BoxFit.cover,
|
||
)
|
||
: null,
|
||
),
|
||
child: user['avatar'] == null
|
||
? const Icon(Icons.person, color: Colors.grey)
|
||
: null,
|
||
),
|
||
const SizedBox(width: 12),
|
||
// 用户信息
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
user['name']?.toString() ?? '未知用户',
|
||
style: const TextStyle(
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w500,
|
||
),
|
||
),
|
||
const SizedBox(height: 4),
|
||
Text(
|
||
'粉丝: ${user['fans']?.toString() ?? '0'}',
|
||
style: const TextStyle(
|
||
fontSize: 12,
|
||
color: Colors.grey,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
// 关注按钮
|
||
ElevatedButton(
|
||
onPressed: () {
|
||
// 关注用户
|
||
},
|
||
style: ElevatedButton.styleFrom(
|
||
backgroundColor: Colors.pink,
|
||
foregroundColor: Colors.white,
|
||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(20),
|
||
),
|
||
),
|
||
child: const Text(
|
||
'关注',
|
||
style: TextStyle(fontSize: 12),
|
||
),
|
||
),
|
||
],
|
||
)
|
||
);
|
||
}
|
||
|
||
// 空视图
|
||
Widget _buildEmptyView(String message) {
|
||
return Center(
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
const Icon(Icons.search_off, size: 60, color: Colors.grey),
|
||
const SizedBox(height: 16),
|
||
Text(
|
||
message,
|
||
style: const TextStyle(
|
||
fontSize: 16,
|
||
color: Colors.grey,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
} |