lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化：适配移动端

Browse Source
This commit is contained in:
jmal 2021-03-25 18:02:01 +08:00
parent e7fc2666c3
commit 19c63c32c3
2 changed files with 74 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/views/home/mobile/index.vue
View File

@ -22,6 +22,7 @@
<van-cell title="图片" icon="photo-o" @click="clickFileType('image',{isFolder: false})"/> <van-cell title="图片" icon="photo-o" @click="clickFileType('image',{isFolder: false})"/>
<van-cell title="视频" icon="video-o" @click="clickFileType('video',{isFolder: false})"/> <van-cell title="视频" icon="video-o" @click="clickFileType('video',{isFolder: false})"/>
<van-cell title="音乐" icon="music-o" @click="clickFileType('audio',{isFolder: false})"/> <van-cell title="音乐" icon="music-o" @click="clickFileType('audio',{isFolder: false})"/>
<van-cell title="文件传输" icon="upgrade" @click="uploadList"/>
</div> </div>
<div class="logout"> <div class="logout">
@ -46,7 +47,7 @@
title="浏览" title="浏览"
right-arrow right-arrow
@click-right="checkboxAll" @click-right="checkboxAll"
:right-text="this.selectRowData.length !== this.fileList.length ? '选择' : '取消'" :right-text="this.selectRowData.length !== this.fileList.length ? '选择44' : '取消'"
@click-left="leftMenu" @click-left="leftMenu"
left-arrow> left-arrow>
<div class="header-button" slot="left"> <div class="header-button" slot="left">
@ -63,7 +64,7 @@
</van-nav-bar> </van-nav-bar>
<van-nav-bar <van-nav-bar
:style="vanNavBarClass" :style="vanNavBarClass"
v-if="pathList.length < 3 && selectStatus" v-if="selectStatus"
:title="selectRowData.length === 0 ? '选择项目' : selectRowData.length+'项'" :title="selectRowData.length === 0 ? '选择项目' : selectRowData.length+'项'"
right-arrow right-arrow
:left-text="this.selectRowData.length !== this.fileList.length ? '全选' : '取消全选'" :left-text="this.selectRowData.length !== this.fileList.length ? '全选' : '取消全选'"
@ -72,13 +73,13 @@
right-text="完成" right-text="完成"
> >
</van-nav-bar> </van-nav-bar>
<van-nav-bar <van-nav-bar
:style="vanNavBarClass" :style="vanNavBarClass"
v-if="pathList.length >= 3" v-if="pathList.length >= 3 && !selectStatus"
:title="pathList[pathList.length-2].folder" :title="pathList[pathList.length-2].folder"
right-text="选择" :right-text="this.selectRowData.length !== this.fileList.length ? '选择' : '取消'"
left-arrow left-arrow
@click-right="checkboxAll"
@click-left="clickBack"> @click-left="clickBack">
<div class="header-button" slot="left"> <div class="header-button" slot="left">
<van-icon name="arrow-left" /> <van-icon name="arrow-left" />
@ -207,7 +208,7 @@
</e-vue-contextmenu> </e-vue-contextmenu>
<van-overlay ref="overlayShow" :show="overlayShow" duration="0.3" @click="overlayClick"> <van-overlay ref="overlayShow" :show="overlayShow" duration="0.3" @click="overlayClick">
<van-cell v-if="rowContextData.name!=null" :style="overlayContentClass" class="list-item overlay-content-class" center @click="fileClick(rowContextData)" :is-link="rowContextData.isFolder"> <van-cell v-if="rowContextData.name!=null" :style="overlayContentClass" class="list-item overlay-content-class" center @click="fileClick(rowContextData,rowContextData.index)" :is-link="rowContextData.isFolder">
<!--<div :style="overlayContentClass">--> <!--<div :style="overlayContentClass">-->
<div> <div>
<van-row class="row-file"> <van-row class="row-file">
@ -344,23 +345,38 @@
}; };
}, },
mounted(){ mounted(){
// 加载路径 // // 加载路径
const pathList = getPathList() // const pathList = getPathList()
if (pathList && pathList !== 'undefined') { // if (pathList && pathList !== 'undefined') {
const res = JSON.parse(pathList) // const res = JSON.parse(pathList)
const list = [] // const list = []
res.forEach(function(element) { // res.forEach(function(element) {
const item0 = {} // const item0 = {}
item0['folder'] = element.folder + '' // item0['folder'] = element.folder + ''
item0['index'] = element.index // item0['index'] = element.index
list.push(item0) // list.push(item0)
// })
// this.pathList = list
// }
// 加载url上的path
if (this.$route.query.path !== '/') {
const path = decodeURI(this.$route.query.path)
this.pathList.splice(1, 1)
path.split('/').forEach((pathName, index) => {
if (index > 0) {
const item = {}
item['folder'] = pathName
item['index'] = index
this.pathList.push(item)
}
}) })
this.pathList = list
} }
console.log(this.pathList)
if (window.history && window.history.pushState) { if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL); history.pushState(null, null, document.URL)
window.addEventListener('popstate', this.goBack, false); window.addEventListener('popstate', this.goBack, false)
} }
}, },
destroyed(){ destroyed(){
@ -406,7 +422,6 @@
}, },
// 长按事件 // 长按事件
rowContextmenu(row, target, touchClientX) { rowContextmenu(row, target, touchClientX) {
// 改变菜单 // 改变菜单
if(this.selectStatus && this.selectIndexList.includes(row.index)){ if(this.selectStatus && this.selectIndexList.includes(row.index)){
if(this.selectIndexList.includes(row.index)){ if(this.selectIndexList.includes(row.index)){
@ -446,7 +461,7 @@
this.favoriteOperating(true) this.favoriteOperating(true)
break break
case 'open': case 'open':
this.fileClick(this.rowContextData) this.fileClick(this.rowContextData, this.rowContextData.index)
break break
case 'unselect': case 'unselect':
const index = this.rowContextData.index const index = this.rowContextData.index
@ -458,8 +473,8 @@
case 'select': case 'select':
this.selectStatus = true this.selectStatus = true
this.selectIndexList.push(this.rowContextData.index) this.selectIndexList.push(this.rowContextData.index)
setTimeout(function () { setTimeout(() => {
that.$refs.checkboxes[that.rowContextData.index].toggle(); this.$refs.checkboxes[that.rowContextData.index].toggle()
},0) },0)
break break
case 'rename': case 'rename':
@ -470,7 +485,7 @@
},0) },0)
break break
case 'copy': case 'copy':
Toast('暂不支持移动'); vant.Toast('暂不支持移动');
break break
case 'download': case 'download':
this.downloadFile() this.downloadFile()
@ -552,7 +567,7 @@
fileConfig.packageDownload(fileIds, this.$store.state.user.token) fileConfig.packageDownload(fileIds, this.$store.state.user.token)
return return
} }
fileConfig.publicDownload(this.rowContextData) fileConfig.download(this.$store.state.user.name, this.rowContextData, this.$store.state.user.token)
} else { } else {
this.$message({ this.$message({
message: '所选文件夹为空', message: '所选文件夹为空',
@ -563,11 +578,10 @@
// 收藏/取消收藏 // 收藏/取消收藏
favoriteOperating(isFavorite) { favoriteOperating(isFavorite) {
this.rowContextData.isFavorite = isFavorite this.rowContextData.isFavorite = isFavorite
this.highlightFavorite(isFavorite, true) this.highlightFavorite(isFavorite, true)
api.favoriteUrl({ api.favoriteUrl({
token: this.$store.state.user.token, token: this.$store.state.user.token,
id: this.rowContextData.id, fileIds: this.rowContextData.id,
isFavorite: isFavorite isFavorite: isFavorite
}).then(res => { }).then(res => {
}) })
@ -587,7 +601,7 @@
} }
const str = this.getShowSumFileAndFolder(fileList) const str = this.getShowSumFileAndFolder(fileList)
Dialog.confirm({ vant.Dialog.confirm({
title: '提示', title: '提示',
message: '此操作将永久删除' + str + ', 是否继续?' message: '此操作将永久删除' + str + ', 是否继续?'
}).then(() => { }).then(() => {
@ -601,9 +615,8 @@
} else { } else {
this.getFileList() this.getFileList()
} }
Toast.setDefaultOptions({ duration: 500 }); vant.Toast.setDefaultOptions({ duration: 800 });
Toast.success('删除成功'); vant.Toast.success('删除成功');
this.$refs.fileListTable.clearSelection()// 删除后清空之前选择的数据
this.selectRowData = [] this.selectRowData = []
}) })
}) })
@ -674,12 +687,12 @@
}, },
// 浏览器的返回事件 // 浏览器的返回事件
goBack(){ goBack(){
const linkIndex = this.pathList.length-3 const linkIndex = this.pathList.length - 2
this.handleLink(this.pathList[linkIndex],linkIndex) this.handleLink(this.pathList[linkIndex],linkIndex)
}, },
// 点击返回按钮(标题) // 点击返回按钮(标题)
clickBack() { clickBack() {
const linkIndex = this.pathList.length-3 const linkIndex = this.pathList.length - 2
this.handleLink(this.pathList[linkIndex], linkIndex, true) this.handleLink(this.pathList[linkIndex], linkIndex, true)
}, },
//菜单键 //菜单键
@ -784,7 +797,6 @@
if(isPushLink){ if(isPushLink){
this.$router.push(`/_m?path=${encodeURIComponent(this.path)}`) this.$router.push(`/_m?path=${encodeURIComponent(this.path)}`)
} }
setPath(this.path, this.pathList)
this.getFileList() this.getFileList()
} }
}, },
@ -853,12 +865,15 @@
// 填充数据 // 填充数据
loadData(res,onLoad){ loadData(res,onLoad){
if(onLoad){ if(onLoad){
res.data.forEach((file,number) => { res.data.forEach((file,index) => {
file['index'] = (this.pagination.pageIndex - 1) * this.pagination.pageSize + number file['index'] = (this.pagination.pageIndex - 1) * this.pagination.pageSize + index
this.fileList.push(file) this.fileList.push(file)
}); })
}else{ }else{
this.fileList = res.data this.fileList = res.data
this.fileList.map((file,index) => {
file['index'] = index
})
} }
// 加载状态结束 // 加载状态结束
this.loading = false this.loading = false
@ -877,6 +892,9 @@
this.getFileList() this.getFileList()
this.leftMenuShow = false this.leftMenuShow = false
}, },
uploadList() {
this.$router.push(`/upload/index_m`)
},
// 统计 // 统计
statistics() { statistics() {
let totalSize = 0 let totalSize = 0
@ -962,16 +980,11 @@
} else { } else {
this.path = '/' + row.name this.path = '/' + row.name
} }
const itemFirst = {} const item = {}
itemFirst['folder'] = row.name item['folder'] = row.name
itemFirst['index'] = this.pathList.length - 1 item['index'] = this.pathList.length - 1
const itemSecond = {} this.pathList.push(item)
itemSecond['folder'] = '+'
itemSecond['index'] = this.pathList.length
this.pathList[this.pathList.length - 1] = itemFirst
this.pathList.push(itemSecond)
this.$router.push(`/_m?path=${encodeURIComponent(this.path)}`) this.$router.push(`/_m?path=${encodeURIComponent(this.path)}`)
setPath(this.path, this.pathList)
this.getFileList() this.getFileList()
} else { } else {
if (row.contentType.startsWith('image')) { if (row.contentType.startsWith('image')) {

18
src/views/upload/mobile/index.vue
View File

@ -16,7 +16,10 @@
<li v-for="file in fileList" :key="file.id"> <li v-for="file in fileList" :key="file.id">
<uploader-file ref="files" :class="'file_' + file.id" :file="file" :list="true"></uploader-file> <uploader-file ref="files" :class="'file_' + file.id" :file="file" :list="true"></uploader-file>
</li> </li>
<div v-if="!fileList.length" class="no-file"><i class="iconfont icon-empty-file"></i> 暂无待上传文件</div> <div v-if="!fileList.length" class="no-file">
<van-empty description="暂无待上传文件" />
</van-button>
</div>
</ul> </ul>
</van-list> </van-list>
</div> </div>
@ -34,10 +37,12 @@
}; };
}, },
mounted(){ mounted(){
this.fileList = window.uploader.fileList if (window.uploader) {
this.fileList = window.uploader.fileList
}
}, },
destroyed(){ destroyed(){
window.removeEventListener('popstate', this.goBack, false); window.removeEventListener('popstate', this.goBack, false)
}, },
methods: { methods: {
onClickLeft() { onClickLeft() {
@ -78,4 +83,11 @@
margin-right: 16px; margin-right: 16px;
} }
} }
.no-file {
.plus {
position: absolute;
bottom: 1rem;
right: 2rem;
}
}
</style> </style>