first/components/cont/cont.vue

<template>
	<view class="flex">
	<view class="my-cont" @click="keCode=1" @mousedown="moveTo($event)">
		<image src="../../static/home/[email protected]" mode=""></image>
	</view>
	<u-mask  :z-index="10" :show="keCode==1"></u-mask>
	<view class="tc"  v-show="keCode==1">
	
		<view class="title">
				<image src="../../static/color/pop_icon_service@2x(1).png" mode="aspectFit" class="img1"></image>
		  <p>Customer Service</p>	
		</view>
		<view class="tc_body">
			<view class="p1">
			{{serviceTime}}
			</view>


			<scroll-view class="item" style="height:380rpx" scroll-y="true" show-scrollbar="true" scroll-with-animation="true" scroll-top="0" >
				<view class="body_item" @click="gotoWeb(getLink(item))" v-for="(item,index) in whatAppList"
					:key="item">
					<image src="../../static/color/[email protected]" mode="aspectFit" class="img2"></image>
					<view class="p2">
						{{getName(item)}}
					</view>
				</view>
				<view class="body_item" @click="gotoWeb(getLink(item))" v-for="(item,index) in teList"
					:key="item">
					<image src="../../static/color/pop_icon_teltgram.png" mode="" class="img2"></image>
					<view class="p2">
						<span class="whatapp-name">{{getName(item)}}</span>
					</view>
				</view>
			</scroll-view>
	
		</view>

<image src="../../static/color/pop_icon_close.png" mode="aspectFit" class="colseKefu" @click="keCode=0"></image>
	</view>
		</view>
</template>
			
<script>
	const COMPONENT_NAME = 'cont'
	export default {
		name: COMPONENT_NAME,
	   	// props:["teList","whatAppList"],
		data() {
			return {
			   keCode:0,
			   teList:[],
			   whatAppList:[],
			   serviceTime:'',
			}
		},
		computed: {
		
		},
		mounted() {
			this.serviceTime = uni.getStorageSync('siteInfo').serviceTime;
		const siteTelegram = uni.getStorageSync('siteInfo').siteTelegram;
		
			const siteWhatsapp = uni.getStorageSync('siteInfo').siteWhatsapp;
			if (siteTelegram != undefined && siteTelegram != '') {
				this.teList = siteTelegram.split(',')
				console.log(1111111 + this.teList)
			}
			if (siteWhatsapp != undefined && siteWhatsapp != '') {
				this.whatAppList = siteWhatsapp.split(',')
			}
		},
		methods: {
			// 移动联系客服标识
			moveTo(e){
			console.log(e,22222222)
				},
		gotoWeb(gotoUrl) {
			// #ifdef H5
			window.location.href = gotoUrl
			// #endif
			// #ifdef APP-PLUS
			var networkType = ''
			uni.getNetworkType({
				success: function(res) {
					networkType = res.networkType
				}
			});
			if (networkType == 'none') {
				uni.showToast({
					title: 'no Network',
					icon: 'none',
					duration: 1500
				})
			} else {
				var param = {
					url: gotoUrl
				}
				uni.navigateTo({
					url: '/pages/menu/me/rechange/topay/index?' + qs.stringify(param)
				})
			}
			// #endif
		},
		
	getLink(item) {
		return item.replace(item.split(':')[0] + ':', '')
	},
	getName(item) {
		console.log(item,20000);
		return item.split(':')[0]
	}
	},
	}
</script>


<style>
	.item{
		margin-top: 60rpx;
/* 		height: 380rpx;
		overflow-y: scroll;
		overflow-x: hidden; */
	}
	.img2{
		width: 60rpx;
		height: 60rpx;
	}
	.p2{
		font-size: 28rpx;
		color: #303133FF;
		margin-left: 20rpx;
	}
	.p1{
		font-size: 28rpx;
		color: #606266FF;
	}
	.colseKefu{
		position: absolute;
		right: 36rpx;
		top: 36rpx;
		width: 36rpx;
		height: 36rpx;
	}
	.img1{
		display: block;
		margin: 0 auto;
		width: 108rpx;
		height: 108rpx;
	}
	.content{
	position: relative;
	}
	.title{
			text-transform: capitalize;
			font-size: 28rpx;
			color: #954DE3FF;
			text-align: center;
		}
.title p{
	margin-top: 18rpx;
}
.body_item{
	display: flex;
	align-items: center;
	padding-bottom: 40rpx;
}
		.body_item_info{
			font-size: 28rpx;
			color: #606266;
			text-transform: capitalize;
			margin-top: 28rpx;
			margin-bottom: 20rpx;
		}
	.tc{
			width: 600rpx;
		   background-color: #fff;
		   border-radius: 24rpx;
		   	   padding-top: 48rpx;
			   position: fixed;
			   top: 50%;
			   left: 50%;
			   transform: translate(-50%,-50%);
			   z-index: 999;
		}
		.tc_body{
			padding: 48rpx 36rpx;
			padding-bottom: 0rpx;
			position: relative;
		}
		.tc_body::before{
			content: '';
			position: absolute;
			top: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			height: 2rpx;
			background-color: #EDEFF2FF;
		}
	.my-cont{
		width: 180rpx;
		height: 180rpx;
		position: fixed;
		top: 75%;
		right: 0;
	}
	.my-cont image{
		width: 100%;
		height: 100%;
	}
	 .flex{
		align-items: center;
	}
	.flex .my-cont{
		margin-left: auto;
		
	}
</style>