xy-compress/src/renderer/components/header.vue

<template>
	<div>
		<div style="-webkit-app-region: drag;height:45px;line-height: 45px;">
			<div class="soft-head">
				<p class="soft-name">
					<img src="../assets/image/icon.png" class="soft-icon" />
					<span style="letter-spacing: 2px;">{{productName}}</span>
				</p>
				<div style="-webkit-app-region:no-drag">
					<div>
						<template v-if="authority.validity_type != 2">
							<span v-if="authority.isAuthority" class="o-member twinkle_text" @click="openVip()">
								<img src="../assets/image/i-vip.png" />
								<span>会员中心</span>
							</span>
							<span v-else class="o-member twinkle_text" @click="openVip()">
								<img src="../assets/image/i-vip.png" />
								<span>开通会员</span>
							</span>
						</template>
						
						<div class="login-cur" v-if="!userInfo.username" @click="loginModel = true">
							<el-avatar icon="el-icon-user-solid" size="small" class="login-icon"></el-avatar><span class="font-12">未登录</span>
						</div>
						<div class="login-cur" v-else>
							<img v-if="userInfo.avatar" :src="userInfo.avatar" class="login-icon" /> 
							<el-avatar v-else icon="el-icon-user-solid" size="small" class="login-icon"></el-avatar>
							<span v-if="userInfo.username">{{userInfo.username}}</span>
							<span v-else>微信用户</span>
							<img src="../assets/image/vip.png" v-if="authority.isAuthority" style="width: 25px;vertical-align: middle;"/>
						</div>
						<el-dropdown @command="changeMenu">
						    <i class="el-icon-s-operation sys-icon"></i>
						    <el-dropdown-menu slot="dropdown">
						        <el-dropdown-item command="vip">{{authority.isAuthority ? '会员中心' : '开通会员'}}</el-dropdown-item>
						        <el-dropdown-item command="update">检查更新</el-dropdown-item>
						        <el-dropdown-item command="help"><a href="https://www.xingyousoft.com/help" style="color: inherit;">使用教程</a></el-dropdown-item>
						        <el-dropdown-item command="setting">软件设置</el-dropdown-item>
						        <el-dropdown-item command="out" v-if="userInfo.username || userInfo.avatar">退出登录</el-dropdown-item>
						    </el-dropdown-menu>
						</el-dropdown>
						<i class="el-icon-minus sys-icon" @click="softMini()"></i>
						<i class="el-icon-full-screen sys-icon" @click="softMax()"></i>
						<i class="el-icon-close sys-icon" @click="softClose()"></i>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 登录 -->
		<el-dialog title="用户注册登录" :visible.sync="loginModel" width="400px" :close-on-click-modal="false">
			<div class="login-model" style="position: relative;">
				<iframe v-if="loginModel" id="loginFrame" ref="loginFrame" style="border: none; width: 100%; height:100%;" :src="loginUrl"></iframe>
				<img src="../assets/image/icon-b.png" style="position: absolute; bottom: -30px; right: -20px; width: 40px;"/>
			</div>
			<span slot="title">
				<img src="../assets/image/logo.png" style="width: 25px; vertical-align: middle; margin-right: 4px;"/>注册用户登录
			</span>
		</el-dialog>
		
		<!-- 会员弹窗 -->
		<el-dialog custom-class="member-dialog member-dialog1" :visible.sync="vipModel" width="700px" :close-on-click-modal="false">
			<div slot="title">
				<p class="soft-mtitle">
					会员中心
				</p>
			</div>
			<div style="height: 580px;">
				<iframe v-if="vipModel" id="vipFrame" style="border: none; width: 100%; height:100%;" :src="vipUrl"></iframe>
			</div>
		</el-dialog>
		
		<!-- 未登录弹窗 -->
		<el-dialog :visible.sync="memberModel" width="400px" custom-class="member-dialog member-dialog2" style="border-radius: 20px; overflow: hidden;">
			<div class="member-model">
				<div class="adv-banner" v-if="popupAdvInfo.logo">
					<img :src="imgUrl + popupAdvInfo.logo" style="width: 100%; height: 100%;"/>
				</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图片/音频限制大小为300KB，视频/文档限制大小为2MB</p>
						<p style="font-size: 14px; font-weight: 600; margin-top: 15px;">开通会员即享以下权益</p>
					</div>
					<el-row :gutter="20" class="micon-list">
						<el-col :span="6" class="micon-item">
							<img src="../assets/image/member1.png" style="width: 60px;"/>
							<p>不限功能</p>
						</el-col>
						<el-col :span="6" class="micon-item">
							<img src="../assets/image/member2.png" style="width: 60px;"/>
							<p>不限设备</p>
						</el-col>
						<el-col :span="6" class="micon-item">
							<img src="../assets/image/member3.png" style="width: 60px;"/>
							<p>不限大小</p>
						</el-col>
						<el-col :span="6" class="micon-item">
							<img src="../assets/image/member4.png" style="width: 60px;"/>
							<p>技术支持</p>
						</el-col>
					</el-row>
				</div>
				<div class="micon-btn">
					<el-button class="micon-btn1" style="margin:0 10px;" v-if="!isClick" @click="next()" :round="true">继续试用</el-button>
					<el-button class="micon-btn1" style="margin:0 10px;" v-else @click="next()" :round="true">开始转换</el-button>
					<el-button class="micon-btn2" type="primary" @click="openVip()" :round="true">开通会员</el-button>
				</div>
			</div>
		</el-dialog>

		<!-- 退出提示 -->
		<el-dialog title="关闭提示" :visible.sync="closeModel" width="400px">
			<div style="text-align:center">
				<el-radio-group v-model="closeType" style="text-align:left">
				    <el-radio :label="1">最小化到系统托盘</el-radio>
					<div style="height: 20px;"> </div>
				    <el-radio :label="2">直接退出应用程序</el-radio>
				</el-radio-group>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-checkbox v-model="isRemember" style="float:left">不再提醒</el-checkbox>
				<el-button type="primary" size="small" @click="saveClose">确定</el-button>
			</span>
		</el-dialog>
		
		<!-- 软件设置 -->
		<el-dialog title="软件设置" :visible.sync="settingModal" width="400px">
			<div>
				<el-divider content-position="left">退出设置</el-divider>
				<el-radio-group v-model="closeType">
				    <el-radio :label="1">最小化到系统托盘</el-radio>
				    <el-radio :label="2">直接退出应用程序</el-radio>
				</el-radio-group>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveSetting">保存设置</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import {
	    ipcRenderer
	} from 'electron';
	import QRCode from 'qrcodejs2'
	import pjson from '/package.json'
	import electronApi from '@/utils/electronApi';
	import fs from 'fs';
	import os from 'os';
	import path from 'path';
	const regedit = require('regedit');
    export default {
        name: "headerTop",
		data(){
			return {
				sysInfo: {},
				vipUrl: '',
				loginUrl: '',
				memberUrl: '',
				settingModal: false,
				boot: false, // 开机启动
				closeModel: false,
				closeType: 2,
				isRemember:true,
				//
				productName: pjson.softInfo.softName,
				imgUrl: this.$api.imgUrl,
				loginType: 1,
				loginModel: false, // 登录弹窗
				loginImg: '',
				loginExpire: 100,
				loginInterval: false, // 登录倒计时
				checkLoginInterval: false,
				isLogin: false,
				userInfo: {},
				authority: { //软件的会员权限
					isAuthority: false
				},
				memberModel: false,
				isClick: false, // 是否点击转换按钮
				
				vipModel: false, // 会员弹窗
				productInfo: {},
				productIndex: 4,
				
				payType: 1, // 支付方式 1微信 2支付宝
				checkPayInterval: false,
				order_no: '', //创建的订单号
				alipayUrl: '', // 支付宝
				payMoney: 0,
				clickVip: false,
				
				popupAdvInfo: [],
				vipAdvInfo: [],
				agreementInfo: [], // 会员协议
				
				agreeFlag: true,
				agreementModel: false,
				alipayDoc: '',
				
				limitModal: false, // 限时购买弹窗
				limitLogin: false, // 限时购买时的登录状态
			}
		},
        props: {
			
        },
		async mounted(){
			this.getAdv();
			this.checkLogin();
			
			if(this.$utils.getStorage('userInfo')){
				this.userInfo = this.$utils.getStorage('userInfo');
			}
			
			window.addEventListener('message', e => {
				if (e.origin === 'https://www.xingyousoft.com') {
					console.log(e.data)
					if(e.data.userInfo){ // 返回用户信息
						this.userInfo = e.data.userInfo;
						this.$utils.setStorage('userInfo', e.data.userInfo);
						this.loginModel = false;
					}
					if(e.data.officialToken != undefined){
						this.$utils.setStorage('token', e.data.officialToken);
						this.getUserInfo();
						this.loginModel = false;
					}
					if(e.data == 'paySuccess'){ // 支付成功
						this.vipModel = false;
						this.$notify({title: '成功',message: '支付成功',type: 'success'});
						this.getUserInfo();
					}
					if(e.data == 'next'){
						this.next();
					}
					if(e.data == 'openVip'){
						this.openVip();
					}
				}else{
					return;
				}
			}, false);
			//加载的时候会出现白屏，延迟加载解决白屏问题
			setTimeout(() => {
				ipcRenderer.send('close-loading-window', {isClose:true});
			}, 2000);
			
			// 接收系统托盘命令 - 软件设置
			ipcRenderer.on('setting', (event, message) => {
				this.changeMenu('setting');
			})
			// 接收系统托盘命令 - 帮助中心
			ipcRenderer.on('help', (event, message) => {
				electronApi.openExternal("https://www.xingyousoft.com/help");
			})
		},
		methods: {
			softMini() { // 软件最小化
			    ipcRenderer.send('min');
			},
			softMax() { // 软件最大化
			    ipcRenderer.send('max');
			},
			softClose() { // 软件关闭
				let isRemember = this.$utils.getStorage('isRemember');
				if(isRemember == true){
					let type = this.$utils.getStorage('closeType');
					if(type == 2){
						ipcRenderer.send('exit');
					}else{
						ipcRenderer.send('tray');
					}
				}else{
					this.closeModel = true;
				}
			},
			saveClose(){
				if(this.isRemember == true){
					this.$utils.setStorage('closeType',this.closeType);
				}
				this.$utils.setStorage('isRemember', this.isRemember);
				if(this.closeType == 2){
					ipcRenderer.send('exit');
				}else{
					this.closeModel = false;
					ipcRenderer.send('tray');
				}
				
			},
			// 保存设置
			saveSetting(){
				this.$utils.setStorage('closeType', this.closeType);
				this.$utils.setStorage('isRemember', true)
				ipcRenderer.send('boot', this.boot);
				this.settingModal = false;
			},
			// 
			getAdv() {
				// 非会员广告接口
				this.$http.post(this.$api.target + '/api/api/m_position_list_byid', { id: pjson.softInfo.popupAdvId }).then((response) => {
					if (!response.data.error) {
					   this.popupAdvInfo = response.data.result;
					}
				})
				
				electronApi.spawnExec(['cert.exe','token']).then(res => {
					this.sysInfo = JSON.parse(res.stdout.toString());
					this.$utils.setStorage('session', this.sysInfo.windows_uuid);
					
					this.loginUrl = "https://www.xingyousoft.com/soft/login2/"+pjson.softInfo.softMid+"?p_mid="+pjson.softInfo.softMid+"&agent_mid="+this.sysInfo.agentMid+"&uuid="+this.sysInfo.windows_uuid+"&soft_type="+this.sysInfo.softType;
					this.memberUrl = "https://www.xingyousoft.com/soft/reminder2/"+pjson.softInfo.softMid+"?p_mid="+pjson.softInfo.softMid+"&agent_mid="+this.sysInfo.agentMid+"&uuid="+this.sysInfo.windows_uuid+"&soft_type="+this.sysInfo.softType;
					if(process.env.NODE_ENV != "development"){ // 非开发环境运行
						let params = {
							type: 3,
							tag: '',
							product_version: pjson.version,
							windows_uuid: this.sysInfo.windows_uuid,
							os_platform: this.sysInfo.os_platform,
							os_version: this.sysInfo.os_version,
							cpu: this.sysInfo.cpu,
							statistics_flag: '',
							from: this.sysInfo.from,
						}
						// 使用日志
						// this.$http.post(this.$api.statistics + pjson.softInfo.softMid, params).then((response) => {
							
						// })
					}
				}).catch(err => {
					console.log(err);
					let windows_uuid = this.$utils.guid();
					if(this.$utils.getStorage('session')){
						windows_uuid = this.$utils.getStorage('session');
					}
					this.$utils.setStorage('session', windows_uuid);
					this.loginUrl = "https://www.xingyousoft.com/soft/login2/"+pjson.softInfo.softMid+"?p_mid="+pjson.softInfo.softMid+"&agent_mid="+this.sysInfo.agentMid+"&uuid="+windows_uuid+"&soft_type="+this.sysInfo.softType;
					this.memberUrl = "https://www.xingyousoft.com/soft/reminder2/"+pjson.softInfo.softMid+"?p_mid="+pjson.softInfo.softMid+"&agent_mid="+this.sysInfo.agentMid+"&uuid="+windows_uuid+"&soft_type="+this.sysInfo.softType;
				});
				
			},
			// 刷新登录二维码
			refreshCode() {
			    this.clearLoginInterval();
			    let data = {
			        scene_str: pjson.softInfo.softMid + ':' + this.$utils.getStorage('session')
			    };
			    this.$http.post(this.$api.createQrcode, data).then((response) => {
			        if (response.data.result) {
			            this.loginImg = response.data.result.url;
			            this.loginExpire = response.data.result.expire_seconds;
			            this.loginInterval = setInterval(() => {
			                this.loginExpire--;
			                if (this.loginExpire <= 0) {
			                    this.clearLoginInterval();
			                }
			            }, 1000)
			
			            this.checkLoginInterval = setInterval(() => {
			                this.checkLogin();
			            }, 3000)
			        }
			    });
			},
			// 继续试用 or 开始转换
			next() {
				if(this.isClick){ // 开始转换
					this.$emit('export-file', true);
				}else{ // 继续试用
					this.memberModel = false;
				}
			},
			// 开通会员 
			openVip() {
			    this.clickVip = true;
			    this.memberModel = false;
			    if (this.$utils.getStorage('token')) {
			        this.vipModel = true;
					this.vipUrl = "https://www.xingyousoft.com/soft/buy2/"+pjson.softInfo.softMid+"?p_mid="+pjson.softInfo.softMid+"&agent_mid="+this.sysInfo.agentMid+"&uuid="+this.sysInfo.windows_uuid+"&token="+this.$utils.getStorage('token')+"&soft_type="+this.sysInfo.softType+"&time="+new Date().getTime();
			    } else {
			        this.loginModel = true;
			    }
			},
			// 检查微信是否登录
			checkLogin() {
			    let data = {
			        scene_str: pjson.softInfo.softMid + ':' + this.$utils.getStorage('session')
			    };
			    this.$http.post(this.$api.checkLogin, data).then((response) => {
					if (response.data.error) { // 未登录
						this.authority.isAuthority = false;
						this.userInfo = {};
						this.$utils.setStorage('token', '');
						this.$utils.setStorage('userInfo', '');
						if(!this.loginModel && !this.limitModal) {
							this.memberModel = true;
						}
					}else{ // 登录成功
						this.$utils.setStorage('token', response.data.result);
						this.loginModel = false;
						this.getUserInfo();
						if(this.limitModal){ // 限时优惠 已登录
							this.limitLogin = true;
						}
						if (this.clickVip) { // 点击开通会员 登陆后直接展示会员购买弹窗
							this.vipModel = true;
							this.vipUrl = "https://www.xingyousoft.com/soft/buy2/"+pjson.softInfo.softMid+"?p_mid="+pjson.softInfo.softMid+"&agent_mid="+this.sysInfo.agentMid+"&uuid="+this.sysInfo.windows_uuid+"&token="+this.$utils.getStorage('token')+"&soft_type="+this.sysInfo.softType+"&time="+new Date().getTime();
							this.clickVip = false;
						}else{
							// this.getProductInfo();
						}
					}
			    });
			},
			// 获取用户信息
			getUserInfo() {
			    this.$http.post(this.$api.getUserInfo).then((response) => {
			        if (!response.data.error) {
			            this.userInfo = response.data.result;
						this.getAuthority();
			        }
			    });
			},
			// 清空登录有关定时器
			clearLoginInterval() {
			    clearInterval(this.loginInterval);
			    clearInterval(this.checkLoginInterval);
			},
			//  获取用户账单
			getAuthority() {
			    this.$http.post(this.$api.userBill + pjson.softInfo.softMid).then((response) => {
			        if (!response.data.error) {
			    		this.authority = response.data.result;
			    		let nowDate = new Date().getTime();
			    		if (nowDate <= new Date(this.authority.validity_end_time).getTime() || this.authority.validity_type == 2) {
			    		    this.authority.isAuthority = true;
			    		} else {
			    		    this.authority.isAuthority = false;
			    			if (!this.vipModel && !this.limitModal) {
			    			    this.memberModel = true;
			    			}
			    		}
			    		this.$forceUpdate();
			        }
			    })
			},
			// 监听会员弹窗状态
			vipChange(e) {
				
			},
			// 监听显示购买弹窗状态
			limitChange(e){
				if (e) {
					if(!this.limitLogin && this.limitModal){
						this.refreshCode();
					}
				}else{
				    clearInterval(this.checkPayInterval)
				}
			},
			// 监听登录弹窗状态
			loginChange(e) {
			    if (e) {
			        this.refreshCode();
			    } else {
					this.clickVip = false;
			        this.clearLoginInterval();
			    }
			},
			// 选择支付方式
			selectPaytype(index) {
			    this.payType = index; // 1微信支付 2支付宝支付
				if(this.limitModal){
					this.selectTerm(5);
				}else{
					this.selectTerm();
				}
			},
			// 生成微信支付二维码
			createQrcode(str) {
			    document.getElementById('qrcode').innerHTML = ''
			    let qrcode = new QRCode('qrcode', {
			        width: 210,
			        height: 210, // 高度
			        text: str, // 二维码内容
			        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
			        background: '#f0f',
			        foreground: '#ff0'
			    })
			},
			// 选择会员期限创建订单
			selectTerm(index) {
			    if (index) {
			        this.productIndex = index;
			    }
			    this.payMoney = this.productInfo['price' + this.productIndex];
			    let params = {
			        product_type: 1,
			        id: this.productInfo.id,
			        type: this.productIndex
			    };
			    clearInterval(this.checkPayInterval);
			    this.$http.post(this.$api.target + '/order/createOrder', params).then((response) => {
			        if (response.data.result) {
			            this.order_no = response.data.data;
			            if (this.payType == 1) { // 微信支付
			                this.wepay();
			            } else {
			                this.alipay();
			            }
			        } else {
						this.$message.error(response.data.msg);
					}
			    });
			},
			// 微信支付
			wepay() {
			    this.$http.post(this.$api.target + '/pay/wechatPay', { order_no: this.order_no }).then((res) => {
			        if (res.data.result) {
			            if (JSON.stringify(res.data.data) != '[]') {
			                this.wxPayErcode = res.data.data.code_url
			                this.createQrcode(res.data.data.code_url)
			                this.checkWxPay()
			            }
			        }
			    });
			},
			// 支付宝支付
			alipay() {
			    this.$http.post(this.$api.target + '/pay/alipay', { order_no: this.order_no }).then((res) => {
			        var content = res.data; //内容
					this.alipayDoc = content;
					this.checkWxPay();
			    });
			},
			// 每2秒检测一次是否支付成功
			checkWxPay() {
				clearInterval(this.checkPayInterval);
			    this.checkPayInterval = setInterval(() => {
			        this.$http.post(this.$api.target + '/order/checkIsWXPay', { order_no: this.order_no, product_type: 1 }).then((res) => {
			            if (res.data.result) {
			                if (JSON.stringify(res.data.data) != '[]') {
			                    if (res.data.code == '1001') {
			                        clearInterval(this.checkPayInterval);
			                        this.vipModel = false;
									this.limitModal = false;
			                        this.getAuthority();
									this.$notify({title: '支付通知',message: res.data.msg,type: 'success'});
			                    }
			                }
			            }
			        });
			    }, 2000)
			
			    // 5分钟后关闭
			    // setTimeout(() => {
			    //     clearInterval(this.checkPayInterval)
			    // }, 1000 * 300)
			},
			// 选择菜单
			changeMenu(e) {
			    if (e === 'out') {
					this.$confirm("是否退出登录该账号？", '提示', {
						type: 'warning'
					}).then(() => {
						this.$http.post(this.$api.loginOut).then((response) => {
						    if (!response.data.error) {
						        this.userInfo = {};
						        this.authority.isAuthority = false;
						        this.$utils.setStorage('token', '');
								this.$utils.setStorage('userInfo', '');
								this.$message({message: '账号已退出',type: 'success'});
								// this.$refs.loginFrame.contentWindow.postMessage('out', '*');
						    }
						});
					}).catch(() => {
						       
					});
			    } else if (e === 'vip') {
			        this.openVip();
			    } else if (e === 'update') {
					this.$emit('update-soft', true);
			    } else if (e === 'setting'){
					this.settingModal = true;
				}
			},
		},
    }
