You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
383 lines
14 KiB
383 lines
14 KiB
import 'package:cached_network_image/cached_network_image.dart';
|
|
import 'package:dating_touchme_app/controller/discover/room_controller.dart';
|
|
import 'package:dating_touchme_app/controller/overlay_controller.dart';
|
|
import 'package:dating_touchme_app/generated/assets.dart';
|
|
import 'package:dating_touchme_app/model/home/marriage_data.dart';
|
|
import 'package:dating_touchme_app/pages/discover/live_room_page.dart';
|
|
import 'package:dating_touchme_app/pages/home/user_information_page.dart';
|
|
import 'package:dating_touchme_app/pages/message/chat_page.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
|
|
import 'package:get/get.dart';
|
|
|
|
// 通用头部组件:头像/昵称/在线/认证/Hi/直播中徽标
|
|
class _CardHeader extends StatelessWidget {
|
|
final MarriageData item;
|
|
const _CardHeader({required this.item});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final bool isLive = item.isLive;
|
|
final bool isOnline = true; //item.isOnline ?? false;
|
|
|
|
return Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
// 头像 + 状态小圆点
|
|
Stack(
|
|
children: [
|
|
// 头像 + 可选紫色描边
|
|
Container(
|
|
padding: isLive ? const EdgeInsets.all(2) : EdgeInsets.zero,
|
|
decoration: isLive
|
|
? BoxDecoration(
|
|
borderRadius: BorderRadius.circular(32),
|
|
border: Border.all(
|
|
color: const Color(0xFFB58BFF),
|
|
width: 2,
|
|
),
|
|
)
|
|
: null,
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(30),
|
|
child: CachedNetworkImage(
|
|
imageUrl: '${item.avatar}?x-oss-process=image/format,webp/resize,w_320',
|
|
width: 60,
|
|
height: 60,
|
|
imageBuilder: (context, imageProvider) => Container(
|
|
decoration: BoxDecoration(
|
|
image: DecorationImage(
|
|
image: imageProvider,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
errorWidget: (context, url, error) => Image.asset(
|
|
Assets.imagesUserAvatar,
|
|
width: 60,
|
|
height: 60,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// 使用Wrap组件让所有标签在空间允许时显示在一行,空间不足时自动换行
|
|
Wrap(
|
|
spacing: 6,
|
|
runSpacing: 2,
|
|
children: [
|
|
// 用户名
|
|
Text(
|
|
item.name ?? '用户',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w500,
|
|
color: Color.fromRGBO(51, 51, 51, 1),
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
if (item.isRealNameCertified == true)
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 8,
|
|
vertical: 2,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFFF3E9FF),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
constraints: BoxConstraints(
|
|
minWidth: 40, // 设置最小宽度以保证视觉效果
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min, // 确保Row只占用必要的宽度
|
|
children: [
|
|
Image.asset(
|
|
Assets.imagesVerifiedIcon,
|
|
width: 14,
|
|
height: 12,
|
|
),
|
|
const SizedBox(width: 4),
|
|
const Text(
|
|
'实名',
|
|
style: TextStyle(
|
|
fontSize: 9,
|
|
color: Color.fromRGBO(160, 92, 255, 1),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// 直播状态下显示视频相亲中标签
|
|
if (isLive)
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 8,
|
|
vertical: 2,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: Color.fromRGBO(234, 255, 219, 1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Text(
|
|
'视频相亲中',
|
|
style: TextStyle(
|
|
fontSize: 9,
|
|
color: Color.fromRGBO(38, 199, 124, 1),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 6),
|
|
SizedBox(
|
|
height: 16,
|
|
child: Text(
|
|
'${item.age ?? 0}岁 ${(item.cityName ?? '') != "" ? "· " : ""}${item.cityName ?? ''}${item.districtName != null ? item.districtName : ''}',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: Color.fromRGBO(51, 51, 51, 1),
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// 根据不同状态显示不同按钮 - 都放在HI按钮相同位置
|
|
InkWell(
|
|
onTap: () async {
|
|
// 点击事件处理
|
|
if (isLive) {
|
|
// 进入直播间逻辑
|
|
try {
|
|
// 1. 隐藏直播间小窗口(如果存在)
|
|
if (Get.isRegistered<OverlayController>()) {
|
|
final overlayController = Get.find<OverlayController>();
|
|
overlayController.hide();
|
|
}
|
|
|
|
// 2. 获取 RoomController 实例
|
|
final roomController = Get.isRegistered<RoomController>()
|
|
? Get.find<RoomController>()
|
|
: Get.put(RoomController());
|
|
|
|
// 3. 如果当前已经在直播间,先退出当前直播间
|
|
// leaveChannel 内部会处理未在频道时的情况
|
|
await roomController.leaveChannel();
|
|
|
|
// 4. 跳转到新的直播间页面
|
|
// 这里暂时使用 id: 0,实际频道信息由后端/进入逻辑决定
|
|
await Get.to(() => const LiveRoomPage(id: 0));
|
|
} catch (e) {
|
|
print('❌ [ContentCard] 进入直播间失败: $e');
|
|
SmartDialog.showToast('进入直播间失败,请重试');
|
|
}
|
|
} else if (isOnline) {
|
|
// HI按钮点击逻辑 - 跳转到聊天页面
|
|
try {
|
|
if (item.userId.isEmpty) {
|
|
SmartDialog.showToast('用户ID不存在,无法发送消息');
|
|
return;
|
|
}
|
|
await Get.to(() => ChatPage(
|
|
userId: item.userId,
|
|
userData: item,
|
|
));
|
|
} catch (e) {
|
|
print('❌ [ContentCard] 跳转聊天页面失败: $e');
|
|
SmartDialog.showToast('跳转失败,请重试');
|
|
}
|
|
} else {
|
|
// 发消息按钮点击逻辑 - 跳转到聊天页面
|
|
try {
|
|
if (item.userId.isEmpty) {
|
|
SmartDialog.showToast('用户ID不存在,无法发送消息');
|
|
return;
|
|
}
|
|
await Get.to(() => ChatPage(
|
|
userId: item.userId,
|
|
userData: item,
|
|
));
|
|
} catch (e) {
|
|
print('❌ [ContentCard] 跳转聊天页面失败: $e');
|
|
SmartDialog.showToast('跳转失败,请重试');
|
|
}
|
|
}
|
|
},
|
|
child: Image.asset(
|
|
_getButtonImage(isLive, isOnline),
|
|
width: isLive ? 60 : 50,
|
|
height: 30,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
String _getButtonImage(bool isLive, bool isOnline) {
|
|
if (isLive) {
|
|
return Assets.imagesLiveIcon; // 直播显示直播间按钮(放在HI位置)
|
|
} else if (isOnline) {
|
|
return Assets.imagesHiIcon; // 在线显示HI按钮
|
|
} else {
|
|
return Assets.imagesSendMessageIcon; // 下线显示发消息按钮(放在HI位置)
|
|
}
|
|
}
|
|
}
|
|
|
|
// 统一的内容卡片组件,根据接口数据显示不同状态
|
|
class ContentCard extends StatelessWidget {
|
|
final MarriageData item;
|
|
ContentCard({required this.item});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTap: () {
|
|
// 点击卡片跳转到用户信息页面,传递用户数据
|
|
// 注意:userId 参数应该传入 miId,因为详情接口使用 miId 来获取用户信息
|
|
Get.to(() => UserInformationPage(miId: item.miId, userId: item.userId,));
|
|
},
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(12),
|
|
|
|
),
|
|
padding: const EdgeInsets.all(12),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// 头部:头像、昵称、在线状态、按钮等 - 所有按钮都放在HI位置
|
|
_CardHeader(item: item),
|
|
|
|
// 内容区域 - 根据类型显示不同内容
|
|
_buildContent(),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildContent() {
|
|
return Builder(
|
|
builder: (context) {
|
|
final List<Widget> contentWidgets = [];
|
|
// 内容文本
|
|
if (item.describeInfo != null && item.describeInfo!.isNotEmpty) {
|
|
contentWidgets.add(
|
|
SizedBox(
|
|
// height: 20, // 固定高度20
|
|
child: Text(
|
|
item.describeInfo!,
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
color: Color.fromRGBO(51, 51, 51, 0.6),
|
|
),
|
|
overflow: TextOverflow.ellipsis, // 文本超出显示...
|
|
maxLines: 1, // 限制为单行
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// 根据接口返回的图片列表动态显示图片
|
|
if (item.photoList != null && item.photoList!.isNotEmpty) {
|
|
contentWidgets.add(const SizedBox(height: 6));
|
|
|
|
// 计算固定宽度:每张图片的宽度 = (屏幕宽度 - 卡片左右padding - ListView左右padding - 图片间距) / 3
|
|
// 卡片左右padding: 12 * 2 = 24
|
|
// ListView左右padding: 12 * 2 = 24
|
|
// 3张图片时,间距: 12 * 2 = 24 (第2张和第3张左边各12)
|
|
final screenWidth = MediaQuery.of(context).size.width;
|
|
final cardPadding = 12.0 * 2; // 卡片左右padding
|
|
final listPadding = 12.0 * 2; // ListView左右padding
|
|
final imageSpacing = 12.0 * 2; // 3张图片时的总间距
|
|
final imageWidth =
|
|
(screenWidth - cardPadding - listPadding - imageSpacing) / 3;
|
|
final imageHeight = imageWidth * 1.05; // aspectRatio 1.05
|
|
|
|
// 统一使用相同的布局:无论1张、2张还是3张,都使用相同的显示方式和大小
|
|
// 最多显示3张,按顺序排列
|
|
final displayPhotos = item.photoList!.take(3).toList();
|
|
contentWidgets.add(
|
|
Row(
|
|
children: displayPhotos.asMap().entries.map((entry) {
|
|
int index = entry.key;
|
|
String imageUrl = entry.value.photoUrl ?? '';
|
|
return Padding(
|
|
padding: EdgeInsets.only(left: index > 0 ? 12 : 0),
|
|
child: SizedBox(
|
|
width: 70,
|
|
height: 70,
|
|
child: _NetworkImageWidget(
|
|
imageUrl: imageUrl,
|
|
aspectRatio: 1,
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
);
|
|
}
|
|
|
|
return Container(
|
|
padding: EdgeInsets.only(left: 70),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: contentWidgets,
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
// 网络图片组件,支持加载网络图片并显示占位图 - 修复可能的闪退问题
|
|
class _NetworkImageWidget extends StatelessWidget {
|
|
final String imageUrl;
|
|
final double aspectRatio;
|
|
const _NetworkImageWidget({
|
|
required this.imageUrl,
|
|
required this.aspectRatio,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return CachedNetworkImage(
|
|
imageUrl: '$imageUrl?x-oss-process=image/format,webp/resize,w_320',
|
|
width: 80,
|
|
height: 80,
|
|
fit: BoxFit.cover,
|
|
imageBuilder: (context, imageProvider) => Container(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(8),
|
|
image: DecorationImage(
|
|
image: imageProvider,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
errorWidget: (context, url, error) => Image.asset(
|
|
Assets.imagesUserAvatar,
|
|
width: 60,
|
|
height: 60,
|
|
fit: BoxFit.cover,
|
|
),
|
|
);
|
|
}
|
|
}
|