add

src/renderer/components/home.vue

@@ -59,16 +59,14 @@
 					<el-main ref="el-main" style="background-color: #fafafa;">
 						<template>
 							<div class="content-top">
-								<el-button-group>
+								<div>
 									<el-button type="primary" size="small" icon="el-icon-document"
 										@click="pickFile()">添加文件</el-button>
 									<el-button type="primary" size="small" icon="el-icon-folder"
 										@click="pickDir()">添加文件夹</el-button>
-									<!-- <el-button type="primary" size="small" icon="el-icon-delete"
-										@click="clearList()">清空列表</el-button> -->
-								</el-button-group>
-								
-								<el-button type="info" size="small" @click="clearList()">清空列表</el-button>
+									<el-button type="info" size="small" icon="el-icon-delete"
+										@click="clearList()">清空列表</el-button>
+								</div>
 							</div>
 							
 							<div v-if="(imgList.length == 0 && menuIndex != 8 && menuIndex != 10) || (mergeList.length == 0 && menuIndex == 8) || (cropList.length == 0 && menuIndex == 10)" class="upload-area">
@@ -187,7 +185,7 @@
 													<div style="width: 100%; height: 100%;">
 														<div class="show-img" style="position:relative;overflow: hidden; width: 100%; height: 100%;">
 															<img draggable="false" class="result-img" :src="imgSrc" 
-															:style="{borderRadius: menuIndex == 6 ? handleData.circularValue : 0 +'%', maxWidth: '80%',maxHeight: '500px', transform: 'rotate('+handleData.rotateValue+'deg) rotateY('+ (handleData.hflip ? '180' : '0') +'deg) rotateX('+ (handleData.vflip ? '180' : '0') +'deg) scale('+ handleData.scaling/100+')'}" />
+															:style="{borderRadius: menuIndex == 6 ? handleData.circularValue+'%' : 0, maxWidth: '80%',maxHeight: '500px', transform: 'rotate('+handleData.rotateValue+'deg) rotateY('+ (handleData.hflip ? '180' : '0') +'deg) rotateX('+ (handleData.vflip ? '180' : '0') +'deg) scale('+ handleData.scaling/100+')'}" />
 														</div>
 													</div>
 												</div>
@@ -423,7 +421,7 @@
 																<el-radio-button label="2">尺寸裁剪</el-radio-button>
 															</el-radio-group>
 														</div>
-														<div class="handle-item" v-if="cropOptions.cropType == '1'">
+														<div class="handle-item" style="margin: 5px 0;" v-if="cropOptions.cropType == '1'">
 															<div class="handle-title">裁剪比例</div>
 															<div class="flex-crop">
 																<el-button class="crop-button" :type="cropOptions.fixedValue == 'free' ? 'primary' : 'default'" @click="fixedChange('free')">自由</el-button>
@@ -443,7 +441,7 @@
 														
 														<template v-if="cropOptions.cropType == '2'">
 															<div class="handle-item">
-																<el-radio-group size="mini" v-model="cropOptions.cropClassify">
+																<el-radio-group size="mini" v-model="cropOptions.cropClassify"  @change="classifyChange">
 																	<el-radio-button label="1">自定义</el-radio-button>
 																	<el-radio-button label="2">证件</el-radio-button>
 																	<el-radio-button label="3">电商</el-radio-button>
@@ -468,7 +466,30 @@
 																</el-button>
 																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '413:579' ? 'primary' : 'default'" @click="fixedChange('413:579')">
 																	二寸413x579px | 3.5x4.9cm
