index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <view class="mine-container" :style="{height: `${windowHeight}px`}">
  3. <navInfo :title="'个人中心'"></navInfo>
  4. <view class="bgTopImg">
  5. <image slot="right" :src="`${urls}/navBg@2x.png`" class="bgTopImg"></image>
  6. </view>
  7. <!--顶部个人信息栏-->
  8. <view class="header-section">
  9. <view class="flex padding justify-between">
  10. <view class="flex align-center">
  11. </view>
  12. <view @click="handleToInfo" class="flex align-center">
  13. </view>
  14. </view>
  15. </view>
  16. <view class="content-section">
  17. <view class="mine-actions grid col-3 text-center">
  18. <view class="photo">
  19. <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round"
  20. style="border: 3px solid #4CB2B6;width: 160rpx;height: 160rpx;">
  21. </view>
  22. <view v-if="name" @click="handleToInfo" class="user-info">
  23. <view class="u_title"> 昵称:{{ name }}
  24. </view>
  25. <view style="height: 2rpx;background-color: #E5E5E5;margin-top: 40rpx;width: 92%;margin-left:4%;">
  26. </view>
  27. </view>
  28. <u-cell-group :border="false" customStyle="margin-top:30rpx">
  29. <u-cell :border="false" :icon="bianjiziliao" title="编辑资料" isLink @click.native="handleToEditInfo">
  30. </u-cell>
  31. <u-cell :border="false" :icon="danweixinxi" @click.native="goUnit" isLink title="单位信息"></u-cell>
  32. <u-cell :border="false" :icon="jianchajilu" @click.native="auditRecord" isLink title="工作记录">
  33. </u-cell>
  34. <u-cell :border="false" :icon="jianchajilu" @click.native="goInstuct" isLink title="操作说明">
  35. </u-cell>
  36. </u-cell-group>
  37. <view v-if="name" class="user-info" style="padding-bottom: 40rpx;">
  38. <u-button @click="handleLogout" type="primary" shape="circle" size="default" color="#4CB2B6"
  39. text="退出登录">
  40. </u-button>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. </template>
  47. <script>
  48. // #ifdef H5
  49. import navInfo from '@/pagesA/components/my-nav/nav'
  50. // #endif
  51. import storage from '@/utils/storage'
  52. import {
  53. getUserProfile
  54. } from "@/api/system/user"
  55. import config from '@/config'
  56. const baseUrlImg=config.baseUrlImg
  57. export default {
  58. components: {
  59. // #ifdef H5
  60. navInfo
  61. // #endif
  62. },
  63. data() {
  64. return {
  65. urls:baseUrlImg,
  66. jianchajilu:`${baseUrlImg}/jianchajilu.png`,
  67. bianjiziliao: `${baseUrlImg}/bianjiziliao.png`,
  68. danweixinxi:`${baseUrlImg}/danweixinxi.png`,
  69. name: this.$store.state.user.name,
  70. version: getApp().globalData.config.appInfo.version
  71. }
  72. },
  73. computed: {
  74. avatar() {
  75. return this.$store.state.user.avatar
  76. },
  77. windowHeight() {
  78. return uni.getSystemInfoSync().windowHeight - 50
  79. }
  80. },
  81. onShow() {
  82. this.getUser()
  83. },
  84. methods: {
  85. getUser() {
  86. getUserProfile().then(response => {
  87. // this.name= response.data
  88. this.name = response.data.username
  89. })
  90. },
  91. handleToInfo() {
  92. this.$tab.navigateTo('/pages/mine/info/index')
  93. },
  94. handleToEditInfo() {
  95. uni.navigateTo({
  96. url: '/pages/mine/info/edit'
  97. })
  98. },
  99. goUnit() {
  100. uni.navigateTo({
  101. url: '/pagesA/fire/unit_info/index'
  102. })
  103. },
  104. auditRecord() {
  105. uni.navigateTo({
  106. url:`/pagesB/fire/check_record/index?my=onlymy`
  107. })
  108. },
  109. goInstuct(){
  110. uni.navigateTo({
  111. url:`/pages/mine/instruct/instruct`
  112. })
  113. },
  114. handleToSetting() {
  115. this.$tab.navigateTo('/pages/mine/setting/index')
  116. },
  117. handleToLogin() {
  118. this.$tab.reLaunch('/pages/login')
  119. },
  120. handleToAvatar() {
  121. this.$tab.navigateTo('/pages/mine/avatar/index')
  122. },
  123. handleLogout() {
  124. this.$modal.confirm('确定注销并退出系统吗?').then(() => {
  125. this.$store.dispatch('LogOut').then(() => {
  126. this.$tab.reLaunch('/pages/index')
  127. // this.$tab.reLaunch('/pages/work/index')
  128. })
  129. })
  130. },
  131. handleHelp() {
  132. this.$tab.navigateTo('/pages/mine/help/index')
  133. },
  134. handleAbout() {
  135. this.$tab.navigateTo('/pages/mine/about/index')
  136. },
  137. handleJiaoLiuQun() {
  138. this.$modal.showToast('微信搜索 naidaguo 后,添加好友后拉你进技术交流群')
  139. },
  140. handleBuilding() {
  141. this.$modal.showToast('模块建设中~')
  142. }
  143. }
  144. }
  145. </script>
  146. <style lang="scss" scoped>
  147. page {
  148. background-color: #f5f6f7;
  149. }
  150. .mine-container {
  151. width: 100%;
  152. height: 100%;
  153. .header-section {
  154. /*#ifdef H5*/
  155. padding: 15px 15px 100rpx 15px;
  156. /* #endif */
  157. /* #ifdef MP-WEIXIN*/
  158. padding: 15px 15px 240rpx 15px;
  159. /* #endif */
  160. color: white;
  161. .login-tip {
  162. font-size: 18px;
  163. margin-left: 10px;
  164. }
  165. .cu-avatar {
  166. border: 2px solid #eaeaea;
  167. .icon {
  168. font-size: 40px;
  169. }
  170. }
  171. }
  172. .content-section {
  173. position: relative;
  174. top: -100rpx;
  175. .user-info {
  176. margin-top: 40px;
  177. width: 100%;
  178. .u_title {
  179. font-size: 18px;
  180. text-align: center;
  181. line-height: 40rpx;
  182. }
  183. }
  184. .mine-actions {
  185. margin: 60rpx 15px;
  186. padding: 20px 0px;
  187. border-radius: 30px;
  188. background-color: white;
  189. position: relative;
  190. text-align: center;
  191. box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63);
  192. .photo {
  193. position: absolute;
  194. left: 50%;
  195. top: -80rpx;
  196. transform: translate(-120rpx);
  197. }
  198. .action-item {
  199. .icon {
  200. font-size: 28px;
  201. }
  202. .text {
  203. display: block;
  204. font-size: 13px;
  205. }
  206. }
  207. }
  208. }
  209. }
  210. /deep/.u-cell__title {
  211. flex: none !important;
  212. }
  213. /deep/.u-cell__left-icon-wrap[data-v-913eaa32],
  214. .u-cell__left-icon-wrap.data-v-913eaa32 {
  215. margin-right: 14px;
  216. }
  217. /deep/.u-button[data-v-3bf2dba7],
  218. /deep/.u-button.data-v-3bf2dba7,/deep/.u-button {
  219. width: 48% !important;
  220. }
  221. </style>