style:增加模式切换

src/api/index1.js

@@ -2,7 +2,7 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2022-11-04 22:45:31
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2022-11-17 15:41:45
+ * @LastEditTime: 2022-11-18 14:24:33
  * @FilePath: /fe-manage/src/api/index1.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -90,3 +90,6 @@ export const billboard = (obj) => http.post('/admin/project/billboard', obj);
 // }).catch(err => {
 // 	console.log(err)
 // })
+
+
+// export const choiceEvaluation = (obj) => http.post('/evaluation/choiceEvaluation', obj);

src/components/drawers/UnlockMode.vue

@@ -0,0 +1,209 @@
+<template>
+  <a-drawer
+    :visible="unlockModeVisible"
+    class="drawerStyle unlockmode"
+    placement="right"
+    width="70%"
+    @after-visible-change="afterVisibleChange"
+  >
+    <div class="drawerMain">
+      <div class="header">
+        <div class="headerTitle">选择解锁模式</div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
+      </div>
+      <div class="main">
+        <div class="classify">
+          <div
+            v-for="item, index in classify"
+            :key="index"
+            class="classifyItem"
+            @click="selectClassify(item)"
+            :style="{
+              color: item.type === selectClassifyType ? '#FFFFFF' : '#999999',
+              'background-color':
+                item.type === selectClassifyType ? '#409EFF' : '#FFFFFF',
+              border:
+                item.type === selectClassifyType
+                  ? '1px solid #409EFF'
+                  : '1px solid #999999',
+            }"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+<div v-if="selectClassifyType===1" class="type1">
+  <span style="font-weight: 500">描述：</span><span>不设学习限制，学员可以在任何时间学习</span>
+</div>
+   <div v-if="selectClassifyType===2" class="type1 type2">
+  <div><span style="font-weight: 500">描述：</span><span>辩论、活动、测评、调研、投票按照设置时间</span></div>
+<div class="radio">
+  <span>解锁单元：</span>
+  <a-radio v-model:checked="checked">逐个任务解锁</a-radio>
+</div>
+</div>    
+   <div v-if="selectClassifyType===3" class="type1 type3">
+  <div><span style="font-weight: 500">描述：</span><span>前一个阶段达成目标后解锁下一个阶段</span></div>
+<div class="radio" style="display:flex">
+ <div style="margin-top:1px">解锁条件：</div>
+   <a-radio-group v-model:value="radioSelect">
+   <div><a-radio :value="1">逐个任务解锁，完成一个任务后解锁下一个</a-radio></div>
+  <div style="margin-top:24px"> <a-radio :value="2">完成当前阶段所有必修任务解锁下一阶段</a-radio></div>
+ 
+  </a-radio-group>
+  
+</div>
+</div>  
+      </div>
+      <div class="btnn">
+        <button class="btn1">取消</button>
+        <button class="btn2">确定</button>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+export default {
+  name: "UnlockMode",
+  props: {
+    unlockModeVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      classify: [
+        {
+          type: 1,
+          text: "自由学习模式",
+        },
+        {
+          type: 2,
+          text: "按学习时间解锁",
+        },
+        {
+          type: 3,
+          text: "闯关模式",
+        },
+      ],
+      selectClassifyType: 3,
+      checked:true,
+      radioSelect:1,
+    });
+    const closeDrawer = () => {
+      ctx.emit("update:unlockModeVisible", false);
+    };
+
+    const afterVisibleChange = (bool) => {
+      console.log("state", bool);
+    };
+
+    const selectClassify = (e) => {
+      state.selectClassifyType = e.type;
+    };
+    return {
+      ...toRefs(state),
+      afterVisibleChange,
+      closeDrawer,
+      // change,
+      selectClassify,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.unlockmode {
+  .drawerMain {
+    min-width: 600px;
+    margin: 0px 32px 0px 32px;
+    overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // background-color: red;
+      margin-bottom: 20px;
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        // margin-left: 24px;
+      }
+    }
+    .main {
+      display: flex;
+      flex-direction: column;
+      .classify {
+        display: flex;
+        .classifyItem {
+          width: 160px;
+          height: 38px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+          border: 1px solid #999999;
+          font-size: 16px;
+          font-weight: 500;
+          color: #999999;
+          line-height: 22px;
+          margin-right: 16px;
+          cursor: pointer;
+        }
+      }
+      .type1{
+        margin-top: 50px;
+font-size: 14px;
+font-weight: 400;
+color: #333333;
+line-height: 20px;
+      }
+      .radio{
+        margin-top: 24px;
+      }
+    }
+    .btnn {
+      height: 72px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        color: #4ea6ff;
+        background-color: #fff;
+        cursor: pointer;
+      }
+      .btn2 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 0;
+        margin-left: 15px;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

src/views/learningpath/LearningPath.vue

@@ -114,11 +114,11 @@
 
     <!-- 表格 -->
 
-    <!-- 创建路径弹窗 -->
+    <!-- 创建路径弹窗 v-model:visible="out" -->
     <a-modal
       :closable="sh"
       centered="true"
-      v-model:visible="out"
+    v-model:visible="out"
       :footer="null"
       wrapClassName="CreatePath"
     >
@@ -194,18 +194,20 @@
             <img class="im" src="../../assets/px.jpg" /> -->
               <div
                 @click="chooseImg(item)"
-                v-for="item in imgData"
+                v-for="item,index in imgData"
                 :key="item.key"
                 class="learnBgItem"
                 :style="{
                   border:
                     learnPathBg === item.id
                       ? '2px solid rgba(78, 166, 255, 1)'
-                      : '1px solid #ccc',
+                      : '1px solid #C7CBD2',
                   'background-image': 'url(' + item.source + ')',
+                   display:index>=5?'none':'flex'
                 }"
