You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
9.0 KiB
328 lines
9.0 KiB
<template>
|
|
<BaseContainer class="recite-detail flex">
|
|
<NavBar title="详情" />
|
|
<view class="detail-box">
|
|
<view class="detail-info">
|
|
<view class="info-name flex">
|
|
{{ detailInfo.name }}
|
|
<!-- <view :class="[
|
|
'iconfont',
|
|
detailInfo.collect ? 'iconshoucang2' : 'iconshoucang11',
|
|
]" @click="detailInfo.collect = !detailInfo.collect"></view> -->
|
|
</view>
|
|
<view class="audio-box">
|
|
<view v-if="detailInfo.enAudio" class="audio" :class="{ audioActive: activeAudio === 1 }" @click="openAudio(1)">
|
|
英 <text>{{ detailInfo.enAudio }}</text>
|
|
<image v-if="activeAudio !== 1" src="@/static/images/learning/audio.png" mode="aspectFill"></image>
|
|
<image v-else src="@/static/images/learning/audio_active.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view v-if="detailInfo.uaAudio" class="audio" :class="{ audioActive: activeAudio === 2 }" @click="openAudio(0)">
|
|
美 <text>{{ detailInfo.uaAudio }}</text>
|
|
<image v-if="activeAudio !== 2" src="@/static/images/learning/audio.png" mode="aspectFill"></image>
|
|
<image v-else src="@/static/images/learning/audio_active.png" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="info-remark flex flex-center-x">
|
|
<view>{{ detailInfo.remark }}</view>
|
|
<view>单词报错</view>
|
|
</view>
|
|
<view class="info-adverb">
|
|
副词 <text>{{ detailInfo.adverb }}</text>
|
|
</view> -->
|
|
</view>
|
|
<mp-html
|
|
class="swiper-conter"
|
|
container-style="padding: 30rpx;background: #ffffff;"
|
|
:content="content"
|
|
></mp-html>
|
|
<!-- <view class="example">
|
|
<view class="title">例句</view>
|
|
<view v-for="(item, index) in detailInfo.example" :key="index" class="example-item">
|
|
<view class="item-content">
|
|
<view v-html="item.content"></view>
|
|
<image src="@/static/images/learning/audio.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="item-translate">{{ item.translate }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="analysis">
|
|
<view class="title">词根词缀句</view>
|
|
<view class="analysis-content">{{ detailInfo.analysis }}</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="detail-footer flex flex-center-x">
|
|
<!-- <view class="btn cut">砍掉</view> -->
|
|
<view class="btn next" @click="toNext">下一题</view>
|
|
</view>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import { clearanceSubjectChapter, reciteClock } from '@/api/learning';
|
|
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";
|
|
|
|
export default {
|
|
components: {
|
|
mpHtml,
|
|
},
|
|
data() {
|
|
return {
|
|
detailInfo: {
|
|
collect: false,
|
|
name: '',
|
|
enAudio: '',
|
|
uaAudio: '',
|
|
remark: 'adj.户外的;室外的',
|
|
adverb: 'outdoors',
|
|
example: [
|
|
{ content: 'If you enjoy <text style="color: #0F74BB;">outdoor</text> activities, this is the trip for you.', translate: '如果你喜欢户外运动，这一旅行很适合你。' },
|
|
{ content: 'If you enjoy <text style="color: #0F74BB;">outdoor</text> activities, this is the trip for you.', translate: '如果你喜欢户外运动，这一旅行很适合你。' },
|
|
{ content: 'If you enjoy <text style="color: #0F74BB;">outdoor</text> activities, this is the trip for you.', translate: '如果你喜欢户外运动，这一旅行很适合你。' },
|
|
{ content: 'If you enjoy <text style="color: #0F74BB;">outdoor</text> activities, this is the trip for you.', translate: '如果你喜欢户外运动，这一旅行很适合你。' },
|
|
],
|
|
analysis: 'out- 在外面 + door n.门'
|
|
},
|
|
activeAudio: 1,
|
|
id: 0,
|
|
content: '',
|
|
subjectId: 0,
|
|
name: '',
|
|
allList: [],
|
|
chapterId: 0,
|
|
audioLoading: false,
|
|
};
|
|
},
|
|
onLoad({id, subjectId, name}) {
|
|
this.id = id;
|
|
this.subjectId = subjectId;
|
|
this.name = name;
|
|
this.clearanceSubjectChapter();
|
|
},
|
|
methods: {
|
|
async clearanceSubjectChapter() {
|
|
try {
|
|
const { data } = await clearanceSubjectChapter({
|
|
recite_subject_id: this.subjectId,
|
|
});
|
|
console.log(data);
|
|
this.allList = data.filter(v => v.name === this.name)[0].children;
|
|
this.chapterId = data.filter(v => v.name === this.name)[0].id;
|
|
const {content, name, en_name, us_name} = this.allList.filter(v => Number(v.id) === Number(this.id))[0];
|
|
this.content = content;
|
|
this.detailInfo.name = name;
|
|
this.detailInfo.enAudio = en_name;
|
|
this.detailInfo.uaAudio = us_name;
|
|
this.reciteClock();
|
|
console.log(this.allList);
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
openAudio(type) {
|
|
this.activeAudio = type || 2;
|
|
console.log(`https://dict.youdao.com/dictvoice?type=${type}&audio=${this.detailInfo.name}`, this.audioLoading);
|
|
if (this.audioLoading) {
|
|
return false;
|
|
}
|
|
this.audioLoading = true;
|
|
const audio = uni.createInnerAudioContext();
|
|
uni.downloadFile({
|
|
url: `https://dict.youdao.com/dictvoice?type=${type}&audio=${this.detailInfo.name}`,
|
|
success: (res) => {
|
|
if (res.statusCode === 200) {
|
|
console.log('下载成功');
|
|
audio.src = res.tempFilePath;
|
|
audio.play();
|
|
this.audioLoading = false;
|
|
}
|
|
}
|
|
})
|
|
// audio.src = `https://dict.youdao.com/dictvoice?type=${type}&audio=${this.detailInfo.name}`;
|
|
// audio.play();
|
|
audio.onError((res) => {
|
|
console.log(res);
|
|
});
|
|
// audio.onPlay((res) => {
|
|
// console.log(res);
|
|
// })
|
|
},
|
|
toNext() {
|
|
const index = this.allList.findIndex(v => Number(v.id) === Number(this.id));
|
|
console.log(index, this.id);
|
|
if (index < this.allList.length - 1) {
|
|
this.content = this.allList[index + 1].content;
|
|
this.id = this.allList[index + 1].id;
|
|
this.reciteClock();
|
|
} else {
|
|
this.$util.showMsg('已经是最后一题了');
|
|
}
|
|
},
|
|
async reciteClock() {
|
|
try {
|
|
await reciteClock({
|
|
chapter_id: this.chapterId,
|
|
section_id: this.id,
|
|
});
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.recite-detail {
|
|
background: #f6f6f6;
|
|
flex-direction: column;
|
|
.detail-box {
|
|
width: 690rpx;
|
|
margin: 20rpx auto;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
.detail-info {
|
|
padding: 36rpx 20rpx 36rpx 32rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04);
|
|
border-radius: 8rpx;
|
|
.info-name {
|
|
color: #333333;
|
|
font-size: 62rpx;
|
|
line-height: 62rpx;
|
|
align-items: baseline;
|
|
font-weight: bold;
|
|
.iconfont {
|
|
font-size: 40rpx;
|
|
margin-left: auto;
|
|
font-weight: normal;
|
|
&.iconshoucang2 {
|
|
color: #ff6b00 !important;
|
|
}
|
|
}
|
|
}
|
|
.audio-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 40rpx;
|
|
.audio {
|
|
height: 48rpx;
|
|
background: #F7F7F7;
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 26rpx;
|
|
&:first-child {
|
|
margin-right: 16rpx;
|
|
}
|
|
&.audioActive {
|
|
background: rgba(15, 116, 187, 0.1);
|
|
}
|
|
text {
|
|
margin-left: 10rpx;
|
|
}
|
|
image {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-left: 27rpx;
|
|
}
|
|
}
|
|
}
|
|
.info-remark {
|
|
color: #333;
|
|
font-size: 26rpx;
|
|
margin: 16rpx 0 24rpx;
|
|
view:last-child {
|
|
width: 93rpx;
|
|
height: 39rpx;
|
|
background: #EEEEEE;
|
|
border-radius: 10rpx;
|
|
color: #666666;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
line-height: 39rpx;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
.info-adverb {
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
text {
|
|
color: #333;
|
|
margin-left: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
.example {
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04);
|
|
border-radius: 8rpx;
|
|
padding: 30rpx;
|
|
margin-top: 20rpx;
|
|
.title {
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
}
|
|
.example-item {
|
|
margin-top: 30rpx;
|
|
.item-content {
|
|
display: flex;
|
|
margin-bottom: 24rpx;
|
|
>view {
|
|
width: 520rpx;
|
|
}
|
|
image {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-left: auto;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
.item-translate {
|
|
color: #999999;
|
|
font-size:24rpx;
|
|
}
|
|
}
|
|
}
|
|
.analysis {
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04);
|
|
border-radius: 8rpx;
|
|
padding: 30rpx 32rpx;
|
|
margin-top: 20rpx;
|
|
.title {
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.analysis-content {
|
|
color: #333333;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.detail-footer {
|
|
width: 100%;
|
|
height: 130rpx;
|
|
justify-content: center;
|
|
// padding-left: 30rpx;
|
|
background: #fff;
|
|
box-shadow: 0rpx -19rpx 54rpx 0rpx rgba(34,34,34,0.05);
|
|
flex-shrink: 0;
|
|
.btn {
|
|
color: #666;
|
|
font-size: 30rpx;
|
|
&.next {
|
|
// width: 550rpx;
|
|
width: 690rpx;
|
|
height: 88rpx;
|
|
background: linear-gradient(0deg, #0F74BB 0%, #3293FF 100%);
|
|
border-radius: 44rpx;
|
|
color: #fff;
|
|
line-height: 88rpx;
|
|
text-align: center;
|
|
// margin-left: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |