通用图片预览组件调整

.env.development

@@ -6,11 +6,11 @@ ENV = 'development'
 
 
 # 苗扬
-#VITE_APP_BASE_API_Url = 'http://25.64.16.133:9786' 
+# VITE_APP_BASE_API_Url = 'http://25.64.16.133:9786' 
 
 
-VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
+# VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
 
-# app入口
+app入口
-#VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
+VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
 

.hbuilderx/launch.json

@@ -0,0 +1,9 @@
+{
+    "version" : "1.0",
+    "configurations" : [
+        {
+            "playground" : "standard",
+            "type" : "uni-app:app-android"
+        }
+    ]
+}

src/api/common.js

@@ -40,8 +40,8 @@ export const uploadFile = (file, data) => {
 };
 
 
-// 对象存储预览 /traoss/tras3/show/{文件ID}
+// 对象存储预览 /traoss/tras3/show/{文件ID} 
-export function previewFile(id,responseType = 'arraybuffer') {
+export function previewFile(id, responseType = 'arraybuffer') {
     const token = getToken();  
     const header = {
 			"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
@@ -67,4 +67,32 @@ export function previewFile(id,responseType = 'arraybuffer') {
 			}  
 		});  
 	});
+}
+// 缩略图预览 /traoss/tras3/getCacheThumbImage/{fileId}/{width}/{height}
+export function previewCacheThumbImage(id, width = 30, height = 30) {
+    const token = getToken();  
+    const header = {
+			"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
+		};  
+    if (token) 
+        header['summary'] = token
+    let baseUrl = get_base_url();  
+	
+	return new Promise((resolve, reject) => {  
+		uni.request({  
+			url: `${baseUrl}/traoss/tras3/getCacheThumbImage/${id}/${width}/${height}`,  
+			header,  
+			responseType,
+			success(result) {  
+				console.log(result)
+				let _header = result.header['content-type'].split(';')[0]
+				// let base64 = new Blob([result.data],{type:result.header['content-type'].split(';')[0]})
+				let base64 = `data:${_header};base64,` + uni.arrayBufferToBase64(result.data)
+				resolve(base64)
+			},  
+			fail(error) {    
+				reject(new Error('Upload failed'));  
+			}  
+		});  
+	});
 }

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

@@ -1,22 +1,33 @@
 <template>
 	<image :src="imgUrlShow" fit="cover"></image>
-	<!-- <image class="img" src="@/static/images/test/1.png"></image> -->
 </template>
 
 <script>
-	import {previewFile} from'@/api/common.js'
+	import {previewFile, previewCacheThumbImage} from'@/api/common.js'
 	export default {
 		name:"image-preview",
 		props:{
 			imgId:{
 				default:'',
 				type:String
+			},
+			width:{
+				default:50,
+				type:[String, Number]
+			},
+			height:{
+				default:50,
+				type:[String, Number]
+			},
+			isCache:{
+				type: Boolean,
+				default: false
 			}
 		},
 		data() {
 			return {
-				imgUrlShow:'',
+				imgUrlShow: '',
-				watching:false
+				watching: false
 			};
 		},
 		watch: {
@@ -28,28 +39,19 @@
 				},
 				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'
+				if(this.isCache){
-				previewFile(id).then((res) => {
+					previewCacheThumbImage(id, this.width,this.height).then((res) => {
-					this.imgUrlShow = res;
+						this.imgUrlShow = res;
-					// const reader = new FileReader();
+					});
-					// reader.readAsDataURL(res)
+				}else{
-					// reader.onloadend = () => {
+					previewFile(id).then((res) => {
-					// 	this.imgUrlShow = reader.result;
+						this.imgUrlShow = res;
-					// }
+					});
-				});
+				}
 			},
 		},
 		mounted() {
@@ -57,10 +59,7 @@
 				this.getPreviewUrlBlob(this.imgId);
 			}
 			this.watching = true
-		},
+		}
-		beforeDestroy() {
-			// URL.revokeObjectURL(this.imgUrlShow);
-		},
 	}
 </script>
 

src/pages/course/components/talkingItem.vue

@@ -24,11 +24,18 @@
 				</view>
 			</view>
 			<view class="btns-cont">
-				<view class="replay-btn"></view>
+				<view class="replay-btn">
-				<view class="play-btn"></view>
+					<image class="icon" src="@/static/images/course/replay.png" style="width: 100%;height: 100%;"></image>
-				<view class="next-learn-btn">继续学</view>
+				</view>
-				<view class="replay-learn-btn">重新学</view>
+				<view class="play-btn">
-				<view class="next-btn">继续</view>
+					<image class="icon" v-if="false" src="@/static/images/course/play.png" style="width: 100%;height: 100%;"></image>
+					<image class="icon" src="@/static/images/course/pause.png" style="width: 100%;height: 100%;"></image>
+				</view>
+				<view class="next-learn-btn">继续学<image class="icon icon-iamge" src="@/static/images/course/goon.png" ></image></view>
+				<!-- <view class="replay-learn-btn">重新学<image class="icon icon-iamge" src="@/static/images/course/restart.png" ></image></view> -->
+				<view class="replay-study-btn"><image class="icon icon-iamge" src="@/static/images/course/restudy.png" ></image></view>
+				<view class="next-btn">继续
+					<image class="icon icon-iamge" src="@/static/images/course/goon.png" ></image></view>
 			</view>
 		</view>
 	</view>
@@ -50,7 +57,13 @@
 				</view>
 			</view>
 			<view class="btns-cont">