-              >
+              ></div>
-                <!-- <img class="im" :src="item.source" /> -->
+              <div @click="showLearnBgMore" v-if="imgData.length > 5" class="learnBgItem learnBgMore">
+                查看更多 <img src="../../assets/images/projectadd/go.png" />
               </div>
             </div>
           </div>
@@ -220,12 +222,13 @@
             <button class="samtn btn1" @click="handleOut">取消</button>
             <button class="samtn btn2" @click="createLearnPath">确定</button>
           </div>
-        </div>
+
-        <div
+          <div
-          class="aeLoading"
+            class="aeLoading"
-          :style="{ display: lpLoading ? 'flex' : 'none' }"
+            :style="{ display: lpLoading ? 'flex' : 'none' }"
-        >
+          >
-          <a-spin :spinning="lpLoading" tip="添加中..." />
+            <a-spin :spinning="lpLoading" tip="添加中..." />
+          </div>
         </div>
       </div>
     </a-modal>
@@ -310,7 +313,7 @@
             <img class="im" src="../../assets/px.jpg" /> -->
               <div
                 @click="chooseImg2(item)"
-                v-for="item in imgData"
+                v-for="(item,index) in imgData"
                 :key="item.key"
                 class="learnBgItem"
                 :style="{
@@ -319,16 +322,13 @@
                       ? '2px solid rgba(78, 166, 255, 1)'
                       : '1px solid #ccc',
                   'background-image': 'url(' + item.source + ')',
+                  display:index>=5?'none':'flex'
                 }"
               >
                 <!-- <img class="im" :src="item.source" /> -->
               </div>
-              <div
+               <div @click="showLearnBgMore" v-if="imgData.length > 5" class="learnBgItem learnBgMore">
-                @click="showImgMore"
+                查看更多 <img src="../../assets/images/projectadd/go.png" />
-                v-if="imgData.length >= 5"
-                class="learnBgItem"
-              >
-                <!-- <img class="im" :src="item.source" /> -->
               </div>
             </div>
           </div>
@@ -344,8 +344,8 @@
             <button class="samtn btn2" @click="editLearnPath">确定</button>
           </div>
         </div>
-      </div></a-modal
+      </div>
-    >
+    </a-modal>
     <!-- 发布弹窗 -->
     <a-modal
       v-model:visible="pub"
@@ -582,6 +582,51 @@
     <power-list v-model:PLvisible="PLvisible" />
 
     <!-- 创建路径loading -->
