商城及购物车相关

2025-08-26 11:36:01 +08:00
parent 1881823a1a
commit 14781f442a
4 changed files with 1272 additions and 72 deletions
--- a/src/views/BuyDetails.vue
+++ b/src/views/BuyDetails.vue
@@ -0,0 +1,647 @@
+<template>
+  <div class="buy-details-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">
+      </div>
+    </nav>
+
+    <div v-loading="loading" class="page-content">
+      <!-- 收货地址 -->
+      <div class="address-section">
+        <div class="address-header">
+          <el-icon><Location /></el-icon>
+          <span class="address-label">收货 地址</span>
+          <el-icon class="edit-icon"><Edit /></el-icon>
+        </div>
+        <div class="address-content">
+          <div v-if="!showAddressEdit" class="address-text" @click="showAddressEdit = true">{{ shippingAddress }}</div>
+          <el-input 
+            v-else
+            v-model="shippingAddress"
+            @blur="showAddressEdit = false"
+            @keyup.enter="showAddressEdit = false"
+            placeholder="请输入收货地址"
+            class="address-input"
+            autofocus
+          />
+        </div>
+      </div>
+
+      <!-- 商品信息 -->
+      <div class="product-section">
+        <div class="product-info">
+          <div class="product-image">
+            <img :src="product?.image || '/imgs/productdetail/商品主图.png'" alt="商品主图" />
+          </div>
+          <div class="product-details">
+            <div class="product-price">
+              <span class="price-label">实付</span>
+              <el-icon class="coin-icon"><Coin /></el-icon>
+              <span class="price-value">{{ totalPrice }}</span>
+            </div>
+            <div class="quantity-selector">
+              <el-button size="small" @click="decreaseQuantity" :disabled="quantity <= 1">-</el-button>
+              <span class="quantity">{{ quantity }}</span>
+              <el-button size="small" @click="increaseQuantity">+</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 颜色分类 -->
+      <div class="category-section">
+        <h3 class="section-title">颜色分类 ({{ categories.length }})</h3>
+        <div class="category-grid">
+          <div 
+            v-for="category in categories" 
+            :key="category.id"
+            class="category-item"
+            :class="{ active: selectedCategory?.id === category.id }"
+            @click="selectCategory(category)"
+          >
+            <div class="category-image">
+              <img :src="category.image" :alt="category.name" />
+            </div>
+            <div class="category-info">
+              <div class="category-name">{{ category.name }}</div>
+              <div class="category-desc">{{ category.description }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 尺寸选择 -->
+      <div class="size-section">
+        <h3 class="section-title">尺寸</h3>
+        <div class="size-grid">
+          <div 
+            v-for="size in sizes" 
+            :key="size.id"
+            class="size-item"
+            :class="{ active: selectedSize?.id === size.id }"
+            @click="selectSize(size)"
+          >
+            <div class="size-label">{{ size.label }}</div>
+            <div class="size-range">{{ size.range }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 订单备注 -->
+      <div class="note-section">
+        <h3 class="section-title">订单备注</h3>
+        <div class="note-content" @click="showNoteEdit = true">
+          <span v-if="!showNoteEdit && !orderNote" class="note-placeholder">无备注</span>
+          <span v-if="!showNoteEdit && orderNote" class="note-text">{{ orderNote }}</span>
+          <el-input 
+            v-if="showNoteEdit"
+            v-model="orderNote"
+            @blur="showNoteEdit = false"
+            @keyup.enter="showNoteEdit = false"
+            placeholder="请输入订单备注"
+            class="note-input"
+            autofocus
+          />
+          <el-icon v-if="!showNoteEdit" class="arrow-icon"><ArrowRight /></el-icon>
+        </div>
+      </div>
+
+
+    </div>
+
+    <!-- 底部操作按钮 -->
+    <div class="bottom-actions">
+      <el-button 
+        size="large"
+        class="cart-button"
+        @click="addToCart"
+        :disabled="!canPurchase"
+      >
+        加入购物车
+      </el-button>
+      <el-button 
+        type="primary" 
+        size="large"
+        class="buy-button"
+        @click="handlePurchase"
+        :disabled="!canPurchase"
+      >
+        立即购买
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { 
+  ArrowLeft,
+  Close,
+  Location,
+  Edit,
+  Coin,
+  ArrowRight
+} from '@element-plus/icons-vue'
+import api from '@/utils/api'
+
+const route = useRoute()
+const router = useRouter()
+
+// 响应式数据
+const loading = ref(false)
+const product = ref(null)
+const quantity = ref(1)
+const categories = ref([])
+const sizes = ref([])
+const selectedCategory = ref(null)
+const selectedSize = ref(null)
+const shippingAddress = ref('请输入收货地址')
+const orderNote = ref('')
+const showAddressEdit = ref(false)
+const showNoteEdit = ref(false)
+
+// 计算属性
+const totalPrice = computed(() => {
+  if (!product.value) return 0
+  return product.value.points * quantity.value
+})
+
+const canPurchase = computed(() => {
+  return selectedCategory.value && selectedSize.value && quantity.value > 0
+})
+
+// 方法
+const increaseQuantity = () => {
+  if (product.value && quantity.value < product.value.stock) {
+    quantity.value++
+  }
+}
+
+const decreaseQuantity = () => {
+  if (quantity.value > 1) {
+    quantity.value--
+  }
+}
+
+const selectCategory = (category) => {
+  selectedCategory.value = category
+}
+
+const selectSize = (size) => {
+  selectedSize.value = size
+}
+
+const getProductInfo = async () => {
+  try {
+    loading.value = true
+    const productId = route.query.productId
+    if (!productId) {
+      ElMessage.error('商品信息缺失')
+      router.go(-1)
+      return
+    }
+    
+    const response = await api.get(`/products/${productId}`)
+    product.value = response.data.data.product
+  } catch (error) {
+    ElMessage.error('获取商品信息失败')
+    router.go(-1)
+  } finally {
+    loading.value = false
+  }
+}
+
+const getCategories = async () => {
+  try {
+    const productId = route.query.productId
+    const response = await api.get(`/products/${productId}/categories`)
+    categories.value = response.data.data.categories || []
+  } catch (error) {
+    console.error('获取分类信息失败:', error)
+  }
+}
+
+const getSizes = async () => {
+  try {
+    const productId = route.query.productId
+    const response = await api.get(`/products/${productId}/sizes`)
+    sizes.value = response.data.data.sizes || []
+  } catch (error) {
+    console.error('获取尺寸信息失败:', error)
+  }
+}
+
+const addToCart = async () => {
+  if (!canPurchase.value) {
+    ElMessage.error('请选择完整的商品信息')
+    return
+  }
+  
+  try {
+    const cartItem = {
+      productId: product.value.id,
+      quantity: quantity.value,
+      categoryId: selectedCategory.value.id,
+      sizeId: selectedSize.value.id,
+      points: product.value.points,
+      name: product.value.name,
+      image: product.value.images?.[0] || product.value.image,
+      stock: product.value.stock
+    }
+    
+    await api.post('/cart/add', cartItem)
+    ElMessage.success('商品已加入购物车！')
+    router.go(-1) // 返回上一页
+  } catch (error) {
+    ElMessage.error('加入购物车失败，请重试')
+  }
+}
+
+const handlePurchase = async () => {
+  if (!canPurchase.value) {
+    ElMessage.error('请选择完整的商品信息')
+    return
+  }
+  
+  try {
+    // 先将商品添加到购物车
+    const cartItem = {
+      productId: product.value.id,
+      quantity: quantity.value,
+      categoryId: selectedCategory.value.id,
+      sizeId: selectedSize.value.id,
+      points: product.value.points,
+      name: product.value.name,
+      image: product.value.image,
+      stock: product.value.stock,
+      shippingAddress: shippingAddress.value,
+      orderNote: orderNote.value
+    }
+
+    const response = await api.post('/cart/add', cartItem)
+    
+    if (response.data.success) {
+      const cartId = response.data.data.cartId
+      
+      // 跳转到支付页面
+      router.push({
+        path: '/pay',
+        query: {
+          cartId: cartId
+        }
+      })
+    } else {
+      throw new Error(response.data.message || '添加到购物车失败')
+    }
+  } catch (error) {
+    ElMessage.error(error.message || '操作失败，请重试')
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  // 从URL参数获取初始数量
+  const initialQuantity = route.query.quantity
+  if (initialQuantity && !isNaN(initialQuantity)) {
+    quantity.value = parseInt(initialQuantity)
+  }
+  
+  getProductInfo()
+  getCategories()
+  getSizes()
+})
+</script>
+
+<style scoped>
+.buy-details-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: white;
+  border-bottom: 1px solid #eee;
+}
+
+.nav-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.back-btn {
+  color: #333;
+  padding: 0;
+}
+
+.page-content {
+  flex: 1;
+  padding: 0;
+}
+
+.address-section {
+  background: white;
+  padding: 16px;
+  margin-bottom: 8px;
+}
+
+.address-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.address-label {
+  font-weight: 500;
+}
+
+.edit-icon {
+  margin-left: auto;
+  color: #666;
+}
+
+.address-text {
+  color: #666;
+  font-size: 14px;
+}
+
+.product-section {
+  background: white;
+  padding: 16px;
+  margin-bottom: 8px;
+}
+
+.product-info {
+  display: flex;
+  gap: 12px;
+}
+
+.product-image {
+  width: 60px;
+  height: 60px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.product-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-details {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.product-price {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.price-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.coin-icon {
+  color: #ffae00;
+}
+
+.price-value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffae00;
+}
+
+.quantity-selector {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.quantity {
+  font-size: 16px;
+  min-width: 20px;
+  text-align: center;
+}
+
+.category-section,
+.size-section,
+.note-section,
+.payment-section {
+  background: white;
+  padding: 16px;
+  margin-bottom: 8px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0 0 12px 0;
+}
+
+.category-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.category-item {
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.category-item.active {
+  border-color: #ffae00;
+  background: #fff7e6;
+}
+
+.category-image {
+  width: 40px;
+  height: 40px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.category-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.category-info {
+  flex: 1;
+}
+
+.category-name {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.category-desc {
+  font-size: 12px;
+  color: #666;
+}
+
+.size-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.size-item {
+  padding: 12px 8px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.size-item.active {
+  border-color: #ffae00;
+  background: #fff7e6;
+}
+
+.size-label {
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.size-range {
+  font-size: 12px;
+  color: #666;
+}
+
+.note-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+}
+
+.note-placeholder {
+  color: #999;
+}
+
+.arrow-icon {
+  color: #ccc;
+}
+
+.address-input {
+  margin-top: 8px;
+}
+
+.note-input {
+  flex: 1;
+  margin-right: 8px;
+}
+
+.note-text {
+  color: #333;
+  flex: 1;
+}
+
+.address-text {
+  cursor: pointer;
+  padding: 4px 0;
+}
+
+.note-content {
+  cursor: pointer;
+}
+
+.payment-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.payment-option {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.bottom-actions {
+  padding: 16px;
+  background: white;
+  border-top: 1px solid #eee;
+  display: flex;
+  gap: 12px;
+}
+
+.cart-button {
+  flex: 1;
+  height: 48px;
+  background: white;
+  border: 1px solid #ffae00;
+  color: #ffae00;
+  border-radius: 24px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.cart-button:hover {
+  background: #fff7e6;
+}
+
+.cart-button:disabled {
+  background: #f5f5f5;
+  border-color: #ccc;
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+.buy-button {
+  flex: 1;
+  height: 48px;
+  background: #ffae00;
+  border: none;
+  border-radius: 24px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.buy-button:hover {
+  background: #e69900;
+}
+
+.buy-button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+</style>