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

<template>
  <div class="app-container">
    <a-card :bordered="false">
      <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 class="table-operator">
                      <a-button type="primary" icon="plus" @click="createHandler(item)">投放</a-button>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </template>
          </div>
        </a-col>

        <CreatePutForm
          :formType="formType"
          :visible="visible"
          ref="createForm"
          @resetData="resetData"
          @refreshTable="refreshTable"
        />
      </a-row>
    </a-card>
  </div>
</template>

<script>

import { fetchVideoList, fetchAuthorByFinderUin, saveAuthorVideo } from '@/api/author'
import CreatePutForm from './modules/CreateForm'
import { Ellipsis, STable } from '@/components'
import SearchForm from './modules/SearchForm'

export default {
  components: {
    STable,
    Ellipsis,
    CreatePutForm,
    SearchForm
  },
  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: [],
      visible: false,
      formType: 'create'
    }
  },
  created () {
    console.log('参数' + this.$route.query.id)
    this.reloadData()
  },
  methods: {
    createHandler (record) {
      this.formType = 'create'
      this.visible = true
      this.$refs.createForm.resetForm(record)
    },
    resetData (flag) {
      console.log('reset data ' + flag)
      this.visible = flag
      this.reloadData()
    },
    refreshTable () {
      this.$refs.table.refresh()
    },
    /**
     * 点击搜索
     */
    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>