jurong_circle_frontdesk/src/views/BuyDetails.vue

<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>