<template>
  <view class="mineTop">
    <img src="../../static/img/minebg.png" alt class="minetopbg" />
    <img :src="iflogin?tx:'../../static/img/usertx.png'" alt class="photo" />

    <text class="username">{{username}}</text>
    <view class="login" v-if="!iflogin" @click="login">立即登录</view>
  </view>
</template>

<script>
export default {
  name: "mineTop",
  data() {
    return {
      tx: "",
      username: "",
      iflogin: false
    };
  },
  mounted() {
    wx.getSetting({
      success: res => {
        wx.getUserInfo({
          success: res => {
            console.log(res);
            this.tx = res.userInfo.avatarUrl;
            this.username = res.userInfo.nickName;
            this.iflogin = true;
          }
        });
      },
      fail: res => {
        this.tx = "../../static/img/usertx.png";
        this.username = "";
        this.iflogin = false;
      }
    });
  },
  methods: {
    login() {
      uni.redirectTo({
        url: "/pages/login/login"
      });
    }
  }
};
</script>

<style lang="scss">
.mineTop {
  .minetopbg {
    height: 300upx;
    width: 100%;
    position: relative;
    z-index: -1;
  }
  .photo {
    width: 130upx;
    height: 115upx;
    position: relative;
    bottom: 283upx;
    left: 31upx;
    border-radius: 80%;
  }
  .username {
    position: relative;
    bottom: 338upx;
    color: white;
    font-size: 26upx;
    margin-left: 48upx;
  }
  .login {
    width: 147upx;
    height: 47upx;
    background: url("../../static/img/minelogin.png");
    background-size: 100% 100%;
    position: absolute;
    top: 60rpx;
    left: 170rpx;
    color: white;
    font-size: 20upx;
    line-height: 47upx;
    text-align: center;
  }
}
</style>