tnbapp/src/views/home/zhihu.vue

<template>
  <v-container class="grey lighten-5">
    <v-row justify="space-between">
      <v-col>
        <v-row dense justify="center">
          <question-card :question="question" />
        </v-row>
        <v-row dense>
          <div v-infinite-scroll="loadMore" infinite-scroll-disabled="true" infinite-scroll-distance="10">
            <v-col cols="12">
              <v-row
                v-for="item in cardList"
                :key="item.answerId"
                justify="center"
              >
                <answer-card :answer="item" />
              </v-row>
            </v-col>
          </div>
        </v-row>
      </v-col>
      <v-col md="4">
        <v-row dense>
          <v-col cols="12">
            <v-card
              color="#385F73"
              light
            >
              <v-card-title class="text-h5">
                热门问题
              </v-card-title>
              <v-card-text>
                <p class="text-body-1 text--primary">
                  1.第1条
                </p>
                <p class="text-body-1 text--primary">
                  2.第2条
                </p>
              </v-card-text>
            </v-card>
          </v-col>
          <v-col cols="12">
            <v-card
              color="#385F73"
              light
            >
              <v-card-title class="text-h5">
                热门回答
              </v-card-title>
              <v-card-text>
                <p class="text-body-1 text--primary">
                  1.第1条
                </p>
                <p class="text-body-1 text--primary">
                  2.第2条
                </p>
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-col>
    </v-row>

    <v-snackbar
      v-model="showMessage"
      :top="true"
      :timeout="3000"
    >
      {{ message }}
      <template v-slot:action="{ attrs }">
        <v-btn
          color="pink"
          text
          v-bind="attrs"
          @click="showMessage = false"
        >
          关闭
        </v-btn>
      </template>
    </v-snackbar>
  </v-container>
</template>

<script>
import { answerRecommend } from '@/api/mblog/status'
import AnswerCard from '@/components/card/answer-card'
import QuestionCard from '@/components/card/question-card'

export default {
  name: 'Home',
  components: {
    QuestionCard,
    AnswerCard
  },
  data() {
    return {
      question: {
        title: '你最照骗的一张照片是什么样子？',
        detail: ''
      },
      cardList: [],
      busy: false,
      page: 1,
      showMessage: false,
      message: ''
    }
  },
  created() {
    this.getFollowingStatus(this.page)
  },
  mounted() {
  },
  methods: {
    loadMore: function() {
      this.busy = true
      setTimeout(() => {
        console.log('加载更多数据')
      }, 1000)
    },
    getFollowingStatus(page) {
      answerRecommend(page)
        .then(res => {
          if (res.code === 0) {
            if (page === 1) {
              this.cardList = []
            }

            for (const item of res.data.list) {
              this.cardList.push(item)
            }
            this.page += 1
            this.busy = false
          } else {
            this.message = res.msg
            this.showMessage = true
          }
        })
        .catch(error => {
          this.message = error.message
          this.showMessage = true
        })
    }
  }
}
</script>

<style>
</style>