LocalLivingServicesUniapp/pages/finance/balance.vue

<template>
  <view class="container">
    <view class="top"></view>
    <view class="head">
      <span class="cuIcon-back" @click="back"></span>
      <view class="case"> 账户余额 </view>
    </view>

    <view class="main-box">
      <view class="one-box">
        <view>
          <view class="title">账户余额（元）</view>
          <view class="money">{{ formatAmount(balance) }}</view>
        </view>
        <view v-if="1">
          <view class="btn-cash" @click="toPage('withdrawal')">
            <image src="/static/finance/account/cash.png" mode="aspectFit" class="btn-img"></image>
            <view>提现</view>
          </view>
        </view>
      </view>
      <view class="two-box">
        <u-grid :col="4" :border="false">
          <u-grid-item
            v-for="(item, k) in accountMenus"
            :key="k"
            :customStyle="{
              paddingTop: '21rpx',
              paddingBottom: '21rpx',
            }"
            style="background: 'none'"
            @click="toPage(item.type)"
          >
            <image class="icon" :src="item.icon" mode="aspectFit"></image>
            <text class="desc">{{ item.title }}</text>
          </u-grid-item>
        </u-grid>
      </view>

      <view class="thr-box">
        <u-sticky :offset-top="20" :customNavHeight="54">
          <view class="section-title">
            <view>
              <text>账户明细</text>
            </view>

            <view class="action" @click="toPage('all')">
              <text>全部</text>
              <u-icon name="arrow-right" color="#999" size="26" top="1"></u-icon>
            </view>
          </view>
        </u-sticky>
        <!-- 账户列表 -->
        <mescroll-uni
          class="list-box"
          ref="mescrollRef"
          :fixed="false"
          @up="getList"
          @down="downCallback"
          @init="mescrollInit"
          :use="{ up: true, down: true }"
        >
          <AccountList :list="accountData"></AccountList>
        </mescroll-uni>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/api/account';
import { formatAmount } from '@/common/util/util';
import { accountMenus } from './dictionary';
import AccountList from './components/account-list.vue';

export default {
  name: 'Finance',
  components: {
    AccountList,
  },
  data() {
    return {
      accountMenus,
      formatAmount,
      accountData: [],
      mescroll: null,
      balance: 0,
    };
  },
  onShow() {
    if (!this.balance) {
      this.getFinanceInfo();
    }
  },
  onLoad(options) {
    this.balance = options.balance;
  },
  methods: {
    getFinanceInfo() {
      api.getAccountInfo().then((res) => {
        if (res.data.code === 200 && res.data.result) {
          this.balance = res.data.result.availableAmount;
        }
      });
    },
    // 账户列表
    getList(page) {
      let params = {
        pageNo: page.num,
        pageSize: page.size,
      };
      api
        .getAccountList(params)
        .then((res) => {
          if (res.data.code === 200) {
            const records = res.data.result.records;
            const total = res.data.result.total;
            if (records == null && page.num === 1) {
              this.accountData = [];
            } else {
              this.accountData = records ? this.accountData.concat(records) : this.accountData;
            }
            this.mescroll.endSuccess(records.length, total);
            if (this.accountData.length < 5) {
              this.$refs.mescrollRef.upLoadType = 'NO_DATA';
            }
          } else {
            this.accountData = [];
            this.mescroll.endErr();
          }
        })
        .catch(() => {
          this.mescroll.endErr();
        });
    },
    // 跳转账户明细
    toPage(type) {
      let path = type === 'withdrawal' ? type : `accountRecord?type=${type}`;
      uni.navigateTo({
        url: `/pages/finance/${path}`,
      });
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 下拉刷新
    downCallback() {
      this.mescroll.resetUpScroll();
      this.accountData = [];
    },
    back() {
      uni.switchTab({
        url: '/pages/finance/index',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background: #f7f8fc;
  font-family: Source Han Sans SC;
  position: fixed;
  overflow: hidden;

  /*#ifdef APP-PLUS*/
  .top {
    width: 100%;
    height: var(--status-bar-height);
    background: #fff;
  }

  /*#endif*/

  .head {
    width: 100%;
    height: 112rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    background: #fff;
    position: fixed;
    z-index: 999;
    border-bottom: 1rpx solid #eeeeee;

    .cuIcon-back {
      font-size: 40rpx;
      margin-right: 40rpx;
    }

    .case {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-weight: 500;
      font-size: 38rpx;
      color: #333333;
    }
  }

  .main-box {
    border-top: 1rpx solid #eeeeee;
    padding-top: 112rpx;

    .one-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 22rpx 31rpx 0;
      padding: 21rpx 19rpx 19rpx 31rpx;
      background: linear-gradient(286deg, #34bbff 0%, #4496fb 100%);
      box-shadow: 0rpx 4rpx 10rpx 0rpx #dae3f4;
      border-radius: 21rpx 21rpx 0rpx 0rpx;

      .title {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 25rpx;
        color: #ffffff;
      }
      .money {
        font-family: DIN Alternate;
        font-weight: bold;
        font-size: 63rpx;
        color: #ffffff;
      }
      .item {
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
      }
      .btn-cash {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 144rpx;
        height: 63rpx;
        background: #ffffff;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-family: Source Han Sans SC;
        font-weight: 500;
        font-size: 29rpx;
        color: #38b2fe;

        .btn-img {
          width: 33rpx;
          height: 33rpx;
          margin-right: 10rpx;
        }
      }
    }
    .two-box {
      height: 151rpx;
      background: linear-gradient(180deg, #c3ebff 0%, #f7f8fc 100%);
      box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(255, 255, 255, 0.4);
      border-radius: 21rpx 21rpx 0rpx 0rpx;

      .icon {
        width: 62rpx;
        height: 62rpx;
      }
      .desc {
        font-weight: 400;
        font-size: 25rpx;
        color: #7a7f89;
        margin-top: 10rpx;
      }
    }

    .thr-box {
      margin: 10rpx 31rpx 40rpx;
      padding: 0 31rpx 31rpx;
      background: #ffffff;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      max-height: 65vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;

      .section-title {
        width: 100%;
        height: 80rpx;
        font-weight: 500;
        font-size: 31rpx;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        border-bottom: 1rpx solid #eeeeee;
      }

      .list-box {
        flex: 1;
        overflow-y: auto;
      }

      .action {
        font-weight: 400;
        font-size: 27rpx;
        color: #666666;
        display: flex;
        align-items: center;
      }
    }
  }
}
::v-deep {
  .u-grid-item {
    background: none;
  }
}
</style>