</script>


<style lang="scss">
    .vip-banner{
		background-color: #eee;
		height: 60px;
		width: 100%;
		margin-bottom: 15px;
	}
	
	.adv-banner{
		height: 150px;
		width: 100%;
	}
	.login-cur{
		margin: 0 10px; 
		display: inline-block;
		cursor: pointer;
	}
	
	.vip-modal .ivu-icon-ios-close{
		color: #f8f8f8 !important;
	}
	
	.member-dialog{
		.el-dialog__header{
			padding: 0;
		}
		.el-dialog__body{
			padding: 0;
		}
	}
	
	.member-dialog1{
		.el-dialog__headerbtn{
			top: 13px;
		}
	}
	
	.member-dialog2{
		border-radius: 20px !important;
		overflow: hidden;
	}
	
	.micon-list{
		padding: 20px 10px;
		background: linear-gradient(to bottom, #fdd6ca69, #ffffff);
		border-radius: 20px;
	}
	
	.micon-item{
		text-align: center;
		font-size: 14px;
		font-weight: 600;
		color: #ec6b44;
	}
	
	.micon-btn{
		text-align: center;
		padding-bottom: 20px;
	}
	
	.soft-mtitle{
		font-size: 16px;
		line-height: 40px;
		font-weight: 600;
		padding: 0 15px;
	}
	
</style>