zhangsiye/mini/pages/share/income.vue

<template>
  <view class="share-income">
    <view class="head-box main-between cross-center">
      <view class="left-box">
        <text>分享佣金</text>
        <view class="price main-left cross-bottom">{{ userInfo.total_income }}
          <view class="unit">元</view>
        </view>
      </view>
      <view
        class="right-box"
        @click="$u.route('/pages/share/withdrawDetail')"
      >提现明细
      </view>
    </view>
    <view class="menu-group">
      <button
        v-for="(menu,index) in menus"
        :key="index"
        class="menu-item main-between cross-center"
        @click="handleMenu(menu)"
      >
        <view class="left-box dir-left-nowrap cross-center">
          <text>{{ menu.name }}</text>
        </view>
        <view class="right-box main-left cross-center">
          <text v-if="menu.showNumber">{{ menu.number }} 元</text>
          <u-icon name="arrow-right" :color="$colors.infoColor" bold top="1" />
        </view>
      </button>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ShareIncome',
  data() {
    return {
      menus: [
        { name: '可提现佣金', href: '/pages/share/withdraw', showNumber: true, number: 0 },
        { name: '已提现佣金', href: '/pages/share/withdrawDetail?active=3', showNumber: true, number: 0 },
        { name: '待打款佣金', href: '/pages/share/withdrawDetail?active=2', showNumber: true, number: 0 },
        { name: '用户须知', href: '/pages/share/tips', showNumber: false }
      ]
    }
  },
  computed: {
    ...mapState({
      userInfo: seate => seate.user.info
    })
  },
  methods: {
    handleMenu(menu) {
      if (menu.href) {
        this.$u.route(menu.href)
      }
    },
    getIncome() {
      this.$api.share.income().then(res => {
        this.menus[0].number = this.userInfo.income
        this.menus[1].number = res.data.been
        this.menus[2].number = res.data.wait
      })
    }
  },
  onLoad() {
    this.getIncome()
  }
}
</script>

<style lang="scss" scoped>
.share-income {
  padding: 30rpx 30rpx 80rpx;
  .head-box{
    background: #1C203B;
    color: #6eebe8;
    padding: 50rpx 30rpx;
    border-radius: 20rpx;
    .left-box{
      text{
        font-size: 26rpx;
      }
      .price{
        margin-top: 12rpx;
        font-size: 42rpx;
        font-weight: bold;
        .unit{
          font-weight: normal;
          font-size: 28rpx;
          margin-bottom: 5rpx;
          margin-left: 2rpx;
        }
      }
    }
    .right-box{
      border: 1rpx solid #6eebe8;
      border-radius: 30rpx;
      padding: 6rpx 20rpx;
      font-size: 26rpx;
    }
  }

  .menu-group{
    .menu-item{
      padding: 20rpx 0;
      background: transparent;
      border: none;
      text-align: unset;
      width: 100%;
      line-height: initial;
      font-size: initial;
      justify-content: space-between;
      border-bottom: 1rpx solid #232849;
      border-radius: 0;
      color: #fff;
      margin-top: 40rpx;
      &:after{
        content: unset;
      }
      .left-box{
        flex: 1;
        .icon{
          transform: translateY(4rpx);
          image{
            width: 55rpx;
            height: 55rpx;
          }
        }
        text{
          color: #fff;
          margin-left: 10rpx;
        }
      }
      .right-box{
        text{
          margin-right: 20rpx;
        }
      }
    }
  }
}
</style>