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

Merge remote-tracking branch 'nyx/250207-growth-prod-master-zp' into 121-dev0731

Browse Source
This commit is contained in:
joshen
2025-02-26 10:46:34 +08:00
parent f9579be1b5 8e96cf0169
commit 233c3e02d8
5 changed files with 198 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/growth/listJiaoBiao.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 423 B

53
src/views/growth/components/gowthPath2.vue
View File

@@ -3,7 +3,7 @@
<div
class="gowth-path2"
:style="{
height: position(stageProcessList.length - 1).top,
height: `${position(stageProcessList.length - 1).topNum + 10}px`,
}"
>
<div
@@ -23,9 +23,33 @@
></div>
</div>
</template>
<div>
<div
style="display: flex; flex-direction: column"
:style="{
alignItems: position(index).align,
}"
>
<div>
<div class="item-name">{{ item.taskName }}</div>
<div class="item-name">
<div
style="
display: inline-block;
border-radius: 50%;
line-height: 16px;
text-align: center;
margin-right: 6px;
width: 16px;
height: 16px;
font-size: 12px;
font-weight: 700;
background-color: #fff;
color: #0077ec;
"
>
{{ stageProcessList.length - index }}
</div>
<div style="display: inline">{{ item.taskName }}</div>
</div>
<div class="triangle"></div>
</div>
<div class="f-a-c" style="justify-content: flex-end">
@@ -78,6 +102,7 @@ const point = [
{
top: 51,
right: 167,
align: "end",
},
{
top: 144,
@@ -86,6 +111,7 @@ const point = [
{
top: 234,
right: 146,
align: "end",
},
{
top: 339,
@@ -94,6 +120,7 @@ const point = [
{
top: 414,
right: 121,
align: "end",
},
{
top: 535,
@@ -102,6 +129,7 @@ const point = [
{
top: 635,
right: 53,
align: "end",
},
{
top: 723,
@@ -110,17 +138,18 @@ const point = [
{
top: 804,
right: 53,
align: "end",
},
];
// 基础配置项
const widthConfig = [
"0px",
"0px",
"20px",
"64px",
"40px",
"80px",
"20px",
"40px",
"64px",
"80px",
"45px",
@@ -143,6 +172,8 @@ const position = (index) => {
return {
top: `${multiple * (853 + 25) + point[num2].top}px`,
right: `${point[num2].right}px`,
topNum: multiple * (853 + 25) + point[num2].top,
align: point[num2].align,
};
};
// 基础配置项
@@ -176,6 +207,13 @@ const stateData = computed(() => {
bgColor: "rgba(242, 144, 61, 0.2)",
progressColor: "#F2903D",
};
} else if (item.completionStatus === "3") {
return {
text: "已结束",
color: "#666666",
bgColor: "rgba(102, 102, 102, 0.2)",
progressColor: "#AEB3B8",
};
}
};
});
@@ -197,6 +235,9 @@ const toFinish = (item) => {
background-image: url(@/assets/image/growth/path2.png);
background-size: 100%;
:deep(.el-progress-bar__outer){
background-color: #AEB3B8;
}
.path-item {
position: absolute;
display: flex;
@@ -244,7 +285,7 @@ const toFinish = (item) => {
border-radius: 4px;
font-size: 12px;
color: #ffffff;
padding: 8px 5px 9px 10px;
padding: 8px 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

90
src/views/growth/growthDetails.vue
View File

@@ -45,6 +45,9 @@
<img class="icon" src="@/assets/image/growth/qiehuan.png" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="tabClick(null, '4')"
>全部</el-dropdown-item
>
<el-dropdown-item @click="tabClick(null, '0')"
>未开始</el-dropdown-item
>
@@ -78,15 +81,16 @@
style="width: 100%; height: 100%"
:src="getAssetsFile(item.courseType)"
/>
<div class="task-img-icon">{{ key + 1 }}</div>
</div>
<div>
<div style="margin-left: 11px">
<div style="display: flex; align-items: center">
<div class="task-type">
{{ TASK_TYPES.typeName[item.courseType] }}
</div>
<div class="task-name">{{ item.taskName }}</div>
</div>
<div
<!-- <div
class="task-state"
:style="{
color:
@@ -104,20 +108,37 @@
? "已完成"
: "进行中"
}}
</div>
</div> -->
<template v-if="item.completionStatus === '0'">
<div
class="task-state"
:style="{
color: item.canLearn ? '#F2903D' : '#c4c2c2',
}"
>
未开始
</div>
</template>
<template v-if="item.completionStatus === '1'">
<div class="task-state" style="color: #8bc34a">已完成</div>
</template>
<template v-if="item.completionStatus === '2'">
<div class="task-state" style="color: #f2903d">进行中</div>
</template>
<template v-if="item.completionStatus === '3'">
<div class="task-state" style="color: #c4c2c2">已结束</div>
</template>
<template v-if="item.completionStatus === '10'">
<div class="task-state" style="color: #c4c2c2">未解锁</div>
</template>
<div style="display: flex; align-items: center">
<div style="flex: 1">
<el-progress
:percentage="item.progress"
:show-text="false"
:stroke-width="3"
:color="
item.completionStatus === '0'
? '#C4C2C2'
: item.completionStatus === '1'
? '#0077EC'
: '#FF8726'
"
:color="item.progress == 100 ? '#8BC34A' : '#F2903D'"
/>
</div>
<div class="progress-text">{{ item.progress }}%</div>
@@ -205,7 +226,7 @@ import dayjs from "dayjs";
import { useStore } from "vuex";
import { changeTime } from "@/api/method";
const {
query: { courseId, routerId, type, infoId, chapterOrStageId, id },
query: { routerId, type },
} = useRoute();
const router = useRouter();
const { commit, dispatch, state } = useStore();
@@ -224,6 +245,9 @@ const tabClick = (type, status) => {
if (status) {
queryParams.completionStatus = status;
}
if (status == 4) {
queryParams.completionStatus = "";
}
getList();
};
@@ -241,6 +265,9 @@ const stageProcessList = ref([]);
const anchorNum = ref(0);
onMounted(() => {
dispatch("getGrowthInfo", { routerId, type });
if (type) {
queryParams.type = type;
}
getList();
});
@@ -274,8 +301,16 @@ const openCourseIdList = ref([]);
const userInfo = computed(() => store.state.userInfo);
async function toFinish(d) {
if (!d.canLearn) {
ElMessage.warning(`学习任务暂未开始`);
return;
}
if (d.completionStatus == 3) {
ElMessage.warning(`学习任务已结束无法学习`);
return;
}
if (d.completionStatus == 10) {
ElMessage.warning("当前未解锁");
ElMessage.warning(`请先完成“${d.superTaskName}”的学习任务`);
return;
}
//更新学员当前任务
@@ -537,6 +572,7 @@ const toPath = () => {
path: "/growthPath",
query: {
routerId,
type: queryParams.type,
},
});
};
@@ -573,16 +609,31 @@ const toPath = () => {
margin-left: 9px;
}
.task-img {
width: 110px;
height: 70px;
margin-right: 11px;
width: 121px;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.task-img-icon {
position: absolute;
display: flex;
justify-content: center;
padding-top: 3px;
position: absolute;
color: #fff;
font-size: 12px;
box-sizing: border-box;
top: 0;
left: 10px;
background-image: url(@/assets/image/growth/listJiaoBiao.png);
background-size: 100% 100%;
width: 17px;
height: 25px;
}
.task-state {
font-size: 13px;
margin-top: 11px;
margin-bottom: 13px;
margin-top: 7px;
margin-bottom: 17px;
}
.task-name {
font-size: 14px;
@@ -637,6 +688,11 @@ const toPath = () => {
align-items: center;
height: 44px;
.nav-title {
width: 300px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
font-size: 18px;
color: #ffffff;

82
src/views/growth/growthPath.vue
View File

@@ -45,6 +45,9 @@
<img class="icon" src="@/assets/image/growth/qiehuan.png" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="tabClick(null, '4')"
>全部</el-dropdown-item
>
<el-dropdown-item @click="tabClick(null, '0')"
>未开始</el-dropdown-item
>
@@ -85,7 +88,26 @@
"
>
<div>
<div class="item-name">{{ item.taskName }}</div>
<div class="item-name">
<div
style="
display: inline-block;
border-radius: 50%;
line-height: 16px;
text-align: center;
margin-right: 6px;
width: 16px;
height: 16px;
font-size: 12px;
font-weight: 700;
background-color: #fff;
color: #0077ec;
"
>
{{ stageProcessList.length - index }}
</div>
<div style="display: inline">{{ item.taskName }}</div>
</div>
<div class="triangle"></div>
</div>
<div class="f-a-c">
@@ -134,7 +156,26 @@
</div>
<div>
<div>
<div class="item-name">{{ item.taskName }}</div>
<div class="item-name">
<div
style="
display: inline-block;
border-radius: 50%;
line-height: 16px;
text-align: center;
margin-right: 6px;
width: 16px;
height: 16px;
font-size: 12px;
font-weight: 700;
background-color: #fff;
color: #0077ec;
"
>
{{ stageProcessList.length - index }}
</div>
<div style="display: inline">{{ item.taskName }}</div>
</div>
<div class="triangle"></div>
</div>
<div class="f-a-c" style="justify-content: flex-end">
@@ -253,7 +294,7 @@ import dayjs from "dayjs";
import { useStore } from "vuex";
import { changeTime } from "@/api/method";
const {
query: { courseId, routerId, type, infoId, chapterOrStageId, id },
query: { routerId, type },
} = useRoute();
const router = useRouter();
const { commit, dispatch, state } = useStore();
@@ -272,6 +313,9 @@ const tabClick = (type, status) => {
if (status) {
queryParams.completionStatus = status;
}
if (status == 4) {
queryParams.completionStatus = "";
}
getList();
};
@@ -290,6 +334,9 @@ onMounted(() => {
updateWindowWidth(); // 初始化宽度
window.addEventListener("resize", updateWindowWidth);
dispatch("getGrowthInfo", { routerId, type });
if (type) {
queryParams.type = type;
}
getList();
});
// 储存屏幕宽
@@ -309,7 +356,7 @@ const getList = () => {
...queryParams,
}).then((res) => {
if (growthInfo.value.template == 1) {
stageProcessList.value = res.data;
stageProcessList.value = res.data.reverse();
} else {
let newData = res.data.slice(0, 15).reverse();
// 默认第一个在第一点位
@@ -486,12 +533,27 @@ const stateData = computed(() => {
bgColor: "rgba(242, 144, 61, 0.2)",
progressColor: "#F2903D",
};
} else if (item.completionStatus === "3") {
return {
text: "已结束",
color: "#666666",
bgColor: "rgba(102, 102, 102, 0.2)",
progressColor: "#AEB3B8",
};
}
};
});
async function toFinish(d) {
if (!d.canLearn) {
ElMessage.warning(`学习任务暂未开始`);
return;
}
if (d.completionStatus == 3) {
ElMessage.warning(`学习任务已结束无法学习`);
return;
}
if (d.completionStatus == 10) {
ElMessage.warning("当前未解锁");
ElMessage.warning(`请先完成“${d.superTaskName}”的学习任务`);
return;
}
//更新学员当前任务
@@ -748,6 +810,7 @@ const toPath = () => {
path: "/growthDetails",
query: {
routerId,
type: queryParams.type,
},
});
};
@@ -770,7 +833,9 @@ const toPath = () => {
:deep(input::placeholder) {
color: #ffffff;
}
:deep(.el-progress-bar__outer) {
background-color: #aeb3b8;
}
.container {
position: absolute;
background-color: #ffffff;
@@ -927,6 +992,11 @@ const toPath = () => {
align-items: center;
height: 44px;
.nav-title {
width: 300px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
font-size: 18px;
color: #ffffff;

3
vite.config.js
View File

@@ -45,7 +45,8 @@ export default defineConfig(({ command, mode }) =>
proxy: {
// "/professional": {
// // target: 'http://192.168.237.141:32002',
// target: 'http://192.168.150.97:32002',
// // target: 'http://192.168.150.97:32002',
// target: 'http://192.168.66.211:32002',
// changeOrigin: true,
// },
"/growth": {