RWACha-DAPP/src/views/storage/list.vue

<template>
  <div>
    <div class="head">
      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
      <span>{{ $t('lang217') }}</span>
    </div>
    <div class="btn_box">
      <van-button
        :class="[typeIndex == 2 ? 'cc_btn cc_active' : 'cc_btn']"
        :icon="typeIndex == 2 ? 'https://teaclub.oss-cn-chengdu.aliyuncs.com/mall/mul_1.png' : 'https://teaclub.oss-cn-chengdu.aliyuncs.com/mall/mul.png'"
        @click="changeType(2)"
      >
        <!-- <img src="@/assets/images/index/mul.png" class="icon" /> -->
        {{ $t('lang319') }}</van-button
      >
      <van-button
        :class="[typeIndex == 1 ? 'cc_btn cc_active' : 'cc_btn']"
        :icon="typeIndex == 1 ? 'https://teaclub.oss-cn-chengdu.aliyuncs.com/mall/single_1.png' : 'https://teaclub.oss-cn-chengdu.aliyuncs.com/mall/single.png'"
        @click="changeType(1)"
        >{{ $t('lang320') }}</van-button
      >
      <van-button class="cc_btn" icon="https://teaclub.oss-cn-chengdu.aliyuncs.com/mall/teamine.png" @click="navigatorToPage('storing')">{{ $t('lang38') }}</van-button>
    </div>
    <div class="home_page" @scroll="handleScroll">
      <div class="pd goods_box" v-if="list.length > 0">
        <div class="goods_list jsb" v-for="(item, index) in list" :key="index">
          <div class="box" @click="toPage(item.id)">
            <div class="box_top">
              <span class="ellipsis name">{{ item.title }}</span>
              <div class="box_arraw">
                <span>{{ $t('lang323') }}</span>
                <van-icon name="arrow" />
              </div>
            </div>
            <div class="box_bottom">
              <div class="flex">
                <div v-if="Object.values(item.product_list).length > 1">
                  <img
                    v-for="(item1, index1) in [Object.values(item.product_list)[0], Object.values(item.product_list)[1]]"
                    :key="index1"
                    :src="item1.thum"
                    alt=""
                    :class="[typeIndex == 1 ? 'goods_img typeimg' : 'goods_img']"
                  />
                </div>
                <div v-else>
                  <img v-for="(item1, index1) in Object.values(item.product_list)" :key="index1" :src="item1.thum" alt="" :class="[typeIndex == 1 ? 'goods_img typeimg' : 'goods_img']" />
                </div>
                <div class="ellipsis_box">
                  <van-icon name="ellipsis" v-if="Object.values(item.product_list).length > 2" />
                </div>
              </div>
              <div class="right">
                <div class="flex_col">
                  <span class="value_1">{{ item.day_num }}</span>
                  <span class="key">{{ $t('lang324') }}</span>
                </div>
                <div class="flex_col">
                  <span class="value_2">{{ Number(item.income_reta) * 100 }}</span>
                  <span class="key">APY</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bare" v-else>
        <span>{{ $t('lang60') }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { homeApi } from '@/api/index';
import { dateFormat } from '@/utils/formatTool.js';
export default {
  data() {
    return {
      typeIndex: 2, //1单 2组
      time: 30 * 60 * 60 * 1000,
      showLoading: true,
      list: [],
      page: 1,
      current: parseInt(new Date().getTime() / 1000), //1743648326
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //返回上一页
    back() {
      this.$router.back();
    },
    init() {
      this.pledgeList();
    },
    dateFormatFn(date) {
      return dateFormat(new Date(date * 1000), 'MM/dd hh:mm');
    },
    handleScroll(event) {
      const container = event.target;
      const scrollTop = container.scrollTop; // 滚动距离
      const scrollHeight = container.scrollHeight; // 内容总高度
      const clientHeight = container.clientHeight; // 可视区域高度
      // 判断是否滑动到底部
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        console.log('Bottom');
        if (this.page != -1) {
          this.page++; // 页数加 1
          this.pledgeList(); // 触发加载更多
        }
      }
    },

    pledgeList() {
      homeApi.pledgeList({ type_id: this.typeIndex, page: this.page }).then(res => {
        if (res.code == 200) {
          if (this.list.length >= res.data.total) {
            this.page = -1; // 重置为 -1，表示没有更多数据
          } else {
            this.list = [...this.list, ...res.data.data];
            if (this.list.length >= res.data.total) {
              this.page = -1; // 重置为 -1，表示没有更多数据
            }
          }
        } else {
        }
      });
    },
    changeType(index) {
      this.typeIndex = index;
      this.list = [];
      this.page = 1;
      this.pledgeList();
    },
    navigatorToPage(name, id) {
      this.$router.push({ name, query: { id: id } });
    },
    toPage(id) {
      if (this.typeIndex == 2) {
        this.$router.push({ name: 'MulStorageDetail', query: { id } });
      } else if (this.typeIndex == 1) {
        this.$router.push({ name: 'SingleStorageDetail', query: { id } });
      }
    },
    toSiniglePage(id) {},
  },
  computed: {
    ...mapState(['account']),
  },
};
</script>

<style lang="less" scoped>
.head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(#000, 0.8);
  letter-spacing: 1.5px;
  font-weight: 550;
  background: #fff;
  padding: 14px 0;
  z-index: 99;
  .arrow_img {
    position: absolute;
    left: 20px;
    width: 10px;
    height: 16px;
    // transform: translate(0, -50%);
  }
}
.btn_box {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background-color: #fff;
  .cc_btn {
    width: 31%;
    height: 36px;
    color: #29b286;
    line-height: 36px;
    font-size: 13px;
    // letter-spacing: 2px;
    text-align: center;
    // white-space: nowrap;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    // border: 1px solid #29b286;
    background-color: #f3f3f3;
    .van-button__text {
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }
  }
  .cc_active {
    color: #fff;
    background-color: #29b286;
  }
}
.home_page {
  padding: 100px 0 30px;
  height: 100vh;
  overflow: auto;

  .pd {
    padding: 14px;
    // background-color: #fff;
  }

  .jsb {
    justify-content: space-between;
  }

  .goods_box {
    // margin: 14px;
    border-radius: 14px;
    .good_icon {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .goods_list {
    color: #000;
    // padding: 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    background-color: #fff;
    &_img {
      width: 125px;
      height: 125px;
      border-radius: 0 10px 10px 0 !important;
    }
    /deep/.van-image {
      border-radius: 0 10px 10px 0 !important;
    }

    .box {
      font-size: 13px;
      padding: 14px;
      box-sizing: border-box;
      // padding: 6px 0;
      &_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name {
          font-size: 16px;
          font-weight: 600;
          letter-spacing: 1px;
        }
      }
      &_arraw {
        display: flex;
        align-items: center;
        font-size: 11px;
        color: #7f7f7f;
      }
      &_bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 20px;
        .goods_img {
          width: 52px;
          height: 52px;
          border-radius: 50%;
          margin-right: 6px;
        }
        .typeimg {
          width: 63px;
          height: 63px;
        }
        .ellipsis_box {
          width: 17px;
        }
        .flex {
          color: #7f7f7f;
          font-size: 17px;
          font-weight: 700;
        }
        .flex::after {
          content: ' ';
          width: 1px;
          height: 28px;
          margin-left: 10px;
          background-color: #e4e4e4;
        }
        .right {
          display: flex;
          // align-items: center;
          flex: 1;
          padding: 0 0 0 14px;
          .flex_col {
            width: 50%;
            // white-space: nowrap;
            text-align: center;
            .value_1 {
              color: #29b286;
              font-size: 21px;
              font-weight: 600;
            }
            .value_1::after {
              content: 'TeaC';
              font-size: 15px;
              font-weight: normal;
            }
            .value_2::after {
              content: '%';
              font-size: 15px;
              font-weight: normal;
            }
            .value_2 {
              color: #ed5111;
              font-size: 21px;
              font-weight: 600;
            }
            .key {
              color: #4b4b4b;
              font-size: 12px;
              padding-top: 10px;
            }
          }
        }
      }
    }
    .buy {
      display: flex;
      align-items: flex-end;
      &_btn {
        height: 30px;
        min-width: 102px;
        line-height: 26px;
        font-size: 12px;
        letter-spacing: 1px;
        text-align: center;
        white-space: nowrap;
        padding: 0 20px;
        border: none;
        border-radius: 30px;
        background-color: #29b286;
      }
      .will {
        background-color: #585858;
        .van-button__text {
          display: flex;
          align-items: center;
          flex-direction: column;
          line-height: 108%;
        }
        .countdown {
          font-size: 9px;
          letter-spacing: 0;
        }
        /deep/.van-count-down {
          line-height: 116% !important;
          color: #fff !important;
        }
      }
      .finish {
        color: #585858;
        background-color: #dedede;
      }
    }
  }
}
.icon {
  width: 20px;
  height: 20px;
}
.bare {
  text-align: center;
  font-size: 14px;
  padding: 60px 14px;
  color: #888;
}
.flex {
  display: flex;
  align-items: center;
}
.flex_col {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.flex_end {
  align-items: flex-end;
}
::v-deep .van-cascader__option {
  color: #000;
}
.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>