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

JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_修改图片滑动问题

Browse Source
This commit is contained in:
杨航
2026-03-04 11:04:18 +08:00
parent 2738e6d8af
commit 9418debe00
4 changed files with 76 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+2 -2
View File
@@ -4,12 +4,12 @@ ENV = 'development'
VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7001'
# VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7001'
#VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
# VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
# VITE_APP_BASE_API_Url = 'http://192.168.247.200'
# VITE_APP_BASE_API_Url = 'http://aitscdn.jlbank.com.cn:7001'
# VITE_APP_BASE_API_Url = 'http://192.168.108.129'
src/components/image-preview/preview-detail.vue
+55 -23
View File
@@ -6,12 +6,24 @@
</view>
<view class="overlay-box" @click="playEnded" @touchmove.stop v-if="fileType === 'image'">
<movable-area scale-area class="detail-movable">
<movable-view class="detail-movable-view" :out-of-bounds="true" direction="all" @scale="onScale" :scale="true" scale-min="0.5"
scale-max="4" :scale-value="scale">
<movable-view class="detail-movable-view" :out-of-bounds="true" direction="all" @scale="onScale" :scale="true"
scale-min="0.5" scale-max="4" :scale-value="scale">
<image class="detail-img" :src="fileUrlShow" mode="aspectFit"></image>
</movable-view>
</movable-area>
</view>
<view class="overlay-box" @click="playEnded" @touchmove.stop v-if="fileType === 'imageList'">
<swiper class="stack-swiper" :current="currentIndex" previous-margin="0" next-margin="0" :autoplay="false">
<swiper-item v-for="(item, index) in srcList" :key="index" class="swiper-item">
<movable-area scale-area class="detail-movable">
<movable-view class="detail-movable-view" :out-of-bounds="true" direction="all" @scale="onScale"
:scale="true" scale-min="0.5" scale-max="4" :scale-value="scale">
<image class="detail-img" :src="initSrc(item)" mode="aspectFit"></image>
</movable-view>
</movable-area>
</swiper-item>
</swiper>
</view>
</uni-popup>
</template>
@@ -56,7 +68,8 @@
watching: false,
videoContext: null,
base_url: get_base_url(),
scale: 1
scale: 1,
currentIndex: 0
};
},
computed: {
@@ -79,10 +92,36 @@
src() {
return this.storageStore?.getFileSrc
},
srcList() {
return this.storageStore?.getFileSrcList
}
},
watch: {
fileId: {
handler(newval, oldval) {
this.initFileId(newval, oldval)
},
immediate: true,
deep: true,
},
src: {
handler(newval, oldval) {
this.initSrc(newval, oldval)
},
immediate: true,
deep: true,
},
showPreviewDetail(val) {
if (val) {
this.showModelNow()
} else {
this.$refs.PopupRef.close()
this.showModel = false
}
}
},
methods: {
initFileId(newval, oldval) {
if (this.fileType === 'image') {
if (newval.indexOf('/') === 0) {
this.fileUrlShow = this.base_url + newval + '?tk=' + getToken();
@@ -107,30 +146,16 @@
}
this.videoContext = uni.createVideoContext(`video` + this.fileId)
},
immediate: true,
deep: true,
},
src: {
handler(newval, oldval) {
initSrc(newval, oldval) {
let _src
if (newval.indexOf('http') === 0) {
this.fileUrlShow = newval + '?tk=' + getToken()
_src = newval + '?tk=' + getToken()
} else {
this.fileUrlShow = this.base_url + newval + '?tk=' + getToken()
_src = this.base_url + newval + '?tk=' + getToken()
}
this.fileUrlShow = _src
return _src
},
immediate: true,
deep: true,
},
showPreviewDetail(val) {
if (val) {
this.showModelNow()
} else {
this.$refs.PopupRef.close()
this.showModel = false
}
}
},
methods: {
getImagePreviewUrlBlob(id) {
if (!id) {
this.fileUrlShow = '';
@@ -303,6 +328,11 @@
z-index: 999;
background-color: rgba(0, 0, 0, 0.65);
.stack-swiper {
width: 100vw;
height: 100vh;
}
movable-view {
position: fixed;
display: flex;
@@ -322,10 +352,12 @@
movable-view image {
width: 100%;
}
.detail-img {
width: calc(100% - 40rpx);
height: calc(100% - 100rpx);
}
// .detail-img {
// position: absolute;
// left: 50%;
src/pages/course/components/talkingItem.vue
+5 -4
View File
@@ -69,7 +69,7 @@
<!-- 段落图片视频预览 -->
<view v-if="type === 3" style="overflow: hidden;padding-top: 10rpx;">
<ImagePreview :class="['cont-img-box',imgAddrs.length === 1?'cont-video-box':imgAddrs.length === 2?'cont-img-box2':'']" v-for="item in imgAddrs "
:imgId="item" :previewDetail="false" @click="previewImage(item)"></ImagePreview>
:imgId="item" :previewDetail="false" @click="previewImage(item, imgAddrs)"></ImagePreview>
<VideoPreview class="cont-img-box cont-video-box" v-if="(dataInfo.vidoAddrs || []).length > 0"
:fileId="dataInfo.vidoAddrs[0].vidAddr"
:picId="dataInfo.vidoAddrs[0].vidImgAddr" @click="previewVideo(dataInfo.vidoAddrs[0])">
@@ -476,12 +476,13 @@
fileSrc: obj.vidAddr
})
}
const previewImage = (obj)=>{
const previewImage = (obj, arr=[])=>{
storageStore.setShowPreviewDetail({
status: true,
fileType: 'image',
fileType: arr.length>0?'imageList':'image',
fileId: '',
fileSrc: obj
fileSrc: obj,
fileSrcList: arr
})
}
src/store/storage.js
+6 -1
View File
@@ -12,6 +12,7 @@ export const useStorageStore = defineStore('storageStore',{
fileType: 'iamge',
fileId: '',
fileSrc: '',
fileSrcList: [],
gettingVoiceId: ''
}),
getters:{
@@ -39,6 +40,9 @@ export const useStorageStore = defineStore('storageStore',{
getFileSrc(state){
return state.fileSrc
},
getFileSrcList(state){
return state.fileSrcList
},
getGettingVoiceId(state){
return state.gettingVoiceId
},
@@ -47,11 +51,12 @@ export const useStorageStore = defineStore('storageStore',{
setGettingVoiceId(id){
return this.gettingVoiceId = id
},
setShowPreviewDetail({ status = false, fileType = 'image', fileId = '', fileSrc = '' }){
setShowPreviewDetail({ status = false, fileType = 'image', fileId = '', fileSrc = '', fileSrcList = [] }){
this.showPreviewDetail = status
this.fileId = fileId
this.fileType = fileType
this.fileSrc = fileSrc
this.fileSrcList = fileSrcList
},
setTouchBtnZIndex(index = 12){
this.touchBtnZIndex = index