新增客服页面

src/components/CommonFooter.vue

@@ -1,6 +1,10 @@
 <template>
   <!-- colto-section -->
   <footer class="footer" @click="toggleMenu($event,2)">
+	<div class="cszone">
+		<a href="javascript:void(0);" @click="scbox()"><img src="../assets/img/home/kefu.png"></a>
+	</div>
+	
     <div class="content">
       <div class="footer-upper-section">
         <!-- logo -->
@@ -263,6 +267,12 @@
         <img src="@/assets/img/home/moab.png" alt="" style="width: 120px;height: 120px;">
         <div style="font-size: 16px; color: #9c9c9c;margin-top: 12px;">{{ $t("homeNewText.bb41",{name:'Moabcoin'}) }}</div>
       </div>
+	  
+	<div class="cspopup" :class='{"hidden":ispopup?"":"none"}'>
+		<a href="javascript:void(0);" class="close_btn" @click="closebox();">x</a>
+		<iframe width="100%" height="100%" class="my-modal-body" :src="ifurl" frameborder="0" style="border-radius: 10px;background-color: #fff;"></iframe>
+	</div>
+			
     </div>
   </footer>
 </template>
@@ -287,6 +297,8 @@ export default {
         { src: "https://www.rsncoin.com/static/flag/vk.png" },
         { src: "https://www.rsncoin.com/static/flag/youtube.jpg" },
       ],
+	  ispopup:false,
+	  ifurl:"",
       langList: [
         // {
         //     value: "cn", // zh-CN
@@ -419,6 +431,28 @@ export default {
         })
         .catch((err) => {});
     },
+	scbox(e){
+		// under login 
+		if (this.isLogin) {
+			// get user infomation
+			let user_str = localStorage.getItem("auth");
+			let user = JSON.parse(user_str);
+			this.ifurl ="https://sc.moabcoin.com/chat/?toid="+user.referrer+"&room_id="+user.account;
+			// show popup
+			this.ispopup = ! this.ispopup
+		}else{
+			//
+			console.log("login fisrt!!")
+			this.$router.push({ path: '/sign-in' });
+		}
+	},
+	closebox(){
+		if(this.ispopup){
+			this.ispopup = false
+		}
+		this.ispopup =false
+	}
+
   },
   created() {
     this.getCollegeLinks();
@@ -433,6 +467,22 @@ export default {
   background-color: #121212;
   border-top: none;
   
+	.cszone{
+		width:48px;
+		position:fixed;
+		bottom:10%;
+		right:26px;
+		z-index:999;
+		background-color: #fff;
+		border-radius: 10px;
+    }
+  
+    .cszone img{
+      text-align:center;
+      width:48px;
+      height:48px;
+    }
+  
   .content{
     display: flex;
     justify-content: space-between;
@@ -566,6 +616,37 @@ export default {
 
 }
 
+.cspopup{
+	position:fixed;
+	top:50%;
+	left:50%;
+	transform: translate(-50%, -50%);
+	width:560px;
+	height:560px;
+	z-index:999;
+		
+	.close_btn{
+		width:35px;
+		height:35px;
+		font-size:20px;
+		font-weight:500;
+		line-height:30px;
+		text-align:center;
+		display:block;
+		color:#fff;
+		background:#553646;
+		border-radius:50%;
+		position:absolute;
+		right:-10px;
+		top:-10px;
+		z-index:1000;
+	}
+}
+.hidden{
+  display:none;
+}
+
+
 .serviceText{
 	color: #797979;
 	text-decoration: none;