Skip to content

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

feat: 图片支持拖动

上级 f07b880a
展开全部 显示空白字符变更
内嵌 并排
正在显示 包含 360 行增加 和 12102 行删除
package-lock.json
浏览文件 @ a3fd4c62
此差异已折叠。
package.json
浏览文件 @ a3fd4c62
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
"private": true, "private": true,
"license": "GPL", "license": "GPL",
"scripts": { "scripts": {
"dev": "cross-env BUILD_ENV=dev node build/dev-server.js", "dev": "cross-env BUILD_ENV=test node build/dev-server.js",
"local": "cross-env BUILD_ENV=development node build/dev-server.js", "local": "cross-env BUILD_ENV=development node build/dev-server.js",
"build": "node build/build.js", "build": "node build/build.js",
"build:dev": "cross-env BUILD_ENV=dev node build/build.js", "build:dev": "cross-env BUILD_ENV=dev node build/build.js",
......
src/views/goods/common/data.js 0 → 100644
浏览文件 @ a3fd4c62
const imgList = [
{
url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143040888.jpg',
id: 1706164241654,
},
{
url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143040885.jpg',
id: 1706164241695,
},
{
url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143052455.jpg',
id: 1706164253118,
},
{
url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143052455.jpg',
id: 17061642531112,
},
{
url: 'https://test1-file.yunqueyi.com/image/jpeg/protal/project/20240125143052455.jpg',
id: 1706164253111231231,
},
];
export default imgList;
src/views/goods/common/upload-img.vue 0 → 100644
浏览文件 @ a3fd4c62
<template>
<div class="base-updata">
<div class="img-sort">
<ul class="el-upload-list el-upload-list--picture-card">
<draggable
v-model="imgList"
:animation="1000"
:sort="true"
v-if="showDraggable"
>
<li
class="el-upload-list__item is-success animated"
v-for="(item, index) in imgList"
:key="index"
style="margin-right: 10px"
>
<img
:src="item.url"
alt=""
class="el-upload-list__item is-success"
/>
<!-- <i class="el-icon-close"></i> -->
<span class="el-upload-list__item-actions">
<!-- 预览 -->
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(item)"
>
<i class="el-icon-zoom-in"></i>
</span>
<!-- 删除 -->
<span
class="el-upload-list__item-delete"
@click="handleRemove(index)"
v-if="!disabled"
>
<i class="el-icon-delete"></i>
</span>
</span>
</li>
</draggable>
<template v-else>
<li
class="el-upload-list__item is-success animated"
v-for="(item, index) in imgList"
:key="index"
style="margin-right: 10px"
>
<img
:src="item.url"
alt=""
class="el-upload-list__item is-success"
/>
<i class="el-icon-close"></i>
<span class="el-upload-list__item-actions">
<!-- 预览 -->
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(item)"
>
<i class="el-icon-zoom-in"></i>
</span>
<!-- 删除 -->
<span
class="el-upload-list__item-delete"
@click="handleRemove(index)"
v-if="!disabled"
>
<i class="el-icon-delete"></i>
</span>
</span>
</li>
</template>
</ul>
<el-upload
style="display: inline-block"
ref="uploadFilemain"
:show-file-list="false"
:file-list="imgList"
list-type="picture-card"
:before-upload="beforeUpload"
:http-request="(file, fileList) => requestImgHttps(file)"
:on-preview="handlePictureCardPreview"
:limit="limit"
:disabled="disabled"
:class="imgList.length == limit ? 'mf' : ''"
>
<!-- :disabled="optType == 'detail'" -->
<i class="el-icon-plus"></i>
</el-upload>
<span style="position: relative; top: 116px; left: 10px"
>{{ imgList.length }}
<span v-if="limit != 100">{{ "/" + limit }}</span>
<span v-if="showDraggable">（拖拽排序）</span></span
>
</div>
<!-- 图片预览 -->
<el-dialog v-model:visible="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "base-updata",
components: { draggable },
props: {
//图片列表
imgList: {
type: Array,
default: () => {
return [];
},
},
//是否显示拖拽
showDraggable: {
type: Boolean,
default: () => {
return false;
},
},
//上传图片署名
imgTypeName: {
type: String,
Request: true,
},
//上传图片下标
imgTypeIdex: {
type: Number,
Request: true,
},
//图片限制
limit: {
type: Number,
default: () => {
return 100;
},
},
//图片禁止
disabled: {
type: Boolean,
default: () => {
return false;
},
},
},
data() {
return {
dialogVisible: false, //图片预览
};
},
created() {},
mounted() {},
methods: {
//图片上传验证
beforeUpload(file) {
return new Promise((resolve, reject) => {
this.changeLimt(file).then((res) => {
file.isFlag = res;
if (file.isFlag) {
return resolve(true);
} else {
return reject(false);
}
});
});
},
changeLimt(file) {
const _this = this;
const isSize = new Promise(function (resolve, reject) {
const _URL = window.URL || window.webkitURL;
const img = new Image();
img.src = _URL.createObjectURL(file);
img.onload = function () {
let e_width = img.width >= 600 && img.width <= 1200;
let e_height = img.height >= 600 && img.height <= 1200;
if (
file.type == "image/png" ||
file.type == "image/jpg" ||
file.type == "image/jpeg"
) {
const valid = e_width && e_height;
if (valid) {
return resolve();
} else {
return reject();
}
} else {
return reject();
}
};
}).then(
() => {
return true;
},
() => {
_this.$message.warning({
message:
"图片规格为jpg或png，建议形状正方形，尺寸建议800*800像素，最大支持1200*1200像素",
btn: false,
});
return false;
}
);
return isSize;
},
//预览
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
//删除
handleRemove(index) {
this.$emit("handleRemove", this.imgTypeName, index);
},
/**
* 上传图片 请求
* @param {string} file 图片文件
* @param {string} imgTypeName 图片署名
* @param {string} imgTypeIdex 图片位置下标
* @return {Function} 抛出函数requestImgHttps
*/
requestImgHttps(file) {
this.$emit("requestImgHttps", file, this.imgTypeName, this.imgTypeIdex);
},
},
};
</script>
<style lang='scss' scoped>
.img-sort {
display: flex;
flex-wrap: wrap;
}
.mf {
::v-deep .el-upload--picture-card {
display: none !important;
}
}
</style>
src/views/goods/create-good-new.scss
浏览文件 @ a3fd4c62
...@@ -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
浏览文件 @ a3fd4c62
...@@ -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,14 +129,26 @@ ...@@ -130,14 +129,26 @@
:on-exceed="imgExceed" :on-exceed="imgExceed"
:limit="6" :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="img-box">
<div class="file-pics" v-if="fileGoodsList.length > 0" > <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"
v-if="headIndex==index" v-if="headIndex==index"
@click.stop="deleteImg(item,fileGoodsList)" @click.stop="deleteImg(item, fileGoodsList)"
@mouseout.stop="headIndex=-1" @mouseout.stop="headIndex=-1"
> >
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
...@@ -148,18 +159,9 @@ ...@@ -148,18 +159,9 @@
</div> </div>
</div> </div>
</div> </div>
<img class="bg-img" src="../../assets/image/small.png" v-if="fileGoodsList.length < 6"/> </draggable>
<div class="limit-text" v-if="fileGoodsList.length < 6">
<!-- <p>限制大小: 200kb</p> -->
<p>建议尺寸：750*750</p>
<p>支持jpeg, png格式</p>
</div> </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>
<el-form-item label="商品介绍视频" class="label-video"> <el-form-item label="商品介绍视频" class="label-video">
<el-upload <el-upload
accept=".mp4" accept=".mp4"
...@@ -197,9 +199,21 @@ ...@@ -197,9 +199,21 @@
:show-file-list="false" :show-file-list="false"
:before-upload="beforeUploadPic1" :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="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"/> <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 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 @@ ...@@ -207,7 +221,7 @@
<div <div
class="img-delete" class="img-delete"
v-if="intrIndex==index" v-if="intrIndex==index"
@click.stop="deleteImg(item,fileIntrList)" @click.stop="deleteImg(item, fileIntrList)"
@mouseout.stop="intrIndex=-1" @mouseout.stop="intrIndex=-1"
> >
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
...@@ -218,17 +232,9 @@ ...@@ -218,17 +232,9 @@
</div> </div>
</div> </div>
</div> </div>
</draggable>
<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> </div>
</el-upload>
<p class="upload-message" v-if="!isSpecification_url">请上传商品详情图片</p>
<p class="word-tip">勾选的详情在云鹊健康小程序不可见</p>
</el-form-item> </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,15 +590,22 @@ import { getStoreAdressRepot } from "@/utils/shop"; ...@@ -584,15 +590,22 @@ 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";
import uploadImg from './common/upload-img.vue';
import imgList from './common/data';
let vm = null; let vm = null;
export default { export default {
components: { components: {
BreadCrumb, BreadCrumb,
Cropper Cropper,
draggable,
uploadImg
}, },
data(){ data(){
return{ return{
imgList: imgList,
shoImgDialog: false, // 查看展示 shoImgDialog: false, // 查看展示
medicalCategoryList: [], // 药品分类 medicalCategoryList: [], // 药品分类
isShowGoodsMsg: false, isShowGoodsMsg: false,
...@@ -1100,6 +1113,8 @@ import { originRules, originRules1, originRules3 } from './common/rules'; ...@@ -1100,6 +1113,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 +1366,8 @@ import { originRules, originRules1, originRules3 } from './common/rules'; ...@@ -1351,55 +1366,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 +1478,6 @@ import { originRules, originRules1, originRules3 } from './common/rules'; ...@@ -1510,10 +1478,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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或