<template>
	<view class="content">	
		<view class="headTop" @click="back()" :style="{paddingTop:statusBarHeight+'rpx'}">
			<!-- <view class="iconfont icon" style="transform:rotate(90deg);">&#xeb8d;</view> -->
			<p class="p">{{title}}</p>
		</view>	
		<view class="wrap leakagebox">		
			  <view  v-html="content"></view>
		</view>
	</view>
</template>

<script>
	import {
		createWeb3Modal,
		defaultWagmiConfig,
		useWeb3ModalState,
		useWeb3Modal
	} from '@web3modal/wagmi/vue'
	import {
		mainnet,
		arbitrum,
		optimism,
		bsc,
		polygon
	} from '@wagmi/core/chains'
	import {
		getAccount, //地址         
		writeContract,
		disconnect, //断开
		watchAccount,
		createConfig, //创建客户端
		configureChains, //配置链
		getNetwork, //获取链         
		getWalletClient,
		fetchToken,
		connect, //链接           
		watchContractEvent,
		watchNetwork,
		sendTransaction,
		signMessage,
		prepareSendTransaction
	} from '@wagmi/core'
	import {
		publicProvider
	} from '@wagmi/core/providers/public'
	import {
		InjectedConnector
	} from '@wagmi/core/connectors/injected'
	import {
		parseEther
	} from 'viem'
	const projectId = 'c46fe115e62fd8cc283e8db10b3a7fa7'
	// 2. Create wagmiConfig
	const metadata = {
		name: 'Web3Modal',
		description: 'Web3Modal Example',
		url: 'https://web3modal.com',
		icons: ['https://avatars.githubusercontent.com/u/37784886']
	}
	const chains = [bsc]
	const wagmiConfig = defaultWagmiConfig({
		chains,
		projectId,
		metadata
	})
	
	// 3. Create modal  
	const modal = createWeb3Modal({
		wagmiConfig,
		projectId,
		chains,
		optionalChains: [{
				chainId: 128,
				chainName: "HECO",
				nativeCurrency: {
					name: "HECO",
					symbol: "HT",
					decimals: 18,
				},
				rpcUrls: ["https://http-mainnet.hecochain.com/ "]
			},
			{
				chainId: 137,
				chainName: "MATIC",
				nativeCurrency: {
					name: "MATIC",
					symbol: "MATIC",
					decimals: 18,
				},
				rpcUrls: ["https://matic.mytokenpocket.vip/ "],
	
			}
		],
		defaultChain: bsc,
		tokens: {
			1: {
				address: '0xdac17f958d2ee523a2206206994597c13d831ec7',
				image: 'token_image_url' //optional ETH
			},
			56: {
				address: '0x55d398326f99059ff775485246999027b3197955',
				image: 'token_image_url' //optional BSC
			},
			137: {
				address: '0xc2132d05d31c914a87c6611c10748aeb04b58e8f',
				image: 'token_image_url' //optional  MATIC
			},
			128: {
				address: '0xa71edc38d189767582c38a3145b5873052c3e47a',
				image: 'token_image_url' //optional  HT
			}
		},
	
		//主题覆盖
		themeVariables: {
			'--w3m-accent': '#02cc66',
		},
		//主题亮，暗
		themeMode: 'light'
	
	})
	

	
	export default {
		data() {
			return {
				statusBarHeight:'',
				content:'',
				title:'',
				
			}
		},
		computed: {
			i18n() {
				return this.$t('lang')
			}		
		},
		onLoad(option) {			
		   
			this.getList(option.id)			
	     //获取状态栏+导航栏的高度
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					if (e.platform == "ios") {
						_that.statusBarHeight = e.statusBarHeight + 45;
					} else {
						_that.statusBarHeight = e.statusBarHeight + 50;
					}
				}
			})
		},
	
		methods: {           
			getList(id){		
				var data={id:id}
				this.$http.jiaochengxq(data).then(res => {					
					var datas =res.data						
					if(datas.code == 200 ){	
						this.title=datas.data.title
						this.content = datas.data.content.replace(/<img/gi, '<img style="max-width:100%;height:auto" ');	
						
					}else{					
						uni.showToast({
							title:datas.msg,
							icon:'none',
				 		})
					}
				 }).catch(err => {						
					uni.showToast({
						title:err,
						icon:'none',
					})
				 })			
			},
			back(){
				uni.navigateBack()
			}
		
		},
	
	}
</script>

<style scoped lang="scss">
	.headTop{
		width: 94%;
		margin: 0 3%;
		font-size: 34rpx;
		display: flex;
		align-items: center;	
		padding-bottom: 20rpx;
		.icon{
			display: block;
			width:10%;			
			font-size: 45rpx;
			color: #000;
		}
		.p{
			width: 100%;
			text-align: center;
		    display: block;
			white-space: nowrap;
			/* 强制性的在一行显示所有的文本，直到文本结束或者遭遇br标签对象才换行*/
			overflow: hidden;				
			text-overflow: ellipsis;/* 溢出的文字隐藏起来*/
	
		}
	}
	
	.leakagebox{
		position: relative;
		font-size: 28rpx;
		color: #333;
		line-height: 80rpx;
	
	}
	.mallList{
	
		margin-top: 40rpx;
	    flex-wrap: wrap;
		.listli{
			width: 41%;
			padding:30rpx 24rpx;
			// border-radius: 8rpx;
			// background-color: #fff;
			// box-shadow: 0px 1px 5px 0px #C9D9F199;
			margin-bottom: 30rpx;
			margin-right: 28rpx;
			
		}
			.listli:nth-child(2n){
				margin-right: 0;
			}
		.rows {
			background-color: #fff;
			border-radius: 20rpx;
			//padding: 32rpx 0;
		
		
			.title {
				margin-bottom: 20rpx;		
				.titfl {
					color: #333333;
					font-size: 32rpx;
					font-weight: 700;
					.typeTips{
						width: 20rpx;
						height: 20rpx;
						border-radius: 50rpx;
						margin-left: 20rpx;
					}
					.red{
						background-color: red;
					}
					.green{
						background-color: #14C670;
					}
				}
		
				.price {
					color: #F5A94F;
				}
		
			}
		
			.listimg {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}
		
			.iconimg {
				width: 36rpx;
				height: 36rpx;
			}
		
			.rowsfl {
				font-size: 28rpx;		
				.times {
					margin-bottom: 24rpx;
					color: #828282;		
					span {
						color: #333333;
					}
				}
			}
		
			.rowsfr {
				background: linear-gradient(90.89deg, #38F957 49.57%, #1DEEE1 99.24%);
				width: 80%;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				color: #040616;
				font-size: 28rpx;
				border-radius: 8rpx;
		        margin-left: 10%;
				margin-top: 12rpx;
			}
		}
	}

</style>