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

增加pk弹窗

Browse Source
This commit is contained in:
田岩
2025-11-18 15:06:09 +08:00
parent 7531d6059d
commit d106c19d0f
5 changed files with 154 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+2 -2
View File
@@ -3,9 +3,9 @@ ENV = 'development'
# 'development'
VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7001'
# VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7001'
# VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
# VITE_APP_BASE_API_Url = 'http://192.168.247.200'
# VITE_APP_BASE_API_Url = 'http://aitscdn.jlbank.com.cn:7001'
src/components/points-and-badge/badge.vue
+14 -10
View File
@@ -5,11 +5,11 @@
<view class="max-div">
<view class="title_div">
<image class="img" src="@/static/images/pointsAndRank/badge-wheat-left.png"></image>
<view class="title">恭喜你获得新徽章</view>
<view class="title">{{ title }}</view>
<image class="img" src="@/static/images/pointsAndRank/badge-wheat-right.png"></image>
</view>
<view class="points-div">
<view class="doct_icon left" @click="doct_click(-1)">
<view class="doct_icon left" @click="doct_click(-1)" v-show="multiple">
<view class="doct_icon_div">
<view class="fl1"></view>
<uv-icon size="28" color="#999999" name="arrow-left"></uv-icon>
@@ -23,7 +23,7 @@
<view class="points-msg-div">{{ item.pointsBadgeName }}</view>
</swiper-item>
</swiper>
<view class="doct_icon right" @click="doct_click(1)">
<view class="doct_icon right" @click="doct_click(1)" v-show="multiple">
<view class="doct_icon_div">
<uv-icon size="28" color="#999999" name="arrow-right"></uv-icon>
<view class="fl1"></view>
@@ -56,11 +56,17 @@
const popup = ref(null);
const current = ref(0);
const opacity = ref(1);
let CloseComplete
const badgesList = ref([]);
const pointsList = ref([]);
const multiple = computed(() => badgesList.value.length > 1);
const titleNumberText = ['', '两', '三', '四', '五', '六', '七', '八', '九', '十'];
const title = computed(() =>
badgesList.value.length === 1
? '恭喜你获得新徽章'
: `恭喜你获得${titleNumberText[badgesList.value.length - 1]}枚新徽章`
);
const buttonColor = 'linear-gradient( 270deg, #F81758 0%, #FFA062 100%)';
const customStyle = {
borderRadius: '40rpx'
@@ -91,7 +97,7 @@
nextTick(() => {
popup.value.close();
});
// uni.showTabBar({
// success() {
// opacity.value = 0;
@@ -104,25 +110,23 @@
// 点击
const clickFun = (status = true) => {
emits('confirm', status, pointsList.value, badgesList.value, () => {});
CloseComplete(status, pointsList.value, badgesList.value)
};
const open = (points = [], badges = []) => {
const open = (points = [], badges = [], complete = () => {}) => {
if (!Array.isArray(badges) || badges.length === 0) {
console.error('badges 不是有效的数组或为空');
return;
}
console.log('badges', badges);
CloseComplete = complete
badgesList.value = badges;
pointsList.value = points;
opacity.value = 1;
console.log('成功');
popup.value.open('center');
// uni.hideTabBar({
// success() {
// opacity.value = 1;
// console.log('成功');
// popup.value.open('center');
src/components/points-and-badge/points.vue
+6 -2
View File
@@ -49,13 +49,15 @@
const badgesList =ref([]);
const pointsList = ref([]);
const popup = ref(null);
let CloseComplete
const buttonColor = 'linear-gradient( 270deg, #F81758 0%, #FFA062 100%)';
const customStyle = {
borderRadius: '40rpx' //圆角
};
const emits = defineEmits(['confirm']);
const open = (points, badges=[]) => {
const open = (points, badges=[], complete = () => {}) => {
console.log('开启积分弹窗');
if (!Array.isArray(points) || points.length === 0) {
console.error('points 不是有效的数组或为空');
// 积分为空直接调用完成
@@ -67,6 +69,7 @@
);
return;
}
CloseComplete = complete
badgesList.value = badges
// 解构出第一项和剩余元素（原数组不变）
const [firstItem, ...remainingPoints] = points;
@@ -90,6 +93,7 @@
}
);
CloseComplete(status, pointsList.value, badgesList.value)
};
defineExpose({ open, close });
</script>
src/components/points-and-badge/usePointsAndBadge.js
+118
View File
@@ -0,0 +1,118 @@
/**
完成课程学习 首次完成1分 每天最多获取5分 完成课程学习 crsId 02 完成调用 杨航
完成课程练习 首次完成1分 每天最多获取5分 完成课程练习 crsId 04 完成练习调用 田岩
通过课程考试 首次完成1分 每天最多获取5分 通过课程考试 crsId 03 通过调用 田岩
完成考试中心考试 首次完成1分 每天最多获取5分 完成考试中心考试 papersId 05 完成调用 田岩
完成竞赛PK 每次1分 每天最多获取5分 完成竞赛PK 11 完成调用 田岩
通过AI陪练练习 每次1分 每天最多获取5分 通过AI陪练练习 07 通过调用 杨航
通过AI陪练考试 每次1分 每天最多获取5分 通过AI陪练考试 08 通过调用 杨航
签到 每日1积分，
第七天5积分，
第30天20积分，
断签从第一天计算。 签到完成 田岩
*/
import {
addPointsByTask
} from '@/api/pointsAndRank.js'
import {
ref
} from 'vue'
import {
pop_up_time
} from '@/enum';
// 徽章类型配置：映射类型编码、参数键、规则描述
const typeConfig = {
'02': {
name: '完成课程学习',
paramsKey: 'crsId',
rule: '首次完成1分，每天最多5分'
},
'03': {
name: '通过课程考试',
paramsKey: 'crsId',
rule: '首次完成1分，每天最多5分'
},
'04': {
name: '完成课程练习',
paramsKey: 'crsId',
rule: '首次完成1分，每天最多5分'
},
'05': {
name: '完成考试中心考试',
paramsKey: 'papersId',
rule: '首次完成1分，每天最多5分'
},
'07': {
name: '通过AI陪练练习',
paramsKey: '',
rule: '每次1分，每天最多5分'
},
'08': {
name: '通过AI陪练考试',
paramsKey: '',
rule: '每次1分，每天最多5分'
},
'11': {
name: '完成竞赛PK',
paramsKey: '',
rule: '每次1分，每天最多5分'
}
}
export default function usePointsAndBadge() {
const badgeRef = ref(null);
const pointsRef = ref(null);
const pointAndBadgesRun = async (type, params = null, complete = () => {}) => {
// 校验类型合法性
if (!typeConfig[type] && type !== 'sign') {
console.warn(`不支持的徽章类型：${type}`);
complete(false, '类型不合法');
return;
}
let requestParams = {
type
};
const config = typeConfig[type];
// 适配参数键（crsId/papersId/无参数）
if (config?.paramsKey) {
if (!params) {
console.warn(`类型${type}（${config.name}）需传入${config.paramsKey}参数`);
complete(false, '缺少必要参数');
return;
}
requestParams[config.paramsKey] = params;
}
try {
// 调用积分接口
console.log('调用积分接口');
const res = await addPointsByTask(requestParams);
console.log('调用积分接口', res);
console.log('pointsRefpointsRef', pointsRef.value);
pointsRef.value.open(res.body.points, res.body.pointsBadges, (status, pointsList, badgesList) => {
pointsRef.value.close()
if (badgesList.length > 0) {
nextTick(() => {
setTimeout(() => {
badgeRef.value.open(pointsList, badgesList);
}, pop_up_time);
});
}
});
// complete(true, '积分获取成功', res);
} catch (error) {
// console.error(`类型${type}积分获取失败：`, error);
// complete(false, '积分获取失败', error);
}
};
return {
pointAndBadgesRun,
badgeRef,
pointsRef
};
}
src/pages/competition/result.vue
+14 -9
View File
@@ -60,7 +60,7 @@
<image-preview v-if="pkData.pkIsAnony === 'N'" class="img" :src="pkData.imgPk"></image-preview>
<image v-else class="img" :src="defaultAnonymousAvatar" mode="aspectFill"></image>
</view>
<view class="name-div">{{ pkData.pkIsAnony === 'N' ? pkData.userNamePk : '匿名' }} </view>
<view class="name-div">{{ pkData.pkIsAnony === 'N' ? pkData.userNamePk : '匿名' }}</view>
<view class="title">正确/总题数</view>
<view class="topic-div number">
<text class="loadingNoText font-size-54">{{ pkData.correctNubPk }}</text>
@@ -83,15 +83,17 @@
<view class="ranking-list-div" @click="buttonClick('toRanking')">查看排行榜</view>
<!-- 下方的两个按钮 -->
<view class="fl1"></view>
<view class="bottom-button-div" v-if="mode==='pk_in'">
<view class="bottom-button-div" v-if="mode === 'pk_in'">
<uv-button class="button-1" text="退出挑战" shape="circle" @click="buttonClick('exit')"></uv-button>
<uv-button class="button-2" text="继续挑战" shape="circle" @click="buttonClick('continue')"></uv-button>
</view>
<view class="bottom-button-div" v-if="mode==='pk_result'">
<view class="bottom-button-div" v-if="mode === 'pk_result'">
<uv-button class="button-3" text="返回" shape="circle" @click="buttonClick('continue')"></uv-button>
</view>
</view>
</view>
<badge ref="badgeRef"></badge>
<points ref="pointsRef"></points>
</view>
</template>
<script setup lang="ts">
@@ -104,7 +106,10 @@
import { pkAnonymousClose, pkAnonymousOpen, pkRankingList, pkRules } from '@/common/imgSvg';
import { queryTraUserAnonyByUserId, updateTraUserAnony } from '@/api/user';
import { formatSecondsToMS } from './js/tool';
import badge from '@/components/points-and-badge/badge';
import points from '@/components/points-and-badge/points';
import usePointsAndBadge from '@/components/points-and-badge/usePointsAndBadge';
const { pointAndBadgesRun, badgeRef, pointsRef } = usePointsAndBadge();
const action = ref('');
const mode = ref(''); // 模式 PK中 pk_in， Pk列表查询 pk_result
const pkData = reactive({
@@ -141,9 +146,7 @@
common.navigateBack();
} else if (type === 'toRanking') {
common.navigateTo(`/pages/competition/ranking?papersId=${pkData.papersId}&orgId=${pkData.orgId}`);
}
}
};
onLoad((e) => {
@@ -157,7 +160,7 @@
Object.assign(pkData, {
userName: userInfo.userName,
isAnony: pkDataInit.isAnony ?? '',
pkIsAnony: pkDataInit.pkIsAnony ?? '',
pkIsAnony: pkDataInit.pkIsAnony ?? ''
});
});
onMounted(() => {
@@ -187,6 +190,8 @@
nextTick(() => {
action.value = 'result';
});
console.log('调用它');
pointAndBadgesRun('11')
});
}, 2000);
});
@@ -493,7 +498,7 @@
margin-bottom: 60rpx;
width: 550rpx;
justify-content: space-between;
.button-3{
.button-3 {
flex: 1;
}
:deep(.uv-button) {