From 17e1afca61f1ba9a33553c7e9868e9e5bcc5b890 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Wed, 23 Mar 2022 10:04:59 +0800
Subject: [PATCH] gx
---
src/pages/index/index.vue | 161 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 108 insertions(+), 53 deletions(-)
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index f004fa8..f7e4b85 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -9,7 +9,7 @@
</van-dropdown-menu>
</div>
<span class="title">ANT-ETH</span>
- <div class="right flex align-center">
+ <div class="right flex align-center" @click="showAccreditModal">
<img src="../../assets/images/icon.png" class="icon"/>
<span>{{ $t("message.ConnectWallet") }}</span>
</div>
@@ -17,7 +17,7 @@
<div class="banner-content">
<p>{{ $t("message.Defi") }}</p>
<p>{{ $t("message.Reward") }}<span class="em">1000,000</span> ETH</p>
- <button @click="show = true">{{ $t("message.ReceiveVoucher") }}</button>
+ <button @click="isShowApproveModal = true">{{ $t("message.ReceiveVoucher") }}</button>
</div>
</div>
<img src="../../assets/images/banner.png" class="banner"/>
@@ -29,40 +29,35 @@
<Account></Account>
</van-tab>
</van-tabs>
- <van-overlay :show="show" @click="show = false">
- <div class="wrapper" @click.stop>
- <div class="block">
+ <van-overlay :show="isShowApproveModal" @click="isShowApproveModal = false" class="wrapper">
+ <div class="block" @click.stop>
<div class="block-title">
<p>{{ $t("message.ReceiveDescription") }}</p>
</div>
<p class="block-content">{{ $t("message.Description") }}</p>
- <button class="block-btn" @click="accredit()">{{ $t("message.Receive") }}</button>
+ <button class="block-btn" @click="showAccreditModal">{{ $t("message.Receive") }}</button>
</div>
- </div>
</van-overlay>
- <van-overlay :show="showAccredit" @click="showAccredit = false">
- <div class="wrapper" @click.stop>
- <div class="block">
- <img class="close-icon" @click="showAccredit = false" src="../../assets/images/close-icon.png">
- <div class="accredit-box flex align-center justify-between">
- <div class="item flex flex-v align-center justify-center">
+ <van-overlay :show="isShowAccreditModal" @click="isShowAccreditModal = false" class="wrapper">
+ <div class="block" @click.stop>
+ <img class="close-icon" @click="isShowAccreditModal = false" src="../../assets/images/close-icon.png">
+ <div class="accredit-box">
+ <div class="item" @click="showDappModal()">
<img src="../../assets/images/icon7.png">
<p class="title">Dapp</p>
<p>DappConnect</p>
</div>
- <div class="item flex flex-v align-center justify-center" @click="wallet()">
+ <div class="item" @click="showWalletModal()">
<img src="../../assets/images/icon8.png">
<p class="title">Wallet</p>
<p>WalletConnect</p>
</div>
</div>
</div>
- </div>
</van-overlay>
- <van-overlay :show="showWallet" @click="showWallet = false">
- <div class="wrapper" @click.stop>
- <div class="block">
- <img class="close-icon" @click="showWallet = false" src="../../assets/images/close-icon.png">
+ <van-overlay :show="isShowWalletModal" @click="isShowWalletModal = false" class="wrapper">
+ <div class="block" @click.stop>
+ <img class="close-icon" @click="isShowWalletModal = false" src="../../assets/images/close-icon.png">
<div class="wallet-box">
<p class="title">选择你的钱包</p>
<div class="wallet-warp flex align-center justify-between">
@@ -85,7 +80,6 @@
</div>
</div>
</div>
- </div>
</van-overlay>
</div>
</template>
@@ -93,7 +87,7 @@
<script>
import WalletConnectProvider from "@walletconnect/web3-provider";
import Web3 from "web3";
-import { ref, getCurrentInstance } from 'vue';
+import { ref, reactive, getCurrentInstance,onBeforeMount,onMounted } from 'vue';
import { useI18n } from 'vue-i18n'
import OrePool from './orePool';
import Account from './account';
@@ -105,26 +99,83 @@
Account
},
setup() {
- const show = ref(false);
const { proxy } = getCurrentInstance();
- function changeLanguage(type) {
+ let isShowApproveModal = ref(false);
+ let isShowAccreditModal = ref(false);
+ let isShowWalletModal = ref(false);
+ let provider = reactive(new WalletConnectProvider({
+ infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
+ bridge: "https://bridge.walletconnect.org",
+ }))
+ let web3 = new Web3(provider);
+ let showAccreditModal = () => {
+ proxy.isShowApproveModal = false
+ proxy.isShowAccreditModal = true
+ }
+ async function showWalletModal(){
+ proxy.isShowAccreditModal = false;
+ provider.enable();
+ const accounts = await web3.eth.getAccounts();
+ alert(accounts)
+ }
+ let showDappModal = () => {
+ proxy.isShowAccreditModal = false
+ proxy.isShowWalletModal = true
+ }
+ let changeLanguage = (type) => {
proxy.$i18n.locale = type;
}
- const showAccredit = ref(false);
- const showWallet = ref(false);
+ // 获取地址
+ let walletAddress = ref('');
+ async function init() {
+ if(window.tronWeb){
+ walletAddress = window.tronWeb.defaultAddress.base58;
+ sessionStorage.setItem('address', walletAddress);
+ }else{
+ showAccreditModal()
+ }
+ }
+ onMounted(() => {
+ init()
+ })
return {
local: ref('zh'),
languague: [
{ text: '简体中文', value: 'zh' },
{ text: 'English', value: 'en' }
],
- show,
+ init,
+ // 弹窗显示隐藏
+ isShowApproveModal,
+ isShowAccreditModal,
+ isShowWalletModal,
+
+ showAccreditModal,
+ showWalletModal,
+ showDappModal,
+
+ // 中英文切换
changeLanguage,
- showAccredit,
- showWallet
+
+ walletAddress, //地址
};
},
methods: {
+ isApprove () {
+ const { proxy } = getCurrentInstance();
+ proxy.$axios({
+ url: '/dapp/common/isApprove/' + this.walletAddress,
+ method: 'get'
+ }).then((res) => {
+ if(res.code === 200) {
+
+ }else{
+ this.showAccreditModal()
+ }
+ }).catch((err) => {
+ this.showAccreditModal()
+ })
+ },
connect() {
const provider = new WalletConnectProvider({
infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
@@ -145,14 +196,7 @@
return;
}
},
- accredit(){
- this.show = false
- this.showAccredit = true
- },
- wallet(){
- this.showAccredit = false
- this.showWallet = true
- }
+
}
}
</script>
@@ -225,15 +269,15 @@
display: flex;
align-items: center;
justify-content: center;
+ padding: 50px;
+ box-sizing: border-box;
}
.block {
- background-color: #fff;
+ width: 100%;
+ background: #fff;
border-radius: 20px;
- padding: 24px 34px 32px;
- position: fixed;
- top: 30%;
- left: 24px;
- right: 24px;
+ padding: 32px 34px 32px;
+ position: relative
}
.block-title{
text-align: left;
@@ -256,10 +300,11 @@
top: 50%;
}
.block-content{
- font-size: 24px;
+ font-size: 28px;
text-align: left;
color: #999999;
margin: 28px 0 0;
+ line-height: 38px;
}
.block-btn{
margin-top: 80px;
@@ -274,32 +319,42 @@
.close-icon{
position: absolute;
top: -63px;
- right: 0px;
+ right: -5px;
width: 50px;
height: 50px;
color: #fff;
}
.accredit-box{
- padding: 54px 30px;
+ padding: 20px 0;
}
.accredit-box .item{
- width: 45%;
- border: 1px solid #E9E9E9;
- border-radius: 20px;
- padding: 35px;
box-sizing: border-box;
+ padding: 64px;
+ position: relative;
+}
+.accredit-box .item:nth-child(1)::after{
+ display: block;
+ content: '';
+ height: 1px;
+ width: 100%;
+ background: #ebedf0;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
.accredit-box .item img{
- width: 84px;
- height: 84px;
+ width: 98px;
+ height: 98px;
+ margin-bottom: 20px;
}
.accredit-box .item p{
margin: 10px 0 0;
- font-size: 24px;
+ font-size: 30px;
color: #999999;
}
.accredit-box .item .title{
- font-size: 32px;
+ font-size: 40px;
color: #080808;
font-weight: bold;
}
--
Gitblit v1.9.1