-																	<p style="opacity: 0.6; margin-top: 6px;">公务员、部分签证</p>
+																	<p style="opacity: 0.6; margin-top: 6px;">公务员考试、部分签证等</p>
+																</el-button>
+															</div>
+															<div v-if="cropOptions.cropClassify == '3'">
+																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px; margin-left: 10px;" :type="cropOptions.fixedValue == '1920:500' ? 'primary' : 'default'" @click="fixedChange('1920:500')">
+																	首页横幅 1920x500
+																</el-button>
+																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '750:800' ? 'primary' : 'default'" @click="fixedChange('750:800')">
+																	详情页 750x800
+																</el-button>
+																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '800:800' ? 'primary' : 'default'" @click="fixedChange('800:800')">
+																	产品主图 800x800
+																</el-button>
+																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '1920:120' ? 'primary' : 'default'" @click="fixedChange('1920:120')">
+																	店招 1920x120
+																</el-button>
+																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '750:500' ? 'primary' : 'default'" @click="fixedChange('750:500')">
+																	首页横幅 750x500
+																</el-button>
+																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '740x352' ? 'primary' : 'default'" @click="fixedChange('740x352')">
+																	商品主图 740x352
+																</el-button>
+																<el-button class="crop-button" style="width: 220px; margin-bottom: 10px;"  :type="cropOptions.fixedValue == '640x320' ? 'primary' : 'default'" @click="fixedChange('640x320')">
+																	手机详情页 640x320
 																</el-button>
 															</div>
 															<template v-if="cropOptions.cropClassify == '1'">
@@ -1115,12 +1136,10 @@ export default {
 		},
 		// 选择图片
 		selectCropImg(index){
-			if(this.cropImgIndex != index){
-				this.cropImgIndex = index;
-				this.cropOptions.img = this.cropList[index].path;
-				this.cropOptions.imgInfo = this.cropList[index];
-				this.cropImgLoading = false;
-			}
+			this.cropImgIndex = index;
+			this.cropOptions.img = this.cropList[index].path;
+			this.cropOptions.imgInfo = this.cropList[index];
+			this.cropImgLoading = false;
 		},
 		cropWidthChange(e){
 			let scale = Number(this.cropOptions.imgInfo.originalWidth) / Number(this.cropOptions.imgInfo.originalHeight);
@@ -1482,17 +1501,14 @@ export default {
 			this.handleData.width = this.imgInfo.width;
 			this.handleData.height = this.imgInfo.height;
 			this.imgLoading = true;
+		
+			electronApi.fileStream(this.imgInfo.path).then(buffer => {
+				this.imgSrc = "data:image/png;base64,"+buffer.toString('base64');
+				this.imgLoading = false;
+			}).catch(err => {
+				this.imgLoading = false;
+			})
 			
-			if(this.menuIndex == 6){ // 图片圆角
-				this.selectTab(this.imgInfo, 0);
-			}else{
-				electronApi.fileStream(this.imgInfo.path).then(buffer => {
-					this.imgSrc = "data:image/png;base64,"+buffer.toString('base64');
-					this.imgLoading = false;
-				}).catch(err => {
-					this.imgLoading = false;
-				})
-			}
 		},
         // 选择新路径
         getFolder(e) {
@@ -1505,7 +1521,7 @@ export default {
 			this.imgInfo = currentRow;
 			this.imgInfoIndex = index;
 			
-			if([1,2,3,7,8,9].indexOf(this.menuIndex) > -1){
+			if([1,2,3,6,7,8,9].indexOf(this.menuIndex) > -1){
 				if(this.menuIndex == 1){
 					this.handleData.imgFormat = 'JPG';
 				}
@@ -2690,6 +2706,13 @@ export default {
 			}).then(() => {
 				if(tips == 'crop'){ // 删除裁剪图片
 					this.cropList.splice(index, 1);
+					if(this.cropList.length > 0){
+						this.cropImgIndex = 0;
+						this.cropOptions.img = this.cropList[0].path;
+						this.cropOptions.imgInfo = this.cropList[0];
+						this.cropImgLoading = false;
+					}
+					
 				}else{
 					this.mergeList.splice(index, 1);
 					this.sortChange(this.mergeData.sortType);
@@ -2856,6 +2879,21 @@ export default {
 			this.sizeChange();
 		},
 		
+		// 裁剪分类
+		classifyChange(e){
+			if(e == '1'){ // 自定义
+				this.virtualWidth = this.cropOptions.imgInfo.originalWidth;
+				this.virtualHeight = this.cropOptions.imgInfo.originalHeight;
+				this.cropOptions.fixed = false;
+				this.cropOptions.fixedValue = 'free';
+				this.$refs.cropper.goAutoCrop();
+				this.$nextTick(() => {
+					this.cropOptions.autoCropWidth = Number(this.virtualWidth);
+					this.cropOptions.autoCropHeight = Number(this.virtualHeight);
+				});
+			}
+		},
+		
 		// 缩放
 		zoom(flag){
 			if(flag == 'reduce'){ // 缩小