jy-docs/jydocs-mobile/src/views/Home.vue

<template>
  <div class="pages--home">
    <div class="home-header" :style="{ paddingBottom: headerAd ? '60px' : '16px', marginBottom: headerAd ? '60px' : '0px' }">
      <p class="home-title">· 剑鱼文库<span style="margin: 0 14px;">|</span>上亿级文档资料库 ·</p>
      <search class="homeSeach" type="click" @click="goSearch"></search>
      <div class="Ad-box">
        <Ad :width="0" :loop="true" :code="$envs.inWX ? 'jy-wx-docmember' : 'jy-app-docmember'" :borderRadius="true"
          @noData="headerAd = false"></Ad>
      </div>
    </div>
    <!-- <div class="new-group base-group">
      <div class="title-group flex-r-c center left">
        <span></span>
        <h5 class="module-title">最新文档</h5>
      </div>
      <div class="list-group flex-c-c">
        <van-skeleton class="van-loading-skeleton line-style" :row="5" :loading="showLoading.new">
          <div class="list-item flex-r-c" v-for="item in pageData.new" :key="item.id" @click="goContent(item)">
          <div class="flex flex-r-c center left">
            <van-icon :name="'diy-' + item.type" />
            <div class="flex">
              <div class="van-ellipsis d-title">{{item.title}}</div>
            </div>
          </div>
          <div class="right-info flex-r-c center right">
            <van-icon name="diy-iconJianYu" />
            <span class="price-text">{{item.money}}</span>
          </div>
        </div>
        </van-skeleton>
      </div>
    </div> -->
    <!-- <div class="hot-group base-group">
      <div class="title-group flex-r-c center left">
        <span></span>
        <h5 class="module-title">热门下载</h5>
      </div>
      <div class="list-group flex-c-c">
        <van-skeleton class="van-loading-skeleton line-style" :row="5" :loading="showLoading.hot">
          <div class="list-item flex-r-c" v-for="item in pageData.hot" :key="item.id" @click="goContent(item)">
          <div class="flex flex-r-c center left">
            <van-icon :name="'diy-' + item.type" />
            <div class="flex">
              <div class="van-ellipsis d-title">{{item.title}}</div>
            </div>
          </div>
          <div class="right-info flex-r-c center right">
            <van-icon name="diy-iconJianYu" />
            <span class="price-text">{{item.money}}</span>
          </div>
        </div>
        </van-skeleton>
      </div>
    </div> -->
    <div class="selectedLibrary" v-show="LibraryShow">
      <h1>精选文库</h1>
      <div class="ad-box">
        <Ad :code="$envs.inWX ? 'jy-wx-doc-recommend' : 'jy-app-doc-recommend'" :borderRadius="true"
          @noData="LibraryShow = false"></Ad>
      </div>
    </div>
    <div class="group-title">
      热门推荐
    </div>
    <van-sticky @scroll="onscroll">
    </van-sticky>
    <div class="tabs fixedTab" v-if="fixedTab" :style="{ top: Offset + 'px' }">
      <van-tabs title-active-color="#2ABED1" background="#fff" title-inactive-color="#5F5E64" :line-width="24"
        :line-height="2" color="#2ABED1" v-model="tabsActive" @change="tabChange">
        <van-tab v-for="(item, index) in tabslist" :name="item.type" :title="item.label" :key="index" />
      </van-tabs>
      <div class="btn-right">
        <van-icon :name="'diy-zhedie'" @click="openScreen" />
      </div>
      <div class="left"></div>
    </div>
    <div class="tabs" v-else>
      <van-tabs title-active-color="#2ABED1" background="#F5F6F7" title-inactive-color="#5F5E64" :line-width="24"
        :line-height="2" color="#2ABED1" v-model="tabsActive" @change="tabChange">
        <van-tab v-for="(item, index) in tabslist" :name="item.type" :title="item.label" :key="index" />
      </van-tabs>
      <div class="btn-right">
        <van-icon :name="'diy-zhedie'" @click="openScreen" />
      </div>
      <div class="left"></div>
    </div>
    <div class="keep-group base-group">
      <!-- <div class="title-group flex-r-c center left">
        <span></span>
        <h5 class="module-title">热门推荐</h5>
      </div> -->
      <van-list v-model="hotListState.loading" :finished="hotListState.finished" :offset="hotListState.offset"
        @load="onLoad" class="more-list" ref="vanList">
        <div>
          <div class="list-group card-group flex-c-c" v-for="(item, index) in hotListState.list" :key="index"
            @click="goContent(item)">
            <van-skeleton avatar avatar-shape="square" class="van-loading-skeleton card-style" :row="4"
              :row-width="rowWidth" :loading="showLoading">
              <div class="card-item flex-r-c">
                <div class="mini-img-group">
                  <img :src="item.previewImgId || mr_image" alt="">
                  <van-icon :name="docTypeIcon(item.docFileType)" />
                  <span class="type-tag"
                        :class="item.productType === 2 ? 'boutique' : 'free'">
                    {{ item.productType === 2 ? '付费精品' : '会员免费' }}
                  </span>
                </div>
                <div class="flex-c-c">
                  <div class="flex">
                    <div class="title-text van-multi-ellipsis--l2">{{ item.docName }}</div>
                  </div>
                  <div class="flex-c-c info-text">
                    <span v-if="item.docTags">{{ item.docTags }}</span>
                    <div class="info-text-group flex-r-c center left">
                      <span v-if="item.viewTimes">{{ item.viewTimes }}次浏览</span>
                      <span v-if="item.docPageSize">共{{ item.docPageSize }}页</span>
                      <span v-if="item.docFileSize">{{ item.docFileSize | sizeFormatter }}</span>
                    </div>
                  </div>
                  <!-- <div class="money-group flex-r-c center left">
              <van-icon class="s20" name="diy-iconJianYu" />
              <span class="red-text">{{item.money}}</span>
            </div> -->
                </div>
              </div>
            </van-skeleton>
          </div>
          <Empty v-if="hotListState.list.length === 0 && !hotListState.loading">暂无数据</Empty>
        </div>
      </van-list>
    </div>
    <screenPopup ref="screenPopup" v-model="tabsActive" :list="tabslist" @change="popChange"></screenPopup>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { docTypeConvert } from '@/utils/globalFunctions'
