index.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. <template>
  2. <view class="container">
  3. <view class="top">
  4. <image class="avatar"mode="aspectFill" :src="src"></image>
  5. <text v-if="role && role !== 'guest'" class="name">{{ userInfo.name}}</text>
  6. <button v-else type="default" :plain="true" style="border: none;" class="login" @click="register">注册</button>
  7. </view>
  8. <view class="main" v-if="role && role !== 'guest'">
  9. <uni-card>
  10. <uni-list :border="false">
  11. <uni-list-item :showExtraIcon="true" :extra-icon="extraIconList[0]" title="个人资料" link clickable @click="onClick(0)"></uni-list-item>
  12. </uni-list>
  13. </uni-card>
  14. <uni-card>
  15. <uni-list :border="false">
  16. <uni-list-item :showExtraIcon="true" :extra-icon="extraIconList[1]" title="家庭成员" link clickable @click="onClick(1)"></uni-list-item>
  17. </uni-list>
  18. </uni-card>
  19. <uni-card>
  20. <uni-list :border="false">
  21. <uni-list-item :showExtraIcon="true" :extra-icon="extraIconList[2]" title="问卷调查" link clickable @click="onClick(2)"></uni-list-item>
  22. </uni-list>
  23. </uni-card>
  24. <uni-card>
  25. <uni-list :border="false">
  26. <uni-list-item :showExtraIcon="true" :extra-icon="extraIconList[3]" title="我的积分" link clickable @click="onClick(3)"></uni-list-item>
  27. </uni-list>
  28. </uni-card>
  29. <!-- <uni-card>
  30. <uni-list :border="false">
  31. <uni-list-item :showExtraIcon="true" :extra-icon="extraIconList[4]" title="意见反馈" link clickable @click="onClick(4)"></uni-list-item>
  32. </uni-list>
  33. </uni-card> -->
  34. <!-- <uni-card class="logoutBox">
  35. <uni-list :border="false">
  36. <uni-list-item size="mini" class="logout" title="退出登录" clickable @click="onClick(4)"></uni-list-item>
  37. </uni-list>
  38. </uni-card> -->
  39. </view>
  40. </view>
  41. </template>
  42. <script>
  43. import request from '../../api/user.js';
  44. import requestLogin from '../../api/login.js';
  45. export default {
  46. data() {
  47. return {
  48. extraIconList: [
  49. {
  50. color: '#ff8319',
  51. size: '22',
  52. type: 'person'
  53. },
  54. {
  55. color: '#ebc200',
  56. size: '22',
  57. type: 'home'
  58. },
  59. {
  60. color: '#429ff6',
  61. size: '22',
  62. type: 'mail-open-filled'
  63. },
  64. {
  65. color: '#4cd964',
  66. size: '22',
  67. type: 'star-filled'
  68. },
  69. {
  70. color: '#e70000',
  71. size: '22',
  72. type: 'email-filled'
  73. }
  74. ],
  75. src: '',
  76. userInfo: {},
  77. role: ''
  78. }
  79. },
  80. async onShow() {
  81. this.role = uni.getStorageSync('role');
  82. if (this.role !== 'guest') {
  83. const userinfo = await request.getUser();
  84. uni.setStorageSync('userinfo', userinfo.data);
  85. this.userInfo = userinfo.data;
  86. }
  87. },
  88. async mounted() {
  89. const config = await requestLogin.getJson();
  90. const { avatar } = config.data;
  91. this.src = avatar;
  92. if (this.role == 'guest') {
  93. uni.navigateTo({
  94. url: '/pages/register/index'
  95. });
  96. return;
  97. }
  98. },
  99. methods: {
  100. register() {
  101. uni.navigateTo({
  102. url: '/pages/register/index'
  103. })
  104. },
  105. onClick(e) {
  106. if (e == 0) {
  107. uni.navigateTo({
  108. url: '/pages/user/index'
  109. })
  110. return;
  111. }
  112. if (e == 1) {
  113. this.illness();
  114. return;
  115. }
  116. if (e == 2) {
  117. uni.navigateTo({
  118. url: '/pages/questionnaire/index'
  119. })
  120. return;
  121. }
  122. if (e == 3) {
  123. uni.navigateTo({
  124. url: '/pages/integral/index'
  125. })
  126. return;
  127. }
  128. uni.showToast({
  129. title: '敬请期待',
  130. icon: 'error',
  131. duration: 2000,
  132. });
  133. },
  134. illness() {
  135. uni.navigateTo({
  136. url: '/pages/illness/receive'
  137. })
  138. },
  139. logOut() {
  140. uni.clearStorage();
  141. uni.redirectTo({
  142. url: '/pages/index/index'
  143. })
  144. }
  145. }
  146. }
  147. </script>
  148. <style>
  149. .container {
  150. width: 100%;
  151. }
  152. .top {
  153. height: 25vh;
  154. background-color: #cb0714;
  155. padding-top: 10px;
  156. position: relative;
  157. z-index: 1;
  158. }
  159. .avatar {
  160. width: 70px;
  161. height: 70px;
  162. border-radius: 50%;
  163. overflow: hidden;
  164. display: block;
  165. margin: 0 auto;
  166. }
  167. .name {
  168. color: #fff;
  169. width: 100%;
  170. text-align: center;
  171. display: block;
  172. margin: 10px 0;
  173. }
  174. .login {
  175. margin: 10px auto;
  176. color: #fff !important;
  177. padding: 0;
  178. line-height: 1em;
  179. }
  180. .main {
  181. width: 90%;
  182. display: block;
  183. margin: 0 auto;
  184. margin-top: -40px;
  185. position: relative;
  186. z-index: 2;
  187. }
  188. .logoutBox {
  189. display: block;
  190. margin-top: 50px;
  191. }
  192. .logout .uni-list-item__content-title {
  193. text-align: center;
  194. }
  195. </style>