From c88c1865e7a84d3f9a69217fe242856c08a54635 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CYer=E2=80=9D?= <17633066053@163.com>
Date: Sat, 30 Sep 2023 16:18:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=BF=AE=E6=94=B9=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E5=9B=BE=E5=B7=B2=E5=8F=91=E7=8E=B0=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manager/src/components/affix-time.vue         |  78 +++++++---
 .../src/views/lili-components/affix-time.vue  | 140 +++++++++++++-----
 2 files changed, 157 insertions(+), 61 deletions(-)

diff --git a/manager/src/components/affix-time.vue b/manager/src/components/affix-time.vue
index 7bc48c0f..bc9162a7 100644
--- a/manager/src/components/affix-time.vue
+++ b/manager/src/components/affix-time.vue
@@ -1,20 +1,20 @@
 <template>
   <div>
     <div class="breadcrumb">
-      <span @click="clickBreadcrumb(item,index)" :class="{'active':item.selected}" v-for="(item,index) in dateList"
-        :key="index"> {{item.title}}</span>
+      <span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
+        :key="index"> {{ item.title }}</span>
       <div class="date-picker">
-        <Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" clearable
+        <Select @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询" clearable
           style="width:200px;margin-left:10px;">
-          <Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index" clearable>
-            {{ item.year+'年'+item.month+'月' }}</Option>
+          <Option v-for="(item, i) in dates" :value="item.year + '-' + item.month" :key="i" clearable>
+            {{ item.year + '年' + item.month + '月' }}</Option>
         </Select>
       </div>
       <div class="shop-list" v-if="!closeShop">
         <Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询"
           style="width:200px;margin-left:10px;">
           <Scroll :on-reach-bottom="handleReachBottom">
-            <Option v-for="(item,index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
+            <Option v-for="(item, index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
           </Scroll>
         </Select>
       </div>
