RWACha-DAPP/src/views/mine/transfer.vue

<template>
  <div>
    <!-- <Header :logoImg="indexinfo.system_logo" style="margin-top: 20px"></Header> -->
    <div class="head">
      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
      <span>{{ $t('lang216') }}</span>
    </div>
    <div class="home_page" @scroll="handleScroll">
      <div class="pd1">
        <van-field v-model="key" :placeholder="$t('lang4')" class="input" right-icon="search" @click-right-icon="search" />
        <div class="banner">
          <van-swipe :autoplay="3000" class="my-swipe" ref="swipeRef">
            <van-swipe-item class="swipe-item" v-for="(item, index) in indexinfo.banner_list" :key="index">
              <van-image style="width: 100%; height: 100%" radius="12" :src="item.img_url" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <van-dropdown-menu active-color="#3d3d3d">
          <van-dropdown-item v-model="sort" :options="option1" @change="search" />
          <van-dropdown-item v-model="type_id" :options="indexinfo.type_list" @change="search" />
        </van-dropdown-menu>
      </div>
      <div class="pd goods_box">
        <div class="goods_list jsb" v-for="(item, index) in list" :key="index">
          <van-image class="goods_list_img" radius="10" :src="item.img_url" />
          <div class="right" style="flex: 1">
            <span class="ellipsis">{{ item.name }}</span>
            <div class="green">{{ item.title }}</div>
            <span class="time_text t2">{{ $t('lang15') }}{{ item.nickname }}</span>
            <span class="time_text t2">{{ item.address }}</span>
            <div class="flex jsb">
              <div class="cen">
                <span class="mon_t">{{ $t('lang16') }}: </span>
                <span class="money"
                  >{{ Math.floor(item.price * 100) / 100 }}<span class="ssm">{{ $t('lang174') }}</span></span
                >
              </div>
              <div class="buy" @click="navigatorToPage('TransferDetail', item.id)">
                <van-button class="buy_btn" type="primary">{{ $t('lang17') }}</van-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue';
