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

测试图片预览

Browse Source
This commit is contained in:
yanghang
2025-06-23 15:55:56 +08:00
parent ae709ad6c5
commit 97bca63634
5 changed files with 455 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/image-preview/image-preview.vue
+8 -8
View File
@@ -32,7 +32,7 @@
imgUrlShow: {
handler(newval, oldval) {
if (oldval) {
URL.revokeObjectURL(oldval);
// URL.revokeObjectURL(oldval);
}
},
immediate: true,
@@ -43,12 +43,12 @@
getPreviewUrlBlob(id) {
// this.imgUrlShow = '@/static/images/index/message_b.png'
previewFile(id).then((res) => {
this.imgUrlShow = URL.createObjectURL(res);
// const reader = new FileReader();
// reader.readAsDataURL(res)
// reader.onloadend = () => {
// this.imgUrlShow = reader.result;
// }
// this.imgUrlShow = URL.createObjectURL(res);
const reader = new FileReader();
reader.readAsDataURL(res)
reader.onloadend = () => {
this.imgUrlShow = reader.result;
}
});
},
},
@@ -59,7 +59,7 @@
this.watching = true
},
beforeDestroy() {
URL.revokeObjectURL(this.imgUrlShow);
// URL.revokeObjectURL(this.imgUrlShow);
},
}
</script>
src/components/image-preview/video-preview.vue
+69
View File
@@ -0,0 +1,69 @@
<template>
<video :src="imgUrlShow" controls></video>
<!-- <image class="img" src="@/static/images/test/1.png"></image> -->
</template>
<script>
import {previewFile} from'@/api/common.js'
export default {
name:"image-preview",
props:{
imgId:{
default:'',
type:String
}
},
data() {
return {
imgUrlShow:'',
watching:false
};
},
watch: {
imgId: {
handler(newval, oldval) {
if (newval && this.watching) {
this.getPreviewUrlBlob(newval);
}
},
immediate: true,
deep: true,
},
imgUrlShow: {
handler(newval, oldval) {
if (oldval) {
URL.revokeObjectURL(oldval);
}
},
immediate: true,
deep: true,
}
},
methods: {
getPreviewUrlBlob(id) {
// this.imgUrlShow = '@/static/images/index/message_b.png'
previewFile(id).then((res) => {
this.imgUrlShow = URL.createObjectURL(res);
// const reader = new FileReader();
// reader.readAsDataURL(res)
// reader.onloadend = () => {
// this.imgUrlShow = reader.result;
// }
});
},
},
mounted() {
if (this.imgId) {
this.getPreviewUrlBlob(this.imgId);
}
this.watching = true
},
beforeDestroy() {
URL.revokeObjectURL(this.imgUrlShow);
},
}
</script>
<style>
</style>
src/pages.json
+7 -5
View File
@@ -100,11 +100,13 @@
}
},
{
"path" : "pages/course/study/study",
"style" :
{
"navigationBarTitleText" : ""
}
"path": "pages/course/study",
"style": {
"navigationBarTitleText": "课程学习",
"app-plus": {
"titleNView": false
}
}
}
],
"tabBar": {
src/pages/course/components/talkingItem.vue
+267
View File
@@ -0,0 +1,267 @@
<template>
<view class="ai-answer" v-if="type === 0">
<view class="user-info">
<view class="avatar-box">
<ImagePreview class="img-box" :imgId="''"></ImagePreview>
</view>
<view class="ai-name">
梁安娜
<view class="ai-name-desc">AI课程教练</view>
</view>
</view>
<view class="talking-info">
<view class="talking-gif"></view>
<view class="talking-cont">
<view class="talking-text">
阿列克山大是快乐的你艾德卡省的mask安东拉森扣篮大赛了快递那里是啊克里斯蒂娜老师的阿萨是看，
</view>
<ImagePreview class="cont-img-box" :imgId="''"></ImagePreview>
<VideoPreview class="cont-img-box" :imgId="''"></VideoPreview>
</view>
<view class="talking-cont">
<view class="talking-text">
阿列克山大是快乐的你艾德卡省的mask安东拉森扣篮大赛了快递那里是啊克里斯蒂娜老师的阿萨是看，
</view>
</view>
<view class="btns-cont">
<view class="replay-btn"></view>
<view class="play-btn"></view>
<view class="next-learn-btn">继续学</view>
<view class="replay-learn-btn">重新学</view>
<view class="next-btn">继续</view>
</view>
</view>
</view>
<view class="user-answer" v-else-if="type === 1">
<view class="user-info">
<view class="avatar-box">
<ImagePreview class="img-box" :imgId="''"></ImagePreview>
</view>
<view class="ai-name">
玛卡巴卡
</view>
</view>
<view class="talking-info">
<view class="talking-gif"></view>
<view class="talking-cont">
<view class="talking-text">
阿列克山大是快乐的你艾德卡省的mask安东拉森扣篮大赛了快递那里是啊克里斯蒂娜老师的阿萨是看，
</view>
</view>
<view class="btns-cont">
<view class="play-btn"></view>
</view>
</view>
</view>
<view v-else></view>
</template>
<script setup>
import ImagePreview from '@/components/image-preview/image-preview.vue'
import VideoPreview from '@/components/image-preview/video-preview.vue'
import { defineProps } from 'vue';
const props = defineProps({
type:{
default: 0,// 1： userAnswer 0: AIAnswer
type:[Number,String]
}
})
</script>
<style lang="scss">
.ai-answer{
.user-info{
overflow: hidden;
.avatar-box{
float: left;
width: 76rpx;
height: 76rpx;
border: 3rpx solid #fff;
background-color: #ccc;
overflow: hidden;
border-radius: 10rpx;
margin-right: 16rpx;
margin-bottom: 16rpx;
.img-box{
width: 100%;
height: 100%;
}
}
.ai-name{
float: left;
color: #666;
font-size: 25rpx;
line-height: 35rpx;
.ai-name-desc{
color: #999;
margin-left: 16rpx;
display: inline-block;
}
}
}
.talking-info{
padding: 20rpx;
border-radius: 15rpx;
background-color: #aaa;
.talking-gif{
width: 140rpx;
height: 38rpx;
background-color: #999;
margin-bottom: 16rpx;
}
.talking-cont{
.talking-text{
font-size: 28rpx;
line-height: 48rpx;
margin-bottom: 20rpx;
}
.cont-img-box{
width: 433rpx;
height: 269rpx;
border-radius: 15rpx;
overflow: hidden;
background-color: #eee;
margin-bottom: 20rpx;
}
}
.btns-cont{
overflow: hidden;
border-top: 3rpx solid #eee;
.replay-btn{
float: left;
width: 46rpx;
height: 46rpx;
background-color: #ccc;
overflow: hidden;
margin-right: 16rpx;
margin-top: 25rpx;
}
.play-btn{
float: left;
width: 46rpx;
height: 46rpx;
background-color: #ccc;
overflow: hidden;
margin-right: 16rpx;
margin-top: 25rpx;
}
.next-learn-btn{
float: left;
padding: 0 20rpx;
height: 62rpx;
line-height: 62rpx;
font-size: 32rpx;
background-color: #06f;
color: #fff;
border-radius: 8rpx;
margin-top: 16rpx;
margin-right: 16rpx;
}
.replay-learn-btn{
float: left;
padding: 0 20rpx;
height: 62rpx;
line-height: 62rpx;
font-size: 32rpx;
color: #06f;
background-color: #eaf2ff;
border-radius: 8rpx;
margin-top: 16rpx;
margin-right: 16rpx;
}
.next-btn{
float: right;
padding: 0 20rpx;
height: 62rpx;
line-height: 62rpx;
font-size: 32rpx;
background-color: #06f;
color: #fff;
border-radius: 8rpx;
margin-top: 16rpx;
}
}
}
}
.user-answer{
.user-info{
overflow: hidden;
.avatar-box{
float: right;
width: 76rpx;
height: 76rpx;
border: 3rpx solid #fff;
background-color: #ccc;
overflow: hidden;
border-radius: 10rpx;
margin-left: 16rpx;
margin-bottom: 16rpx;
.img-box{
width: 100%;
height: 100%;
}
}
.ai-name{
float: right;
color: #666;
font-size: 25rpx;
line-height: 35rpx;
}
}
.talking-info{
padding: 20rpx;
border-radius: 15rpx;
background-color: #06f;
color: #fff;
.talking-gif{
width: 140rpx;
height: 38rpx;
background-color: #999;
margin-bottom: 16rpx;
}
.talking-cont{
.talking-text{
font-size: 28rpx;
line-height: 48rpx;
margin-bottom: 20rpx;
}
}
.btns-cont{
overflow: hidden;
border-top: 3rpx solid #eee;
.replay-btn{
float: left;
width: 46rpx;
height: 46rpx;
background-color: #ccc;
overflow: hidden;
margin-right: 16rpx;
margin-top: 25rpx;
}
.play-btn{
float: left;
width: 46rpx;
height: 46rpx;
background-color: #ccc;
overflow: hidden;
margin-right: 16rpx;
margin-top: 25rpx;
}
.next-btn{
float: right;
padding: 0 20rpx;
height: 62rpx;
line-height: 62rpx;
font-size: 32rpx;
background-color: #06f;
color: #fff;
border-radius: 8rpx;
margin-top: 16rpx;
}
}
}
}
</style>
src/pages/course/study.vue
+104 -2
View File
@@ -1,12 +1,114 @@
<template>
<view>
课程学习
<view class="course-study max_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="common.navigateBack()"/>
课程学习
</view>
<view class="talking-list">
<view class="study-num">1/20</view>
<TalkingItem class="talking-item" v-for="item in 8" :type="item%2"></TalkingItem>
</view>
<view class="talk-btns">
<view class="touch-btn">按住说话</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import common from '@/common/common';
import TalkingItem from '@/pages/course/components/talkingItem.vue'
const crsNum = ref('');
const getData = async () => {
console.log(crsNum.value)
};
onLoad((params) => {
crsNum.value = params.crsNum;
getData();
});
</script>
<style lang="scss">
.course-study{
position: relative;
display: flex;
flex-direction: column;
.top-bg{
background: linear-gradient(16deg,rgba(234,246,255,0) 0%,#c3e6ff 100%);
height: 480rpx;
width: 750rpx;
}
.bot-bg{
// background-color: #F6F8FF;
background: linear-gradient(136deg,rgba(234,246,255,0) 0%,#c3e6ff 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;
.body-title{
height: 150rpx;
text-align: center;
font-size: 33rpx;
padding-top: 70rpx;
line-height: 46rpx;
box-sizing: border-box;
font-weight: 500;
color:#000;
position: relative;
// margin-bottom: 23rpx;
.arrow-icon{
position: absolute;
left:36rpx;
top:80rpx;
color: #000;
}
}
.talking-list{
flex:1;
overflow-y: auto;
padding: 30rpx;
background: #fff;
border-radius: 30rpx 30rpx 0 0;
.study-num{
height: 36rpx;
line-height: 36rpx;
text-align: center;
margin-bottom: 15rpx;
}
.talking-item{
margin-bottom: 46rpx;
}
}
.talk-btns{
height: 180rpx;
background-color: #fff;
padding: 25rpx 30rpx 0;
.touch-btn{
height: 92rpx;
box-shadow: 0 8rpx 20rpx 0 rgba(0,0,0,.06);
text-align: center;
line-height: 92rpx;
color: #000;
font-weight: 400;
}
}
}
}
</style>