sifa-mp/userPages/components/BalanceFilter.vue

<template>
  <u-popup :show="showFilter" close-on-click-overlay @close="showFilter = false" round="10"
           :safe-area-inset-bottom="false">
    <view class="p-50">
      <view class="flex justify-between items-center">
        <text class="font-bold text-30">选择筛选项</text>
        <u-icon name="close" @click="showFilter = false"/>
      </view>
      <view class="mt-30 text-25 text-gray">收支类型</view>
      <view class="mt-30 flex justify-start items-center flex-wrap text-25">
        <view class="w-33p">
          <view @click="balanceFilterType = null"
                :class="[balanceFilterType === null ? 'filter-item-selected' : 'filter-item']">全部
          </view>
        </view>
        <view class="w-33p">
          <view @click="balanceFilterType = '-'"
                :class="[balanceFilterType === '-' ? 'filter-item-selected' : 'filter-item']">支出
          </view>
        </view>
        <view class="w-33p">
          <view @click="balanceFilterType = '+'"
                :class="[balanceFilterType === '+' ? 'filter-item-selected' : 'filter-item']">收入
          </view>
        </view>
      </view>
      <view class="mt-30 text-25 text-gray">交易类型</view>
      <view class="mt-30 flex justify-start items-center flex-wrap ">
        <view class="w-33p mb-25 text-25" v-for="(item, index) in balanceTypeList" :key="index">
          <view @click="balanceFilterBalanceType = item.value"
                :class="[balanceFilterBalanceType === item.value ? 'filter-item-selected' : 'filter-item']">
            {{ item.label }}
          </view>
        </view>
      </view>
    </view>
    <view class="flex justify-center items-center p-30 shadow-top">
      <u-button shape="circle" :hairline="false" @click="confirm" type="primary">
        确定
      </u-button>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "BalanceFilter",
  data() {
    return {
      showFilter: false,
      balanceFilterType: null,
      balanceFilterBalanceType: null,
      balanceTypeList: [
        {
          label: '全部',
          value: null
        },
        {
          label: '新订单直推收入',
          value: 'new_order_direct_income'
        },
        {
          label: '新订单团队收入',
          value: 'new_order_group_income'
        },
        {
          label: '续订订单直推收入',
          value: 'renew_order_direct_income'
        },
        {
          label: '续订订单团队收入',
          value: 'renew_order_group_income'
        },
        {
          label: '直推维护费收入',
          value: 'direct_keep_income'
        },
        {
          label: '团队维护费收入',
          value: 'group_keep_income'
        },
        {
          label: '配送站收入',
          value: 'station_income'
        },
        {
          label: '配送员收入',
          value: 'courier_income'
        },
        {
          label: '余额提现',
          value: 'cash_balance'
        },
        {
          label: '配送费提现',
          value: 'cash_express_balance'
        },
        {
          label: '配送费提现手续费',
          value: 'cash_balance_fee'
        },
        {
          label: '分红收入',
          value: 'cash_balance'
        },
        {
          label: '服务商收入',
          value: 'station_service_income'
        },
        {
          label: '安装奶箱收入',
          value: 'install_box'
        },
        {
          label: '余额支付',
          value: 'pay_with_balance'
        },
        {
          label: '门店优惠券核销收入',
          value: 'store_coupon_income'
        },

        // {
        //     label: '后台充值',
        //     value: 'charge'
        // },
      ],
    }
  },
  methods: {
    open(balanceFilterType, balanceFilterBalanceType) {
      this.balanceFilterType = balanceFilterType
      this.balanceFilterBalanceType = balanceFilterBalanceType
      this.showFilter = true
    },
    confirm() {
      this.$emit('done', {
        balanceFilterType: this.balanceFilterType,
        balanceFilterBalanceType: this.balanceFilterBalanceType,
      })
      this.showFilter = false
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/static/style/common';

.filter-item-selected {
  border-radius: 999rpx;
  border: 1px solid $u-primary;
  background-color: $blue-light-50;
  color: $u-primary;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
  width: 90%;
}

.filter-item {
  border-radius: 999rpx;
  border: 1px solid #F4F6F9;
  background-color: #F4F6F9;
  color: #AEB0B2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
  width: 90%;
}

</style>