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
因为 它太大了无法显示 源差异 。您可以改为 查看blob。
src/views/goods/create-good-new.scss
浏览文件 @ d5a51a29
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
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;*/
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
} }
&:last-of-type { &:last-of-type {
&::after { &::after {
content: ""; content: '';
position: relative; position: relative;
width: 1px; width: 1px;
height: 14px; height: 14px;
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
} }
} }
.required-label .el-form-item__label::before { .required-label .el-form-item__label::before {
content: "*"; content: '*';
color: #f56c6c; color: #f56c6c;
margin-right: 4px; margin-right: 4px;
} }
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
.goods-category, .goods-category,
.project-req { .project-req {
.el-form-item__label::before { .el-form-item__label::before {
content: "*"; content: '*';
color: #f56c6c; color: #f56c6c;
margin-right: 4px; margin-right: 4px;
} }
...@@ -67,14 +67,18 @@ ...@@ -67,14 +67,18 @@
} }
.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;
} }
} }
.image-wrapper {
display: flex;
flex-direction: row;
}
.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;
} }
...@@ -125,11 +129,12 @@ ...@@ -125,11 +129,12 @@
opacity: 0.7; opacity: 0.7;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 999; z-index: 999;
cursor: pointer;
i { i {
color: #fff; color: #fff;
margin-top: 39px; margin-top: 39px;
margin-left: 0px; margin-left: 36px;
} }
} }
} }
...@@ -247,12 +252,13 @@ ...@@ -247,12 +252,13 @@
color: #449284; color: #449284;
} }
.img-box { .img-box {
position: relative;
width: 84px; width: 84px;
height: 130px; height: 130px;
float: left;
margin-right: 15px; margin-right: 15px;
position: relative;
.checkbox { .checkbox {
text-align: center;
line-height: 32px; line-height: 32px;
} }
} }
......
src/views/goods/create-good-new.vue
浏览文件 @ d5a51a29
...@@ -118,7 +118,6 @@ ...@@ -118,7 +118,6 @@
<span class="word-show" @click="shoImgDialog = true">查看展示位置</span> <span class="word-show" @click="shoImgDialog = true">查看展示位置</span>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="商品头图" class="required-label"> <el-form-item label="商品头图" class="required-label">
<el-upload <el-upload
:file-list="fileGoodsList" :file-list="fileGoodsList"
...@@ -130,36 +129,39 @@ ...@@ -130,36 +129,39 @@
:on-exceed="imgExceed" :on-exceed="imgExceed"
:limit="6" :limit="6"
> >
<div :key="item.id" 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)"
@mouseout.stop="headIndex=-1"
>
<i class="el-icon-delete"></i>
</div>
</div>
<div class="checkbox" @click.stop>
<el-checkbox :true-label="0" :false-label="1" v-model="fileGoodsList[index].miniProgramShow"></el-checkbox>
</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>建议尺寸：750*750</p> <p>建议尺寸：750*750</p>
<p>支持jpeg, png格式</p> <p>支持jpeg, png格式</p>
</div> </div>
</el-upload> </el-upload>
<p class="upload-message" v-if="!isgoodsImages">请上传商品头图</p> <p class="upload-message" v-if="!isgoodsImages">请上传商品头图</p>
<p class="word-tip">勾选的头图在云鹊健康小程序不可见</p> <p class="word-tip">勾选的头图在云鹊健康小程序不可见</p>
<!-- <p class="upload-message" v-if="uploadImgMessage1">请上传商品头图</p> -->
</el-form-item> </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)"
@mouseout.stop="headIndex=-1"
>
<i class="el-icon-delete"></i>
</div>
</div>
<div class="checkbox" @click.stop>
<el-checkbox :true-label="0" :false-label="1" v-model="fileGoodsList[index].miniProgramShow"></el-checkbox>
</div>
</div>
</div>
</draggable>
</div>
</el-form-item>
<el-form-item label="商品介绍视频" class="label-video"> <el-form-item label="商品介绍视频" class="label-video">
<el-upload <el-upload
accept=".mp4" accept=".mp4"
...@@ -197,28 +199,6 @@ ...@@ -197,28 +199,6 @@
:show-file-list="false" :show-file-list="false"
:before-upload="beforeUploadPic1" :before-upload="beforeUploadPic1"
> >
<div :key="index" v-for="(item,index) in fileIntrList">
<div class="img-box">
<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"
@click.stop="deleteImg(item,fileIntrList)"
@mouseout.stop="intrIndex=-1"
>
<i class="el-icon-delete"></i>
</div>
</div>
<div class="checkbox" @click.stop>
<el-checkbox :true-label="0" :false-label="1" v-model="fileIntrList[index].miniProgramShow"></el-checkbox>
</div>
</div>
</div>
<img class="bg-img" src="../../assets/image/uploadImgOrVideo.png" /> <img class="bg-img" src="../../assets/image/uploadImgOrVideo.png" />
<div class="limit-text"> <div class="limit-text">
<p>视频：20M以内，仅支持MP4格式，视频名称必须包含3个下划线：举例（YQ_01_02_03.mp4）</p> <p>视频：20M以内，仅支持MP4格式，视频名称必须包含3个下划线：举例（YQ_01_02_03.mp4）</p>
...@@ -228,7 +208,33 @@ ...@@ -228,7 +208,33 @@
<p class="upload-message" v-if="!isSpecification_url">请上传商品详情图片</p> <p class="upload-message" v-if="!isSpecification_url">请上传商品详情图片</p>
<p class="word-tip">勾选的详情在云鹊健康小程序不可见</p> <p class="word-tip">勾选的详情在云鹊健康小程序不可见</p>
</el-form-item> </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">
<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"
@click.stop="deleteImg(item, fileIntrList)"
@mouseout.stop="intrIndex=-1"
>
<i class="el-icon-delete"></i>
</div>
</div>
<div class="checkbox" @click.stop>
<el-checkbox :true-label="0" :false-label="1" v-model="fileIntrList[index].miniProgramShow"></el-checkbox>
</div>
</div>
</div>
</draggable>
</div>
</el-form-item>
</div> </div>
</el-form> </el-form>
<!-- 销售信息 --> <!-- 销售信息 -->
...@@ -575,7 +581,7 @@ ...@@ -575,7 +581,7 @@
</div> </div>
</template> </template>
<script> <script>
import BreadCrumb from "@/components/breadcrumb.vue"; import BreadCrumb from "@/components/breadcrumb.vue";
import Cropper from '@/components/common/cropper.vue'; import Cropper from '@/components/common/cropper.vue';
import { getBarcodeData, getCategorysList, getContractList, getCooperationProjectList, getGoodsList, getGoodsListAll, getMedList, saveMedList, updateGoods, updateStock } from '@/utils/goods'; import { getBarcodeData, getCategorysList, getContractList, getCooperationProjectList, getGoodsList, getGoodsListAll, getMedList, saveMedList, updateGoods, updateStock } from '@/utils/goods';
import { isEmptyUtils } from "@/utils/index"; import { isEmptyUtils } from "@/utils/index";
...@@ -584,12 +590,15 @@ import { getStoreAdressRepot } from "@/utils/shop"; ...@@ -584,12 +590,15 @@ import { getStoreAdressRepot } from "@/utils/shop";
import { closeLoading, openLoading, signFigures } from "@/utils/utils"; import { closeLoading, openLoading, signFigures } from "@/utils/utils";
import { originForm, originForm1, originForm3 } from './common/forms'; import { originForm, originForm1, originForm3 } from './common/forms';
import { originRules, originRules1, originRules3 } from './common/rules'; import { originRules, originRules1, originRules3 } from './common/rules';
import draggable from "vuedraggable";
let vm = null; let vm = null;
export default { export default {
components: { components: {
BreadCrumb, BreadCrumb,
Cropper Cropper,
draggable
}, },
data(){ data(){
return{ return{
...@@ -1100,6 +1109,8 @@ import { originRules, originRules1, originRules3 } from './common/rules'; ...@@ -1100,6 +1109,8 @@ import { originRules, originRules1, originRules3 } from './common/rules';
// }) // })
// }) // })
// this.fileGoodsList = newImgList; // this.fileGoodsList = newImgList;
console.log('fileGoodsList', this.fileGoodsList);
this.rules = { this.rules = {
...this.rules, ...this.rules,
...originRules ...originRules
...@@ -1351,55 +1362,8 @@ import { originRules, originRules1, originRules3 } from './common/rules'; ...@@ -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) { 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 // 图片 jpeg png 视频 mp4
const isJPG = file.type === "image/jpeg"; const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png"; const isPNG = file.type === "image/png";
...@@ -1510,10 +1474,6 @@ import { originRules, originRules1, originRules3 } from './common/rules'; ...@@ -1510,10 +1474,6 @@ import { originRules, originRules1, originRules3 } from './common/rules';
} }
} }
d.splice(index,1) d.splice(index,1)
// if (type == 1) {
// vm.formData.headUrl = "";
// vm.imgMouseOver1 = false;
// }
}, },
// 获取裁剪的图片数据 // 获取裁剪的图片数据
getCropImg(argument) { getCropImg(argument) {
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或