123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
- <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
- <title>云盘</title>
- <link rel="stylesheet" type="text/css" href="../../css/api.css" />
- <link rel="stylesheet" href="../../css/projeck.css">
- <style>
- /*title*/
- .title{
- padding: 10px;
- position: relative;
- font-size: 12px;
- color: #8a8a8a;
- display: flex;
- justify-content:flex-start;
- align-items: center;
- overflow: hidden;
- }
- .title:after{
- content: "";
- position: absolute;
- bottom: 0;
- left: 10px;
- width: 100%;
- height: 1px;
- background: #dbdbdb;
- }
- .title_icon{
- width: 15px;
- height: 15px;
- background: url("../../icon/file_icon.png") center no-repeat;
- background-size: cover;
- margin-right: 5px;
- }
- /*文件列表*/
- .cloud_list li{
- padding: 10px 14px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
- flex-wrap: nowrap;
- color: #2C3E50;
- position: relative;
- }
- .img_text{
- display: flex;
- justify-content: flex-start;
- align-items: center;
- flex-wrap: nowrap;
- width: 86%;
- }
- .file_name_sizes{
- width: 82%;
- }
- .cloud_list li img{
- width: 40px;
- height: 40px;
- margin-right: 13px;
- }
- .file_name{
- font-size: 14px;
- margin-bottom: 3px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .file_size_time{
- color: #9C9FA5;
- font-size: 13px;
- }
- .file_tool{
- width: 15px;
- height: 15px;
- background: url("../../image/more.png") center no-repeat;
- background-size: cover;
- position: absolute;
- top: 27.5px;
- right: 14px;
- }
- .file_tool1{
- width: 25px;
- height: 25px;
- background: url("../../icon/tool.png") center no-repeat;
- background-size: cover;
- position: absolute;
- top: 17.5px;
- right: 14px;
- }
- </style>
- </head>
- <body>
- <div class="api_layout">
- <!-- 文件列表-->
- <div class="cloud_lists" id="cloud_lists"></div>
- </div>
- <!-- 下载 -->
- <a href="javascript:;" id="upload_file"></a>
- </body>
- </html>
- <script type="text/template" id="templateSearch">
- <!-- title-->
- <div class="title">
- <i class="title_icon"></i>
- 文件/文件夹
- </div>
- <!-- 文件列表-->
- {{~it:value:index}}
- <ul class="cloud_list">
- {{? value.filetype === '0'}}
- <li>
- <div class="img_text" onclick="openFolderContent('{{=value.filename}}','{{=value.id}}')">
- <img src="../../icon/file.png" alt="">
- <div class="file_name_sizes">
- <p class="file_name">{{=value.filename}}</p>
- <p class="file_size_time">{{=value.createtime}}</p>
- </div>
- </div>
- <i class="file_tool" onclick="openTool('{{=value.id}}','{{=value.filename}}')"></i>
- </li>
- {{??}}
- <li>
- <div class="img_text">
- <img src="{{=value.fileicon}}" alt="">
- <div class="file_name_sizes">
- <p class="file_name">{{=value.filename}}</p>
- <p class="file_size_time">{{=value.createtime}} {{=value.filesizename}}</p>
- </div>
- </div>
- <i class="file_tool1" onclick="openTool('{{=value.id}}','{{=value.filename}}','{{=value.filetype}}')"></i>
- </li>
- {{?}}
- </ul>
- {{~}}
- </script>
- <script type="text/javascript" src="../../script/api.js"></script>
- <script type="text/javascript" src="../../script/doT.min.js"></script>
- <script type="text/javascript" src="../../script/zepto.js"></script>
- <script src="../../script/config.js" charset="utf-8"></script>
- <script type="text/javascript">
- var token ='',filenames= ''
- apiready = function() {
- token = api.pageParam.token
- }
- function searchFileList(filename) {
- filenames = filename
- var params = {
- filename,
- page: 1,
- limit: 1000,
- token
- }
- $http.requestShowProgress(UrlRouter.fileSearch,'post',params)
- .then(ret=>{
- if (ret.code === 0) {
- $apis.html(cloud_lists,'#templateSearch',ret.rows);
- }
- })
- .catch(err=>{})
- }
- // open文件夹
- function openFolderContent(name,id) {
- $event.openTabLayout('cloudDiskDe'+Math.random(),'cloudDiskDe',name,{id,token:token});
- }
- function openTool(id,name,type) {
- var Toolname = type == '0' ? ['重命名']:['下载','重命名']
- api.actionSheet({
- title: '操作',
- cancelTitle: '取消',
- destructiveTitle: '删除',
- buttons: Toolname
- }, function(ret, err) {
- var index = ret.buttonIndex;
- if (index === 1) {
- api.confirm({
- title: '确定删除文件?',
- msg: '',
- buttons: ['确定', '取消']
- }, function(ret, err) {
- if (ret.buttonIndex === 1) {
- deleteFolder(id,name)
- }
- })
- }else if (index === 2) {
- if (type != 0) {
- mergeFilesNew(id,name)
- }else {
- renameFolder(id,name,type)
- }
- }
- else if (index === 3) {
- if (type != 0) {
- renameFolder(id,name,type)
- }
- }
- });
- }
- // 删除文件或文件夹
- function deleteFolder(id,name) {
- var params = {
- ids: [{id,name}],
- token:token
- }
- $http.requestShowProgress(UrlRouter.delete,'post',params)
- .then(ret=>{
- if (ret.code === 0) {
- api.toast({
- msg: '删除成功',
- duration: 2000,
- location: 'top'
- })
- searchFileList(filenames)
- }else {
- api.toast({
- msg: '删除失败',
- duration: 2000,
- location: 'top'
- })
- }
- })
- .catch(err=>{
- api.toast({
- msg: '网络错误,请检查网络!',
- duration: 2000,
- location: 'top'
- })
- })
- }
- // 下载文件 图片
- function mergeFilesNew(id) {
- var uploadFileElm= $('#upload_file')
- api.confirm({
- title: '提示',
- msg: '是否下载文件',
- buttons: ['确定', '取消']
- }, function(ret, err) {
- var index = ret.buttonIndex;
- if (index === 1) {
- uploadFileElm.attr('href',`${UrlRouter.download}fileid=${id}&token=${token}`)
- uploadFileElm.attr('download',`${UrlRouter.download}fileid=${id}&token=${token}`)
- uploadFileElm.click();
- }
- });
- }
- // 重命名
- function renameFolder(id,name,type) {
- var filename = name
- fileType = name.substring(name.lastIndexOf('.'))
- if (type != 0) {
- filename = name.substring(0,name.lastIndexOf('.'))
- }
- api.prompt({
- title: '修改文件名称',
- buttons: ['确定', '取消'],
- text: filename
- }, function(ret, err) {
- var text = ret.text;
- if (ret.buttonIndex === 1) {
- rename(id,ret.text,fileType)
- }
- });
- }
- function rename(id,filename,fileType) {
- var type = fileType
- if (fileType.indexOf('.') != 0 ) {
- type = ''
- }
- var params = {
- id,
- filename:filename+type,
- token,
- }
- $http.requestShowProgress(UrlRouter.rename,'post',params)
- .then(ret=>{
- if (ret.code === 0) {
- api.toast({
- msg: '修改成功',
- duration: 2000,
- location: 'top'
- })
- searchFileList(filenames)
- }else {
- api.toast({
- msg: '修改失败',
- duration: 2000,
- location: 'top'
- })
- }
- })
- .catch(err=>{
- api.toast({
- msg: '网络错误,请检查网络!',
- duration: 2000,
- location: 'top'
- })
- })
- }
- </script>
|