商城增加了取消订单，/transfers的bar增加了“已取消“板块

src/router/index.js

@@ -250,6 +250,12 @@ const routes = [
      component: () => import('../views/Pay.vue'),
      meta: { title: '确认支付' }
    },
+   {
+     path: '/payfailed',
+     name: 'PayFailed',
+     component: () => import('../views/PayFailed.vue'),
+     meta: { title: '确认支付' }
+   },
   {
     path: '/:pathMatch(.*)*',
     name: 'NotFound',

src/views/Pay.vue

@@ -5,7 +5,7 @@
       <div class="nav-left">
         <el-button 
           type="text" 
-          @click="$router.go(-1)"
+          @click="handleGoBack"
           class="back-btn"
         >
           <el-icon><ArrowLeft /></el-icon>
@@ -15,6 +15,7 @@
         <h1 class="nav-title">确认支付</h1>
       </div>
       <div class="nav-right">
+        <!-- 占位元素，保持标题居中 -->
       </div>
     </nav>
 
@@ -194,8 +195,17 @@ const fetchPaymentData = async () => {
     const cartId = route.query.cartId
     
     if (!cartId) {
-      ElMessage.error('缺少购物车信息')
+      // 允许直接访问，使用默认数据
-      router.go(-1)
+      ElMessage.warning('未指定购物车信息，使用默认支付数据')
+      paymentData.value = {
+        totalAmount: 0,
+        pointsAmount: 0,
+        beansAmount: 0,
+        cartId: null
+      }
+      timeLeft.value = 900 // 默认15分钟
+      startCountdown()
+      loading.value = false
       return
     }
     
@@ -227,6 +237,30 @@ const fetchPaymentData = async () => {
   }
 }
 
+const handleGoBack = async () => {
+  // 如果倒计时还在进行中，显示确认弹窗
+  if (timeLeft.value > 0) {
+    try {
+      await ElMessageBox.confirm(
+        '确认要放弃付款吗？',
+        '提示',
+        {
+          confirmButtonText: '狠心离开',
+          cancelButtonText: '继续付款',
+          type: 'warning'
+        }
+      )
+      // 用户确认放弃付款，跳转到PayFailed页面
+      router.push('/payfailed')
+    } catch {
+      // 用户取消，什么都不做，留在当前页面
+    }
+  } else {
+    // 倒计时已结束，直接返回
+    router.go(-1)
+  }
+}
+
 const confirmPayment = async () => {
   if (timeLeft.value <= 0) {
     ElMessage.error('支付超时，请重新下单')
@@ -308,6 +342,20 @@ onUnmounted(() => {
   padding: 12px 16px;
   background: white;
   border-bottom: 1px solid #eee;
+  position: relative;
+}
+
+.nav-left,
+.nav-right {
+  width: 48px;
+  display: flex;
+  justify-content: center;
+}
+
+.nav-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .nav-title {

src/views/PayFailed.vue

@@ -0,0 +1,509 @@
+<template>
+  <div class="pay-failed-page">
+    <!-- 导航栏 -->
+    <nav class="navbar">
+      <div class="nav-left">
+        <el-button 
+          type="text" 
+          @click="$router.push({ name: 'Shop' })"
+          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="order-info-section">
+        <h3 class="section-title">订单信息</h3>
+        <div class="info-item">
+          <span class="label">订单号：</span>
+          <span class="value">{{ orderData.orderNumber || '-' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">创建时间：</span>
+          <span class="value">{{ formatDateTime(orderData.createTime) || '-' }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">付款方式：</span>
+          <span class="value">{{ getPaymentMethodText(orderData.paymentMethod) || '-' }}</span>
+        </div>
+      </div>
+
+      <!-- 收货地址 -->
+      <div class="address-section">
+        <h3 class="section-title">收货地址</h3>
+        <div class="address-card">
+          <div class="address-header">
+            <span class="recipient">{{ orderData.address?.recipient || '-' }}</span>
+            <span class="phone">{{ orderData.address?.phone || '-' }}</span>
+          </div>
+          <div class="address-detail">
+            {{ formatAddress(orderData.address) || '暂无地址信息' }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 商品清单 -->
+      <div class="products-section">
+        <h3 class="section-title">商品清单</h3>
+        <div class="product-list">
+          <div 
+            v-for="item in orderData.cartItems" 
+            :key="item.id" 
+            class="product-item"
+          >
+            <img :src="item.image" :alt="item.name" class="product-image" />
+            <div class="product-info">
+              <div class="product-name">{{ item.name }}</div>
+              <div class="product-spec">{{ item.specification || '默认规格' }}</div>
+              <div class="product-price">¥{{ item.price }} × {{ item.quantity }}</div>
+            </div>
+            <div class="product-total">
+              ¥{{ (item.price * item.quantity).toFixed(2) }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 费用明细 -->
+      <div class="cost-section">
+        <h3 class="section-title">费用明细</h3>
+        <div class="cost-item">
+          <span class="label">商品总价：</span>
+          <span class="value">¥{{ orderData.subtotal || 0 }}</span>
+        </div>
+        <div class="cost-item">
+          <span class="label">运费：</span>
+          <span class="value">¥{{ orderData.shippingFee || 0 }}</span>
+        </div>
+        <div class="cost-item total">
+          <span class="label">总计：</span>
+          <span class="value">¥{{ orderData.totalAmount || 0 }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部操作按钮 -->
+    <div class="bottom-actions">
+      <el-button 
+        size="large"
+        class="cancel-btn"
+        @click="cancelOrder"
+      >
+        取消订单
+      </el-button>
+      <el-button 
+        type="primary" 
+        size="large"
+        class="pay-btn"
+        @click="continuePay"
+        :loading="paying"
+      >
+        {{ paying ? '处理中...' : '继续付款' }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { 
+  ArrowLeft,
+  Warning
+} 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 orderData = ref({
+  orderNumber: '',        // 订单编号
+  createTime: '',         // 订单创建时间
+  paymentMethod: '',      // 支付方式（beans: 融豆支付, points: 积分支付, mixed: 积分+融豆）
+  totalAmount: 0,         // 订单总金额
+  subtotal: 0,            // 商品小计金额（不含运费）
+  shippingFee: 0,         // 运费
+  address: {              // 收货地址信息
+    recipient: '',        // 收件人姓名
+    phone: '',            // 收件人电话
+    province: '',         // 省份
+    city: '',             // 城市
+    district: '',         // 区/县
+    detail: ''            // 详细地址
+  },
+  cartItems: []           // 购物车商品列表
+})
+
+// 方法
+const formatDateTime = (dateTime) => {
+  if (!dateTime) return ''
+  const date = new Date(dateTime)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+const getPaymentMethodText = (method) => {
+  const methodMap = {
+    'beans': '融豆支付',
+    'points': '积分支付',
+    'mixed': '积分+融豆'
+  }
+  return methodMap[method] || method
+}
+
+const formatAddress = (address) => {
+  if (!address) return ''
+  const { province, city, district, detail } = address
+  return `${province || ''}${city || ''}${district || ''}${detail || ''}`
+}
+
+const fetchOrderData = async () => {
+  try {
+    loading.value = true
+    const cartId = route.query.cartId
+    
+    if (!cartId) {
+      // 使用默认数据进行演示
+      ElMessage.warning('未指定订单信息，使用默认数据')
+      orderData.value = {
+        orderNumber: 'ORD' + Date.now(),
+        createTime: new Date().toISOString(),
+        paymentMethod: 'mixed',
+        totalAmount: 299.00,
+        subtotal: 289.00,
+        shippingFee: 10.00,
+        address: {
+          recipient: '收款人',
+          phone: '138****8888',
+          province: '浙江省',
+          city: '宁波市',
+          district: '鄞州区',
+          detail: '宁波外经合作大厦'
+        },
+        cartItems: [
+          {
+            id: 1,
+            name: '示例商品1',
+            image: '/imgs/loading.png',
+            specification: '默认规格',
+            price: 199.00,
+            quantity: 1
+          },
+          {
+            id: 2,
+            name: '示例商品2',
+            image: '/imgs/loading.png',
+            specification: '标准版',
+            price: 90.00,
+            quantity: 1
+          }
+        ]
+      }
+      return
+    }
+    
+    // 从后端获取订单信息
+    const response = await api.get(`/order/failed/${cartId}`)
+    
+    if (response.data.success) {
+      orderData.value = response.data.data
+    } else {
+      throw new Error(response.data.message || '获取订单信息失败')
+    }
+  } catch (error) {
+    ElMessage.error(error.message || '获取订单信息失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const continuePay = async () => {
+  try {
+    paying.value = true
+    // 跳转回支付页面
+    const cartId = route.query.cartId
+    if (cartId) {
+      router.push(`/pay?cartId=${cartId}`)
+    } else {
+      router.push('/pay')
+    }
+  } finally {
+    paying.value = false
+  }
+}
+
+const cancelOrder = async () => {
+  try {
+    await ElMessageBox.confirm(
+      '确定要取消这个订单吗？取消后将无法恢复。',
+      '取消订单',
+      {
+        confirmButtonText: '确定取消',
+        cancelButtonText: '我再想想',
+        type: 'warning'
+      }
+    )
+    
+    // 发送取消订单请求
+    const cartId = route.query.cartId
+    if (cartId) {
+      const response = await api.post(`/order/cancel/${cartId}`)
+      if (response.data.success) {
+        ElMessage.success('订单已取消')
+        router.push('/shop')
+      } else {
+        throw new Error(response.data.message || '取消订单失败')
+      }
+    } else {
+      ElMessage.success('订单已取消')
+      router.push('/shop')
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error(error.message || '取消订单失败')
+    }
+  }
+}
+
+// 生命周期
+onMounted(() => {
+  fetchOrderData()
+})
+</script>
+
+<style scoped>
+.pay-failed-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;
+  position: relative;
+}
+
+.nav-left,
+.nav-right {
+  width: 48px;
+  display: flex;
+  justify-content: center;
+}
+
+.nav-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.nav-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.back-btn {
+  color: #333;
+  padding: 0;
+}
+
+.page-content {
+  flex: 1;
+  padding: 0;
+}
+
+.order-info-section,
+.address-section,
+.products-section,
+.cost-section {
+  background: white;
+  padding: 16px;
+  margin-bottom: 8px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0 0 12px 0;
+  color: #333;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.label {
+  font-size: 14px;
+  color: #666;
+}
+
+.value {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.address-card {
+  background: #f8f9fa;
+  padding: 12px;
+  border-radius: 8px;
+}
+
+.address-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.recipient {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.phone {
+  font-size: 14px;
+  color: #666;
+}
+
+.address-detail {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+
+.product-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.product-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+.product-image {
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+.product-info {
+  flex: 1;
+}
+
+.product-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 4px;
+}
+
+.product-spec {
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 4px;
+}
+
+.product-price {
+  font-size: 12px;
+  color: #666;
+}
+
+.product-total {
+  font-size: 14px;
+  font-weight: 500;
+  color: #ff4757;
+}
+
+.cost-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+}
+
+.cost-item.total {
+  border-top: 1px solid #eee;
+  margin-top: 8px;
+  padding-top: 12px;
+  font-weight: 500;
+}
+
+.cost-item.total .value {
+  color: #ff4757;
+  font-size: 16px;
+}
+
+.bottom-actions {
+  padding: 16px;
+  background: white;
+  border-top: 1px solid #eee;
+  display: flex;
+  gap: 12px;
+}
+
+.cancel-btn {
+  flex: 1;
+  height: 48px;
+  border: 1px solid #ddd;
+  color: #666;
+  background: white;
+  border-radius: 24px;
+  font-size: 16px;
+}
+
+.pay-btn {
+  flex: 1;
+  height: 48px;
+  background: #ffae00;
+  border: none;
+  border-radius: 24px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.pay-btn:hover {
+  background: #e69900;
+}
+</style>

src/views/Transfers.vue

@@ -114,7 +114,6 @@
               @click="statusFilter = ''"
             >
               <span class="filter-text">全部</span>
-              <!-- <span class="filter-count">{{ pagination.total }}</span> -->
             </div>
             <div 
               class="filter-item"
@@ -122,7 +121,6 @@
               @click="statusFilter = 'pending'"
             >
               <span class="filter-text">待确认</span>
-              <!-- <span class="filter-count">{{ pendingCount }}</span> -->
             </div>
             <div 
               class="filter-item"
@@ -130,20 +128,13 @@
               @click="statusFilter = 'confirmed'"
             >
               <span class="filter-text">已确认</span>
-              <!-- <span class="filter-count">{{ confirmedCount }}</span> -->
             </div>
-            <!-- <div 
-              class="filter-item"
-              :class="{ active: statusFilter === 'rejected' }"
-              @click="statusFilter = 'rejected'"
-            > -->
             <div 
               class="filter-item"
               :class="{ active: statusFilter === 'not_received' }"
               @click="statusFilter = 'not_received'"
             >
               <span class="filter-text">已拒绝</span>
-              <!-- <span class="filter-count">{{ rejectedCount }}</span> -->
             </div>
             <div 
               class="filter-item"
@@ -151,7 +142,13 @@
               @click="statusFilter = 'received'"
             >
               <span class="filter-text">已收款</span>
-              <!-- <span class="filter-count">{{ rejectedCount }}</span> -->
+            </div>
+            <div 
+              class="filter-item"
+              :class="{ active: statusFilter === 'cancelled' }"
+              @click="statusFilter = 'cancelled'"
+            >
+              <span class="filter-text">已取消</span>
             </div>
           </div>