<!--pages/homework/index.wxml-->
<wxs module="m1">
function fn(arr, arg) {
var result = {
indexOf: false,
toString: ''
}
result.indexOf = arr.indexOf(arg) > -1;
result.toString = arr.join(",");
return result;
}
module.exports.fn = fn;
</wxs>
<view class="homeworkpage">
<view class="h-header">
<view class="title">{{homeworkinfo.assignmentName}}</view>
<view class="pjname">{{homeworkinfo.projectName}}</view>
<view class="time">
<image src="/images/homework/timeclock.png"></image>
<text>截止时间</text>
<text class="timebox">{{fininshtime}}</text>
</view>
<view class="work-info">
<text>上传次数 {{homeworkinfo.count}}</text>
<text>合格分 {{homeworkinfo.passScore}}</text>
</view>
</view>
<!-- 作业要求 -->
<view class="h-mid">
<text class="title">作业要求</text>
<image src="/images/course/pickdown.png" class="arrow" wx:if="{{arrowup==1}}" bindtap="arrowtap"></image>
<image src="/images/course/pickup.png" class="arrow" wx:else bindtap="arrowtap"></image>
<view class="content" wx:if="{{arrowup==1}}">
<text>{{homeworkinfo.assignmentContent}}</text>
<view wx:for="{{homeworkinfo.fileList}}" class="homework-filelist">
<image src="{{item.ossUrl}}" wx:if="{{m1.fn(uptypeListpic,item.suffix).indexOf}}" mode="widthFix"></image>
<video src="{{item.ossUrl}}" wx:if="{{m1.fn(uptypeList,item.suffix).indexOf}}"></video>
</view>
</view>
</view>
<!-- 没有机会提交了 -->
<view class="noOpoCommit" wx:if="{{(homeworkinfo.finishTime<nowtime)&&(homeworkinfo.amendable==0)}}">
<view>
<image src="/images/homework/book.png"></image>
</view>
<text>下次记得按时提交哦</text>
</view>
<!-- 提交作业 -->
<view class="h-foot" wx:if="{{homeworkinfo.finishTime>nowtime||homeworkinfo.amendable}}">
<view class="title">提交作业</view>
<view class="box">
<textarea class="text" placeholder="文字说明...({{homeworkinfo.answerCharaterNumMax}}字以内)" maxlength="{{homeworkinfo.answerCharaterNumMax}}" bindinput="worktextchange" value="{{wordinfo}}"></textarea>
<text class="textnumber">{{writenum}}/{{homeworkinfo.answerCharaterNumMax}}</text>
</view>
<view class="uploadList">
<view class="uploadItem {{item.isTouchMove ? 'touch-move-active' : ''}}" wx:for="{{filevolistshow}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove">
<view class="uploadItem-content">
<view class="item-image">
<image src="{{item.filePath}}"></image>
</view>
<view class="item-right-box">
<view class="item-filename">{{item.fileName}}</view>
<progress percent="{{item.uploadProgress}}" active stroke-width="3" duration="1" wx:if="{{item.uploadSuccess==0}}" bindactiveend="uploadEnd" />
<text class="uploading-text" wx:if="{{item.uploadSuccess==0}}">上传中</text>
<text class="uploadsuccess-text" wx:if="{{item.uploadSuccess}}">上传成功</text>
<text class="uploading-size">{{item.size}}</text>
</view>
</view>
<view class="uploadItem-del" catchtap="uploadItemdel" data-index="{{index}}">
<image src="/images/homework/delfile.png"></image>
</view>
</view>
<view class="delAllFile" wx:if="{{filevolistshow.length>0}}" bindtap="delAllList">
<image src="/images/homework/delAll.png"></image>
<text>全部删除</text>
</view>
</view>
<view class="add-btn-list">
<view class="add-file" bindtap="addfiletap" data-type="0" >
<view class="heng"></view>
<view class="shu"></view>
</view>
</view>
<view class="uptips">
点击“+”添加图片、视频、音频,每个文件最大为50M,每次最多上传{{homeworkinfo.answerAttachmentNumMax}}个
</view>
<view class="submit" bindtap="submithomework">提交</view>
</view>
</view>
// pages/homework/index.js
//获取应用实例
const app = getApp()
const publicApi = require('../../../commen/api.js');
const requestApi = require('../../../commen/requestApi.js') //引入util.js,地址根据自己的地址填写;
const router = require('../../../router/index.js');
var util = require("../../../utils/util.js");
let uptypeList=["mp3","mp4","avi","wav","rmvb","png","jpg","jpeg","gif"]
Page({
/**
* 页面的初始数据
*/
data: {
assignmentId: '',
writenum: 0,
arrowup: 1,
homeworkinfo: '',
fininshtime: '',
wordinfo: '',
ossData: '',
filevoslist: [],
filevolistshow:[],
uploadProgress: '',
uploadSuccess:0,
nowtime:new Date().getTime(),
uptypeList:["mp4","avi","wav","rmvb"],
uptypeListpic:[".png",".jpg","jpeg","gif"]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var params = JSON.parse(decodeURIComponent(options.encodedData));
this.setData({
assignmentId: params.homeid
})
this.gethomeworkinfo();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
gethomeworkinfo: function () {
var that = this;
app.requestByGet(
publicApi.getHomeworkDetail, {
assignmentId: this.data.assignmentId
},
(res => {
if (res.data.code == "1000") {
var ft = util.formatTimeTwo(res.data.data.finishTime, "Y-M-D h:m:s");
if (new Date(ft) > new Date("2025-01-01 00:00:00")) {
ft = "长期有效"
}
that.setData({
homeworkinfo: res.data.data,
fininshtime: ft
})
}
})
)
},
arrowtap: function () {
this.data.arrowup = !this.data.arrowup;
this.setData({
arrowup: this.data.arrowup
})
},
worktextchange: function (e) {
console.log(e.detail.value.length)
this.data.writenum = e.detail.value.length;
this.setData({
writenum: this.data.writenum,
wordinfo: e.detail.value
})
},
beforeUpload: function () {},
progressFunc: function () {},
completeFunc: function () {},
//手指触摸动作开始 记录起点X坐标
touchstart: function (e) {
//开始触摸时 重置所有删除
this.data.filevolistshow.forEach(function (v, i) {
if (v.isTouchMove)//只操作为true的
v.isTouchMove = false;
})
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
filevolistshow: this.data.filevolistshow
})
},
//滑动事件处理
touchmove: function (e) {
var that = this,
index = e.currentTarget.dataset.index,//当前索引
startX = that.data.startX,//开始X坐标
startY = that.data.startY,//开始Y坐标
touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
//获取滑动角度
angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
that.data.filevolistshow.forEach(function (v, i) {
v.isTouchMove = false
//滑动超过30度角 return
if (Math.abs(angle) > 30) return;
if (i == index) {
if (touchMoveX > startX) //右滑
v.isTouchMove = false
else //左滑
v.isTouchMove = true
}
})
//更新数据
that.setData({
filevolistshow: that.data.filevolistshow
})
},
/**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
//删除事件
uploadItemdel: function (e) {
this.data.filevolistshow.splice(e.currentTarget.dataset.index, 1);
this.data.filevoslist.splice(e.currentTarget.dataset.index, 1);
this.setData({
filevolistshow: this.data.filevolistshow,
filevoslist:this.data.filevoslist
})
},
delAllList:function(){
this.setData({
filevolistshow: [],
filevoslist:[]
})
},
//ossData
addfiletap: function (e) {
var id= e.currentTarget.dataset.type;
if(this.data.filevoslist.length>=this.data.homeworkinfo.answerAttachmentNumMax){
wx.showToast({
title: '文件个数已达上限!',
icon:"none",
duration:2000
})
return;
}
app.requestByGet(
publicApi.aliyunUpload, {
needTranscode: true,
type: 2
}, (res => {
this.setData({
ossData:res.data.data
})
this.beginUpload(id);
})
)
},
resultItemName(name) {
let nameArr = name.split(".");
let onlyNameArr = nameArr.filter((item, index) => {
return index < nameArr.length - 1;
});
let onlyNameStr = onlyNameArr.join(".");
if (onlyNameStr.length > 10) {
return onlyNameStr.slice(0, 10) + "..." + nameArr[nameArr.length - 1];
} else {
return name;
}
},
itemFileSize(size) {
if (size < 1024) {
return size + "B"
} else if (size < 1048576) {
return (size / 1024).toFixed(2) + "KB"
} else {
return (size / 1048576).toFixed(2) + "M"
}
},
chooseImgfile(){
var that = this;
// wx.chooseImage({
// count: 1, // 最多可以选择的图片张数,默认9
// sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
// sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
// success: function(res){
// console.log(res);
// that.uploadTask(res);
// },
// fail: function() {
// wx.showToast({
// title: 'fail',
// })
// },
// complete: function() {
// }
// })
wx.chooseMedia({
count: 1,
mediaType: ['image','video'],
sourceType: ['album', 'camera'],
maxDuration:60,
camera: 'back',
success(res) {
console.log(res.tempFiles.tempFilePath)
console.log(res.tempFiles.size)
that.uploadTask(res);
}
})
},
chooseVideoFile(){
wx.chooseVideo({
sourceType: ['album','camera'],
maxDuration: 60,
camera: 'back',
success(res) {
console.log(res)
},
fail(){console.log("errror")}
})
},
//开始上传文件
beginUpload: function (type) {
this.setData({
uploadProgress:0,
uploadSuccess:0
})
this.chooseImgfile()
},
uploadTask(res){
var param = JSON.parse(this.data.ossData);
var that = this;
var filevolist = this.data.filevoslist;
var filevolistshow =this.data.filevolistshow;
console.log(param)
var filesize = that.itemFileSize(res.tempFiles[0].size);
var tempFilePaths = res.tempFiles[0].tempFilePath;
var tempFiletype = tempFilePaths.split(".")[tempFilePaths.split(".").length - 1];
var tempFilename = '附件'+(filevolist.length+1)+'.'+tempFiletype;
console.log(tempFiletype)
console.log(res)
var osstempFilename = requestApi.random_fileName(30) + '.' + tempFiletype;
var fileinfo = {
fileName: tempFilename,
ossUrl: param.host + "/"+ param.dir + "/"+ osstempFilename,
size: filesize,
suffix: '.' + tempFiletype,
statusCode: "success"
}
var fileinfoShow= {
fileName:that.resultItemName(tempFilename),
filePath:"",
size: filesize,
suffix: '.' + tempFiletype,
uploadProgress:0,
uploadSuccess:0,
isTouchMove:false
};
if(that.data.uptypeList.indexOf(tempFiletype)>-1){
fileinfoShow.filePath = res.tempFiles[0].thumbTempFilePath
}
else{
fileinfoShow.filePath = tempFilePaths
}
//页面显示 文件信息
filevolist.push(fileinfo);
filevolistshow.push(fileinfoShow);
that.setData({
filevoslist:filevolist,
filevolistshow:filevolistshow
})
console.log(that.data.filevoslist)
if (filesize / 1024 > 51200) {
wx.showToast({
title: '文件不能大于50M',
duration: 1000
})
return;
}
var filedata = {
'name': osstempFilename,
'Filename': param.dir + "/" + osstempFilename,
'key': param.dir + "/" + osstempFilename,
'policy': param.policy,
'OSSAccessKeyId': param.accessid,
'success_action_status': "200",
'signature': param.signature,
};
console.log(filedata)
var uploadTask = wx.uploadFile({
url: param.host,
header: {
'content-type': 'multipart/form-data'
},
formData: filedata,
filePath: tempFilePaths,
name: 'file',
success: function (res) {
//进度变100
var info = that.data.filevolistshow;
info[info.length-1].uploadProgress=100;
that.setData({
filevolistshow:info
})
wx.showToast({
title: "上传成功",
icon: 'success',
duration: 1000
})
},
fail: function ({
errMsg
}) {
console.log('upladImage fail, errMsg is: ', errMsg)
wx.showToast({
title: "上传失败",
duration: 1000
})
},
})
uploadTask.onProgressUpdate((res) => {
console.log('上传进度', res.progress + " " + new Date());
})
},
uploadEnd(){
//上传成功标志置1
var info = this.data.filevolistshow;
info[info.length-1].uploadSuccess=1;
this.setData({
filevolistshow:info
})
console.log(info)
},
//提交作业
submithomework: function () {
var that = this;
if(that.data.filevoslist.length==0&&that.data.wordinfo.length==0){
wx.showToast({
title: '您未填写内容或上传任何内容',
icon:"none",
duration:2000
})
return;
}
app.requestByPost(
publicApi.submitHomework, {
assignmentId: this.data.assignmentId,
source: 1,
fileVos: that.data.filevoslist,
content: that.data.wordinfo
}, (res => {
wx.showToast({
title: '提交成功',
})
router.push({
name:"homeworkSubResDir",
data:{
homeid:that.data.assignmentId
}
})
})
)
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})