add

src/renderer/components/home.vue

@@ -44,7 +44,17 @@
 										@click="clearList()">清空链接</el-button>
 								</el-button-group>
 								
-								<el-button type="danger" @click="exportFile()" :loading="loading">开始下载</el-button>
+								<el-row type="flex" style="align-items: center;">
+									<div class="set-item">
+										<span class="set-title">保存目录：</span>
+										<el-input :title="downloadDir" ref="upload-input" size="mini" @focus="pickPath" placeholder="请选择输出目录" v-model="downloadDir" readonly style="width:200px;" prefix-icon="el-icon-folder"></el-input>
+										<el-popover placement="bottom" popper-class="popper-open" trigger="hover" content="打开保存目录">
+											<i class="el-icon-folder-opened" slot="reference" style="padding-left: 5px; cursor: pointer; font-size: 22px; vertical-align: middle;" @click="openFolder()"></i>
+										</el-popover>
+									</div>
+									
+									<el-button type="danger" @click="exportFile()" :loading="loading">开始下载</el-button>
+								</el-row>
 							</div>
 							
 							<div style="padding: 15px 20px 0 20px; height: calc(100% - 160px);">
@@ -57,37 +67,17 @@
 										<span v-if="menuIndex == '10'">网页 - </span>
 										图片下载
 									</h3>
-									
-									<!-- 天猫/淘宝 -->
-									<template v-if="menuIndex == '3' || menuIndex == '4'">
-										<div>
-											<div>
-												<el-button size="mini" type="warning" :loading="checkLoading" style="margin-right: 20px;" :disabled='tbStatus == 2' @click="checkLogin">检测登录状态</el-button>
-												<el-tag type="info" size="mini" v-if="tbStatus == 1">未检测</el-tag>
-												<el-tag type="success" size="mini" v-if="tbStatus == 2">账号已登录</el-tag>
-												<el-link type="danger" v-if="tbStatus == 3">未登录，点我去登录</el-link>
-											</div>
-										</div>
-									</template>
-									
-									<div class="set-item">
-										<span class="set-title">保存目录：</span>
-										<el-input :title="downloadDir" ref="upload-input" size="mini" @focus="pickPath" placeholder="请选择输出目录" v-model="downloadDir" readonly style="width:260px;" prefix-icon="el-icon-folder"></el-input>
-										<el-popover placement="bottom" popper-class="popper-open" trigger="hover" content="打开保存目录">
-											<i class="el-icon-folder-opened" slot="reference" style="padding-left: 5px; cursor: pointer; font-size: 22px; vertical-align: middle;" @click="openFolder()"></i>
-										</el-popover>
-									</div>
 								</el-row>
 								
 								<!-- <el-input type="textarea" :rows="5" :placeholder="'请输入网址链接(例:' + exampleUrl[menuIndex-1] + ')'" v-model="url"></el-input> -->
 								
 								<div style="padding: 15px 0 20px;">
-									<el-row>
-										<template v-if="menuIndex == '10'">
+									<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>
-										</template>
+										</div>
 										
-										<div v-if="menuIndex < 10">
+										<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>
@@ -95,6 +85,18 @@
 											<el-checkbox v-model="settingData.video" >下载视频</el-checkbox>
 										</div>
 										
+										<!-- 天猫/淘宝 -->
+										<template v-if="menuIndex == '3' || menuIndex == '4'">
+											<div>
+												<div>
+													<el-tag type="info" size="mini" v-if="tbStatus == 1">未检测</el-tag>
+													<el-tag type="success" size="mini" v-if="tbStatus == 2">账号已登录</el-tag>
+													<el-link type="danger" v-if="tbStatus == 3" @click="tmLogin">未登录，点我去登录</el-link>
+													<el-button size="mini" type="warning" :loading="checkLoading" style="margin-left: 10px;" :disabled='tbStatus == 2' @click="checkLogin">检测登录状态</el-button>
+												</div>
+											</div>
+										</template>
+										
 									</el-row>
 									
 									<!-- <div style="width: 50%;">
@@ -363,10 +365,10 @@
 						this.jdList = [];
 						break;
 					case '3':
-						this.tbList = [];
+						this.tmallList = [];
 						break;
 					case '4':
-						this.tmallList = [];
+						this.tbList = [];
 						break;
 					case '10':
 						this.commonList = [];
@@ -392,10 +394,10 @@
 								this.jdList.push(info);
 								break;
 							case '3':
-								this.tbList.push(info);
+								this.tmallList.push(info);
 								break;
 							case '4':
