zhangsiye/mini/pages/my/consume.vue

<template>
  <view class="consume">
    <view class="header main-left cross-center" @click="datePicker.show = true">
      <text>{{ date }}</text>
      <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="@/static/image/default-movie.png" />
        </view>
        <view class="episode-box dir-top-wrap ">
          <view class="name">毒液</view>
          <view class="status-box main-left cross-center">
            <text class="status">已完结</text>
            <text>共18集</text>
          </view>
          <view class="detail">5集</view>
          <text class="time">2022-07-21 12:45:21</text>
        </view>
        <view class="gold">
          <text class="number">-150</text>
          <text>金币</text>
        </view>
      </view>
    </view>
    <!--时间选择-->
    <u-datetime-picker
      ref="datePicker"
      v-model="datePicker.value"
      :show="datePicker.show"
      mode="year-month"
      @confirm="handleDateConfirm"
      @cancel="handleDateConfirm"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      consume: [1, 2],
      datePicker: {
        value: (new Date()).getTime(),
        date: uni.$u.timeFormat((new Date()).getTime(), 'yyyy-mm'),
        show: false
      }
    }
  },
  computed: {
    date() {
      const date = this.datePicker.date
      const arr = date.split('-')
      return `${arr[0]}年${arr[1]}月`
    }
  },
  watch: {
    datePicker: {
      handler(date) {
        date.date = uni.$u.timeFormat(date.value, 'yyyy-mm')
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleDateConfirm() {
      this.datePicker.show = false
    }
  }
}
</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;
            }
          }
          .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>