修改题目通用组件
This commit is contained in:
田岩
+1
-1
@@ -41,7 +41,7 @@ export const queryPracticeRecordByExrId = (data) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 5.联系时候查询问答题结果
|
||||
// 5.练习时候查询问答题结果
|
||||
export const queryCrsPracticeAnswerResult = (data) => {
|
||||
return request({
|
||||
url: base_url + '/traCrsPractice/queryCrsPracticeAnswerResult',
|
||||
|
||||
@@ -172,6 +172,25 @@ export const getUserInfo = (key = '') => {
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
return '' === key ? userInfo : userInfo[key];
|
||||
}
|
||||
// 数字转换,把传入的秒转换为HH:mm:ss格式
|
||||
export const formatSeconds = (seconds) => {
|
||||
// 处理非数字或负数情况
|
||||
if (typeof seconds !== 'number' || isNaN(seconds) || seconds < 0) {
|
||||
return '00:00:00';
|
||||
}
|
||||
|
||||
// 计算小时、分钟和剩余秒数
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const remainingSeconds = Math.floor(seconds % 60);
|
||||
|
||||
// 补零函数：将数字转为两位数字符串
|
||||
const padZero = (num) => num.toString().padStart(2, '0');
|
||||
|
||||
// 拼接成00:00:00格式
|
||||
return `${padZero(hours)}:${padZero(minutes)}:${padZero(remainingSeconds)}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断当前运行平台是否匹配指定标识
|
||||
* @param {string} flag - 平台标识：'IOS' 表示苹果iOS平台，'AND' 表示安卓平台
|
||||
|
||||
@@ -1,31 +1,33 @@
|
||||
<template>
|
||||
<view class="talking-info" v-if="intrctWay === '02'">
|
||||
<view :class="['talking-gif', 'is-play']">
|
||||
<CommonLoading color="#fff" v-show="voiceLoading" />
|
||||
<view class="talking-info" v-if="status === '02'">
|
||||
<view :class="['talking-gif', isPlaying ? 'is-play' : '']">
|
||||
<!-- <CommonLoading color="#fff" /> -->
|
||||
</view>
|
||||
<view class="right-time">{{ voiceTime }}</view>
|
||||
<view class="talking-cont">
|
||||
<text :class="['talking-text translate-text loading']" v-show="!translateLoading">
|
||||
<text :class="['talking-text translate-text loading']" v-show="textShow">
|
||||
{{ showContent }}
|
||||
</text>
|
||||
<view class="talking-text translate-text" v-if="translateLoading">
|
||||
<view class="talking-text translate-text" v-if="textLoading">
|
||||
<CommonLoading color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns-cont">
|
||||
<view class="play-btn">
|
||||
<image
|
||||
v-show="!isPlaying"
|
||||
class="icon"
|
||||
@click="playVoice"
|
||||
src="@/static/images/course/play-blue.png"
|
||||
style="width: 100%; height: 100%"
|
||||
></image>
|
||||
<!-- <image
|
||||
<image
|
||||
v-show="isPlaying"
|
||||
class="icon"
|
||||
@click.stop="pauseVoice"
|
||||
@click.stop="playVoice"
|
||||
src="@/static/images/course/stop-blue.png"
|
||||
style="width: 100%; height: 100%"
|
||||
></image> -->
|
||||
></image>
|
||||
</view>
|
||||
<view class="text-btn" @click.stop="translateVoice()">文</view>
|
||||
<view class="fl1"></view>
|
||||
@@ -36,7 +38,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 01纯文字 -->
|
||||
<view class="talking-info talking-info-text" v-else-if="intrctWay === '01'">
|
||||
<view class="talking-info talking-info-text" v-else-if="status === '01'">
|
||||
<view class="talking-cont">
|
||||
<text :class="['talking-text translate-text loading']">
|
||||
{{ showContent }}
|
||||
@@ -62,7 +64,7 @@
|
||||
<view class="btns-cont-button-text" @click.stop="buutton_click('complete')">完成</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="talking-info talking-info-loading" v-else-if="intrctWay === '00'">
|
||||
<view class="talking-info talking-info-loading" v-else-if="status === '00'">
|
||||
<view :class="['talking-gif']">
|
||||
<CommonLoading color="#fff" />
|
||||
</view>
|
||||
@@ -72,17 +74,13 @@
|
||||
<script setup>
|
||||
import { computed, unref, ref, toRefs, watch, onMounted } from 'vue';
|
||||
import { onUnload } from '@dcloudio/uni-app';
|
||||
import { useAudioStore } from '@/store/audioStore';
|
||||
const props = defineProps({
|
||||
dataInfo: {
|
||||
default: () => ({
|
||||
talkingText: '',
|
||||
talkingVoice: ''
|
||||
}),
|
||||
default: () => ({}),
|
||||
type: Object
|
||||
},
|
||||
|
||||
text: {
|
||||
// 当前激活的语音
|
||||
default: '',
|
||||
type: String
|
||||
},
|
||||
@@ -92,120 +90,86 @@
|
||||
type: String
|
||||
},
|
||||
activeVoiceId: {
|
||||
// 当前激活的语音
|
||||
default: '',
|
||||
type: String
|
||||
},
|
||||
intrctWay: {
|
||||
defaultDisplayText: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
status: {
|
||||
default: '',
|
||||
type: String
|
||||
}
|
||||
});
|
||||
const audioStore = useAudioStore();
|
||||
const { dataInfo } = toRefs(props);
|
||||
|
||||
const intrctWay = computed(() => {
|
||||
console.log('props.intrctWay', props.intrctWay);
|
||||
return props.intrctWay;
|
||||
});
|
||||
const status = computed(() => props.status);
|
||||
const emit = defineEmits(['changePlay', 'buutton_click']);
|
||||
watch(
|
||||
() => props.dataInfo,
|
||||
() => {},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
// 声音播放初始化
|
||||
const talkVoiceObj = ref(null);
|
||||
|
||||
const isPlaying = ref(false);
|
||||
const voiceLoading = ref(false);
|
||||
const translateLoading = ref(false);
|
||||
|
||||
const voiceTime = ref('');
|
||||
const itemVoice = ref('');
|
||||
|
||||
// 中间显示的文字
|
||||
const showContent = computed(() => {
|
||||
return props.text || props.dataInfo.anserResult || '';
|
||||
});
|
||||
onMounted(() => {
|
||||
initVoice();
|
||||
});
|
||||
onUnload(() => {
|
||||
pauseVoice();
|
||||
});
|
||||
watch(
|
||||
() => props.dataInfo.talkingVoice,
|
||||
(val) => {
|
||||
if (val) {
|
||||
initVoice();
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
const isPlaying = ref(false);
|
||||
const textLoading = ref(false);
|
||||
const textShow = ref(props.defaultDisplayText); // 翻译文字展示状态
|
||||
const voiceTime = ref('');
|
||||
const itemVoice = ref('');
|
||||
|
||||
// 按钮点击
|
||||
const buutton_click = (type) => {
|
||||
emit('buutton_click', type, props.dataInfo);
|
||||
};
|
||||
const pauseVoice = () => {
|
||||
if (!talkVoiceObj.value) return;
|
||||
talkVoiceObj.value.pause();
|
||||
isPlaying.value = false;
|
||||
emit('changePlay', '');
|
||||
};
|
||||
const playVoice = () => {
|
||||
emit('changePlay', unref(dataInfo)?.id);
|
||||
if (talkVoiceObj.value && talkVoiceObj.value.src) {
|
||||
talkVoiceObj.value.play();
|
||||
return;
|
||||
|
||||
// 翻译语音
|
||||
const translateVoice = (type) => {
|
||||
if (!textShow.value) {
|
||||
textLoading.value = true;
|
||||
setTimeout(() => {
|
||||
textShow.value = true;
|
||||
textLoading.value = false;
|
||||
}, 500);
|
||||
} else {
|
||||
talkVoiceObj.value.src = '';
|
||||
if (unref(dataInfo).talkingVoice) {
|
||||
setTimeout(() => {
|
||||
talkVoiceObj.value.src = unref(dataInfo).talkingVoice;
|
||||
talkVoiceObj.value.play();
|
||||
isPlaying.value = true;
|
||||
}, 100);
|
||||
}
|
||||
textShow.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const initVoice = () => {
|
||||
talkVoiceObj.value = uni.createInnerAudioContext();
|
||||
talkVoiceObj.value.onEnded(() => {
|
||||
emit('changePlay', '');
|
||||
talkVoiceObj.value.src = '';
|
||||
innerAudioContext.onEnded(() => {
|
||||
innerAudioContext.src = '';
|
||||
});
|
||||
talkVoiceObj.value.onError(() => {
|
||||
talkVoiceObj.value.src = '';
|
||||
innerAudioContext.onError(() => {
|
||||
innerAudioContext.src = '';
|
||||
});
|
||||
if (unref(dataInfo).intrctWay === '02') {
|
||||
itemVoice.value = unref(dataInfo).talkingVoice;
|
||||
talkVoiceObj.value.src = itemVoice.value;
|
||||
setTimeout(() => {
|
||||
setVoiceTime(0);
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
const setVoiceTime = (sum) => {
|
||||
sum += 1;
|
||||
if (Math.ceil(talkVoiceObj.value.duration) > 0) {
|
||||
voiceTime.value = (Math.ceil(talkVoiceObj.value.duration) || 1) + 's';
|
||||
} else {
|
||||
if (sum === 20) {
|
||||
voiceTime.value = 0 + 's';
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
setVoiceTime(sum);
|
||||
}, 200);
|
||||
}
|
||||
|
||||
const playVoice = () => {
|
||||
console.log('播放音频', props.dataInfo.voicePath);
|
||||
isPlaying.value = true;
|
||||
audioStore.playAudio(props.dataInfo.voicePath);
|
||||
};
|
||||
onMounted(() => {
|
||||
// 注册播放完成回调
|
||||
audioStore.onAudioEnded(() => {
|
||||
console.log('播放完成（通过回调）');
|
||||
setTimeout(() => {
|
||||
isPlaying.value = false;
|
||||
}, 60);
|
||||
});
|
||||
|
||||
// 注册播放错误回调
|
||||
audioStore.onAudioError((error) => {
|
||||
console.error('播放错误（通过回调）:', error);
|
||||
});
|
||||
});
|
||||
onUnload(() => {
|
||||
// 1. 停止当前播放（优先处理，避免音频继续播放）
|
||||
audioStore.stopAudio();
|
||||
// 2. 移除当前组件注册的回调（避免内存泄漏）
|
||||
audioStore.removeCallbacks();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -278,6 +242,7 @@
|
||||
border-top: 3rpx solid #1f79ff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
margin-top: 22rpx;
|
||||
.replay-btn {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<image :src="feedbackIcon()" class="img" @click="feedback_click()"></image>
|
||||
</view>
|
||||
<template v-if="['mistake'].includes(props.mode)">
|
||||
<view class="right_text">展开</view>
|
||||
<view class="right_text" @click="toggleExpand()">展开</view>
|
||||
<uv-icon class="arrow-icon" name="arrow-right" color="#0066FF"></uv-icon>
|
||||
</template>
|
||||
</view>
|
||||
@@ -24,58 +24,68 @@
|
||||
<view class="question_text">
|
||||
{{ subject_data.qnsContent }}
|
||||
</view>
|
||||
<view class="option_div">
|
||||
<template v-if="qnsTyp === 'ES'">
|
||||
<questionVue
|
||||
:intrctWay="subject_data.es_status"
|
||||
:dataInfo="item_answer"
|
||||
:activeVoiceId="subject_data.qnsId"
|
||||
@buutton_click="questionBuuttonClick"
|
||||
></questionVue>
|
||||
</template>
|
||||
<template v-else>
|
||||
<radioSubjectItem
|
||||
v-for="(analysisVo, index) in subject_data.itemVos"
|
||||
@click_option="click_option"
|
||||
:key="index"
|
||||
:analysisVo="analysisVo"
|
||||
:my_answer="item_answer"
|
||||
></radioSubjectItem>
|
||||
</template>
|
||||
</view>
|
||||
<view
|
||||
class="option_div_button"
|
||||
v-if="qnsTyp === 'MU' && ['practice', 'study'].includes(props.mode) && !props.isPreview && clearResult"
|
||||
>
|
||||
<uv-button
|
||||
type="primary"
|
||||
class="send_evaluate"
|
||||
:custom-style="customStyle"
|
||||
:throttleTime="300"
|
||||
@click="muCheckbox('answer')"
|
||||
:hairline="false"
|
||||
>
|
||||
确定
|
||||
</uv-button>
|
||||
</view>
|
||||
<view class="analysis_div" v-if="!clearResult && ['study', 'mistake', 'settlement', 'practice'].includes(props.mode)">
|
||||
<view class="analysis_title">
|
||||
<view class="success_answer">正确答案：{{ correctResultLabel.join('') }}</view>
|
||||
<view class="your_answer">
|
||||
你的答案：
|
||||
<text :class="right_or_wrong_class ? 'success' : 'error'">{{ myResultLabel.join('') }}</text>
|
||||
|
||||
<view :style="props.mode==='mistake'?animationStyle:{}" class="collapse-wrapper" ref="wrapperRef">
|
||||
<view class="collapse-content" ref="contentRef">
|
||||
<view class="option_div">
|
||||
<template v-if="qnsTyp === 'ES'">
|
||||
<questionVue
|
||||
:status="subject_data.es_status"
|
||||
:dataInfo="props.item?.my_answer"
|
||||
:activeVoiceId="subject_data.qnsId"
|
||||
@buutton_click="questionBuuttonClick"
|
||||
></questionVue>
|
||||
</template>
|
||||
<template v-else>
|
||||
<radioSubjectItem
|
||||
v-for="(analysisVo, index) in subject_data.itemVos"
|
||||
@click_option="click_option"
|
||||
:key="index"
|
||||
:analysisVo="analysisVo"
|
||||
:my_answer="item_answer"
|
||||
></radioSubjectItem>
|
||||
</template>
|
||||
</view>
|
||||
<view
|
||||
class="option_div_button"
|
||||
v-if="qnsTyp === 'MU' && ['practice', 'study'].includes(props.mode) && !props.isPreview && clearResult"
|
||||
>
|
||||
<uv-button
|
||||
type="primary"
|
||||
class="send_evaluate"
|
||||
:custom-style="customStyle"
|
||||
:throttleTime="300"
|
||||
@click="muCheckbox('answer')"
|
||||
:hairline="false"
|
||||
>
|
||||
确定
|
||||
</uv-button>
|
||||
</view>
|
||||
<view
|
||||
class="analysis_div"
|
||||
v-if="!clearResult && ['study', 'mistake', 'settlement', 'practice'].includes(props.mode)"
|
||||
>
|
||||
<view class="analysis_title">
|
||||
<view class="success_answer">正确答案：{{ correctResultLabel.join('') }}</view>
|
||||
<view class="your_answer">
|
||||
你的答案：
|
||||
<text :class="right_or_wrong_class ? 'success' : 'error'">{{ myResultLabel.join('') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analysis_note">题目解析：{{ subject_data?.analyContent }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="analysis_note">题目解析：{{ subject_data?.analyContent }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, nextTick, computed, toRaw } from 'vue';
|
||||
import { ref, reactive, onMounted, nextTick, computed, getCurrentInstance } from 'vue';
|
||||
import radioSubjectItem from './radio-subject-item.vue';
|
||||
import questionVue from './question.vue';
|
||||
import { markIcon, feedbackIcon } from '@/common/imgSvg';
|
||||
import { SUBJECT_TYPE } from '@/enum.js';
|
||||
|
||||
// 多选的确定按钮的样式
|
||||
const customStyle = {
|
||||
borderRadius: '16rpx',
|
||||
width: '292rpx',
|
||||
@@ -97,7 +107,11 @@
|
||||
type: String,
|
||||
required: true,
|
||||
validator: (value) => {
|
||||
// 考试: examination 练习: practice 错题本: mistake 学习: study 考试结算页 settlement
|
||||
// 考试: examination
|
||||
// 练习: practice
|
||||
// 错题本: mistake
|
||||
// 学习: study
|
||||
// 考试结算页 settlement
|
||||
return ['examination', 'practice', 'mistake', 'study', 'settlement'].includes(value);
|
||||
}
|
||||
},
|
||||
@@ -112,6 +126,18 @@
|
||||
default: true
|
||||
}
|
||||
});
|
||||
|
||||
// 状态管理
|
||||
const isExpanded = ref(false);
|
||||
const wrapperRef = ref(null);
|
||||
const contentRef = ref(null);
|
||||
|
||||
const animationStyle = ref({
|
||||
height: '0px',
|
||||
overflow: 'hidden',
|
||||
transition: 'height 0.3s ease-in-out'
|
||||
});
|
||||
|
||||
const modelValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
@@ -121,9 +147,31 @@
|
||||
let answerText = props.item?.my_answer || props.item.anserResult || [];
|
||||
// item_answer 是答题结果,可以是对象 数组 字符串类型
|
||||
const item_answer = ref(typeof answerText === 'string' ? answerText.split(',') : answerText);
|
||||
|
||||
const feedback_click = () => {
|
||||
emit('subject_click', 'feedback', props.item);
|
||||
};
|
||||
const instance = getCurrentInstance(); // 获取当前组件实例
|
||||
|
||||
// 切换展开/折叠状态（兼容H5和App）
|
||||
const toggleExpand = async () => {
|
||||
console.log('切换展开/折叠状态');
|
||||
const query = uni.createSelectorQuery().in(instance);
|
||||
query
|
||||
.select('.collapse-content')
|
||||
.boundingClientRect((rect) => {
|
||||
console.log('rect', rect);
|
||||
})
|
||||
.exec();
|
||||
};
|
||||
const queryRect = () => {
|
||||
// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
|
||||
return new Promise((resolve) => {
|
||||
this.$uvGetRect(`#${this.elId}`).then((size) => {
|
||||
resolve(size);
|
||||
});
|
||||
});
|
||||
};
|
||||
const mark_click = () => {
|
||||
emit('subject_click', 'mark', props.item);
|
||||
};
|
||||
@@ -159,18 +207,19 @@
|
||||
...res,
|
||||
correctFlag: props.clearResult ? '' : res.correctFlag
|
||||
}))
|
||||
}
|
||||
};
|
||||
},
|
||||
set: (val) => {}
|
||||
});
|
||||
|
||||
// 按钮
|
||||
const questionBuuttonClick = (type, submitObj) => {
|
||||
console.log('type', type, submitObj);
|
||||
// 判断点击的是什么
|
||||
if(type === 'complete') { // 完成
|
||||
|
||||
}else if(type === 'again') { // 重答
|
||||
|
||||
if (type === 'complete') {
|
||||
// 完成
|
||||
} else if (type === 'again') {
|
||||
// 重答
|
||||
}
|
||||
emit('subject_click', type, {
|
||||
qnsTyp: props.item.qnsTyp,
|
||||
@@ -191,17 +240,20 @@
|
||||
if (!['study'].includes(props.mode)) {
|
||||
muCheckbox('choose');
|
||||
}
|
||||
} else if (props.item.qnsTyp === 'SN') { // 单选
|
||||
} else if (props.item.qnsTyp === 'SN') {
|
||||
// 单选
|
||||
// 单选插入，并且移除其他
|
||||
item_answer.value[0] = analysisVo.itemId;
|
||||
muCheckbox('choose');
|
||||
} else if (props.item.qnsTyp === 'MU') { // 多选题
|
||||
} else if (props.item.qnsTyp === 'MU') {
|
||||
// 多选题
|
||||
// 多选直接插入
|
||||
item_answer.value.push(analysisVo.itemId);
|
||||
if (!['study'].includes(props.mode)) {
|
||||
muCheckbox('choose');
|
||||
}
|
||||
} else if (props.item.qnsTyp === 'JD') {// 判断题
|
||||
} else if (props.item.qnsTyp === 'JD') {
|
||||
// 判断题
|
||||
// 判断插入，并且移除其他
|
||||
item_answer.value = [analysisVo.itemId];
|
||||
muCheckbox('choose');
|
||||
@@ -216,9 +268,25 @@
|
||||
answerItems: subject_data.value.itemVos.filter((t) => item_answer.value.includes(t.itemId))
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化动画
|
||||
onMounted(() => {
|
||||
// // 创建动画实例
|
||||
// animation = uni.createAnimation({
|
||||
// duration: 300,
|
||||
// timingFunction: 'ease-in-out',
|
||||
// delay: 0
|
||||
// });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.collapse-wrapper {
|
||||
// overflow: hidden; /* 关键：隐藏超出部分 */
|
||||
// height: 0; /* 初始高度为0 */
|
||||
// transition: height 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.mark_and_feedback_div {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
@@ -232,7 +300,7 @@
|
||||
padding: 4rpx;
|
||||
}
|
||||
}
|
||||
.option_div{
|
||||
.option_div {
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.option_div_button {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<view class="talk-btns">
|
||||
<view class="touch-btn" @click="disabled_click">
|
||||
<uv-button
|
||||
:disabled="props.isDisabled"
|
||||
class="touch-btn"
|
||||
@touchstart="startRecord"
|
||||
@touchend="stopRecord"
|
||||
@@ -136,6 +137,7 @@
|
||||
const startTimer = ref(null); // 延迟启动的定时器ID
|
||||
const startFlag = ref(1);
|
||||
const startRecord = (obj) => {
|
||||
if(props.isDisabled) return;
|
||||
// 开始录音
|
||||
console.log('开始录音', recordingStatus.value);
|
||||
if (recordingStatus.value !== 'not_started') return;
|
||||
@@ -145,11 +147,14 @@
|
||||
recordingStatus.value = 'preparing';
|
||||
popupRef.value.open();
|
||||
recorderManager.start();
|
||||
}, 100);
|
||||
}, 80);
|
||||
};
|
||||
// 结束录音
|
||||
const stopRecord = () => {
|
||||
if(props.isDisabled) return;
|
||||
|
||||
console.log('结束录音');
|
||||
|
||||
if (startTimer.value) {
|
||||
clearTimeout(startTimer.value);
|
||||
startTimer.value = null;
|
||||
|
||||
@@ -147,6 +147,7 @@
|
||||
const tabsDiv = ref(null);
|
||||
const form = ref({});
|
||||
const crsId = ref('');
|
||||
const collectId = ref(''); // 记录初始的收藏id
|
||||
const tabAct = ref(0);
|
||||
const scrollTop = ref(0);
|
||||
const tabSwitch = (item) => {
|
||||
@@ -230,20 +231,23 @@
|
||||
common.hideLoading();
|
||||
});
|
||||
};
|
||||
|
||||
const collect_click = async (collectId) => {
|
||||
// uni.$emit('refresh_comment_data');
|
||||
const collect_click = async (id) => {
|
||||
try {
|
||||
if (!collectId) {
|
||||
if (!id) {
|
||||
common.loading('收藏中');
|
||||
form.value.collectId = await insertTraPersonalCollectionTask({
|
||||
const result = await insertTraPersonalCollectionTask({
|
||||
collectTyp: '01',
|
||||
collectBusId: crsId.value
|
||||
});
|
||||
console.log('result.body', result.body);
|
||||
form.value.collectId = result.body;
|
||||
|
||||
common.msg('收藏成功');
|
||||
} else {
|
||||
common.loading('取消收藏中');
|
||||
await deleteTraPersonalCollectionById({
|
||||
collectId: collectId
|
||||
collectId: id
|
||||
});
|
||||
form.value.collectId = null;
|
||||
|
||||
@@ -255,20 +259,35 @@
|
||||
};
|
||||
onMounted(async () => {
|
||||
uni.$on('refresh_comment_data', () => {
|
||||
console.log('发评论了刷新');
|
||||
// console.log('发评论了刷新');
|
||||
commentRef.value?.getData('submit');
|
||||
|
||||
tabAct.value = 2;
|
||||
});
|
||||
});
|
||||
onLoad((params) => {
|
||||
crsId.value = params.crsId;
|
||||
collectId.value = params.collectId || '';
|
||||
});
|
||||
onShow(() => {
|
||||
getData();
|
||||
});
|
||||
onUnload(() => {
|
||||
uni.$off('refresh_comment_data');
|
||||
if (form.value.collectId !== collectId.value) {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length >= 2) {
|
||||
const prevPage = pages[pages.length - 2];
|
||||
if (prevPage.route === 'pages/favorites/index') {
|
||||
// 更新
|
||||
uni.$emit('refresh_favorites_data', {
|
||||
type: 'course',
|
||||
state: !!form.value.collectId, // 最终是收藏了还是取消了
|
||||
old: collectId.value, // 进入时候的收藏id
|
||||
new: form.value.collectId // 新的收藏id
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="item">
|
||||
<view class="details_div">
|
||||
<view class="img_div" v-if="props.mode === 'testingHall'">
|
||||
<view class="img_div">
|
||||
<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
|
||||
</view>
|
||||
<view class="right_div">
|
||||
@@ -58,26 +58,15 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, reactive, nextTick } from 'vue';
|
||||
import { setPageCache } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
import { queryCrsExamHisByExamId } from '@/api/courseRecord.js';
|
||||
const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'testingHall',
|
||||
validator: (value) => {
|
||||
// 考试: examination
|
||||
// 考试中心 testingHall
|
||||
return ['examination', 'testingHall'].includes(value);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
import { queryCrsExamHisByExamId } from '@/api/courseRecord.js';
|
||||
const item = computed(() => props.item);
|
||||
const data_list = reactive([]);
|
||||
const total = ref(-1);
|
||||
|
||||
@@ -9,12 +9,9 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import itemVue from './examRecordItem.vue';
|
||||
|
||||
import { setPageCache } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { queryCrsExamRecordPaging } from '@/api/courseRecord.js';
|
||||
import { studyDurationIcon, studyTimeIcon } from '@/common/imgSvg';
|
||||
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15;
|
||||
const total = ref(-1);
|
||||
|
||||
@@ -10,16 +10,16 @@
|
||||
</view>
|
||||
<view class="prompt_div">
|
||||
<view class="prompt_div_left">
|
||||
<view class="top">{{ item.correctRate || '' }}</view>
|
||||
<view class="top">{{ item.correctRate || '0' }}%</view>
|
||||
<view class="bottom">答题正确率</view>
|
||||
</view>
|
||||
<view class="prompt_div_line"></view>
|
||||
<view class="prompt_div_right" @click="show_list_click">
|
||||
<view class="click_text">
|
||||
{{ item.exrCnt || 0 }}
|
||||
{{ item.exrCnt || '0' }}
|
||||
<uv-icon
|
||||
class="click_text_icon"
|
||||
:class="{click_text_icon_action:show_list_state}"
|
||||
:class="{ click_text_icon_action: show_list_state }"
|
||||
name="arrow-right"
|
||||
color="#0066FF"
|
||||
size="12"
|
||||
@@ -58,8 +58,8 @@
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, reactive, nextTick } from 'vue';
|
||||
import { setPageCache } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
import { queryPracticeHis } from '@/api/courseRecord.js';
|
||||
const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const props = defineProps({
|
||||
item: {
|
||||
@@ -67,11 +67,10 @@
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
import { queryPracticeHis } from '@/api/courseRecord.js';
|
||||
const item = computed(() => props.item);
|
||||
const data_list = reactive([]);
|
||||
const total = ref(-1);
|
||||
|
||||
const show_list_state = ref(false);
|
||||
const list_div_height = computed(() => {
|
||||
if (!show_list_state.value) {
|
||||
@@ -97,6 +96,7 @@
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转到详情
|
||||
const click_list_item = (list_item) => {
|
||||
common.navigateTo(`/pages/courseRecord/coursePracticeRecordDetail?exrId=${list_item.exrId}`);
|
||||
@@ -267,10 +267,9 @@
|
||||
/* 添加过渡动画，包含延迟效果 */
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.click_text_icon_action{
|
||||
.click_text_icon_action {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,8 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import itemVue from './practiceRecordItem.vue';
|
||||
import { setPageCache } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { queryPracticeRecordPaging } from '@/api/courseRecord.js';
|
||||
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15;
|
||||
@@ -49,7 +48,7 @@
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const scrolltolower = (item) => {
|
||||
getData();
|
||||
};
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</view>
|
||||
<view class="prompt_div">
|
||||
<view class="prompt_div_left">
|
||||
<view class="top">{{ item.stdyTm || '' }}</view>
|
||||
<view class="top">{{ formatSeconds(item.stdyTm) || '' }}</view>
|
||||
<view class="bottom">学习时长</view>
|
||||
</view>
|
||||
<view class="prompt_div_line"></view>
|
||||
@@ -31,7 +31,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_div" :style="{ height: list_div_height}">
|
||||
<view class="list_div" :style="{ height: list_div_height }">
|
||||
<view class="list_item" v-for="item_list in data_list" @click="click_list_item(item_list)">
|
||||
<view class="list_content">
|
||||
<view class="list_small_item">
|
||||
@@ -57,9 +57,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, reactive, nextTick } from 'vue';
|
||||
import { setPageCache } from '@/common/common';
|
||||
import { computed, ref, reactive } from 'vue';
|
||||
import { formatSeconds } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
import { queryStdyBatchByCrsId } from '@/api/courseRecord.js';
|
||||
const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const props = defineProps({
|
||||
item: {
|
||||
@@ -67,8 +68,6 @@
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
import { queryStdyBatchByCrsId } from '@/api/courseRecord.js';
|
||||
const item = computed(() => props.item);
|
||||
const data_list = reactive([]);
|
||||
const total = ref(-1);
|
||||
@@ -82,7 +81,7 @@
|
||||
return data_list.length * 136 + 'rpx';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 点击获取详情
|
||||
const show_list_click = () => {
|
||||
show_list_state.value = !show_list_state.value;
|
||||
@@ -99,9 +98,12 @@
|
||||
};
|
||||
// 跳转到详情
|
||||
const click_list_item = (list_item) => {
|
||||
common.navigateTo(`/pages/courseRecord/courseStudyRecordDetail?stdyId=${list_item.stdyBatch}`);
|
||||
common.navigateTo(
|
||||
`/pages/courseRecord/courseStudyRecordDetail?stdyId=${list_item.stdyBatch}&crsName=${item.value.crsName}`
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
// 计算两个标准时间的时间差值
|
||||
const formatDuration = (startTm, endTm) => {
|
||||
// 解析时间字符串为时间戳（毫秒）
|
||||
@@ -131,7 +133,6 @@
|
||||
}
|
||||
|
||||
.list_div {
|
||||
|
||||
overflow: hidden; /* 确保内容不会溢出容器 */
|
||||
transition: height 0.3s ease-out; /* 高度动画 */
|
||||
.list_item {
|
||||
|
||||
@@ -9,12 +9,9 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import itemVue from './studyRecordItem.vue';
|
||||
|
||||
import { setPageCache } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { queryStdyRecordPaging } from '@/api/courseRecord.js';
|
||||
import { studyDurationIcon, studyTimeIcon } from '@/common/imgSvg';
|
||||
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15;
|
||||
const total = ref(-1);
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
$bg-margin-left: 30rpx;
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 70rpx - 10rpx);
|
||||
height: calc(100vh - var(--status-bar-height) - 70rpx);
|
||||
}
|
||||
.content {
|
||||
position: relative;
|
||||
|
||||
@@ -45,6 +45,7 @@
|
||||
import studyRecordList from './components/studyRecordList.vue';
|
||||
import practiceRecordList from './components/practiceRecordList.vue';
|
||||
import examRecordList from './components/examRecordList.vue';
|
||||
|
||||
import { reactive, ref, computed, nextTick, onMounted, watch } from 'vue';
|
||||
import common from '@/common/common.js';
|
||||
const listItemRefs = ref([]);
|
||||
@@ -82,7 +83,7 @@
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
); // 这里的immediate会在onMounted之后执行
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -92,8 +92,10 @@
|
||||
@submit="touchBtnSubmit"
|
||||
loadingText="问题回答中，请在问题回答结束后重试！"
|
||||
:isLoading="!answerIsOver"
|
||||
:isDisabled="false"
|
||||
:isDisabled="touchIsDisabled"
|
||||
/>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -159,6 +161,7 @@
|
||||
const feedbackRef = ref(null);
|
||||
const dialogRef = ref(null);
|
||||
const popupRef = ref(null);
|
||||
let examinationStartTime = 0; // 考试开始时间
|
||||
|
||||
const mode = ref('examination'); // 考试 examination 练习practice
|
||||
const paperData = reactive({
|
||||
@@ -172,12 +175,21 @@
|
||||
const popup_input_bottom = ref('0px');
|
||||
const questionNumber = ref(0); // 题号
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
|
||||
const topic = computed({
|
||||
get: () => topicList[questionNumber.value],
|
||||
set: (val) => (topicList[questionNumber.value] = val)
|
||||
});
|
||||
const showTouchBtn = computed(() => {
|
||||
return topicList[questionNumber.value]['qnsTyp'] === 'ES';
|
||||
});
|
||||
const completedList = computed(() => {
|
||||
return [];
|
||||
});
|
||||
// 下面语音组件的禁用状态判断
|
||||
const touchIsDisabled = computed(() => {
|
||||
return topic.value?.es_status !== '' && topic.value?.es_status !== undefined;
|
||||
});
|
||||
|
||||
const markList = computed(() => topicList.filter((res) => !!res.mark).map((res) => res.qnsId)); // 标记列表
|
||||
// 下一题按钮状态
|
||||
@@ -265,6 +277,9 @@
|
||||
common.navigateBack();
|
||||
return;
|
||||
}
|
||||
// 记录起始时间
|
||||
examinationStartTime = new Date().getTime();
|
||||
|
||||
paperData.execId = examination.execId;
|
||||
paperData.examId = examination.examId;
|
||||
paperData.papersId = examination.papersId;
|
||||
@@ -395,7 +410,8 @@
|
||||
common.loading('正在提交');
|
||||
// 这里通过是否存在examId来判断是考试中心的考试还是课程的考试
|
||||
let func;
|
||||
if (paperData.examId) { // 这里是考试中心考试
|
||||
if (paperData.examId) {
|
||||
// 这里是考试中心考试
|
||||
func = commitPaperExam({
|
||||
papersId: paperData.papersId,
|
||||
examId: paperData.examId,
|
||||
|
||||
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<view class="item">
|
||||
<view class="details_div">
|
||||
<!-- <view class="img_div"> -->
|
||||
<!-- <image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview> -->
|
||||
<!-- </view> -->
|
||||
<view class="right_div">
|
||||
<view class="title ellipsis-text">
|
||||
{{ item.examName }}
|
||||
</view>
|
||||
<view class="prompt_div">
|
||||
<view class="prompt_div_left">
|
||||
<view class="top">{{ item.highestGrade || 0 }}</view>
|
||||
<view class="bottom">历史最高分</view>
|
||||
</view>
|
||||
<view class="prompt_div_line"></view>
|
||||
<view class="prompt_div_right" @click="show_list_click">
|
||||
<view class="click_text">
|
||||
{{ item.examCnt || 0 }}
|
||||
<uv-icon
|
||||
class="click_text_icon"
|
||||
:class="{click_text_icon_action:show_list_state}"
|
||||
name="arrow-right"
|
||||
color="#0066FF"
|
||||
size="12"
|
||||
:bold="true"
|
||||
></uv-icon>
|
||||
</view>
|
||||
<view class="bottom">考试次数</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_div" :style="{ height: list_div_height }">
|
||||
<view class="list_item" v-for="item_list in data_list" @click="click_list_item(item_list)">
|
||||
<view class="list_content">
|
||||
<view class="list_small_item">
|
||||
<image src="@/static/images/courseRecord/time.png" class="icon_img"></image>
|
||||
<view class="prompt">考试时间：{{ item_list.examStartTm }}</view>
|
||||
</view>
|
||||
<view class="list_small_item">
|
||||
<image src="@/static/images/courseRecord/duration.png" class="icon_img"></image>
|
||||
<view class="prompt">考试得分：{{ item_list.examGrade }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fl1"></view>
|
||||
<uv-icon name="arrow-right" color="#979797" size="17" :bold="true"></uv-icon>
|
||||
</view>
|
||||
<uv-load-more
|
||||
v-if="status === 'loading'"
|
||||
:status="status"
|
||||
loadmore-text="轻轻上拉加载"
|
||||
:height="30"
|
||||
></uv-load-more>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, reactive, nextTick } from 'vue';
|
||||
import { setPageCache } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
|
||||
import { queryExamHisByExamId } from '@/api/courseRecord.js';
|
||||
const item = computed(() => props.item);
|
||||
const data_list = reactive([]);
|
||||
const total = ref(-1);
|
||||
const show_list_state = ref(false);
|
||||
const list_div_height = computed(() => {
|
||||
if (!show_list_state.value) {
|
||||
return '0';
|
||||
} else if (status.value === 'loading') {
|
||||
return '100rpx';
|
||||
} else {
|
||||
return data_list.length * 136 + 'rpx';
|
||||
}
|
||||
});
|
||||
|
||||
// 点击获取考试详情
|
||||
const show_list_click = () => {
|
||||
show_list_state.value = !show_list_state.value;
|
||||
if (total.value === -1) {
|
||||
//加载数据
|
||||
status.value = 'loading';
|
||||
data_list.length = 0;
|
||||
queryExamHisByExamId({ examId: item.value.examId }).then((res) => {
|
||||
data_list.push(...res.body);
|
||||
total.value = data_list.length;
|
||||
status.value = 'loadmore';
|
||||
});
|
||||
}
|
||||
};
|
||||
// 跳转到详情
|
||||
const click_list_item = (list_item) => {
|
||||
const examLenTm = 666;
|
||||
const papersName = item.value.examName;
|
||||
common.navigateTo(
|
||||
`/pages/examination/result?execId=${list_item.execId}&examLenTm=${examLenTm}&papersName=${papersName}`
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.icon_img {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
}
|
||||
|
||||
.list_div {
|
||||
overflow: hidden; /* 确保内容不会溢出容器 */
|
||||
transition: height 0.2s ease-out; /* 高度动画 */
|
||||
.list_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18rpx 32rpx 18rpx 28rpx;
|
||||
background-color: #f9fbff;
|
||||
border-radius: 8rpx;
|
||||
margin: 20rpx 0 0 0;
|
||||
.list_content {
|
||||
.list_small_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
.prompt {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item {
|
||||
margin: 17rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx 22rpx;
|
||||
.details_div {
|
||||
display: flex;
|
||||
|
||||
.img_div {
|
||||
position: relative;
|
||||
width: 226rpx;
|
||||
height: 168rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 22rpx;
|
||||
|
||||
.img {
|
||||
width: 226rpx;
|
||||
height: 168rpx;
|
||||
}
|
||||
|
||||
.subscript {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 92rpx;
|
||||
height: 46rpx;
|
||||
border-radius: 0px 0px 0px 22rpx;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
line-height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.right_div {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-family: PingFangSC;
|
||||
color: #333333;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx; /* 字体大小30rpx */
|
||||
overflow: hidden; /* 超出部分隐藏 */
|
||||
margin-bottom: 8rpx;
|
||||
min-height: 40rpx;
|
||||
}
|
||||
|
||||
.prompt_div {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
line-height: 34rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
height: 116rpx;
|
||||
background-color: #f9fbff;
|
||||
border-radius: 8rpx;
|
||||
justify-content: space-around;
|
||||
.prompt_div_line {
|
||||
width: 4rpx;
|
||||
height: 30rpx;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
RGBA(242, 244, 248, 1) 0%,
|
||||
RGBA(230, 232, 238, 1) 30%,
|
||||
RGBA(230, 232, 238, 1) 70%,
|
||||
RGBA(242, 244, 248, 1) 100%
|
||||
);
|
||||
}
|
||||
.prompt_div_left,
|
||||
.prompt_div_right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.top,
|
||||
.click_text {
|
||||
font-family: Arial;
|
||||
font-weight: 700;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
line-height: 34rpx;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
.bottom {
|
||||
}
|
||||
.click_text {
|
||||
position: relative;
|
||||
.click_text_icon {
|
||||
position: absolute;
|
||||
margin-left: 18rpx;
|
||||
top: calc(50% - 12rpx);
|
||||
left: calc(100% - 14rpx);
|
||||
/* 添加过渡动画，包含延迟效果 */
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
.click_text_icon_action{
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.people_progress_div {
|
||||
display: flex;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 23rpx;
|
||||
color: #666;
|
||||
margin-bottom: 23rpx;
|
||||
|
||||
line-height: 23rpx;
|
||||
flex-wrap: nowrap;
|
||||
height: 23rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<view class="scroll_div">
|
||||
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
|
||||
<itemVue :item="item" v-for="(item, index) in data_list"></itemVue>
|
||||
<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
|
||||
<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import itemVue from './examRecordItem.vue';
|
||||
import common from '@/common/common';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { queryExamRecordPaging } from '@/api/courseRecord.js';
|
||||
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15;
|
||||
const total = ref(-1);
|
||||
const page = ref(0);
|
||||
const data_list = reactive([]);
|
||||
|
||||
const getData = (from = '') => {
|
||||
if (from == 'first') {
|
||||
if (total.value !== -1) {
|
||||
return;
|
||||
}
|
||||
status.value = 'loading';
|
||||
total.value = -1;
|
||||
page.value = 1;
|
||||
data_list.length = 0;
|
||||
} else {
|
||||
if (status.value !== 'loadmore' && status.value !== '') return;
|
||||
status.value = 'loading';
|
||||
page.value++;
|
||||
}
|
||||
queryExamRecordPaging({
|
||||
page: page.value,
|
||||
limit: limit
|
||||
})
|
||||
.then((res) => {
|
||||
total.value = res.total;
|
||||
data_list.push(...res.body);
|
||||
})
|
||||
.finally(() => {
|
||||
if (data_list.length >= total.value) {
|
||||
status.value = 'nomore';
|
||||
} else {
|
||||
status.value = 'loadmore';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const scrolltolower = (item) => {
|
||||
getData();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
getData
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_div {
|
||||
background-color: #f1f5fa;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
|
||||
}
|
||||
</style>
|
||||
@@ -1,249 +0,0 @@
|
||||
<template>
|
||||
<view class="scroll_div">
|
||||
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
|
||||
<view
|
||||
class="item"
|
||||
:class="getStatusClass(item.isFinish)"
|
||||
v-for="(item, index) in data_list"
|
||||
@click="click_item(item)"
|
||||
>
|
||||
<view class="img_div">
|
||||
<image-preview class="img" :src="item.ossAddr" mode="scaleToFill"></image-preview>
|
||||
<view class="subscript" v-if="item.isFinish === '00'">未完成</view>
|
||||
<view class="subscript" v-if="item.isFinish === '01'">已完成</view>
|
||||
</view>
|
||||
<view class="right_div">
|
||||
<view class="title ellipsis-text">
|
||||
{{ item.taskName }}
|
||||
</view>
|
||||
<view class="time_div" v-if="item.limitTyp === '02'">
|
||||
起止时间：
|
||||
<text class="blod_color">{{ item.startTm?.substr(0, 10) }}至{{ item.endTm?.substr(0, 10) }}</text>
|
||||
</view>
|
||||
<view class="people_progress_div">
|
||||
<view class="mr-10">
|
||||
完成人数：
|
||||
<text class="">{{ item.taskFinishSums ?? 0 }}/{{ item.taskSums ?? 0 }}</text>
|
||||
</view>
|
||||
<view>
|
||||
进度：
|
||||
<text class="">{{ item.finishCrs ?? 0 }}/{{ item.sumCrs ?? 0 }}门课程</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
|
||||
<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15;
|
||||
const total = ref(-1);
|
||||
const page = ref(0);
|
||||
const data_list = reactive([]);
|
||||
import { setPageCache } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
|
||||
import { queryAllTraTaskInfoByUserId } from '@/api/learningTasks.js';
|
||||
const props = defineProps({
|
||||
state: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const getData = (from = '', searchText = '') => {
|
||||
if (from == 'first') {
|
||||
if (total.value !== -1) {
|
||||
return;
|
||||
}
|
||||
status.value = 'loading';
|
||||
total.value = -1;
|
||||
page.value = 1;
|
||||
data_list.length = 0;
|
||||
} else {
|
||||
if (status.value !== 'loadmore' && status.value !== '') return;
|
||||
status.value = 'loading';
|
||||
page.value++;
|
||||
}
|
||||
setTimeout(() => {
|
||||
queryAllTraTaskInfoByUserId({
|
||||
state: props.state,
|
||||
page: page.value,
|
||||
limit: limit,
|
||||
taskName: searchText
|
||||
})
|
||||
.then((res) => {
|
||||
total.value = res.total;
|
||||
data_list.push(...res.body);
|
||||
})
|
||||
.finally(() => {
|
||||
if (data_list.length >= total.value) {
|
||||
status.value = 'nomore';
|
||||
} else {
|
||||
status.value = 'loadmore';
|
||||
}
|
||||
});
|
||||
}, 200);
|
||||
};
|
||||
const getStatusClass = (isFinish) => {
|
||||
// 00进行中、01已完成、02已超时
|
||||
if (isFinish === '00') return 'in_progress';
|
||||
if (isFinish === '01') return 'completed';
|
||||
return 'expired';
|
||||
};
|
||||
|
||||
// 跳转到详情
|
||||
const click_item = (item) => {
|
||||
if(item.isTimeOut === '00') {
|
||||
common.msg('任务已结束')
|
||||
return ;
|
||||
}
|
||||
setPageCache('learning_tasks_details', item);
|
||||
common.navigateTo('/pages/learningTasks/details');
|
||||
};
|
||||
const scrolltolower = (item) => {
|
||||
getData();
|
||||
};
|
||||
const search = (value) => {
|
||||
total.value = -1;
|
||||
console.log('value', value);
|
||||
getData('first', value);
|
||||
};
|
||||
defineExpose({
|
||||
getData,
|
||||
search
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_div {
|
||||
background-color: #f1f5fa;
|
||||
padding: 22rpx;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 88rpx - 80rpx - 88rpx - 20rpx - 30rpx);
|
||||
// height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 44rpx);
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
.item.in_progress {
|
||||
// 进行中
|
||||
.subscript {
|
||||
color: #0066ff;
|
||||
background-color: #daf0ff;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #0066ff;
|
||||
}
|
||||
}
|
||||
|
||||
.item.completed {
|
||||
// 已完成
|
||||
.subscript {
|
||||
color: #ffffff;
|
||||
background-color: #33c583 !important;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.item.expired {
|
||||
// 已超时
|
||||
.subscript {
|
||||
color: #ffffff;
|
||||
background-color: #ef5705;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #d70c18;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-Y .item {
|
||||
height: 170rpx;
|
||||
margin: 32rpx 22rpx;
|
||||
display: flex;
|
||||
|
||||
.img_div {
|
||||
position: relative;
|
||||
width: 224rpx;
|
||||
height: 168rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 22rpx;
|
||||
|
||||
.img {
|
||||
width: 226rpx;
|
||||
height: 168rpx;
|
||||
}
|
||||
|
||||
.subscript {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 92rpx;
|
||||
height: 46rpx;
|
||||
border-radius: 0px 0px 0px 22rpx;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
line-height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.right_div {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-family: PingFangSC;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.time_div {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 23rpx;
|
||||
color: #666;
|
||||
line-height: 23rpx;
|
||||
flex-wrap: nowrap;
|
||||
height: 23rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.people_progress_div {
|
||||
display: flex;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 23rpx;
|
||||
color: #666;
|
||||
margin-bottom: 23rpx;
|
||||
|
||||
line-height: 23rpx;
|
||||
flex-wrap: nowrap;
|
||||
height: 23rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -5,59 +5,34 @@
|
||||
<view class="back_div" @click="common.navigateBack()">
|
||||
<view class="back-icon"></view>
|
||||
</view>
|
||||
<view class="title font_pf">学习任务</view>
|
||||
</view>
|
||||
<view class="fixed_search_input_div">
|
||||
<search-input placeholder="请输入任务名" @search="search"></search-input>
|
||||
<view class="title font_pf">考试记录</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-body">
|
||||
<view class="body-tab">
|
||||
<uv-tabs
|
||||
class="font_pf my_tabs"
|
||||
:current="tabAct"
|
||||
:list="tabList"
|
||||
@change="tabChange"
|
||||
:scrollable="false"
|
||||
line-color="#0066FF"
|
||||
:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
|
||||
:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
|
||||
:lineColor="`url(${LineBg}) 10% 10%`"
|
||||
></uv-tabs>
|
||||
</view>
|
||||
<view class="uni-margin-wrap no-overflow">
|
||||
<swiper class="swiper" :current="tabAct" :indicator-dots="false" @change="swiperChange">
|
||||
<swiper-item>
|
||||
<listItem :ref="(el) => (listItemRefs[0] = el)" state="01"></listItem>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<listItem :ref="(el) => (listItemRefs[1] = el)" state="02"></listItem>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<listItem :ref="(el) => (listItemRefs[2] = el)" state="03"></listItem>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<examRecordList ref="listItemRef"></examRecordList>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { LineBg } from '@/enum.js';
|
||||
import listItem from './components/list-item.vue';
|
||||
|
||||
import examRecordList from './components/examRecordList.vue';
|
||||
|
||||
import { reactive, ref, computed, nextTick, onMounted, watch } from 'vue';
|
||||
import common from '@/common/common.js';
|
||||
const listItemRefs = ref([]);
|
||||
const listItemRef = ref(null);
|
||||
const taskRef = ref(null);
|
||||
const tabAct = ref(0);
|
||||
const tabList = ref([
|
||||
{
|
||||
name: '全 部'
|
||||
name: '学习记录'
|
||||
},
|
||||
{
|
||||
name: '已完成'
|
||||
name: '练习记录'
|
||||
},
|
||||
{
|
||||
name: '未完成'
|
||||
name: '考试记录'
|
||||
}
|
||||
]);
|
||||
|
||||
@@ -67,21 +42,10 @@
|
||||
const swiperChange = (item) => {
|
||||
tabAct.value = item.detail.current;
|
||||
};
|
||||
const search = (value) => {
|
||||
listItemRefs.value[tabAct.value]?.search(value);
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
watch(
|
||||
tabAct,
|
||||
(newValue, oldValue) => {
|
||||
typeof listItemRefs.value[newValue]?.getData === 'function' &&
|
||||
listItemRefs.value[newValue]?.getData('first');
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
); // 这里的immediate会在onMounted之后执行
|
||||
listItemRef.value?.getData('first');
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -102,12 +66,11 @@
|
||||
/*
|
||||
状态栏 var(--status-bar-height)
|
||||
标题高度88rpx
|
||||
搜索栏高度80rpx
|
||||
tab切换栏高度88rpx
|
||||
下方滑动区域上下边距各10共20rpx
|
||||
**/
|
||||
|
||||
height: calc(100vh - var(--status-bar-height) - 88rpx - 80rpx - 88rpx - 20rpx);
|
||||
height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
|
||||
@@ -1,236 +0,0 @@
|
||||
<template>
|
||||
<view class="scroll_div">
|
||||
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
|
||||
<view class="item" :class="getStatusClass(index)" v-for="(item,index) in data_list" @click="click_item(item)" >
|
||||
<view class="img_div">
|
||||
<image-preview class="img" :src="item?.ossAddr" mode="scaleToFill"></image-preview>
|
||||
<view class="subscript" v-if="item.isFinish === '00'">未完成</view>
|
||||
<view class="subscript" v-if="item.isFinish === '01'">已完成</view>
|
||||
</view>
|
||||
<view class="right_div">
|
||||
<view class="title ellipsis-text">
|
||||
{{item.taskName}}
|
||||
</view>
|
||||
<view class="time_div">
|
||||
起止时间：<text class="blod_color">{{item.startTm?.substr(0, 10)}}至{{item.endTm?.substr(0, 10)}}</text>
|
||||
</view>
|
||||
<view class="people_progress_div">
|
||||
<view class="mr-10">
|
||||
完成人数：<text class="blod_color">{{item.taskFinishSums ?? 0}}/{{item.taskSums ?? 0}}</text>
|
||||
</view>
|
||||
<view>
|
||||
我的进度：<text class="blod_color">{{item.myProcess ?? 0}}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<list-no-data v-if="total == 0 && status=='nomore'"></list-no-data>
|
||||
<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
const status = ref('loading') // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15
|
||||
const total = ref(-1)
|
||||
const page = ref(0)
|
||||
const data_list = reactive([])
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
nextTick
|
||||
} from 'vue'
|
||||
import {
|
||||
queryTraPersonalCollectionTaskPaging
|
||||
} from '@/api/favorites.js';
|
||||
const getData = (from = '') => {
|
||||
if (from == 'first') {
|
||||
if (total.value !== -1) {
|
||||
return
|
||||
}
|
||||
status.value = 'loading'
|
||||
total.value = -1
|
||||
page.value = 1
|
||||
data_list.length = 0
|
||||
} else {
|
||||
if (status.value !== 'loadmore' && status.value !== '') return
|
||||
status.value = 'loading'
|
||||
page.value++
|
||||
}
|
||||
console.log(status.value, '阿斯顿撒');
|
||||
|
||||
setTimeout(() => {
|
||||
queryTraPersonalCollectionTaskPaging({
|
||||
page: page.value,
|
||||
limit: limit
|
||||
}).then(res => {
|
||||
total.value = res.total
|
||||
data_list.push(...res.body)
|
||||
}).finally(() => {
|
||||
if (data_list.length >= total.value) {
|
||||
status.value = 'nomore'
|
||||
} else {
|
||||
status.value = 'loadmore'
|
||||
}
|
||||
})
|
||||
}, 200)
|
||||
}
|
||||
|
||||
// 跳转到详情
|
||||
const click_item = (item) => {
|
||||
|
||||
// tudo
|
||||
|
||||
// if(item.isTimeOut === '00') {
|
||||
// common.msg('任务已结束')
|
||||
// return ;
|
||||
// }
|
||||
|
||||
// setPageCache('learning_tasks_details', item);
|
||||
// common.navigateTo('/pages/learningTasks/details');
|
||||
};
|
||||
const getStatusClass = (index) => {
|
||||
const remainder = index % 3;
|
||||
if (remainder === 0) return 'in_progress';
|
||||
if (remainder === 1) return 'completed';
|
||||
return 'expired';
|
||||
};
|
||||
const scrolltolower = (item) => {
|
||||
getData()
|
||||
};
|
||||
defineExpose({
|
||||
getData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_div {
|
||||
background-color: #F1F5FA;
|
||||
padding: 22rpx;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 44rpx);
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.scroll-Y .item.in_progress {
|
||||
|
||||
// 进行中
|
||||
.subscript {
|
||||
|
||||
color: #0066FF;
|
||||
background-color: #DAF0FF;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-Y .item.completed {
|
||||
|
||||
// 已完成
|
||||
.subscript {
|
||||
color: #FFFFFF;
|
||||
background-color: #33C583;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-Y .item.expired {
|
||||
|
||||
// 已超时
|
||||
.subscript {
|
||||
color: #FFFFFF;
|
||||
background-color: #EF5705;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #D70C18;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-Y .item {
|
||||
height: 170rpx;
|
||||
margin: 32rpx 22rpx;
|
||||
display: flex;
|
||||
|
||||
.img_div {
|
||||
position: relative;
|
||||
width: 224rpx;
|
||||
height: 168rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 22rpx;
|
||||
|
||||
.img {
|
||||
width: 226rpx;
|
||||
height: 168rpx;
|
||||
}
|
||||
|
||||
.subscript {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 92rpx;
|
||||
height: 46rpx;
|
||||
border-radius: 0px 0px 0px 22rpx;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
line-height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right_div {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-family: PingFangSC;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.time_div {
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 23rpx;
|
||||
color: #666;
|
||||
line-height: 23rpx;
|
||||
flex-wrap: nowrap;
|
||||
height: 23rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.people_progress_div {
|
||||
display: flex;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 23rpx;
|
||||
color: #666;
|
||||
margin-bottom: 23rpx;
|
||||
|
||||
line-height: 23rpx;
|
||||
flex-wrap: nowrap;
|
||||
height: 23rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+85
-84
@@ -2,127 +2,129 @@
|
||||
<view class="scroll_div">
|
||||
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
|
||||
<uv-swipe-action :autoClose="true">
|
||||
<uv-swipe-action-item class="item-swipe-action" :options="options" :threshold="40" :index="index"
|
||||
:name="index" v-for="(item,index) in data_list" @click="swipeActionClick" >
|
||||
<uv-swipe-action-item
|
||||
class="item-swipe-action"
|
||||
:options="options"
|
||||
:threshold="40"
|
||||
:index="index"
|
||||
:name="index"
|
||||
v-for="(item, index) in data_list"
|
||||
@click="swipeActionClick"
|
||||
>
|
||||
<view class="item" @touchmove.stop @click="click_item(item)">
|
||||
<view class="img_div">
|
||||
<image-preview class="img" :src="item?.ossAddr" mode="scaleToFill"></image-preview>
|
||||
<view class="subscript">
|
||||
{{item.evalGrade ?? 0}}分
|
||||
</view>
|
||||
<view class="subscript">{{ item.evalGrade ?? 0 }}分</view>
|
||||
</view>
|
||||
<view class="right_div">
|
||||
<view class="title ellipsis-text">
|
||||
{{item.crsName}}
|
||||
{{ item.crsName }}
|
||||
</view>
|
||||
<view class="tag_div">
|
||||
<view class="tag" v-for="tagItem in item?.tagCataList ?? []">
|
||||
{{tagItem?.tagName}}
|
||||
{{ tagItem?.tagName }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="time_and_num">
|
||||
<view class="mr-10">
|
||||
发布：{{item.issuTm?.substr(0, 10)}}
|
||||
</view>
|
||||
<view>
|
||||
已学：{{item.accmStdyCnt}}次
|
||||
</view>
|
||||
<view class="mr-10">发布：{{ item.issuTm?.substr(0, 10) }}</view>
|
||||
<view>已学：{{ item.accmStdyCnt }}次</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uv-swipe-action-item>
|
||||
</uv-swipe-action>
|
||||
<list-no-data v-if="total == 0 && status=='nomore'"></list-no-data>
|
||||
<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
|
||||
<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
const status = ref('loading') // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15
|
||||
const total = ref(-1)
|
||||
const page = ref(0)
|
||||
const data_list = reactive([])
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
nextTick
|
||||
} from 'vue'
|
||||
import {
|
||||
queryTraPersonalCollectionCrsPaging,
|
||||
deleteTraPersonalCollectionById
|
||||
} from '@/api/favorites.js';
|
||||
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15;
|
||||
const total = ref(-1);
|
||||
const page = ref(0);
|
||||
const data_list = reactive([]);
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { queryTraPersonalCollectionCrsPaging, deleteTraPersonalCollectionById } from '@/api/favorites.js';
|
||||
import common from '@/common/common';
|
||||
const options = [{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#f56c6c'
|
||||
const options = [
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#f56c6c'
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
const getData = (from = '') => {
|
||||
console.log('status.value', status.value);
|
||||
if (from == 'first') {
|
||||
if (total.value !== -1) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
status.value = 'loading'
|
||||
total.value = -1
|
||||
page.value = 1
|
||||
data_list.length = 0
|
||||
status.value = 'loading';
|
||||
total.value = -1;
|
||||
page.value = 1;
|
||||
data_list.length = 0;
|
||||
} else {
|
||||
if (status.value !== 'loadmore' && status.value !== '') return
|
||||
status.value = 'loading'
|
||||
page.value++
|
||||
if (status.value !== 'loadmore' && status.value !== '') return;
|
||||
status.value = 'loading';
|
||||
page.value++;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
queryTraPersonalCollectionCrsPaging({
|
||||
page: page.value,
|
||||
limit: limit
|
||||
}).then(res => {
|
||||
total.value = res.total
|
||||
data_list.push(...res.body)
|
||||
}).finally(() => {
|
||||
if (data_list.length >= total.value) {
|
||||
status.value = 'nomore'
|
||||
} else {
|
||||
status.value = 'loadmore'
|
||||
}
|
||||
queryTraPersonalCollectionCrsPaging({
|
||||
page: page.value,
|
||||
limit: limit
|
||||
})
|
||||
.then((res) => {
|
||||
total.value = res.total;
|
||||
data_list.push(...res.body);
|
||||
})
|
||||
}, 200)
|
||||
}
|
||||
.finally(() => {
|
||||
if (data_list.length >= total.value) {
|
||||
status.value = 'nomore';
|
||||
} else {
|
||||
status.value = 'loadmore';
|
||||
}
|
||||
console.log('status.value', status.value);
|
||||
});
|
||||
};
|
||||
// 进入课程详情页
|
||||
const click_item = (item) => {
|
||||
common.navigateTo('/pages/courseDetail/index?crsId=' + item.crsId)
|
||||
common.navigateTo(`/pages/courseDetail/index?crsId=${item.crsId}&collectId=${item.collectId}`);
|
||||
};
|
||||
const swipeActionClick = (click_item) => {
|
||||
const index = click_item['name']
|
||||
const item = data_list[index]
|
||||
common.show('提示', '确认删除吗？').then(res => {
|
||||
const index = click_item['name'];
|
||||
const item = data_list[index];
|
||||
common.show('提示', '确认删除吗？').then((res) => {
|
||||
if (!res) return;
|
||||
common.loading()
|
||||
const collectId = '11'
|
||||
deleteTraPersonalCollectionById({collectId:item.collectId}).then(()=>{
|
||||
data_list.splice(index, 1); // 从列表移除
|
||||
total.value -= 1 // 更新下总数
|
||||
}).finally(() => {
|
||||
common.hideLoading()
|
||||
})
|
||||
})
|
||||
}
|
||||
const scrolltolower = (item) => {
|
||||
getData()
|
||||
common.loading();
|
||||
deleteTraPersonalCollectionById({ collectId: item.collectId })
|
||||
.then(() => {
|
||||
data_list.splice(index, 1); // 从列表移除
|
||||
total.value -= 1; // 更新下总数
|
||||
})
|
||||
.finally(() => {
|
||||
common.hideLoading();
|
||||
});
|
||||
});
|
||||
};
|
||||
const scrolltolower = (item) => {
|
||||
getData();
|
||||
};
|
||||
const refreshData = (params) => {
|
||||
total.value = -1;
|
||||
getData('first');
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
getData
|
||||
})
|
||||
getData,
|
||||
refreshData
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
|
||||
.scroll_div {
|
||||
background-color: #F1F5FA;
|
||||
background-color: #f1f5fa;
|
||||
padding: 22rpx;
|
||||
}
|
||||
|
||||
@@ -171,8 +173,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #EF5705;
|
||||
color: #FFFFFF;
|
||||
background-color: #ef5705;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -203,16 +205,15 @@
|
||||
padding: 0 10rpx;
|
||||
margin-right: 14rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #FFA150;
|
||||
border: 2rpx solid #ffa150;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 500;
|
||||
font-size: 23rpx;
|
||||
color: #FFA150;
|
||||
color: #ffa150;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.time_and_num {
|
||||
@@ -229,4 +230,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<view class="scroll_div">
|
||||
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
|
||||
<uv-swipe-action :autoClose="true">
|
||||
<uv-swipe-action-item
|
||||
class="item-swipe-action"
|
||||
:options="options"
|
||||
:threshold="40"
|
||||
:index="index"
|
||||
:name="index"
|
||||
v-for="(item, index) in data_list"
|
||||
@click="swipeActionClick"
|
||||
>
|
||||
<view class="item" :class="getStatusClass(index)" @touchmove.stop @click="click_item(item)">
|
||||
<view class="img_div">
|
||||
<image-preview class="img" :src="item?.ossAddr" mode="scaleToFill"></image-preview>
|
||||
<view class="subscript" v-if="item.isFinish === '00'">未完成</view>
|
||||
<view class="subscript" v-if="item.isFinish === '01'">已完成</view>
|
||||
</view>
|
||||
<view class="right_div">
|
||||
<view class="title ellipsis-text">
|
||||
{{ item.taskName }}
|
||||
</view>
|
||||
<view class="time_div">
|
||||
起止时间：
|
||||
<text class="blod_color">
|
||||
{{ item.startTm?.substr(0, 10) }}至{{ item.endTm?.substr(0, 10) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="people_progress_div">
|
||||
<view class="mr-10">
|
||||
完成人数：
|
||||
<text class="blod_color">{{ item.taskFinishSums ?? 0 }}/{{ item.taskSums ?? 0 }}</text>
|
||||
</view>
|
||||
<view>
|
||||
我的进度：
|
||||
<text class="blod_color">{{ item.myProcess ?? 0 }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uv-swipe-action-item>
|
||||
</uv-swipe-action>
|
||||
<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
|
||||
<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue';
|
||||
import { queryTraPersonalCollectionTaskPaging,deleteTraPersonalCollectionById } from '@/api/favorites.js';
|
||||
import { setPageCache } from '@/common/common';
|
||||
import common from '@/common/common';
|
||||
|
||||
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
||||
const limit = 15;
|
||||
const total = ref(-1);
|
||||
const page = ref(0);
|
||||
const data_list = reactive([]);
|
||||
const options = [
|
||||
{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#f56c6c'
|
||||
}
|
||||
}
|
||||
];
|
||||
const getData = (from = '') => {
|
||||
if (from == 'first') {
|
||||
if (total.value !== -1) {
|
||||
return;
|
||||
}
|
||||
status.value = 'loading';
|
||||
total.value = -1;
|
||||
page.value = 1;
|
||||
data_list.length = 0;
|
||||
} else {
|
||||
if (status.value !== 'loadmore' && status.value !== '') return;
|
||||
status.value = 'loading';
|
||||
page.value++;
|
||||
}
|
||||
setTimeout(() => {
|
||||
queryTraPersonalCollectionTaskPaging({
|
||||
page: page.value,
|
||||
limit: limit
|
||||
})
|
||||
.then((res) => {
|
||||
total.value = res.total;
|
||||
data_list.push(...res.body);
|
||||
})
|
||||
.finally(() => {
|
||||
if (data_list.length >= total.value) {
|
||||
status.value = 'nomore';
|
||||
} else {
|
||||
status.value = 'loadmore';
|
||||
}
|
||||
});
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const swipeActionClick = (click_item) => {
|
||||
const index = click_item['name'];
|
||||
const item = data_list[index];
|
||||
common.show('提示', '确认删除吗？').then((res) => {
|
||||
if (!res) return;
|
||||
common.loading();
|
||||
const collectId = '11';
|
||||
deleteTraPersonalCollectionById({ collectId: item.collectionId })
|
||||
.then(() => {
|
||||
data_list.splice(index, 1); // 从列表移除
|
||||
total.value -= 1; // 更新下总数
|
||||
})
|
||||
.finally(() => {
|
||||
common.hideLoading();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 跳转到详情
|
||||
const click_item = (item) => {
|
||||
// tudo
|
||||
if (item.isTimeOut === '00') {
|
||||
common.msg('任务已结束');
|
||||
return;
|
||||
}
|
||||
setPageCache('learning_tasks_details', item);
|
||||
common.navigateTo(`/pages/learningTasks/details?collectId=${item.collectionId}`);
|
||||
};
|
||||
const getStatusClass = (index) => {
|
||||
const remainder = index % 3;
|
||||
if (remainder === 0) return 'in_progress';
|
||||
if (remainder === 1) return 'completed';
|
||||
return 'expired';
|
||||
};
|
||||
const scrolltolower = (item) => {
|
||||
getData();
|
||||
};
|
||||
const refreshData = (params) => {
|
||||
total.value = -1;
|
||||
getData('first');
|
||||
console.log('子组件refreshData');
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
getData,
|
||||
refreshData
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_div {
|
||||
background-color: #f1f5fa;
|
||||
padding: 22rpx;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 44rpx);
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.scroll-Y .item.in_progress {
|
||||
// 进行中
|
||||
.subscript {
|
||||
color: #0066ff;
|
||||
background-color: #daf0ff;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-Y .item.completed {
|
||||
// 已完成
|
||||
.subscript {
|
||||
color: #ffffff;
|
||||
background-color: #33c583;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-Y .item.expired {
|
||||
// 已超时
|
||||
.subscript {
|
||||
color: #ffffff;
|
||||
background-color: #ef5705;
|
||||
}
|
||||
|
||||
.blod_color {
|
||||
color: #d70c18;
|
||||
}
|
||||
}
|
||||
.item-swipe-action {
|
||||
margin: 32rpx 22rpx;
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.uv-swipe-action-item__right__button__wrapper) {
|
||||
border-radius: 20rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-Y .item {
|
||||
height: 170rpx;
|
||||
// margin: 32rpx 22rpx;
|
||||
display: flex;
|
||||
|
||||
.img_div {
|
||||
position: relative;
|
||||
width: 224rpx;
|
||||
height: 168rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 22rpx;
|
||||
|
||||
.img {
|
||||
width: 226rpx;
|
||||
height: 168rpx;
|
||||
}
|
||||
|
||||
.subscript {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 92rpx;
|
||||
height: 46rpx;
|
||||
border-radius: 0px 0px 0px 22rpx;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 22rpx;
|
||||
line-height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.right_div {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-family: PingFangSC;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.time_div {
|
||||
font-family: Arial;
|
||||
font-weight: 400;
|
||||
font-size: 23rpx;
|
||||
color: #666;
|
||||
line-height: 23rpx;
|
||||
flex-wrap: nowrap;
|
||||
height: 23rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.people_progress_div {
|
||||
display: flex;
|
||||
font-family: PingFangSC;
|
||||
font-weight: 400;
|
||||
font-size: 23rpx;
|
||||
color: #666;
|
||||
margin-bottom: 23rpx;
|
||||
|
||||
line-height: 23rpx;
|
||||
flex-wrap: nowrap;
|
||||
height: 23rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -9,14 +9,26 @@
|
||||
</view>
|
||||
<view class="detail-body">
|
||||
<view class="body-tab">
|
||||
<uv-tabs class="font_pf my_tabs" :current="tabAct" :list="tabList" @change="tabChange"
|
||||
:scrollable="false" line-color="#0066FF"
|
||||
:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight:'600'}"
|
||||
:activeStyle="{color:'#0066FF',fontSize:'30rpx', fontWeight:'600'}"
|
||||
:lineColor="`url(${LineBg}) 10% 10%`"></uv-tabs>
|
||||
<uv-tabs
|
||||
class="font_pf my_tabs"
|
||||
:current="tabAct"
|
||||
:list="tabList"
|
||||
@change="tabChange"
|
||||
:scrollable="false"
|
||||
line-color="#0066FF"
|
||||
:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
|
||||
:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
|
||||
:lineColor="`url(${LineBg}) 10% 10%`"
|
||||
></uv-tabs>
|
||||
</view>
|
||||
<view class="uni-margin-wrap no-overflow">
|
||||
<swiper class="swiper" :current="tabAct" :indicator-dots="false" :disable-touch="true" @change="swiperChange">
|
||||
<swiper
|
||||
class="swiper"
|
||||
:current="tabAct"
|
||||
:indicator-dots="false"
|
||||
:disable-touch="true"
|
||||
@change="swiperChange"
|
||||
>
|
||||
<swiper-item>
|
||||
<FavoritesCourse ref="courseRef"></FavoritesCourse>
|
||||
</swiper-item>
|
||||
@@ -30,30 +42,25 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FavoritesTask from './components/favorites-task.vue'
|
||||
import FavoritesCourse from './components/favorites-course.vue'
|
||||
import FavoritesTask from './components/favoritesTask.vue';
|
||||
import FavoritesCourse from './components/favoritesCourse.vue';
|
||||
// 我的收藏
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
computed,
|
||||
nextTick,
|
||||
onMounted,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
LineBg
|
||||
} from '@/enum.js'
|
||||
import { reactive, ref, computed, nextTick, onMounted, watch } from 'vue';
|
||||
import { onShow, onLoad, onUnload } from '@dcloudio/uni-app';
|
||||
import { LineBg } from '@/enum.js';
|
||||
import common from '@/common/common';
|
||||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
||||
const courseRef = ref(null);
|
||||
const taskRef = ref(null);
|
||||
const tabAct = ref(0);
|
||||
const tabList = ref([{
|
||||
name: '课程收藏'
|
||||
}, {
|
||||
name: '任务收藏'
|
||||
}]);
|
||||
const tabList = ref([
|
||||
{
|
||||
name: '课程收藏'
|
||||
},
|
||||
{
|
||||
name: '任务收藏'
|
||||
}
|
||||
]);
|
||||
|
||||
const tabChange = (item) => {
|
||||
tabAct.value = item.index;
|
||||
@@ -62,23 +69,38 @@
|
||||
tabAct.value = item.detail.current;
|
||||
};
|
||||
onMounted(() => {
|
||||
watch(tabAct, (newValue, oldValue) => {
|
||||
if (newValue === 0) {
|
||||
courseRef.value?.getData('first')
|
||||
} else if (newValue === 1) {
|
||||
taskRef.value?.getData('first')
|
||||
watch(
|
||||
tabAct,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue === 0) {
|
||||
courseRef.value?.getData('first');
|
||||
} else if (newValue === 1) {
|
||||
taskRef.value?.getData('first');
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
}) // 这里的immediate会在onMounted之后执行
|
||||
})
|
||||
); // 这里的immediate会在onMounted之后执行
|
||||
});
|
||||
onLoad(async () => {
|
||||
uni.$on('refresh_favorites_data', (params) => {
|
||||
if (params.type === 'course') {
|
||||
courseRef.value?.refreshData(params);
|
||||
} else if (params.type === 'task') {
|
||||
taskRef.value?.refreshData(params);
|
||||
}
|
||||
});
|
||||
});
|
||||
onUnload(() => {
|
||||
uni.$off('refresh_favorites_data');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$bg-margin-left: 50rpx;
|
||||
|
||||
.my_tabs {
|
||||
|
||||
// 解决这个圆角的图片，开穿透
|
||||
:deep(.uv-tabs__wrapper__nav__line) {
|
||||
height: 26rpx !important;
|
||||
@@ -111,7 +133,7 @@
|
||||
}
|
||||
|
||||
.detail-main {
|
||||
background-color: #F6F8FF;
|
||||
background-color: #f6f8ff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -164,4 +186,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -79,21 +79,35 @@
|
||||
{{ item.crsName }}
|
||||
</view>
|
||||
<view class="button_div">
|
||||
<template v-if="item.isFinishStudy === '01' && item.isFinishExam === '01' && item.status !== '02'">
|
||||
<template
|
||||
v-if="item.isFinishStudy === '01' && item.isFinishExam === '01' && item.status !== '02'"
|
||||
>
|
||||
<image class="img" :src="lockIcon('#999999')"></image>
|
||||
<view class="button_text error">暂无通过条件，可自动解锁</view>
|
||||
</template>
|
||||
<template v-if="item.isFinishStudy === '01' && item.isFinishExam === '01' && item.status === '02'">
|
||||
<template
|
||||
v-if="item.isFinishStudy === '01' && item.isFinishExam === '01' && item.status === '02'"
|
||||
>
|
||||
<image class="img" :src="lockIcon('#0066FF')"></image>
|
||||
<view class="button_text success">已自动解锁</view>
|
||||
</template>
|
||||
<template v-if="item.isFinishStudy !== '01'">
|
||||
<image class="img" :src="passTheExamIcon(item.isFinishStudy==='02'?'#0066FF':'#999999')"></image>
|
||||
<view class="button_text" :class="item.isFinishStudy==='02'?'success':'error'">完成练习</view>
|
||||
<image
|
||||
class="img"
|
||||
:src="passTheExamIcon(item.isFinishStudy === '02' ? '#0066FF' : '#999999')"
|
||||
></image>
|
||||
<view class="button_text" :class="item.isFinishStudy === '02' ? 'success' : 'error'">
|
||||
完成练习
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="item.isFinishExam !== '01'">
|
||||
<image class="img" :src="completeTheExercisesIcon(item.isFinishExam==='02'?'#0066FF':'#999999')"></image>
|
||||
<view class="button_text" :class="item.isFinishExam==='02'?'success':'error'">通过考试</view>
|
||||
<image
|
||||
class="img"
|
||||
:src="completeTheExercisesIcon(item.isFinishExam === '02' ? '#0066FF' : '#999999')"
|
||||
></image>
|
||||
<view class="button_text" :class="item.isFinishExam === '02' ? 'success' : 'error'">
|
||||
通过考试
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
@@ -112,13 +126,14 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app';
|
||||
import { ref, reactive, computed, nextTick } from 'vue';
|
||||
import { queryAllTraTaskCrsInfo } from '@/api/learningTasks.js';
|
||||
import { passTheExamIcon, completeTheExercisesIcon, lockIcon } from '@/common/imgSvg';
|
||||
import { insertTraPersonalCollectionTask, deleteTraPersonalCollectionById } from '@/api/favorites.js';
|
||||
import common from '@/common/common';
|
||||
import { setPageCache, getPageCache } from '@/common/common';
|
||||
const collectId = ref(''); // 记录初始的收藏id
|
||||
const detailData = reactive({
|
||||
taskId: '',
|
||||
taskName: '',
|
||||
@@ -140,10 +155,8 @@
|
||||
};
|
||||
const getData = () => {
|
||||
status.value = 'loading';
|
||||
|
||||
queryAllTraTaskCrsInfo({
|
||||
taskId: detailData.taskId
|
||||
// taskId: 'TASKINFO02506401613920250820161715000008095'
|
||||
})
|
||||
.then((res) => {
|
||||
data_list.push(...res.body);
|
||||
@@ -166,12 +179,11 @@
|
||||
}
|
||||
common.navigateTo('/pages/courseDetail/index?crsId=' + item.crsId);
|
||||
};
|
||||
const collect_click = async (collectId) => {
|
||||
console.log('学习', collectId);
|
||||
const collect_click = async (id) => {
|
||||
console.log('学习', id);
|
||||
try {
|
||||
if (!collectId) {
|
||||
if (!id) {
|
||||
common.loading('收藏中');
|
||||
|
||||
const res = await insertTraPersonalCollectionTask({
|
||||
collectTyp: '02',
|
||||
collectBusId: detailData.taskId
|
||||
@@ -181,7 +193,7 @@
|
||||
} else {
|
||||
common.loading('取消收藏中');
|
||||
await deleteTraPersonalCollectionById({
|
||||
collectId: collectId
|
||||
collectId: id
|
||||
});
|
||||
detailData.collectionId = null;
|
||||
|
||||
@@ -192,14 +204,29 @@
|
||||
}
|
||||
};
|
||||
onLoad((e) => {
|
||||
collectId.value = e.collectId || '';
|
||||
const learning_tasks_details = getPageCache('learning_tasks_details');
|
||||
Object.assign(detailData, {
|
||||
...learning_tasks_details
|
||||
});
|
||||
nextTick(() => {
|
||||
getData();
|
||||
});
|
||||
console.log('detailData', detailData);
|
||||
getData();
|
||||
});
|
||||
onUnload(() => {
|
||||
if (detailData.collectionId !== collectId.value) {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length >= 2) {
|
||||
const prevPage = pages[pages.length - 2];
|
||||
if (prevPage.route === 'pages/favorites/index') {
|
||||
// 更新
|
||||
uni.$emit('refresh_favorites_data', {
|
||||
type: 'task',
|
||||
state: !!detailData.collectionId, // 最终是收藏了还是取消了
|
||||
old: collectId.value, // 进入时候的收藏id
|
||||
new: detailData.collectionId // 新的收藏id
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -221,59 +248,58 @@
|
||||
}
|
||||
.status_div {
|
||||
color: #adb4c3;
|
||||
background-color: #F3F5F5;
|
||||
background-color: #f3f5f5;
|
||||
}
|
||||
.plug{
|
||||
.plug {
|
||||
border-top: 4rpx solid #e1e8f0;
|
||||
}
|
||||
}
|
||||
//未完成
|
||||
&.unfinished {
|
||||
.circle_div {
|
||||
border: 4rpx solid #0066FF;
|
||||
border: 4rpx solid #0066ff;
|
||||
// background-color: #bdc7e6;
|
||||
}
|
||||
.line_div {
|
||||
border-left: 4rpx solid #0066FF;
|
||||
border-left: 4rpx solid #0066ff;
|
||||
}
|
||||
.status_div {
|
||||
color: #FFFFFF;
|
||||
background-color: #4C93FF;
|
||||
color: #ffffff;
|
||||
background-color: #4c93ff;
|
||||
}
|
||||
.plug{
|
||||
border-top: 4rpx solid #0066FF;
|
||||
.plug {
|
||||
border-top: 4rpx solid #0066ff;
|
||||
}
|
||||
}
|
||||
|
||||
// 未解锁
|
||||
&.not_unlocked {
|
||||
.circle_div {
|
||||
border: 4rpx solid #ADB4C3;
|
||||
border: 4rpx solid #adb4c3;
|
||||
}
|
||||
.line_div {
|
||||
border-left: 4rpx dashed #ADB4C3;
|
||||
border-left: 4rpx dashed #adb4c3;
|
||||
}
|
||||
.status_div {
|
||||
color: #6C9CE4;
|
||||
background-color: #EFF6FF;
|
||||
color: #6c9ce4;
|
||||
background-color: #eff6ff;
|
||||
}
|
||||
.plug{
|
||||
border-top: 4rpx solid #ADB4C3;
|
||||
.plug {
|
||||
border-top: 4rpx solid #adb4c3;
|
||||
}
|
||||
}
|
||||
// 最后一项
|
||||
&:last-child .plug{
|
||||
&:last-child .plug {
|
||||
width: 80%;
|
||||
height: 40rpx;
|
||||
margin-top: -6rpx;
|
||||
|
||||
}
|
||||
.progress_div {
|
||||
width: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
.circle_div {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
@@ -338,18 +364,16 @@
|
||||
.button_text {
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
|
||||
|
||||
text-align: left;
|
||||
margin-right: 50rpx;
|
||||
&.success{
|
||||
color: #0066FF;
|
||||
&.success {
|
||||
color: #0066ff;
|
||||
}
|
||||
&.error{
|
||||
&.error {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+599
-588
File diff suppressed because it is too large
Load Diff
+63
-100
@@ -15,8 +15,10 @@
|
||||
<text class="grey">/{{ storageTopicList.length }}</text>
|
||||
</view>
|
||||
<view class="question">
|
||||
<view class="grey">剩余时间</view>
|
||||
<uv-count-down :time="100 * 1000" format="HH:mm:ss"></uv-count-down>
|
||||
<view class="grey">练习时长</view>
|
||||
<view class="">
|
||||
{{ formatSeconds(practiceTime) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="progress">
|
||||
@@ -49,10 +51,6 @@
|
||||
@subject_click="subject_click"
|
||||
v-model="item.my_answer"
|
||||
></Subject>
|
||||
<!-- <CharactersSubject :item="item" v-if="item.qnsTyp === 'ES'" :mode="mode"
|
||||
:activeVoiceId="activeVoiceId" :voicePathValue="voicePathValue"
|
||||
@subject_click="subject_click">
|
||||
</CharactersSubject> -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
@@ -84,10 +82,10 @@
|
||||
import Subject from '@/components/examination/subject.vue';
|
||||
import CharactersSubject from '@/components/examination/characters-subject.vue';
|
||||
import TouchBtn from '@/components/examination/touchBtn.vue';
|
||||
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { ref, reactive, computed, onMounted, nextTick, onUnmounted } from 'vue';
|
||||
import { onLoad, onHide, onShow, onUnload } from '@dcloudio/uni-app';
|
||||
import common from '@/common/common';
|
||||
import { getPageCache } from '@/common/common';
|
||||
import { setPageCache, formatSeconds, getPageCache } from '@/common/common';
|
||||
import { commonUploadVoiceFile } from '@/api/common.js';
|
||||
import { optionErrorIcon, examinationSheetIcon } from '@/common/imgSvg';
|
||||
import { practiceAnswer, practiceCommit, queryCrsPracticeAnswerResult } from '@/api/practice.js';
|
||||
@@ -95,7 +93,11 @@
|
||||
const feedbackRef = ref(null);
|
||||
const dialogRef = ref(null);
|
||||
const touchBtnRef = ref(null);
|
||||
|
||||
const practiceTime = ref(0); // 当前练习时间
|
||||
let practiceStartTime = 0; // 练习开始时间
|
||||
let practiceTimeTimer = null; // 练习计时器
|
||||
let leaveDuration = 0; // 当前总计离开时间
|
||||
let leaveStartTime = 0; // 离开开始时间
|
||||
const mode = ref('practice'); // 考试 examination 练习practice
|
||||
const paperData = reactive({
|
||||
exrId: '',
|
||||
@@ -109,20 +111,19 @@
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
const topic = computed({
|
||||
get: () => topicList[questionNumber.value],
|
||||
set: (val) => topicList[questionNumber.value] = val
|
||||
set: (val) => (topicList[questionNumber.value] = val)
|
||||
});
|
||||
const showTouchBtn = computed(() => {
|
||||
return topic.value?.qnsTyp === 'ES';
|
||||
});
|
||||
|
||||
// 下面语音组件的禁用状态判断
|
||||
const touchIsDisabled = computed(() => {
|
||||
|
||||
return topic.value?.es_status !== '' && topic.value?.es_status !== undefined
|
||||
})
|
||||
const touchIsDisabled = computed(() => {
|
||||
console.log('下面语音组件的禁用状态判断', topic.value?.es_status !== '' && topic.value?.es_status !== undefined);
|
||||
return topic.value?.es_status !== '' && topic.value?.es_status !== undefined;
|
||||
});
|
||||
|
||||
|
||||
const progress = computed(() => {
|
||||
const progress = computed(() => {
|
||||
// 计算进度百分比（保留两位小数）
|
||||
const total = storageTopicList.value.length;
|
||||
if (total === 0) return 0;
|
||||
@@ -132,8 +133,6 @@
|
||||
// 弹出框配置
|
||||
const dialogConfiguration = reactive({});
|
||||
|
||||
const activeVoiceId = ref('');
|
||||
|
||||
const swiperChange = (item) => {
|
||||
questionNumber.value = item.detail.current;
|
||||
};
|
||||
@@ -280,7 +279,7 @@
|
||||
touchBtnRef.value?.clearinputText(old_text); // 清除发送框数据
|
||||
// 处理失败情况
|
||||
});
|
||||
|
||||
|
||||
// const traQnsInfoVo = body.traQnsInfoVo;
|
||||
// topic.analyContent = traQnsInfoVo.analyContent; // 答案解析
|
||||
// console.log('答题结果', traQnsInfoVo);
|
||||
@@ -294,41 +293,26 @@
|
||||
})
|
||||
.catch(() => {
|
||||
topic.es_status = ''; // 取消转圈
|
||||
|
||||
});
|
||||
};
|
||||
// 录音组件提交
|
||||
const touchBtnSubmit = (type, submitObj) => {
|
||||
|
||||
const old_text = touchBtnRef.value?.clearinputText(); // 清除发送框数据
|
||||
|
||||
|
||||
if (type === 'voice') {
|
||||
topic.value.es_status = '00'; // 00转圈
|
||||
const voicePath = submitObj;
|
||||
commonUploadVoiceFile(voicePath, '/traask/traAskchat/voiceTrans', {})
|
||||
.then((res) => {
|
||||
let _res = JSON.parse(res.data);
|
||||
console.log('res小行星', _res);
|
||||
if (_res.rtnCode === '0000') {
|
||||
topic.value.es_status = '02'
|
||||
topic.value.es_status = '02';
|
||||
topic.value.my_answer = {
|
||||
anserResult: _res.body.transContent,
|
||||
ossKey: _res.body.fileId,
|
||||
ossAddr: _res.body.ossFileAddr,
|
||||
voicePath: voicePath
|
||||
}
|
||||
// {
|
||||
// "chatId":"CHAT025018122068202508232000590000000000000000000000000000000060",
|
||||
// "fileId":"S3F0250181220722025082320005900000676612",
|
||||
// "ossFileAddr":"http://25.18.122.66::9786/traoss/show//S3F0250181220722025082320005900000676612",
|
||||
// "transContent":"一二三四。"
|
||||
// }
|
||||
// submitProblemEssayQuestion({
|
||||
// anserResult: _res.body.transContent,
|
||||
// ossKey: _res.body.fileId,
|
||||
// ossAddr: _res.body.ossFileAddr,
|
||||
// voicePath: voicePath
|
||||
// });
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -372,6 +356,8 @@
|
||||
my_answer: []
|
||||
}));
|
||||
addProblem();
|
||||
// 记录起始时间
|
||||
practiceStartTime = new Date().getTime();
|
||||
// #ifdef APP-PLUS
|
||||
// 安全区域底部到屏幕底部的高度（即底部安全区域高度）
|
||||
const safeAreaBottomHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom;
|
||||
@@ -386,7 +372,7 @@
|
||||
});
|
||||
// #endif
|
||||
});
|
||||
|
||||
|
||||
const result_click = ({ key }) => {
|
||||
console.log('res', key);
|
||||
if (key === 'hand_in_paper') {
|
||||
@@ -401,8 +387,6 @@
|
||||
// 交卷按钮点击，打开交卷确认框
|
||||
const hand_in_paper_button_click = () => {
|
||||
console.log('点击交卷', paperData);
|
||||
// console.log('点击交卷topicList', topicList);
|
||||
// return;
|
||||
// 判断是否完成所有题目
|
||||
const completeList = topicList
|
||||
.filter((res) => !!(Array.isArray(res.my_answer) ? res.my_answer.length : res.my_answer))
|
||||
@@ -461,59 +445,42 @@
|
||||
};
|
||||
// 执行交卷
|
||||
const hand_in_paper = () => {
|
||||
const answerDtoList = topicList.map((res) => {
|
||||
let answerItem = {
|
||||
examId: paperData.examId,
|
||||
papersId: paperData.papersId,
|
||||
qnsId: res.qnsId,
|
||||
ossKey: '',
|
||||
anserResult: ''
|
||||
};
|
||||
if (res.qnsTyp === 'ES') {
|
||||
// 问答题特殊处理
|
||||
return {
|
||||
...answerItem,
|
||||
anserResult: ''
|
||||
};
|
||||
} else {
|
||||
//其他题
|
||||
return {
|
||||
...answerItem,
|
||||
anserResult: res.my_answer.join(',')
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
console.log('answerDtoList', answerDtoList);
|
||||
dialogRef.value.close();
|
||||
common.loading('正在提交');
|
||||
commitPaperExam({
|
||||
examId: paperData.examId,
|
||||
execId: paperData.execId || '1',
|
||||
examLenTm: 1200,
|
||||
answerDtoStr: JSON.stringify(answerDtoList)
|
||||
})
|
||||
.then((res) => {
|
||||
console.log('提交成功', res);
|
||||
// 判断是否需要查分
|
||||
if (res.body.flagQuery === 'Y') {
|
||||
// 需要查分
|
||||
const examLenTm = 678;
|
||||
common.redirectTo(
|
||||
`/pages/examination/result?execId=${res.body.execId}&examLenTm=${examLenTm}&papersName=${paperData.papersName}`
|
||||
);
|
||||
} else {
|
||||
// todo 此处应该有个弹窗交代下结果
|
||||
common.navigateBack();
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
console.log('error', res);
|
||||
})
|
||||
.finally(() => {
|
||||
common.hideLoading().body;
|
||||
});
|
||||
|
||||
};
|
||||
// 启动定时器
|
||||
const startTimer = () => {
|
||||
if (practiceTimeTimer) {
|
||||
clearInterval(practiceTimeTimer);
|
||||
}
|
||||
practiceTimeTimer = setInterval(() => {
|
||||
const currentTime = Date.now();
|
||||
const elapsedSeconds = Math.floor((currentTime - practiceStartTime - leaveDuration) / 1000);
|
||||
practiceTime.value = elapsedSeconds;
|
||||
}, 1000);
|
||||
};
|
||||
// 暂停定时器
|
||||
const stopTimer = () => {
|
||||
if (practiceTimeTimer) {
|
||||
clearInterval(practiceTimeTimer);
|
||||
practiceTimeTimer = null;
|
||||
}
|
||||
};
|
||||
onShow(() => {
|
||||
if (leaveStartTime) {
|
||||
const time = Date.now() - leaveStartTime;
|
||||
leaveDuration += time;
|
||||
leaveStartTime = 0; // 重置离开开始时间
|
||||
}
|
||||
startTimer(); // 启动/恢复定时器
|
||||
});
|
||||
|
||||
onHide(() => {
|
||||
leaveStartTime = new Date().getTime();
|
||||
stopTimer();
|
||||
});
|
||||
onUnload(() => {
|
||||
stopTimer();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -744,17 +711,13 @@
|
||||
align-items: center;
|
||||
// background-color: red;
|
||||
width: 242rpx;
|
||||
color: red;
|
||||
|
||||
.grey {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
:deep(.uv-count-down__text) {
|
||||
color: #ffffff !important;
|
||||
font-weight: 600;
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.grey {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="scroll_div">
|
||||
<view class="scroll_div content">
|
||||
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
|
||||
<view class="item" :class="getStatusClass(index)" v-for="(item,index) in data_list">
|
||||
<view class="top">
|
||||
@@ -90,6 +90,7 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.scroll_div {
|
||||
background-color: #F1F5FA;
|
||||
padding: 22rpx;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<view class="scroll_div">
|
||||
<scroll-view :scroll-y="true" class="scroll-Y" :show-scrollbar="false" @scrolltolower="scrolltolower">
|
||||
<!-- <view class="item" :class="getStatusClass(index)" v-for="(item, index) in data_list">
|
||||
|
||||
</view> -->
|
||||
<subject v-for="(item, index) in data_list" :item="item" mode="mistake"></subject>
|
||||
<scroll-view :scroll-y="true" class="scroll-Y " :show-scrollbar="false" @scrolltolower="scrolltolower">
|
||||
<view class="content" v-for="(item, index) in data_list">
|
||||
<subject :item="item" mode="mistake" :isPreview="true" :clearResult="false"></subject>
|
||||
</view>
|
||||
<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
|
||||
<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@@ -67,14 +67,17 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll_div {
|
||||
background-color: #f1f5fa;
|
||||
padding: 22rpx;
|
||||
$bg-margin-left: 30rpx;
|
||||
.content {
|
||||
position: relative;
|
||||
margin: 32rpx $bg-margin-left;
|
||||
border-radius: 16rpx;
|
||||
padding: 34rpx 30rpx 34rpx 36rpx;
|
||||
background-color: #fff;
|
||||
// min-height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 44rpx - 156rpx);
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 44rpx - 156rpx);
|
||||
// background-color: #fff;
|
||||
background-color: #f1f5fa;
|
||||
min-height: calc(100vh - var(--status-bar-height) - 78rpx - 88rpx - 156rpx);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: calc(100vh - var(--status-bar-height) - 54rpx - 88rpx - 20rpx - 10rpx - 156rpx);
|
||||
height: calc(100vh - var(--status-bar-height) - 78rpx - 88rpx - 156rpx);
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
|
||||
@@ -0,0 +1,231 @@
|
||||
import {
|
||||
defineStore
|
||||
} from 'pinia';
|
||||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
export const useAudioStore = defineStore('audioStore', {
|
||||
state: () => ({
|
||||
// 音频实例（全局唯一）
|
||||
audioInstance: null,
|
||||
// 当前播放状态
|
||||
isPlaying: false,
|
||||
// 当前播放的音频地址
|
||||
currentSrc: '',
|
||||
// 加载状态
|
||||
isLoading: false,
|
||||
// 错误信息
|
||||
errorMsg: '',
|
||||
callbacks: {
|
||||
onEnded: null, // 播放完成回调
|
||||
onError: null, // 播放错误回调
|
||||
onLoaded: null // 音频加载完成回调（可获取时长）
|
||||
}
|
||||
}),
|
||||
getters: {
|
||||
// 获取当前音频实例（简化外部调用）
|
||||
getAudioInstance(state) {
|
||||
return state.audioInstance;
|
||||
},
|
||||
// 检查是否正在播放
|
||||
isAudioPlaying(state) {
|
||||
return state.isPlaying;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
// 初始化音频实例（确保全局唯一）
|
||||
initAudio() {
|
||||
if (!this.audioInstance) {
|
||||
// 创建实例
|
||||
this.audioInstance = uni.createInnerAudioContext();
|
||||
// 绑定事件监听
|
||||
this.bindAudioEvents();
|
||||
}
|
||||
return this.audioInstance;
|
||||
},
|
||||
|
||||
// 绑定音频事件（统一管理生命周期）
|
||||
bindAudioEvents() {
|
||||
if (!this.audioInstance) return;
|
||||
|
||||
// 播放开始事件
|
||||
this.audioInstance.onPlay(() => {
|
||||
this.isPlaying = true;
|
||||
this.isLoading = false;
|
||||
this.errorMsg = '';
|
||||
});
|
||||
|
||||
// 播放结束事件
|
||||
this.audioInstance.onEnded(() => {
|
||||
this.resetAudioState();
|
||||
// 触发自定义回调
|
||||
if (this.callbacks.onEnded && typeof this.callbacks.onEnded === 'function') {
|
||||
this.callbacks.onEnded();
|
||||
}
|
||||
});
|
||||
|
||||
// 音频可以播放时触发（此时通常能获取到时长）
|
||||
this.audioInstance.onCanplay(() => {
|
||||
// 尝试获取时长（部分环境需要延迟一点）
|
||||
setTimeout(() => {
|
||||
const duration = this.audioInstance.duration || 0;
|
||||
if (duration > 0) {
|
||||
this.duration = duration;
|
||||
this.isLoaded = true;
|
||||
this.isLoading = false;
|
||||
|
||||
// 触发加载完成回调（此时已获取时长）
|
||||
if (this.callbacks.onLoaded) {
|
||||
this.callbacks.onLoaded({
|
||||
duration: this.duration
|
||||
});
|
||||
}
|
||||
}
|
||||
}, 100); // 短暂延迟确保时长已加载
|
||||
});
|
||||
|
||||
// 加载完成事件
|
||||
this.audioInstance.onCanplay(() => {
|
||||
this.isLoading = false;
|
||||
});
|
||||
|
||||
// 错误事件
|
||||
this.audioInstance.onError((err) => {
|
||||
this.isPlaying = false;
|
||||
this.isLoading = false;
|
||||
this.errorMsg = `播放错误: ${err.errMsg || '未知错误'}`;
|
||||
console.error('音频错误:', err);
|
||||
if (this.callbacks.onError && typeof this.callbacks.onError === 'function') {
|
||||
this.callbacks.onError(this.errorMsg); // 把错误信息传给外部
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 新增：预设置音频地址并加载（此时不播放，仅获取时长）
|
||||
setAudioSrc(src) {
|
||||
if (!src || src === this.currentSrc) return; // 地址不变则不重复加载
|
||||
|
||||
this.initAudio();
|
||||
this.isLoading = true;
|
||||
this.isLoaded = false; // 重置加载状态
|
||||
this.currentSrc = src;
|
||||
this.errorMsg = '';
|
||||
|
||||
try {
|
||||
// 先停止当前播放并清空旧地址
|
||||
this.audioInstance.stop();
|
||||
this.audioInstance.src = '';
|
||||
|
||||
// 设置新地址并加载（不自动播放）
|
||||
this.audioInstance.src = src;
|
||||
this.audioInstance.load(); // 手动触发加载
|
||||
} catch (err) {
|
||||
this.isLoading = false;
|
||||
this.errorMsg = `设置音频失败: ${err.message}`;
|
||||
}
|
||||
},
|
||||
|
||||
// 修改：播放当前已设置的音频（需先调用setAudioSrc）
|
||||
playAudio() {
|
||||
if (!this.currentSrc) {
|
||||
this.errorMsg = '请先设置音频地址';
|
||||
return;
|
||||
}
|
||||
|
||||
// 已在播放则暂停
|
||||
if (this.isPlaying) {
|
||||
this.pauseAudio();
|
||||
return;
|
||||
}
|
||||
|
||||
// 未加载完成则等待加载
|
||||
if (!this.isLoaded) {
|
||||
this.isLoading = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// 执行播放
|
||||
try {
|
||||
this.audioInstance.play();
|
||||
this.isPlaying = true;
|
||||
this.isLoading = false;
|
||||
} catch (err) {
|
||||
this.isLoading = false;
|
||||
this.errorMsg = `播放失败: ${err.message}`;
|
||||
}
|
||||
},
|
||||
|
||||
// 暂停播放
|
||||
pauseAudio() {
|
||||
if (this.audioInstance && this.isPlaying) {
|
||||
this.audioInstance.pause();
|
||||
this.isPlaying = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 停止播放并重置状态
|
||||
stopAudio() {
|
||||
if (this.audioInstance) {
|
||||
this.audioInstance.stop();
|
||||
this.resetAudioState();
|
||||
}
|
||||
},
|
||||
// 重置音频状态（保留实例，清空状态）
|
||||
resetAudioState() {
|
||||
this.isPlaying = false;
|
||||
this.isLoading = false;
|
||||
this.currentSrc = '';
|
||||
// 清空地址避免残留
|
||||
if (this.audioInstance) {
|
||||
this.audioInstance.src = '';
|
||||
}
|
||||
},
|
||||
// 销毁音频实例（页面卸载时调用）
|
||||
destroyAudio() {
|
||||
if (this.audioInstance) {
|
||||
// 移除所有事件监听
|
||||
this.audioInstance.offPlay();
|
||||
this.audioInstance.offEnded();
|
||||
this.audioInstance.offCanplay();
|
||||
this.audioInstance.offError();
|
||||
// 停止并销毁实例
|
||||
this.audioInstance.stop();
|
||||
this.audioInstance.destroy();
|
||||
// 重置所有状态
|
||||
this.audioInstance = null;
|
||||
this.resetAudioState();
|
||||
this.errorMsg = '';
|
||||
}
|
||||
},
|
||||
// 移除所有回调（组件卸载时调用）
|
||||
removeCallbacks() {
|
||||
this.callbacks.onEnded = null;
|
||||
this.callbacks.onError = null;
|
||||
this.callbacks.onLoaded = null;
|
||||
},
|
||||
// 注册播放完成回调
|
||||
onAudioEnded(callback) {
|
||||
console.log('onAudioEnded');
|
||||
if (typeof callback === 'function') {
|
||||
this.callbacks.onEnded = callback;
|
||||
}
|
||||
},
|
||||
|
||||
// 注册播放错误回调
|
||||
onAudioError(callback) {
|
||||
console.log('注册播放错误回调');
|
||||
if (typeof callback === 'function') {
|
||||
this.callbacks.onError = callback;
|
||||
}
|
||||
},
|
||||
// 新增：注册音频加载完成回调（用于获取时长）
|
||||
onAudioLoaded(callback) {
|
||||
if (typeof callback === 'function') {
|
||||
this.callbacks.onLoaded = callback;
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-collapse 折叠面板
|
||||
@@ -0,0 +1,60 @@
|
||||
export default {
|
||||
props: {
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 标题右侧内容
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 标题下方的描述信息
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 是否禁用折叠面板
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否展示右侧箭头并开启点击反馈
|
||||
isLink: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否开启点击反馈
|
||||
clickable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否显示内边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 标题的对齐方式
|
||||
align: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// 唯一标识符
|
||||
name: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// 标题左侧图片，可为绝对路径的图片或内置图标
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 面板展开收起的过渡时间，单位ms
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
...uni.$uv?.props?.collapseItem
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<view class="uv-collapse-item">
|
||||
<uv-cell
|
||||
:title="title"
|
||||
:value="value"
|
||||
:label="label"
|
||||
:icon="icon"
|
||||
:isLink="isLink"
|
||||
:clickable="clickable"
|
||||
:border="parentData.border && showBorder"
|
||||
@click="clickHandler"
|
||||
:arrowDirection="expanded ? 'up' : 'down'"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<!-- 微信小程序不支持，因为微信中不支持 <slot name="title" slot="title" />的写法 -->
|
||||
<template slot="title">
|
||||
<slot name="title"></slot>
|
||||
</template>
|
||||
<template slot="icon">
|
||||
<slot name="icon"></slot>
|
||||
</template>
|
||||
<template slot="value">
|
||||
<slot name="value"></slot>
|
||||
</template>
|
||||
<template slot="right-icon">
|
||||
<slot name="right-icon"></slot>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</uv-cell>
|
||||
<view
|
||||
class="uv-collapse-item__content"
|
||||
:animation="animationData"
|
||||
ref="animation"
|
||||
>
|
||||
<view
|
||||
class="uv-collapse-item__content__text content-class"
|
||||
:id="elId"
|
||||
:ref="elId"
|
||||
><slot /></view>
|
||||
</view>
|
||||
<uv-line v-if="parentData.border"></uv-line>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation')
|
||||
const dom = uni.requireNativePlugin('dom')
|
||||
// #endif
|
||||
/**
|
||||
* collapseItem 折叠面板Item
|
||||
* @description 通过折叠面板收纳内容区域（搭配uv-collapse使用）
|
||||
* @tutorial https://www.uvui.cn/components/collapse.html
|
||||
* @property {String} title 标题
|
||||
* @property {String} value 标题右侧内容
|
||||
* @property {String} label 标题下方的描述信息
|
||||
* @property {Boolean} disbled 是否禁用折叠面板 ( 默认 false )
|
||||
* @property {Boolean} isLink 是否展示右侧箭头并开启点击反馈 ( 默认 true )
|
||||
* @property {Boolean} clickable 是否开启点击反馈 ( 默认 true )
|
||||
* @property {Boolean} border 是否显示内边框 ( 默认 true )
|
||||
* @property {String | Number} name 唯一标识符
|
||||
* @property {String} icon 标题左侧图片，可为绝对路径的图片或内置图标
|
||||
* @event {Function} change 某个item被打开或者收起时触发
|
||||
* @example <uv-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</uv-collapse-item>
|
||||
*/
|
||||
export default {
|
||||
name: "uv-collapse-item",
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
elId: '',
|
||||
// uni.createAnimation的导出数据
|
||||
animationData: {},
|
||||
// 是否展开状态
|
||||
expanded: false,
|
||||
// 根据expanded确定是否显示border，为了控制展开时，cell的下划线更好的显示效果，进行一定时间的延时
|
||||
showBorder: false,
|
||||
// 是否动画中，如果是则不允许继续触发点击
|
||||
animating: false,
|
||||
// 父组件uv-collapse的参数
|
||||
parentData: {
|
||||
accordion: false,
|
||||
border: false
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
expanded(n) {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = null
|
||||
// 这里根据expanded的值来进行一定的延时，是为了cell的下划线更好的显示效果
|
||||
this.timer = setTimeout(() => {
|
||||
this.showBorder = n
|
||||
}, n ? 10 : 290)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.elId = this.$uv.guid();
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
// 异步获取内容，或者动态修改了内容时，需要重新初始化
|
||||
init() {
|
||||
// 初始化数据
|
||||
this.updateParentData()
|
||||
if (!this.parent) {
|
||||
return this.$uv.error('uv-collapse-item必须要搭配uv-collapse组件使用')
|
||||
}
|
||||
const {
|
||||
value,
|
||||
accordion,
|
||||
children = []
|
||||
} = this.parent
|
||||
|
||||
if (accordion) {
|
||||
if (this.$uv.test.array(value)) {
|
||||
return this.$uv.error('手风琴模式下，uv-collapse组件的value参数不能为数组')
|
||||
}
|
||||
this.expanded = this.name == value
|
||||
} else {
|
||||
if (!this.$uv.test.array(value) && value !== null) {
|
||||
return this.$uv.error('非手风琴模式下，uv-collapse组件的value参数必须为数组')
|
||||
}
|
||||
this.expanded = (value || []).some(item => item == this.name)
|
||||
}
|
||||
// 设置组件的展开或收起状态
|
||||
this.$nextTick(function() {
|
||||
this.setContentAnimate()
|
||||
})
|
||||
},
|
||||
updateParentData() {
|
||||
// 此方法在mixin中
|
||||
this.getParentData('uv-collapse')
|
||||
},
|
||||
async setContentAnimate() {
|
||||
// 每次面板打开或者收起时，都查询元素尺寸
|
||||
// 好处是，父组件从服务端获取内容后，变更折叠面板后可以获得最新的高度
|
||||
const rect = await this.queryRect()
|
||||
const height = this.expanded ? rect.height : 0
|
||||
this.animating = true
|
||||
// #ifdef APP-NVUE
|
||||
const ref = this.$refs['animation'].ref
|
||||
animation.transition(ref, {
|
||||
styles: {
|
||||
height: height + 'px'
|
||||
},
|
||||
duration: this.duration,
|
||||
// 必须设置为true，否则会到面板收起或展开时，页面其他元素不会随之调整它们的布局
|
||||
needLayout: true,
|
||||
timingFunction: 'ease-in-out',
|
||||
}, () => {
|
||||
this.animating = false
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
const animation = uni.createAnimation({
|
||||
timingFunction: 'ease-in-out',
|
||||
});
|
||||
animation
|
||||
.height(height)
|
||||
.step({
|
||||
duration: this.duration,
|
||||
})
|
||||
.step()
|
||||
// 导出动画数据给面板的animationData值
|
||||
this.animationData = animation.export()
|
||||
// 标识动画结束
|
||||
this.$uv.sleep(this.duration).then(() => {
|
||||
this.animating = false
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// 点击collapsehead头部
|
||||
clickHandler() {
|
||||
if (this.disabled && this.animating) return
|
||||
// 设置本组件为相反的状态
|
||||
this.parent && this.parent.onChange(this)
|
||||
},
|
||||
// 查询内容高度
|
||||
queryRect() {
|
||||
// #ifndef APP-NVUE
|
||||
// 组件内部一般用this.$uvGetRect，对外的为getRect，二者功能一致，名称不同
|
||||
return new Promise(resolve => {
|
||||
this.$uvGetRect(`#${this.elId}`).then(size => {
|
||||
resolve(size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
// nvue下，使用dom模块查询元素高度
|
||||
// 返回一个promise，让调用此方法的主体能使用then回调
|
||||
return new Promise(resolve => {
|
||||
dom.getComponentRect(this.$refs[this.elId], res => {
|
||||
resolve(res.size)
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
.uv-collapse-item {
|
||||
|
||||
&__content {
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
|
||||
&__text {
|
||||
padding: 12px 15px;
|
||||
color: $uv-content-color;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
export default {
|
||||
props: {
|
||||
// 当前展开面板的name，非手风琴模式：[<string | number>]，手风琴模式：string | number
|
||||
value: {
|
||||
type: [String, Number, Array, null],
|
||||
default: null
|
||||
},
|
||||
// 是否手风琴模式
|
||||
accordion: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否显示外边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
...uni.$uv?.props?.collapse
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view class="uv-collapse">
|
||||
<uv-line v-if="border"></uv-line>
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
/**
|
||||
* collapse 折叠面板
|
||||
* @description 通过折叠面板收纳内容区域
|
||||
* @tutorial https://www.uvui.cn/components/collapse.html
|
||||
* @property {String | Number | Array} value 当前展开面板的name，非手风琴模式：[<string | number>]，手风琴模式：string | number
|
||||
* @property {Boolean} accordion 是否手风琴模式（ 默认 false ）
|
||||
* @property {Boolean} border 是否显示外边框 ( 默认 true ）
|
||||
* @event {Function} change 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
|
||||
* @example <uv-collapse></uv-collapse>
|
||||
*/
|
||||
export default {
|
||||
name: "uv-collapse",
|
||||
mixins: [mpMixin, mixin, props],
|
||||
watch: {
|
||||
needInit() {
|
||||
this.init()
|
||||
},
|
||||
// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
|
||||
parentData() {
|
||||
if (this.children.length) {
|
||||
this.children.map(child => {
|
||||
// 判断子组件(uv-checkbox)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
|
||||
typeof(child.updateParentData) === 'function' && child.updateParentData()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.children = []
|
||||
},
|
||||
computed: {
|
||||
needInit() {
|
||||
// 通过computed，同时监听accordion和value值的变化
|
||||
// 再通过watch去执行init()方法，进行再一次的初始化
|
||||
return [this.accordion, this.value]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 重新初始化一次内部的所有子元素
|
||||
init() {
|
||||
this.children.map(child => {
|
||||
child.init()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* collapse-item被点击时触发，由collapse统一处理各子组件的状态
|
||||
* @param {Object} target 被操作的面板的实例
|
||||
*/
|
||||
onChange(target) {
|
||||
let changeArr = []
|
||||
this.children.map((child, index) => {
|
||||
// 如果是手风琴模式，将其他的折叠面板收起来
|
||||
if (this.accordion) {
|
||||
child.expanded = child === target ? !target.expanded : false
|
||||
child.setContentAnimate()
|
||||
} else {
|
||||
if(child === target) {
|
||||
child.expanded = !child.expanded
|
||||
child.setContentAnimate()
|
||||
}
|
||||
}
|
||||
// 拼接change事件中，数组元素的状态
|
||||
changeArr.push({
|
||||
// 如果没有定义name属性，则默认返回组件的index索引
|
||||
name: child.name || index,
|
||||
status: child.expanded ? 'open' : 'close'
|
||||
})
|
||||
})
|
||||
|
||||
this.$emit('change', changeArr)
|
||||
this.$emit(target.expanded ? 'open' : 'close', target.name)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,89 @@
|
||||
{
|
||||
"id": "uv-collapse",
|
||||
"displayName": "uv-collapse 折叠面板 全面兼容小程序、nvue、vue2、vue3等多端",
|
||||
"version": "1.0.1",
|
||||
"description": "折叠面板组件，通过折叠面板收纳内容区域，点击可展开收起，多功能参数可配置。",
|
||||
"keywords": [
|
||||
"uv-collapse",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"collapse",
|
||||
"折叠面板"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-line",
|
||||
"uv-cell"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
## Collapse 折叠面板
|
||||
|
||||
> **组件名：uv-collapse**
|
||||
|
||||
通过折叠面板收纳内容区域，点击可展开收起，多功能参数可配置。
|
||||
|
||||
### <a href="https://www.uvui.cn/components/collapse.html" target="_blank">查看文档</a>
|
||||
|
||||
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
Reference in New Issue
Block a user