Skip to content

P
pica.cloud.web-education-admin
提交 d2298748 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

裁剪问题等

上级 e464163b
展开全部 显示空白字符变更
内嵌 并排
正在显示 包含 5116 行增加 和 86 行删除
index.html
浏览文件 @ d2298748
...@@ -20,5 +20,6 @@ ...@@ -20,5 +20,6 @@
<script src="https://unpkg.com/qiniu-js@2.2.0/dist/qiniu.min.js"></script> <script src="https://unpkg.com/qiniu-js@2.2.0/dist/qiniu.min.js"></script>
<script src="https://cdn.bootcss.com/downloadjs/1.4.8/download.min.js"></script> <script src="https://cdn.bootcss.com/downloadjs/1.4.8/download.min.js"></script>
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script> <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-5.1.1.min.js"></script>
</body> </body>
</html> </html>
src/components/common/cropper.two copy.vue 0 → 100755
浏览文件 @ d2298748
<template>
<div class="rc-cropper" v-if="originImg">
<el-row>
<el-col :span="12">
<div class="rc-cropper__canvasCrop2">
<img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/>
<div class="rc-cropper__iconCrop">
<el-tooltip content="确认裁剪" placement="right" v-if="cropper">
<el-button type="success" size="mini" @click="sureCropper()"><i class="el-icon-check"></i></el-button>
</el-tooltip>
</div>
</div>
</el-col>
<el-col :span="10">
<div class="rc-cropper__previewImg">
<img :src="previewImg" id="previewImg"/>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
name: 'rc-cropper2',
props: {
cropOption: {
type: Object,
required: true,
default: () => {}
},
originImg: {
required: true
},
previewImg: {
type: String
}
},
data () {
return {
cropper: null,
croppShow: false
}
},
mounted () {
this.drawImg()
},
methods: {
// 在canvas上绘制图片
drawImg () {
const _this = this
this.$nextTick(() => {
let canvas = document.getElementById(this.originImg)
if (canvas) {
canvas.width = 720
canvas.height = 480
let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
let img = new Image()
img.crossOrigin = 'Anonymous'
img.src = this.originImg
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
_this.initCropper()
}
}
})
},
// 显示裁剪框
initCropper () {
this.croppShow = true
this.cropper = new Cropper(this.$refs.canvas, {
checkCrossOrigin: true,
viewMode: 3,
zoomOnWheel: false, // 是否可以通过移动鼠标来放大图像
aspectRatio: 3 / 2,
ready: () => {
this.cropper.setData({
x: this.cropOption.offset_x,
y: this.cropOption.offset_y,
width: this.cropOption.width,
height: this.cropOption.height
})
}
})
// this.cropper = cropper
},
// 确认裁剪
sureCropper () {
let _this = this
const cropParam = this.cropper.getData()
this.cropper.getCroppedCanvas().toBlob(function (blob) {
let oFileReader = new FileReader()
oFileReader.onloadend = function (e) {
let base64 = e.target.result
_this.$emit('getCropImg', base64, cropParam)
}
oFileReader.readAsDataURL(blob)
}, 'image/jpeg')
}
}
}
</script>
<style >
.rc-cropper {
position: relative;
margin-top: 20px;
}
/* img {
width: 100%;
height: 100%;
} */
.rc-cropper__canvasCrop2 {
width: 720px;
height: 480px;
}
.rc-cropper__iconCrop {
position: absolute;
left: 45%;
top: 0%;
}
.el-tooltip {
margin: 20px 4px;
display: block;
z-index: 10000;
}
.rc-cropper__previewImg {
width: 600px;
height: 400px;
}
</style>
src/components/common/cropper.two.vue
浏览文件 @ d2298748
<template> <template>
<div class="rc-cropper" v-if="originImg"> <div class="rc-cropper" v-if="originImg">
<el-row> <el-row>
<el-col :span="12"> <el-col>
<div class="rc-cropper__canvasCrop2"> <div class="rc-cropper__canvasCrop2">
<img :src="originImg" v-if="!cropper"> <img :src="originImg" v-if="!cropper">
<canvas :id="originImg" ref="canvas"/> <canvas :id="originImg" ref="canvas"/>
...@@ -12,11 +12,11 @@ ...@@ -12,11 +12,11 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="10"> <!-- <el-col :span="10">
<div class="rc-cropper__previewImg"> <div class="rc-cropper__previewImg">
<img :src="previewImg" id="previewImg"/> <img :src="previewImg" id="previewImg"/>
</div> </div>
</el-col> </el-col> -->
</el-row> </el-row>
</div> </div>
</template> </template>
...@@ -115,8 +115,8 @@ export default { ...@@ -115,8 +115,8 @@ export default {
} */ } */
.rc-cropper__canvasCrop2 { .rc-cropper__canvasCrop2 {
width: 720px; width: 900px;
height: 480px; height: 760px;
} }
.rc-cropper__iconCrop { .rc-cropper__iconCrop {
......
src/components/education/custom-resource/edit-course-dialog.vue
浏览文件 @ d2298748
...@@ -34,13 +34,9 @@ ...@@ -34,13 +34,9 @@
></el-input> ></el-input>
<span class="word-num"> <span class="word-num">
{{(formData.courseName || '').replace(/\s+/g,"").length}}/25 {{(formData.courseName || '').replace(/\s+/g,"").length}}/25
<!-- <span class="edit-wrapper">
<img class="edit-img" src="../../../assets/image/phrase3/icon-pz.png" />修改信息
</span> -->
</span> </span>
<div v-show="needShowAuditMsg && formData.courseNameCheck" class="error"> <div v-show="needShowAuditMsg && formData.courseNameCheck" class="error">
<span>错误信息错误信息错误信息错误信息错误信息错误信息息</span> <span>{{formData.courseNameCheck}}</span>
<span class="cancle">X</span>
</div> </div>
</el-col> </el-col>
</el-form-item> </el-form-item>
...@@ -58,7 +54,7 @@ ...@@ -58,7 +54,7 @@
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="开放范围：" prop="shareType" class="valid-msg"> <el-form-item label="开放范围：" prop="shareType">
<el-radio-group v-model="formData.shareType"> <el-radio-group v-model="formData.shareType">
<el-radio :label="1">机构共享</el-radio> <el-radio :label="1">机构共享</el-radio>
</el-radio-group> </el-radio-group>
...@@ -66,7 +62,7 @@ ...@@ -66,7 +62,7 @@
<div class="basic-item-icon"> <div class="basic-item-icon">
<span class="require">*</span> <span class="require">*</span>
<el-form-item label="课程视频：" prop="range"> <el-form-item label="课程视频：" prop="range" >
<el-upload <el-upload
class="upload-video" class="upload-video"
action="#" action="#"
...@@ -79,7 +75,7 @@ ...@@ -79,7 +75,7 @@
<div slot="tip" class="el-upload__tip"> <div slot="tip" class="el-upload__tip">
<span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span> <span class="upload-tips">只支持MP4格式，课程视频最多上传100个，单文件最大2G</span>
<ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list"> <ul v-show="formData.courseCustomChapterModels[0].courseCustomLectureModelList.length" class="custom-list">
<li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index"> <li v-for="(lecture, index) in formData.courseCustomChapterModels[0].courseCustomLectureModelList" :key="index" class="valid-msg">
<ul class="video"> <ul class="video">
<li> <li>
<span class="title">视频{{index + 1}}</span> <span class="title">视频{{index + 1}}</span>
...@@ -107,6 +103,9 @@ ...@@ -107,6 +103,9 @@
{{(lecture.name || '').replace(/\s+/g,"").length}}/25 {{(lecture.name || '').replace(/\s+/g,"").length}}/25
</span> </span>
</div> </div>
<div v-show="needShowAuditMsg && !formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck" class="error-video">
<span>11{{formData.courseCustomChapterModels[0].courseCustomLectureModelList[index].nameCheck}}</span>
</div>
</li> </li>
<span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span> <span v-show="needShowUploadProcess" class="upload-process" :style="{'width': (uploadProgress/100 * 340) + 'px'}"></span>
</ul> </ul>
...@@ -272,7 +271,19 @@ ...@@ -272,7 +271,19 @@
</el-dialog> </el-dialog>
<DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet> <DialogComponet :dialogObj="dialogObj" @hide="hideCancleTips" @confirm="dialogObj.visible=false"></DialogComponet>
<PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo> <PreviewVideo :dialogVisible="isPreviewVideo" :videoUrl="videoUrl" @close="isPreviewVideo=false"></PreviewVideo>
<cropper-two v-if="showCropper" :cropOption="cropOption" @getCropImg="getCropImg(arguments)" :originImg="slide2.oriUrl" :previewImg="slide2.preUrl"/>
<el-dialog
title="拒绝原因"
:visible="showCropper"
width="1000px"
center>
<cropper-two
:cropOption="cropOption"
@getCropImg="getCropImg(arguments)"
:originImg="slide2.oriUrl"
:previewImg="slide2.preUrl"
/>
</el-dialog>
<!-- <button @click="previewVideoAction">test video</button> --> <!-- <button @click="previewVideoAction">test video</button> -->
</div> </div>
</template> </template>
...@@ -305,14 +316,14 @@ export default { ...@@ -305,14 +316,14 @@ export default {
}, },
showCropper: false, showCropper: false,
cropOption: { cropOption: {
offset_x: 30, offset_x: 10,
offset_y: 40, offset_y: 10,
width: 600, width: 750,
height: 400 height: 420
}, },
step: 1, step: 1,
needCheckField: false, needCheckField: false,
needShowAuditMsg: false, needShowAuditMsg: true,
needShowUploadProcess: false, needShowUploadProcess: false,
disabled: false, disabled: false,
formDataBase: { formDataBase: {
...@@ -439,10 +450,10 @@ export default { ...@@ -439,10 +450,10 @@ export default {
} }
], ],
limitModel: { limitModel: {
maxLimitOneVideoSize: 0, maxLimitOneVideoSize: 2147483648,
maxLimitVideoCount: 0, maxLimitVideoCount: 100,
maxStorageSpace: 0, maxStorageSpace: 5368709120,
usedStorageSpace: 0 usedStorageSpace: 1021842989
} }
}, },
uploadProgress: 0, uploadProgress: 0,
...@@ -496,7 +507,8 @@ export default { ...@@ -496,7 +507,8 @@ export default {
...mapActions(['setKind']), ...mapActions(['setKind']),
getCropImg (argument) { getCropImg (argument) {
console.log(argument); this.showCropper = false;
console.log(argument[0], '#####', argument[1]);
this.slide2.preUrl = argument[0] this.slide2.preUrl = argument[0]
this.cropData = argument[1] this.cropData = argument[1]
}, },
...@@ -624,17 +636,26 @@ export default { ...@@ -624,17 +636,26 @@ export default {
// 上传视频（mp4） // 上传视频（mp4）
beforeUploadVideo(file) { beforeUploadVideo(file) {
// orgCourseInfo.limitModel: {
// maxLimitOneVideoSize: 2147483648,
// maxLimitVideoCount: 100,
// maxStorageSpace: 5368709120,
// usedStorageSpace: 1021842989
// }
console.log(file); console.log(file);
const isMP4 = file.type === "video/mp4"; const isMP4 = file.type === "video/mp4";
const isLt = file.size / 1024 / 1024 / 1024 < 2; const isGt = file.size > this.orgCourseInfo.limitModel.maxLimitOneVideoSize;
if (!isLt) { const isGtMaxNum = this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.length >= 100;
const usedGtMaxStore = this.orgCourseInfo.limitModel.usedStorageSpace + file.size > this.orgCourseInfo.limitModel.maxStorageSpace;
if (isGt || !isMP4 || isGtMaxNum) {
this.$message.error("视频不符合规范，请根据规范上传视频"); this.$message.error("视频不符合规范，请根据规范上传视频");
return; return;
} }
if (!isMP4) { if(usedGtMaxStore) {
this.$message.error("视频不符合规范，请根据规范上传视频"); this.$message.error("个人存储空间已不够上传此视频");
} else { return;
// openLoading(vm); }
// 直接上传
this.needShowUploadProcess = true; this.needShowUploadProcess = true;
doUpload( doUpload(
vm, vm,
...@@ -660,7 +681,6 @@ export default { ...@@ -660,7 +681,6 @@ export default {
vm.uploadProgress = 0; vm.uploadProgress = 0;
vm.insertResourceAction(uploadResourceParam); vm.insertResourceAction(uploadResourceParam);
}); });
}
}, },
// 上传资源（视频）后，生存对应的节 // 上传资源（视频）后，生存对应的节
...@@ -676,6 +696,7 @@ export default { ...@@ -676,6 +696,7 @@ export default {
contentCheck: "", contentCheck: "",
resourceModel: {} resourceModel: {}
} }
this.orgCourseInfo.limitModel = res.data.limitModel;
lectureObj.resourceModel = res.data && res.data.resourceModelList[0]; lectureObj.resourceModel = res.data && res.data.resourceModelList[0];
this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj); this.formData.courseCustomChapterModels[0].courseCustomLectureModelList.push(lectureObj);
} }
...@@ -693,7 +714,8 @@ export default { ...@@ -693,7 +714,8 @@ export default {
more: "attachmentMore1", more: "attachmentMore1",
show: "uploadImgMessage" show: "uploadImgMessage"
}; };
vm.beforeAvatarUpload(file, fileLimit); vm.beforeAvatarUpload2(file, fileLimit);
// vm.beforeAvatarUpload(file, fileLimit);
}, },
//上传图片校验 //上传图片校验
...@@ -892,44 +914,65 @@ export default { ...@@ -892,44 +914,65 @@ export default {
// 上传课程封面图片 // 上传课程封面图片
beforeUpload1(file) { beforeUpload1(file) {
const isLt50kb = file.size / 1024 < 50; // const isLt50kb = file.size / 1024 < 50;
// if (!isLt50kb) { const isJPG = file.type === 'image/jpeg'
// this.$message.error("上传的图片大小不能超过 50kb"); if(!isJPG) {
// return; this.$message.error('只支持jpeg格式')
// } return;
vm.doUploadOSS(file, 1); //评价图片 }
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 740 || _this.height != 420) {
vm.$message.info("上传图片尺寸大小不合适，请重新上传")
}else {
vm.doUploadOSS(file, 1); //封面图片
}
}
}
}, },
// 上传讲师图片 // 上传讲师图片
beforeUpload2(file) { beforeUpload2(file) {
const isLt50kb = file.size / 1024 < 50; // const isLt50kb = file.size / 1024 < 50;
// if (!isLt50kb) { const isJPG = file.type === 'image/jpeg'
// this.$message.error("上传的图片大小不能超过 50kb"); if(!isJPG) {
// return; this.$message.error('只支持jpeg格式')
// } return;
this.doUploadOSS(file, 2); //web端课程覆盖图片 }
var _img = new FileReader()
_img.readAsDataURL(file)
_img.onload = function(theFile) {
let image = new Image()
image.src = theFile.target.result
image.onload = function() {
let _this = this
if(_this.width != 88 || _this.height != 88) {
vm.$message.info("上传图片尺寸大小不合适，请重新上传")
}else {
vm.doUploadOSS(file, 2); //封面图片
}
}
}
}, },
// （调用OSS API）开始上传 // （调用OSS API）开始上传
doUploadOSS(file, index) { doUploadOSS(file, index) {
let self = this; let self = this;
//如果没有选择文件,返回
// if (isEmptyUtils(file)) {
// return;
// }
// self.$message.info("开始上传");
//上传 指定文件名 //上传 指定文件名
ossUpload(self, file, getFilePathForOSS(file), null, null, null). ossUpload(self, file, getFilePathForOSS(file), null, null, null).
then(function(path) { then(function(path) {
let list = [{}]; let list = [{}];
list[0].name = file.name; // list[0].name = file.name;
list[0].url = localStorage.getItem("resource_url") + path; // list[0].url = localStorage.getItem("resource_url") + path;
if (index === 1) { if (index === 1) {
self.fileList1 = Object.assign([], list);
self.model.courseInfoUrl = path;
} else if (index === 2) { } else if (index === 2) {
self.fileList2 = Object.assign([], list);
self.model.appCourseUrl = path;
} }
self.$message.success("上传成功"); self.$message.success("上传成功");
}); });
......
src/style/global.scss
浏览文件 @ d2298748
...@@ -189,4 +189,10 @@ ...@@ -189,4 +189,10 @@
} }
} }
} }
.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
border-color: #449284 !important;
}
.el-input__inner:focus, .el-textarea__inner:focus {
border-color: #449284 !important;
}
src/utils/fetch.js
浏览文件 @ d2298748
...@@ -54,7 +54,7 @@ service.interceptors.request.use(config => { ...@@ -54,7 +54,7 @@ service.interceptors.request.use(config => {
} }
if( process.env.BUILD_ENV == "development" ){ // 本地开发环境 if( process.env.BUILD_ENV == "development" ){ // 本地开发环境
// console.log('环境变量>>>> ', process.env.BUILD_ENV); // console.log('环境变量>>>> ', process.env.BUILD_ENV);
config.headers['token'] = '377D063C4A8448B2847E05074648E77F'; config.headers['token'] = '3F5F01DF814C46E59FF09F3E63A55D18';
// config.headers['token'] = localStorage.getItem('storageToken') // config.headers['token'] = localStorage.getItem('storageToken')
}else{ }else{
config.headers['token'] = localStorage.getItem('storageToken') config.headers['token'] = localStorage.getItem('storageToken')
......
src/utils/oss/ossUtil.js
浏览文件 @ d2298748
...@@ -12,8 +12,13 @@ contentTypeMap.set("xlsx", "application/vnd.openxmlformats-officedocument.spread ...@@ -12,8 +12,13 @@ contentTypeMap.set("xlsx", "application/vnd.openxmlformats-officedocument.spread
// PICA_DEV_APP.service('ossUtil', function ($rootScope, $q) { // PICA_DEV_APP.service('ossUtil', function ($rootScope, $q) {
//获取OSS客户端 //获取OSS客户端
let bucketName = localStorage.getItem("bucketName"); // let bucketName = localStorage.getItem("bucketName");
let endpoint = localStorage.getItem("endpoint"); // let endpoint = localStorage.getItem("endpoint");
let bucketName = 'pica-test-huabei2';
let endpoint = 'oss-cn-beijing.aliyuncs.com';
console.log(bucketName, endpoint);
// //上传状态 // //上传状态
// let status = false; // let status = false;
...@@ -34,8 +39,8 @@ const doOSSAction = () => { ...@@ -34,8 +39,8 @@ const doOSSAction = () => {
//sts服务器 //sts服务器
// let stsUrl = localStorage.getItem("stsUrl") + "/" + localStorage.getItem("token"); // let stsUrl = localStorage.getItem("stsUrl") + "/" + localStorage.getItem("token");
// let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/' + localStorage.getItem("token"); // let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/' + localStorage.getItem("token");
// let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/377D063C4A8448B2847E05074648E77F' let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/D1AA498C1C1C4298B712B3678EF9BD07'
let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/' + localStorage.getItem("token"); // let stsUrl = 'https://dev-api.yunqueyi.com/middle/oss/token/' + localStorage.getItem("token");
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
fetch(stsUrl, {}, 'GET').then(function (result) { fetch(stsUrl, {}, 'GET').then(function (result) {
...@@ -53,11 +58,11 @@ const doOSSAction = () => { ...@@ -53,11 +58,11 @@ const doOSSAction = () => {
console.log('STS临时授权成功'); console.log('STS临时授权成功');
} else { } else {
reject(result); reject(result);
console.error('STS临时授权失败:', result); console.error('STS临时授权失败222:', result);
} }
}).catch(function (error) { }).catch(function (error) {
reject(); reject();
console.error('STS临时授权失败:', error); console.error('STS临时授权失败111:', error);
}); });
}); });
}; };
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或