From 144df5544a250b74270a9069fd1b234db2397f21 Mon Sep 17 00:00:00 2001
From: chenkainan <chenkainan163@163.com>
Date: Tue, 2 Sep 2025 13:39:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=93=E5=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/HeaderNav.vue       |  22 +-
 src/components/product/ProductList.vue    |   4 +-
 src/router/index.js                       |  18 +-
 src/views/Login.vue                       |   2 +-
 src/views/Order/Index.vue                 | 715 ++++++++++++++++++++++
 src/views/{User => Order}/OrderDetail.vue |   0
 6 files changed, 743 insertions(+), 18 deletions(-)
 create mode 100644 src/views/Order/Index.vue
 rename src/views/{User => Order}/OrderDetail.vue (100%)

diff --git a/src/components/layout/HeaderNav.vue b/src/components/layout/HeaderNav.vue
index fe5d0d2..334a53e 100644
--- a/src/components/layout/HeaderNav.vue
+++ b/src/components/layout/HeaderNav.vue
@@ -5,19 +5,23 @@
       <div class="container">
         <p>
           欢迎来到时味苏州平台！
-          <a href="/register" class="highlight">立即注册</a>
+          <a href="/Register" class="highlight">立即注册</a>
         </p>
         <div class="top-links">
-          <a href="/user" v-if="isLogin">
+          <a href="/User" v-if="isLogin">
             <img v-lazy="userInfo.avatar" alt="用户头像" class="avatar" />
             {{ userInfo.username }}
           </a>
-          <a href="/login" v-else>登录</a>
+          <a href="/Login" v-else>登录</a>
           <span class="separator" v-if="isLogin">|</span>
-          <a href="/register" v-if="isLogin">注册</a>
-          <a href="/user">采购人中心</a>
-          <a href="/user">购物车<span v-if="cartTotalCount > 0">({{ cartTotalCount }}件)</span></a>
-          <a href="/userCenter" v-if="isLogin">我的订单</a>
+          <a href="/Register" v-if="isLogin">注册</a>
+          <a href="/User">采购人中心</a>
+          <a href="/User/ShoppingCart"
+            >购物车<span v-if="cartTotalCount > 0"
+              >({{ cartTotalCount }}件)</span
+            ></a
+          >
+          <a href="/User/OrderList" v-if="isLogin">我的订单</a>
           <a href="">商户后台</a>
           <a href="javascript:;" @click="handleLogout" v-if="isLogin">退出</a>
         </div>
