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

Merge branch 'develop' of http://25.13.9.101:9000/K17_AITS/tra-app into develop

Browse Source
This commit is contained in:
田岩
2025-06-23 15:57:27 +08:00
parent a4c57e1185 747280c172
commit b74b1c183e
6 changed files with 537 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+10
View File
@@ -66,6 +66,9 @@ view {
.fz-30 {
font-size: 30rpx;
}
.fz-28 {
font-size: 28rpx;
}
.fz-24 {
font-size: 24rpx;
}
@@ -80,6 +83,13 @@ view {
.flex {
display: flex;
}
.flex-jcsb {
display: flex;
justify-content: space-between;
}
.tar{
text-align: right;
}
.fw-600 {
font-weight: 600;
}
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/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>
src/pages/courseDetail/submit.vue
+79 -7
View File
@@ -20,14 +20,23 @@
<img class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix" />
</view>
<view class="num-box">
<view class="">综合评分</view>
<view class="">
<uv-slider v-model="num" min="0" max="10"></uv-slider>
<view class="font_pf fz-28 c-666">综合评分</view>
<view class="slider-box">
<uv-slider step="1" activeColor="#0066FF" :blockSize="14" v-model="num" min="0" max="10"></uv-slider>
</view>
<view class="flex-jcsb">
<view class="font_pf fz-30 c-000">0</view>
<view class="font_pf fz-30 c-000 tar">10</view>
</view>
</view>
</view>
<view class="num">平分</view>
<view class="num">平分</view>
<view class="tab">
<view class="tab-btn" :class="activeTab == 1 ? 'is-active' : ''" @click="changeTab(1)">建议</view>
<view class="tab-btn" :class="activeTab == 2 ? 'is-active' : ''" @click="changeTab(2)">提问</view>
</view>
<view class="input-textarea">
<uv-textarea v-model="aaa" height="124" :placeholder="activeTab == 1?'请输入你的建议...':'请输入你的问题...'"></uv-textarea>
</view>
</view>
</view>
<view class="btn-box font_pf">
@@ -43,6 +52,11 @@ import { getCourseDetailApi } from '@/api/courseDetail.js';
// import {formatDate2} from '@/common/common.js'
import common from '@/common/common';
const num = ref(0);
const activeTab = ref(1);
const aaa = ref('')
const changeTab = (type) => {
activeTab.value = type;
};
// tab栏
onLoad((params) => {});
</script>
@@ -53,7 +67,7 @@ onLoad((params) => {});
}
.detail-body {
box-sizing: border-box;
min-height: calc(100vh - (var(--status-bar-height)+37rpx));
min-height: calc(100vh - (var(--status-bar-height)+50rpx));
padding: 29rpx 37rpx;
width: 100%;
display: flex;
@@ -67,7 +81,7 @@ onLoad((params) => {});
margin-bottom: 30rpx;
}
.body-content {
// flex: 1;
flex: 1;
background-color: #ffffff;
border-radius: 15rpx;
padding: 36rpx;
@@ -90,11 +104,62 @@ onLoad((params) => {});
font-size: 24rpx;
margin-bottom: 28rpx;
}
.num {
display: flex;
width: 100%;
// height: 92rpx;
justify-content: space-between;
margin-bottom: 40rpx;
}
.num-pic {
width: 92rpx;
height: 92rpx;
padding-top: 20rpx;
margin-right: 20rpx;
}
.num-box {
flex: 1;
display: flex;
// height: 100%;
justify-content: space-between;
flex-direction: column;
}
.slider-box {
width: 100%;
:deep(.uv-slider) {
width: 100%;
}
:deep(uni-slider) {
margin: 0 16rpx 10rpx 0;
}
:deep(.uni-slider-tap-area) {
padding: 10rpx 0;
}
:deep(.uni-slider-thumb) {
border: 2px solid #0066ff;
}
}
.tab {
display: flex;
margin-bottom: 30rpx;
}
.tab-btn {
width: 78rpx;
height: 36rpx;
font-size: 22rpx;
color: #999999;
text-align: center;
border-radius: 8rpx;
border: 2rpx solid #999999;
margin-right: 30rpx;
}
.is-active {
color: #0066ff;
border: 2rpx solid #0066ff;
}
.input-textarea{
// height: 250rpx;
// padding-bottom: 250rpx;
}
.btn-box {
position: fixed;
@@ -110,6 +175,13 @@ onLoad((params) => {});
height: 80rpx;
}
}
.c-666 {
color: #666666;
}
.c-000 {
font-weight: 600;
color: #000;
}
.fixed_search_div {
padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
display: flex;