jifuning
/
zhihui_kuangshan_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616
							<!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>
        /*搜索*/
        .api_search{
            padding: 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap;
        }
        .search_box{
            flex: 6;
            height: 34px;
            line-height: 34px;
            background:rgba(255,255,255,1);
            box-shadow:0 0 5px 0 rgba(0,0,0,0.25);
            border-radius:5px;
            font-size: 14px;
            color: #929292;
            padding-left: 30px;
            position: relative;
        }
        .search_icon{
            display: block;
            position: absolute;
            top: 7px;
            left: 7px;
            width: 20px;
            height: 20px;
            background: url("../../icon/searc1.png") center no-repeat;
            background-size: cover;
        }
        .sort_box{
            width: 25px;
            height: 25px;
            margin-left: 13px;
            background: url("../../icon/sort.png") center no-repeat;
            background-size: cover;
        }
        /*文件列表*/
        .cloud_lists{
            padding-top: 10px;
            overflow: hidden;
        }
        .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: 25px;
            height: 25px;
            background: url("../../icon/tool.png") center no-repeat;
            background-size: cover;
            position: absolute;
            top: 17.5px;
            right: 14px;
        }
        /*悬浮菜单*/
        .menu{
            position: fixed;
            bottom: 13px;
            right: 13px;
            z-index: 9999;
        }
        .tool_boxs{
            background:rgba(255,255,255,1);
            box-shadow:0 0 10px 5px rgba(0,0,0,0.15);
            border-radius:27px;
            color: #2C3E50;
            font-size: 12px;
            text-align: center;
            padding: 3px;
            height: 51px;
            box-sizing: border-box;
            transition: .5s;
            overflow: hidden;
        }
        .tool_box_first{
            opacity: 0;
            height: 0;
            position: relative;
            bottom: -140px;
            margin-bottom: 0;
            transition: .5s;
        }
        .tool_box_two{
            opacity: 0;
            height: 0;
            position: relative;
            bottom: -70px;
            margin-bottom: 0;
            transition: .5s;
        }
        .tool_box p{
            width: 45px;
            height: 45px;
        }
        .plus{
            background: url("../../icon/tool1.png") center no-repeat;
            background-size: cover;
            position: relative;
            z-index:2000;
            cursor: pointer;
        }
        .file_x{
            background: url("../../icon/file_x.png") center no-repeat;
            background-size: cover;
            margin-bottom: 3px;
        }
        .file_j{
            background: url("../../icon/file_s.png") center no-repeat;
            background-size: cover;
            margin-bottom: 3px;
        }
        /*上传按钮原生H5样式修改*/
        .rt_rt_1ec4mqe238o31nmpp8e12r91n1{
          width: 45px;
          height: 45px;
        }
        .webuploader-element-invisible{
          opacity: 0;
          width: 45px;
          height: 45px;
        }
    </style>
</head>
<body>
    <div class="api_layout">
    <!-- 搜索-->
        <div class="api_search">
<!--            搜索框-->
            <div class="search_box" onclick="searchFile()">
                搜索
                <i class="search_icon"></i>
            </div>
<!--            排序-->
            <div class="sort_box" onclick="openSortTool()"></div>
        </div>
    <!-- 文件列表-->
        <div class="cloud_lists" id="cloud_lists"></div>
    </div>
    <!--悬浮菜单-->
    <div class="menu">
        <div class="tool_boxs">
            <div class="tool_box tool_box_first tool_box_c" onclick="addFolder()">
                <p class="file_x"></p>
                文件夹
            </div>
            <div class="tool_box tool_box_two tool_box_c" id="picker">
                <p class="file_j"></p>
                文件
            </div>
            <div class="tool_box">
                <p class="plus"></p>
            </div>
        </div>
    </div>
    <!-- 无内容提示 -->
    <div class="noText hide">
      <img src="../../image/noText.png" alt="">
    </div>
    <!-- 下载 -->
    <a href="javascript:;" id="upload_file"></a>
