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

<template>
  <div class="pages--home">
    <search type="click" @click="goSearch"></search>
    <div class="new-group base-group">
      <div class="title-group flex-r-c center left">
        <span></span>
        <h5>最新文档</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>热门下载</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="keep-group base-group">
      <div class="title-group flex-r-c center left">
        <span></span>
        <h5>精选推荐</h5>
      </div>
      <div class="list-group card-group flex-c-c">
        <van-skeleton avatar avatar-shape="square" class="van-loading-skeleton card-style"
            :row="4"
            :row-width="rowWidth"
            :loading="showLoading.keep">
          <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="">
            <van-icon :name="'diy-' + 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">
              <van-icon class="s20" name="diy-iconJianYu" />
              <span class="red-text">{{item.money}}</span>
            </div>
          </div>
        </div>
        </van-skeleton>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Search from '@/components/Search.vue'
import { Icon, Skeleton } from 'vant'
import { mapActions, mapState } from 'vuex'
  @Component({
    name: 'home',
    components: {
      [Icon.name]: Icon,
      [Skeleton.name]: Skeleton,
      Search
    },
    computed: {
      ...mapState('main', {
        pageData: (state: any) => state.homePageData
      })
    },
    methods: {
      ...mapActions({
        ajaxData: 'main/getHome'
      })
    }
  })

export default class extends Vue {
    ajaxData: any
    pageData: any
    rowWidth = ['100%', '20%', '40%', '15%']

    created () {
      this.ajaxData()
    }

    get showLoading () {
      const s = this.pageData
      return {
        new: !s?.new,
        hot: !s?.hot,
        keep: !s?.keep
      }
    }

    goSearch () {
      this.$router.push({
        name: 'search'
      })
    }

    goContent (item: any) {
      this.$router.push({
        name: 'details',
        params: {
          id: item.id
        }
      })
    }
}
</script>
<style scoped lang="scss">
.pages--home {
  background: #F5F6F7;
  padding-bottom: 40px;
  box-sizing: border-box;

  .d-title {
    font-size: 14px;
    line-height: 20px;
  }
  .price-text {
    font-size: 13px;
    line-height: 28px;
  }

  ::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', 24);
  @include diy-icon('word', 24);
  @include diy-icon('excel', 24);
  @include diy-icon('ppt', 24);

  .base-group {
    padding: 4px 19px 4px 16px;
    box-sizing: border-box;
    .list-group {
      border-radius: 8px;
      background: #FFFFFF;
      box-sizing: border-box;
      padding: 8px 0;
      &.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: 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;
        }
      }
    }

    .title-group {
      padding: 16px 0 6px 0;
      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>