merchapp/java-mall-app-shop-admin/pages/manage/manage.vue

<template>
  <view class="manage-container">
    <status-bar :backgroundColor="'#fff'" v-if="true"></status-bar>
    <view class="turnover-hander">
      <view class="turnover-block">
        <view class="turnover-item">今天营业额（元）</view>
        <u-count-to
          class="turnover-item turnover-item-num"
          :start-val="30"
          :end-val="5865555.26"
          :decimals="2"
          separator=","
        ></u-count-to>
        <view class="turnover-item tips">
          当天营业额在次日结算并自动提现
          <u-icon
            style="display: inline-block; margin-left: 8rpx"
            name="question-circle"
            size="12"
          ></u-icon>
        </view>
      </view>
      <view class="turnover-block" style="margin-right: 40rpx">
        <u-icon
          style="display: inline-block"
          custom-prefix="custom-icon-qiandai custom-icon"
          size="20"
        ></u-icon>
      </view>
    </view>
    <view class="bill-block">
      <view class="bill-title">账单</view>
      <view class="bill-time-btn-list">
        <u-button :hair-line="false" class="btn-item">全部</u-button>
        <u-button :hair-line="false" class="btn-item">10月</u-button>
        <u-button :hair-line="false" class="btn-item">9月</u-button>
        <u-button :hair-line="false" class="btn-item">8月</u-button>
        <u-button :hair-line="false" class="btn-item">7月</u-button>
      </view>
      <view class="settlement-record">
        <view class="settlement-record-title">结算记录</view>
        <scroll-view
          class="uni-swiper-list"
          scroll-y
          :scroll-top="0"
          enhanced
          :show-scrollbar="false"
        >
          <view
            class="settlement-record-block"
            v-for="(item, index) of arr"
            :key="index"
          >
            <view class="time-bloc">
              <view class="time">{{ item.time }}</view>
              <view class="time-tips">{{ item.timeTips }}</view>
            </view>
            <view class="num">
              ￥{{ item.num }}
              <u-icon
                style="display: inline-block; margin-left: 12rpx"
                name="arrow-right"
                size="12"
                color="#333333"
              ></u-icon>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import statusBar from "../../components/status-bar.vue";
export default {
  components: {
    statusBar,
  },
  data() {
    return {
      arr: [
        {
          time: "10-14",
          timeTips: "2024年10月14日已结算",
          num: "5,2612.25",
        },
        {
          time: "10-14",
          timeTips: "2024年10月14日已结算",
          num: "5,2612.25",
        },
        {
          time: "10-14",
          timeTips: "2024年10月14日已结算",
          num: "5,2612.25",
        },
        {
          time: "10-14",
          timeTips: "2024年10月14日已结算",
          num: "5,2612.25",
        },
        {
          time: "10-14",
          timeTips: "2024年10月14日已结算",
          num: "5,2612.25",
        },
        {
          time: "10-14",
          timeTips: "2024年10月14日已结算",
          num: "5,2612.25",
        },
        {
          time: "10-14",
          timeTips: "2024年10月14日已结算",
          num: "5,2612.25",
        },
        {
          time: "10-14",
          timeTips: "2024年10月14日已结算",
          num: "5,2612.25",
        },
        {
          time: "10-14",
          timeTips: "2024年10月14日已结算",
          num: "5,2612.25",
        },
        {
          time: "10-14",
          timeTips: "2024年10月14日已结算",
          num: "5,2612.25",
        },
        {
          time: "10-14",
          timeTips: "2024年10月14日已结算",
          num: "5,2612.25",
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.manage-container {
  padding: 40rpx;

  .turnover-hander {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    border-radius: 12rpx;
    background: #f2f2f2;
    font-size: 26rpx;
    color: #333333;

    .turnover-item {
      margin: 16rpx 0;
    }

    .turnover-item-num {
      font-weight: bold !important;
    }
  }

  .bill-block {
    margin-top: 40rpx;

    .bill-title {
      margin-bottom: 20rpx;
      font-weight: bold;
      color: #333333;
    }

    .bill-time-btn-list {
      display: flex;
      .btn-item {
        margin-right: 8rpx;
        width: 140rpx;
        height: 48rpx;
        font-size: 24rpx;
        border: none;
      }
    }
  }

  .settlement-record {
    margin-top: 40rpx;
    background: #f2f2f2;
    padding: 24rpx;
    color: #333333;
    border-radius: 12rpx;

    .uni-swiper-list {
      height: calc(100vh - 376px);
    }

    .settlement-record-block {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f7f7f7;
      padding: 12rpx 0;

      .time-bloc {
        .time {
          font-weight: 700;
        }

        .time-tips {
          font-size: 24rpx;
        }

        .num {
          font-size: 26rpx;
        }
      }
    }
  }
}
</style>