hjsq_h5/src/views/community/publish/topicMore/index.vue

<template>
  <div class="topicMore">
    <!-- <Header title="选择标签" :rightTitle="state.selectTagValue ? '1/1' : '0/1'" /> -->
    <Header title="选择标签" />
    <div class="content overflow-y-auto">
      <template v-if="!state.loading">
        <PullRefresh :params="moreParams" @onLoad="onLoad" @onRefresh="onRefresh">
          <!-- :class="['cell flex-center-between',item.select ? 'active' : '']" -->
          <div class="cell flex-center-between" v-for="item in state.list" :key="item" @click="selectTag(item)">
            <div class="info">
              <lazyImg :src="item.coverImg" class="avatar" />
              <div class="mess">
                <div class="name ellipsis">#{{ item.name }}</div>
                <div class="count">
                  <span>{{ watchCount(item.vidCount) }}个帖子</span>
                  <span>{{ watchCount(item.playCount) }}浏览</span>
                  <span>{{ watchCount(item.followCount) }}关注</span>
                </div>
              </div>
            </div>
            <div :class="['btn flex-center-center', item.select ? 'active' : '']">
              {{ item.select ? '已选' : '选择' }}
            </div>
          </div>
        </PullRefresh>
      </template>
      <Loading v-else />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, reactive } from 'vue';
import { useRouter } from 'vue-router';
import VideoApi from '@/service/video';
import { useCommunityStore } from '@/stores/community';
import { watchCount } from '@/utils/index';

const router = useRouter();
const communityStore = useCommunityStore();
const state = reactive({
  pageNumber: 1,
  pageSize: 10,
  list: <any>[],
  selectTagValue: communityStore.tags,
  loading: true,
});

const moreParams = reactive({
  loading: true,
  refreshing: false,
  finished: false,
  isNoData: false,
  error: false,
  isHigehtMax: true,
});

const selectTag = (tag: any) => {
  communityStore.setTopics(null);
  nextTick(() => {
    communityStore.setTopics(tag);
    state.selectTagValue = communityStore.tags;
    showSelected();
    router.go(-1);
  });
};

const showSelected = () => {
  if (state.selectTagValue) {
    state.list = state.list.map((itemTag: any) => {
      if (itemTag.id == state.selectTagValue?.['id']) {
        itemTag.select = true;
      } else {
        itemTag.select = false;
      }
      return itemTag;
    });
  }
};

const getList = async (type: any) => {
  // let req = {
  //   keyWords:[""],
  //   realm :"tag",
  //   pageNumber: state.pageNumber,
  //   pageSize: state.pageSize,
  // };
  try {
    let res: any = await VideoApi.searchPublishPost();
    state.loading = false;
    moreParams.loading = false;
    moreParams.refreshing = false;
    let list = res.list || [];
    if (type === 'refresh') {
      state.list = list;
    } else {
      state.list = state.list.concat(list);
    }
    if (state.pageNumber == 1 && state.list.length == 0) {
      moreParams.isNoData = true;
    }
    if (!res.hasNext) {
      moreParams.finished = true;
    }
    showSelected();
  } catch (e) {
    moreParams.loading = false;
    moreParams.error = true;
  }
};
getList(null);

const onLoad = () => {
  moreParams.loading = true;
  state.pageNumber++;
  getList(null);
};
const onRefresh = () => {
  state.pageNumber = 1;
  moreParams.refreshing = true;
  moreParams.finished = false;
  getList('refresh');
};
</script>

<style lang="scss" scoped>
.topicMore {
  width: 100%;
  height: 100%;
  .content {
    height: calc(100vh - 44px);

    .cell {
      height: 66px;
      width: 100%;
      padding: 0 12px;
      box-sizing: border-box;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.05);
      margin: 0 0 12px 0;
      .info {
        flex: 1;
        display: flex;
        align-items: center;
        .avatar {
          width: 38px;
          height: 38px;
          border-radius: 5px;
          overflow: hidden;
          margin: 0 12px 0 0;
        }
        .mess {
          flex: 1;
          height: 38px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 16px;
          font-weight: 550;
        }
        .count {
          display: flex;
          align-items: center;
          font-size: 10px;
          color: #999999;
          margin: 5px 0 0 0;
          font-weight: normal;
          span {
            padding-right: 10px;
          }
        }
      }
      .btn {
        width: 52px;
        height: 26px;
        border-radius: 30px;
        font-size: 12px;
        color: #dcdcdc;
        background: rgba(255, 255, 255, 0.2);
      }
      .active {
        background: #ffc000;
        color: #fff;
      }
    }
  }
}
</style>