Skip to content

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

Merge branch 'feature-syq0621' into 'release' 

Feature syq0621

See merge request com.pica.cloud.education.frontend/pica.cloud.web-education-admin!480
上级 8e0cfa91 9c0fb9f8
显示空白字符变更
内嵌 并排
正在显示 包含 217 行增加 和 153 行删除
src/views/goods/create-good-new.scss
浏览文件 @ fadb56db
.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; color: #449284;
} }
...@@ -23,20 +23,20 @@ ...@@ -23,20 +23,20 @@
.suitableList-select { .suitableList-select {
width: 445px; width: 445px;
} }
.el-button--text{ .el-button--text {
color: #449284; color: #449284;
font-size: 14px; font-size: 14px;
&::after{ &::after {
content: ''; content: "";
position: relative; position: relative;
height: 14px; height: 14px;
/*border-right: 1px solid #EBEEF5;*/ /*border-right: 1px solid #EBEEF5;*/
border-right: 1px solid #aaaaaa; border-right: 1px solid #aaaaaa;
padding-right: 10px; padding-right: 10px;
} }
&:last-of-type{ &:last-of-type {
&::after{ &::after {
content: ''; content: "";
position: relative; position: relative;
width: 1px; width: 1px;
height: 14px; height: 14px;
...@@ -49,7 +49,11 @@ ...@@ -49,7 +49,11 @@
color: #f56c6c; color: #f56c6c;
margin-right: 4px; margin-right: 4px;
} }
.goods-category,.project-req { .required-label .el-form-item__content .bg-uploader .el-upload{
width: 100%;
}
.goods-category,
.project-req {
.el-form-item__label::before { .el-form-item__label::before {
content: "*"; content: "*";
color: #f56c6c; color: #f56c6c;
...@@ -58,7 +62,7 @@ ...@@ -58,7 +62,7 @@
.project-tip { .project-tip {
color: #aaaaaa; color: #aaaaaa;
} }
} }
.choice-goods { .choice-goods {
.el-form-item__label::before { .el-form-item__label::before {
content: "*"; content: "*";
...@@ -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,10 +267,10 @@ ...@@ -262,10 +267,10 @@
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;
...@@ -278,7 +283,8 @@ ...@@ -278,7 +283,8 @@
} }
.label-video { .label-video {
position: relative; position: relative;
.el-button:focus, .el-button:hover { .el-button:focus,
.el-button:hover {
color: #449284; color: #449284;
border-color: #449284; border-color: #449284;
background-color: #ecf5ff; background-color: #ecf5ff;
...@@ -287,8 +293,7 @@ ...@@ -287,8 +293,7 @@
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
浏览文件 @ fadb56db
...@@ -130,7 +130,8 @@ ...@@ -130,7 +130,8 @@
: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">
<div class="file-pics" v-if="fileGoodsList.length > 0" >
<img :src="item.url" @mouseover.stop="headIndex=index" class="bg-img"/> <img :src="item.url" @mouseover.stop="headIndex=index" class="bg-img"/>
<div <div
class="img-delete" class="img-delete"
...@@ -141,6 +142,7 @@ ...@@ -141,6 +142,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">
<!-- <p>限制大小: 200kb</p> --> <!-- <p>限制大小: 200kb</p> -->
...@@ -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"
...@@ -201,11 +208,12 @@ ...@@ -201,11 +208,12 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<img class="bg-img" src="../../assets/image/small.png" /> <img class="bg-img" src="../../assets/image/uploadImgOrVideo.png" />
<div class="limit-text"> <div class="limit-text">
<p>限制大小: 2M</p> <p>视频：20M以内，仅支持MP4格式，视频名称必须包含3个下划线：举例（YQ_01_02_03.mp4）</p>
<p>支持jpeg, png格式</p> <p>图片：2M以内，支持jpeg, png格式</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 +671,7 @@ ...@@ -663,9 +671,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 +1363,32 @@ ...@@ -1357,23 +1363,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 +1408,11 @@ ...@@ -1393,22 +1408,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 +1421,61 @@ ...@@ -1417,6 +1421,61 @@
}; };
return isJPG && isLt2M; return isJPG && isLt2M;
}, },
//上传商品详情视频
beforeUploadVideo(file){
console.log('file :>> ', file);
let self = this;
if(file.name.indexOf(' ') != -1){
self.$message.warning('文件名不能包含空格');
return;
}
const isLt20M = file.size / 1024 / 1024 < 20;
if(!isLt20M){
self.$message.warning('视频文件不能大于20M');
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 = ''
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或