-				<view class="play-btn"></view>
+				<!-- <view class="replay-btn">
+					<image class="icon" src="@/static/images/course/replay.png" style="width: 100%;height: 100%;"></image>
+				</view> -->
+				<view class="play-btn">
+					<image class="icon" v-if="false" src="@/static/images/course/play.png" style="width: 100%;height: 100%;"></image>
+					<image class="icon" src="@/static/images/course/pause.png" style="width: 100%;height: 100%;"></image>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -132,7 +145,6 @@
 					float: left;
 					width: 46rpx;
 					height: 46rpx;
-					background-color: #ccc;
 					overflow: hidden;
 					margin-right: 16rpx;
 					margin-top: 25rpx;
@@ -141,45 +153,83 @@
 					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;
+					padding: 0 60rpx 0 20rpx;
 					height: 62rpx;
 					line-height: 62rpx;
-					font-size: 32rpx;
+					font-size: 30rpx;
 					background-color: #06f;
 					color: #fff;
 					border-radius: 8rpx;
 					margin-top: 16rpx;
 					margin-right: 16rpx;
+					position: relative;
+					.icon-iamge{
+						width: 25rpx;
+						height: 25rpx;
+						position: absolute;
+						right: 20rpx;
+						top: 50%;
+						margin-top: -12rpx;
+					}
 				}
 				.replay-learn-btn{
 					float: left;
-					padding: 0 20rpx;
+					padding: 0 60rpx 0 20rpx;
 					height: 62rpx;
 					line-height: 62rpx;
-					font-size: 32rpx;
+					font-size: 30rpx;
 					color: #06f;
 					background-color: #eaf2ff;
 					border-radius: 8rpx;
 					margin-top: 16rpx;
 					margin-right: 16rpx;
+					position: relative;
+					.icon-iamge{
+						width: 25rpx;
+						height: 25rpx;
+						position: absolute;
+						right: 20rpx;
+						top: 50%;
+						margin-top: -12rpx;
+					}
+				}
+				.replay-study-btn{
+					width: 162rpx;
+					height: 62rpx;
+					border-radius: 8rpx;
+					float: right;
+					margin-top: 16rpx;
+					.icon-iamge{
+						width: 100%;
+						height: 100%;
+						margin:0;
+					}
 				}
 				.next-btn{
 					float: right;
-					padding: 0 20rpx;
+					padding: 0 60rpx 0 20rpx;
 					height: 62rpx;
 					line-height: 62rpx;
-					font-size: 32rpx;
+					font-size: 30rpx;
 					background-color: #06f;
 					color: #fff;
 					border-radius: 8rpx;
 					margin-top: 16rpx;
+					position: relative;
+					.icon-iamge{
+						width: 25rpx;
+						height: 25rpx;
+						position: absolute;
+						right: 20rpx;
+						top: 50%;
+						margin-top: -12rpx;
+					}
 				}
 			}
 		}
@@ -236,7 +286,6 @@
 					float: left;
 					width: 46rpx;
 					height: 46rpx;
-					background-color: #ccc;
 					overflow: hidden;
 					margin-right: 16rpx;
 					margin-top: 25rpx;
@@ -245,21 +294,29 @@
 					float: left;
 					width: 46rpx;
 					height: 46rpx;
-					background-color: #ccc;
 					overflow: hidden;
 					margin-right: 16rpx;
 					margin-top: 25rpx;
 				}
 				.next-btn{
 					float: right;
-					padding: 0 20rpx;
+					padding: 0 60rpx 0 20rpx;
 					height: 62rpx;
 					line-height: 62rpx;
-					font-size: 32rpx;
+					font-size: 30rpx;
 					background-color: #06f;
 					color: #fff;
 					border-radius: 8rpx;
 					margin-top: 16rpx;
+					position: relative;
+					.icon-iamge{
+						width: 25rpx;
+						height: 25rpx;
+						position: absolute;
+						right: 20rpx;
+						top: 50%;
+						margin-top: -12rpx;
+					}
 				}
 			}
 		}

src/pages/course/index.vue

@@ -24,7 +24,7 @@
 				></uv-tabs>
 			</view>
 			<view class="list-view">
-				<view class="filter-btn" @click="showFilterList = true">筛选
+				<view class="filter-btn" @click="showFilterList = !showFilterList">筛选
 					<uv-icon class="filter-icon" name="list"/>
 				</view>
 				<view :class="['filter-list',showFilterList?'show':'']">

src/pages/course/study.vue

@@ -3,7 +3,18 @@
 	<view class="course-study max_page">
 		<view class="top-bg"></view>
 		<view class="bot-bg"></view>
-		<view class="course-study-body">
+		<view class="course-study-body" v-show="step === 1">
+			<view class="body-title">
+				<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
+				语言选择，开启学习之旅
+			</view>
+			<view class="voice-list">
+				<view class="voice-item">
+					
+				</view>
+			</view>
+		</view>
+		<view class="course-study-body" v-show="step === 2">
 			<view class="body-title">
 				<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
 				课程学习
@@ -25,6 +36,7 @@ import { onLoad } from '@dcloudio/uni-app';
 import common from '@/common/common';
 import TalkingItem from '@/pages/course/components/talkingItem.vue'
 const crsNum = ref('');
+const step = ref(1)
 const getData = async () => {
 	console.log(crsNum.value)
 };
@@ -109,6 +121,11 @@ onLoad((params) => {
 					font-weight: 400;
 				}
 			}
+			.voice-list{
+				flex:1;
+				overflow-y: auto;
+				padding: 30rpx;
+			}
 		}
 	}
 </style>