<template>
	<view>
		<!-- #ifdef MP-TOUTIAO -->
		<!-- 抖音im客服 -->
		<view class="imKefu">
			<button open-type="im" class="imKefu-btn" :data-im-id="imId" @im="imCallback" @error="onimError">
				<image class="imKefu-img" src="../../static/images/me/imMsg.png" mode=""></image>
				<view class="imKefu-txt">
					在线客服
				</view>
			</button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		name: "ttMsg",
		data() {
			return {
				imId: '', //客服抖音号
			};
		},
		created() {
			this.imId = uni.getStorageSync('imId')
		},
		methods: {
			imCallback(e) {
				console.log("跳转IM客服成功", e.detail);
			},
			onimError(e) {
				uni.showToast({
					title: '拉起IM客服失败',
					icon: 'none'
				})
				console.log("拉起IM客服失败", e.detail);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.imKefu-btn::after {
		border: none;
		background-color: none;
	}

	.imKefu-btn {
		display: flex;
		align-items: center;
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		// line-height: 140rpx;
		overflow: hidden;
		color: #000000;
		/* background-color: #fff; */
		background: rgba(255, 255, 255, 0);
		font-size: 22rpx;
		width: 100rpx;
		height: 150rpx;
	}

	.imKefu {
		position: fixed;
		right: 30rpx;
		bottom: 200rpx;
		width: 100rpx;
		height: 150rpx;
		z-index: 999999;

		.imKefu-img {
			width: 100rpx;
			height: 100rpx;
		}

		.imKefu-txt {
			width: 100rpx;
			text-align: center;
			color: #000000;
			position: absolute;
			bottom: 0;
			font-size: 22rpx;
		}
	}
</style>