cfc/cfc-frontend/pages/guide/invite/share.vue

<template>
  <view class="container">
    <view class="header">
      <text class="title">邀请分享</text>
      <text class="subtitle">邀请家长或新成长规划师加入</text>
    </view>

    <!-- 邀请码列表 -->
    <view class="invite-codes-section">
      <view class="section-title">我的邀请码</view>
      <view class="invite-codes-list">
        <view 
          class="invite-code-item" 
          v-for="code in inviteCodes" 
          :key="code.id"
        >
          <view class="code-info">
            <text class="code-text">{{ code.code }}</text>
            <text class="code-status" :class="'status-' + code.status">
              {{ getStatusText(code.status) }}
            </text>
          </view>
          <view class="code-stats">
            <text class="stat">已使用: {{ code.useCount }}/{{ code.maxUseCount }}</text>
            <text class="stat" v-if="code.expireAt">过期: {{ formatDate(code.expireAt) }}</text>
          </view>
        </view>
      </view>
      <button class="btn-generate" @click="generateInviteCode">生成新邀请码</button>
    </view>

    <!-- 分享方式 -->
    <view class="share-section">
      <view class="section-title">分享方式</view>
      
      <!-- 复制链接 -->
      <view class="share-item" @click="copyInviteLink">
        <view class="share-icon">🔗</view>
        <view class="share-content">
          <text class="share-title">复制邀请链接</text>
          <text class="share-desc">分享链接给家长或新成长规划师</text>
        </view>
        <text class="share-arrow">›</text>
      </view>

      <!-- 生成二维码 -->
      <view class="share-item" @click="showQrcode">
        <view class="share-icon">📱</view>
        <view class="share-content">
          <text class="share-title">生成二维码</text>
          <text class="share-desc">扫码即可加入</text>
        </view>
        <text class="share-arrow">›</text>
      </view>

      <!-- 转发给朋友 -->
      <view class="share-item" @click="shareToFriend">
        <view class="share-icon">📤</view>
        <view class="share-content">
          <text class="share-title">转发给朋友</text>
          <text class="share-desc">直接分享到微信</text>
        </view>
        <text class="share-arrow">›</text>
      </view>
    </view>

    <!-- 使用说明 -->
    <view class="tips-section">
      <view class="section-title">使用说明</view>
      <view class="tips-list">
        <view class="tip-item">
          <text class="tip-icon">💡</text>
          <text class="tip-text">家长通过邀请码注册后，会自动关联到您</text>
        </view>
        <view class="tip-item">
          <text class="tip-icon">💡</text>
          <text class="tip-text">新成长规划师通过邀请码注册，会成为您的下级</text>
        </view>
        <view class="tip-item">
          <text class="tip-icon">💡</text>
          <text class="tip-text">您可以查看所有下级成长规划师的测评报告</text>
        </view>
        <view class="item">
          <text class="tip-icon">💡</text>
          <text class="tip-text">邀请码可以设置使用次数和过期时间</text>
        </view>
      </view>
    </view>

    <!-- 二维码弹窗 -->
    <view class="qrcode-modal" v-if="showQrcodeModal" @click="showQrcodeModal = false">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">邀请二维码</text>
          <text class="modal-close" @click="showQrcodeModal = false">✕</text>
        </view>
        <view class="qrcode-container">
          <canvas canvas-id="qrcodeCanvas" class="qrcode-canvas"></canvas>
        </view>
        <view class="modal-actions">
          <button class="btn-save" @click="saveQrcode">保存图片</button>
          <button class="btn-close" @click="showQrcodeModal = false">关闭</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getInviteCodes, generateInviteCode } from '../../../utils/api.js'

