gx

queenwuli

2021-01-28 b83ba3cc4687f21d744e9866e10e30e91229e8a4

 hive-app/pages/manager/companyReports.vue

@@ -14,45 +14,86 @@
            underLineWidth: 60,
         }"
      />
      <view v-if="tabIndex==0 || tabIndex==1">
         <view class="list-item">
      <view v-if="tabIndex==1 || tabIndex==2">
         <view class="list-item" v-for="item in list">
            <view class="list-header">
               <text>2020年12月24日</text>
               <text>{{item.dataTime}}</text>
            </view>
            <view class="list-content">
               <view class="list-row">
                  <text>营业收入</text>
                  <text>￥12,122</text>
                  <text>￥{{item.totalPay | formatNum}}</text>
               </view>
               <view class="list-row">
                  <text>现金收入</text>
                  <text>￥12,122</text>
                  <text>现金收款</text>
                  <text>￥{{item.cashPay | formatNum}}</text>
               </view>
               <view class="list-row">
                  <text>余额划扣</text>
                  <text>￥12,122</text>
                  <text>储值卡收款</text>
                  <text>￥{{item.cardPay | formatNum}}</text>
               </view><view class="list-row">
                  <text>欠款</text>
                  <text>￥{{item.arrearsPay | formatNum}}</text>
               </view><view class="list-row">
                  <text>现金退款</text>
                  <text>￥{{item.refundCashPay | formatNum}}</text>
               </view><view class="list-row">
                  <text>卡项退款</text>
                  <text>￥{{item.refundCardPay | formatNum}}</text>
               </view><view class="list-row">
                  <text>产品业绩</text>
                  <text>￥{{item.productAchieve | formatNum}}</text>
               </view><view class="list-row">
                  <text>卡项业绩</text>
                  <text>￥{{item.cardAchieve | formatNum}}</text>
               </view><view class="list-row">
                  <text>还款</text>
                  <text>￥{{item.refund | formatNum}}</text>
               </view><view class="list-row">
                  <text>客单数</text>
                  <text>{{item.perCustomCnt}}</text>
               </view><view class="list-row">
                  <text>客品数</text>
                  <text>{{item.customGoodsCnt}}</text>
               </view><view class="list-row">
                  <text>客单价</text>
                  <text>￥{{item.perCustomPrice | formatNum}}</text>
               </view><view class="list-row">
                  <text>成本</text>
                  <text>￥{{item.cost | formatNum}}</text>
               </view>
               <view class="list-row">
                  <text>毛利</text>
                  <text>￥{{item.grossProfit | formatNum}}</text>
               </view>
               <view class="list-row">
                  <text>毛利率</text>
                  <text>{{item.grossProfitRate}}</text>
               </view>
               <view class="list-row">
                  <text>本金消耗</text>
                  <text>￥12,122</text>
                  <text>￥{{item.consumePay | formatNum}}</text>
               </view>
               <view class="list-row">
                  <text>赠送消耗</text>
                  <text>￥12,122</text>
                  <text>￥{{item.freeConsumePay | formatNum}}</text>
               </view>
               <view class="list-row">
                  <text>现金退款</text>
                  <text>￥12,122</text>
                  <text>人头数</text>
                  <text>{{item.peopleCnt}}个</text>
               </view>
               <view class="list-row">
                  <text>卡项退款</text>
                  <text>￥12,122</text>
                  <text>项目消耗数</text>
                  <text>{{item.projConsumeCnt}}个</text>
               </view>
               <view class="list-row">
                  <text>欠款</text>
                  <text>￥12,122</text>
                  <text>服务时长</text>
                  <text>{{item.timeLength}}分钟</text>
               </view>
            </view>
         </view>
         <view v-if="list.length">
            <uni-load-more :status="loadStatus" color="#a5abaf"></uni-load-more>
         </view>
      </view>
      <view v-else>
