jurong_circle_frontdesk/src/views/ProductDetail.vue

<template>
  <div class="product-detail-page">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-left">
        <el-button 
          type="text" 
          @click="$router.go(-1)"
          class="back-btn"
        >
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>
      <div class="nav-center">
        <h1 class="nav-title">商品详情</h1>
      </div>
      <div class="nav-right">
        <el-button 
          type="text" 
          @click="showCart = true"
          class="cart-btn"
        >
          <el-badge :value="cartCount" :hidden="cartCount === 0">
            <el-icon><ShoppingCart /></el-icon>
          </el-badge>
        </el-button>
      </div>
    </nav>

    <div v-loading="loading" class="product-content">
      <div v-if="product" class="product-detail">
        <!-- 商品图片 -->
        <div class="product-images">
          <el-carousel 
            :interval="4000" 
            type="card" 
            height="300px"
            indicator-position="outside"
          >
            <el-carousel-item v-for="(image, index) in product.images" :key="index">
              <img :src="image" :alt="product.name" class="product-image" />
            </el-carousel-item>
          </el-carousel>
          <div v-for="(image, index) in product.images" :key="index" class="small-images">
            <img :src="image" :alt="product.name" class="small-image" />
          </div>
        </div>

        <!-- 商品信息 -->
        <div class="product-info">
          <div class="product-header">
            <h1 class="product-title">{{ product.name }}</h1>
            <div class="product-tags">
              <el-tag 
                v-for="tag in product.tags" 
                :key="tag" 
                size="small"
                class="product-tag"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>

          <div class="product-price">
            <div class="current-price">
              <el-icon><Coin /></el-icon>
              <span class="price-number">{{ product.points }}</span>
              <span class="price-unit">积分</span>
            </div>
            <div v-if="product.originalPoints" class="original-price">
              原价：{{ product.originalPoints }}积分
            </div>
            <div v-if="product.discount" class="discount-info">
              <el-tag type="danger" size="small">{{ product.discount }}折优惠</el-tag>
            </div>
          </div>

          <div class="product-stats">
            <div class="stat-item">
              <span class="stat-label">销量</span>
              <span class="stat-value">{{ product.sales }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">库存</span>
              <span class="stat-value">{{ product.stock }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">评分</span>
              <span class="stat-value">
                <el-rate 
                  v-model="product.rating" 
                  disabled 
                  show-score 
                  text-color="#ff9900"
                  score-template="{value}"
                />
              </span>
            </div>
          </div>

          <div class="detail-group-container">
            <!-- 第一组：商品详情图标 + 文本 -->
            <div class="detail-item-group"> <!-- 每组独立容器 -->
              <img src="/imgs/productdetail/商品详情.png" alt="商品详情" class="detail-icon">
              <span class="detail-text">商品材质||
              <el-tag
                  v-for="tag in product.tags"
                  :key="tag"
                  size="small"
                  class="product-tag"
              >
                {{ tag }}
              </el-tag>||品牌||产地
            </span>
            </div>

            <!-- 第二组：小货车图标 + 文本 -->
            <div class="detail-item-group"> <!-- 每组独立容器 -->
              <img src="/imgs/productdetail/小货车.png" alt="小货车" class="detail-icon">
              <span class="detail-text">预计两小时内发货，后天送达</span>
            </div>
          </div>

          <!-- 商品描述 -->
          <div class="product-description">
            <h3>商品描述</h3>
            <p>{{ product.description }}</p>
          </div>

          <!-- 商品详情 -->
          <div class="product-details">
            <h3>商品详情</h3>
            <div class="detail-content">
              <p>{{ product.description || '暂无详细描述' }}</p>
            </div>
          </div>

          <!-- 购买选项 -->
          <div class="purchase-options">
            <div class="quantity-selector">
              <span class="option-label">数量：</span>
              <el-input-number
                v-model="quantity"
                :min="1"
                :max="product.stock"
                size="small"
              />
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button 
            size="large"
            @click="addToCart"
            :disabled="product.stock === 0"
          >
            加入购物车
          </el-button>
          <el-button 
            type="primary" 
            size="large"
            @click="buyNow"
            :disabled="product.stock === 0 || totalPoints > userPoints"
          >
            {{ product.stock === 0 ? '缺货' : totalPoints > userPoints ? '积分不足' : '立即兑换' }}
          </el-button>
        </div>

        <!-- 商品评价 -->
        <div class="product-reviews">
          <div class="reviews-header">
            <h3>用户评价</h3>
            <span class="review-count">({{ reviews.length }}条评价)</span>
          </div>
          
          <div v-if="reviews.length === 0" class="no-reviews">
            <el-icon><ChatDotRound /></el-icon>
            <p>暂无评价</p>
          </div>
          
          <div v-else class="reviews-list">
            <div v-for="review in reviews" :key="review.id" class="review-item">
              <div class="review-header">
                <div class="reviewer-info">
                  <el-avatar :size="32" :src="review.user.avatar">
                    <el-icon><User /></el-icon>
                  </el-avatar>
                  <span class="reviewer-name">{{ review.user.name }}</span>
                </div>
                <div class="review-meta">
                  <el-rate v-model="review.rating" disabled size="small" />
                  <span class="review-date">{{ formatDate(review.createdAt) }}</span>
                </div>
              </div>
              <div class="review-content">
                <p>{{ review.content }}</p>
                <div v-if="review.images" class="review-images">
                  <img 
                    v-for="(image, index) in review.images" 
                    :key="index"
                    :src="image" 
                    class="review-image"
                    @click="previewImage(image)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 推荐商品 -->
        <div class="recommended-products">
          <h3>推荐商品</h3>
          <div class="recommended-grid">
            <div 
              v-for="item in recommendedProducts" 
              :key="item.id"
              class="recommended-item"
              @click="goToProduct(item.id)"
            >
              <img :src="item.image" :alt="item.name" />
              <div class="item-info">
                <h4>{{ item.name }}</h4>
                <p class="item-price">
                  <el-icon><Coin /></el-icon>
                  {{ item.points }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 购物车抽屉 -->
    <el-drawer
      v-model="showCart"
      title="购物车"
      direction="rtl"
      size="80%"
    >
      <div class="cart-content">
        <!-- 加载状态 -->
        <div v-if="cartLoading" class="cart-loading">
          <el-icon class="is-loading"><Loading /></el-icon>
          <div>正在加载购物车数据...</div>
        </div>
        
        <!-- 购物车为空 -->
        <div v-else-if="cartItems.length === 0" class="empty-cart">
          <el-icon class="empty-icon"><ShoppingCart /></el-icon>
          <p>购物车是空的</p>
          <p class="empty-tip">快去挑选心仪的商品吧~</p>
        </div>
        
        <!-- 购物车商品列表 -->
        <div v-else class="cart-items">
          <div class="cart-header">
            <span>共 {{ cartTotalItems }} 件商品</span>
            <el-button type="text" @click="clearCart" class="clear-btn">
              清空购物车
            </el-button>
          </div>
          
          <div class="cart-list">
            <div 
              v-for="item in cartItems" 
              :key="item.id" 
              class="cart-item"
            >
              <div class="item-image">
                <img :src="item.image" :alt="item.name" />
              </div>
              
              <div class="item-info">
                <h4 class="item-name">{{ item.name }}</h4>
                <div class="item-price">
                  <el-icon><Coin /></el-icon>
                  <span>{{ item.points }} 积分</span>
                </div>
                <div class="item-stock">库存：{{ item.stock }}</div>
              </div>
              
              <div class="item-actions">
                <div class="quantity-control">
                  <el-button 
                    size="small" 
                    @click="updateCartItemQuantity(item.id, item.quantity - 1)"
                    :disabled="item.quantity <= 1"
                  >
                    -
                  </el-button>
                  <span class="quantity">{{ item.quantity }}</span>
                  <el-button 
                    size="small" 
                    @click="updateCartItemQuantity(item.id, item.quantity + 1)"
                    :disabled="item.quantity >= item.stock"
                  >
                    +
                  </el-button>
                </div>
                <el-button 
                  type="text" 
                  @click="removeFromCart(item.id)"
                  class="remove-btn"
                >
                  删除
                </el-button>
              </div>
            </div>
          </div>
          
          <!-- 购物车底部 -->
          <div class="cart-footer">
            <div class="total-info">
              <div class="total-points">
                <span>总计：</span>
                <el-icon><Coin /></el-icon>
                <span class="points">{{ cartTotalPoints }}</span>
                <span>积分</span>
              </div>
              <div class="user-points">
                <span>我的积分：{{ userPoints }}</span>
              </div>
            </div>
            
            <div class="checkout-actions">
              <el-button 
                type="primary" 
                size="large"
                @click="checkoutCart"
                :disabled="cartTotalPoints > userPoints"
                class="checkout-btn"
              >
                {{ cartTotalPoints > userPoints ? '积分不足' : '立即结算' }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  ArrowLeft,
  ShoppingCart,
  Coin,
  ChatDotRound,
  User,
  Loading
} from '@element-plus/icons-vue'
import api from '@/utils/api'

import { watch } from 'vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const loading = ref(false)
const product = ref(null)
const quantity = ref(1)
const reviews = ref([])
const recommendedProducts = ref([])
const showCart = ref(false)
const cartLoading = ref(false)
const userPoints = ref(0)
const cartItems = ref([])
const cartCount = ref(0)

// 计算属性
const totalPoints = computed(() => {
  return product.value ? product.value.points * quantity.value : 0
})

// 购物车相关计算属性
const cartTotalPoints = computed(() => {
  return cartItems.value.reduce((total, item) => total + (item.points * item.quantity), 0)
})

const cartTotalItems = computed(() => {
  return cartItems.value.reduce((total, item) => total + item.quantity, 0)
})

// 更新购物车计数
watch(cartTotalItems, (newCount) => {
  cartCount.value = newCount
}, { immediate: true })

// 监听购物车抽屉打开状态，打开时从后端加载数据
watch(showCart, async (newValue) => {
  if (newValue) {
    // 购物车打开时从后端加载数据
    await loadCartFromBackend()
  }
})

// 方法
const getProductDetail = async () => {
  try {
    loading.value = true
    const productId = route.params.id
    
    const [productRes, reviewsRes, recommendedRes] = await Promise.all([
      api.get(`/products/${productId}`),
      api.get(`/products/${productId}/reviews`),
      api.get(`/products/${productId}/recommended`)
    ])
    console.log(productRes,'productRes');
    console.log(reviewsRes,'reviewsRes');
    console.log(recommendedRes,'recommendedRes');
    
    product.value = productRes.data.data.product
    reviews.value = reviewsRes.data.data.reviews || []
    recommendedProducts.value = recommendedRes.data.data.products || []
  } catch (error) {
    ElMessage.error('获取商品详情失败')
    router.go(-1)
  } finally {
    loading.value = false
  }
}

const addToCart = async () => {
  if (!product.value) {
    ElMessage.error('商品信息加载中，请稍后再试')
    return
  }

  if (product.value.stock === 0) {
    ElMessage.error('商品已售罄')
    return
  }

  if (quantity.value <= 0) {
    ElMessage.error('请选择有效数量')
    return
  }

  // 检查是否已存在该商品
  const existingItemIndex = cartItems.value.findIndex(item => item.id === product.value.id)
  
  if (existingItemIndex !== -1) {
    // 商品已存在，增加数量
    const existingItem = cartItems.value[existingItemIndex]
    const newQuantity = existingItem.quantity + quantity.value
    
    if (newQuantity > product.value.stock) {
      ElMessage.error(`库存不足，最多只能添加 ${product.value.stock - existingItem.quantity} 个`)
      return
    }
    
    existingItem.quantity = newQuantity
    ElMessage.success(`已将 ${quantity.value} 个商品添加到购物车`)
  } else {
    // 新商品，直接添加
    if (quantity.value > product.value.stock) {
      ElMessage.error(`库存不足，最多只能添加 ${product.value.stock} 个`)
      return
    }
    
    const cartItem = {
      id: product.value.id,
      name: product.value.name,
      image: product.value.images?.[0] || product.value.image,
      points: product.value.points,
      quantity: quantity.value,
      stock: product.value.stock
    }
    
    cartItems.value.push(cartItem)
    ElMessage.success(`已将 ${quantity.value} 个商品添加到购物车`)
  }
  
  // 重置数量选择器
  quantity.value = 1
  
  // 同步购物车数据到后端
  await syncCartToBackend()
}

// 购物车商品管理方法
const updateCartItemQuantity = async (itemId, newQuantity) => {
  const item = cartItems.value.find(item => item.id === itemId)
  if (!item) return
  
  if (newQuantity <= 0) {
    removeFromCart(itemId)
    return
  }
  
  if (newQuantity > item.stock) {
    ElMessage.error(`库存不足，最多只能选择 ${item.stock} 个`)
    return
  }
  
  item.quantity = newQuantity
  
  // 同步购物车数据到后端
   await syncCartToBackend()
}

const removeFromCart = async (itemId) => {
  const index = cartItems.value.findIndex(item => item.id === itemId)
  if (index !== -1) {
    const item = cartItems.value[index]
    cartItems.value.splice(index, 1)
    ElMessage.success(`已从购物车移除 ${item.name}`)
    
    // 同步购物车数据到后端
    await syncCartToBackend()
  }
}

const clearCart = () => {
  ElMessageBox.confirm(
    '确定要清空购物车吗？',
    '确认清空',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    cartItems.value = []
    ElMessage.success('购物车已清空')
    
    // 同步购物车数据到后端
    await syncCartToBackend()
   }).catch(() => {})
 }

// 购物车数据同步到后端
const syncCartToBackend = async () => {
  try {
    const cartData = {
      items: cartItems.value.map(item => ({
        productId: item.id,
        quantity: item.quantity,
        points: item.points,
        name: item.name,
        image: item.image,
        stock: item.stock
      }))
    }
    await api.post('/cart/sync', cartData)
  } catch (error) {
    console.error('购物车同步失败:', error)
  }
}

// 从后端读取购物车数据
const loadCartFromBackend = async () => {
  cartLoading.value = true
  try {
    const response = await api.get('/cart')
    if (response.data && response.data.items) {
      cartItems.value = response.data.items
    }
  } catch (error) {
    console.error('购物车数据加载失败:', error)
    ElMessage.error('购物车数据加载失败，请重试')
    // 如果加载失败，保持当前购物车状态
  } finally {
    cartLoading.value = false
  }
}

// 购物车结算功能
const checkoutCart = async () => {
  if (cartItems.value.length === 0) {
    ElMessage.error('购物车是空的')
    return
  }
  
  if (cartTotalPoints.value > userPoints.value) {
    ElMessage.error('积分不足，无法结算')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要花费 ${cartTotalPoints.value} 积分购买这些商品吗？`,
      '确认结算',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const orderData = {
      items: cartItems.value.map(item => ({
        productId: item.id,
        quantity: item.quantity,
        points: item.points
      })),
      totalPoints: cartTotalPoints.value
    }
    
    await api.post('/orders', orderData)
    
    // 清空购物车
    cartItems.value = []
    showCart.value = false
    
    ElMessage.success('结算成功！')
    router.push('/orders')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('结算失败，请重试')
    }
  }
}

const buyNow = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要花费 ${totalPoints.value} 积分兑换 ${quantity.value} 个 ${product.value.name} 吗？`,
      '确认兑换',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const orderData = {
      items: [{
        productId: product.value.id,
        quantity: quantity.value,
        points: product.value.points
      }],
      totalPoints: totalPoints.value
    }
    
    await api.post('/orders', orderData)
    
    ElMessage.success('兑换成功！')
    router.push('/orders')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('兑换失败，请重试')
    }
  }
}

const goToProduct = (productId) => {
  router.replace(`/product/${productId}`)
}

const previewImage = (image) => {
  // 图片预览逻辑
}

const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

const getUserPoints = async () => {
  try {
    const response = await api.get('/user/points')
    userPoints.value = response.data.points
  } catch (error) {
    console.error('获取用户积分失败:', error)
  }
}

// 生命周期
onMounted(() => {
  //getProductDetail()
  getUserPoints()
})

watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      getProductDetail()
      quantity.value = 1 // 重置数量
    }
  },
  { immediate: true }
)
</script>

