update：训练难度展示ui完成
This commit is contained in:
489
src/pages/training/difficulty.vue
Normal file
489
src/pages/training/difficulty.vue
Normal file
@@ -0,0 +1,489 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import TrainingDifficultyBadge from "@/components/training/TrainingDifficultyBadge.vue";
|
||||
import TrainingDifficultyPreviewCard from "@/components/training/TrainingDifficultyPreviewCard.vue";
|
||||
import TrainingDifficultyStartButton from "@/components/training/TrainingDifficultyStartButton.vue";
|
||||
import {
|
||||
getTrainingDifficultyModeConfig,
|
||||
trainingDifficultyStorageKey,
|
||||
} from "@/mock/trainingDifficulty.js";
|
||||
|
||||
// 当前页面的数据源：
|
||||
// 1. 模式配置：src/mock/trainingDifficulty.js -> getTrainingDifficultyModeConfig
|
||||
// 2. 当前进度：页面路由参数或配置中的 activeDifficultyId / progressMap
|
||||
const defaultModeKey = "precision";
|
||||
const defaultUnlockedDifficultyId = "lv1";
|
||||
|
||||
// 难度轴布局参数，节点按“等级越低越靠下”的方式排列。
|
||||
const nodesLayout = {
|
||||
viewportHeightRpx: 1020,
|
||||
topPaddingRpx: 136,
|
||||
bottomPaddingRpx: 144,
|
||||
verticalGapRpx: 188,
|
||||
anchorOffsetRpx: 796,
|
||||
horizontalPatternRpx: [388, 232, 516, 258, 458, 304],
|
||||
nearHorizontalDistanceRpx: 170,
|
||||
extraGapScale: 0.5,
|
||||
};
|
||||
|
||||
const emptyDifficulty = {
|
||||
id: "",
|
||||
label: "",
|
||||
title: "",
|
||||
summary: [],
|
||||
startText: "开始",
|
||||
targetPaperType: "",
|
||||
};
|
||||
|
||||
// 页面基础状态
|
||||
const modeKey = ref(defaultModeKey);
|
||||
const unlockedDifficultyId = ref(defaultUnlockedDifficultyId);
|
||||
const selectedDifficultyId = ref(defaultUnlockedDifficultyId);
|
||||
const nodesScrollTop = ref(0);
|
||||
const nodesScrollWithAnimation = ref(false);
|
||||
|
||||
// 当前训练模式配置
|
||||
const pageConfig = computed(() => {
|
||||
return getTrainingDifficultyModeConfig(modeKey.value);
|
||||
});
|
||||
|
||||
const difficultyProgressMap = computed(() => {
|
||||
return pageConfig.value?.progressMap || {};
|
||||
});
|
||||
|
||||
const clamp = (value, min, max) => {
|
||||
return Math.min(Math.max(value, min), max);
|
||||
};
|
||||
|
||||
// 从 lv1 / lv20 这类 id 中提取等级数值，统一用于排序、解锁判断和进度比较。
|
||||
const getDifficultyLevel = (difficultyId = "") => {
|
||||
const matched = String(difficultyId).match(/\d+/);
|
||||
return matched ? Number(matched[0]) : 0;
|
||||
};
|
||||
|
||||
// 合并节点基础信息和难度详情，并统一按等级升序整理。
|
||||
const createDifficultyNodes = (config) => {
|
||||
const details = config?.details || {};
|
||||
const rawNodes = Array.isArray(config?.nodes) ? config.nodes : [];
|
||||
const nodeMap = new Map(rawNodes.map((node) => [node.id, node]));
|
||||
const difficultyIds = new Set([
|
||||
...rawNodes.map((node) => node.id),
|
||||
...Object.keys(details),
|
||||
]);
|
||||
|
||||
return Array.from(difficultyIds)
|
||||
.map((difficultyId) => {
|
||||
const level = getDifficultyLevel(difficultyId);
|
||||
const node = nodeMap.get(difficultyId) || {};
|
||||
const detail = details[difficultyId] || {};
|
||||
const label = node.label || detail.label || `Lv${level || ""}`;
|
||||
|
||||
return {
|
||||
...node,
|
||||
...detail,
|
||||
id: difficultyId,
|
||||
level,
|
||||
label,
|
||||
title: detail.title || `${label}难度`,
|
||||
summary: Array.isArray(detail.summary) ? detail.summary : [],
|
||||
startText: detail.startText || "开始",
|
||||
targetPaperType: detail.targetPaperType || "",
|
||||
};
|
||||
})
|
||||
.filter((node) => node.id && node.level > 0)
|
||||
.sort((first, second) => first.level - second.level);
|
||||
};
|
||||
|
||||
const findValidDifficultyId = (difficultyId, nodes) => {
|
||||
return nodes.some((node) => node.id === difficultyId) ? difficultyId : "";
|
||||
};
|
||||
|
||||
const getNextDifficultyId = (difficultyId, nodes) => {
|
||||
const currentLevel = getDifficultyLevel(difficultyId);
|
||||
return (
|
||||
nodes.find((node) => node.level === currentLevel + 1)?.id || difficultyId
|
||||
);
|
||||
};
|
||||
|
||||
// 统一解析当前最新已解锁难度：
|
||||
// completedDifficultyId 优先级最高，可在完成当前难度后自动推进到下一关。
|
||||
const resolveUnlockedDifficultyId = (options, config, nodes) => {
|
||||
const completedDifficultyId = findValidDifficultyId(
|
||||
options.completedDifficultyId,
|
||||
nodes
|
||||
);
|
||||
|
||||
if (completedDifficultyId) {
|
||||
return getNextDifficultyId(completedDifficultyId, nodes);
|
||||
}
|
||||
|
||||
return (
|
||||
[
|
||||
options.currentDifficultyId,
|
||||
options.latestDifficultyId,
|
||||
options.activeDifficultyId,
|
||||
config.activeDifficultyId,
|
||||
defaultUnlockedDifficultyId,
|
||||
].find((difficultyId) => findValidDifficultyId(difficultyId, nodes)) ||
|
||||
nodes[0]?.id ||
|
||||
defaultUnlockedDifficultyId
|
||||
);
|
||||
};
|
||||
|
||||
// 如果传入的默认选中项尚未解锁，则自动回退到当前最新已解锁难度。
|
||||
const resolveSelectedDifficultyId = (difficultyId, nodes, currentUnlockedId) => {
|
||||
const safeDifficultyId = findValidDifficultyId(difficultyId, nodes);
|
||||
|
||||
if (!safeDifficultyId) {
|
||||
return currentUnlockedId;
|
||||
}
|
||||
|
||||
return getDifficultyLevel(safeDifficultyId) <=
|
||||
getDifficultyLevel(currentUnlockedId)
|
||||
? safeDifficultyId
|
||||
: currentUnlockedId;
|
||||
};
|
||||
|
||||
// 页面渲染使用的难度节点列表，包含纵向轨道坐标。
|
||||
const difficultyNodes = computed(() => {
|
||||
const nodes = createDifficultyNodes(pageConfig.value);
|
||||
const leftPositions = nodes.map((_, index) => {
|
||||
return nodesLayout.horizontalPatternRpx[
|
||||
index % nodesLayout.horizontalPatternRpx.length
|
||||
];
|
||||
});
|
||||
const offsetsFromBottom = [];
|
||||
let accumulatedOffsetRpx = 0;
|
||||
|
||||
nodes.forEach((node, index) => {
|
||||
if (index > 0) {
|
||||
const previousLeftRpx = leftPositions[index - 1];
|
||||
const currentLeftRpx = leftPositions[index];
|
||||
const horizontalDistanceRpx = Math.abs(currentLeftRpx - previousLeftRpx);
|
||||
const extraGapRpx =
|
||||
Math.max(
|
||||
0,
|
||||
nodesLayout.nearHorizontalDistanceRpx - horizontalDistanceRpx
|
||||
) * nodesLayout.extraGapScale;
|
||||
|
||||
accumulatedOffsetRpx +=
|
||||
nodesLayout.verticalGapRpx + Math.round(extraGapRpx);
|
||||
}
|
||||
|
||||
offsetsFromBottom.push(accumulatedOffsetRpx);
|
||||
});
|
||||
|
||||
const contentHeightRpx = Math.max(
|
||||
nodesLayout.viewportHeightRpx,
|
||||
nodesLayout.topPaddingRpx +
|
||||
nodesLayout.bottomPaddingRpx +
|
||||
(offsetsFromBottom[offsetsFromBottom.length - 1] || 0)
|
||||
);
|
||||
|
||||
return nodes.map((node, index) => {
|
||||
const leftRpx = leftPositions[index];
|
||||
const topRpx =
|
||||
contentHeightRpx -
|
||||
nodesLayout.bottomPaddingRpx -
|
||||
offsetsFromBottom[index];
|
||||
|
||||
return {
|
||||
...node,
|
||||
leftRpx,
|
||||
topRpx,
|
||||
style: {
|
||||
left: `${leftRpx}rpx`,
|
||||
top: `${topRpx}rpx`,
|
||||
},
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const difficultyConnectors = computed(() => {
|
||||
const nodes = difficultyNodes.value;
|
||||
|
||||
return nodes.slice(1).map((currentNode, index) => {
|
||||
const previousNode = nodes[index];
|
||||
const startX = Number(previousNode?.leftRpx || 0);
|
||||
const startY = Number(previousNode?.topRpx || 0);
|
||||
const endX = Number(currentNode?.leftRpx || 0);
|
||||
const endY = Number(currentNode?.topRpx || 0);
|
||||
const midX = (startX + endX) / 2;
|
||||
const midY = (startY + endY) / 2;
|
||||
const angle =
|
||||
(Math.atan2(endY - startY, endX - startX) * 180) / Math.PI + 90;
|
||||
|
||||
return {
|
||||
id: `${previousNode.id}-${currentNode.id}`,
|
||||
left: `${midX}rpx`,
|
||||
top: `${midY}rpx`,
|
||||
transform: `translate(-50%, -50%) rotate(${angle}deg)`,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const nodesTrackHeightRpx = computed(() => {
|
||||
const bottomNode = difficultyNodes.value[0];
|
||||
|
||||
if (!bottomNode) {
|
||||
return nodesLayout.viewportHeightRpx;
|
||||
}
|
||||
|
||||
return Math.max(
|
||||
nodesLayout.viewportHeightRpx,
|
||||
bottomNode.topRpx + nodesLayout.bottomPaddingRpx
|
||||
);
|
||||
});
|
||||
|
||||
const nodesTrackStyle = computed(() => {
|
||||
return {
|
||||
height: `${nodesTrackHeightRpx.value}rpx`,
|
||||
};
|
||||
});
|
||||
|
||||
const selectedDifficulty = computed(() => {
|
||||
return (
|
||||
difficultyNodes.value.find((node) => node.id === selectedDifficultyId.value) ||
|
||||
difficultyNodes.value[0] ||
|
||||
emptyDifficulty
|
||||
);
|
||||
});
|
||||
|
||||
// 优先显示配置中的难度进度；没有配置时，再按已解锁等级推导完成态。
|
||||
const getCompletedDifficultyProgress = (node) => {
|
||||
const configuredProgress = Number(difficultyProgressMap.value[node?.id]);
|
||||
|
||||
if (Number.isFinite(configuredProgress) && configuredProgress > 0) {
|
||||
return configuredProgress;
|
||||
}
|
||||
|
||||
return getDifficultyLevel(node?.id) < getDifficultyLevel(unlockedDifficultyId.value)
|
||||
? 100
|
||||
: 0;
|
||||
};
|
||||
|
||||
const checkDifficultyLocked = (node) => {
|
||||
return getDifficultyLevel(node?.id) > getDifficultyLevel(unlockedDifficultyId.value);
|
||||
};
|
||||
|
||||
// 根据目标难度计算 scroll-view 应滚动到的位置，顶部/底部会自动吸附边界。
|
||||
const scrollToDifficulty = (difficultyId, animated = false) => {
|
||||
const node = difficultyNodes.value.find((item) => item.id === difficultyId);
|
||||
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
|
||||
const maxScrollRpx = Math.max(
|
||||
nodesTrackHeightRpx.value - nodesLayout.viewportHeightRpx,
|
||||
0
|
||||
);
|
||||
const targetScrollRpx = clamp(
|
||||
node.topRpx - nodesLayout.anchorOffsetRpx,
|
||||
0,
|
||||
maxScrollRpx
|
||||
);
|
||||
|
||||
nodesScrollWithAnimation.value = animated;
|
||||
nodesScrollTop.value = uni.upx2px(targetScrollRpx);
|
||||
};
|
||||
|
||||
// 首次进入页面需要静默定位到默认难度；
|
||||
// 定位完成后再开启滚动动画，避免第一次手动切换时丢失过渡效果。
|
||||
const initScrollPosition = () => {
|
||||
scrollToDifficulty(selectedDifficultyId.value, false);
|
||||
|
||||
nextTick(() => {
|
||||
nodesScrollWithAnimation.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
const initPageState = (options = {}) => {
|
||||
const config = getTrainingDifficultyModeConfig(options.mode);
|
||||
const nodes = createDifficultyNodes(config);
|
||||
const currentUnlockedId = resolveUnlockedDifficultyId(options, config, nodes);
|
||||
|
||||
modeKey.value = config.key;
|
||||
unlockedDifficultyId.value = currentUnlockedId;
|
||||
selectedDifficultyId.value = resolveSelectedDifficultyId(
|
||||
options.difficultyId,
|
||||
nodes,
|
||||
currentUnlockedId
|
||||
);
|
||||
|
||||
nextTick(() => {
|
||||
initScrollPosition();
|
||||
});
|
||||
};
|
||||
|
||||
const saveTrainingContext = () => {
|
||||
const difficulty = selectedDifficulty.value;
|
||||
|
||||
if (!difficulty.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
uni.setStorageSync(trainingDifficultyStorageKey, {
|
||||
trainingType: pageConfig.value.key,
|
||||
trainingTitle: pageConfig.value.title,
|
||||
difficultyId: difficulty.id,
|
||||
difficultyLabel: difficulty.label,
|
||||
targetPaperType: difficulty.targetPaperType,
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelectDifficulty = (node) => {
|
||||
if (!node?.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (checkDifficultyLocked(node)) {
|
||||
uni.showToast({
|
||||
title: "难度尚未解锁",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.id === selectedDifficultyId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
selectedDifficultyId.value = node.id;
|
||||
nextTick(() => {
|
||||
scrollToDifficulty(node.id, true);
|
||||
});
|
||||
};
|
||||
|
||||
const handleStart = () => {
|
||||
if (!selectedDifficulty.value.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
saveTrainingContext();
|
||||
uni.showToast({
|
||||
title: `${selectedDifficulty.value.title} 即将开始`,
|
||||
icon: "none",
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
onLoad((options = {}) => {
|
||||
initPageState(options);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Container
|
||||
:title="pageConfig.title"
|
||||
:bgType="8"
|
||||
bgColor="#1c1c23"
|
||||
:scroll="false"
|
||||
>
|
||||
<view class="difficulty-page">
|
||||
<view class="difficulty-page__nodes">
|
||||
<scroll-view
|
||||
class="difficulty-page__nodes-scroll"
|
||||
scroll-y
|
||||
enhanced
|
||||
:scroll-top="nodesScrollTop"
|
||||
:scroll-with-animation="nodesScrollWithAnimation"
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<view class="difficulty-page__nodes-track" :style="nodesTrackStyle">
|
||||
<image
|
||||
v-for="connector in difficultyConnectors"
|
||||
:key="connector.id"
|
||||
class="difficulty-page__connector"
|
||||
src="../../static/training-difficulty-design/jiantou.png"
|
||||
mode="aspectFit"
|
||||
:style="connector"
|
||||
/>
|
||||
<TrainingDifficultyBadge
|
||||
v-for="node in difficultyNodes"
|
||||
:key="node.id"
|
||||
:node="node"
|
||||
:active="node.id === selectedDifficultyId"
|
||||
:locked="checkDifficultyLocked(node)"
|
||||
:completedProgress="getCompletedDifficultyProgress(node)"
|
||||
@click="handleSelectDifficulty"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="difficulty-page__preview">
|
||||
<TrainingDifficultyPreviewCard
|
||||
:title="selectedDifficulty.title"
|
||||
:lines="selectedDifficulty.summary"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="difficulty-page__start">
|
||||
<TrainingDifficultyStartButton
|
||||
:text="selectedDifficulty.startText"
|
||||
@click="handleStart"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.difficulty-page {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 18rpx 0 40rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.difficulty-page__nodes {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
z-index: 2;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.difficulty-page__nodes-scroll {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.difficulty-page__nodes-track {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.difficulty-page__connector {
|
||||
position: absolute;
|
||||
width: 18rpx;
|
||||
height: 28rpx;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.difficulty-page__preview {
|
||||
position: relative;
|
||||
flex: none;
|
||||
z-index: 3;
|
||||
width: 540rpx;
|
||||
height: 172rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.difficulty-page__start {
|
||||
position: relative;
|
||||
flex: none;
|
||||
z-index: 4;
|
||||
width: 302rpx;
|
||||
height: 190rpx;
|
||||
margin: 0 auto;
|
||||
top: -16rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user