Skip to content

P
pica.cloud.web-education-admin
提交 a261f444 编写于 作者: 申玉强's avatar 申玉强
浏览文件
操作

视频上传

上级 1649f29c
隐藏空白字符变更
内嵌 并排
正在显示 包含 211 行增加 和 152 行删除
src/views/goods/create-good-new.scss
浏览文件 @ a261f444
.create-shop-wrapper-new{ .create-shop-wrapper-new {
.create-shop-content{ .create-shop-content {
background: #fff; background: #fff;
padding: 10px; padding: 10px;
.step-content { .step-content {
overflow: hidden; overflow: hidden;
height: 60px; height: 60px;
padding: 10px 10px 50px ; padding: 10px 10px 50px;
border-bottom: 1px solid #efefef; border-bottom: 1px solid #efefef;
.title{ .title {
font-size: 13px; font-size: 13px;
color: #449284;
}
}
.word-tip {
color: #e6af7a;
}
.word-show {
color: #449284; color: #449284;
cursor: pointer;
} }
} }
.suitableList-select { .word-tip {
width: 445px; color: #e6af7a;
} }
.el-button--text{ .word-show {
color: #449284; color: #449284;
font-size: 14px; cursor: pointer;
&::after{ }
content: ''; }
.suitableList-select {
width: 445px;
}
.el-button--text {
color: #449284;
font-size: 14px;
&::after {
content: "";
position: relative;
height: 14px;
/*border-right: 1px solid #EBEEF5;*/
border-right: 1px solid #aaaaaa;
padding-right: 10px;
}
&:last-of-type {
&::after {
content: "";
position: relative; position: relative;
width: 1px;
height: 14px; height: 14px;
/*border-right: 1px solid #EBEEF5;*/ border-right: none;
border-right: 1px solid #aaaaaa;
padding-right: 10px;
}
&:last-of-type{
&::after{
content: '';
position: relative;
width: 1px;
height: 14px;
border-right: none;
}
} }
} }
.required-label .el-form-item__label::before {
content: "*";
color: #f56c6c;
margin-right: 4px;
} }
.goods-category,.project-req { .required-label .el-form-item__label::before {
.el-form-item__label::before {
content: "*"; content: "*";
color: #f56c6c; color: #f56c6c;
margin-right: 4px; margin-right: 4px;
} }
.project-tip { .required-label .el-form-item__content .bg-uploader .el-upload{
color: #aaaaaa; width: 100%;
}
.goods-category,
.project-req {
.el-form-item__label::before {
content: "*";
color: #f56c6c;
margin-right: 4px;
}
.project-tip {
color: #aaaaaa;
}
} }
}
.choice-goods { .choice-goods {
.el-form-item__label::before { .el-form-item__label::before {
content: "*"; content: "*";
color: #f56c6c; color: #f56c6c;
margin-right: 4px; margin-right: 4px;
} }
} }
.label-detailimg { .label-detailimg {
.el-form-item__label::before { .el-form-item__label::before {
content: "*"; content: "*";
color: #f56c6c; color: #f56c6c;
margin-right: 4px; margin-right: 4px;
} }
.bg-uploader { .bg-uploader {
.el-upload { .el-upload {
display: flex; display: flex;
} }
} }
} }
.basic-item-icon { .basic-item-icon {
position: relative; position: relative;
.show-goods-table { .show-goods-table {
.del-goods { .del-goods {
color: #449284; color: #449284;
cursor: pointer; cursor: pointer;
} }
} }
.require { .require {
...@@ -92,7 +96,7 @@ ...@@ -92,7 +96,7 @@
top: 11px; top: 11px;
color: #f56c6c; color: #f56c6c;
} }
.error-message{ .error-message {
font-size: 12px; font-size: 12px;
color: #f56c6c; color: #f56c6c;
} }
...@@ -113,12 +117,13 @@ ...@@ -113,12 +117,13 @@
} }
.img-delete { .img-delete {
position: absolute; position: absolute;
left: 0px; left: 50%;
top: 0px; top: 50%;
width: 84px; width: 84px;
height: 100px; height: 100%;
background: #000; background: #000;
opacity: 0.7; opacity: 0.7;
transform: translate(-50%,-50%);
z-index: 999; z-index: 999;
i { i {
...@@ -165,91 +170,91 @@ ...@@ -165,91 +170,91 @@
top: -6px; top: -6px;
left: 130px; left: 130px;
} }
.span-mt-10{ .span-mt-10 {
.edit-img { .edit-img {
width: 20px; width: 20px;
margin-top: 10px; margin-top: 10px;
} }
} }
.p-tips{ .p-tips {
font-size: 13px; font-size: 13px;
color: #8C8C8C; color: #8c8c8c;
line-height: 26px; line-height: 26px;
} }
.part-tit{ .part-tit {
font-size: 14px; font-size: 14px;
padding:20px 0 20px 20px; padding: 20px 0 20px 20px;
} }
.inline{ .inline {
.el-form-item{ .el-form-item {
display: inline-block; display: inline-block;
vertical-align:top; vertical-align: top;
.el-radio__label{ .el-radio__label {
font-size: 12px; font-size: 12px;
} }
} }
} }
.stock-com{ .stock-com {
width: 158px; width: 158px;
height: 32px; height: 32px;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
.sp{ .sp {
display: inline-block; display: inline-block;
float: left; float: left;
color: #fff; color: #fff;
} }
.sp-c{ .sp-c {
line-height: 30px; line-height: 30px;
height: 30px; height: 30px;
width:92px; width: 92px;
text-align: center; text-align: center;
color: #666; color: #666;
border-top:1px solid #449284; border-top: 1px solid #449284;
border-bottom:1px solid #449284; border-bottom: 1px solid #449284;
} }
.sp-l{ .sp-l {
border-right:1px solid #449284; border-right: 1px solid #449284;
} }
.sp-r{ .sp-r {
border-left:1px solid #449284; border-left: 1px solid #449284;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
} }
.sp-l,.sp-r{ .sp-l,
.sp-r {
width: 32px; width: 32px;
text-align: center; text-align: center;
line-height: 32px; line-height: 32px;
font-size: 13px; font-size: 13px;
background: #449284 ; background: #449284;
cursor: pointer; cursor: pointer;
} }
.opac{ .opac {
opacity: 0.5; opacity: 0.5;
} }
} }
.stock-dia{ .stock-dia {
.stock-item{ .stock-item {
padding-bottom: 20px; padding-bottom: 20px;
} }
} }
.fast-opt{ .fast-opt {
font-size: 12px; font-size: 12px;
padding:0 10px; padding: 0 10px;
cursor: pointer; cursor: pointer;
color:#449284 color: #449284;
} }
.file-pics{ .file-pics {
display: inline-block; display: inline-block;
width: 84px; width: 84px;
height: 100px; height: 100px;
float:left; float: left;
margin-right: 15px; margin-right: 15px;
position: relative; position: relative;
} }
.el-input-number__decrease, .el-input-number__increase { .el-input-number__decrease,
.el-input-number__increase {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 1px; top: 1px;
...@@ -262,13 +267,13 @@ ...@@ -262,13 +267,13 @@
font-size: 13px; font-size: 13px;
} }
.el-icon-plus { .el-icon-plus {
color:#ffffff; color: #ffffff;
} }
.el-icon-minus { .el-icon-minus {
color:#ffffff; color: #ffffff;
} }
#introVideoLecture { #introVideoLecture {
height: 140px; height: 140px;
} }
.video-progress { .video-progress {
width: 20%; width: 20%;
...@@ -278,17 +283,17 @@ ...@@ -278,17 +283,17 @@
} }
.label-video { .label-video {
position: relative; position: relative;
.el-button:focus, .el-button:hover { .el-button:focus,
color: #449284; .el-button:hover {
border-color: #449284; color: #449284;
background-color: #ecf5ff; border-color: #449284;
background-color: #ecf5ff;
} }
.dl-video { .dl-video {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 35%; left: 35%;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
} }
} }
.add-goods-dialog { .add-goods-dialog {
...@@ -314,20 +319,20 @@ ...@@ -314,20 +319,20 @@
} }
.add-btn.is-disabled { .add-btn.is-disabled {
background: #fff !important; background: #fff !important;
border: 1px solid #DCDFE6 !important; border: 1px solid #dcdfe6 !important;
color: #606266 !important; color: #606266 !important;
} }
.add-med-dialog { .add-med-dialog {
.medic-goods-max { .medic-goods-max {
.el-input__inner { .el-input__inner {
padding-right: 45px; padding-right: 45px;
}
} }
} }
} .example-dialog {
.example-dialog { img {
img { width: 100%;
width: 100%; height: 100%;
height: 100%; }
} }
} }
}
src/views/goods/create-good-new.vue
浏览文件 @ a261f444
...@@ -130,8 +130,9 @@ ...@@ -130,8 +130,9 @@
:on-exceed="imgExceed" :on-exceed="imgExceed"
:limit="6" :limit="6"
> >
<div class="file-pics" v-if="fileGoodsList.length > 0" :key="index" v-for="(item,index) in fileGoodsList"> <div :key="index" v-for="(item,index) in fileGoodsList">
<img :src="item.url" @mouseover.stop="headIndex=index" class="bg-img"/> <div class="file-pics" v-if="fileGoodsList.length > 0" >
<img :src="item.url" @mouseover.stop="headIndex=index" class="bg-img"/>
<div <div
class="img-delete" class="img-delete"
v-if="headIndex==index" v-if="headIndex==index"
...@@ -140,6 +141,7 @@ ...@@ -140,6 +141,7 @@
> >
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</div>
</div> </div>
<img class="bg-img" src="../../assets/image/small.png" v-if="fileGoodsList.length < 6"/> <img class="bg-img" src="../../assets/image/small.png" v-if="fileGoodsList.length < 6"/>
<div class="limit-text" v-if="fileGoodsList.length < 6"> <div class="limit-text" v-if="fileGoodsList.length < 6">
...@@ -166,7 +168,7 @@ ...@@ -166,7 +168,7 @@
> >
<video id="introVideoLecture" :src="videoModel.videoFullPath" controls preload style="width: 100%;" v-if="videoList.length == 1"> <video id="introVideoLecture" :src="videoModel.videoFullPath" controls preload style="width: 100%;" v-if="videoList.length == 1">
视频 视频
</video> </video>
<img class="bg-img" src="../../assets/image/video.png" v-if="videoList.length <1"/> <img class="bg-img" src="../../assets/image/video.png" v-if="videoList.length <1"/>
<div class="limit-text" v-if="videoList.length <1"> <div class="limit-text" v-if="videoList.length <1">
...@@ -181,7 +183,8 @@ ...@@ -181,7 +183,8 @@
</el-progress> </el-progress>
<el-button class="dl-video" icon="el-icon-delete" circle @click="deleteVideo" v-if="videoList.length == 1"></el-button> <el-button class="dl-video" icon="el-icon-delete" circle @click="deleteVideo" v-if="videoList.length == 1"></el-button>
</el-form-item> </el-form-item>
<el-form-item label="商品详情图片" class="label-detailimg">
<el-form-item label="商品详情图片(视频)" class="label-detailimg">
<el-upload <el-upload
class="bg-uploader" class="bg-uploader"
action="#" action="#"
...@@ -189,8 +192,12 @@ ...@@ -189,8 +192,12 @@
:before-upload="beforeUploadPic1" :before-upload="beforeUploadPic1"
> >
<div v-if="fileIntrList.length > 0"> <div v-if="fileIntrList.length > 0">
<div class="file-pics" v-if="item.url" :key="index" v-for="(item,index) in fileIntrList"> <div :key="index" v-for="(item,index) in fileIntrList">
<img :src="item.url" @mouseover.stop="intrIndex=index" class="bg-img"/> <div class="file-pics" v-if="item.url||item.imageUrl">
<img v-if="item.imageType==4" :src="item.url" @mouseover.stop="intrIndex=index" class="bg-img"/>
<video v-if="item.imageType==5" @mouseover.stop="intrIndex=index" :src="item.imageUrl" controls preload style="width: 100%;height:100%; object-fit:fill" >
视频
</video>
<div <div
class="img-delete" class="img-delete"
v-if="intrIndex==index" v-if="intrIndex==index"
...@@ -199,13 +206,15 @@ ...@@ -199,13 +206,15 @@
> >
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</div> </div>
</div>
</div> </div>
</div> </div>
<img class="bg-img" src="../../assets/image/small.png" /> <img class="bg-img" src="../../assets/image/small.png" />
<div class="limit-text"> <div class="limit-text">
<p>限制大小: 2M</p> <p>限制大小: 图片2M,视频20M</p>
<p>支持jpeg, png格式</p> <p>图片支持jpeg, png格式，视频仅支持MP4格式</p>
<p>视频名称必须包含3个下划线：举例（YQ_01_02_03.mp4）</p>
</div> </div>
</el-upload> </el-upload>
<p class="upload-message" v-if="!isSpecification_url">请上传商品详情图片</p> <p class="upload-message" v-if="!isSpecification_url">请上传商品详情图片</p>
...@@ -663,9 +672,7 @@ ...@@ -663,9 +672,7 @@
storeType: 1, //1: "供货商",2: "小药房",3: "医生小店" storeType: 1, //1: "供货商",2: "小药房",3: "医生小店"
hasRepoFlag: 0, //店铺是否有退货地址 hasRepoFlag: 0, //店铺是否有退货地址
videoList: [],//视频上传文件列表 videoList: [],//视频上传文件列表
videoModel:{ videoModel:{ videoFullPath: '' },
videoFullPath: ''
},
sumFile: 0, sumFile: 0,
uploadProgress:0, // 上传视频进度条 uploadProgress:0, // 上传视频进度条
cooperationProjectList: [], // 合作项目 cooperationProjectList: [], // 合作项目
...@@ -1357,23 +1364,32 @@ ...@@ -1357,23 +1364,32 @@
//上传商品详情图片 //上传商品详情图片
beforeUploadPic1(file,type) { beforeUploadPic1(file,type) {
this.currentOption.aspectRatio = 1/1; // this.currentOption.aspectRatio = 1/1;
this.currentOption.cropBoxResizable = true; // this.currentOption.cropBoxResizable = true;
this.currentOption.minCropBoxWidth = 160; // this.currentOption.minCropBoxWidth = 160;
this.currentOption.minCropBoxHeight = 160; // this.currentOption.minCropBoxHeight = 160;
let fileLimit = { // let fileLimit = {
width: 160, // width: 160,
height: 160, // height: 160,
size: 0.5, // size: 0.5,
sizeText: "500K", // sizeText: "500K",
key: "headUrl", // key: "headUrl",
more: "imgUrl1More", // more: "imgUrl1More",
show: "uploadImgMessage1" // show: "uploadImgMessage1"
}; // };
this.beforeUpload(file, fileLimit); // 图片 jpeg png 视频 mp4
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isMP4 = file.type === "video/mp4";
if(isMP4){
this.beforeUploadVideo(file);
}
if(isPNG || isJPG){
this.beforeUpload(file);
}
}, },
//上传商品详情图片 //上传商品详情图片
beforeUpload(file, fileLimit) { beforeUpload(file) {
let vm = this; let vm = this;
const isJPG = file.type === "image/jpeg"; const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png"; const isPNG = file.type === "image/png";
...@@ -1393,22 +1409,11 @@ ...@@ -1393,22 +1409,11 @@
image.src = theFile.target.result image.src = theFile.target.result
vm.slide2.oriUrl = theFile.target.result; vm.slide2.oriUrl = theFile.target.result;
image.onload = function () { image.onload = function () {
let _this = this;
// if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
// if (_this.width < fileLimit.width || _this.height < fileLimit.height) {
// vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
// return;
// } else if(_this.width > fileLimit.width || _this.height > fileLimit.height){
// vm.showCropper = true;
// vm.currentOption.cvWidth = _this.width;
// vm.currentOption.cvHeight = _this.height;
// return;
// } else {
openLoading(vm); openLoading(vm);
doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) { doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) {
closeLoading(vm); closeLoading(vm);
let len = vm.fileIntrList.length; let len = vm.fileIntrList.length;
vm.fileIntrList.push({url:path.fullPath,imageUrl:path.fullPath,imageSort: len+1,imageType: 1,id: null, imageType: 4}) vm.fileIntrList.push({url:path.fullPath,imageUrl:path.fullPath,imageSort: len+1,id: null, imageType: 4})
vm.isSpecification_url = true; vm.isSpecification_url = true;
vm.$message.success("上传成功"); vm.$message.success("上传成功");
}); });
...@@ -1417,6 +1422,55 @@ ...@@ -1417,6 +1422,55 @@
}; };
return isJPG && isLt2M; return isJPG && isLt2M;
}, },
//上传商品详情视频
beforeUploadVideo(file){
console.log('file :>> ', file);
let self = this;
if(file.name.indexOf(' ') != -1){
self.$message.warning('文件名不能包含空格');
return;
}
let updateFlag = self.checkUpdate(file.name);
if(updateFlag == false) return;
//如果没有选择文件,返回
if (isEmptyUtils(file)) return;
console.log('object :>> ', file.type.split('/'));
let filety = "." + file.type.split('/')[1];
if(filety != ".mp4"){
self.$message.error('仅支持上传mp4格式视频');
return;
}
var name_ = file.name.split('_');
if(name_.length != 4){
self.$message.error('上传视频文件名格式不正确：举例（GXY_001_02_03.mp4)');
return;
}
self.$message.info('开始上传');
const videoPath = createFilePath(file,file.name)
doUpload(self, file, videoPath,"preview4","uploadProgress1","").then(function (result) {
// self.videoModel.videoFullPath = result.fullPath;
let fileItem = {
goodsImgUrl: result.fullPath,
uid: file.uid,
imageUrl: result.fullPath,
imageType: 5,
goodsId: self.formData.goodsId,
id: null,
deleteFlag: 0
}
self.fileIntrList.push(fileItem);
console.log('object :>> ', self.fileIntrList);
return false;
});
},
//删除图片 //删除图片
deleteImg(item,d) { deleteImg(item,d) {
let index = '' let index = ''
...@@ -1591,7 +1645,7 @@ ...@@ -1591,7 +1645,7 @@
deleteVideo(videoList) { deleteVideo(videoList) {
this.videoList = []; this.videoList = [];
this.videoModel.videoFullPath=''; this.videoModel.videoFullPath='';
}, },
beforeVideoUpload(file) { beforeVideoUpload(file) {
const video2M = file.size / 1024 /1024 < 20; const video2M = file.size / 1024 /1024 < 20;
console.log(file.size, 'video2Mvideo2Mvideo2M') console.log(file.size, 'video2Mvideo2Mvideo2M')
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或