import Search from '@/components/Search.vue'
import Ad from '@/components/Ad.vue'
import screenPopup from '@/components/screenPopup.vue'
import Empty from '@/components/common/Empty.vue'
import { Icon, Skeleton, Tabs, Tab, Sticky, List } from 'vant'
import { mapActions } from 'vuex'
@Component({
  name: 'home',
  components: {
    [Icon.name]: Icon,
    [Skeleton.name]: Skeleton,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Sticky.name]: Sticky,
    [List.name]: List,
    Search,
    Ad,
    Empty,
    screenPopup
  },
  computed: {
    // ...mapState('main', {
    //   pageData: (state: any) => state.homePageData
    // })
  },
  methods: {
    ...mapActions({
      doSearchRquesst: 'main/doGetRecommend',
      getIndexTags: 'main/getIndexTags'
    })
    // ...mapActions({
    //   ajaxData: 'main/getHome'
    // })
  }
})

export default class extends Vue {
  doSearchRquesst: any
  getIndexTags: any
  $envs: any
  rowWidth = ['100%', '20%', '40%', '15%']
  fixedTab = false
  tabslist = []
  tabsActive = ''
  LibraryShow = true
  headerAd = true
  hotListState = {
    loaded: false,
    loading: false,
    finished: false,
    pageNum: 1,
    pageSize: 20,
    offset: 80,
    list: [],
    total: 0
  }

  mr_image = require('@/assets/image/mr.png')

  created () {
    // this.ajaxData()
  }

  mounted () {
    const tempH = document.querySelector('.j-header') as HTMLDivElement
    if (tempH) {
      tempH.style.zIndex = '9999'
    }
  }

  // get showLoading () {
  //   const s = this.pageData
  //   return {
  //     new: !s?.new,
  //     hot: !s?.hot,
  //     keep: !s?.keep
  //   }
  // }
  get showLoading () { // 骨架占位显示
    return this.hotListState.list.length === 0
  }

  get Offset () {
    const tempN = document.querySelector('.j-header.jy-app-header') as HTMLDivElement
    if (tempN) {
      return tempN.offsetHeight - 1
    } else {
      return 0
    }
  }

  docTypeIcon (type: string) {
    return `diy-${docTypeConvert(type)}`
  }

  async onLoad () {
    if (this.tabslist.length === 0) {
      const { data } = await this.getIndexTags()
      if (Array.isArray(data)) {
        const list: any = data.map(item => {
          return {
            type: item,
            label: item
          }
        })
        this.tabslist = list
        if (data.length) {
          const i: any = this.tabslist[0]
          this.tabsActive = i.type
        }
      }
    }
    await this.getList()
  }

  // onTabClick (name: string) {
  //   this.tabsActive = name
  //   this.hotListState.pageNum = 1
  //   this.hotListState.list = []
  //   this.hotListState.loaded = false
  //   this.hotListState.finished = false
  //   this.onLoad()
  // }
  onscroll (obj: any) {
    if (obj.isFixed) {
      this.fixedTab = true
    } else {
      this.fixedTab = false
    }
  }

