数据统计问题修改，增加销售统计页面

2025-11-24 17:16:44 +08:00
parent 679207521d
commit 0d13ae2e9e
6 changed files with 459 additions and 10 deletions
--- a/components/JeepayNavigation/JeepayNavigation.vue
+++ b/components/JeepayNavigation/JeepayNavigation.vue
@@ -78,7 +78,7 @@

 	// 点击事件
 	async function clickFunc(nav) {
-		if (nav.pageUrl == "PAGES_SALES_SUMMARY") {
+		if (nav.pageUrl == "PAGES_DATA_SUMMARY") {
 			let res = await hasPermission('允许查看经营数据')
 			if (!res) return
 		}
--- a/http/api/order/summary.js
+++ b/http/api/order/summary.js
@@ -20,4 +20,14 @@ export function saleSummaryPage(data) {
        ...data,
      },
    });
+  }
+
+  export function saleSummaryCount(data) {
+    return request({
+      url: `${urlType}/admin/sale/summary/count`,
+      method: "GET",
+      data: {
+        ...data,
+      },
+    });
  }
--- a/pageSalesSummary/index.vue
+++ b/pageSalesSummary/index.vue
@@ -15,7 +15,7 @@
  <view class="pageSalesSummaryContent">
    <view class="">
      <view class=""> 实收金额(元) </view>
-      <view class=""> {{ list.saleAmount ? list.saleAmount : 0 }} </view>
+      <view class=""> {{ list.payAmount ? list.payAmount : 0 }} </view>
    </view>
    <view class="">
      <view class=""> 优惠金额(元) </view>
@@ -26,7 +26,7 @@
    <view class="">
      <view class=""> 客单价(元) </view>
      <view class="">
-        {{ list.customerUnitPrice ? list.customerUnitPrice : 0 }}
+        {{ list.avgPayAmount ? list.avgPayAmount : 0 }}
      </view>
    </view>
    <view class="">
@@ -44,7 +44,7 @@
    <view class="">
      <view class=""> 翻台率(%) </view>
      <view class="">
-        {{ list.tableTurnoverRate ? list.tableTurnoverRate : 0 }}
+        {{ list.turnoverRate ? list.turnoverRate : 0 }}
      </view>
    </view>
  </view>
@@ -97,6 +97,8 @@
    更多 <uni-icons type="right" size="16"></uni-icons>
  </view>
  <datePickerview
+  @close="datePickerClose"
+
    @confirm="datePickerConfirm"
    ref="datePicker"
  ></datePickerview>
@@ -111,9 +113,23 @@ import { getTrade } from "@/http/api/summary.js";
 import { saleSummaryPage } from "@/http/api/order/summary.js";
 import { timeList } from "@/data/index.js";

+function resetDatePicker() {
+  datePickerData.value.beginDate = "";
+  datePickerData.value.endDate = "";
+}
+
+function datePickerClose() {
+  console.log("datePickerClose");
+  if (!datePickerData.value.beginDate && !datePickerData.value.endDate) {
+    selected.value = oldSelected;
+  }
+}
+
 const datePicker = ref();

 let selected = ref("today");
+let oldSelected = selected.value;
+
 let list = ref({});
 let tableList = ref([]);
 let day = ref(1);
