fission-star-applet-250304/pages_order/mine/wallet.vue

<template>
  <view>
		<navbar title="我的钱包" leftClick @leftClick="$utils.navigateBack" />

    <view class="content">
      <view class="card overview">
        <image class="bg" src="../static/center/overview-bg.png"></image>

        <view class="overview-info">
          <view class="flex user-info">
            <!-- todo: 换回接口提供的 -->
            <image class="avatar" src="../static/temp-avatar.png"></image>
            <!-- todo: 换回接口提供的 -->
            <text class="nick-name">裂变星1号</text>
          </view>
          <view class="account">
            <!-- todo: 换回接口提供的 -->
            <view class="account-count">{{ `￥${100.0}` }}</view>
            <view class="account-desc">可提现余额（元）</view>
          </view>
        </view>
        
        <button class="flex btn-withdraw" @click="$utils.navigateTo('/pages_order/mine/withdraw')">
          <text>去提现</text>
          <image class="btn-withdraw-arrow" src="../static/center/arrow.png"></image>
        </button>

        <view class="flex overview-summary">
            <!-- todo: 换回接口提供的 -->
            <view>总收益：<text class="highlight">{{ `￥${276.0}` }}</text></view>
            <view>已提现：<text class="highlight">{{ `￥${176.0}` }}</text></view>
        </view>
      </view>
      <view class="detail">
        <view class="flex detail-header">
          <view class="detail-title">
            <image class="bg" src="../static/center/title-bg.png"></image>
            <text class="text">收支明细</text>
          </view>
          <view class="detail-tools">
            <uv-calendars ref="calendars" @confirm="onSelectDate" />
            <button class="flex btn-calendar" @click="openCalendars">
              <text>日期选择</text>
              <image class="btn-calendar-arrow" src="../static/center/down.png"></image>
            </button>
          </view>
        </view>
        <view class="detail-list">
          <view class="card detail-list-item"
            v-for="item in detailList"
            :key="item.id"
          >
            <view class="flex detail-list-item-row highlight">
              <text>{{ item.title }}</text>
              <template v-if="item.type === 'in'">
                <text class="count count-in">{{ `+${item.count}` }}</text>
              </template>
              <template v-else>
                <text class="count count-out">{{ `-${item.count}` }}</text>
              </template>
            </view>
            <view class="flex detail-list-item-row">
              <text>{{ item.createTime }}</text>
              <text>{{ `余额：${item.account}` }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
	export default {
		data() {
			return {
        detailList: [
          {
            id: '001',
            title: '提现-微信',
            type: 'out',
            count: '88.0',
            account: '100.0',
            createTime: '2025年2月15日 12:56:48',
          },
          {
            id: '002',
            title: '活动奖励',
            type: 'in',
            count: '12.8',
            account: '188.0',
            createTime: '2025年2月14日 12:56:48',
          },
          {
            id: '003',
            title: '提现-微信',
            type: 'out',
            count: '88.0',
            account: '263.2',
            createTime: '2025年2月13日 12:56:48',
          },
        ]
      }
    },
    onShow() {
      // todo

      // fetch user-info
      // fetch detail
    },
    onReachBottom() {
      // todo

      // fetch more detail
    },
    methods: {
      openCalendars() {
        this.$refs.calendars.open();
      },
      onSelectDate(e) {
        console.log('--onSelectDate', e)

        // todo

        // fetch detail
      }
    },
  }
</script>

<style scoped lang="scss">
.content {
  padding: 20rpx;
}

.overview {
  position: relative;
  border-radius: 14rpx;
  padding: 0;
  height: 462rpx;
  width: 100%;

  color: #04D6A3;

  .bg {
    width: 100%;
    height: 374rpx;
  }

  &-info {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;

    padding: 43rpx 0 0 54rpx;
  }

  .user-info {
    justify-content: flex-start;
  }

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
  }

  .nick-name {
    font-size: 32rpx;
    font-weight: 700;
    margin-left: 20rpx;
  }

  .account {
    margin-top: 44rpx;

    &-count {
      font-size: 78rpx;
      font-weight: 900;
      margin-left: -8rpx;
    }

    &-desc {
      font-size: 24rpx;
    }

  }

  .btn-withdraw {
    position: absolute;
    top: 223rpx;
    right: 0;

    background-color: #04D6A3;
    line-height: 1;
    font-size: 32rpx;
    padding: 20rpx 6rpx 20rpx 30rpx;
    border-top-left-radius: 42rpx;
    border-bottom-left-radius: 42rpx;

    &-arrow {
      width: 28rpx;
      height: 28rpx;
      margin-left: 22rpx;
    }
  }
  
  &-summary {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    padding: 28rpx 48rpx;
    box-sizing: border-box;

    justify-content: space-between;

    color: #1B1B1B;
    font-size: 24rpx;

    .highlight {
      color: #04D6A3;
    }
  }
}

.detail {

  &-header {
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 20rpx;
  }

  &-title {
    position: relative;
    
    .bg {
      width: 139rpx;
      height: 13rpx;
      vertical-align: text-bottom;
    }

    .text {
      color: #1B1B1B;
      font-size: 36rpx;
      font-weight: 900;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  &-tools {
    .btn-calendar {
      display: inline-block;
      width: auto;
      height: auto;
      background-color: #FFFFFF;
      border: none;
      padding: 21rpx 19rpx;
      box-sizing: border-box;
      margin: 0;
      line-height: 1;
      font-size: 24rpx;
      color: #999999;
      border-radius: 33rpx;

      &-arrow {
        width: 26rpx;
        height: 12rpx;
        margin-left: 10rpx;
      }
    }
  }

  &-list {
    margin-top: 25rpx;

    &-item {
      color: #999999;
      font-size: 24rpx;

      & + & {
        margin-top: 11rpx;
      }

      .highlight {
        color: #1B1B1B;
        font-size: 32rpx;
        font-weight: 700;
      }

      &-row {
        justify-content: space-between;
      }

      .count {
        &-in {
          color: #FF2020;
        }
      }
    }
  }
}
</style>