wechatShopUni/components/goods-skeleton/goods-skelet...

<template>
  <view class="skeleton" :class="{ 'skeleton--animate': animate }">
    <!-- 轮播图骨架 -->
    <view class="skeleton__banner"></view>
    
    <!-- 价格区域骨架 -->
    <view class="skeleton__price">
      <view class="skeleton__price-main"></view>
      <view class="skeleton__price-market"></view>
    </view>
    
    <!-- 标题骨架 -->
    <view class="skeleton__title">
      <view class="skeleton__title-line"></view>
      <view class="skeleton__title-line" style="width: 80%;"></view>
    </view>
    
    <!-- 标签骨架 -->
    <view class="skeleton__tags">
      <view class="skeleton__tag"></view>
      <view class="skeleton__tag"></view>
      <view class="skeleton__tag"></view>
    </view>
    
    <!-- 规格骨架 -->
    <view class="skeleton__specs">
      <view class="skeleton__spec-item"></view>
      <view class="skeleton__spec-item"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'goods-skeleton',
  props: {
    animate: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss">
.skeleton {
  padding: 30rpx;
  background: #fff;
  
  &--animate {
    .skeleton__banner,
    .skeleton__price-main,
    .skeleton__price-market,
    .skeleton__title-line,
    .skeleton__tag,
    .skeleton__spec-item {
      background: linear-gradient(
        90deg,
        #f2f2f2 25%,
        #e6e6e6 37%,
        #f2f2f2 63%
      );
      background-size: 400% 100%;
      animation: skeleton-loading 1.4s ease infinite;
    }
  }
  
  &__banner {
    width: 100%;
    height: 750rpx;
    background: #f2f2f2;
    border-radius: 12rpx;
    margin-bottom: 30rpx;
  }
  
  &__price {
    margin-bottom: 20rpx;
    
    &-main {
      width: 200rpx;
      height: 56rpx;
      background: #f2f2f2;
      border-radius: 6rpx;
      margin-bottom: 12rpx;
    }
    
    &-market {
      width: 160rpx;
      height: 32rpx;
      background: #f2f2f2;
      border-radius: 4rpx;
    }
  }
  
  &__title {
    margin-bottom: 20rpx;
    
    &-line {
      width: 100%;
      height: 40rpx;
      background: #f2f2f2;
      border-radius: 4rpx;
      margin-bottom: 12rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  
  &__tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8rpx 20rpx;
  }
  
  &__tag {
    width: 120rpx;
    height: 48rpx;
    background: #f2f2f2;
    border-radius: 24rpx;
    margin: 8rpx;
  }
  
  &__specs {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }
  
  &__spec-item {
    width: 100%;
    height: 88rpx;
    background: #f2f2f2;
    border-radius: 8rpx;
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
</style>