xy-capture/src/renderer/components/update.vue

<template>
    <div>
		<div :style="{background: '#fafafa', padding: '5px 20px', lineHeight: '34px'}" class="footer-between">
		    <div>
				<span style="color: #F56C6C;" @click="questionVisible = true" class="footer-menu"><i class="iconfont iconx-yiwen"></i>常见问题</span>
				<span @click="mianVisible = true" class="footer-menu"><i class="iconfont iconx-mianze-01"></i>免责声明</span>
		        <a href="https://www.xingyousoft.com"><span class="footer-menu"><i class="iconfont iconx-wangzhi"></i>官网</span></a>
		    </div>
			
			<div>
				<span v-if="linkList.length > 0" class="footer-menu" style="padding: 0;cursor:default;"><i class="iconfont iconx-lianjie"></i>应用推荐：</span>
				<a v-for="(item, key) in linkList" :key="key" @click="openUrl(item.url)"><span class="footer-menu">{{item.title}}</span></a>
			</div>
			
		    <div style="cursor:pointer;position: relative;font-size: 13px;" >
				<el-popover placement="bottom" width="200" trigger="click" popper-class="wei-dialog">
				    <a slot="reference"><span class="footer-menu"><i class="iconfont iconx-qiyeweixin"></i>客服</span></a>
					<div class="api">
						<img src="../assets/image/qrcode.png" style="width: 100%;"/>
					</div>
				</el-popover>
		        <span @click="updateSoft()">
					<el-badge is-dot v-if="isUpdate">
						<i class="el-icon-refresh-right" style="font-size: 20px;"></i>
					</el-badge>
					版本：v{{softInfo.version}}
				</span>
		    </div>
		</div>
        <!-- 下载进度 -->
		<el-dialog title="软件更新" :visible.sync="isShow" width="400px" :show-close="false">
			<div style="text-align: center;">
				<div class="demo-Circle-custom" style="margin-bottom: 10px;">
					文件大小：<i>{{$utils.handleSize(Number(softInfo.totalSize))}}</i>
				</div>
				<el-progress :text-inside="true" :stroke-width="30" :percentage="Number(softInfo.percent)"></el-progress>
				<div>
					<el-button type="primary" style="margin-top: 30px;" @click="isShow = false">后台下载</el-button>
				</div>
			</div>
		</el-dialog>

        <!-- 下载完成 -->
		<el-dialog title="下载完成,是否退出并安装" :visible.sync="isFinished" width="400px" :close-on-click-modal="false">
			<p>文件下载位置{{softdownloadDir}}</p>
			<span slot="footer" class="dialog-footer">
				<el-button @click="isFinished = false">取 消</el-button>
				<el-button type="primary" @click="execSoft()">确 定</el-button>
			</span>
		</el-dialog>
		
		<!-- 免责声明 -->
		<el-dialog title="免责声明" :visible.sync="mianVisible" width="700px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<div style="color: #666; font-size: 14px; line-height: 1.5;">
				<p>所有使用{{softInfo.softName}}的用户(以下简称用户)在使用{{softInfo.softName}}(以下简称本软件)前必须阅读并同意本声明中的条款。否则，无权使用本软件。</p>
				<p class="mian-title">1、法律合规性:</p>
				<p>用户必须确保在使用本软件时，严格遵守国家及地方的法律法规，包括但不限于《中华人民共和国计算机信息网络国际联网管理暂行规定》等相关规定。
				不得利用本软件非法访问或使用任何网站、系统或数据，以免触犯法律，导致法律责任。</p>
				<p class="mian-title">2、使用风险与后果：</p>
				<p>用户需自行承担因使用本软件而产生的所有风险和后果，包括但不限于下载失败、数据丢失、网站账号被封禁等。本软件不对任何因使用本软件而导致的直接或间接损失负责。<p>
				<p class="mian-title">3、合理使用与道德约束：</p>
				<p>用户从自己的网店或网址中提取图片、视频，不得用于任何违法、不道德或侵犯他人权益的目的。在使用过程中，应控制访问频率，避免对目标网站服务器造成过大负荷，影响网站正常运营，请用户自觉遵守他人的知识产权，不要使用未经授权的图片、商标等。</p>
				<p class="mian-title">4、免责条款：</p>
				<p>在任何情况下，本软件开发商均不对因使用本软件而产生的任何损失承担责任，包括但不限于直接经济损失、商誉损失、数据丢失等。</p>
			</div>
			<div slot="footer" class="dialog-footer-center">
				<el-button @click="mianVisible = false;">同意并使用</el-button>
			</div>
		</el-dialog>
		
		<!-- 常见问题 -->
		<el-dialog title="常见问题" :visible.sync="questionVisible" width="700px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
			<el-collapse accordion>
				<el-collapse-item title="1、阿里巴巴下载时生成验证码拦截文件夹或文件夹内容为空" name="1">
					<div>点击软件右上角菜单按钮，选择软件设置-账号登录，点击阿里巴巴账号，浏览器打开后登录阿里巴巴账号，登录完成后关闭浏览器即可正常使用。</div>
				</el-collapse-item>
				<el-collapse-item title="2、网络图片访问异常 -1 或 -2" name="2">
					<div>网页中可能存在网络图片无法加载的情况，会过滤掉无法下载的图片</div>
				</el-collapse-item>
				<el-collapse-item title="3、账号登陆后,下载任务显示处理中没反应" name="3">
					<div>查看任务栏是否关闭该浏览器 <img style="width: 20px;" src="../assets/image/chromium.png" />，如未关闭请关闭浏览器后重新下载。</div>
				</el-collapse-item>
				<el-collapse-item title="4、关闭浏览器后,下载任务显示处理中仍没反应" name="4">
					<div>可能出现官网拦截，出现请拖动滑块还原拼图的情况，点击软件右上角菜单按钮，选择软件设置-账号登录，点击对应的淘宝/天猫账号，浏览器打开后手动拖动还原拼图拦截，完成后关闭浏览器即可正常使用。</div>
				</el-collapse-item>
				<el-collapse-item title="5、下载任务显示验证码拦截,请手动验证或者下载文件夹内容为空" name="5">
					<div>点击软件右上角菜单按钮，选择软件设置-登录淘宝/天猫账号，浏览器打开后点击首页任意商品链接，手动拖动滑块验证一下，完成后关闭浏览器即可正常使用。</div>
				</el-collapse-item>
				<el-collapse-item title="6、淘宝/天猫下载任务提示成功但下载文件夹内容为空" name="6">
					<div>长时间访问淘宝/天猫平台，可能触发了平台的人机验证，可以通过软件设置->账号登录->打开网页后跳转到首页，随机打开一个商品详情页手动解除一下验证，然后清理缓存重新下载或者换个账号登录重新下载即可</div>
				</el-collapse-item>
				<el-collapse-item title="7、下载完成后,打开文件夹如何保持图片顺序" name="7">
					<div>在下载完成后的文件夹中，鼠标右击空白位置，选择排序方式-日期-递增。</div>
				</el-collapse-item>
				<el-collapse-item title="8、下载的评论图片数量少" name="8">
					<div>默认只下载商品首屏展示的评论图片，不下载后续更多页的评论图。</div>
				</el-collapse-item>
				<el-collapse-item title="9、报错:权限受限，请以管理员权限运行软件" name="9">
					<div>软件权限受系统限制无法运行，需要退出软件，鼠标右击软件图标以管理员权限运行一下。</div>
				</el-collapse-item>
				<!-- <el-collapse-item title="10、为什么每次打开软件,需要重新登录平台账号" name="10">
					<div>为了考虑安全性，软件在退出后会清空所有的缓存和账号信息，因此每次重新打开软件需要要求用户重新登录各个平台账号。</div>
				</el-collapse-item> -->
			</el-collapse>
			<div slot="footer" class="dialog-footer-center">
				<el-button @click="questionVisible = false;">关闭</el-button>
			</div>
		</el-dialog>
    </div>