@@ -31,7 +31,7 @@ export default {
 
       selectedWay: {
         // 可选时间项
-        title: "最近7天",
+        title: "过去7天",
         selected: true,
         searchType: "LAST_SEVEN",
       },
@@ -56,12 +56,35 @@ export default {
           searchType: "YESTERDAY",
         },
         {
-          title: "最近7天",
+          title: "过去7天",
           selected: true,
           searchType: "LAST_SEVEN",
         },
         {
-          title: "最近30天",
+          title: "过去30天",
+          selected: false,
+          searchType: "LAST_THIRTY",
+        },
+      ],
+      originDateList: [
+        // 筛选条件
+        {
+          title: "今天",
+          selected: false,
+          searchType: "TODAY",
+        },
+        {
+          title: "昨天",
+          selected: false,
+          searchType: "YESTERDAY",
+        },
+        {
+          title: "过去7天",
+          selected: true,
+          searchType: "LAST_SEVEN",
+        },
+        {
+          title: "过去30天",
           selected: false,
           searchType: "LAST_THIRTY",
         },
@@ -126,8 +149,8 @@ export default {
       this.dates = dates.reverse();
     },
     // 改变已选店铺
-    changeSelect() {
-      console.log(this.month);
+    changeSelect(e) {
+      this.month = e
       if (this.month) {
         this.dateList.forEach((res) => {
           res.selected = false;
@@ -138,34 +161,36 @@ export default {
 
         this.$emit("selected", this.selectedWay);
       } else {
-        const current = this.dateList.find(item=>{return item.selected})
+
+        const current = this.dateList.find(item => { return item.selected })
         this.selectedWay = current
+        this.clickBreadcrumb(current)
         this.$emit("selected", this.selectedWay);
+
+
       }
     },
     // 变更时间
     clickBreadcrumb(item) {
-      this.dateList.forEach((res) => {
+
+      let currentIndex;
+      this.dateList.forEach((res,index) => {
         res.selected = false;
+        if(res.title === item.title){
+          currentIndex = index
+        }
       });
       item.selected = true;
       item.storeId = this.storeId;
       this.month = "";
-      const dateList = this.dateList
-      let currentDate
       if (item.searchType == "") {
-        if (
-          dateList.some((date) => {
-            currentDate = date
-            return date.title == item.title;
-          })
-        ) {
-          item.searchType = currentDate.searchType;
+       let currentDate = this.originDateList[currentIndex].searchType
+        if (currentDate) {
+          item.searchType = currentDate
         } else {
           item.searchType = "LAST_SEVEN";
         }
       }
-
       this.selectedWay = item;
       this.selectedWay.year = new Date().getFullYear();
       this.selectedWay.month = "";
@@ -179,15 +204,20 @@ export default {
 .breadcrumb {
   display: flex;
   align-items: center;
-  > span {
+
+  >span {
     margin-right: 15px;
     cursor: pointer;
   }
 }
+
 .active {
   color: $theme_color;
   position: relative;
 }
+
+.date-picker {}
+
 .active:before {
   content: "";
   position: absolute;
diff --git a/seller/src/views/lili-components/affix-time.vue b/seller/src/views/lili-components/affix-time.vue
index 98a75806..bc9162a7 100644
--- a/seller/src/views/lili-components/affix-time.vue
+++ b/seller/src/views/lili-components/affix-time.vue
@@ -1,45 +1,50 @@
 <template>
   <div>
     <div class="breadcrumb">
-      <span @click="clickBreadcrumb(item,index)" :class="{'active':item.selected}" v-for="(item,index) in dateList" :key="index"> {{item.title}}</span>
+      <span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
+        :key="index"> {{ item.title }}</span>
       <div class="date-picker">
-        <Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" style="width:200px;margin-left:10px;">
-          <Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index">{{ item.year+'年'+item.month+'月' }}</Option>
+        <Select @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询" clearable
+          style="width:200px;margin-left:10px;">
+          <Option v-for="(item, i) in dates" :value="item.year + '-' + item.month" :key="i" clearable>
+            {{ item.year + '年' + item.month + '月' }}</Option>
+        </Select>
+      </div>
+      <div class="shop-list" v-if="!closeShop">
+        <Select clearable @on-change="changeshop(selectedWay)" v-model="storeId" placeholder="店铺查询"
+          style="width:200px;margin-left:10px;">
+          <Scroll :on-reach-bottom="handleReachBottom">
+            <Option v-for="(item, index) in shopsData" :value="item.id" :key="index">{{ item.storeName }}</Option>
+          </Scroll>
         </Select>
       </div>
-
     </div>
   </div>
 </template>
 <script>
-import Cookies from "js-cookie";
+import { getShopListData } from "@/api/shops.js";
 export default {
   props: ["closeShop"],
   data() {
     return {
-      month: "", // 所选月份
-
-      defuaultWay: {
-        title: "最近7天",
-        selected: true,
-        searchType: "LAST_SEVEN",
-      },
+      month: "", // 月份
 
       selectedWay: {
-        title: "最近7天",
+        // 可选时间项
+        title: "过去7天",
         selected: true,
         searchType: "LAST_SEVEN",
       },
       storeId: "", // 店铺id
       dates: [], // 日期列表
-      params: { // 请求参数
+      params: {
+        // 请求参数
         pageNumber: 1,
         pageSize: 10,
         storeName: "",
-        storeId: "",
       },
-
       dateList: [
+        // 筛选条件
         {
           title: "今天",
           selected: false,
@@ -51,23 +56,77 @@ export default {
           searchType: "YESTERDAY",
         },
         {
-          title: "最近7天",
+          title: "过去7天",
           selected: true,
           searchType: "LAST_SEVEN",
         },
         {
-          title: "最近30天",
+          title: "过去30天",
           selected: false,
           searchType: "LAST_THIRTY",
         },
       ],
+      originDateList: [
+        // 筛选条件
+        {
+          title: "今天",
+          selected: false,
+          searchType: "TODAY",
+        },
+        {
+          title: "昨天",
+          selected: false,
+          searchType: "YESTERDAY",
+        },
+        {
+          title: "过去7天",
+          selected: true,
+          searchType: "LAST_SEVEN",
+        },
+        {
+          title: "过去30天",
+          selected: false,
+          searchType: "LAST_THIRTY",
+        },
+      ],
+
+      shopTotal: "", // 店铺总数
+      shopsData: [], // 店铺数据
     };
   },
   mounted() {
-   this.storeId = JSON.parse(Cookies.get("userInfoSeller")).id;
     this.getFiveYears();
+    this.getShopList();
   },
   methods: {
+    // 页面触底
+    handleReachBottom() {
+      setTimeout(() => {
+        if (this.params.pageNumber * this.params.pageSize <= this.shopTotal) {
+          this.params.pageNumber++;
+          this.getShopList();
+        }
+      }, 1500);
+    },
+    // 查询店铺列表
+    getShopList() {
+      getShopListData(this.params).then((res) => {
+        if (res.success) {
+          /**
+           * 解决数据请求中，滚动栏会一直上下跳动
+           */
+          this.shopTotal = res.result.total;
+
+          this.shopsData.push(...res.result.records);
+        }
+      });
+    },
+    // 变更店铺
+    changeshop(val) {
+      this.selectedWay.storeId = this.storeId;
+      this.$emit("selected", this.selectedWay);
+    },
+
     // 获取近5年 年月
     getFiveYears() {
       let getYear = new Date().getFullYear();
@@ -89,8 +148,9 @@ export default {
       }
       this.dates = dates.reverse();
     },
-    // 选择回调
-    changeSelect() {
+    // 改变已选店铺
+    changeSelect(e) {
+      this.month = e
       if (this.month) {
         this.dateList.forEach((res) => {
           res.selected = false;
@@ -101,33 +161,36 @@ export default {
 
         this.$emit("selected", this.selectedWay);
       } else {
-        const current = this.dateList.find(item=>{return item.selected})
+
+        const current = this.dateList.find(item => { return item.selected })
         this.selectedWay = current
+        this.clickBreadcrumb(current)
         this.$emit("selected", this.selectedWay);
+
+
       }
     },
-    // 点击时间筛选
+    // 变更时间
     clickBreadcrumb(item) {
-      this.dateList.forEach((res) => {
+
+      let currentIndex;
+      this.dateList.forEach((res,index) => {
         res.selected = false;
+        if(res.title === item.title){
+          currentIndex = index
+        }
       });
       item.selected = true;
       item.storeId = this.storeId;
       this.month = "";
-      const dateList = this.dateList
-      let currentDate
-       if (item.searchType == "") {
-        if (
-          dateList.some((date) => {
-            return date.title == item.title;
-          })
-        ) {
-          item.searchType = currentDate.searchType;
+      if (item.searchType == "") {
+       let currentDate = this.originDateList[currentIndex].searchType
+        if (currentDate) {
+          item.searchType = currentDate
         } else {
           item.searchType = "LAST_SEVEN";
         }
       }
-
       this.selectedWay = item;
       this.selectedWay.year = new Date().getFullYear();
       this.selectedWay.month = "";
@@ -141,17 +204,20 @@ export default {
 .breadcrumb {
   display: flex;
   align-items: center;
-  > span {
+
+  >span {
     margin-right: 15px;
     cursor: pointer;
   }
 }
+
 .active {
   color: $theme_color;
   position: relative;
 }
-.date-picker {
-}
+
+.date-picker {}
+
 .active:before {
   content: "";
   position: absolute;