<style lang='scss' scoped>
	.onlineServe{
		width: 100%;
		height: 100%;
		background: url("data:image/jpeg;base64,[encoded data, 62708 characters]") no-repeat;
		background-size: 100% 100%;
		padding-top: 25vh;
		&-list{
			padding: $paddingTB 67rpx;
		}
		&-box{
			display: flex;
			border: 15rpx solid rgba(255, 255, 255, 0.36);
			background: #fff;
			background-clip: padding-box;
			padding: 42rpx 38rpx;
			border-radius: 28rpx;
			align-items: center;
			box-shadow: 0px 6rpx 10rpx 0px rgba(94, 134, 255, 0.1);
			margin-bottom: 30rpx;
			&-line{
				width: 2rpx;
				background-color: #e5e5e5;
				height: 100%;
			}
			&-icon{
				width: 100rpx;
				height: 100rpx;
				/* border-radius: 50%; */
				margin-right: 38rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20rpx;
				border-radius: 30rpx;
				margin-bottom: 20rpx;
				transform: rotate(45deg);
				.diconfont{
					transform: rotate(-45deg);
					font-size: 46rpx;
					color: #FFF;
				}
			}
			&-msg{
				width: 440rpx;
			}
		}
		.official-account-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			.aboutUs-text{
				margin-top: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
		}
	}
</style>
<template>
	<view class="onlineServe">
		<!-- <view class="onlineServe-header-img">
			<u-image mode="scaleToFill" width="100%" height="500rpx" :src="require('@/static/images/home/callme.png')"></u-image>
		</view> -->
		<view class="onlineServe-list">
			<view class="onlineServe-box" v-for="(item,index) in serveList" :key="index" @click="goServeUrlFn(item)">
				<view class="onlineServe-box-icon" :style="{background:item.bgColor,boxShadow:item.boxShadow}">
					<!-- <tuiIcon :name="item.icon" size="50" color="#fff"></tuiIcon> -->
					<view class="diconfont" :class="item.icon" ></view>
				</view>
				<!-- <view class="onlineServe-box-line ml20 mr20"></view> -->
				<view class="onlineServe-box-msg">
					<view class="pb20 text-bold" style="font-size: 32rpx;">{{item.title}}</view>
					<view class="" style="color: #999;">{{item.introduction}}</view>
				</view>
				<u-icon name="arrow-right" color="#C4C4C4"></u-icon>
			</view>
		</view>
		<view class="official-account-box">
			<u-image mode="scaleToFill" width="238" height="238" :src="appConfig.wechatCode"></u-image>
			<view class="aboutUs-text">
				{{appConfig.companyName}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				serveList:[
					// {
					// 	icon:"weixin1",
					// 	title:"官方微信",
					// 	introduction:"请扫描二维码，关注官方微信",
					// 	bgColor:"#30D159",
					// 	url:"./aboutUs"
					// },
					{
						icon:"dicon-duanxin",
						boxShadow:"0px 7px 10px 0px rgba(48,136,254,0.5)",
						title:"商务合作",
						introduction:"service@drgyen.com",
						bgColor:"linear-gradient(0deg, #2365C0, #24B4E9)"
					},
					{
						icon:"dicon-zuoji",
						boxShadow:"0px 7rpx 10rpx 0px rgba(48,136,254,0.5)",
						title:"服务热线",
						introduction:"18059776307",
						bgColor:"linear-gradient(0deg, #7244EF, #9388F9)"
					},
					// {
					// 	icon:"ie",
					// 	title:"官方网站",
					// 	introduction:"www.gkiiot.com",
					// 	bgColor:"#3CBDFF"
					// },
					]
			}
		},
		computed:{
			appConfig() {
				return this.$store.state.app.appConfig
			},
		},
		onLoad() {
			let appConfig = this.$store.state.app.appConfig;
			this.serveList[0].introduction = appConfig.email;
			this.serveList[1].introduction = appConfig.phone;
			
		},
		methods: {
			goServeUrlFn(obj){
				switch (obj.title){
					case "服务热线":
						uni.makePhoneCall({
						    phoneNumber: obj.introduction //仅为示例
						});
						break;
					case "官方网站":
						uni.setClipboardData({
						    data: obj.introduction,
						    success: function () {
						        console.log('success');
						    }
						});
						break;
					case "商务合作":
						uni.setClipboardData({
						    data: obj.introduction,
						    success: function () {
						        console.log('success');
						    }
						});
						break;
					default:
						uni.navigateTo({
							url:obj.url
						})
						break;
				}
			}
		}
	}
</script>
