微信小店联盟带货小程序

user-avatar.vue 787B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <template>
  2. <view class="user-avatar">
  3. <block v-if="isLogin">
  4. <!-- 使用微信开放能力展示用户头像 -->
  5. <open-data type="userAvatarUrl" class="avatar"></open-data>
  6. </block>
  7. <block v-else>
  8. <!-- 未登录时显示默认头像 -->
  9. <image src="/static/images/default-avatar.png" class="avatar"></image>
  10. </block>
  11. </view>
  12. </template>
  13. <script>
  14. import { checkNeedLogin } from '../../utils/login.js'
  15. export default {
  16. name: 'UserAvatar',
  17. data() {
  18. return {
  19. isLogin: false
  20. }
  21. },
  22. created() {
  23. // 检查登录状态
  24. this.isLogin = !checkNeedLogin()
  25. }
  26. }
  27. </script>
  28. <style>
  29. .user-avatar {
  30. width: 80rpx;
  31. height: 80rpx;
  32. border-radius: 50%;
  33. overflow: hidden;
  34. }
  35. .avatar {
  36. width: 100%;
  37. height: 100%;
  38. }
  39. </style>