样式修改

src/api/goods/index.ts

@@ -133,3 +133,12 @@ export const getProcurementProgramProductList = (query: any) => {
     params: query
   });
 };
+
+//购物车
+export const getProductShoppingCartCount = (query: any) => {
+  return request({
+    url: '/product/myProduct/getProductShoppingCartCount',
+    method: 'get',
+    params: query
+  });
+};

src/layout/components/search.vue

@@ -13,10 +13,12 @@
               </el-icon>
             </div>
           </div>
-          <div class="cat-bos flex-row-center" @click="onPath('/cart')">
-            <img src="@/assets/images/layout/layout4.png" alt="" />
-            <span>我的购物车</span>
-          </div>
+          <el-badge :value="cartCount">
+            <div class="cat-bos flex-row-center" @click="onPath('/cart')">
+              <img src="@/assets/images/layout/layout4.png" alt="" />
+              <span>我的购物车</span>
+            </div>
+          </el-badge>
         </div>
         <div class="search-text">
           <div>家纺</div>
@@ -35,6 +37,9 @@
 
 <script setup lang="ts">
 import { onPath } from '@/utils/siteConfig';
+import { cartStore } from '@/store/modules/cart';
+const cartStoreData = cartStore();
+const cartCount = computed(() => cartStoreData.cartCount);
 const input = ref<any>('');
 const route = useRoute();
 const meta = ref<any>({});

src/store/modules/cart.ts

@@ -0,0 +1,18 @@
+import { getProductShoppingCartCount } from '@/api/goods/index';
+
+export const cartStore = defineStore('cart', () => {
+  const cartCount = ref<any>(0);
+
+  const onCartCount = () => {
+    getProductShoppingCartCount({}).then((res) => {
+      if (res.code == 200) {
+        cartCount.value = res.data;
+      }
+    });
+  };
+
+  return {
+    cartCount,
+    onCartCount
+  };
+});

src/views/enterprise/purchaseHistory/index.vue

@@ -2,46 +2,49 @@
   <div class="order-manage-container">
     <div class="page-title"><i class="title-bar"></i><span>历史购买</span></div>
     <!-- 搜索栏 -->
-    <div class="search-bar">
-      <el-input v-model="queryParams.keyword" placeholder="搜索订单号" style="width: 200px" clearable @keyup.enter="handleQuery">
-        <template #prefix
-          ><el-icon><Search /></el-icon
-        ></template>
-      </el-input>
-      <el-date-picker
-        v-model="queryParams.dateRange"
-        type="daterange"
-        range-separator="—"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        style="width: 240px"
-      />
-      <el-button type="primary" @click="handleQuery">搜索</el-button>
-      <el-button @click="handleReset">重置</el-button>
+    <div class="flex-row-between">
+      <div class="flex-row-start">
+        <el-input v-model="queryParams.keyword" placeholder="搜索订单号" style="width: 260px" clearable @keyup.enter="handleQuery">
+          <template #prefix
+            ><el-icon><Search /></el-icon
+          ></template>
+        </el-input>
+        <el-date-picker
+          v-model="queryParams.dateRange"
+          type="daterange"
+          range-separator="—"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          style="width: 260px; margin-left: 10px"
+        />
+      </div>
+      <div>
+        <el-button type="primary" @click="handleQuery">搜索</el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </div>
     </div>
-    <!-- 筛选栏 -->
-    <div class="filter-bar">
-      <span class="filter-label">下单部门</span>
-      <el-tree-select
-        v-model="queryParams.department"
-        style="width: 100px"
-        :data="deptList"
-        :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
-        value-key="deptId"
-        placeholder="请选择"
-        check-strictly
-        :render-after-expand="false"
-        clearable
-      >
-      </el-tree-select>
-      <span class="filter-label">状态</span>
-      <el-select v-model="queryParams.status" placeholder="请选择" style="width: 100px" clearable>
-        <el-option v-for="dict in order_status" :key="dict.value" :label="dict.label" :value="dict.value" />
-      </el-select>
-      <span class="filter-label">支付方式</span>
-      <el-select v-model="queryParams.payType" placeholder="请选择" style="width: 100px" clearable
-        ><el-option v-for="dict in pay_method" :key="dict.value" :label="dict.label" :value="dict.value"
-      /></el-select>
+    <div class="flex-row-between" style="margin-top: 10px">
+      <div class="flex-row-start">
+        <el-tree-select
+          v-model="queryParams.department"
+          style="width: 160px"
+          :data="deptList"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="deptId"
+          placeholder="下单部门"
+          check-strictly
+          :render-after-expand="false"
+          clearable
+        >
+        </el-tree-select>
+        <el-select v-model="queryParams.status" placeholder="状态" style="width: 160px; margin-left: 10px" clearable>
+          <el-option v-for="dict in order_status" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+        <el-select v-model="queryParams.payType" placeholder="支付方式" style="width: 160px; margin-left: 10px" clearable
+          ><el-option v-for="dict in pay_method" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </div>
+      <div class="flex-row-start"></div>
     </div>
     <!-- Tab切换 -->
     <div class="tab-bar">
