1.展示文件夹所有文件

2.获取所有文件接口
3.文件夹修改等遮罩弹窗
4.重命名接口
5.删除接口
6.根据type判断操作文件还是文件夹进行相应的接口调用
7.删除/重命名接口操作之后刷新数据

miniprogram/app.json

@@ -8,8 +8,9 @@
         "pages/teacher/index/index",
         "pages/installer/index/index",
         "pages/repairman/index/index",
-        "pages/itadministrator/index/index"
-
+        "pages/itadministrator/index/index",
+        "pages/document/document"
+     
     ],
     "window": {
         "backgroundTextStyle": "light",

miniprogram/component/documentItem/documentItem.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

miniprogram/component/documentItem/documentItem.ts

@@ -0,0 +1,40 @@
+// component/documentItem/documentItem.ts
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        itemData: null
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        type: 1,
+        hasDownLoad: true
+    },
+    lifetimes: {
+        attached: function () {
+            // 在组件实例被从页面节点树添加时执行
+
+            this.setData({
+                type: this.properties.itemData.type
+            })
+
+        },
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+
+        },
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        showActionWindow: function () {
+            this.triggerEvent("showActionWindow", { item: this.properties.itemData })
+        }
+    }
+})

miniprogram/component/documentItem/documentItem.wxml

@@ -0,0 +1,21 @@
+<!--component/documentItem/documentItem.wxml-->
+<view>
+    <view class="topLayout">
+        <view class="topLayout_ImgLayout">
+            <image wx:if="{{type==1}}" src="../../image/document/document_video.png" class="topLayout_ImgLayout_img"></image>
+            <image wx:elif="{{type==0}}" src="../../image/document/document_img.png" class="topLayout_ImgLayout_img"></image>
+            <text class="topLayout_ImgLayout_text">{{itemData.title}} 回看</text>
+        </view>
+        <view class="topLayout_ImgLayout_more" bindtap="showActionWindow">
+            <image src="../../image/teacher/file_more.png" class="topLayout_ImgLayout_more_img"></image>
+        </view>
+    </view>
+    <view class="timeLayout">
+        <text class="timeLayout_time">起止时间：{{itemData.created}}</text>
+        <text wx:if="{{hasDownLoad}}" class="timeLayout_download_text">下载：80%</text>
+    </view>
+    <view class="playerLayout">
+        <video wx:if="{{type==0}}" class="player" src="{{itemData.url}}"> </video>
+        <image wx:elif=" {{type==1}}" class="player" style="background-color: sienna;" src="{{itemData.url}}"></image>
+    </view>
+</view>

miniprogram/component/documentItem/documentItem.wxss

