tnbapp/src/views/home/mblog.vue

<template>
  <v-container class="grey lighten-5">
    <v-row justify="space-between">
      <v-col>
        <v-row dense>
          <v-col>
            <v-card
              color="#385F73"
              dark
            >
              <v-row dense>
                <v-textarea
                  v-model="statusPost.content"
                  solo
                  falt
                  filled
                  auto-grow
                  label="说点什么呢?"
                  rows="3"
                />
              </v-row>
              <v-row>
                <v-col>
                  <!-- 接收 filepond-image 中 this.$emit('resp', resp) 的数据 -->
                  <FilePondUploadImage @resp="uploadCallback" />
                </v-col>
              </v-row>
              <v-row dense>
                <v-col>
                  <v-card-actions>
                    <v-btn text @click="publish">
                      发布
                    </v-btn>
                  </v-card-actions>
                </v-col>
              </v-row>
            </v-card>
          </v-col>
          <v-col>
            <v-sheet
              class="mx-auto"
              max-width="700"
            >
              <v-slide-group
                multiple
                show-arrows
              >
                <v-slide-item
                  v-for="n in 25"
                  :key="n"
                  v-slot="{ active }"
                >
                  <v-btn
                    class="mx-2"
                    :input-value="active"
                    active-class="purple white--text"
                    depressed
                    rounded
                    @click="selectUser"
                  >
                    关注的用户 {{ n }}
                  </v-btn>
                </v-slide-item>
              </v-slide-group>
            </v-sheet>
          </v-col>
          <v-col cols="12">
            <v-card
              color="#385F73"
              dark
            >
              <v-card-actions @click="selectCategory">
                <v-btn text>
                  全部
                </v-btn>
                <v-btn text>
                  视频
                </v-btn>
                <v-btn text>
                  图片
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
          <v-col
            v-for="item in list"
            :key="item.statusId"
          >
            <status-card :item="item" />
          </v-col>
        </v-row>
      </v-col>
      <v-col md="4">
        <v-row dense>
          <v-col cols="12">
            <v-card
              class="mx-auto"
              color="#26c6da"
              dark
            >
              <v-card-title>
                <v-avatar size="32">
                  <v-img
                    :src="this.$store.state.user.userInfo.avatarUrl"
                    :alt="this.$store.state.user.userInfo.username"
                    :title="this.$store.state.user.userInfo.username"
                  />
                </v-avatar>
                <span class="text-h6 font-weight-light">{{ this.$store.state.user.userInfo.username }}</span>
              </v-card-title>
              <v-card-text class="text-h5 font-weight-light">
                {{ this.$store.state.user.userInfo.intro }}
              </v-card-text>
              <v-card-text class="text-h5 font-weight-light">
                关注 {{ this.$store.state.user.userInfo.followingCount }} | 被关注 {{ this.$store.state.user.userInfo.followerCount }}
              </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-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 { mapActions, mapGetters } from 'vuex'
import { pubStatus, statusRecommend } from '@/api/mblog/status'
import { videoTimeline } from '@/api/media/video'
import StatusCard from '@/components/card/status-card'
import FilePondUploadImage from '@/components/upload/filepond-image.vue'

export default {
  name: 'Home',
  components: {
    StatusCard,
    FilePondUploadImage
  },
  data() {
    return {
      statusPost: {
        uploadIds: [],
        content: ''
      },
      list: [],
      busy: false,
      page: 1,
      model: null,
      showMessage: false,
      message: ''
    }
  },
  computed: {
    ...mapGetters({
      statuses: 'my_content',
      option: 'my_content_option',
      showImage: 'image_zoom_show'
    })
  },
  watch: {
    option: {
      handler: function(val, oldVal) {
        if (val && val.page === 1) {
          this.list = []
        }
      },
      deep: true
    },
    statuses: function(val, oldVal) {
      if (val) {
        if (this.option.page === 1) {
          this.list = val
        } else {
          this.list = [...this.list, ...val]
        }
      }
    }
  },
  created() {
    this.getFollowingStatus(this.page)
    this.getTimeline(this.page)
  },
  mounted() {
  },
  methods: {
    ...mapActions([
      'getMyContent'
    ]),
    loadMore: function() {
      this.busy = true
      setTimeout(() => {
        this.getFollowingStatus(this.page)
      }, 1000)
    },
    getTimeline(page) {
      videoTimeline(page)
        .then(res => {
          if (res.code === 0) {
            for (const item of res.data.list) {
              console.log(item)
            }
            this.page += 1
            this.busy = false
          } else {
            this.message = res.msg
            this.showMessage = true
          }
        })
        .catch(error => {
          this.message = error.message
          this.showMessage = true
        })
    },
    getFollowingStatus(page) {
      statusRecommend(page)
        .then(res => {
          if (res.code === 0) {
            for (const item of res.data.list) {
              this.list.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
        })
    },
    myContent(page) {
      this.getMyContent(page)
    },
    selectUser() {
      console.log('加载选中用户的状态...')
    },
    selectCategory() {
      console.log('加载选中分类的用户状态...')
    },
    uploadCallback(resp) {
      if (resp.code === 0) {
        this.statusPost.uploadIds.push(resp.data.uploadId)
      } else {
        if (resp.msg != null) {
          this.message = '上传文件出现异常，请重新上传！' + resp.msg
        } else {
          this.message = '上传文件出现异常，请重新上传！'
        }
        this.showMessage = true
      }
    },
    setFile() {
      console.log('选择文件')
    },
    publish() {
      if (this.statusPost.content === '') {
        this.message = '内容不能为空'
        this.showMessage = true
      }

      pubStatus(this.statusPost)
        .then(res => {
          if (res.code === 0) {
            this.message = '状态已发布'
            this.showMessage = true
          } else {
            this.message = res.msg
            this.showMessage = true
          }
        })
        .catch(error => {
          this.message = error.message
          this.showMessage = true
        })
    }
  }
}
</script>

<style>
</style>