@@ -54,20 +57,27 @@
     <!-- 订单列表 -->
     <div class="order-list">
       <div v-for="order in orderList" :key="order.id" class="order-card">
-        <div class="order-header">
-          <span class="order-time">{{ order.orderTime }}</span>
-          <span class="order-info">订单号：{{ order.orderNo }}</span>
-          <span class="order-info">下单人：{{ order.orderPerson }}</span>
-          <span class="order-info">部门：{{ order.department }}</span>
-          <el-button type="danger" size="small" @click="handleAddCart(order)">批量加入购物车</el-button>
-          <el-button type="primary" link class="expand-btn" @click="handleExpand(order)"
-            >{{ order.expanded ? '收起' : '展开' }} <el-icon><ArrowDown /></el-icon
-          ></el-button>
+        <div class="order-header flex-row-between">
+          <div class="flex-row-start" style="gap: 0 15px">
+            <el-checkbox style="margin: 2px 0px 0px 0" v-model="order.checked" @change="handleOrderCheck" />
+            <div>{{ order.orderTime }}</div>
+            <div>订单号：{{ order.orderNo }}</div>
+            <div>下单人：{{ order.orderPerson }}</div>
+            <div>部门：{{ order.department }}</div>
+          </div>
+          <div class="flex-row-start">
+            <div class="expand-btn" @click="handleAddCart(order)">批量加入购物车</div>
+            <div class="open-btn" v-if="order.products && order.products.length > 5" @click="handleExpand(order)">
+              <span style="margin-right: 5px"> {{ order.expanded ? '收起' : '展开' }}</span>
+              <el-icon v-if="order.expanded"><ArrowUp /></el-icon>
+              <el-icon v-else><ArrowDown /></el-icon>
+            </div>
+          </div>
         </div>
         <div v-if="order.countdown" class="countdown-bar">订单锁定剩余时间：{{ order.countdown }}</div>
         <div class="product-list">
-          <div v-for="(item, itemIndex) in order.expanded ? order.products : order.products.slice(0, 1)" :key="itemIndex" class="product-row">
-            <div class="product-cell product-info-cell">
+          <div v-for="(item, itemIndex) in order.expanded ? order.products : order.products.slice(0, 5)" :key="itemIndex" class="product-row">
+            <div class="product-info-cell">
               <div class="product-image">
                 <el-image :src="item.image" fit="contain"
                   ><template #error
@@ -76,39 +86,40 @@
                 ></el-image>
               </div>
               <div class="product-detail">
-                <div class="product-name">{{ item.name }}</div>
-                <div class="product-spec">{{ item.spec1 }} {{ item.spec2 }}</div>
+                <div class="product-name ellipsis">{{ item.name }}</div>
+                <div class="product-spec">{{ item.spec1 }} | {{ item.spec2 }}</div>
                 <div class="product-price">¥{{ item.price }}</div>
               </div>
               <div class="product-quantity">x{{ item.quantity }}</div>
             </div>
-            <div class="product-cell amount-cell" v-if="itemIndex === 0">
+            <div class="amount-cell" v-if="itemIndex === 0">
               <div class="amount-info">
-                <span class="label">支付款</span><span class="value highlight">¥{{ order.payAmount }}</span>
+                <span class="label">支付款：</span><span class="value highlight">¥{{ order.payAmount }}</span>
               </div>
               <div class="amount-info">
                 <span class="label">含运费：</span><span class="value">¥{{ order.freight }}</span>
               </div>
             </div>
