add

src/renderer/components/home.vue

@@ -58,7 +58,7 @@
 										</div>
 									</el-row>
 									
-									<el-row type="flex" style="padding-top: 20px;">
+									<el-row style="padding-top: 20px;">
 										<!-- <div class="set-item">
 											<span class="set-title">导出格式：</span>
 											<el-select style="width:100px;" >
@@ -76,22 +76,26 @@
 											<el-checkbox :value="true" disabled>下载图片</el-checkbox>
 										</template>
 										
-										<!-- 阿里巴巴 -->
-										<template v-if="menuIndex == '1'">
-											<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" >下载评论图</el-checkbox> -->
-											<el-checkbox v-model="settingData.video" >下载视频</el-checkbox>
+										<!-- 天猫/淘宝 -->
+										<template v-if="menuIndex == '3' || menuIndex == '4'">
+											<div>
+												<div style="padding-bottom: 20px;">
+													<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>
 										
-										<template v-if="menuIndex == '2'">
+										<div>
 											<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" >下载评论图</el-checkbox> -->
+											<el-checkbox v-model="settingData.commentImg" v-if="menuIndex == '3' || menuIndex == '4'">下载评论图</el-checkbox>
 											<el-checkbox v-model="settingData.video" >下载视频</el-checkbox>
-										</template>
+										</div>
 										
 									</el-row>
 									
@@ -156,7 +160,7 @@
 				settingData: {
 					detailImg: true,
 					skuImg: true,
-					// commentImg: true,
+					commentImg: true,
 					video: true,
 				},
 				activities: [],
@@ -172,6 +176,8 @@
 				finishModel: false,
 
 				loading: false,
+				checkLoading: false, //点击检测登录状态
+				tbStatus: 1, // 1、未检测 2、已经登录 3、未登录 
 
 			};
 		},
@@ -333,8 +339,6 @@
 						this.jdDownload();
 						break;
 					case '3': // 天猫
-						this.tmallDownload();
-						break;
 					case '4': // 淘宝
 						this.tbDownload();
 						break;
@@ -343,10 +347,9 @@
 						break;
 				}
 				
-				
 				setTimeout(() => {
 					this.loading = false;
-				}, 30000);
+				}, 60000);
 			},
 			
 			// 普通网址下载
@@ -424,7 +427,7 @@
 									behavior: "smooth" 
 								});
 							}, start);
-							if(start > num || start > 500){ // 防止页面过长，滚动500次自动停止
+							if(start > num || start > 200){ // 防止页面过长，滚动200次自动停止
 								clearInterval(scrollInt);
 								await browser.close();
 								this.activities.push({id: 3, content: '图片下载完成',type: 'success'});
@@ -469,9 +472,9 @@
 									behavior: "smooth" 
 								});
 							}, start);
-							if(start > num || start > 500){ // 防止页面过长，滚动500次自动停止
+							if(start > num || start > 200){ // 防止页面过长，滚动200次自动停止
 								clearInterval(scrollInt);
-								await this.scanImg(browser, page);
+								await this.alibabaScanImg(browser, page);
 								this.loading = false;
 							}
 						}, 500);
@@ -489,7 +492,6 @@
 					try{
 						const jdBrowser = await puppeteer.launch();
 						const page = await jdBrowser.newPage();
-						await page.setViewport({ width: 1280, height: 800 });
 						
 						let jdImgInfo = {
 							mainImg: [],
@@ -643,69 +645,283 @@
 				})();
 			},
 			