  async getList () {
    // if (!this.hotListState.value) return
    // if (this.hotListState.pageNum === 1) {
    //   this.$toast.loading({
    //     forbidClick: true,
    //     duration: 0
    //   })
    // }
    const query = {
      tag: this.tabsActive === '全部' ? '' : this.tabsActive,
      sort: 'vSort',
      num: this.hotListState.pageNum,
      size: this.hotListState.pageSize
    }
    console.log('搜索参数：', query)
    this.hotListState.loading = true
    const { data } = await this.doSearchRquesst(query)
    this.hotListState.loading = false
    this.hotListState.loaded = true
    // this.$toast.clear()
    if (data && Array.isArray(data.list)) {
      this.hotListState.pageNum += 1
      // this.hotListState.total = data.total
      this.hotListState.total = 20 // 目前不支持分页，所以这里写死20条
      this.hotListState.list = this.hotListState.list.concat(data.list)
    } else {
      this.hotListState.finished = true
    }

    // 数据请求完成(根据页码计算，当前页是否是最后一页)
    // 请求完成后，页码就变为了下一页的页面，所以这里要-1
    const isLastPage = (this.hotListState.pageNum - 1) * this.hotListState.pageSize >= this.hotListState.total
    if (isLastPage) {
      this.hotListState.finished = true
    }
  }

  goSearch () {
    // this.$router.push({
    //   name: 'search'
    // })
    // P572将搜索页移至剑鱼统一搜索入口
    location.href = '/jy_mobile/search/middle/docs'
  }

  goContent (item: any) {
    this.$router.push({
      name: 'details',
      params: {
        id: item.docId
      }
    })
  }

  async tabChange (item: any) {
    // 分类切换
    console.log(item)
    this.hotListState.list = []
    this.hotListState.pageNum = 1
    this.hotListState.loaded = false
    this.hotListState.finished = false
    await this.getList()
  }

  popChange (val: any) {
    this.$nextTick(() => {
      this.tabChange(val)
    })
  }

