更新商城

src/views/ProductDetail.vue

@@ -16,15 +16,7 @@
         <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>
 
@@ -237,118 +229,7 @@
       </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>
-            <div class="cart-actions">
-              <el-button type="text" @click="goToCartPage" class="manage-btn">
-                管理
-              </el-button>
-              <el-button type="text" @click="clearCart" class="clear-btn">
-                清空购物车
-              </el-button>
-            </div>
-          </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>
 
@@ -379,11 +260,8 @@ const product = ref(null)
 const quantity = ref(1)
 const reviews = ref([])
 const recommendedProducts = ref([])
-const showCart = ref(false)
-const cartLoading = ref(false)
+// showCart已移除
 const userPoints = ref(0)
-const cartItems = ref([])
-const cartCount = ref(0)
 const showDescription = ref(false)
 const showDetails = ref(false)
 const selectedCategory = ref(null)
@@ -394,27 +272,7 @@ 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 () => {
@@ -485,9 +343,6 @@ const addToCart = async () => {
     if (response.data.success) {
       ElMessage.success('商品已加入购物车！')
       
-      // 更新本地购物车数据
-      await loadCartFromBackend()
-      
       // 重置选择状态
       quantity.value = 1
       selectedCategory.value = null
@@ -500,142 +355,9 @@ const addToCart = async () => {
   }
 }
 
-// 购物车商品管理方法
-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 goToCartPage = () => {
-  showCart.value = false
-  router.push('/cart')
-}
-
-// 购物车结算功能
-const checkoutCart = async () => {
-  if (cartItems.value.length === 0) {
-    ElMessage.error('购物车是空的')
-    return
-  }
-  
-  try {
-    // 创建购物车结算请求
-    const cartData = {
-      items: cartItems.value.map(item => ({
-        productId: item.id || item.productId,
-        quantity: item.quantity,
-        points: item.points,
-        name: item.name,
-        image: item.image,
-        categoryId: item.categoryId,
-        sizeId: item.sizeId
-      }))
-    }
-    
-    const response = await api.post('/cart/checkout', cartData)
-    
-    if (response.data.success) {
-      const cartId = response.data.data.cartId
-      
-      // 跳转到支付页面
-      router.push({
-        path: '/pay',
-        query: {
-          cartId: cartId
-        }
-      })
-      
-      // 关闭购物车弹窗
-      showCart.value = false
-    } else {
-      throw new Error(response.data.message || '创建订单失败')
-    }
-  } catch (error) {
-    ElMessage.error(error.message || '结算失败，请重试')
-  }
-}
+// 购物车数据同步和结算方法已移除
 
 const buyNow = async () => {
   if (!product.value) {
@@ -1204,217 +926,5 @@ watch(
   }
 }
 
-/* 购物车样式 */
-.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;
-}
-
-.cart-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.manage-btn {
-  color: #409eff;
-  font-size: 14px;
-}
-
-.manage-btn:hover {
-  color: #66b1ff;
-}
-
-.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;
-  line-clamp: 2;
-  -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>