-								this.tmallList.push(info);
+								this.tbList.push(info);
 								break;
 							case '10':
 								this.commonList.push(info);
@@ -464,6 +466,7 @@
 						break;
 					case '3': // 天猫
 						fileList = this.tmallList;
+						break;
 					case '4': // 淘宝
 						fileList = this.tbList;
 						break;
@@ -683,6 +686,7 @@
 							
 							let num = Math.ceil(scrollHeight / cHeight);
 							let start = -1;
+							urlInfo.status = '3';
 							let scrollInt = setInterval(async() => {
 								start ++;
 								await page.evaluate((start) => {
@@ -694,7 +698,6 @@
 								}, start);
 								if(start > num || start > 200){ // 防止页面过长，滚动200次自动停止
 									clearInterval(scrollInt);
-									urlInfo.status = '3';
 									await this.alibabaScanImg(browser, page, urlInfo);
 									this.loading = false;
 									urlInfo.status = '4';
@@ -955,231 +958,253 @@
 				})();
 			},
 			
+			//淘宝\天猫下载
+			async tbDownload(urlInfo){
+				let task = null;
+				if(this.tbStatus == 1){  // 未检测登录状态，开始检测
+					await this.checkLogin().then((data) => {
+						if(data == 2){ // 已经登录，处理下载
+							task = this.tbScanImg(urlInfo);
+						}else{ // 未登录
+							this.tbStatus = 3;
+							this.$notify.error({
+								title: '淘宝/天猫账号未登录，下载失败!',
+								message: str
+							});
+						}
+					}).catch(err => {
+						this.tbStatus = 3;
+					});
+				}else if(this.tbStatus == 2){ // 已经登录
+					task = this.tbScanImg(urlInfo);
+				}else if(this.tbStatus == 3){ // 未登录
+					this.$notify.error({
+						title: '请先登录淘宝/天猫账号后使用!'
+					});
+				}
+				
+				return task;
+			},
+			
 			// 淘宝天猫扫描下载图片
