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.
550 lines
21 KiB
550 lines
21 KiB
import 'package:dio/dio.dart'; |
|
import 'package:flutter/cupertino.dart'; |
|
import 'package:flutter/material.dart'; |
|
import 'package:flutter/services.dart'; |
|
import 'package:flutter_easyloading/flutter_easyloading.dart'; |
|
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart'; |
|
import 'package:huixiang/community/community_view/class_details_video.dart'; |
|
import 'package:huixiang/generated/l10n.dart'; |
|
import 'package:huixiang/retrofit/data/base_data.dart'; |
|
import 'package:huixiang/retrofit/data/chapter.dart'; |
|
import 'package:huixiang/retrofit/data/course_details.dart'; |
|
import 'package:huixiang/retrofit/retrofit_api.dart'; |
|
import 'package:huixiang/utils/font_weight.dart'; |
|
import 'package:huixiang/view_widget/tips_dialog.dart'; |
|
import 'package:huixiang/web/web_view/comment_list.dart'; |
|
import 'package:huixiang/web/web_view/input_comment.dart'; |
|
import 'package:shared_preferences/shared_preferences.dart'; |
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
|
|
|
class ClassDetails extends StatefulWidget { |
|
final Map<String, dynamic> arguments; |
|
|
|
ClassDetails({this.arguments}); |
|
|
|
@override |
|
State<StatefulWidget> createState() { |
|
return _ClassDetails(); |
|
} |
|
} |
|
|
|
class _ClassDetails extends State<ClassDetails> with WidgetsBindingObserver { |
|
ApiService apiService; |
|
final GlobalKey commentKey = GlobalKey(); |
|
final GlobalKey videoKey = GlobalKey(); |
|
final ScrollController scrollController = ScrollController(); |
|
bool isKeyBoardShow = false; |
|
var commentFocus = FocusNode(); |
|
String parenId = "0"; |
|
String hintText = S.current.liuxianinjingcaidepinglunba; |
|
final GlobalKey inputKey = GlobalKey(); |
|
final TextEditingController commentTextController = TextEditingController(); |
|
int commentTotal = 0; |
|
CourseDetails course; |
|
List<Chapter> chapterList = []; |
|
bool isShowImg = true; |
|
int chapterIndex = 0; |
|
double height = 0; |
|
var isShowMore = false; |
|
|
|
@override |
|
void initState() { |
|
super.initState(); |
|
WidgetsBinding.instance.addObserver(this); |
|
courseDetails(widget.arguments["id"]); |
|
queryChapterList(widget.arguments["id"]); |
|
} |
|
|
|
///课程章节列表 |
|
queryChapterList(courseId) async { |
|
if (apiService == null) { |
|
SharedPreferences value = await SharedPreferences.getInstance(); |
|
apiService = ApiService( |
|
Dio(), |
|
context: context, |
|
token: value.getString("token"), |
|
); |
|
} |
|
BaseData<List<Chapter>> baseData = |
|
await apiService.catalogList(courseId).catchError((onError) {}); |
|
if (baseData != null && baseData.isSuccess) { |
|
setState(() { |
|
chapterList.clear(); |
|
chapterList.addAll(baseData.data); |
|
chapterIndex = 0; |
|
ClassDetailsVideoState state = videoKey.currentState; |
|
state.initVideo(chapterList[chapterIndex].content.fileUrl); |
|
// initVideo(chapterList[chapterIndex].content.fileUrl); |
|
}); |
|
} |
|
EasyLoading.dismiss(); |
|
} |
|
|
|
///课程详情 |
|
courseDetails(id) async { |
|
if (apiService == null) { |
|
SharedPreferences value = await SharedPreferences.getInstance(); |
|
apiService = ApiService( |
|
Dio(), |
|
context: context, |
|
token: value.getString("token"), |
|
); |
|
} |
|
BaseData<CourseDetails> baseData = |
|
await apiService.course(id).catchError((error) {}); |
|
if (baseData != null && baseData.isSuccess) { |
|
setState(() { |
|
course = baseData.data; |
|
}); |
|
} |
|
} |
|
|
|
@override |
|
void didChangeMetrics() { |
|
WidgetsBinding.instance.addPostFrameCallback((_) { |
|
if (!mounted) return; |
|
if (MediaQuery.of(context).viewInsets.bottom == 0) { |
|
if (isKeyBoardShow) { |
|
FocusScope.of(context).requestFocus(FocusNode()); |
|
if (mounted) |
|
setState(() { |
|
hintText = S.current.liuxianinjingcaidepinglunba; |
|
isKeyBoardShow = false; |
|
}); |
|
} |
|
} else { |
|
if (mounted) |
|
setState(() { |
|
isKeyBoardShow = true; |
|
}); |
|
} |
|
}); |
|
} |
|
|
|
@override |
|
Widget build(BuildContext context) { |
|
return AnnotatedRegion<SystemUiOverlayStyle>( |
|
value: SystemUiOverlayStyle.light, |
|
child: Material(child: Scaffold( |
|
body: Container( |
|
// margin: EdgeInsets.only(top:25), |
|
child: Column( |
|
children: [ |
|
Expanded( |
|
child: SingleChildScrollView( |
|
physics: BouncingScrollPhysics(), |
|
child: Column( |
|
children: [ |
|
Container( |
|
child:Stack( |
|
children: [ |
|
ClassDetailsVideo(key:videoKey,exitFull: (){setState(() {});}, |
|
coverImg: chapterList.length > chapterIndex |
|
? chapterList[chapterIndex].content.coverImg |
|
: "",isShowImg: this.isShowImg, |
|
changeShowImg: (isShowImg){setState(() { |
|
this.isShowImg = isShowImg; |
|
});},heightFun: (height) { |
|
this.height = height + |
|
MediaQuery |
|
.of(context) |
|
.padding |
|
.top + |
|
kToolbarHeight + |
|
24; |
|
if (mounted) setState(() {}); |
|
},), |
|
Container( |
|
margin: EdgeInsets.only( |
|
top: 40.h, left: 16.w, right: 16.w), |
|
decoration: BoxDecoration( |
|
color: Colors.transparent, |
|
), |
|
child: Row( |
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
crossAxisAlignment: CrossAxisAlignment.center, |
|
children: [ |
|
GestureDetector( |
|
child: Image.asset( |
|
"assets/image/integral_return.webp", |
|
width: 24, |
|
height: 24, |
|
), |
|
onTap: () { |
|
Navigator.of(context).pop( |
|
course != null ? course.viewers + 1 : 0); |
|
}, |
|
), |
|
], |
|
), |
|
), |
|
], |
|
), |
|
), |
|
Container( |
|
margin: EdgeInsets.only(bottom: 16.h), |
|
padding: EdgeInsets.only(left: 16, top: 16, right: 10), |
|
decoration: BoxDecoration( |
|
color: Colors.white, |
|
boxShadow: [ |
|
BoxShadow( |
|
color: Colors.black.withAlpha(12), |
|
offset: Offset(0, 2), |
|
blurRadius: 14, |
|
spreadRadius: 0, |
|
) |
|
], |
|
), |
|
child: Column( |
|
mainAxisAlignment: MainAxisAlignment.start, |
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
children: [ |
|
Row( |
|
children: [ |
|
Container( |
|
// height: 22.h, |
|
padding:EdgeInsets.only(left:2,right:2), |
|
alignment: Alignment.center, |
|
decoration: BoxDecoration( |
|
borderRadius: BorderRadius.circular(2), |
|
border: Border.all( |
|
width: 1, |
|
color: Color(0xFFFF7A1A), |
|
style: BorderStyle.solid, |
|
), |
|
), |
|
child: Text( |
|
(course?.tags != null && |
|
course.tags.length > 0) |
|
? course.tags[0] |
|
: "", |
|
overflow:TextOverflow.ellipsis, |
|
style: TextStyle( |
|
fontSize: 14.sp, |
|
fontWeight: MyFontWeight.medium, |
|
color: Color(0xFFFF7A1A), |
|
), |
|
), |
|
), |
|
SizedBox( |
|
width: 6.w, |
|
), |
|
Expanded( |
|
child: Text( |
|
course != null ? course.subject : "", |
|
overflow: TextOverflow.ellipsis, |
|
maxLines: 2, |
|
style: TextStyle( |
|
fontSize: 16.sp, |
|
fontWeight: MyFontWeight.semi_bold, |
|
color: Color(0xFF1A1A1A), |
|
), |
|
), |
|
flex: 1, |
|
) |
|
], |
|
), |
|
SizedBox( |
|
height: 10.h, |
|
), |
|
Padding( |
|
padding: EdgeInsets.only(right: 16), |
|
child: Row( |
|
children: [ |
|
Expanded( |
|
child: Text( |
|
"${S.of(context).jiangshi}:${course != null ? course.author.name : ""}", |
|
overflow: TextOverflow.ellipsis, |
|
maxLines: 2, |
|
style: TextStyle( |
|
fontSize: 12.sp, |
|
fontWeight: MyFontWeight.regular, |
|
color: Colors.black, |
|
), |
|
)), |
|
Text( |
|
"${S.of(context).bofangcishu}:", |
|
style: TextStyle( |
|
fontSize: 12.sp, |
|
fontWeight: MyFontWeight.regular, |
|
color: Color(0xFF808080), |
|
), |
|
), |
|
SizedBox( |
|
width: 4, |
|
), |
|
Text( |
|
course != null |
|
? course.viewers.toString() |
|
: "", |
|
overflow: TextOverflow.ellipsis, |
|
maxLines: 2, |
|
style: TextStyle( |
|
fontSize: 12.sp, |
|
fontWeight: MyFontWeight.regular, |
|
color: Color(0xFF808080), |
|
), |
|
), |
|
], |
|
), |
|
), |
|
SizedBox( |
|
height: 10.h, |
|
), |
|
Text( |
|
course != null ? course.introduce : "", |
|
overflow: isShowMore |
|
? TextOverflow.visible |
|
: TextOverflow.ellipsis, |
|
maxLines: isShowMore ? 10 : 2, |
|
style: TextStyle( |
|
fontSize: 12.sp, |
|
fontWeight: MyFontWeight.regular, |
|
color: Colors.black, |
|
), |
|
), |
|
SizedBox(height: 3.h), |
|
GestureDetector( |
|
onTap: () { |
|
setState(() { |
|
isShowMore = !isShowMore; |
|
}); |
|
}, |
|
child: Row( |
|
mainAxisAlignment: MainAxisAlignment.end, |
|
crossAxisAlignment: CrossAxisAlignment.center, |
|
mainAxisSize: MainAxisSize.max, |
|
children: [ |
|
Text( |
|
S.of(context).gengduo, |
|
style: TextStyle( |
|
fontSize: 12.sp, |
|
fontWeight: MyFontWeight.regular, |
|
color: Colors.black, |
|
), |
|
), |
|
Icon( |
|
(isShowMore != null && !isShowMore) |
|
? Icons.chevron_right |
|
: Icons.keyboard_arrow_up, |
|
color: Colors.black, |
|
size: 18, |
|
), |
|
], |
|
), |
|
), |
|
SizedBox(height: 3.h), |
|
], |
|
), |
|
), |
|
anthology(), |
|
CommentList( |
|
commentKey, |
|
course?.likes ?? course?.likes ?? 0, |
|
widget.arguments["id"], |
|
3, |
|
isKeyBoardShow, |
|
_reply, |
|
_delCommentTips, |
|
12.sp, |
|
requestApiFinish: (total) { |
|
setState(() { |
|
commentTotal = total; |
|
}); |
|
}, |
|
), |
|
if (commentTotal == 0) |
|
Container( |
|
width: double.infinity, |
|
alignment: Alignment.topCenter, |
|
margin: EdgeInsets.only(top: 40), |
|
padding: EdgeInsets.all(22.h), |
|
child: Text( |
|
S.of(context).zanwupinglun, |
|
style: TextStyle( |
|
fontSize: 12, |
|
fontWeight: FontWeight.bold, |
|
color: Color(0xFFA0A0A0), |
|
), |
|
), |
|
), |
|
], |
|
), |
|
), |
|
flex: 1, |
|
), |
|
/// 富文本评论的输入框 |
|
InputComment( |
|
inputKey, |
|
hintText, |
|
isKeyBoardShow, |
|
commentFocus, |
|
commentTextController, |
|
_toComment, |
|
_queryMemberComment, |
|
_queryCourseLikes, |
|
isLike: course?.selfLiked, |
|
), |
|
], |
|
), |
|
), |
|
),) |
|
); |
|
} |
|
|
|
Widget anthology() { |
|
return Container( |
|
color: Colors.white, |
|
margin: EdgeInsets.only(bottom: 16), |
|
padding: EdgeInsets.all(16), |
|
child: Column( |
|
children: [ |
|
Row( |
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
children: [ |
|
Text( |
|
S.of(context).xuanji, |
|
style: TextStyle( |
|
fontSize: 15.sp, |
|
fontWeight: MyFontWeight.medium, |
|
color: Color(0xFF1A1A1A), |
|
), |
|
), |
|
Text( |
|
"共${chapterList.length}集", |
|
style: TextStyle( |
|
fontSize: 16.sp, |
|
fontWeight: MyFontWeight.regular, |
|
color: Color(0xFF1A1A1A), |
|
), |
|
), |
|
], |
|
), |
|
Container( |
|
height: 70.h, |
|
margin: EdgeInsets.only(top: 10), |
|
child: ListView.builder( |
|
scrollDirection: Axis.horizontal, |
|
physics: BouncingScrollPhysics(), |
|
itemCount: chapterList.length, |
|
itemBuilder: (context, position) { |
|
return GestureDetector( |
|
onTap: () { |
|
setState(() { |
|
chapterIndex = position; |
|
isShowImg = true; |
|
ClassDetailsVideoState state = videoKey.currentState; |
|
state.initVideo(chapterList[position].content.fileUrl); |
|
// initVideo(chapterList[position].content.fileUrl); |
|
}); |
|
}, |
|
child: classSelectItem(chapterList[position], position), |
|
); |
|
}, |
|
), |
|
), |
|
], |
|
), |
|
); |
|
} |
|
|
|
Widget classSelectItem(Chapter chapterList, position) { |
|
return Container( |
|
width: 106.w, |
|
alignment: Alignment.center, |
|
margin: EdgeInsets.symmetric( |
|
horizontal: 6.w, |
|
vertical: 3, |
|
), |
|
padding: EdgeInsets.all(8), |
|
decoration: BoxDecoration( |
|
borderRadius: BorderRadius.circular(4), |
|
color: position == chapterIndex ? Color(0xFF32A060) : Color(0xFFE5E5E5), |
|
), |
|
child: Text( |
|
chapterList?.name ?? chapterList.name ?? "", |
|
overflow: TextOverflow.ellipsis, |
|
maxLines: 2, |
|
style: TextStyle( |
|
fontSize: 12.sp, |
|
fontWeight: MyFontWeight.regular, |
|
color: position == chapterIndex ? Colors.white : Color(0xFF7C7C7C), |
|
), |
|
), |
|
); |
|
} |
|
|
|
///课程点赞 |
|
_queryCourseLikes() async { |
|
BaseData baseData = await apiService |
|
.courseLikes(widget.arguments["id"]) |
|
.catchError((onError) {}); |
|
if (baseData != null && baseData.isSuccess) { |
|
setState(() { |
|
if (course.selfLiked ?? false) |
|
course.likes -= 1; |
|
else |
|
course.likes += 1; |
|
course.selfLiked = !course.selfLiked ?? false; |
|
}); |
|
commentKey.currentState.setState(() {}); |
|
} else { |
|
// SmartDialog.showToast(baseData.msg, alignment: Alignment.center); |
|
} |
|
} |
|
|
|
///发布评论 |
|
_queryMemberComment(String content) async { |
|
BaseData baseData = await apiService.memberComment({ |
|
"content": content, |
|
"parentId": parenId, |
|
"relationalId": widget.arguments["id"], |
|
"relationalType": 3 |
|
}).catchError((error) {}); |
|
if (baseData != null && baseData.isSuccess) { |
|
CommentListState state = commentKey.currentState; |
|
state.queryMemberCommentList(); |
|
commentTextController.text = ""; |
|
FocusScope.of(context).unfocus(); |
|
// _toComment(); |
|
} |
|
} |
|
|
|
///滑动到评论列表 |
|
_toComment() { |
|
if (commentKey.currentContext == null) return; |
|
RenderBox firstRenderBox = commentKey.currentContext.findRenderObject(); |
|
Offset first = firstRenderBox.localToGlobal(Offset.zero); |
|
scrollController.animateTo( |
|
first.dy + |
|
scrollController.offset - |
|
(kToolbarHeight + MediaQuery.of(context).padding.top), |
|
duration: Duration(milliseconds: 300), |
|
curve: Curves.easeIn, |
|
); |
|
} |
|
|
|
///评论 回复 |
|
_reply(memberComment) { |
|
FocusScope.of(context).requestFocus(commentFocus); |
|
parenId = memberComment.id; |
|
hintText = S.of(context).huifu_("${memberComment.username}"); |
|
} |
|
|
|
///删除评论 |
|
delComment(memberComment) async { |
|
BaseData baseData = await apiService.delComment(memberComment.id); |
|
if (baseData != null && baseData.isSuccess) { |
|
CommentListState state = commentKey.currentState; |
|
state.queryMemberCommentList(); |
|
} |
|
} |
|
|
|
///删除评论的提示 |
|
_delCommentTips(memberComment) { |
|
SmartDialog.show(widget: Tips(() { |
|
delComment(memberComment); |
|
})); |
|
} |
|
}
|
|
|