teamMember.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <template>
  2. <view class="page">
  3. <view class="achievementInfo">
  4. <view class="infoTitle d-flex a-center">业绩信息</view>
  5. <view class="achievementStatistics d-flex">
  6. <view class="achievementStatistics_item d-flex flex-1 flex-column">
  7. <view class="d-flex a-center j-center">签单保费</view>
  8. <view class="d-flex a-center j-center">0</view>
  9. </view>
  10. <view class="achievementStatistics_item d-flex flex-1 flex-column">
  11. <view class="d-flex a-center j-center">出单人力</view>
  12. <view class="d-flex a-center j-center">0</view>
  13. </view>
  14. <view class="achievementStatistics_item d-flex flex-1 flex-column">
  15. <view class="d-flex a-center j-center">平均保费</view>
  16. <view class="d-flex a-center j-center">0</view>
  17. </view>
  18. </view>
  19. <view class="achievementAssessment d-flex">
  20. <view class="achievementAssessment_item d-flex a-center j-center flex-1">
  21. <view>机制考核</view><br />
  22. <view>守维持</view>
  23. </view>
  24. <view class="achievementAssessment_item d-flex flex-1 flex-column">
  25. <view>差距:3000 (标保)</view>
  26. <view>差距: (出单人力)</view>
  27. <view>差距: (继续率)</view>
  28. </view>
  29. </view>
  30. </view>
  31. <!-- <view class="teamInfo">
  32. <view class="teamInfo_item d-flex a-center j-sb" hover-class="teamInfo-list-hover">
  33. <view class="d-flex a-center">团队信息</view>
  34. <view class="icon iconfont icon-youjiantou" @tap="toTeam"></view>
  35. </view>
  36. </view> -->
  37. <view class="personInfo">
  38. <view class="infoTitle d-flex a-center">个人信息</view>
  39. <view class="personInfo_item d-flex a-center j-sb">
  40. <view class="d-flex a-center">姓名</view>
  41. <view>{{this.userInfo.sysUser.name}}</view>
  42. </view>
  43. <view class="personInfo_item d-flex a-center j-sb">
  44. <view class="d-flex a-center">会员号</view>
  45. <view>{{this.userInfo.sysUser.id}}</view>
  46. </view>
  47. <view class="personInfo_item d-flex a-center j-sb">
  48. <view class="d-flex a-center">手机</view>
  49. <view @tap="callPhone(this.userInfo.sysUser.mobile)" style="color: #007AFF;">
  50. {{this.userInfo.sysUser.mobile?(this.userInfo.sysUser.mobile.substring(0,3)+'****'+this.userInfo.sysUser.mobile.substring(7)):''}}
  51. </view>
  52. </view>
  53. <view class="personInfo_item d-flex a-center j-sb">
  54. <view class="d-flex a-center">注册时间</view>
  55. <view>{{this.userInfo.sysUser.createTime}}</view>
  56. </view>
  57. </view>
  58. </view>
  59. </template>
  60. <script>
  61. import {
  62. mapState
  63. } from "vuex";
  64. export default {
  65. data() {
  66. return {
  67. }
  68. },
  69. computed: {
  70. ...mapState(['userInfo']),
  71. getHeight() {
  72. let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(770);
  73. return `height: ${height}px;`;
  74. }
  75. },
  76. // 监听导航栏的按钮
  77. onNavigationBarButtonTap(e) {
  78. if (e.index == 0) {
  79. this.navigate({
  80. url: '/pages/index/index'
  81. }, "switchTab", true);
  82. }
  83. },
  84. onLoad() {
  85. const eventChannel = this.getOpenerEventChannel()
  86. // 监听acceptData事件,获取上一页面通过eventChannel传送到当前页面的数据
  87. eventChannel.on('acceptData', (data) => {})
  88. },
  89. methods: {
  90. callPhone(tel) {
  91. uni.makePhoneCall({
  92. phoneNumber: tel,
  93. success: () => {
  94. console.log("成功拨打电话")
  95. }
  96. })
  97. },
  98. // toTeam() {
  99. // this.navigate({
  100. // url: '/pages/tools/team/team?id=' + this.staffInfo.sysUser.id + '&name=' + this.staffInfo
  101. // .sysUser.name
  102. // }, "navigateTo", true)
  103. // }
  104. }
  105. }
  106. </script>
  107. <style>
  108. page {
  109. background: #F1F1F3;
  110. }
  111. .achievementInfo,
  112. .teamInfo,
  113. .personInfo {
  114. margin-top: 20rpx;
  115. background: #FFFFFF;
  116. }
  117. /* 业绩信息Start */
  118. .infoTitle {
  119. height: 80rpx;
  120. padding: 0rpx 20rpx;
  121. border-bottom: 1px solid #EDEDED;
  122. }
  123. .achievementStatistics {
  124. /* height: 140rpx; */
  125. border-bottom: 1px solid #EDEDED;
  126. }
  127. .achievementStatistics_item {
  128. padding: 10rpx 0;
  129. box-sizing: border-box;
  130. }
  131. .achievementStatistics_item>view:nth-of-type(1) {
  132. font-size: 32rpx;
  133. line-height: 60rpx;
  134. color: #4D4D4D;
  135. }
  136. .achievementStatistics_item>view:nth-of-type(2) {
  137. font-size: 32rpx;
  138. color: #D30500;
  139. }
  140. .achievementAssessment {
  141. border-bottom: 1px solid #EDEDED;
  142. }
  143. .achievementAssessment_item {
  144. padding: 15rpx 0;
  145. }
  146. .achievementAssessment .achievementAssessment_item:nth-child(1) {
  147. border-right: 1px solid #F1F1F1;
  148. flex: 2;
  149. }
  150. .achievementAssessment .achievementAssessment_item:nth-child(1)>view:nth-of-type(2) {
  151. display: inline-block;
  152. background-color: #007AFF;
  153. padding: 0rpx 10rpx;
  154. border-radius: 20rpx;
  155. font-size: 20rpx;
  156. text-align: center;
  157. color: #fff;
  158. margin-left: 20rpx;
  159. }
  160. .achievementAssessment .achievementAssessment_item:nth-child(2) {
  161. padding-left: 40rpx;
  162. box-sizing: border-box;
  163. flex: 3;
  164. color: #5F5F5F;
  165. }
  166. /* 业绩信息End */
  167. .teamInfo-list-hover {
  168. background: #f4f4f4;
  169. }
  170. .teamInfo_item>view:first-child {
  171. color: #000;
  172. }
  173. .teamInfo_item>view:last-child {
  174. color: #6A6A6A;
  175. }
  176. .personInfo_item,
  177. .teamInfo_item {
  178. padding: 15upx 30upx;
  179. border-top: 1upx solid #F4F4F4;
  180. border-bottom: 1upx solid #F4F4F4;
  181. }
  182. .personInfo_item>view:first-child {
  183. color: #3C3C3C;
  184. }
  185. .personInfo_item>view:first-child>view {
  186. margin-right: 20upx;
  187. }
  188. .personInfo_item>view:last-child {
  189. color: #6A6A6A;
  190. }
  191. </style>