订单列表

src/components/FilterButton/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="filter-button-container">
+    <button
+      v-for="item in filterItems"
+      :key="item.value"
+      class="filter-btn"
+      :class="{ active: activeValue === item.value }"
+      @click="handleClick(item.value)"
+    >
+      {{ item.label }} ({{ item.sum }})
+    </button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  filterItems: {
+    type: Array,
+    required: true
+  },
+  activeValue: {
+    type: String,
+    default: 'all'
+  }
+});
+
+const emit = defineEmits(['filter-change']);
+
+const handleClick = (value) => {
+  emit('filter-change', value);
+};
+</script>
+
+<style scoped>
+.filter-button-container {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.filter-btn {
+  padding: 6px 16px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background-color: #fff;
+  color: #606266;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+
+.filter-btn:hover {
+  color: #409eff;
+  border-color: #c6e2ff;
+  background-color: #ecf5ff;
+}
+
+.filter-btn.active {
+  color: #409eff;
+  border-color: #409eff;
+  background-color: #ecf5ff;
+}
+</style>

src/views/orderList/FilterButton.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="status-filter" style="display: flex; justify-content: space-between">
-    <div class="status-filter" style="display: flex; justify-content: space-between">
-      <div>
-        <button
-          v-for="item in filterItems"
-          :key="item.value"
-          class="filter-btn"
-          :class="{ active: activeFilter === item.value }"
-          style="margin-right: 10px"
-          @click="handleFilterChange(item.value)"
-        >
-          {{ item.label }} ({{ item.sum }})
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const filterItems = [
-  { label: '全部订单', value: 'all', sum: originalData.length },
-  { label: '待签署', value: 'pending_sign', sum: originalData.filter((item) => item.orderStatus === '待签署').length },
-  { label: '待付款', value: 'pending_payment', sum: originalData.filter((item) => item.orderStatus === '待付款').length },
-  { label: '已取消', value: 'cancelled', sum: originalData.filter((item) => item.orderStatus === '已取消').length },
-  { label: '已完成', value: 'completed', sum: originalData.filter((item) => item.orderStatus === '已完成').length },
-  { label: '已退款', value: 'refunded', sum: originalData.filter((item) => item.orderStatus === '已退款').length }
-];
-const handleFilterChange = (value) => {
-  activeFilter.value = value;
-  // 这里可以添加根据筛选条件重新获取数据的逻辑
-  getList();
-};
-</script>
-
-<style scoped lang="scss"></style>

src/views/orderList/index.vue

@@ -1,22 +1,7 @@
 <template>
   <div class="app-container">
     <div v-show="!commodityManageFormState.show">
-      <div class="status-filter" style="display: flex; justify-content: space-between">
-        <div class="status-filter" style="display: flex; justify-content: space-between">
-          <div>
-            <button
-              v-for="item in filterItems"
-              :key="item.value"
-              class="filter-btn"
-              :class="{ active: activeFilter === item.value }"
-              @click="handleFilterChange(item.value)"
-              style="margin-right: 10px"
-            >
-              {{ item.label }} ({{ item.sum }})
-            </button>
-          </div>
-        </div>
-      </div>
+      <FilterButton :filter-items="filterItems" :active-value="activeFilter" @filter-change="handleFilterChange" />
       <transition name="fade">
         <div>
           <el-form ref="queryFormRef" :model="queryParams">
@@ -47,8 +32,6 @@
               </el-col>
               <el-col :span="1.5">
                 <el-button type="primary" @click="handleQuery">查询</el-button>
-              </el-col>
-              <el-col :span="1.5">
                 <el-button @click="resetQuery">重置</el-button>
               </el-col>
             </el-row>
@@ -74,22 +57,12 @@
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
             <!-- 待签署和待付款状态显示取消订单 -->
-            <el-text
-              v-if="['待签署', '待付款'].includes(scope.row.orderStatus)"
-              class="common-btn-text-primary"
-              @click="cancelOrder(scope.row)"
-            >
+            <el-text v-if="['待签署', '待付款'].includes(scope.row.orderStatus)" class="common-btn-text-primary" @click="cancelOrder(scope.row)">
               取消订单
             </el-text>
 
             <!-- 已完成状态显示查看详情 -->
-            <el-text
-              v-if="scope.row.orderStatus === '已完成'"
-              class="common-btn-text-primary"
-              @click="viewDetails(scope.row)"
-            >
-              查看详情
-            </el-text>
+            <el-text v-if="scope.row.orderStatus === '已完成'" class="common-btn-text-primary" @click="viewDetails(scope.row)"> 查看详情 </el-text>
 
             <!-- 已退款和已取消状态不显示操作按钮 -->
             <span v-if="['已退款', '已取消'].includes(scope.row.orderStatus)">-</span>
@@ -99,12 +72,18 @@
 
       <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
     </div>
-    <CommodityManageForm v-if="commodityManageFormState.show" @onCancel="commodityManageFormState.show = false" @onConfirm="handleCommodityManageFormState" />
+    <CommodityManageForm
+      v-if="commodityManageFormState.show"
+      @on-cancel="commodityManageFormState.show = false"
+      @on-confirm="handleCommodityManageFormState"
+    />
   </div>
+  <order-details v-if="eventDetailsState.show" :id="eventDetailsState.id" @close="handleEventDetailsClose" />
 </template>
 
 <script setup name="CommodityManage">
-import CommodityManageForm from "@/views/commodityManage/CommodityManageForm.vue";
+import CommodityManageForm from '@/views/commodityManage/CommodityManageForm.vue';
+import OrderDetails from '@/views/orderList/orderDetails.vue';
 
 const { proxy } = getCurrentInstance();
 const queryFormRef = ref();
@@ -117,6 +96,14 @@ const queryParams = reactive({
   page: 1,
   page_size: 10
 });
+const filterItems = [
+  { label: '全部订单', value: 'all', sum: 5 },
+  { label: '待签署', value: 'pending_sign', sum: 1 },
+  { label: '待付款', value: 'pending_payment', sum: 1 },
+  { label: '已取消', value: 'cancelled', sum: 1 },
+  { label: '已完成', value: 'completed', sum: 1 },
+  { label: '已退款', value: 'refunded', sum: 1 }
+];
 // 表格数据
 const originalData = [
   {
@@ -186,15 +173,15 @@ const selectedRow = ref(null);
 const commodityManageFormState = ref({
   show: false,
   id: ''
-})
+});
 
 // 获取数据
 const getList = () => {
   loading.value = true;
   setTimeout(() => {
     loading.value = false;
-  }, 500)
-}
+  }, 500);
+};
 
 // 点击查询
 const handleQuery = () => {
@@ -241,14 +228,7 @@ const handleSelectionChange = (selection) => {
 
 const activeFilter = ref('all');
 
-const filterItems = [
-  { label: '全部订单', value: 'all', sum: originalData.length },
-  { label: '待签署', value: 'pending_sign', sum: originalData.filter(item => item.orderStatus === '待签署').length },
-  { label: '待付款', value: 'pending_payment', sum: originalData.filter(item => item.orderStatus === '待付款').length },
-  { label: '已取消', value: 'cancelled', sum: originalData.filter(item => item.orderStatus === '已取消').length },
-  { label: '已完成', value: 'completed', sum: originalData.filter(item => item.orderStatus === '已完成').length },
-  { label: '已退款', value: 'refunded', sum: originalData.filter(item => item.orderStatus === '已退款').length }
-];
+
 
 const dataList = computed(() => {
   if (activeFilter.value === 'all') {
@@ -261,21 +241,29 @@ const dataList = computed(() => {
     'completed': '已完成',
     'refunded': '已退款'
   };
-  return originalData.filter(item => item.orderStatus === statusMap[activeFilter.value]);
+  return originalData.filter((item) => item.orderStatus === statusMap[activeFilter.value]);
 });
 
 const handleFilterChange = (value) => {
   activeFilter.value = value;
   // 这里可以添加根据筛选条件重新获取数据的逻辑
   getList();
-}
+};
 
 const handleExport = () => {};
-
-const viewDetails = (row) => {};
-
-
-
+let eventDetailsState = reactive({
+  show: false,
+  id: ''
+});
+const viewDetails = (row) => {
+  if (row) {
+    eventDetailsState.id = row.id;
+    eventDetailsState.show = true;
+  }
+};
+const handleEventDetailsClose = () => {
+  eventDetailsState.show = false;
+};
 
 getList();
 </script>

src/views/orderList/orderDetails.vue

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>