feat: 订单分析新接口对接，样式调整

src/api/modules/datacenter.js

@@ -31,20 +31,11 @@ export const dataCenter = {
       params: data,
     });
   },
-  //订单结算统计
-  orderSummary: (data) => {
+  orderAnalysisV2: (data) => {
     return $http.request({
-      url: `/merchant-api/pc/data/analyse/settle/summary`,
-      method: "get",
-      params: data,
+      url: `/merchant-api/pc/data/analyse/v2/order/analyse`,
+      method: "post",
+      data: data,
     });
   },
-  //订单结算明细
-  orderSummaryPage: (data) => {
-    return $http.request({
-      url: `/merchant-api/pc/data/analyse/settle/page`,
-      method: "get",
-      params: data,
-    });
-  },
-};
+};

src/router/full-routers.js

@@ -305,7 +305,7 @@ export default {
           menuId: getUUID(),
           parentId: 0,
           parentName: null,
-          name: "订单统计分析",
+          name: "订单分析",
           url: "datacenter/order-analysis/index",
           perms: "datacenter:order-analysis:index",
           type: 1,

src/views/modules/datacenter/order-analysis/index.vue

@@ -7,13 +7,14 @@
             style="margin-right: 20px"
             v-model="formInline.dateType"
             placeholder="请选择"
+            @change="handleDateTypeChange"
           >
             <el-option
               v-for="item in [
-                { value: '1', label: '日' },
-                { value: '2', label: '周' },
-                { value: '3', label: '月' },
-                { value: '4', label: '年' },
+                { value: '1', label: '近1天' },
+                { value: '7', label: '近7天' },
+                { value: '30', label: '近30天' },
+                { value: 'custom', label: '自定义' },
               ]"
               :key="item.value"
               :label="item.label"
@@ -22,6 +23,17 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <el-form-item v-if="formInline.dateType === 'custom'">
+          <el-date-picker
+            v-model="formInline.timeRange"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          >
+          </el-date-picker>
+        </el-form-item>
         <el-form-item>
           <el-button @click="getList" type="primary">查询</el-button>
         </el-form-item>
@@ -33,7 +45,16 @@
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">下单订单数量</div>
-            <div style="font-size: 20px" class="stat-value">
+            <div
+              style="font-size: 20px"
+              class="stat-value clickable"
+              @click="
+                goToOrderList(
+                  productList.orderCountStatusList,
+                  'orderCountStatusList'
+                )
+              "
+            >
               {{ productList.orderCount }}
             </div>
           </div>
@@ -41,7 +62,16 @@
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">支付订单数量</div>
-            <div style="font-size: 20px" class="stat-value">
+            <div
+              style="font-size: 20px"
+              class="stat-value clickable"
+              @click="
+                goToOrderList(
+                  productList.payCountStatusList,
+                  'payCountStatusList'
+                )
+              "
+            >
               {{ productList.payCount }}
             </div>
           </div>
@@ -49,7 +79,16 @@
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">有效订单数量</div>
-            <div style="font-size: 20px" class="stat-value">
+            <div
+              style="font-size: 20px"
+              class="stat-value clickable"
+              @click="
+                goToOrderList(
+                  productList.validCountStatusList,
+                  'validCountStatusList'
+                )
+              "
+            >
               {{ productList.validCount }}
             </div>
           </div>
@@ -72,7 +111,7 @@
         </div>
         <div class="stat-item">
           <div class="stat-right">
-            <div class="stat-title">订单退款金额（元）</div>
+            <div class="stat-title">订单退款金额(元)</div>
             <div style="font-size: 20px" class="stat-value">
               {{ productList.refundMoney }}
             </div>
@@ -81,7 +120,16 @@
         <div class="stat-item">
           <div class="stat-right">
             <div class="stat-title">售后订单数量</div>
