个人中心

src/router/index.js

@@ -121,15 +121,39 @@ const router = new Router({
         {
           path: 'UserInvoice',
           name: 'UserInvoice',
-          meta: { title: '我的发票 - 精品商城', keepAlive: false },
+          meta: { title: '发票抬头 - 精品商城', keepAlive: false },
           component: () => import('@/views/User/UserInvoice.vue')
         },
+        {
+          path: 'UserInvoiceList',
+          name: 'UserInvoiceList',
+          meta: { title: '我的发票 - 精品商城', keepAlive: false },
+          component: () => import('@/views/User/UserInvoiceList.vue')
+        },
         {
           path: 'ShoppingCart',
           name: 'ShoppingCart',
           meta: { title: '购物车 - 精品商城', keepAlive: false },
           component: () => import('@/views/User/ShoppingCart.vue')
         },
+        {
+          path: 'CommentManage',
+          name: 'CommentManage',
+          meta: { title: '评价管理 - 精品商城', keepAlive: false },
+          component: () => import('@/views/User/CommentManage.vue')
+        },
+        {
+          path: 'ContractList',
+          name: 'ContractList',
+          meta: { title: '合同管理 - 精品商城', keepAlive: false },
+          component: () => import('@/views/User/ContractList.vue')
+        },
+        {
+          path: 'MessageList',
+          name: 'MessageList',
+          meta: { title: '消息中心 - 精品商城', keepAlive: false },
+          component: () => import('@/views/User/MessageList.vue')
+        },
       ],
     },
     {

src/views/User/CommentManage.vue

@@ -0,0 +1,512 @@
+<template>
+  <div class="bg">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="待评价订单" name="pendingPayment"></el-tab-pane>
+      <el-tab-pane label="已评价" name="pendingDelivery"></el-tab-pane>
+    </el-tabs>
+
+    <div class="filter-bar">
+      <el-form :inline="true" :model="filterForm" size="small">
+        
+        <el-form-item label="订单编号">
+          <el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input>
+        </el-form-item>
+        <el-form-item label="商品名称">
+          <el-input v-model="filterForm.goodsName" placeholder="请输入商品名称"></el-input>
+        </el-form-item>
+        <el-form-item label="供应商名称">
+          <el-input v-model="filterForm.merchantName" placeholder="请输入商家名称"></el-input>
+        </el-form-item>
+        <el-form-item label="下单时间">
+          <el-date-picker v-model="filterForm.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button style="background:#6a8a27;border: none;" type="primary" @click="search">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div>
+        <div class="order-products" style="padding:0 20px;background: #f8f9fa; border-top: 1px solid #eee; border-bottom: 1px solid #eee;margin-bottom: 20px;">
+          <div class="product-item" >
+            <div class="product-details">
+              <div class="product-name">商品信息</div>
+            </div>
+            <div class="product-price">单价(元)</div>
+            <div class="product-quantity">数量</div>
+            <div class="product-total">小计(元)</div>
+            <!-- <div class="product-status">
+              <el-tag  :type="getStatusTagType(product.status)" size="small">{{ getStatusText(product.status) }}</el-tag>
+            </div> -->
+            <div class="product-actions"></div>
+          </div>
+        </div>
+
+      <!-- 订单卡片 - 按商家合并商品 -->
+      <div class="order-card" v-for="order in filteredOrders" :key="order.id">
+        <!-- 订单头部 - 包含商家信息 -->
+        <div class="order-header flex-between">
+            <div style="display: flex;">
+                <div >订单号: {{ order.orderNo }}</div>
+                <div  style="padding-left: 60px;">下单时间：{{ order.createTime }}</div>
+            </div>
+            <div class="product-status">
+              <!-- <el-tag  :type="getStatusTagType(order.status)" size="small">{{ getStatusText(order.status) }}</el-tag> -->
+            </div>
+        </div>
+
+        <!-- 订单商品列表 -->
+        <div class="order-products">
+          <div class="product-item" v-for="product in order.products" :key="product.id">
+            <img :src="product.image" class="product-image" :alt="product.name">
+            <div class="product-details">
+              <div class="product-name">{{ product.name }}</div>
+              <div class="product-spec">{{ product.spec }}</div>
+            </div>
+            <div class="product-price">¥{{ product.price.toFixed(2) }}</div>
+            <div class="product-quantity">x{{ product.quantity }}</div>
+            <div class="product-total">¥{{ (product.price * product.quantity).toFixed(2) }}</div>
+            <!-- <div class="product-status">
+              <el-tag  :type="getStatusTagType(product.status)" size="small">{{ getStatusText(product.status) }}</el-tag>
+            </div> -->
+            <div class="product-actions">
+              <el-button  type="text"  size="mini"> 商品详情</el-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 订单底部 - 金额和操作 -->
+        <div class="order-footer">
+          <div class="order-summary">
+            <div class="order-amount">
+              合计: <strong>¥{{ order.totalAmount.toFixed(2) }}</strong> (含运费 ¥{{ order.freight.toFixed(2) }})
+            </div>
+            <!-- <div class="order-tips">
+              {{ order.products.length }}件商品
+            </div> -->
+          </div>
+          <div class="order-actions">
+            <el-button type="text" size="mini" @click="gotoReview(order.id)">去评价</el-button>
+          </div>
+        </div>
+      </div>
+      <el-empty description="暂无订单" v-if="filteredOrders.length<=0"></el-empty>
+
+      <!-- 分页 -->
+      <div style="text-align: right; margin-top: 20px;">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[5, 10, 20]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="filteredOrders.length"
+        ></el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderList',
+   data () {
+     return {
+        activeTab: 'all',
+        currentPage: 1,
+        pageSize: 10,
+        filterForm: {
+          goodsName: '',
+          orderNo: '',
+          createTime: '',
+          merchantName: '',
+          tradeStatus: ''
+        },
+        // 订单数据 - 按商家合并商品
+        orders: [
+          {
+            id: 1,
+            orderNo: '209907091214560078',
+            createTime: '2099-07-09 10:47:49',
+            status: 'pendingPayment',
+            totalAmount: 937,
+            freight: 15,
+            isReviewed: false,
+            merchant: {
+              id: 101,
+              name: '花艺生活馆',
+              isOfficial: true
+            },
+            products: [
+              {
+                id: 1001,
+                name: '深情挚爱/卡罗拉玫瑰',
+                image: 'https://picsum.photos/200/200?random=1',
+                spec: '卡罗拉玫瑰33枝',
+                price: 349,
+                quantity: 1,
+                status: 'pendingPayment'
+              },
+              {
+                id: 1002,
+                name: '精美包装纸',
+                image: 'https://picsum.photos/200/200?random=4',
+                spec: '粉色',
+                price: 38,
+                quantity: 2,
+                status: 'pendingPayment'
+              }
+            ]
+          },
+          {
+            id: 2,
+            orderNo: '209907091214560079',
+            createTime: '2099-07-09 10:48:49',
+            status: 'pendingDelivery',
+            totalAmount: 199,
+            freight: 0,
+            isReviewed: false,
+            merchant: {
+              id: 102,
+              name: '北欧家居旗舰店',
+              isOfficial: true
+            },
+            products: [
+              {
+                id: 2001,
+                name: '北欧花艺素雅仿真花',
+                image: 'https://picsum.photos/200/200?random=2',
+                spec: '白色',
+                price: 199,
+                quantity: 1,
+                status: 'pendingDelivery'
+              }
+            ]
+          },
+          {
+            id: 3,
+            orderNo: '209907091214560080',
+            createTime: '2099-07-09 10:49:49',
+            status: 'delivering',
+            totalAmount: 389,
+            freight: 10,
+            isReviewed: false,
+            merchant: {
+              id: 101,
+              name: '花艺生活馆',
+              isOfficial: true
+            },
+            products: [
+              {
+                id: 3001,
+                name: '香槟玫瑰+白玫瑰混搭',
+                image: 'https://picsum.photos/200/200?random=3',
+                spec: '混搭',
+                price: 389,
+                quantity: 1,
+                status: 'delivering'
+              }
+            ]
+          }
+        ]
+    }
+    },
+    computed: {
+    // 过滤后的订单列表
+    filteredOrders() {
+        let result = [...this.orders];
+        
+        // 根据当前标签页过滤
+        if (this.activeTab !== 'all') {
+        result = result.filter(order => order.status === this.activeTab);
+        }
+        
+        // 根据商品名称过滤
+        if (this.filterForm.goodsName) {
+        const keyword = this.filterForm.goodsName.toLowerCase();
+        result = result.filter(order => {
+            return order.products.some(product => 
+            product.name.toLowerCase().includes(keyword)
+            );
+        });
+        }
+        
+        // 根据订单编号过滤
+        if (this.filterForm.orderNo) {
+        result = result.filter(order => 
+            order.orderNo.includes(this.filterForm.orderNo)
+        );
+        }
+        
+        // 根据商家名称过滤
+        if (this.filterForm.merchantName) {
+        const keyword = this.filterForm.merchantName.toLowerCase();
+        result = result.filter(order => 
+            order.merchant.name.toLowerCase().includes(keyword)
+        );
+        }
+        
+        // 根据交易状态过滤
+        if (this.filterForm.tradeStatus) {
+        result = result.filter(order => 
+            order.status === this.filterForm.tradeStatus
+        );
+        }
+        
+        return result;
+    }
+    },
+    methods: {
+    // 搜索
+    search() {
+        this.currentPage = 1; // 重置到第一页
+        this.$message({
+        message: '搜索条件已应用',
+        type: 'info'
+        });
+    },
+    
+    // 重置
+    reset() {
+        this.filterForm = {
+        goodsName: '',
+        orderNo: '',
+        createTime: '',
+        merchantName: '',
+        tradeStatus: ''
+        };
+        this.activeTab = 'all';
+        this.currentPage = 1;
+    },
+    
+    // 分页大小改变
+    handleSizeChange(val) {
+        this.pageSize = val;
+    },
+    
+    // 当前页改变
+    handleCurrentChange(val) {
+        this.currentPage = val;
+    },
+    
+    // 获取状态显示文本
+    getStatusText(status) {
+        const statusMap = {
+        pendingPayment: '待付款',
+        pendingDelivery: '待发货',
+        delivering: '配送中',
+        completed: '已完成',
+        cancelled: '已取消'
+        };
+        return statusMap[status] || status;
+    },
+    
+    // 获取状态标签类型
+    getStatusTagType(status) {
+        const typeMap = {
+        pendingPayment: 'warning',
+        pendingDelivery: 'info',
+        delivering: 'primary',
+        completed: 'success',
+        cancelled: 'danger'
+        };
+        return typeMap[status] || 'default';
+    },
+    
+    // 去付款
+    payOrder(orderId) {
+        this.$message({
+        message: `订单 ${orderId} 去付款`,
+        type: 'info'
+        });
+    },
+    
+    // 提醒发货
+    remindDelivery(orderId) {
+        this.$message({
+        message: `已提醒订单 ${orderId} 发货`,
+        type: 'success'
+        });
+    },
+    
+    // 查看物流
+    checkLogistics(orderId) {
+        this.$message({
+        message: `查看订单 ${orderId} 物流`,
+        type: 'info'
+        });
+    },
+    
+    // 去评价
+    gotoReview(orderId) {
+        this.$message({
+        message: `去评价订单 ${orderId}`,
+        type: 'info'
+        });
+    },
+    
+    // 查看订单详情
+    viewOrderDetail(orderId) {
+        this.$router.push({
+        name: 'OrderDetail',
+        });
+    }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg{
+  display: flex;
+  flex-direction: column;
+  
+  ::v-deep .el-button--text {
+    color: #6a8a27;
+  }
+  ::v-deep .el-tabs__item.is-active{
+    color: #6a8a27;
+  }
+  ::v-deep .el-tabs__active-bar{
+    background-color: #6a8a27
+  }
+  ::v-deep .el-tabs__item:hover{
+    color: #6a8a27;
+  }
+}
+    .filter-bar {
+      margin-bottom: 20px;
+    }
+
+
+    /* 订单卡片样式 */
+    .order-card {
+      border: 1px solid #eee;
+      border-radius: 4px;
+      margin-bottom: 20px;
+      overflow: hidden;
+    }
+
+    /* 订单头部 - 包含商家信息 */
+    .order-header {
+      background-color: #f8f9fa;
+      padding: 12px 20px;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #eee;
+      color: #666;
+      font-size: 14px;
+    }
+
+
+
+    /* 订单商品列表 */
+    .order-products {
+      padding: 10px 20px;
+    }
+
+    .product-item {
+      display: flex;
+      align-items: center;
+      padding: 15px 0;
+      border-bottom: 1px dashed #eee;
+      font-size: 14px;
+    }
+
+    .product-item:last-child {
+      border-bottom: none;
+    }
+
+    .product-image {
+      width: 80px;
+      height: 80px;
+      object-fit: cover;
+      margin-right: 15px;
+      border-radius: 4px;
+    }
+
+    .product-details {
+      flex: 1;
+    }
+
+    .product-name {
+      color: #333;
+      margin-bottom: 5px;
+    }
+
+    .product-spec {
+      color: #999;
+      font-size: 12px;
+    }
+
+    .product-price {
+      width: 120px;
+      text-align: center;
+      color: #333;
+    }
+
+    .product-quantity {
+      width: 100px;
+      text-align: center;
+      color: #666;
+    }
+
+    .product-total {
+      width: 120px;
+      text-align: center;
+      color: #333;
+      font-weight: 500;
+    }
+
+    .product-status {
+      width: 150px;
+      text-align: center;
+    }
+
+    .product-actions {
+      width: 150px;
+      text-align: center;
+    }
+
+    /* 订单底部 - 金额和操作 */
+    .order-footer {
+      background-color: #f8f9fa;
+      padding: 15px 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-top: 1px solid #eee;
+    }
+
+    .order-summary {
+      text-align: right;
+    }
+
+    .order-amount {
+      color: #333;
+      margin-bottom: 5px;
+    }
+
+    .order-amount strong {
+      color: #ff4d4f;
+      font-size: 16px;
+    }
+
+    .order-tips {
+      font-size: 12px;
+      color: #999;
+    }
+
+    .order-actions {
+      display: flex;
+      gap: 10px;
+    }
+</style>
+
+
+

src/views/User/ContractList.vue

@@ -0,0 +1,495 @@
+<template>
+  <div class="bg">
+    <div class="notice-bar" >
+      <div class="notice-bar__content">
+        <div>说明：</div>
+        <div>1.订单提交成功，系统将根据订单内容自动为您创建交易合同。</div>
+        <div>2.您可直接“下载合同模板”，线下邮寄盖章使用。</div>
+      </div>
+      
+    </div>
+
+    <div class="filter-bar">
+      <el-form :inline="true" :model="filterForm" size="small">
+        <el-form-item label="合同号">
+          <el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input>
+        </el-form-item>
+        <el-form-item label="订单编号">
+          <el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input>
+        </el-form-item>
+        <el-form-item label="下单时间">
+          <el-date-picker v-model="filterForm.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
+        </el-form-item>
+        <el-form-item label="供应商名称">
+          <el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input>
+        </el-form-item>
+        <el-form-item label="商品名称">
+          <el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input>
+        </el-form-item>
+        <el-form-item label="合同金额">
+          <el-input-number v-model="filterForm.min"></el-input-number>
+          至
+          <el-input-number v-model="filterForm.max"></el-input-number>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button style="background:#6a8a27;border: none;" type="primary" @click="search">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-table :data="orders" border style="width: 100%;">
+            <el-table-column prop="createTime" label="下单时间" width="200"></el-table-column>
+            <el-table-column prop="orderNo" label="订单号" min-width="120"></el-table-column>
+            <el-table-column prop="status" label="商品信息" width="120"></el-table-column>
+            <el-table-column prop="totalAmount" label="合同号" width="120"></el-table-column>
+            <el-table-column prop="orderNo" label="合同金额" min-width="120"></el-table-column>
+            <el-table-column label="操作" width="200">
+                <template slot-scope="scope">
+                <el-button size="mini" @click="handleEdit(scope.row)">查看</el-button>
+                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">下载合同模板</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div style="text-align: right; margin-top: 20px;">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="filterForm.currentPage"
+            :page-sizes="[5, 10, 20]"
+            :page-size="filterForm.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="filterForm.total"
+          ></el-pagination>
+        </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderList',
+   data () {
+     return {
+        activeTab: 'all',
+        currentPage: 1,
+        pageSize: 10,
+        filterForm: {
+          goodsName: '',
+          orderNo: '',
+          createTime: '',
+          merchantName: '',
+          tradeStatus: ''
+        },
+        // 订单数据 - 按商家合并商品
+        orders: [
+          {
+            id: 1,
+            orderNo: '209907091214560078',
+            createTime: '2099-07-09 10:47:49',
+            status: 'pendingPayment',
+            totalAmount: 937,
+            freight: 15,
+            isReviewed: false,
+            merchant: {
+              id: 101,
+              name: '花艺生活馆',
+              isOfficial: true
+            },
+            products: [
+              {
+                id: 1001,
+                name: '深情挚爱/卡罗拉玫瑰',
+                image: 'https://picsum.photos/200/200?random=1',
+                spec: '卡罗拉玫瑰33枝',
+                price: 349,
+                quantity: 1,
+                status: 'pendingPayment'
+              },
+              {
+                id: 1002,
+                name: '精美包装纸',
+                image: 'https://picsum.photos/200/200?random=4',
+                spec: '粉色',
+                price: 38,
+                quantity: 2,
+                status: 'pendingPayment'
+              }
+            ]
+          },
+          {
+            id: 2,
+            orderNo: '209907091214560079',
+            createTime: '2099-07-09 10:48:49',
+            status: 'pendingDelivery',
+            totalAmount: 199,
+            freight: 0,
+            isReviewed: false,
+            merchant: {
+              id: 102,
+              name: '北欧家居旗舰店',
+              isOfficial: true
+            },
+            products: [
+              {
+                id: 2001,
+                name: '北欧花艺素雅仿真花',
+                image: 'https://picsum.photos/200/200?random=2',
+                spec: '白色',
+                price: 199,
+                quantity: 1,
+                status: 'pendingDelivery'
+              }
+            ]
+          },
+          {
+            id: 3,
+            orderNo: '209907091214560080',
+            createTime: '2099-07-09 10:49:49',
+            status: 'delivering',
+            totalAmount: 389,
+            freight: 10,
+            isReviewed: false,
+            merchant: {
+              id: 101,
+              name: '花艺生活馆',
+              isOfficial: true
+            },
+            products: [
+              {
+                id: 3001,
+                name: '香槟玫瑰+白玫瑰混搭',
+                image: 'https://picsum.photos/200/200?random=3',
+                spec: '混搭',
+                price: 389,
+                quantity: 1,
+                status: 'delivering'
+              }
+            ]
+          }
+        ]
+    }
+    },
+    computed: {
+    // 过滤后的订单列表
+    filteredOrders() {
+        let result = [...this.orders];
+        
+        // 根据当前标签页过滤
+        if (this.activeTab !== 'all') {
+        result = result.filter(order => order.status === this.activeTab);
+        }
+        
+        // 根据商品名称过滤
+        if (this.filterForm.goodsName) {
+        const keyword = this.filterForm.goodsName.toLowerCase();
+        result = result.filter(order => {
+            return order.products.some(product => 
+            product.name.toLowerCase().includes(keyword)
+            );
+        });
+        }
+        
+        // 根据订单编号过滤
+        if (this.filterForm.orderNo) {
+        result = result.filter(order => 
+            order.orderNo.includes(this.filterForm.orderNo)
+        );
+        }
+        
+        // 根据商家名称过滤
+        if (this.filterForm.merchantName) {
+        const keyword = this.filterForm.merchantName.toLowerCase();
+        result = result.filter(order => 
+            order.merchant.name.toLowerCase().includes(keyword)
+        );
+        }
+        
+        // 根据交易状态过滤
+        if (this.filterForm.tradeStatus) {
+        result = result.filter(order => 
+            order.status === this.filterForm.tradeStatus
+        );
+        }
+        
+        return result;
+    }
+    },
+    methods: {
+    // 搜索
+    search() {
+        this.currentPage = 1; // 重置到第一页
+        this.$message({
+        message: '搜索条件已应用',
+        type: 'info'
+        });
+    },
+    
+    // 重置
+    reset() {
+        this.filterForm = {
+        goodsName: '',
+        orderNo: '',
+        createTime: '',
+        merchantName: '',
+        tradeStatus: ''
+        };
+        this.activeTab = 'all';
+        this.currentPage = 1;
+    },
+    
+    // 分页大小改变
+    handleSizeChange(val) {
+        this.pageSize = val;
+    },
+    
+    // 当前页改变
+    handleCurrentChange(val) {
+        this.currentPage = val;
+    },
+    
+    // 获取状态显示文本
+    getStatusText(status) {
+        const statusMap = {
+        pendingPayment: '待付款',
+        pendingDelivery: '待发货',
+        delivering: '配送中',
+        completed: '已完成',
+        cancelled: '已取消'
+        };
+        return statusMap[status] || status;
+    },
+    
+    // 获取状态标签类型
+    getStatusTagType(status) {
+        const typeMap = {
+        pendingPayment: 'warning',
+        pendingDelivery: 'info',
+        delivering: 'primary',
+        completed: 'success',
+        cancelled: 'danger'
+        };
+        return typeMap[status] || 'default';
+    },
+    
+    // 去付款
+    payOrder(orderId) {
+        this.$message({
+        message: `订单 ${orderId} 去付款`,
+        type: 'info'
+        });
+    },
+    
+    // 提醒发货
+    remindDelivery(orderId) {
+        this.$message({
+        message: `已提醒订单 ${orderId} 发货`,
+        type: 'success'
+        });
+    },
+    
+    // 查看物流
+    checkLogistics(orderId) {
+        this.$message({
+        message: `查看订单 ${orderId} 物流`,
+        type: 'info'
+        });
+    },
+    
+    // 去评价
+    gotoReview(orderId) {
+        this.$message({
+        message: `去评价订单 ${orderId}`,
+        type: 'info'
+        });
+    },
+    
+    // 查看订单详情
+    viewOrderDetail(orderId) {
+        this.$router.push({
+        name: 'OrderDetail',
+        });
+    }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg{
+  display: flex;
+  flex-direction: column;
+  
+  ::v-deep .el-button--text {
+    color: #6a8a27;
+  }
+  ::v-deep .el-tabs__item.is-active{
+    color: #6a8a27;
+  }
+  ::v-deep .el-tabs__active-bar{
+    background-color: #6a8a27
+  }
+  ::v-deep .el-tabs__item:hover{
+    color: #6a8a27;
+  }
+}
+    .filter-bar {
+      margin-bottom: 20px;
+
+      ::v-deep .el-input-number__decrease{
+        display: none;
+      }
+      ::v-deep .el-input-number__increase{
+        display: none;
+      }
+      ::v-deep .el-input-number .el-input__inner{
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+    }
+
+
+    /* 订单卡片样式 */
+    .order-card {
+      border: 1px solid #eee;
+      border-radius: 4px;
+      margin-bottom: 20px;
+      overflow: hidden;
+    }
+
+    /* 订单头部 - 包含商家信息 */
+    .order-header {
+      background-color: #f8f9fa;
+      padding: 12px 20px;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #eee;
+      color: #666;
+      font-size: 14px;
+    }
+
+
+
+    /* 订单商品列表 */
+    .order-products {
+      padding: 10px 20px;
+    }
+
+    .product-item {
+      display: flex;
+      align-items: center;
+      padding: 15px 0;
+      border-bottom: 1px dashed #eee;
+      font-size: 14px;
+    }
+
+    .product-item:last-child {
+      border-bottom: none;
+    }
+
+    .product-image {
+      width: 80px;
+      height: 80px;
+      object-fit: cover;
+      margin-right: 15px;
+      border-radius: 4px;
+    }
+
+    .product-details {
+      flex: 1;
+    }
+
+    .product-name {
+      color: #333;
+      margin-bottom: 5px;
+    }
+
+    .product-spec {
+      color: #999;
+      font-size: 12px;
+    }
+
+    .product-price {
+      width: 120px;
+      text-align: center;
+      color: #333;
+    }
+
+    .product-quantity {
+      width: 100px;
+      text-align: center;
+      color: #666;
+    }
+
+    .product-total {
+      width: 120px;
+      text-align: center;
+      color: #333;
+      font-weight: 500;
+    }
+
+    .product-status {
+      width: 150px;
+      text-align: center;
+    }
+
+    .product-actions {
+      width: 150px;
+      text-align: center;
+    }
+
+    /* 订单底部 - 金额和操作 */
+    .order-footer {
+      background-color: #f8f9fa;
+      padding: 15px 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-top: 1px solid #eee;
+    }
+
+    .order-summary {
+      text-align: right;
+    }
+
+    .order-amount {
+      color: #333;
+      margin-bottom: 5px;
+    }
+
+    .order-amount strong {
+      color: #ff4d4f;
+      font-size: 16px;
+    }
+
+    .order-tips {
+      font-size: 12px;
+      color: #999;
+    }
+
+    .order-actions {
+      display: flex;
+      gap: 10px;
+    }
+
+        /* 通知栏样式 */
+    .notice-bar {
+      background-color: #fffbe6;
+      border: 1px solid #ffe58f;
+      padding: 12px 16px;
+      border-radius: 4px;
+      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #fa8c16;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    
+</style>
+
+
+

src/views/User/Index.vue

@@ -20,10 +20,15 @@ export default {
         {title: "个人中心",path:"/User/UserCenter"},
         {title: '我的购物车',path:"/User/ShoppingCart" },
         {title: '我的订单',path:"/User/OrderList" },
-        {title: '评价管理',path:"" },
+        {title: '评价管理',path:"/User/CommentManage" },
-        {title: '我的发票',path:"/User/UserInvoice" },
+        {title: '我的发票',path:"/User/UserInvoiceList" },
-        {title: '我的收藏' ,path:""},
+        {title: '发票抬头',path:"/User/UserInvoice" },
+        {title: '合同管理',path:"/User/ContractList" },
+
+
+        // {title: '我的收藏' ,path:""},
         {title: '我的足迹',path:"/User/ViewHistory" },
+        {title: '消息中心',path:"/User/MessageList" },
         {title: '个人信息',path:"/User/UserInfo" },
         {title: '账号设置',path:"" },
         {title: '我的收货地址',path:"/User/UserAddress" }

src/views/User/MessageList.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="notification-page">
+    <!-- 全部已读按钮 -->
+    <el-button type="text" @click="markAllAsRead" class="mark-all-read">全部已读</el-button>
+
+    <!-- 通知列表 -->
+    <el-card v-for="(item, index) in currentPageNotifications" :key="index" class="notification-card" :class="{ 'read': item.isRead }">
+      <div class="notification-header">
+        <span class="dot" v-if="!item.isRead">●</span>
+        <span class="title">{{ item.title }}</span>
+        <el-button type="text" @click="toggleExpand(item)" class="expand-btn">
+          {{ item.isExpanded? '收起 ^' : '展开 ∨' }}
+        </el-button>
+        <span class="date">{{ item.date }}</span>
+      </div>
+      <div class="notification-content" v-show="item.isExpanded">
+        {{ item.content }}
+      </div>
+    </el-card>
+
+    <!-- 分页组件 -->
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      layout="prev, pager, next"
+      :total="notifications.length"
+      class="pagination"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotificationPage',
+  data() {
+    return {
+      currentPage: 2, // 当前页码
+      pageSize: 3, // 每页条数
+      notifications: [
+        {
+          title: '您的订单（编号：0022929922992）包含的产品：xxx 已成功出票',
+          date: '2025-08-18',
+          content: '',
+          isRead: false,
+          isExpanded: false
+        },
+        {
+          title: '重大通知：因台风天气影响，部分商家发货会延迟，请见谅！',
+          date: '2025-08-18',
+          content: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\nxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+          isRead: false,
+          isExpanded: true
+        },
+        {
+          title: '您的订单（编号：0022929922992）包含的产品：xxx 已成功出票',
+          date: '2025-08-18',
+          content: '',
+          isRead: true,
+          isExpanded: false
+        },
+        // 更多模拟数据...
+        {
+          title: '新功能上线通知：新增会员专属优惠活动',
+          date: '2025-08-17',
+          content: '尊敬的用户，我们新增了会员专属优惠活动，快来查看吧！',
+          isRead: true,
+          isExpanded: false
+        },
+        {
+          title: '您的账户安全提示：请及时修改密码',
+          date: '2025-08-17',
+          content: '为保障您的账户安全，建议您定期修改密码，避免使用简单密码。',
+          isRead: true,
+          isExpanded: false
+        }
+      ]
+    }
+  },
+  computed: {
+    // 当前页通知数据
+    currentPageNotifications() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.notifications.slice(start, end);
+    }
+  },
+  methods: {
+    // 切换展开/收起
+    toggleExpand(item) {
+      item.isExpanded =!item.isExpanded;
+    },
+    // 全部已读
+    markAllAsRead() {
+      this.notifications.forEach(item => {
+        item.isRead = true;
+      });
+    },
+    // 页码改变
+    handleCurrentChange(val) {
+      this.currentPage = val;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.notification-page {
+  width: 800px;
+  margin: 30px auto;
+}
+.mark-all-read {
+  text-align: right;
+  display: block;
+  margin-bottom: 10px;
+}
+.notification-card {
+  margin-bottom: 10px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.notification-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  cursor: pointer;
+}
+.dot {
+  color: red;
+  margin-right: 8px;
+}
+.title {
+  flex: 1;
+}
+.expand-btn {
+  padding: 0;
+  margin: 0 10px;
+}
+.date {
+  color: #909399;
+  font-size: 13px;
+}
+.notification-content {
+  padding: 0 10px 10px 10px;
+  color: #606266;
+  white-space: pre-line;
+}
+.read {
+  opacity: 0.6;
+}
+.pagination {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>

src/views/User/OrderList.vue

@@ -398,9 +398,8 @@ export default {
     
     // 查看订单详情
     viewOrderDetail(orderId) {
-        this.$message({
+        this.$router.push({
-        message: `查看订单 ${orderId} 详情`,
+        name: 'OrderDetail',
-        type: 'info'
         });
     }
     }

src/views/User/UserAddress.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="bg">
     <el-card style="width: 100%;">
-        <div slot="header" class="clearfix">
+        <div slot="header" class="clearfix flex-between">
-            <span>收货地址</span>
+            <div>
+              收货地址
+              <span style="font-size: 12px;color:#666">收票人地址统一使用该地址管理设置</span>
+            </div>
+            
             <el-button size="small" style="float: right;" type="primary" @click="openDialog('add', {})">新增地址</el-button>
         </div>
 

src/views/User/UserInvoice.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="bg">
     <el-card style="width: 100%;">
-        <div slot="header" class="clearfix">
+        <div slot="header" class="clearfix flex-between">
             <span>我的发票</span>
-            <el-button size="small" style="float: right;" type="primary" @click="openDialog('add', {})">新增</el-button>
+            <div class="flex-between">
+              <span style="color: #666;font-size: 12px;">您已保存了1个发票抬头信息，做多可创建5个。</span>
+              <el-button size="small" style="float: right;" type="primary" @click="openDialog('add', {})">新增</el-button>
+            </div>
         </div>
 
         <el-table :data="addresses" border style="width: 100%;">
@@ -22,7 +25,7 @@
         </el-table>
 
           <!-- 分页 -->
-        <div style="text-align: right; margin-top: 20px;">
+        <!-- <div style="text-align: right; margin-top: 20px;">
           <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
@@ -32,7 +35,7 @@
             layout="total, sizes, prev, pager, next, jumper"
             :total="searchParam.total"
           ></el-pagination>
-        </div>
+        </div> -->
 
 
         

src/views/User/UserInvoiceList.vue

@@ -0,0 +1,468 @@
+<template>
+  <div class="bg">
+    <el-tabs v-model="activeTab">
+      <el-tab-pane label="已开票订单" name="pendingPayment"></el-tab-pane>
+      <el-tab-pane label="未开票订单" name="pendingDelivery"></el-tab-pane>
+    </el-tabs>
+
+    <div class="filter-bar">
+      <el-form :inline="true" :model="filterForm" size="small">
+        
+        <el-form-item label="订单编号">
+          <el-input v-model="filterForm.orderNo" placeholder="请输入订单编号"></el-input>
+        </el-form-item>
+        <el-form-item label="交易状态">
+          <el-select v-model="filterForm.tradeStatus" placeholder="请选择" style="width: 200px;">
+            <el-option label="全部" value=""></el-option>
+            <el-option label="待付款" value="pendingPayment"></el-option>
+            <el-option label="待发货" value="pendingDelivery"></el-option>
+            <el-option label="配送中" value="delivering"></el-option>
+            <el-option label="已完成" value="completed"></el-option>
+            <el-option label="已取消" value="cancelled"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="下单时间">
+          <el-date-picker v-model="filterForm.createTime" type="daterange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button style="background:#6a8a27;border: none;" type="primary" @click="search">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-table :data="orders" border style="width: 100%;">
+        <el-table-column prop="orderNo" label="订单号" min-width="120"></el-table-column>
+        <el-table-column prop="status" label="订单状态" width="120"></el-table-column>
+        <el-table-column prop="createTime" label="下单时间" width="200"></el-table-column>
+        <el-table-column prop="totalAmount" label="发票金额" width="120"></el-table-column>
+        <el-table-column prop="orderNo" label="发票抬头" min-width="120"></el-table-column>
+        <el-table-column prop="orderNo" label="发票类型" width="120"></el-table-column>
+        <el-table-column prop="orderNo" label="开票状态" width="120"></el-table-column>
+        
+        <el-table-column label="操作" width="200">
+            <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.row)">下载发票</el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">申请发票</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+
+      <!-- 分页 -->
+        <div style="text-align: right; margin-top: 20px;">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="filterForm.currentPage"
+            :page-sizes="[5, 10, 20]"
+            :page-size="filterForm.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="filterForm.total"
+          ></el-pagination>
+        </div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderList',
+   data () {
+     return {
+        activeTab: 'all',
+        currentPage: 1,
+        pageSize: 10,
+        filterForm: {
+          goodsName: '',
+          orderNo: '',
+          createTime: '',
+          merchantName: '',
+          tradeStatus: ''
+        },
+        // 订单数据 - 按商家合并商品
+        orders: [
+          {
+            id: 1,
+            orderNo: '209907091214560078',
+            createTime: '2099-07-09 10:47:49',
+            status: 'pendingPayment',
+            totalAmount: 937,
+            freight: 15,
+            isReviewed: false,
+            merchant: {
+              id: 101,
+              name: '花艺生活馆',
+              isOfficial: true
+            },
+            products: [
+              {
+                id: 1001,
+                name: '深情挚爱/卡罗拉玫瑰',
+                image: 'https://picsum.photos/200/200?random=1',
+                spec: '卡罗拉玫瑰33枝',
+                price: 349,
+                quantity: 1,
+                status: 'pendingPayment'
+              },
+              {
+                id: 1002,
+                name: '精美包装纸',
+                image: 'https://picsum.photos/200/200?random=4',
+                spec: '粉色',
+                price: 38,
+                quantity: 2,
+                status: 'pendingPayment'
+              }
+            ]
+          },
+          {
+            id: 2,
+            orderNo: '209907091214560079',
+            createTime: '2099-07-09 10:48:49',
+            status: 'pendingDelivery',
+            totalAmount: 199,
+            freight: 0,
+            isReviewed: false,
+            merchant: {
+              id: 102,
+              name: '北欧家居旗舰店',
+              isOfficial: true
+            },
+            products: [
+              {
+                id: 2001,
+                name: '北欧花艺素雅仿真花',
+                image: 'https://picsum.photos/200/200?random=2',
+                spec: '白色',
+                price: 199,
+                quantity: 1,
+                status: 'pendingDelivery'
+              }
+            ]
+          },
+          {
+            id: 3,
+            orderNo: '209907091214560080',
+            createTime: '2099-07-09 10:49:49',
+            status: 'delivering',
+            totalAmount: 389,
+            freight: 10,
+            isReviewed: false,
+            merchant: {
+              id: 101,
+              name: '花艺生活馆',
+              isOfficial: true
+            },
+            products: [
+              {
+                id: 3001,
+                name: '香槟玫瑰+白玫瑰混搭',
+                image: 'https://picsum.photos/200/200?random=3',
+                spec: '混搭',
+                price: 389,
+                quantity: 1,
+                status: 'delivering'
+              }
+            ]
+          }
+        ]
+    }
+    },
+    computed: {
+    // 过滤后的订单列表
+    filteredOrders() {
+        let result = [...this.orders];
+        
+        // 根据当前标签页过滤
+        if (this.activeTab !== 'all') {
+        result = result.filter(order => order.status === this.activeTab);
+        }
+        
+        // 根据商品名称过滤
+        if (this.filterForm.goodsName) {
+        const keyword = this.filterForm.goodsName.toLowerCase();
+        result = result.filter(order => {
+            return order.products.some(product => 
+            product.name.toLowerCase().includes(keyword)
+            );
+        });
+        }
+        
+        // 根据订单编号过滤
+        if (this.filterForm.orderNo) {
+        result = result.filter(order => 
+            order.orderNo.includes(this.filterForm.orderNo)
+        );
+        }
+        
+        // 根据商家名称过滤
+        if (this.filterForm.merchantName) {
+        const keyword = this.filterForm.merchantName.toLowerCase();
+        result = result.filter(order => 
+            order.merchant.name.toLowerCase().includes(keyword)
+        );
+        }
+        
+        // 根据交易状态过滤
+        if (this.filterForm.tradeStatus) {
+        result = result.filter(order => 
+            order.status === this.filterForm.tradeStatus
+        );
+        }
+        
+        return result;
+    }
+    },
+    methods: {
+    // 搜索
+    search() {
+        this.currentPage = 1; // 重置到第一页
+        this.$message({
+        message: '搜索条件已应用',
+        type: 'info'
+        });
+    },
+    
+    // 重置
+    reset() {
+        this.filterForm = {
+        goodsName: '',
+        orderNo: '',
+        createTime: '',
+        merchantName: '',
+        tradeStatus: ''
+        };
+        this.activeTab = 'all';
+        this.currentPage = 1;
+    },
+    
+    // 分页大小改变
+    handleSizeChange(val) {
+        this.pageSize = val;
+    },
+    
+    // 当前页改变
+    handleCurrentChange(val) {
+        this.currentPage = val;
+    },
+    
+    // 获取状态显示文本
+    getStatusText(status) {
+        const statusMap = {
+        pendingPayment: '待付款',
+        pendingDelivery: '待发货',
+        delivering: '配送中',
+        completed: '已完成',
+        cancelled: '已取消'
+        };
+        return statusMap[status] || status;
+    },
+    
+    // 获取状态标签类型
+    getStatusTagType(status) {
+        const typeMap = {
+        pendingPayment: 'warning',
+        pendingDelivery: 'info',
+        delivering: 'primary',
+        completed: 'success',
+        cancelled: 'danger'
+        };
+        return typeMap[status] || 'default';
+    },
+    
+    // 去付款
+    payOrder(orderId) {
+        this.$message({
+        message: `订单 ${orderId} 去付款`,
+        type: 'info'
+        });
+    },
+    
+    // 提醒发货
+    remindDelivery(orderId) {
+        this.$message({
+        message: `已提醒订单 ${orderId} 发货`,
+        type: 'success'
+        });
+    },
+    
+    // 查看物流
+    checkLogistics(orderId) {
+        this.$message({
+        message: `查看订单 ${orderId} 物流`,
+        type: 'info'
+        });
+    },
+    
+    // 去评价
+    gotoReview(orderId) {
+        this.$message({
+        message: `去评价订单 ${orderId}`,
+        type: 'info'
+        });
+    },
+    
+    // 查看订单详情
+    viewOrderDetail(orderId) {
+        this.$router.push({
+        name: 'OrderDetail',
+        });
+    }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg{
+  display: flex;
+  flex-direction: column;
+  
+  ::v-deep .el-button--text {
+    color: #6a8a27;
+  }
+  ::v-deep .el-tabs__item.is-active{
+    color: #6a8a27;
+  }
+  ::v-deep .el-tabs__active-bar{
+    background-color: #6a8a27
+  }
+  ::v-deep .el-tabs__item:hover{
+    color: #6a8a27;
+  }
+}
+    .filter-bar {
+      margin-bottom: 20px;
+    }
+
+
+    /* 订单卡片样式 */
+    .order-card {
+      border: 1px solid #eee;
+      border-radius: 4px;
+      margin-bottom: 20px;
+      overflow: hidden;
+    }
+
+    /* 订单头部 - 包含商家信息 */
+    .order-header {
+      background-color: #f8f9fa;
+      padding: 12px 20px;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #eee;
+      color: #666;
+      font-size: 14px;
+    }
+
+
+
+    /* 订单商品列表 */
+    .order-products {
+      padding: 10px 20px;
+    }
+
+    .product-item {
+      display: flex;
+      align-items: center;
+      padding: 15px 0;
+      border-bottom: 1px dashed #eee;
+      font-size: 14px;
+    }
+
+    .product-item:last-child {
+      border-bottom: none;
+    }
+
+    .product-image {
+      width: 80px;
+      height: 80px;
+      object-fit: cover;
+      margin-right: 15px;
+      border-radius: 4px;
+    }
+
+    .product-details {
+      flex: 1;
+    }
+
+    .product-name {
+      color: #333;
+      margin-bottom: 5px;
+    }
+
+    .product-spec {
+      color: #999;
+      font-size: 12px;
+    }
+
+    .product-price {
+      width: 120px;
+      text-align: center;
+      color: #333;
+    }
+
+    .product-quantity {
+      width: 100px;
+      text-align: center;
+      color: #666;
+    }
+
+    .product-total {
+      width: 120px;
+      text-align: center;
+      color: #333;
+      font-weight: 500;
+    }
+
+    .product-status {
+      width: 150px;
+      text-align: center;
+    }
+
+    .product-actions {
+      width: 150px;
+      text-align: center;
+    }
+
+    /* 订单底部 - 金额和操作 */
+    .order-footer {
+      background-color: #f8f9fa;
+      padding: 15px 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-top: 1px solid #eee;
+    }
+
+    .order-summary {
+      text-align: right;
+    }
+
+    .order-amount {
+      color: #333;
+      margin-bottom: 5px;
+    }
+
+    .order-amount strong {
+      color: #ff4d4f;
+      font-size: 16px;
+    }
+
+    .order-tips {
+      font-size: 12px;
+      color: #999;
+    }
+
+    .order-actions {
+      display: flex;
+      gap: 10px;
+    }
+</style>
+
+
+