kailin_mp/pages/balance/index.vue

<template>
  <view class="balance">
    <view class="date_picker">
      <picker mode="date" :value="selectedDate" fields="month" @change="_bindDateChange">
        <view>{{ formattedDate }}</view>
      </picker>
    </view>
    <view class="balance_list">
      <view class="balance_date">2025年1月</view>
      <view class="balance_item" @click="_goDetail">
        <view class="balance_item_left">
          <view style="margin-bottom: 10rpx">签到打卡</view>
          <view>2025-01-01 12:00</view>
        </view>
        <view class="balance_item_right">
          <view class="price">+1.00</view>
          <view>余额：78.78</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";

const selectedDate = ref("请选择日期");

const _bindDateChange = (e) => {
  selectedDate.value = e.detail.value;
};

const _goDetail = () => {
  uni.navigateTo({
    url: "/pages/balance/detail",
  });
};

const formattedDate = computed(() => {
  if (selectedDate.value === "请选择日期") {
    return selectedDate.value;
  }
  const [year, month] = selectedDate.value.split("-");
  return `${year}年${parseInt(month)}月`;
});
</script>

<style scoped lang="less">
.balance {
  padding: 36rpx;
  box-sizing: border-box;
  width: 100vw;
  .date_picker {
    padding: 0 16rpx;
    border: 1px solid #e5e5e5;
    width: 250rpx;
    height: 60rpx;
    line-height: 60rpx;
    margin-bottom: 40rpx;
  }
  .balance_list {
    .balance_date {
      font-weight: bold;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #ddd;
    }
    .balance_item {
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .balance_item_left,
      .balance_item_right {
        display: flex;
        flex-direction: column;
        font-size: 26rpx;
        margin-top: 20rpx;
      }
      .balance_item_right {
        align-items: flex-end;
        > .price {
          font-weight: bold;
          margin-bottom: 10rpx;
        }
      }
    }
  }
}
</style>