RWACha-DAPP/src/views/bulletin/index.vue

<template>
  <div class="invite" @scroll="handleScroll">
    <div class="head">
      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
      <!-- <span>{{ $t('lang219') }}</span> -->
      <van-tabs class="tabs" v-model="navActive" color="#29B286" title-active-color="#29B286" title-inactive-color="#080808" @change="changeTab">
        <van-tab v-for="(item, index) in type" :key="index" :title="item.value"></van-tab>
      </van-tabs>
    </div>
    <van-field v-model="key" :placeholder="$t('lang454')" class="input" left-icon="search" @click-left-icon="search" @keyup.enter="search" />
    <van-tabs class="child_tabs" v-model="childActive" color="#29B286" title-active-color="#29B286" title-inactive-color="#080808" @change="changeChildTab" v-if="childType.length > 0">
      <!-- <van-tab key="0" title="全部"></van-tab> -->
      <van-tab v-for="(item, index) in childType" :name="item.id" :key="index" :title="item.name"></van-tab>
    </van-tabs>
    <div v-if="list.length > 0" class="notice_box">
      <div class="notice" v-for="(item, index) in list" :key="index" @click="navigatorTo('bulletinDetail', item.id)">
        <!-- <img class="notice_img" :src="item.img_url" alt="" v-if="item.img_url" /> -->
        <span class="title">{{ item.title }}</span>
        <div class="right">
          <div class="tag_box">
            <span class="tag" v-if="childActive == 0" :style="{ color: item.sub_type_name[0]?.color, backgroundColor: hexToRgbObject(item.sub_type_name[0]?.color) }">{{
              item.sub_type_name[0]?.title
            }}</span>
            <span v-else>
              <span v-for="(it, idx) in item.sub_type_name" :key="idx">
                <span class="tag" v-if="it.id == childActive" :style="{ color: it.color, backgroundColor: hexToRgbObject(it.color) }">{{ it.title }}</span>
              </span>
            </span>
          </div>
          <span class="time_text">
            <svg t="1748345661681" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8571" width="10" height="10" v-if="item.is_top == 1">
              <path
                d="M938.8032 640.256l-378.9312-503.2448c-17.408-25.8048-55.2448-26.4192-73.8816-1.1776l-398.7456 503.2448c-21.6064 30.0032-0.6144 72.0896 36.608 72.0896h187.392v233.6256c0 35.4304 28.8256 64.8704 64.8704 64.8704h270.848c35.4304 0 64.8704-28.8256 64.8704-64.8704V711.168h189.184c36.608-0.0512 58.2144-40.9088 37.7856-70.912z m0 0"
                p-id="8572"
                fill="#29b286"
              ></path>
              <path
                d="M126.8736 115.4048h768.6656c28.2112 0 51.0464-22.8352 51.0464-51.0464 0-28.2112-22.8352-51.0464-51.0464-51.0464H126.8736c-28.2112 0-51.0464 22.8352-51.0464 51.0464 0.0512 28.2112 22.8352 51.0464 51.0464 51.0464z m0 0"
                p-id="8573"
                fill="#29b286"
              ></path>
            </svg>
            <span class="new" v-if="isToday(new Date(item.createtime * 1000))">New</span>
            {{ dateFormatFn(item.createtime) }}
          </span>
        </div>
      </div>
    </div>
    <div class="bare" v-else>
      <span>{{ $t('lang60') }}</span>
    </div>
  </div>
</template>
  
