platformFront/src/components/user/Console.vue

<template>
	<div class="userConsole" v-if="moreProBox">
		<MiniTitle>
			<div slot="mini" class="miniTit">控制台</div>
		</MiniTitle>
		<div class="con-main">
			<div v-if="authProgress|| openedCount || productApplyCount || failCount ||authRejectCount" class="progress">
				<p class="userTitles">开通进度</p>
				<div ref="isNo" class="openTo">
					<div class="userOpen" v-if="authProgress != 0">
						<p class="openTxt">账号认证申请</p>
						<p class="openImg"><img class="rzImg" src="../../images/verify.png" /><img class="rzLine" src="../../images/2steps-1.png" /><img
							 class="rzEnd" src="../../images/complete.png" /></p>
						<p class="text">认证中</p>
					</div>

					<div class="productOpen" v-if="passProduct.length!=0">
						<!-- 付费产品 -->
						<p class="openTxt">产品接入申请</p>
							<div class="sonProduct" v-for="i in passProduct">
								<!-- <p class="titlePro">{{i.name}}<span>订单号:{{i.num}}</span></p> -->
								<p class="titlePro">
									<el-tooltip class="item" effect="dark" :content="i.name" placement="top" v-if="i.name.length > 12">
							      <span>{{i.name.slice(0,12)+'...'}}</span>
							    </el-tooltip>
							    <span v-else>{{i.name}}</span>
									<span class="num">订单号:{{i.num}}</span>
								</p>
								<p class="openImg" v-if="i.auditStatusMsg === '待审核'"><img class="rzImg" src="../../images/verify1.png" /><img
									 class="rzLine" src="../../images/2steps-1.png" /><img class="rzEnd" src="../../images/complete.png" /></p>
								<p class="openImg" v-else="i.auditStatusMsg === '通过'"><img class="rzImg" src="../../images/verify1.png" /><img
									 class="rzLine" src="../../images/2steps-2.png" /><img class="rzEnd" src="../../images/verify2.png" /></p>
								<p class="text">{{i.auditStatusMsg}}</p>
							</div>
					</div>

						<!-- 调接口queryAuthProgress 验证是否认证失败 -->
					<div class="faildBox" v-if="authRejectCount !=0 || failProduct.length !=0">
						<div class="regBo" v-show="authRejectCount !=0">
							<p class="openTxt">账号认证失败原因</p>
							<!-- 失败原因type和Comment二选一 -->
							<p class="failper">原因：{{rejectType?rejectType:rejectComment}}</p>
						</div>

						<div v-if="failProduct.length !=0">
							<p class="openTxt2">产品申请失败原因</p>
							<div class="pproFaild" v-for="failure in failProduct">
								<p class="failTitlt">{{failure.name}}</p>
								<p class="failper">原因 : {{failure.rejectReason}}</p>
							</div>
						</div>
					</div>
				</div>
				<!-- 已开通产品 -->
				<div class="reaOpen" v-if="openedCount">
					<p class="userTitles">已开通产品</p>
					<!-- <div class="openItem" v-for="op in openList"> -->
					<div v-for="op in openList" :class="['openItem',{'grays':op.isExpire==0||op.serviceStatus == 0}]" >
						<div class="openItBox">
							<el-tooltip class="item" :disabled="op.name.length > 44 ? false : true" effect="dark" :content="op.name" placement="top">
								<span class="openIt">{{op.name}}</span>
							</el-tooltip>
						</div>
							
						<!-- <p class="openIt">{{op.name}}</p> -->
						<div class="leftCo">
							<p>服务模式 ：</p>
							<p :class="['produceN',{'grays':op.isExpire==0 ||op.serviceStatus == 0}]">{{op.accessTypeMsg}}</p>
						</div>
						<div class="rightCo">
							<p>产品服务有效时间 ： </p>
							<p :class="['proDate',{'grays':op.isExpire==0 ||op.serviceStatus == 0}]">{{op.startTime}}~{{op.endTime}}</p>
						</div>
						<div class="emp"></div>
						<div class="rit">
							<!-- 停用 过期都不能点击生成令牌 -->
							<div v-if="op.isExpire==0 || op.serviceStatus == 0">
								<button v-show="op.isInto==1" class="proBtn grayHu">进入</button>
								<button v-show="op.isCreateToken==1" class="proBtn grayHu">生成令牌</button>
								<button class="proBtn grayHu" v-if="op.serviceStatus == 0">续费</button>
								<button class="proBtn" @click="morePros(op.productId)" v-else-if="op.renewalsStutas == 0">续费</button>
								<button class="proBtn orgCol" v-else-if="op.renewalsStutas == 1">续费中</button>
							</div>
							<div v-else>
								<button v-show="op.isInto==1" class="proBtn" @click="intoProduct(op)">进入</button>
								<button v-show="op.isCreateToken==1" class="proBtn" @click="tokenCheck()">生成令牌</button>
								<button class="proBtn" @click="morePros(op.productId)" v-if="op.renewalsStutas == 0">续费</button>
								<button class="proBtn orgCol" v-else-if="op.renewalsStutas == 1">续费中</button>
							</div>
						</div>
						<img v-if="op.isExpire==0 && op.serviceStatus != 0" src="../../images/overTime.png" height="54" width="54" class="overTime">
						<img v-else-if="op.serviceStatus == 0" src="../../images/stop.png" height="50" width="50" class="overTime">
					</div>
					<div class="openItem" style="cursor:pointer" @click="morePro()">
						<p class="moreTxt">更多服务</p>
						<div class="imBox">
							<img src="../../images/add_big.png" />
						</div>
					</div>
				</div>
			</div>
			<!-- 可试用产品 -->
			<div class="trialProd" v-if="onTrialCount" ref="trialProd">
				<trial-pro></trial-pro>
			</div>
			<!-- 弹窗 -->
			<div class="mask" v-if="isMask">
				<div class="conmask">
					<p class="maskTxt">您是否需要续费该产品？</p>
					<div class="btn2">
						<button class="primary left" @click="saleBtn()">确认续费</button>
						<button class="primary right" @click="queBtn()">不续费</button>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import userApi from '@api/user.js';
	import encode from '@api/base64.js';
	import TrialUser from '@components/user/TrialUser.vue';
	import MiniTitle from '../common/MiniTile.vue'

	export default {
		name: 'user-console',
		components: {
			'trial-pro': TrialUser,
			MiniTitle
		},
		data() {
			return {
				passProduct:[],
				failProduct:[],
				toast: true,
				hide: false,
				isMask: false,
				moreProBox: true,
				isHidd: true,
				it: [],
				item: [],
				authStatus: null,
				auditStatusMsg: null,
				openList: [],
				onTrialCount: null,
				openedCount: null,
				productApplyCount: null,//产品接入数量
				failCount: null,
				authProgress:null,
				authRejectCount:null,
				rejectType:'',//账号认证被拒原因
				rejectComment: null,//补充信息
				maskId: null,
				showAuthenReject:false,
			}
		},
		created: function() {
			this.productAuthProgress();
			this.enShowOption();
			this.getConsoleOpened();
			if(this.authRejectCount != 0){
				this.getAuthenProgress();
			}
		},
		methods: {
			getAuthenProgress(){//账号认证进度
				userApi.getAuthenProgress().then((res)=>{
					const result = res.data;
					if(+result.code ==0){
						this.authStatus = result.data.userStatus;
						if(result.data.userStatus==0 && result.data.isReject==0){
							this.showAuthenReject = true;
							this.rejectComment = result.data.rejectComment;
							this.rejectType = result.data.rejectType;
						}
												
					}else{
						console.log(result.msg);
					}
				}).catch((error) => {
					console.log(error)
				});
			},
			queBtn() {
				this.isMask = false;
			},
			enShowOption() {
				userApi.enShowOption().then((res) => {
					if (res.data.code == '0') {
						const data = res.data.data;
						this.openedCount = data.openedCount;
						this.onTrialCount = data.onTrialCount;
						this.productApplyCount = data.orderCount;
						this.failCount = data.orderAuthFailCount;
						this.authProgress = data.authIngCount;
						this.authRejectCount = data.authRejectCount;
					}
				}).catch((error) => {
					console.log(error)
				});
			},
			productAuthProgress() { //申请进度
				userApi.productAuthProgress().then((res) => {
					if (res.data.code == '0') {
						const data = res.data.data;
						this.failProduct = data.failProduct;
						this.passProduct = data.passProduct;
					}
				}).catch((error) => {
					console.log(error)
				});
			},
			getConsoleOpened() { //已开通产品
				userApi.getConsoleOpened().then((res) => {
					if (res.data.code == '0') {
						this.openList= res.data.data;
					}
				}).catch((error) => {
					console.log(error)
				});
			},
			morePro() { //更多服务跳转
				this.$router.push({
					path: 'YH-GDFW'
				});
			},

			saleBtn() { //续费确定
				const params = {
					'productId': this.maskId
				}
				userApi.addRenewalsInfo(params).then((res) => {
					if (res.data.code == '0') {
						this.isMask = false;
						this.$message({
							message: '提交成功！',
							type: 'success'
						});
						this.getConsoleOpened();
					}else{
						this.$message.error(res.data.msg);
					}
				}).catch((error) => {
					console.log(error)
				});
			},
			morePros(id) { // 蒙层出现
				this.isMask = true;
				this.maskId = id;
			},
			tokenCheck() { //查看令牌
				this.$router.push({
						path: 'YH-JGZX-YKTCP'
					});
			},
			openWin(url){//创建a标签打开新窗口
				let abtn = document.createElement('a');
				abtn.id = "openPro";
				abtn.href = url;
				abtn.target = "_blank";
				document.body.appendChild(abtn);
				document.getElementById("openPro").click();
				document.body.removeChild(abtn);
			},
			intoProduct(op){//进入产品页
				/*this.setCookie("appKeyId",keyId,1);
				this.setCookie("appKeySecret",keySecret,1);
				window.open(url);*/
			  	const {url,appKeyId,appKeySecret,isBegin,openId}=op;
			  	const id = op.productId;
				if(isBegin==0){//未到开通时间
					this.$message({
						message: '产品未到服务有效期',
						type: 'warning'
					});
				}else if(isBegin==1){
					let params = {
						'productId':id,
						'openId':openId
					}
					let newWindow = window.open();
					const tempTime = new Date().getTime().toString();//加密时间戳
    			const securityCode = encode(tempTime);
					userApi.intoVerify(params).then((res)=>{
						if(res.data.code == 0){
                          this.saveUserOper(id);			//记录
							// const linkURL = url.indexOf("?")>-1? url + "&appKeyId="+appKeyId+"&appKeySecret="+appKeySecret : url + "?appKeyId="+appKeyId+"&appKeySecret="+appKeySecret;
							const linkURL = url.indexOf("?")>-1? url + "&appI="+appKeyId+"&appS="+appKeySecret + "&code=" + securityCode : url + "?appI="+appKeyId+"&appS="+appKeySecret + "&code=" + securityCode+"&productId="+id;
							// this.openWin(linkURL);
							newWindow.location.href = linkURL;
						}else{
							this.$message({
								message: res.data.msg,
								type: 'warning'
							});
							newWindow.close();
						}

					})
					
				}
			},
		  	saveUserOper(id){		//保存操作记录
			  const userInfo = JSON.parse(localStorage.getItem("userLoginDTO")||'{}');
			  const param={
                linkman:userInfo.linkman,
                productId:id,
                username:userInfo.username,
			  };
              userApi.saveUserOper(param).then((res)=>{});
			},
			setCookie(name,value,day){
				var expires = day * 24 * 60 * 60 * 1000;
			  var exp = new Date();
			  exp.setTime(exp.getTime() + expires);
			  document.cookie = name + "=" + value + ";expires=" + exp.toUTCString();
			},
		}
	}
