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-24 08:27:08 +08:00
parent 68156eddce
commit 8b3261b204
17 changed files with 162 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+4 -4
View File
@@ -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入口
#VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
app入口
VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
.hbuilderx/launch.json
+9
View File
@@ -0,0 +1,9 @@
{
"version" : "1.0",
"configurations" : [
{
"playground" : "standard",
"type" : "uni-app:app-android"
}
]
}
src/api/common.js
+30 -2
View File
@@ -40,8 +40,8 @@ export const uploadFile = (file, data) => {
};
// 对象存储预览 /traoss/tras3/show/{文件ID}
export function previewFile(id,responseType = 'arraybuffer') {
// 对象存储预览 /traoss/tras3/show/{文件ID}
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
+25 -26
View File
@@ -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:'',
watching:false
imgUrlShow: '',
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'
previewFile(id).then((res) => {
this.imgUrlShow = res;
// const reader = new FileReader();
// reader.readAsDataURL(res)
// reader.onloadend = () => {
// this.imgUrlShow = reader.result;
// }
});
if(this.isCache){
previewCacheThumbImage(id, this.width,this.height).then((res) => {
this.imgUrlShow = res;
});
}else{
previewFile(id).then((res) => {
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
+75 -18
View File
@@ -24,11 +24,18 @@
</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 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 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
+1 -1
View File
@@ -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
+18 -1
View File
@@ -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>
src/static/images/course/goon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 423 B

src/static/images/course/jianpan.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

src/static/images/course/pause-focus.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

src/static/images/course/pause.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

src/static/images/course/play.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/static/images/course/replay.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

src/static/images/course/restart.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

src/static/images/course/restart2.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

src/static/images/course/restudy.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

src/static/images/course/score.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB