zhangsiye/mini/pages/my/consume.vue

<template>
  <view class="consume">
    <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 consume"
        :key="index"
        class="consume-item dir-left-nowrap cross-center"
      >
        <view class="cover-image">
          <image :src="item.detail.episode.cover_img" />
        </view>
        <view class="episode-box dir-top-wrap ">
          <view class="name">{{ item.detail.episode.name }}</view>
          <view class="status-box main-left cross-center">
            <text class="status">{{ item.detail.episode.status_text }}</text>
            <text>共{{ item.detail.episode.total }}集</text>
          </view>
          <view class="detail">{{ item.detail.sort }}集</view>
          <text class="time">{{ item.created_at }}</text>
        </view>
        <view class="gold">
          <text class="number">-{{ item.price }}</text>
          <text>金币</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      limit: 10,
      page: 1,
      isMore: true,
      consume: [],
      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: {
    handlePlay(detail) {
      this.$u.route({
        url: '/pages/episode/play',
        params: {
          id: detail.episode.id,
          list_id: detail.id
        }
      })
    },
    handleDateConfirm({ detail }) {
      this.datePicker.date = detail.value
      this.datePicker.show = false
      this.getConsume()
    },
    getConsume() {
      this.$loading()
      this.$api.user.consume.record({ date: this.datePicker.date, limit: this.limit, page: this.page }).then(res => {
        this.$hideLoading()
        if (res.data.length) {
          this.consume = this.consume.concat(res.data)
        } else {
          this.isMore = false
        }
      })
    }
  },
  onLoad() {
    this.getConsume()
  },
  onReachBottom(e) {
    if (!this.isMore) return
    this.page += 1
    this.getConsume()
  }
}
</script>

<style lang="scss" scoped>
    .consume {
      padding: 20rpx 20rpx;
      font-size: 30rpx;
      .header{
        color: $info-color;
        text{
          margin-right: 20rpx;
          font-size: 32rpx;
        }
        .icon{
          transition: .3s;
          &.rotate{
            transform: rotate(-180deg);
          }
        }
      }
      .content{
        .consume-item{
          color: $info-color;
          margin-top: 20rpx;
          .cover-image{
            image{
              width: 200rpx;
              height: 260rpx;
              border-radius: 16rpx;
            }
          }
          .episode-box{
            flex: 1;
            margin-left: 20rpx;
            font-size: 26rpx;
            .name{
              color: $default-color;
              font-size: 38rpx;
              font-weight: 600;
              margin-bottom: 10rpx;
            }
            .status-box{
              margin-bottom: 50rpx;
              .status{
                color: $primary-color;
                margin-right: 14rpx;
              }
            }
            .detail{
              font-size: 32rpx;
              color: $default-color;
              margin-bottom: 10rpx;
            }
          }
          .gold{
            .number{
              color: $pink-color;
              font-size: 42rpx;
            }
          }
        }
      }
    }
</style>