zhangsiye/mini/pages/share/index.vue

<template>
  <view class="share-index">
    <view class="head-box">
      <view class="user-info dir-left-nowrap">
        <view class="head-img">
          <image :src="userInfo.avatar" alt="" />
        </view>
        <view class="base-info dir-top-wrap main-center">
          <view class="nickname">{{ userInfo.nickname }}</view>
          <view class="parent">推荐人: {{ userInfo.parent ? userInfo.parent.nickname : '' }}</view>
        </view>
      </view>
      <view class="withdraw-box main-between cross-center">
        <view class="withdraw-item dir-top-wrap main-center" @click="$u.route('/pages/share/withdraw')">
          <view class="static-txt main-left cross-center">
            可提现佣金
            <view class="badge">提现</view>
          </view>
          <view class="price main-left cross-center">
            {{ userInfo.income }}
            <view class="unit">元</view>
          </view>
        </view>
        <view class="withdraw-item dir-top-wrap main-center">
          <view class="static-txt">
            已提现佣金
          </view>
          <view class="price main-left cross-center">
            {{ parseFloat(userInfo.total_income - userInfo.income).toFixed(2) }}
            <view class="unit">元</view>
          </view>
        </view>
      </view>
    </view>
    <!--菜单-->
    <view class="menu-group">
      <button
        v-for="(menu,index) in menus"
        :key="index"
        class="menu-item main-between cross-center"
        :open-type="menu.type ? menu.type : ''"
        @bindcontact="handleMenu"
        @click="handleMenu(menu)"
      >
        <view class="left-box dir-left-nowrap cross-center">
          <view class="icon">
            <image :src="menu.icon" />
          </view>
          <text>{{ menu.name }}</text>
        </view>
        <u-icon name="arrow-right" :color="$colors.infoColor" bold />
      </button>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      menus: [
        { icon: '/static/image/my-page/share.png', name: '分享好友', type: 'share' },
        { icon: '/static/image/share/income.png', name: '分享佣金', href: '/pages/share/income' },
        { icon: '/static/image/share/order.png', name: '分享订单', href: '/pages/share/order' },
        { icon: '/static/image/share/detail.png', name: '提现明细', href: '/pages/share/withdrawDetail' },
        { icon: '/static/image/share/team.png', name: '我的团队', href: '/pages/share/team' }
      ]
    }
  },
  computed: {
    ...mapState({
      userInfo: seate => seate.user.info
    })
  },
  methods: {
    handleMenu(menu) {
      // #ifdef MP-KUAISHOU
      if (menu.type === 'contact') {
        ks.makePhoneCall({
          phoneNumber: this.config.contact,
          success(res) {
            console.log('-->success', res)
          },
          fail(err) {
            console.log('-->error', err)
          }
        })
      }
      // #endif
      if (menu.href) {
        this.$u.route(menu.href)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.share-index {
  color: #6eebe8;
  font-size: 32rpx;
  padding: 40rpx 30rpx 80rpx;
  .head-box{
    background: $bg-op-color;
    border-radius: 20rpx;
    padding: 40rpx 0;
    margin-bottom: 50rpx;
    .user-info{
      padding: 0 30rpx 40rpx;
      border-bottom: 1rpx $border-op-color solid;
      .head-img{
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        overflow: hidden;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .base-info{
        margin-left: 30rpx;
        .parent{
          font-size: 26rpx;
        }
      }
    }
    .withdraw-box{
      padding: 40rpx 0 0;
      .withdraw-item{
        flex: 1;
        position: relative;
        padding: 0 40rpx;
        &:first-child{
          &:after{
            content: "";
            position: absolute;
            background: $border-op-color;
            right: 0;
            top: 50%;
            height: 60%;
            width: 1rpx;
            transform: translateY(-50%);
          }
        }
        .static-txt{
          font-size: 26rpx;
          .badge{
            font-size: 18rpx;
            border: 1rpx solid #6eebe8;
            border-radius: 30rpx;
            padding: 2rpx 20rpx;
            margin-left: 30rpx;
          }
        }
        .price{
          margin-top: 10rpx;
          font-size: 48rpx;
          .unit{
            font-size: 34rpx;
            margin-left: 4rpx;
          }
        }
      }
    }
  }
  .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 $border-op-color;
      border-radius: 0;
      &:after{
        content: unset;
      }
      .left-box{
        flex: 1;
        .icon{
          transform: translateY(4rpx);
          image{
            width: 55rpx;
            height: 55rpx;
          }
        }
        text{
          color: #fff;
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>