fengketrade/frontend/sheep/components/s-user-card/s-user-card.vue

<!-- 页面 -->
<template>
  <view class="ss-user-info-wrap ss-p-t-50">
    <view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
      <view class="left-box ss-flex ss-col-center ss-m-l-36">
        <view class="avatar-box ss-m-r-24">
          <image
            class="avatar-img"
            :src="
              isLogin
                ? sheep.$url.cdn(userInfo.avatar)
                : sheep.$url.static('/assets/addons/shopro/uniapp/default_avatar.png')
            "
            mode="aspectFill"
            @tap="sheep.$router.go('/pages/user/info')"
          ></image>
        </view>
        <view>
          <view class="nickname-box ss-flex ss-col-center">
            <view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
          </view>
        </view>
      </view>
      <view class="right-box ss-m-r-36" v-if="isLogin && state.inviteCode">
        <view class="invite-code-box ss-flex ss-col-center" @tap="copyInviteCode">
          <text class="invite-code-label">邀请码:</text>
          <text class="invite-code-value">{{ state.inviteCode }}</text>
          <text class="cicon-copy copy-icon"></text>
        </view>
      </view>
    </view>

    <!-- 绑定手机号提示已隐藏 -->
    <view
      class="bind-mobile-box ss-flex ss-row-between ss-col-center"
      v-if="false"
    >
      <view class="ss-flex">
        <text class="cicon-mobile-o"></text>
        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
      </view>
      <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
    </view>
  </view>
</template>

<script setup>
  /**
   * 用户卡片
   *
   * @property {Number} leftSpace 									- 容器左间距
   * @property {Number} rightSpace 									- 容器右间距
   *
   * @property {String} avatar 					- 头像
   * @property {String} nickname 					- 昵称
   * @property {String} vip		  				- 等级
   * @property {String} collectNum 				- 收藏数
   * @property {String} likeNum 					- 点赞数
   *
   *
   */
  import { computed, reactive, watch, onMounted } from 'vue';
  import sheep from '@/sheep';
  import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';

  // 用户信息
  const userInfo = computed(() => sheep.$store('user').userInfo);

  // 是否登录
  const isLogin = computed(() => sheep.$store('user').isLogin);

  // 状态管理
  const state = reactive({
    inviteCode: '',
  });

  // 获取邀请码
  const getInviteCode = async () => {
    if (!isLogin.value) return;
    
    try {
      const { data, code } = await sheep.$api.invite.myCode();
      if (code === 1 && data) {
        state.inviteCode = data.invite_code || data;
      }
    } catch (error) {
      console.error('获取邀请码失败:', error);
    }
  };

  // 监听登录状态变化
  watch(isLogin, (newVal) => {
    if (newVal) {
      getInviteCode();
    } else {
      state.inviteCode = '';
    }
  });

  // 组件挂载时获取邀请码
  onMounted(() => {
    if (isLogin.value) {
      getInviteCode();
    }
  });

  // 复制邀请码
  const copyInviteCode = () => {
    if (!state.inviteCode) return;
    
    uni.setClipboardData({
      data: state.inviteCode,
      success: () => {
        sheep.$helper.toast('邀请码已复制');
      },
      fail: () => {
        sheep.$helper.toast('复制失败，请重试');
      }
    });
  };

  // 接收参数
  const props = defineProps({
    background: {
      type: String,
      default: '',
    },
    // 头像
    avatar: {
      type: String,
      default: '',
    },
    nickname: {
      type: String,
      default: '请先登录',
    },
    vip: {
      type: [String, Number],
      default: '1',
    },
    collectNum: {
      type: [String, Number],
      default: '1',
    },
    likeNum: {
      type: [String, Number],
      default: '1',
    },
  });

  function onBind() {
    showAuthModal('changeMobile');
  }
</script>

<style lang="scss" scoped>
  .ss-user-info-wrap {
    box-sizing: border-box;

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

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

    .nick-name {
      font-size: 34rpx;
      font-weight: 400;
      color: #333333;
      line-height: normal;
    }

    .vip-img {
      width: 30rpx;
      height: 30rpx;
    }

    .sicon-qrcode {
      font-size: 40rpx;
    }
  }

  .invite-code-box {
    cursor: pointer;
    padding: 8rpx 16rpx;
    background: #fff5f0;
    border-radius: 24rpx;
    border: 1rpx solid #ffe0cc;
    
    .invite-code-label {
      font-size: 24rpx;
      color: #999999;
      margin-right: 8rpx;
    }
    
    .invite-code-value {
      font-size: 26rpx;
      font-weight: 600;
      color: #ff6100;
      margin-right: 10rpx;
    }
    
    .copy-icon {
      font-size: 26rpx;
      color: #ff6100;
      opacity: 0.8;
    }
  }

  .bind-mobile-box {
    width: 100%;
    height: 84rpx;
    padding: 0 34rpx 0 44rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);

    .cicon-mobile-o {
      font-size: 30rpx;
      color: #ff690d;
    }

    .mobile-title {
      font-size: 24rpx;
      font-weight: 500;
      color: #ff690d;
    }

    .bind-btn {
      width: 100rpx;
      height: 50rpx;
      background: #ff6100;
      border-radius: 25rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }
</style>