<style scoped>
.root-function{
width: 100%;
height: 100%;
}
.upload-cover{
width: 252px;
height:164px;
border: 1px dashed #ccc;
border-radius: 4px;
cursor: pointer;
display:flex;
justify-content: center;
align-items: center;
}
.upload-cover:hover {
border: 1px dashed #63a7eb;
}
.demo-upload-list{
display: inline-block;
width: 252px;
height: 164px;
line-height: 100px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
margin-right: 4px;
}
.demo-upload-list img{
width: 100%;
height: 100%;
}
.demo-upload-list-cover{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
display: block;
}
.demo-upload-list-cover i{
position: absolute;
top:5px;
right:5px;
color: #fff;
font-size: 5px;
cursor: pointer;
margin: 0 2px;
}
.modelBody{
overflow: auto;
padding: 0 20px;
height: 320px;
}
.avatar-box{
width: 260px;
height: 260px;
float: left;
background-color: #eeeeee;
}
.privew-box{
float: right;
}
.large-box{
width: 252px;
height: 164px;
margin-bottom: 15px;
overflow: hidden;
border: 1px solid #f7f7f7;
background-color: #eeeeee;
}
.small-box{
width: 50px;
height: 50px;
margin-bottom: 15px;
margin-top:30px;
}
.large_img{
width: 252px;
height: 164px;
}
</style>
<template>
<div class="root-function">
<div class="demo-upload-list" v-if="option.img">
<img :src="option.img" :style="previews.img">
<div class="demo-upload-list-cover" @click="remove()">
<Icon type="close" @click.native="remove"></Icon>
</div>
</div>
<div class="upload-cover" @click="showEditModel" v-if="!option.img">
<Icon type="icon iconfont icon-wuyebaoxiudan" size="25" style="color:#c3cbd6;"></Icon>
</div>
<!-- <EditCover ref="EditCover" :course="course"></EditCover> -->
<bModal v-model="isShow" title="裁切封面图" size="small" @on-cancel="cancel">
<div class="modelBody">
<div class="avatar-box" v-if="isUploadImg">
<vueCropper
ref="cropper"
:img = "option.img"
:outputSize = "option.size"
:outputType = "option.outputType"
:info = "option.info"
:canScale = "option.canScale"
:autoCrop = "option.autoCrop"
:fixed = "option.fixed"
:fixedNumber = "option.fixedNumber"
:autoCropWidth = "option.autoCropWidth"
:autoCropHeight = "option.autoCropHeight"
:fixedBox = "option.fixedBox"
@realTime="realTime"
></vueCropper>
</div>
<div class="avatar-box" v-else>
<img v-if="!option.img == ''" :src="option.img" :style="{'height':'260px','width':'260px'}">
</div>
<div class="privew-box" >
<div>封面图预览</div>
<div class="large-box show-preview" >
<div v-if="isUploadImg">
<img class="staff_portrait large_img" :src="option.img" :style="previews.img">
</div>
<div v-else>
<img v-if="!option.img == ''" class="staff_portrait large_img" :src="option.img" :style="previews.img">
</div>
</div>
<div class="small-box ">
<Upload
ref="upload"
:format="['jpg','gif','png']"
:show-upload-list = "false"
:multiple = "false"
:max-size="1024"
:headers="headers"
:on-format-error="handleFormatError"
:on-exceeded-size="handleExceededSize"
:on-success="handleSuccess"
>
<!--:action="actionURL"-->
<Button size="small" >上传封面图</Button>
</Upload>
</div>
</div>
</div>
<div slot="footer">
<Button @click="cancel" >取消</Button>
<Button type="primary" @click="confirm">保存</Button>
</div>
</bModal>
<bModal v-model="dialogMessage.show" :title="dialogMessage.title" size="x-small" @on-ok="handleRemove" :mask-closable="false" class-name="visitIndex">
<div style="width: 100%; height: 88px;">
<span style="font-size: 15px; padding-right:20px; width: 100%; line-height:88px; text-align:center; float:left;">{{dialogMessage.message}}</span>
</div>
</bModal>
</div>
</template>
<script>
//import systemConfig from '../../config/config'
import Edit from './cover-editor.vue'
import vueCropper from 'vue-cropper'
console.log('------');
console.log(vueCropper);
export default {
props:{
news:{
type:Object,
required:true,
default:function(){
return {
}
}
},
action:{
type:String,
required:true
}
},
data () {
return {
imgName: '',
coverUrl:'',
isUploadImg:false,
isShow:false,
fileName:'',
//TODO
//actionURL: SEDU.Util.getServerUrl(systemConfig) + "/basis/attachments/files",
headers: {
//TODO
//[SEDU.Util.token_key]: SEDU.Util.getCookie(SEDU.Util.token_key),
//[SEDU.Util.tenant_key]: SEDU.Util.getCookie(SEDU.Util.tenant_key),
},
dialogMessage:{
show:false,
title:"删除",
message:"是否删除图片？",
data:{}
},
option:{
img:'',
size:1,
info:true,
canScale:true,
outputType:'png',
autoCrop:true,
autoCropWidth:252,
autoCropHeight:164,
fixed:true,
fixedBox:true,
fixedNumber:[1.53,1],
},
originalImg:'',
previews:{},
fileId:''
}
},
methods: {
handleRemove (e) {
this.option.img = "";
this.news.img="";
},
initUrl: function (fileId) {
return null;
//TODO
// SEDU.Util.getServerUrl(systemConfig) + '/basis/attachments/files/preview/single/' + fileId + "?token=" + SEDU.Util.getCookie(SEDU.Util.token_key)
},
handleBeforeUpload () {
},
remove(){
this.dialogMessage.show=true;
},
show(news){
this.isShow = true
// this.previews = {};
this.isUploadImg = false;
if(news.img){
this.originalImg = news.img;
}
},
realTime (data) {
this.previews = data;
},
confirm(){
this.$refs.cropper.getCropData((data) => {
var imgData = data.substring(22);
var data = {
belongId : this.fileId,
imgData : imgData,
}
//TODO
// SEDU.Util.invokeServer({
// path:'/news/coverUpload',
// contentType:'application/json',
// data:JSON.stringify(data),
// type:'POST'
// }).then((data)=>{
// // this.option.img = '';
// this.news.img = this.option.img;
// this.isShow = false;
// // this.$emit('refresh',data);
// });
});
},
cancel(){
this.option.img = '';
this.isShow = false;
},
handleSuccess(response, file, fileList){
this.isUploadImg = true;
this.fileName = response;
this.option.img = this.initUrl(file.response);
this.fileId = response;
},
handleFormatError(file){
this.$Message.error('图片格式不正确');
},
handleExceededSize(file){
this.$Message.error('图片大小不能超过1M');
},
showEditModel:function(){
this.show(this.news);
}
},
mounted () {
// console.log(this.course);
},
watch: {
'news': function (newValue) {
this.option.img = newValue.img;
}
},
components:{
Edit,
'vueCropper': vueCropper.vueCropper
}
}
</script>