From 4dd1014eccdc14b1674f2b232b80e4a1635e37e4 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Sun, 27 Sep 2020 19:06:20 +0800
Subject: [PATCH] fix & add calendar

---
 src/pages/collection/record/record.vue |   6 +-
 src/pages/time_select/date/date.vue    |  54 +++++++-------
 src/pages/time_select/month/month.vue  | 124 +++++++++++++++++++++++++++++++--
 src/pages/time_select/year/year.vue    |  62 +++++++++++++++--
 src/pages/turnover/turnover.vue        |  56 +++++----------
 5 files changed, 222 insertions(+), 80 deletions(-)

diff --git a/src/pages/collection/record/record.vue b/src/pages/collection/record/record.vue
index a224e16..2398f82 100644
--- a/src/pages/collection/record/record.vue
+++ b/src/pages/collection/record/record.vue
@@ -25,7 +25,7 @@
         <view class="cr-list">
             <view class="cl-item" v-for="(e,i) in recordList" :key="i" @click="toDetail(e)">
                 <view class="ci-time">{{formatDate(e.date || '') }}</view>
-                <view class="ci-money">¥{{e.sum || 0}}</view>
+                <view class="ci-money">¥{{numeral(e.sum || 0).format('0.00')}}</view>
                 <view class="ci-info">
                     <view v-if="e.in_count == 0&&e.out_count == 0">当日无交易</view>
                     <view v-else>收款{{e.in_count || 0}}笔(<text>¥{{e.in_sum || 0}}</text>)，退款{{e.out_count || 0}}笔(<text>¥{{e.out_sum || 0}}</text>)</view>
@@ -41,6 +41,7 @@ import { API } from '../../../js/api'
 import { servers } from '../../../js/server'
 import util from '../../../utils/util'
 import { mapState } from 'vuex';
