LocalLivingServicesUniapp/pages/finance/index.vue

<template>
  <view class="container">
    <view class="top"></view>
    <view class="title">财务数据</view>

    <view class="balance-card">
      <!-- 账户余额 -->
      <view class="balance-info">
        <view @click="goPage">
          <view class="flex">
            <text class="balance-label">账户余额</text>
            <u-icon name="arrow-right" class="ml-1" color="#fff" size="24"></u-icon>
          </view>
          <text class="balance-amount">{{ formatAmount(financeData.availableAmount) }}</text>
        </view>
        <view>
          <button class="withdraw-btn" @click="goWithdrawal">提现</button>
        </view>
      </view>

      <!-- 金额统计 -->
      <view class="stats-row u-m-b-20">
        <view class="stat-item">
          <text class="stat-label">已结算金额 (元)</text>
          <text class="stat-value">{{ formatAmount(financeData.totalSettledAmount) }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">待结算金额 (元)</text>
          <text class="stat-value">{{ formatAmount(financeData.pendingSettledAmount) }}</text>
        </view>
      </view>
      <view class="stats-row">
        <view class="stat-item">
          <text class="stat-label">已提现金额 (元)</text>
          <text class="stat-value">{{ formatAmount(financeData.totalWithdrawnAmount) }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">提现中金额 (元)</text>
          <text class="stat-value">{{ formatAmount(financeData.frozenAmount) }}</text>
        </view>
      </view>
    </view>

    <!-- 业务类型 -->
    <view class="business-tabs">
      <view
        v-for="(tab, index) in businessTabs"
        :key="tab.name"
        :class="index == currentTab ? 'tab-item active' : 'tab-item'"
        @click="onTabChange(index)"
        >{{ tab.name }}</view
      >
    </view>

    <!-- 订单统计 -->
    <view class="amount-card">
      <!-- 日期选择 -->
      <view class="date-picker">
        <view @click="selectDate">
          <text>{{ startDate ? startDate : '开始时间' }}</text>
          <text class="date-separator">至</text>
          <text>{{ endDate ? endDate : '结束时间' }}</text>
          <u-icon v-if="!startDate || !endDate" class="ml-1" name="arrow-down-fill" size="18" color="#666666"></u-icon>
        </view>
        <uni-icons
          v-if="startDate"
          class="ml-1"
          type="clear"
          size="18"
          color="#909399"
          @click="resetDateRange"
        ></uni-icons>
      </view>
      <!-- 普通/团餐 -->
      <view v-if="currentTab == 0 || currentTab == 2">
        <view class="row u-m-b-12">
          <view class="item">
            <text class="label">{{ currentTab == 0 ? '订单金额 (元)' : '团餐订单金额 (元)' }}</text>
            <text class="value">{{ formatAmount(orderData.orderAmount) || '0.00' }}</text>
          </view>
          <view class="item">
            <text class="label">{{ currentTab == 0 ? '退款金额 (元)' : '团餐退款金额 (元)' }}</text>
            <text class="value">{{ formatAmount(orderData.refundAmount) || '0.00' }}</text>
          </view>
        </view>
        <view class="row u-m-b-12">
          <view class="item">
            <text class="label">{{ currentTab == 0 ? '支付订单量' : '团餐订单量' }}</text>
            <text class="value">{{ formatAmount(orderData.orderCount, 'quantity') || '0' }}</text>
          </view>
          <view class="item">
            <text class="label">退款订单量</text>
            <text class="value">{{ formatAmount(orderData.refundCount, 'quantity') || '0' }}</text>
          </view>
        </view>
        <view class="row" v-if="currentTab == 2">
          <view class="item">
            <text class="label">普通订单金额 (元)</text>
            <text class="value">{{ formatAmount(orderData.normalOrderAmount) || '0.00' }}</text>
          </view>
          <view class="item">
            <text class="label">企业订单金额 (元)</text>
            <text class="value">{{ formatAmount(orderData.enterpriseOrderAmount) || '0.00' }}</text>
          </view>
        </view>
      </view>
      <!-- 渠道订单 -->
      <view v-if="currentTab == 1">
        <view class="row u-m-b-12">
          <view class="item">
            <text class="label">权益券金额 (元)</text>
            <text class="value">{{ formatAmount(orderData.couponAmount) || '0.00' }}</text>
          </view>
          <view class="item">
            <text class="label">实付金额 (元)</text>
            <text class="value">{{ formatAmount(orderData.actualPayAmount) || '0.00' }}</text>
          </view>
        </view>
        <view class="row">
          <view class="item">
            <text class="label">应收金额 (元)</text>
            <text class="value">{{ formatAmount(orderData.receivableAmount) || '0.00' }}</text>
          </view>
          <view class="item">
            <text class="label">订单量</text>
            <text class="value">{{ formatAmount(orderData.orderCount, 'quantity') || '0' }}</text>
          </view>
        </view>
      </view>
    </view>
    <rangTime ref="rangTime" :mode="1" title="选择日期" @onSubmit="onEndTimeChange" />
  </view>
</template>

<script>
import api from '@/api/account.js';
import { formatAmount } from '@/common/util/util';
import rangTime from '@/components/dengrq-datetime-picker/dateSelector/index.vue';

export default {
  components: {
    rangTime,
  },
  data() {
    return {
      formatAmount,
      currentTab: 0,
      financeData: {},
      orderData: {},
      startDate: '',
      endDate: '',
      businessTabs: [
        { name: '普通业务', type: 'NORMAL' },
        { name: '渠道业务', type: 'CHANNEL' },
        { name: '团餐业务', type: 'GROUP_MEAL' },
      ],
    };
  },
  onShow() {
    this.getData();
    this.getFinanceInfo();
  },
  methods: {
    getData() {
      api.getAccountInfo().then((res) => {
        if (res.data.code === 200 && res.data.result) {
          this.financeData = res.data.result;
        }
      });
    },
    getFinanceInfo() {
      const params = {
        bizType: this.businessTabs[this.currentTab].type,
      };
      if (this.startDate) {
        params.startDate = this.startDate;
        params.endDate = this.endDate;
      }
      api.getFinanceStats(params).then((res) => {
        if (res.data.code === 200 && res.data.result) {
          this.orderData = res.data.result;
          this.startDate = res.data.result.startDate;
          this.endDate = res.data.result.endDate;
          this.$refs.rangTime.startDate = this.startDate;
          this.$refs.rangTime.endDate = this.endDate;
        }
      });
    },
    onTabChange(e) {
      this.currentTab = e;
      this.resetDateRange();
    },
    // 选择日期
    selectDate() {
      this.$refs.rangTime.open();
    },
    onEndTimeChange(val) {
      this.startDate = val.startDate;
      this.endDate = val.endDate;
      console.log(this.startDate, this.endDate);
      this.$forceUpdate();
      this.getFinanceInfo();
    },
    resetDateRange() {
      this.startDate = '';
      this.endDate = '';
      this.$refs.rangTime.startDate = '';
      this.$refs.rangTime.endDate = '';
      this.getFinanceInfo();
    },
    // 跳转账号余额
    goPage() {
      uni.navigateTo({
        url: `/pages/finance/balance?balance=${this.financeData.availableAmount}`,
      });
    },
    // 跳转提现
    goWithdrawal() {
      uni.navigateTo({
        url: `/pages/finance/withdrawal?balance=${this.financeData.availableAmount}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  background: #ffffff;
  font-family: Source Han Sans CN;

  .top {
    width: 100%;
    height: var(--status-bar-height);
    background:
      linear-gradient(90deg, #e3f4f8 0%, #ebf7f7 47.5%, #d6eff7 100%),
      linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  }

  .title {
    height: 117rpx;
    font-family: Source Han Sans SC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38rpx;
    color: #333333;
    font-weight: 500;
    border-bottom: 1rpx solid #eeeeee;
    background:
      linear-gradient(90deg, #e3f4f8 0%, #ebf7f7 47.5%, #d6eff7 100%),
      linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  }

  .balance-card {
    margin: 21rpx 25rpx 10rpx;
    padding: 21rpx 31rpx 31rpx;
    background: linear-gradient(286deg, #34bbff 0%, #4496fb 100%);
    box-shadow: 0rpx 4rpx 10rpx 0rpx #dae3f4;
    border-radius: 21rpx 21rpx 21rpx 21rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.6);

    .balance-info {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
      margin-bottom: 21rpx;

      .balance-label {
        display: block;
        font-weight: 400;
        font-size: 25rpx;
        color: #ffffff;
      }

      .balance-amount {
        font-family:
          DIN Alternate,
          DIN Alternate;
        font-weight: bold;
        font-size: 63rpx;
        color: #ffffff;
      }

      .withdraw-btn {
        width: 129rpx;
        height: 63rpx;
        background: #ffffff;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-family: Source Han Sans SC;
        font-weight: 500;
        font-size: 29rpx;
        color: #38b2fe;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .stats-row {
    display: flex;
    text-align: left;

    :last-child {
      margin-bottom: 0;
    }

    .stat-item {
      flex: 1;
      text-align: center;

      .stat-label {
        display: block;
        font-weight: 400;
        font-size: 21rpx;
        color: #ffffff;
      }

      .stat-value {
        font-family: DIN Alternate;
        font-weight: bold;
        font-size: 38rpx;
        color: #ffffff;
      }
    }
  }

  .amount-card {
    margin: 21rpx 25rpx 0;
    padding: 17rpx 0 21rpx;
    background: #f7f8fc;
    border-radius: 21rpx 21rpx 21rpx 21rpx;

    .row {
      display: flex;
      text-align: left;

      :last-child {
        margin-bottom: 0;
      }

      .item {
        flex: 1;
        text-align: center;

        .label {
          display: block;
          font-weight: 400;
          font-size: 21rpx;
          color: #666666;
        }

        .value {
          font-family: Source Han Sans SC;
          font-weight: 500;
          font-size: 33rpx;
          color: #333333;
        }
      }
    }
  }

  .business-tabs {
    display: flex;
    justify-content: space-around;

    .tab-item {
      // flex: 1;
      position: relative;
      padding: 18rpx 0;
      cursor: pointer;
      font-family: Source Han Sans SC;
      color: #333333;
      font-weight: 400;
      font-size: 29rpx;
    }

    .active {
      font-weight: 500;
      color: #449aff;
    }
    .tab-item.active::after {
      content: '';
      position: absolute;
      bottom: -28px;
      left: 35%;
      width: 38rpx;
      height: 100%;
      background: url('@/static/product/tab-act.png') no-repeat;
      background-size: contain;
    }
  }

  .date-picker {
    display: flex;
    justify-content: center;
    border-radius: 12rpx;
    margin: 0 28rpx 17rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 400;
    font-size: 27rpx;
    color: #666666;

    .date-separator {
      margin: 0 5px;
    }
  }
}
</style>