huangguo_dhz/src/views/mobile/components/TopicDetails.vue

<template>
  <div class="topicDetails">
    <div class="optBox">
      <div class="subTitle">{{ state.topicName }}</div>
      <van-dropdown-menu ref="menuRef" class="dropdownBox" :overlay="false">
        <van-dropdown-item v-model="state.moduleSort" :options="state.options" @change="changeOpt" />
      </van-dropdown-menu>
    </div>
    <div class="videoList">
      <div class="videoItem" v-for="item in state.list" :key="item.id">
        <AdvBox :advInfo="item" v-if="item.isAdv" />
        <MobileVideoBox :videoInfo="item" v-else />
      </div>
    </div>
    <MobilePagination
      class="pagination"
      :pageNumber="state.pageNumber"
      :pageSize="state.pageSize"
      :total="state.total"
      @changePage="changePage"
      v-if="state.total > state.pageSize"
    />
    <div class="topicBox" v-for="i in state.topicList" :key="i.id">
      <div class="topicTitle">{{ i.subModuleName }}</div>
      <div class="tagList">
        <div class="tagItem" v-for="item in i.allSection" :key="item.id" @click="jumpTopice(item)">
          {{ item.name }}
          <span>({{ item.videoCount }})</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from 'vue';
import { useGlobalStore } from '@/stores/global';
import { useRoute, useRouter } from 'vue-router';
import { getAdItem } from '@/utils/getConfig';
import { AdType } from '@/enums/app';
import insertAdv from '@/utils/insertAdv'
import HomeApi from '@/service/home';
const route = useRoute();
const router = useRouter();
const globalStore = useGlobalStore();
const state = reactive({
  options: [
    { text: '默认', value: 1 },
    { text: '最新上架', value: 2 },
    { text: '最多观看', value: 3 },
    { text: '最多收藏', value: 4 },
  ],
  pageNumber: <any>1,
  pageSize: 7,
  moduleSort: route.query.sort || 1,
  list: <any>[],
  advList: <any>[],
  topicList: <any>[],
  total: 0,
  topicName: route.query.name,
});

const queryList = async () => {
  let req = {
    id: route.query.tid,
    data: {
      pageNumber: state.pageNumber,
      pageSize: state.pageSize,
      moduleSort: state.moduleSort,
    },
  };
  let res: any = await HomeApi.getModuleList(req);
  // const updatedArray = insertAdv({
  //     insertNum: 6,
  //     pageSize,
  //     pageNumber: pageNumber,
  //     originArray: res.videos,
  //     advNum: 5
  //   })
  let videoList = res.allVideoInfo || [];
  let params = {
    insertNum: 6,
    pageSize: state.pageSize,
    pageNumber: state.pageNumber,
    advNum: 6,
    originArray: videoList,
  };
  state.list = insertAdv(params);
  // console.log(newarr);
  // videoList.forEach((i,j) => {
  //   let index = state.pageSize * (state.pageNumber - 1) + j;
  // })
  // state.list = res.allVideoInfo || [];
  state.total = res.total || 0;
  // console.log(state.list);
  // allSection.forEach((item: any) => {
  //   // if (item.showType == 2) {
  //   //   state.bannerList = state.bannerList.concat(item.allVideoInfo || []);
  //   // } else {
  //   //   state.topicsList = state.topicsList.concat(item || []);
  //   // }
  //   // // console.log(state.topicsList, '-=-==-');
  // });
};
const changePage = (pageNumber: any) => {
  let queryData = {
    tid: route.query.tid,
    stype: route.query.stype,
    pageNumber: pageNumber,
    sort: route.query.sort,
    name: route.query.name,
  };
  router
    .push({
      path: '/home',
      query: queryData,
    })
    .then(() => {
      location.reload();
    });
};

const changeOpt = (val: any) => {
  let queryData = {
    tid: route.query.tid,
    stype: route.query.stype,
    name: route.query.name,
    pageNumber: 1,
    sort: val,
  };
  router.replace({
    path: '/home',
    query: queryData,
  });
  // .then(() => {
  //   // location.reload();
  // });

  queryList();
};

const jumpTopice = (item: any) => {
  let queryData = {
    tid: item.id,
    name: item.name,
  };
  router.push({
    path: '/sectionDetails',
    query: queryData,
  });
  // .then(() => {
  //   location.reload();
  // });
};
const getTagList = async () => {
  const res: any = await HomeApi.getTabs({ isSection: true });
  state.topicList = res.homePage || [];
};
const init = () => {
  state.advList = getAdItem(AdType.HOMETOPBANNER);
  state.pageNumber = Number(route.query.pageNumber) || 1;
  state.moduleSort = Number(route.query.sort) || 1;
  queryList();
  getTagList();
};
init();
</script>

<style scoped lang="scss">
.topicDetails {
  padding: 18px 16px 0;
  box-sizing: border-box;
  // padding-top: 27px;
  // box-sizing: border-box;
  .advBanner {
    width: 100%;
    height: 70px;
  }

  .optBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }

  .subTitle {
    color: #fff;
    font-family: 'PingFang SC';
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 88.889% */
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }
  .videoNum {
    color: #fff;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    margin-bottom: 16px;
    span {
      color: #a0a6b4;
      font-size: 12px;
    }
  }
  .videoList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 28px;
    grid-column-gap: 12px;
    margin-bottom: 28px;
  }
  .pagination {
    margin-bottom: 24px;
  }
  .topicBox {
    margin-bottom: 24px;
    .topicTitle {
      color: #fff;
      font-family: 'PingFang SC';
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: 28px; /* 155.556% */
      margin-bottom: 12.25px;
    }
    .tagList {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .tagItem {
        padding: 4px 12px;
        box-sizing: border-box;
        color: #fff;
        font-family: 'PingFang SC';
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
        border-radius: 8px;
        border: 1px solid #212121;
        background: #151515;
        margin: 0 8px 8px 0;
        span {
          color: #a0a6b4;
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: 16px;
        }
      }
    }
  }
  .topicBox:last-child {
    margin-bottom: 60px;
  }
  .dropdownBox {
    width: 76px;
    height: 33px;
    border-radius: 6.986px;
    border: 0.873px solid #212121;
    background: #151515;
    margin-bottom: 13.6px;
    // background: skyblue;
    :deep(.van-dropdown-menu__bar) {
      background: rgba(0, 0, 0, 0);
      height: 100%;
    }
    :deep(.van-dropdown-menu__title) {
      padding: 0;
      padding-right: 6px;
    }
    :deep(.van-dropdown-menu__title--active:after) {
      border-color: transparent transparent #a0a6b4 #a0a6b4;
    }
    :deep(.van-ellipsis) {
      color: #a0a6b4;
      font-size: 12px;
    }
    :deep(.van-dropdown-item) {
      width: 76px;
      right: 16px;
      left: auto;
      // right: 16px !important;
      // top: 69px !important;

      .van-dropdown-item__content {
        border-radius: 5.548px;
        border: 0.693px solid #212121;
        background: #151515 !important;
        padding: 7px 0;

        box-sizing: border-box;
        .van-dropdown-item__option {
          background: #151515 !important;
          padding: 0 13.87px;
          // height: 20px;
        }
        .van-cell__title {
          color: #a0a6b4;
          font-size: 9.709px;
        }
      }

      .van-cell:after {
        display: none !important;
      }
      .van-cell__value {
        display: none;
      }
    }
  }
}
</style>