<template>
	<view class="customer">
		<scroll-view :scroll-y="true" :style="{ height: phoneHeight }">
			<view class="mainView marT30Auto textC">
				<view class="title textC marT80Auto backImg" :style="{ background: 'url(' + backImg + ')' }"><text class="font30">在线咨询</text></view>
				<view class="body marT50Auto" @click="checkImg">
					<view class="p20">
					<image :src="kfInfo.qrcode" class="qrCode"></image>
					</view>
				</view>
				<view class=" textC marT50 marT50Auto">
					<text class="font30 color333333">{{kfInfo.tel}}</text>
				</view>
				<view class="phoneButton textC marT19Auto" @click="kfPhone">
					<text class="font22 lineHeight40 color333333">点击拨打电话</text>
				</view>
				<view class="marT30">
					<text class="font24 color666666">长按保存二维码或者点击拔打电话</text>
				</view>
				<view>
					<text class="font24 color666666">添加客服微信</text>
				</view>
				<view>
					<text class="font24 color666666">我们会尽快回复您</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';

export default {
	data() {
		return {
			phoneHeight: null,
			kfInfo:{}
		};
	},
	computed: {
		backImg() {
			return this.imageRoot + 'zxzx.png';
		}
	},
	onLoad(e) {
		let _this = this;
		uni.getSystemInfo({
			success(res) {
				_this.phoneHeight = res.windowHeight + 'px';
			}
		});
		_this.init();
	},
	methods:{
		checkImg(){
			let _this=this
			let a=[]
			a.push(_this.kfInfo.qrcode)
			uni.previewImage({
				urls:a
			})
		},
		kfPhone(){
			let _this=this
			uni.makePhoneCall({
			    phoneNumber: _this.kfInfo.tel //仅为示例
			});
		},
		init(){
			let _this=this
			_this.CustomerService()
		},
		// 获取平台客户设置信息
		CustomerService(){
			let _this=this
			let data={}
			App._post_form('&do=CustomerService',data,res=>{
				_this.kfInfo=res.data
			})
		}
	}
};
</script>

<style lang="less">
.customer {
	font-size: 0;
}
.customer {
	background: #eeeeee;
}
.mainView {
	border: 1upx solid rgba(0, 0, 0, 0);
	width: 690upx;
	height: 840upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.marT30Auto {
	margin: 30upx auto 0 auto;
}
.textC {
	text-align: center;
}
.title {
	width: 271upx;
	height: 41upx;
}
.font30 {
	font-size: 30upx;
}
.marT80Auto {
	margin: 80upx auto 0 auto;
}
.backImg {
	background-size: 100% !important;
}
.body {
	width: 340upx;
	height: 340upx;
	border: 2upx solid rgba(255, 68, 68, 1);
	border-radius: 10upx;
}
.marT50Auto {
	margin: 50upx auto 0 auto;
}
.qrCode {
	width: 300upx;
	height: 300upx;
}
.phoneButton{
	width:164upx;
	height:40upx;
	background:rgba(245,245,245,1);
	border:1upx solid rgba(204,204,204,1);
	border-radius:4upx;
}
.font30{
	font-size: 30upx;
}
.lineHeight40{
	line-height: 40upx;
}
.color333333{
	color:rgba(51,51,51,1);
}
.font22{
	font-size: 22upx;
}
.marT19Auto{
	margin: 19upx auto 0 auto;
}
.font24{
	font-size: 24upx;
}
.marT30{
	margin: 30upx 0 0 0 ;
}
.color666666{
	color:rgba(102,102,102,1);
}
.p20{
	padding: 20upx;
}
</style>
