studytour-front/pages/index/partner.vue

<template>
  <view class="page__view">
    
		<navbar>
      <image class="icon-nav" src="@/pages_order/static/partner/icon-nav.png" mode="widthFix"></image>
    </navbar>

    <view class="main">
      <view class="advantage">
        <view class="flex advantage-content">
          <view class="flex advantage-item" v-for="(item, aIdx) in advantages" :key="aIdx">
            <image class="icon" src="@/static/image/icon-checkmark-circle-fill.png" mode="widthFix"></image>
            <view>{{ item }}</view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="flex user">
          <view class="avatar">
            <image class="img" :src="userInfo.headImage" mode="scaleToFill"></image>
            <view :class="['tag', `tag-${userInfo.role}`]">{{ userInfo.roleDesc || '' }}</view>
          </view>
          <view class="flex summary">
            <view class="flex flex-column summary-item name">
              <view class="summary-item-content text-ellipsis">{{ userInfo.nickName }}</view>
              <view class="summary-item-label text-ellipsis">{{ `ID：${userInfo.id}` }}</view>
            </view>
            <template v-if="isPartner">
              <view class="flex flex-column summary-item" @click="jumpToAchievement">
                <view class="summary-item-content">{{ userCenterData.spreadNum }}</view>
                <view class="summary-item-label nowrap">推广人数</view>
              </view>
              <view class="flex flex-column summary-item">
                <view class="summary-item-content">{{ userCenterData.commission }}</view>
                <view class="summary-item-label nowrap">总佣金</view>
              </view>
            </template>
            <template v-else>
              <view class="flex summary-item operate">
                <button class="btn" @click="onApplyPartner">成为合伙人</button>
              </view>
            </template>
          </view>
        </view>

        <view class="flex bar" v-if="isPartner">
          <button class="flex col btn" @click="jumpToTeam">
            <image class="icon" src="@/pages_order/static/partner/icon-team.png" mode="widthFix"></image>
            <view>我的团队</view>
          </button>
          <view class="flex divider">
            <view class="line"></view>
          </view>
          <button class="flex col btn" @click="openPosterPopup">
            <image class="icon" src="@/pages_order/static/partner/icon-qrcode.png" mode="widthFix"></image>
            <view>邀请二维码</view>
          </button>
          <view class="flex divider">
            <view class="line"></view>
          </view>
          <button class="flex col btn" @click="jumpToWithdraw">
            <image class="icon" src="@/pages_order/static/partner/icon-cash.png" mode="widthFix"></image>
            <view>提现</view>
          </button>
        </view>

        <!-- todo: check -->
        <button class="btn-apply" @click="onApplyPartner">
          <image class="bg" src="@/pages_order/static/partner/apply.png" mode="widthFix"></image>
        </button>

        <view class="list" v-if="isPartner && list.length">
          <view class="flex list-item" v-for="item in list" :key="item.id">
            <view class="flex col info">
              <view class="avatar">
                <image class="img" :src="item.commissionUser.headImage" mode="scaleToFill"></image>
              </view>
              <view>{{ item.commissionUser.nickName }}</view>
            </view>
            <view class="col price">{{ `+¥${item.amount}` }}</view>
            <view class="col desc">{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}</view>
          </view>
        </view>
      </view>
    </view>

    <posterPopup ref="posterPopup"></posterPopup>

		<tabber select="partner" />
  </view>
</template>