-            <div style="font-size: 20px" class="stat-value">
+            <div
+              style="font-size: 20px"
+              class="stat-value clickable"
+              @click="
+                goToOrderList(
+                  productList.afterSaleCountStatusList,
+                  'afterSaleCountStatusList'
+                )
+              "
+            >
               {{ productList.afterSaleCount }}
             </div>
           </div>
@@ -94,269 +142,101 @@
             </div>
           </div>
         </div>
-      </div>
-    </div>
-    <div
-      style="
-        padding: 20px;
-        border: 1px solid #ccc;
-        margin-top: 20px;
-        height: 60vh;
-      "
-    >
-      <div style="font-size: 18px; margin-bottom: 40px">订单结算明细</div>
-      <el-form :inline="true" :model="formData" class="demo-form-inline">
-        <el-form-item label="下单时间">
-          <el-date-picker
-            @change="changeValue"
-            value-format="yyyy-MM-dd"
-            v-model="value"
-            type="datetimerange"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="结算时间">
-          <el-date-picker
-            @change="changeValueOne"
-            value-format="yyyy-MM-dd"
-            v-model="valueOne"
-            type="datetimerange"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="状态：">
-          <el-select v-model="formData.status" placeholder="请选择状态">
-            <el-option
-              v-for="item in [
-                { label: '全部', value: '' },
-                { label: '待结算 ', value: '0' },
-                { label: ' 部分结算', value: '1' },
-                { label: '已结算', value: '2' },
-                { label: '结算失败', value: '-1' },
-              ]"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary">查询</el-button>
-          <el-button type="primary">导出</el-button>
-        </el-form-item>
-      </el-form>
-      <div
-        style="
-          background: #edf4ff;
-          height: 80px;
-          margin-bottom: 10px;
-          font-size: 16px;
-        "
-        class="stat-list"
-      >
-        <div>
-          <span>退款金额</span><span style="margin-left: 10px">￥</span
-          ><span style="font-weight: 600; font-size: 22px">{{
-            orderSummaryList.refundMoney
-          }}</span>
+        <div class="stat-item">
+          <div class="stat-right">
+            <div class="stat-title">订单支出(元)</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.expendMoney }}
+            </div>
+          </div>
         </div>
-        <div>
-          <span>订单支出</span><span style="margin-left: 10px">￥</span
-          ><span style="font-weight: 600; font-size: 22px">{{
-            orderSummaryList.expendMoney
-          }}</span>
+        <div class="stat-item">
+          <div class="stat-right">
+            <div class="stat-title">待入账金额(元)</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.waitSettleMoney }}
+            </div>
+          </div>
         </div>
-        <div>
-          <span>待入账金额</span><span style="margin-left: 10px">￥</span
-          ><span style="font-weight: 600; font-size: 22px">{{
-            orderSummaryList.waitSettleMoney
-          }}</span>
+        <div class="stat-item">
+          <div class="stat-right">
+            <div class="stat-title">已入账金额(元)</div>
+            <div style="font-size: 20px" class="stat-value">
+              {{ productList.settleMoney }}
+            </div>
+          </div>
         </div>
