123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- <template>
- <a-card size="small" :bordered="false">
- <div class="s-list">
- <div class="s-row">
- <div class="c-1">
- <div>
- <span>{{ countData?countData.useRate:0 }}%</span>
- <span>转化率 ◕</span>
- </div>
- </div>
- <div class="c-2">
- <img src="@/assets/s1.png"></img>
- <div class="text">
- <div>注册用户</div>
- <div>{{ countData?countData.registerUserCount:0 }}个</div>
- </div>
- </div>
- <div class="c-3">
- ● 只要登录过修配易码通就算注册用户。
- </div>
- <div class="c-4">
- <a-button type="link" class="button-info" @click="toPage('registeredUser')">查看详情></a-button>
- </div>
- </div>
- <div class="s-row">
- <div class="c-1">
- <div>
- <span>{{ countData?countData.activeRate:0 }}%</span>
- <span>转化率 ◕</span>
- </div>
- </div>
- <div class="c-2">
- <img src="@/assets/s2.png"></img>
- <div class="text">
- <div>使用用户</div>
- <div>{{ countData?countData.useUserCount:0 }}个/{{ countData?countData.useStoreCount:0 }}家门店</div>
- </div>
- </div>
- <div class="c-3">
- <p>● 注册用户中,数字货架汽修店的员工定义为使用用户</p>
- <p>● 如果一个汽修店-共有5位员工,会算做5个使用用户,1家门店</p>
- </div>
- <div class="c-4">
- <a-button type="link" class="button-info" @click="toPage('usedUser')">查看详情></a-button>
- </div>
- </div>
- <div class="s-row">
- <div class="c-1"></div>
- <div class="c-2">
- <img src="@/assets/s3.png"></img>
- <div class="text">
- <div>活跃用户</div>
- <div>{{ countData?countData.activeUserCount:0 }}个/{{ countData?countData.activeStoreCount:0 }}家门店</div>
- </div>
- </div>
- <div class="c-3">
- <p>● 使用用户中,最近30天内,有产生销售单的汽修店定义为活跃门店</p>
- <p>● 这些活跃门店的员工为活跃用户</p>
- </div>
- <div class="c-4">
- <a-button type="link" class="button-info" @click="toPage('activeUser')">查看详情></a-button>
- </div>
- </div>
- </div>
- </a-card>
- </template>
- <script>
- import { queryUserCount } from '@/api/report.js'
- export default {
- data () {
- return {
- countData: null
- }
- },
- methods: {
- toPage (name) {
- this.$router.push({ name })
- },
- getData () {
- queryUserCount().then(res => {
- this.countData = res.data || null
- })
- }
- },
- mounted () {
- if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
- this.getData()
- }
- },
- activated () {
- // 如果是新页签打开,则重置当前页面
- if (this.$store.state.app.isNewTab) {
- this.getData()
- }
- }
- }
- </script>
- <style lang="less">
- .s-list{
- height: calc(100vh - 135px);
- .s-row{
- display: flex;
- align-items:center;
- &:first-child{
- margin-top: 50px;
- }
- &:last-child{
- > div{
- border: 0;
- }
- }
- > div{
- height: 96px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
- .c-1{
- width: 20%;
- position: relative;
- > div{
- position: absolute;
- bottom: -18px;
- right: 20px;
- display: flex;
- align-items:center;
- > span{
- &:first-child{
- font-size: 24px;
- margin-right: 20px;
- }
- &:last-child{
- font-size: 16px;
- color: #999;
- }
- }
- }
- }
- .c-2{
- width: 374px;
- position: relative;
- img{
- width:100%;
- height: 96px;
- }
- .text{
- position: absolute;
- left:0;
- top:0;
- width:100%;
- display: flex;
- align-items:center;
- flex-direction: column;
- height: 100%;
- justify-content: center;
- color: #fff;
- font-size: 18px;
- }
- }
- .c-3{
- width: 40%;
- color: #666;
- border-bottom:1px dashed #d3cfcf;
- padding: 0 30px;
- font-size: 14px;
- > p{
- margin: 3px 0;
- }
- }
- .c-4{
- width: 10%;
- border-bottom:1px dashed #d3cfcf;
- }
- }
- }
- </style>
|