my.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view class="">
  3. <view class="head">
  4. <image src="../../static/mic.png" mode="" style="width: 100rpx;height: 100rpx;"></image>
  5. <view class="nickname">
  6. 昵称
  7. </view>
  8. </view>
  9. <view class="content">
  10. <view class="row" style="border-bottom: 1px solid #d6d7d9;">
  11. <button class="left-btn left" open-type='contact'>联系客服</button>
  12. <u-icon name="arrow-right" color="#909399" size="16"></u-icon>
  13. </view>
  14. <view class="row" @click="toPage">
  15. <view class="left">
  16. 去用户端
  17. </view>
  18. <u-icon name="arrow-right" color="#909399" size="16"></u-icon>
  19. </view>
  20. </view>
  21. <u-tabbar :value="tabbarCheck" @change="tabbarChange" activeColor="#5F7DE9">
  22. <u-tabbar-item name="team" text="加入">
  23. <image class="u-page__item__slot-icon" slot="active-icon"
  24. src="@/static/image/nav-icon/antOutline-team Copy.png"></image>
  25. <image class="u-page__item__slot-icon" slot="inactive-icon"
  26. src="@/static/image/nav-icon/antOutline-team.png"></image>
  27. </u-tabbar-item>
  28. <u-tabbar-item name="notification" text="通知">
  29. <image class="u-page__item__slot-icon" slot="active-icon"
  30. src="@/static/image/nav-icon/md-notifications_none Copy.png"></image>
  31. <image class="u-page__item__slot-icon" slot="inactive-icon"
  32. src="@/static/image/nav-icon/md-notifications_none.png"></image>
  33. </u-tabbar-item>
  34. <u-tabbar-item name="user" text="我的">
  35. <image class="u-page__item__slot-icon" slot="active-icon"
  36. src="@/static/image/nav-icon/antOutline-user1 Copy.png"></image>
  37. <image class="u-page__item__slot-icon" slot="inactive-icon"
  38. src="@/static/image/nav-icon/antOutline-user1.png"></image>
  39. </u-tabbar-item>
  40. </u-tabbar>
  41. </view>
  42. </template>
  43. <script>
  44. export default {
  45. data() {
  46. return {
  47. tabbarCheck: 'user',
  48. }
  49. },
  50. methods: {
  51. toPage(){
  52. uni.switchTab({
  53. url:"/pages/food/food"
  54. })
  55. },
  56. tabbarChange(e) {
  57. console.log(e)
  58. if (e == 'team') {
  59. uni.navigateTo({
  60. url: '/pageA/notice/index'
  61. })
  62. } else if (e == 'user') {
  63. uni.navigateTo({
  64. url: '/pageA/my/my'
  65. })
  66. }
  67. // name => tabbarCheck = name
  68. },
  69. }
  70. }
  71. </script>
  72. <style scoped lang="scss">
  73. .head{
  74. background: #fff;
  75. display: flex;
  76. justify-content: center;
  77. align-items: center;
  78. flex-direction: column;
  79. padding: 40rpx;
  80. .nickname{
  81. margin-top: 30rpx;
  82. font-size: 32rpx;
  83. font-weight: bold;
  84. }
  85. }
  86. .content{
  87. background: #fff;
  88. margin-top: 20rpx;
  89. padding: 20rpx;
  90. }
  91. .left-btn {
  92. padding: 0;
  93. margin: 0;
  94. font-size: 15px;
  95. height: 42rpx;
  96. display: flex;
  97. align-items: center;
  98. background-color: #fff;
  99. }
  100. .left-btn:after {
  101. border: none !important;
  102. }
  103. .row{
  104. display: flex;
  105. padding: 20rpx 0;
  106. justify-content: space-between;
  107. }
  108. </style>