+
+    <!-- 更多背景图 v-model:visible="learnBgMore"  -->
+    <a-modal
+      :closable="sh"
+      centered="true"
+      v-model:visible="learnBgMore"
+      :footer="null"
+      wrapClassName="learnBgMoreModal"
+      :z-index="9999"
+    >
+      <div class="main">
+        <div class="top">
+          <div class="topc">路径图背景</div>
+          <div @click="closeLearnBgMore">
+            <img
+              style="width: 20px; height: 20px"
+              src="../../assets/images/basicinfo/close.png"
+            />
+          </div>
+        </div>
+        <div class="imagesBox">
+          <div
+            @click="chooseImg2(item)"
+            v-for="item in imgData"
+            :key="item.key"
+            class="learnBgItem"
+            :style="{
+              border:
+                learnPathBg2 === item.id
+                  ? '2px solid rgba(78, 166, 255, 1)'
+                  : '1px solid #ccc',
+              'background-image': 'url(' + item.source + ')',
+            }"
+          >
+            <!-- <img class="im" :src="item.source" /> -->
+          </div>
+
+          
+        </div>
+        <div class="btn">
+            <button class="samtn btn1" @click="closeLearnBgMore">取消</button>
+            <button class="samtn btn2" @click="closeLearnBgMore">确定</button>
+          </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 <script>
@@ -643,6 +688,69 @@ export default {
           id: 5,
           source: require("../../assets/images/leveladd/3.png"),
         },
+        {
+          id: 6,
+          source: require("../../assets/images/leveladd/3.png"),
+        },
+        {
+          id: 7,
+          source: require("../../assets/images/leveladd/2.png"),
+        }, {
+          id: 5,
+          source: require("../../assets/images/leveladd/3.png"),
+        },
+        {
+          id: 6,
+          source: require("../../assets/images/leveladd/3.png"),
+        },
+        {
+          id: 7,
+          source: require("../../assets/images/leveladd/2.png"),
+        }, {
+          id: 5,
+          source: require("../../assets/images/leveladd/3.png"),
+        },
+        {
+          id: 6,
+          source: require("../../assets/images/leveladd/3.png"),
+        },
+        {
+          id: 7,
+          source: require("../../assets/images/leveladd/2.png"),
+        }, {
+          id: 5,
+          source: require("../../assets/images/leveladd/3.png"),
+        },
+        {
+          id: 6,
+          source: require("../../assets/images/leveladd/3.png"),
+        },
+        {
+          id: 7,
+          source: require("../../assets/images/leveladd/2.png"),
+        }, {
+          id: 5,
+          source: require("../../assets/images/leveladd/3.png"),
+        },
+        {
+          id: 6,
+          source: require("../../assets/images/leveladd/3.png"),
+        },
+        {
+          id: 7,
+          source: require("../../assets/images/leveladd/2.png"),
+        }, {
+          id: 5,
+          source: require("../../assets/images/leveladd/3.png"),
+        },
+        {
+          id: 6,
+          source: require("../../assets/images/leveladd/3.png"),
+        },
+        {
+          id: 7,
+          source: require("../../assets/images/leveladd/2.png"),
+        },
       ],
       learnPathBg: null, //创建路径选择的路径图背景
       learnPathBg2: null, //编辑路径选择的路径图背景
@@ -734,8 +842,8 @@ export default {
       copyPathId: null, //复制路径iid
 
       lpLoading: false,
+      learnBgMore: false, //是否显示更多学习路径背景
     });
-
     const selectProjectName = (value, index) => {
       console.log("value", value, index);
     };
@@ -1507,6 +1615,28 @@ export default {
       state.endTime = null;
       getLearnPath();
     };
+
+    //     const choiceEvaluation=()=>{
+    //       let obj={
+    //         keyword: "",
+    // 	user_id: 1
+    //       }
+    //       api.choiceEvaluation(obj).then(res=>{
+    // console.log('获取测评列表',res)
+    //       }).catch(err=>{
+    // console.log('获取测评列表失败',err)
+    //       })
+    //     }
+    //     choiceEvaluation()
+
+    //显示更多路径背景弹窗
+    const showLearnBgMore = () => {
+      state.learnBgMore = true;
+    };
+    //关闭更多路径背景弹窗
+    const closeLearnBgMore = () => {
+      state.learnBgMore = false;
+    };
     onMounted(() => {
       // console.log("执行");
       getLearnPath();
@@ -1549,6 +1679,8 @@ export default {
       searchTimeChange,
       searchLearnPath,
       resetLearnPath,
+      showLearnBgMore,
+      closeLearnBgMore,
     };
   },
 };
