CZKJ.XKJ.Helper/src/pages/manage/statistics/user-data.vue

<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>