@@ -0,0 +1,68 @@
+/* component/documentItem/documentItem.wxss */
+.topLayout {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.topLayout_ImgLayout {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.topLayout_ImgLayout_img {
+    width: 70rpx;
+    height: 70rpx;
+    margin-left: 27rpx;
+}
+
+.topLayout_ImgLayout_text {
+    font-size: 34rpx;
+    margin-left: 37rpx
+}
+
+.topLayout_ImgLayout_more {
+    height: 43rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 28rpx;
+}
+
+.topLayout_ImgLayout_more_img {
+    width: 32rpx;
+    height: 8rpx;
+}
+
+.timeLayout {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 23rpx
+}
+
+.timeLayout_time {
+    font-size: 28rpx;
+    margin-left: 27rpx;
+}
+
+.timeLayout_download_text {
+    margin-right: 25rpx;
+    color: #64C55A;
+    font-size: 28rpx;
+}
+
+.playerLayout {
+    width: 100%;
+    height: 425rpx;
+    background-color: royalblue;
+    margin-top: 22rpx;
+}
+
+.player {
+    width: 100%;
+    height: 100%;
+}

miniprogram/component/fileBottomPop/fileBottomPop.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

miniprogram/component/fileBottomPop/fileBottomPop.ts

@@ -0,0 +1,179 @@
+// component/fileBottomPop/fileBottomPop.ts
+import { TimeUtil } from '../../utils/TimeUtil'
+import { httpUtil } from '../../utils/restful'
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        pageHeight: 0,
+        pageWidth: 0,
+        windowType: -1,
+        hideModal: true,
+        itemData: null,
+        fileName: '',
+        uploadTime: '',
+        expireTime: '',
+        iconUrl: ''
+    },
+
+    lifetimes: {
+        attached: function () {
+            // 在组件实例被从页面节点树添加时执行
+
+            this.setData({
+                pageHeight: wx.getSystemInfoSync().windowHeight,
+                pageWidth: wx.getSystemInfoSync().windowWidth
+            })
+
+        },
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+
+        },
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+        // 显示遮罩层 windowType==是文件夹 windowType==1是文件
+        showModal: function (showItem: any, windowType: any) {
+            var that = this;
+            let icon = ''
+            if (showItem.type == 0) {
+                //图片
+                icon = '../../image/document/document_img.png'
+            } else if (showItem.type == 1) {
+                //不知道是不是视频
+                icon = '../../image/document/document_video.png'
+            } else {
+                icon = '../../image/teacher/file_icon.png'
+            }
+            that.setData({
+                hideModal: false,
+                itemData: showItem,
+                fileName: showItem.title,
+                uploadTime: TimeUtil.dateFormat(parseInt(showItem.uploadTime), "yyyy-MM-dd HH:mm"),
+                expireTime: TimeUtil.dateFormat(parseInt(showItem.expireTime), "yyyy-MM-dd HH:mm"),
+                iconUrl: icon,
+                windowType: windowType
+            })
+        },
+
+        // 隐藏遮罩层 
+        hideModal: function () {
+            var that = this;
+
+            that.setData({
+                hideModal: true
+            })
+        },
+
+        none: function () {
+            return true;
+        },
+
+
+
+        renameFile: function () {
+            let rename = '';
+            let that = this;
+            wx.showModal({
+                title: '重命名',
+                editable: true,
+                success: function (res) {
+                    if (res.confirm) {
+                        rename = res.content
+                        console.log('点击确认回调:', res.content)
+                        let puturl = ''
+
+                        console.log("重命名方法")
+                        if (that.data.windowType == 0) {
+                            //文件夹重命名
+                            puturl = httpUtil.interfaces.createLess
+                        } else if (that.data.windowType == 1) {
+                            puturl = httpUtil.interfaces.getDocumentFile
+                            //文件重命名
+                        }
+                        let params = {
+                            id: that.data.itemData.id,
+                            lessId: that.data.itemData.lessId,
+                            title: rename
+                        }
+                        httpUtil.wxPut(puturl, params).then((res:any) => {
+                            that.setData({
+                                fileName: res.data.data.title
+                            })
+                            that.triggerEvent("fileDel")
+                        }).catch((res) => {
+                            console.log("重命名失败:", res)
+                        })
+                    } else {
+                        console.log('点击取消回调')
+                    }
+                }
+            })
+
+
+        },
+
+        downloadFile: function () {
+            console.log("下载方法")
+            if (this.data.windowType == 0) {
+                //文件夹下载
+            } else if (this.data.windowType == 1) {
+                //文件下载
+                httpUtil.wxDownLoadFile(this.data.itemData.url, function (res: any) {
+                    console.log("下载没？？===", res.progress)
+                })
+            }
+        },
+
+        deleteFile: function () {
+            if (this.data.windowType == 0) {
+                //删除文件夹
+                console.log("删除文件夹")
+                let params = {
+                    id: this.data.itemData.id
+                }
+                httpUtil.wxDel(httpUtil.interfaces.createLess, params).then((res) => {
+                    this.delVoer()
+                }).catch((res) => {
+                    console.log("删除失败:", res)
+                })
+            } else if (this.data.windowType == 1) {
+                console.log("删除单独文件")
+                let params = {
+                    id: this.data.itemData.id,
+                    lessonId: this.data.itemData.lessonId
+                }
+                httpUtil.wxDel(httpUtil.interfaces.getDocumentFile, params).then((res) => {
+                    this.delVoer()
+                }).catch((res) => {
+                    console.log("删除失败:", res)
+                })
+            }
+
+
+        },
+
+        delVoer() {
+            this.hideModal()
+            this.triggerEvent("fileDel")
+        }
+
+
+
+
+
+
+    }
+})

miniprogram/component/fileBottomPop/fileBottomPop.wxml

