jjx-wap/components/user/invite.vue

<template> <!-- 我的邀请 -->
  <view>
    <view class="layout layout-invite">
      <template v-if="isInvite">
        <view class="flex justify-between align-center p-top-20">
          <view class="invite-title">邀请新用户免费兑换会员</view>
          <!--                    <u-button class="rule" text="活动规则"></u-button>-->
        </view>
        <view class="gong flex align-center m-top-30">
          <view class="m-right-20">共邀请
            <text class="red">{{ userData.inviteNum }}</text>
            人
          </view>
          <u-tag text="邀请列表" type="warning" size="mini"></u-tag>
          <view class="flex-1"></view>
          <view>我的邀请码：
            <text class="red">{{ userData.my_invite_code }}</text>
          </view>
        </view>
        <view class="invite-info flex flex-col justify-start items-start m-top-20 w-100p">
          <view class="item w-90p" v-if="item.recommendUpgrade && parseInt(item.recommendUpgrade) > 0"
                v-for="(item, index) in userLevelList" :key="index">
            <view class="b">{{ item.name }}</view>
            <view class="s">{{ item.upgradeDesc }}</view>
          </view>
        </view>
        <view class="invite-progress m-top-30">
          <u-line-progress :percentage="progress" activeColor="#A92924" height="16"></u-line-progress>
          <view class="flex justify-between m-top-10">
            <view class="lv red">已邀请{{ userData.inviteNum }}人</view>
            <!--                        <view class="lv red">9人</view>-->
          </view>
        </view>
        <view class="invite-btn flex justify-center">
          <u-button class="btn-style" color="#A92924" :plain="true" text="复制邀请码" @click="copy"></u-button>
          <u-button class="btn-style" color="#A92924" text="兑换会员" @click="isInvite = false"></u-button>
        </view>
      </template>
      <template v-if="!isInvite">
        <view class="flex justify-between align-center p-top-20">
          <view class="invite-title">请选择要兑换的会员！</view>
          <view class="invited text-right">
            <text>已邀请
              <text class="red">10</text>
              人
            </text>
            ,
            <text>已兑换
              <text class="red">10</text>
              人
            </text>
            ,
            <text>剩余
              <text class="red">10</text>
              人可兑换
            </text>
          </view>
        </view>
        <view class="invite-info flex justify-between m-top-20">
          <view v-for="(item, index) in userLevelList" :key="index"
                v-if="item.recommendUpgrade && parseInt(item.recommendUpgrade) > 0"
                :class="['item', {active: inviteIndex === index}]" @click="onSelect(item, index)">
            <view class="b">{{ item.name }}</view>
            <view class="s">{{ item.upgradeDesc }}</view>
          </view>
        </view>
        <view class="invite-btn flex justify-center">
          <u-button
            class="btn-style"
            color="#A92924"
            :plain="true"
            text="取消兑换"
            @click="isInvite = true"
          ></u-button>
          <u-button
            class="btn-style"
            color="#A92924"
            text="确认"
            @click="exchangeUpgrade"
          ></u-button>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    userData: {
      type: Object
    }
  },
  data() {
    return {
      isInvite: true,
      inviteIndex: null,
      userLevelList: [],
      maxUpgradeNum: 100,
      progress: 0,
    };
  },
  methods: {
    onSelect(item, index) {
      if (parseInt(this.userData.inviteNum) >= item.recommendUpgrade && item.level > parseInt(this.userData.userLevel))
        this.inviteIndex = index
      else this.$message.error('您的邀请人数不足')
    },
    copy() {
      const url = window.location.origin + `/#/pages/auth/register/register?code=${this.userData.my_invite_code}`
      document.oncopy = function (e) {
        e.clipboardData.setData('text', url);
        e.preventDefault();
        document.oncopy = null;
      }
      document.execCommand('Copy');
      this.$message({
        type: 'success',
        message: '邀请码已复制'
      })
    },
    async getUserLevelList() {
      const {rows} = await vk.callFunction({
        url: 'client/userLevel/pub/getList',
        data: {
          pageIndex: 1,
          pageSize: 200
        },
      });
      this.userLevelList = rows
      this.userLevelList.forEach(item => {
        if (item.recommendUpgrade && parseInt(item.recommendUpgrade) > 0)
          this.maxUpgradeNum = Math.max(this.maxUpgradeNum, item.recommendUpgrade)
      })
      console.log(this.userLevelList)
      this.progress = parseInt(this.userData.inviteNum) / this.maxUpgradeNum * 100
    },
    async exchangeUpgrade() {
      await vk.callFunction({
        url: 'client/user/kh/exchangeUpgrade',
        data: {
          id: this.userLevelList[this.inviteIndex]._id
        }
      });
      this.$message.success('兑换成功')
      this.isInvite = true
    }
  },
  mounted() {
    this.getUserLevelList()
  }
}
</script>

<style lang="scss">
.layout-invite {
  padding: 20rpx 30rpx;

  .invite-title {
    font-size: 28rpx;
    font-weight: 600;
    line-height: 48rpx;
    color: #A92924;
  }

  .rule {
    margin: 0;
    font-size: 24rpx;
    width: 130rpx;
    height: 48rpx;
    color: #101010;
    border-radius: 8rpx;
    background: #dedede;
  }

  .gong {
    font-size: 28rpx;
    line-height: 48rpx;
    color: #000000;
  }

  .invite-info {
    padding: 30rpx 0;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      //width: 210rpx;
      //height: 150rpx;
      line-height: 48rpx;
      color: #A92924;
      border-radius: 12rpx;
      box-shadow: 0px 2px 6px 0px rgba(169, 41, 36, 1);
      margin: 0 10rpx;
      padding: 10rpx;
      text-align: center;

      .b {
        font-size: 28rpx;
        font-weight: 500;
      }

      .s {
        font-size: 24rpx;
        margin-top: 20rpx;
      }
    }

    .active {
      color: #ffffff;
      background: #A92924;
    }
  }

  .lv {
    font-size: 26rpx;
    line-height: 40rpx;
  }

  .invite-btn {
    margin-top: 80rpx;
    padding: 20rpx 20rpx;

    .btn-style {
      margin: 0 30rpx;
    }
  }

  .invited {
    font-size: 24rpx;
    color: #101010;
  }
}
</style>