wallet_app/src/views/wallet/index.vue

<template>
    <div class="container">
      <!-- <div class="bg-img"></div> -->
      <svg-icon name="wallet-bg" class="bg-img" />
      <div class="user-info-body">
        <div class="user-info-lf">
          <van-image
            width="28px"
            height="28px"
            round
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <div class="user-info">
            <div class="user-info-name" @click="showWallet = true">
              <div>Wallet</div>
              <svg-icon style="width: 16px; height: 16px;margin-left: 3px;" name="down" />
            </div>
            <div class="user-info-key-body">
              <span class="user-info-key-body-text">0xF3fefE…EcaB</span>
              <svg-icon style="width: 16px; height: 16px;" name="copy" />
            </div>
          </div>
        </div>
        <div class="network">
          <svg-icon style="width: 20px; height: 20px;" name="acc" />
          <div class="network-name">ACC</div>
        </div>
      </div>
      <div class="amount">
        <div class="amount-item-box">
          <div>Total assets</div>
          <div class="amount-item">
            <div class="item-text">
              <svg-icon class="my" style="width: 28px; height: 28px;" name="my" />
              <div>{{isShow?'2,536.00':'****'}}</div>
            </div>
            <svg-icon  style="width: 16px; height: 16px;" :name="isShow?'eyes':'seyes'" @click="isShow = !isShow"/>
          </div>
        </div>
        <svg-icon style="width: 24px; height: 24px; margin-right: 27px;" name="right" @click="goToPage('walletDetail')"/>
      </div>
      <div class="card-box">
        <div class="box-cont" @click="goToPage('exchange')">
          <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="1" />
          <div>元宝兑换</div>
        </div>
        <div class="box-cont" @click="goToPage('proceeds')">
          <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="2" />
          <div>收款</div>
        </div>
        <div class="box-cont" @click="goToPage('transferDetail')">
          <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="3" />
          <div>转账</div>
        </div>
        <div class="box-cont">
          <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="4" />
          <div>竞赛</div>
        </div>
        <div class="box-cont">
          <svg-icon class="box-cont-icon" style="width: 30px; height: 30px;" name="5" />
          <div>区块浏览器</div>
        </div>
      </div>
      <div class="list-box">
        <div class="list-title">
          <div>代币</div>
          <svg-icon style="width: 24px; height: 24px;" name="add" @click="changePop(1)"/>
        </div>
        <div class="list-ul">
          <div class="list-li" v-for="item in 10" @click="changePop(2)">
            <div class="list-li-lf">
              <svg-icon style="width: 30px; height: 30px;margin-right: 8px;" name="acc" />
              <div>ACC</div>
            </div>
            <div class="list-li-ri">
              <div>6.6476474848</div>
              <div class="list-li-ri-num">$6.6476474848</div>
            </div>
          </div>
        </div>
      </div>
      <van-popup v-model:show="showWallet" position="bottom" round>
        <div class="pop-content">
          <div class="pop-title">
            <svg-icon style="width: 24px; height: 24px;" name="left-arrow" @click="showWallet = false"/>
            <div class="title">选择钱包</div>
          </div>
          <div class="tree">
            <div class="tree-lf">
              <div class="tree-lf-icon" v-for="(item,i) in 10" :class="i == 0?'active-bg':''">
                <svg-icon style="width: 32px; height: 32px;" name="acc" />
              </div>
            </div>
            <div class="tree-ri">
              <div class="tree-ri-title">ACC</div>
              <div class="tree-ul">
                <div class="tree-li" v-for="(item,i) in 10" :class="i == 0?'tree-active':''">
                  <van-image
                    width="37px"
                    height="37px"
                    round
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                  />
                  <div class="tree-li-cont">
                    <div class="tree-li-text">名字</div>
                    <div class="tree-li-address">
                      <span>0xF3fefE…EcaB</span>
                      <svg-icon style="width: 16px; height: 16px;margin-left: 2px;" name="copy" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pop-btn" @click="addWallet">
            <van-button class="btn" type="primary" size="large" color="#4765DD"> 
              <svg-icon style="width: 24px; height: 24px;margin-right: 4px;" name="add1" />添加钱包
            </van-button>
          </div>
        </div>
      </van-popup>
      <van-popup v-model:show="showHistory" position="bottom" round style="height:500px">
        <div class="pop-content" style="height:500px">
          <div class="pop-title">
            <svg-icon style="width: 24px; height: 24px;" name="left-arrow" @click="showHistory = false"/>
            <div class="title">{{ type == 1?'添加代币':'历史记录' }}</div>
          </div>
          <!-- 1 -->
          <div class="pop-ul" v-if="type == 1">
            <div class="pop-li" v-for="(item,i) in 3">
              <div class="pop-li-lf">
                <svg-icon style="width: 32px; height: 32px;margin-right: 6px;" name="acc" />
                <div>
                  <div>STT</div>
                  <div class="pop-address">0x712f...7b27</div>
                </div>
              </div>
              <svg-icon style="width: 20px; height: 20px;" :name="i == 0?'add-icon':'del-icon'" />
            </div>
          </div>
          <!-- 2 -->
          <div class="pop-list" v-if="type == 2">
            <div class="pop-list-box" v-for="(item,i) in 10">
              <svg-icon style="width: 24px; height: 24px;color: #fff;" :name="i == 0?'fs':'js'" />
              <div class="pop-list-ul">
                <div class="pop-list-li">
                  <div class="pop-list-li-title">{{i == 0?'发送':'接收'}}</div>
                  <div class="pop-list-li-status">成功</div>
                </div>
                <div class="pop-list-li">
                  <div>转账金额</div>
                  <div>0ACC</div>
                </div>
                <div class="pop-list-li">
                  <div>发送时间</div>
                  <div>2025-06-06 19:08:17</div>
                </div>
                <div class="pop-list-li">
                  <div>收款地址</div>
                  <div>0x712f...7b27<svg-icon style="width: 16px; height: 16px;" name="copy" /></div>
                </div>
                <div class="pop-list-li">
                  <div>hash</div>
                  <div>0x712f...7b27<svg-icon style="width: 16px; height: 16px;" name="copy" /></div>
                </div>
                <div class="pop-list-li">
                  <div>矿工费</div>
                  <div>0.000378636ACC</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </template>
  
  <script setup>
  import { useRouter } from 'vue-router'
  import { useSystemStore } from "@/stores/modules/systemStore";
  import {  useWalletStore } from "@/stores/modules/walletStore";
  const systemStore = useSystemStore();
  const router = useRouter();



  const walletStore = useWalletStore();
  const isShow = ref(true);
  const showWallet = ref(false);
  const showHistory = ref(false);
  const type = ref('');
  const goToPage = (url) => {
    router.push(url)
  }
  const changePop = (val) => {
    showHistory.value = true;
    type.value = val;
  }
  // 添加钱包
  const addWallet = () => {
    router.push({
      path: '/login',
      query:{
        isFirst:false
      }
    })
  }
  onMounted(async ()=>{
    // const aa = await walletStore.getBalance();
    // console.log("---",aa)
  })
  </script>
  
  <style lang="less" scoped>
  .container{
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    .bg-img{ 
      height: 286px;
      width: 100%;
      position: absolute;
      left: 0;
      z-index: -1;
    }
    .user-info-body{
      padding: 60px 17px 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .user-info-lf{
        display: flex;
        align-items: center;
        .user-info{
          margin-left: 11px;
          font-family: PingFang SC, PingFang SC;
          font-size: 10px;
          .user-info-name{
            font-weight: 500;
            color: #FFFFFF;
            display: flex;
            align-items: center;
          }
          .user-info-key-body{
            font-weight: 400;
            color: rgba(255,255,255,0.6);
            display: flex;
            align-items: center;
            .user-info-key-body-text{
              margin-right: 4px;
            }
          }
        }
      }
      .network{
        display: flex;
        align-items: center;
        border-radius: 27px;
        border: 1px solid rgba(255,255,255,0.6);
        padding: 0 5px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #FFFFFF;
        height: 25px;
        line-height: 25px;
        box-sizing: border-box;
        .network-name{
          margin-left: 5px;
        }
      }
    }
    .amount{ 
      height: 102px;
      background-color: rgba(242, 242, 242, 0.2);
      backdrop-filter: blur(3px);  
      -webkit-backdrop-filter: blur(3px);  
      border-radius: 15px;
      margin: 0 17px 23px;
      box-shadow:0 7px 10px #15277031;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 15px;
      color: #FFFFFF;
      &:before { 
        height: calc(100% - 4px);
        width: calc(100% - 4px);
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        padding: 2px; /* 边框宽度 */
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.1) 50%,  rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.6) 100%);//linear-gradient(135deg, #ffffff64, #ffffff2e); /* 渐变方向可调 */
        -webkit-mask: 
          linear-gradient(#fff 0 0) content-box, 
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        border-radius: 15px; /* 必须和父元素一致 */
        pointer-events: none; /* 避免遮挡点击 */

      }
      .amount-item-box{
        margin: 21px 21px 27px 27px;
      }
      .amount-item{
        margin-top: 7px;
        font-weight: 600;
        font-size: 25px;
        display: flex;
        position: relative;
        .item-text{
          display: flex;
          align-items: center;
          margin-right: 2px;
          .my{
            position: relative;
            top:1px;
          }
        }
      }
    }

  
    .card-box{
      background: #FFFFFF;
      box-shadow: 0px 4px 8px -2px rgba(25,75,137,0.25);
      border-radius: 17px;
      height: 78px;
      margin: 0 17px;
      padding: 15px 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #000000;
      .box-cont{
        width: calc(100% / 5);
        display: flex;
        flex-direction: column;
        align-items: center;
        .box-cont-icon{
          margin-bottom: 4px;
          color: #fff;
        }
      }
    }
    .list-box{
      background: #FFFFFF;
      border-radius: 12px;
      margin: 25px 17px;
      padding: 16px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
      .list-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 17px;
        color: #000000;
        margin-bottom: 23px;
      }
      .list-ul{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
        .list-li{
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          margin-bottom: 12px;
          .list-li-lf{
            display: flex;
            align-items: center;
            font-size: 15px;
            color: #000000;
          }
          .list-li-ri{
            font-size: 12px;
            color: @font-color2;
            text-align: right;
            .list-li-ri-num{
              font-weight: 400;
              font-size: 10px;
              color: #8D8D8D;
            }
          }
        }
        .list-li:last-child{
          margin-bottom: 0;
        }
      }
      .list-ul::-webkit-scrollbar{
          width: 0;
      }
    }
    .pop-content{
      display: flex;
      flex-direction: column;
      .pop-title{
        padding: 17px;
        border-bottom: 1px solid #F2F2F2;
        display: flex;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 17px;
        color: #000000;
        .title{
          flex: 1;
          display: flex;
          justify-content: center;
        }
      }
      .tree{
        display: flex;
        height: 300px;
        overflow: hidden;
        .tree-lf{
          display: flex;
          flex-direction: column;
          width: 67px;
          overflow: auto;
          .tree-lf-icon{
            height: 67px;
            padding: 16px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .active-bg{
            background: #ECEFFC;
          }
        }
        .tree-lf::-webkit-scrollbar{
          width: 0;
        }
        .tree-ri{
          margin-left: 10px;
          margin-right: 17px;
          flex: 1;
          overflow: auto;
          .tree-ri-title{
            margin: 10px 0 4px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 15px;
            color: #000000;
          }
          .tree-ul{
            .tree-li{
              background: #F2F2F2;
              border-radius: 8px;
              border: 1px solid #F2F2F2;
              padding: 14px 16px;
              display: flex;
              align-items: center;
              margin-bottom: 12px;
              .tree-li-cont{
                margin-left: 12px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #8D8D8D;
                .tree-li-text{
                  font-weight: 500;
                  font-size: 15px;
                  color: @theme-color1;
                }
                .tree-li-address{
                  display: flex;
                  align-items: center;
                }
              }
            }
            .tree-active{
              background: #FAFBFF;
              border: 1px solid @theme-color1;
            }
          }
        }
        .tree-ri::-webkit-scrollbar{
          width: 0;
        }
      }
      .pop-btn{
        margin: 17px;
        .btn{
          height: 40px;
          border-radius: 50px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 15px;
          color: #FFFFFF;
        }
        :deep(.van-button__text) {
          display: flex;
          align-items: center;
        }
      }
      .pop-list{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
        .pop-list-box{
          display: flex;
          padding: 17px 17px 0;
          .pop-list-ul{
            padding-bottom: 12px;
            flex: 1;
            margin-left: 8px;
            border-bottom: 1px solid #F2F2F2;
            box-sizing: border-box;
            .pop-list-li{
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-family: PingFang SC, PingFang SC;
              margin-bottom: 4px;
              font-weight: 400;
              font-size: 12px;
              color: @font-color2;
              .pop-list-li-title{
                font-weight: 500;
                font-size: 15px;
                color: #000000;
              }
              .pop-list-li-status{
                font-weight: 500;
                font-size: 15px;
                color: @theme-color1 !important;
              }
            }
            .pop-list-li div:last-child{
              color: #8D8D8D;
            }
          }
        }
      }
      .pop-list::-webkit-scrollbar{
        width: 0;
      }
      .pop-ul{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: auto;
        margin: 16px 16px 0;
        .pop-li{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 16px;
          .pop-li-lf{
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #4F4F4F;
            .pop-address{
              font-size: 12px;
              color: #8D8D8D;
            }
          }
        }
      }
    }
  }
  </style>