my.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <template>
  2. <view class="my-box">
  3. <view class="my-content">
  4. <view class="my-top"></view>
  5. <image class="my-avatar" @tap="$navigateTo('/subPages/myPage/myDetail/myDetail')" :src="user.portrait"
  6. mode="aspectFill"></image>
  7. <view class="name" @tap="$navigateTo('/subPages/myPage/myDetail/myDetail')">{{user.userName || '登录/注册'}}
  8. </view>
  9. <view class="organization" v-if="user.organizedName"
  10. @tap="$navigateTo('/subPages/myPage/changeOrganization/changeOrganization')">
  11. {{user.organizedName}}
  12. </view>
  13. <view class="my-list">
  14. <view class="my-list-box">
  15. <view class="my-item" @tap="$navigateTo('/subPages/myPage/organization/organization')">
  16. <view class="my-icon bg3">
  17. <uv-icon name="home-fill" color="#fff" size="56"></uv-icon>
  18. </view>
  19. <view class="item-content">
  20. 我的公司
  21. </view>
  22. <view class="my-forward">
  23. <uv-icon name="arrow-right" color="#c1c0c8" size="32"></uv-icon>
  24. </view>
  25. </view>
  26. <view class="my-item" @tap="$navigateTo('/subPages/myPage/download/download')">
  27. <view class="my-icon bg5">
  28. <uv-icon name="grid-fill" color="#fff" size="56"></uv-icon>
  29. </view>
  30. <view class="item-content">
  31. 我的下载
  32. </view>
  33. <view class="my-forward">
  34. <uv-icon name="arrow-right" color="#c1c0c8" size="32"></uv-icon>
  35. </view>
  36. </view>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="fab-box" v-if="isCustomer" @click="$navigateTo('/subPages/myPage/chatList/chatList')">
  41. <view class="fab-data">
  42. <uv-badge type="error" max="99" numberType="overflow" :value="badge" :absolute="true" :offset="[0,0]"
  43. :customStyle="{
  44. zIndex:99
  45. }">
  46. </uv-badge>
  47. <uv-icon name="server-fill" color="#fff" size="60" labelPos="bottom" labelSize="20">
  48. </uv-icon>
  49. </view>
  50. </view>
  51. </view>
  52. </template>
  53. <script>
  54. import {
  55. getUserInfoById,
  56. getCustomerServeListByQuery
  57. } from '@/request/api/my.js'
  58. export default {
  59. data() {
  60. return {
  61. user: {},
  62. isCustomer: false,
  63. badge: 0
  64. }
  65. },
  66. onReady() {
  67. uni.$on('changeChatList', this.initChat);
  68. },
  69. onShow() {
  70. this.initBadge();
  71. if (!uni.getStorageSync('token')) {
  72. this.user = {};
  73. this.isCustomer = false;
  74. } else {
  75. this.user = this.$store.getters.user;
  76. this.user.organizedName = this.$store.getters.organization && this.$store.getters.organization.name;
  77. this.init();
  78. this.initCustomerServe();
  79. }
  80. },
  81. methods: {
  82. async init() {
  83. let userInfo = await getUserInfoById(this.user.userId);
  84. if (userInfo.state) {
  85. this.user['userName'] = userInfo.data.name;
  86. this.user['userId'] = userInfo.data.id;
  87. this.user['portrait'] = userInfo.data.portrait;
  88. this.$store.dispatch('app/changeUser', this.user);
  89. }
  90. },
  91. async initCustomerServe() {
  92. let customerServe = await getCustomerServeListByQuery({
  93. organizationId: this.$store.getters.organization.id,
  94. userId: this.$store.getters.user.userId
  95. })
  96. if (customerServe.state && customerServe.data && customerServe.data.length > 0) {
  97. let data = customerServe.data[0];
  98. this.isCustomer = true;
  99. uni.setStorageSync('serveChatId', data.customerId);
  100. this.$customerServe.connect(data.customerId);
  101. this.initChat();
  102. }
  103. },
  104. initChat() {
  105. this.$customerServe.getConversationList(data => {
  106. let chatList = data.data.filter(node => node.conversationId !== 'system');
  107. let badge = 0;
  108. for (let i = 0; i < chatList.length; i++) {
  109. badge += chatList[i].unread
  110. }
  111. this.badge = badge;
  112. });
  113. },
  114. }
  115. }
  116. </script>
  117. <style lang="scss" scoped>
  118. .my-box {
  119. height: 100vh;
  120. background: #fff;
  121. overflow-y: auto;
  122. .my-content {
  123. display: flex;
  124. flex-direction: column;
  125. align-items: center;
  126. padding-bottom: 80rpx;
  127. }
  128. .my-top {
  129. height: 260rpx;
  130. background-image: url('https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyMDUzMDJ8MHwxfHNlYXJjaHw1fHxhYnN0cmFjdHxlbnwxfHx8fDE2NTI4OTYzNTU&ixlib=rb-1.2.1&q=80&w=1080');
  131. background-position: center center;
  132. background-size: cover;
  133. background-repeat: no-repeat;
  134. width: 100%;
  135. }
  136. .my-avatar {
  137. width: 200rpx;
  138. height: 200rpx;
  139. border-radius: 50%;
  140. margin-top: -100rpx;
  141. border: 6rpx solid #fff;
  142. background: #eee;
  143. }
  144. .name {
  145. font-size: 20px;
  146. font-weight: 700;
  147. margin: 10rpx 0;
  148. }
  149. .organization {
  150. font-weight: 300;
  151. }
  152. .my-list {
  153. width: 100%;
  154. padding: 60rpx 30rpx 30rpx 30rpx;
  155. box-sizing: border-box;
  156. .my-list-box {
  157. border-radius: 24rpx;
  158. box-shadow: 1px 1px 12px rgba(164, 164, 164, 0.25);
  159. overflow: hidden;
  160. }
  161. .my-item {
  162. display: flex;
  163. align-items: center;
  164. padding: 20rpx 30rpx;
  165. }
  166. .my-icon {
  167. width: 80rpx;
  168. height: 80rpx;
  169. border-radius: 16rpx;
  170. display: flex;
  171. align-items: center;
  172. justify-content: center;
  173. margin-right: 20rpx;
  174. background: #c1c0c8;
  175. &.bg1 {
  176. background: #88d498;
  177. }
  178. &.bg2 {
  179. background: #ffb997;
  180. }
  181. &.bg3 {
  182. background: #7ad9ff;
  183. }
  184. &.bg4 {
  185. background: #9ac0cd;
  186. }
  187. &.bg5 {
  188. background: #40e0d0;
  189. }
  190. }
  191. .item-content {
  192. flex: 1;
  193. width: 0;
  194. overflow: hidden;
  195. font-weight: 700;
  196. }
  197. }
  198. .fab-box {
  199. position: fixed;
  200. bottom: 60rpx;
  201. right: 30rpx;
  202. width: 100rpx;
  203. height: 100rpx;
  204. border-radius: 50%;
  205. background: $uv-primary;
  206. .fab-data {
  207. width: 100%;
  208. height: 100%;
  209. position: relative;
  210. display: flex;
  211. align-items: center;
  212. justify-content: center;
  213. }
  214. }
  215. }
  216. </style>