feat:单元&课程解锁状态蒙层ui

吴启风
1 parent cfe7f488
Showing 8 changed files with 154 additions and 84 deletions
assets/images/listen_lock.png → assets/images/iv_lock.png
lib/pages/listen/widgets/listen_item_widget.dart
lib/pages/module/widgets/module_item_widget.dart
lib/pages/repeatafter/widgets/repeat_after_item.dart
lib/pages/section/section_page.dart
lib/pages/section/widgets/home_video_item.dart → lib/pages/section/widgets/section_item.dart
lib/pages/unit/view.dart
lib/pages/unit/widget/course_unit_item.dart
@@ -46,7 +46,7 @@ class ListenItemWidget extends StatelessWidget {
                   Visibility(
                     visible: entity?.lock??false,
                     child: Image.asset(
-                      'listen_lock'.assetPng,
+                      'iv_lock'.assetPng,
                       height: 36.h,
                       width: 41.w,
                     ),
@@ -6,6 +6,7 @@ import &#39;package:wow_english/models/course_module_entity.dart&#39;;
 import '../../section/courese_module_model.dart';
+///阶段（模块）item布局
 class ModuleItemWidget extends StatelessWidget {
   const ModuleItemWidget({super.key, required this.isSelected, this.model, this.onClickEvent});
   ///是否被选中
@@ -130,7 +130,7 @@ class RepeatAfterItem extends StatelessWidget {
         ),
         alignment: Alignment.center,
         child: Image.asset(
-          'listen_lock'.assetPng,
+          'iv_lock'.assetPng,
           height: 36.h,
           width: 41.w,
         ),
@@ -7,7 +7,7 @@ import &#39;package:wow_english/common/core/user_util.dart&#39;;
 import 'package:wow_english/common/extension/string_extension.dart';
 import 'package:wow_english/models/course_unit_entity.dart';
 import 'package:wow_english/pages/section/section_type.dart';
-import 'package:wow_english/pages/section/widgets/home_video_item.dart';
+import 'package:wow_english/pages/section/widgets/section_item.dart';
 import 'package:wow_english/pages/section/widgets/section_bouns_item.dart';
 import 'package:wow_english/pages/section/widgets/section_header_widget.dart';
 import 'package:wow_english/route/route.dart';
@@ -286,8 +286,8 @@ Widget _itemTransCard(
                 bloc.add(RequestEnterClassEvent(
                     sectionData.id.toString(), sectionData.courseType));
               },
-              child: SectionVideoItem(
-                unitEntity: bloc.courseUnitEntity,
+              child: SectionItem(
+                courseModuleId: bloc.courseUnitEntity.courseModuleCode,
                 lessons: sectionData,
               ),
             );
@@ -7,65 +7,99 @@ import &#39;../../../models/course_section_entity.dart&#39;;
 import '../../../models/course_unit_entity.dart';
 import '../courese_module_model.dart';
-class SectionVideoItem extends StatelessWidget {
-  const SectionVideoItem({super.key, this.lessons, this.unitEntity});
+///环节item布局
+class SectionItem extends StatelessWidget {
+  const SectionItem({super.key, this.lessons, this.courseModuleId});
-  final CourseUnitEntity? unitEntity;
+  final String? courseModuleId;
   final CourseSectionEntity? lessons;
   @override
   Widget build(BuildContext context) {
     return Padding(
       padding: EdgeInsets.symmetric(horizontal: 12.w,vertical: 24.h),
-      child: Container(
-        width: 165.w,
-        padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 24.h),
-        decoration: BoxDecoration(
-          image: DecorationImage(
-              image: AssetImage('gendubeij'.assetPng),
-              fit: BoxFit.fill
-          ),
+      child: Stack(
+        children: [
+          _normalItem(),
+          _lockWidget(),
+        ],
+      )
+    );
+  }
+
+  Widget _normalItem() {
+    return Container(
+      width: 165.w,
+      padding: EdgeInsets.symmetric(horizontal: 16.w,vertical: 24.h),
+      decoration: BoxDecoration(
+        image: DecorationImage(
+            image: AssetImage('gendubeij'.assetPng),
+            fit: BoxFit.fill
         ),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: [
-            Expanded(
-                child: Container(
-                  decoration: BoxDecoration(
-                      border: Border.all(
-                        width: 2,
-                        color: const Color(0xFF140C10),
-                      ),
-                      borderRadius: BorderRadius.circular(6)
-                  ),
-                  child: OwImageWidget(
-                    name: lessons?.coverUrl??'',
-                    fit: BoxFit.fitHeight,
-                  ),
-                )
+      ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Expanded(
+              child: Container(
+                decoration: BoxDecoration(
+                    border: Border.all(
+                      width: 2,
+                      color: const Color(0xFF140C10),
+                    ),
+                    borderRadius: BorderRadius.circular(6)
+                ),
+                child: OwImageWidget(
+                  name: lessons?.coverUrl??'',
+                  fit: BoxFit.fitHeight,
+                ),
+              )
+          ),
+          24.verticalSpace,
+          Container(
+            decoration: BoxDecoration(
+                border: Border.all(
+                  width: 2,
+                  color: const Color(0xFF140C10),
+                ),
+                color: CourseModuleModel(courseModuleId ?? 'Phase-1').color,
+                borderRadius: BorderRadius.circular(6)
             ),
-            24.verticalSpace,
-            Container(
-              decoration: BoxDecoration(
-                  border: Border.all(
-                    width: 2,
-                    color: const Color(0xFF140C10),
-                  ),
-                  color: CourseModuleModel(unitEntity?.courseModuleCode??'Phase-1').color,
-                  borderRadius: BorderRadius.circular(6)
+            padding: EdgeInsets.symmetric(horizontal: 10.w),
+            child: Text(
+              lessons?.name??'',
+              maxLines: 1,
+              style: TextStyle(
+                  fontSize: 25.sp,
+                  color: const Color(0xFF333333)
               ),
-              padding: EdgeInsets.symmetric(horizontal: 10.w),
-              child: Text(
-                lessons?.name??'',
-                maxLines: 1,
-                style: TextStyle(
-                    fontSize: 25.sp,
-                    color: const Color(0xFF333333)
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  ///锁定状态下蒙层视图
+  Widget _lockWidget() {
+    return Visibility(
+      visible: lessons?.lock ?? false,
+      child: Container(
+        width: 165.w,
+        decoration: BoxDecoration(
+            image: DecorationImage(
+                image: AssetImage(
+                    'gendubeij_mengban'.assetPng
                 ),
-              ),
+                fit: BoxFit.fill
             )
-          ],
         ),
+        alignment: Alignment.center,
+        // child: Image.asset(
+        //   'iv_lock'.assetPng,
+        //   height: 36.h,
+        //   width: 41.w,
+        // ),
       ),
     );
   }
@@ -12,7 +12,7 @@ import &#39;../../utils/toast_util.dart&#39;;
 import 'bloc.dart';
 import 'event.dart';
-// 课程列表页（多unit，参考口语星球的框或分割标志）
+// 课程（单元）列表页（多unit，参考口语星球的框或分割标志）
 class UnitPage extends StatelessWidget {
   const UnitPage({super.key, this.courseModuleEntity});
@@ -57,7 +57,7 @@ class UnitPage extends StatelessWidget {
                             return GestureDetector(
                               onTap: () {
                                 if (data.lock == true) {
-                                  showToast('当前unit暂未解锁');
+                                  showToast('当前课程暂未解锁');
                                   return;
                                 }
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:wow_english/common/extension/string_extension.dart';
@@ -5,6 +6,7 @@ import &#39;package:wow_english/common/widgets/ow_image_widget.dart&#39;;
 import '../../../models/course_unit_entity.dart';
+///课程（单元）item布局
 class CourseUnitItem extends StatelessWidget {
   const CourseUnitItem(
       {super.key, required this.unitEntity, required this.unitLesson});
@@ -16,41 +18,74 @@ class CourseUnitItem extends StatelessWidget {
   Widget build(BuildContext context) {
     return Padding(
       padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 24.h),
+      child: Stack(
+        children: [
+          _normalItem(),
+          _lockWidget(),
+        ],
+      )
+    );
+  }
+
+  Widget _normalItem() {
+    return Container(
+      width: 165.w,
+      padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 24.h),
+      decoration: BoxDecoration(
+        image: DecorationImage(
+            image: AssetImage('gendubeij'.assetPng), fit: BoxFit.fill),
+      ),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Expanded(
+              child: Container(
+                decoration: BoxDecoration(
+                    border: Border.all(
+                      width: 2,
+                      color: const Color(0xFF140C10),
+                    ),
+                    borderRadius: BorderRadius.circular(6)),
+                child: OwImageWidget(
+                  name: unitLesson.coverUrl ?? '',
+                  fit: BoxFit.fitHeight,
+                ),
+              )),
+          20.verticalSpace,
+          SizedBox(
+            height: 40.h,
+            child: Text(
+              unitLesson.name ?? '',
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              style:
+              TextStyle(fontSize: 11.sp, color: const Color(0xFF140C10)),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  ///锁定状态下蒙层视图
+  Widget _lockWidget() {
+    return Visibility(
+      visible: unitLesson.lock ?? false,
       child: Container(
         width: 165.w,
-        padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 24.h),
         decoration: BoxDecoration(
-          image: DecorationImage(
-              image: AssetImage('gendubeij'.assetPng), fit: BoxFit.fill),
-        ),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          children: [
-            Expanded(
-                child: Container(
-              decoration: BoxDecoration(
-                  border: Border.all(
-                    width: 2,
-                    color: const Color(0xFF140C10),
-                  ),
-                  borderRadius: BorderRadius.circular(6)),
-              child: OwImageWidget(
-                name: unitLesson.coverUrl ?? '',
-                fit: BoxFit.fitHeight,
-              ),
-            )),
-            20.verticalSpace,
-            SizedBox(
-              height: 40.h,
-              child: Text(
-                unitLesson.name ?? '',
-                maxLines: 2,
-                overflow: TextOverflow.ellipsis,
-                style:
-                    TextStyle(fontSize: 11.sp, color: const Color(0xFF140C10)),
-              ),
+            image: DecorationImage(
+                image: AssetImage(
+                    'gendubeij_mengban'.assetPng
+                ),
+                fit: BoxFit.fill
             )
-          ],
+        ),
+        alignment: Alignment.center,
+        child: Image.asset(
+          'iv_lock'.assetPng,
+          height: 54.h,
+          width: 61.5.w,
         ),
       ),
     );