wallet/src/components/Header/index.vue

<template>
  <view class="nav-bar">
    <view class="back-box" v-if="back"></view>
    <view class="nav-title" @click="changeLinkAddress">
      ACC <span style="padding: 0 12rpx">|</span>{{address}}
    </view>
    <view class="nav-right">
        <!-- <view class="nav-right-network">
            <image
                src="@/static/image/home/network.png"
                mode="scaleToFill"
            />
        </view> -->
        <view class="nav-right-logo">
            <image
                src="@/static/image/home/logo.png"
                mode="scaleToFill"
            />
        </view>
    </view>
  </view>
</template>
<script setup>
import { ref,defineProps,defineEmits,onMounted } from "vue";
import { getWalletAddress } from "@/utils/utils";
const props = defineProps({
  back: {
    type: Boolean,
    default: () => false,
  },
});
const emit = defineEmits(['update:address']);
const address = ref("");
const getAddress = async () =>{
  // const addr = await getWalletAddress();
  let addr = '0x01Ce8d3Ae9240B029E0868f811dfF77a4F5320f2';
  if (addr) {
    console.log(addr);
    emit('update:address', addr);
    address.value = `${addr.slice(0, 4)}...${addr.slice(-4)}`;
  } else {
    address.value = "未连接钱包";
  }
}
const changeLinkAddress = () =>{
  if(address.value == '未连接钱包'){
    getAddress();
  }
}
onMounted(async () => {
  getAddress();
});
</script>
<style lang="scss">
.nav-bar {
  height: 116rpx;
  background: rgba(0,0,0,0.1);
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  right: 0;
  z-index: 100;
  .back-box{
    position: absolute;
    left: 32rpx;
    top: 0;
    height: 100%;
    width: 90rpx;
  }
  .nav-title{
    color: #fff;
    font-weight: 600;
    font-size: 36rpx;
  }
  .nav-right{
    position: absolute;
    top: 0;
    right: 32rpx;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    .nav-right-network{
        height: 102rpx;
        width: 102rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
    .nav-right-logo{
        height: 80rpx;
        width: 80rpx;
        background: #283082;
        border-radius: 8rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
  }
}
</style>