UAW/src/components/walletDialog/index.vue

<template>
  <div class>
    <el-dialog class="dialog-wallet" :visible.sync="walletDialogVisible" :modal="false" :before-close="handleClose">
      <div class="dialog-header">
        <div>Please connect your wallet</div>
        <div @click="handleClose">
          <img src="./../../assets/home/close_btn.png" alt />
        </div>
      </div>
      <div class="dialog-content">
        <p>Connect your wallet to start your Counter Fire journey</p>
        
        <div class="wallet-content">
          <li
            v-for="(item, index1) in isWalletList"
            :key="index1"
            @click="getLinkWallet(item.value)"
          >
            <div>
              <img :src="item.imgUrl" alt />
              <span>{{ item.name }}</span>
            </div>
          </li>
          <li @click="disconnect" v-if="isWallet">
            <div class="disconnect">
              <span>Disconnect</span>
            </div>
          </li>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { isWalletConnected, linkWallet, disconnectLink, loginWithEthereum } from './../../wallet/index.js';
import { setToken, getToken } from './../../utils/cookies.js'

export default {
  props: {
    walletDialogVisible: Boolean,
  },
  data() {
    return {
      isWalletList: [
        {
          name: "MetaMask",
          value: "ethereum",
          imgUrl: require("./../../assets/home/icon_metaMask.png")
        },
        {
          name: "OKXwallet",
          value: "okxwallet",
          imgUrl: require("./../../assets/home/icon_OKXwallet.png")
        // },
        // {
        //   name: "WalletConnect",
        //   value: "connect",
        //   imgUrl: require("./../../assets/home/icon_ConnectWallet.png")
        }
      ],
      isWallet: !!localStorage.getItem('walletName'),
      myAddress: '',
      activity: 'uaw_activity',
    };
  },
  mounted() {
  },
  methods: {
    // 链接钱包
    async getLinkWallet(val) {
      // const currentWalletName = localStorage.getItem('walletName')
      // if(currentWalletName) {
      //   await disconnectLink(currentWalletName)
      // } 
      
      let res = await linkWallet(val)
      this.handleClose()
      localStorage.setItem('walletName',val)
      localStorage.setItem('myAddress',res)
      this.myAddress = res
      await this.getWalletConnected()
    },
    async disconnect() {
      let walletName = localStorage.getItem('walletName')
      await disconnectLink(walletName)
      this.logOut()
      this.isWallet = false
      location.reload()
    },

    // 登录
    async getWalletConnected() {
      let token = await loginWithEthereum(this.activity)
      await this.getUserState(token)
    },
    // 获取用户状态
    getUserState(token) {
      this.$axios.get('/api/user/state',{ params: '',
          headers: { Authorization: `Bearer ${token}` },
        }).then(res => {
          localStorage.setItem('userData', JSON.stringify(res.data.data))
          location.reload()
        })
    },

    // 关闭弹窗
    handleClose() {
      this.$emit("closeDialog");
    },

    async isWallet1() {
      let res = await isWalletConnected()
      console.log('isWalletConnected' ,res)
    },

    // 设置token过期
    setCookie(exdays) {
      setToken('1')
      console.log(getToken())
      return
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      // window.document.cookie =
      //   "userName" + "=" + 'time' + ";path=/;expires=" + exdate.toGMTString();
      // window.document.cookie =
      //   "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      // window.document.cookie =
      //   "rememeber" +
      //   "=" +
      //   c_rememeber +
      //   ";path=/;expires=" +
      //   exdate.toGMTString();
    },
    //读取cookie
    getCookie() {
      console.log(document.cookie,'document.cookie-------------------------------------------------------')
      // if (document.cookie.length > 0) {
      //   var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
      //   for (var i = 0; i < arr.length; i++) {
      //     var arr2 = arr[i].split("="); //再次切割
      //     //判断查找相对应的值
      //     if (arr2[0] === "userName") {
      //       this.loginForm.email = arr2[1]; //保存到保存数据的地方
      //     } else if (arr2[0] === "userPwd") {
      //       this.loginForm.password = arr2[1];
      //     } else if (arr2[0] === "rememeber") {
      //       this.loginForm.isRememeber = arr2[1] !== true;
      //     }
      //   }
      // }
    },
    //清除cookie
    clearCookie: function () {
      this.setCookie("", -1); //修改2值都为空，天数为负1天就好了
      // localStorage.clear()
    },

    // 退出登录
    logOut() {
      localStorage.removeItem('userData')
      localStorage.removeItem('myAddress')
      localStorage.removeItem('token')
      localStorage.removeItem('walletName')
      // location.reload()
    },
  }
};
</script>

<style lang="scss" scoped>
div {
  .dialog-wallet {
    ::v-deep .el-dialog {
      width: 600px;
      border-radius: 20px;
      overflow: hidden;
      background: #2d2738;
      .el-dialog__header {
        // display: none;
        padding: 0;
        button {
          display: none;
        }
      }
      .el-dialog__body {
        padding: 0;
        color: #fff;
        .dialog-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 30px;
          height: 60px;
          line-height: 60px;
          background: #1c1725;
          border-radius: 20px 20px 0 0;
          font-size: 26px;
          font-family: "Anton";
          div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            img {
              width: 30px;
              height: 30px;
              cursor: pointer;
            }
          }
        }
        .dialog-content {
          background: #2d2738;
          padding: 0 30px;
          padding-bottom: 20px;
          p {
            text-align: left;
            padding: 20px 0;
            font-size: 16px;
          }
          .wallet-content {
            li {
              display: flex;
              align-items: center;
              margin: 20px 0;
              cursor: pointer;
              border: 2px solid #625a6b;
              border-radius: 8px;
              text-align: left;
              padding: 15px 30px;
              div {
                display: flex;
                align-items: center;
                img {
                  width: 40px;
                  height: 40px;
                }
                span {
                  margin-left: 20px;
                  font-size: 24px;
                }
              }
              &:hover {
                background: #d5befa;
                color: #000;
                border: 2px solid #d5befa;
              }
            }
            li:nth-child(3) {
              background: #d5befa;
              .disconnect {
                text-align: center;
                margin: 0 auto;
                color: #000;
              }
            }
          }
        }
      }
    }
  }
}
</style>