-			// 天猫下载
-			tmallDownload(){
+			// 检查天猫淘宝登录状态
+			checkLogin(){
+				this.checkLoading = true;
+				this.tbStatus = 1;
+				return new Promise((resolve, reject) => {
+					(async () => {
+						try{
+							const tbBrowser = await puppeteer.launch({
+								userDataDir: os.tmpdir() + separator + 'chrome-data-capture', 
+							});
+							const page = await tbBrowser.newPage();
+							let testUrl = 'https://www.taobao.com';
+							await page.goto(testUrl, {waitUntil : 'networkidle2'});
+							
+							let loginInfo = await page.evaluate(() => {
+								let navTags = document.querySelector('.site-nav-sign a');
+								let userTags = document.querySelector('.site-nav-user a');
+								
+								if(navTags && navTags.innerHTML.indexOf('登录') > -1){
+									return false;
+								}else if(userTags){
+									return true;
+								}else{
+									return false;
+								}
+							});
+							
+							if(loginInfo){
+								this.tbStatus = 2;
+							}else{
+								this.tbStatus = 3;
+							}
+							
+							resolve(this.tbStatus);
+							this.checkLoading = false;
+							tbBrowser.close();
+						}catch(e){
+							reject(3);
+							this.showError(e);
+						}
+					})();
+				});
+				
+			},
+			
+			// 天猫、淘宝去登录
+			tmLogin(){
 				(async () => {
 					try{
-						const jdBrowser = await puppeteer.launch();
-						const page = await jdBrowser.newPage();
+						const tbBrowser = await puppeteer.launch({
+							headless: false,
+							args: ['--window-size=1280,800'],
+							userDataDir: os.tmpdir() + separator + 'chrome-data-capture', 
+						});
+						const page = await tbBrowser.newPage();
 						await page.setViewport({ width: 1280, height: 800 });
+
+						let testUrl = 'https://login.taobao.com';
+						await page.goto(testUrl, {waitUntil : 'networkidle2'});
+
+					}catch(e){
+						this.showError(e);
+					}
+				})();
+			},
+			
+			// 淘宝天猫扫描下载图片
+			tbScanImg(){
+				(async () => {
+					try{
+						const tbBrowser = await puppeteer.launch({
+							userDataDir: os.tmpdir() + separator + 'chrome-data-capture', 
+						});
+						const page = await tbBrowser.newPage();
+						await page.goto(this.url, {waitUntil : 'networkidle2'});
+						await this.getTitle(page); // 生成页面标题对应的文件夹
 						
-						let jdImgInfo = {
-							mainImg: [],
-							skuImg: [],
-							commentImg: [],
-							detailImg: [],
-							video: []
-						};
+						let pageInfo = await page.evaluate(() => {
+							let cHeight = document.documentElement.clientHeight;
+							let scrollHeight = document.body.scrollHeight;
+							return {'scrollHeight': scrollHeight, 'cHeight': cHeight}
+						});
 						
-						let titleFlag = true;
+						let scrollHeight = pageInfo.scrollHeight;
+						let cHeight = pageInfo.cHeight;
 						
-						page.on('response', async(response) => {
-							
-							// if(titleFlag){ // 第一次生成页面标题
-							// 	await this.getTitle(page);
-							// 	titleFlag = false;
-							// }
-							
-							if(this.activities.length < 2){
+						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);
+								
+								//detailImg：详情图；skuImg：sku图片；commentImg: 评论图；video: 视频
+								const imgInfo = await page.evaluate(() => {
+									let outObj = {
+										mainImg: [],
+										detailImg: [],
+										skuImg: [],
+										commentImg: [],
+										video: []
+									};
+									
+									//主图 
+									let arr1 = document.querySelectorAll('img[class^=PicGallery--thumbnailPic--]');
+									for(let i=0; i< arr1.length; i++){
+										outObj.mainImg.push(arr1[i].src);
+									}
+									//sku图片
+									let arr2 = document.querySelectorAll('img[class^=SkuContent--valueItemImg--]');
+									for(let i=0; i< arr2.length; i++){
+										outObj.skuImg.push(arr2[i].src);
+									}
+									//详情图片 
+									let arr3 = document.querySelectorAll('#content img')
+									for(let i=0; i< arr3.length; i++){
+										outObj.detailImg.push(arr3[i].src);
+									}
+									//评论图片  
+									let arr4 = document.querySelectorAll('div[class^=Comments--comments--] img');
+									for(let i=0; i< arr4.length; i++){
+										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);
+										}
+									}
+									return outObj;
+								});
+								
 								this.activities.push({id: 2, num:0, content: '图片下载中...',type: 'success'});
-							}
-						
-							// 检查响应的 MIME 类型是否以 'image/' 开头
-							if (response.headers()['content-type'] && response.headers()['content-type'].startsWith('application/json')) {
 								
-								let data = await response.text();
-								console.log(data);
 								
 								
-							}
-							
-							if (response.headers()['content-type'] && response.headers()['content-type'].startsWith('image/')) {
+								// 主图下载
+								for(let j = 0; j < imgInfo.mainImg.length; j++){
+									let fileName = imgInfo.mainImg[j].split('/').pop();
+									if(fileName){
+										var queryIndex = fileName.indexOf('?');
+										if (queryIndex !== -1) {
+											fileName = fileName.substr(0, queryIndex);  
+										}
+										
+										if (!fs.existsSync(this.handleData.newPath + '\\主图')) {
+											fs.mkdirSync(this.handleData.newPath + '\\主图');
+										}
+										
+										let outputPath = this.handleData.newPath + '\\主图\\' + fileName;
+										await this.downloadImage(imgInfo.mainImg[j], outputPath);
+									}
+								}
+								
+								// sku图片下载
+								if(this.settingData.skuImg){
+									for(let j = 0; j < imgInfo.skuImg.length; j++){
+										let fileName = imgInfo.skuImg[j].split('/').pop();
+										if(fileName){
+											var queryIndex = fileName.indexOf('?');
+											if (queryIndex !== -1) {
+												fileName = fileName.substr(0, queryIndex);  
+											}
+											
+											if (!fs.existsSync(this.handleData.newPath + '\\sku图')) {
+												fs.mkdirSync(this.handleData.newPath + '\\sku图');
+											}
+											
+											let outputPath = this.handleData.newPath + '\\sku图\\' + fileName;
+											await this.downloadImage(imgInfo.skuImg[j], outputPath);
+										}
+									}
+								}
+								
+								//详情图下载
+								if(this.settingData.detailImg){
+									for(let j = 0; j < imgInfo.detailImg.length; j++){
+										let fileName = imgInfo.detailImg[j].split('/').pop();
+										if(fileName){
+											var queryIndex = fileName.indexOf('?');
+											if (queryIndex !== -1) {
+												fileName = fileName.substr(0, queryIndex);  
+											}
+											
+											if (!fs.existsSync(this.handleData.newPath + '\\详情图')) {
+												fs.mkdirSync(this.handleData.newPath + '\\详情图');
+											}
+											
+											let outputPath = this.handleData.newPath + '\\详情图\\' + fileName;
+											await this.downloadImage(imgInfo.detailImg[j], outputPath);
+										}
+									}
+								}
+								
+								//评论图下载
+								if(this.settingData.commentImg){
+									for(let j = 0; j < imgInfo.commentImg.length; j++){
+										let fileName = imgInfo.commentImg[j].split('/').pop();
+										if(fileName){
+											var queryIndex = fileName.indexOf('?');
+											if (queryIndex !== -1) {
+												fileName = fileName.substr(0, queryIndex);  
+											}
+											
+											if (!fs.existsSync(this.handleData.newPath + '\\评论图')) {
+												fs.mkdirSync(this.handleData.newPath + '\\评论图');
+											}
+											
+											let outputPath = this.handleData.newPath + '\\评论图\\' + fileName;
+											await this.downloadImage(imgInfo.commentImg[j], outputPath);
+										}
+									}
+								}
 								
+								//视频下载
+								if(this.settingData.video){
+									for(let j = 0; j < imgInfo.video.length; j++){
+										let fileName = imgInfo.video[j].split('/').pop();
+										if(fileName){
+											var queryIndex = fileName.indexOf('?');
+											if (queryIndex !== -1) {
+												fileName = fileName.substr(0, queryIndex);  
+											}
+											
+											if (!fs.existsSync(this.handleData.newPath + '\\视频')) {
+												fs.mkdirSync(this.handleData.newPath + '\\视频');
+											}
+											
+											let outputPath = this.handleData.newPath + '\\视频\\' + fileName;
+											await this.downloadImage(imgInfo.video[j], outputPath);
+										}
+									}
+								}
+								
+								await tbBrowser.close();
+								this.activities.push({id: 3, content: '图片下载完成',type: 'success'});
+								
+								this.loading = false;
 							}
-							
-						});
-						
-						let testUrl = 'https://detail.tmall.com/item.htm?id=666055276707&spm=a21bo.jianhua%2Fa.201876.d9.5af92a895n1RYy&scm=1007.40986.276750.0&pvid=5feff41b-7992-483e-96dc-b87acafa1ea9&xxc=home_recommend&utparam=%7B%22aplus_abtest%22%3A%22b579fe12b84b34042c867320618f0c6b%22%7D&priceTId=2147807217241454856155439e67b8&pisk=fG5xstAYAuqDq32GGZwksGpFOMUo6sQqmi7IshxmCgIRRwoDCh2VXdIG4d1DiZj-u_IKsjq43NG9sCZ3xWVhurRw1k2muoem0E8K15x6fLGYU_n7xWVhy-T2saZ37kskZH8M1E9jhbaJSeGs1G9sNaty7FiX5jaRP3861F9shagWoFTsfxG5tlKSlhcOChxReugMGfG1G5JvvLDi6fdXlKC1z3BlE_LvHH9uKDcNGgb1isJzEYRNr9IOCGynUIQ1hIThuShJOZ6l6UfgSAKfr_Q5ML3K9KB6WpO6eVG1yI6DFsAQO0LPFZX1gi3t1E5ctdKeePGwIQ1Hd9sx7y7WGFswL1qEgn_186WH97DXOaB1vOIPf6fLn-oHvFDbyzHZQKTojP1_90ukYHYJxrFtQAJzzUK3yzHZQKTyyH4YDAkwUz5..';
-						
-						await page.goto(testUrl, {waitUntil : 'networkidle2'});
-						
-						await jdBrowser.close();
-						this.activities.push({id: 3, content: '图片下载完成',type: 'success'});
+						}, 500);
 					}catch(e){
 						this.showError(e);
 					}
 				})();
 			},
 			
-			//淘宝下载
+			//淘宝\天猫下载
 			tbDownload(){
-				
+				if(this.tbStatus == 1){  // 未检测登录状态，开始检测
+					this.checkLogin().then((data) => {
+						if(data == 2){ // 已经登录，处理下载
+							this.tbScanImg();
+						}else{ // 未登录
+							this.activities.push({id: 4, content: '淘宝/天猫账号未登录，下载失败!',type: 'error'});
+						}
+					}).catch(err => {
+						this.tbStatus = 3;
+					});
+				}else if(this.tbStatus == 2){ // 已经登录
+					this.tbScanImg();
+				}else if(this.tbStatus == 3){ // 未登录
+					this.$notify.error({
+						title: '请先登录淘宝/天猫账号后使用!'
+					});
+				}
 			},
 			
 			// 阿里巴巴 - 扫描并下载图片
-			async scanImg(browser, page){
+			async alibabaScanImg(browser, page){
 				//detailImg：详情图；skuImg：sku图片；commentImg: 评论图；video: 视频
 				const imgInfo = await page.evaluate(() => {
 					let outObj = {