add

src/renderer/assets/css/home.scss

@@ -828,4 +828,14 @@ div,p{
 	.el-radio{
 		margin: 8px 20px 8px 0 !important;
 	}
+}
+
+.img-mid-progress{
+	position: absolute;
+	width: 120px;
+	left: 0;
+	top: 63px;
+	overflow: hidden;
+	right: 0;
+	margin: auto;
 }

src/renderer/components/header.vue

@@ -77,7 +77,7 @@
 				</div>
 				<div class="font-12" style="padding: 20px; margin-bottom: 10px;">
 					<div style="text-align: center; margin-bottom: 10px;">
-						<p style="font-size: 16px;font-weight: 600;color: #f73131;">试用时文字限制在20个以内</p>
+						<p style="font-size: 16px;font-weight: 600;color: #f73131;">非VIP每个图片类型仅下载前5张，图片处理的图片有官方水印</p>
 						<p style="font-size: 14px; font-weight: 600; margin-top: 15px;">开通会员即享以下权益</p>
 					</div>
 					<el-row :gutter="20" class="micon-list">

src/renderer/components/home.vue

@@ -61,7 +61,7 @@
 								</el-row>
 							</div>
 							
-							<div style="padding: 15px 20px 0 20px; height: calc(100% - 160px);">
+							<div style="padding: 20px 20px 0 20px; height: calc(100% - 160px);">
 								<el-row type="flex" justify="space-between">
 									<h3>
 										<span v-if="menuIndex == '1'">阿里巴巴 - </span>
@@ -76,15 +76,17 @@
 								<div style="padding: 15px 0 20px;">
 									<el-row type="flex" justify="space-between">
 										<div v-if="menuIndex == '10'" style="padding-top: 10px;">
-											<el-checkbox :value="true" style="opacity: 0.6; cursor: not-allowed;">下载图片</el-checkbox>
+											<label>下载类型：</label>
+											<el-checkbox :value="true" style="opacity: 0.6; cursor: not-allowed;">图片</el-checkbox>
 										</div>
 										
 										<div v-if="menuIndex < 10" style="padding-top: 10px;">
-											<el-checkbox :value="true" style="opacity: 0.6; cursor: not-allowed;">下载主图</el-checkbox>
-											<el-checkbox v-model="settingData.detailImg" >下载详情图</el-checkbox>
-											<el-checkbox v-model="settingData.skuImg" >下载SKU图</el-checkbox>
-											<el-checkbox v-model="settingData.commentImg" v-if="menuIndex == '3' || menuIndex == '4'">下载评论图</el-checkbox>
-											<el-checkbox v-model="settingData.video" >下载视频</el-checkbox>
+											<label>下载类型：</label>
+											<el-checkbox :value="true" style="opacity: 0.6; cursor: not-allowed;">主图</el-checkbox>
+											<el-checkbox v-model="settingData.detailImg" >详情图</el-checkbox>
+											<el-checkbox v-model="settingData.skuImg" >SKU图</el-checkbox>
+											<el-checkbox v-model="settingData.commentImg" v-if="menuIndex == '3' || menuIndex == '4'">评论图</el-checkbox>
+											<el-checkbox v-model="settingData.video" >视频</el-checkbox>
 										</div>
 										
 										<!-- 天猫/淘宝 -->
@@ -252,6 +254,7 @@
 				checkLoading: false, //点击检测登录状态
 				tbStatus: 1, // 1、未检测 2、已经登录 3、未登录 
 				execLimit: 2,
+				execNum: 5, // 限制5张
 
 			};
 		},
@@ -312,7 +315,7 @@
 				this.menuIndex = index;
 				if(index.indexOf('2-') > -1){
 					let num = Number(index.split('-')[1]);
-					this.$refs.imgRef.menuIndex = num;
+					this.$refs.imgRef.setMenuIndex(num);
 				}
 			},
 			// 选择目录
