personCenter.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <div style="background-color: #fafafa; min-height: 100vh">
  3. <div class="tabbar">
  4. <div class="tab1" bindtap="goIndex">
  5. <router-link to="/">
  6. <img
  7. src="../assets/unactive_bar1.png"
  8. style="width: 20px; height: 20px; padding-top: 5px"
  9. />
  10. <div style="color: #999999">首页</div>
  11. </router-link>
  12. </div>
  13. <div class="tab1">
  14. <img
  15. src="../assets/unactive_bar2.png"
  16. style="width: 20px; height: 20px; padding-top: 5px"
  17. />
  18. <div @click="goKf()">客服</div>
  19. </div>
  20. <div class="tab1" bindtap="goMy">
  21. <img
  22. src="../assets/active_bar3.png"
  23. style="width: 20px; height: 20px; padding-top: 5px"
  24. />
  25. <div style="color: #a342ff">我的</div>
  26. </div>
  27. </div>
  28. <img src="../assets/person_bj.png" style="width: 100%; height: 190px" />
  29. <div class="top" align="center">
  30. <img class="img" :src="avatarUrl" />
  31. <div class="nick">
  32. <div>昵称</div>
  33. </div>
  34. </div>
  35. <div class="middle">
  36. <div
  37. v-for="item in tabArr"
  38. :key="item.id"
  39. class="block"
  40. @click="goTab(item.url)"
  41. >
  42. <img
  43. :src="item.img"
  44. style="width: 45px; height: 45px; margin-left: 15px"
  45. />
  46. <div style="color: #6f7582; font-size: 15px; margin-left: 15px">
  47. {{ item.name }}
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </template>
  53. <script>
  54. import { getHeartTimes, getHeartedTimes } from "../api";
  55. export default {
  56. name: "index",
  57. data() {
  58. return {
  59. avatarUrl: require("../assets/morenImg.png"),
  60. tabArr: [
  61. {
  62. name: "我的信息",
  63. img: require("../assets/icon1.png"),
  64. url: "infoType",
  65. },
  66. {
  67. name: "我的活动",
  68. img: require("../assets/icon2.png"),
  69. url: "myActives",
  70. },
  71. {
  72. name: "心动0次",
  73. img: require("../assets/icon3.png"),
  74. url: "",
  75. },
  76. {
  77. name: "被心动0次",
  78. img: require("../assets/icon4.png"),
  79. url: "",
  80. },
  81. {
  82. name: "推荐好友",
  83. img: require("../assets/icon6.png"),
  84. url: "share",
  85. },
  86. ],
  87. };
  88. },
  89. methods: {
  90. async getNum1() {
  91. const result = await getHeartTimes();
  92. if (result.code == 0) {
  93. console.log(result)
  94. this.tabArr[2].name = "心动" + result.heartCount + "次";
  95. }
  96. },
  97. async getNum2() {
  98. const result = await getHeartedTimes();
  99. if (result.code == 0) {
  100. this.tabArr[3].name = "被心动" + result.heartedCount + "次";
  101. }
  102. },
  103. goTab(e){
  104. this.$router.push({name:e})
  105. },
  106. goKf() {
  107. window.location.href =
  108. "https://hzkhcs.qiyukf.com/client?k=de9c471949df00adb71be66e0ac85978&wp=1&robotShuntSwitch=1&robotId=5217545&qtype=4486102";
  109. },
  110. },
  111. computed: {},
  112. mounted() {
  113. this.getNum1();
  114. this.getNum2();
  115. },
  116. };
  117. </script>
  118. <style scoped>
  119. .tabbar {
  120. width: 100%;
  121. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  122. /* border: 1px solid #999; */
  123. height: 50px;
  124. position: fixed;
  125. bottom: -2px;
  126. left: 0;
  127. display: flex;
  128. font-size: 14px;
  129. background: #fff;
  130. z-index: 999;
  131. }
  132. .tab1 {
  133. height: 50px;
  134. width: 33%;
  135. text-align: center;
  136. color: #999999;
  137. }
  138. .top {
  139. width: 100%;
  140. height: 190px;
  141. position: absolute;
  142. top: 0;
  143. left: 0;
  144. }
  145. .img {
  146. width: 80px;
  147. height: 80px;
  148. border-radius: 80px;
  149. overflow: hidden;
  150. margin-top: 35px;
  151. }
  152. .middle {
  153. display: flex;
  154. flex-direction: row;
  155. flex-wrap: wrap;
  156. /* border: 1px solid red; */
  157. width: 100%;
  158. }
  159. .block {
  160. width: 44%;
  161. height: 90px;
  162. background: #fff;
  163. margin-left: 4%;
  164. margin-top: 15px;
  165. border-radius: 15px;
  166. display: flex;
  167. /* justify-content:space-around; */
  168. align-items: center;
  169. }
  170. </style>