mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-09 02:46:47 +08:00
383 lines
9.1 KiB
Vue
383 lines
9.1 KiB
Vue
<template>
|
|
<div
|
|
:class="
|
|
imgAttrindex === 1
|
|
? 'pathDetail pathDetailback'
|
|
: imgAttrindex === 2
|
|
? 'pathDetail path3'
|
|
: 'pathDetail path2'
|
|
"
|
|
v-if="data?.list"
|
|
>
|
|
<div
|
|
v-for="(item, i) in data?.list"
|
|
:key="i"
|
|
class="cha"
|
|
:style="{
|
|
top: `${imgAttr?.positions[i]?.top - (current === i ? 1 : 0)}px`,
|
|
left: `${imgAttr?.positions[i]?.left - (current === i ? 11 : 0)}px`,
|
|
}"
|
|
>
|
|
<div
|
|
@click="toDetail(item, i)"
|
|
:class="
|
|
imgAttrindex === 1
|
|
? current === i
|
|
? 'nameClass currentBack'
|
|
: 'nameClass nameBack'
|
|
: imgAttrindex === 2
|
|
? current === i
|
|
? 'nameClass pathselect3'
|
|
: 'nameClass pathnoselect3'
|
|
: current === i
|
|
? 'nameClass pathselect2'
|
|
: 'nameClass pathnoselect2'
|
|
"
|
|
:title="item.name"
|
|
:style="{
|
|
backgroundSize: '100%',
|
|
width: `${
|
|
imgAttrindex === 1
|
|
? current === i
|
|
? 100
|
|
: 100
|
|
: imgAttrindex === 2
|
|
? current === i
|
|
? 100
|
|
: 100
|
|
: current === i
|
|
? 100
|
|
: 100
|
|
}px`,
|
|
height: `${
|
|
imgAttrindex === 1
|
|
? current === i
|
|
? 75
|
|
: 75
|
|
: imgAttrindex === 2
|
|
? current === i
|
|
? 100
|
|
: 100
|
|
: current === i
|
|
? 75
|
|
: 75
|
|
}px`,
|
|
lineHeight: '50px',
|
|
color:
|
|
imgAttrindex === 1
|
|
? '#FFF'
|
|
: imgAttrindex === 2
|
|
? '#FFF'
|
|
: imgAttrindex === 3 && current === i
|
|
? '#FFF'
|
|
: '#000',
|
|
}"
|
|
>
|
|
<div
|
|
:style="{
|
|
'margin-left':
|
|
imgAttrindex === 1 ? '0px' : imgAttrindex === 2 ? '13px' : '17px',
|
|
'margin-top':
|
|
imgAttrindex === 1
|
|
? '0px'
|
|
: imgAttrindex === 2
|
|
? '5px'
|
|
: imgAttrindex === 3 && current === i
|
|
? '0px'
|
|
: '-5px',
|
|
}"
|
|
>
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { computed, defineProps, ref, watch } from "vue";
|
|
import { useRouter } from "vue-router/dist/vue-router";
|
|
import { ElLoading, ElMessage } from "element-plus";
|
|
import { ROUTERTASK_LIST } from "@/api/api";
|
|
import { usePage, useRequest } from "@/api/request";
|
|
const listheight = document.body.clientHeight - 300 + "px";
|
|
console.log("listheight", listheight);
|
|
const props = defineProps({
|
|
value: String,
|
|
img: String,
|
|
routerId: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
routerInfo: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
});
|
|
const router = useRouter();
|
|
const visiable = ref(true);
|
|
|
|
// const back = ref("require('@/assets/images/pathdetails/pathDetailBack.png')");
|
|
const imageAttrs = {
|
|
路径图背景: {
|
|
width: 1437,
|
|
height: 594,
|
|
positions: [
|
|
{ left: -21, top: 433 },
|
|
{ left: 170, top: 324 },
|
|
{ left: 28, top: 256 },
|
|
{ left: 200, top: 166 },
|
|
{ left: 160, top: 30 },
|
|
{ left: 297, top: -63 },
|
|
],
|
|
},
|
|
路径图2: {
|
|
width: 1437,
|
|
height: 594,
|
|
positions: [
|
|
{ left: -26, top: 379 },
|
|
{ left: 91, top: 319 },
|
|
{ left: 28, top: 218 },
|
|
{ left: 114, top: 153 },
|
|
{ left: 40, top: 46 },
|
|
{ left: 184, top: -28 },
|
|
],
|
|
},
|
|
路径图3: {
|
|
width: 1437,
|
|
height: 594,
|
|
positions: [
|
|
{ left: -21, top: 398 },
|
|
{ left: 145, top: 324 },
|
|
{ left: 44, top: 252 },
|
|
{ left: 144, top: 165 },
|
|
{ left: 53, top: 63 },
|
|
{ left: 180, top: -15 },
|
|
],
|
|
},
|
|
};
|
|
|
|
const imgAttr = computed(() => {
|
|
if (props.img) {
|
|
return (
|
|
imageAttrs[Object.keys(imageAttrs).find((e) => props.img.includes(e))] ||
|
|
{}
|
|
);
|
|
}
|
|
});
|
|
const imgAttrindex = computed(
|
|
() => {
|
|
// console.log("props.img.includes1", props.img);
|
|
// console.log("props.img", props.img.includes("路径图背景"));
|
|
if (
|
|
props.img &&
|
|
Object.keys(imageAttrs).find((e) => props.img.includes(e)) ===
|
|
"路径图背景"
|
|
) {
|
|
return 1;
|
|
} else if (
|
|
props.img &&
|
|
Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图2"
|
|
) {
|
|
return 2;
|
|
} else if (
|
|
props.img &&
|
|
Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图3"
|
|
) {
|
|
return 3;
|
|
}
|
|
}
|
|
// Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图背景"
|
|
// ? 1
|
|
// : Object.keys(imageAttrs).find((e) => props.img.includes(e)) === "路径图2"
|
|
// ? 2
|
|
// : 3
|
|
);
|
|
console.log("imgAttrindex", imgAttrindex);
|
|
|
|
// 使用
|
|
const loading = ref(false); // loading
|
|
const openLoading = () => {
|
|
loading.value = ElLoading.service({
|
|
lock: true,
|
|
text: "Loading",
|
|
background: "rgba(0, 0, 0, 0.7)",
|
|
});
|
|
};
|
|
openLoading();
|
|
const closeLoading = () => {
|
|
loading.value.close();
|
|
};
|
|
// const data = ref({
|
|
// list: [
|
|
// {
|
|
// name: "关卡一",
|
|
// },
|
|
// {
|
|
// name: "关卡二",
|
|
// },
|
|
// {
|
|
// name: "关卡三",
|
|
// },
|
|
// {
|
|
// name: "关卡四",
|
|
// },
|
|
// {
|
|
// name: "关卡五",
|
|
// },
|
|
// {
|
|
// name: "关卡六",
|
|
// },
|
|
// ],
|
|
// });
|
|
// closeLoading();
|
|
|
|
const { data } = useRequest(
|
|
ROUTERTASK_LIST,
|
|
{ routerId: props.routerId },
|
|
(e) => {
|
|
closeLoading();
|
|
console.log("获取路径图", e);
|
|
if (e.code === 6) {
|
|
router.push({
|
|
path: "/notpath",
|
|
});
|
|
}
|
|
}
|
|
);
|
|
console.log("data", data, props.routerInfo);
|
|
let current = ref(null);
|
|
watch(data, () => {
|
|
if (data && data.value && data.value.list) {
|
|
data.value.list.reverse();
|
|
current.value = data.value.list.findIndex(
|
|
(e) => e.id === data.value.currentChapterId
|
|
);
|
|
console.log("props.routerInfo", props.routerInfo);
|
|
}
|
|
|
|
closeLoading();
|
|
});
|
|
// watch(props.routerInfo, () => {
|
|
// console.log("props.routerInfo", props.routerInfo);
|
|
// });
|
|
// const current = computed(() => {
|
|
// data.value.list.findIndex((e) => e.id === data.value.currentChapterId);
|
|
// });
|
|
console.log("current", current);
|
|
|
|
function show() {
|
|
visiable.value = true;
|
|
}
|
|
|
|
function toDetail(item, i) {
|
|
// console.log("import.meta.env.MODE", import.meta.env.MODE);
|
|
console.log("current.value !== i", current, i, item);
|
|
|
|
// 预览和学习设置
|
|
let previewSetting = props.routerInfo.previewSetting;
|
|
let studySetting = props.routerInfo.studySetting;
|
|
let isStudy = false;
|
|
if (previewSetting == null) {
|
|
// 如果未设置预览 则只可以看当前关卡 其余关卡不让点击
|
|
if (current.value !== i) {
|
|
ElMessage.warning("当前关卡不可预览");
|
|
return;
|
|
}
|
|
isStudy = true;
|
|
} else {
|
|
if (current.value !== i) {
|
|
let lookArr = [];
|
|
lookArr = previewSetting.split(",");
|
|
if (i + 1 >= lookArr[0] && i + 1 <= lookArr[1]) {
|
|
if (studySetting !== null) {
|
|
let studyArr = [];
|
|
studyArr = studySetting.split(",");
|
|
if (i + 1 >= studyArr[0] && i + 1 <= studyArr[1]) {
|
|
isStudy = true;
|
|
} else {
|
|
isStudy = false;
|
|
}
|
|
} else {
|
|
isStudy = false;
|
|
}
|
|
} else {
|
|
ElMessage.warning("当前关卡不可预览");
|
|
return;
|
|
}
|
|
} else {
|
|
isStudy = true;
|
|
}
|
|
}
|
|
// if (current.value !== i) {
|
|
// return;
|
|
// }
|
|
router.push({
|
|
path: "/pathmappage",
|
|
query: {
|
|
routerId: props.routerId,
|
|
chapterId: item.id,
|
|
isStudy,
|
|
// routerName: props.detail.routerName,
|
|
},
|
|
});
|
|
}
|
|
|
|
function close() {
|
|
visiable.value = false;
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.pathDetailback {
|
|
background-image: url("../assets/image/pathDetails/pathDetailBack.png");
|
|
}
|
|
.path2 {
|
|
background-image: url("../assets/image/pathDetails/path2.png");
|
|
}
|
|
.path3 {
|
|
background-image: url("../assets/image/pathDetails/path3.png");
|
|
}
|
|
.pathDetail {
|
|
width: 410px;
|
|
height: 500px;
|
|
position: relative;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
// background-position: center;
|
|
// overflow-x: scroll;
|
|
margin: 30px;
|
|
margin-top: 100px;
|
|
.cha {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
}
|
|
.nameClass {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow: ellipsis;
|
|
padding: 0 20px 0 50px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.nameBack {
|
|
background-image: url("../assets/image/pathDetails/pathDetailImg.png");
|
|
}
|
|
.currentBack {
|
|
background-image: url("../assets/image/pathDetails/pathDetailImgSelect.png");
|
|
}
|
|
|
|
.pathselect2 {
|
|
background-image: url("../assets/image/pathDetails/pathselect2.png");
|
|
}
|
|
.pathnoselect2 {
|
|
background-image: url("../assets/image/pathDetails/pathnoselect2.png");
|
|
}
|
|
|
|
.pathselect3 {
|
|
background-image: url("../assets/image/pathDetails/pathselect3.png");
|
|
}
|
|
.pathnoselect3 {
|
|
background-image: url("../assets/image/pathDetails/pathnoselect3.png");
|
|
}
|
|
}
|
|
</style> |