zhibo/pages_course/components/shopPopup.vue

<template>
  <u-popup 
    :show="show" 
    @close="handleClose" 
    round="20rpx" 
    bgColor="#f3f5f9" 
    zIndex="10075"
  >
    <view class="shoppop">
      <!-- 顶部搜索和操作区域 -->
      <view class="shoppop-top">
        <view class="search-input x-f">
          <image class="w24 mr16" src="/static/images/search.png" mode="widthFix" />
          <input 
            placeholder="请搜索商品" 
            :value="searchKeyword" 
            @input="handleSearchInput" 
          />
        </view>
        <view class="search-top" @click="handleOrderClick">
          <image class="w48 h48" src="/static/images/carts.png" />
          <view style="text-align: center">订单</view>
        </view>
        <view class="search-top" @click="handleMoreClick">
          <image class="w48 h48" src="/static/images/search2.png" />
          <view style="text-align: center">更多</view>
        </view>
      </view>

      <!-- 商品列表区域 -->
      <scroll-view 
        enable-flex 
        scroll-y 
        class="shop-list" 
        :style="{ height: boxHeight + 'px' }"
      >
        <!-- 骨架屏 -->
        <view v-if="loading && products.length === 0" class="skeleton-list">
          <view v-for="n in 6" :key="n" class="skeleton-item">
            <view class="skeleton-img"></view>
            <view class="skeleton-content">
              <view class="skeleton-line short"></view>
              <view class="skeleton-line medium"></view>
              <view class="skeleton-line long"></view>
            </view>
          </view>
        </view>

        <!-- 实际商品列表 -->
        <template v-else>
          <view 
            v-for="(item, index) in products" 
            :key="index" 
            class="list-item"
          >
            <view class="goods-img">
              <image class="img" :src="item.imgUrl" mode="widthFix" />
              <view class="goods-label">{{ index + 1 }}</view>
            </view>
            <view class="goods-right">
              <view class="goods-title">{{ item.productName }}</view>
              <view class="goods-people">{{ item.sales }} 人已购</view>
              <view class="goods-shop">
                <text class="nummber">
                  <text style="font-size: 20rpx; font-weight: 600">￥</text>
                  <text style="font-size: 36rpx; font-weight: bold">
                    {{ Math.trunc(item.price) }}
                  </text>
                  .{{ getPureDecimal(item.price) ? getPureDecimal(item.price) : '00' }}
                </text>
                <view class="btn-group x-f">
                  <view class="collect-btn">
                    <image 
                      v-if="item.isFavorite" 
                      @click="handleCollect(item)" 
                      class="w36 h36" 
                      style="vertical-align: middle" 
                      src="/static/images/collect_select.png" 
                    />
                    <image 
                      v-else 
                      @click="handleCollect(item)" 
                      class="w36 h36"
                      style="vertical-align: middle" 
                      src="/static/images/collect.png" 
                    />
                  </view>
                  <view 
                    v-if="item.status == 1" 
                    class="shop-btn"
                    @click="handleGoShop(item)"
                  >
                    去购买
                  </view>
                  <view v-else-if="item.status == 0" class="shop-btn">已下架</view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </scroll-view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: 'ShoppingCartPopup',
  
  props: {
    // 控制显示/隐藏
    show: {
      type: Boolean,
      default: false
    },
    // 搜索关键词
    searchKeyword: {
      type: String,
      default: ''
    },
    // 商品列表
    products: {
      type: Array,
      default: () => []
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 滚动区域高度
    boxHeight: {
      type: Number,
      default: 300
    }
  },

  methods: {
    /**
     * 关闭弹窗
     */
    handleClose() {
      this.$emit('close');
    },

    /**
     * 处理搜索输入
     */
    handleSearchInput(e) {
      this.$emit('search', e.detail.value);
    },

    /**
     * 处理订单点击
     */
    handleOrderClick() {
      this.$emit('navigate-to-order');
    },

    /**
     * 处理更多点击
     */
    handleMoreClick() {
      this.$emit('show-more');
    },

    /**
     * 处理收藏点击
     */
    handleCollect(item) {
      this.$emit('collect', item);
    },

    /**
     * 处理去购买点击
     */
    handleGoShop(item) {
      this.$emit('go-shop', item);
    },

    /**
     * 获取价格小数部分
     */
    getPureDecimal(num, precision = 6) {
      const decimalPart = Math.abs(num).toFixed(precision).split('.')[1];
      return decimalPart?.replace(/0+$/, '') || '';
    }
  }
};
</script>

<style scoped lang="scss">
.shoppop {
  padding: 22rpx 16rpx;

  .shoppop-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16rpx 22rpx;

    .search-input {
      width: 414rpx;
      height: 76rpx;
      background: #ffffff;
      border-radius: 36rpx;
      margin-left: 20rpx;
      padding: 0 32rpx;
      box-sizing: border-box;
      font-size: 24rpx;
      margin-right: 24rpx;
    }

    .search-top {
      font-size: 20rpx;
      color: #222222;
      text-align: center;
    }
  }

  .shop-list {
    overflow: hidden;

    .list-item {
      display: flex;
      align-items: center;
      padding: 20rpx 16rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin-bottom: 16rpx;

      .goods-img {
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
        overflow: hidden;
        position: relative;
        margin-right: 24rpx;

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

        .goods-label {
          position: absolute;
          top: 0;
          width: 64rpx;
          height: 40rpx;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 16rpx 0rpx 16rpx 0rpx;
          text-align: center;
          font-weight: 500;
          font-size: 28rpx;
          color: #ffffff;
        }
      }

      .goods-right {
        flex: 1;

        .goods-title {
          font-weight: 500;
          font-size: 30rpx;
          color: #000000;
          margin-bottom: 10rpx;
        }

        .goods-people {
          font-size: 22rpx;
          color: #e69a22;
          height: 56rpx;
        }

        .goods-shop {
          display: flex;
          justify-content: space-between;

          .nummber {
            color: #ff5c03;
            font-size: 22rpx;
            font-weight: 500;
          }

          .btn-group {
            text-align: center;
            line-height: 56rpx;

            .collect-btn {
              width: 72rpx;
              height: 100%;
              background: #f5f7fa;
              border-radius: 8rpx 0rpx 0rpx 8rpx;
            }

            .shop-btn {
              width: 152rpx;
              background: linear-gradient(270deg, #ff5c03 0%, #ffac64 100%);
              border-radius: 0rpx 8rpx 8rpx 0rpx;
              font-weight: 500;
              font-size: 30rpx;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}

/* 骨架屏样式 */
.skeleton-list {
  .skeleton-item {
    display: flex;
    padding: 20rpx;
    background: #fff;
    margin-bottom: 16rpx;
    border-radius: 16rpx;
  }

  .skeleton-img {
    width: 200rpx;
    height: 200rpx;
    background: #f0f0f0;
    border-radius: 8rpx;
    margin-right: 24rpx;
    animation: pulse 1.5s ease-in-out infinite;
  }

  .skeleton-content {
    flex: 1;
  }

  .skeleton-line {
    height: 20rpx;
    background: #f0f0f0;
    margin-bottom: 16rpx;
    border-radius: 4rpx;
    animation: pulse 1.5s ease-in-out infinite;
  }

  .skeleton-line.short {
    width: 60%;
  }

  .skeleton-line.medium {
    width: 80%;
  }

  .skeleton-line.long {
    width: 95%;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>