</body>

</html>

<script type="text/template" id="templateMyCloud">
    {{~it:value:index}}
      <ul class="cloud_list">
        {{? value.filetype === 0}}
          <li>
            <div class="img_text" tapmode 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}}','{{=value.filetype}}')"></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_tool" onclick="openTool('{{=value.id}}','{{=value.filename}}')"></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/cloudUpload/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../../script/cloudUpload/webuploader.min.js"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script type="text/javascript" src="../../script/cloudUpload/cloudUpload.js"></script>
<script type="text/javascript">
    var skip = 1,isLoadding = false,userToken='',
    orderfield = '', ordertype='',isHtml = false
    pid = null;
    apiready = function() {
        userToken = api.pageParam.token
        pid = api.pageParam.id
        register(pid,userToken);
      	init();
        findList()
        api.addEventListener({
  				name : 'scrolltobottom',
  				extra : {
  					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
  				}
  			}, function(ret, err) {
  				if (!isLoadding) {
  					isLoadding = true;
            isHtml = false;
  					findList();
  				}
  			})
    }
    // list
    function findList() {
      var params = {
        pid,
        orderfield,
        ordertype,
        page: skip,
        limit: 20,
        token: userToken
      }
      $http.requestData(UrlRouter.findList,'post',params)
      .then(ret=>{
        if (ret.rows.length == 0 && skip == 1) {
          $api.removeCls($api.dom('.noText'), 'hide');
            return false;
        }else {
          $api.addCls($api.dom('.noText'), 'hide');
        }
        if (ret.rows.length > 0) {
          if (isHtml) {
            skip += 1;
            $apis.html(cloud_lists,'#templateMyCloud',ret.rows);
          }else {
            skip += 1;
            $apis.append(cloud_lists,'#templateMyCloud',ret.rows);
          }
        } else {
            isLoadding = true;
            api.toast({
                msg: '没有更多数据',
                duration: 2000,
                location: 'bottom'
            });
        }
      })
      .catch(err=>{
        api.toast({
            msg: '网络错误，请检查网络!',
            duration: 2000,
            location: 'top'
        })
      })
    }
    // 搜索
    function searchFile() {
        $event.openWin('searchFile_win','searchFile_win',{token:userToken},'')
    }
    // 排序工具栏
    function openSortTool() {
      api.actionSheet({
          title: '排序',
          cancelTitle: '取消',
          buttons: ['按时间顺序', '按名称排序']
      }, function(ret, err) {
          if (ret.buttonIndex === 1) {
            orderfield = 'createtime',
            ordertype = ''
          }else {
            ordertype = 'descending'
            orderfield = ''
          }
          skip = 1
          isHtml = true
          findList()
      });
    }
    // 下载删除工具函数
    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 addFolder() {
      api.prompt({
          title: '新建文件夹',
          buttons: ['确定', '取消'],
          text: '请输入文件夹名称!'
      }, function(ret, err) {
          if (ret.buttonIndex === 1) {
            newFolder(ret.text)
          }

      });
    }
    // 添加文件以及文件夹的js动画
    $('body').on('click','.plus',function () {
        if ($('.tool_boxs').height() === 45){
            $('.tool_box_c').css({
                bottom:0,
                height: 65,
                marginBottom:5,
                opacity:1
            })
            $('.tool_boxs').css({
                height:191
            })
        }else {
            $('.tool_box_c').css({
                bottom:-70,
                height: 0,
                marginBottom:0,
                opacity:0
            })
            $('.tool_boxs').css({
                height:51
            })
        }

    })
    // open文件夹
    function openFolderContent(name,id) {
        $event.openTabLayout('cloudDiskDe'+Math.random(),'cloudDiskDe',name,{id,token:userToken});
    }
    // 删除文件或文件夹
    function deleteFolder(id,name) {
      var params = {
        ids: [{id,name}],
        token:userToken
      }
      $http.requestShowProgress(UrlRouter.delete,'post',params)
      .then(ret=>{
        if (ret.code === 0) {
          api.toast({
              msg: '删除成功',
              duration: 2000,
              location: 'top'
          })
          skip = 1
          isHtml = true
          findList()
        }else {
          api.toast({
              msg: '删除失败',
              duration: 2000,
              location: 'top'
          })
        }
      })
      .catch(err=>{
        api.toast({
            msg: '网络错误，请检查网络!',
            duration: 2000,
            location: 'top'
        })
      })
    }
    // 新建文件夹
    function newFolder(name) {
      var params = {
        pid,
        name,
        token:userToken
      }
      $http.requestShowProgress(UrlRouter.addFolder,'post',params)
      .then(ret=>{
        if (ret.code === 0) {
          api.toast({
              msg: '添加成功',
              duration: 2000,
              location: 'top'
          })
          skip = 1
          isHtml = true
          findList()
        }else {
          api.toast({
              msg: '添加失败',
              duration: 2000,
              location: 'top'
          })
        }
      })
      .catch(err=>{
        api.toast({
            msg: '网络错误，请检查网络!',
            duration: 2000,
            location: 'top'
        })
      })
    }
    // 合并切块，上传文件
    function register(ids,token){
    	//document->hook下面有介绍
    	WebUploader.Uploader.register({
    		'name': 'webUploaderHookCommand',
        	"before-send-file":"beforeSendFile",
        	"before-send":"beforeSend",
        	"after-send-file":"afterSendFile"
        },{
          beforeSendFile:function(file) {
              // 创建一个deffered,用于通知是否完成操作
          var deferred = WebUploader.Deferred();
              //js-spark-md5计算md5
              //内置计算md5【慢，而且jpg计算不对】
    			getFileMd5(file,deferred,token);
    			uploader.options.formData.uuid = uuid;
              	uploader.options.formData.pid = ids;
          			uploader.options.formData.token = userToken;

          			//问题一：同时选择两个文件，大在前，小在后，则md5和filename会窜
          			//问题二：主要如果<chunkSize，则不分块，不会有chunk和chunks两参数
          			//问题三：内置参数chunk/chunks
            	if(file.size<=chunkSize){
            		uploader.options.formData.chunk=0;
            		uploader.options.formData.chunks=1;
            	}

                return deferred.promise();// 通知完成操作
            },
            beforeSend:function(block) {
            },
            afterSendFile:function(file) {//合并切块
            	var url=baseurl+"disk/fileupload/mergeChunk";
            	var args={
            		"albumid":'',
            		"pid":ids,
            		"relativepath":"",
            		"uuid":uuid,
            		"fileid":file.id,
            		"filename":file.name,
            		"filemd5":md5,
            		"totalSize":file.size,
            		"token": token
            	};
            $.post(url,args,function(data){
            		if(data.code==0){
                  api.toast({
                      msg: '上传成功',
                      duration: 2000,
                      location: 'top'
                  });
                  skip = 1
                  isHtml = true
                  findList()
                  api.hideProgress();

            		}else{
                  api.toast({
                      msg: '上传失败',
                      duration: 2000,
                      location: 'top'
                  });
                  api.hideProgress();
            		}
            	});
            }
        });
    }
    // 下载文件 图片
    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=${userToken}`)
                  uploadFileElm.attr('download',`${UrlRouter.download}fileid=${id}&token=${userToken}`)
                  document.getElementById("upload_file").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:userToken
      }
      $http.requestShowProgress(UrlRouter.rename,'post',params)
      .then(ret=>{
        if (ret.code === 0) {
          api.toast({
              msg: '修改成功',
              duration: 2000,
              location: 'top'
          })
          skip = 1
          isHtml = true
          findList()
        }else {
          api.toast({
              msg: '修改失败',
              duration: 2000,
              location: 'top'
          })
        }
      })
      .catch(err=>{
        api.toast({
            msg: '网络错误，请检查网络!',
            duration: 2000,
            location: 'top'
        })
      })
    }

</script>