</template>

<script>
	import os from 'os'
	import fs from 'fs'
	import request from 'request'
	import { ipcRenderer } from 'electron'
	import pjson from '/package.json'
    export default {
        name: "updateRef",
		data(){
			return {
				mianVisible: false,
				questionVisible: false,
				softInfo: {
					softName: pjson.softInfo.softName,
					version: pjson.version,
					name: pjson.softInfo.downloadName,
					percent: 0,
					downloadedSize: 0,
					totalSize: 0
				},
				softdownloadDir: os.userInfo().homedir+"\\Downloads", // 下载路径
				isShow: this.showDowload,
				isFinished: this.dowloadFinish,
				isUpdate: false,
				
				linkList: [], // 友情链接
				
				softdownloadPath: '',
			}
		},
        props: {
            showDowload: {
                type: Boolean,
                required: true,
                default: false
            },
			dowloadFinish: {
			    type: Boolean,
			    required: true,
			    default: false
			},
        },
		mounted() {
			
			// 友情连接
			this.$http.post(this.$api.target + '/api/api/m_position_list', { group_id: pjson.softInfo.linkId }).then((response) => {
				if (!response.data.error) {
				   this.linkList = response.data.result.list;
				}
			})
		},
		methods: {
			// 打开浏览器
			openUrl(url){
				const { shell } = require('electron');
				shell.openExternal(url);
			},
			// 检查更新
			updateSoft(flag){ // flag 软件打开时检测是否更新，true则静默不弹出最新版本提示
				if(Number(this.softInfo.percent) > 0){
					this.isShow = true;
				}else{
					this.$http.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
					this.$http.get(pjson.softInfo.downloadPrefix + '/' + pjson.name + "/version.json?"+Math.random()).then((response) => {
						let getResult = response.data || {};
						let currentVersion = this.softInfo.version.split('.');
						let updateVersion = getResult.v.split('.');
						currentVersion.map((item, index) => {
							currentVersion[index] = Number(item);
						})
						updateVersion.map((item, index) => {
							updateVersion[index] = Number(item);
						})
						let result1 = updateVersion[0] > currentVersion[0];
						let result2 = (updateVersion[0] == currentVersion[0]) && (updateVersion[1] > currentVersion[1]);
						let result3 = (updateVersion[0] == currentVersion[0]) && (updateVersion[1] == currentVersion[1]) && (updateVersion[2] > currentVersion[2]);
						let result4 = (updateVersion[0] == currentVersion[0]) && (updateVersion[1] == currentVersion[1]) && (updateVersion[2] == currentVersion[2]) && (updateVersion[3] > currentVersion[3]);
						if(result1 || result2 || result3 || result4){
							this.isUpdate = true;
							let updateContent = getResult.c || '';
							let html = '<div>检测到有新版本v'+getResult.v+'，是否更新最新版本？</div><div>'+updateContent+'</div>';
							this.$confirm(html, '应用更新', {
								dangerouslyUseHTMLString: true,
								confirmButtonText: '立即更新',
								type: 'warning'
							}).then(() => {
								this.softdownloadPath = this.softdownloadDir+'/'+ pjson.name + '_XY.exe';
								this.downloadFile(pjson.softInfo.downloadPrefix + '/' + pjson.name + '/' + pjson.name + "_XY.exe", this.softdownloadPath);
							}).catch(() => {
								       
							});
						}else{
							this.isUpdate = false;
							if(!flag){
								this.$message({message: '当前已经是最新版本',type: 'success', center: true});
							}
						}
					}).catch(function(error){
						console.log(error);
					});
				}
			},
			// 下载文件
			downloadFile(file_url, targetPath){
				let _this = this;
				let received_bytes = 0;
				let total_bytes = 0;
				let isError = false;
				
				let req = request({
				    method: 'GET', uri: file_url, strictSSL: false
				});
				let out = fs.createWriteStream(targetPath);
				req.pipe(out);
							
				req.on('response', function ( data ) {
					total_bytes = parseInt(data.headers['content-length']);
					const status = data.statusCode
					if (status < 200 || status >= 300) {
						_this.$message({showClose: true,message: '网络异常，请稍后重试！',type: 'warning'});
						isError = true;
					}else if(isNaN(total_bytes)){
						_this.$message({showClose: true,message: '网络异常，请稍后重试！',type: 'warning'});
						isError = true;
					}else{
						_this.isShow = true;
						isError = false;
					}
				});
							
				req.on('data', function(chunk) {
				    received_bytes += chunk.length;
					_this.showProgress(received_bytes, total_bytes);
				});
				
				
				req.on('end', function() {
					if(!isError){
						_this.softInfo.percent = 100;
						setTimeout(()=>{
							_this.isFinished = true;
							_this.isShow = false;
							_this.softInfo.percent = 0;
						}, 1000)
					}else{
						_this.isFinished = false;
						_this.softInfo.percent = 0;
						if(fs.existsSync(targetPath)){
							fs.unlinkSync(targetPath);
						}
					}
				});
			},
			// 显示进度
			showProgress(received, total){
				let percentage = (received * 100) / total;
				let temp = percentage - this.softInfo.percent;
				if(Number(temp) > 1.5){
					this.softInfo.percent = Number(percentage).toFixed(2);
				}
				this.softInfo.downloadedSize = Number(received);
				this.softInfo.totalSize = Number(total);
				// console.log(percentage + "% | " + received + " bytes out of " + total + " bytes.");
			},
			// 安装
		    execSoft(){
		    	const exec = require('child_process').exec;
				exec(this.softdownloadPath, (err, data) => {
					if (err) {
						throw err; 
					} else { // 完成
						this.isFinished = false;
					}
				});
		    }
		},
    }
</script>


<style>
.wei-dialog{
	padding: 0 !important;
}
.mian-title{
	color: #333;
	font-weight: 600; 
	padding: 9px 0;
}
.el-collapse-item__header{
	font-weight: 600 !important;
	font-size: 14px !important;
}
</style>