-            <!-- <div class="product-cell status-cell" v-if="itemIndex === 0">
-              <span class="status-text" :style="{ color: getStatusColor(order.status) }">{{ order.statusText }}</span>
-              <el-button type="primary" link size="small" @click="handleViewDetail(order)">查看订单轨迹</el-button>
-              <template v-if="order.auditStatus"
-                ><span :class="['audit-status', getAuditStatusClass(order.auditStatus)]">{{ order.auditStatus }}</span
-                ><el-button type="primary" link size="small">查看审批流</el-button></template
-              >
-              <el-button v-if="order.fileCount" type="primary" link size="small">审核文件({{ order.fileCount }})</el-button>
-            </div> -->
-            <div class="product-cell action-cell" v-if="itemIndex === 0">
-              <el-button type="primary" link size="small" @click="handleAddCart(order)">加入购物车</el-button>
+            <div v-else style="width: 200px"></div>
+            <div class="status-cell">
+              <el-button size="small" @click="handleAddCart(order)">加入购物车</el-button>
             </div>
           </div>
         </div>
+        <!-- 显示更多商品提示 -->
+        <div
+          v-if="!order.expanded && order.products && order.products.length > 5"
+          class="more-products-hint"
+          @click="handleExpand(order)"
+          style="cursor: pointer"
+        >
+          该订单共 {{ order.products.length }} 件商品，点击展开查看全部
+        </div>
       </div>
       <el-empty v-if="orderList.length === 0" description="暂无订单" />
     </div>
     <!-- 分页 -->
-    <TablePagination v-model:page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total" @change="handleQuery" />
+    <TablePagination v-model:page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" :total="total" @change="fetchOrderList" />
   </div>
 </template>
 
@@ -126,8 +137,8 @@ import { addProductShoppingCart } from '@/api/goods/index';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { order_status, pay_method } = toRefs<any>(proxy?.useDict('order_status', 'pay_method'));
 
-const router = useRouter();
 const activeTab = ref('all');
+const selectAll = ref(false);
 const loading = ref(false);
 
 const deptList = ref([]);
@@ -159,7 +170,7 @@ watch(activeTab, (newTab) => {
   fetchOrderList();
 });
 
-const queryParams = reactive({ keyword: '', dateRange: null, department: '', status: '', payType: '', pageNum: 1, pageSize: 5 });
+const queryParams = reactive({ keyword: '', dateRange: [], department: '', status: '', payType: '', pageNum: 1, pageSize: 5 });
 const total = ref(0);
 const allOrders = ref<any[]>([]);
 
@@ -213,6 +224,35 @@ const loadDeptTree = async () => {
   }
 };
 
