vgts/pages/login/register.vue

<template>
	<view class="content" >
		<view class="wrap flex flsb" :style="{paddingTop:statusBarHeight+'rpx'}">
			<w3m-network-button size='md' balance='show' />
			<w3m-button size='sm' balance='hide' />
		</view>
		<view class="wrap">
			<image src="../../static/logos.png" class="logImg"></image>
			<view class="radius">
				<view class="title">邀請碼</view>
				<input type="text" v-model="inviteId" placeholder="請輸入上級邀請碼" placeholder-style="color:#fff" class="invitInput">
			</view>
			<view class="tjBtn buttonbj" @click="openbtns()">立即注册</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'
	// 1. Get projectId YOUR_PROJECT_ID
	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:'',
					inviteId:'',
					cType:'',
					walletAddress:''
				}
			},
			onLoad(option){			
				if(option){this.inviteId=option.inviteId}			
				const state = useWeb3ModalState()
				//账户信息
				const account = getAccount()
				//账户信息chain
				const {	chain} = getNetwork()
				const result = new InjectedConnector()				
				const unwatch = watchNetwork((network) => {
					this.getChindnew(network)
				})
				const unwatchAcc = watchAccount((account) => {
					this.watchAccounts(account)
				})
				if (account) {
					this.walletAddress = account.address
					uni.setStorageSync('walletAddress', account.address)
				}				
				//获取状态栏+导航栏的高度
				let _that = this;
				uni.getSystemInfo({
					success(e) {
						if (e.platform == "ios") {
							_that.statusBarHeight = e.statusBarHeight + 45;
						} else {
							_that.statusBarHeight = e.statusBarHeight + 50;
						}
					}
				})
			},
			methods:{
				getChindnew(obj) {
					this.cType = obj.chain.id
					if (obj.chain.id == 1) {
						this.cType = 'ETH'
						uni.setStorageSync('cType', 'ETH')						
					} else if (obj.chain.id == 56) {
						this.cType = 'BSC'
						uni.setStorageSync('cType', 'BSC')						
					} else if (obj.chain.id == 137) {
						this.cType = 'MATIC'
						uni.setStorageSync('cType', 'MATIC')						
					} else if (obj.chain.id == 128) {
						this.cType = 'HT'
						uni.setStorageSync('cType', 'HT')					
					}
				},
				watchAccounts(data){
					if(data.address!=this.walletAddress){
						this.walletAddress = data.address
						uni.setStorageSync('walletAddress', data.address)		
						this.cType = 'BSC'
						uni.setStorageSync('cType', 'BSC')
						
					}
					
					
				},
				openbtns(){	
					const state = useWeb3ModalState()
					//账户信息
					const account = getAccount()
					//账户信息chain
					const {	chain} = getNetwork()
					const result = new InjectedConnector()	
										
					if (account) {
						this.walletAddress = account.address
						uni.setStorageSync('walletAddress', account.address)
					}	
					const unwatchAcc = watchAccount((account) => {
						//console.log('ceshi',account)
						this.watchAccounts(account)
					})
					if(this.inviteId==''){
						uni.showToast({
							title: '請輸入上級邀請碼',
							icon: 'none',
						})
						return false			
					}
					
					//regUser
					let data = {
						walletAddress:this.walletAddress,
						cType:this.cType,
						invitation:this.inviteId
					}
				
					this.$http.regUser(data).then(res => {
						var datas = res.data
						if (datas.code == 200) {
							uni.showToast({
								title: datas.msg,
								icon: 'none',
							})
							uni.switchTab({
								url:'/pages/index/index'
							})					
						} else if(datas.code ==40001){
							uni.showToast({
								title: datas.msg,
								icon: 'none',
							})
							uni.switchTab({
								url:'/pages/index/index'
							})
						}else{
							uni.showToast({
								title: datas.msg,
								icon: 'none',
							})
						}
					}).catch(err => {
						uni.showToast({
							title: err
						})
					})
				}
			}
	}
</script>

<style scoped lang="scss">
	
	.logImg{
		width:300rpx;
		height: 300rpx;
		margin: 0 auto;
		display: block;
		padding-top: 10%;
	}
	.radius{
		width: 90%;
		margin: 120rpx 5% 20rpx 5%;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx 0;
		text-align: center;
		.title{
			font-size: 40rpx;
			color: #000;
		}
		.invitInput{
			width: 88%;
			margin-top: 20rpx;
			margin: 40rpx 5% 20rpx 5%;
			padding:20rpx 1%;
			background-color: #484a54;
			border-radius: 50rpx;
			//padding: 20rpx 0;
			color: #fff;
			text-align: center;
		}
		
	}
	.tjBtn {
		width: 90%;
		margin: 100rpx 5%;
		text-align: center;
		height: 92rpx;
		line-height: 92rpx;
		color: #333;
		font-weight: 700;
		border-radius: 8rpx;
		font-size: 36rpx;
	}
</style>