index.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <view class="container main">
  3. <view class="one">
  4. <view class="one_1">
  5. <view v-if="user.id" class="top" @tap="toView">
  6. <view class="top_left">
  7. <text class="t-icon t-icon-yonghu1"></text>
  8. <text class="name">{{user.nick_name||'微信用户'}}</text>
  9. </view>
  10. <view class="top_right">
  11. <text class="t-icon t-icon-tiaozhuan"></text>
  12. </view>
  13. </view>
  14. <view v-else class="top" @tap="toLogin">
  15. <view class="top_left">
  16. <text class="t-icon t-icon-yonghu1"></text>
  17. <text class="name">登录/注册</text>
  18. </view>
  19. <view class="top_right">
  20. <text class="t-icon t-icon-tiaozhuan"></text>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. <view class="two">
  26. <view class="list" v-for="(item, index) in menuList" :key="index" @click="toCommon(item.route,item.type)">
  27. <view class="left">
  28. <text class="t-icon" :class="[item.icon]"></text>
  29. <text class="title">{{item.title||'暂无'}}</text>
  30. </view>
  31. <view class="right">
  32. <text class="t-icon t-icon-tiaozhuan"></text>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. </template>
  38. <script>
  39. export default {
  40. data() {
  41. return {
  42. user: {},
  43. // 菜单
  44. menuList: []
  45. }
  46. },
  47. onShow: async function() {
  48. const that = this;
  49. await that.searchToken();
  50. await that.searchOther();
  51. },
  52. methods: {
  53. async searchToken() {
  54. const that = this;
  55. try {
  56. const res = uni.getStorageSync('token');
  57. if (res) {
  58. const user = that.$jwt(res);
  59. let arr;
  60. arr = await that.$api(`/user/${user.id}`, 'GET', {})
  61. if (arr.errcode == '0') {
  62. that.$set(that, `user`, arr.data)
  63. } else {
  64. uni.showToast({
  65. title: arr.errmsg,
  66. });
  67. }
  68. } else {
  69. that.$set(that, `user`, {});
  70. }
  71. } catch (e) {}
  72. },
  73. searchOther() {
  74. const that = this;
  75. let config = that.$config;
  76. that.$set(that, `menuList`, config.menuList);
  77. },
  78. // 登录或注册
  79. toLogin() {
  80. uni.navigateTo({
  81. url: `/pagesHome/login/index`
  82. })
  83. },
  84. // 查看用户信息
  85. toView() {
  86. uni.navigateTo({
  87. url: `/pagesMy/account/index`
  88. })
  89. },
  90. // 公共跳转
  91. toCommon(e, type) {
  92. const that = this;
  93. if (that.user && that.user.id || type == '1') {
  94. uni.navigateTo({
  95. url: `/${e}`
  96. })
  97. } else {
  98. uni.navigateTo({
  99. url: `/pagesHome/login/index`
  100. })
  101. }
  102. },
  103. }
  104. }
  105. </script>
  106. <style lang="scss" scoped>
  107. .main {
  108. background-color: var(--footColor);
  109. .one {
  110. margin: 2vw;
  111. border-radius: 10px;
  112. background-color: var(--mainColor);
  113. .one_1 {
  114. padding: 4vw;
  115. .top {
  116. display: flex;
  117. justify-content: space-between;
  118. align-items: center;
  119. .top_left {
  120. display: flex;
  121. align-items: center;
  122. .name {
  123. margin: 0 2vw;
  124. font-size: var(--font16Size);
  125. }
  126. .t-icon {
  127. width: 70px !important;
  128. height: 70px !important;
  129. }
  130. }
  131. .top_right {
  132. .t-icon {
  133. width: var(--font14Size) !important;
  134. height: var(--font14Size) !important;
  135. color: var(--f99Color) !important;
  136. }
  137. }
  138. }
  139. }
  140. }
  141. .two {
  142. display: flex;
  143. flex-direction: column;
  144. padding: 2vw;
  145. margin: 0 2vw;
  146. border-radius: 10px;
  147. background-color: var(--mainColor);
  148. .list {
  149. display: flex;
  150. justify-content: space-between;
  151. padding: 3vw 2vw;
  152. border-bottom: 1px solid var(--f9Color);
  153. .left {
  154. display: flex;
  155. align-items: center;
  156. .title {
  157. margin: 0 0 0 5px;
  158. display: inline-block;
  159. font-size: var(--font14Size);
  160. }
  161. }
  162. .right {
  163. .t-icon {
  164. width: var(--font14Size) !important;
  165. height: var(--font14Size) !important;
  166. color: var(--f99Color) !important;
  167. }
  168. }
  169. }
  170. }
  171. }
  172. </style>