hemall.terabimsoft.com.cn/plugins/shop-statistics/views/backend/member.blade.php

<script src="{{static_url('js/echarts.js')}}" type="text/javascript"></script>
@extends('layouts.base')
@section('title', '会员数据统计')
<script src="{{resource_get('plugins/shop-statistics/assets/js/echarts.min.js')}}"></script>
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<link rel="stylesheet" href="{{resource_get('plugins/shop-statistics/assets/css/common.css')}}">
<link rel="stylesheet" href="{{resource_get('plugins/shop-statistics/assets/css/statistics.css')}}">

<style>
    .member-news-card {
        padding: 27px 30px;
        width: 354px;
        height: 176px;
        background-color: #feffff;
        box-shadow: 0px 3px 27px 0px rgba(218, 218, 218, 0.43);
        border-radius: 6px;
        box-sizing: border-box;
        background-position: calc(100% - 30px) calc(100% - 27px);
        background-size:140px 84px;
        background-repeat: no-repeat;
    }

    .member-news-card:nth-child(odd) {
        background-image: url("/addons/yun_shop/plugins/shop-statistics/assets/images/Shape.png");
    }

    .member-news-card:nth-child(even) {
        background-image: url("/addons/yun_shop/plugins/shop-statistics/assets/images/Shape1.png");
    }

    .member-news-card+.member-news-card {
        margin-top: 15px;
    }

    .member-news-card_title {
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        color: #5e6c84;
    }

    .member-new-card_count {
        display: block;
        margin-top: 38px;
        line-height: 38px;
        color: #344563;
        font-size: 42px;
    }
</style>

