laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: laoma:feat-prac
Branches Tags
laoma:main laoma:ota-mode laoma:test laoma:feat-prac laoma:new-race-mode laoma:prod laoma:select-target laoma:development laoma:new-home laoma:ios-ui laoma:feature-points-book laoma:feature-xvx
..
compare: laoma:test
Branches Tags
laoma:ota-mode laoma:test laoma:feat-prac laoma:main laoma:new-race-mode laoma:prod laoma:select-target laoma:development laoma:new-home laoma:ios-ui laoma:feature-points-book laoma:feature-xvx

1 Commits
feat-prac ... test

Author SHA1 Message Date
zhangyi
0d5866b82a update:更换靶纸，新增X环标识 2026-06-02 15:51:41 +08:00
69 changed files with 13 additions and 5991 deletions
Expand all files Collapse all files

1
AGENTS.md
View File

@@ -264,7 +264,6 @@ AI 应主动：
* 少解释 * 少解释
* 优先 patch * 优先 patch
* 优先 diff * 优先 diff
* 写好中文注释
除非用户明确要求： 除非用户明确要求：
否则不要输出完整项目。 否则不要输出完整项目。

9
src/apis.js
View File

@@ -410,15 +410,6 @@ export const getPractiseDataAPI = async () => {
return request("GET", "/user/practice/statistics"); return request("GET", "/user/practice/statistics");
}; };
export const getPersonalTrainingAPI = async () => {
return request("GET", "/personal/training");
};
export const getTrainingDifficultyListAPI = async (type) => {
const query = type ? `?type=${encodeURIComponent(type)}` : "";
return request("GET", `/training/difficulty/list${query}`);
};
export const getBattleDataAPI = async () => { export const getBattleDataAPI = async () => {
return request("GET", "/user/fight/statistics"); return request("GET", "/user/fight/statistics");
}; };

24
src/components/AppBackground.vue
View File

