tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改结果页，让结果页加载中的时候可以显示自己的成绩

Browse Source
This commit is contained in:
田岩
2025-12-02 19:22:13 +08:00
parent 972a59b8b9
commit 5f02463a0c
1 changed files with 71 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/competition/result.vue
+71 -50
View File
@@ -8,20 +8,20 @@
<view class="fl1"></view>
</view>
<view class="fl1"></view>
<view class="show-main-div" :class="action">
<view class="show-main-div">
<!-- 伸展出的吉祥物 -->
<view class="result-container-div" :class="{ victory: jieguo === 'Y' }">
<view class="result-container-div" :class="{ victory: jieguo === 'Y', result: action === 'result' }">
<image class="img" src="@/static/images/competition/result_shengli.png"></image>
</view>
<view class="result-container-div" :class="{ defeat: jieguo === 'N' }">
<view class="result-container-div" :class="{ defeat: jieguo === 'N', result: action === 'result' }">
<image class="img defeat" src="@/static/images/competition/result_shibai.png"></image>
</view>
<view class="mascot-div">
<view class="mascot-div" :class="action">
<image class="img" src="@/static/images/competition/result_loading_mascot.png"></image>
</view>
<view class="mascot-msg-div">
<view class="mascot-msg-div" :class="action">
<image class="img" src="@/static/images/competition/result_loading_msg.png"></image>
</view>
@@ -31,7 +31,7 @@
<view class="win-icon" :class="jieguo">
<image class="img_100" src="@/static/images/competition/result_huosheng.png"></image>
</view>
<view class="pk-msg-left-div">
<view class="pk-msg-left-div" :class="myAction">
<view class="avatar-div">
<cached-avatar v-if="pkData.isAnony === 'N'" class="img"></cached-avatar>
<image v-else class="img" :src="defaultAnonymousAvatar" mode="aspectFill"></image>
@@ -44,20 +44,20 @@
<view class="topic-div number">
<text class="loadingNoText font-size-54">{{ pkData.correctNub }}</text>
<text class="loadingNoText">/{{ pkData.qnsNub }}</text>
<text class="loadingText">{{resultStr}}</text>
<text class="loadingText">{{ resultStr }}</text>
</view>
<view class="title">总分</view>
<view class="score-div number">
<text class="font-size-54 loadingNoText">{{ pkData.totalScore }}</text>
<text class="loadingText">{{resultStr}}</text>
<text class="loadingText">{{ resultStr }}</text>
</view>
<view class="title">用时</view>
<view class="time-div number">
<text class="loadingNoText">{{ formatSecondsToMS(pkData.timeTaken) }}</text>
<text class="loadingText">{{resultStr}}</text>
<text class="loadingText">{{ resultStr }}</text>
</view>
</view>
<view class="pk-msg-right-div">
<view class="pk-msg-right-div" :class="action">
<view class="avatar-div">
<image-preview v-if="pkData.pkIsAnony === 'N'" class="img" :src="pkData.imgPk"></image-preview>
<image v-else class="img" :src="defaultAnonymousAvatar" mode="aspectFill"></image>
@@ -69,17 +69,17 @@
<view class="topic-div number">
<text class="loadingNoText font-size-54">{{ pkData.correctNubPk }}</text>
<text class="loadingNoText">/{{ pkData.qnsNubPk }}</text>
<text class="loadingText">{{resultStr}}</text>
<text class="loadingText">{{ resultStr }}</text>
</view>
<view class="title">总分</view>
<view class="score-div number">
<text class="font-size-54 loadingNoText">{{ pkData.totalScorePk }}</text>
<text class="loadingText">{{resultStr}}</text>
<text class="loadingText">{{ resultStr }}</text>
</view>
<view class="title">用时</view>
<view class="time-div number">
<text class="loadingNoText">{{ formatSecondsToMS(pkData.timeTakenPk) }}</text>
<text class="loadingText">{{resultStr}}</text>
<text class="loadingText">{{ resultStr }}</text>
</view>
</view>
</view>
@@ -116,8 +116,9 @@
import points from '@/components/points-and-badge/points';
import usePointsAndBadge from '@/components/points-and-badge/usePointsAndBadge';
const { pointAndBadgesRun, badgeRef, pointsRef } = usePointsAndBadge();
const resultStr = computed(() => mode.value === 'pk_result'?"加载中":"结算中")
const resultStr = computed(() => (mode.value === 'pk_result' ? '加载中' : '结算中'));
const action = ref('');
const myAction = ref('');
const mode = ref(''); // 模式 PK中 pk_in， Pk列表查询 pk_result
const autoSub = ref('00'); // 是否是自动提交 00 不是 01是
const pkData = reactive({
@@ -164,36 +165,36 @@
mode.value = e.mode || 'pk_result';
autoSub.value = e.autoSub || '00';
const pkDataInit = common.getPageCache('competition_pk_to_resulf');
const userInfo = getUserInfo();
console.log('userInfo', userInfo);
// const userInfo = getUserInfo();
// console.log('userInfo', userInfo);
console.log('pkDataInit', pkDataInit);
Object.assign(pkData, {
userName: pkDataInit.userName ?? '',
isAnony: pkDataInit.isAnony ?? '',
pkIsAnony: pkDataInit.pkIsAnony ?? '',
userNamePk: pkDataInit.pkUserName ?? ''
userNamePk: pkDataInit.pkUserName ?? '',
imgPk: pkDataInit.pkImgAddr ?? ''
});
});
onMounted(() => {
action.value = 'loading';
myAction.value = 'loading';
setTimeout(() => {
queryCompetitionAnswerResult({ execId: pkData.execId, autoSub:autoSub.value }).then(({ body }) => {
if (mode.value === 'pk_in') {
console.log('调用它');
pointAndBadgesRun('11');
}
// 计算需要额外延时的时间
const currentTime = Math.floor(Date.now() / 1000);
// 2. 计算对手的答题结束时间（秒）
const opponentEndTime = body.endTime + body.timeDifference;
// 3. 计算当前时间到对手结束时间的延迟时间（秒），负数则取0
const delayTime = Math.max(0, opponentEndTime - currentTime);
console.log('计算需要额外延时的时间', delayTime);
setTimeout(() => {
setTimeout(
() => {
queryCompetitionAnswerResult({ execId: pkData.execId, autoSub: autoSub.value }).then(({ body }) => {
if (mode.value === 'pk_in') {
console.log('调用它');
pointAndBadgesRun('11');
}
// 计算需要额外延时的时间
const currentTime = Math.floor(Date.now() / 1000);
// 2. 计算对手的答题结束时间（秒）
const opponentEndTime = body.endTime + body.timeDifference;
// 3. 计算当前时间到对手结束时间的延迟时间（秒），负数则取0
const delayTime = Math.max(0, opponentEndTime - currentTime);
console.log('计算需要额外延时的时间', delayTime);
const userResult = body.userResult;
pkData.answerResult = body.answerResult; // 答题结果 Y代表我赢,N代表我输
pkData.timeDifference = body.timeDifference; // 时差 int 单位 s
Object.assign(pkData, {
// 自己的
isAnony: userResult.isAnony, // 匿名 String
@@ -206,18 +207,38 @@
userIdPk: userResult.userIdPk, // 用户Id String
userNamePk: userResult.userNamePk, // 用户姓名 String
imgPk: userResult.imgPk, // 用户姓名 String
pkIsAnony: userResult.isAnonyPk, // 匿名 String
correctNubPk: userResult.correctNubPk, // 正确数 int
qnsNubPk: userResult.qnsNubPk || 0, // 总数 int
timeTakenPk: userResult.timeTakenPk || 0, // 用时 int
totalScorePk: userResult.totalScorePk || 0 // 对方总分
pkIsAnony: userResult.isAnonyPk // 匿名 String
});
nextTick(() => {
action.value = 'result';
});
}, delayTime * 1000);
});
}, mode.value === 'pk_result'?0:1000);
myAction.value = 'result';
setTimeout(() => {
pkData.answerResult = body.answerResult; // 答题结果 Y代表我赢,N代表我输
pkData.timeDifference = body.timeDifference; // 时差 int 单位 s
Object.assign(pkData, {
// 自己的
// isAnony: userResult.isAnony, // 匿名 String
// userName: userResult.userName, // 匿名 String
// correctNub: userResult.correctNub, // 正确数 int
// qnsNub: userResult.qnsNub, // 总数 int
// timeTaken: userResult.timeTaken, // 用时 int
// totalScore: userResult.totalScore || 0, // 我方总分
// 对方的
// userIdPk: userResult.userIdPk, // 用户Id String
// userNamePk: userResult.userNamePk, // 用户姓名 String
// imgPk: userResult.imgPk, // 用户姓名 String
// pkIsAnony: userResult.isAnonyPk, // 匿名 String
correctNubPk: userResult.correctNubPk, // 正确数 int
qnsNubPk: userResult.qnsNubPk || 0, // 总数 int
timeTakenPk: userResult.timeTakenPk || 0, // 用时 int
totalScorePk: userResult.totalScorePk || 0 // 对方总分
});
nextTick(() => {
action.value = 'result';
});
}, delayTime * 1000);
});
},
mode.value === 'pk_result' ? 0 : 1000
);
});
</script>
@@ -387,12 +408,12 @@
display: none;
}
// loading 状态样式（保持不变）
&.loading {
.mascot-div {
.loading {
&.mascot-div {
left: 50%;
transform: translateX(-50%);
}
.mascot-msg-div {
&.mascot-msg-div {
opacity: 1;
pointer-events: auto;
}
@@ -434,14 +455,14 @@
}
// 当 action=result 时，触发结果动画
&.result {
.result {
// 胜利状态：入场 + 浮动 + 闪光
.result-container-div.victory {
&.result-container-div.victory {
animation: victoryEnter 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards,
victoryFloat 2s ease-in-out infinite 0.8s;
}
// 失败状态：入场 + 抖动
.result-container-div.defeat {
&.result-container-div.defeat {
// defeatShake 1s ease-in-out infinite 0.6s
animation: defeatEnter 0.6s ease-out forwards, defeatRotateSway 1s ease-in-out 0.6s 1; // 入场后开始晃动，2秒结束，仅1次
}