</script>
<style lang="less" scoped>
	.userConsole {
		min-width: 1127px;
		height:100%;
		.miniTit {
			margin-left: 20px;
			font-weight: bold;
		}
		
		.con-main{
			height:92%;
			overflow-y: auto;
		}
		/*.progress{
			height: 21%;
	    max-height: 350px;
	    min-height: 165px;
		}*/
		.grayHu {
			background: #999 !important;
			cursor: auto !important;
		}
		.orgCol{
			background-color: #8CBDF4 !important;
			cursor: auto !important;
		}

		.hidd {
			display: none;
		}

		.mask {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.4);
			z-index: 55;

			.conmask {
				background: #fff;
				width: 350px;
				height: 200px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border-radius:2px;

				.maskTxt {
					background: #fff;
					border-radius: 2px;
					text-align: center;
					margin-left: 53px;
					margin-right: 53px;
					margin-top: 50px;
					font-size: 14px;
				}

				.left {
					margin-left: 63px;
					cursor: pointer;
				}

				.right {
					background: #fff !important;
					border: 1px solid #1774f0 !important;
					color: #1774f0 !important;
					cursor: pointer;
				}

				.primary {
					width: 80px;
					height: 28px;
					border-radius: 3px;
					border: 0;
					background: #1774f0;
					color: #fff;
					margin-top: 40px;
					margin-right: 60px;
				}
			}

		}
		.grays {
			color: #aaa !important;
		}
		.toast-btn2 {
			width: 90px;
			bottom: 35px;
			right: 130px;
		}

		/*.pproFaild {
			height: 155px;
		}*/

		/*.regBo {
			height: 125px;
			line-height: 40px;
		}*/

		.reaOpen {
			display: inline-block;
			width: 100%;
			margin-top: 10px;
		}
		.trialProd{
			display:inline-block;
		}
		.userTrial .trialBox .felx .flex_item {
			width: 31%;
			min-width: 348px;
			max-width: 31%;
		}

		.imBox {
			text-align: center;

			img {
				width: 70px;
				height: 70px;
				cursor: pointer;
			}
		}

		.moreTxt {
			font-size: 14px;
			font-weight: bold;
			padding-top: 20px;
			margin-left: 20px;
		}

		.morePro {
			width: 31%;
			height: 150px;
			background: #fff;
			margin-left: 20px;
			margin-top: 20px;
			display: inline-block;

		}

		.openTo {
			/*height: 350px;*/
			height: 21%;
	    max-height: 350px;
	    min-height: 160px;
		}

		.emp {
			height: 1px;
			background: #c9c9c9;
			margin-top: 58px;
		}

		.rit {
			font-size: 12px;
			float: right;
			margin-right: 5px;
			margin-top: 8px;
		}

		.proBtn {
			width: 70px;
			height: 24px;
			border-radius: 2px;
			border: 0;
			display: inline-block;
			background: #1774f0;
			color: #fff;
			cursor: pointer;
			margin-right: 10px;
			font-size: 12px;
			outline: none;
		}

		.proDate {
			margin-top: 10px;
			color: #1774f0;
		}

		.rightCo {
			font-size: 12px;
			float: right;
			margin-right: 15px;

		}

		.produceN {
			margin-top: 10px;
			color: #1774f0;
		}

		.leftCo {
			font-size: 12px;
			margin-left: 20px;
			float: left;
		}
		.openItBox {
			height: 51px;
			line-height: 18px;
			overflow: hidden;
		}
		.openIt {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			font-size: 14px;
			font-weight: bold;
			padding: 15px 20px 0 0;
			margin: 0 0 0px 20px;
		}

		.openTxt {
			font-size: 12px;
			height: 30px;
			line-height: 30px;
			border-bottom: 1px solid #c9c9c9;
			padding-left: 10px;
			font-weight: bold;

		}

		.openTxts {
			font-size: 12px;
			height: 30px;
			line-height: 30px;
			border-top: 1px solid #c9c9c9;
			border-bottom: 1px solid #c9c9c9;
			padding-left: 10px;
      font-weight: bold;
		}

		.openTxt2 {
			font-size: 12px;
			height: 30px;
			line-height: 30px;
			border-bottom: 1px solid #c9c9c9;
			padding-left: 10px;
      font-weight: bold;
		}

		.userTitles {
			margin: 20px 0 15px 20px;
			font-size: 14px;
			color: #999;
		}

		.userOpen {
			display: inline-block;
			width: 31%;
			min-width:334px;
			background: #fff;
			margin-left: 20px;
			float: left;

			.openImg {
				margin-top: 25px;
				text-align: center;
			}

			.text {
				font-size: 12px;
				text-align: center;
				margin-top: -15px;
				padding-bottom: 30px;
			}

			.rzLine {
				width: 210px;
				margin-left: 15px;
				margin-right: 15px;
				margin-bottom: 10px;
			}

			.rzEnd {
				width: 40px;
				height: 40px;
			}

			.rzImg {
				width: 40px;
				height: 40px;
			}

			img {
				display: inline-block;
			}
		}

		.productOpen {
			display: inline-block;
			background: #fff;
			width: 31.9%;
			min-width:334px;
			margin-left: 20px;
			float: left;
			height: 334px;
			overflow-y: auto;

			.openTxt {
				font-size: 12px;
				height: 30px;
				line-height: 30px;
				border-bottom: 1px solid #c9c9c9;
				padding-left: 10px;

				span {
					float: right;
					display: inline-block;
					margin-right: 10px;
				}
			}

			.openImg {
				text-align: center;
				margin: 10px 15px 20px 10px;
			}

			.text {
				font-size: 12px;
				text-align: center;
				margin-top: -30px;
				padding-bottom: 15px;
			}

			.rzLine {
				width: 50%;
				margin-left: 15px;
				margin-right: 15px;
				margin-bottom: 10px;
			}

			.rzEnd {
				width: 40px;
				height: 40px;
			}

			.rzImg {
				width: 40px;
				height: 40px;
			}

			img {
				display: inline-block;
			}

			.titlePro {
				font-size: 12px;
				margin-left: 10px;
				display: flex;
    		justify-content: space-between;
				.num {
					margin-right: 15px;
				}
			}
		}

		.faildBox {
			width: 31%;
			min-width:334px;
			background: #fff;
			float: left;
			margin-left: 20px;
			height: 334px;
			overflow-y: auto;
		}

		.failTitlt {
			font-size: 12px;
			margin-top: 15px;
			margin-left: 10px;
			margin-bottom: 15px;
		}

		.failper {
			font-size: 12px;
			margin-left: 10px;
			margin-bottom: 20px;
			line-height: 20px;
		}

		.sonProduct {
			padding-top: 10px;
		}

		.openItem {
			width: 31%;
			min-width: 348px;
			height: 150px;
			background: #fff;
			margin-left: 20px;
			display: inline-block;
			margin-bottom: 20px;
			float: left;
			position: relative;
			.overTime{
				position: absolute;
				top: 10px;
				right: 10px;
			}
		}
	}
</style>