<script>
import { homeApi } from '@/api/index';
import { dateFormat } from '@/utils/formatTool.js';
export default {
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      finished: false,
      total: 0,
      finishText: this.$t('lang200'),
      key: '',
      type: [],
      navActive: 0,
      childActive: 0,
      childType: [],
    };
  },
  mounted() {
    this.gettype();
    // window.addEventListener('scroll', this.scrollBottom);
  },
  destroyed() {
    // window.removeEventListener('scroll', this.scrollBottom);
  },
  computed: {},
  methods: {
    isToday(date) {
      const today = new Date();
      return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
    },
    hexToRgbObject(hex) {
      console.log(hex);
      if (hex) {
        hex = hex.replace('#', '');
        return `rgba(${parseInt(hex.slice(0, 2), 16)},
        ${parseInt(hex.slice(2, 4), 16)},
        ${parseInt(hex.slice(4, 6), 16)},0.2)`;
      }
    },
    //返回上一页
    back() {
      this.$router.back();
    },
    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', this.page);
        if (this.page != -1) {
          this.page++; // 页数加 1
          this.getAnnouncement(); // 触发加载更多
        }
      }
    },
    gettype() {
      homeApi.gettype().then(res => {
        if (res.code == 200) {
          this.type = res.data;
          // console.log(this.type);
          // this.navActive = this.type[0].key;
          this.childType = Object.entries(this.type[0].sun_type_name).map(([id, name]) => ({ id, name }));
          if (this.childType.length > 0) {
            this.childType.unshift({
              id: 0,
              name: this.$t('lang201'),
            });
          }
          this.getAnnouncement();
        }
      });
    },
    search() {
      this.page = 1;
      this.list = [];
      this.getAnnouncement();
    },
    changeTab(e, i, d) {
      console.log(e, i, d);
      this.childType = Object.entries(this.type[this.navActive].sun_type_name).map(([id, name]) => ({ id, name }));
      if (this.childType.length > 0) {
        this.childType.unshift({
          id: 0,
          name: this.$t('lang201'),
        });
      }
      this.childActive = 0;

      this.search();
    },
    changeChildTab() {
      this.search();
    },
    navigatorTo(name, id) {
      this.$router.push({ name, query: { id: id } });
    },
    dateFormatFn(date) {
      return dateFormat(new Date(date * 1000), 'yyyy-MM-dd hh:mm:ss');
    },
    getAnnouncement() {
      let params = {
        page: this.page,
        query: {},
        type_id: this.type[this.navActive].key,
        sub_type_id: this.childActive,
        title: this.key,
      };
      homeApi.getAnnouncement(params).then(res => {
        if (res.code == 200) {
          if (this.list.length >= res.data.total) {
            this.page = -1; // 重置为 -1，表示没有更多数据
          } else {
            this.list = [...this.list, ...res.data.rows];
            if (this.list.length >= res.data.total) {
              this.page = -1; // 重置为 -1，表示没有更多数据
            }
          }
        } else {
        }
      });
    },
    // onLoad() {
    //   this.page += 1;
    //   this.getAnnouncement();
    // },
  },
};
</script>
  
<style lang="less" scoped>
.invite {
  padding: 56px 0;
  height: 100vh;
  overflow: auto;
  background: #fff;

  .head {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(#000, 0.8);
    letter-spacing: 1.5px;
    font-weight: 550;
    font-weight: 18px;
    padding: 4px 0;
    z-index: 99999;
    background: #fff;
    .arrow_img {
      position: absolute;
      left: 20px;
      width: 10px;
      height: 16px;
      z-index: 99;
    }
    .tabs {
      // width: 100vw;
      // padding: 0 50px 0 0;
      width: calc(100% - 90px);
      // padding: 0 45px;
      overflow: auto;
      display: flex;
      justify-content: center;
    }
    /deep/.van-tab {
      width: fit-content !important;
      flex: none;
      padding: 0 15px;
    }
    /deep/.van-tabs__nav {
      // justify-content: center !important;
    }
    /deep/.van-tab__text {
      // width: 100px !important;
      font-size: 16px;
      text-align: center !important;
    }

    /deep/.van-tab--active {
      font-weight: 550;
    }
    /deep/.van-tabs__wrap {
      overflow-x: auto;
    }
    // .van-tabs__wrap--scrollable .van-tab {
    //   padding: 0;
    // }
  }
  /deep/.van-tabs__line {
    width: 20px !important;
    bottom: 20px !important;
  }
  .input {
    // height: 35px;
    // line-height: 35px;
    // border: 1px solid #29b286;
    width: calc(100% - 32px);
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: #f5f5f5;
    ::v-deep .van-field__control {
      padding: 2px 0;
    }
    ::v-deep .van-icon-search {
      font-size: 18px;
      color: #a1a1a1;
      font-weight: bold;
      margin: 3px 8px;
    }
  }
  /deep/.van-tabs__nav--line.van-tabs__nav--complete {
    padding-left: 0 !important;
  }
  .child_tabs {
    border-bottom: 0.5px solid rgba(190, 190, 190, 0.3) !important;
    // ::v-deep.van-tab {
    //   line-height: 0 !important;
    // }
  }
  .notice_box {
    padding: 16px;
  }
  .notice {
    position: relative;
    display: flex;
    flex-direction: column;
    color: #000;
    font-size: 14px;
    letter-spacing: 0.8px;
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 0.5px solid rgba(190, 190, 190, 0.3);
    // box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.59);
    // background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 100%, rgba(255, 255, 255, 0.3) 100%);
    .title {
      font-weight: 600;
      min-height: 22px;
    }
    .right {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 10px;

      .tag_box {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        // width: 56%;
      }

      .tag {
        font-size: 11px;
        // color: #3b98e4;
        padding: 1px 3px;
        border-radius: 4px;
        margin-left: 3px;
        margin-bottom: 3px;
        // background-color: rgba(#3b98e4, 0.2);
      }

      .time_text {
        color: #b4b4b4;
        font-weight: normal;
        font-size: 11px;
        margin-bottom: 3px;
        white-space: nowrap;
      }
      .new {
        color: #ec413e;
        letter-spacing: 0;
        font-weight: 600;
        font-size: 10px;
        padding: 0 4px;
      }
    }
    //svg {
    //  position: absolute;
    //  left: -13px;
    //  top: 3px;
    //}
  }

  .bare {
    text-align: center;
    font-size: 14px;
    padding: 60px 14px;
    color: #888;
  }
}
</style>