queenwuli
2021-01-06 5579e668ef0d3d923fb76d07b4c93d9c01f29d4a
hive-app/pages/manager/companyReports.vue
@@ -1,59 +1,104 @@
<template>
   <!-- 公司经营报表 -->
   <view>
      <view>
         <h-tabs
            class="tab"
            :tabData="tabs"
            :config="{
               color: '#abb1cc',
               activeColor: '#518EFF',
               underLineColor: '#518EFF',
               underLineHeight: 6,
               fontSize: '28',
               underLineWidth: 60,
            }"
         />
      </view>
      <view>
         <view class="content-box">
            <view class="content-box-header">
               <text class="font-16">2020年12月24日</text>
   <view class="container" @click="hideFilter">
      <h-tabs
         class="tab"
         :tabData="tabs"
         @tabClick="tabChange"
         :config="{
            color: '#abb1cc',
            activeColor: '#518EFF',
            underLineColor: '#518EFF',
            underLineHeight: 6,
            fontSize: '28',
            underLineWidth: 60,
         }"
      />
      <view v-if="tabIndex==1 || tabIndex==2">
         <view class="list-item" v-for="item in list">
            <view class="list-header">
               <text>{{item.dataTime}}</text>
            </view>
            <view class="font-14">
               <view class="content-box-row flex justify-between">
            <view class="list-content">
               <view class="list-row">
                  <text>营业收入</text>
                  <text>¥12,122</text>
                  <text>¥{{item.totalPay | formatNum}}</text>
               </view>
               <view class="content-box-row flex justify-between">
               <view class="list-row">
                  <text>现金收入</text>
                  <text>¥12,122</text>
                  <text>¥{{item.cashPay | formatNum}}</text>
               </view>
               <view class="content-box-row flex justify-between">
                  <text>盈划扣</text>
                  <text>¥12,122</text>
               <view class="list-row">
                  <text>余额划扣</text>
                  <text>¥{{item.cardPay | formatNum}}</text>
               </view>
               <view class="content-box-row flex justify-between">
               <view class="list-row">
                  <text>本金消耗</text>
                  <text>¥12,122</text>
                  <text>¥{{item.consumePay | formatNum}}</text>
               </view>
               <view class="content-box-row flex justify-between">
               <view class="list-row">
                  <text>赠送消耗</text>
                  <text>¥12,122</text>
                  <text>¥{{item.freeConsumePay | formatNum}}</text>
               </view>
               <view class="content-box-row flex justify-between">
               <view class="list-row">
                  <text>现金退款</text>
                  <text>¥12,122</text>
                  <text>¥{{item.refundCashPay | formatNum}}</text>
               </view>
               <view class="content-box-row flex justify-between">
                  <text>卡项回归</text>
                  <text>¥12,122</text>
               <view class="list-row">
                  <text>卡项退款</text>
                  <text>¥{{item.refundCardPay | formatNum}}</text>
               </view>
               <view class="content-box-row flex justify-between">
               <view class="list-row">
                  <text>欠款</text>
                  <text>¥12,122</text>
                  <text>¥{{item.arrearsPay | formatNum}}</text>
               </view>
            </view>
         </view>
      </view>
      <view v-else>
         <view class="list-item">
            <view class="list-header">
               <text class="font-bold">专项数据</text>
            </view>
            <view class="list-content-bordered">
               <view class="list-row-bordered" @click="toAnalyse('营业收入', 1)">
                  <text>营业收入</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('现金收入', 2)">
                  <text>现金收入</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('余额划扣', 3)">
                  <text>余额划扣</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('本金消耗', 4)">
                  <text>本金消耗</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('赠送消耗', 5)">
                  <text>赠送消耗</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <view class="list-row-bordered" @click="toAnalyse('现金退款', 6)">
                  <text>现金退款</text>
                  <text class="iconfont iconarrow-backimg"></text>
               </view>
               <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>
         </view>
      </view>
      <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>