import { mapState } from 'vuex';
import { homeApi } from '@/api/index';
import BottomNavigation from '@/components/BottomNavigation.vue';
import { Notify } from 'vant';
import { dateFormat } from '@/utils/formatTool.js';
export default {
  data() {
    return {
      show: false, //弹窗状态
      address: '', //上级地址
      noticeText: '', //公告
      indexinfo: {
        system_name: '',
        system_logo: '',
        banner_list: [],
        notice_list: [],
      },
      inviteCode: undefined,
      userinfo: {
        power: undefined,
        token: undefined,
        usdt: undefined,
        team_poser: undefined,
      },
      bindShow: false,
      time: 30 * 60 * 60 * 1000,
      showLoading: true,
      key: '',
      sort: 0,
      type_id: 0,
      option1: [
        { text: this.$t('lang31'), value: 0 },
        { text: this.$t('lang32'), value: 1 },
        { text: this.$t('lang33'), value: 2 },
      ],
      option2: [
        { text: this.$t('lang34'), value: 0 },
        { text: this.$t('lang28'), value: 1 },
        { text: this.$t('lang29'), value: 2 },
        { text: this.$t('lang30'), value: 3 },
      ],
      list: [],
      page: 1,
    };
  },
  created() {
    this.inviteCode = this.$route.query.inviteCode;
    if (this.inviteCode) {
      localStorage.setItem('inviteCode', this.inviteCode);
    }

    // this.getUserInfo();
  },
  mounted() {
    this.init();
  },
  methods: {
    //返回上一页
    back() {
      this.$router.back();
    },
    init() {
      this.getIndexInfo();
      this.getTransferList();
    },
    dateFormatFn(date) {
      return dateFormat(new Date(date * 1000), 'yyyy-MM-dd');
    },
    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.getTransferList(); // 触发加载更多
        }
      }
    },
    search() {
      this.page = 1;
      this.list = []; // 重置列表数据
      this.getTransferList(); // 触发重新获取列表数据
    },
    getTransferList() {
      homeApi.getTransferList({ sort: this.sort, type_id: this.type_id, key_val: this.key, 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 {
        }
      });
    },

    navigatorToPage(name, id) {
      this.$router.push({ name, query: { id: id } });
    },
    getIndexInfo() {
      homeApi.getIndexBaseInfo().then(res => {
        if (res.code == 200) {
          this.showLoading = false;
          this.indexinfo = res.data;
          this.indexinfo.type_list = res.data.type_list.map(item => {
            return { text: item.title, value: item.id };
          });
          this.indexinfo.type_list.unshift({ text: this.$t('lang34'), value: 0 });
        } else {
          this.showLoading = false;
        }
      });
    },

    handleExpand() {
      this.isExpand = !this.isExpand;
    },
  },
  computed: {
    ...mapState(['account']),
  },
  watch: {
    account(e) {
      // this.init();
      // this.bind();
    },
  },
  components: {
    Header,
    BottomNavigation,
  },
};
</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%);
  }
}
.home_page {
  padding: 50px 0 100px;
  height: 100vh;
  overflow: auto;

  .pd {
    padding: 14px;
    // background-color: #fff;
  }
  .pd1 {
    padding: 14px 14px 0;
    background-color: #fff;
    .input {
      width: 100%;
      // height: 35px;
      // line-height: 35px;
      border: 1px solid #29b286;
      border-radius: 20px;
      margin: 10px 0 20px;
      ::v-deep .van-field__control {
        padding: 6px 12px;
      }
      ::v-deep .van-icon-search {
        font-size: 22px;
        color: #29b286;
        font-weight: bold;
        margin-right: 10px;
      }
    }
    ::v-deep .van-popup {
      padding: 10px 20px 30px;
    }
    ::v-deep .van-dropdown-item__option {
      border-bottom: 1px solid rgba(#adadad, 0.2);
      padding: 10px 0 !important;
    }
    ::v-deep .van-dropdown-menu__bar {
      box-shadow: none;
    }
    ::v-deep .van-dropdown-item__option {
      color: #aaaaaa;
    }
    ::v-deep .van-ellipsis {
      color: #3d3d3d;
      font-size: 14px;
    }
  }
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cha {
      width: 100px;
    }

    .input {
      width: calc(100% - 110px);
      border: 1px solid #29b286;
      border-radius: 20px;
    }
    ::v-deep .van-field__control {
      padding: 6px 12px;
    }
    ::v-deep .van-icon-search {
      font-size: 20px;
      color: #29b286;
      font-weight: bold;
      margin-right: 10px;
    }
  }
  .notice {
    font-size: 13px;
    margin: 8px 0;
    .notice-ico {
      padding: 0 8px;
      border-radius: 20px;
      margin-right: 10px;
      background-color: #e8e8e8;
    }
  }
  ::v-deep .van-notice-bar {
    padding: 0 !important;
  }
  .banner {
    height: 160px;
    color: #fff;
    font-size: 22px;
    border-radius: 12px;
    .my-swipe {
      width: 100%;
      height: 100%;
      border-radius: 12px;
    }
  }

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

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

  .goods_list {
    display: flex;
    // align-items: center;
    // justify-content: space-between;
    color: #000;
    padding: 14px;
    border-radius: 10px;
    // box-shadow: 0 4px 16px 0 rgba(53, 73, 93, 0.15);
    margin-bottom: 16px;
    // box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.29);
    background-color: #fff;
    // background-image: linear-gradient(90deg, rgba(217, 239, 239, 0.3) 0, rgba(217, 239, 239, 0.3) 0, rgba(225, 240, 242, 0.3) 100%, rgba(225, 240, 242, 0.3) 100%);
    &_img {
      width: 90px;
      height: 90px;
      border-radius: 10px;
      margin-right: 10px;
    }

    .right {
      width: calc(100% - 100px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 13px;
      box-sizing: border-box;
      // padding: 6px 0;

      .time_text {
        color: #7f7f7f;
        font-weight: normal;
        font-size: 10px;
        text-decoration: line-through;
      }
      .cen {
        color: red;

        font-size: 12px;
      }
      .money {
        font-size: 15px;
      }
      .ssm {
        font-size: 10px;
        font-weight: normal;
      }
      .mon_t {
        color: #3d3d3d;
        font-weight: normal;
      }
      .yel {
        background-color: #f9f6e5;
        font-weight: normal;
        margin-left: 8px;
        padding: 0px 8px;
        border-radius: 16px;
        .count {
          color: #f7c35d;
          font-size: 9px;
        }
      }
      .green {
        width: fit-content;
        color: #29b286;
        background-color: #ddf2e7;
        font-size: 10px;
        font-weight: normal;
        padding: 2px 6px;
        border-radius: 6px;
        margin: 3px 0;
      }
      .t2 {
        text-decoration: none;
        white-space: nowrap;
        padding: 2px 0;
      }
    }
    .buy {
      display: flex;
      align-items: flex-end;
      &_btn {
        height: 26px;
        line-height: 26px;
        font-size: 10px;
        background-color: #29b286;
        border: none;
        padding: 0 10px;
        white-space: nowrap;
        border-radius: 30px;
      }
    }
  }
}
.goods_list1 {
  flex-wrap: wrap;
  &_img {
    width: 100%;
    height: 70px;
    border-radius: 10px;
    margin-right: 10px;
  }
  .item {
    width: 45%;
    margin-bottom: 10px;
    .cen {
      padding-top: 4px;
      .mon_t {
        font-size: 11px;
        color: #7f7f7f;
      }
      .money::after {
        content: 'CHA/年';
      }
    }
  }
}
.bind_box {
  color: #000;
  padding: 20px 20px 30px;
  .address_field {
    border-bottom: 1px solid #cccccc9d;
    padding: 10px 0;
    margin: 20px 10px 20px;
  }
  .bind_button {
    color: #fff;
    text-align: center;
    background: #7938cf;
    border-radius: 20px;
    padding: 10px 0;
  }
}
.flex {
  display: flex;
  align-items: center;
}
.flex_end {
  align-items: flex-end;
}
::v-deep .van-cascader__option {
  color: #000;
}
.ellipsis {
  overflow: hidden; /* 确保超出容器的文本被裁剪 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  text-overflow: ellipsis; /* 使用省略号表示文本超出 */
}
</style>