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

<template>
  <div class="pages--home">
      <div class="top-search-group flex-c-c center">
        <h5>剑鱼文库，最实用的招投标资料库</h5>
        <search-input @submit="goSubmit"></search-input>
      </div>

      <div class="new-group">
          <div class="flex-r-c">
              <div class="title-group flex-r-c center left">
                  <h5>最新文档</h5>
                  <i class="el-icon-jy-Frame"></i>
              </div>
          </div>

          <div class="new-list-group flex-r-c">
              <div class="flex flex-c-c">
                <div class="list-item flex-r-c" v-for="item in newList1" :key="item.id" @click="goContent(item)">
                  <div class="flex flex-r-c center left">
                    <i :class="'el-icon-jy-' + item.type" />
                    <div class="flex">
                      <div class="van-ellipsis">{{item.title}}</div>
                    </div>
                  </div>
                  <div class="right-info flex-r-c center right">
                    <i class="el-icon-jy-iconJianYu" />
                    <span>{{item.money}}</span>
                  </div>
                </div>
              </div>
              <div class="flex flex-c-c">
                <div class="list-item flex-r-c" v-for="item in newList2" :key="item.id" @click="goContent(item)">
                  <div class="flex flex-r-c center left">
                    <i :class="'el-icon-jy-' + item.type" />
                    <div class="flex">
                      <div class="van-ellipsis">{{item.title}}</div>
                    </div>
                  </div>
                  <div class="right-info flex-r-c center right">
                    <i class="el-icon-jy-iconJianYu" />
                    <span>{{item.money}}</span>
                  </div>
                </div>
              </div>
          </div>
      </div>

      <div class="hot-down-group">
          <div class="flex-r-c">
              <div class="title-group flex-r-c center left">
                  <h5>热门下载</h5>
                  <i class="el-icon-jy-Frame-1"></i>
              </div>
          </div>

          <div class="new-list-group flex-r-c">
            <div class="flex flex-c-c">
              <div class="list-item flex-r-c" v-for="item in hotList1" :key="item.id" @click="goContent(item)">
                <div class="flex flex-r-c center left">
                  <i :class="'el-icon-jy-' + item.type" />
                  <div class="flex">
                    <div class="van-ellipsis">{{item.title}}</div>
                  </div>
                </div>
                <div class="right-info flex-r-c center right">
                  <i class="el-icon-jy-iconJianYu" />
                  <span>{{item.money}}</span>
                </div>
              </div>
            </div>
            <div class="flex flex-c-c">
              <div class="list-item flex-r-c" v-for="item in hotList2" :key="item.id" @click="goContent(item)">
                <div class="flex flex-r-c center left">
                  <i :class="'el-icon-jy-' + item.type" />
                  <div class="flex">
                    <div class="van-ellipsis">{{item.title}}</div>
                  </div>
                </div>
                <div class="right-info flex-r-c center right">
                  <i class="el-icon-jy-iconJianYu" />
                  <span>{{item.money}}</span>
                </div>
              </div>
            </div>
          </div>
      </div>

      <div class="keep-group">
          <div class="flex-r-c">
              <div class="title-group flex-r-c center left">
                  <h5>精选推荐</h5>
              </div>
          </div>
          <div class="hot-keep-group flex-r-c wrap">
            <div class="card-item flex-r-c"  v-for="item in pageData.keep" :key="item.id" @click="goContent(item)">
              <div class="mini-img-group">
                <img :src="item.img" alt="">
                <i :class="'el-icon-jy-' + item.type" />
              </div>
              <div class="flex-c-c">
                <div class="flex">
                  <div class="title-text van-multi-ellipsis--l2">{{item.title}}</div>
                </div>
                <div class="flex-c-c info-text">
                  <span v-if="item.contribution">贡献者: {{item.contribution}}</span>
                  <div class="info-text-group flex-r-c center left">
                    <span v-if="item.down">{{item.down}}次下载</span>
                    <span v-if="item.page">共{{item.page}}页</span>
                    <span v-if="item.size">{{item.size | sizeFormatter}}</span>
                  </div>
                </div>
                <div class="money-group flex-r-c center left">
                  <i class="el-icon-jy-iconJianYu s20" />
                  <span class="red-text">{{item.money}}</span>
                </div>
              </div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import { Button } from 'element-ui'
import SearchInput from '../components/Search'
import { getHomeActivity, getHomeHot } from '../api/modules/home'
import { recoveryPageData } from '../utils'

function checkType (type) {
  let typeStr = ''
  switch (type) {
    case 1: {
      typeStr = 'word'
      break
    }
    case 2: {
      typeStr = 'pdf'
      break
    }
    case 3: {
      typeStr = 'excel'
      break
    }
    case 4: {
      typeStr = 'ppt'
      break
    }
    case 'doc': {
      typeStr = 'word'
      break
    }
    case 'xls': {
      typeStr = 'excel'
      break
    }
  }
  return typeStr
}

function formatData (v) {
  return {
    img: v?.docImg,
    type: checkType(v?.docFileType),
    id: v.docId,
    title: v?.docName || v?.docTitle,
    money: v.price,
    size: v?.docFileSize,
    page: v?.docPageSize,
    down: v?.downTimes,
    contribution: v?.sourceUserId
  }
}

