<template>
	<view class="container">
		<!-- 01. 电话区 -->
		<view class="use-item" @click="goCall(phone)">
			<view class="use-item-left">
				<image src="/static/unielepystatic/img/kefu/bg-customer-service.png" class="img_left"></image>
				<text class="use-item-text-left">电话客服</text>
			</view>
			<view class="use-item-right">
				<text class="use-item-text-right">{{phone}}</text>
				<image src="/static/unielepystatic/img/kefu/back.png" class="img_right"></image>
			</view>
		</view>
		<!-- 01. 微信客服区 -->
		<view class="use-item2">
			<view class="use-item2-left">
				<image  src="/static/unielepystatic/img/kefu/wechat-kefu.png" class="img_left"></image>
				<text class="use-item-text-left">微信客服</text>
			</view>
			<view class="ewm-inner">
				<image :show-menu-by-longpress="true" :src="qrcode" class="img"></image>
			</view>
		</view>
	</view>
	
</template>

<script>
	import common from "@/api/common.js"
	export default {
		data() {
			return {
				phone: '400-88888888',
				qrcode: '/static/unielepystatic/img/kefu/icon-defalutqrcode.png',
			}
		},
		onLoad(e) {
			// const res = uni.getSystemInfoSync()
			// console.log(res)
		},
		methods: {
			//获取数据(请根据实际情况配置客服信息的接口，以下只是示例)
			getData() {
				getRotationimgs(params).then(res=>{
					if(res.code == 2000) {
						let data = res.data.data
						console.log(data)
						this.swiperDatas = data
					}
					//  else {
					// 	uni.showToast({
					// 		icon:'none',
					// 		mask:true,
					// 		title:res.msg || '请求失败'
					// 	})
					// }
				})
			},
			//拨打电话
			goCall(phone){ 
				const res = uni.getSystemInfoSync()
				//安卓手机要设置一个showActionSheet
				uni.showActionSheet({
					title: phone,
				    itemList: ['呼叫'],
					itemColor:'#4f9cff',
				    success: function (res) {
				        // console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if(res.tapIndex+1==1){
							uni.makePhoneCall({
								phoneNumber:phone,
								success: (res) => {
									console.log("调用电话成功")
								},
								fail: (res) => {
									console.log("调用电话失败")
								}
							})
						}
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
				//ios系统默认有个弹窗
				// if(res.platform=='ios'){
				// 	//#ifdef H5 || MP-WEIXIN 
				// 	uni.makePhoneCall({
				// 		phoneNumber:phone,
				// 		success: (res) => {
				// 			console.log("调用电话成功")
				// 		},
				// 		fail: (res) => {
				// 			console.log("调用电话失败")
				// 		}
				// 	})
				// 	//#endif
				// 	//#ifdef APP-PLUS
				// 	plus.device.dial(phone, true);
				// 	//#endif
					
				// }else{
				// 	//#ifdef H5 || MP-WEIXIN 
				// 	//安卓手机要设置一个showActionSheet
				// 	uni.showActionSheet({
				// 		title: phone,
				// 	    itemList: ['呼叫'],
				// 		itemColor:'#4f9cff',
				// 	    success: function (res) {
				// 	        // console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				// 			if(res.tapIndex+1==1){
				// 				uni.makePhoneCall({
				// 					phoneNumber:phone,
				// 					success: (res) => {
				// 						console.log("调用电话成功")
				// 					},
				// 					fail: (res) => {
				// 						console.log("调用电话失败")
				// 					}
				// 				})
				// 			}
				// 	    },
				// 	    fail: function (res) {
				// 	        console.log(res.errMsg);
				// 	    }
				// 	});
				// 	//#endif
				// 	//#ifdef APP-PLUS
				// 	plus.device.dial(phone, true);
				// 	//#endif
				// }
				
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	.container{
		padding-top: 20rpx;
	}
	.margin-top {
	    margin-top: 20rpx;
	}
	.margin-lr {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.use-item{
		display:flex;
		align-items: center;// 垂直居中
		height: 110rpx;
		background: #FFFFFF;
		justify-content: space-between;
		.use-item-text-left{
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
			margin-left: 23rpx;
		}
		.use-item-text-right{
			font-size: 26rpx;
			font-weight: 400;
			color: #666666;
		}
		.img_left{
			margin-left: 30rpx;
			width: 40rpx;
			height: 40rpx;	
			cursor: pointer;
		}
		.img_right{
			width: 12rpx;
			height: 20rpx;
			margin-left: 15rpx;
		}
	}
	.use-item-left{
		display:flex;
		align-items: center;// 垂直居中
	}
	.use-item-right{
		display:flex;
		align-items: center;// 垂直居中
		margin-right: 15rpx;
	}
	
	.use-item2{
		margin-top: 20rpx;
		background: #FFFFFF;
		.img_center{
			width: 218rpx;
			height: 218rpx;
			padding-left: 220rpx;
			padding-top: 55rpx;
		}
	}
	.use-item2-left{
		display:flex;
		align-items: center;// 垂直居中
		padding-top: 30rpx;
		.use-item-text-left{
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
			margin-left: 23rpx;
		}
		.img_left{
			margin-left: 30rpx;
			width: 40rpx;
			height: 40rpx;	
			cursor: pointer;
		}
	}
	
	.ewm-inner{		
		display: flex;
		align-items: center;// 垂直居中
		justify-content: center;//水平居中
		padding:3rem;
		.img{
			width: 218rpx;
			height: 218rpx;
		}
	}
</style>
