Skip to content

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

Merge branch 'feature/xinglee' into 'release' 

feat: 图片支持拖动

See merge request com.pica.cloud.education.frontend/pica.cloud.web-education-admin!507
上级 f07b880a 99b93f3c
展开全部 显示空白字符变更
内嵌 并排
正在显示 包含 85 行增加 和 12101 行删除
package-lock.json
浏览文件 @ d5a51a29
此差异已折叠。
src/views/goods/create-good-new.scss
浏览文件 @ d5a51a29
......@@ -28,7 +28,7 @@
color: #449284;
font-size: 14px;
&::after {
content: "";
content: '';
position: relative;
height: 14px;
/*border-right: 1px solid #EBEEF5;*/
......@@ -37,7 +37,7 @@
}
&:last-of-type {
&::after {
content: "";
content: '';
position: relative;
width: 1px;
height: 14px;
......@@ -46,7 +46,7 @@
}
}
.required-label .el-form-item__label::before {
content: "*";
content: '*';
color: #f56c6c;
margin-right: 4px;
}
......@@ -57,7 +57,7 @@
.goods-category,
.project-req {
.el-form-item__label::before {
content: "*";
content: '*';
color: #f56c6c;
margin-right: 4px;
}
......@@ -67,14 +67,18 @@
}
.choice-goods {
.el-form-item__label::before {
content: "*";
content: '*';
color: #f56c6c;
margin-right: 4px;
}
}
.image-wrapper {
display: flex;
flex-direction: row;
}
.label-detailimg {
.el-form-item__label::before {
content: "*";
content: '*';
color: #f56c6c;
margin-right: 4px;
}
......@@ -125,11 +129,12 @@
opacity: 0.7;
transform: translate(-50%, -50%);
z-index: 999;
cursor: pointer;
i {
color: #fff;
margin-top: 39px;
margin-left: 0px;
margin-left: 36px;
}
}
}
......@@ -247,12 +252,13 @@
color: #449284;
}
.img-box {
position: relative;
width: 84px;
height: 130px;
float: left;
margin-right: 15px;
position: relative;
.checkbox {
text-align: center;
line-height: 32px;
}
}
......
src/views/goods/create-good-new.vue
浏览文件 @ d5a51a29
......@@ -118,7 +118,6 @@
<span class="word-show" @click="shoImgDialog = true">查看展示位置</span>
</el-col>
</el-form-item>
<el-form-item label="商品头图" class="required-label">
<el-upload
:file-list="fileGoodsList"
......@@ -130,14 +129,26 @@
:on-exceed="imgExceed"
:limit="6"
>
<div :key="item.id" v-for="(item, index) in fileGoodsList">
<img class="bg-img" src="../../assets/image/small.png" v-if="fileGoodsList.length < 6"/>
<div class="limit-text" v-if="fileGoodsList.length < 6">
<p>建议尺寸：750*750</p>
<p>支持jpeg, png格式</p>
</div>
</el-upload>
<p class="upload-message" v-if="!isgoodsImages">请上传商品头图</p>
<p class="word-tip">勾选的头图在云鹊健康小程序不可见</p>
</el-form-item>
<el-form-item label="" class="required-label">
<div class="bg-uploader">
<draggable class="image-wrapper" :animation="1000" v-model="fileGoodsList" :sort="true">
<div :key="item.uid" v-for="(item, index) in fileGoodsList">
<div class="img-box">
<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"
@click.stop="deleteImg(item,fileGoodsList)"
@click.stop="deleteImg(item, fileGoodsList)"
@mouseout.stop="headIndex=-1"
>
<i class="el-icon-delete"></i>
......@@ -148,18 +159,9 @@
</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">
<!-- <p>限制大小: 200kb</p> -->
<p>建议尺寸：750*750</p>
<p>支持jpeg, png格式</p>
</draggable>
</div>
</el-upload>
<p class="upload-message" v-if="!isgoodsImages">请上传商品头图</p>
<p class="word-tip">勾选的头图在云鹊健康小程序不可见</p>
<!-- <p class="upload-message" v-if="uploadImgMessage1">请上传商品头图</p> -->
</el-form-item>
<el-form-item label="商品介绍视频" class="label-video">
<el-upload
accept=".mp4"
......@@ -197,9 +199,21 @@
:show-file-list="false"
:before-upload="beforeUploadPic1"
>
<div :key="index" v-for="(item,index) in fileIntrList">
<img class="bg-img" src="../../assets/image/uploadImgOrVideo.png" />
<div class="limit-text">
<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>
<p class="word-tip">勾选的详情在云鹊健康小程序不可见</p>
</el-form-item>
<el-form-item label="" class="required-label">
<div class="bg-uploader">
<draggable class="image-wrapper" :animation="1000" v-model="fileIntrList" :sort="true">
<div :key="item.uid" v-for="(item, index) in fileIntrList">
<div class="img-box">
<div class="file-pics" v-if="item.url||item.imageUrl">
<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" >
视频
......@@ -207,7 +221,7 @@
<div
class="img-delete"
v-if="intrIndex==index"
@click.stop="deleteImg(item,fileIntrList)"
@click.stop="deleteImg(item, fileIntrList)"
@mouseout.stop="intrIndex=-1"
>
<i class="el-icon-delete"></i>
......@@ -218,17 +232,9 @@
</div>
</div>
</div>
<img class="bg-img" src="../../assets/image/uploadImgOrVideo.png" />
<div class="limit-text">
<p>视频：20M以内，仅支持MP4格式，视频名称必须包含3个下划线：举例（YQ_01_02_03.mp4）</p>
<p>图片：2M以内，支持jpeg, png格式</p>
</draggable>
</div>
</el-upload>
<p class="upload-message" v-if="!isSpecification_url">请上传商品详情图片</p>
<p class="word-tip">勾选的详情在云鹊健康小程序不可见</p>
</el-form-item>
</div>
</el-form>
<!-- 销售信息 -->
......@@ -575,7 +581,7 @@
</div>
</template>
<script>
import BreadCrumb from "@/components/breadcrumb.vue";
import BreadCrumb from "@/components/breadcrumb.vue";
import Cropper from '@/components/common/cropper.vue';
import { getBarcodeData, getCategorysList, getContractList, getCooperationProjectList, getGoodsList, getGoodsListAll, getMedList, saveMedList, updateGoods, updateStock } from '@/utils/goods';
import { isEmptyUtils } from "@/utils/index";
......@@ -584,12 +590,15 @@ import { getStoreAdressRepot } from "@/utils/shop";
import { closeLoading, openLoading, signFigures } from "@/utils/utils";
import { originForm, originForm1, originForm3 } from './common/forms';
import { originRules, originRules1, originRules3 } from './common/rules';
import draggable from "vuedraggable";
let vm = null;
export default {
components: {
BreadCrumb,
Cropper
Cropper,
draggable
},
data(){
return{
......@@ -1100,6 +1109,8 @@ import { originRules, originRules1, originRules3 } from './common/rules';
// })
// })
// this.fileGoodsList = newImgList;
console.log('fileGoodsList', this.fileGoodsList);
this.rules = {
...this.rules,
...originRules
......@@ -1351,55 +1362,8 @@ import { originRules, originRules1, originRules3 } from './common/rules';
};
};
},
// 上传检测说明图
// beforeUploadPic2(file) {
// if(this.fileGoodsList.length > 10){
// return ;
// }
// let vm = this;
// let picTypes = ['image/jpeg','image/png']
// const isLt200k = file.size / 1024 < 200;
// if (picTypes.indexOf(file.type) == -1) {
// return this.$message.error("请上传jpeg或png格式的图片");
// }
// let _img = new FileReader();
// _img.readAsDataURL(file);
// _img.onload = function (theFile) {
// let image = new Image()
// image.src = theFile.target.result
// vm.slide2.oriUrl = theFile.target.result;
// image.onload = function () {
// let _this = this;
// console.log(_this.width,_this.height)
// openLoading(vm);
// doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) {
// closeLoading(vm);
// console.log('上传成功后路径', path);
// let len = vm.goodsCheckList.length;
// vm.goodsCheckList.push({ url: path.fullPath, imageUrl: path.fullPath, imageSort: len+1, id: vm.formData.goodsId });
// vm.$message.success("上传成功");
// });
// };
// };
// },
//上传商品详情图片
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"
// };
// 图片 jpeg png 视频 mp4
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
......@@ -1510,10 +1474,6 @@ import { originRules, originRules1, originRules3 } from './common/rules';
}
}
d.splice(index,1)
// if (type == 1) {
// vm.formData.headUrl = "";
// vm.imgMouseOver1 = false;
// }
},
// 获取裁剪的图片数据
getCropImg(argument) {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或