@@ -61,59 +102,109 @@
               <text class="font-bold">专项数据</text>
            </view>
            <view class="list-content-bordered">
               <view class="list-row-bordered" @click="toAnalyse">
               <view class="list-row-bordered" @click="toAnalyse('营业收入', 1)">
                  <text>营业收入</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse">
                  <text>现金收入</text>
               <view class="list-row-bordered" @click="toAnalyse('现金收款', 2)">
                  <text>现金收款</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse">
                  <text>余额划扣</text>
               <view class="list-row-bordered" @click="toAnalyse('储值卡收款', 3)">
                  <text>储值卡收款</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse">
                  <text>本金消耗</text>
               <view class="list-row-bordered" @click="toAnalyse('欠款', 4)">
                  <text>欠款</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse">
                  <text>赠送消耗</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse">
               <view class="list-row-bordered" @click="toAnalyse('现金退款', 5)">
                  <text>现金退款</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse">
               <view class="list-row-bordered" @click="toAnalyse('卡项退款', 6)">
                  <text>卡项退款</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse">
                  <text>欠款</text>
               <view class="list-row-bordered" @click="toAnalyse('产品业绩', 7)">
                  <text>产品业绩</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('卡项业绩', 8)">
                  <text>卡项业绩</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('还款', 9)">
                  <text>还款</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('客单数', 10)">
                  <text>客单数</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('客品数', 11)">
                  <text>客品数</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('客单价', 12)">
                  <text>客单价</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('成本', 13)">
                  <text>成本</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('毛利', 14)">
                  <text>毛利</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('毛利率', 15)">
                  <text>毛利率</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('本金消耗', 16)">
                  <text>本金消耗</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('赠送消耗', 17)">
                  <text>赠送消耗</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('人头数', 18)">
                  <text>人头数</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('项目消耗数', 19)">
                  <text>项目消耗数</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('服务时长', 20)">
                  <text>服务时长</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
            </view>
         </view>
      </view>
      <view class="drop-down" v-show="isShowFilter">
         <view class="drop-down-row" v-for="item in timeList">
            <text @click="timeChange(item)">{{item.label}}</text>
      <view class="drop-down" v-if="isShowFilter">
         <view class="drop-down-row" v-for="item in storeList">
            <text :class="item.id == shopId?'blue':''" @click="storeChange(item)">{{item.shopShortName}}</text>
         </view>
      </view>
   </view>
</template>

<script>
   import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
   import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
   export default {
      components: {
          HTabs
          HTabs,
         uniLoadMore
      },
      data() {
        return {
         type: 1, //1 公司经营报表 2 门店经营报表
         tabIndex: 0,
         tabIndex: 1,
          tabs:[
            {
               state: 1,
@@ -129,16 +220,11 @@
            }
         ],
         isShowFilter:false,
         timeList: [{
            label: '广州天河店',
            value: 3
         },{
            label: '长沙五一店',
            value: 2
         },{
            label: '深圳南山店',
            value: 1
         }]
         storeList: [],
         shopId: '',//门店id
         list: [],
         loadStatus: 'more',
         pageNum: 1
        }  
      },
      onLoad(options) {
@@ -152,12 +238,24 @@
                width: 0,  
            });
            // #endif
            this.loadList();
         }else{
            uni.setNavigationBarTitle({
               title: '门店经营报表'
            })
            });
            this.loadShopList();;
         }
			
      },
      onPullDownRefresh(){
         this.reloadData();
         let timer = setTimeout(function () {
            uni.stopPullDownRefresh();
            clearTimeout(timer);
            timer = null;
         }, 800);
      },
      onReachBottom(){
         this.loadList()
      },
      onNavigationBarButtonTap(e){
         if(e.index==0){
@@ -173,15 +271,76 @@
         this.hideFilter()
      },
      methods:{
         reloadData(){
            this.list = [];
            this.pageNum = 1;
            this.loadStatus = 'more';
            this.loadList();
         },
         tabChange(index){
            this.tabIndex = index;
            let val = index + 1;
            if(val == this.tabIndex){
               return
            }
            this.tabIndex = val;
            if(val != 3){
               this.reloadData()
            }
         },
         hideFilter(){
            this.isShowFilter = false
         },
         toAnalyse(){
         toAnalyse(title, type){
            uni.navigateTo({
               url: './analyse'
               url: './analyse/index?shopId='+this.shopId+'&title='+title+'&type='+type
            })
         },
         // 切换门店
         storeChange(item){
            if(item.id == this.shopId){
               return;
            }
            this.shopId = item.id;
            uni.setNavigationBarTitle({
               title: item.shopShortName + '经营报表'
            });
            this.reloadData();
         },
         loadShopList(){
            this.$httpUtils.request('/api/shop/findAllShopList').then((res) => {
               if(res.status == 200){
                  let result = res.rows;
                  this.storeList = result;
                  if(result.length){
                     this.shopId = result[0].id;
                     uni.setNavigationBarTitle({
                        title: result[0].shopShortName + '经营报表'
                     });
                  }
                  this.loadList();
               }
            })
         },
         loadList(){
            if(this.loadStatus!=='more'){
               return;
            }
            this.$httpUtils.request('/api/statistics/findShopBusinessesData', {
               "pageNum": this.pageNum,
               "pageSize": 10,
               "shopId": this.shopId,
               "type": this.tabIndex
            }, 'POST').then((res) => {
               if(res.status == 200){
                  let result = res.rows;
                  if(result.length < 10){
                     this.loadStatus = 'noMore';
                  } else {
                     this.pageNum ++ ;
                     this.loadStatus = 'more';
                  }
                  this.list = this.list.concat(result);
               }
            })
         }
      }