174 lines
3.7 KiB
Vue
174 lines
3.7 KiB
Vue
<template>
|
||
<view class="course-record-page">
|
||
<view class="top-bg"></view>
|
||
<view class="bot-bg"></view>
|
||
<view class="course-study-body">
|
||
<view class="body-title">
|
||
<uv-icon class="arrow-icon" name="arrow-left" @click="backRouter()" />
|
||
{{ recordTitle }}
|
||
</view>
|
||
<scroll-view class="talking-list" :scroll-y="true" :scroll-top="scrollTop" :show-scrollbar="false"
|
||
:scroll-with-animation="true">
|
||
<talkingItem v-for="item in talkingList" :type="item.type"
|
||
:dataInfo="item" :activeVoiceId="activeVoiceTalkingItemId" :isPlaying="activeVoiceTalkingItemId === item.id"
|
||
:voiceRate="chooseRate" />
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
onLoad
|
||
} from '@dcloudio/uni-app';
|
||
import {
|
||
ref,
|
||
unref,
|
||
computed,
|
||
watch
|
||
} from 'vue'
|
||
import {
|
||
queryTraStudyExecuteRecord
|
||
} from '@/api/courseRecord.js'
|
||
import common from '@/common/common';
|
||
import talkingItem from './components/talkingItem.vue'
|
||
|
||
const stdyId = ref('')
|
||
const scrollTop = ref(0)
|
||
const showOrder = ref(1)
|
||
const pgrphNum = ref(1)
|
||
|
||
const activeVoiceTalkingItemId = ref('')
|
||
const chooseRate = ref('1.0')
|
||
const recordTitle = ref('')
|
||
onLoad((params) => {
|
||
stdyId.value = params.stdyId
|
||
recordTitle.value = params.crsName || '课程学习记录'
|
||
getRecordInfo()
|
||
})
|
||
const talkingRecord = ref([])
|
||
const talkingList = computed(()=>{
|
||
let _arr = []
|
||
talkingRecord.value.forEach((t,index)=> {
|
||
_arr.push({
|
||
...t,
|
||
id: 'prgh-'+index,
|
||
chatContent:( t.pgrphContent || ''),
|
||
titleNum: '知识点'+(index+1)+'：',
|
||
type: 3
|
||
})
|
||
if(t.qnsInfoVos && t.qnsInfoVos.length>0){
|
||
t.qnsInfoVos.forEach((k,indexk)=>{
|
||
if(k.qnsTyp === 'ES'){
|
||
_arr.push({
|
||
...k,
|
||
chatContent: (k.qnsContent || ''),
|
||
titleNum: '问题'+(indexk+1)+'：',
|
||
type: 8,
|
||
id: 'qns-'+index+'-'+indexk,
|
||
})
|
||
}else{
|
||
_arr.push({
|
||
...k,
|
||
chatContent:(k.qnsContent || ''),
|
||
titleNum: '问题'+(indexk+1)+'：',
|
||
type: 8,
|
||
id: 'qns-'+index+'-'+indexk,
|
||
isQuestion: true,
|
||
my_answer: [],
|
||
backend_answer: [],
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
return _arr
|
||
})
|
||
const getRecordInfo = () => {
|
||
queryTraStudyExecuteRecord({
|
||
stdyId: stdyId.value
|
||
}).then(res => {
|
||
talkingRecord.value = res.body
|
||
})
|
||
}
|
||
const backRouter = () => {
|
||
common.navigateBack()
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
.course-record-page {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
.top-bg {
|
||
background: linear-gradient(16deg, rgba(234, 246, 255, 0) 0%, #e6eafd 100%);
|
||
height: 480rpx;
|
||
width: 750rpx;
|
||
}
|
||
|
||
.bot-bg {
|
||
background: linear-gradient(136deg, rgba(234, 246, 255, 0) 0%, #e6eafd 100%);
|
||
width: 750rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.course-study-body {
|
||
position: absolute;
|
||
overflow: hidden;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
padding: 0 0rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
padding-top: var(--status-bar-height);
|
||
|
||
.body-title {
|
||
height: 90rpx;
|
||
text-align: center;
|
||
font-size: 33rpx;
|
||
padding-top: 10rpx;
|
||
line-height: 46rpx;
|
||
box-sizing: border-box;
|
||
font-weight: 500;
|
||
color: #000;
|
||
position: relative;
|
||
|
||
.arrow-icon {
|
||
position: absolute;
|
||
left: 21rpx;
|
||
top: 5rpx;
|
||
color: #000;
|
||
padding: 15rpx;
|
||
}
|
||
}
|
||
|
||
.talking-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 10rpx 30rpx;
|
||
background: url(@/static/images/course/study-bg.png) no-repeat;
|
||
background-size: cover;
|
||
background-position: center bottom;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
|
||
.talking-list-cont {
|
||
padding: 0;
|
||
}
|
||
|
||
.talking-item {
|
||
margin-bottom: 46rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |