list.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <a-card size="small" :bordered="false">
  3. <div class="s-list">
  4. <div class="s-row">
  5. <div class="c-1">
  6. <div>
  7. <span>{{ countData?countData.useRate:0 }}%</span>
  8. <span>转化率 ◕</span>
  9. </div>
  10. </div>
  11. <div class="c-2">
  12. <img src="@/assets/s1.png"></img>
  13. <div class="text">
  14. <div>注册用户</div>
  15. <div>{{ countData?countData.registerUserCount:0 }}个</div>
  16. </div>
  17. </div>
  18. <div class="c-3">
  19. ● 只要登录过修配易码通就算注册用户。
  20. </div>
  21. <div class="c-4">
  22. <a-button type="link" class="button-info" @click="toPage('registeredUser')">查看详情></a-button>
  23. </div>
  24. </div>
  25. <div class="s-row">
  26. <div class="c-1">
  27. <div>
  28. <span>{{ countData?countData.activeRate:0 }}%</span>
  29. <span>转化率 ◕</span>
  30. </div>
  31. </div>
  32. <div class="c-2">
  33. <img src="@/assets/s2.png"></img>
  34. <div class="text">
  35. <div>使用用户</div>
  36. <div>{{ countData?countData.useUserCount:0 }}个/{{ countData?countData.useStoreCount:0 }}家门店</div>
  37. </div>
  38. </div>
  39. <div class="c-3">
  40. <p>● 注册用户中,数字货架汽修店的员工定义为使用用户</p>
  41. <p>● 如果一个汽修店-共有5位员工,会算做5个使用用户,1家门店</p>
  42. </div>
  43. <div class="c-4">
  44. <a-button type="link" class="button-info" @click="toPage('usedUser')">查看详情></a-button>
  45. </div>
  46. </div>
  47. <div class="s-row">
  48. <div class="c-1"></div>
  49. <div class="c-2">
  50. <img src="@/assets/s3.png"></img>
  51. <div class="text">
  52. <div>活跃用户</div>
  53. <div>{{ countData?countData.activeUserCount:0 }}个/{{ countData?countData.activeStoreCount:0 }}家门店</div>
  54. </div>
  55. </div>
  56. <div class="c-3">
  57. <p>● 使用用户中,最近30天内,有产生销售单的汽修店定义为活跃门店</p>
  58. <p>● 这些活跃门店的员工为活跃用户</p>
  59. </div>
  60. <div class="c-4">
  61. <a-button type="link" class="button-info" @click="toPage('activeUser')">查看详情></a-button>
  62. </div>
  63. </div>
  64. </div>
  65. </a-card>
  66. </template>
  67. <script>
  68. import { queryUserCount } from '@/api/report.js'
  69. export default {
  70. data () {
  71. return {
  72. countData: null
  73. }
  74. },
  75. methods: {
  76. toPage (name) {
  77. this.$router.push({ name })
  78. },
  79. getData () {
  80. queryUserCount().then(res => {
  81. this.countData = res.data || null
  82. })
  83. }
  84. },
  85. mounted () {
  86. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  87. this.getData()
  88. }
  89. },
  90. activated () {
  91. // 如果是新页签打开,则重置当前页面
  92. if (this.$store.state.app.isNewTab) {
  93. this.getData()
  94. }
  95. }
  96. }
  97. </script>
  98. <style lang="less">
  99. .s-list{
  100. height: calc(100vh - 135px);
  101. .s-row{
  102. display: flex;
  103. align-items:center;
  104. &:first-child{
  105. margin-top: 50px;
  106. }
  107. &:last-child{
  108. > div{
  109. border: 0;
  110. }
  111. }
  112. > div{
  113. height: 96px;
  114. display: flex;
  115. flex-direction: column;
  116. justify-content: center;
  117. }
  118. .c-1{
  119. width: 20%;
  120. position: relative;
  121. > div{
  122. position: absolute;
  123. bottom: -18px;
  124. right: 20px;
  125. display: flex;
  126. align-items:center;
  127. > span{
  128. &:first-child{
  129. font-size: 24px;
  130. margin-right: 20px;
  131. }
  132. &:last-child{
  133. font-size: 16px;
  134. color: #999;
  135. }
  136. }
  137. }
  138. }
  139. .c-2{
  140. width: 374px;
  141. position: relative;
  142. img{
  143. width:100%;
  144. height: 96px;
  145. }
  146. .text{
  147. position: absolute;
  148. left:0;
  149. top:0;
  150. width:100%;
  151. display: flex;
  152. align-items:center;
  153. flex-direction: column;
  154. height: 100%;
  155. justify-content: center;
  156. color: #fff;
  157. font-size: 18px;
  158. }
  159. }
  160. .c-3{
  161. width: 40%;
  162. color: #666;
  163. border-bottom:1px dashed #d3cfcf;
  164. padding: 0 30px;
  165. font-size: 14px;
  166. > p{
  167. margin: 3px 0;
  168. }
  169. }
  170. .c-4{
  171. width: 10%;
  172. border-bottom:1px dashed #d3cfcf;
  173. }
  174. }
  175. }
  176. </style>