zhangsiye/mini/pages/my/recharge.vue

<template>
  <view class="recharge">
    <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 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">+150</text>
              <text>金币</text>
            </view>
            <view class="gift">充100赠50</view>
          </view>
          <view class="right-box">
            <text class="number">49.99</text>
            <text>金币</text>
          </view>
        </view>
        <text class="time">2022.07.21 12:55</text>
      </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 {
      recharge: [1, 2, 3, 4, 5],
      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>
    .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>