<div class="all">
    <div id="app">
        <panel padding="20px">
            <panel-form inline>
                <statistics-time-range @changed="newMembertimeRangeChanged"></statistics-time-range>
            </panel-form>
            <el-row type="flex" justify="space-between">
                <el-col :span="5">
                    <div class="member-news-card">
                        <div class="member-news-card_title">累计会员数
                            <el-tooltip effect="dark" content="累计会员人数" placement="top">
                                <i class="el-icon-warning"></i>
                            </el-tooltip>
                        </div>
                        <count-to class="member-new-card_count" :start-val='0' :end-val="members" :duration=4000></count-to>
                    </div>
                    <div class="member-news-card">
                        <div class="member-news-card_title">新增会员数
                            <el-tooltip effect="dark" content="统计筛选时间内，新增会员人数" placement="top">
                                <i class="el-icon-warning"></i>
                            </el-tooltip>
                        </div>
                        <count-to class="member-new-card_count" :start-val='0' :end-val="memberNews" :duration=4000></count-to>
                    </div>
                    <!-- <statistics-card title="累计会员数" tip="累计会员人数" :count="members" shadow :border="false"></statistics-card>
                    <statistics-card title="新增会员数" tip="统计筛选时间内，新增会员人数" style="margin-top:15px;" :count="memberNews" shadow :border="false"></statistics-card> -->
                </el-col>
                <el-col :span="18">
                    <statistics-card shadow :border="false" style="padding:0px;">
                        <div ref="memberNewsChart" style="width:100%;height:367px;"></div>
                    </statistics-card>
                </el-col>
            </el-row>
        </panel>
        <panel v-if="broweFootprintPluginTurnon">
            <el-row :gutter="20">
                <el-col :span="4">
                    <statistics-card title="浏览量" tip="统计筛选时间内，页面被访问的次数，多次访问多次记录" :count="views"></statistics-card>
                    <statistics-card title="访客量" tip="统计筛选时间内，页面被访问的人数，多次访问只记录一次" :count="visitors" style="margin-top:14px"></statistics-card>
                </el-col>
                <el-col :span="20">
                    <panel-form inline style="text-align:right;">
                        <statistics-time-range @changed="pageTypeRangeChanged"></statistics-time-range>
                    </panel-form>
                    <panel-form style="margin:37px 0 37px 40px;">
                        <el-form-item>
                            <el-button :type="pageType.selectedType==pageTypeItem.value?'primary':'text'" :style="{ color:pageType.selectedType==pageTypeItem.value?'#fff':'#666' }" style="margin:-right:20px;" v-for="pageTypeItem in pageType.types" :label="pageTypeItem.text" :key="pageTypeItem.value" @click="pageType.selectedType=pageTypeItem.value;switchPageTypeChartData()" round>[[ pageTypeItem.text ]]</el-button>
                        </el-form-item>
                    </panel-form>
                    <div ref="pageTypeChart" style="width:100%;height:500px;"></div>
                </el-col>
            </el-row>
        </panel>
        <el-row type="flex" style="margin-top:20px;height: 479px;" :gutter="5">
            <el-col :span="9">
                <panel>
                    <statistics-card-title>会员结构分部</statistics-card-title>
                    <div ref="memberDistribution" style="width:100%;height:388px;"></div>
                </panel>
            </el-col>
            <el-col :span="6">
                <panel>
                    <statistics-card-title>占比图</statistics-card-title>
                    <div ref="sexRatio" style="width:100%;height:388px;"></div>
                </panel>
            </el-col>
            <el-col :span="9">
                <panel id="memberLevelsPanel" style="height:100%;">
                    <statistics-card-title>会员等级情况</statistics-card-title>
                    <div style="display:flex;flex-direction: column;justify-content: space-between;height:388px;">
                        <el-table :data="levelMembers" max-height="400px">
                            <el-table-column label="会员等级" prop="level_name"></el-table-column>
                            <el-table-column label="累计会员数" prop="member_count"></el-table-column>
                        </el-table>
                        <el-row style="margin-top:20px;">
                            <el-col align="end">
                                <el-pagination :total="levelMembersPagination.total" :page-size="levelMembersPagination.limit" :current-page="levelMembersPagination.pages" background @current-change="getMemberLevels"></el-pagination>
                            </el-col>
                        </el-row>
                    </div>
                </panel>
            </el-col>
        </el-row>
        <panel style="margin-top:20px;">
            <statistics-card-title>会员关系数据统计</statistics-card-title>
            <panel-form inline>
                <el-form-item>
                    <el-select v-model="membership.search.keywordType">
                        <el-option :value="1" label="会员ID"></el-option>
                        <el-option :value="2" label="会员昵称"></el-option>
                        <el-option :value="3" label="手机号"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="会员id/昵称/手机号" v-model="membership.search.keyword"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchMembership" :loading="membership.searchLoading">搜索</el-button>
                    <el-button @click="exportMemberShip">Excel导出</el-button>
                </el-form-item>
            </panel-form>
            <el-table :data="membership.datas">
                <el-table-column label="排行">
                    <template slot-scope="scope">
                        <div class="member-rank" :data-rank="scope.row.rank">
                            [[ scope.row.rank ]]
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="会员Id" prop="uid"></el-table-column>
                <el-table-column label="会员昵称/手机号">
                    <template slot-scope="scope">
                        <div class="member-info">
                            <el-avatar class="member-avatar" :src="scope.row.avatar" round></el-avatar>
                            [[ scope.row.nickname ]]
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="一级下级数量" prop="first_total"></el-table-column>
                <el-table-column label="二级下线数量" prop="second_total"></el-table-column>
                <el-table-column label="三级下线数量" prop="third_total"></el-table-column>
                <el-table-column label="团队总人数" prop="team_total"></el-table-column>
            </el-table>
            <el-row style="margin-top:20px;">
                <el-col align="center">
                    <el-pagination :total="membership.pagination.total" :page-size="membership.pagination.limit" :current-page="membership.pagination.pages" @current-change="getMemberShip"></el-pagination>
                </el-col>
            </el-row>
        </panel>
    </div>
</div>

<script>
    const GetMemberStatisticsUrl = "{!! yzWebFullUrl('plugin.shop-statistics.backend.member.get-member-statistic') !!}"; //* 获取会员统计
    const GetMemberNewsStatisticsUrl = "{!! yzWebFullUrl('plugin.shop-statistics.backend.member.search-member-new') !!}"; //* 新会员统计图数据
    const GetPageTypeStatisticsUrl = "{!! yzWebFullUrl('plugin.shop-statistics.backend.member.search-browse-footprint') !!}"; //* 获取浏览量，访客量统计数据
    const GetMemberLevelsDataUrl = "{!! yzWebFullUrl('plugin.shop-statistics.backend.member.search-member-level') !!}"; //* 获取会员等级数据
    const GetMembershipDataUrl = "{!! yzWebFullUrl('plugin.shop-statistics.backend.member.search-member-relation') !!}"; //* 获取会员关系数据
    const ExportMemberRelationDataUrl = "{!! yzWebFullUrl('plugin.shop-statistics.backend.member.direct-export') !!}"; //* 导出会员关系数据
</script>
<script src="{{resource_get('plugins/shop-statistics/assets/js/components.js')}}"></script>
<script src="{{resource_get('plugins/shop-statistics/assets/js/member.js')}}?t={{ readlink(0,12) }}&&t=141113"></script>
<script src="{{resource_get('plugins/shop-statistics/assets/js/common.js')}}"></script>
@endsection