@@ -57,30 +57,6 @@ const props = defineProps({
src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png" src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png"
mode="widthFix" mode="widthFix"
/> />
<image
class="bg-image"
v-if="type === 7"
src="@/static/app-bg6.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 8"
src="@/static/app-bg7.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 9"
src="@/static/app-bg8.png"
mode="widthFix"
/>
<image
class="bg-image"
v-if="type === 10"
src="@/static/app-bg9.png"
mode="widthFix"
/>
<view class="bg-overlay" v-if="type === 0"></view> <view class="bg-overlay" v-if="type === 0"></view>
</view> </view>
</template> </template>

37
src/components/Avatar.vue
View File

@@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, ref, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import useStore from "@/store"; import useStore from "@/store";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
const store = useStore(); const store = useStore();
@@ -26,33 +26,12 @@ const props = defineProps({
type: Number, type: Number,
default: 45, default: 45,
}, },
sizeUnit: {
type: String,
default: "px",
},
imageMode: {
type: String,
default: "widthFix",
},
borderColor: { borderColor: {
type: String, type: String,
default: "", default: "",
}, },
}); });
const avatarFrame = ref(""); const avatarFrame = ref("");
const sizeValue = computed(() => `${Number(props.size)}${props.sizeUnit}`);
const frameSizeValue = computed(() => `${Number(props.size) + 10}${props.sizeUnit}`);
const avatarImageStyle = computed(() => ({
width: sizeValue.value,
height: sizeValue.value,
minHeight: sizeValue.value,
borderColor: props.borderColor || "#fff",
}));
const avatarFrameStyle = computed(() => ({
width: frameSizeValue.value,
height: frameSizeValue.value,
}));
watch( watch(
() => [config.value, props.rankLvl], () => [config.value, props.rankLvl],
() => { () => {
@@ -72,7 +51,10 @@ watch(
v-if="avatarFrame" v-if="avatarFrame"
:src="avatarFrame" :src="avatarFrame"
mode="widthFix" mode="widthFix"
:style="avatarFrameStyle" :style="{
width: Number(size) + 10 + 'px',
height: Number(size) + 10 + 'px',
}"
class="avatar-frame" class="avatar-frame"
/> />
<image <image
@@ -96,8 +78,13 @@ watch(
<view v-if="rank > 3" class="rank-view">{{ rank }}</view> <view v-if="rank > 3" class="rank-view">{{ rank }}</view>
<image <image
:src="src || '../static/user-icon.png'" :src="src || '../static/user-icon.png'"
:mode="imageMode" mode="widthFix"
:style="avatarImageStyle" :style="{
width: size + 'px',
height: size + 'px',
minHeight: size + 'px',
borderColor: borderColor || '#fff',
}"
class="avatar-image" class="avatar-image"
/> />
</view> </view>

5
src/components/Container.vue
View File

@@ -41,10 +41,6 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: true, default: true,
}, },
headerClass: {
type: String,
default: "",
},
showBottom: { showBottom: {
type: Boolean, type: Boolean,
default: true, default: true,
@@ -156,7 +152,6 @@ const goCalibration = async () => {
<AppBackground :type="bgType" :bgColor="bgColor" /> <AppBackground :type="bgType" :bgColor="bgColor" />
<Header <Header
v-if="!isHome" v-if="!isHome"
:class="headerClass"
:title="title" :title="title"
:onBack="onBack" :onBack="onBack"
:whiteBackArrow="whiteBackArrow" :whiteBackArrow="whiteBackArrow"

535
src/components/TargetCanvas.vue
View File

@@ -1,535 +0,0 @@
<script setup>
import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";
const defaultCanvasSize = 300;
const defaultRingCount = 10;
const props = defineProps({
// canvas 唯一标识；不传时组件内部自动生成，避免多个靶面 canvas-id 冲突。
canvasId: {
type: String,
default: "",
},
// 业务坐标半径，例如 20 表示命中点坐标范围为 -20 到 20。
// 当前组件主要用它参与重绘判断，外层命中点定位也应使用同一半径。
coordinateRadius: {
type: Number,
default: 20,
},
// 是否显示靶心十字辅助线。
showCrosshair: {
type: Boolean,
default: false,
},
// 是否显示象限文字。
showQuadrantLabels: {
type: Boolean,
default: false,
},
// 是否显示环数文字。
showRingLabels: {
type: Boolean,
default: true,
},
// 象限文字配置，key 为 1/2/3/4。
quadrantLabels: {
type: Object,
default: () => ({
1: "1",
2: "2",
3: "3",
4: "4",
}),
},
// 高亮区域数组。
// quadrant: 1/2/3/4，表示第几个象限。
// rings: "all" 或环数数组，例如 [7, 8, 9, 10]。
// scope: "box" 表示整象限矩形，"sector" 表示环形扇区。
// style: 可覆盖高亮填充色、描边色、线宽比例。
highlightAreas: {
type: Array,
default: () => [],
},
// 只绘制透明高亮层，不绘制完整靶纸；用于叠加在靶纸图片上。
highlightOnly: {
type: Boolean,
default: false,
},
// 外部指定 canvas 绘制尺寸；用于让高亮层跟随靶图真实显示区域。
canvasWidth: {
type: Number,
default: 0,
},
canvasHeight: {
type: Number,
default: 0,
},
// 靶纸样式覆盖配置，例如环数、环色、环线颜色、环数字体等。
targetStyleConfig: {
type: Object,
default: () => ({}),
},
// 十字辅助线样式覆盖配置。
crosshairStyle: {
type: Object,
default: () => ({}),
},
// 象限文字样式覆盖配置。
quadrantLabelStyle: {
type: Object,
default: () => ({}),
},
});
const instance = getCurrentInstance();
const localCanvasId = `target-canvas-${Math.random().toString(36).slice(2, 10)}`;
const currentCanvasId = computed(() => props.canvasId || localCanvasId);
const lastDrawKey = ref("");
const canvasSize = ref({
width: defaultCanvasSize,
height: defaultCanvasSize,
});
// 完整靶纸默认样式，调用方可以通过 targetStyleConfig 局部覆盖。
const defaultTargetStyleConfig = {
ringCount: defaultRingCount,
ringColors: {
1: "#f8f8f3",
2: "#f8f8f3",
3: "#595959",
4: "#595959",
5: "#24aee0",
6: "#24aee0",
7: "#ff1f35",
8: "#ff1f35",
9: "#f7d34a",
10: "#f7d34a",
},
ringLineColor: "rgba(150, 150, 150, 0.55)",
ringLineWidthRatio: 0.0022,
centerDotColor: "#ffffff",
centerDotRadiusRatio: 0.0048,
ringLabelFontRatio: 0.032,
ringLabelDarkColor: "#111111",
ringLabelLightColor: "#ffffff",
};
// 十字辅助线默认样式。
const defaultCrosshairStyle = {
color: "rgba(20, 20, 20, 0.38)",
lineWidthRatio: 0.0025,
};
// 象限文字默认样式。
const defaultQuadrantLabelStyle = {
color: "#ffffff",
fontSizeRatio: 0.045,
offsetRatio: 0.78,
};
// 高亮区域默认样式。
const defaultHighlightStyle = {
color: "rgba(254, 216, 71, 0.34)",
strokeColor: "rgba(254, 216, 71, 0.82)",
lineWidthRatio: 0.003,
};
// 合并默认靶纸样式和外部传入样式，ringColors 单独深合并。
const mergeTargetStyleConfig = () => ({
...defaultTargetStyleConfig,
...props.targetStyleConfig,
ringColors: {
...defaultTargetStyleConfig.ringColors,
...(props.targetStyleConfig?.ringColors || {}),
},
});
// 统一把外部传入值转成有效数字，非法值使用 fallback。
const getNumber = (value, fallback = 0) => {
const numberValue = Number(value);
return Number.isFinite(numberValue) ? numberValue : fallback;
};
// 获取指定环数的填充色，兼容数字 key 和字符串 key。
const getRingColor = (ring, config) => {
return config.ringColors?.[ring] || config.ringColors?.[String(ring)] || "#ffffff";
};
// 规范化高亮环数配置；"all" 表示全部环，数组或单值会过滤非法环数。
const normalizeRings = (rings, ringCount) => {
if (rings === "all") {
return "all";
}
const rawRings = Array.isArray(rings) ? rings : [rings];
return rawRings
.map((ring) => Number(ring))
.filter((ring) => Number.isInteger(ring) && ring >= 1 && ring <= ringCount);
};
// 获取象限对应的扇形弧度范围。
const getQuadrantAngles = (quadrant) => {
const angleMap = {
1: [Math.PI, Math.PI * 1.5],
2: [Math.PI * 1.5, Math.PI * 2],
3: [Math.PI * 0.5, Math.PI],
4: [0, Math.PI * 0.5],
};
return angleMap[Number(quadrant)] || null;
};
// 获取象限对应的矩形区域，用于整象限高亮。
const getQuadrantBox = (quadrant, centerX, centerY, radius) => {
const boxMap = {
1: [centerX - radius, centerY - radius, radius, radius],
2: [centerX, centerY - radius, radius, radius],
3: [centerX - radius, centerY, radius, radius],
4: [centerX, centerY, radius, radius],
};
return boxMap[Number(quadrant)] || null;
};
// 绘制实心圆，靶纸环区和中心点都会用到。
const drawCircle = (ctx, centerX, centerY, radius, fillColor) => {
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.setFillStyle(fillColor);
ctx.fill();
};
// 绘制环形扇区，用于按象限高亮指定环数。
const drawAnnularSector = (
ctx,
centerX,
centerY,
innerRadius,
outerRadius,
startAngle,
endAngle,
fillColor,
strokeColor = "",
lineWidth = 0
) => {
ctx.beginPath();
ctx.arc(centerX, centerY, outerRadius, startAngle, endAngle);
if (innerRadius > 0) {
ctx.arc(centerX, centerY, innerRadius, endAngle, startAngle, true);
} else {
ctx.lineTo(centerX, centerY);
}
ctx.closePath();
ctx.setFillStyle(fillColor);
ctx.fill();
if (strokeColor && lineWidth > 0) {
ctx.setStrokeStyle(strokeColor);
ctx.setLineWidth(lineWidth);
ctx.stroke();
}
};
// 从外到内绘制完整靶纸色环。
const drawTargetRings = (ctx, centerX, centerY, targetRadius, config) => {
for (let ring = 1; ring <= config.ringCount; ring += 1) {
const radius = targetRadius * ((config.ringCount + 1 - ring) / config.ringCount);
drawCircle(ctx, centerX, centerY, radius, getRingColor(ring, config));
}
};
// 绘制所有高亮区域，支持整象限矩形高亮和指定环数扇区高亮。
const drawHighlights = (ctx, centerX, centerY, targetRadius, config) => {
props.highlightAreas.forEach((area = {}) => {
const angles = getQuadrantAngles(area.quadrant);
if (!angles) {
return;
}
const highlightStyle = {
...defaultHighlightStyle,
...(area.style || {}),
};
const highlightLineWidth = Math.max(1, targetRadius * highlightStyle.lineWidthRatio);
const rings = normalizeRings(area.rings || "all", config.ringCount);
const scope = area.scope || (rings === "all" ? "box" : "sector");
// 整象限默认画成矩形高亮，便于对应 1/2/3/4 号框训练提示。
if (rings === "all" && scope === "box") {
const box = getQuadrantBox(area.quadrant, centerX, centerY, targetRadius);
if (!box) return;
ctx.beginPath();
ctx.rect(...box);
ctx.setFillStyle(highlightStyle.color);
ctx.fill();
ctx.setStrokeStyle(highlightStyle.strokeColor);
ctx.setLineWidth(highlightLineWidth);
ctx.stroke();
return;
}
const targetRings = rings === "all"
? Array.from({ length: config.ringCount }, (_, index) => index + 1)
: rings;
targetRings.forEach((ring) => {
const innerRadius = targetRadius * ((config.ringCount - ring) / config.ringCount);
const outerRadius = targetRadius * ((config.ringCount + 1 - ring) / config.ringCount);
drawAnnularSector(
ctx,
centerX,
centerY,
innerRadius,
outerRadius,
angles[0],
angles[1],
highlightStyle.color,
highlightStyle.strokeColor,
highlightLineWidth
);
});
});
};
// 绘制各环之间的分割线。
const drawRingLines = (ctx, centerX, centerY, targetRadius, config) => {
const lineWidth = Math.max(1, targetRadius * config.ringLineWidthRatio);
ctx.setStrokeStyle(config.ringLineColor);
ctx.setLineWidth(lineWidth);
for (let index = 1; index <= config.ringCount; index += 1) {
const radius = targetRadius * (index / config.ringCount);
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.stroke();
}
};
// 绘制靶心十字辅助线。
const drawCrosshair = (ctx, centerX, centerY, targetRadius) => {
if (!props.showCrosshair) {
return;
}
const style = {
...defaultCrosshairStyle,
...props.crosshairStyle,
};
ctx.beginPath();
ctx.moveTo(centerX - targetRadius, centerY);
ctx.lineTo(centerX + targetRadius, centerY);
ctx.moveTo(centerX, centerY - targetRadius);
ctx.lineTo(centerX, centerY + targetRadius);
ctx.setStrokeStyle(style.color);
ctx.setLineWidth(Math.max(1, targetRadius * style.lineWidthRatio));
ctx.stroke();
};
// 绘制环数文字。
const drawRingLabels = (ctx, centerX, centerY, targetRadius, config) => {
if (!props.showRingLabels) {
return;
}
const ringWidth = targetRadius / config.ringCount;
const fontSize = Math.max(10, targetRadius * config.ringLabelFontRatio);
ctx.setFontSize(fontSize);
ctx.setTextAlign("center");
ctx.setTextBaseline("middle");
for (let ring = config.ringCount; ring >= 1; ring -= 1) {
const y = centerY + (config.ringCount - ring + 0.45) * ringWidth;
const color = ring <= 2 ? config.ringLabelDarkColor : config.ringLabelLightColor;
ctx.setFillStyle(color);
ctx.fillText(String(ring), centerX, y);
}
};
// 绘制象限文字。
const drawQuadrantLabels = (ctx, centerX, centerY, targetRadius) => {
if (!props.showQuadrantLabels) {
return;
}
const style = {
...defaultQuadrantLabelStyle,
...props.quadrantLabelStyle,
};
const offset = targetRadius * style.offsetRatio;
const positions = {
1: [centerX - offset, centerY - offset],
2: [centerX + offset, centerY - offset],
3: [centerX - offset, centerY + offset],
4: [centerX + offset, centerY + offset],
};
ctx.setFontSize(Math.max(12, targetRadius * style.fontSizeRatio));
ctx.setTextAlign("center");
ctx.setTextBaseline("middle");
ctx.setFillStyle(style.color);
Object.entries(positions).forEach(([key, position]) => {
const label = props.quadrantLabels?.[key] || props.quadrantLabels?.[Number(key)];
if (label === undefined || label === null || label === "") return;
ctx.fillText(String(label), position[0], position[1]);
});
};
// 生成高亮区域的绘制 key，只保留真正影响画面的字段。
const getHighlightDrawKeyAreas = () => {
return props.highlightAreas.map((area = {}) => ({
quadrant: area.quadrant,
rings: area.rings,
scope: area.scope,
style: area.style,
}));
};
// 生成本次绘制状态的唯一 key，用于避免相同内容重复 draw。
const getDrawKey = (width, height) => {
return JSON.stringify({
width,
height,
coordinateRadius: props.coordinateRadius,
showCrosshair: props.showCrosshair,
showQuadrantLabels: props.showQuadrantLabels,
showRingLabels: props.showRingLabels,
highlightAreas: getHighlightDrawKeyAreas(),
targetStyleConfig: props.targetStyleConfig,
crosshairStyle: props.crosshairStyle,
quadrantLabelStyle: props.quadrantLabelStyle,
highlightOnly: props.highlightOnly,
});
};
// 主绘制入口：根据 highlightOnly 决定画完整靶纸，还是只画透明高亮层。
const drawTarget = () => {
const width = Math.max(getNumber(canvasSize.value.width, defaultCanvasSize), 1);
const height = Math.max(getNumber(canvasSize.value.height, defaultCanvasSize), 1);
const drawKey = getDrawKey(width, height);
if (drawKey === lastDrawKey.value) {
return;
}
const size = Math.min(width, height);
const centerX = width / 2;
const centerY = height / 2;
const targetRadius = size / 2;
const config = mergeTargetStyleConfig();
const ctx = uni.createCanvasContext(currentCanvasId.value, instance?.proxy);
ctx.clearRect(0, 0, width, height);
if (!props.highlightOnly) {
drawTargetRings(ctx, centerX, centerY, targetRadius, config);
}
drawHighlights(ctx, centerX, centerY, targetRadius, config);
if (!props.highlightOnly) {
drawRingLines(ctx, centerX, centerY, targetRadius, config);
drawCircle(
ctx,
centerX,
centerY,
Math.max(1, targetRadius * config.centerDotRadiusRatio),
config.centerDotColor
);
drawCrosshair(ctx, centerX, centerY, targetRadius);
drawRingLabels(ctx, centerX, centerY, targetRadius, config);
drawQuadrantLabels(ctx, centerX, centerY, targetRadius);
}
ctx.draw();
lastDrawKey.value = drawKey;
};
const setCanvasSizeAndDraw = async (width, height) => {
canvasSize.value = {
width: width > 0 ? width : defaultCanvasSize,
height: height > 0 ? height : width || defaultCanvasSize,
};
await nextTick();
drawTarget();
};
// 读取 canvas 实际渲染尺寸后再绘制，保证小程序真机尺寸和坐标一致。
const measureAndDraw = () => {
const propWidth = Math.round(getNumber(props.canvasWidth, 0));
const propHeight = Math.round(getNumber(props.canvasHeight, 0));
if (propWidth > 0 && propHeight > 0) {
setCanvasSizeAndDraw(propWidth, propHeight);
return;
}
const query = uni.createSelectorQuery().in(instance?.proxy);
query
.select(`#${currentCanvasId.value}`)
.boundingClientRect(async (rect) => {
const width = Math.round(getNumber(rect?.width, defaultCanvasSize));
const height = Math.round(getNumber(rect?.height, width || defaultCanvasSize));
await setCanvasSizeAndDraw(width, height);
})
.exec();
};
// 等待 Vue 完成 DOM 更新后重新测量和绘制。
const scheduleDraw = async () => {
await nextTick();
measureAndDraw();
};
watch(
() => [
props.coordinateRadius,
props.showCrosshair,
props.showQuadrantLabels,
props.showRingLabels,
props.highlightAreas,
props.highlightOnly,
props.canvasWidth,
props.canvasHeight,
props.quadrantLabels,
props.targetStyleConfig,
props.crosshairStyle,
props.quadrantLabelStyle,
],
scheduleDraw,
{
deep: true,
}
);
onMounted(() => {
setTimeout(measureAndDraw, 30);
});
</script>
<template>
<canvas
:id="currentCanvasId"
class="target-canvas"
:canvas-id="currentCanvasId"
:width="canvasSize.width"
:height="canvasSize.height"
/>
</template>
<style scoped>
.target-canvas {
display: block;
width: 100%;
height: 100%;
}
</style>

104
src/mock/index.js
View File

@@ -1,104 +0,0 @@
// 首页一周打卡展示数据，直接对应顶部 7 个日期卡片。
export const trainingHomeWeekSchedule = [
{
key: "mon",
label: "周一",
status: "done",
icon: "../../static/training-home/done.png",
},
{
key: "tue",
label: "周二",
status: "done",
icon: "../../static/training-home/done.png",
},
{
key: "wed",
label: "周三",
status: "missed",
icon: "../../static/training-home/missed.png",
},
{
key: "thu",
label: "周四",
status: "missed",
icon: "../../static/training-home/missed.png",
},
{
key: "fri",
label: "周五",
status: "done",
icon: "../../static/training-home/done.png",
},
{
key: "sat",
label: "周六",
status: "done",
icon: "../../static/training-home/done.png",
},
{
key: "sun",
label: "周日",
status: "missed",
icon: "../../static/training-home/missed.png",
},
];
// 首页统计卡数据，按设计稿从左到右展示。
export const trainingHomeStats = [
{ key: "days", value: "12", unit: "天", label: "共训练" },
{ key: "shots", value: "112", unit: "支", label: "累计射箭" },
{ key: "hitRate", value: "30", unit: "%", label: "命中率" },
{ key: "endurance", value: "6", unit: "支/分钟", label: "耐力射击" },
{ key: "calories", value: "31W", unit: "卡路里", label: "共消耗" },
];
// 雷达图区文案与数值配置。
export const trainingHomeRadar = {
labels: ["基础", "精准", "力量", "节奏", "耐力"],
values: [5.5, 6.3, 10, 4.5, 6],
maxValue: 10,
surpassValue: '80%'
};
// 首页主推荐训练卡数据。
export const trainingHomeFeatured = {
title: "基础训练",
progressText: "当前进度 LV7 >",
};
// 首页四个训练入口卡片数据。
export const trainingHomeModes = [
{
key: "endurance",
title: "耐力训练",
progressText: "当前进度 LV5 >",
icon: "../../static/training-home/img_3.png",
recommended: true,
disabled: false,
},
{
key: "precision",
title: "精准训练",
progressText: "当前进度 LV3 >",
icon: "../../static/training-home/img_4.png",
recommended: false,
disabled: false,
},
{
key: "rhythm",
title: "节奏训练",
progressText: "当前进度 LV6 >",
icon: "../../static/training-home/img_5.png",
recommended: false,
disabled: false,
},
{
key: "power",
title: "力量训练",
progressText: "Coming! LV10",
icon: "../../static/training-home/img_6.png",
recommended: false,
disabled: true,
},
];

113
src/mock/trainingDifficulty.js
View File

@@ -1,113 +0,0 @@
// 难度页当前用于保存“开始训练前上下文”的本地存储 key。
export const trainingDifficultyStorageKey = "training-selection";
// 当前是页面联调用的模拟数据：
// 1. 总难度 20 级
// 2. 已解锁到 Lv3
// 3. 前三关展示不同完成进度
const totalDifficultyLevel = 20;
const mockedUnlockedDifficultyId = "lv3";
const mockedDifficultyProgressMap = {
lv1: 100,
lv2: 90,
lv3: 70,
};
const modeList = [
{
key: "endurance",
title: "耐力训练",
},
{
key: "precision",
title: "精准训练",
},
{
key: "rhythm",
title: "节奏训练",
},
{
key: "basic",
title: "基础训练",
},
{
key: "power",
title: "力量训练",
},
{
key: "focus",
title: "专注训练",
},
];
const createDifficultyId = (level) => `lv${level}`;
const createDifficultyLabel = (level) => `Lv${level}`;
// 根据等级生成模拟文案，方便一次性扩展到更多关卡。
const createDifficultySummary = (level) => {
return [
`箭靶划分为${Math.min(1 + Math.floor((level - 1) / 5), 4)}个区域`,
`需${4 + level}次命中目标`,
`${100 + Math.floor((level - 1) / 2) * 10}秒内完成所有射击`,
"需使用20CM全环靶",
];
};
// 难度页的节点位置已经在页面内统一计算，
// 这里保留最核心的 id / label 即可，不再维护无效的 left / top / style 字段。
const createDifficultyNode = (level) => {
return {
id: createDifficultyId(level),
label: createDifficultyLabel(level),
};
};
const createDifficultyDetail = (level) => {
const id = createDifficultyId(level);
const label = createDifficultyLabel(level);
return {
id,
label,
title: `${label}难度`,
summary: createDifficultySummary(level),
startText: "开始",
targetPaperType: "20CM全环靶",
};
};
// 所有训练模式当前共用同一套难度定义。
const sharedDifficultyNodes = Array.from(
{ length: totalDifficultyLevel },
(_, index) => createDifficultyNode(index + 1)
);
const sharedDifficultyDetails = Object.fromEntries(
Array.from({ length: totalDifficultyLevel }, (_, index) => {
const detail = createDifficultyDetail(index + 1);
return [detail.id, detail];
})
);
const createModeConfig = ({ key, title, reward = null }) => {
return {
key,
title,
nodes: sharedDifficultyNodes,
details: sharedDifficultyDetails,
activeDifficultyId: mockedUnlockedDifficultyId,
progressMap: mockedDifficultyProgressMap,
reward,
};
};
// 难度页数据源入口：
// 页面通过 getTrainingDifficultyModeConfig(modeKey) 获取当前模式完整配置。
export const trainingDifficultyModeMap = Object.fromEntries(
modeList.map((mode) => [mode.key, createModeConfig(mode)])
);
export const getTrainingDifficultyModeConfig = (modeKey) => {
return trainingDifficultyModeMap[modeKey] || trainingDifficultyModeMap.precision;
};

9
src/pages.json
View File

@@ -119,15 +119,6 @@
}, },
{ {
"path": "pages/mine-bow-data" "path": "pages/mine-bow-data"
},
{
"path": "pages/training/difficulty"
},
{
"path": "pages/training/index"
},
{
"path": "pages/training/practise-one"
} }
], ],
"globalStyle": { "globalStyle": {

3
src/pages/index.vue
View File

@@ -197,8 +197,7 @@ onShareTimeline(() => {
</BubbleTip> </BubbleTip>
</view> </view>
<view class="play-card"> <view class="play-card">
<!-- toPage('/pages/practise') --> <view @click="$clickSound(() => toPage('/pages/practise'))">
<view @click="() => toPage('/pages/training/index')">
<image src="../static/my-practise.png" mode="widthFix"/> <image src="../static/my-practise.png" mode="widthFix"/>
</view> </view>
<view @click="$clickSound(() => toPage('/pages/friend-battle'))"> <view @click="$clickSound(() => toPage('/pages/friend-battle'))">

116
src/pages/training/components/BowData.vue
View File

@@ -1,116 +0,0 @@
<script setup>
import AppBackground from "@/components/AppBackground.vue";
import Avatar from "@/components/Avatar.vue";
import BowTarget from "./BowTarget.vue";
import ScorePanel from "./ScorePanel.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const props = defineProps({
show: {
type: Boolean,
default: false,
},
onClose: {
type: Function,
default: () => {},
},
arrows: {
type: Array,
default: () => [],
},
total: {
type: Number,
default: 0,
},
});
</script>
<template>
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
<AppBackground :type="10" />
<view class="header">
<view>
<Avatar :src="user.avatar" :rankLvl="user.rankLvl" :size="45" />
<view>
<text>{{ user.nickName }}</text>
<text>{{ user.lvlName }}</text>
</view>
</view>
<view @click="onClose">
<image src="/static/close-white.png" mode="widthFix" />
</view>
</view>
<view :style="{ width: '100%', marginBottom: '20px' }">
<BowTarget :scores="arrows" />
</view>
<view class="desc">
<text>{{ arrows.length }}</text>
<text>支箭，共</text>
<text>{{ arrows.reduce((a, b) => a + (b.ring || 0), 0) }}</text>
<text>环</text>
</view>
<ScorePanel
:completeEffect="false"
:rowCount="total === 12 ? 6 : 9"
:total="total"
:arrows="arrows"
:margin="total === 12 ? 4 : 1"
:fontSize="total === 12 ? 25 : 22"
/>
</view>
</template>
<style scoped>
.container {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: #232323;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 20px);
padding: 10px;
}
.header > view:first-child {
display: flex;
align-items: center;
margin-left: 10px;
}
.header > view:first-child > view:last-child {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 10px;
color: #fff;
}
.header > view:first-child > view:last-child > text:last-child {
font-size: 10px;
background-color: #5f51ff;
padding: 2px 5px;
border-radius: 10px;
margin-top: 5px;
}
.header > view:last-child > image {
width: 40px;
}
.desc {
color: #fff;
margin-bottom: 40px;
}
.desc > text:nth-child(2),
.desc > text:nth-child(4) {
color: #fed847;
}
</style>

665
src/pages/training/components/BowTarget.vue
View File

@@ -1,665 +0,0 @@
<script setup>
import {
computed,
onBeforeUnmount,
onMounted,
ref,
watch,
} from "vue";
import PointSwitcher from "@/components/PointSwitcher.vue";
import TargetCanvas from "@/components/TargetCanvas.vue";
import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
import { simulShootAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device } = storeToRefs(store);
const props = defineProps({
currentRound: {
type: Number,
default: 0,
},
totalRound: {
type: Number,
default: 0,
},
scores: {
type: Array,
default: () => [],
},
blueScores: {
type: Array,
default: () => [],
},
mode: {
type: String,
default: "solo", // solo 单排，team 双排
},
stop: {
type: Boolean,
default: false,
},
coordinateRadius: {
type: Number,
default: 20,
},
hitRadiusPx: {
type: Number,
default: 2,
},
zoomHitRadiusPx: {
type: Number,
default: 5,
},
showCrosshair: {
type: Boolean,
default: false,
},
showQuadrantLabels: {
type: Boolean,
default: false,
},
quadrantLabels: {
type: Object,
default: () => ({
1: "1",
2: "2",
3: "3",
4: "4",
}),
},
highlightAreas: {
type: Array,
default: () => [],
},
});
const pMode = ref(true);
const latestOne = ref(null);
const bluelatestOne = ref(null);
const prevScores = ref([]);
const prevBlueScores = ref([]);
const timer = ref(null);
const dirTimer = ref(null);
const angle = ref(null);
const circleColor = ref("");
const ROUND_TIP_OFFSET_Y = -32;
const EXPERIENCE_TIP_OFFSET_Y = -68;
const getNumber = (value, fallback = 0) => {
const numberValue = Number(value);
return Number.isFinite(numberValue) ? numberValue : fallback;
};
const safeTargetRadius = computed(() => {
return Math.max(getNumber(props.coordinateRadius, 20), 1);
});
const currentHitRadiusPx = computed(() => {
const radius = Number(
pMode.value ? props.zoomHitRadiusPx : props.hitRadiusPx
);
return Number.isFinite(radius) && radius >= 0 ? radius : 0;
});
function getShotPoint(shot, fallbackCenter = false) {
const x = Number(shot?.x);
const y = Number(shot?.y);
if (Number.isFinite(x) && Number.isFinite(y)) return { x, y };
return fallbackCenter ? { x: 0, y: 0 } : null;
}
function getPointDirection(point) {
if (!point) return null;
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
if (distance === 0) return null;
return {
x: point.x / distance,
y: point.y / distance,
};
}
function formatPxOffset(value) {
if (!value) return "";
const operator = value > 0 ? "+" : "-";
return ` ${operator} ${Math.abs(value)}px`;
}
function formatTargetPosition(percent, offset) {
const pxOffset = formatPxOffset(offset);
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
}
function getTargetPositionStyle(point, offsetPx = 0, extraOffset = {}) {
if (!point) return { display: "none" };
const radius = safeTargetRadius.value;
const diameter = radius * 2;
const direction = getPointDirection(point);
const xOffset = (direction ? direction.x * offsetPx : 0) + (extraOffset.x || 0);
const yOffset = (direction ? -direction.y * offsetPx : 0) + (extraOffset.y || 0);
const leftPercent = ((point.x + radius) / diameter) * 100;
const topPercent = ((radius - point.y) / diameter) * 100;
return {
left: formatTargetPosition(leftPercent, xOffset),
top: formatTargetPosition(topPercent, yOffset),
transform: "translate(-50%, -50%)",
};
}
function getHitStyle(shot) {
const radius = currentHitRadiusPx.value;
const point = getShotPoint(shot);
return {
...getTargetPositionStyle(point, radius),
width: `${radius * 2}px`,
height: `${radius * 2}px`,
};
}
function getRoundTipStyle(shot) {
const point = getShotPoint(shot, true);
return getTargetPositionStyle(
point,
shot?.ring ? currentHitRadiusPx.value : 0,
{ y: ROUND_TIP_OFFSET_Y }
);
}
function getExperienceTipStyle(shot) {
const point = getShotPoint(shot, true);
return getTargetPositionStyle(
point,
shot?.ring ? currentHitRadiusPx.value : 0,
{ y: EXPERIENCE_TIP_OFFSET_Y }
);
}
watch(
() => props.scores,
(newVal) => {
if (newVal.length - prevScores.value.length === 1) {
latestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
latestOne.value = null;
}, 1000);
}
prevScores.value = [...newVal];
},
{
deep: true,
}
);
watch(
() => props.blueScores,
(newVal) => {
if (newVal.length - prevBlueScores.value.length === 1) {
bluelatestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
timer.value = setTimeout(() => {
bluelatestOne.value = null;
}, 1000);
}
prevBlueScores.value = [...newVal];
},
{
deep: true,
}
);
const simulShoot = async () => {
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
};
const simulShoot2 = async () => {
if (device.value.deviceId) {
const r1 = Math.random() > 0.5 ? 0.01 : 0.02;
await simulShootAPI(device.value.deviceId, r1, r1);
}
};
const env = computed(() => {
const accountInfo = uni.getAccountInfoSync();
return accountInfo.miniProgram.envVersion;
});
const arrowStyle = computed(() => {
return {
transform: `rotateX(180deg) translate(-50%, -50%) rotate(${
360 - angle.value
}deg) translateY(105%)`,
};
});
const currentArrowIndex = computed(() => {
return props.scores.length + props.blueScores.length + 1;
});
const getHighlightArrowIndex = (area = {}) => {
const arrowIndex = Number(area.arrowIndex ?? area.arrowNo ?? area.arrow);
return Number.isInteger(arrowIndex) && arrowIndex > 0 ? arrowIndex : null;
};
const currentHighlightAreas = computed(() => {
if (!Array.isArray(props.highlightAreas) || props.highlightAreas.length === 0) {
return [];
}
const hasExplicitArrowIndex = props.highlightAreas.some((area = {}) => {
return getHighlightArrowIndex(area) !== null;
});
const matchedAreas = props.highlightAreas.filter((area = {}) => {
return getHighlightArrowIndex(area) === currentArrowIndex.value;
});
if (hasExplicitArrowIndex) {
return matchedAreas;
}
if (props.highlightAreas.length === 1) {
return props.highlightAreas.slice(0, 1);
}
const currentArea = props.highlightAreas[currentArrowIndex.value - 1];
return currentArea ? [currentArea] : [];
});
const showHighlightCanvas = computed(() => {
return props.totalRound > 0 && currentHighlightAreas.value.length > 0;
});
async function onReceiveMessage(message) {
if (Array.isArray(message)) return;
if (message.type === MESSAGETYPESV2.ShootResult && message.shootData) {
if (
message.shootData.playerId === user.value.id &&
!message.shootData.ring &&
message.shootData.angle >= 0
) {
angle.value = null;
setTimeout(() => {
if (props.scores[0]) {
circleColor.value =
message.shootData.playerId === props.scores[0].playerId
? "#ff4444"
: "#1840FF";
}
angle.value = message.shootData.angle;
}, 200);
}
}
}
onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
});
onBeforeUnmount(() => {
if (timer.value) {
clearTimeout(timer.value);
timer.value = null;
}
if (dirTimer.value) {
clearTimeout(dirTimer.value);
dirTimer.value = null;
}
uni.$off("socket-inbox", onReceiveMessage);
});
</script>
<template>
<view class="container">
<!-- <view class="header" v-if="totalRound > 0">
<text v-if="totalRound > 0" class="round-count">{{
(currentRound > totalRound ? totalRound : currentRound) +
"/" +
totalRound
}}</text>
</view> -->
<view class="target">
<image
class="target-image"
src="../../../static/bow-target.png"
mode="aspectFit"
/>
<TargetCanvas
v-if="showHighlightCanvas"
class="target-highlight-layer"
:coordinateRadius="coordinateRadius"
:showCrosshair="false"
:showQuadrantLabels="false"
:showRingLabels="false"
:highlightOnly="true"
:highlightAreas="currentHighlightAreas"
/>
<view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
<view :style="{ background: circleColor }">
<image src="../../../static/dot-circle.png" mode="widthFix" />
</view>
</view>
<view v-if="stop" class="stop-sign">中场休息</view>
<view
v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
class="e-value fade-in-out"
:style="getExperienceTipStyle(latestOne)"
>
经验 +1
</view>
<view
v-if="latestOne"
class="round-tip fade-in-out"
:style="getRoundTipStyle(latestOne)"
>{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
}}<text v-if="latestOne.ring">环</text>
</view>
<view
v-if="
bluelatestOne &&
bluelatestOne.ring &&
user.id === bluelatestOne.playerId
"
class="e-value fade-in-out"
:style="getExperienceTipStyle(bluelatestOne)"
>
经验 +1
</view>
<view
v-if="bluelatestOne"
class="round-tip fade-in-out"
:style="getRoundTipStyle(bluelatestOne)"
>{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
}}<text v-if="bluelatestOne.ring">环</text></view
>
<block v-for="(bow, index) in scores" :key="index">
<view
v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${
index === scores.length - 1 && latestOne ? 'pump-in' : ''
}`"
:style="{
...getHitStyle(bow),
backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
}"
><text v-if="pMode">{{ index + 1 }}</text></view
>
</block>
<block v-for="(bow, index) in blueScores" :key="index">
<view
v-if="bow.ring > 0"
:class="`hit ${pMode ? 'b' : 's'}-point ${
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
}`"
:style="{
...getHitStyle(bow),
backgroundColor: '#1840FF',
}"
>
<text v-if="pMode">{{ index + 1 }}</text>
</view>
</block>
</view>
<view class="footer">
<PointSwitcher
:onChange="(val) => (pMode = val)"
:style="{ zIndex: 999 }"
/>
</view>
<view class="simul" v-if="env !== 'release'">
<button @click="simulShoot">模拟</button>
<button @click="simulShoot2">射箭</button>
</view>
</view>
</template>
<style scoped>
.container {
width: calc(100vw - 30px);
height: calc(100vw - 30px);
padding: 0px 15px;
position: relative;
}
.target {
position: relative;
margin: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
z-index: 0;
}
.target-image {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.target-highlight-layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.e-value {
position: absolute;
background-color: #0006;
color: #fff;
font-size: 12px;
padding: 4px 7px;
border-radius: 5px;
z-index: 4;
width: 50px;
text-align: center;
}
.round-tip {
position: absolute;
color: #fff;
font-size: 30px;
font-weight: bold;
z-index: 4;
width: 100px;
text-align: center;
}
.round-tip > text {
font-size: 24px;
margin-left: 5px;
}
@keyframes target-tip-fade-in-out {
0% {
transform: translate(-50%, -50%) translateY(20px);
opacity: 0;
}
30% {
transform: translate(-50%, -50%);
opacity: 1;
}
80% {
transform: translate(-50%, -50%);
opacity: 1;
}
100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
.round-tip.fade-in-out,
.e-value.fade-in-out {
animation: target-tip-fade-in-out 1.2s ease forwards;
}
.hit {
position: absolute;
border-radius: 50%;
z-index: 3;
color: #fff;
transition: all 0.3s ease;
box-sizing: border-box;
}
.s-point {
}
.b-point {
border: 1px solid #fff;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
}
.b-point > text {
font-size: 16rpx;
color: #fff;
font-family: "DINCondensed";
/* text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
margin-top: 2rpx;
}
@keyframes target-pump-in {
from {
transform: translate(-50%, -50%) scale(2);
}
to {
transform: translate(-50%, -50%) scale(1);
}
}
.hit.pump-in {
animation: target-pump-in 0.3s ease-out forwards;
transform-origin: center center;
}
.header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: -40px;
}
.header > image:first-child {
width: 40px;
height: 40px;
}
.round-count {
font-size: 20px;
color: #fed847;
top: 75px;
font-weight: bold;
}
.footer {
width: calc(100% - 20px);
padding: 0 10px;
display: flex;
margin-top: -40px;
justify-content: flex-end;
}
.footer > image {
width: 40px;
min-height: 40px;
max-height: 40px;
border-radius: 50%;
border: 1px solid #fff;
}
.simul {
position: absolute;
top: 0;
right: 20px;
margin-left: 20px;
z-index: 999;
}
.simul > button {
color: #fff;
}
.stop-sign {
position: absolute;
font-size: 44px;
color: #fff9;
text-align: center;
width: 200px;
height: 60px;
left: calc(50% - 100px);
top: calc(50% - 30px);
z-index: 5;
font-weight: bold;
}
.arrow-dir {
position: absolute;
width: 100%;
height: 52%;
left: 50%;
bottom: 50%;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
}
.arrow-dir > view {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
.arrow-dir > view > image {
width: 100rpx;
height: 100rpx;
transform: translate(-30%, -30%);
}
@keyframes spring-in {
0% {
transform: scale(2);
opacity: 0.4;
}
15% {
transform: scale(3);
opacity: 1;
}
30% {
transform: scale(2);
opacity: 0.4;
}
45% {
transform: scale(3);
opacity: 1;
}
60% {
transform: scale(2);
opacity: 0.4;
}
75% {
transform: scale(3);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@keyframes disappear {
0% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.arrow-dir > view {
animation: disappear 3s ease forwards;
}
.arrow-dir > view > image {
animation: spring-in 3s ease forwards;
width: 100%;
}
</style>

62
src/pages/training/components/BubbleTip.vue
View File

@@ -1,62 +0,0 @@
<script setup>
const props = defineProps({
type: {
type: String,
default: "normal",
},
location: {
type: Object,
default: () => ({}),
},
});
</script>
<template>
<view :class="`container ${type}`" :style="{ ...location }">
<slot />
</view>
</template>
<style scoped>
.container {
position: absolute;
color: #fff;
display: flex;
flex-direction: column;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
font-size: 24rpx;
}
.normal {
background-image: url("../static/bubble-tip.png");
width: 157rpx;
height: 105rpx;
padding-top: 10px;
padding-left: 30rpx;
}
.normal2 {
background-image: url("../static/bubble-tip4.png");
width: 190rpx;
height: 105rpx;
padding-top: 10px;
padding-left: 20rpx;
top: 0;
left: 15%;
z-index: 1;
}
.long {
background-image: url("../static/bubble-tip2.png");
width: 370rpx;
height: 70rpx;
top: -50%;
left: 49%;
}
.short {
background-image: url("../static/bubble-tip3.png");
width: 300rpx;
height: 70rpx;
top: -50%;
right: -1%;
}
</style>

157
src/pages/training/components/ScorePanel.vue
View File

@@ -1,157 +0,0 @@
<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
const props = defineProps({
rowCount: {
type: Number,
default: 0,
},
total: {
type: Number,
default: 0,
},
arrows: {
type: Array,
default: () => [],
},
fontSize: {
type: Number,
default: 25,
},
completeEffect: {
type: Boolean,
default: true,
},
});
const items = ref(new Array(props.total).fill(9));
const bgImages = [
"../static/complete-light1.png",
"../static/complete-light2.png",
];
const bgIndex = ref(0);
const getDisplayText = (arrow) => {
if (!arrow) return "-";
if (arrow.ringX) return "X";
return arrow.ring ?? "-";
};
const isLowScore = (arrow) => {
if (!arrow || arrow.ringX) return false;
const ring = Number(arrow.ring);
return Number.isFinite(ring) && ring < 6;
};
watch(
() => props.total,
(newValue) => {
items.value = new Array(newValue).fill(9);
}
);
const timer = ref(null);
onMounted(() => {
timer.value = setInterval(() => {
bgIndex.value = bgIndex.value === 0 ? 1 : 0;
}, 200);
});
onBeforeUnmount(() => {
if (timer.value) {
clearInterval(timer.value);
}
});
</script>
<template>
<view class="container">
<image
v-if="total > 0 && arrows.length === total && completeEffect"
:src="bgImages[bgIndex]"
class="complete-light"
:style="{
width: `calc(${(100 / (rowCount + 2)) * rowCount}vw + ${
(100 / (total * 2)) * (rowCount * 2 + (total === 12 ? 8 : 24))
}px)`,
height: `calc(${(100 / (rowCount + 2)) * (total / rowCount)}vw + ${
(100 / (total * 2)) *
((total / rowCount) * 2 + (total === 12 ? 7 : 24))
}px)`,
top: `${total === 12 ? -2 : -3}vw`,
}"
/>
<view
v-for="(_, index) in items"
:key="index"
class="score-item"
>
<image
class="score-item-bg"
:src="
isLowScore(arrows[index])
? '/static/training-difficulty-design/block-gray.png'
: '/static/training-difficulty-design/block-gold.png'
"
/>
<text
class="score-value"
:class="{ 'score-value--low': isLowScore(arrows[index]) }"
>
{{ getDisplayText(arrows[index]) }}
</text>
</view>
</view>
</template>
<style scoped lang="scss">
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
position: relative;
padding: 30rpx 40rpx 0 40rpx;
}
.score-item {
position: relative;
width: 100rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-right: 14rpx;
margin-bottom: 14rpx;
}
.score-item:nth-child(6n) {
margin-right: 0;
}
.score-item-bg {
position: absolute;
top: 0;
left: 0;
width: 100rpx;
height: 56rpx;
}
.score-value {
position: relative;
z-index: 1;
min-width: 28rpx;
text-align: center;
font-size: 34rpx;
line-height: 1;
font-weight: 700;
font-style: italic;
color: #f6e3b2;
text-shadow: 0 2rpx 0 rgba(36, 36, 48, 0.5);
margin-left: -10rpx;
}
.score-value--low {
color: #cfcfcf;
text-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.5);
}
.complete-light {
position: absolute;
}
</style>

109
src/pages/training/components/ScorePanel2.vue
View File

@@ -1,109 +0,0 @@
<script setup>
import { computed } from "vue";
const props = defineProps({
arrows: {
type: Array,
default: () => [],
},
total: {
type: Number,
default: 0,
},
});
const getDisplayText = (arrow = {}) => {
if (!arrow) return "";
if (!arrow.ring) return "-";
return arrow.ringX ? "X" : String(arrow.ring);
};
const isLowScore = (arrow = {}) => {
if (!arrow || arrow.ringX) return false;
return Number(arrow.ring) < 6;
};
const displayArrows = computed(() => {
const list = [...props.arrows];
if (props.total > 0 && list.length < props.total) {
list.push(null);
}
return list;
});
</script>
<template>
<view v-if="displayArrows.length" class="score-panel">
<view class="score-grid">
<view
v-for="(arrow, index) in displayArrows"
:key="index"
class="score-card"
>
<image class="score-card-bg" :src="isLowScore(arrow)?'/static/training-difficulty-design/block-gray.png':'/static/training-difficulty-design/block-gold.png'"></image>
<text
class="score-value"
:class="{ 'score-value--low': isLowScore(arrow) }"
>
{{ getDisplayText(arrow) }}
</text>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.score-panel {
width: 100%;
padding: 30rpx 40rpx 0 40rpx;
box-sizing: border-box;
}
.score-grid {
display: flex;
flex-wrap: wrap;
}
.score-card {
position: relative;
width: 100rpx;
height: 56rpx;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-right: 14rpx;
margin-bottom: 14rpx;
}
.score-card:nth-child(6n) {
margin-right: 0;
}
.score-card-bg {
position: absolute;
top: 0;
left: 0;
width: 100rpx;
height: 56rpx;
}
.score-value {
position: relative;
z-index: 1;
min-width: 28rpx;
text-align: center;
font-size: 34rpx;
line-height: 1;
font-weight: 700;
font-style: italic;
color: #f6e3b2;
text-shadow: 0 2rpx 0 rgba(36, 36, 48, 0.5);
margin-left: -10rpx;
}
.score-value--low {
color: #cfcfcf;
text-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.5);
}
</style>

628
src/pages/training/components/ScoreResult.vue
View File

@@ -1,628 +0,0 @@
<script setup>
import { ref, onMounted, computed } from "vue";
import ScreenHint from "./ScreenHint.vue";
import BowData from "./BowData.vue";
import UserUpgrade from "@/components/UserUpgrade.vue";
import { directionAdjusts } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const props = defineProps({
onClose: {
type: Function,
default: () => { },
},
onRetry: {
type: Function,
default: () => { },
},
total: {
type: Number,
default: 0,
},
rowCount: {
type: Number,
default: 0,
},
result: {
type: Object,
default: () => ({}),
},
tipSrc: {
type: String,
default: "",
},
});
const showPanel = ref(true);
const showComment = ref(false);
const showBowData = ref(false);
const showUpgrade = ref(false);
const closePanel = () => {
showPanel.value = false;
setTimeout(() => {
props.onClose();
}, 300);
};
const retryPractice = () => {
showPanel.value = false;
setTimeout(() => {
props.onRetry();
}, 300);
};
function onClickShare() {
uni.$emit("share-image");
}
onMounted(() => {
if (props.result.lvl > user.value.lvl) {
showUpgrade.value = true;
}
});
const details = computed(() => props.result.details || []);
const arrows = computed(() => {
const data = new Array(props.total).fill(null);
details.value.forEach((arrow, index) => {
data[index] = arrow;
});
return data;
});
const validArrows = computed(() => arrows.value.filter((a) => !!a?.ring).length);
const totalRing = computed(() =>
details.value.reduce((last, next) => last + (Number(next.ring) || 0), 0)
);
const gainedExp = computed(
() => props.result.exp || props.result.experience || validArrows.value
);
const currentLevel = computed(
() => props.result.lvl || user.value.lvl || user.value.rankLvl || 1
);
const currentExp = computed(
() => props.result.currentExp || props.result.score || user.value.scores || 0
);
const nextExp = computed(
() => props.result.nextExp || props.result.upgradeScore || 100
);
const expPercent = computed(() => {
if (!nextExp.value) return 0;
return Math.min(100, Math.max(0, (currentExp.value / nextExp.value) * 100));
});
const findValue = (...keys) => {
const item = keys.find((key) => props.result[key] !== undefined);
return item ? props.result[item] : undefined;
};
const formatDuration = (value) => {
const seconds = Number(value || 0);
if (!seconds) return "--";
const minutes = Math.floor(seconds / 60);
const rest = seconds % 60;
return minutes ? `${minutes}分${rest}秒` : `${rest}秒`;
};
const usedTime = computed(() =>
findValue("duration", "usedTime", "shootTime", "time")
);
const hitCompare = computed(
() => Number(findValue("hitCompare", "hitDiff", "hitDelta") || 0)
);
const timeCompare = computed(
() => Number(findValue("timeCompare", "timeDiff", "durationDiff") || 0)
);
const calories = computed(
() => Number(findValue("calories", "calorie", "kcal") || 0)
);
</script>
<template>
<view :class="['result-mask', showPanel ? 'result-mask--show' : 'result-mask--hide']">
<image class="hero-glow" src="/static/training-difficulty-design/result-bg.png" mode="widthFix" />
<view class="result-title">
<image class="result-title-bg" src="/static/training-difficulty-design/result-t-bg.png" mode="widthFix" />
<view class="result-title-text">Lv{{ currentLevel }}</view>
</view>
<view class="result-panel">
<view class="line-top"></view>
<view class="line-bottom"></view>
<view class="stats">
<view class="stat-row">
<image class="stat-bg" src="/static/training-difficulty-design/result-c-bg.png" mode="scaleToFill" />
<view class="stat-cell">
<text class="stat-label">共命中目标</text>
<view class="stat-value">
<text>{{ validArrows }}</text>
<text class="stat-unit">次</text>
</view>
</view>
<view class="stat-divider"></view>
<view class="stat-cell stat-cell--compare">
<text class="stat-label">对比上次</text>
<view class="stat-value">
<text>{{ Math.abs(hitCompare) }}</text>
<text class="stat-unit">次</text>
<image class="trend-icon" :class="{ 'trend-icon--down': hitCompare < 0 }"
src="/static/training-difficulty-design/result-up.png" mode="widthFix" />
</view>
</view>
</view>
<view class="stat-row">
<image class="stat-bg" src="/static/training-difficulty-design/result-c-bg.png" mode="scaleToFill" />
<view class="stat-cell">
<text class="stat-label">用时</text>
<view class="stat-value">
<text>{{ formatDuration(usedTime) }}</text>
</view>
</view>
<view class="stat-divider"></view>
<view class="stat-cell stat-cell--compare">
<text class="stat-label">对比上次</text>
<view class="stat-value">
<text>{{ formatDuration(Math.abs(timeCompare)) }}</text>
<image class="trend-icon" :class="{ 'trend-icon--down': timeCompare <= 0 }"
src="/static/training-difficulty-design/result-up.png" mode="widthFix" />
</view>
</view>
</view>
<view class="stat-row">
<image class="stat-bg" src="/static/training-difficulty-design/result-c-bg.png" mode="scaleToFill" />
<view class="stat-cell">
<text class="stat-label">消耗卡路里</text>
<view class="stat-value">
<text>{{ calories }}卡</text>
</view>
</view>
<text class="stat-equal">≈</text>
<!-- <view class="stat-divider"></view> -->
<view class="stat-cell stat-cell--compare">
<view class="stat-value">
<image v-for="index in 3" :key="index" class="rice-icon"
src="/static/training-difficulty-design/result-rice.png" mode="widthFix" />
</view>
</view>
</view>
<view class="actions">
<view class="action-item" @click="() => (showBowData = true)">
<image class="action-icon" src="/static/training-difficulty-design/result-icon-1.png" mode="widthFix" />
<text>查看靶纸</text>
</view>
<view v-if="validArrows === total" class="action-item" @click="() => (showComment = true)">
<image class="action-icon" src="/static/training-difficulty-design/result-icon-2.png" mode="widthFix" />
<text>教练点评</text>
</view>
<view v-if="validArrows === total" class="action-item" @click="onClickShare">
<image class="action-icon" src="/static/training-difficulty-design/result-icon-3.png" mode="widthFix" />
<text>分享成绩</text>
</view>
</view>
</view>
</view>
<view class="oper-box">
<view class="exp-area">
<text class="exp-gain">+{{ gainedExp }}经验</text>
<view class="level-progress">
<text class="level-text">LV.{{ currentLevel }}</text>
<view class="progress-track">
<view class="progress-fill" :style="{ width: `${expPercent}%` }"></view>
</view>
<text class="progress-text">{{ currentExp }} / {{ nextExp }}</text>
</view>
</view>
<view class="footer-actions">
<view class="result-btn result-btn--muted" @click="closePanel">
<text>{{ validArrows === total ? "完成" : "返回" }}</text>
</view>
<view class="result-btn result-btn--primary" @click="retryPractice">
<text>再来一次</text>
</view>
</view>
</view>
<ScreenHint :show="showComment" :onClose="() => (showComment = false)" mode="tall">
<view class="coach-comment">
<text>
您本次练习取得了<text class="gold-text">{{ totalRing }}</text>环的成绩，所有箭支上靶后的平均点间距离为<text class="gold-text">{{
Number((result.average_distance || 0).toFixed(2))
}}</text>，{{
result.spreadEvaluation === "Dispersed"
? "还需要持续改进哦~"
: "成绩优秀。"
}}
</text>
<view>
<image src="https://static.shelingxingqiu.com/attachment/2025-11-26/deihtj15xjwcz3c1tx.png" mode="widthFix" />
<text class="coach-suggestion">
针对您本次的练习，{{
result.spreadEvaluation === "Dispersed"
? "我们建议您充分练习推弓、靠位以及撒放动作一致性。"
: totalRing >= 100
? "我们建议您继续保持即可。"
: `我们建议您将设备的瞄准器${directionAdjusts[result.adjustmentHint]
}调整。`
}}
</text>
</view>
</view>
</ScreenHint>
<BowData :total="arrows.length" :arrows="result.details" :show="showBowData"
:onClose="() => (showBowData = false)" />
<UserUpgrade :show="showUpgrade" :onClose="() => (showUpgrade = false)" :lvl="result.lvl" />
</view>
</template>
<style scoped lang="scss">
.result-mask {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
background:
linear-gradient(180deg,
rgba(24, 22, 17, 0.38) 0%,
rgba(24, 22, 17, 0.56) 28%,
rgba(17, 17, 25, 0.92) 58%),
rgba(0, 0, 0, 0.72);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.result-mask--show {
opacity: 1;
}
.result-mask--hide {
opacity: 0;
transition: opacity 0.3s ease;
}
.hero-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.result-title {
position: relative;
width: 100%;
height: 264rpx;
z-index: 2;
}
.result-title-bg {
width: 100%;
height: 264rpx;
display: block;
}
.result-title-text {
width: 100%;
font-size: 28rpx;
color: #FBFCE6;
font-weight: 600;
line-height: 40rpx;
text-align: center;
position: absolute;
top: 116rpx;
left: 0;
}
.result-panel {
width: 100vw;
height: 634rpx;
padding: 144rpx 80rpx 0 80rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 0, 0, 0.8);
z-index: 1;
margin-top: -100rpx;
position: relative;
}
.stats {
width: 100%;
margin-top: 34rpx;
}
.line-top {
background: linear-gradient(45deg, rgba(205, 183, 122, 0) 0%, #CDB77A 49.92%, rgba(205, 183, 122, 0) 100%);
width: 100%;
height: 4rpx;
opacity: 0.9;
position: absolute;
top: 2rpx;
left: 0;
}
.line-bottom {
background: linear-gradient(45deg, rgba(205, 183, 122, 0) 0%, #CDB77A 49.92%, rgba(205, 183, 122, 0) 100%);
width: 100%;
height: 4rpx;
opacity: 0.9;
position: absolute;
bottom: 2rpx;
left: 0;
}
.stat-row {
width: 100%;
height: 62rpx;
position: relative;
display: flex;
align-items: center;
margin-bottom: 52rpx;
// border: 2rpx solid rgba(209, 184, 125, 0.72);
// border-radius: 14rpx;
transform: skewX(-12deg);
box-sizing: border-box;
}
.stat-cell {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: skewX(12deg);
}
.stat-bg {
position: absolute;
top: 0;
left: 0;
width: 582rpx;
height: 62rpx;
}
.stat-cell--compare {
padding-left: 8rpx;
box-sizing: border-box;
}
.stat-label {
position: absolute;
top: -30rpx;
color: rgba(255, 255, 255, 0.7);
font-size: 20rpx;
line-height: 1;
}
.stat-value {
display: flex;
align-items: center;
justify-content: center;
min-width: 120rpx;
color: #F3E0B9;
font-size: 32rpx;
line-height: 1;
font-weight: 700;
font-style: italic;
}
.stat-unit {
margin-left: 4rpx;
font-size: 24rpx;
}
.stat-divider {
width: 2rpx;
height: 34rpx;
background: rgba(197, 160, 92, 0.64);
transform: skewX(12deg);
}
.stat-equal{
width: 30rpx;
height: 40rpx;
color: #F3E0B9;
font-size: 30rpx;
margin-left: 10rpx;
}
.trend-icon {
width: 28rpx;
height: 42rpx;
margin-left: 16rpx;
}
.trend-icon--down {
transform: rotate(180deg);
}
.stat-bg {
position: absolute;
top: 0;
left: 0;
width: 582rpx;
height: 62rpx;
}
.rice-list {
width: 160rpx;
display: flex;
align-items: center;
}
.rice-icon {
width: 36rpx;
height: 34rpx;
margin-right: 14rpx;
}
.oper-box {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 598rpx;
}
.actions {
width: 350rpx;
display: flex;
justify-content: space-between;
margin: 0 auto;
margin-top: 38rpx;
}
.action-item {
width: 80rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.action-icon {
width: 70rpx;
height: 68rpx;
}
.action-item>text {
margin-top: 4rpx;
color: #FAE6BC;
font-size: 20rpx;
line-height: 1;
white-space: nowrap;
}
.exp-area {
width: 100%;
margin-top: auto;
padding-top: 122rpx;
}
.exp-gain {
display: block;
margin-bottom: 14rpx;
color: #f6e3b2;
font-size: 22rpx;
line-height: 1;
text-align: center;
}
.level-progress {
display: flex;
align-items: center;
width: 100%;
}
.level-text,
.progress-text {
color: rgba(255, 255, 255, 0.86);
font-size: 24rpx;
line-height: 1;
}
.level-text {
min-width: 60rpx;
}
.progress-text {
min-width: 72rpx;
text-align: right;
}
.progress-track {
flex: 1;
height: 10rpx;
margin: 0 14rpx;
border-radius: 999rpx;
overflow: hidden;
background: rgba(255, 255, 255, 0.26);
}
.progress-fill {
height: 100%;
border-radius: 999rpx;
background: linear-gradient(90deg, #ff940f 0%, #ffbb33 58%, #fff0a7 100%);
}
.footer-actions {
width: 100%;
display: flex;
justify-content: center;
margin-top: 70rpx;
}
.result-btn {
width: 234rpx;
height: 72rpx;
border-radius: 999rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 0 18rpx;
}
.result-btn>text {
font-size: 28rpx;
line-height: 1;
font-weight: 700;
}
.result-btn--muted {
color: #ffffff;
background: rgba(255, 255, 255, 0.2);
}
.result-btn--primary {
background: #FED847;
color: #151515;
}
.gold-text {
color: #fed847;
}
.coach-comment {
display: flex;
flex-direction: column;
font-size: 14px;
}
.coach-comment>view {
display: flex;
}
.coach-comment>view>image {
width: 420rpx;
height: 420rpx;
margin-right: 20rpx;
}
.coach-suggestion {
margin-top: 12px;
}
</style>

89
src/pages/training/components/ScreenHint.vue
View File

@@ -1,89 +0,0 @@
<script setup>
import IconButton from "@/components/IconButton.vue";
const props = defineProps({
show: {
type: Boolean,
default: false,
},
onClose: {
type: Function,
default: null,
},
mode: {
type: String,
default: "normal",
},
});
const getContentHeight = () => {
if (props.mode === "tall") return "50vw";
if (props.mode === "square") return "74vw";
return "36vw";
};
</script>
<template>
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
<view class="scale-in" :style="{ height: getContentHeight() }">
<image
v-if="mode === 'normal'"
src="/static/screen-hint-bg.png"
mode="widthFix"
/>
<image
v-if="mode === 'tall'"
src="/static/coach-comment.png"
mode="widthFix"
/>
<image
v-if="mode === 'square'"
src="/static/prompt-bg-square.png"
mode="widthFix"
/>
<image
v-if="mode === 'small'"
src="/static/finish-frame.png"
mode="widthFix"
/>
<slot />
</view>
<IconButton
v-if="!!onClose"
src="/static/close-gold-outline.png"
:width="30"
:onClick="onClose"
/>
</view>
</template>
<style scoped>
.container {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 999;
}
.container > view:first-child {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 70vw;
color: #fff;
margin-bottom: 15px;
}
.container > view:first-child > image {
position: absolute;
width: 80vw;
left: -7%;
bottom: -18vw;
z-index: -1;
transform: translateY(-75px);
}
</style>

387
src/pages/training/components/ShootProgress.vue
View File

@@ -1,387 +0,0 @@
<script setup>
import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
import audioManager from "@/audioManager";
import { MESSAGETYPESV2 } from "@/constants";
import { getDirectionText } from "@/util";
import Avatar from "@/components/Avatar.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const props = defineProps({
show: {
type: Boolean,
default: true,
},
start: {
type: Boolean,
default: false,
},
tips: {
type: String,
default: "",
},
total: {
type: Number,
default: 120,
},
currentRound: {
type: Number,
default: 0,
},
battleId: {
type: String,
default: "",
},
melee: {
type: Boolean,
default: false,
},
onStop: {
type: Function,
default: () => {},
},
});
const barColor = ref("#fed847");
const remain = ref(props.total);
const timer = ref(null);
const sound = ref(true);
const currentRound = ref(props.currentRound);
const currentRoundEnded = ref(false);
const halfTime = ref(false);
const wait = ref(0);
const transitionStyle = ref("all 1s linear");
const progressPercent = computed(() => {
if (!props.total) return 0;
return Math.max(0, Math.min(100, (remain.value / props.total) * 100));
});
const displayName = computed(() => {
return (
user.value?.nickName ||
user.value?.nickname ||
user.value?.name ||
"Archer"
);
});
const avatarSrc = computed(() => {
return user.value?.avatar || "/static/shooter2.png";
});
watch(
() => props.tips,
(newVal) => {
let key = "";
if (newVal.includes("红队")) key = "请红方射箭";
if (newVal.includes("蓝队")) key = "请蓝方射箭";
if (key) {
if (currentRoundEnded.value) {
currentRound.value += 1;
currentRoundEnded.value = false;
if (currentRound.value === 1) audioManager.play("第一轮");
if (currentRound.value === 2) audioManager.play("第二轮");
if (currentRound.value === 3) audioManager.play("第三轮");
if (currentRound.value === 4) audioManager.play("第四轮");
if (currentRound.value === 5) audioManager.play("第五轮");
setTimeout(() => {
audioManager.play(key);
}, 1000);
} else {
audioManager.play(key);
}
}
}
);
const resetTimer = (count) => {
if (timer.value) clearInterval(timer.value);
const newVal = Math.round(count);
if (newVal >= remain.value) {
transitionStyle.value = "none";
remain.value = newVal;
setTimeout(() => {
transitionStyle.value = "all 1s linear";
}, 50);
} else {
remain.value = newVal;
}
if (remain.value > 0) {
timer.value = setInterval(() => {
if (remain.value === 0) {
clearInterval(timer.value);
props.onStop();
}
if (remain.value > 0) remain.value--;
}, 1000);
}
};
watch(
() => props.start,
(newVal) => {
if (newVal) {
resetTimer(props.total);
} else {
remain.value = 0;
clearInterval(timer.value);
}
},
{
immediate: true,
}
);
const tipContent = computed(() => {
if (halfTime.value) {
return props.battleId ? "中场休息" : `中场休息(${wait.value}秒)`;
}
return props.start && remain.value === 0 ? "时间到！" : props.tips;
});
const updateSound = () => {
sound.value = !sound.value;
audioManager.setMuted(!sound.value);
};
async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.BattleStart) {
halfTime.value = false;
audioManager.play("比赛开始");
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
audioManager.play("比赛结束", false);
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
let arrow = {};
if (msg.details && Array.isArray(msg.details)) {
arrow = msg.details[msg.details.length - 1];
} else {
if (msg.shootData.playerId !== user.value.id) return;
if (msg.shootData) arrow = msg.shootData;
}
let key = [];
key.push(arrow.ring ? `${arrow.ringX ? "X" : arrow.ring}环` : "未上靶");
if (arrow.angle !== null) {
key.push(`向${getDirectionText(arrow.angle)}调整`);
}
audioManager.play(key, false);
} else if (msg.type === MESSAGETYPESV2.HalfRest) {
halfTime.value = true;
audioManager.play("中场休息");
} else if (msg.type === MESSAGETYPESV2.InvalidShot) {
uni.showToast({
title: "距离不足，无效",
icon: "none",
});
audioManager.play("射击无效");
}
}
const playSound = (key) => {
audioManager.play(key);
};
onMounted(() => {
uni.$on("update-remain", resetTimer);
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("play-sound", playSound);
});
onBeforeUnmount(() => {
uni.$off("update-remain", resetTimer);
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("play-sound", playSound);
if (timer.value) clearInterval(timer.value);
});
</script>
<template>
<view v-if="show" class="progress-card">
<view class="progress-card__header">
<view class="progress-card__profile">
<view class="progress-card__avatar-shell">
<Avatar
:src="avatarSrc"
:size="80"
size-unit="rpx"
image-mode="aspectFill"
/>
</view>
<text class="progress-card__name">{{ displayName }}</text>
</view>
<!-- <button class="progress-card__sound" hover-class="none" @click="updateSound">
<image
class="progress-card__sound-icon"
:src="`/static/sound${sound ? '' : '-off'}-yellow.png`"
mode="aspectFit"
/>
</button> -->
</view>
<view class="progress-card__track-wrap">
<image
class="progress-card__titile"
src="../../../static/training-difficulty-design/text-icon-cgxl.png"
mode="aspectFit"
/>
<view class="progress-card__track">
<view
class="progress-card__fill"
:style="{
width: `${progressPercent}%`,
backgroundColor: barColor,
right: tips.includes('红队') ? 0 : 'unset',
transition: transitionStyle,
}"
/>
<view class="progress-card__badge">
<text class="progress-card__badge-text">剩余{{ remain }}秒</text>
</view>
</view>
<!-- <text v-if="tipContent" class="progress-card__tip">{{ tipContent }}123</text> -->
</view>
</view>
</template>
<style scoped>
.progress-card {
box-sizing: border-box;
/* padding: 50rpx 30rpx 0 30rpx; */
margin: 70rpx 30rpx 0 30rpx;
}
.progress-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.progress-card__profile {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.progress-card__avatar-shell {
width: 86rpx;
height: 86rpx;
padding: 3rpx;
box-sizing: border-box;
border-radius: 50%;
background: linear-gradient(180deg, rgba(255, 209, 153, 1), rgba(162, 119, 55, 1));
display: flex;
align-items: center;
justify-content: center;
}
.progress-card__avatar {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.progress-card__name {
width: 86rpx;
color: #E7BA80;
font-size: 18rpx;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
margin-top: 10rpx;
}
.progress-card__sound {
width: 68rpx;
height: 68rpx;
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(28, 24, 21, 0.72);
box-shadow: 0 8rpx 18rpx rgba(0, 0, 0, 0.18);
}
.progress-card__sound::after {
border: none;
}
.progress-card__sound-icon {
width: 34rpx;
height: 34rpx;
}
.progress-card__track-wrap {
margin-top: -156rpx;
padding-left: 102rpx;
}
.progress-card__titile{
width: 260rpx;
height: 72rpx;
margin-left: 110rpx;
}
.progress-card__track {
position: relative;
width: 100%;
height: 24rpx;
border-radius: 18rpx;
overflow: hidden;
background: #444444;
}
.progress-card__fill {
position: absolute;
top: 0;
left: 0;
bottom: 0;
border-radius: 18rpx;
background: linear-gradient( 133deg, #FFD19A 0%, #A17636 100%);
}
.progress-card__badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 156rpx;
height: 40rpx;
padding: 0 24rpx;
box-sizing: border-box;
border-radius: 999rpx;
display: flex;
align-items: center;
justify-content: center;
/* background: rgba(164, 117, 47, 0.94); */
/* box-shadow: 0 4rpx 10rpx rgba(76, 45, 7, 0.22); */
}
.progress-card__badge-text {
color: #fff7de;
font-size: 18rpx;
line-height: 1;
white-space: nowrap;
}
.progress-card__tip {
display: block;
margin-top: 16rpx;
color: rgba(255, 243, 216, 0.88);
font-size: 24rpx;
line-height: 1.4;
text-align: center;
}
</style>

196
src/pages/training/components/TestDistance.vue
View File

@@ -1,196 +0,0 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import Guide from "@/components/Guide.vue";
import BowPower from "@/components/BowPower.vue";
import Avatar from "@/components/Avatar.vue";
import audioManager from "@/audioManager";
import { simulShootAPI } from "@/apis";
import { MESSAGETYPESV2 } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, device } = storeToRefs(store);
const props = defineProps({
guide: {
type: Boolean,
default: true,
},
isBattle: {
type: Boolean,
default: false,
},
count: {
type: Number,
default: 15,
},
});
const arrow = ref({});
const distance = ref(0);
const showsimul = ref(false);
const count = ref(props.count);
const timer = ref(null);
const updateTimer = (value) => {
count.value = Math.round(value);
};
onMounted(() => {
audioManager.play("请射箭测试距离");
if (props.isBattle) {
timer.value = setInterval(() => {
count.value -= 1;
if (count.value < 0) clearInterval(timer.value);
}, 1000);
}
uni.$on("update-timer", updateTimer);
});
onBeforeUnmount(() => {
if (timer.value) clearInterval(timer.value);
uni.$off("update-timer", updateTimer);
});
async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.TestDistance) {
distance.value = Number((msg.shootData.distance / 100).toFixed(2));
if (distance.value >= 5) audioManager.play("距离合格");
else audioManager.play("距离不足");
}
}
const simulShoot = async () => {
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
};
onMounted(() => {
uni.$on("socket-inbox", onReceiveMessage);
const accountInfo = uni.getAccountInfoSync();
const envVersion = accountInfo.miniProgram.envVersion;
if (envVersion !== "release") showsimul.value = true;
});
onBeforeUnmount(() => {
uni.$off("socket-inbox", onReceiveMessage);
});
</script>
<template>
<view class="container">
<view class="test-area">
<image
class="text-bg"
src="../../../static/training-difficulty-design/par-bg.png"
mode="widthFix"
/>
<button
class="simul"
@click="simulShoot"
hover-class="none"
v-if="showsimul"
>
模拟射箭
</button>
<view class="warnning-text">
<view class="target-tip">当前靶子为<text class="text-yellow">20cm</text>全环靶,请更换靶子</view>
<block v-if="distance > 0">
<text>当前距离<text class="text-yellow">{{ distance }}</text>米</text>
<text v-if="distance >= 5">已达到距离要求</text>
<text v-else>请调整站位</text>
</block>
<block v-else>
<text>请射箭，测试站距</text>
</block>
</view>
<view class="user-row">
<Avatar :src="user.avatar" :size="35" />
<BowPower />
</view>
</view>
<view v-if="isBattle" class="ready-timer">
<image src="../../../static/test-tip.png" mode="widthFix" />
<view v-if="count >= 0">
<text>具体正式比赛还有</text>
<text>{{ count }}</text>
<text>秒</text>
</view>
<view v-else> 进入中... </view>
</view>
</view>
</template>
<style scoped>
.container {
width: 100vw;
max-height: 70vh;
}
.ready-timer {
display: flex;
flex-direction: column;
align-items: center;
transform: translateY(-10vw);
}
.ready-timer > image:first-child {
width: 40%;
}
.ready-timer > view {
width: 80%;
height: 45px;
background-color: #545454;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
transform: translateY(-8vw);
color: #bebebe;
font-size: 15px;
}
.ready-timer > view > text:nth-child(2) {
color: #fed847;
font-size: 20px;
width: 22px;
text-align: center;
}
.test-area {
width: 100%;
height: auto;
position: relative;
}
.text-bg {
width: 100%;
position: relative;
}
.warnning-text {
color: #fff;
display: flex;
flex-direction: column;
height: 200rpx;
position: absolute;
top: 142rpx;
left: 0;
width: 100%;
font-size: 36rpx;
text-align: center;
}
.target-tip{
margin-bottom: 28rpx;
}
.text-yellow{
color: #FED847;
}
.simul {
position: absolute;
color: #fff;
right: 10px;
top: 30rpx;
}
.user-row{
position: absolute;
bottom: 34rpx;
left: 0rpx;
width: 100%;
padding: 0 34rpx;
box-sizing: border-box;
}
</style>

327
src/pages/training/components/TrainingDifficultyBadge.vue
View File

@@ -1,327 +0,0 @@
<script setup>
import { computed } from "vue";
const lockedBadgeBackground =
"/static/training-difficulty-design/unlock.svg";
const unlockedBadgeBackground =
"/static/training-difficulty-design/lock.svg";
const props = defineProps({
node: {
type: Object,
required: true,
},
active: {
type: Boolean,
default: false,
},
completedProgress: {
type: Number,
default: 0,
},
locked: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["click"]);
const badgeStyle = computed(() => {
const { left, top } = props.node.style || {};
return {
left,
top,
};
});
const progressValue = computed(() => {
const value = Number(props.completedProgress);
if (!Number.isFinite(value)) return 0;
return Math.max(0, Math.min(100, value));
});
const badgeStateStyle = computed(() => {
const label = String(props.node?.label || "");
const estimatedLabelWidthRpx = Math.max(36, label.length * 14);
const labelCircleSizeRpx = Math.max(58, estimatedLabelWidthRpx + 18);
const badgeSizeRpx = Math.max(
124,
Math.round(labelCircleSizeRpx / 0.4727)
);
return {
"--badge-progress": progressValue.value,
"--badge-size": `${badgeSizeRpx}rpx`,
"--badge-label-size": `${labelCircleSizeRpx}rpx`,
"--badge-orbit-offset": "12rpx",
"--badge-locked-ring-offset": "12rpx",
};
});
const showProgress = computed(() => {
return !props.locked;
});
const badgeFillSrc = computed(() => {
return props.locked ? lockedBadgeBackground : unlockedBadgeBackground;
});
const handleClick = () => {
emit("click", props.node);
};
</script>
<template>
<view
class="difficulty-badge"
:class="{
'difficulty-badge--active': active,
'difficulty-badge--progress': showProgress,
'difficulty-badge--locked': locked,
}"
:style="[badgeStyle, badgeStateStyle]"
@click="handleClick"
>
<view class="difficulty-badge__fill">
<image class="difficulty-badge__bg" :src="badgeFillSrc" mode="aspectFit" />
<view v-if="active" class="difficulty-badge__active-orbit">
<view
class="difficulty-badge__active-triangle difficulty-badge__active-triangle--top"
></view>
<view
class="difficulty-badge__active-triangle difficulty-badge__active-triangle--right"
></view>
<view
class="difficulty-badge__active-triangle difficulty-badge__active-triangle--bottom"
></view>
<view
class="difficulty-badge__active-triangle difficulty-badge__active-triangle--left"
></view>
</view>
<view class="difficulty-badge__label-wrap">
<view class="difficulty-badge__label">{{ node.label }}</view>
</view>
</view>
</view>
</template>
<style scoped>
.difficulty-badge,
.difficulty-badge__fill,
.difficulty-badge__label-wrap {
box-sizing: border-box;
}
.difficulty-badge {
position: absolute;
transform: translate(-50%, -50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.difficulty-badge--active {
transform: translate(-50%, -50%) scale(1.04);
}
.difficulty-badge--active::before {
content: "";
position: absolute;
inset: calc(var(--badge-orbit-offset) * -1);
border: 4rpx solid transparent;
border-radius: 50%;
pointer-events: none;
box-sizing: border-box;
}
.difficulty-badge--active::after {
content: "";
position: absolute;
inset: -24rpx;
border: 4rpx solid rgba(254, 208, 152, 0.96);
border-radius: 50%;
box-shadow: inset 0 0 10rpx rgba(254, 208, 152, 0.88),
inset 0 0 22rpx rgba(254, 208, 152, 0.32),
0 0 14rpx rgba(254, 208, 152, 0.92),
0 0 32rpx rgba(254, 208, 152, 0.52),
0 0 52rpx rgba(254, 208, 152, 0.22);
pointer-events: none;
box-sizing: border-box;
}
.difficulty-badge__active-orbit {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + var(--badge-orbit-offset) * 2);
height: calc(100% + var(--badge-orbit-offset) * 2);
border-radius: 50%;
z-index: 3;
pointer-events: none;
transform: translate(-50%, -50%);
animation: badge-orbit-spin 5.4s linear infinite;
transform-origin: center;
}
.difficulty-badge__active-triangle {
position: absolute;
width: 0;
height: 0;
border-style: solid;
z-index: 2;
pointer-events: none;
opacity: 0.92;
filter: drop-shadow(0 0 8rpx rgba(255, 255, 255, 0.45));
}
.difficulty-badge__active-triangle--top {
top: -3rpx;
left: 50%;
transform: translateX(-50%);
border-width: 11rpx 8rpx 0 8rpx;
border-color: #ffffff transparent transparent transparent;
}
.difficulty-badge__active-triangle--right {
right: -3rpx;
top: 50%;
transform: translateY(-50%);
border-width: 8rpx 11rpx 8rpx 0;
border-color: transparent #ffffff transparent transparent;
}
.difficulty-badge__active-triangle--bottom {
bottom: -3rpx;
left: 50%;
transform: translateX(-50%);
border-width: 0 8rpx 11rpx 8rpx;
border-color: transparent transparent #ffffff transparent;
}
.difficulty-badge__active-triangle--left {
left: -3rpx;
top: 50%;
transform: translateY(-50%);
border-width: 8rpx 0 8rpx 11rpx;
border-color: transparent transparent transparent #ffffff;
}
.difficulty-badge__fill {
width: var(--badge-size);
height: var(--badge-size);
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.difficulty-badge__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
}
.difficulty-badge--active .difficulty-badge__fill::before,
.difficulty-badge--active .difficulty-badge__fill::after {
content: none;
}
.difficulty-badge--progress .difficulty-badge__fill::before,
.difficulty-badge--progress .difficulty-badge__fill::after {
content: "";
position: absolute;
inset: -12rpx;
padding: 6rpx;
border-radius: inherit;
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}
.difficulty-badge--progress .difficulty-badge__fill::before {
background: rgba(255, 255, 255, 0.35);
}
.difficulty-badge--progress .difficulty-badge__fill::after {
background: conic-gradient(
from -90deg,
rgba(254, 208, 152, 1) 0,
rgba(255, 229, 198, 1) calc(var(--badge-progress) * 1%),
transparent calc(var(--badge-progress) * 1%) 100%
);
}
.difficulty-badge--active .difficulty-badge__label,
.difficulty-badge--progress .difficulty-badge__label {
color: #333333;
}
.difficulty-badge--locked {
opacity: 1;
}
.difficulty-badge--locked::before {
content: "";
position: absolute;
inset: calc(var(--badge-locked-ring-offset) * -1);
border: 2rpx solid rgba(160, 160, 160, 0.5);
border-radius: 50%;
pointer-events: none;
box-sizing: border-box;
}
.difficulty-badge--locked .difficulty-badge__label {
color: rgba(51, 51, 51, 0.54);
}
.difficulty-badge__label-wrap {
width: var(--badge-label-size);
height: var(--badge-label-size);
border-radius: 50%;
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
margin-top: -5rpx;
}
.difficulty-badge__label {
color: rgba(51, 51, 51, 0.7);
font-size: 24rpx;
max-width: 100%;
height: 34rpx;
line-height: 34rpx;
font-family: "PingFang SC", sans-serif;
font-weight: 600;
text-align: center;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
@keyframes badge-orbit-spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>

86
src/pages/training/components/TrainingDifficultyPreviewCard.vue
View File

@@ -1,86 +0,0 @@
<script setup>
import { computed } from "vue";
const props = defineProps({
title: {
type: String,
default: "",
},
lines: {
type: Array,
default: () => [],
},
});
const previewLines = computed(() => {
return props.lines.map((line) => String(line || "").trim()).filter(Boolean);
});
</script>
<template>
<view class="difficulty-preview">
<image
class="difficulty-preview__bg"
src="/static/training-difficulty-design/text.png"
mode="widthFix"
/>
<view class="difficulty-preview__content">
<text class="difficulty-preview__title">{{ title }}</text>
<view class="difficulty-preview__copy">
<text
v-for="(line, index) in previewLines"
:key="`${line}-${index}`"
class="difficulty-preview__line"
>
{{ line }}
</text>
</view>
</view>
</view>
</template>
<style scoped>
.difficulty-preview {
position: relative;
width: 100%;
}
.difficulty-preview__bg {
display: block;
width: 100%;
}
.difficulty-preview__content {
position: absolute;
top: 28rpx;
left: 30rpx;
box-sizing: border-box;
width: 486rpx;
}
.difficulty-preview__title {
display: block;
color: #ffd543;
font-size: 24rpx;
line-height: 34rpx;
font-family: "PingFang SC", sans-serif;
text-align: center;
}
.difficulty-preview__copy {
width: 80%;
margin: 0 auto;
display: block;
color: #ffffff;
font-size: 24rpx;
line-height: 34rpx;
font-family: "PingFang SC", sans-serif;
text-align: center;
}
.difficulty-preview__line {
display: block;
}
</style>

81
src/pages/training/components/TrainingDifficultyStartButton.vue
View File

@@ -1,81 +0,0 @@
<script setup>
const props = defineProps({
text: {
type: String,
default: "开始",
},
});
const emit = defineEmits(["click"]);
const handleClick = () => {
emit("click");
};
</script>
<template>
<button
class="difficulty-start"
hover-class="difficulty-start--hover"
@click="handleClick"
>
<image
class="difficulty-start__button"
src="/static/training-difficulty-design/btn.png"
mode="widthFix"
/>
</button>
</template>
<style scoped>
.difficulty-start {
position: relative;
width: 302rpx;
height: 170rpx;
padding: 0;
border: 0;
background: transparent;
margin: 0 auto;
}
.difficulty-start::after {
border: 0;
}
.difficulty-start--hover {
transform: translateY(2rpx) scale(0.99);
}
.difficulty-start__mascot {
position: absolute;
left: 50%;
top: 0;
z-index: 1;
width: 112rpx;
transform: translateX(-50%);
}
.difficulty-start__button {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
}
.difficulty-start__text {
position: absolute;
left: 0;
right: 0;
bottom: 58rpx;
z-index: 3;
color: #9f4d00;
font-size: 64rpx;
line-height: 76rpx;
text-align: center;
font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
font-weight: 800;
text-shadow: 0 3rpx 0 rgba(255, 245, 205, 0.78);
}
</style>

801
src/pages/training/difficulty.vue
View File

@@ -1,801 +0,0 @@
<script setup>
import { computed, nextTick, ref } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import TrainingDifficultyBadge from "./components/TrainingDifficultyBadge.vue";
import TrainingDifficultyPreviewCard from "./components/TrainingDifficultyPreviewCard.vue";
import TrainingDifficultyStartButton from "./components/TrainingDifficultyStartButton.vue";
import { getTrainingDifficultyListAPI } from "@/apis";
// 难度页接口数据源：
// 1. 接口：GET /training/difficulty/list?type=base/endurance/precision/rhythm
// 2. 当前进度：接口 user_levels / list.completed，路由参数可覆盖选中难度
const trainingDifficultyStorageKey = "training-selection";
const trainingDifficultyRefreshEvent = "training-difficulty-refresh";
const defaultTrainingType = "precision";
const defaultUnlockedDifficultyId = "lv1";
const trainingTypeMetaMap = {
base: {
key: "base",
title: "基础训练",
},
endurance: {
key: "endurance",
title: "耐力训练",
},
precision: {
key: "precision",
title: "精准训练",
},
rhythm: {
key: "rhythm",
title: "节奏训练",
},
};
const routeModeTypeMap = {
basic: "base",
base: "base",
endurance: "endurance",
precision: "precision",
rhythm: "rhythm",
};
const defaultTargetType = 1;
const resolveTrainingType = (mode) => {
const normalizedMode = String(mode || "").toLowerCase();
return routeModeTypeMap[normalizedMode] || defaultTrainingType;
};
const createDifficultyId = (level) => `lv${level}`;
const toNumber = (value, fallback = 0) => {
const numberValue = Number(value);
return Number.isFinite(numberValue) ? numberValue : fallback;
};
const clampProgress = (value) => {
return Math.min(Math.max(value, 0), 100);
};
const getDifficultyProgress = (item = {}) => {
const completedCnt = toNumber(item.completed_cnt);
const promoteCnt = toNumber(item.promote_cnt);
if (item.completed) {
return 100;
}
if (promoteCnt <= 0) {
return 0;
}
return clampProgress(Math.round((completedCnt / promoteCnt) * 100));
};
const checkDifficultyCompleted = (item = {}) => {
const completedCnt = toNumber(item.completed_cnt);
const promoteCnt = toNumber(item.promote_cnt);
return Boolean(item.completed) || (promoteCnt > 0 && completedCnt >= promoteCnt);
};
const getDifficultyModeText = (mode) => {
return Number(mode) === 1 ? "随机区域+指定环数" : "随机区域命中";
};
const createEmptyModeConfig = (type = defaultTrainingType) => {
const meta = trainingTypeMetaMap[type] || trainingTypeMetaMap[defaultTrainingType];
return {
key: meta.key,
title: meta.title,
nodes: [],
details: {},
activeDifficultyId: defaultUnlockedDifficultyId,
progressMap: {},
};
};
const createDifficultySummary = (item = {}) => {
const desc = String(item.desc || "").trim();
const type = item.type;
const arrows = toNumber(item.arrows);
const timeLimit = toNumber(item.time_limit);
const hitReq = toNumber(item.hit_req);
const totalReq = toNumber(item.total_req);
const blocks = toNumber(item.blocks);
const promoteCnt = toNumber(item.promote_cnt);
const timeText = timeLimit > 0 ? `${timeLimit}秒内完成` : "不限时完成";
const promoteText = promoteCnt > 0 ? `完成${promoteCnt}次晋级` : "";
const summaryMap = {
base: [
desc || (hitReq > 0 ? `每箭命中${hitReq}环以上` : "上靶即可"),
[`${arrows}箭`, promoteText].filter(Boolean).join(" · "),
],
endurance: [
desc || `${timeText}${arrows}箭`,
[`累计${totalReq}环`, promoteText].filter(Boolean).join(" · "),
],
precision: [
desc || `命中${blocks}个指定区域`,
[
`${arrows}箭`,
timeText,
getDifficultyModeText(item.mode),
promoteText,
]
.filter(Boolean)
.join(" · "),
],
rhythm: [
desc || `间隔${timeLimit}秒射击`,
[
`${arrows}箭`,
hitReq > 0 ? `每箭${hitReq}环以上` : "上靶即可",
getDifficultyModeText(item.mode),
promoteText,
]
.filter(Boolean)
.join(" · "),
],
};
return (summaryMap[type] || [desc]).filter(Boolean);
};
const normalizeTrainingDifficultyConfig = (result, type) => {
const meta = trainingTypeMetaMap[type] || trainingTypeMetaMap[defaultTrainingType];
const list = Array.isArray(result?.list) ? result.list : [];
const rawItems = list.filter((item) => !item?.type || item.type === meta.key);
const difficultyItems = rawItems
.map((item) => {
const level = toNumber(item?.difficulty);
if (level <= 0) {
return null;
}
const id = createDifficultyId(level);
const label = `Lv${level}`;
return {
...item,
recordId: item.id,
completedCnt: toNumber(item.completed_cnt),
promoteCnt: toNumber(item.promote_cnt),
id,
level,
label,
title: `${label}难度`,
summary: createDifficultySummary(item),
startText: "开始",
targetPaperType: "20CM全环靶",
};
})
.filter(Boolean)
.sort((first, second) => first.level - second.level);
const maxLevel = difficultyItems.reduce(
(currentMax, item) => Math.max(currentMax, item.level),
0
);
const completedLevelFromList = difficultyItems.reduce((currentMax, item) => {
return checkDifficultyCompleted(item)
? Math.max(currentMax, item.level)
: currentMax;
}, 0);
const userCompletedLevel = toNumber(result?.user_levels?.[meta.key]);
const highestCompletedLevel = userCompletedLevel || completedLevelFromList;
const unlockedLevel = maxLevel
? Math.min(Math.max(highestCompletedLevel + 1, 1), maxLevel)
: 1;
return {
key: meta.key,
title: meta.title,
nodes: difficultyItems.map((item) => ({
id: item.id,
label: item.label,
})),
details: Object.fromEntries(
difficultyItems.map((item) => [item.id, item])
),
activeDifficultyId: createDifficultyId(unlockedLevel),
progressMap: Object.fromEntries(
difficultyItems.map((item) => [item.id, getDifficultyProgress(item)])
),
};
};
// 难度轴布局参数，节点按“等级越低越靠下”的方式排列。
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 pageConfig = ref(createEmptyModeConfig(defaultTrainingType));
const unlockedDifficultyId = ref(defaultUnlockedDifficultyId);
const selectedDifficultyId = ref(defaultUnlockedDifficultyId);
const nodesScrollTop = ref(0);
const nodesScrollWithAnimation = ref(false);
const routeOptions = ref({});
const needRefreshProgress = ref(false);
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 normalizeRouteOptions = (options = {}) => {
const difficultyLevel = toNumber(options.difficulty);
const completedDifficultyLevel = toNumber(options.completedDifficulty);
return {
...options,
difficultyId:
options.difficultyId ||
(difficultyLevel > 0 ? createDifficultyId(difficultyLevel) : ""),
completedDifficultyId:
options.completedDifficultyId ||
(completedDifficultyLevel > 0
? createDifficultyId(completedDifficultyLevel)
: ""),
};
};
const applyPageState = (options = {}, config) => {
const safeOptions = normalizeRouteOptions(options);
const nodes = createDifficultyNodes(config);
const currentUnlockedId = resolveUnlockedDifficultyId(
safeOptions,
config,
nodes
);
pageConfig.value = config;
unlockedDifficultyId.value = currentUnlockedId;
selectedDifficultyId.value = resolveSelectedDifficultyId(
safeOptions.difficultyId,
nodes,
currentUnlockedId
);
nextTick(() => {
initScrollPosition();
});
};
const initPageState = async (options = {}, refreshOptions = {}) => {
const { keepCurrent = false } = refreshOptions;
const trainingType = resolveTrainingType(options.mode);
const fallbackConfig = createEmptyModeConfig(trainingType);
if (!keepCurrent) {
pageConfig.value = fallbackConfig;
}
try {
const result = await getTrainingDifficultyListAPI(trainingType);
applyPageState(
options,
normalizeTrainingDifficultyConfig(result, trainingType)
);
} catch (error) {
console.log("training difficulty load failed", error);
if (!keepCurrent) {
applyPageState(options, fallbackConfig);
}
uni.showToast({
title: "训练难度加载失败",
icon: "none",
});
}
};
const cleanQueryValue = (value) => {
if (value === undefined || value === null || value === "") {
return "";
}
if (typeof value === "number" && !Number.isFinite(value)) {
return "";
}
return value;
};
const createPracticeQuery = (difficulty) => {
const trainingType = pageConfig.value.key || defaultTrainingType;
const commonQuery = {
type: trainingType,
difficultyId: difficulty.id,
difficulty: difficulty.level,
recordId: difficulty.recordId,
arrows: toNumber(difficulty.arrows, 12),
time: toNumber(difficulty.time_limit, 120) || 120,
target: defaultTargetType,
};
const typedQueryMap = {
base: {
hitReq: toNumber(difficulty.hit_req),
},
endurance: {
totalReq: toNumber(difficulty.total_req),
},
precision: {
blocks: toNumber(difficulty.blocks),
mode: toNumber(difficulty.mode),
},
rhythm: {
hitReq: toNumber(difficulty.hit_req),
mode: toNumber(difficulty.mode),
},
};
return {
...commonQuery,
...(typedQueryMap[trainingType] || {}),
};
};
const createPracticeUrl = (difficulty) => {
const query = Object.entries(createPracticeQuery(difficulty))
.map(([key, value]) => [key, cleanQueryValue(value)])
.filter(([, value]) => value !== "")
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join("&");
return `/pages/training/practise-one${query ? `?${query}` : ""}`;
};
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,
targetType: defaultTargetType,
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.navigateTo({
url: createPracticeUrl(selectedDifficulty.value),
});
};
const markProgressRefresh = () => {
needRefreshProgress.value = true;
};
onLoad((options = {}) => {
routeOptions.value = { ...options };
uni.$on(trainingDifficultyRefreshEvent, markProgressRefresh);
initPageState(options);
});
onShow(() => {
if (!needRefreshProgress.value) {
return;
}
needRefreshProgress.value = false;
initPageState(routeOptions.value, {
keepCurrent: true,
});
});
onUnload(() => {
uni.$off(trainingDifficultyRefreshEvent, markProgressRefresh);
});
</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>

885
src/pages/training/index.vue
View File

@@ -1,885 +0,0 @@
<script setup>
import { nextTick, onMounted, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import TargetPicker from "@/components/TargetPicker.vue";
import { getPersonalTrainingAPI } from "@/apis";
const checkedIcon = "../../static/training-home/done.png";
const missedIcon = "../../static/training-home/missed.png";
// 后端训练项目 id 与难度页 mode 参数的映射关系。
const trainingModeRouteMap = {
base: "basic",
endurance: "endurance",
precision: "precision",
rhythm: "rhythm",
strength: "power",
};
// 训练项目卡片右侧主图标。
const trainingModeIconMap = {
base_bow: "../../static/training-home/img_22.png",
bow: "../../static/training-home/img_3.png",
target: "../../static/training-home/img_4.png",
wave: "../../static/training-home/img_5.png",
muscle: "../../static/training-home/img_6.png",
};
// 训练项目卡片标题图，按接口 id 映射本地资源。
const trainingModeTitleImageMap = {
endurance: "../../static/training-home/nailixunlian.png",
precision: "../../static/training-home/jingzhunxunlian.png",
rhythm: "../../static/training-home/jiezouxunlian.png",
strength: "../../static/training-home/liliangxulian.png",
};
const defaultWeekDays = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const defaultRadarDimensions = [
{ name: "基础", score: 0 },
{ name: "精准", score: 0 },
{ name: "力量", score: 0 },
{ name: "节奏", score: 0 },
{ name: "耐力", score: 0 },
];
// 页面始终直接消费接口字段，这里只保留一份兜底结构，避免模板访问空值。
const createDefaultTrainingData = () => ({
week_days: defaultWeekDays.map((day) => ({ day, status: "cross" })),
stats: {
total_training_days: 0,
total_arrows: 0,
hit_rate: 0,
endurance_shoot_speed: 0,
total_calories: 0,
overtake_rate: 0,
},
radar: {
dimensions: defaultRadarDimensions,
},
training_items: [],
});
const trainingData = ref(createDefaultTrainingData());
const pageMounted = ref(false);
const showRoutineTargetPicker = ref(false);
const trainingRadarCanvasId = "training-home-radar";
const radarImageWidth = 225;
const radarImageHeight = 224;
const radarFigureWidthRpx = 448;
const radarFigureHeightRpx = Math.round(
(radarFigureWidthRpx * radarImageHeight) / radarImageWidth
);
const radarCanvasWidth = Math.round(uni.upx2px(radarFigureWidthRpx));
const radarCanvasHeight = Math.round(uni.upx2px(radarFigureHeightRpx));
const radarScaleX = radarCanvasWidth / radarImageWidth;
const radarScaleY = radarCanvasHeight / radarImageHeight;
const radarScale = Math.min(radarScaleX, radarScaleY);
const radarCenterX = 112.0624 * radarScaleX;
const radarCenterY = 111.4645 * radarScaleY;
const radarStrokeWidth = Math.max(1, 2 * radarScale);
const radarPointRadius = Math.max(2.5, 3.5 * radarScale);
const radarOuterRadiusX = 110.7089 * radarScaleX;
const radarOuterRadiusY = 110.7089 * radarScaleY;
const radarMaxValue = 100;
const radarFigureStyle = {
width: `${radarFigureWidthRpx}rpx`,
height: `${radarFigureHeightRpx}rpx`,
};
const formatValue = (value, digits = 1) => {
const numberValue = Number(value);
if (!Number.isFinite(numberValue)) return "--";
return String(Number(numberValue.toFixed(digits)));
};
const getLevelText = (item) => {
if (!item) return "";
const level = Number(item.current_level) || 0;
return item.is_locked ? `Coming! LV${level}` : `当前进度 LV${level} >`;
};
// 卡路里字段按需求做 K / W 缩写展示。
const getCaloriesValue = (value) => {
const numberValue = Number(value);
if (!Number.isFinite(numberValue)) return "--";
if (numberValue >= 10000) return `${formatValue(numberValue / 10000)}W`;
if (numberValue >= 1000) return `${formatValue(numberValue / 1000)}K`;
return formatValue(numberValue, 0);
};
const getTrainingIcon = (item = {}) =>
trainingModeIconMap[item.icon] || trainingModeIconMap.bow;
const getTrainingTitleImage = (item = {}) =>
trainingModeTitleImageMap[item.id] || "";
const getTrainingMode = (item = {}) =>
trainingModeRouteMap[item.id] || item.id || "";
const getRadarPoint = (centerX, centerY, radiusX, radiusY, angle) => ({
x: centerX + radiusX * Math.cos(angle),
y: centerY + radiusY * Math.sin(angle),
});
// 雷达图直接使用接口的 5 维 score，按 0-100 等比映射到顶点位置。
const drawRadar = () => {
const dimensions = Array.isArray(trainingData.value.radar?.dimensions)
? trainingData.value.radar.dimensions.slice(0, 5)
: [];
if (dimensions.length !== 5) return;
const ctx = uni.createCanvasContext(trainingRadarCanvasId);
const angles = dimensions.map(
(_, index) => (-90 + index * 72) * (Math.PI / 180)
);
ctx.clearRect(0, 0, radarCanvasWidth, radarCanvasHeight);
const points = dimensions.map((item, index) => {
const normalized = Math.max(
0,
Math.min(Number(item.score) || 0, radarMaxValue)
);
const progress = normalized / radarMaxValue;
return getRadarPoint(
radarCenterX,
radarCenterY,
radarOuterRadiusX * progress,
radarOuterRadiusY * progress,
angles[index]
);
});
ctx.beginPath();
points.forEach((point, index) => {
if (index === 0) ctx.moveTo(point.x, point.y);
else ctx.lineTo(point.x, point.y);
});
ctx.closePath();
ctx.setFillStyle("rgba(255, 209, 154, 0.26)");
ctx.fill();
ctx.setStrokeStyle("rgba(220, 162, 92, 0.92)");
ctx.setLineWidth(radarStrokeWidth);
ctx.stroke();
points.forEach((point) => {
ctx.beginPath();
ctx.arc(point.x, point.y, radarPointRadius, 0, 2 * Math.PI);
ctx.setFillStyle("rgba(221, 162, 90, 1)");
ctx.fill();
});
ctx.beginPath();
ctx.arc(radarCenterX, radarCenterY, radarPointRadius, 0, 2 * Math.PI);
ctx.setFillStyle("rgba(125, 107, 83, 0.65)");
ctx.fill();
ctx.draw();
};
// 小程序 canvas 首次渲染时机不稳定，延后一帧再绘制更稳。
const refreshRadar = async () => {
await nextTick();
setTimeout(() => {
drawRadar();
}, 30);
};
const loadPersonalTrainingData = async () => {
try {
const result = await getPersonalTrainingAPI();
trainingData.value = {
week_days:
Array.isArray(result?.week_days) && result.week_days.length
? result.week_days
: createDefaultTrainingData().week_days,
stats: {
total_training_days: result?.stats?.total_training_days ?? 0,
total_arrows: result?.stats?.total_arrows ?? 0,
hit_rate: result?.stats?.hit_rate ?? 0,
endurance_shoot_speed: result?.stats?.endurance_shoot_speed ?? 0,
total_calories: result?.stats?.total_calories ?? 0,
overtake_rate: result?.stats?.overtake_rate ?? 0,
},
radar: {
dimensions:
Array.isArray(result?.radar?.dimensions) &&
result.radar.dimensions.length === 5
? result.radar.dimensions
: createDefaultTrainingData().radar.dimensions,
},
training_items: Array.isArray(result?.training_items)
? result.training_items
: [],
};
} catch (error) {
console.log("personal training load failed", error);
trainingData.value = createDefaultTrainingData();
} finally {
await refreshRadar();
}
};
const openTrainingRecord = () => {
uni.navigateTo({
url: "/pages/my-growth?tab=2",
});
};
const openTrainingItem = (item = {}) => {
const mode = getTrainingMode(item);
if (!mode) return;
if (item.is_locked) {
uni.showToast({
title: `${item.name || "训练"} 暂未开放`,
icon: "none",
});
return;
}
uni.navigateTo({
url: `/pages/training/difficulty?mode=${mode}`,
});
};
const openRoutineTraining = () => {
showRoutineTargetPicker.value = true;
};
const handleRoutineTargetConfirm = (target) => {
showRoutineTargetPicker.value = false;
uni.navigateTo({
url: `/pages/practise-one?target=${target}`,
});
};
// 首次进入页面时拉取数据并完成雷达图初始化。
onMounted(async () => {
await loadPersonalTrainingData();
pageMounted.value = true;
});
// 从其他页面返回时刷新训练数据，保持进度与推荐状态最新。
onShow(async () => {
if (!pageMounted.value) return;
await loadPersonalTrainingData();
});
</script>
<template>
<Container :showBackToGame="true" :bgType="7" bgColor="#050b19">
<view class="training-home">
<view class="week-grid">
<view
v-for="item in trainingData.week_days"
:key="item.day"
class="week-item"
>
<view class="week-item-bg"></view>
<image
class="week-item-icon"
:src="item.status === 'checked' ? checkedIcon : missedIcon"
mode="widthFix"
/>
<text
class="week-item-label"
:class="{ 'week-item-label-active': item.status === 'checked' }"
>
{{ item.day }}
</text>
</view>
</view>
<view class="stats-card">
<view class="stats-card-bg"></view>
<image
class="stats-quote stats-quote-left"
src="../../static/training-home/img_17.png"
mode="widthFix"
/>
<image
class="stats-quote stats-quote-right"
src="../../static/training-home/img_16.png"
mode="widthFix"
/>
<view class="stats-grid">
<view class="stats-item">
<view class="stats-value-row">
<view class="stats-value-group">
<text class="stats-value">
{{ formatValue(trainingData.stats.total_training_days, 0) }}
</text>
<text class="stats-unit">天</text>
<view class="stats-value-decoration"></view>
</view>
</view>
<text class="stats-label">共训练</text>
</view>
<view class="stats-item">
<view class="stats-value-row">
<view class="stats-value-group">
<text class="stats-value">
{{ formatValue(trainingData.stats.total_arrows, 0) }}
</text>
<text class="stats-unit">支</text>
<view class="stats-value-decoration"></view>
</view>
</view>
<text class="stats-label">累计射箭</text>
</view>
<view class="stats-item">
<view class="stats-value-row">
<view class="stats-value-group">
<text class="stats-value">
{{ formatValue(trainingData.stats.hit_rate) }}
</text>
<text class="stats-unit">%</text>
<view class="stats-value-decoration"></view>
</view>
</view>
<text class="stats-label">命中率</text>
</view>
<view class="stats-item">
<view class="stats-value-row">
<view class="stats-value-group">
<text class="stats-value">
{{ formatValue(trainingData.stats.endurance_shoot_speed, 0) }}
</text>
<text class="stats-unit">支/分钟</text>
<view class="stats-value-decoration"></view>
</view>
</view>
<text class="stats-label">耐力射击</text>
</view>
<view class="stats-item">
<view class="stats-value-row">
<view class="stats-value-group">
<text class="stats-value">
{{ getCaloriesValue(trainingData.stats.total_calories) }}
</text>
<text class="stats-unit">卡路里</text>
<view class="stats-value-decoration"></view>
</view>
</view>
<text class="stats-label">共消耗</text>
</view>
</view>
</view>
<view class="radar-section">
<view class="record-bubble" @click="openTrainingRecord">
<image
class="record-bubble-bg"
src="../../static/training-home/img_28.png"
mode="widthFix"
/>
<view class="record-bubble-copy">
<view class="record-main">
已超越<text class="record-main-highlight">{{ formatValue(trainingData.stats.overtake_rate) }}%</text>对手
</view>
<view class="record-sub-row">
<text class="record-sub-text">我的训练记录</text>
<image
class="record-arrow"
src="../../static/training-home/img_7.png"
mode="widthFix"
/>
</view>
</view>
</view>
<view class="radar-board">
<text class="radar-label radar-label-top">
{{ trainingData.radar.dimensions[0].name }}
</text>
<text class="radar-label radar-label-right">
{{ trainingData.radar.dimensions[1].name }}
</text>
<text class="radar-label radar-label-bottom-right">
{{ trainingData.radar.dimensions[2].name }}
</text>
<text class="radar-label radar-label-bottom-left">
{{ trainingData.radar.dimensions[3].name }}
</text>
<text class="radar-label radar-label-left">
{{ trainingData.radar.dimensions[4].name }}
</text>
<view class="radar-figure" :style="radarFigureStyle">
<image
class="radar-grid-image"
:style="radarFigureStyle"
src="../../static/training-home/img_19.png"
/>
<canvas
:canvas-id="trainingRadarCanvasId"
:id="trainingRadarCanvasId"
class="radar-canvas"
:style="radarFigureStyle"
:width="radarCanvasWidth"
:height="radarCanvasHeight"
/>
<image
class="radar-mascot"
src="../../static/training-home/img_21.png"
mode="widthFix"
/>
</view>
</view>
</view>
<view class="featured-card" @click="openRoutineTraining">
<image
class="featured-card-bg"
src="../../static/training-home/img_22.png"
mode="widthFix"
/>
<view class="featured-card-mask"></view>
<view class="featured-card-copy">
<text class="featured-card-title">常规训练</text>
<text class="featured-card-subtitle">12箭练习</text>
</view>
</view>
<view class="mode-grid">
<view
v-for="item in trainingData.training_items.filter((item) => item.id !== 'strength')"
:key="item.id"
class="mode-card"
@click="openTrainingItem(item)"
>
<view v-if="item.is_recommended" class="mode-tag">推荐</view>
<view class="mode-card-copy">
<image
v-if="getTrainingTitleImage(item)"
class="mode-card-title-image"
:src="getTrainingTitleImage(item)"
mode="widthFix"
/>
<text v-else class="mode-card-title">{{ item.name }}</text>
<text class="mode-card-progress">{{ getLevelText(item) }}</text>
</view>
<image
class="mode-card-icon"
:src="getTrainingIcon(item)"
mode="aspectFit"
/>
</view>
</view>
</view>
<TargetPicker
:show="showRoutineTargetPicker"
:onClose="() => (showRoutineTargetPicker = false)"
:onConfirm="handleRoutineTargetConfirm"
/>
</Container>
</template>
<style scoped>
.training-home {
position: relative;
overflow: hidden;
padding: 18rpx 20rpx 60rpx 20rpx;
}
.week-grid {
display: flex;
justify-content: space-between;
margin-top: 18rpx;
}
.week-item {
position: relative;
width: 92rpx;
height: 96rpx;
border-radius: 16rpx;
overflow: hidden;
}
.week-item-bg {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
opacity: 0.5;
}
.week-item-icon {
position: absolute;
left: 28rpx;
top: 14rpx;
width: 36rpx;
}
.week-item-label {
position: absolute;
left: 0;
right: 0;
bottom: 10rpx;
color: rgba(255, 255, 255, 0.6);
font-size: 20rpx;
text-align: center;
line-height: 28rpx;
}
.week-item-label-active {
color: #e7ba80;
}
.stats-card {
position: relative;
margin-top: 32rpx;
width: 100%;
height: 124rpx;
overflow: hidden;
border-radius: 24rpx;
}
.stats-card-bg {
position: absolute;
inset: 0;
background: linear-gradient(180deg, #2f2d2b 0%, #252831 100%);
opacity: 0.5;
}
.stats-quote {
position: absolute;
z-index: 1;
width: 53rpx;
height: 50rpx;
}
.stats-quote-left {
left: 4rpx;
top: 4rpx;
}
.stats-quote-right {
right: 4rpx;
bottom: 4rpx;
}
.stats-grid {
position: absolute;
z-index: 1;
left: 36rpx;
right: 36rpx;
top: 22rpx;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.stats-item {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.stats-value-row {
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
height: 48rpx;
line-height: 48rpx;
}
.stats-value-group {
position: relative;
display: inline-flex;
align-items: flex-end;
justify-content: center;
min-width: 72rpx;
white-space: nowrap;
}
.stats-value-decoration {
position: absolute;
left: 0;
right: 0;
bottom: 6rpx;
min-width: 72rpx;
height: 12rpx;
border-radius: 6rpx;
background: linear-gradient(133deg, #ffd19a 0%, #a17636 100%);
opacity: 0.5;
}
.stats-value {
position: relative;
z-index: 1;
color: #fff;
font-size: 34rpx;
font-family: Helvetica, Arial, sans-serif;
font-weight: 500;
line-height: 46rpx;
}
.stats-unit {
position: relative;
z-index: 1;
margin-left: 4rpx;
padding-bottom: 8rpx;
color: #fff;
font-size: 20rpx;
line-height: 28rpx;
opacity: 0.6;
}
.stats-label {
display: inline-block;
margin-top: 6rpx;
color: #fcce96;
font-size: 20rpx;
line-height: 28rpx;
opacity: 0.6;
}
.radar-section {
position: relative;
padding-top: 34rpx;
}
.record-bubble {
position: absolute;
right: 0;
top: 10rpx;
width: 202rpx;
height: 122rpx;
z-index: 3;
}
.record-bubble-bg {
width: 202rpx;
}
.record-bubble-copy {
position: absolute;
left: 0;
right: 0;
top: 24rpx;
text-align: center;
}
.record-main {
color: #fff;
font-size: 24rpx;
line-height: 30rpx;
}
.record-main-highlight {
color: #e7ba80;
}
.record-sub-row {
margin-top: 4rpx;
display: flex;
align-items: center;
justify-content: center;
}
.record-sub-text {
color: #ffd947;
font-size: 24rpx;
height: 30rpx;
line-height: 30rpx;
}
.record-arrow {
width: 24rpx;
}
.radar-board {
position: relative;
width: 100%;
height: 514rpx;
}
.radar-label {
position: absolute;
color: rgba(255, 255, 255, 0.78);
font-size: 28rpx;
line-height: 40rpx;
}
.radar-label-top {
left: 350rpx;
top: 14rpx;
transform: translateX(-50%);
opacity: 0.5;
}
.radar-label-right {
right: 77rpx;
top: 190rpx;
opacity: 0.5;
}
.radar-label-bottom-right {
right: 170rpx;
bottom: 18rpx;
opacity: 0.5;
}
.radar-label-bottom-left {
left: 170rpx;
bottom: 18rpx;
opacity: 0.5;
}
.radar-label-left {
left: 75rpx;
top: 180rpx;
opacity: 0.5;
}
.radar-figure {
position: absolute;
left: 50%;
top: 54rpx;
transform: translateX(-50%);
overflow: visible;
}
.radar-grid-image,
.radar-canvas {
position: absolute;
left: 0;
top: 0;
}
.radar-mascot {
position: absolute;
right: 38rpx;
top: 0;
width: 92rpx;
}
.featured-card {
position: relative;
width: 100%;
height: 150rpx;
margin-top: 70rpx;
border-radius: 16rpx;
overflow: hidden;
}
.featured-card-bg {
width: 100%;
}
.featured-card-mask {
position: absolute;
left: 0;
top: 0;
width: 278rpx;
height: 150rpx;
background: linear-gradient(90deg, #ffdaa0 0%, #f5c580 74%, rgba(245, 197, 128, 0) 100%);
}
.featured-card-copy {
position: absolute;
left: 30rpx;
top: 34rpx;
display: flex;
flex-direction: column;
}
.featured-card-title {
display: block;
color: #895409;
font-size: 34rpx;
font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
font-weight: 700;
line-height: 42rpx;
}
.featured-card-subtitle {
display: block;
margin-top: 10rpx;
color: #895409;
font-size: 22rpx;
line-height: 32rpx;
opacity: 0.72;
}
.mode-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16rpx 18rpx;
margin-top: 16rpx;
}
.mode-card {
position: relative;
height: 150rpx;
box-shadow: inset 2rpx 2rpx 6rpx 0rpx rgba(255, 255, 255, 0.27);
border-radius: 16rpx;
border: 2rpx solid rgba(235, 184, 123, 0.5);
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.mode-tag {
position: absolute;
left: 0;
top: 0;
width: 72rpx;
height: 34rpx;
line-height: 34rpx;
text-align: center;
font-size: 20rpx;
color: #000;
border-bottom-right-radius: 16rpx;
background: linear-gradient(133deg, #ffd19a 0%, #a17636 100%);
}
.mode-card-copy {
position: absolute;
left: 30rpx;
top: 40rpx;
}
.mode-card-title {
display: block;
background-image: linear-gradient(
133deg,
rgba(235, 184, 123, 0.8) 0%,
rgba(181, 140, 78, 0.8) 100%
);
color: #e7ba80;
font-size: 32rpx;
font-family: "AlimamaShuHeiTi-Bold", "PingFang SC", sans-serif;
font-weight: 700;
line-height: 38rpx;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.mode-card-title-image {
display: block;
width: 128rpx;
}
.mode-card-progress {
display: block;
margin-top: 14rpx;
color: #fcce96;
font-size: 22rpx;
line-height: 32rpx;
opacity: 0.5;
}
.mode-card-icon {
position: absolute;
right: 12rpx;
top: 14rpx;
width: 124rpx;
height: 124rpx;
}
</style>

537
src/pages/training/practise-one.vue
View File

@@ -1,537 +0,0 @@
<script setup>
import { computed, ref, onMounted, onBeforeUnmount } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import ShootProgress from "./components/ShootProgress.vue";
import BowTarget from "./components/BowTarget.vue";
import ScorePanel2 from "./components/ScorePanel2.vue";
import ScoreResult from "./components/ScoreResult.vue";
import Avatar from "@/components/Avatar.vue";
import BowPower from "@/components/BowPower.vue";
import TestDistance from "./components/TestDistance.vue";
import BubbleTip from "./components/BubbleTip.vue";
import audioManager from "@/audioManager";
import {
createPractiseAPI,
startPractiseAPI,
endPractiseAPI,
getPractiseAPI,
} from "@/apis";
import { sharePractiseData } from "@/canvas";
import { wxShare, debounce } from "@/util";
import { MESSAGETYPESV2, roundsName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const sound = ref(true);
const start = ref(false);
const pageStages = Object.freeze({
DISTANCE: "distance",
SHOOTING: "shooting",
RESULT: "result",
LOADING: "loading",
});
const pageStage = ref(pageStages.DISTANCE);
const scores = ref([]);
const defaultTotal = 12;
const defaultShootTime = 120;
const defaultTargetType = 1;
const total = ref(defaultTotal);
const shootTime = ref(defaultShootTime);
const practiseResult = ref({});
const practiseId = ref("");
const showGuide = ref(false);
const tips = ref("");
const targetType = ref(defaultTargetType);
const trainingParams = ref({});
const trainingDifficultyRefreshEvent = "training-difficulty-refresh";
const useHighlightTest = ref(false);
const highlightTestTimer = ref(null);
const env = computed(() => {
try {
return uni.getAccountInfoSync().miniProgram.envVersion;
} catch (error) {
return "release";
}
});
const isDistanceStage = computed(() => pageStage.value === pageStages.DISTANCE);
const isShootingStage = computed(() => pageStage.value === pageStages.SHOOTING);
const hasPractiseResult = computed(() => !!practiseResult.value?.details);
const showResult = computed(
() => pageStage.value === pageStages.RESULT && hasPractiseResult.value
);
const defaultHighlightAreas = [{ quadrant: 1, rings: [7] }];
// 临时高亮测试数据：第 N 项对应第 N 箭，每箭展示一个不同区域。
const highlightTestAreas = [
{ arrowIndex: 1, quadrant: 1, rings: [10] },
{ arrowIndex: 2, quadrant: 2, rings: [9, 10] },
{ arrowIndex: 3, quadrant: 3, rings: [8, 9] },
{ arrowIndex: 4, quadrant: 4, rings: [7, 8] },
{ arrowIndex: 5, quadrant: 1, rings: [6, 7] },
{ arrowIndex: 6, quadrant: 2, rings: [5, 6] },
{ arrowIndex: 7, quadrant: 3, rings: [4, 5] },
{ arrowIndex: 8, quadrant: 4, rings: [3, 4] },
{ arrowIndex: 9, quadrant: 1, rings: "all", scope: "sector" },
{ arrowIndex: 10, quadrant: 2, rings: "all", scope: "sector" },
{ arrowIndex: 11, quadrant: 3, rings: "all", scope: "sector" },
{ arrowIndex: 12, quadrant: 4, rings: "all", scope: "sector" },
];
const targetHighlightAreas = computed(() => {
return useHighlightTest.value ? highlightTestAreas : defaultHighlightAreas;
});
const toRouteNumber = (value, fallback = 0) => {
const numberValue = Number(value);
return Number.isFinite(numberValue) ? numberValue : fallback;
};
const toPositiveRouteNumber = (value, fallback) => {
const numberValue = toRouteNumber(value, fallback);
return numberValue > 0 ? numberValue : fallback;
};
const createPractice = async () => {
const result = await createPractiseAPI(
total.value,
shootTime.value,
targetType.value
);
if (result) practiseId.value = result.id;
};
const clearHighlightTestTimer = () => {
if (highlightTestTimer.value) {
clearInterval(highlightTestTimer.value);
highlightTestTimer.value = null;
}
};
const buildHighlightTestScore = (index) => ({
playerId: user.value?.id,
ring: 9,
ringX: false,
x: ((index % 4) - 1.5) * 2,
y: (Math.floor(index / 4) - 1) * 2,
angle: null,
});
const setHighlightTestArrow = (arrowIndex) => {
const completedCount = Math.max(arrowIndex - 1, 0);
scores.value = Array.from({ length: completedCount }, (_, index) =>
buildHighlightTestScore(index)
);
};
// 临时测试入口：自动切换第 1 到第 12 箭，让 BowTarget 按当前箭展示不同高亮。
const runHighlightTest = () => {
clearHighlightTestTimer();
useHighlightTest.value = true;
practiseResult.value = {};
pageStage.value = pageStages.SHOOTING;
start.value = true;
let arrowIndex = 1;
setHighlightTestArrow(arrowIndex);
highlightTestTimer.value = setInterval(() => {
if (arrowIndex >= highlightTestAreas.length) {
clearHighlightTestTimer();
return;
}
arrowIndex += 1;
setHighlightTestArrow(arrowIndex);
}, 1000);
};
const resetHighlightTest = () => {
clearHighlightTestTimer();
useHighlightTest.value = false;
scores.value = [];
};
onLoad((options = {}) => {
targetType.value = toPositiveRouteNumber(options.target, defaultTargetType);
total.value = toPositiveRouteNumber(options.arrows, defaultTotal);
shootTime.value = toPositiveRouteNumber(options.time, defaultShootTime);
trainingParams.value = {
type: options.type || "",
difficultyId: options.difficultyId || "",
difficulty: toRouteNumber(options.difficulty),
recordId: options.recordId || "",
hitReq: toRouteNumber(options.hitReq),
totalReq: toRouteNumber(options.totalReq),
blocks: toRouteNumber(options.blocks),
mode: toRouteNumber(options.mode),
};
});
const onReady = async () => {
pageStage.value = pageStages.LOADING;
clearHighlightTestTimer();
useHighlightTest.value = false;
try {
await startPractiseAPI();
practiseResult.value = {};
scores.value = [];
start.value = true;
pageStage.value = pageStages.SHOOTING;
audioManager.play("练习开始");
} catch (error) {
start.value = false;
pageStage.value = pageStages.DISTANCE;
throw error;
}
};
const onOver = async () => {
if (!isShootingStage.value) return;
clearHighlightTestTimer();
pageStage.value = pageStages.LOADING;
start.value = false;
try {
practiseResult.value = (await getPractiseAPI(practiseId.value)) || {};
pageStage.value = hasPractiseResult.value
? pageStages.RESULT
: pageStages.DISTANCE;
} catch (error) {
start.value = true;
pageStage.value = pageStages.SHOOTING;
throw error;
}
};
async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.ShootResult && isShootingStage.value) {
scores.value = msg.details;
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
// setTimeout(onOver, 1500);
}
}
function onComplete() {
pageStage.value = pageStages.LOADING;
start.value = false;
uni.$emit(trainingDifficultyRefreshEvent);
uni.navigateBack();
}
async function onRetry() {
pageStage.value = pageStages.LOADING;
clearHighlightTestTimer();
useHighlightTest.value = false;
practiseId.value = "";
practiseResult.value = {};
start.value = false;
scores.value = [];
try {
await createPractice();
} finally {
pageStage.value = pageStages.DISTANCE;
}
}
const onClickShare = debounce(async () => {
await sharePractiseData("shareCanvas", 2, user.value, practiseResult.value);
await wxShare("shareCanvas");
});
function onAudioEnded(s) {
if (s.indexOf("比赛结束") >= 0) {
onOver()
}
}
const updateSound = () => {
sound.value = !sound.value;
audioManager.setMuted(!sound.value);
};
onMounted(async () => {
// audioManager.play("第一轮");
uni.setKeepScreenOn({
keepScreenOn: true,
});
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("share-image", onClickShare);
uni.$on("audioEnded", onAudioEnded);
await createPractice();
});
onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("share-image", onClickShare);
uni.$off("audioEnded", onAudioEnded);
audioManager.stopAll();
clearHighlightTestTimer();
endPractiseAPI();
});
</script>
<template>
<Container
:bgType="isDistanceStage ? 9 : 10"
:showBottom="isDistanceStage"
:scroll="!isShootingStage"
>
<view class="practise-content">
<TestDistance v-if="isDistanceStage" />
<view v-else-if="isShootingStage" class="shooting-layout">
<view class="shooting-fixed">
<ShootProgress
:start="start"
:onStop="onOver"
/>
<view class="user-row">
<!-- <Avatar :src="user.avatar" :size="35" /> -->
<BubbleTip v-if="showGuide" type="normal2">
<text>还有两场，坚持</text>
<text>就是胜利！💪</text>
</BubbleTip>
<!-- <BowPower /> -->
</view>
<BowTarget
:totalRound="start ? total / 4 : 0"
:currentRound="scores.length % 3"
:scores="scores"
:showCrosshair="false"
:highlightAreas="targetHighlightAreas"
/>
<view v-if="env !== 'release'" class="highlight-test-actions">
<button
class="highlight-test-btn"
hover-class="none"
@click="runHighlightTest"
>
高亮测试
</button>
<button
class="highlight-test-btn"
hover-class="none"
@click="resetHighlightTest"
>
重置高亮
</button>
</view>
<view class="sound-text-box">
<button class="sound-btn" hover-class="none" @click="updateSound">
<image
class="sound-icon"
:src="`/static/sound${sound ? '' : '-off'}-yellow.png`"
mode="aspectFit"
/>
</button>
<view class="bat-text-big-box">
<image
class="dao-icon"
src="../../static/training-difficulty-design/dao-icon.png"
mode="widthFix"
/>
<view class="bat-text-box">
<view class="bat-text-small-box">
<view class="text-round-box">
<view class="text1">每箭命中9环之上</view>
<view class="text2">剩余<text class="text2-yellow">3</text>箭</view>
</view>
</view>
</view>
</view>
</view>
</view>
<scroll-view
class="score-scroll"
scroll-y
:enhanced="true"
:show-scrollbar="false"
>
<ScorePanel2 :arrows="scores" :total="total" />
</scroll-view>
</view>
<ScoreResult
v-else-if="showResult"
:rowCount="6"
:total="total"
:onClose="onComplete"
:onRetry="onRetry"
:result="practiseResult"
/>
<canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
</view>
<template #bottom>
<view class="btn-box">
<image
class="btn-box-bg"
src="../../static/training-difficulty-design/par-star.png"
mode="widthFix"
/>
<button class="btn" @click="onReady">准备好了，开始练习</button>
</view>
</template>
</Container>
</template>
<style scoped>
.practise-content {
height: 100%;
min-height: 0;
}
.shooting-layout {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.shooting-fixed {
flex-shrink: 0;
}
.score-scroll {
flex: 1;
height: 0;
min-height: 0;
overflow: hidden;
}
.btn-box{
width: 488rpx;
height: 234rpx;
position: fixed;
bottom: 130rpx;
left: 50%;
transform: translateX(-50%);
}
.btn-box-bg{
width: 100%;
}
.btn{
width: 330rpx;
height: 70rpx;
line-height: 70rpx;
background: #FED847;
border-radius: 44rpx;
text-align: center;
color: #000000;
font-size: 28rpx;
font-weight: 500;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -36rpx;
}
.highlight-test-actions {
display: flex;
justify-content: center;
margin-top: -24rpx;
position: relative;
z-index: 10;
}
.highlight-test-btn {
width: 150rpx;
height: 48rpx;
line-height: 48rpx;
padding: 0;
border-radius: 24rpx;
background: rgba(0, 0, 0, 0.48);
color: #fed847;
font-size: 22rpx;
}
.highlight-test-btn::after {
border: none;
}
.highlight-test-btn + .highlight-test-btn {
margin-left: 16rpx;
}
.sound-text-box{
height: 125rpx;
padding: 0 56rpx;
display: flex;
align-items: flex-end;
}
.sound-btn {
width: 76rpx;
height: 70rpx;
border: none;
}
.sound-btn::after {
border: none;
}
.sound-icon {
width: 76rpx;
height: 70rpx;
}
.bat-text-big-box{
flex: 1;
position: relative;
}
.dao-icon{
width: 160rpx;
height: 125rpx;
position: absolute;
left: 0;
bottom: 0;
}
.text-round-box{
width: 100%;
}
.bat-text-box{
display: flex;
}
.bat-text-small-box{
background: rgba(0, 0, 0, 0.5);
width: auto;
min-width: 100rpx;
border-radius: 16rpx 60rpx 60rpx 16rpx;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 176rpx;
height: 112rpx;
padding-right: 30rpx;
font-size: 30rpx;
color: #E7BA80;
}
.text1{
font-size: 30rpx;
font-weight: 400;
color: #E7BA80;
line-height: 42rpx;
}
.text2{
color: #FFFFFF;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
}
.text2-yellow{
font-size: 30rpx;
color: #FFD947;
font-weight: 500;
margin: 0 4rpx;
}
</style>

BIN
src/static/app-bg6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 321 KiB

BIN
src/static/app-bg7.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 252 KiB

BIN
src/static/app-bg8.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 376 KiB

BIN
src/static/app-bg9.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 188 KiB

BIN
src/static/bow-target.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/static/training-difficulty-design/block-gold.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/static/training-difficulty-design/block-gray.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/static/training-difficulty-design/btn.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
src/static/training-difficulty-design/cha.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/static/training-difficulty-design/dao-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.5 KiB

BIN
src/static/training-difficulty-design/gou.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 838 B

BIN
src/static/training-difficulty-design/jiantou.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

19
src/static/training-difficulty-design/lock.svg
View File

@@ -1,19 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="55px" height="55px" viewBox="0 0 55 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 11</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="训练难度展示" transform="translate(-160.000000, -478.000000)">
<g id="编组-2备份" transform="translate(154.000000, 472.000000)">
<g id="编组-11" transform="translate(6.000000, 6.000000)">
<circle id="椭圆形" fill="#CACACA" cx="27.5" cy="27.5" r="27.5"></circle>
<circle id="椭圆形" fill="#FFFFFF" cx="27.5" cy="26" r="25"></circle>
<circle id="椭圆形" fill="#5E5E5E" cx="27.5" cy="26" r="22"></circle>
<circle id="椭圆形" fill="#17B6F2" cx="27.5" cy="26" r="19.5"></circle>
<circle id="椭圆形" fill="#FFC2C2" cx="27.5" cy="26" r="17"></circle>
<circle id="椭圆形" fill="#FF1F33" opacity="0.800000012" cx="27.5" cy="26" r="14.5"></circle>
<circle id="椭圆形" fill="#FED847" cx="27.5" cy="26" r="13"></circle>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/static/training-difficulty-design/par-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 139 KiB

BIN
src/static/training-difficulty-design/par-star.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
src/static/training-difficulty-design/result-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 338 KiB

BIN
src/static/training-difficulty-design/result-c-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 849 B

BIN
src/static/training-difficulty-design/result-icon-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
src/static/training-difficulty-design/result-icon-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/static/training-difficulty-design/result-icon-3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/static/training-difficulty-design/result-rice.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/static/training-difficulty-design/result-t-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 49 KiB

BIN
src/static/training-difficulty-design/result-up.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 719 B

BIN
src/static/training-difficulty-design/text-icon-cgxl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/static/training-difficulty-design/text.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

19
src/static/training-difficulty-design/unlock.svg
View File

@@ -1,19 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="56px" height="55px" viewBox="0 0 56 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 9</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="训练难度展示" transform="translate(-60.000000, -313.000000)">
<g id="编组-2备份" transform="translate(54.500000, 307.000000)">
<g id="编组-9" transform="translate(5.500000, 6.000000)">
<circle id="椭圆形" fill="#CACACA" cx="28" cy="27.5" r="27.5"></circle>
<circle id="椭圆形" fill="#FFFFFF" cx="28" cy="26" r="25"></circle>
<circle id="椭圆形" fill="#5E5E5E" cx="28" cy="26" r="22"></circle>
<circle id="椭圆形" fill="#808080" cx="28" cy="26" r="19.5"></circle>
<circle id="椭圆形" fill="#FFFFFF" cx="28" cy="26" r="17"></circle>
<circle id="椭圆形" fill="#8C8C8C" cx="28" cy="26" r="14.5"></circle>
<circle id="椭圆形" fill="#DBDBDB" cx="28" cy="26" r="13"></circle>
</g>
</g>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/static/training-home/done.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1011 B

BIN
src/static/training-home/img_16.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 184 B

BIN
src/static/training-home/img_17.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 192 B

BIN
src/static/training-home/img_19.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/static/training-home/img_20.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/static/training-home/img_21.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/training-home/img_22.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
src/static/training-home/img_28.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 468 B

BIN
src/static/training-home/img_3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/static/training-home/img_4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

BIN
src/static/training-home/img_5.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/static/training-home/img_6.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/static/training-home/img_7.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 173 B

BIN
src/static/training-home/jiezouxunlian.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/static/training-home/jingzhunxunlian.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/static/training-home/liliangxulian.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/static/training-home/missed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 351 B

BIN
src/static/training-home/nailixunlian.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB