Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 0d5866b82a |
@@ -264,7 +264,6 @@ AI 应主动：
|
||||
* 少解释
|
||||
* 优先 patch
|
||||
* 优先 diff
|
||||
* 写好中文注释
|
||||
|
||||
除非用户明确要求：
|
||||
否则不要输出完整项目。
|
||||
|
||||
@@ -410,15 +410,6 @@ export const getPractiseDataAPI = async () => {
|
||||
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 () => {
|
||||
return request("GET", "/user/fight/statistics");
|
||||
};
|
||||
|
||||
@@ -57,30 +57,6 @@ const props = defineProps({
|
||||
src="https://static.shelingxingqiu.com/shootmini/static/rank/rank-bg.png"
|
||||
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>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
const store = useStore();
|
||||
@@ -26,33 +26,12 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: 45,
|
||||
},
|
||||
sizeUnit: {
|
||||
type: String,
|
||||
default: "px",
|
||||
},
|
||||
imageMode: {
|
||||
type: String,
|
||||
default: "widthFix",
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
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(
|
||||
() => [config.value, props.rankLvl],
|
||||
() => {
|
||||
@@ -72,7 +51,10 @@ watch(
|
||||
v-if="avatarFrame"
|
||||
:src="avatarFrame"
|
||||
mode="widthFix"
|
||||
:style="avatarFrameStyle"
|
||||
:style="{
|
||||
width: Number(size) + 10 + 'px',
|
||||
height: Number(size) + 10 + 'px',
|
||||
}"
|
||||
class="avatar-frame"
|
||||
/>
|
||||
<image
|
||||
@@ -96,8 +78,13 @@ watch(
|
||||
<view v-if="rank > 3" class="rank-view">{{ rank }}</view>
|
||||
<image
|
||||
:src="src || '../static/user-icon.png'"
|
||||
:mode="imageMode"
|
||||
:style="avatarImageStyle"
|
||||
mode="widthFix"
|
||||
:style="{
|
||||
width: size + 'px',
|
||||
height: size + 'px',
|
||||
minHeight: size + 'px',
|
||||
borderColor: borderColor || '#fff',
|
||||
}"
|
||||
class="avatar-image"
|
||||
/>
|
||||
</view>
|
||||
|
||||
@@ -41,10 +41,6 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
headerClass: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
showBottom: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
@@ -156,7 +152,6 @@ const goCalibration = async () => {
|
||||
<AppBackground :type="bgType" :bgColor="bgColor" />
|
||||
<Header
|
||||
v-if="!isHome"
|
||||
:class="headerClass"
|
||||
:title="title"
|
||||
:onBack="onBack"
|
||||
:whiteBackArrow="whiteBackArrow"
|
||||
|
||||
@@ -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>
|
||||
@@ -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,
|
||||
},
|
||||
];
|
||||
@@ -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;
|
||||
};
|
||||
@@ -119,15 +119,6 @@
|
||||
},
|
||||
{
|
||||
"path": "pages/mine-bow-data"
|
||||
},
|
||||
{
|
||||
"path": "pages/training/difficulty"
|
||||
},
|
||||
{
|
||||
"path": "pages/training/index"
|
||||
},
|
||||
{
|
||||
"path": "pages/training/practise-one"
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
@@ -197,8 +197,7 @@ onShareTimeline(() => {
|
||||
</BubbleTip>
|
||||
</view>
|
||||
<view class="play-card">
|
||||
<!-- toPage('/pages/practise') -->
|
||||
<view @click="() => toPage('/pages/training/index')">
|
||||
<view @click="$clickSound(() => toPage('/pages/practise'))">
|
||||
<image src="../static/my-practise.png" mode="widthFix"/>
|
||||
</view>
|
||||
<view @click="$clickSound(() => toPage('/pages/friend-battle'))">
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 321 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 376 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 838 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 338 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 849 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 719 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
@@ -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>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1011 B |
Binary file not shown.
|
Before Width: | Height: | Size: 184 B |
Binary file not shown.
|
Before Width: | Height: | Size: 192 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 468 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 173 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 351 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Reference in New Issue
Block a user