-        <div>
-          <span>已入账金额</span><span style="margin-left: 10px">￥</span
-          ><span style="font-weight: 600; font-size: 22px">{{
-            orderSummaryList.settleMoney
-          }}</span>
-        </div>
-      </div>
-      <el-table
-        :data="tableData"
-        border
-        style="width: 100%; height: 33vh; overflow-y: scroll"
-      >
-        <el-table-column align="center" type="index" label="排名" width="50">
-        </el-table-column>
-        <el-table-column prop="unitOrderNo" label="订单编号"> </el-table-column>
-        <el-table-column
-          align="center"
-          prop="payTime"
-          label="下单时间"
-          width="140"
-        >
-        </el-table-column>
-        <el-table-column align="center" prop="settleTime" label="结算时间">
-        </el-table-column>
-        <el-table-column
-          align="center"
-          prop="unitSettleAmount"
-          label="实付金额（元）"
-        >
-        </el-table-column>
-        <el-table-column
-          align="center"
-          prop="refundAmount"
-          label="退款金额（元）"
-          width="140"
-        >
-        </el-table-column>
-        <el-table-column
-          align="center"
-          prop="finalOutcome"
-          label="订单支出（元）"
-          width="140"
-        >
-        </el-table-column>
-        <el-table-column
-          align="center"
-          prop="finalIncome"
-          label="入账金额（元）"
-          width="140"
-        >
-        </el-table-column>
-        <el-table-column align="center" prop="name" label="状态" width="140">
-          <template slot-scope="scope">
-            <span>{{ getStatus(scope.row.status) }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!-- 分页 -->
-      <div class="pagination-container">
-        <el-pagination
-          :current-page="query.pageNumber"
-          :page-sizes="[10, 20, 30, 50]"
-          :page-size="query.pageSize"
-          :total="total"
-          background
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import dayjs from "dayjs";
 export default {
   data() {
     return {
-      valueOne: [],
-      value: [],
       formInline: {
-        dateType: "1",
+        dateType: "7",
+        timeRange: [],
       },
-      formData: {
-        payBeginDate: "",
-        payEndDate: "",
-        settleBeginDate: "",
-        settleEndDate: "",
-        status: "",
-      },
-      query: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
-      total: 0,
-      tableData: [],
       productList: {},
-      orderSummaryList: {},
     };
   },
   created() {
-    this.getCurrentDate();
+    this.getList();
   },
   methods: {
+    handleDateTypeChange() {
+      this.formInline.timeRange = [];
+    },
     getList() {
-      this.$api.dataCenter.orderAnalysis(this.formInline).then((res) => {
+      let params = this.getParams();
+      if (!params) return;
+      this.$api.dataCenter.orderAnalysisV2(params).then((res) => {
         this.productList = res.data.data;
       });
-      this.$api.dataCenter.orderSummary(this.formData).then((res) => {
-        console.log(res);
-        this.orderSummaryList = res.data.data;
+    },
+    getParams() {
+      let params = {};
+      if (this.formInline.dateType === "custom") {
+        if (
+          this.formInline.timeRange &&
+          this.formInline.timeRange.length === 2
+        ) {
+          params.startTime = this.formInline.timeRange[0];
+          params.endTime = this.formInline.timeRange[1];
+        } else {
+          this.$message.error("请选择时间范围");
+          return null;
+        }
+      } else {
+        const end = dayjs().endOf("day").format("YYYY-MM-DD HH:mm:ss");
+        const start = dayjs()
+          .subtract(this.formInline.dateType - 1, "day")
+          .startOf("day")
+          .format("YYYY-MM-DD HH:mm:ss");
+        params.startTime = start;
+        params.endTime = end;
+      }
+      return params;
+    },
+    goToOrderList(statusList) {
+      if (!statusList || statusList.length === 0) {
+        this.$message.info("没有可跳转的订单");
+        return;
+      }
+      const params = this.getParams();
+      if (!params) return;
+
+      this.$router.push({
+        path: "/operation-management-order/index",
+        query: {
+          statusList: statusList.join(","),
+          startTime: params.startTime,
+          endTime: params.endTime,
+        },
       });
-      this.$api.dataCenter
-        .orderSummaryPage({ ...this.formData, ...this.query })
-        .then((res) => {
-          console.log(res);
-          this.tableData = res.data.data.data;
-          this.total = Number(res.data.data.total);
-        });
-    },
-    getCurrentDate() {
-      // let now = new Date();
-      // let year = now.getFullYear();
-      // let month = now.getMonth() + 1;
-      // let day = now.getDate();
-      // console.log(year, month, day);
-      // this.value = [
-      //   year + "-" + month + "-" + day,
-      //   year + "-" + month + "-" + day,
-      // ];
-      // this.formData.payBeginDate = year + "-" + month + "-" + day;
-      // this.formData.payEndDate = year + "-" + month + "-" + day;
-      // this.valueOne = [
-      //   year + "-" + month + "-" + day,
-      //   year + "-" + month + "-" + day,
-      // ];
-      // this.formData.settleBeginDate =
-      //   year + "-" + month + "-" + day;
-      // this.formData.settleEndDate =
-      //   year + "-" + month + "-" + day;
-      this.getList();
-    },
-    changeValue(e) {
-      console.log(e);
-      if (e) {
-        this.formData.payBeginDate = e[0];
-        this.formData.payEndDate = e[1];
-      } else {
-        this.formData.payBeginDate = "";
-        this.formData.payEndDate = "";
-      }
-      // this.formInline.brandId = e;
-    },
-    changeValueOne(e) {
-      console.log(e);
-      if (e) {
-        this.formData.settleBeginDate = e[0];
-        this.formData.settleEndDate = e[1];
-      } else {
-        this.formData.settleBeginDate = "";
-        this.formData.settleEndDate = "";
-      }
-    },
-    handleSizeChange(val) {
-      this.query.pageSize = val;
-      this.getList();
-    },
-    handleCurrentChange(val) {
-      this.query.pageNumber = val;
-      this.getList();
-    },
-    getStatus(row) {
-      if (row == 0) {
-        return "待结算";
-      } else if (row == 1) {
-        return "部分结算";
-      } else if (row == 2) {
-        return " 已结算";
-      } else {
-        return "结算失败";
-      }
     },
   },
 };
@@ -364,43 +244,47 @@ export default {
 
 <style lang="scss" scoped>
 .product {
-  padding: 10px;
-  //   border: 1px solid #ccc;
-  background: #edf4ff;
+  padding: 20px;
+  background-color: #f5f7fa;
 }
 .stat-list {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  //   margin-top: 20px;
-  padding: 10px;
-  //   border: 1px solid #ccc;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-top: 20px;
 }
 .stat-item {
-  width: 21%;
-  margin: 30px 0;
-  display: flex;
-  align-items: center;
-}
-.stat-icon {
-  background: rgb(99 152 252);
-  width: 60px;
-  height: 60px;
-  border-radius: 3px;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
+  }
 }
 .stat-right {
-  margin-left: 12px;
-  font-size: 18px;
+  font-size: 16px;
 }
 .stat-title {
-  //   color: #969696;
+  color: #909399;
   font-weight: 600;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
+}
+.stat-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #303133;
+  &.clickable {
+    cursor: pointer;
+    text-decoration: underline;
+    color: #409eff;
+  }
 }
 .grid-content {
   margin-bottom: 20px;
   font-size: 20px;
   font-weight: 600;
 }
-</style>
+</style>

src/views/modules/operation-management/order/index.vue

@@ -35,6 +35,7 @@
                   v-model="searchForm.statusList"
                   multiple
                   placeholder="请选择订单状态"
+                  collapse-tags
                   clearable
                   style="width: 100%;"
                 >
@@ -313,11 +314,25 @@ export default {
       expandedShopRows: {},
     };
   },
-  created() {
-    this.fetchData();
-    this.fetchOverview();
+  watch: {
+    "$route.query": {
+      handler(query) {
+        this.applyQueryParamsAndSearch(query);
+      },
+      immediate: true,
+    },
   },
   methods: {
+    applyQueryParamsAndSearch(query) {
+      this.searchForm.statusList = query.statusList
+        ? query.statusList.split(",").map(Number)
+        : [];
+      this.searchForm.dateRange =
+        query.startTime && query.endTime
+          ? [query.startTime, query.endTime]
+          : [];
+      this.handleSearch();
+    },
     handleShopExpandChange(unitOrder, expandedList) {
       const unitOrderNo = unitOrder.unitOrderNo;
       const expandedKeys = expandedList.map(item => item.shopOrderNo);