profile.vue

<template>
  <div class="pv-card-header">
    <md-whiteframe class="row pv-row">
      <div class="col-xs-2 start-xs">
        <md-avatar>
          <img
            v-if="!idmedia"
            src="img/icon.png"
            alt="icon"
          >
            <img
              v-else
              :src="media.url(idmedia)"
              alt="icon"
            >
        </md-avatar>
      </div>
      <div class="col-xs-8 start-xs">
        <!-- <div><a class="pv-name" :href="`#/profile/${id}`">{{name}}</a></div> -->
        <div>
          <a
            class="pv-name"
            @click="visitaProfile"
          >{{name}}</a>
        </div>
        <div v-if="subtitle!=''">{{subtitle}}</div>
      </div>
      <div class="col-xs-2 center-xs">
        <md-button
          v-if="!isMe"
          class="md-icon-button md-primary "
        >
          <md-icon
            class="pv-icons-smaller"
            @click.native="onfollow"
            md-iconset="pv-user-add"
          ></md-icon>
            <!-- <md-icon class="pv-icons-smaller" @click.native="onUnfollow" >clear</md-icon> -->
            </md-button>
      </div>
    </md-whiteframe>
  </div>
</template>
<script>
const media = require("./restapi").media;
const catolicoservice = require("./restapi").catolicoservice;
const globalstore = require("./globalstore");
module.exports = {
  name: "pv-card-header",
  props: {
    name: {
      type: String,
      default: 'user_name'
    },
    subtitle: {
      type: String,
      default: ''
    },
    id: Number,
    idmedia: Number
  },
  data() {
    return {
      media
    }
  },
  methods: {
    onfollow() {
      catolicoservice.seguir(globalstore.usuario.idcatolico, this.id).then(ret => {
        if (ret.status != 200)
          throw ret;
        alert("Agora você segue esta pessoa");
      }).catch(err => {
        console.log(err);
        catolicoservice.deixarseguir(globalstore.usuario.idcatolico, this.id).then(ret => {
          alert("Você não segue mais esta pessoa");
        });
      });
    },
    visitaProfile() {
      const newhref = "#/profile/" + this.id;
      const oldhref = window.location.href;
      window.location.href = newhref;
      if (oldhref.indexOf("profile") > -1)
        window.location.reload();
    }
  },
  computed: {
    isMe() {
      if (globalstore.usuario.idcatolico == this.id)
        return true;
      return false;
    }
  }
}
</script>
<style>
.pv-card-header {
  margin: 3px 2px;
}

a.pv-name {
  font-weight: 600;
  color: #0f93ba !important;
}

.pv-icons-smaller {
  font-size: 1.2em;
  color: #0f93ba;
}

.pv-row {
  background-color: #FFFFFF;
  align-items: center;
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 2px;
}
</style>