<template>
	<view class="le-wechat" v-show="is_show">
		<!-- #ifdef MP-WEIXIN -->
		<official-account @load="bindload" @error="binderror"></official-account>
		<!-- #endif -->
	</view>
</template>

<script setup>
	
	const props = defineProps({
		data: {
			type: Object,
			default: function() {
				return {};
			}
		}
	});
	
	const is_show  = ref(false);
	const height   = ref('0px;');
	
	const bindload = ()=>{
		is_show.value = true;
		height.value  = 'auto';
	}
	
	const binderror = ()=>{
		is_show.value = false;
		height.value  = '0px';
	}
	
</script>

<style lang="scss">
	.le-wechat {
		width: 100%;
	
		.le-wechat__tips {
			color: #c5c5c5;
			font-size: 20px;
			padding-left: 20px;
		}
	
		.le-wechat-body {
			width: 100%;
			height: 120px;
			position: relative;
	
			.le-wechat-img {
				position: absolute;
				width: 90px;
				height: 90px;
				background-color: red;
				left: 20px;
				top: 20px;
			}
	
			.le-wechat-title {
				position: absolute;
				width: 800px;
				height: 90px;
				left: 130px;
				top: 25px;
	
				.le-wechat-h3 {
					font-size: 32px;
					color: #000000;
				}
	
				.le-wechat-p {
					font-size: 24px;
					color: #ababab;
					line-height: 50px;
				}
			}
	
			.le-wechat-btn {
				position: absolute;
				width: 130px;
				height: 60px;
				border-radius: 8px;
				color: #54c856;
				border: 2px solid #54c856;
				right: 40px;
				bottom: 20px;
				text-align: center;
				line-height: 60px;
			}
		}
	}
</style>