ceres-uniapp-v2.0/pages_category_page1/distributionModule/totalAward.vue

<template>
  <view>
    <global-loading/>

    <view v-if="ifShow">
      <view class="totalAward-topBackImg flex-items flex-column">
        <view class="totalAward-content flex-column font-color-FFF">
          <view class="flex-column-plus flex-items mar-top-40">
            <label class="mar-top-20 fs60 amount">{{ ZSalesOrderData.total }}</label>
          </view>
          <view class="flex-row-plus flex-sp-around fs24 mar-top-10">
            <view class="awardBox">
              <view class="fs36 font-color-FFF">{{ ZSalesOrderData.directPrice }}</view>
              <view class="awardTit font-color-FFF">直接奖励(元）</view>
            </view>
            <view class="awardBox">
              <view class="fs36 font-color-FFF">{{ ZSalesOrderData.indirectPrice }}</view>
              <view class="awardTit font-color-FFF">间接奖励(元）</view>
            </view>
          </view>
        </view>
      </view>
      <view class="awardType-box flex-center">
        <view class="awardType-content">
          <u-tabs :list="awardTypeList" bar-width="60" :bold="false" active-color="#C5AA7B" inactive-color="#999999"
                  :is-scroll="false" :current="awardTypeFlag" @change="awardTypeActive"></u-tabs>
        </view>
      </view>
      <view v-if="awardTypeFlag == 0">
        <view v-if="ZStotallength>0">
          <view class="flex-center" v-for="(item, index) in ZSalesOrderDatalist" :key="index">
            <view class="directAward-box font-color-656 fs26" @click="arrowTypeChange1(index)">
              <view style="display: flex;" class="directAwardInfo">
                <view style="flex: 1;" class="flex-items flex-sp-between">
                  <label class="orderId-box font-color-999">{{$t('common.orderno')}}：{{ item.orderFormid }}</label>
                  <view class="mar-right-50 font-color-999">
                    佣金：<label class="font-color-C5AA7B">¥{{ item.commission }}</label>
                  </view>
                </view>
                <view>
                  <image v-if="item.ifOpen  == false" class="arrow-down"
                         src="https://ceres.zkthink.com/static/images/arrowDownIcon.png"></image>
                  <image v-if="item.ifOpen  == true" class="arrow-down"
                         src="https://ceres.zkthink.com/static/images/arrowUpIcon.png"></image>
                </view>
              </view>
              <view v-if="item.ifOpen  == true">
                <view class="flex-row-plus flex-items flex-sp-between mar-top-30">
                  <label class="orderId-box font-color-999">{{$t('common.productnum')}}：{{ item.products }}</label>
                  <label class="commission-box mar-left-70 font-color-999">{{$t('Synthesis')}}：¥{{ item.price }}</label>
                </view>
                <view class="flex-row-plus flex-items flex-sp-between mar-top-30">
                  <label class="orderId-box font-color-999">{{$t('common.buyer')}}：{{ item.customerName }}</label>
                  <label class="commission-box mar-left-70">{{$t('common.status')}}：
                    <text class="state" :class="{current: item.state==0}">{{ item.state == 1 ? $t('common.unsettled') : $t('common.settled') }}
                    </text>
                  </label>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="emptyCart-box flex-items-plus flex-column">
          <image class="emptyCart-img" src="https://ceres.zkthink.com/static/img/bgnull.png"></image>
          <label class="font-color-999 fs26 mar-top-30">{{$t('client.emptydata')}}</label>
        </view>
      </view>
      <view v-if="awardTypeFlag == 1">
        <view v-if="JStotallength>0">
          <view class="flex-center" v-for="(item,index) in JSalesOrderDatalist" :key="index">
            <view class="directAward-box font-color-656 fs26" @click="arrowTypeChange(index)">
              <view style="display: flex;" class="directAwardInfo">
                <view style="flex: 1;" class="flex-items flex-sp-between">
                  <label class="orderId-box font-color-999">{{$t('common.orderno')}}：{{ item.orderFormid }}</label>
                  <view class="mar-right-50 font-color-999">
                    佣金：<label class="font-color-C5AA7B">¥{{ item.commission }}</label>
                  </view>
                </view>
                <view>
                  <image v-if="item.ifOpen  == false" class="arrow-down"
                         src="https://ceres.zkthink.com/static/images/arrowDownIcon.png"></image>
                  <image v-if="item.ifOpen  == true" class="arrow-down"
                         src="https://ceres.zkthink.com/static/images/arrowUpIcon.png"></image>
                </view>
              </view>
              <view v-if="item.ifOpen  == true">
                <view class="flex-row-plus flex-items flex-sp-between mar-top-30">
                  <label class="orderId-box font-color-999">{{$t('common.productnum')}}：{{ item.products }}</label>
                  <label class="commission-box mar-left-70 font-color-999">{{$t('Synthesis')}}：¥{{ item.price }}</label>
                </view>
                <view class="flex-row-plus flex-items flex-sp-between mar-top-30">
                  <label class="orderId-box font-color-999">{{$t('common.buyer')}}：{{ item.customerName }}</label>
                  <label class="commission-box mar-left-70">{{$t('common.status')}}：
                    <text class="state" :class="{current: item.state==0}">{{ item.state == 0 ? $t('common.unsettled') : $t('common.settled') }}
                    </text>
                  </label>
                </view>
                <view class="flex-row-plus flex-items mar-top-30">
                  <label class="orderId-box font-color-999">{{$t('common.distributor')}}：{{ item.distributorName }}</label>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="emptyCart-box flex-items-plus flex-column">
          <image class="emptyCart-img" src="https://ceres.zkthink.com/static/img/bgnull.png"></image>
          <label class="font-color-999 fs26 mar-top-30">{{$t('client.emptydata')}}</label>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
  data() {
    return {
      awardTypeList: [{
        name: '直接奖励'
      }, {
        name: '间接奖励'
      }],
      awardTypeFlag: 0,
      item: {},
      SalesOrderQuery: {
        model: {
          tenantCode: '',
          type: ''
        },
        current: 0,
        size: 10
      },
      SalesOrderData: [],
      ZSalesOrderData: [],
      JSalesOrderData: [],
      shopId: 0,
      distributorId: 0,
      tenantCode: {},
      ZStotallength: 0,
      JStotallength: 0,
      page: 1,
      pageSize: 20,
      loadingType: 0,
      loadingType1: 0,
      ZSalesOrderDatalist: [],
      JSalesOrderDatalist: [],
      ifShow: false,
      ifEmpty: false
    }
  },
  onLoad: function (optins) {
    this.shopId = optins.shopId
    this.distributorId = optins.distributorId
    this.getZSalesOrderData()
    this.getJSalesOrderData()
  },
  onReachBottom() {
    if (this.awardTypeFlag == 0) {
      if (this.loadingType == 1) {
        uni.stopPullDownRefresh()
      } else {
        this.page = this.page + 1
        this.getZSalesOrderData()
      }
    } else {
      if (this.loadingType1 == 1) {
        uni.stopPullDownRefresh()
      } else {
        this.page = this.page + 1
        this.getJSalesOrderData()
      }
    }

  },
  methods: {
    getZSalesOrderData() {
      // uni.showLoading({
      //   mask: true,
      // 	title: '加载中...'
      // })
      NET.request(API.FindSalesOrderPage, {
        shopId: this.shopId,
        distributorId: this.distributorId,
        type: 1,
        page: this.page,
        pageSize: this.pageSize
      }, 'GET').then(res => {
        uni.hideLoading()
        if (res.data.page.list.length == 0) {
          this.loadingType = 1
          this.page = this.page
        }
        this.ZSalesOrderDatalist = this.ZSalesOrderDatalist.concat(res.data.page.list)
        this.ZSalesOrderData = res.data
        this.ZStotallength = this.ZSalesOrderData.page.total
        this.ifShow = true
      }).catch(res => {
        uni.hideLoading()
      })
    },
    getJSalesOrderData() {
      // uni.showLoading({
      //   mask: true,
      //   title: '加载中...'
      // })
      NET.request(API.FindSalesOrderPage, {
        shopId: this.shopId,
        distributorId: this.distributorId,
        type: 2,
        page: this.page,
        pageSize: this.pageSize
      }, 'GET').then(res => {
        uni.hideLoading()
        if (res.data.page.list.length == 0) {
          this.loadingType1 = 1
          uni.showToast({
            title: '已加载全部···',
            duration: 2000,
            icon: 'none'
          });
          this.page = this.page
        }
        this.JSalesOrderDatalist = this.JSalesOrderDatalist.concat(res.data.page.list)
        this.JSalesOrderData = res.data
        this.JStotallength = this.JSalesOrderData.page.total
      }).catch(res => {
        uni.hideLoading()
      })
    },

    awardTypeActive(index) {
      this.awardTypeFlag = index
      this.page = 1
    },
    arrowTypeChange1(arrowTypeId) {
      this.ZSalesOrderData.page.list[arrowTypeId].ifOpen = this.ZSalesOrderData.page.list[arrowTypeId].ifOpen == false ? true : false
    },
    arrowTypeChange(arrowTypeId) {
      this.JSalesOrderData.page.list[arrowTypeId].ifOpen = this.JSalesOrderData.page.list[arrowTypeId].ifOpen == false ? true : false
    }

  }
}
</script>

<style lang="scss">
page {
  background: #333333;
}

.emptyCart-box {
  margin-top: 70 upx;

  .emptyCart-img {
    width: 216 rpx;
    height: 156 rpx;
  }
}

.totalAward-topBackImg {
  width: 100%;
  height: 360 rpx;
  background: url(https://ceres.zkthink.com/static/images/unliquidatedBg.png) no-repeat;
  background-size: 100%;
  margin-top: 30 rpx;

  .totalAward-content {
    width: 90%;

    .awardBox {
      text-align: center;

      .awardTit {
        opacity: 0.7;
      }
    }

    .amount {
      color: #FFEBC4;
    }
  }
}

.awardType-box {
  border-bottom: 1 upx solid #666666;

  .awardType-content {
    height: 80 upx;
    width: 500 upx;
  }
}

.directAward-box {
  width: 94%;
  border-bottom: 1 upx solid #666666;
  padding: 30 upx;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  background: #FFFFFF;
  margin-top: 30 rpx;

  .orderId-box {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
  }

  .state {
    color: #16BB89;
  }

  .current {
    color: #C83732 !important;
  }

  .arrow-down {
    width: 24 upx;
    height: 24 upx;
  }

  .directAwardInfo {
  }
}

.totalAwardEmpty-box {
  margin-top: 65 upx;

  .totalAwardEmpty {
    width: 270 upx;
    height: 270 upx;
  }
}
</style>
<style scoped>
.awardType-box /deep/ .u-tabs {
  background: none !important;
}
</style>