gx

queenwuli

2022-03-22 d55eea1d954bf4f5c7129ba78770f0d3407bea4b

 src/pages/index/index.vue

@@ -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="showApproveModal()">{{ $t("message.ReceiveVoucher") }}</button>
            </div>
        </div>
        <img src="../../assets/images/banner.png" class="banner"/>
@@ -29,28 +29,28 @@
              <Account></Account>
            </van-tab>
        </van-tabs>
        <van-overlay :show="show" @click="show = false">
        <van-overlay :show="isShowApproveModal" @click="hideApproveModal">
          <div class="wrapper" @click.stop>
            <div class="block">
              <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">
        <van-overlay :show="isShowAccreditModal" @click="hideAccreditModal">
          <div class="wrapper" @click.stop>
            <div class="block">
              <img class="close-icon" @click="showAccredit = false" src="../../assets/images/close-icon.png">
              <img class="close-icon" @click="hideAccreditModal" 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">
                  <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 flex flex-v align-center justify-center" @click="showWalletModal()">
                  <img src="../../assets/images/icon8.png">
                  <p class="title">Wallet</p>
                  <p>WalletConnect</p>
@@ -59,10 +59,10 @@
            </div>
          </div>
        </van-overlay>
        <van-overlay :show="showWallet" @click="showWallet = false">
        <van-overlay :show="isShowWalletModal" @click="hideWalletModal">
          <div class="wrapper" @click.stop>
           <div class="block">
              <img class="close-icon" @click="showWallet = false" src="../../assets/images/close-icon.png">
              <img class="close-icon" @click="hideWalletModal" src="../../assets/images/close-icon.png">
              <div class="wallet-box">
                <p class="title">选择你的钱包</p>
                <div class="wallet-warp flex align-center justify-between">
@@ -93,7 +93,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,23 +105,41 @@
    Account
  },
  setup() {
    const show = ref(false);
    const { proxy } = getCurrentInstance();
    function changeLanguage(type) {
    const changeLanguage = (type) => {
      proxy.$i18n.locale = type;
    }
    const showAccredit = ref(false);
    const showWallet = ref(false);
    let provider = reactive(new WalletConnectProvider({
        infuraId: '27e484dcd9e3efcfd25a83a78777cdf1',
        bridge: "https://bridge.walletconnect.org",
    }))
    async function initWalletConnect() {
      let tronWeb = window.tronWeb;
      alert(tronWeb)
      // const web3 = new Web3(provider);
      // const accounts = await web3.eth.getAccounts();
      // console.log(accounts)
      // web3.eth.getAccounts().then((res) => {
      //   alert(res)
      // }).catch((err) => {
      //   alert(err)
      // });
    }
    onMounted(() => {
      initWalletConnect()
    })
    return {
      local: ref('zh'),
      languague: [
        { text: '简体中文', value: 'zh' },
        { text: 'English', value: 'en' }
      ],
      show,
      changeLanguage,
      showAccredit,
      showWallet
      provider,
      initWalletConnect,
      isShowApproveModal: ref(false),
      isShowAccreditModal: ref(false),
      isShowWalletModal: ref(false),
      changeLanguage
    };
  },
  methods: {
@@ -145,13 +163,26 @@
        return;
      }
    },
    accredit(){
      this.show = false
      this.showAccredit = true
    showApproveModal(){
      this.provider.enable();
      this.isShowApproveModal = true
    },
    wallet(){
      this.showAccredit = false
      this.showWallet = true
    hideApproveModal(){
      this.isShowApproveModal = false
    },
    showAccreditModal(){
      this.isShowApproveModal = false
      this.isShowAccreditModal = true
    },
    hideAccreditModal(){
      this.isShowAccreditModal = false
    },
    showWalletModal(){
      this.hideAccreditModal()
      this.isShowWalletModal = true
    },
    hideWalletModal(){
      this.isShowWalletModal = false
    }
  }
}
@@ -256,10 +287,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;