  openScreen () {
    (this.$refs.screenPopup as any).show = true
  }
}
</script>
<style scoped lang="scss">
.pages--home {
  position: relative;
  background: #F5F6F7;
  padding-bottom: 40px;
  box-sizing: border-box;

  ::v-deep {
    .empty-content-position {
      margin-top: 0;
    }
  }

  .homeSeach {
    ::v-deep {
      .van-search__content {
        box-shadow: 0px 4px 4px 0px #0000000D;
      }
    }
  }

  .home-header {
    background: linear-gradient(180deg, #00AEE6 0%, #05B6CD 38%, #87DFEA 100%);
    width: 100%;
    // height: 152px;
    // min-height: 152px;
    padding-bottom: 60px;
    display: block;
    box-sizing: border-box;
    padding-top: 16px;
    position: relative;
    margin-bottom: 60px;

    .home-title {
      //styleName: 常规/16;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: center;
      color: #FFFFFF;
      margin-bottom: 5px;
    }

    .Ad-box {
      width: 359px;
      height: 88px;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .group-title {
    padding: 16px 0 6px 12px;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    color: #171826;
  }

  .selectedLibrary {
    h1 {
      font-size: 18px;
      line-height: 26px;
      color: #171826;
      font-weight: 400;
      padding-left: 12px;
      margin-bottom: 6px;
    }

    .ad-box {
      padding-left: 8px;
    }
  }

  .tabs {
    margin-bottom: 8px;
    padding-right: 30px;
    box-sizing: border-box;
    position: relative;

    ::v-deep {
      .van-tabs--line .van-tabs__wrap {
        height: 30px;
      }

      .van-tabs__nav--complete {
        padding-left: 6px;
      }

      .van-tabs__wrap--scrollable .van-tab {
        padding: 0 6px;
      }
    }

    .left {
      position: absolute;
      top: 0;
      left: -3px;
      width: 12px;
      height: 30px;
      background-color: #F5F6F7;
    }

    .btn-right {
      position: absolute;
      top: 0;
      right: -3px;
      width: 55px;
      height: 30px;
      background: linear-gradient(90deg, rgba(245, 246, 247, 0) 0%, #F5F6F7 50%, #F5F6F7);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      box-sizing: border-box;
      padding-right: 10px;
      z-index: 10;
    }
  }

  .fixedTab.tabs {
    width: 100%;
    position: fixed;
    padding-right: 30px;
    box-sizing: border-box;
    left: 0;
    // top: 40px;
    z-index: 99;
    // padding: 4px 0;
    background-color: #fff;
    border-bottom: 1px solid #0000000D;
    box-shadow: 0px 2px 8px 0px #3693B30D;

    ::v-deep {
      .van-tabs--line .van-tabs__wrap {
        height: 38px;
      }

      .van-tabs__nav--complete {
        padding-left: 6px;
      }

      .van-tabs__wrap--scrollable .van-tab {
        padding: 0 6px;
      }
    }

    .left {
      position: absolute;
      top: 0;
      left: -3px;
      width: 12px;
      height: 38px;
      background-color: #fff;
    }

    .btn-right {
      position: absolute;
      top: 0;
      right: -3px;
      width: 55px;
      height: 38px;
      background: linear-gradient(90deg, rgba(245, 246, 247, 0) 0%, #F5F6F7 50%);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      box-sizing: border-box;
      padding-right: 10px;
      z-index: 10;
    }
  }

  .module-title {
    font-size: 18px;
    font-weight: normal;
    line-height: 26px;
    color: #171826;
  }

  .d-title {
    font-size: 14px;
    line-height: 20px;
    color: #171826;
  }

  .price-text {
    font-size: 13px;
    line-height: 28px;
    color: #5F5E64;
  }

  ::v-deep .van-loading-skeleton {
    &.line-style {
      .van-skeleton__row {
        width: 100% !important;
        height: 28px;
      }
    }

    &.card-style {
      .van-skeleton__avatar {
        width: 100px !important;
        height: 124px !important;
      }
    }
  }

  @include diy-icon('iconJianYu', 16, 16);

  .van-icon-diy-iconJianYu.s20 {
    width: 20px;
    height: 20px;
  }

  @include diy-icon('pdf', 18, 18);
  @include diy-icon('word', 18, 18);
  @include diy-icon('excel', 18, 18);
  @include diy-icon('ppt', 18, 18);
  @include diy-icon('txt', 18, 18);
  @include diy-icon('zhedie', 20, 20);

  .base-group {
    // padding: 4px 19px 4px 16px;
    box-sizing: border-box;

    .list-group {
      border-radius: 12px;
      background: #FFFFFF;
      box-sizing: border-box;
      padding: 8px 0;
      margin: 0 8px 8px 8px;

      &.card-group {
        padding-left: 12px;
      }

      .list-item {
        padding: 6px 12px;
        box-sizing: border-box;

        i {
          flex-shrink: 0;
          margin-right: 4px;
        }

        .flex {
          min-width: 0;
        }

        .right-info {
          margin-left: 4px;
          flex-shrink: 0;
        }
      }

      .card-item {
        justify-content: flex-start;
        // padding: 8px 16px 12px 0;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);

        &:nth-last-child(1) {
          border-bottom-color: transparent;
          // padding-bottom: 8px;
        }

        .money-group {
          margin-top: 8px;
        }

        .mini-img-group {
          flex-shrink: 0;
          position: relative;
          border-radius: 4px;
          border: 0.5px solid #0000001A;
          width: 75px;
          height: 93px;
          margin-right: 12px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }

          .type-tag {
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 4px 0 4px 0;
            font-size: 10px;
            height: 18px;
            display: flex;
            align-items: center;
            padding: 0 5px;
            &.free {
              background: linear-gradient(98deg, #FFA674 0%, #F01212 100%);
              color: #fff;
            }
            &.boutique{
              background: linear-gradient(270deg, #F1D090 0%, #FAE7CA 100%);
              color: #C26F33;
            }
          }

          i {
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }

        .info-text-group {
          span {
            display: inline-block;

            &:last-child {
              &::after {
                content: unset;
              }
            }

            &::after {
              content: "|";
              padding: 0 8px;
            }
          }
        }

        .info-text {
          color: #9B9CA3;
          font-family: PingFang SC;
          font-size: 12px;
          line-height: 22px;
          letter-spacing: 0px;
          text-align: left;
        }

        .red-text {
          color: #FB483D;
          font-family: PingFang SC;
          font-size: 14px;
          line-height: 20px;
          letter-spacing: 0px;
          text-align: left;
        }

        .title-text {
          color: #171826;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 14px;
          line-height: 22px;
          letter-spacing: 0px;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          padding-right: 8px;
          box-sizing: border-box;
        }
      }
    }

    .title-group {
      padding: 16px 0 6px 12px;
      margin-bottom: 4px;
      box-sizing: border-box;
      color: #171826;
      font-size: 18px;
      line-height: 26px;
      letter-spacing: 0px;
      text-align: left;

      h5 {
        color: #171826;
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 0px;
      }

      span {
        display: inline-block;
        width: 3px;
        height: 16px;
        border-radius: 11px;
        background: #2ABED1;
        margin-right: 8px;
      }
    }
  }
}
</style>