From 14781f442ae1ee2fec6c5007396eb60793b9adfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=A7=E8=84=8F=E7=8B=BC?= <786316265@qq.com>
Date: Tue, 26 Aug 2025 11:36:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=9F=8E=E5=8F=8A=E8=B4=AD=E7=89=A9?=
 =?UTF-8?q?=E8=BD=A6=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js         |  14 +-
 src/views/BuyDetails.vue    | 647 ++++++++++++++++++++++++++++++++++++
 src/views/Pay.vue           | 566 +++++++++++++++++++++++++++++++
 src/views/ProductDetail.vue | 117 +++----
 4 files changed, 1272 insertions(+), 72 deletions(-)
 create mode 100644 src/views/BuyDetails.vue
 create mode 100644 src/views/Pay.vue

diff --git a/src/router/index.js b/src/router/index.js
index abc46fe..b8e94f2 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -233,11 +233,23 @@ const routes = [
   {
     path: '/productsummary/:id',
     name: 'productSummary',
-    component: () => import('@/views/productSummary.vue'),
+    component: () => import('@/views/ProductSummary.vue'),
     meta: {
       title: '商品汇总'
     }
   },
+  {
+     path: '/buydetail',
+     name: 'BuyDetail',
+     component: () => import('../views/BuyDetails.vue'),
+     meta: { title: '确认订单' }
+   },
+   {
+     path: '/pay',
+     name: 'Pay',
+     component: () => import('../views/Pay.vue'),
+     meta: { title: '确认支付' }
+   },
   {
     path: '/:pathMatch(.*)*',
     name: 'NotFound',
diff --git a/src/views/BuyDetails.vue b/src/views/BuyDetails.vue
new file mode 100644
index 0000000..fb36e08
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/views/Pay.vue b/src/views/Pay.vue
new file mode 100644
index 0000000..52de885
--- /dev/null
+++ b/src/views/Pay.vue
@@ -0,0 +1,566 @@
+<template>
+  <div class="pay-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="countdown-section">
+        <div class="countdown-header">
+          <el-icon class="clock-icon"><Clock /></el-icon>
+          <span class="countdown-label">支付剩余时间</span>
+        </div>
+        <div class="countdown-display">
+          <div class="time-block">
+            <span class="time-number">{{ formatTime(minutes) }}</span>
+            <span class="time-label">分</span>
+          </div>
+          <div class="time-separator">:</div>
+          <div class="time-block">
+            <span class="time-number">{{ formatTime(seconds) }}</span>
+            <span class="time-label">秒</span>
+          </div>
+        </div>
+        <div class="countdown-tip">
+          <span v-if="timeLeft > 0">请在规定时间内完成支付</span>
+          <span v-else class="timeout-text">支付超时，请重新下单</span>
+        </div>
+      </div>
+
+      <!-- 支付金额 -->
+      <div class="amount-section">
+        <h3 class="section-title">支付金额</h3>
+        <div class="amount-display">
+          <div class="total-amount-large">
+            <span class="currency-symbol">¥</span>
+            <span class="amount-number">{{ paymentData.totalAmount || 0 }}</span>
+          </div>
+          <div class="amount-breakdown" v-if="paymentData.pointsAmount > 0 || paymentData.beansAmount > 0">
+            <div v-if="paymentData.pointsAmount > 0" class="breakdown-item">
+              <el-icon><Coin /></el-icon>
+              <span>积分：{{ paymentData.pointsAmount }}</span>
+            </div>
+            <div v-if="paymentData.beansAmount > 0" class="breakdown-item">
+              <el-icon><Orange /></el-icon>
+              <span>融豆：{{ paymentData.beansAmount }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 支付方式选择 -->
+      <div class="payment-method-section">
+        <h3 class="section-title">支付方式</h3>
+        <div class="payment-options">
+          <div 
+            class="payment-option" 
+            :class="{ active: selectedPaymentMethod === 'beans' }"
+            @click="selectPaymentMethod('beans')"
+          >
+            <el-icon class="payment-icon"><Orange /></el-icon>
+            <div class="payment-info">
+              <div class="payment-name">融豆支付</div>
+              <div class="payment-desc">使用账户融豆进行支付</div>
+            </div>
+            <el-icon class="check-icon" v-if="selectedPaymentMethod === 'beans'"><Check /></el-icon>
+          </div>
+          
+          <div 
+            class="payment-option" 
+            :class="{ active: selectedPaymentMethod === 'points' }"
+            @click="selectPaymentMethod('points')"
+          >
+            <el-icon class="payment-icon"><Coin /></el-icon>
+            <div class="payment-info">
+              <div class="payment-name">积分支付</div>
+              <div class="payment-desc">使用账户积分进行支付</div>
+            </div>
+            <el-icon class="check-icon" v-if="selectedPaymentMethod === 'points'"><Check /></el-icon>
+          </div>
+          
+          <div 
+            class="payment-option" 
+            :class="{ active: selectedPaymentMethod === 'mixed' }"
+            @click="selectPaymentMethod('mixed')"
+          >
+            <div class="payment-icon-group">
+              <el-icon class="payment-icon"><Coin /></el-icon>
+              <span class="plus-sign">+</span>
+              <el-icon class="payment-icon"><Orange /></el-icon>
+            </div>
+            <div class="payment-info">
+              <div class="payment-name">积分+融豆</div>
+              <div class="payment-desc">使用积分和融豆组合支付</div>
+            </div>
+            <el-icon class="check-icon" v-if="selectedPaymentMethod === 'mixed'"><Check /></el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部支付按钮 -->
+    <div class="bottom-actions">
+      <div class="payment-summary">
+        <div class="total-amount">
+          <span>实付：</span>
+          <span class="amount">¥{{ paymentData.totalAmount || 0 }}</span>
+        </div>
+      </div>
+      <el-button 
+        type="primary" 
+        size="large"
+        class="pay-button"
+        @click="confirmPayment"
+        :disabled="timeLeft <= 0 || paying || !selectedPaymentMethod"
+        :loading="paying"
+      >
+        {{ timeLeft <= 0 ? '支付超时' : paying ? '支付中...' : '确认支付' }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { 
+  ArrowLeft,
+  Clock,
+  Coin,
+  Orange,
+  Check
+} from '@element-plus/icons-vue'
+import api from '@/utils/api'
+
+const route = useRoute()
+const router = useRouter()
+
+// 响应式数据
+const loading = ref(false)
+const paying = ref(false)
+const timeLeft = ref(0) // 从后端获取倒计时时间
+const timer = ref(null)
+const selectedPaymentMethod = ref('') // 当前选择的支付方式
+const paymentData = ref({
+  totalAmount: 0,
+  pointsAmount: 0,
+  beansAmount: 0,
+  cartId: null
+})
+
+// 计算属性
+const minutes = computed(() => Math.floor(timeLeft.value / 60))
+const seconds = computed(() => timeLeft.value % 60)
+
+// 方法
+const formatTime = (time) => {
+  return time.toString().padStart(2, '0')
+}
+
+const selectPaymentMethod = (method) => {
+  selectedPaymentMethod.value = method
+}
+
+const startCountdown = () => {
+  timer.value = setInterval(() => {
+    if (timeLeft.value > 0) {
+      timeLeft.value--
+    } else {
+      clearInterval(timer.value)
+      ElMessage.error('支付超时，请重新下单')
+    }
+  }, 1000)
+}
+
+const fetchPaymentData = async () => {
+  try {
+    loading.value = true
+    const cartId = route.query.cartId
+    
+    if (!cartId) {
+      ElMessage.error('缺少购物车信息')
+      router.go(-1)
+      return
+    }
+    
+    // 获取支付信息
+    const response = await api.get(`/payment/info/${cartId}`)
+    
+    if (response.data.success) {
+      const data = response.data.data
+      paymentData.value = {
+        totalAmount: data.totalAmount || 0,
+        pointsAmount: data.pointsAmount || 0,
+        beansAmount: data.beansAmount || 0,
+        cartId: cartId
+      }
+      
+      // 设置倒计时时间（从后端获取，单位：秒）
+      timeLeft.value = data.remainingTime || 900 // 默认15分钟
+      
+      // 开始倒计时
+      startCountdown()
+    } else {
+      throw new Error(response.data.message || '获取支付信息失败')
+    }
+  } catch (error) {
+    ElMessage.error(error.message || '获取支付信息失败')
+    router.go(-1)
+  } finally {
+    loading.value = false
+  }
+}
+
+const confirmPayment = async () => {
+  if (timeLeft.value <= 0) {
+    ElMessage.error('支付超时，请重新下单')
+    return
+  }
+
+  if (!selectedPaymentMethod.value) {
+    ElMessage.error('请选择支付方式')
+    return
+  }
+
+  try {
+    await ElMessageBox.confirm(
+      `确定要支付 ¥${paymentData.value.totalAmount} 吗？`,
+      '确认支付',
+      {
+        confirmButtonText: '确定支付',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+
+    paying.value = true
+
+    // 构建支付数据
+    const submitData = {
+      cartId: paymentData.value.cartId,
+      paymentMethod: selectedPaymentMethod.value,
+      totalAmount: paymentData.value.totalAmount
+    }
+
+    // 发送支付请求到后端
+    const response = await api.post('/payment/confirm', submitData)
+    
+    if (response.data.success) {
+      ElMessage.success('支付成功！')
+      // 清除定时器
+      if (timer.value) {
+        clearInterval(timer.value)
+      }
+      // 跳转到订单页面
+      router.push('/shop')
+    } else {
+      throw new Error(response.data.message || '支付失败')
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error(error.message || '支付失败，请重试')
+    }
+  } finally {
+    paying.value = false
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  fetchPaymentData()
+})
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearInterval(timer.value)
+  }
+})
+</script>
+
+<style scoped>
+.pay-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;
+}
+
+.countdown-section {
+  background: white;
+  padding: 24px 16px;
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.countdown-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.clock-icon {
+  color: #ff4757;
+  font-size: 18px;
+}
+
+.countdown-label {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.countdown-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.time-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #ff4757;
+  color: white;
+  padding: 12px 16px;
+  border-radius: 8px;
+  min-width: 60px;
+}
+
+.time-number {
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.time-label {
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.time-separator {
+  font-size: 24px;
+  font-weight: bold;
+  color: #ff4757;
+}
+
+.countdown-tip {
+  font-size: 14px;
+  color: #666;
+}
+
+.timeout-text {
+  color: #ff4757;
+  font-weight: 500;
+}
+
+.amount-section,
+.payment-method-section {
+  background: white;
+  padding: 16px;
+  margin-bottom: 8px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0 0 12px 0;
+  color: #333;
+}
+
+.amount-display {
+  text-align: center;
+  padding: 20px 0;
+}
+
+.total-amount-large {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 4px;
+  margin-bottom: 16px;
+}
+
+.currency-symbol {
+  font-size: 20px;
+  color: #ff4757;
+  font-weight: 500;
+}
+
+.amount-number {
+  font-size: 36px;
+  font-weight: bold;
+  color: #ff4757;
+}
+
+.amount-breakdown {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.breakdown-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  color: #666;
+  background: #f8f9fa;
+  padding: 6px 12px;
+  border-radius: 12px;
+}
+
+.payment-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.payment-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.payment-option.active {
+  border-color: #ffae00;
+  background: #fff7e6;
+}
+
+.payment-icon {
+  color: #ffae00;
+  font-size: 20px;
+}
+
+.payment-icon-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.plus-sign {
+  font-size: 14px;
+  color: #666;
+  font-weight: bold;
+}
+
+.payment-info {
+  flex: 1;
+}
+
+.payment-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.payment-desc {
+  font-size: 12px;
+  color: #666;
+}
+
+.check-icon {
+  color: #ffae00;
+  font-size: 18px;
+}
+
+.bottom-actions {
+  padding: 16px;
+  background: white;
+  border-top: 1px solid #eee;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.payment-info {
+  flex: 1;
+}
+
+.payment-summary {
+  flex: 1;
+}
+
+.total-amount {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 16px;
+}
+
+.amount {
+  color: #ff4757;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.pay-button {
+  min-width: 120px;
+  height: 48px;
+  background: #ffae00;
+  border: none;
+  border-radius: 24px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.pay-button:hover {
+  background: #e69900;
+}
+
+.pay-button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
index e572bef..d2bfdf6 100644
--- a/src/views/ProductDetail.vue
+++ b/src/views/ProductDetail.vue
@@ -104,7 +104,7 @@
             <!-- 第一组：商品详情图标 + 文本 -->
             <div class="detail-item-group"> <!-- 每组独立容器 -->
               <img src="/imgs/productdetail/商品详情.png" alt="商品详情" class="detail-icon">
-              <span class="detail-text">商品材质||
+              <span class="detail-text">{{product.material}}||
               <el-tag
                   v-for="tag in product.tags"
                   :key="tag"
@@ -112,7 +112,7 @@
                   class="product-tag"
               >
                 {{ tag }}
-              </el-tag>||品牌||产地
+              </el-tag>||{{product.brand}}||{{product.origin}}
             </span>
             </div>
 
@@ -432,7 +432,7 @@ const getProductDetail = async () => {
   }
 }
 
-const addToCart = async () => {
+const addToCart = () => {
   if (!product.value) {
     ElMessage.error('商品信息加载中，请稍后再试')
     return
@@ -443,51 +443,14 @@ const addToCart = async () => {
     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
+  // 跳转到BuyDetails页面进行确认订单
+  router.push({
+    path: '/buydetail',
+    query: {
+      productId: product.value.id,
+      quantity: quantity.value
     }
-    
-    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()
+  })
 }
 
 // 购物车商品管理方法
@@ -625,34 +588,46 @@ const checkoutCart = async () => {
 }
 
 const buyNow = async () => {
+  if (!product.value) {
+    ElMessage.error('商品信息加载中，请稍后再试')
+    return
+  }
+
+  if (product.value.stock === 0) {
+    ElMessage.error('商品已售罄')
+    return
+  }
+
   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
+    // 先将商品添加到购物车
+    const cartItem = {
+      productId: product.value.id,
+      quantity: quantity.value,
+      categoryId: selectedCategory.value?.id || null,
+      sizeId: selectedSize.value?.id || null,
+      points: product.value.points,
+      name: product.value.name,
+      image: product.value.images?.[0] || '',
+      stock: product.value.stock
     }
+
+    const response = await api.post('/cart/add', cartItem)
     
-    await api.post('/orders', orderData)
-    
-    ElMessage.success('兑换成功！')
-    router.push('/orders')
+    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) {
-    if (error !== 'cancel') {
-      ElMessage.error('兑换失败，请重试')
-    }
+    ElMessage.error(error.message || '操作失败，请重试')
   }
 }