@@ -169,7 +173,7 @@ export default {
 
       // 判断当前是否在搜索结果页
       const isSearchPage =
-        this.$route.path === "/productList" &&
+        this.$route.path === "/ProductList" &&
         this.$route.query.type === "search";
 
       if (isSearchPage) {
@@ -178,7 +182,7 @@ export default {
       } else {
         // 不在搜索页则跳转
         this.$router.push({
-          path: "/productList",
+          path: "/ProductList",
           query: { keyword: this.searchText, type: "search" },
         });
       }
diff --git a/src/components/product/ProductList.vue b/src/components/product/ProductList.vue
index 72affb1..15b8468 100644
--- a/src/components/product/ProductList.vue
+++ b/src/components/product/ProductList.vue
@@ -3,7 +3,7 @@
     <div class="product-grid">
       <div v-for="product in products" :key="product.id" class="product-card">
         <div class="product-img">
-          <a :href="`/detail/${product.id}`" :to="`/detail/${product.id}`">
+          <a :href="`/Detail/${product.id}`" :to="`/Detail/${product.id}`">
             <img
               v-lazy="product.headimg"
               :alt="product.title"
@@ -24,7 +24,7 @@
             </div>
           </div>
           <h3 class="product-name">
-            <a :href="`/detail/${product.id}`" :to="`/detail/${product.id}`">
+            <a :href="`/Detail/${product.id}`" :to="`/Detail/${product.id}`">
               {{ product.title }}
             </a>
           </h3>
diff --git a/src/router/index.js b/src/router/index.js
index 40a9997..a4a977d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -26,7 +26,7 @@ const router = new Router({
       component: () => import('@/views/Home.vue')
     },
     {
-      path: '/detail/:id',
+      path: '/Detail/:id',
       name: 'Detail',
       meta: {
         title: '首页 - 精品商城',
@@ -35,7 +35,7 @@ const router = new Router({
       component: () => import('@/views/Detail/Index.vue')
     },
     {
-      path: '/productList',
+      path: '/ProductList',
       name: 'ProductList',
       meta: {
         title: '商品列表',
@@ -156,11 +156,17 @@ const router = new Router({
         },
       ],
     },
+    {
+      path: '/Order',
+      name: 'Order',
+      meta: { title: '下单', keepAlive: false },
+      component: () => import('@/views/Order/Index.vue')
+    },
     {
       path: '/OrderDetail',
       name: 'OrderDetail',
       meta: { title: '订单详情 - 精品商城', keepAlive: false },
-      component: () => import('@/views/User/OrderDetail.vue')
+      component: () => import('@/views/Order/OrderDetail.vue')
     },
     {
       path: '/PurchaserAdd',
@@ -204,7 +210,7 @@ const router = new Router({
     //   component: () => import('@/views/OrderDetail.vue')
     // },
     {
-      path: '/login',
+      path: '/Login',
       name: 'Login',
       meta: {
         title: '登录 - 精品商城',
@@ -213,7 +219,7 @@ const router = new Router({
       component: () => import('@/views/Login.vue')
     },
     {
-      path: '/register',
+      path: '/Register',
       name: 'Register',
       meta: {
         title: '注册 - 精品商城',
@@ -251,7 +257,7 @@ router.beforeEach((to, from, next) => {
       next()
     } else {
       next({
-        path: '/login',
+        path: '/Login',
         query: { redirect: to.fullPath }
       })
     }
diff --git a/src/views/Login.vue b/src/views/Login.vue
index edac8cc..cfa464b 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -225,7 +225,7 @@ export default {
 
     // 前往注册页
     goToRegister() {
-      this.$router.push("/register");
+      this.$router.push("/Register");
     },
   },
 };
diff --git a/src/views/Order/Index.vue b/src/views/Order/Index.vue
new file mode 100644
index 0000000..6f38e4e
--- /dev/null
+++ b/src/views/Order/Index.vue
@@ -0,0 +1,715 @@
+<template>
+  <div class="order-page">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2>填写收货人信息</h2>
+      <el-button type="text" class="address-book-btn">
+        新增/修改地址
+      </el-button>
+    </div>
+
+    <!-- 收货人信息 -->
+    <div class="info-section">
+      <h3>收货人信息</h3>
+      <div class="address-item">
+        <span class="label">收货人地址：</span>
+        <div class="address-content">
+          <div
+            class="saved-address"
+            v-for="(addr, index) in addresses"
+            :key="index"
+            @click="selectAddress(index)"
+            :class="{ selected: selectedAddressIndex === index }"
+          >
+            <span class="name-tag">{{ addr.name }} {{ addr.province }}</span>
+            <span class="detail">{{ addr.address }} {{ addr.phone }}</span>
+            <el-button type="text" class="set-default-btn">设为默认</el-button>
+            <el-button type="text" class="edit-btn">编辑</el-button>
+            <el-button type="text" class="delete-btn">删除</el-button>
+          </div>
+        </div>
+      </div>
+
+      <div class="trade-type-item">
+        <span class="label">交易方式：</span>
+        <el-radio-group v-model="selectedTradeType">
+          <el-radio :label="1">先款后货</el-radio>
+          <el-radio :label="2">货到付款</el-radio>
+        </el-radio-group>
+      </div>
+
+      <h3>发票信息</h3>
+      <div class="invoice-type-item">
+        <span class="label">发票类型：</span>
+        <el-radio-group v-model="selectedInvoiceType">
+          <el-radio :label="1">增值税普通发票</el-radio>
+          <el-radio :label="2">普通电子发票</el-radio>
+        </el-radio-group>
+      </div>
+
+      <div class="invoice-title-item">
+        <span class="label">发票抬头：</span>
+        <el-select
+          v-model="selectedInvoiceTitle"
+          placeholder="请选择发票抬头"
+          class="invoice-title-select"
+        >
+          <el-option
+            v-for="(title, index) in invoiceTitles"
+            :key="index"
+            :label="title.name"
+            :value="title.id"
+          ></el-option>
+        </el-select>
+        <el-button type="text" class="add-title-btn">+ 添加</el-button>
+      </div>
+
+      <h3>收票地址</h3>
+      <div class="invoice-address-item">
+        <span class="label">收票地址：</span>
+        <div class="address-content">
+          <div
+            class="saved-address"
+            v-for="(addr, index) in invoiceAddresses"
+            :key="index"
+            @click="selectInvoiceAddress(index)"
+            :class="{ selected: selectedInvoiceAddressIndex === index }"
+          >
+            <span class="name-tag">{{ addr.name }} {{ addr.province }}</span>
+            <span class="detail">{{ addr.address }} {{ addr.phone }}</span>
+            <el-button type="text" class="set-default-btn">设为默认</el-button>
+            <el-button type="text" class="edit-btn">编辑</el-button>
+            <el-button type="text" class="delete-btn">删除</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 签署合同 -->
+    <div class="contract-section">
+      <h3>签署合同</h3>
+      <p>如需签署合同，提交订单后，请至采购中心>合同中心签署</p>
+    </div>
+
+    <!-- 商品清单 -->
+    <div class="goods-section">
+      <h3>商品清单</h3>
+
+      <!-- 订单分组 -->
+      <div
+        class="order-group"
+        v-for="(group, groupIndex) in orderGroups"
+        :key="groupIndex"
+      >
+        <div class="supplier-info">
+          <span>供货名称：{{ group.supplier }}</span>
+        </div>
+        <table class="goods-table">
+          <thead>
+            <tr>
+              <th>商品</th>
+              <th>规格</th>
+              <th>单价(元)</th>
+              <th>数量</th>
+              <th>运费</th>
+              <th>收货方式</th>
+              <th>小计(元)</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, itemIndex) in group.items" :key="itemIndex">
+              <td>
+                <img :src="item.image" alt="商品图片" class="goods-img" />
+                <span class="goods-name">{{ item.name }}</span>
+              </td>
+              <td>{{ item.spec }}</td>
+              <td>{{ item.price }}</td>
+              <td>{{ item.quantity }}</td>
+              <td>{{ item.freight }}</td>
+              <td>{{ item.deliveryType }}</td>
+              <td class="subtotal">{{ item.subtotal }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="order-remark">
+          <span class="remark-label">订单备注：</span>
+          <div class="rich-text-editor">
+            <el-input
+              type="textarea"
+              v-model="group.remark"
+              rows="4"
+              placeholder="请输入订单备注信息"
+              class="remark-editor"
+            ></el-input>
+            <div class="editor-toolbar" v-if="false">
+              <el-button
+                type="text"
+                icon="el-icon-bold"
+                size="mini"
+              ></el-button>
+              <el-button
+                type="text"
+                icon="el-icon-italic"
+                size="mini"
+              ></el-button>
+              <el-button
+                type="text"
+                icon="el-icon-underline"
+                size="mini"
+              ></el-button>
+              <el-button
+                type="text"
+                icon="el-icon-link"
+                size="mini"
+              ></el-button>
+              <el-button
+                type="text"
+                icon="el-icon-picture"
+                size="mini"
+              ></el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 总计信息 -->
+      <div class="total-info">
+        <p>
+          共 {{ totalGoodsCount }} 件商品，总商品金额 ¥{{ totalGoodsAmount }}
+        </p>
+        <p>总运费 ¥{{ totalFreight }}</p>
+        <p class="pay-amount">实付总金额 ¥{{ totalPayAmount }}</p>
+        <p class="address-info">
+          配送地：{{ selectedAddress.address }}<br />
+          交货地：{{ selectedAddress.address }} {{ selectedAddress.phone }}
+        </p>
+        <el-button type="primary" class="submit-btn" @click="submitOrder">
+          提交订单
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "OrderPage",
+  data() {
+    return {
+      // 收货地址相关
+      addresses: [
+        {
+          id: 1,
+          name: "郑小工",
+          province: "江苏省",
+          address: "苏州市吴中区文化创意大厦16层",
+          phone: "13000000000",
+          isDefault: true,
+        },
+        {
+          id: 2,
+          name: "郑小工",
+          province: "江苏省",
+          address: "苏州市吴中区文化创意大厦16层",
+          phone: "13000000001",
+          isDefault: false,
+        },
+      ],
+      selectedAddressIndex: 0,
+
+      // 交易方式
+      selectedTradeType: 1, // 1:先款后货 2:货到付款
+
+      // 发票信息
+      selectedInvoiceType: 1, // 1:增值税普通发票 2:普通电子发票
+
+      // 发票抬头
+      invoiceTitles: [
+        { id: 1, name: "苏州特色农产品发展有限公司" },
+        { id: 2, name: "个人" },
+        { id: 3, name: "苏州科技有限公司" },
+      ],
+      selectedInvoiceTitle: null,
+
+      // 收票地址
+      invoiceAddresses: [
+        {
+          id: 1,
+          name: "郑小工",
+          province: "江苏省",
+          address: "苏州市吴中区文化创意大厦16层",
+          phone: "13000000000",
+          isDefault: true,
+        },
+        {
+          id: 2,
+          name: "郑小工",
+          province: "江苏省",
+          address: "苏州市吴中区文化创意大厦16层",
+          phone: "13000000001",
+          isDefault: false,
+        },
+      ],
+      selectedInvoiceAddressIndex: 0,
+
+      // 订单分组
+      orderGroups: [
+        {
+          supplier: "新疆特色农产品开发有限公司",
+          items: [
+            {
+              image: "https://picsum.photos/50/50?random=1",
+              name: "产品标题产品标题产品标题",
+              spec: "规格名称一样",
+              price: "¥449",
+              quantity: 1,
+              freight: "¥0.00",
+              deliveryType: "邮寄",
+              subtotal: "¥449.00",
+            },
+            {
+              image: "https://picsum.photos/50/50?random=2",
+              name: "产品标题产品标题",
+              spec: "规格名称一样",
+              price: "¥199",
+              quantity: 1,
+              freight: "¥0.00",
+              deliveryType: "快递",
+              subtotal: "¥199.00",
+            },
+          ],
+          remark: "",
+        },
+        {
+          supplier: "新疆特色农产品开发有限公司",
+          items: [
+            {
+              image: "https://picsum.photos/50/50?random=3",
+              name: "产品标题产品标题产品标题",
+              spec: "规格名称一样",
+              price: "¥339",
+              quantity: 1,
+              freight: "¥0.00",
+              deliveryType: "邮寄",
+              subtotal: "¥339.00",
+            },
+          ],
+          remark: "",
+        },
+      ],
+
+      // 总计信息
+      totalGoodsCount: 3,
+      totalGoodsAmount: 973,
+      totalFreight: 0,
+      totalPayAmount: 973,
+    };
+  },
+  computed: {
+    // 获取选中的收货地址
+    selectedAddress() {
+      return this.addresses[this.selectedAddressIndex] || {};
+    },
+  },
+  methods: {
+    // 选择收货地址
+    selectAddress(index) {
+      this.selectedAddressIndex = index;
+    },
+
+    // 选择收票地址
+    selectInvoiceAddress(index) {
+      this.selectedInvoiceAddressIndex = index;
+    },
+
+    // 提交订单
+    submitOrder() {
+      // 表单验证
+      if (this.selectedAddressIndex === null) {
+        this.$message.warning("请选择收货地址");
+        return;
+      }
+
+      if (!this.selectedInvoiceTitle) {
+        this.$message.warning("请选择发票抬头");
+        return;
+      }
+
+      if (this.selectedInvoiceAddressIndex === null) {
+        this.$message.warning("请选择收票地址");
+        return;
+      }
+
+      this.$message.success("订单提交成功！");
+      // 实际项目中可跳转至订单详情页
+      // this.$router.push('/order/detail');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.order-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #fff;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    h2 {
+      font-size: 18px;
+      font-weight: 500;
+      color: #333;
+      margin: 0;
+    }
+
+    .address-book-btn {
+      color: #409eff;
+    }
+  }
+
+  .info-section {
+    margin-bottom: 20px;
+
+    h3 {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 15px;
+      padding-bottom: 5px;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .address-item,
+    .trade-type-item,
+    .invoice-type-item,
+    .invoice-title-item,
+    .invoice-address-item {
+      margin-bottom: 15px;
+      display: flex;
+      align-items: flex-start;
+
+      .label {
+        width: 120px;
+        color: #666;
+        font-size: 14px;
+        padding-top: 5px;
+      }
+
+      .address-content {
+        flex: 1;
+      }
+
+      .saved-address {
+        margin-bottom: 10px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 8px;
+        border: 1px solid #e6e6e6;
+        border-radius: 4px;
+        width: 100%;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &.selected {
+          border-color: #6a8a27;
+          background-color: rgba(106, 138, 39, 0.05);
+        }
+
+        .name-tag {
+          background-color: #f8f8f8;
+          color: #333;
+          padding: 2px 6px;
+          border-radius: 3px;
+          margin-right: 10px;
+          font-size: 13px;
+        }
+
+        .detail {
+          flex: 1;
+          font-size: 14px;
+          color: #666;
+          min-width: 200px;
+          margin-bottom: 5px;
+        }
+
+        .set-default-btn,
+        .edit-btn,
+        .delete-btn {
+          margin-left: 10px;
+          color: #409eff;
+          font-size: 13px;
+          padding: 0;
+          height: auto;
+        }
+      }
+
+      .el-radio {
+        margin-right: 15px;
+        margin-top: 3px;
+      }
+
+      .invoice-title-select {
+        width: 300px;
+        margin-top: 3px;
+      }
+
+      .add-title-btn {
+        margin-left: 10px;
+        color: #409eff;
+        padding: 0;
+        height: auto;
+      }
+    }
+  }
+
+  .contract-section {
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: #f9f9f9;
+    border-radius: 4px;
+
+    h3 {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 10px;
+      margin-top: 0;
+    }
+
+    p {
+      font-size: 14px;
+      color: #666;
+      margin: 0;
+    }
+  }
+
+  .goods-section {
+    h3 {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+      margin-bottom: 15px;
+      padding-bottom: 5px;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .order-group {
+      margin-bottom: 20px;
+      border: 1px solid #e6e6e6;
+      border-radius: 4px;
+      overflow: hidden;
+
+      .supplier-info {
+        background-color: #f5f7fa;
+        padding: 10px 15px;
+        font-size: 14px;
+        color: #333;
+        border-bottom: 1px solid #e6e6e6;
+      }
+
+      .goods-table {
+        width: 100%;
+        border-collapse: collapse;
+
+        th {
+          background-color: #f5f7fa;
+          text-align: left;
+          padding: 10px 15px;
+          border: 1px solid #e6e6e6;
+          font-weight: 500;
+          color: #333;
+          font-size: 14px;
+        }
+
+        td {
+          padding: 10px 15px;
+          border: 1px solid #e6e6e6;
+          vertical-align: middle;
+          font-size: 14px;
+          color: #666;
+        }
+
+        .goods-img {
+          width: 50px;
+          height: 50px;
+          margin-right: 10px;
+          vertical-align: middle;
+          border-radius: 4px;
+        }
+
+        .goods-name {
+          vertical-align: middle;
+          max-width: 200px;
+          display: inline-block;
+        }
+
+        .subtotal {
+          color: #ff4d4f;
+          font-weight: 500;
+        }
+      }
+
+      .order-remark {
+        padding: 15px;
+        font-size: 14px;
+        color: #666;
+        border-top: 1px solid #e6e6e6;
+        background-color: #f9f9f9;
+
+        .remark-label {
+          display: block;
+          margin-bottom: 10px;
+          font-weight: 500;
+        }
+
+        .rich-text-editor {
+          border: 1px solid #e6e6e6;
+          border-radius: 4px;
+          overflow: hidden;
+
+          .remark-editor {
+            border: none;
+            border-bottom: 1px solid #e6e6e6;
+            border-radius: 0;
+            min-height: 100px;
+          }
+
+          .editor-toolbar {
+            padding: 5px 10px;
+            background-color: #f5f5f5;
+            border-top: 1px solid #e6e6e6;
+
+            .el-button {
+              margin-right: 5px;
+            }
+          }
+        }
+      }
+    }
+
+    .total-info {
+      text-align: right;
+      padding: 20px;
+      background-color: #f5f7fa;
+      border-radius: 4px;
+      margin-top: 10px;
+
+      p {
+        margin: 8px 0;
+        color: #333;
+        font-size: 14px;
+      }
+
+      .pay-amount {
+        font-weight: bold;
+        color: #ff4d4f;
+        font-size: 16px;
+        margin: 15px 0;
+      }
+
+      .address-info {
+        font-size: 13px;
+        color: #999;
+        margin-top: 15px;
+        line-height: 1.6;
+        text-align: right;
+      }
+
+      .submit-btn {
+        margin-top: 20px;
+        width: 150px;
+        height: 40px;
+        background-color: #ff4d4f;
+        border: none;
+        font-size: 16px;
+
+        &:hover {
+          background-color: #e03e40;
+        }
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 768px) {
+  .order-page {
+    padding: 10px;
+  }
+
+  .info-section {
+    .address-item,
+    .trade-type-item,
+    .invoice-type-item,
+    .invoice-title-item,
+    .invoice-address-item {
+      flex-direction: column;
+
+      .label {
+        width: 100%;
+        margin-bottom: 5px;
+        padding-top: 0;
+      }
+
+      .saved-address {
+        flex-direction: column;
+        align-items: flex-start;
+
+        .name-tag,
+        .detail {
+          margin-bottom: 8px;
+          width: 100%;
+        }
+
+        .set-default-btn,
+        .edit-btn,
+        .delete-btn {
+          margin-left: 0;
+          margin-right: 10px;
+          display: inline-block;
+        }
+      }
+
+      .invoice-title-select {
+        width: 100%;
+      }
+    }
+  }
+
+  .goods-section {
+    .goods-table {
+      font-size: 12px;
+    }
+
+    .order-group {
+      .goods-table th,
+      .goods-table td {
+        padding: 8px;
+        font-size: 12px;
+      }
+
+      .goods-name {
+        max-width: 100px;
+      }
+    }
+
+    .total-info {
+      padding: 15px;
+
+      .submit-btn {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>
+    
\ No newline at end of file
diff --git a/src/views/User/OrderDetail.vue b/src/views/Order/OrderDetail.vue
similarity index 100%
rename from src/views/User/OrderDetail.vue
rename to src/views/Order/OrderDetail.vue