@@ -0,0 +1,38 @@
+<!--component/fileBottomPop/fileBottomPop.wxml-->
+<view catchtap="" class="container" hidden="{{hideModal}}">
+    <view style="height: {{pageHeight}}px; width: {{pageWidth}}px;background: rgba(0,0,0,0.70);" catchtap="hideModal">
+        <view class="layout" catchtap="none">
+            <view class="content_layout">
+                <view class="toplayout">
+                    <view class="img_name_layout">
+                        <image src="{{iconUrl}}" style="width:55rpx;height:55rpx;"></image>
+                        <text style="font-size: 30rpx;color:#333333;margin-left: 23rpx;">{{fileName}}</text>
+                    </view>
+                    <text class="time_text" style="margin-top:30rpx">上传时间：{{uploadTime}}</text>
+                    <text class="time_text" style="margin-top:21rpx">云端保留和删除时间：{{expireTime}}</text>
+                </view>
+                <view class="line" style="margin-top: 56rpx;"></view>
+                <view class="action_layout" bindtap="renameFile">
+                    <image src="../../image/fileBottomPop/rename.png" class="action_icon"></image>
+                    <text class="action_text">重命名</text>
+                </view>
+                <view class="line"></view>
+                <view class="action_layout" bindtap="downloadFile">
+                    <image src=" ../../image/fileBottomPop/download.png" class="action_icon"> </image>
+                    <text class="action_text">下载 保存到本地相册</text>
+                </view>
+                <view class=" line">
+                </view>
+                <view class="action_layout" bindtap="deleteFile">
+                    <image src="../../image/fileBottomPop/delete.png" class="action_icon"></image>
+                    <text class="action_text">删除</text>
+                </view>
+                <view class="line"></view>
+            </view>
+
+            <view class="cancel_layout">
+                <text class="cancel_text" bindtap="hideModal">取消</text>
+            </view>
+        </view>
+    </view>
+</view>

miniprogram/component/fileBottomPop/fileBottomPop.wxss

@@ -0,0 +1,87 @@
+/* component/fileBottomPop/fileBottomPop.wxss */
+
+
+.topclick_layout{
+    
+}
+
+.layout {
+    height: 70%;
+    width: 100%;
+    background-color: #FFFFFF;
+    position: absolute;
+    bottom: 0;
+    border-radius: 14px 14px 0px 0px;
+}
+
+.content_layout {
+    width: 100%;
+    height: 100%;
+    margin-top: 43rpx;
+    display: flex;
+    flex-direction: column;
+}
+
+.toplayout {
+    display: flex;
+    flex-direction: column;
+    margin-left: 28rpx;
+    margin-right: 28rpx;
+}
+
+.img_name_layout {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.time_text {
+    font-size: 28rpx;
+    color: #666666;
+}
+
+.line {
+    background-color: #979797;
+    opacity: 0.2;
+    height: 1rpx;
+    width: 100%;
+}
+
+.action_layout {
+    height: 114rpx;
+    width: 100%;
+    margin-left: 28rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.action_icon {
+    width: 38rpx;
+    height: 41rpx;
+}
+
+.action_text {
+    font-size: 28rpx;
+    color: #333333;
+    margin-left: 53rpx
+}
+
+.cancel_layout {
+    position: absolute;
+    bottom: 0;
+    height: 92rpx;
+    width: 100%;
+    background-color: #F4F4F4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.cancel_text {
+    text-align: center;
+    width: 200rpx;
+    font-size: 36rpx;
+    color: #6d6d6d;
+}

miniprogram/component/fileItem/fileItem.ts

@@ -36,24 +36,13 @@ Component({
      */
     methods: {
         clickFileItem: function (event: any) {
-            console.log("event.currentTarget.id:", event.currentTarget.id)
-            //根据ID查询文件库下所有文件
-            let params = {
-                lessId: event.currentTarget.id,
-                userId: httpUtil.httpData.userId,
-                pageNo: 1,
-                pageSize: 100000,
 
-            }
-            httpUtil.wxGet(httpUtil.interfaces.getDocumentFile, params).then((res: any) => {
-                console.log("获取所有文件成功：", res)
-
-            }).catch((res) => {
-                console.log("获取所有文件失败：", res)
+            wx.navigateTo({
+                url: '../../../pages/document/document?lessId=' +  event.currentTarget.id
             })
         },
         clickMore: function (event: any) {
-            console.log("event.currentTarget.id:more----------", event.currentTarget.id)
+            this.triggerEvent("showWindow", { item: this.data.itemData })
         }
     }
 })

miniprogram/component/fileItem/fileItem.wxml

@@ -5,7 +5,7 @@
         <text style="color: #333333;font-size: 34rpx;">{{itemData.title}}</text>
         <text style="color: #333333;font-size: 28rpx;">上传时间：{{fileUploadTime}}</text>
     </view>
-    <view style="align-self: flex-start; height: 60rpx;" catchtap="clickMore">
+    <view style="align-self: flex-start; height: 60rpx;" catchtap="clickMore" id="{{itemData.id}}">
         <image src="../../image/teacher/file_more.png" class="fileitem_more_icon" ></image>
     </view>
 </view>

miniprogram/component/teacher/teacherFile/teacherFile.json

@@ -1,9 +1,7 @@
 {
     "component": true,
     "usingComponents": {
-
         "fileItem": "../../fileItem/fileItem"
-
     },
     "navigationBarTitleText": "文件库"
 }

miniprogram/component/teacher/teacherFile/teacherFile.ts

@@ -40,9 +40,18 @@ Component({
                 this.setData({
                     fileList: res.data.data.list
                 })
+
+
             }).catch((res) => {
                 console.log("获取所有文件库失败：", res)
             })
+        },
+        showWindow: function (event: any) {
+            // console.log("点击了更多的按钮:", event)
+            this.triggerEvent("showWindow", { item: event.detail.item })
+        },
+        realod: function () {
+            this.getLessAll()
         }
     }
 })