@@ -1683,6 +1815,7 @@ export default {
                 display: flex;
                 flex-wrap: wrap;
                 min-height: 110px;
+                height: 300px;
                 .learnBgItem {
                   border-radius: 8px;
                   width: 136px;
@@ -1692,6 +1825,17 @@ export default {
                   margin-bottom: 20px;
                   margin-right: 6px;
                 }
+                .learnBgMore {
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  border: 1px solid #c7cbd2;
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #4ea6ff;
+                  line-height: 36px;
+                  cursor: pointer;
+                }
               }
             }
             .info {
@@ -1757,6 +1901,85 @@ export default {
     }
   }
 }
+.learnBgMoreModal {
+  .ant-modal {
+    width: 680px !important;
+    height: 528px !important;
+    .ant-modal-content {
+      width: 680px !important;
+      height: 528px !important;
+      .ant-modal-body {
+        width: 680px !important;
+        height: 528px !important;
+        padding: 0 !important;
+       .main{
+        display: flex;
+        flex-direction: column;
+         .top {
+          padding-left: 51px;
+          padding-right: 51px;
+          padding-top: 28px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          cursor: pointer;
+          .topc {
+            font-size: 16px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 36px;
+          }
+        }
+        .imagesBox{
+          display: flex;
+        //  justify-content: space-between;
+        flex-wrap: wrap;
+           padding-left: 51px;
+          padding-right: 39px;
+          margin-top: 20px;
+          height: 350px;
+          overflow-y: auto;
+          .learnBgItem{
+              border-radius: 8px;
+                  width: 136px;
+                  height: 106px;
+                  background-size: 100%;
+                  background-repeat: no-repeat;
+                  margin-bottom: 20px;
+                  margin-right: 10px;
+          }
+
+        }
+         .btn {
+          width: 100%;
+             position: absolute;
+             bottom:30px ;
+              margin-top: 30px;
+              display: flex;
+             justify-content: center;
+              .samtn {
+                width: 100px;
+                height: 40px;
+                font-size: 14px;
+                border: 1px solid #4ea6ff;
+                border-radius: 8px;
+                cursor: pointer;
+              }
+              .btn1 {
+                background-color: #fff;
+                color: #4ea6ff;
+              }
+              .btn2 {
+                background-color: #4ea6ff;
+                color: #fff;
+                margin-left: 16px;
+              }
+            }
+       }
+      }
+    }
+  }
+}
 .pub {
   .ant-modal {
     .ant-modal-body {

src/views/projectcenter/TaskAdd.vue

@@ -137,9 +137,12 @@
                 <span>学习模式：</span>
                 <div class="inputbox">
                   <input type="text" placeholder="按学习时间解锁" />
-                  <div class="bottonbox">
+                  <!-- v-model:unlockModeVisible="unlockModeVisible" -->
+                  <div class="bottonbox"  @click="showModeVisible">
                     <div class="btnText">切换模式</div>
                   </div>
+                   <!-- 切换模式抽屉 -->
+    <unlock-mode v-model:unlockModeVisible="unlockModeVisible" />
                 </div>
               </div>
               <div class="line"></div>
@@ -1020,6 +1023,9 @@
         </div>
       </div>
     </a-modal>
+
+
+   
   </div>
 </template>
 
@@ -1044,7 +1050,7 @@ import * as apistage from "../../api/indexStage";
 import * as apimove from "../../api/indexMovetask";
 import draggable from "vuedraggable";
 import { storage } from "../../api/storage";
-
+import UnlockMode from '../../components/drawers/UnlockMode.vue'
 const drawercolumns = [
   {
     title: "项目名称",
@@ -1100,6 +1106,7 @@ export default {
     AddEval,
     AddInvist,
     AddVote,
+    UnlockMode,
   },
   setup() {
     const state = reactive({
@@ -1291,6 +1298,8 @@ export default {
       updateStageID: null, //编辑阶段id
       deleteStageId:null,//删除阶段的id
       deleteStageModal:false,//删除阶段弹窗
+
+unlockModeVisible:false,//切换模式抽屉
     });
     console.log("projectId", state.projectId);
     const selectProjectName = (value, index) => {
@@ -2021,6 +2030,11 @@ const closeDeleteStage=()=>{
       console.log("阶段改变", value, option);
       state.removeStageId = option.id;
     };
+
+    //显示切换模式抽屉
+    const showModeVisible=()=>{
+state.unlockModeVisible=true
+    }
     return {
       ...toRefs(state),
       selectProjectName,
@@ -2075,6 +2089,8 @@ const closeDeleteStage=()=>{
       showDeleteStage,
       closeDeleteStage,
       deleteStage,
+
+      showModeVisible,
     };
   },
 };