<style scoped>
.product-detail-page {
  min-height: 100vh;
  background: linear-gradient(to bottom, #ffae00, #f3f3f3);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 56px;
  background: white;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left,
.nav-right {
  flex: 1;
}

.nav-right {
  display: flex;
  justify-content: flex-end;
}

.back-btn,
.cart-btn {
  color: #409eff;
  font-size: 14px;
}

.nav-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.product-content {
  padding: 0;
}

.product-detail {
  background: transparent;
}

.product-images {
  padding: 20px;
  background: transparent;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* 小图容器样式 */
.small-images {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* 小图样式 */
.small-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-info {
  padding: 20px;
  background: transparent;
}

.product-header {
  margin-bottom: 16px;
}

.product-title {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.product-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.product-tag {
  margin: 0;
}

.product-price {
  margin-bottom: 20px;
}

.current-price {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.current-price .el-icon {
  color: #ff6b35;
  font-size: 20px;
}

.price-number {
  font-size: 28px;
  font-weight: 700;
  color: #ff6b35;
}

.price-unit {
  font-size: 16px;
  color: #ff6b35;
}

.original-price {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
  margin-bottom: 4px;
}

.discount-info {
  margin-top: 8px;
}

.product-stats {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

.stat-value {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.detail-group-container {
  display: flex;
  flex-direction: column; /* 让两组纵向堆叠（上下排列） */
  gap: 12px; /* 两组之间的垂直间距（可根据需求调整，如 16px） */
  margin: 16px 0; /* 与上下其他内容的间距，保持页面呼吸感 */
}

/* 每组容器：控制图标和文本的横向对齐 */
.detail-item-group {
  display: flex; /* 组内图标和文本横向排列 */
  align-items: center; /* 图标与文本垂直居中（避免错位） */
  gap: 8px; /* 图标和文本之间的横向间距（可调整） */
}

/* 图标样式：保持原大小，避免拉伸 */
.detail-icon {
  width: 20px;
  height: 20px;
  object-fit: contain; /* 保持图片比例，不变形 */
}

/* 文本样式：保持原风格，优化 tag 间距 */
.detail-text {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* 优化 tag 与文字的间距，避免拥挤 */
.detail-text .product-tag {
  margin: 0 4px; /* tag 左右留白，更美观 */
}

.product-description,
.product-details {
  margin-bottom: 20px;
}

.product-description h3,
.product-details h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #333;
}

.product-description p {
  margin: 0;
  line-height: 1.6;
  color: #666;
}

.detail-item {
  display: flex;
  padding: 8px 0;
}

.detail-label {
  width: 80px;
  color: #999;
  font-size: 14px;
}

.detail-value {
  flex: 1;
  color: #333;
  font-size: 14px;
}

.purchase-options {
  margin-bottom: 20px;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.option-label {
  font-size: 14px;
  color: #333;
}

.action-buttons {
  display: flex;
  gap: 12px;
  padding: 20px;
  background: transparent;
  position: sticky;
  bottom: 0;
}

.action-buttons .el-button {
  flex: 1;
}

.product-reviews {
  padding: 20px;
  background: transparent;
}

.reviews-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.reviews-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.review-count {
  font-size: 14px;
  color: #999;
}

.no-reviews {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.review-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reviewer-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.review-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.review-date {
  font-size: 12px;
  color: #999;
}

.review-content p {
  margin: 0 0 8px 0;
  line-height: 1.6;
  color: #666;
}

.review-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.review-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
}

.recommended-products {
  padding: 20px;
  background: transparent;
}

.recommended-products h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #333;
}

.recommended-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.recommended-item {
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.recommended-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.recommended-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.recommended-item .item-info {
  padding: 8px;
}

.recommended-item h4 {
  margin: 0 0 4px 0;
  font-size: 12px;
  color: #333;
  line-height: 1.4;
}

.recommended-item .item-price {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #ff6b35;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-stats {
    gap: 16px;
  }
  
  .recommended-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .action-buttons {
    padding: 16px;
  }
  
  .recommended-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 购物车样式 */
.cart-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50%;
  color: #666;
  gap: 12px;
}

.cart-loading .el-icon {
  font-size: 32px;
  color: #409eff;
}

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50%;
  color: #999;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  color: #ddd;
}

.empty-tip {
  font-size: 14px;
  margin-top: 8px;
}

.cart-items {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #666;
}

.clear-btn {
  color: #ff4757;
  font-size: 12px;
}

.cart-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}

.cart-item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #f5f5f5;
}

.cart-item:last-child {
  border-bottom: none;
}

.item-image {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.item-name {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-price {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #ff6b35;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.item-stock {
  font-size: 12px;
  color: #999;
}

.item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quantity-control .el-button {
  width: 24px;
  height: 24px;
  padding: 0;
  min-height: 24px;
}

.quantity {
  font-size: 14px;
  font-weight: 500;
  min-width: 20px;
  text-align: center;
}

.remove-btn {
  color: #ff4757;
  font-size: 12px;
  padding: 0;
}

.cart-footer {
  border-top: 1px solid #eee;
  padding: 16px 0 0 0;
  margin-top: auto;
}

.total-info {
  margin-bottom: 16px;
}

.total-points {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.total-points .points {
  color: #ff6b35;
  font-size: 18px;
}

.user-points {
  font-size: 14px;
  color: #666;
}

.checkout-actions {
  display: flex;
}

.checkout-btn {
  width: 100%;
  height: 44px;
}
</style>