shop4.3.57/pages/share/summary/summary.vue

<template>
    <app-layout>
        <view class="header">
            <view class="date-group">
                <view class="date">
                    <picker mode="date" :value="startDate" @change="startDateChange">
                        <view>{{startDate}}</view>
                    </picker>
                </view>
                <text>至</text>
                <view class="date">
                    <picker mode="date" :value="endDate" @change="endDateChange">
                        <view>{{endDate}}</view>
                    </picker>
                </view>
            </view>
            <view class="summary-btn" @click="search">统计</view>
        </view>
        <view class="tabs">
            <view class="tab"  :class="tabIndex==index?'active':''" v-for="(item,index) in tabs" :key="index" @click="changeTab(index)">
                {{item.name}}
            </view>
        </view>
        <view class="content">
            <view class="list-item" v-for="(item,index) in tabs[tabIndex]['listItem']" :key="index">
                <text>{{item.name}}</text>
                <text>{{item.value}}</text>
            </view>
        </view>
        <view class="desc" @click="showDesc = !showDesc">
            <text>{{tabs[tabIndex].name}}说明</text>
            <image src="../../../static/image/icon/arrow-right.png"></image>
        </view>
        <view v-if="showDesc" class="show-desc">
            <view class="main">
                <image class="close" src="../../../static/image/icon/close.png" @click="showDesc = !showDesc"></image>
                <view class="title">{{tabs[tabIndex].name}}说明</view>
                <view class="desc-con">{{tabs[tabIndex].desc}}</view>
            </view>
        </view>
    </app-layout>
</template>


<script>
    export default {
        data(){
            return {
                showDesc:'',
                tabIndex: 0,
                date: this.getDate({
                    format: true
                }),
                startDate:this.getDate('start'),
                endDate:this.getDate('end'),
                tabs:[
                    {
                        name: '人数',
                        value: 1,
                        desc:'人数说明',
                        listItem:[
                            {
                                key: 'newCustomer',
                                name: '新增顾客',
                                value: 0,
                            },
                            {
                                key: 'newShare',
                                name: '新增代理',
                                value: 0,
                            },
                            {
                                key: 'myTeam',
                                name: '团队人数',
                                value: 0,
                            }
                        ],
                    },
                    {
                        name: '业绩',
                        value: 2,
                        desc:'业绩说明',
                        listItem:[
                            {
                                key: 'selfPerformance',
                                name: '个人业绩',
                                value: 0,
                            },
                            {
                                key: 'teamPerformance',
                                name: '团队业绩',
                                value: 0,
                            },
                            {
                                key: 'totalPerformance',
                                name: '总共业绩',
                                value: 0,
                            }
                        ],
                    },
                    {
                        name: '销量',
                        value: 3,
                        desc:'销量说明',
                        listItem:[
                            {
                                key: 'selfSale',
                                name: '个人销量',
                                value: 0,
                            },
                            {
                                key: 'teamSale',
                                name: '团队销量',
                                value: 0,
                            },
                            {
                                key: 'totalSale',
                                name: '总共销量',
                                value: 0,
                            }
                        ],
                    },
                    {
                        name: '返利',
                        value: 4,
                        desc: '返利说明',
                        listItem:[
                            {
                                key: 'selfCash',
                                name: '个人返利',
                                value: 0,
                            },
                            {
                                key: 'teamCash',
                                name: '团队返利',
                                value: 0,
                            },
                            {
                                key: 'totalCash',
                                name: '总共返利',
                                value: 0,
                            }
                        ],
                    }

                ]
            }
        },
        methods:{
            changeTab(index){
                this.tabIndex = index
            },
            search(){
                this.$showLoading();
                this.$request({
                    url: this.$api.share.summary,
                    data: {
                        startDate: this.startDate,
                        endDate: this.endDate
                    }
                }).then(response => {
                    uni.hideLoading();
                    this.$hideLoading();
                    if(response.code == 1){
                        const data = response.data
                        this.tabs.map(item => {
                            for (const index in item['listItem']) {
                                item['listItem'][index]['value'] = data[item['listItem'][index]['key']].toString()
                            }
                        })
                    }
                }).catch(() => {
                    uni.hideLoading();
                    this.$hideLoading();
                })
            },
            startDateChange(e){
                this.startDate = e.detail.value;
            },
            endDateChange(e){
                this.endDate = e.detail.value;
            },
            getDate(type) {
                const date = new Date();

                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    const startDate = new Date(date.getTime() - 30 * 24 * 60 * 60 * 1000);
                    year = startDate.getFullYear();
                    month = startDate.getMonth() + 1;
                    day = startDate.getDate();
                } else if (type === 'end') {
                    //return `${year}-${month}-${day}`;
                }
                month = month > 9 ? month : '0' + month;
                day = day > 9 ? day : '0' + day;

                return `${year}-${month}-${day}`;
            }
        },
        onLoad(){
            this.search()
        }

    }
</script>

<style scoped lang="scss">
    $defaultSpace:30rpx;
    $borderColor:#ccc;
    $defaultColor:#FF3A30;
    .header{
        display: flex;
        align-items: center;
        background: white;
        padding: $defaultSpace/3 $defaultSpace;
        .date-group{
            display: flex;
            flex: 1;
            border-radius: 10rpx;
            border: 1rpx solid $borderColor;
            height: 80rpx;
            align-items: center;
            .date{
                display: flex;
                flex: 1;
                align-items: center;
                justify-content: center;
            }
            text{
                padding: 0 20rpx;
            }
        }
        .summary-btn{
            padding: 0 $defaultSpace;
            background: $defaultColor;
            color: #ffffff;
            border-radius: 10rpx;
            height: 80rpx;
            margin-left: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .tabs{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: $defaultSpace $defaultSpace;
        border-radius: 20rpx;
        overflow: hidden;
        background: white;
        .tab{
            background: $defaultColor;
            color: #333333;
            border-left: 1rpx solid $borderColor;
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            padding: $defaultSpace 0;
            &.active{
                color: #ffffff;
            }
        }
    }
    .content{
        background: white;
        margin-top: $defaultSpace;
        .list-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: $defaultSpace;
            border-bottom: 1px solid $borderColor;
            color: #666666;
        }
    }
    .desc{
        padding: $defaultSpace;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: white;
        margin-top: $defaultSpace;
        color: #666666;
        image{
            width: 20rpx;
            height: 30rpx;
        }
    }
    .show-desc{
        position: fixed;
        background: rgba(0,0,0,.3);
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .main{
            width: 90%;
            height: 80%;
            border-radius: $defaultSpace;
            background: white;
            position: relative;
            .close{
                position: absolute;
                right: $defaultSpace;
                top: $defaultSpace;
                border-radius: 50%;
                border: 2px solid $borderColor;
                width: 40rpx;
                height: 40rpx;
            }
            .title{
                color: #666666;
                padding: $defaultSpace 20rpx;
            }
            .desc-con{
                padding: $defaultSpace 20rpx;
            }
        }
    }
</style>