miniprogram/component/teacher/teacherFile/teacherFile.wxml

@@ -13,8 +13,8 @@
 
     <scroll-view scroll-y="true" class="scrollview">
         <view wx:for="{{fileList}}" class="scroll_item_bg" wx:key="index">
-            <fileItem itemData="{{item}}"> </fileItem>
+            <fileItem itemData="{{item}}" bind:showWindow="showWindow"> </fileItem>
         </view>
-
     </scroll-view>
+
 </view>

miniprogram/pages/document/document.json

@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "documentitem": "../../component/documentItem/documentItem",
+    "fileBottomPop":"../../component/fileBottomPop/fileBottomPop"
+
+  }
+}

miniprogram/pages/document/document.ts

@@ -0,0 +1,53 @@
+// pages/document/document.ts
+import { httpUtil } from "../../utils/restful"
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        lessId: '',
+        itemList: null
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        this.setData({
+            lessId: options.lessId
+        })
+        this.getDocumentAll();
+        console.log("this.data.itemList:", this.data.itemList)
+    },
+
+    showActionWindow: function (evnet: any) {
+        console.log("event:", evnet.detail.item)
+        this.selectComponent("#popupwindow").showModal(evnet.detail.item, 1)
+
+    },
+
+    fileDel: function () {
+        //文件删除了就重新请求刷新一下
+        this.getDocumentAll();
+    },
+    getDocumentAll() {
+
+        //根据ID查询文件库下所有文件
+        let params = {
+            lessId: this.data.lessId,
+            userId: httpUtil.httpData.userId,
+            pageNo: 1,
+            pageSize: 100000,
+        }
+        httpUtil.wxGet(httpUtil.interfaces.getDocumentFile, params).then((res: any) => {
+            console.log("获取所有文件成功：", res)
+            this.setData({
+                itemList: res.data.data.list
+            })
+
+        }).catch((res) => {
+            console.log("获取所有文件失败：", res)
+        })
+    }
+})

miniprogram/pages/document/document.wxml

@@ -0,0 +1,12 @@
+<!--pages/document/document.wxml-->
+<view class="container">
+
+    <scroll-view style="height: 100%; width: 100%;background-color: #ffffff; " scroll-y>
+        <view wx:for="{{itemList}}" style="margin-top: 28rpx;" wx:key="index">
+            <documentitem itemData="{{item}}" bind:showActionWindow="showActionWindow"></documentitem>
+        </view>
+    </scroll-view>
+</view>
+
+
+<fileBottomPop id="popupwindow" style="position: absolute; left: 0;" bind:fileDel="fileDel"></fileBottomPop>

miniprogram/pages/document/document.wxss

@@ -0,0 +1 @@
+/* pages/document/document.wxss */

miniprogram/pages/index/index.wxml

@@ -2,7 +2,7 @@
 
 <view class="container">
     <view class="page">
-  
+      
         <text style="margin-top: 200rpx;">请选择身份</text>
         <view class="layout">
             <view class="item_bg">
@@ -31,4 +31,5 @@
 
 
 
+
 </view>

miniprogram/pages/teacher/index/index.json

@@ -4,7 +4,8 @@
     "teacherMonitor": "../../../component/teacher/teacherMonitor/monitor",
     "teacherFile": "../../../component/teacher/teacherFile/teacherFile",
     "teacherFault": "../../../component/teacher/teacherFault/teacherFault",
-    "myInfo": "../../../component/myInfo/myInfo"
+    "myInfo": "../../../component/myInfo/myInfo",
+    "fileBottomPop":"../../../component/fileBottomPop/fileBottomPop"
   },
   "navigationBarTitleText": "教师端"
 }

