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">央</a-avatar></div>
          <div class="username text-center">央视新闻</div>
        </div>
        <div class="flex justify-around text-center" style="margin-bottom: 5px">
          <div>
            <div>粉丝数</div>
            <div class="num"><span>10000W</span>-<span>2000W</span></div>
          </div>
          <div>
            <div>发表数</div>
            <div class="num">3128</div>
          </div>
        </div>
        <div class="flex justify-around text-center"style="margin-bottom: 5px">
          <div>
            <div>投放条数</div>
            <div class="num">3128</div>
          </div>
          <div>
            <div>投放数量</div>
            <div class="num">3128</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.title}}</div>
              <div>{{item.sendTime}}</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.exposureCount}}</a-col>
                <a-col :span="12">投放标签：</a-col>
              </a-row>
              <a-row>
                <a-col :span="12">完播次数：{{item.exposureCount}}</a-col>
                <a-col :span="12">投放年龄：</a-col>
              </a-row>
              <a-row>
                <a-col :span="12">关注次数：{{item.exposureCount}}</a-col>
                <a-col :span="12">投放城市：</a-col>
              </a-row>
              <a-row>
                <a-col :span="12">收藏次数：{{item.exposureCount}}</a-col>
                <a-col :span="12">投放性别：</a-col>
              </a-row>
              <a-row>
                <a-col :span="12">评论次数：{{item.exposureCount}}</a-col>
                <a-col :span="12">投放人：</a-col>
              </a-row>
              <a-row>
                <a-col :span="12">点赞率：{{100}}%</a-col>
                <a-col :span="12"></a-col>
              </a-row>
              <a-row>
                <a-col :span="12">关注率：{{100}}%</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">投放</a-button></div>
              </div>
            </a-col>
          </a-row>
        </template>
      </div>
    </a-col>
  </a-row>

</template>

<script>
import { fetchList } from '@/api/author'

export default {
  data () {
    return {
      formData: {
        startTime: 0,
        endTime: 0,
        searchValue: ''
      },
      tableList: [{
        'title': '冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间',
        'sendTime': '',
        'exposureCount': 100,
        'likeCount': 100,
        'playCount': 100,
        'followCount': 100,
        'collectCount': 100,
        'commentCount': 100,
        'putCountLevel': 1,
        'putTags': '投放标签',
        'putAge': '10-10',
        'putCity': '北京市',
        'putGender': 0,
        'putUser': 'v-duzi',
        'feedId': '231232132131321',
        'link': 'https://cos.nosum.cn/deliver/1646557198523604.mp4'
      },
        {
          'title': '冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间',
          'sendTime': '',
          'exposureCount': 100,
          'likeCount': 100,
          'playCount': 100,
          'followCount': 100,
          'collectCount': 100,
          'commentCount': 100,
          'putCountLevel': 1,
          'putTags': '投放标签',
          'putAge': '10-10',
          'putCity': '北京市',
          'putGender': 0,
          'putUser': 'v-duzi',
          'feedId': '231232132131321',
          'link': 'https://cos.nosum.cn/deliver/1646557198523604.mp4'
        },
        {
          'title': '冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间',
          'sendTime': '',
          'exposureCount': 100,
          'likeCount': 100,
          'playCount': 100,
          'followCount': 100,
          'collectCount': 100,
          'commentCount': 100,
          'putCountLevel': 1,
          'putTags': '投放标签',
          'putAge': '10-10',
          'putCity': '北京市',
          'putGender': 0,
          'putUser': 'v-duzi',
          'feedId': '231232132131321',
          'link': 'https://cos.nosum.cn/deliver/1646557198523604.mp4'
        },
        {
          'title': '冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间冬奥温暖瞬间',
          'sendTime': '',
          'exposureCount': 100,
          'likeCount': 100,
          'playCount': 100,
          'followCount': 100,
          'collectCount': 100,
          'commentCount': 100,
          'putCountLevel': 1,
          'putTags': '投放标签',
          'putAge': '10-10',
          'putCity': '北京市',
          'putGender': 0,
          'putUser': 'v-duzi',
          'feedId': '231232132131321',
          'link': 'https://cos.nosum.cn/deliver/1646557198523604.mp4'
        }]
    }
  },
  created () {
    console.log(this.$route.params)
  },
  methods: {
    /**
     * 点击搜索
     */
    handleClickSearch () {
      console.log(this.formData)
    },
    handleChangePicker (date, dateString) {
      console.log(date, dateString)
      this.formData.startTime = Number(date[0].format('x'))
      this.formData.endTime = Number(date[1].format('x'))
      if (this.formData.searchValue)
      {
        this.handleClickPush()
      }
    },
    handleClickPush() {
      console.log(this.formData)
      // const parems = {
      //   startXXX: this.formData.startTime
      // }
      // this.tableList = []
      // fetchList(Object.assign(parameter, this.queryParam)).then(res => {
      // this.tableList = res.data
      // })
    }
  }
}
</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>