app/sheep/components/s-user-card/s-user-card.vue

<!-- 装修用户组件：用户卡片 -->
<template>
  <view class="ss-user-info-wrap ss-p-t-50" :style="[bgStyle, { marginLeft: `${data.space}px` }]">
    <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('/static/img/shop/default_avatar.png')" mode="aspectFill"
            @tap="sheep.$router.go('/pages/user/info')">
          </image>
        </view>
        <view>
          <view class="nickname-box ss-flex ss-col-center"
            @tap="!userInfo?.nickname && sheep.$router.go('/pages/app/sign')">
            <view class="nick-name ss-m-r-20">{{ userInfo?.nickname || nickname }}</view>
          </view>
        </view>
      </view>
      <view class="right-box ss-m-r-52">
        <button class="ss-reset-button" @tap="showShareModal">
          <text class="sicon-qrcode"></text>
        </button>
      </view>
    </view>
    <view class="sign-card">
      <image class="sign-card__bg-img"
        src="https://seal-img.nos-jd.163yun.com/obj/w5rCgMKVw6DCmGzCmsK-/60938586057/a6c7/0b14/00ec/e47d6346bcc8c5764ca7a85c4da7736f.png" />
      <view class="sign-card__content">
        <view class="sign-card__info">

          <view class="sign-card__title">
            <image class="sign-card__icon" :src="sheep.$url.static('/static/user/qd.png')" />
            <text class="sign-card__text">每日签到</text>
          </view>
          <text class="sign-card__desc">积分可在购物时抵扣现金结算</text>
        </view>
        <text class="sign-card__btn" @tap="sheep.$router.go('/pages/app/sign')">立即签到</text>
      </view>
    </view>
    <!-- 提示绑定手机号 先隐藏 yudao 需要再修改 -->
    <view class="bind-mobile-box ss-flex ss-row-between ss-col-center" v-if="isLogin && !userInfo.mobile">
      <view class="ss-flex">
        <text class="cicon-mobile-o" />
        <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 } from 'vue';
import sheep from '@/sheep';
import {
  showShareModal,
  showAuthModal,
} from '@/sheep/hooks/useModal';

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

// 是否登录
const isLogin = computed(() => sheep.$store('user').isLogin);
// 接收参数
const props = defineProps({
  // 装修数据
  data: {
    type: Object,
    default: () => ({}),
  },
  // 装修样式
  styles: {
    type: Object,
    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',
  },
});

// 设置背景样式
const bgStyle = computed(() => {
  // 直接从 props.styles 解构
  const { bgType, bgImg, bgColor } = props.styles;

  // 根据 bgType 返回相应的样式
  return {
    background: bgType === 'img'
      ? `url(${bgImg}) no-repeat top center / 100% 100%`
      : bgColor,
  };
});

// 绑定手机号
function onBind() {
  showAuthModal('changeMobile');
}
</script>

<style lang="scss" scoped>
.sign-card {
  position: relative;
  width: calc(100% - 32px);
  height: auto;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(268.29deg, #2d3057 5.97%, #3f446f 87.85%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 85px;
  margin: 0 16px;

  &__bg-img {
    width: 230px;
    height: 225px;
    position: absolute;
    transform: rotate(34deg);
    object-fit: cover;
    right: -124px;
    bottom: -131px;
  }

  &__content {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 83px;
    width: max-content;
    height: max-content;
    margin: auto;
  }

  &__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  &__desc {
    font-size: 12px;
    font-family: 'PingFang SC';
    line-height: 17px;
    color: rgba(255, 255, 255, 0.4);
    white-space: pre;
  }

  &__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-family: 'PingFang SC';
    line-height: 22px;
    color: #ffffff;
    white-space: pre;
  }

  &__icon {
    width: 25px;
    height: 25px;
    // margin: -34px 0 4px 0;
  }

  &__btn {
    padding: 4px 12px;
    border-radius: 286px;
    background-color: #ffffff;
    font-size: 12px;
    font-family: 'PingFang SC';
    line-height: 16px;
    color: #31345c;
    white-space: pre;
  }
}

.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;
  }
}

.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>