hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-11 20:06:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix -- 关卡太多只展示8个

Browse Source
This commit is contained in:
yuping
2023-03-09 17:13:29 +08:00
parent aebc2074b6
commit 4ed7e51e61
1 changed files with 98 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/components/PathDetailImage.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div <div
class="pathDetail" class="pathDetail"
v-if="visiable" v-if="visiable"
:style="{ :style="{
background:`url('${imgAttr.backurl}') no-repeat`, background:`url('${imgAttr.backurl}') no-repeat`,
backgroundSize: 'contain' backgroundSize: 'contain'
@@ -25,15 +25,15 @@
<script setup> <script setup>
import {computed, defineProps, ref, watch} from "vue"; import {computed, defineProps, ref, watch} from "vue";
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
import back from '@/assets/image/pathdetails/pathDetailBack.png' import back from "@/assets/image/pathdetails/pathDetailBack.png";
import nameBack from '@/assets/image/pathdetails/pathDetailImg.png' import nameBack from "@/assets/image/pathdetails/pathDetailImg.png";
import currentBack from '@/assets/image/pathdetails/pathDetailImgSelect.png' import currentBack from "@/assets/image/pathdetails/pathDetailImgSelect.png";
import back1 from '@/assets/image/pathdetails/back1.png' import back1 from "@/assets/image/pathdetails/back1.png";
import nameBack1 from '@/assets/image/pathdetails/nameBack1.png' import nameBack1 from "@/assets/image/pathdetails/nameBack1.png";
import currentBack1 from '@/assets/image/pathdetails/currentBack1.png' import currentBack1 from "@/assets/image/pathdetails/currentBack1.png";
import back2 from '@/assets/image/pathdetails/back2.png' import back2 from "@/assets/image/pathdetails/back2.png";
import nameBack2 from '@/assets/image/pathdetails/nameBack2.png' import nameBack2 from "@/assets/image/pathdetails/nameBack2.png";
import currentBack2 from '@/assets/image/pathdetails/currentBack2.png' import currentBack2 from "@/assets/image/pathdetails/currentBack2.png";
import {useRouter} from "vue-router/dist/vue-router"; import {useRouter} from "vue-router/dist/vue-router";
const props = defineProps({ const props = defineProps({
@@ -43,84 +43,94 @@ const props = defineProps({
type: Object, type: Object,
default: {} default: {}
} }
}) });
const router = useRouter(); const router = useRouter();
const visiable = ref(true) const visiable = ref(true);
const imageAttrs = { const imageAttrs = {
'路径图背景': { "路径图背景": {
width: 1437, width: 1437,
height: 594, height: 594,
cheight:70, cheight: 70,
cheightC:80, cheightC: 80,
backurl: back, backurl: back,
currentBack: currentBack, currentBack: currentBack,
nameBack: nameBack, nameBack: nameBack,
ccolors: '#FFF', ccolors: "#FFF",
colors: '#FFF', colors: "#FFF",
positions: [ positions: [
{left: 50, top: 425}, { left: 50, top: 425 },
{left: 440, top: 425}, { left: 440, top: 425 },
{left: 400, top: 315}, { left: 400, top: 315 },
{left: 515, top: 220}, { left: 515, top: 220 },
{left: 800, top: 200}, { left: 800, top: 200 },
{left: 660, top: 115}, { left: 660, top: 115 },
{left: 760, top: 35}, { left: 760, top: 35 },
{left: 1000, top: 25}, { left: 1000, top: 25 },
] ]
}, },
'路径图2': { "路径图2": {
width: 1437, width: 1437,
height: 594, height: 594,
cheight:100, cheight: 100,
cheightC:106, cheightC: 106,
backurl: back2, backurl: back2,
currentBack: currentBack2, currentBack: currentBack2,
nameBack: nameBack2, nameBack: nameBack2,
ccolors: '#FFF3E5', ccolors: "#FFF3E5",
colors: '#FFF', colors: "#FFF",
positions: [ positions: [
{left: 40, top: 380}, { left: 40, top: 380 },
{left: 160, top: 290}, { left: 160, top: 290 },
{left: 330, top: 270}, { left: 330, top: 270 },
{left: 440, top: 200}, { left: 440, top: 200 },
{left: 610, top: 170}, { left: 610, top: 170 },
{left: 780, top: 130}, { left: 780, top: 130 },
{left: 890, top: 60}, { left: 890, top: 60 },
{left: 1060, top: 30}, { left: 1060, top: 30 },
] ]
}, },
'路径图3': { "路径图3": {
width: 1437, width: 1437,
height: 594, height: 594,
cheight:70, cheight: 70,
cheightC:80, cheightC: 80,
backurl: back1, backurl: back1,
currentBack: currentBack1, currentBack: currentBack1,
nameBack: nameBack1, nameBack: nameBack1,
ccolors: '#FFF', ccolors: "#FFF",
colors: '#A06438', colors: "#A06438",
positions: [ positions: [
{left: 20, top: 390}, { left: 20, top: 390 },
{left: 210, top: 380}, { left: 210, top: 380 },
{left: 320, top: 275}, { left: 320, top: 275 },
{left: 485, top: 265}, { left: 485, top: 265 },
{left: 645, top: 220}, { left: 645, top: 220 },
{left: 820, top: 180}, { left: 820, top: 180 },
{left: 960, top: 150}, { left: 960, top: 150 },
{left: 1050, top:60}, { left: 1050, top: 60 },
] ]
} }
} };
const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img&&props.img.includes(e))] || {}) const imgAttr = computed(() => imageAttrs[Object.keys(imageAttrs).find(e => props.img && props.img.includes(e))] || {});
const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.id === props.detail.currentStageId)) const current = computed(() => props.detail.chapterDtoList.findIndex(e => e.id === props.detail.currentStageId));
//当关卡太多时只显示 当前关卡中间8个 //当关卡太多时只显示 当前关卡中间8个
const currentIndex = computed(() => current.value<3?current.value:props.detail.chapterDtoList.length-current.value<=4?(8-(props.detail.chapterDtoList.length-current.value)):3) const currentIndex = computed(() => {
const startIndex = computed(() => current.value<3?0:props.detail.chapterDtoList.length-current.value<=4?props.detail.chapterDtoList.length-8:current.value-3) if (props.detail.chapterDtoList?.length <= 8) {
const showList = computed(() => props.detail.chapterDtoList?.length<=8?props.detail.chapterDtoList:props.detail.chapterDtoList?.slice(startIndex.value,startIndex.value+8)) return current.value;
}
return current.value < 3 ? current.value : props.detail.chapterDtoList.length - current.value <= 4 ? (8 - (props.detail.chapterDtoList.length - current.value)) : 3;
});
const startIndex = computed(() => {
if (props.detail.chapterDtoList?.length <= 8) {
return 0;
}
return current.value < 3 ? 0 : props.detail.chapterDtoList.length - current.value <= 4 ? props.detail.chapterDtoList.length - 8 : current.value - 3;
});
const showList = computed(() => props.detail.chapterDtoList?.length <= 8 ? props.detail.chapterDtoList : props.detail.chapterDtoList?.slice(startIndex.value, startIndex.value + 8));
function show() { function show() {
visiable.value = true visiable.value = true;
} }
function toDetail(i) { function toDetail(i) {
@@ -128,53 +138,53 @@ function toDetail(i) {
let previewSetting = props.detail.previewSetting; let previewSetting = props.detail.previewSetting;
let studySetting = props.detail.studySetting; let studySetting = props.detail.studySetting;
let isStudy = false; let isStudy = false;
let chapterId = props.detail.chapterDtoList[i].id let chapterId = props.detail.chapterDtoList[i].id;
console.log(studySetting) console.log(studySetting);
if(previewSetting==null){ if (previewSetting == null) {
// 如果未设置预览 则只可以看当前关卡 其余关卡不让点击 // 如果未设置预览 则只可以看当前关卡 其余关卡不让点击
if (current.value !== i) { if (current.value !== i) {
ElMessage.warning("当前关卡不可预览"); ElMessage.warning("当前关卡不可预览");
return return;
} }
isStudy = true; isStudy = true;
}else{ } else {
if (current.value !== i) { if (current.value !== i) {
let lookArr = []; let lookArr = [];
lookArr = previewSetting.split(',') lookArr = previewSetting.split(",");
if((i+1)>=lookArr[0] && (i+1)<=lookArr[1]){ if ((i + 1) >= lookArr[0] && (i + 1) <= lookArr[1]) {
if(studySetting!==null){ if (studySetting !== null) {
let studyArr = []; let studyArr = [];
studyArr = studySetting.split(',') studyArr = studySetting.split(",");
if((i+1)>=studyArr[0] && (i+1)<=studyArr[1]){ if ((i + 1) >= studyArr[0] && (i + 1) <= studyArr[1]) {
isStudy = true; isStudy = true;
}else{ } else {
isStudy = false; isStudy = false;
} }
}else{ } else {
isStudy = false; isStudy = false;
} }
}else{ } else {
ElMessage.warning("当前关卡不可预览"); ElMessage.warning("当前关卡不可预览");
return return;
} }
}else{ } else {
isStudy = true; isStudy = true;
} }
} }
(import.meta.env.MODE === "development" || import.meta.env.MODE === "test") (import.meta.env.MODE === "development" || import.meta.env.MODE === "test")
? router.push({ ? router.push({
path: "/pathdetails", path: "/pathdetails",
query: {routerId: props.detail.id, routerName: props.detail.name, isStudy, chapterId}, query: { routerId: props.detail.id, routerName: props.detail.name, isStudy, chapterId },
}) })
: window.open( : window.open(
`${window.location.protocol + import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent( `${window.location.protocol + import.meta.env.VITE_BOE_PATH_DETAIL_URL}/pathdetails&params=${encodeURIComponent(
`routerId=${props.detail.id}&routerName=${props.detail.name}&chapterId=${chapterId}&isStudy=${isStudy}` `routerId=${props.detail.id}&routerName=${props.detail.name}&chapterId=${chapterId}&isStudy=${isStudy}`
)}` )}`
,'_top'); , "_top");
} }
function close() { function close() {
visiable.value = false visiable.value = false;
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@@ -189,12 +199,13 @@ function close() {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
} }
.nameClass{
.nameClass {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
padding:0 20px 0 50px; padding: 0 20px 0 50px;
font-size: 12px; font-size: 12px;
} }
</style> </style>