@@ -67,6 +112,8 @@
      },
      data() {
        return {
         type: 1, //1 公司经营报表 2 门店经营报表
         tabIndex: 1,
          tabs:[
            {
               state: 1,
@@ -81,7 +128,101 @@
               name: '专项'
            }
         ],
         isShowFilter:false,
         storeList: [],
         shopId: '',//门店id
         list: []
        }  
      },
      onLoad(options) {
         if(options.type){
            this.type = options.type;
         }
         if(this.type==1){
            // #ifdef APP-PLUS
            let webView = this.$mp.page.$getAppWebview();
            webView.setTitleNViewButtonStyle(1, {
                width: 0,
            });
            // #endif
            this.loadList();
         }else{
            uni.setNavigationBarTitle({
               title: '门店经营报表'
            });
            this.loadShopList();;
         }
      },
      onNavigationBarButtonTap(e){
         if(e.index==0){
            uni.navigateTo({
               url:"./hint"
            })
         }
         if(e.width && e.index==1){
            this.isShowFilter=!this.isShowFilter
         }
      },
      onHide() {
         this.hideFilter()
      },
      methods:{
         tabChange(index){
            let val = index + 1;
            if(val == this.tabIndex){
               return
            }
            this.tabIndex = val;
            if(val != 3){
               this.loadList()
            }
         },
         hideFilter(){
            this.isShowFilter = false
         },
         toAnalyse(title, type){
            uni.navigateTo({
               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.loadList();
         },
         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(){
            this.$httpUtils.request('/api/statistics/findShopBusinessesData', {
               "pageNum": 1,
               "pageSize": 100,
               "shopId": this.shopId,
               "type": this.tabIndex
            }, 'POST').then((res) => {
               if(res.status == 200){
                  this.list = res.rows;
               }
            })
         }
      }
   }
</script>
@@ -89,6 +230,10 @@
<style>
   page{
      background: #F6F6F8;
      height: 100%;
   }
   .container{
      min-height: 100%;
   }
   .tab{
      background: #FFFFFF;
@@ -97,18 +242,66 @@
      border-bottom-right-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
   }
   .content-box{
   .list-item{
      margin: 10px 10px 0;
      padding: 0 10px;
      background: #FFFFFF;
      border: 1px solid #EDEAF4;
      border-radius: 4px;
      margin: 10px 10px 0;
      padding: 10px;
   }
   .content-box-header{
   .list-header{
      border-bottom: 1px solid #EDEAF4;
      padding: 0 5px 10px;
      padding: 12px 5px;
      font-size: 14px;
   }
   .content-box-row{
      padding: 10px 5px 0;
   .list-content{
      padding: 8px 5px;
      font-size: 13px;
      color: #333;
   }
   .list-row{
      display: flex;
      justify-content: space-between;
      line-height: 30px;
   }
   .list-row text:nth-last-of-type(1){
      color: #666
   }
   .list-content-bordered{
      padding: 0 5px;
      font-size: 13px;
   }
   .list-row-bordered{
      display: flex;
      justify-content: space-between;
      line-height: 40px;
      border-bottom: 1px solid #EDEAF4;
   }
   .list-row-bordered:nth-last-of-type(1){
      border-bottom: 0;
   }
   .list-row-bordered text:nth-last-of-type(1){
      color: #a5abaf
   }
   .drop-down{
      min-width: 56px;
      background: #FFFFFF;
      border: 1px solid #EDEAF4;
      border-radius: 4px;
      padding: 0 10px;
      position: fixed;
      right: 35px;
      top: 0;
      z-index: 99;
      color: #a5abaf;
      font-size: 12px;
   }
   .drop-down-row{
      border-bottom: 1px solid #EDEAF4;
      padding: 5px 0;
      text-align: center;
   }
   .drop-down-row:nth-last-child(1){
      border: 0;
   }
</style>