deliver-admin/src/views/put/PutDetails.vue

<template>
  <a-row>
    <a-col :span="6">
      <div style="width: 200px">
        <div class="flex flex-col justify-center" style="margin-bottom: 10px">
          <div class="text-center">
            <a-avatar :size="80" :src="this.authorInfo.avatar">央</a-avatar>
          </div>
          <div class="username text-center">{{ this.authorInfo.videoAccountName }}</div>
        </div>
        <div class="flex justify-around text-center" style="margin-bottom: 5px">
          <div>
            <div>粉丝数</div>
            <div class="num"><span>{{ this.authorInfo.fansCount }}</span></div>
          </div>
          <div>
            <div>发表数</div>
            <div class="num">{{ this.authorInfo.sendVideoCount }}</div>
          </div>
        </div>
        <div class="flex justify-around text-center" style="margin-bottom: 5px">
          <div>
            <div>投放条数</div>
            <div class="num">{{ this.authorInfo.putCount }}</div>
          </div>
          <div>
            <div>投放量级</div>
            <div class="num">{{ this.authorInfo.putLevelCount }}</div>
          </div>
        </div>

      </div>
    </a-col>
    <a-col :span="18" style=" background: #fff">
      <div class="flex" style="padding: 10px;">

        <div style="margin-right: 20px">
          <span>发表时间：</span>
          <a-range-picker show-time @change="handleChangePicker">
          </a-range-picker>

        </div>
        <div class="flex">
          <a-input v-model="formData.searchValue" placeholder="请输入作者 finderUin"></a-input>
          <a-button style="margin-left: 10px;" type="primary" @click="handleClickSearch">搜索</a-button>
        </div>

      </div>
      <div style="margin-top: 10px; font-size: 14px; background: #eff2f5">
        <template v-for="(item, index) of tableList" :key-="index">
          <a-row style="background: white; margin-bottom: 20px; padding: 10px;">

            <a-col :span="12" style="padding-right: 20px;">
              <div style="margin-bottom: 5px">{{ item.desc }}</div>
              <div>{{ item.sendTimeStr }}</div>
              <a-row>
                <a-col :span="12">有效曝光次数：{{ item.exposureCount }}</a-col>
                <a-col :span="12">投放量级：{{ item.putCountLevel }}</a-col>
              </a-row>
              <a-row>
                <a-col :span="12">点赞次数：{{ item.likeCount }}</a-col>
                <a-col :span="12">投放标签：</a-col>
              </a-row>
              <a-row>
                <a-col :span="12">完播次数：{{ item.playCount }}</a-col>
                <a-col :span="12">投放年龄：</a-col>
              </a-row>
              <a-row>
                <a-col :span="12">关注次数：{{ item.followCount }}</a-col>
                <a-col :span="12">投放城市：</a-col>
              </a-row>
              <a-row>
                <a-col :span="12">收藏次数：{{ item.collectCount }}</a-col>
                <a-col :span="12">投放性别：</a-col>
              </a-row>
              <a-row>
                <a-col :span="12">评论次数：{{ item.commentCount }}</a-col>
                <a-col :span="12">投放人：</a-col>
              </a-row>
              <a-row>
                <a-col :span="12">点赞率：{{ item.playCount / item.likeCount }}%</a-col>
                <a-col :span="12"></a-col>
              </a-row>
              <a-row>
                <a-col :span="12">关注率：{{ item.playCount / item.followCount }}%</a-col>
                <a-col :span="12"></a-col>
              </a-row>

              <div style="font-size: 12px; color: #aaa; margin-top: 30px">feedid：{{ item.feedId }}</div>
            </a-col>
            <a-col :span="12">
              <div>
                <video :src="item.link" style="width: 100%" controls></video>
                <div>
                  <a-button type="primary" ghost @click="handleClickPush(item)">投放</a-button>
                </div>
              </div>
            </a-col>
          </a-row>
        </template>
      </div>
    </a-col>
  </a-row>

</template>

<script>
import { fetchVideoList, fetchAuthorByFinderUin, saveAuthorVideo } from '@/api/author'

export default {
  data () {
    return {
      loadData: parameter => {
        console.log('loadData.parameter', parameter)
        return fetchVideoList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      },
      authorInfo: {},
      formData: {
        startTime: 0,
        endTime: 0,
        searchValue: '',
        status: 0,
        size: 10000
      },
      tableList: []
    }
  },
  created () {
    console.log('参数' + this.$route.query.id)
    this.reloadData()
  },
  methods: {
    /**
     * 点击搜索
     */
    handleClickSearch () {
      console.log(this.formData)
      this.reloadData()
    },
    handleChangePicker (date, dateString) {
      console.log(date, dateString)
      this.formData.startTime = Number(date[0].format('x'))
      this.formData.endTime = Number(date[1].format('x'))
      console.log(this.formData.startTime)
      console.log(this.formData.endTime)
      // this.reloadData()
    },
    handleClickPush (item) {
      console.log(this.formData)
      item.status = 1
      saveAuthorVideo(item)
      this.reloadData()
    },

    reloadData () {
      // const parems = {
      //   startXXX: this.formData.startTime
      // }
      fetchAuthorByFinderUin(this.$route.query.id).then(res => {
        this.authorInfo = res.model
      })
      this.tableList = []
      console.log('formData = ' + JSON.stringify(this.formData))
      fetchVideoList(this.formData).then(res => {
        this.tableList = res.models
        console.log(res)
      })
    }
  }
}
</script>

<style lang="less">
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.justify-around {
  justify-content: space-around;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.text-center {
  text-align: center;
}

.num {
  color: #00A0E9;
}

.username {

}
</style>