@@ -157,9 +173,13 @@ function gettableData(beginDate, endDate) {
 */
 function changeTime(e) {
  selected.value = e;
+  resetDatePicker();
+
  if (e == "custom") {
    datePicker.value.toggle();
  } else {
+    oldSelected = e;
+
    getData();
  }
 }
--- a/pageSalesSummary/sales.vue
+++ b/pageSalesSummary/sales.vue
@@ -0,0 +1,411 @@
+<template>
+  <view class="time-wrapper">
+    <view v-for="(v, i) in timeList" :key="i" class="timelistbox">
+      <view
+        class="time-item"
+        @tap="changeTime(v.value)"
+        :class="[v.value == selected ? 'time-selected' : '']"
+      >
+        {{ v.label }}
+      </view>
+      <view class="xian" v-if="v.value == selected"> </view>
+    </view>
+  </view>
+
+  <view class="pageSalesSummaryContent">
+    <view class="">
+      <view class="">总金额(元) </view>
+      <view class=""> {{ list.totalAmount ? list.totalAmount : 0 }} </view>
+    </view>
+    <view class="">
+      <view class=""> 退款金额(元) </view>
+      <view class="">
+        {{ list.refundAmount ? list.refundAmount : 0 }}
+      </view>
+    </view>
+    <view class="">
+      <view class=""> 总数量 </view>
+      <view class="">
+        {{ list.saleCount ? list.saleCount : 0 }}
+      </view>
+    </view>
+    <view class="">
+      <view class=""> 退单量 </view>
+      <view class="">
+        {{ list.refundCount ? list.refundCount : 0 }}
+      </view>
+    </view>
+  </view>
+  <view class="table-scroll">
+    <view class="color-333 u-font-28 bg-gray default-box-padding">
+      <scroll-view :scroll-x="true" class="bg-fff table u-text-center">
+        <view class="bg-fff border-r-12 u-flex no-wrap u-col-top">
+          <view class="constantbox">
+            <view class="constantboxitem">
+              <view class="head">商品名称</view>
+              <view class="head">总数量</view>
+              <view class="head">金额</view>
+            </view>
+            <view
+              class="constantboxitem"
+              v-for="(item, index) in tableList"
+              :key="index"
+              @click="toDetail(item)"
+            >
+              <view class="head" style="padding-left: 16rpx">
+                <image
+                  v-if="index == 0"
+                  src="../pageTable/index/images/1.png"
+                  style="width: 22rpx; height: 30rpx"
+                  mode=""
+                ></image>
+                <image
+                  v-else-if="index == 1"
+                  src="../pageTable/index/images/2.png"
+                  style="width: 22rpx; height: 30rpx"
+                  mode=""
+                ></image>
+                <image
+                  v-else-if="index == 2"
+                  src="../pageTable/index/images/3.png"
+                  style="width: 22rpx; height: 30rpx"
+                  mode=""
+                ></image>
+                &nbsp;&nbsp;{{ item.productName }}
+              </view>
+              <view class="head">{{ item.saleCount || 0 }}</view>
+              <view class="head">{{ item.saleAmount || 0 }}</view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+  <view class="bottombtn" @tap="toUrl">
+    更多 <uni-icons type="right" size="16"></uni-icons>
+  </view>
+  <datePickerview
+    @close="datePickerClose"
+    @confirm="datePickerConfirm"
+    ref="datePicker"
+  ></datePickerview>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import datePickerview from "./components/my-date-pickerview.vue";
+import dayjs from "dayjs"; //时间格式库
+import go from "@/commons/utils/go.js";
+import { saleSummaryPage, saleSummaryCount } from "@/http/api/order/summary.js";
+import { timeList } from "@/data/index.js";
+
+function datePickerClose() {
+  console.log("datePickerClose");
+  if (!datePickerData.value.beginDate && !datePickerData.value.endDate) {
+    selected.value = oldSelected;
+  }
+}
+
+const datePicker = ref();
+
+let selected = ref("today");
+let oldSelected = selected.value;
+
+let list = ref({});
+let tableList = ref([]);
+let day = ref(1);
+onMounted(() => {
+  getData();
+});
+
+/**
+ * 获取营业数据
+ * @param {Object} beginDate
+ * @param {Object} endDate
+ */
+function getlist(beginDate, endDate) {
+  saleSummaryCount({
+    beginDate,
+    endDate,
+    rangeType: selected.value,
+  }).then((res) => {
+    list.value = res || {
+      refundAmount: 0,
+      refundCount: 0,
+      saleCount: 0,
+      totalAmount: 0,
+    };
+  });
+}
+
+/**
+ * 获取销售数据
+ * @param {Object} beginDate
+ * @param {Object} endDate
+ */
+function gettableData(beginDate, endDate) {
+  saleSummaryPage({
+    beginDate,
+    endDate,
+    rangeType: selected.value,
+  }).then((res) => {
+    tableList.value = (res || []).slice(0, 5);
+  });
+}
+
+function resetDatePicker() {
+  datePickerData.value.beginDate = "";
+  datePickerData.value.endDate = "";
+}
+/**
+ * 时间切换
+ * @param {Object} e
+ */
+function changeTime(e) {
+  selected.value = e;
+  resetDatePicker();
+  if (e == "custom") {
+    datePicker.value.toggle();
+  } else {
+    oldSelected = e;
+
+    getData();
+  }
+}
+
+const datePickerData = ref({
+  beginDate: "",
+  endDate: "",
+});
+/**
+ * 自定义确认
+ * @param {Object} e
+ */
+function datePickerConfirm(e) {
+  datePickerData.value.beginDate = e.start;
+  datePickerData.value.endDate = e.end;
+  getData(e.start, e.end);
+}
+function getData(start, end) {
+  let beginDate, endDate;
+  if (selected.value == "custom") {
+    beginDate = start.substring(0, start.indexOf(" "));
+    endDate = end.substring(0, end.indexOf(" "));
+  } else {
+    beginDate = timeList.find((item) => item.value == selected.value).beginDate;
+    endDate = timeList.find((item) => item.value == selected.value).endDate;
+  }
+  getlist(beginDate, endDate);
+  gettableData(beginDate, endDate);
+}
+/**
+ * 更多
+ */
+function toUrl() {
+  let beginDate, endDate;
+  if (selected.value == "custom") {
+    beginDate = datePickerData.value.beginDate.substring(
+      0,
+      datePickerData.value.beginDate.indexOf(" ")
+    );
+    endDate = datePickerData.value.endDate.substring(
+      0,
+      datePickerData.value.endDate.indexOf(" ")
+    );
+  } else {
+    beginDate = timeList.find((item) => item.value == selected.value).beginDate;
+    endDate = timeList.find((item) => item.value == selected.value).endDate;
+  }
+  go.to("PAGES_PRODUCT_SALES_RANKING", {
+    beginDate,
+    endDate,
+    rangeType: selected.value,
+  });
+}
+</script>
+<style>
+page {
+  background: #f6f6f6;
+}
+</style>
+<style lang="scss" scoped>
+.fixed-top {
+  padding: 32rpx 28rpx;
+  z-index: 100;
+}
+
+.bottom {
+  background-color: transparent;
+  bottom: 84rpx;
+  left: 28rpx;
+  right: 28rpx;
+}
+
+.table {
+  border-radius: 12rpx 12rpx 0rpx 0rpx;
+  overflow: hidden;
+  font-size: 24rpx;
+
+  .constantbox {
+    .constantboxitem {
+      display: flex;
+
+      .head {
+        width: 220rpx;
+        padding: 32rpx 24rpx;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        font-size: 24rpx;
+        color: #333333;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+      }
+
+      .head:nth-child(4) {
+        width: 300rpx;
+      }
+
+      .head:nth-child(5) {
+        width: 300rpx;
+      }
+    }
+
+    .constantboxitem:nth-child(even) {
+      background: #fff;
+    }
+
+    .constantboxitem:nth-child(odd) {
+      background: #f7f6fb;
+    }
+
+    .constantboxitem:nth-child(1) {
+      background: #aebad2;
+      color: #fff;
+      font-size: 24rpx;
+    }
+  }
+
+  .item:nth-of-type(2n + 1) {
+    background-color: rgb(249, 249, 249);
+  }
+}
+</style>
+
+<style scoped lang="less">
+.time-wrapper {
+  display: flex;
+  justify-content: space-around;
+  padding-bottom: 16rpx;
+  padding-top: 16rpx;
+  background-color: #fff;
+
+  .timelistbox {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .time-item {
+      font-size: 28rpx;
+      text-align: center;
+      padding-bottom: 10rpx;
+    }
+
+    .xian {
+      width: 40rpx;
+      height: 3rpx;
+      background-color: #318afe;
+      // position: absolute;
+      // left: 16rpx;
+      // bottom: 0;
+    }
+  }
+
+  .time-selected {
+    color: #318afe;
+    font-size: 32rpx !important;
+  }
+}
+
+.pageSalesSummaryContent {
+  height: 320rpx;
+  margin: 20rpx 28rpx;
+  background-image: url("./svg/bgimg.svg");
+  background-size: 694rpx 320rpx;
+  padding: 48rpx 28rpx;
+  .df;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  > view {
+    width: 50%;
+    padding-right: 52rpx;
+    color: #fff;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 28rpx;
+  }
+}
+
+// 表格
+.table-scroll {
+  // width: calc(100% - 5px);
+  overflow-x: scroll;
+  white-space: nowrap;
+  margin: 32rpx 28rpx;
+  margin-right: 30rpx;
+  border-radius: 30rpx 30rpx 0 0;
+}
+
+.table-scroll .table {
+  table-layout: fixed;
+  // width: calc(100% - 10rpx);
+}
+
+.table-scroll .thead {
+  display: table-row;
+  background-color: bisque;
+  font-size: 24rpx;
+}
+
+.table-scroll .tbody {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  display: block;
+  // width: 1040rpx;
+  width: 100%;
+  // width: calc(100% );
+}
+
+// .table-scroll th,
+// td {
+// 	height: 82rpx;
+// 	overflow: hidden;
+// 	text-overflow: ellipsis;
+// 	width: 250rpx;
+// 	// border: 0.7rpx solid red;
+// 	border: 0.7rpx solid rgba(126, 155, 212, 0.27);
+// }
+
+.bottombtn {
+  width: 694rpx;
+  height: 56rpx;
+  line-height: 56rpx;
+  text-align: center;
+  margin: 0rpx auto;
+  background: #f1f1f1;
+  font-size: 24rpx;
+  border-radius: 0rpx 0rpx 28rpx 28rpx;
+}
+
+.df() {
+  display: flex;
+  align-items: center;
+}
+</style>
+<style>
+.min-page {
+  height: 20vh;
+}
+</style>
--- a/pages.json
+++ b/pages.json
@@ -390,12 +390,20 @@
 		{
 			"root": "pageSalesSummary",
 			"pages": [{
-				"pageId": "PAGES_SALES_SUMMARY",
+				"pageId": "PAGES_DATA_SUMMARY",
 				"path": "index",
 				"style": {
-					"navigationBarTitleText": "销售汇总"
+					"navigationBarTitleText": "数据统计"
 				}
-			}, {
+			},
+			{
+				"pageId": "PAGES_SALES_SUMMARY",
+				"path": "sales",
+				"style": {
+					"navigationBarTitleText": "销量统计"
+				}
+			},
+			{
 				"pageId": "PAGES_PRODUCT_SALES_RANKING",
 				"path": "productSalesRanking",
 				"style": {
--- a/pages/index/components/statistics.vue
+++ b/pages/index/components/statistics.vue
@@ -47,7 +47,7 @@
                size="14"
                bold
                mode="price"
-                :text="refundCount"
+                :text="refundAmount"
              ></up-text>
            </view>
          </view>
@@ -180,7 +180,7 @@ onShow((options) => {
 });

 const yingyeE = ref(0);
-const refundCount = ref(0);
+const refundAmount = ref(0);
 /**
 * 获取统计数据
 * @param {Object} start
@@ -202,7 +202,7 @@ function getlist(start, end) {
    shopId: uni.getStorageSync("shopId"),
    rangeType: rangeType,
  }).then((res) => {
-    refundCount.value = res.refundCount;
+    refundAmount.value = res.refundAmount;
    for (var key in res) {
      pageData.list.map((item) => {
        if (item.key == key) {