用户分析

src/pages.json

@@ -595,6 +595,12 @@
             "style": {
                 "navigationBarTitleText": "修改店铺tab"
             }
+        },
+        {
+            "path": "pages/manage/statistics/user-data",
+            "style": {
+                "navigationBarTitleText": "用户分析"
+            }
         }
     ]
 }

src/pages/manage/index.vue

@@ -92,7 +92,7 @@
 
         <!-- <button class="btn" @click="layout">退出登录</button> -->
 
-        <div class="ver">0.5.6</div>
+        <div class="ver">0.5.61</div>
         <wyg-bottom-tab
             ref="tabbar"
             :tabIndex="2"
@@ -237,7 +237,6 @@ export default {
             this.$store.commit("user/update", {
                 menuList: arr,
             });
-            console.log(arr, "menu");
             let arr2 = [];
             for (let item of arr) {
                 if (item.id !== "mobile_setting") {

src/pages/manage/statistics/nav.vue

@@ -8,6 +8,13 @@
                     src="/static/common/arrows_left.png"
                 ></my-image>
             </li>
+            <li class="item" @click="jump('/pages/manage/statistics/user-data')">
+                <div class="name">用户分析</div>
+                <my-image
+                    class="arrow"
+                    src="/static/common/arrows_left.png"
+                ></my-image>
+            </li>
             <!-- <li class="item" @click="jump('/pages/manage/statistics/product')">
                 <div class="name">商品分析</div>
                 <my-image

src/pages/manage/statistics/user-data.vue

@@ -0,0 +1,399 @@
+<template>
+    <div class="page">
+        <div class="filter">
+            <!-- <div >时间选择</div> -->
+            <ul class="date-list">
+                <li
+                    v-for="(item, index) of filterDateList"
+                    :key="index"
+                    @click="dateClick(item)"
+                    :class="{ on: activeDate.name === item.name }"
+                >
+                    {{ item.name }}
+                </li>
+            </ul>
+            <div class="filter-item">
+                <div class="name">排序：</div>
+                <div class="sort-main">
+                    <div class="box">
+                        <picker
+                            class="view"
+                            mode="selector"
+                            :range="sortByList"
+                            :range-key="'label'"
+                            @change="pickerChange($event, 'sortBy')"
+                        >
+                            <span class="view">{{ activeSortBy }}</span>
+                        </picker>
+                    </div>
+                    <div class="box">
+                        <picker
+                            class="view"
+                            mode="selector"
+                            :range="ascList"
+                            :range-key="'label'"
+                            @change="pickerChange($event, 'asc')"
+                        >
+                            <span class="view">{{ activeAsc }}</span>
+                        </picker>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- data-list -->
+        <div class="data-list">
+            <ul class="list">
+                <li class="item" v-for="item of dataList" :key="item.id">
+                    <div class="head-icon">
+                        <my-image :src="item.headIcon"></my-image>
+                    </div>
+                    <div class="info">
+                        <div class="name">{{ item.nickName }}</div>
+                        <div class="des">
+                            <section class="des-item">
+                                <span class="key">购买数量：</span
+                                >{{ item.buyCount }}
+                            </section>
+                            <section class="des-item">
+                                <span class="key">购买金额：</span
+                                >{{ item.buyAmount / 100 }}
+                            </section>
+                        </div>
+                        <div class="des">
+                            <section class="des-item">
+                                <span class="key">积分：</span>{{ item.points }}
+                            </section>
+                            <section class="des-item">
+                                <span class="key">访问次数：</span
+                                >{{ item.visitCount }}
+                            </section>
+                        </div>
+                        <div class="des time">
+                            最后登录时间：{{ item.lastLoginTime }}
+                        </div>
+                    </div>
+                </li>
+            </ul>
+            <div class="empty-text" v-if="dataLoading || dataEnd">
+                {{ dataLoading ? "加载中..." : "无更多数据" }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import MyImage from "../../../components/image/index";
+
+export default {
+    name: "",
+    components: { MyImage },
+
+    // 数据
+    data() {
+        return {
+            storeId: "",
+            filterDateList: [], // 快捷日期 [{name,startTime,endTime}]
+            activeDate: {},
+            dataList: [], // 数据列表
+            sortByList: [
+                { label: "购买次数", value: 0 },
+                { label: "最后登录时间", value: 1 },
+                { label: "访问次数", value: 2 },
+                { label: "购买金额", value: 3 },
+                { label: "积分数", value: 4 },
+            ],
+            ascList: [
+                { label: "降序", value: 0 },
+                { label: "升序", value: 1 },
+            ],
+            activeSortBy: "购买次数",
+            activeAsc: "降序",
+            pageIndex: 1,
+            dataEnd: false,
+            dataLoading: true,
+        };
+    },
+
+    onLoad() {
+        if (this.user.storeId) {
+            this.storeId = this.user.storeId;
+        }
+        this.initFilterDateList();
+        this.getDataList();
+    },
+    onReachBottom() {
+        this.getListMore();
+    },
+    async onShow() {},
+    // 函数
+    methods: {
+        // 生成日期过滤
+        initFilterDateList() {
+            let arr = [];
+            // 今天
+            let date = new Date();
+            let year = date.getFullYear();
+            let month =
+                date.getMonth() + 1 > 9
+                    ? "" + (date.getMonth() + 1)
+                    : "0" + (date.getMonth() + 1);
+            let day =
+                date.getDate() > 9 ? "" + date.getDate() : "0" + date.getDate();
+            arr.push({
+                name: "今天",
+                startTime: `${year}-${month}-${day} 00:00:00`,
+                endTime: `${year}-${month}-${day} 23:59:59`,
+            });
+            let date2 = new Date(date);
+            date2.setDate(date.getDate() - 1);
+            arr.push({
+                name: "昨天",
+                startTime: `${date2.getFullYear()}-${
+                    date2.getMonth() + 1
+                }-${date2.getDate()} 00:00:00`,
+                endTime: `${year}-${month}-${day - 1} 23:59:59`,
+            });
+            let date3 = new Date(date);
+            date3.setDate(date.getDate() - 7);
+            arr.push({
+                name: "近7天",
+                startTime: `${date3.getFullYear()}-${
+                    date3.getMonth() + 1
+                }-${date3.getDate()} 00:00:00`,
+                endTime: `${year}-${month}-${day} 23:59:59`,
+            });
+            let date4 = new Date(date);
+            date4.setDate(date.getDate() - 30);
+            arr.push({
+                name: "近30天",
+                startTime: `${date4.getFullYear()}-${
+                    date4.getMonth() + 1
+                }-${date4.getDate()} 00:00:00`,
+                endTime: `${year}-${month}-${day} 23:59:59`,
+            });
+            arr.push({
+                name: "全部",
+                startTime: null,
+                endTime: null,
+            });
+            this.filterDateList = arr;
+            this.activeDate = arr[3];
+        },
+
+        dateClick(val) {
+            this.activeDate = val;
+            this.getDataList();
+        },
+
+        pickerChange(e, name) {
+            let index = e.detail.value;
+            if (name === "sortBy") {
+                this.activeSortBy = this.sortByList[index].label;
+            }
+            if (name === "asc") {
+                this.activeAsc = this.ascList[index].label;
+            }
+            this.getDataList();
+        },
+
+        // 获取订单交易数据
+        getDataList() {
+            uni.showLoading({
+                title: "加载中...",
+            });
+            this.pageIndex = 1;
+            this.dataEnd = false;
+            let sendData = {
+                pageIndex: this.pageIndex++,
+                // sortBy:'',
+                // asc:'',
+            };
+            if (this.activeDate.startTime) {
+                sendData.startTime = this.activeDate.startTime;
+                sendData.endTime = this.activeDate.endTime;
+            }
+            for (let item of this.sortByList) {
+                if (item.label === this.activeSortBy) {
+                    sendData.sortBy = item.value;
+                }
+            }
+            for (let item of this.ascList) {
+                if (item.label === this.activeAsc) {
+                    sendData.asc = item.value;
+                }
+            }
+            this.api.get("/Data/GetUserDataList", sendData).then((res) => {
+                uni.hideLoading();
+                this.dataList = res.data.data;
+            });
+        },
+
+        getListMore() {
+            if (this.dataEnd) {
+                return;
+            }
+            let sendData = {
+                pageIndex: this.pageIndex++,
+                // sortBy:'',
+                // asc:'',
+            };
+            if (this.activeDate.startTime) {
+                sendData.startTime = this.activeDate.startTime;
+                sendData.endTime = this.activeDate.endTime;
+            }
+            for (let item of this.sortByList) {
+                if (item.label === this.activeSortBy) {
+                    sendData.sortBy = item.value;
+                }
+            }
+            for (let item of this.ascList) {
+                if (item.label === this.activeAsc) {
+                    sendData.asc = item.value;
+                }
+            }
+            this.dataLoading = true;
+            this.api.get("/Data/GetUserDataList", sendData).then((res) => {
+                this.dataLoading = false;
+                uni.hideLoading();
+                if (res.data.data.length < 20) {
+                    this.dataEnd = true;
+                }
+                this.dataList = [...this.dataList, ...res.data.data];
+            });
+        },
+    },
+
+    // 数据计算
+    computed: {
+        user() {
+            return this.$store.state.user.user;
+        },
+    },
+
+    // 数据监听
+    watch: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.page {
+    padding-bottom: px(50);
+}
+.data-list {
+    margin-top: px(30);
+    background-color: #fff;
+}
+.filter {
+    padding: px(30);
+    background-color: #fff;
+    .date-list {
+        display: flex;
+        justify-content: space-between;
+        font-size: px(44);
+        text-align: center;
+        li {
+            border: 1px solid #f1f1f1;
+            padding: px(20) 0;
+            width: 20%;
+            flex-shrink: 0;
+            &.on {
+                border-color: rgb(0, 188, 38);
+                color: rgb(0, 188, 38);
+            }
+        }
+    }
+    .filter-item {
+        padding: px(20) 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .name {
+            width: px(150);
+            flex-shrink: 0;
+            font-size: px(44);
+            margin-right: px(20);
+        }
+        .sort-main {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .box {
+            width: 49%;
+            height: px(100);
+            border: 1px solid #f1f1f1;
+            padding: 0 px(20);
+            font-size: px(44);
+            display: flex;
+            align-items: center;
+            position: relative;
+            &::after {
+                content: "";
+                position: absolute;
+                right: px(30);
+                top: 50%;
+                z-index: 1;
+                width: 0;
+                height: 0;
+                border-style: solid;
+                border-width: 5px 5px 0 5px;
+                border-color: #666 transparent transparent transparent;
+            }
+            .view {
+                width: 100%;
+                height: 100%;
+                line-height: px(100);
+                display: block;
+            }
+        }
+    }
+}
+.data-list {
+    padding: px(40) 0;
+    background-color: #fff;
+    .item {
+        border-bottom: 1px solid #f1f1f1;
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between;
+        padding: px(30) px(40);
+    }
+    .head-icon {
+        width: px(230);
+        height: px(230);
+        flex-shrink: 0;
+        margin-right: px(30);
+        /deep/ img {
+            width: px(230);
+            height: px(230);
+        }
+    }
+    .info {
+        width: 100%;
+    }
+    .name {
+        font-size: px(44);
+    }
+    .des {
+        font-size: px(42);
+        margin-top: px(10);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .des-item {
+            width: 45%;
+        }
+    }
+    .key,
+    .time {
+        color: #999;
+    }
+}
+.empty-text {
+    text-align: center;
+    padding: px(30);
+    font-size: px(44);
+    color: #999;
+}
+</style>