RWACha-DAPP/src/views/transfer/list.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> -->
    <van-tabs v-model="navActive" color="#29B286" title-active-color="#29B286" title-inactive-color="#c8c9cc" class="van-tabs" @disabled="onClickDisabled" @change="changeTab">
      <van-tab :title="$t('lang245')"></van-tab>
      <van-tab :title="$t('lang216')" disabled></van-tab>
      <van-tab :title="$t('lang246')"></van-tab>
    </van-tabs>
    <div class="home_page" @scroll="handleScroll">
      <div class="pd1">
        <div class="btn_box">
          <van-button v-for="(item, index) in typeList" :key="index" :class="[typeIndex == index ? 'cc_btn cc_active' : 'cc_btn']" @click="changeType(item, index)"> {{ item.title }}</van-button>
        </div>
        <van-field v-model="key" :placeholder="$t('lang4')" class="input" right-icon="search" @click-right-icon="search" />

        <div class="sort flex jsb">
          <span class="w1">{{ $t('lang244') }}</span>

          <!-- <div class="flex"> -->
          <div class="flex w2" @click="handlePriceSort">
            <span>{{ $t('lang247') }}</span>
            <img src="@/assets/images/index/j0.png" alt="" style="width: 14px" v-if="sort == 0" />
            <img src="@/assets/images/index/j2.png" alt="" style="width: 14px" v-else-if="sort == 1" />
            <img src="@/assets/images/index/j1.png" alt="" style="width: 14px" v-else-if="sort == 2" />
          </div>
          <!-- <div class="flex w3" @click="handleVolumeSort">
            <span>{{ $t('lang342') }}</span>
            <img src="@/assets/images/index/j0.png" alt="" style="width: 14px" v-if="volume == 0" />
            <img src="@/assets/images/index/j2.png" alt="" style="width: 14px" v-else-if="volume == 1" />
            <img src="@/assets/images/index/j1.png" alt="" style="width: 14px" v-else-if="volume == 2" />
          </div> -->
          <!-- <van-dropdown-menu active-color="#3d3d3d">
              <van-dropdown-item v-model="type_id" :options="indexinfo.type_list" @change="search" />
            </van-dropdown-menu> -->
          <!-- <svg width="30" height="30" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M70,35
           C56,28 38,40 40,54
           C40,64 50,74 70,66"
                fill="none"
                stroke="black"
                stroke-width="6"
                stroke-linecap="round"
              />
              <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
              <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
            </svg> -->
          <!-- </div> -->
        </div>
      </div>
      <div class="goods_box" v-if="list.length > 0">
        <div class="goods_list jsb" v-for="(item, index) in list" :key="index" @click="navigatorToPage('typeDetail', item.product_id)">
          <div class="info">
            <van-image class="goods_list_img" radius="10" :src="item.img_url" />
            <div class="name_box">
              <span class="name ellipsis">{{ item.name }}</span>
              <span class="time_text t2 ellipsis">{{ $t('lang301') + item.issue }}{{ $t('lang7') + '/' + $t('lang302') }}{{ item.issue }}{{ $t('lang7') }}</span>
            </div>
            <div @click.stop="changeStar(item, index)" class="star">
              <span v-if="item.collect == 0">
                <svg t="1746757181645" class="icon" viewBox="0 0 1058 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2027" width="15" height="15">
                  <path
                    d="M274.72727305 953.81818174c-5.4545458 0-10.90909073 0-16.36363653-2.72727247-13.63636406-5.4545458-24.54545479-13.63636406-32.72727305-27.27272724-5.4545458-10.90909073-8.18181826-21.81818145-5.45454492-35.45454551L263.81818144 634.72727305 81.09090898 454.72727305c-21.81818145-21.81818145-21.81818145-54.54545449 0-76.36363682 8.18181826-8.18181826 19.09090898-13.63636406 29.99999971-16.36363652l253.63636436-38.18181797 114.5454539-229.09090869c5.4545458-13.63636406 16.36363653-21.81818145 32.72727305-27.27272725 13.63636406-5.4545458 27.27272724-2.72727247 40.90909131 2.72727246 10.90909073 5.4545458 19.09090898 13.63636406 24.5454539 24.54545479l114.54545479 229.09090869 253.63636347 38.18181797c29.99999971 5.4545458 49.09090869 32.72727305 46.36363624 62.72727275-2.72727247 10.90909073-8.18181826 21.81818145-16.36363565 30.00000059L792.90909072 634.72727305l43.63636377 253.63636348c2.72727247 13.63636406 0 29.99999971-8.18181826 40.90909042s-21.81818145 19.09090898-35.4545455 21.81818233c-10.90909073 2.72727247-24.54545479 0-35.45454552-5.45454581L525.63636406 828.36363623l-226.36363711 119.99999971c-8.18181826 5.4545458-16.36363653 5.4545458-24.5454539 5.4545458zM525.63636406 124.72727276l-125.4545455 256.36363593L116.5454545 419.27272754l204.54545477 199.09090899-49.09090956 280.90909071 253.63636435-133.63636377 253.63636348 133.63636377-49.09090957-280.90909072 204.54545479-199.09090898-280.90909073-40.90909131L525.63636406 124.72727276z"
                    fill="#919090"
                    p-id="2028"
                  ></path>
                </svg>
              </span>
              <span v-else>
                <svg t="1746757109445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1562" width="15" height="15">
                  <path
                    d="M547.978 84.41l114.854 232.476c5.536 11.07 16.606 19.373 30.444 22.141l256 37.362c31.827 4.152 45.665 44.281 22.14 67.806l-186.81 179.891c-9.687 9.687-13.838 22.141-11.07 34.595l42.896 256c5.536 31.827-29.059 56.735-58.118 41.514l-229.709-120.39c-11.07-5.535-24.908-5.535-37.362 0l-229.708 120.39c-29.06 15.221-63.654-9.687-58.119-41.514l44.281-254.616c2.768-12.454-1.383-26.292-11.07-34.595L53.967 444.195c-23.524-23.525-11.07-62.27 22.141-67.806l256-37.362c12.454-1.384 23.524-9.686 30.443-22.14L477.405 84.41c13.838-29.06 55.352-29.06 70.573 0z m0 0"
                    fill="#FFBE11"
                    p-id="1563"
                  ></path>
                </svg>
              </span>
            </div>
          </div>
          <div class="w2">
            <span class="fw">{{ item.price || '--' }}</span>
          </div>
          <!-- <div class="w3">
            <span class="fw">88</span>
          </div> -->
        </div>
      </div>
      <div class="bare" v-else>
        <span>{{ $t('lang60') }}</span>
      </div>
    </div>
    <BottomNavigation></BottomNavigation>
  </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 {
      key: '',
      sort: 0,
      volume: 0,
      type_id: 0,
      list: [],
      page: 1,
      navActive: 0,
      typeList: [],
      typeIndex: 0,
      starValue: 0,
    };
  },

  mounted() {
    this.init();
  },
  methods: {
    //返回上一页
    back() {
      this.$router.back();
    },
    init() {
      this.getPopularType();
      this.getTransferList();
    },

    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
          if (this.navActive == 0) {
            this.getTransferList(); // 触发加载更多
          } else if (this.navActive == 2) {
            this.getTransferCollectList();
          }
        }
      }
    },
    search() {
      this.page = 1;
      this.list = []; // 重置列表数据
      // this.getTransferList(); // 触发重新获取列表数据
      if (this.navActive == 0) {
        this.getTransferList();
      } else if (this.navActive == 2) {
        this.getTransferCollectList();
      }
    },
    getPopularType() {
      homeApi.getPopularType({}).then(res => {
        if (res.code == 200) {
          this.typeList = res.data;
        } else {
        }
      });
    },
    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 {
        }
      });
    },
    getTransferCollectList() {
      homeApi.getTransferCollectList({ 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 } });
    },

    handlePriceSort() {
      console.log(this.sort);

      if (this.sort == 0) {
        this.sort = 1;
      } else if (this.sort == 1) {
        this.sort = 2;
      } else if (this.sort == 2) {
        this.sort = 1;
      }
      this.search();
    },
    handleVolumeSort() {
      console.log(this.volume);

      if (this.volume == 0) {
        this.volume = 1;
      } else if (this.volume == 1) {
        this.volume = 2;
      } else if (this.volume == 2) {
        this.volume = 1;
      }
      this.search();
    },
    onClickDisabled(name, title) {
      this.$toast(this.$t('lang2'));
    },
    changeStar(item, index) {
      if (this.list[index].collect == 0) {
        // this.list[index].collect = 1;
        this.$set(this.list[index], 'collect', 1)
      } else {
        // this.list[index].collect = 0;
        this.$set(this.list[index], 'collect', 0)
      }
      homeApi.collect({ market_id: item.product_id }).then(res => {
        if (res.code == 200) {
        } else {
          this.$toast(res.msg);
          // this.list[index].collect = 0;
          this.$set(this.list[index], 'collect', 0)
        }
      });
    },
    changeType(item, index) {
      this.typeIndex = index;
      this.type_id = item.id;
      this.page = 1;
      this.list = [];
      if (this.navActive == 0) {
        this.getTransferList();
      } else if (this.navActive == 2) {
        this.getTransferCollectList();
      }
    },
    changeTab(item) {
      console.log(item);
      this.page = 1;
      this.list = [];
      if (item == 0) {
        this.getTransferList();
      } else if (item == 2) {
        this.getTransferCollectList();
      }
    },
  },
  computed: {
    ...mapState(['account']),
  },
  watch: {},
  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%);
  }
}
.bare {
  text-align: center;
  font-size: 14px;
  padding: 60px 14px;
  color: #888;
}
.van-tabs {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}
.home_page {
  padding: 46px 0 100px;
  height: 100vh;
  overflow: auto;
  background-color: #fff;

  .pd {
    padding: 14px;
    // background-color: #fff;
  }
  .pd1 {
    padding: 14px 13px 0;
    background-color: #fff;
    .input {
      width: 100%;
      // height: 35px;
      // line-height: 35px;
      border: 1px solid #29b286;
      border-radius: 20px;
      margin: 10px 0 0px;
      ::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;
    padding: 0 13px 14px;
    background-color: #fff;
    .good_icon {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }
  .sort {
    color: #9d9d9d;
    font-size: 12px;
    font-weight: 600;
    padding: 14px 0;
    .w1 {
      width: 66%;
    }

    /deep/.van-ellipsis {
      color: #9d9d9d;
      font-size: 12px !important;
    }
  }
  .w2 {
    width: 24%;
    text-align: right;
    white-space: nowrap;
    justify-content: flex-end;
  }
  .w3 {
    width: 18%;
    text-align: center;
    white-space: nowrap;
    justify-content: flex-end;
  }
  .fw {
    font-weight: 600;
    font-size: 15px;
    padding-right: 10px;
  }
  .goods_list {
    display: flex;
    align-items: center;
    color: #000;
    margin-bottom: 16px;
    &_img {
      width: 68px;
      height: 68px;
      border-radius: 10px;
    }
    .info {
      display: flex;
      align-items: center;
      width: 70%;

      .name_box {
        width: calc(100% - 90px);
        display: flex;
        flex-direction: column;
        line-height: 180%;
        font-size: 13px;
        box-sizing: border-box;
        padding: 0 6px;
        // padding: 6px 0;
        .name {
          font-weight: 600;
        }

        .time_text {
          color: #7f7f7f;
          font-weight: normal;
          font-size: 11px;
          white-space: nowrap;
          padding: 2px 0;
        }
      }
      .star {
      }
    }

    .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;
      }
    }
  }
  .btn_box {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: auto;
    // padding: 10px 0;
    background-color: #fff;
    .cc_btn {
      min-width: 100px;
      height: 38px;
      color: #29b286;
      line-height: 38px;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      padding: 0 10px;
      border: none;
      border-radius: 4px;
      margin-right: 8px;
      background-color: #f3f3f3;
      .van-button__text {
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出不换行
      }
    }
    .cc_active {
      color: #fff;
      background-color: #29b286;
    }
  }
}
.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>