Skip to content

P
pica.cloud.web-education-admin
提交 48163b95 编写于 作者: xiaoping.di's avatar xiaoping.di
浏览文件
操作

Merge branch 'release' into 'master' 

Release

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