Matherweb/src/pages/personCenter.vue

<template>
  <div style="background-color: #fafafa; min-height: 100vh">
    <div class="tabbar">
      <div class="tab1" bindtap="goIndex">
        <router-link to="/">
          <img
            src="../assets/unactive_bar1.png"
            style="width: 20px; height: 20px; padding-top: 5px"
          />
          <div style="color: #999999">首页</div>
        </router-link>
      </div>
      <div class="tab1">
        <img
          src="../assets/unactive_bar2.png"
          style="width: 20px; height: 20px; padding-top: 5px"
        />
        <div @click="goKf()">客服</div>
      </div>
      <div class="tab1" bindtap="goMy">
        <img
          src="../assets/active_bar3.png"
          style="width: 20px; height: 20px; padding-top: 5px"
        />
        <div style="color: #a342ff">我的</div>
      </div>
    </div>
    <img src="../assets/person_bj.png" style="width: 100%; height: 190px" />
    <div class="top" align="center">
      <img class="img" :src="avatarUrl" />
      <div class="nick">
        <div>昵称</div>
      </div>
    </div>
    <div class="middle">
      <div
        v-for="item in tabArr"
        :key="item.id"
        class="block"
        @click="goTab(item.url)"
      >
        <img
          :src="item.img"
          style="width: 45px; height: 45px; margin-left: 15px"
        />
        <div style="color: #6f7582; font-size: 15px; margin-left: 15px">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHeartTimes, getHeartedTimes } from "../api";
export default {
  name: "index",
  data() {
    return {
      avatarUrl: require("../assets/morenImg.png"),
      tabArr: [
        {
          name: "我的信息",
          img: require("../assets/icon1.png"),
          url: "infoType",
        },
        {
          name: "我的活动",
          img: require("../assets/icon2.png"),
          url: "myActives",
        },
        {
          name: "心动0次",
          img: require("../assets/icon3.png"),
          url: "",
        },
        {
          name: "被心动0次",
          img: require("../assets/icon4.png"),
          url: "",
        },
        {
          name: "推荐好友",
          img: require("../assets/icon6.png"),
          url: "share",
        },
      ],
    };
  },
  methods: {
    async getNum1() {
      const result = await getHeartTimes();
      if (result.code == 0) {
        console.log(result)
        this.tabArr[2].name = "心动" + result.heartCount + "次";
      }
    },
    async getNum2() {
      const result = await getHeartedTimes();
      if (result.code == 0) {
        this.tabArr[3].name = "被心动" + result.heartedCount + "次";
      }
    },
    goTab(e){
      this.$router.push({name:e})
    },
    goKf() {
      window.location.href =
        "https://hzkhcs.qiyukf.com/client?k=de9c471949df00adb71be66e0ac85978&wp=1&robotShuntSwitch=1&robotId=5217545&qtype=4486102";
    },
  },
  computed: {},
  mounted() {
    this.getNum1();
    this.getNum2();
  },
};
</script>
<style scoped>
.tabbar {
  width: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  /* border: 1px solid #999; */
  height: 50px;
  position: fixed;
  bottom: -2px;
  left: 0;
  display: flex;
  font-size: 14px;
  background: #fff;
  z-index: 999;
}

.tab1 {
  height: 50px;
  width: 33%;
  text-align: center;
  color: #999999;
}
.top {
  width: 100%;
  height: 190px;
  position: absolute;
  top: 0;
  left: 0;
}
.img {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  overflow: hidden;
  margin-top: 35px;
}
.middle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* border: 1px solid red; */
  width: 100%;
}

.block {
  width: 44%;
  height: 90px;
  background: #fff;
  margin-left: 4%;
  margin-top: 15px;
  border-radius: 15px;
  display: flex;
  /* justify-content:space-around; */
  align-items: center;
}
</style>