暂存

view/molistar/vue-project/myincome/src/view/myincome/DiamondLog.vue

@@ -10,6 +10,10 @@
         !this.$store.state.isApp ? 'diamond-tab' : 'diamond-tab crystal-top-app'
       "
     >
+      <div :class="tab === 0 ? 'active' : ''" @click="cutTab(11)">
+        <span> {{ $t("diamondLog.All") }}</span>
+        <span :class="tab === 0 ? 'active' : ''"></span>
+      </div>
       <div :class="tab === 11 ? 'active' : ''" @click="cutTab(11)">
         <span> {{ $t("diamondLog.收入記錄") }}</span>
         <span :class="tab === 11 ? 'active' : ''"></span>
@@ -23,15 +27,20 @@
         <span :class="tab === 1 ? 'active' : ''"></span>
       </div>
     </div>
+    <div class="dataList">
+      <img src="@/assets/img/dataList.png" alt="" />
+      <span>2024-11-23</span>
+    </div>
     <van-index-bar
       :index-list="indexList"
       class="diamond-list"
-      :sticky-offset-top="!this.$store.state.isApp ? unApp : isApp"
+      :sticky-offset-top="htmlDomXd"
     >
+      <!-- :sticky-offset-top="!this.$store.state.isApp ? unApp : isApp" -->
       <!-- v-model="loading" -->
+      <!-- :finished="finished" -->
       <van-list
         style="width: 100%"
-        :finished="finished"
         :finished-text="this.$t(`diamondLog.加載中`)"
         @load="onLoad"
       >
@@ -42,8 +51,9 @@
             index="1"
             v-if="thinkTime(index, item)"
           >
-            <!-- <span class="time">{{ relDate(item.date) }}</span> -->
-            <span>
+            <div class="boxs">
+              <div>
+                <span class="time">
                   {{
                     tab === 11
                       ? $t("diamondLog.共收入")
@@ -55,13 +65,12 @@
                 <span class="total">
                   {{ tab === 1 ? item.totalGiftGoldNumDailySum : item.total }}
                 </span>
-            <span>{{
-              tab === 11
-                ? $t("diamondLog.金幣")
-                : tab == 1
-                ? $t("diamondLog.金幣的禮物")
-                : $t("diamondLog.金幣")
-            }}</span>
+                <img class="img" src="@/assets/img/gold.png" alt="" srcset="" />
+              </div>
+              <div>
+                <span class="time">{{ relDate(item.date) }}</span>
+              </div>
+            </div>
           </van-index-anchor>
 
           <div
@@ -354,6 +363,8 @@
         </div>
       </van-list>
     </van-index-bar>
+    <!-- loadingText -->
+    <div v-show="finished" class="loadingText">加载中...</div>
   </div>
 </template>
 
@@ -368,7 +379,7 @@ export default {
       list: [], //數據列錶
       page: 0, //分頁
       loading: false, //加載中
-      finished: false, //是否加載完
+      finished: true, //是否加載完
       indexList: [], //不清楚應該沒啥用
       //點擊tab類型
       tab: 11,
@@ -392,6 +403,10 @@ export default {
       let htmlDom = document.getElementsByTagName("html")[0];
       return (90 / 37.5) * Number(htmlDom.style.fontSize.slice(0, -2));
     },
+    htmlDomXd() {
+      let htmlDom = document.getElementsByTagName("html")[0];
+      return (116 / 37.5) * Number(htmlDom.style.fontSize.slice(0, -2));
+    },
   },
   methods: {
     cutTab(tab) {
@@ -399,7 +414,7 @@ export default {
       this.page = 0;
       this.list = [];
       this.loading = false;
-      this.finished = false;
+      this.finished = true;
       this.onLoad();
     },
     onLoad() {
@@ -418,13 +433,13 @@ export default {
           } else {
             this.list.push(...res.data.data.billList);
           }
-          if (res.data.data.billList.length > 0) {
-            this.finished = true; // 停止监听到底部事件
+          if (res.data.data.billList.length <= 0) {
+            this.finished = false; 
           }
           this.loading = false;
         } else {
           Toast(res.data.message);
-          this.finished = true; // 如果出错也停止加载，防止死循环
+          this.finished = false; 
         }
       });
     },
@@ -454,12 +469,12 @@ export default {
     // },
     //判斷是否相同時間
     thinkTime(index, item) {
-      // let { list } = this;
-      // if (!index) return true;
-      // if (list[index].date === list[index - 1].date) {
-      //   return false;
-      // }
-      return index == 0 ? true : false;
+      let { list } = this;
+      if (!index) return true;
+      if (list[index].date === list[index - 1].date) {
+        return false;
+      }
+      // return index == 0 ? true : false;
     },
     relDate(value, think) {
       return formatDate(value, think);
@@ -474,6 +489,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.loadingText{
+  width: 100%;
+  text-align: center;
+  color: #AFB1B3;
+  font-size: 14px;
+  margin: 20px auto 20px;
+}
+.diamond-list {
+  margin-top: 66px;
+}
+.dataList {
+  position: fixed;
+  top: 90px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  background: #fff;
+  width: 100%;
+  height: 26px;
+  line-height: 26px;
+  display: flex;
+  justify-content: center;
+  img {
+    display: inline-block;
+    width: 26px;
+    height: 26px;
+    vertical-align: middle;
+  }
+  span {
+    display: inline-block;
+    vertical-align: middle;
+    color: #313131;
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
 .diamond-tab {
   height: 40px;
   position: fixed;
@@ -483,11 +534,16 @@ export default {
   width: 100%;
   display: flex;
   z-index: 9999;
+  overflow-x: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
   &.crystal-top-app {
     top: 0px;
   }
   div {
     width: 50%;
+    margin: 0 10px;
     font-size: 15px;
     color: #666;
     display: flex;
@@ -515,15 +571,11 @@ export default {
     }
   }
 }
-.diamond-list {
-  margin-top: 40px;
-}
 .in-all {
   font-size: 12px;
-  //#7154EE
+  position: sticky;
+  top: 116px; /* 吸顶位置距离顶部 50px */
   span {
-    color: #666;
-    font-size: 12px;
     &.total {
       color: #ffa936;
       font-size: 14px;
@@ -531,12 +583,25 @@ export default {
       font-weight: bold;
     }
     &.time {
-      padding-right: 10px;
+      // padding-right: 10px;
+      color: #313131;
+      font-size: 14px;
+      font-weight: 600;
     }
+    vertical-align: middle;
+  }
+
+  img {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
   }
 }
-.van-index-anchor {
-  background: #f5f5f5 !important;
+.boxs {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
 }
 .in-all-detail {
   width: 345px;
@@ -582,9 +647,6 @@ export default {
     display: flex;
     justify-content: space-between;
     span {
-      // color: #313131;
-      // font-size: 16px;
-      // font-weight: 600;
     }
   }
 }