Henglianshutong/uniapp/pages/commission/madow.vue

<template>
  <s-layout class="wallet-wrap" title="我的马豆">
    <view class="header-box ss-flex ss-row-center ss-col-center">
      <view class="card-box ui-BG-Main ui-Shadow-Main">
        <view class="card-head ss-flex ss-col-center">
          <view class="card-title">马豆数量</view>
        </view>
        <view class="money-num ss-m-t-24">{{ formatInt(state.info.madow) }}</view>
        <view class="card-sub ss-m-t-16">
          当前汇率 1 马豆 = {{ state.info.madow_rate || '0' }} 元
        </view>
        <view class="card-sub ss-m-t-8">约合 ¥{{ state.info.madow_value || '0.00' }}</view>
        <view class="help-btn" @tap="state.showHelp = !state.showHelp">说明</view>
        <view v-if="state.showHelp" class="help-text">
          汇率随全平台订单增加而上浮，仅作价值展示，不可提现。
        </view>
      </view>
    </view>

    <s-empty
      v-if="state.inited && state.list.length === 0"
      icon="/static/data-empty.png"
      text="完成一笔订单后，次日 00:30 起参与马豆核算。"
    ></s-empty>

    <view v-if="state.list.length > 0">
      <view class="wallet-list ss-flex border-bottom" v-for="(item, index) in state.list" :key="item.id || index">
        <view class="list-content">
          <view class="title-box ss-flex ss-row-between ss-m-b-12">
            <text class="title">每日贡献马豆</text>
            <view class="money">
              <text class="add">+{{ formatInt(item.madow || item.amount) }}</text>
            </view>
          </view>
          <view class="desc">
            {{ item.date || item.createtime || '' }}
            <text v-if="item.user_count || item.count || item.people">
              · 当日 {{ item.user_count || item.count || item.people }} 人
            </text>
            <text v-if="item.gmv || item.order_money">
              · GMV {{ item.gmv || item.order_money }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <uni-load-more
      v-if="state.list.length > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
    />
  </s-layout>
</template>

<script setup>
  import { reactive } from 'vue';
  import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import _ from 'lodash';

  const headerBg = sheep.$url.css('/assets/addons/shopro/uniapp/user/wallet_card_bg.png');

  const state = reactive({
    info: {
      madow: sheep.$store('user').userInfo?.madow || '0',
      madow_rate: sheep.$store('user').userInfo?.madow_rate || '0',
      madow_value: sheep.$store('user').userInfo?.madow_value || '0.00',
    },
    list: [],
    inited: false,
    page: 1,
    lastPage: 1,
    loadStatus: '',
    showHelp: false,
  });

  function formatInt(val) {
    if (val === '' || val === null || val === undefined || val === '--') return '0';
    const num = Math.floor(parseFloat(val) || 0);
    return String(num);
  }

  function pickList(payload) {
    if (!payload) return [];
    if (Array.isArray(payload)) return payload;
    if (Array.isArray(payload.list)) return payload.list;
    if (Array.isArray(payload.list?.data)) return payload.list.data;
    if (Array.isArray(payload.data)) return payload.data;
    return [];
  }

  async function getMadow(page = 1) {
    state.loadStatus = 'loading';
    try {
      const res = await sheep.$api.partner.madow({ page });
      if (res?.code === 1) {
        const data = res.data || {};
        state.info.madow = data.madow ?? state.info.madow;
        state.info.madow_rate = data.madow_rate ?? state.info.madow_rate;
        state.info.madow_value = data.madow_value ?? state.info.madow_value;
        const list = pickList(data);
        state.list = page === 1 ? list : _.concat(state.list, list);
        state.page = data.list?.current_page || data.current_page || page;
        state.lastPage = data.list?.last_page || data.last_page || 1;
        state.loadStatus = state.page < state.lastPage ? 'more' : 'noMore';
        state.inited = true;
        return;
      }
    } catch (e) {}
    if (page === 1) {
      state.list = [];
    }
    state.loadStatus = 'noMore';
    state.inited = true;
  }

  onLoad(() => {
    getMadow();
  });

  onPullDownRefresh(async () => {
    await getMadow(1);
    uni.stopPullDownRefresh();
  });

  onReachBottom(() => {
    if (state.loadStatus !== 'noMore') {
      getMadow(state.page + 1);
    }
  });
</script>

<style lang="scss" scoped>
  .header-box {
    background-color: $white;
    padding: 30rpx;

    .card-box {
      width: 100%;
      min-height: 280rpx;
      padding: 40rpx;
      border-radius: 30rpx;
      overflow: hidden;
      position: relative;
      z-index: 1;
      box-sizing: border-box;

      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        z-index: 2;
        position: absolute;
        top: 0;
        left: 0;
        background: v-bind(headerBg) no-repeat;
        pointer-events: none;
      }

      .card-head,
      .card-title,
      .money-num,
      .card-sub,
      .help-btn,
      .help-text {
        position: relative;
        z-index: 3;
        color: $white;
      }

      .card-title {
        font-size: 24rpx;
      }

      .money-num {
        font-size: 40rpx;
        font-weight: 500;
        font-family: OPPOSANS;
      }

      .card-sub {
        font-size: 24rpx;
        opacity: 0.9;
      }

      .help-btn {
        margin-top: 20rpx;
        font-size: 22rpx;
        text-decoration: underline;
      }

      .help-text {
        margin-top: 12rpx;
        font-size: 22rpx;
        line-height: 34rpx;
        opacity: 0.9;
      }
    }
  }

  .wallet-list {
    padding: 30rpx;
    background-color: #ffffff;

    .list-content {
      flex: 1;

      .title {
        font-size: 28rpx;
        color: $dark-3;
      }

      .desc {
        color: $gray-c;
        font-size: 22rpx;
      }
    }

    .money {
      font-size: 28rpx;
      font-weight: bold;
      font-family: OPPOSANS;

      .add {
        color: var(--ui-BG-Main);
      }
    }
  }
</style>