miniprogram/pages/teacher/index/index.ts

@@ -92,5 +92,17 @@ Page({
         this.setData({
             currPageIndex: Number(event.detail.selectIndex)
         })
+    },
+
+
+    showWindow: function (event: any) {
+        console.log("clickId:", event.detail.item)
+        let window = this.selectComponent("#popupwindow")
+        window.showModal(event.detail.item, 0);
+    },
+
+    fileDel: function () {
+        console.log("有文件被删除了")
+        this.selectComponent("#teacherFile").realod();
     }
 })

miniprogram/pages/teacher/index/index.wxml

@@ -2,14 +2,29 @@
 <view class="container">
     <!-- 根据选项卡选择的index显示界面 -->
     <view style="width: 100%; height: 100%;">
+
+
+
         <teacherMonitor wx:if="{{currPageIndex==0}}" bind:canChangeIndex="canChangeIndex"></teacherMonitor>
-        <teacherFile wx:if="{{currPageIndex==1}}"></teacherFile>
+        <teacherFile wx:if="{{currPageIndex==1}}" bind:showWindow="showWindow" id="teacherFile"></teacherFile>
         <teacherFault wx:if="{{currPageIndex==2}}"></teacherFault>
         <myInfo wx:if="{{currPageIndex==3}}"></myInfo>
+
     </view>
 
-    <!-- 根据选项卡选择的index显示界面 -->
-    <!-- 选项卡tab -->
-    <tabBar bind:selectItemIndex="selectItemIndex" tabItemJson="{{tabJson}}" initTabIndex="{{0}}" canChangeIndex="{{canChangeIndex}}"></tabBar>
-    <!-- 选项卡tab -->
-</view>
+
+
+
+
+    <view>
+        <!-- 根据选项卡选择的index显示界面 -->
+        <!-- 选项卡tab -->
+        <tabBar bind:selectItemIndex="selectItemIndex" tabItemJson="{{tabJson}}" initTabIndex="{{0}}" canChangeIndex="{{canChangeIndex}}"></tabBar>
+        <!-- 选项卡tab -->
+
+    </view>
+</view>
+
+<!--文件夹弹出框-->
+<fileBottomPop id="popupwindow" style="position: absolute; left: 0;" bind:fileDel="fileDel"></fileBottomPop>
+<!--文件夹弹出框-->

miniprogram/utils/TimeUtil.ts

@@ -5,7 +5,7 @@ export const TimeUtil = {
 }
 
 function FormatDate(strDate: any, strFormat?: any) {
-    if (!strDate) return;
+    if (!strDate) return 'strDate==null';
     if (!strFormat) strFormat = "yyyy-MM-dd"
     switch (typeof strDate) {
         case "string":

miniprogram/utils/restful.ts

@@ -65,11 +65,11 @@ const interfaces = {
     //根据故障ID获取故障详情(后面拼接ID)
     getFaultInfoByDevId: '/tch/fault/',
 
-    //开始上课（创建文件库）(获取文件库get方法)
+    //开始上课（创建文件库）(获取文件库get方法)(删除文件delete方法)
     createLess: '/tch/lesson/',
 
-    //获取文件夹所有文件接口（拼接ID）
-    getDocumentFile:'/tch/document',
+    //获取文件夹所有文件接口（拼接ID）(删除文件delete方法)
+    getDocumentFile: '/tch/document',
     //#endregion
 
 
@@ -134,6 +134,31 @@ function uploadFile(url: String, filePath: string, fileName: string, formData: a
     return promise;
 }
 
+
+function downLoadFile(url: string, onProgress: any) {
+    let promise = new Promise((resolve, reject) => {
+        let download = wx.downloadFile({
+            url: url,
+            success(res: any) {
+                resolve(res)
+                // const data = res.data
+                //do something
+            },
+            fail(res: any) {
+                reject(res)
+            }
+        })
+        download.onProgressUpdate((res) => {
+            onProgress(res)
+            console.log('下载进度', res.progress)
+            console.log('已经下载的数据长度', res.totalBytesWritten)
+            console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
+        })
+    })
+
+    return promise;
+}
+
 export const httpUtil = {
     httpData,
     interfaces,
@@ -154,5 +179,8 @@ export const httpUtil = {
     },
     wxUploadFile: function (url: String, filePath: string, fileName: string, formData: any) {
         return uploadFile(url, filePath, fileName, formData)
+    },
+    wxDownLoadFile: function (url: string, onProgress: any) {
+        return downLoadFile(url, onProgress)
     }
 }