<template>
	<view class="footer_kefu">
		<image class="kimg" @tap="toopenkf(1)" src="../../static/img/index/k1.png"></image>
		<view class="line1"></view>
		<image class="kimg" @tap="toopenkf(2)" src="../../static/img/index/k2.png"></image>
		<view class="line1"></view>
		<image class="kimg" @tap="totop()" src="../../static/img/index/k3.png"></image>
		
		<view class="kefu_content" v-if="openkf==1">
			<view class="k_title">
				<text >客服</text>
				<image class="delete"  @tap="openkf=0" src="../../static/img/index/close.png"></image>
			</view>
			<view class="qq">
				<image class="icon_qq"  @tap="openkf=0" src="../../static/img/index/qq.png"></image>
				<view class="qqs">
					<view>QQ</view>
					<view >{{detail.qq}}</view>
				</view>
			</view>
			<view class="kine"></view>
			<view></view>
			<view class="qqss">
				<image class="icon_qq"  @tap="openkf=0" src="../../static/img/index/phone.png"></image>
				<view class="qqs">
					<view>客服热线</view>
					<view >{{detail.wechat}}</view>
				</view>
			</view>
		</view>
		<view class="fk_content" v-if="openkf==2">
			<view class="fk_title">
				<text >问题反馈</text>
				<image class="delete"  @tap="openkf=0" src="../../static/img/index/close.png"></image>
			</view>
			
			<input class="input" v-model="formData.mobile" type="text" placeholder="请输入手机号" placeholder-class="placeholder-class" maxlength="20">
			<input class="input" v-model="formData.rePassword" type="password" placeholder="请输入邮箱" placeholder-class="placeholder-class"/>
			<textarea class="fks" v-model="formData.fks" id="" cols="30" rows="10" placeholder="问题描述" placeholder-class="placeholder-class"></textarea>
			<view class="tijiao" @tap="tijao()">提交</view>
		</view>
	</view>
	
	
	
	
</template>

<script>
	export default {
		data(){
			return {
				openkf: 0,
				formData:[],
				detail:[]
			}
		},
		created() {
			this.getSet();
		},
		methods:{
			tijao(){
				uni.showToast({
					icon:'none',
					title: '提交成功',
					duration:1500
				})
				this.openkf=0;
			},
			getSet(){
				this._get('game.index/setting',{
				},res=>{
					this.detail = res.data.set;
					// console.log(this.set,22)
				});
			},
			toopenkf(e){
				if(this.openkf!=e){
					this.openkf=e;
				}else{
					this.openkf=0;
				}
			},
			totop(){
				  window.scrollTo({
				                top: 0,
				                behavior: 'smooth'
				    });
				//document.body.scrollTop = document.documentElement.scrollTop = 0;
			}
		}
	}
</script>

<style lang="scss">
	.kefu_content{
		width: 249px;
		height: 249px;
		background: #FFFFFF;
		position: fixed;
		right: 110px;
		bottom: 166px;
		.qq{
			display: flex;
			padding: 30px 24px 21px 24px;	
		}
		.qqss{
			display: flex;
			padding: 21px 24px 30px 24px;	
		}
		.icon_qq{
			width: 17px;
			height: 17px;
			margin-right: 10px;
			margin-top: 8px;
		}
		.qqs{
			font-size: 21px;
			font-weight: 400;
			color: #333333;
		}
		.k_title{
			padding: 0 24px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 43px;
			background: #F48612;
			color: #FFFFFF;
			font-size: 21px;
			.delete{
				width: 19px;
				height: 19px;
			}
		}
		
		.kine{
			width: 201px;
			border-bottom: 1px solid #EAEAEA;
			margin: 0 auto; 
		}
	}
	.fk_content{
		width: 376px;
		height: 551px;
		background: #FFFFFF;
		position: fixed;
		right: 110px;
		bottom: 66px;
		.fk_title{
			padding: 0 24px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 43px;
			background: #F48612;
			color: #FFFFFF;
			font-size: 21px;
			.delete{
				width: 19px;
				height: 19px;
			}
		}
		.input{
			width: 305px;
			height: 43px;
			background: #FFFFFF;
			border: 1px solid #EAEAEA;
			border-radius: 5px;
			margin: 31px auto; 
			padding: 0 12px;
		}
		.fks{
			width: 305px;
			height: 193px;
			background: #FFFFFF;
			border: 1px solid #EAEAEA;
			border-radius: 5px;
			margin: 0 auto;
			padding: 12px;
		}
		.tijiao{
			width: 329px;
			height: 43px;
			background: #F48612;
			border-radius: 5px;
			margin: 0 auto;
			color: #ffffff;
			text-align: center;
			line-height:43px;
			margin-top: 30px;
		}
	}
	.footer_kefu{
		display: none !important;
		width: 96px;
		height: 307px;
		background: #000000;
		position: fixed;
		right: 0;
		bottom: 108px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		cursor: pointer;
		.line1{
			width: 69px;
			border-bottom: 1px solid #565656;
		}
		.kimg{
			width: 50px;
			height: 50px;
		}
	}
	
	
</style>
