ox_zhiNengZhuShou/src/pages/time_select/date/date.vue

<template>
    <view class="time-date">
        <view class="td-day">
            <view>日</view> <view>一</view>
            <view>二</view> <view>三</view>
            <view>四</view> <view>五</view> 
            <view>六</view>
        </view>
        <view class="td-tip">仅保留最近半年日报数据</view>
        <view class="td-list">
            <view class="tl-item" v-for="(e,i) in calendarData" :key="i">
                <view class="ti-title"><text>{{e.showMonth}}</text></view>
                <view class="ti-list">
                    <view class="tl-item" v-for="(item,k) in e.dateArr" :key="k">
                        <view :class="[isSameDay(item.defineDate || '')?'active':'']" @click="timeChange(item.defineDate)">
                            <view>{{item.showDate}}</view>
                            <view>
                                <text v-if="item.money>0">¥{{item.money}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            
        </view>
    </view>
</template>

<script>
import { API } from '../../../js/api'
import { servers } from '../../../js/server'
import util from '../../../utils/util'
export default {
    data(){
        return {
            recordInfo: {},
            calendarData: [],
            curDay: ''
        }
    },
    computed: {
        isSameDay(){
            let { curDay } = this;
            return (date='')=>util.isSameDay(new Date(curDay.replace(/\-/,'/')).getTime(),new Date(date.replace(/\-/,'/')).getTime())
        }
    },
    onLoad(options){
        this.curDay = options.date || ''
        this.getRecord();
        // this.getDateArr({});
    },
    methods: {
        timeChange(time){
            util.previousPageFunction({
                fnName: 'timeChange',
                query: {
                    detail: {
                        value: time
                    }
                }
            });
            util.routeTo();
        },
        getMonthArr(serverArr){
            const TOTAL_MONTH = 6;   // 需要加载月份数量
            let dateObj = new Date();
            let _curYear = dateObj.getFullYear();
            let _curMonth = dateObj.getMonth()+1;
            let _monthArr = new Array(TOTAL_MONTH).fill(1).map((e,i)=>_curMonth-i);
            let _calendarData = _monthArr.map(e=>{
                return {
                    showMonth: `${e > 0?util.formatNumber(e):util.formatNumber( 12 + e)}月`,
                    dateArr: this.getDateArr({
                        year: e > 0 ? _curYear : _curYear-1,
                        month: e > 0 ? e : 12 + e,
                        serverArr: serverArr || [],
                    })
                }
            })
            return _calendarData || [];
            // this.calendarData = _calendarData;
        },
        getCalendar({
            curYear,
            monthArr,
        }){
            return monthArr.map((e,i)=>{
                
            })
        },
        getDateArr({
            year = 2020,
            month = 9,
            serverArr = [],
        }){
            let _dateAmount = new Date(year, month, 0).getDate();  // 当月天总数
            
            let _dateArr = new Array(_dateAmount).fill(1).map((e,i)=>{
                let _obj = {
                    defineDate: `${year}-${util.formatNumber(month)}-${util.formatNumber(i+1)}`,
                    showDate: util.formatNumber(i+1),
                    money: 0
                }

                try{  // 后台金额赋值显示
                    let _sameDayObj = serverArr.filter(ele=>{
                        return util.isSameDay(new Date(_obj.defineDate.replace(/\-/g,'/')).getTime(), new Date(ele.date.replace(/\-/g,'/')).getTime());
                    })[0] || {}
                    if(JSON.stringify(_sameDayObj)!='{}'&&_sameDayObj.amount !=0)_obj.money = _sameDayObj.amount;
                }catch(err){console.warn(err)};

                return _obj
            })
            let _firstDay = new Date(_dateArr[0].defineDate).getDay();  // 填补首日星期空缺
            new Array(_firstDay).fill(1).forEach(e=>_dateArr.unshift({}));

            return _dateArr
        },
        getRecord(){
            util.showLoad();
            servers.get({
                url: API.turnoverDay,
                data: {},
                failMsg: '加载失败！',
            })
            .then(e=>{
                this.recordInfo = e;
                this.calendarData = this.getMonthArr(e || []);
                this.$nextTick(util.hideLoad);
            })
            .catch(util.hideLoad);
        }
    }
}
</script>

<style lang="scss">
    @import "../../../style/public.scss";
    page{
        background-color: #fff;
    }
    .time-date{
        padding-top: 118upx;
    }
    .td-day{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 64upx;
        background-color: #f2f2f7;
        @include centerFlex(center);
        >view{
            flex-shrink: 0;
            flex-grow: 1;
            text-align: center;
            line-height: 40upx;
            font-size: 28upx;
            color: #9c9c9f;
        }
    }
    .td-tip{
        margin-bottom: 40upx;
        text-align: center;
        line-height: 40upx;
        font-size: 28upx;
        color: #9C9C9F;
    }
    .td-list{
        >.tl-item{
            margin-bottom: 68upx;   
            .ti-title{
                margin-bottom: 36upx;
                @include centerFlex(center);
                >text{
                    margin: 0 30upx;
                    font-size: 32upx;
                    font-weight: 500;
                    color: #1a1a1a;
                }
                &::before,&::after{
                    content: '';
                    display: block;
                    width: 120upx;
                    height: 2upx;
                    background-color: #d8d8d8;
                }
            }
            .ti-list{
                display: flex;
                flex-wrap: wrap;
                .tl-item{
                    padding: 0 2upx;
                    flex-shrink: 0;
                    height: 112upx;
                    width: 14.28%;
                    @include centerFlex(center);
                    >view{
                        padding: 2upx 8upx;
                        border-radius: 10upx;
                        >view{
                            text-align: center;
                            @include textHide(1);
                            &:first-child{
                                line-height: 40upx;
                                font-weight: 500;
                                font-size: 28upx;
                                color: #1a1a1a;
                            }
                            &+view{
                                height: 28upx;
                                line-height: 28upx;
                                font-size: 20upx;
                                color: #9c9c9f;
                            }
                        }
                    }
                    .active{
                        background-color: #f2f2f7;
                    }
                }
            }
        }
        
    }
</style>