bn-q-icon/pages/index/components/contract-list.vue

<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>