+/** 单个加入购物车 */
+const handleAddCart = async (order: any) => {
+  const res = await getOrderProducts([order.id]);
+  if (res.code === 200 && res.rows) {
+    const products = res.rows.map((p: any) => ({
+      productId: p.productId,
+      productNum: p.orderQuantity || 0
+    }));
+
+    const promises = products.map((item) => addProductShoppingCart({ productId: item.productId, productNum: item.productNum }));
+    Promise.all(promises).then(() => {
+      ElMessage.success(`已将${products.length}件商品加入购物车`);
+    });
+  }
+
+  // addProductShoppingCart({ productId: item.id, productNum: 1 }).then((res: any) => {
+  //   if (res.code == 200) {
+  //     ElMessage.success('已加入购物车');
+  //   }
+  // });
+};
+const formatDate = (date: Date | string | number): string => {
+  if (!date) return '';
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
 // 获取订单列表
 const fetchOrderList = async () => {
   loading.value = true;
@@ -227,13 +267,54 @@ const fetchOrderList = async () => {
     if (queryParams.department) params.department = queryParams.department;
     if (queryParams.status) params.orderStatuses = queryParams.status; // 使用orderStatuses支持多状态查询
     if (queryParams.payType) params.payType = queryParams.payType;
-    if (queryParams.dateRange && queryParams.dateRange.length === 2) {
-      params.beginTime = queryParams.dateRange[0];
-      params.endTime = queryParams.dateRange[1];
+    if (queryParams.dateRange && queryParams.dateRange.length == 2) {
+      // params.beginTime = queryParams.dateRange[0];
+      // params.endTime = queryParams.dateRange[1];
+      params.params = {
+        beginTime: formatDate(queryParams.dateRange[0]), // 将日期转换为字符串格式
+
+        endTime: formatDate(queryParams.dateRange[1]) // 将日期转换为字符串格式
+      };
     }
 
+    console.log('发送到后端的参数:', params);
     const res = await getOrderList(params);
+    console.log('后端返回的数据:', res);
     if (res.code === 200) {
+      // 调试：打印后端返回的第一条订单数据
+      if (res.rows && res.rows.length > 0) {
+        console.log('后端���回的订单状态值:', res.rows[0].orderStatus);
+        console.log('完整的订单数据:', res.rows[0]);
+      }
+
+      // 获取订单商品数据
+      const orderProductsMap: Record<number, any[]> = {};
+      const orderIds = (res.rows || []).map((o: any) => o.id);
+      if (orderIds.length > 0) {
+        try {
+          const prodRes = await getOrderProducts(orderIds);
+          if (prodRes.code === 200 && prodRes.rows) {
+            prodRes.rows.forEach((p: any) => {
+              if (!orderProductsMap[p.orderId]) {
+                orderProductsMap[p.orderId] = [];
+              }
+              orderProductsMap[p.orderId].push({
+                id: p.id,
+                productId: p.productId,
+                image: p.productImage || '',
+                name: p.productName || '',
+                spec1: p.productUnit || '',
+                spec2: p.productNo || '',
+                price: p.orderPrice || 0,
+                quantity: p.orderQuantity || 0
+              });
+            });
+          }
+        } catch (e) {
+          console.error('获取商品列表失败:', e);
+        }
+      }
+
       // 将后端数据转换为前端需要的格式
       allOrders.value = (res.rows || []).map((order: OrderMain) => ({
         id: order.id,
@@ -248,10 +329,17 @@ const fetchOrderList = async () => {
         countdown: '',
         auditStatus: order.checkStatus,
         fileCount: 0,
+        checked: false,
         expanded: false,
-        products: [] // 商品信息需要单独加载
+        products: orderProductsMap[order.id] || [] // 商品信息已加载
       }));
 
+      // 调试：打印转换后的订单状态
+      console.log(
+        '转换后的订单状态分布:',
+        allOrders.value.map((o) => o.status)
+      );
+
       total.value = res.total || 0;
     }
   } catch (error) {
@@ -263,47 +351,18 @@ const fetchOrderList = async () => {
 
 const orderList = computed(() => allOrders.value);
 
-const getStatusColor = (status: string) =>
-  ({ completed: '#67c23a', preOrder: '#e6a23c', shipping: '#409eff', cancelled: '#909399' })[status] || '#909399';
-const getAuditStatusClass = (auditStatus: string) => (auditStatus === '审批通过' ? 'success' : auditStatus === '审批驳回' ? 'danger' : 'warning');
-
 const handleExpand = async (order: any) => {
   const orderIndex = allOrders.value.findIndex((o) => o.id === order.id);
   if (orderIndex === -1) return;
 
-  const currentOrder = allOrders.value[orderIndex];
-
-  if (!currentOrder.expanded && currentOrder.products.length === 0) {
-    try {
-      const res = await getOrderProducts([order.id]);
-      if (res.code === 200 && res.rows) {
-        const products = res.rows.map((p: any) => ({
-          id: p.productId || p.id,
-          image: p.productImage || '',
-          name: p.productName || '',
-          spec1: p.productUnit || '',
-          spec2: p.productNo || '',
-          price: p.orderPrice || 0,
-          quantity: p.orderQuantity || 0
-        }));
-
-        // 替换整个数组以触发响应式更新
-        allOrders.value = allOrders.value.map((o, i) => (i === orderIndex ? { ...o, expanded: true, products } : o));
-        return;
-      }
-    } catch (error) {
-      console.error('加载商品失败:', error);
-      return;
-    }
-  }
-
   // 替换整个数组以触发响应式更新
   allOrders.value = allOrders.value.map((o, i) => (i === orderIndex ? { ...o, expanded: !o.expanded } : o));
 };
 
-const handleViewDetail = (order: any) => {
-  router.push(`/order/orderManage/detail/${order.orderNo}`);
+const handleOrderCheck = () => {
+  selectAll.value = orderList.value.every((order) => order.checked);
 };
+
 const handleQuery = () => {
   queryParams.pageNum = 1;
   fetchOrderList();
@@ -317,44 +376,6 @@ const handleReset = () => {
   fetchOrderList();
 };
 
-// 加入购物车
-const handleAddCart = async (order: any) => {
-  try {
-    // 如果商品列表为空，先加载商品
-    if (!order.products || order.products.length === 0) {
-      const res = await getOrderProducts([order.id]);
-      if (res.code === 200 && res.rows) {
-        order.products = res.rows.map((p: any) => ({
-          id: p.productId || p.id,
-          image: p.productImage || '',
-          name: p.productName || '',
-          spec1: p.productUnit || '',
-          spec2: p.productNo || '',
-          price: p.orderPrice || 0,
-          quantity: p.orderQuantity || 0
-        }));
-      } else {
-        ElMessage.warning('无法获取订单商品信息');
-        return;
-      }
-    }
-
-    // 批量加入购物车
-    const promises = order.products.map((product: any) =>
-      addProductShoppingCart({
-        productId: product.id,
-        productNum: product.quantity || 1
-      })
-    );
-
-    await Promise.all(promises);
-    ElMessage.success(`已将${order.products.length}件商品加入购物车`);
-  } catch (error) {
-    console.error('加入购物车失败:', error);
-    ElMessage.error('加入购物车失败');
-  }
-};
-
 // 页面加载时获取订单列表
 onMounted(() => {
   loadDeptTree();
@@ -364,13 +385,14 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .order-manage-container {
-  width: 100%;
   padding: 20px;
   background: #fff;
   min-height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 120px);
+  margin-bottom: 20px;
+  // max-height: calc(100vh - 120px); // 减去顶部导航栏和其他元素高度
 }
 .page-title {
   font-size: 16px;
@@ -387,22 +409,7 @@ onMounted(() => {
   background: #e60012;
   border-radius: 2px;
 }
-.search-bar {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  margin-bottom: 15px;
-}
-.filter-bar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 15px;
-  .filter-label {
-    font-size: 14px;
-    color: #666;
-  }
-}
+
 .tab-bar {
   display: flex;
   justify-content: space-between;
@@ -433,8 +440,8 @@ onMounted(() => {
   }
 }
 .order-list {
-  flex: 1;
-  overflow-y: auto;
+  // flex: 1;
+  // overflow-y: auto;
   margin-bottom: 15px;
   .order-card {
     border: 1px solid #eee;
@@ -442,19 +449,20 @@ onMounted(() => {
     margin-bottom: 15px;
     overflow: hidden;
     .order-header {
-      display: flex;
-      align-items: center;
-      gap: 15px;
       padding: 12px 15px;
       background: #f9f9f9;
       border-bottom: 1px solid #eee;
-      font-size: 13px;
-      color: #666;
-      .order-time {
-        color: #333;
-      }
+      font-size: 14px;
+      color: #101828;
       .expand-btn {
-        margin-left: auto;
+        color: #165dff;
+        margin-left: 10px;
+        cursor: pointer;
+      }
+      .open-btn {
+        color: #364153;
+        margin-left: 10px;
+        cursor: pointer;
       }
     }
     .countdown-bar {
@@ -467,7 +475,7 @@ onMounted(() => {
     .product-list {
       .product-row {
         display: flex;
-        border-bottom: 1px solid #f5f5f5;
+        // border-bottom: 1px solid #f5f5f5;
         &:last-child {
           border-bottom: none;
         }
@@ -479,9 +487,9 @@ onMounted(() => {
         justify-content: center;
       }
       .product-info-cell {
+        display: flex;
         flex: 1;
-        flex-direction: row;
-        align-items: center;
+        padding: 15px;
         gap: 15px;
         .product-image {
           width: 80px;
@@ -504,21 +512,22 @@ onMounted(() => {
         }
         .product-detail {
           flex: 1;
+          width: 0;
           .product-name {
             font-size: 14px;
-            color: #333;
+            color: #000000;
             margin-bottom: 5px;
-            line-height: 1.4;
           }
           .product-spec {
             font-size: 12px;
             color: #999;
-            margin-bottom: 5px;
+            margin-bottom: 10px;
           }
           .product-price {
             font-size: 16px;
             font-weight: bold;
             color: #e60012;
+            margin-bottom: 5px;
           }
         }
         .product-quantity {
@@ -527,13 +536,14 @@ onMounted(() => {
         }
       }
       .amount-cell {
-        width: 120px;
-        border-left: 1px solid #f5f5f5;
+        width: 200px;
+        padding: 15px;
         .amount-info {
           margin-bottom: 5px;
           .label {
             font-size: 12px;
             color: #999;
+            margin-right: 4px;
           }
           .value {
             font-size: 14px;
@@ -547,16 +557,18 @@ onMounted(() => {
         }
       }
       .status-cell {
-        width: 120px;
-        border-left: 1px solid #f5f5f5;
+        width: 140px;
+        padding: 15px;
+        display: flex;
         align-items: flex-start;
-        gap: 5px;
+        justify-content: flex-end;
+        gap: 10px;
         .status-text {
           font-size: 14px;
           font-weight: 500;
         }
         .audit-status {
-          font-size: 12px;
+          font-size: 14px;
           &.success {
             color: #e60012;
           }
@@ -575,6 +587,78 @@ onMounted(() => {
         gap: 3px;
       }
     }
+    .more-products-hint {
+      padding: 10px 15px;
+      background: #f5f5f5;
+      font-size: 12px;
+      color: #666;
+      text-align: center;
+      border-top: 1px solid #f0f0f0;
+    }
+  }
+}
+
+.bottom-bar {
+  background: #fafafa;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  .bottom-right {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    .selected-info {
+      font-size: 14px;
+      color: #666;
+      em {
+        color: #e60012;
+        font-style: normal;
+        font-weight: bold;
+      }
+    }
+  }
+}
+.evaluate-product {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 15px;
+  background: #f9f9f9;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  .product-image {
+    width: 60px;
+    height: 60px;
+    background: #fff;
+    border-radius: 4px;
+    overflow: hidden;
+    flex-shrink: 0;
+    .el-image {
+      width: 100%;
+      height: 100%;
+    }
+    .image-placeholder {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  .product-info {
+    .product-name {
+      font-size: 14px;
+      color: #333;
+      margin-bottom: 5px;
+    }
+    .product-spec {
+      font-size: 12px;
+      color: #999;
+    }
   }
 }
 :deep(.table-pagination) {

src/views/item/index.vue

@@ -220,8 +220,8 @@ const getInfo = () => {
       carousel.value = [];
       if (res.data.imageUrl) {
         carousel.value = res.data.imageUrl.split(',');
-        if(carousel.value.length>5){
-          carousel.value = carousel.value.slice(0, 5)
+        if (carousel.value.length > 5) {
+          carousel.value = carousel.value.slice(0, 5);
         }
       }
       dataInfo.value = res.data;
@@ -293,7 +293,8 @@ const onCarousel = (type: number, index?: any) => {
 const handleChange = (val: any) => {
   // num.value = val;
 };
-
+import { cartStore } from '@/store/modules/cart';
+const cart = cartStore();
 const onCart = () => {
   addProductShoppingCart({
     productId: id.value,
@@ -301,6 +302,7 @@ const onCart = () => {
   }).then((res) => {
     if (res.code == 200) {
       ElMessage.success('加入购物车成功');
+      cart.onCartCount();
     }
   });
 };

src/views/order/orderManage/index.vue

@@ -116,7 +116,6 @@
                 <div class="product-spec">{{ item.spec1 }} | {{ item.spec2 }}</div>
                 <div class="product-price">¥{{ item.price }}</div>
                 <el-button size="small">加入购物车</el-button>
-                <!-- <div class="cat-bnt">加入购物车</div> -->
               </div>
               <div class="product-quantity">x{{ item.quantity }}</div>
             </div>

src/views/valueAdded/maintenance/apply.vue

@@ -189,8 +189,10 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .maintenance-apply-container {
-  min-height: 100vh;
   background-color: #fff;
+  flex: 1;
+  border-radius: 4px;
+  padding: 20px;
 }
 
 .page-header {
@@ -428,9 +430,9 @@ onMounted(() => {
       transition: all 0.3s;
 
       &.active {
-        border-color: #409eff;
-        color: #409eff;
-        background-color: #ecf5ff;
+        border-color: var(--el-color-primary);
+        color: var(--el-color-primary);
+        // background-color: #ecf5ff;
       }
 
       &:hover {
@@ -445,19 +447,19 @@ onMounted(() => {
 }
 
 .next-btn {
-  background-color: #0fb881;
-  border-color: #0fb881;
-  color: #fff;
-  padding: 8px 25px;
-  border-radius: 2px;
-  font-weight: normal;
-
-  &:hover,
-  &:focus {
-    background-color: #12cc90;
-    border-color: #12cc90;
-    color: #fff;
-  }
+  // background-color: #0fb881;
+  // border-color: #0fb881;
+  // color: #fff;
+  // padding: 8px 25px;
+  // border-radius: 2px;
+  // font-weight: normal;
+
+  // &:hover,
+  // &:focus {
+  //   background-color: #12cc90;
+  //   border-color: #12cc90;
+  //   color: #fff;
+  // }
 }
 
 /* Override error styles to match exactly the mockup */

src/views/valueAdded/maintenance/index.vue

@@ -32,6 +32,7 @@ const handleApply = () => {
   background: #fff;
   min-height: 100%;
   flex: 1;
+  border-radius: 4px;
 }
 
 .empty-state {