<script>
	import { mapState } from 'vuex'

	import mixinsList from '@/mixins/list.js'

	import tabber from '@/components/base/tabbar.vue'
	import posterPopup from '@/components/base/posterPopup.vue'

  export default {
		mixins: [mixinsList],
    components: {
      tabber,
      posterPopup,
    },
    data() {
      return {
        advantages: ['收益高', '品类全', '到账快', '城市多'],
        // todo: fetch
        isPartner: true,
				mixinsListApi: 'queryCommissionList',
      }
    },
    computed: {
			...mapState(['userCenterData']),
    },
		onLoad() {
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
				this.$store.commit('getUserCenterData')
			}
		},
    onShow() {
      // todo: refresh is partner?
    },
    methods: {
      onApplyPartner() {
        // todo: check
        return
			  this.$utils.navigateTo(`/pages_order/partner/apply`)
      },
      jumpToTeam() {
			  this.$utils.navigateTo(`/pages_order/partner/team`)
      },
      openPosterPopup() {
        const path = `pages/index/index?shareId=${this.userInfo.id}`
        this.$refs.posterPopup.open(path)
      },
      jumpToWithdraw() {
			  this.$utils.navigateTo(`/pages_order/partner/withdraw`)
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../../components/member/styles/tag.scss';

  .page__view {
    min-height: 100vh;
    background: linear-gradient(to right, #21FEEC, #019AF9);

    /deep/ .nav-bar__view {
      position: fixed;
      top: 0;
      left: 0;
    }
    
    .icon-nav {
      width: 168rpx;
      height: auto;
    }

    /deep/ .tabbar-box {
      height: auto;
      padding-bottom: 0;
    }
  }

  .main {
    // min-height: 100vh;
    // padding: calc(var(--status-bar-height) + 130rpx) 0 calc(120rpx + env(safe-area-inset-bottom)) 0;
    padding-top: calc(var(--status-bar-height) + 130rpx);
    box-sizing: border-box;
  }

  .advantage {
    padding: 0 40rpx 32rpx 40rpx;

    &-content {
      justify-content: space-between;
      padding: 16rpx;
      background: #1FB2FD99;
      border: 2rpx solid #FFFFFF4D;
      border-radius: 16rpx;
    }

    &-item {
      column-gap: 8rpx;
      padding-right: 16rpx;
      font-size: 26rpx;
      color: #FFFFFF;
      
      .icon {
        width: 40rpx;
        height: auto;
      }
    }
  }

  .card {
    width: 100%;
    // height: 100%;
    $advantage-height: 54px;
    // min-height: calc(100vh - #{$advantage-height} - (var(--status-bar-height) + 130rpx) - (120rpx + env(safe-area-inset-bottom)));
    min-height: calc(100vh - #{$advantage-height} - (var(--status-bar-height) + 130rpx));
    padding: 40rpx;
    padding-bottom: calc(40rpx + 120rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 1.4;
    background: linear-gradient(#DAF3FF, #FBFEFF 400rpx, #FBFEFF);
    border: 2rpx solid #FFFFFF;
    border-top-left-radius: 48rpx;
    border-top-right-radius: 48rpx;
  }

  .user {
    justify-content: space-between;
    padding: 32rpx 40rpx;
    background: linear-gradient(#DAF3FF, #FBFEFF 70%, #FBFEFF);
    border: 2rpx solid #FFFFFF;
    border-radius: 48rpx;
    column-gap: 24rpx;

    .avatar {
      flex: none;
      position: relative;
      width: 128rpx;
      height: 128rpx;
      border-radius: 24rpx;
      overflow: hidden;

      .img {
        width: 100%;
        height: 100%;
      }

    }
    
    .summary {
      flex: 1;
      column-gap: 26rpx;

      &-item {
        flex: 1;
        row-gap: 8rpx;

        &.name {
          min-width: 0;
          // flex: none;
          align-items: flex-start;
        }

        &.operate {
          justify-content: flex-end;
        }

        &-content {
          width: 100%;
          font-size: 32rpx;
          font-weight: 600;
          color: #000000;
        }

        &-label {
          width: 100%;
          font-size: 24rpx;
          color: #939393;
        }
      }
    }

    .btn {
      padding: 8rpx 24rpx;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 1.4;
      color: #FFFFFF;
      background: linear-gradient(to right, #21FEEC, #019AF9);
      border-radius: 28rpx;
    }
  }

  .btn-apply {
    margin-top: 32rpx;
    width: 100%;
    height: auto;
    padding: 0;
    background: none;
    font-size: 0;

    .bg {
      width: 100%;
      height: auto;
    }
  }

  .bar {
    margin-top: 24rpx;
    flex-wrap: nowrap;
    padding: 16rpx 24rpx;
    
    .col {
      flex: none;
    }

    .divider {
      flex: 1;
      
      .line {
        width: 2rpx;
        height: 44rpx;
        background: #00A9FF;
      }
    }

    .btn {
      column-gap: 8rpx;
      font-size: 24rpx;
      color: #181818;

      .icon {
        width: 64rpx;
        height: auto;
      }
    }
  }
  
  .list {
    margin-top: 32rpx;
    background: #FFFFFF;
    border: 2rpx solid #F0F0F0;
    border-radius: 24rpx;
    overflow: hidden;

    &-item {
      margin-top: 16rpx;
      padding: 16rpx 32rpx;
      font-size: 28rpx;
      color: #333333;
      background: #FFFFFF;
      border-bottom: 2rpx solid #F1F1F1;

      &:last-child {
        border: none;
      }

      .col {
        flex: 1;
        text-align: center;
      }

      .info {
        justify-content: flex-start;
        column-gap: 24rpx;

        .avatar {
          width: 72rpx;
          height: 72rpx;
          border-radius: 50%;
          overflow: hidden;
          
          .img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .desc {
        font-size: 26rpx;
        color: #A3A3A3;
      }
    }
  }
</style>