Explorar o código

1、blockly编程课无权限样式优化
2、课程小节中进度星星未按照实际进度显示修复
3、编程课根据真实任务数量进行入库传输

liyanbo hai 4 meses
pai
achega
b605e36d27

BIN=BIN
src/assets/programming/lock.png


+ 23 - 9
src/components/blockly/MapGame.vue

@@ -1582,18 +1582,32 @@ window.isFinish = async function() {
 
   if (gameState.player.position.x === endPoint.value.x && gameState.player.position.y === endPoint.value.y) {
 
-    //检查是否有未完成的任务点
-    const pointIndex = gameState.mapData.walkablePoints.findIndex(
-        p => p.type === BLOCKLY_MAP_TYPE_DICT.TASK && p.status !== true
-    );
-    if (pointIndex !== -1) {
-      showGameMessage(CONFIG.TIPS.UNFINISHED, 'error');
+    // 统计所有类型为TASK的任务点总数
+    const totalTasks = gameState.mapData.walkablePoints.filter(
+        p => p.type === BLOCKLY_MAP_TYPE_DICT.TASK
+    ).length;
+
+    // 统计其中status为true的完成任务数
+    const completedTasks = gameState.mapData.walkablePoints.filter(
+        p => p.type === BLOCKLY_MAP_TYPE_DICT.TASK && p.status === true
+    ).length;
+
+    //blockly总星星数量
+    const starCount = 3;
+
+    //无任务情况下直接完成
+    if (totalTasks === 0 || completedTasks === totalTasks) {
+      gameState.player.hasReachedEnd = true;
+      emits('saveProgress', starCount * 100)
+      showGameMessage(CONFIG.TIPS.FINISH, 'success' );
       return;
     }
 
-    gameState.player.hasReachedEnd = true;
-    showGameMessage(CONFIG.TIPS.FINISH, 'success' );
-    emits('saveProgress')
+    //任务失败
+    // 计算完成百分比
+    const completionPercentage = totalTasks > 0 ? Math.round(completedTasks / totalTasks * starCount) : starCount;
+    showGameMessage(CONFIG.TIPS.UNFINISHED, 'error');
+    emits('saveProgress', completionPercentage * 100)
   }
 };
 

+ 4 - 4
src/views/programming/ProgrammingCourset.vue

@@ -47,12 +47,12 @@
             </div>
             <!-- 星星图标组 -->
             <div class="star-group">
-              <div 
-                v-for="i in getStarCount(item.contentType)" 
+              <div
+                v-for="i in getStarCount(item.contentType)"
                 :key="i"
                 class="star-icon"
-                :style="{ 
-                  backgroundImage: `url(${item.progress ? star01Image : star02Image})`
+                :style="{
+                  backgroundImage: `url(${i <= item.progress ? star01Image : star02Image})`,
                 }"
               ></div>
             </div>

+ 34 - 11
src/views/programming/ProgrammingList.vue

@@ -43,6 +43,7 @@
               >
                 <div class="new-white-box"
                      :class="{ 'active': activeButton === index, 'disabled': courseType.isDisabled }"
+                     :style="{ '--lock-image': `url(${lockImage})` }"
                      @click="goToProgrammingList(courseType, index)">
                     <!-- 列表封面图 -->
                   <div class="bg-image-container" :style="{ backgroundImage: `url(${courseType.bgImage})` }">
@@ -80,9 +81,9 @@
         <div class="bottom-box">
           <div class="line-container">
             <div class="bold-line"></div>
-            <div 
-              v-for="(button, index) in circleButtons" 
-              :key="index" 
+            <div
+              v-for="(button, index) in circleButtons"
+              :key="index"
               class="circle-button"
               :class="{ 'active': activeButton === index }"
               @click="activeButton = index"
@@ -269,7 +270,7 @@ onMounted(() => {
   if (title) {
     pageTitle.value = title
   }
-  
+
   const id = route.query.categoryId
   if (id) {
     categoryId.value = id
@@ -369,7 +370,7 @@ const disableBlockly = (blocklyId = categoryId.value) => {
   height: 100%;
 }
 .top-center-inner-box{
-    background-size: 70%; 
+    background-size: 70%;
     background-position: 50% 80%;
     background-repeat: no-repeat;
     display: flex; /* 使用flex布局 */
@@ -396,7 +397,7 @@ const disableBlockly = (blocklyId = categoryId.value) => {
     cursor: pointer;
   }
 }
-  
+
 .middle-wrapper {
   height: 60%;
   overflow: hidden; /* 溢出隐藏 */
@@ -443,7 +444,7 @@ const disableBlockly = (blocklyId = categoryId.value) => {
 
 
 .new-white-box {
-  width: 100%; 
+  width: 100%;
   height: 65%;
   margin-top: rpx(20);
   background-color: white;
@@ -459,7 +460,7 @@ const disableBlockly = (blocklyId = categoryId.value) => {
   content: '';
   position: absolute;
   bottom: -rpx(8);
-  left: 50%;
+  left: 50.5%;
   transform: translateX(-50%);
   width: 0;
   height: 0;
@@ -480,20 +481,42 @@ const disableBlockly = (blocklyId = categoryId.value) => {
 /* 禁用状态样式 */
 .new-white-box.disabled {
   cursor: not-allowed;
-  filter: grayscale(80%);
+  filter: grayscale(0%); /* 改为100%黑白色 */
   pointer-events: none;
+  position: relative;
 }
 
 /* 禁用状态下的文字颜色 */
 .new-white-box.disabled .box-title {
-  color: #999;
+  color: #676666;
 }
 
+/* 禁用状态下的遮挡层 */
+.new-white-box.disabled::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  background-image: var(--lock-image);
+  background-size: 40%;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: rpx(15);
+  z-index: 2;
+}
+/* 小三角效果 */
+.new-white-box.disabled::after {
+  top: rpx(150);
+  opacity: 0.5;
+}
 
 /* 背景图容器 */
 .bg-image-container {
   width: 100%;
-  height: 85%; 
+  height: 85%;
   background-size: 105%; 
   background-position: center;
   background-repeat: no-repeat;