+import numeral from 'numeral';
 export default {
     computed: {
         ...mapState(['brandInfo']),
@@ -56,6 +57,9 @@ export default {
                 if(util.isSameDay(new Date().getTime(), new Date(date.replace(/\-/g,'/')).getTime()))return '今天'
                 return util.formatDate({ date: date, partition: 'zh' }).substr(5)
             }
+        },
+        numeral(){
+            return numeral
         }
     },
     data(){
diff --git a/src/pages/time_select/date/date.vue b/src/pages/time_select/date/date.vue
index 885370f..f4dcf63 100644
--- a/src/pages/time_select/date/date.vue
+++ b/src/pages/time_select/date/date.vue
@@ -12,8 +12,8 @@
                 <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 :class="[isSameDay(item.defineDate || '')?'active':'']" @click="timeChange(item)">
+                            <view :class="[item.isUnStart?'unstart-active':'']" >{{item.showDate}}</view>
                             <view>
                                 <text v-if="item.money>0">¥{{item.money}}</text>
                             </view>
@@ -33,15 +33,19 @@ import util from '../../../utils/util'
 export default {
     data(){
         return {
-            recordInfo: {},
-            calendarData: [],
-            curDay: ''
+            // calendarData: [],
+            curDay: '',
+            serverRecord: [],
         }
     },
     computed: {
-        isSameDay(){
+        isSameDay(){ // 判断选中
             let { curDay } = this;
-            return (date='')=>util.isSameDay(new Date(curDay.replace(/\-/,'/')).getTime(),new Date(date.replace(/\-/,'/')).getTime())
+            return (date='')=>util.isSameDay(new Date(curDay.replace(/\-/g,'/')).getTime(),new Date(date.replace(/\-/g,'/')).getTime());
+        },
+        calendarData(){
+            let { serverRecord } = this;
+            return this.getMonthArr(serverRecord) || [];
         }
     },
     onLoad(options){
@@ -50,18 +54,15 @@ export default {
         // this.getDateArr({});
     },
     methods: {
-        timeChange(time){
+        timeChange(e){
+            if(e.isUnStart)return;
             util.previousPageFunction({
                 fnName: 'timeChange',
-                query: {
-                    detail: {
-                        value: time
-                    }
-                }
+                query: e.defineDate
             });
             util.routeTo();
         },
-        getMonthArr(serverArr){
+        getMonthArr(serverArr = []){
             const TOTAL_MONTH = 6;   // 需要加载月份数量
             let dateObj = new Date();
             let _curYear = dateObj.getFullYear();
@@ -80,26 +81,21 @@ export default {
             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 _toDay = new Date();
             let _dateArr = new Array(_dateAmount).fill(1).map((e,i)=>{
+                let _date = `${year}/${util.formatNumber(month)}/${util.formatNumber(i+1)}`
                 let _obj = {
-                    defineDate: `${year}-${util.formatNumber(month)}-${util.formatNumber(i+1)}`,
+                    defineDate: _date.replace(/\//g, '-'),
                     showDate: util.formatNumber(i+1),
-                    money: 0
+                    money: 0,
+                    isUnStart: _toDay.getTime() < new Date(_date).getTime()
                 }
 
                 try{  // 后台金额赋值显示
@@ -116,6 +112,7 @@ export default {
 
             return _dateArr
         },
+        // 获取后端数据记录
         getRecord(){
             util.showLoad();
             servers.get({
@@ -124,8 +121,8 @@ export default {
                 failMsg: '加载失败！',
             })
             .then(e=>{
-                this.recordInfo = e;
-                this.calendarData = this.getMonthArr(e || []);
+                this.serverRecord = e;
+                // this.calendarData = this.getMonthArr(e || []);
                 this.$nextTick(util.hideLoad);
             })
             .catch(util.hideLoad);
@@ -214,6 +211,9 @@ export default {
                                 color: #9c9c9f;
                             }
                         }
+                        .unstart-active{
+                            opacity: .14;
+                        }
                     }
                     .active{
                         background-color: #f2f2f7;
diff --git a/src/pages/time_select/month/month.vue b/src/pages/time_select/month/month.vue
index 6aa7859..24c9e9c 100644
--- a/src/pages/time_select/month/month.vue
+++ b/src/pages/time_select/month/month.vue
@@ -2,15 +2,17 @@
     <view class="time-month">
         <view class="tm-tip">仅保留最近3年日报数据</view>
         <view class="tm-data-list">
-            <view class="tdl-item" v-for="k in 3" :key="k">
+            <view class="tdl-item" v-for="(e,i) in monthData" :key="i">
                 <view class="ti-title">
-                    <text>2019年</text>
+                    <text>{{e.year}}年</text>
                 </view>
                 <view class="ti-list">
-                    <view class="tl-item" v-for="e in 10" :key="e">
-                        <view :class="[e==2?'active':'']">
-                            <view>9月</view>
-                            <view>¥0.00</view>
+                    <view class="tl-item" v-for="(item, k) in e.monthArr" :key="k" @click="monthSelect(item)">
+                        <view :class="[isSelected(item.date || '')?'active':'']">
+                            <view :class="[isUnStart(item.date || '')?'un-active':'']">{{item.showMonth}}</view>
+                            <view>
+                                <text v-if="!isUnStart(item.date || '')">¥{{item.money || '0.00'}}</text>
+                            </view>
                         </view>
                     </view>
                 </view>
@@ -20,8 +22,112 @@
 </template>
 
 <script>
+import { API } from '../../../js/api';
+import { servers } from '../../../js/server';
+import util from '../../../utils/util';
 export default {
+    computed: {
+        // 当前选中月份
+        isSelected(){
+            let { curMonth } = this;
+            let curDate = new Date(`${curMonth.year}-${curMonth.month}-01`);
+            return (date = '') => {
+                let _date = new Date(date.replace(/\-/g, '/'));
+                return (curDate.getFullYear() == _date.getFullYear()&&
+                        curDate.getMonth() == _date.getMonth())
+            }
+        },
+        // 未开始月份
+        isUnStart(){
+            let today = new Date().getTime();
+            return (date='') => today < new Date(date.replace(/\-/g,'/')).getTime();
+        },
+        // 月份数据列表
+        monthData(){
+            let { serverRecord } = this;
+            return this.getCloseMonthArr(serverRecord || []);
+        }
+    },
+    data(){
+        return {
+            curMonth: {
+                year: '',
+                month: '',
+            },
+            serverRecord: [], // 服务器记录列表
+        }
+    },
+    onLoad(options){
+        let _date = options.date.split('-');
+        let _obj = {
+            year: _date[0],
+            month: _date[1],
+        }
+        this.curMonth = _obj;
+        this.getServerRecord();
+    },
+    methods: {
+        // 计算月份列表
+        getCloseMonthArr(serverList = []){
+            let _curYear = new Date().getFullYear();
+            let _closeYears = new Array(3).fill(1).map((e,i)=>_curYear-i);
+            let _monthData = _closeYears.map((e,i)=>{
+                return {
+                    year: e,
+                    monthArr: new Array(12).fill(1).map((item, k)=>{
+
+                        let _obj = {
+                            date: `${e}-${util.formatNumber(k+1)}-01`,  // 后端接口统一接口 
+                            curMonth: `${e}-${util.formatNumber(k+1)}`,
+                            showMonth: `${util.formatNumber(k+1)}月`,
+                            money: 0,
+                        }
+                        try{
+                            serverList.forEach((res,idx)=>{
+                                if(
+                                    new Date(_obj.date.replace(/\-/g,'/')).getTime() == 
+                                    new Date((`${res.date}-01`).replace(/\-/g,'/')).getTime()
+                                ){  
+                                    console.log(_obj.date, res.date, res.amount)
+                                    _obj.money = res.amount
+                                    
+                                }
+                                
+                            })
+                        }catch(err){
+                            console.log('err',err);
+                        }
 
+                        return _obj;
+                    })
+                }
+            }) || [];
+            return _monthData.reverse();
+        },
+        monthSelect(e){
+            if(this.isUnStart(e.date))return;
+            util.previousPageFunction({
+                fnName: 'timeChange',
+                query: e.curMonth
+            });
+            util.routeTo();
+        },
+        // 获取后台数据记录
+        getServerRecord(){
+            util.showLoad();
+            servers.get({
+                url: API.turnoverMonth,
+                data: {},
+                failMsg: '加载记录失败！',
+            })
+            .then(e=>{
+                // this.monthData = this.getCloseMonthArr(e);
+                this.serverRecord = e || [];
+                this.$nextTick(util.hideLoad)
+            })
+            .catch(util.hideLoad)
+        }
+    }
 }
 </script>
 
@@ -91,11 +197,15 @@ export default {
                                 color: #1a1a1a;
                             }
                             &+view{
-                                font-size: 20upx;
                                 line-height: 28upx;
+                                height: 28upx;
+                                font-size: 20upx;
                                 color: #9c9c9f;
                             }
                         }
+                        .un-active{
+                            opacity: .14;
+                        }
                     }
                     .active{
                         background-color: #f2f2f7;
diff --git a/src/pages/time_select/year/year.vue b/src/pages/time_select/year/year.vue
index 4eb0e0d..2b2984c 100644
--- a/src/pages/time_select/year/year.vue
+++ b/src/pages/time_select/year/year.vue
@@ -2,18 +2,70 @@
     <view class="time-year">
         <view class="ty-tip">仅保留最近10年日报数据</view>
         <view class="ty-list">
-            <view class="tl-item" v-for="e in 10" :key="e">
-                <view :class="[e == 2? 'active': '']">
-                    <view>2018年</view>
-                    <view>¥1000000000000000000.00</view>
+            <view class="tl-item" v-for="e in yearArr" :key="e" @click="selectYear(e)">
+                <view :class="[e.year == curYear? 'active': '']">
+                    <view>{{e.year || '-'}}年</view>
+                    <view>¥{{e.money || '0.00'}}</view>
                 </view>
             </view>
         </view>
     </view>
 </template>
 <script>
+import { API } from '../../../js/api';
+import { servers } from '../../../js/server';
+import util from '../../../utils/util';
 export default {
-    
+    computed: {
+        yearArr(){
+            let { serverRecord } = this;
+            return this.getYearArr(serverRecord || []) || [];
+        }
+    },
+    data(){
+        return {
+            serverRecord: [],  // 后台
+            curYear: '' // 当前年份
+        }
+    },
+    onLoad(options){
+        this.curYear = options.date;
+        this.getServerRecord();
+    },
+    methods: {
+        selectYear(e){
+            util.previousPageFunction({
+                fnName: 'timeChange',
+                query: e.year
+            });
+            util.routeTo();
+        },
+        // 计算年份列表
+        getYearArr(recordList = []){
+            let _curYear = new Date().getFullYear();
+            return new Array(10).fill(1).map((e,i)=>{
+                let _obj = {
+                    year: _curYear-i,
+                    money: 0
+                }
+                recordList.forEach(item=>{
+                    if(item.date == _obj.year)_obj.money = item.amount;
+                })
+                return _obj
+            });
+        },
+        // 获取后端数据记录
+        getServerRecord(){
+            servers.get({
+                url: API.turnoverYear,
+                data: {},
+                failMsg: '加载记录失败！'
+            })
+            .then(res=>{
+                this.serverRecord = res || [];
+            })
+        }
+    }
 }
 </script>
 <style lang="scss">
diff --git a/src/pages/turnover/turnover.vue b/src/pages/turnover/turnover.vue
index 5bd6bf7..0d2cbd1 100644
--- a/src/pages/turnover/turnover.vue
+++ b/src/pages/turnover/turnover.vue
@@ -1,15 +1,19 @@
 <template>
     <view class="turnover-container">
-        <view class="tc-tab">
+        <view class="tc-tab" v-if="storeList.length > 1">
             <view :class="[tabID == 0?'active':'']" @click="tabChange(0)">品牌</view>
             <view :class="[tabID == 1?'active':'']" @click="tabChange(1)">门店</view>
         </view>
         <view class="tc-total-section">
 
-            <view class="tts-address" v-if="tabID == 0">
+            <view class="tts-address" v-if="tabID == 0&&storeList.length > 1">
                 <view>{{pageInfo.name || '-'}}</view>
                 <!-- <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> -->
             </view>
+            <view class="tts-address" v-else-if="storeList.length ==1">
+                <view>{{curSelectStore.name || '-'}}</view>
+                <!-- <image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> -->
+            </view>
             <picker v-else-if="tabID == 1" :range="storeList" range-key="name" @change="storeChange">
                 <view class="tts-address">
                     <view>{{curSelectStore.name || '-'}}</view>
@@ -31,23 +35,16 @@
                 <view :class="[timeTabID == 3?'active':'']" @click="timeTabChange(3)">年报</view>
             </view>
             <view class="tis-data">
-                <view class="td-date" v-if="timeTabID == 0" @click="toTimeSelect(timeTabID)">
+                <view class="td-date" v-if="timeTabID == 0 || timeTabID == 2 || timeTabID == 3" @click="toTimeSelect(timeTabID)">
                     <text>{{dataTime}}</text>
                     <view></view>
                     <image mode="aspectFit" src="/static/images/icon/calendar.png"></image>
                 </view>
-                <view class="td-date" v-else-if="timeTabID == 1">
+                <view class="td-date" v-else>
                     <text>{{beforeSevenDay}}</text>
                     <!-- <view></view> -->
                     <!-- <image mode="aspectFit" src="/static/images/icon/calendar.png"></image> -->
                 </view>
-                <picker v-else :mode="timePickerMode" :range="timePickerRange" @change="timeChange">
-                    <view class="td-date">
-                        <text>{{dataTime}}</text>
-                        <view></view>
-                        <image mode="aspectFit" src="/static/images/icon/calendar.png"></image>
-                    </view>
-                </picker>
                 
                 <view class="td-tip">实际收入</view>
                 <view class="td-price"><text>¥</text>{{pageInfo.calc.total || 0}}</view>
@@ -86,29 +83,15 @@ export default {
         ...mapState([ 'brandInfo' ]),
         dataTime(){
             let { curTime, timeTabID } = this;
-            if(timeTabID == 0)return util.formatDate({ date: curTime.date, partition: 'zh' });
+            if(timeTabID == 0)return util.formatDate({ date: curTime.date || '', partition: 'zh' });
             if(timeTabID == 2)return util.formatDate({ date: `${curTime.month}-01`, partition: 'zh' }).substr(0,8);
             if(timeTabID == 3)return `${curTime.year}年`;
         },
-        // picker 类型
-        timePickerMode(){
-            let { timeTabID } = this;
-            if(timeTabID == 0)return 'date'
-            if(timeTabID == 2)return 'multiSelector'
-            if(timeTabID == 3)return 'selector'
-        },
-        // picker 列表
-        timePickerRange(){
-            let { timeTabID } = this;
-            if(timeTabID == 0)return [];
-            if(timeTabID == 2)return this.getMonthRange();
-            if(timeTabID == 3)return new Array(10).fill(1).map((e,i)=>new Date().getFullYear()-i);
-        },
         // 最近7天
         beforeSevenDay(){
             let _date = new Date();
             let _beforeSeven = _date.getTime() - (7*24*60*60*1000);
-            return `${util.formatDate({ date: _beforeSeven, partition: 'zh' }).substr(5)}-${util.formatDate({ date: _date, partition: 'zh' }).substr(5)}`
+            return `${util.formatDate({date: _beforeSeven, partition: 'zh'}).substr(5)}-${util.formatDate({date: _date, partition: 'zh'}).substr(5)}`
         }
     },
     data(){
@@ -145,6 +128,8 @@ export default {
         toTimeSelect(type){
             let { curTime } = this;
             if(type == 0)util.routeTo(`/pages/time_select/date/date?date=${curTime.date || ''}`,'nT');
+            if(type == 2)util.routeTo(`/pages/time_select/month/month?date=${curTime.month || ''}`,'nT');
+            if(type == 3)util.routeTo(`/pages/time_select/year/year?date=${curTime.year || ''}`,'nT');
         },
         refreshPageInfo(){
             let { tabID, timeTabID, curSelectStore, curTime } = this;
@@ -168,24 +153,15 @@ export default {
             this.curSelectStore = storeList[value];
             this.refreshPageInfo();
         },
-        timeChange(e){
-            let { value } = e.detail;
+        timeChange(date){
             let { timeTabID, timePickerRange } = this;
 
-            if(timeTabID == 0) this.curTime.date = value;
-            if(timeTabID == 2) this.curTime.month = `${timePickerRange[0][value[0]]}-${timePickerRange[1][value[1]]}`;
-            if(timeTabID == 3) this.curTime.year = timePickerRange[value];
+            if(timeTabID == 0) this.curTime.date = date;
+            if(timeTabID == 2) this.curTime.month = date;
+            if(timeTabID == 3) this.curTime.year = date;
 
             this.refreshPageInfo();
         },
-         // 获取月份 picker 列表
-        getMonthRange(){
-            let _curDate = new Date();
-            return [
-                new Array(5).fill(1).map((e,i)=>_curDate.getFullYear()-i),
-                new Array(12).fill(1).map((e,i)=>util.formatNumber(i+1))
-            ]
-        },
         // 获取初次时间
         getTime(){
             let _date = new Date();