no message

pages/index/components/contract-list.vue

@@ -0,0 +1,163 @@
+<template>
+  <view class="earning-box">
+    <en-list ref="earningObj" @getList="getList">
+      <template v-slot:listInfo="{pagingData}">
+        <view class="earning-list">
+          <view v-for="item in pagingData" class="item">
+            <view class="list-item">
+              <view class="item-line">
+                <view class="item-text">BNB</view>
+              </view>
+              <view class="item-line line-text">
+                <view class="item-text">{{$t('index.index.list.item.title')}}</view>
+              </view>
+              <view class="item-line" v-if="item.hash">
+                <view class="item-text">Hash</view>
+                <view class="item-text text-hash">
+                  {{item.hash}}
+                </view>
+              </view>
+              <view class="item-line">
+                <view class="item-text">BNB Number</view>
+                <view class="item-text text-two">
+                  <view class="text-img">
+                    <image src="@/static/img/index/bnb2.png"></image>
+                  </view>
+                  <view class="text">{{(item.money).toFixed(6)}}</view>
+                </view>
+              </view>
+              <view class="item-line" >
+                <view class="item-text">{{$t('index.index.list.item.status')}}</view>
+                <view class="item-text text-two">
+                  <view class="status-img ">
+                    <image v-if="item.status===1" src="@/static/img/contract/send.png"></image>
+                    <image v-else-if="item.status===2" src="@/static/img/contract/ok.png"></image>
+                    <image v-else-if="item.status===3" src="@/static/img/contract/no.png"></image>
+                    <image v-else src="@/static/img/contract/end.png"></image>
+                  </view>
+                  <view class="text">{{item.statusName}}</view>
+                </view>
+              </view>
+
+              <view class="item-line">
+                <view class="item-text">{{$t('index.index.list.item.date')}}</view>
+                <view class="item-text">{{item.created_at}}</view>
+              </view>
+            </view>
+            <division class="division-item"></division>
+          </view>
+        </view>
+      </template>
+    </en-list>
+  </view>
+</template>
+
+<script>
+import EnList from "@/components/en-list/en-list";
+import {getContractList, getEarnings} from "@/api/contract";
+import Division from "@/pages/index/components/division";
+
+export default {
+  name: "contract-list",
+  components: {Division, EnList},
+  props: {},
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+
+  },
+  methods: {
+    getList(page) {
+      getContractList({'page': page}).then((res) => {
+        if (res.code === 1) {
+          this.$refs.earningObj.setList(res.data.items, res.data.total)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.earning-box {
+  .earning-list {
+    .list-item {
+      margin-top: 20rpx;
+
+      .item-line {
+        margin-bottom: 20rpx;
+        display: flex;
+        justify-content: space-between;
+
+        .item-text {
+          font-size: 26rpx;
+          color: rgb(177, 177, 177);
+          line-height: 42rpx;
+          height: 42rpx;
+        }
+        .text-hash{
+          max-width: 200rpx;
+          overflow-x:hidden;
+          text-overflow: ellipsis;
+        }
+
+        .text-two {
+          display: flex;
+          justify-content: right;
+
+          .text-img {
+            display: inline-block;
+            padding: 6rpx;
+            background: rgb(0, 87, 255);
+            border-radius: 50%;
+            height: 42rpx;
+            width: 42rpx;
+            box-sizing: border-box;
+
+            image {
+              width: 30rpx;
+              height: 30rpx;
+              z-index: 100;
+            }
+          }
+          .status-img{
+            display: inline-block;
+            border-radius: 50%;
+            height: 42rpx;
+            width: 42rpx;
+            box-sizing: border-box;
+            image {
+              width: 42rpx;
+              height: 42rpx;
+              z-index: 100;
+            }
+          }
+
+          .text {
+            margin-left: 10rpx;
+            font-size: 30rpx;
+          }
+        }
+      }
+
+      .line-text {
+        margin-bottom: 40rpx;
+
+        .item-text {
+          font-weight: bold;
+          font-size: 26rpx;
+          color: #222;
+        }
+      }
+    }
+    .item:last-child {
+      .division-item {
+        display: none;
+      }
+    }
+  }
+}
+
+</style>

pages/index/contract.vue

@@ -35,44 +35,7 @@
         <view class="title-text">我的收支明细(100)</view>
       </view>
       <division></division>
-      <view v-for="i in 5" class="item">
-        <view class="list-item">
-          <view class="item-line">
-            <view class="item-text">BNB</view>
-          </view>
-          <view class="item-line line-text">
-            <view class="item-text">平台分润</view>
-          </view>
-          <view class="item-line">
-            <view class="item-text">BNB Number</view>
-            <view class="item-text text-two">
-              <view class="text-img">
-                <image src="@/static/img/index/bnb2.png"></image>
-              </view>
-              <view class="text">56</view>
-            </view>
-          </view>
-          <view class="item-line">
-            <view class="item-text">积分</view>
-            <view class="item-text text-two">
-              <view class="text-img">
-                <image src="@/static/img/index/jf.svg"></image>
-              </view>
-              <view class="text">56</view>
-            </view>
-          </view>
-          <view class="item-line">
-            <view class="item-text">手续费</view>
-            <view class="item-text">56</view>
-          </view>
-          <view class="item-line">
-            <view class="item-text">时间</view>
-            <view class="item-text">56</view>
-          </view>
-        </view>
-        <division class="division-item"></division>
-      </view>
-
+      <contract-list></contract-list>
     </view>
     <view class="contract-bottom"></view>
   </view>
@@ -82,10 +45,11 @@
 
 import TopHead from "@/pages/index/components/top-head";
 import Division from "@/pages/index/components/division";
+import ContractList from "@/pages/index/components/contract-list";
 
 export default {
   name: "contract",
-  components: {Division, TopHead},
+  components: { ContractList, Division, TopHead},
   props: {},
   data() {
     return {}
@@ -255,64 +219,7 @@ export default {
       }
     }
 
-    .list-item {
-      margin-top: 20rpx;
-
-      .item-line {
-        margin-bottom: 20rpx;
-        display: flex;
-        justify-content: space-between;
-
-        .item-text {
-          font-size: 26rpx;
-          color: rgb(177, 177, 177);
-          line-height: 42rpx;
-          height: 42rpx;
-        }
-
-        .text-two {
-          display: flex;
-          justify-content: right;
-
-          .text-img {
-            display: inline-block;
-            padding: 6rpx;
-            background: rgb(0, 87, 255);
-            border-radius: 50%;
-            height: 42rpx;
-            width: 42rpx;
-            box-sizing: border-box;
 
-            image {
-              width: 30rpx;
-              height: 30rpx;
-              z-index: 100;
-            }
-          }
-
-          .text {
-            margin-left: 10rpx;
-            font-size: 30rpx;
-          }
-        }
-      }
-
-      .line-text {
-        margin-bottom: 40rpx;
-
-        .item-text {
-          font-weight: bold;
-          font-size: 26rpx;
-          color: #222;
-        }
-      }
-    }
-
-    .item:last-child {
-      .division-item {
-        display: none;
-      }
-    }
   }
 
   .contract-bottom {