图片预览

src/components/image-preview/image-preview.vue

@@ -1,5 +1,12 @@
 <template>
-	<image :src="imgUrlShow" fit="cover" :mode="mode"></image>
+	<view v-bind="$attrs">
+		<image :src="imgUrlShow"  fit="cover" :mode="mode" @click="showDetail" style="width: 100%;height: 100%;"></image>
+		<uv-overlay :show="showModel" opacity=".6" @click="showModel = false">
+			<view class="overlay-box">
+				<image class="detail-img" :src="imgUrlShow" fit="cover" :mode="mode"></image>
+			</view>
+		</uv-overlay>
+	</view>
 </template>
 
 <script>
@@ -35,12 +42,17 @@
 				type: String,
 				default: 'widthFix'
 			},
+			previewDetail: {
+				default: '',
+				type:[String, Boolean]
+			}
 		},
 		data() {
 			return {
 				imgUrlShow: '',
 				watching: false,
-				base_url: get_base_url()
+				base_url: get_base_url(),
+				showModel: false
 			};
 		},
 		computed:{
@@ -52,6 +64,10 @@
 		watch: {
 			imgId: {
 				handler(newval, oldval) {
+					if(newval.indexOf('http') === 0){
+						this.imgUrlShow = newval
+						return
+					}
 					if (newval && this.watching) {
 						this.getPreviewUrlBlob(newval);
 					}
@@ -70,6 +86,11 @@
 			}
 		},
 		methods: {
+			showDetail(){
+				if(!!this.previewDetail){
+					this.showModel = true
+				}
+			},
 			getPreviewUrlBlob(id) {
 				if (!id) {
 					this.imgUrlShow = ''
@@ -107,7 +128,11 @@
 		},
 		mounted() {
 			if (this.imgId) {
-				this.getPreviewUrlBlob(this.imgId);
+				if(this.imgId.indexOf('http') === 0){
+					this.imgUrlShow = this.imgId
+				}else{
+					this.getPreviewUrlBlob(this.imgId);
+				}
 			}
 			this.watching = true
 			if(this.src) {
@@ -117,6 +142,17 @@
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+.overlay-box{
+	position: relative;
+	height: 100%;
+	.detail-img{
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		max-width: 100%;
+		max-height: 100%;
+		transform: translate(-50%, -50%);
+	}
+}
 </style>

src/components/image-preview/video-preview.vue

@@ -30,6 +30,10 @@
 		watch: {
 			fileId: {
 				handler(newval, oldval) {
+					if(newval.indexOf('http:') === 0){
+						this.fileUrlShow = newval
+						return
+					}
 					if (newval && this.watching) {
 						this.getPreviewUrlBlob(newval);
 					}
@@ -57,7 +61,11 @@
 		},
 		mounted() {
 			if (this.fileId) {
-				this.getPreviewUrlBlob(this.fileId);
+				if(this.fileId.indexOf('http:') === 0){
+					this.fileUrlShow = this.fileId
+				}else{
+					this.getPreviewUrlBlob(this.fileId);
+				}
 			}
 			this.watching = true
 		},

src/pages/course/components/talkingItem.vue

@@ -24,7 +24,7 @@
 					{{ showContent }}
 				</text>
 				<view v-if="type === 3">
-					<ImagePreview class="cont-img-box" v-if="(dataInfo.imageAddrs||[]).length>0" :imgId="dataInfo.imageAddrs[0]"></ImagePreview>
+					<ImagePreview class="cont-img-box" v-if="(dataInfo.imageAddrs||[]).length>0" :imgId="dataInfo.imageAddrs[0]" :previewDetail="true"></ImagePreview>
 					<VideoPreview class="cont-img-box" v-if="(dataInfo.vidoAddrs||[]).length>0" :imgId="dataInfo.vidoAddrs[0]"></VideoPreview>
 				</view>
 				<view v-if="type === 5 && !dataInfo.isLoading" style="padding-top: 16rpx;">

src/pages/course/components/touchBtn.vue

@@ -9,7 +9,7 @@
 		>按住说话
 		</view>
 		<view class="touch-btn" v-if="keyboardIsShow">
-			<uv-input class="input-box" ref="inputRef" v-model.trim="answerValue" maxlength="1000"
+			<uv-input class="input-box" ref="inputRef" v-model.trim="answerValue" maxlength="500"
 				placeholderStyle='color:#999999;font-size:26rpx' placeholder="请输入答案">
 			</uv-input>
 		</view>
@@ -60,6 +60,7 @@ const recordObjCom = uni.getRecorderManager()
 const initRecord = () => {
 	unref(recordObjCom)?.onStop((res, duration)=>{
 		audioPath.value = res.tempFilePath
+		console.log(duration)
 	})
 }
 const startRecord = () => {

src/pages/course/study.vue

@@ -539,12 +539,13 @@ onLoad((params) => {
 	crsId.value = params.crsId||'';
 	crsNum.value = params.crsNum||'';
 	startPgrphId.value = params.pgrphId||'';
+	getData('1');
 });
 const showTalkingModel = ref(false)
 // 录音
-onMounted(()=>{
-	getData('1');
-})
+// onMounted(()=>{
+// 	getData('1');
+// })
 // onShow(()=>{
 // 	getData('2');
 // })