export default {
  data() {
    return {
      inviteCodes: [],
      currentInviteCode: null,
      showQrcodeModal: false
    }
  },
  onLoad() {
    this.loadInviteCodes()
  },
  onShow() {
    this.loadInviteCodes()
  },
  methods: {
    async loadInviteCodes() {
      try {
        const res = await getInviteCodes()
        if (res.code === 200) {
          this.inviteCodes = res.data || []
          // 如果有可用的邀请码，使用第一个
          const activeCode = this.inviteCodes.find(code => code.status === 'active')
          if (activeCode) {
            this.currentInviteCode = activeCode
          }
        }
      } catch (e) {
        console.error('获取邀请码失败', e)
      }
    },

    async generateInviteCode() {
      try {
        uni.showLoading({ title: '生成中...' })
        const res = await generateInviteCode()
        uni.hideLoading()

        if (res.code === 200) {
          this.currentInviteCode = res.data
          uni.showToast({
            title: '生成成功',
            icon: 'success'
          })
          this.loadInviteCodes()
        } else {
          uni.showToast({
            title: res.message || '生成失败',
            icon: 'none'
          })
        }
      } catch (e) {
        uni.hideLoading()
        uni.showToast({
          title: '生成失败',
          icon: 'none'
        })
      }
    },

    copyInviteLink() {
      if (!this.currentInviteCode) {
        uni.showToast({
          title: '请先生成邀请码',
          icon: 'none'
        })
        return
      }

      const inviteUrl = `pages/guide/register/index?inviteCode=${this.currentInviteCode.code}`
      
      uni.setClipboardData({
        data: inviteUrl,
        success: () => {
          uni.showToast({
            title: '链接已复制',
            icon: 'success'
          })
        }
      })
    },

    showQrcode() {
      if (!this.currentInviteCode) {
        uni.showToast({
          title: '请先生成邀请码',
          icon: 'none'
        })
        return
      }

      this.showQrcodeModal = true
      this.$nextTick(() => {
        this.drawQrcode()
      })
    },

    drawQrcode() {
      // TODO: 使用二维码生成库生成二维码
      // 这里简化处理，使用 Canvas 绘制占位符
      const ctx = uni.createCanvasContext('qrcodeCanvas')
      const canvasWidth = 300
      const canvasHeight = 300

      ctx.setFillStyle('#FFFFFF')
      ctx.fillRect(0, 0, canvasWidth, canvasHeight)

      ctx.setFillStyle('#333333')
      ctx.font = '20px sans-serif'
      ctx.textAlign = 'center'
      ctx.fillText('邀请码', canvasWidth / 2, 100)

      ctx.font = 'bold 40px sans-serif'
      ctx.fillText(this.currentInviteCode.code, canvasWidth / 2, 150)

      ctx.font = '16px sans-serif'
      ctx.fillText('扫码成为成长规划师', canvasWidth / 2, 220)

      ctx.draw()
    },

    saveQrcode() {
      uni.canvasToTempFilePath({
        canvasId: 'qrcodeCanvas',
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              })
            },
            fail: () => {
              uni.showToast({
                title: '保存失败',
                icon: 'none'
              })
            }
          })
        }
      })
    },

    shareToFriend() {
      if (!this.currentInviteCode) {
        uni.showToast({
          title: '请先生成邀请码',
          icon: 'none'
        })
        return
      }

      const inviteUrl = `pages/guide/register/index?inviteCode=${this.currentInviteCode.code}`
      
      uni.share({
        provider: 'weixin',
        scene: {
          type: 0,
          title: '成为成长规划师',
          path: inviteUrl
        },
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        },
        fail: () => {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
        }
      })
    },

    getStatusText(status) {
      const statusMap = {
        'active': '可用',
        'used': '已用完',
        'expired': '已过期'
      }
      return statusMap[status] || status
    },

    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      return `${date.getMonth() + 1}月${date.getDate()}日`
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
  background: #F8F8F8;
  min-height: 100vh;
}

.header {
  text-align: center;
  padding: 60rpx 0 40rpx;
}

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

.subtitle {
  font-size: 28rpx;
  color: #666;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.invite-codes-section,
.share-section,
.tips-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.invite-codes-list {
  margin-bottom: 20rpx;
}

.invite-code-item {
  background: #F8F8F8;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.code-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.code-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  font-family: monospace;
}

.code-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.status-active {
  background: #E8F5E9;
  color: #4CAF50;
}

.status-used {
  background: #FFF3E0;
  color: #FF9800;
}

.status-expired {
  background: #FFEBEE;
  color: #F44336;
}

.code-stats {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}

.stat {
  margin-right: 20rpx;
}

.btn-generate {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.share-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #F0F0F0;
}

.share-item:last-child {
  border-bottom: none;
}

.share-icon {
  font-size: 48rpx;
  margin-right: 20rpx;
}

.share-content {
  flex: 1;
}

.share-title {
  font-size: 30rpx;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

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

.share-arrow {
  font-size: 40rpx;
  color: #CCC;
}

.tips-list {
  margin-top: 20rpx;
}

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

.tip-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}

.tip-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

.qrcode-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-content {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 80%;
  max-width: 400rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
  padding: 10rpx;
}

.qrcode-container {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.qrcode-canvas {
  width: 300rpx;
  height: 300rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 10rpx;
}

.modal-actions {
  display: flex;
  gap: 20rpx;
}

.btn-save,
.btn-close {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: bold;
}

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

.btn-close {
  background: #F0F0F0;
  color: #333;
}
</style>