zhangsiye/mini/pages/my/recharge.vue

<template>
  <view class="recharge">
    <view class="header main-left cross-center" @click="datePicker.show = true">
      <picker
        mode="date"
        fields="month"
        :value="date"
        @change="handleDateConfirm"
      >
        <text>{{ date }}</text>
      </picker>
      <view class="icon" :class="{rotate: datePicker.show}">
        <u-icon name="arrow-down" />
      </view>
    </view>
    <view class="content">
      <view
        v-for="(item,index) in recharge"
        :key="index"
        class="recharge-item"
      >
        <view class="gold-box main-between cross-center">
          <view class="left-box main-left cross-center">
            <view class="gold">
              <text class="number">+{{ item.gold + item.gift }}</text>
              <text>金币</text>
            </view>
            <view class="gift">充{{ item.gold }}赠{{ item.gift }}</view>
          </view>
          <view class="right-box">
            <text class="number">{{ item.price }}</text>
            <text>元</text>
          </view>
        </view>
        <text class="time">{{ item.created_at }}</text>
      </view>
    </view>
    <!--时间选择-->
    <!--    <u-datetime-picker-->
    <!--      ref="datePicker"-->
    <!--      v-model="datePicker.value"-->
    <!--      :show="datePicker.show"-->
    <!--      mode="year-month"-->
    <!--      @confirm="handleDateConfirm"-->
    <!--      @cancel="datePicker.show = false"-->
    <!--    />-->
  </view>
</template>

<script>
export default {
  data() {
    return {
      limit: 10,
      page: 1,
      isMore: true,
      recharge: [],
      datePicker: {
        date: uni.$u.timeFormat(Number(new Date()), 'yyyy-mm'),
        show: false
      }
    }
  },
  computed: {
    date() {
      const date = this.datePicker.date
      const arr = date.split('-')
      return `${arr[0]}年${arr[1]}月`
    }
  },
  methods: {
    handleDateConfirm({ detail }) {
      this.datePicker.date = detail.value
      this.datePicker.show = false
      this.getRecharge()
    },
    getRecharge() {
      this.$loading()
      this.$api.user.recharge.record({ date: this.datePicker.date, limit: this.limit, page: this.page }).then(res => {
        this.$hideLoading()
        if (res.data.length) {
          this.recharge = this.recharge.concat(res.data)
        } else {
          this.isMore = false
        }
      })
    }
  },
  onLoad() {
    this.getRecharge()
  },
  onReachBottom(e) {
    if (!this.isMore) return
    this.page += 1
    this.getConsume()
  }
}
</script>

<style lang="scss" scoped>
    .recharge {
      padding: 20rpx 20rpx;
      .header{
        color: $info-color;
        text{
          margin-right: 20rpx;
          font-size: 32rpx;
        }
        .icon{
          transition: .3s;
          &.rotate{
            transform: rotate(-180deg);
          }
        }
      }
      .content{
        .recharge-item{
          border-bottom: 1rpx solid $info-color;
          color: $info-color;
          font-size: 26rpx;
          padding: 20rpx 0;
          &:last-child{
            border-bottom: none;
          }
          .gold-box{
            padding: 16rpx 0;
            .number{
              color: $primary-color;
              font-size: 38rpx;
              font-weight: 600;
              margin-right: 10rpx;
            }
            .gold .number{
              color: $default-color;
            }
            .left-box{
              .gift{
                color: $pink-color;
                margin-left: 40rpx;
              }
            }
          }
          text.time{
            font-size: 24rpx;
          }
        }
      }
    }
</style>