ylrzCourseMall_uniapp/pages_user/user/inviteFriend.vue

<template>
  <view class="invite-link-page">
    <view class="container">
      <view class="header">
        <view class="title">邀请好友</view>
        <view class="desc">通过微信分享邀请好友，直接打开小程序</view>
      </view>

      <view class="main-card">
        <!-- <view class="invite-info">
          <view class="info-row">
            <text class="label">邀请人ID</text>
            <text class="value">{{ userId }}</text>
          </view>
          <view class="info-row">
            <text class="label">邀请参数</text>
            <text class="value link-text">inviteUserId={{ userId }}</text>
          </view>
        </view> -->
        <view class="invite-info">
            <view class="info-row">
            <text class="label">邀请人ID</text>
            <text class="value">{{ userId }}</text>
          </view>
          <view class="info-row">
            <text class="label">邀请人</text>
            <text class="value">{{ userInfo.nickname }}</text>
          </view>
        </view>
        <view class="share-btn primary">
          <button open-type="share" class="share-button">
            <text class="share-icon"></text>
            <text>分享给微信好友</text>
          </button>
        </view>
      </view>

      <view class="tips-section">
        <view class="tip-title">邀请说明</view>
        <view class="tip-list">
          <view class="tip-item">
            <text class="tip-number">1</text>
            <text class="tip-text">点击分享按钮，选择要邀请的好友</text>
          </view>
          <view class="tip-item">
            <text class="tip-number">2</text>
            <text class="tip-text">好友点击分享卡片将直接打开小程序登录页</text>
          </view>
          <view class="tip-item">
            <text class="tip-number">3</text>
            <text class="tip-text">好友登录后自动绑定邀请关系</text>
          </view>
        </view>
      </view>

      <view class="note-section">
        <text class="note-title">温馨提示</text>
        <text class="note-content">微信小程序的可复制链接需要通过微信官方API生成，如需此功能请联系后端开发配置。当前推荐使用分享按钮邀请好友。</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "InviteFriend",
  data() {
    return {
      userId: '',
      invitePath: '',
      userInfo: JSON.parse(uni.getStorageSync('userInfo')) || {}
    };
  },
  mounted() {
    this.initData();
  },
  onShareAppMessage() {
    return {
      title: '邀请你加入健康商城',
      path: `/pages/home/index?inviteUserId=${this.userId}`,
      imageUrl: '/static/logo.jpg',
      success(res) {
        uni.showToast({
          title: '分享成功',
          icon: 'success'
        });
      },
      fail(err) {
        uni.showToast({
          title: '分享失败',
          icon: 'none'
        });
      }
    };
  },
  methods: {
    initData() {
      if (this.userInfo) {
        this.userId = this.userInfo.userId;
      } else {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        return;
      }
      this.invitePath = `/pages/home/index?inviteUserId=${this.userInfo.userId}`;
      this.invitePath = `/pages/auth/login?inviteUserId=${this.userInfo.userId}`;

    },

    handleShare() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage']
      });

      // uni.showToast({
      //   title: '请点击右上角分享',
      //   icon: 'none',
      //   duration: 2000
      // });
    }
  }
};
</script>

<style lang="less">
.invite-link-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.container {
  padding: 60rpx 40rpx;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;

  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20rpx;
  }

  .desc {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.main-card {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);

  .invite-info {
    margin-bottom: 30rpx;

    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .label {
        font-size: 28rpx;
        color: #999;
      }

      .value {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;

        &.link-text {
          color: #4C49E9;
          word-break: break-all;
        }
      }
    }
  }

  .share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96rpx;
    border-radius: 48rpx;
    font-size: 32rpx;
    margin-bottom: 20rpx;

    .share-icon {
      font-family: iconfont;
      margin-right: 12rpx;
      font-size: 36rpx;
    }

    &.primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #fff;
    }

    &.secondary {
      background: #f5f5f5;
      color: #666;
    }
  }

  .share-button {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      display: none;
    }
  }
}

.tips-section {
  margin-top: 40rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24rpx;
  padding: 30rpx;

  .tip-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 24rpx;
  }

  .tip-list {
    .tip-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .tip-number {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        flex-shrink: 0;
      }

      .tip-text {
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
      }
    }
  }
}

.note-section {
  margin-top: 30rpx;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16rpx;
  padding: 24rpx;

  .note-title {
    font-size: 26rpx;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    margin-bottom: 12rpx;
  }

  .note-content {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
  }
}
</style>on-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 24rpx;
}
}

.rewards-list {
.reward-item {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #f5f5f5;

&:last-child {
border-bottom: none;
}

.reward-icon {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
}

.reward-info {
flex: 1;

.reward-title {
font-size: 28rpx;
color: #333;
margin-bottom: 6rpx;
}

.reward-desc {
font-size: 24rpx;
color: #999;
}
}

.reward-value {
font-size: 28rpx;
font-weight: bold;
color: #4C49E9;
}
}
}

.share-list {
display: flex;
justify-content: space-around;

.share-item {
display: flex;
flex-direction: column;
align-items: center;

.share-icon {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;

.iconfont {
font-size: 48rpx;
}
}

.wechat-icon {
background: linear-gradient(135deg, #07c160 0%, #10b981 100%);
color: #fff;
}

.moments-icon {
background: linear-gradient(135deg, #e6d5b8 0%, #d4a373 100%);
color: #fff;
}

.qq-icon {
background: linear-gradient(135deg, #1677ff 0%, #096dd9 100%);
color: #fff;
}

.link-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
}

.share-name {
font-size: 24rpx;
color: #666;
}
}
}

.invited-section {
.invited-count {
display: flex;
flex-direction: column;
align-items: center;
padding: 30rpx 0;
border-bottom: 1rpx solid #f5f5f5;

.count-num {
font-size: 56rpx;
font-weight: bold;
color: #4C49E9;
}

.count-desc {
font-size: 26rpx;
color: #999;
margin-top: 8rpx;
}
}

.invited-list {
padding-top: 20rpx;

.invited-item {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #f5f5f5;

&:last-child {
border-bottom: none;
}

.avatar {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
overflow: hidden;
margin-right: 20rpx;

image {
width: 100%;
height: 100%;
}
}

.info {
flex: 1;

.name {
font-size: 28rpx;
color: #333;
margin-bottom: 6rpx;
}

.time {
font-size: 24rpx;
color: #999;
}
}

.status {
font-size: 22rpx;
color: #999;
padding: 6rpx 16rpx;
border-radius: 20rpx;
background: #f5f5f5;

&.active {
color: #4C49E9;
background: rgba(76, 73, 233, 0.1);
}
}
}
}

.empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 40rpx 0;

.empty-icon {
width: 120rpx;
height: 120rpx;
margin-bottom: 20rpx;
}

.empty-text {
font-size: 28rpx;
color: #999;
margin-bottom: 24rpx;
}

.empty-btn {
padding: 16rpx 48rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 28rpx;
border-radius: 30rpx;
}
}
}

.bottom-btn {
position: fixed;
left: 30rpx;
right: 30rpx;
bottom: 30rpx;
height: 96rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 32rpx;
font-weight: bold;
border-radius: 48rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.4);
}
</style>