export default {
  name: 'home',
  components: {
    SearchInput,
    [Button.name]: Button
  },
  data () {
    return {
      fullscreenLoading: false,
      pageData: {}
    }
  },
  created () {
    this.pageData = recoveryPageData('jy-docs-home-page-pc')
    this.getHome()
  },
  beforeCreate: function () {
    $('body').addClass('view_index')
  },
  beforeDestroy: function () {
    $('body').removeClass('view_index')
    sessionStorage.setItem('jy-docs-home-page-pc', JSON.stringify(this.pageData))
  },
  computed: {
    newList1 () {
      return this.pageData?.new && this.pageData?.new.slice(0, 5)
    },
    newList2 () {
      return this.pageData?.new && this.pageData?.new.slice(5)
    },
    hotList1 () {
      return this.pageData?.hot && this.pageData?.hot.slice(0, 5)
    },
    hotList2 () {
      return this.pageData?.hot && this.pageData?.hot.slice(5)
    }
  },
  methods: {
    goContent (item) {
      const routeData = this.$router.resolve({
        name: 'content',
        params: {
          id: item.id
        }
      })
      window.open(routeData.href, '_blank')
    },
    async getHome () {
      getHomeHot({ sign: 'new', num: 10 }).then(res => {
        if (!res.data.error_msg.length) {
          this.$set(this.pageData, 'new', res.data.data.map((v) => formatData(v)))
        }
      })
      getHomeHot({ sign: 'hot', num: 10 }).then(res => {
        if (!res.data.error_msg.length) {
          this.$set(this.pageData, 'hot', res.data.data.map((v) => formatData(v)))
        }
      })
      getHomeActivity({ code: 3, size: 6, num: 1 }).then(res => {
        if (!res.data.error_msg.length) {
          this.$set(this.pageData, 'keep', res.data.data.map((v) => formatData(v)))
        }
      })
    },
    goSubmit (search) {
      this.$router.push({
        name: 'search',
        query: search
      })
    },
    getLoginStatus: function () {
      alert(loginflag)
    }
  }
}
</script>
<style lang="scss">
  .page--docs--index.view_index {
    .page-container {
      background-image: url("~@/assets/images/wenkuBanner.png");
      background-repeat: no-repeat;
      background-color: #fff;
    }
  }
</style>
<style scoped lang="scss">
  .pages--home {
    padding-bottom: 40px;
    box-sizing: border-box;

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

    @include diy-icon('pdf', 24);
    @include diy-icon('word', 24);
    @include diy-icon('excel', 24);
    @include diy-icon('ppt', 24);

    .list-item {
      cursor: pointer;
      padding: 18px 0;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      &:hover {
        background: #F5F6F7;
      }
      &:last-child {
        border-bottom-color: transparent;
      }

      i {
        flex-shrink: 0;
        margin-right: 4px;
      }
      .flex {
        min-width: 0;
      }
      .right-info {
        margin-left: 4px;
        flex-shrink: 0;
        color: #1D1D1D;
        font-family: Microsoft YaHei;
        font-size: 16px;
        letter-spacing: 0px;
        text-align: right;
      }
    }
    .card-item {
      cursor: pointer;
      justify-content: flex-start;
      padding: 8px 16px 12px 0;
      box-sizing: border-box;

      &:hover {
        background: #F5F6F7;
      }

      .money-group {
        margin-top: 8px;
      }
      .mini-img-group {
        flex-shrink: 0;
        position: relative;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        width: 100px;
        height: 124px;
        margin-right: 12px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
        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: 18px;
        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: 20px;
        letter-spacing: 0px;
        text-align: left;
      }
    }

    .van-ellipsis {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .van-multi-ellipsis--l2 {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .hot-keep-group {
      .card-item {
        width: 33.33%;
      }
    }

  }
    @include diy-icon('search', 24);
    @include diy-icon('Frame', 24);
    @include diy-icon('Frame-1', 24);

    .keep-group {
        margin-top: 38px;
        padding-bottom: 50px;
    }

    .new-group {
        margin-top: 54px;
      .flex-c-c {
        padding-right: 24px;
        box-sizing: border-box;
        & + .flex-c-c {
          padding-right: 0;
          padding-left: 24px;
        }
      }
    }

    .hot-down-group {
        border-radius: 12px;
        background: radial-gradient(circle at 50% 50%, #FAEACD 0%, #FFF8EA 100%);
        background-image: url("~@/assets/images/dateGetBg.png");
        background-repeat: no-repeat;

        background-size: 100% 100%;
        width: 100%;
        height: auto;
        padding: 24px;
        padding-bottom: 34px;
        box-sizing: border-box;
        margin-top: 40px;

      .title-group h5 {
          color: #863700;
        }

        .new-list-group {
            background-color: white;
            border-radius: 8px;
          .flex-c-c {
            padding: 20px;
            box-sizing: border-box;
          }
        }
    }

    .title-group {
        margin-bottom: 16px;
        h5 {
            color: #1D1D1D;
            font-family: Microsoft YaHei;
            font-size: 18px;
            line-height: 28px;
            letter-spacing: 0px;
            text-align: left;
            margin-right: 9px;
        }
    }

    .top-search-group {
      width: 100%;
      height: 323px;
      h5 {
        color: #1D1D1D;
        font-family: Microsoft YaHei;
        font-size: 20px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
        margin-bottom: 40px;
      }
    }

    .new-list-group {
        > .flex {
          max-width: 50%;
        }
    }
</style>