123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <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>
|