@@ -569,9 +572,11 @@
 			
 			// 10-普通网址下载
 			async normalDownload(urlInfo){
+				let authority = this.$refs.headerRef.authority.isAuthority;
 				let task = await new Promise((resolve,reject) =>{
 					(async () => {
 						try{
+							let number = 0;
 							urlInfo.status = '2';
 							urlInfo.num = 0;
 							const browser = await puppeteer.launch({
@@ -625,12 +630,23 @@
 									let outputPath = urlInfo.newPath + '\\' + this.randomString(35) + '.' + imgInfo.imgType;
 									
 									urlInfo.status = '3';
+									number++;
+									if(!authority && number <= this.execNum){
+										if(imgInfo.isBase){ //base64位图片下载
+											this.downloadBaseImage(imgInfo.url, outputPath, urlInfo)
+										}else{
+											this.downloadImage(imgInfo.url, outputPath, urlInfo);
+										}
+									}
 									
-									if(imgInfo.isBase){ //base64位图片下载
-										this.downloadBaseImage(imgInfo.url, outputPath, urlInfo)
-									}else{
-										this.downloadImage(imgInfo.url, outputPath, urlInfo);
+									if(authority){
+										if(imgInfo.isBase){ //base64位图片下载
+											this.downloadBaseImage(imgInfo.url, outputPath, urlInfo)
+										}else{
+											this.downloadImage(imgInfo.url, outputPath, urlInfo);
+										}
 									}
+									
 								}
 							});
 
@@ -743,6 +759,7 @@
 			
 			// 京东下载
 			async jdDownload(urlInfo){
+				let authority = this.$refs.headerRef.authority.isAuthority;
 				let task = await new Promise((resolve,reject) =>{
 					(async () => {
 						try{
@@ -821,7 +838,12 @@
 													}
 													
 													let outputPath = urlInfo.newPath + '\\详情图\\' + fileName;
-													await this.downloadImage(imgUrl, outputPath, urlInfo);
+													if(!authority && i < this.execNum){
+														await this.downloadImage(imgUrl, outputPath, urlInfo);
+													}
+													if(authority){
+														await this.downloadImage(imgUrl, outputPath, urlInfo);
+													}
 												}
 											}
 											
@@ -863,6 +885,7 @@
 									let regex = /^https:\/\/img[0-9]+.360buyimg.com\/n/;
 									if(regex.exec(response.url())){ // 匹配符合规则的图片路径
 										if(response.url().indexOf('/s40x40_jfs/') > -1 && this.settingData.skuImg){ // sku图片
+											let skuNum = 0;
 											let skuImgUrl = response.url().replace('/s40x40_jfs/', '/jfs/').replace(/\/n[0-9]+\/jfs\//, '/n1/jfs/').replace('.avif', '');
 											jdImgInfo.skuImg.push(skuImgUrl);
 											
@@ -876,12 +899,19 @@
 													fs.mkdirSync(urlInfo.newPath + '\\sku图');
 												}
 												let outputPath = urlInfo.newPath + '\\sku图\\' + fileName;
-												await this.downloadImage(skuImgUrl, outputPath, urlInfo);
+												skuNum ++;
+												if(!authority && skuNum <= this.execNum){
+													await this.downloadImage(skuImgUrl, outputPath, urlInfo);
+												}
+												if(authority){
+													await this.downloadImage(skuImgUrl, outputPath, urlInfo);
+												}
 											}
 										}
 										let reg = /\/n[0-9]+\/jfs\//;
 										let reg2 = /\/n[0-9]+\/s54x54_jfs\//;
 										if(response.url().match(reg) || response.url().match(reg2)){ // 主图
+											let mainNum = 0;
 											let mainImgUrl = response.url().replace(reg, '/n1/jfs/').replace(reg2, '/n1/jfs/').replace('.avif', '');
 											jdImgInfo.mainImg.push(mainImgUrl);
 											
@@ -895,7 +925,14 @@
 													fs.mkdirSync(urlInfo.newPath + '\\主图');
 												}
 												let outputPath = urlInfo.newPath + '\\主图\\' + fileName;
-												await this.downloadImage(mainImgUrl, outputPath, urlInfo);
+												mainNum ++;
+												if(!authority && mainNum <= this.execNum){
+													await this.downloadImage(mainImgUrl, outputPath, urlInfo);
+												}
+												if(authority){
+													await this.downloadImage(mainImgUrl, outputPath, urlInfo);
+												}
+												
 											}
 											
 										}
@@ -994,6 +1031,7 @@
 			
 			// 淘宝天猫扫描下载图片
 			async tbScanImg(urlInfo){
+				let authority = this.$refs.headerRef.authority.isAuthority;
 				let task = await new Promise((resolve,reject) =>{
 					(async () => {
 						try{
@@ -1064,7 +1102,12 @@
 											if(result){
 												mainImgUrl = mainImgUrl.replace(result[0], '.'+result[1]); 
 											}
-											outObj.mainImg.push(mainImgUrl);
+											if(!authority && i < this.execNum){
+												outObj.mainImg.push(mainImgUrl);
+											}
+											if(authority){
+												outObj.mainImg.push(mainImgUrl);
+											}
 										}
 										//sku图片 
 										let arr2 = document.querySelectorAll('img[class^=SkuContent--valueItemImg--]');
@@ -1077,7 +1120,12 @@
 											if(result){
 												skuImgUrl = skuImgUrl.replace(result[0], '.'+result[1]); 
 											}
-											outObj.skuImg.push(skuImgUrl);
+											if(!authority && i < this.execNum){
+												outObj.skuImg.push(skuImgUrl);
+											}
+											if(authority){
+												outObj.skuImg.push(skuImgUrl);
+											}
 										}
 										//详情图片 
 										let arr3 = document.querySelectorAll('#content img')
@@ -1087,7 +1135,12 @@
 											if(result){
 												detailImgUrl = detailImgUrl.replace(result[0], '.'+result[1]); 
 											}
-											outObj.detailImg.push(detailImgUrl);
+											if(!authority && i < this.execNum){
+												outObj.detailImg.push(detailImgUrl);
+											}
+											if(authority){
+												outObj.detailImg.push(detailImgUrl);
+											}
 										}
 										//评论图片  
 										let arr4 = document.querySelectorAll('div[class^=Comments--comments--] img');
@@ -1096,14 +1149,24 @@
 										}
 										for(let i=0; i< arr4.length; i++){ 
 											if(arr4[i].src.indexOf('/avatar/sns/user/flag/sns_logo') == -1){ //过滤淘宝用户头像
-												outObj.commentImg.push(arr4[i].src);
+												if(!authority && i < this.execNum){
+													outObj.commentImg.push(arr4[i].src);
+												}
+												if(authority){
+													outObj.commentImg.push(arr4[i].src);
+												}
 											}
 										}
 										// 视频
 										let arr5 = document.querySelectorAll('video.lib-video');
 										for(let i=0; i< arr5.length; i++){
 											if(outObj.video.indexOf(arr5[i].src) == -1){
-												outObj.video.push(arr5[i].src);
+												if(!authority && i < this.execNum){
+													outObj.video.push(arr5[i].src);
+												}
+												if(authority){
+													outObj.video.push(arr5[i].src);
+												}
 											}
 										}
 										return outObj;
@@ -1223,6 +1286,7 @@
 			
 			// 阿里巴巴 - 扫描并下载图片
 			async alibabaScanImg(browser, page, urlInfo){
+				let authority = this.$refs.headerRef.authority.isAuthority;
 				//detailImg：详情图；skuImg：sku图片；commentImg: 评论图；video: 视频
 				const imgInfo = await page.evaluate(() => {
 					let outObj = {
@@ -1236,29 +1300,54 @@
 					//主图
 					let arr1 = document.querySelectorAll('img.detail-gallery-img');
 					for(let i=0; i< arr1.length; i++){
-						outObj.mainImg.push(arr1[i].src);
+						if(!authority && i < this.execNum){
+							outObj.mainImg.push(arr1[i].src);
+						}
+						if(authority){
+							outObj.mainImg.push(arr1[i].src);
+						}
 					}
 					//sku图片
 					let arr2 = document.querySelectorAll('.prop-img');
 					for(let i=0; i< arr2.length; i++){
 						let src = window.getComputedStyle(arr2[i]).backgroundImage.replace(/url\(["']?(.+?)["']?\)/i, '$1');
-						outObj.skuImg.push(src);
+						if(!authority && i < this.execNum){
+							outObj.skuImg.push(src);
+						}
+						if(authority){
+							outObj.skuImg.push(src);
+						}
 					}
 					//详情图片 
 					let arr3 = document.querySelectorAll('img.desc-img-loaded');
 					for(let i=0; i< arr3.length; i++){
-						outObj.detailImg.push(arr3[i].src);
+						if(!authority && i < this.execNum){
+							outObj.detailImg.push(arr3[i].src);
+						}
+						if(authority){
+							outObj.detailImg.push(arr3[i].src);
+						}
 					}
 					//评论图片 -- 需要点击切换
 					// let arr4 = document.querySelectorAll('img.image-box');
 					// for(let i=0; i< arr4.length; i++){
-					// 	outObj.commentImg.push(arr4[i].src);
+					// 	if(!authority && i < this.execNum){
+					// 		outObj.commentImg.push(arr4[i].src);
+					// 	}
+					// 	if(authority){
+					// 		outObj.commentImg.push(arr4[i].src);
+					// 	}
 					// }
 					// 视频
 					let arr5 = document.querySelectorAll('video.lib-video');
 					for(let i=0; i< arr5.length; i++){
 						if(outObj.video.indexOf(arr5[i].src) == -1){
-							outObj.video.push(arr5[i].src);
+							if(!authority && i < this.execNum){
+								outObj.video.push(arr5[i].src);
+							}
+							if(authority){
+								outObj.video.push(arr5[i].src);
+							}
 						}
 					}
 					return outObj;
@@ -1541,14 +1630,6 @@
 		font-size: 12px;
 	}
 
-	.soft-content {
-		height: calc(100% - 118px);
-	}
-
-	.handle-label {
-		vertical-align: top;
-	}
-
 	.handle-desc {
 		display: inline-block;
 		width: calc(100% - 100px);

src/renderer/components/img.vue

@@ -25,9 +25,9 @@
 				</el-row>
 			</div>
 			
-			<div v-if="imgList.length == 0" class="upload-area">
-				<div class="file-area" @click="pickFile()" @dragover.prevent @drop="handleDrop">
-					<div>
+			<div v-if="imgList.length == 0" class="upload-area" style="height: calc(100% - 63px);">
+				<div class="file-area" @click="pickFile()" @dragover.prevent @drop="handleDrop" style="height: 100%;">
+					<div class="file-area-pos">
 						<img src="../assets/image/upload.png" style="width: 220px;"/>
 						<p style="font-size: 16px;">将图片文件拖住至此处，或点击此处选择图片</p>
 					</div>
@@ -35,17 +35,46 @@
 			</div>
 			
 			<div class="img-content" style="padding: 20px; height: calc(100% - 62px);" v-else @dragover.prevent @drop="handleDrop">
-				<!-- 1、格式转换 2、图片压缩 3、修改dpi-->
+				<el-row type="flex" justify="space-between">
+					<h3>
+						图片处理 - 
+						<span v-if="menuIndex == 1">格式转换</span>
+						<span v-if="menuIndex == 2">图片压缩</span>
+						<span v-if="menuIndex == 3">修改尺寸</span>
+						<span v-if="menuIndex == 5">添加水印</span>
+					</h3>
+				</el-row>
+				
+				<!-- 1、格式转换 2、图片压缩  -->
 				<template v-if="menuIndex == 1 || menuIndex == 2">
+					<div style="padding: 15px 0 20px;">
+						<!-- 1格式转化 -->
+						<template v-if="menuIndex == 1">
+							<label>输出转换：</label>
+							<el-select v-model="handleData.imgFormat" style="width:100px;" size="mini">
+								<el-option v-for="(item, key) in imgFormat" :key="key" :value="item" :label="item"></el-option>
+							</el-select>
+							<vxe-button v-if="handleData.imgFormat == 'ICO'" type="text" status="info" icon="vxe-icon-info-circle-fill" @click="$message('图标资源ICO有最大尺寸限制,建议尺寸低于512x512')"></vxe-button>
+							<vxe-button v-if="isGif" type="text" status="info" icon="vxe-icon-info-circle-fill" @click="$message('GIF图片默认输出第一帧,多帧输出到单独文件夹中')"></vxe-button>
+							<el-checkbox v-if="isGif" v-model="gifChecked">GIF图片输出所有帧</el-checkbox>
+						</template>
+						<!-- 2图片压缩 -->
+						<template v-if="menuIndex == 2">
+							<label>压缩质量：</label>
+							<el-input-number v-model="handleData.quality" :min="1" :max="100" size="mini"></el-input-number>
+							<el-tag size="mini" type="danger" style="margin-left: 10px;" v-show="menuIndex == 2">质量越低压缩的越小</el-tag>
+						</template>
+					</div>
+					
 					<div style="height: calc(100% - 78px);">
 						<vxe-table ref="xTable" show-overflow class="img-table" max-height="100%" empty-text="没有更多数据了！" :row-config="{isCurrent: true, isHover: true}"
 							:edit-config="{trigger: 'click', mode: 'cell'}" :data="imgList" :scroll-y="{enabled: true}">
 							<vxe-column field="name" :title="'文件名'+'(' + imgList.length + ')'" min-width="120"></vxe-column>
-							<!-- <vxe-column field="path" title="缩略图" width="70">
+							<vxe-column field="path" title="缩略图" width="70">
 								<template #default="{ row }">
 									<el-image style="width: 30px; height: 30px" :src="row.path" fit="contain"></el-image>
 								</template>
-							</vxe-column> -->
+							</vxe-column>
 							<vxe-column field="size" title="大小" min-width="100" max-width="120">
 								<template #default="{ row }">
 									<span v-if="row.width == 0 && row.height == 0">-</span>
@@ -66,7 +95,7 @@
 							</vxe-column>
 							<vxe-column field="action" title="操作" width="80">
 								<template #default="{ row, rowIndex }">
-									<i class="el-icon-delete cur-pointer" @click="delImgFile(rowIndex)"></i>
+									<i style="font-size: 18px;" class="el-icon-delete cur-pointer" @click="delImgFile(rowIndex)"></i>
 								</template>
 							</vxe-column>
 						</vxe-table>
@@ -76,7 +105,7 @@
 				
 				<!-- 3、更改尺寸  5、添加水印 -->
 				<template v-else-if="[3,5].indexOf(menuIndex) > -1">
-					<div class="soft-content" style="padding: 0;">
+					<div class="soft-content" style="padding: 15px 0 0 0; height: calc(100% - 20px);">
 						<div class="content-left" style="width: calc(100% - 270px)">
 							<div class="merge-flex">
 								<div class="merge-scroll">
@@ -213,15 +242,13 @@
 											<el-radio-group class="position-radio" v-model="handleData.watermarkPosition" :style="{width: '120px', color: '#fff'}" @change="handleImg">
 												<el-radio :disabled="handleData.watermarkStyle == '2' && handleData.watermarkType == 1" :style="{margin: '2px 2px 2px 0', fontSize: 0}" v-for="key in watermarkPosition" :key="key" :label="key"></el-radio>
 											</el-radio-group>
-											<div>
-												<div style="padding-bottom: 3px;">
-													<label class="handle-label">水平边距：</label>
-													<el-input-number size="small" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
-												</div>
-												<div>
-													<label class="handle-label">垂直边距：</label>
-													<el-input-number size="small" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
-												</div>
+											<div class="handle-item">
+												<label class="handle-label">水平边距：</label>
+												<el-input-number size="small" v-model="handleData.watermarkX" @change="handleImg" ></el-input-number>
+											</div>
+											<div class="handle-item">
+												<label class="handle-label">垂直边距：</label>
+												<el-input-number size="small" v-model="handleData.watermarkY" @change="handleImg" ></el-input-number>
 											</div>
 										</div>
 									</div>
@@ -231,30 +258,6 @@
 					</div>
 				</template>
 				
-				<!-- 底部设置区域 -->
-				<div class="img-footer-area">
-					<div class="footer-line-between">
-						<!-- 1格式转化 -->
-						<div class="handle-item" v-if="menuIndex == 1">
-							<label class="handle-label">输出转换：</label>
-							<el-select v-model="handleData.imgFormat" style="width:100px;" size="small">
-								<el-option v-for="(item, key) in imgFormat" :key="key" :value="item" :label="item"></el-option>
-							</el-select>
-							<vxe-button v-if="handleData.imgFormat == 'ICO'" type="text" status="info" icon="vxe-icon-info-circle-fill" @click="$message('图标资源ICO有最大尺寸限制,建议尺寸低于512x512')"></vxe-button>
-							<vxe-button v-if="isGif" type="text" status="info" icon="vxe-icon-info-circle-fill" @click="$message('GIF图片默认输出第一帧,多帧输出到单独文件夹中')"></vxe-button>
-							<el-checkbox v-if="isGif" v-model="gifChecked">GIF图片输出所有帧</el-checkbox>
-						</div>
-						<!-- 2图片压缩 -->
-						<div class="handle-item" v-if="menuIndex == 2">
-							<label class="handle-label">压缩质量：</label>
-							<el-input-number v-model="handleData.quality" :min="1" :max="100" size="small"></el-input-number>
-							<el-tag size="mini" type="danger" style="margin-left: 10px;">质量越低压缩的越小</el-tag>
-						</div>
-						
-						<div v-else> </div>
-					</div>
-				</div>
-				
 			</div>
 			
 			<!-- 未登录弹窗 -->
@@ -265,7 +268,7 @@
 					</div>
 					<div class="font-12" style="padding: 20px; margin-bottom: 10px;">
 						<div style="text-align: center; margin-bottom: 10px;">
-							<p style="font-size: 16px;font-weight: 600;color: #f73131;">非VIP导出图片有官方水印，批量命名仅前10张</p>
+							<p style="font-size: 16px;font-weight: 600;color: #f73131;">非VIP导出图片有官方水印</p>
 							<p style="font-size: 14px; font-weight: 600; margin-top: 15px;">开通会员即享以下权益</p>
 						</div>
 						<el-row :gutter="20" class="micon-list">
@@ -1926,4 +1929,15 @@ export default {
 		font-weight: 800;
 		font-size: 16px;
 	}
+	
+	.file-area-pos{
+		position: absolute;
+		width: 400px;
+		height: 330px;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+	}
 </style>