Fix:【商城小程序】商品足迹—点击顶部日期切换数据无响应

pages/user/History/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <view>
-    <view class="v12-justify-around v12-pa-2 v12-white">
+  <view class="v12-pb-10">
+    <view class="v12-justify-around v12-pa-2 v12-white data-nav">
       <view
         v-for="(day, i) in currentWeek"
         :key="i"
         class="v12-font-26"
       >
         <view style="color:#BCBCBC" class="day-wrap">{{ getDate(day) }}</view>
-        <view class="v12-dark-text day-wrap" :class="{'active': actived === i}">{{ getDay(day) }}</view>
+        <view class="v12-dark-text day-wrap" :class="{'active': actived === i, 'disabled': disabled(day)}" @click="handle(day, i)">{{ getDay(day) }}</view>
       </view>
     </view>
     <view v-if="isLoad" class="history-wrap">
@@ -15,8 +15,10 @@
         v-for="(item, index) in items"
         :key="index"
         class="v12-mt-3"
+        :id="`history-${item.historyDate}`"
       >
-        <view>
+        <view class="" style="height: 56px; width: 100%" v-if="isSrcoll"></view>
+        <view >
           <text class="v12-font-bold v12-font-32">{{ item.historyDate }}</text>
           <view class="wrapper">
             <view
@@ -83,17 +85,28 @@ export default {
       actived: 0,
       webUrl: this.$VUE_APP_RESOURCES_URL,
       isLoad: false,
-      items: []
+      items: [],
+      isSrcoll: false
     }
   },
   onLoad() {
     this.queryHistory()
   },
-  mounted() {
-    this.currentWeek = this.getWeek()
-    this.actived = this.getActived()
+  onShow() {
+    this.$nextTick(() => {
+      this.currentWeek = this.getWeek()
+      this.actived = this.getActived()
+    })
   },
   methods: {
+    disabled(day) {
+      const dayItems = this.items.filter(item => {
+        return item.historyDate === day
+      }).map(e => {
+        return e.histories
+      }).flat()
+      return dayItems.length === 0
+    },
     getActived() {
       const weekMap = this.currentWeek.map(e => new Date(e).getDay())
       const today = new Date().getDay()
@@ -137,8 +150,20 @@ export default {
       return dateMap[d]
     },
     handle(day, i) {
+      if(this.disabled(day)) return
       this.actived = i
-      
+      this.isSrcoll = true
+      uni.pageScrollTo({
+        selector:`#history-${day}`,
+        duration:200,
+        success:(success)=>{
+          this.isSrcoll = false
+        },
+      })
+    },
+    formatStr(str) {
+      const regx = /-/g
+      return str.replace(regx, '')
     },
     goodsDetail (item) {
       this.$yrouter.push({
@@ -154,13 +179,14 @@ export default {
       getHistory().then(res => {
         const { data = [] } = res
         if (data.length > 0) {
-          data.map(item => {
-            if (item.histories) {
-              if (item.histories.length > 0) {
-                this.items.push(item)
-              }
-            }
-          })
+          this.items = data.filter(e => e.histories && e.histories.length > 0).reverse()
+          // data.map(item => {
+          //   if (item.histories) {
+          //     if (item.histories.length > 0) {
+          //       this.items.push(item)
+          //     }
+          //   }
+          // })
         }
       }).finally(() => {
         this.isLoad = true
@@ -172,6 +198,15 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.data-nav{
+  position: sticky;
+  width: 100%;
+  top: 0;
+  z-index: 9;
+}
+.disabled{
+  color: #CBCBCB !important;
+}
 .history-wrap {
   padding: 0 20rpx;
   .img-nodata {