647 lines
26 KiB
Dart
647 lines
26 KiB
Dart
/// 商品详情页
|
||
library;
|
||
|
||
import 'dart:convert';
|
||
|
||
import 'package:card_swiper/card_swiper.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:flutter_html/flutter_html.dart';
|
||
import 'package:get/get.dart';
|
||
import 'package:loopin/IM/controller/chat_controller.dart';
|
||
import 'package:loopin/IM/im_message.dart';
|
||
import 'package:loopin/IM/im_service.dart';
|
||
import 'package:loopin/api/shop_api.dart';
|
||
import 'package:loopin/components/my_toast.dart';
|
||
import 'package:loopin/components/network_or_asset_image.dart';
|
||
import 'package:loopin/models/share_type.dart';
|
||
import 'package:loopin/models/summary_type.dart';
|
||
import 'package:loopin/service/http.dart';
|
||
import 'package:loopin/utils/index.dart';
|
||
import 'package:loopin/utils/wxsdk.dart';
|
||
import 'package:shirne_dialog/shirne_dialog.dart';
|
||
import 'package:tencent_cloud_chat_sdk/models/v2_tim_conversation.dart';
|
||
|
||
import '../../behavior/custom_scroll_behavior.dart';
|
||
import '../../components/backtop.dart';
|
||
|
||
class Goods extends StatefulWidget {
|
||
const Goods({super.key});
|
||
|
||
@override
|
||
State<Goods> createState() => _GoodsState();
|
||
}
|
||
|
||
class _GoodsState extends State<Goods> {
|
||
// late int shopId; //商品id
|
||
dynamic shopObj;
|
||
late ScrollController scrollController = ScrollController();
|
||
final ChatController chatController = Get.find<ChatController>();
|
||
// 滚动位置
|
||
double scrollOffset = 0;
|
||
// 分享列表
|
||
List shareList = [
|
||
{'icon': 'assets/images/share-wx.png', 'label': '好友'},
|
||
{'icon': 'assets/images/share-wx.png', 'label': '微信'},
|
||
{'icon': 'assets/images/share-pyq.png', 'label': '朋友圈'},
|
||
];
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
final goodsId = Get.arguments['goodsId'];
|
||
scrollController.addListener(() {
|
||
setState(() {
|
||
scrollOffset = scrollController.offset;
|
||
});
|
||
});
|
||
shopDetail(goodsId);
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
scrollController.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
///商品详情
|
||
void shopDetail(goodsId) async {
|
||
try {
|
||
final res = await Http.get('${ShopApi.shopDetail}/$goodsId');
|
||
logger.e(res['data']);
|
||
setState(() {
|
||
shopObj = res['data']; // 注意取 data 部分
|
||
});
|
||
} catch (e) {
|
||
logger.e(e);
|
||
Get.back();
|
||
}
|
||
}
|
||
|
||
void handleShareClick(int index) {
|
||
final description = shopObj['describe']; // 商品描述
|
||
if (index == 1) {
|
||
// 好友
|
||
Wxsdk.shareToFriend(title: '快看看我分享的商品', description: description, webpageUrl: '${ShareType.shop.name}?id=${shopObj['id']}');
|
||
} else if (index == 2) {
|
||
// 朋友圈
|
||
Wxsdk.shareToTimeline(title: '快看看我分享的商品', webpageUrl: '${ShareType.shop.name}?id=${shopObj['id']}');
|
||
}
|
||
}
|
||
|
||
void handlCoverClick(V2TimConversation conv) async {
|
||
// 发送VideoMsg,获取当前视频信息
|
||
final userId = conv.userID;
|
||
//price,title,url,sell
|
||
final makeJson = jsonEncode({
|
||
"price": shopObj['price'],
|
||
"title": shopObj['describe'],
|
||
"url": shopObj['pic'],
|
||
"sell": Utils().graceNumber(int.parse(shopObj['sales'] ?? '0')),
|
||
});
|
||
final res = await IMMessage().createCustomMessage(
|
||
data: makeJson,
|
||
);
|
||
if (res.success) {
|
||
final sendRes = await IMMessage().sendMessage(msg: res.data!.messageInfo!, toUserID: userId, cloudCustomData: SummaryType.shareTuangou);
|
||
if (sendRes.success) {
|
||
MyToast().tip(
|
||
title: '分享成功',
|
||
position: 'center',
|
||
type: 'success',
|
||
);
|
||
Get.back();
|
||
} else {
|
||
logger.e(res.desc);
|
||
}
|
||
} else {
|
||
logger.e(res.desc);
|
||
}
|
||
}
|
||
|
||
// 分享弹框
|
||
void handleShare() {
|
||
if (chatController.chatList.isNotEmpty) {
|
||
chatController.getConversationList();
|
||
}
|
||
showModalBottomSheet(
|
||
backgroundColor: Colors.white,
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.vertical(top: Radius.circular(15.0)),
|
||
),
|
||
clipBehavior: Clip.antiAlias,
|
||
context: context,
|
||
isScrollControlled: true,
|
||
builder: (context) {
|
||
return Material(
|
||
color: Colors.white,
|
||
child: Padding(
|
||
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
// 分享列表
|
||
SizedBox(
|
||
height: 110,
|
||
child: ListView.builder(
|
||
scrollDirection: Axis.horizontal,
|
||
itemCount: shareList.length,
|
||
padding: EdgeInsets.symmetric(horizontal: 0, vertical: 20.0),
|
||
itemBuilder: (context, index) {
|
||
return GestureDetector(
|
||
onTap: () => handleShareClick(index),
|
||
child: Container(
|
||
width: 64,
|
||
margin: EdgeInsets.symmetric(horizontal: 8.0),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Image.asset('${shareList[index]['icon']}', width: 48.0),
|
||
SizedBox(height: 5),
|
||
Text(
|
||
'${shareList[index]['label']}',
|
||
style: TextStyle(fontSize: 12.0),
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
},
|
||
),
|
||
),
|
||
|
||
// 会话列表
|
||
Obx(() {
|
||
// 这里过滤掉有分组的会话
|
||
final filteredList = chatController.chatList.where((item) => item.conversation.conversationGroupList?.isEmpty == true).toList();
|
||
if (filteredList.isEmpty) return SizedBox.shrink();
|
||
return SizedBox(
|
||
height: 110,
|
||
child: ListView.builder(
|
||
scrollDirection: Axis.horizontal,
|
||
itemCount: filteredList.length,
|
||
padding: EdgeInsets.symmetric(horizontal: 0, vertical: 20.0),
|
||
itemBuilder: (context, index) {
|
||
return GestureDetector(
|
||
// 点击分享
|
||
onTap: () => handlCoverClick(filteredList[index].conversation),
|
||
child: Container(
|
||
width: 64,
|
||
margin: EdgeInsets.symmetric(horizontal: 8.0),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
// Image.asset('${chatController.chatList[index].faceUrl}', width: 48.0),
|
||
NetworkOrAssetImage(
|
||
imageUrl: filteredList[index].faceUrl,
|
||
width: 48.0,
|
||
height: 48.0,
|
||
),
|
||
SizedBox(height: 5),
|
||
Text(
|
||
'${filteredList[index].conversation.showName}',
|
||
style: TextStyle(fontSize: 12.0),
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
},
|
||
),
|
||
);
|
||
}),
|
||
|
||
// 取消按钮
|
||
SafeArea(
|
||
top: false,
|
||
child: InkWell(
|
||
onTap: () => Get.back(),
|
||
child: Container(
|
||
alignment: Alignment.center,
|
||
width: double.infinity,
|
||
height: 50.0,
|
||
color: Colors.grey[50],
|
||
child: Text(
|
||
'取消',
|
||
style: TextStyle(color: Colors.black87),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
},
|
||
);
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
if (shopObj == null) {
|
||
return Center(child: CircularProgressIndicator());
|
||
}
|
||
String swiperInfo = shopObj['albumPics'] ?? "";
|
||
List<String> swiperList;
|
||
if (swiperInfo.isNotEmpty) {
|
||
swiperList = swiperInfo.split(','); // 商品详情轮播图
|
||
} else {
|
||
swiperList = [];
|
||
}
|
||
dynamic attr = shopObj['productAttr']; //json数据
|
||
List<dynamic> attrList = [];
|
||
if (!Utils.isEmpty(attr)) {
|
||
attrList = jsonDecode(attr);
|
||
}
|
||
logger.e(attrList);
|
||
|
||
return Scaffold(
|
||
backgroundColor: Colors.grey[50],
|
||
body: CustomScrollView(
|
||
scrollBehavior: CustomScrollBehavior().copyWith(scrollbars: false),
|
||
controller: scrollController,
|
||
slivers: [
|
||
SliverAppBar(
|
||
backgroundColor: Colors.transparent,
|
||
foregroundColor: Colors.white,
|
||
pinned: true,
|
||
expandedHeight: 280.0,
|
||
titleSpacing: 10.0,
|
||
leading: IconButton(
|
||
icon: Icon(
|
||
Icons.arrow_back,
|
||
size: 20.0,
|
||
),
|
||
style: ButtonStyle(
|
||
backgroundColor: WidgetStateProperty.all(Colors.black.withAlpha(20)),
|
||
),
|
||
onPressed: () {
|
||
Get.back();
|
||
},
|
||
),
|
||
actions: [
|
||
IconButton(
|
||
icon: Icon(
|
||
Icons.share,
|
||
size: 20.0,
|
||
),
|
||
onPressed: () {
|
||
// 分享
|
||
handleShare();
|
||
},
|
||
),
|
||
],
|
||
// 自定义伸缩区域(轮播图)
|
||
flexibleSpace: Container(
|
||
decoration: BoxDecoration(
|
||
gradient: LinearGradient(
|
||
begin: Alignment.topLeft,
|
||
end: Alignment.bottomRight,
|
||
colors: [Color(0xFFFF5000), Color(0xFFFFAA00)],
|
||
),
|
||
),
|
||
child: FlexibleSpaceBar(
|
||
background: ScrollConfiguration(
|
||
behavior: CustomScrollBehavior(),
|
||
child: Swiper.children(
|
||
pagination: SwiperPagination(
|
||
builder: DotSwiperPaginationBuilder(
|
||
color: Colors.white70,
|
||
activeColor: Colors.white,
|
||
)),
|
||
indicatorLayout: PageIndicatorLayout.SCALE,
|
||
children: swiperList.map((sw) => NetworkOrAssetImage(imageUrl: sw)).toList(),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
SliverToBoxAdapter(
|
||
child: ScrollConfiguration(
|
||
behavior: CustomScrollBehavior().copyWith(scrollbars: false),
|
||
child: Column(
|
||
children: [
|
||
Container(
|
||
padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 25.0),
|
||
decoration: BoxDecoration(
|
||
gradient: LinearGradient(
|
||
begin: Alignment.topLeft,
|
||
end: Alignment.bottomRight,
|
||
colors: [Color(0xFFFF5000), Color(0xFFFFAA00)],
|
||
),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
spacing: 5.0,
|
||
children: [
|
||
Row(
|
||
spacing: 5.0,
|
||
children: [
|
||
// 原价
|
||
// Text(
|
||
// '¥${shopObj['price']}',
|
||
// style: TextStyle(
|
||
// color: Colors.white,
|
||
// fontSize: 16.0,
|
||
// decoration: TextDecoration.lineThrough,
|
||
// decorationColor: Colors.black,
|
||
// decorationThickness: 1.5,
|
||
// ),
|
||
// ),
|
||
Container(
|
||
padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 3.0),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(50.0),
|
||
),
|
||
child: Text(
|
||
'¥${shopObj['price']}',
|
||
style: TextStyle(color: Colors.red, fontSize: 12.0),
|
||
),
|
||
),
|
||
Text(
|
||
// '已售${Utils().graceNumber(shopObj['sales'] ?? 0)}',
|
||
'已售${Utils().graceNumber(int.tryParse(shopObj['sales']?.toString() ?? '0') ?? 0)}',
|
||
style: TextStyle(color: Colors.white, fontSize: 12.0),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
Container(
|
||
padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0),
|
||
width: double.infinity,
|
||
decoration: BoxDecoration(
|
||
color: Color(0xFFFAFAFA),
|
||
borderRadius: BorderRadius.vertical(top: Radius.circular(15.0)),
|
||
),
|
||
transform: Matrix4.translationValues(0.0, -15.0, 0.0),
|
||
child: Column(
|
||
children: [
|
||
// 标题
|
||
Container(
|
||
padding: EdgeInsets.all(5.0),
|
||
child: Align(
|
||
alignment: Alignment.centerLeft,
|
||
child: Text.rich(
|
||
TextSpan(
|
||
children: [
|
||
WidgetSpan(
|
||
alignment: PlaceholderAlignment.middle,
|
||
child: Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xFFFF5000),
|
||
borderRadius: BorderRadius.circular(4),
|
||
),
|
||
child: Text(
|
||
shopObj['productCategoryName'] ?? '未知分类名称',
|
||
style: const TextStyle(
|
||
fontSize: 12.0,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
const WidgetSpan(child: SizedBox(width: 4)),
|
||
TextSpan(
|
||
text: '${shopObj['describe'] ?? ''}',
|
||
style: TextStyle(
|
||
fontSize: 14.0,
|
||
fontWeight: FontWeight.w700,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
maxLines: 2,
|
||
overflow: TextOverflow.ellipsis,
|
||
textAlign: TextAlign.left,
|
||
),
|
||
),
|
||
),
|
||
|
||
// 规格
|
||
Container(
|
||
margin: EdgeInsets.only(top: 10.0),
|
||
padding: EdgeInsets.all(10.0),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(15.0),
|
||
),
|
||
// child: Column(
|
||
// spacing: 10.0,
|
||
// children: [
|
||
// Row(
|
||
// spacing: 5.0,
|
||
// children: [
|
||
// Icon(
|
||
// Icons.timer,
|
||
// size: 16.0,
|
||
// ),
|
||
// Expanded(
|
||
// child: Text(
|
||
// '本商品请于2025.01.25前进行核销',
|
||
// style: TextStyle(fontSize: 12.0),
|
||
// ),
|
||
// ),
|
||
// ],
|
||
// ),
|
||
// Row(
|
||
// spacing: 5.0,
|
||
// children: [
|
||
// Icon(
|
||
// Icons.house_outlined,
|
||
// size: 16.0,
|
||
// ),
|
||
// Expanded(
|
||
// child: Text(
|
||
// '营业时间：7x24',
|
||
// style: TextStyle(fontSize: 12.0),
|
||
// ),
|
||
// ),
|
||
// ],
|
||
// ),
|
||
// Row(
|
||
// spacing: 5.0,
|
||
// children: [
|
||
// Icon(
|
||
// Icons.location_on,
|
||
// size: 16.0,
|
||
// ),
|
||
// Expanded(
|
||
// child: Text(
|
||
// '河北省唐山市玉田县',
|
||
// style: TextStyle(fontSize: 12.0),
|
||
// ),
|
||
// ),
|
||
// ],
|
||
// ),
|
||
// ],
|
||
// ),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: attrList.map<Widget>((attr) {
|
||
final attrName = attr['name'] ?? '';
|
||
final options = attr['options'] as List<dynamic>? ?? [];
|
||
final optionNames = options.map((o) => o['name']).join(' / ');
|
||
return Row(
|
||
children: [
|
||
Text(
|
||
'$attrName: ',
|
||
style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
|
||
),
|
||
Expanded(
|
||
child: Text(
|
||
optionNames,
|
||
style: TextStyle(fontSize: 12),
|
||
),
|
||
),
|
||
],
|
||
);
|
||
}).toList(),
|
||
),
|
||
),
|
||
// 详情
|
||
Container(
|
||
margin: EdgeInsets.only(top: 10.0),
|
||
padding: EdgeInsets.all(10.0),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(15.0),
|
||
),
|
||
child: Html(
|
||
data: shopObj['detailMobileHtml'] ?? '暂无',
|
||
)),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
// 商品导航栏
|
||
bottomNavigationBar: SafeArea(
|
||
bottom: true,
|
||
child: Container(
|
||
height: 50.0,
|
||
color: Colors.white,
|
||
padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
|
||
child: Row(
|
||
children: [
|
||
Expanded(
|
||
child: Row(
|
||
spacing: 15.0,
|
||
children: [
|
||
// Column(
|
||
// mainAxisAlignment: MainAxisAlignment.center,
|
||
// children: [
|
||
// Icon(
|
||
// Icons.store,
|
||
// color: Color(0xFFFF5000),
|
||
// size: 18.0,
|
||
// ),
|
||
// Text(
|
||
// '店铺',
|
||
// style: TextStyle(fontSize: 12.0),
|
||
// )
|
||
// ],
|
||
// ),
|
||
GestureDetector(
|
||
onTap: () async {
|
||
// 可以在这里打开聊天
|
||
logger.i('联系客服');
|
||
final res = await ImService.instance.getConversation(conversationID: 'c2c_${shopObj['tenantId']}');
|
||
V2TimConversation conversation = res.data;
|
||
logger.i(conversation.toLogString());
|
||
if (res.success) {
|
||
// 客服聊天不用检测关注关系
|
||
conversation.showName = conversation.showName ?? shopObj['storeName'];
|
||
Get.toNamed('/chat', arguments: conversation);
|
||
} else {
|
||
MyDialog.toast(res.desc, icon: const Icon(Icons.warning), style: ToastStyle(backgroundColor: Colors.red.withAlpha(200)));
|
||
}
|
||
},
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Icon(
|
||
Icons.child_care_outlined,
|
||
size: 18.0,
|
||
),
|
||
Text(
|
||
'联系商家',
|
||
style: TextStyle(fontSize: 12.0),
|
||
)
|
||
],
|
||
),
|
||
)
|
||
// Column(
|
||
// mainAxisAlignment: MainAxisAlignment.center,
|
||
// children: [
|
||
// Badge.count(
|
||
// backgroundColor: Color(0xFFFF5000),
|
||
// count: 6,
|
||
// child: Icon(
|
||
// Icons.shopping_cart_outlined,
|
||
// size: 18.0,
|
||
// ),
|
||
// ),
|
||
// Text(
|
||
// '购物车',
|
||
// style: TextStyle(fontSize: 12.0),
|
||
// )
|
||
// ],
|
||
// ),
|
||
],
|
||
),
|
||
),
|
||
Container(
|
||
alignment: Alignment.center,
|
||
height: 36.0,
|
||
clipBehavior: Clip.antiAlias,
|
||
decoration: BoxDecoration(
|
||
color: Color(0xFFFFEBEB),
|
||
borderRadius: BorderRadius.circular(30.0),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
// Padding(
|
||
// padding: EdgeInsets.symmetric(horizontal: 10.0),
|
||
// child: Text(
|
||
// '加入购物车',
|
||
// style: TextStyle(color: Color(0xFFFF5000), fontSize: 14.0),
|
||
// ),
|
||
// ),
|
||
Container(
|
||
alignment: Alignment.center,
|
||
padding: const EdgeInsets.symmetric(horizontal: 20.0),
|
||
color: Color(0xFFFF5000),
|
||
child: GestureDetector(
|
||
onTap: () {
|
||
// 这里走生成预支付订单，拿到orderId
|
||
String orderId = '1958380183857659904'; //测试数据
|
||
Get.toNamed('/order/detail', arguments: orderId);
|
||
},
|
||
child: Text(
|
||
'立即购买',
|
||
style: TextStyle(color: Colors.white, fontSize: 14.0),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
// 返回顶部
|
||
floatingActionButton: Backtop(controller: scrollController, offset: scrollOffset),
|
||
);
|
||
}
|
||
}
|