-			tbScanImg(urlInfo){
-				(async () => {
-					try{
-						const tbBrowser = await puppeteer.launch({
-							userDataDir: os.tmpdir() + separator + 'chrome-data-capture', 
-						});
-						const page = await tbBrowser.newPage();
-						await page.goto(urlInfo, {waitUntil : 'networkidle2'});
-						await this.getTitle(page, urlInfo); // 生成页面标题对应的文件夹
-						
-						let pageInfo = await page.evaluate(() => {
-							let cHeight = document.documentElement.clientHeight;
-							let scrollHeight = document.body.scrollHeight;
-							return {'scrollHeight': scrollHeight, 'cHeight': cHeight}
-						});
-						
-						let scrollHeight = pageInfo.scrollHeight;
-						let cHeight = pageInfo.cHeight;
-						
-						let num = Math.ceil(scrollHeight / cHeight);
-						let start = -1;
-						let scrollInt = setInterval(async() => {
-							start ++;
-							await page.evaluate((start) => {
+			async tbScanImg(urlInfo){
+				let task = await new Promise((resolve,reject) =>{
+					(async () => {
+						try{
+							urlInfo.status = '2';
+							urlInfo.num = 0;
+							const tbBrowser = await puppeteer.launch({
+								userDataDir: os.tmpdir() + separator + 'chrome-data-capture', 
+							});
+							const page = await tbBrowser.newPage();
+							await page.goto(urlInfo.url, {waitUntil : 'networkidle2'});
+							
+							if(urlInfo.title){
+								if (fs.existsSync(this.downloadDir + separator + pjson.softInfo.softName + separator + urlInfo.title)) {
+									urlInfo.newPath = this.downloadDir + separator + pjson.softInfo.softName + separator + urlInfo.title;
+								} else {
+									fs.mkdirSync(this.downloadDir + separator + pjson.softInfo.softName + separator + urlInfo.title);
+									urlInfo.newPath = this.downloadDir + separator + pjson.softInfo.softName + separator + urlInfo.title;
+								}
+							}else{
+								await this.getTitle(page, urlInfo); // 生成页面标题对应的文件夹
+							}
+							
+							let pageInfo = await page.evaluate(() => {
 								let cHeight = document.documentElement.clientHeight;
-								window.scrollTo({
-									top: cHeight * start, 
-									behavior: "smooth" 
-								});
-							}, start);
-							if(start > num || start > 200){ // 防止页面过长，滚动200次自动停止
-								clearInterval(scrollInt);
-								
-								//detailImg：详情图；skuImg：sku图片；commentImg: 评论图；video: 视频
-								const imgInfo = await page.evaluate(() => {
-									let outObj = {
-										mainImg: [],
-										detailImg: [],
-										skuImg: [],
-										commentImg: [],
-										video: []
-									};
-									
-									// 正则表达式匹配字符 重写图片路径
-									let regex = /\.(.{3,4})_[0-9a-zA-z]+\.(.{3,4})_\.(.{3,4})/;
+								let scrollHeight = document.body.scrollHeight;
+								return {'scrollHeight': scrollHeight, 'cHeight': cHeight}
+							});
+							
+							urlInfo.status = '3';
+							
+							let scrollHeight = pageInfo.scrollHeight;
+							let cHeight = pageInfo.cHeight;
+							
+							let num = Math.ceil(scrollHeight / cHeight);
+							let start = -1;
+							let scrollInt = setInterval(async() => {
+								start ++;
+								await page.evaluate((start) => {
+									let cHeight = document.documentElement.clientHeight;
+									window.scrollTo({
+										top: cHeight * start, 
+										behavior: "smooth" 
+									});
+								}, start);
+								if(start > num || start > 200){ // 防止页面过长，滚动200次自动停止
+									clearInterval(scrollInt);
 									
-									//主图 
-									let arr1 = document.querySelectorAll('img[class^=PicGallery--thumbnailPic--]');
-									for(let i=0; i< arr1.length; i++){
-										let mainImgUrl = arr1[i].src;
-										let result = regex.exec(mainImgUrl);
-										if(result){
-											mainImgUrl = mainImgUrl.replace(result[0], '.'+result[1]); 
-										}
-										outObj.mainImg.push(mainImgUrl);
-									}
-									//sku图片 
-									let arr2 = document.querySelectorAll('img[class^=SkuContent--valueItemImg--]');
-									for(let i=0; i< arr2.length; i++){
-										let skuImgUrl = arr2[i].src;
-										let result = regex.exec(skuImgUrl);
-										if(result){
-											skuImgUrl = skuImgUrl.replace(result[0], '.'+result[1]); 
-										}
-										outObj.skuImg.push(skuImgUrl);
-									}
-									//详情图片 
-									let arr3 = document.querySelectorAll('#content img')
-									for(let i=0; i< arr3.length; i++){
-										let detailImgUrl = arr3[i].src;
-										let result = regex.exec(detailImgUrl);
-										if(result){
-											detailImgUrl = detailImgUrl.replace(result[0], '.'+result[1]); 
+									//detailImg：详情图；skuImg：sku图片；commentImg: 评论图；video: 视频
+									const imgInfo = await page.evaluate(() => {
+										let outObj = {
+											mainImg: [],
+											detailImg: [],
+											skuImg: [],
+											commentImg: [],
+											video: []
+										};
+										
+										// 正则表达式匹配字符 重写图片路径
+										let regex = /\.(.{3,4})_[0-9a-zA-z]+\.(.{3,4})_\.(.{3,4})/;
+										
+										//主图 
+										let arr1 = document.querySelectorAll('img[class^=PicGallery--thumbnailPic--]');
+										for(let i=0; i< arr1.length; i++){
+											let mainImgUrl = arr1[i].src;
+											let result = regex.exec(mainImgUrl);
+											if(result){
+												mainImgUrl = mainImgUrl.replace(result[0], '.'+result[1]); 
+											}
+											outObj.mainImg.push(mainImgUrl);
 										}
-										outObj.detailImg.push(detailImgUrl);
-									}
-									//评论图片  
-									let arr4 = document.querySelectorAll('div[class^=Comments--comments--] img');
-									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);
+										//sku图片 
+										let arr2 = document.querySelectorAll('img[class^=SkuContent--valueItemImg--]');
+										for(let i=0; i< arr2.length; i++){
+											let skuImgUrl = arr2[i].src;
+											let result = regex.exec(skuImgUrl);
+											if(result){
+												skuImgUrl = skuImgUrl.replace(result[0], '.'+result[1]); 
+											}
+											outObj.skuImg.push(skuImgUrl);
 										}
-									}
-									// 视频
-									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);
+										//详情图片 
+										let arr3 = document.querySelectorAll('#content img')
+										for(let i=0; i< arr3.length; i++){
+											let detailImgUrl = arr3[i].src;
+											let result = regex.exec(detailImgUrl);
+											if(result){
+												detailImgUrl = detailImgUrl.replace(result[0], '.'+result[1]); 
+											}
+											outObj.detailImg.push(detailImgUrl);
 										}
-									}
-									return outObj;
-								});
-								
-								this.activities.push({id: 2, num:0, content: '图片下载中...',type: 'success'});
-								
-								// 主图下载
-								for(let j = 0; j < imgInfo.mainImg.length; j++){
-									let fileName = imgInfo.mainImg[j].split('/').pop();
-									if(fileName){
-										let queryIndex = fileName.indexOf('?');
-										if (queryIndex !== -1) {
-											fileName = fileName.substr(0, queryIndex);  
+										//评论图片  
+										let arr4 = document.querySelectorAll('div[class^=Comments--comments--] img');
+										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 (!fs.existsSync(urlInfo.newPath + '\\主图')) {
-											fs.mkdirSync(urlInfo.newPath + '\\主图');
+										// 视频
+										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);
+											}
 										}
-										
-										let outputPath = urlInfo.newPath + '\\主图\\' + fileName;
-										await this.downloadImage(imgInfo.mainImg[j], outputPath, urlInfo);
-									}
-								}
-								
-								// sku图片下载
-								if(this.settingData.skuImg){
-									for(let j = 0; j < imgInfo.skuImg.length; j++){
-										let fileName = imgInfo.skuImg[j].split('/').pop();
+										return outObj;
+									});
+									
+									// 主图下载
+									for(let j = 0; j < imgInfo.mainImg.length; j++){
+										let fileName = imgInfo.mainImg[j].split('/').pop();
 										if(fileName){
 											let queryIndex = fileName.indexOf('?');
 											if (queryIndex !== -1) {
 												fileName = fileName.substr(0, queryIndex);  
 											}
 											
-											if (!fs.existsSync(urlInfo.newPath + '\\sku图')) {
-												fs.mkdirSync(urlInfo.newPath + '\\sku图');
+											if (!fs.existsSync(urlInfo.newPath + '\\主图')) {
+												fs.mkdirSync(urlInfo.newPath + '\\主图');
 											}
 											
-											let outputPath = urlInfo.newPath + '\\sku图\\' + fileName;
-											await this.downloadImage(imgInfo.skuImg[j], outputPath, urlInfo);
+											let outputPath = urlInfo.newPath + '\\主图\\' + fileName;
+											await this.downloadImage(imgInfo.mainImg[j], outputPath, urlInfo);
 										}
 									}
-								}
-								
-								//详情图下载
-								if(this.settingData.detailImg){
-									for(let j = 0; j < imgInfo.detailImg.length; j++){
-										let fileName = imgInfo.detailImg[j].split('/').pop();
-										if(fileName){
-											let queryIndex = fileName.indexOf('?');
-											if (queryIndex !== -1) {
-												fileName = fileName.substr(0, queryIndex);  
-											}
-											
-											if (!fs.existsSync(urlInfo.newPath + '\\详情图')) {
-												fs.mkdirSync(urlInfo.newPath + '\\详情图');
+									
+									// sku图片下载
+									if(this.settingData.skuImg){
+										for(let j = 0; j < imgInfo.skuImg.length; j++){
+											let fileName = imgInfo.skuImg[j].split('/').pop();
+											if(fileName){
+												let queryIndex = fileName.indexOf('?');
+												if (queryIndex !== -1) {
+													fileName = fileName.substr(0, queryIndex);  
+												}
+												
+												if (!fs.existsSync(urlInfo.newPath + '\\sku图')) {
+													fs.mkdirSync(urlInfo.newPath + '\\sku图');
+												}
+												
+												let outputPath = urlInfo.newPath + '\\sku图\\' + fileName;
+												await this.downloadImage(imgInfo.skuImg[j], outputPath, urlInfo);
 											}
-											
-											let outputPath = urlInfo.newPath + '\\详情图\\' + fileName;
-											await this.downloadImage(imgInfo.detailImg[j], outputPath, urlInfo);
 										}
 									}
-								}
-								
-								//评论图下载
-								if(this.settingData.commentImg){
-									for(let j = 0; j < imgInfo.commentImg.length; j++){
-										let fileName = imgInfo.commentImg[j].split('/').pop();
-										if(fileName){
-											let queryIndex = fileName.indexOf('?');
-											if (queryIndex !== -1) {
-												fileName = fileName.substr(0, queryIndex);  
-											}
-											
-											if (!fs.existsSync(urlInfo.newPath + '\\评论图')) {
-												fs.mkdirSync(urlInfo.newPath + '\\评论图');
+									
+									//详情图下载
+									if(this.settingData.detailImg){
+										for(let j = 0; j < imgInfo.detailImg.length; j++){
+											let fileName = imgInfo.detailImg[j].split('/').pop();
+											if(fileName){
+												let queryIndex = fileName.indexOf('?');
+												if (queryIndex !== -1) {
+													fileName = fileName.substr(0, queryIndex);  
+												}
+												
+												if (!fs.existsSync(urlInfo.newPath + '\\详情图')) {
+													fs.mkdirSync(urlInfo.newPath + '\\详情图');
+												}
+												
+												let outputPath = urlInfo.newPath + '\\详情图\\' + fileName;
+												await this.downloadImage(imgInfo.detailImg[j], outputPath, urlInfo);
 											}
-											
-											let outputPath = urlInfo.newPath + '\\评论图\\' + fileName;
-											await this.downloadImage(imgInfo.commentImg[j], outputPath, urlInfo);
 										}
 									}
-								}
-								
-								//视频下载
-								if(this.settingData.video){
-									for(let j = 0; j < imgInfo.video.length; j++){
-										let fileName = imgInfo.video[j].split('/').pop();
-										if(fileName){
-											let queryIndex = fileName.indexOf('?');
-											if (queryIndex !== -1) {
-												fileName = fileName.substr(0, queryIndex);  
+									
+									//评论图下载
+									if(this.settingData.commentImg){
+										for(let j = 0; j < imgInfo.commentImg.length; j++){
+											let fileName = imgInfo.commentImg[j].split('/').pop();
+											if(fileName){
+												let queryIndex = fileName.indexOf('?');
+												if (queryIndex !== -1) {
+													fileName = fileName.substr(0, queryIndex);  
+												}
+												
+												if (!fs.existsSync(urlInfo.newPath + '\\评论图')) {
+													fs.mkdirSync(urlInfo.newPath + '\\评论图');
+												}
+												
+												let outputPath = urlInfo.newPath + '\\评论图\\' + fileName;
+												await this.downloadImage(imgInfo.commentImg[j], outputPath, urlInfo);
 											}
-											
-											if (!fs.existsSync(urlInfo.newPath + '\\视频')) {
-												fs.mkdirSync(urlInfo.newPath + '\\视频');
+										}
+									}
+									
+									//视频下载
+									if(this.settingData.video){
+										for(let j = 0; j < imgInfo.video.length; j++){
+											let fileName = imgInfo.video[j].split('/').pop();
+											if(fileName){
+												let queryIndex = fileName.indexOf('?');
+												if (queryIndex !== -1) {
+													fileName = fileName.substr(0, queryIndex);  
+												}
+												
+												if (!fs.existsSync(urlInfo.newPath + '\\视频')) {
+													fs.mkdirSync(urlInfo.newPath + '\\视频');
+												}
+												
+												let outputPath = urlInfo.newPath + '\\视频\\' + fileName;
+												await this.downloadImage(imgInfo.video[j], outputPath, urlInfo);
 											}
-											
-											let outputPath = urlInfo.newPath + '\\视频\\' + fileName;
-											await this.downloadImage(imgInfo.video[j], outputPath, urlInfo);
 										}
 									}
+									
+									await tbBrowser.close();
+									urlInfo.status = '4';
+									resolve(true);
+									this.loading = false;
 								}
-								
-								await tbBrowser.close();
-								this.activities.push({id: 3, content: '图片下载完成',type: 'success'});
-								
-								this.loading = false;
-							}
-						}, 500);
-					}catch(e){
-						this.showError(e);
-					}
-				})();
-			},
-			
-			//淘宝\天猫下载
-			tbDownload(urlInfo){
-				if(this.tbStatus == 1){  // 未检测登录状态，开始检测
-					this.checkLogin().then((data) => {
-						if(data == 2){ // 已经登录，处理下载
-							this.tbScanImg(urlInfo);
-						}else{ // 未登录
-							this.activities.push({id: 4, content: '淘宝/天猫账号未登录，下载失败!',type: 'error'});
+							}, 500);
+						}catch(e){
+							reject(e);
+							this.showError(e);
 						}
-					}).catch(err => {
-						this.tbStatus = 3;
-					});
-				}else if(this.tbStatus == 2){ // 已经登录
-					this.tbScanImg(urlInfo);
-				}else if(this.tbStatus == 3){ // 未登录
-					this.$notify.error({
-						title: '请先登录淘宝/天猫账号后使用!'
-					});
-				}
+					})();
+				});
 			},
 			
 			// 阿里巴巴 - 扫描并下载图片
@@ -1418,7 +1443,6 @@
 					str = e.toString();
 					console.log(e);
 				}
-				this.activities.push({id: 4, content: '下载任务失败请重试!',type: 'error'});
 				this.loading = false;
 				this.$notify.error({
 					title: '错误',