index.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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. async searchOther() {
  74. const that = this;
  75. let config = that.$config;
  76. let isShow = false
  77. if (that.user.id) {
  78. const arr = await that.$api(`/competition`, 'GET', {
  79. user: that.user.id,
  80. status: '1'
  81. })
  82. if (arr.errcode == '0') {
  83. const hasCompetition = that.user.role.find((f) => f === 'Competition')
  84. if (hasCompetition) isShow = true
  85. }
  86. }
  87. if (!isShow) config.menuList = config.menuList.filter((f) => f.title !== '我的赛事')
  88. that.$set(that, `menuList`, config.menuList);
  89. },
  90. // 登录或注册
  91. toLogin() {
  92. uni.navigateTo({
  93. url: `/pagesHome/login/index`
  94. })
  95. },
  96. // 查看用户信息
  97. toView() {
  98. uni.navigateTo({
  99. url: `/pagesMy/account/index`
  100. })
  101. },
  102. // 公共跳转
  103. toCommon(e, type) {
  104. const that = this;
  105. if (that.user && that.user.id || type == '1') {
  106. uni.navigateTo({
  107. url: `/${e}`
  108. })
  109. } else {
  110. uni.navigateTo({
  111. url: `/pagesHome/login/index`
  112. })
  113. }
  114. },
  115. }
  116. }
  117. </script>
  118. <style lang="scss" scoped>
  119. .main {
  120. background-color: var(--footColor);
  121. .one {
  122. margin: 2vw;
  123. border-radius: 10px;
  124. background-color: var(--mainColor);
  125. .one_1 {
  126. padding: 4vw;
  127. .top {
  128. display: flex;
  129. justify-content: space-between;
  130. align-items: center;
  131. .top_left {
  132. display: flex;
  133. align-items: center;
  134. .name {
  135. margin: 0 2vw;
  136. font-size: var(--font16Size);
  137. }
  138. .t-icon {
  139. width: 70px !important;
  140. height: 70px !important;
  141. }
  142. }
  143. .top_right {
  144. .t-icon {
  145. width: var(--font14Size) !important;
  146. height: var(--font14Size) !important;
  147. color: var(--f99Color) !important;
  148. }
  149. }
  150. }
  151. }
  152. }
  153. .two {
  154. display: flex;
  155. flex-direction: column;
  156. padding: 2vw;
  157. margin: 0 2vw;
  158. border-radius: 10px;
  159. background-color: var(--mainColor);
  160. .list {
  161. display: flex;
  162. justify-content: space-between;
  163. padding: 3vw 2vw;
  164. border-bottom: 1px solid var(--f9Color);
  165. .left {
  166. display: flex;
  167. align-items: center;
  168. .title {
  169. margin: 0 0 0 5px;
  170. display: inline-block;
  171. font-size: var(--font14Size);
  172. }
  173. }
  174. .right {
  175. .t-icon {
  176. width: var(--font14Size) !important;
  177. height: var(--font14Size) !important;
  178. color: var(--f99Color) !important;
  179. }
  180. }
  181. }
  182. }
  183. }
  184. </style>