index.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <view class="contain">
  3. <!-- 第一部分 -->
  4. <view class="mine-top">
  5. <view class="view-image-text" @tap="handlePersonal">
  6. <image class="image-radius"
  7. :src="myInfo.avatar ? myInfo.avatar : 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png'">
  8. </image>
  9. <view class="text-container">
  10. <view class="name">
  11. {{ myInfo.nick ? myInfo.nick : '提莫' }}
  12. <text class="hasname">(暂无昵称)</text>
  13. </view>
  14. <view class="ID">userID:{{ myInfo.userID }}</view>
  15. </view>
  16. </view>
  17. </view>
  18. </view>
  19. <view class="box">
  20. <!-- <block v-for="(item, index) in userListInfo" :key="index">
  21. <view class="list" :data-item="item" @tap="handleRouter">
  22. <image class="list-URL" :src="item.iconUrl"></image>
  23. <view class="list-name">
  24. <view>{{ item.name }}</view>
  25. </view>
  26. <image class="listimage" src="/static/static/assets/detail.svg"></image>
  27. </view>
  28. </block> -->
  29. </view>
  30. <!-- <view class="quit-main" @tap="handleQuit">
  31. <view class="quit-main-text">退出登录</view>
  32. </view> -->
  33. </template>
  34. <script>
  35. import { defineComponent, reactive, toRefs, computed } from 'vue';
  36. import {
  37. onShow,
  38. onReady,
  39. onNavigationBarButtonTap
  40. } from '@dcloudio/uni-app'
  41. import store from '../../TUICore/store';
  42. const TUIMine = defineComponent({
  43. setup(props) {
  44. const data = reactive({
  45. myInfo: {
  46. nick: '',
  47. userID: '',
  48. avatar: ''
  49. },
  50. });
  51. onReady(() => {
  52. handleGetMyProfile()
  53. });
  54. const handlePersonal = () => {
  55. // uni.navigateTo({
  56. // url: '../personal/personal'
  57. // });
  58. };
  59. const handleQuit = () => {
  60. uni.$TUIKit.logout().then(() => {
  61. uni.clearStorageSync();
  62. store.commit('timStore/setLoginStatus', false);
  63. uni.reLaunch({
  64. url: '../TUILogin/index',
  65. success: () => {
  66. uni.showToast({
  67. title: '退出成功',
  68. icon: 'none'
  69. });
  70. }
  71. });
  72. });
  73. };
  74. const handleGetMyProfile = () => {
  75. uni.$TUIKit.getMyProfile()
  76. .then(imResponse => {
  77. data.myInfo = imResponse.data
  78. console.log(imResponse.data, data.config, '---linda')
  79. // app.globalData.userProfile = imResponse.data;
  80. })
  81. .catch(imError => {
  82. console.warn('getMyProfile error:', imError); // 获取个人资料失败的相关信息
  83. });
  84. }
  85. return {
  86. ...toRefs(data),
  87. handlePersonal,
  88. handleQuit,
  89. handleGetMyProfile,
  90. };
  91. },
  92. });
  93. export default TUIMine;
  94. </script>
  95. <style>
  96. .contain {
  97. width: 100%;
  98. height: 100vh;
  99. background: #f6f8fa;
  100. position: relative;
  101. }
  102. .mine-top {
  103. height: 358rpx;
  104. position: relative;
  105. display: flex;
  106. flex-direction: column;
  107. align-items: center;
  108. padding-top: 15px;
  109. box-sizing: border-box;
  110. }
  111. .view-image-text {
  112. display: flex;
  113. width: 100%;
  114. height: 189rpx;
  115. justify-content: left;
  116. align-items: center;
  117. background: #FFFFFF;
  118. box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
  119. }
  120. .image-radius {
  121. padding-left: 43rpx;
  122. padding-top: 43rpx;
  123. padding-bottom: 40rpx;
  124. height: 120rpx;
  125. width: 120rpx;
  126. }
  127. .name {
  128. height: 25px;
  129. font-family: PingFangSC-Medium;
  130. font-size: 18px;
  131. color: #333333;
  132. letter-spacing: 0;
  133. margin-left: 10px;
  134. margin-top: 20px;
  135. }
  136. .ID {
  137. font-family: PingFangSC-Regular;
  138. font-size: 14px;
  139. color: #666666;
  140. letter-spacing: 0;
  141. margin-left: 10px;
  142. margin-top: 10px;
  143. padding-bottom: 40rpx;
  144. }
  145. .quit-main {
  146. position: absolute;
  147. bottom: 80px;
  148. width: 100%;
  149. height: 112rpx;
  150. justify-content: center;
  151. align-items: center;
  152. display: flex;
  153. background: #FFFFFF;
  154. }
  155. .quit-main-text {
  156. display: flex;
  157. justify-content: center;
  158. font-family: PingFangSC-Regular;
  159. font-size: 34rpx;
  160. color: #FF584C;
  161. letter-spacing: 0;
  162. }
  163. .arrow {
  164. width: 16px;
  165. height: 16px;
  166. float: right;
  167. }
  168. .pop-mask {
  169. width: 100vw;
  170. height: 100vh;
  171. position: fixed;
  172. z-index: 2;
  173. top: 0;
  174. /* #ifdef H5 */
  175. top: calc(88rpx + constant(safe-area-inset-top));
  176. top: calc(88rpx + env(safe-area-inset-top));
  177. /* #endif */
  178. right: 0;
  179. background: rgba(0, 0, 0, 0.60);
  180. display: flex;
  181. align-items: center;
  182. }
  183. .pop-box {
  184. display: flex;
  185. justify-content: center;
  186. flex-direction: column;
  187. padding: 20rpx;
  188. align-items: center;
  189. background: #FFFFFF;
  190. border: 1px solid #EEF0F3;
  191. z-index: 1;
  192. }
  193. .text-title {
  194. right: 100px;
  195. left: 100px;
  196. }
  197. .pop-box-text {
  198. display: flex;
  199. padding-top: 10px;
  200. font-family: PingFangSC-Regular;
  201. font-size: 16px;
  202. padding-left: 20px;
  203. padding-right: 20px;
  204. }
  205. .agree {
  206. padding-top: 20rpx;
  207. }
  208. .pop-agree {
  209. padding-top: 20rpx;
  210. background: rgba(0, 110, 255, 1);
  211. border-radius: 30px;
  212. font-size: 16px;
  213. color: #FFFFFF;
  214. letter-spacing: 0;
  215. /* text-align: center; */
  216. font-weight: 500;
  217. }
  218. </style>