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

update: 优化个人训练

Browse Source
This commit is contained in:
zhangyi
2026-08-21 15:38:01 +08:00
parent 09756ae165
commit 59fa317c5a
10 changed files with 57 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/training/components/TrainingDifficultyBadge.vue
+32
View File
@@ -15,6 +15,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
showUnlockProgress: {
type: Boolean,
default: false,
},
completedProgress: {
type: Number,
default: 0,
@@ -106,6 +110,15 @@ const handleClick = () => {
<view class="difficulty-badge__label">{{ node.label }}</view>
</view>
</view>
<view
v-if="showUnlockProgress"
class="difficulty-badge__unlock-progress"
>
<view
class="difficulty-badge__unlock-progress-completed"
:style="{ width: `${progressValue}%` }"
></view>
</view>
</view>
</template>
@@ -315,6 +328,25 @@ const handleClick = () => {
overflow: hidden;
}
.difficulty-badge__unlock-progress {
position: absolute;
top: calc(100% + 30rpx);
left: 50%;
width: 120rpx;
height: 10rpx;
overflow: hidden;
border-radius: 6rpx;
background: rgba(0, 0, 0, 0.6);
transform: translateX(-50%);
pointer-events: none;
}
.difficulty-badge__unlock-progress-completed {
height: 100%;
border-radius: 6rpx;
background: rgba(255, 217, 71, 1);
}
@keyframes badge-orbit-spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
src/pages/training/difficulty.vue
+5 -15
View File
@@ -83,10 +83,6 @@ const checkDifficultyCompleted = (item = {}) => {
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];
@@ -107,14 +103,12 @@ const createDifficultySummary = (item = {}) => {
const timeLimit = toNumber(item.time_limit);
const hitReq = toNumber(item.hit_req);
const totalReq = toNumber(item.total_req);
const promoteCnt = toNumber(item.promote_cnt);
const shootingTimeText =
timeLimit > 0 ? `在${timeLimit}秒内进行射箭` : "不限时进行射箭";
const enduranceTimeText =
timeLimit > 0
? `在${timeLimit}秒内完成${arrows}箭`
: `不限时完成${arrows}箭`;
const promoteText = promoteCnt > 0 ? `完成${promoteCnt}次晋级` : "";
const summaryMap = {
base: [
@@ -130,15 +124,10 @@ const createDifficultySummary = (item = {}) => {
`需要有${arrows}箭命中高亮区域`,
],
rhythm: [
desc || `间隔${timeLimit}秒射击`,
[
`${arrows}箭`,
hitReq > 0 ? `每箭${hitReq}环以上` : "上靶即可",
getDifficultyModeText(item.mode),
promoteText,
]
.filter(Boolean)
.join(" · "),
arrows > 0
? `需要在指定时间节点射出${arrows}射箭`
: "需要在指定时间节点射箭",
hitReq > 0 ? `且每箭命中${hitReq}环内` : "且每箭命中指定区域",
],
};
@@ -803,6 +792,7 @@ onShow(() => {
:node="node"
:active="node.id === selectedDifficultyId"
:locked="checkDifficultyLocked(node)"
:showUnlockProgress="node.id === unlockedDifficultyId"
:completedProgress="getCompletedDifficultyProgress(node)"
@click="handleSelectDifficulty"
/>
src/pages/training/index.vue
+20 -21
View File
@@ -17,7 +17,7 @@ const trainingModeRouteMap = {
rhythm: "rhythm",
strength: "power",
};
const unavailableTrainingIds = new Set(["rhythm", "strength"]);
const unavailableTrainingIds = new Set(["strength"]);
// 训练项目卡片右侧主图标。
const trainingModeIconMap = {
base_bow:
@@ -27,7 +27,7 @@ const trainingModeIconMap = {
"https://static.shelingxingqiu.com/shootmini/static/training-home/img_5.png",
wave: "https://static.shelingxingqiu.com/shootmini/static/training-home/img_6.png",
muscle:
"https://static.shelingxingqiu.com/shootmini/static/training-home/img_6.png",
"https://static.shelingxingqiu.com/shootmini/static/training-home/img_7.png",
};
// 训练项目卡片标题图，按接口 id 映射 CDN 资源。
const trainingModeTitleImageMap = {
@@ -40,7 +40,7 @@ const trainingModeTitleImageMap = {
rhythm:
"https://static.shelingxingqiu.com/shootmini/static/training-home/jiezouxunlian.png",
strength:
"https://static.shelingxingqiu.com/shootmini/static/training-home/liliangxulian.png",
"https://static.shelingxingqiu.com/shootmini/static/training-home/wendingxunlian.png",
};
const defaultWeekDays = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const defaultRadarDimensions = [
@@ -743,7 +743,7 @@ onShow(async () => {
.radar-section {
position: relative;
padding-top: 34rpx;
padding-top: 30rpx;
}
.record-bubble {
@@ -863,8 +863,8 @@ onShow(async () => {
.featured-card {
position: relative;
width: 100%;
height: 150rpx;
margin-top: 70rpx;
height: 130rpx;
margin-top: 38rpx;
border-radius: 16rpx;
overflow: hidden;
}
@@ -878,13 +878,13 @@ onShow(async () => {
left: 0;
top: 0;
width: 278rpx;
height: 150rpx;
height: 130rpx;
}
.featured-card-copy {
position: absolute;
left: 174rpx;
top: 58rpx;
top: 60rpx;
display: flex;
flex-direction: column;
}
@@ -900,10 +900,9 @@ onShow(async () => {
.featured-card-subtitle {
display: block;
margin-top: 10rpx;
color: #895409;
font-size: 22rpx;
line-height: 32rpx;
font-size: 20rpx;
line-height: 28rpx;
}
.mode-grid {
@@ -915,7 +914,7 @@ onShow(async () => {
.mode-card {
position: relative;
height: 150rpx;
height: 130rpx;
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);
@@ -928,8 +927,8 @@ onShow(async () => {
left: 0;
top: 0;
width: 72rpx;
height: 34rpx;
line-height: 34rpx;
height: 28rpx;
line-height: 28rpx;
text-align: center;
font-size: 20rpx;
color: #000;
@@ -940,7 +939,7 @@ onShow(async () => {
.mode-card-copy {
position: absolute;
left: 30rpx;
top: 40rpx;
top: 32rpx;
}
.mode-card-title {
@@ -968,16 +967,16 @@ onShow(async () => {
display: block;
margin-top: 14rpx;
color: #fcce96;
font-size: 22rpx;
line-height: 32rpx;
font-size: 20rpx;
line-height: 28rpx;
opacity: 0.5;
}
.mode-card-icon {
position: absolute;
right: 12rpx;
top: 14rpx;
width: 124rpx;
height: 124rpx;
right: 18rpx;
top: 8rpx;
width: 116rpx;
height: 116rpx;
}
</style>