Bläddra i källkod

快手视频展示

zhuxinbo 5 år sedan
förälder
incheckning
3b9e3fb99d

+ 2 - 2
src/views/modules/advertiser/modules/ProjectModal.vue

@@ -65,7 +65,7 @@
           <a-input placeholder="请输入最高出价" v-decorator="['maxBid', validatorRules.maxBid]" addonAfter="元" />
         </a-form-item>
         <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="最高转化出价">
-          <a-input placeholder="最高转化出价" v-decorator="['maxDeepCpaBid', validatorRules.maxBid]" addonAfter="元" />
+          <a-input placeholder="最高转化出价" v-decorator="['maxDeepCpaBid']" addonAfter="元" />
         </a-form-item>
         <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="运营负责人">
           <a-select
@@ -144,7 +144,7 @@ export default {
         projectName: { rules: [{ required: true, message: '请输入项目名称!' }] },
         advertiserId: { rules: [{ required: true, message: '请选择广告主!' }] },
         responsibleName: { rules: [{ required: true, message: '请选择负责人!' }] },
-        maxBid: { rules: [{ required: true, message: '请输入最高出价!' }, { validator: this.validateInputCode }] }
+        maxBid: { rules: [{ required: true, message: '请输入最高出价!' }, { validator: this.validateInputCode }] },
       },
       url: {
         add: '/ctop/project/add',

+ 353 - 0
src/views/openMindCreativity/adList.vue

@@ -0,0 +1,353 @@
+<template>
+  <a-row :gutter="10" class="list-pubu">
+    <a-col :sm="24" style="margin-bottom: 20px;z-index: 10">
+      <a-card :bordered="false">
+        <div class="table-page-search-wrapper">
+          <a-form layout="inline">
+            <a-row :gutter="24">
+              <a-col :md="10" :sm="10">
+                <a-form-item label="排序">
+                  <a-radio-group v-model="queryParam.sortType">
+                    <a-radio-button :value="1">按播放数</a-radio-button>
+                    <a-radio-button :value="2">按点赞量</a-radio-button>
+                    <a-radio-button :value="3">按评论数</a-radio-button>
+                  </a-radio-group>
+                </a-form-item>
+              </a-col>
+              <!-- <a-col :md="6" :sm="6">
+                <a-form-item>
+                  <a-radio-group v-model="queryParam.orderByType">
+                    <a-radio-button value="asc">正序</a-radio-button>
+                    <a-radio-button value="desc">倒序</a-radio-button>
+                  </a-radio-group>
+                </a-form-item>
+              </a-col> -->
+              <a-col :md="8" :sm="8">
+                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+        <app-ad-modal ref="modalForm"></app-ad-modal>
+      </a-card>
+    </a-col>
+    <vue-waterfall-easy
+      class="adcover_waterfall_container"
+      ref="waterfall"
+      :imgsArr="imgsArr"
+      @click="handleDetail"
+      @scrollReachBottom="getData"
+      style="height: 800px;"
+    >
+      <div class="img-info" slot-scope="props">
+        <div class="some-info">
+          <ul>
+            <li>
+              <b>发布人:</b>
+              <span>{{ props.value.nickName }}</span>
+            </li>
+            <li>
+              <b>播放:</b>
+              <span>{{ props.value.playingTime }}</span>
+            </li>
+            <li>
+              <b>评论:</b>
+              <span>{{ props.value.commentTime }}</span>
+            </li>
+            <li>
+              <b>点赞:</b>
+              <span>{{ props.value.likeTime }}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div slot="waterfall-over">无更多数据</div>
+    </vue-waterfall-easy>
+    <div class="scroll_top">
+      <a-icon type="to-top" />
+    </div>
+  </a-row>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+import { filterObj } from '@/utils/util'
+import vueWaterfallEasy from 'vue-waterfall-easy'
+import AppAdModal from './modules/AppAdModal'
+import JTreeSelect from '@/components/jeecg/JTreeSelect'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import ARow from 'ant-design-vue/es/grid/Row'
+import ACol from 'ant-design-vue/es/grid/Col'
+import AFormItem from 'ant-design-vue/es/form/FormItem'
+import moment from 'moment'
+import $ from 'jquery'
+
+let timeout
+let currentValue
+
+function fetch(value, callback) {
+  if (timeout) {
+    clearTimeout(timeout)
+    timeout = null
+  }
+  currentValue = value
+
+  function fake() {}
+
+  timeout = setTimeout(fake, 300)
+}
+
+$(function() {
+  $('.scroll_top').click(function() {
+    $('.vue-waterfall-easy-scroll').animate(
+      {
+        scrollTop: 0
+      },
+      500
+    )
+    return false
+  })
+  $('.vue-waterfall-easy-scroll').scroll(function() {
+    var top = $('.vue-waterfall-easy-scroll').scrollTop()
+    if (top >= 100) {
+      $('.scroll_top').fadeIn()
+    } else {
+      $('.scroll_top').fadeOut()
+    }
+  })
+})
+
+export default {
+  name: 'waterfall',
+  data() {
+    return {
+      queryParam: {
+        sortType: 1
+      },
+      time: [],
+      companyData: [],
+      productData: [],
+      value: undefined,
+      imgsArr: [],
+      pageNo: 1, // request param
+      url: {
+        feedsUrl: '/ctop/kuaishouHotPhotoInfo/list',
+        companySugestUrl: '/ctop/kuaishou/advertiser/companysugest',
+        productSugestUrl: '/ctop/kuaishou/advertiser/productsugest',
+        list: '/ctop/kuaishouHotPhotoInfo/list'
+      },
+      validatorRules: {
+        pid: {},
+        name: {},
+        code: {}
+      },
+      pidField: 'pid',
+      isCoverStar: false // 收藏
+    }
+  },
+  components: {
+    AFormItem,
+    ACol,
+    ARow,
+    vueWaterfallEasy,
+    AppAdModal,
+    JTreeSelect
+  },
+  mixins: [JeecgListMixin],
+  methods: {
+    searchQuery() {
+      this.imgsArr = []
+      this.ipagination.current = 1
+      if (this.time != null && this.time.length > 0) {
+        this.queryParam.start = moment(this.time[0]).format('YYYY-MM-DD')
+        this.queryParam.end = moment(this.time[1]).format('YYYY-MM-DD')
+      }
+
+      this.getData()
+    },
+    searchReset() {
+      this.queryParam = {
+        sortType: 1
+      }
+      this.imgsArr = []
+      this.time = []
+      this.ipagination.current = 1
+      this.ipagination.pageSize = 20
+      this.getData()
+    },
+    handleProductSearch(value) {
+      getAction(this.url.productSugestUrl, { product: value }).then(res => {
+        console.log(res)
+        if (currentValue === value) {
+          const result = res.result
+          const data = []
+          result.forEach(r => {
+            data.push({
+              value: r,
+              text: r
+            })
+          })
+          this.productData = data
+        }
+      })
+      fetch(value)
+    },
+    handleProductChange(value) {
+      this.value = value
+      fetch(value, data => (this.productData = data))
+    },
+    handleCompanySearch(value) {
+      getAction(this.url.companySugestUrl, { company: value }).then(res => {
+        if (currentValue === value) {
+          const result = res.result
+          const data = []
+          result.forEach(r => {
+            data.push({
+              value: r,
+              text: r
+            })
+          })
+          this.companyData = data
+        }
+      })
+      fetch(value)
+    },
+    handleCompanyChange(value) {
+      this.value = value
+      fetch(value, data => (this.companyData = data))
+    },
+    handleDetail(event, { index, value }) {
+      this.$refs.modalForm.show(value)
+      this.$refs.modalForm.title = '详情'
+    },
+    flushData() {
+      this.imgsArr = []
+      this.pageNo = 1
+      this.getData()
+    },
+    modalFormOk() {},
+    getQueryParams() {
+      //获取查询条件
+      var param = Object.assign(this.queryParam)
+      param.pageNo = this.ipagination.current
+      param.pageSize = 20
+      return filterObj(param)
+    },
+    getData() {
+      var params = this.getQueryParams() //查询条件
+      console.log(params)
+      getAction(this.url.feedsUrl, params).then(res => {
+        console.log(res)
+        this.ipagination.current = this.ipagination.current + 1
+        if (res.success) {
+          if (res.result.records.length == 0) {
+            this.$refs.waterfall.waterfallOver()
+            return
+          }
+          var arr = res.result.records.map(item => {
+            return {
+              ...item,
+              src: item.coverThumbnailUrl
+            }
+          })
+          this.imgsArr = this.imgsArr.concat(arr)
+          //   for (var i = 0; i < res.result.records.length; i++) {
+          //     let arr = {}
+          //     arr.id = res.result.records[i].id
+          //     arr.mid = res.result.records[i].mid
+          //     arr.title = res.result.records[i].title
+          //     arr.play = res.result.records[i].play
+          //     arr.share = res.result.records[i].share
+          //     arr.comment = res.result.records[i].comment
+          //     arr.coverImage = res.result.records[i].coverThumbnailUrl
+          //     arr.src = res.result.records[i].coverThumbnailUrl
+          //     arr.url = res.result.records[i].mainMvUrl
+          //     arr.videoId = res.result.records[i].video_id
+          //     arr.coreUserId = res.result.records[i].core_user_id
+          //     arr.nickName = res.result.records[i].nickName
+          //     arr.headImageUri = res.result.records[i].head_image_uri
+          //     arr.likeCnt = res.result.records[i].like_cnt
+          //     arr.createTime = res.result.records[i].createTime
+          //     this.imgsArr = this.imgsArr.concat(arr)
+          //   }
+        }
+      })
+    }
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
+
+<style lang="scss">
+.adcover_waterfall_container {
+  .img-box {
+    .img-inner-box {
+      position: relative;
+      cursor: pointer;
+
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s;
+      .img-wraper {
+        // height: 427px!important;
+        img {
+        }
+      }
+      .img-info {
+        position: relative;
+        // height: 146px!important;
+        .some-info {
+          color: rgba(0, 0, 0, 0.65);
+          padding: 10px;
+          ul {
+            margin: 0;
+            padding: 0;
+            li {
+              list-style: none;
+              padding: 0;
+              margin: 0;
+            }
+          }
+        }
+        .cover_star {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          padding: 10px;
+          z-index: 1;
+          color: rgba(0, 0, 0, 0.65);
+          .coverStar {
+            color: red;
+          }
+        }
+      }
+    }
+  }
+}
+.scroll_top {
+  position: fixed;
+  z-index: 9;
+  right: 80px;
+  bottom: 40px;
+  display: none;
+  cursor: pointer;
+  color: #1890ff;
+  font-size: 40px;
+}
+</style>
+<style>
+.list-pubu .ball-beat {
+  height: 100px;
+}
+.list-pubu .loading {
+  position: fixed !important;
+  z-index: 10 !important;
+  left: 60% !important;
+  bottom: 0 !important;
+}
+.sider.light {
+  z-index: 11;
+}
+</style>

+ 316 - 0
src/views/openMindCreativity/analysisList.vue

@@ -0,0 +1,316 @@
+<template>
+  <a-row :gutter="10" class="list-pubu">
+    <vue-waterfall-easy
+      class="adcover_waterfall_container"
+      ref="waterfall"
+      :imgsArr="imgsArr"
+      @click="handleDetail"
+      @scrollReachBottom="getData"
+      style="height: 800px;"
+    >
+      <!-- majorIndustryName -->
+
+      <span slot-scope="props" class="tag">{{ props.value.majorIndustryName }}</span>
+      <div slot="waterfall-over">无更多数据</div>
+    </vue-waterfall-easy>
+    <app-ad-modal ref="modalForm"></app-ad-modal>
+    <div class="scroll_top">
+      <a-icon type="to-top" />
+    </div>
+  </a-row>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+import { filterObj } from '@/utils/util'
+import vueWaterfallEasy from 'vue-waterfall-easy'
+import AppAdModal from './modules/analysisModal'
+import JTreeSelect from '@/components/jeecg/JTreeSelect'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import ARow from 'ant-design-vue/es/grid/Row'
+import ACol from 'ant-design-vue/es/grid/Col'
+import AFormItem from 'ant-design-vue/es/form/FormItem'
+import moment from 'moment'
+import $ from 'jquery'
+
+let timeout
+let currentValue
+
+function fetch(value, callback) {
+  if (timeout) {
+    clearTimeout(timeout)
+    timeout = null
+  }
+  currentValue = value
+
+  function fake() {}
+
+  timeout = setTimeout(fake, 300)
+}
+
+$(function() {
+  $('.scroll_top').click(function() {
+    $('.vue-waterfall-easy-scroll').animate(
+      {
+        scrollTop: 0
+      },
+      500
+    )
+    return false
+  })
+  $('.vue-waterfall-easy-scroll').scroll(function() {
+    var top = $('.vue-waterfall-easy-scroll').scrollTop()
+    if (top >= 100) {
+      $('.scroll_top').fadeIn()
+    } else {
+      $('.scroll_top').fadeOut()
+    }
+  })
+})
+
+export default {
+  name: 'waterfall',
+  data() {
+    return {
+      queryParam: {
+        // sortType: 1
+      },
+      time: [],
+      companyData: [],
+      productData: [],
+      value: undefined,
+      imgsArr: [],
+      pageNo: 1, // request param
+      url: {
+        feedsUrl: '/ctop/kuaishouEffectAdInfo/list',
+        companySugestUrl: '/ctop/kuaishou/advertiser/companysugest',
+        productSugestUrl: '/ctop/kuaishou/advertiser/productsugest',
+        list: '/ctop/kuaishouEffectAdInfo/list'
+      },
+      validatorRules: {
+        pid: {},
+        name: {},
+        code: {}
+      },
+      pidField: 'pid',
+      isCoverStar: false // 收藏
+    }
+  },
+  components: {
+    AFormItem,
+    ACol,
+    ARow,
+    vueWaterfallEasy,
+    AppAdModal,
+    JTreeSelect
+  },
+  mixins: [JeecgListMixin],
+  methods: {
+    searchQuery() {
+      this.imgsArr = []
+      this.ipagination.current = 1
+      if (this.time != null && this.time.length > 0) {
+        this.queryParam.start = moment(this.time[0]).format('YYYY-MM-DD')
+        this.queryParam.end = moment(this.time[1]).format('YYYY-MM-DD')
+      }
+
+      this.getData()
+    },
+    searchReset() {
+      //   this.queryParam = {
+      //     sortType: 1
+      //   }
+      this.imgsArr = []
+      this.time = []
+      this.ipagination.current = 1
+      this.ipagination.pageSize = 20
+      this.getData()
+    },
+    handleProductSearch(value) {
+      getAction(this.url.productSugestUrl, { product: value }).then(res => {
+        console.log(res)
+        if (currentValue === value) {
+          const result = res.result
+          const data = []
+          result.forEach(r => {
+            data.push({
+              value: r,
+              text: r
+            })
+          })
+          this.productData = data
+        }
+      })
+      fetch(value)
+    },
+    handleProductChange(value) {
+      this.value = value
+      fetch(value, data => (this.productData = data))
+    },
+    handleCompanySearch(value) {
+      getAction(this.url.companySugestUrl, { company: value }).then(res => {
+        if (currentValue === value) {
+          const result = res.result
+          const data = []
+          result.forEach(r => {
+            data.push({
+              value: r,
+              text: r
+            })
+          })
+          this.companyData = data
+        }
+      })
+      fetch(value)
+    },
+    handleCompanyChange(value) {
+      this.value = value
+      fetch(value, data => (this.companyData = data))
+    },
+    handleDetail(event, { index, value }) {
+      this.$refs.modalForm.show(value)
+      this.$refs.modalForm.title = '详情'
+    },
+    flushData() {
+      this.imgsArr = []
+      this.pageNo = 1
+      this.getData()
+    },
+    modalFormOk() {},
+    getQueryParams() {
+      //获取查询条件
+      var param = Object.assign(this.queryParam)
+      param.pageNo = this.ipagination.current
+      param.pageSize = 20
+      return filterObj(param)
+    },
+    getData() {
+      var params = this.getQueryParams() //查询条件
+      console.log(params)
+      getAction(this.url.feedsUrl, params).then(res => {
+        console.log(res)
+        this.ipagination.current = this.ipagination.current + 1
+        if (res.success) {
+          if (res.result.records.length == 0) {
+            this.$refs.waterfall.waterfallOver()
+            return
+          }
+          var arr = res.result.records.map(item => {
+            return {
+              ...item,
+              src: item.coverThumbnailUrl
+            }
+          })
+          this.imgsArr = this.imgsArr.concat(arr)
+          //   for (var i = 0; i < res.result.records.length; i++) {
+          //     let arr = {}
+          //     arr.id = res.result.records[i].id
+          //     arr.mid = res.result.records[i].mid
+          //     arr.title = res.result.records[i].title
+          //     arr.play = res.result.records[i].play
+          //     arr.share = res.result.records[i].share
+          //     arr.comment = res.result.records[i].comment
+          //     arr.coverImage = res.result.records[i].coverThumbnailUrl
+          //     arr.src = res.result.records[i].coverThumbnailUrl
+          //     arr.url = res.result.records[i].mainMvUrl
+          //     arr.videoId = res.result.records[i].video_id
+          //     arr.coreUserId = res.result.records[i].core_user_id
+          //     arr.nickName = res.result.records[i].nickName
+          //     arr.headImageUri = res.result.records[i].head_image_uri
+          //     arr.likeCnt = res.result.records[i].like_cnt
+          //     arr.createTime = res.result.records[i].createTime
+          //     this.imgsArr = this.imgsArr.concat(arr)
+          //   }
+        }
+      })
+    }
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tag {
+  position: absolute;
+  left: 8px;
+  top: 8px;
+  padding: 4px;
+  border-radius: 2px;
+  line-height: 16px;
+  font-size: 12px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+</style>
+<style lang="scss">
+.adcover_waterfall_container {
+  .img-box {
+    .img-inner-box {
+      position: relative;
+      cursor: pointer;
+
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s;
+      .img-wraper {
+        // height: 427px!important;
+        img {
+        }
+      }
+      .img-info {
+        position: relative;
+        // height: 146px!important;
+        .some-info {
+          color: rgba(0, 0, 0, 0.65);
+          padding: 10px;
+          ul {
+            margin: 0;
+            padding: 0;
+            li {
+              list-style: none;
+              padding: 0;
+              margin: 0;
+            }
+          }
+        }
+        .cover_star {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          padding: 10px;
+          z-index: 1;
+          color: rgba(0, 0, 0, 0.65);
+          .coverStar {
+            color: red;
+          }
+        }
+      }
+    }
+  }
+}
+.scroll_top {
+  position: fixed;
+  z-index: 9;
+  right: 80px;
+  bottom: 40px;
+  display: none;
+  cursor: pointer;
+  color: #1890ff;
+  font-size: 40px;
+}
+</style>
+<style>
+.list-pubu .ball-beat {
+  height: 100px;
+}
+.list-pubu .loading {
+  position: fixed !important;
+  z-index: 10 !important;
+  left: 60% !important;
+  bottom: 0 !important;
+}
+.sider.light {
+  z-index: 11;
+}
+</style>

+ 316 - 0
src/views/openMindCreativity/creativeVideo.vue

@@ -0,0 +1,316 @@
+<template>
+  <a-row :gutter="10" class="list-pubu">
+    <vue-waterfall-easy
+      class="adcover_waterfall_container"
+      ref="waterfall"
+      :imgsArr="imgsArr"
+      @click="handleDetail"
+      @scrollReachBottom="getData"
+      style="height: 800px;"
+    >
+      <!-- majorIndustryName -->
+
+      <span slot-scope="props" class="tag">{{ props.value.firstIndustryName }}</span>
+      <div slot="waterfall-over">无更多数据</div>
+    </vue-waterfall-easy>
+    <app-ad-modal ref="modalForm"></app-ad-modal>
+    <div class="scroll_top">
+      <a-icon type="to-top" />
+    </div>
+  </a-row>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+import { filterObj } from '@/utils/util'
+import vueWaterfallEasy from 'vue-waterfall-easy'
+import AppAdModal from './modules/creativeModal'
+import JTreeSelect from '@/components/jeecg/JTreeSelect'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import ARow from 'ant-design-vue/es/grid/Row'
+import ACol from 'ant-design-vue/es/grid/Col'
+import AFormItem from 'ant-design-vue/es/form/FormItem'
+import moment from 'moment'
+import $ from 'jquery'
+
+let timeout
+let currentValue
+
+function fetch(value, callback) {
+  if (timeout) {
+    clearTimeout(timeout)
+    timeout = null
+  }
+  currentValue = value
+
+  function fake() {}
+
+  timeout = setTimeout(fake, 300)
+}
+
+$(function() {
+  $('.scroll_top').click(function() {
+    $('.vue-waterfall-easy-scroll').animate(
+      {
+        scrollTop: 0
+      },
+      500
+    )
+    return false
+  })
+  $('.vue-waterfall-easy-scroll').scroll(function() {
+    var top = $('.vue-waterfall-easy-scroll').scrollTop()
+    if (top >= 100) {
+      $('.scroll_top').fadeIn()
+    } else {
+      $('.scroll_top').fadeOut()
+    }
+  })
+})
+
+export default {
+  name: 'waterfall',
+  data() {
+    return {
+      queryParam: {
+        // sortType: 1
+      },
+      time: [],
+      companyData: [],
+      productData: [],
+      value: undefined,
+      imgsArr: [],
+      pageNo: 1, // request param
+      url: {
+        feedsUrl: '/ctop/kuaishouInspiredAd/list',
+        companySugestUrl: '/ctop/kuaishou/advertiser/companysugest',
+        productSugestUrl: '/ctop/kuaishou/advertiser/productsugest',
+        list: '/ctop/kuaishouInspiredAd/list'
+      },
+      validatorRules: {
+        pid: {},
+        name: {},
+        code: {}
+      },
+      pidField: 'pid',
+      isCoverStar: false // 收藏
+    }
+  },
+  components: {
+    AFormItem,
+    ACol,
+    ARow,
+    vueWaterfallEasy,
+    AppAdModal,
+    JTreeSelect
+  },
+  mixins: [JeecgListMixin],
+  methods: {
+    searchQuery() {
+      this.imgsArr = []
+      this.ipagination.current = 1
+      if (this.time != null && this.time.length > 0) {
+        this.queryParam.start = moment(this.time[0]).format('YYYY-MM-DD')
+        this.queryParam.end = moment(this.time[1]).format('YYYY-MM-DD')
+      }
+
+      this.getData()
+    },
+    searchReset() {
+      //   this.queryParam = {
+      //     sortType: 1
+      //   }
+      this.imgsArr = []
+      this.time = []
+      this.ipagination.current = 1
+      this.ipagination.pageSize = 20
+      this.getData()
+    },
+    handleProductSearch(value) {
+      getAction(this.url.productSugestUrl, { product: value }).then(res => {
+        console.log(res)
+        if (currentValue === value) {
+          const result = res.result
+          const data = []
+          result.forEach(r => {
+            data.push({
+              value: r,
+              text: r
+            })
+          })
+          this.productData = data
+        }
+      })
+      fetch(value)
+    },
+    handleProductChange(value) {
+      this.value = value
+      fetch(value, data => (this.productData = data))
+    },
+    handleCompanySearch(value) {
+      getAction(this.url.companySugestUrl, { company: value }).then(res => {
+        if (currentValue === value) {
+          const result = res.result
+          const data = []
+          result.forEach(r => {
+            data.push({
+              value: r,
+              text: r
+            })
+          })
+          this.companyData = data
+        }
+      })
+      fetch(value)
+    },
+    handleCompanyChange(value) {
+      this.value = value
+      fetch(value, data => (this.companyData = data))
+    },
+    handleDetail(event, { index, value }) {
+      this.$refs.modalForm.show(value)
+      this.$refs.modalForm.title = '详情'
+    },
+    flushData() {
+      this.imgsArr = []
+      this.pageNo = 1
+      this.getData()
+    },
+    modalFormOk() {},
+    getQueryParams() {
+      //获取查询条件
+      var param = Object.assign(this.queryParam)
+      param.pageNo = this.ipagination.current
+      param.pageSize = 20
+      return filterObj(param)
+    },
+    getData() {
+      var params = this.getQueryParams() //查询条件
+      console.log(params)
+      getAction(this.url.feedsUrl, params).then(res => {
+        console.log(res)
+        this.ipagination.current = this.ipagination.current + 1
+        if (res.success) {
+          if (res.result.records.length == 0) {
+            this.$refs.waterfall.waterfallOver()
+            return
+          }
+          var arr = res.result.records.map(item => {
+            return {
+              ...item,
+              src: item.coverThumbnailUrl
+            }
+          })
+          this.imgsArr = this.imgsArr.concat(arr)
+          //   for (var i = 0; i < res.result.records.length; i++) {
+          //     let arr = {}
+          //     arr.id = res.result.records[i].id
+          //     arr.mid = res.result.records[i].mid
+          //     arr.title = res.result.records[i].title
+          //     arr.play = res.result.records[i].play
+          //     arr.share = res.result.records[i].share
+          //     arr.comment = res.result.records[i].comment
+          //     arr.coverImage = res.result.records[i].coverThumbnailUrl
+          //     arr.src = res.result.records[i].coverThumbnailUrl
+          //     arr.url = res.result.records[i].mainMvUrl
+          //     arr.videoId = res.result.records[i].video_id
+          //     arr.coreUserId = res.result.records[i].core_user_id
+          //     arr.nickName = res.result.records[i].nickName
+          //     arr.headImageUri = res.result.records[i].head_image_uri
+          //     arr.likeCnt = res.result.records[i].like_cnt
+          //     arr.createTime = res.result.records[i].createTime
+          //     this.imgsArr = this.imgsArr.concat(arr)
+          //   }
+        }
+      })
+    }
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tag {
+  position: absolute;
+  left: 8px;
+  top: 8px;
+  padding: 4px;
+  border-radius: 2px;
+  line-height: 16px;
+  font-size: 12px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+</style>
+<style lang="scss">
+.adcover_waterfall_container {
+  .img-box {
+    .img-inner-box {
+      position: relative;
+      cursor: pointer;
+
+      -webkit-transition: all 0.3s;
+      transition: all 0.3s;
+      .img-wraper {
+        // height: 427px!important;
+        img {
+        }
+      }
+      .img-info {
+        position: relative;
+        // height: 146px!important;
+        .some-info {
+          color: rgba(0, 0, 0, 0.65);
+          padding: 10px;
+          ul {
+            margin: 0;
+            padding: 0;
+            li {
+              list-style: none;
+              padding: 0;
+              margin: 0;
+            }
+          }
+        }
+        .cover_star {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          padding: 10px;
+          z-index: 1;
+          color: rgba(0, 0, 0, 0.65);
+          .coverStar {
+            color: red;
+          }
+        }
+      }
+    }
+  }
+}
+.scroll_top {
+  position: fixed;
+  z-index: 9;
+  right: 80px;
+  bottom: 40px;
+  display: none;
+  cursor: pointer;
+  color: #1890ff;
+  font-size: 40px;
+}
+</style>
+<style>
+.list-pubu .ball-beat {
+  height: 100px;
+}
+.list-pubu .loading {
+  position: fixed !important;
+  z-index: 10 !important;
+  left: 60% !important;
+  bottom: 0 !important;
+}
+.sider.light {
+  z-index: 11;
+}
+</style>

BIN
src/views/openMindCreativity/images/arrow_left.png


BIN
src/views/openMindCreativity/images/arrow_right.png


+ 323 - 0
src/views/openMindCreativity/modules/AppAdModal.vue

@@ -0,0 +1,323 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="1300"
+    :visible="visible"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    class="ad_cover_container"
+  >
+    <div>
+      <a-row>
+        <a-col :span="8" class="addetail_left">
+          <a-tabs :defaultActiveKey="defaultActiveKey">
+            <a-tab-pane tab="视频" key="1">
+              <div class="item">
+                <div class="player">
+                  <video-player
+                    class="vjs-custom-skin"
+                    ref="videoPlayer"
+                    :options="playerOptions"
+                    :playsinline="true"
+                    @play="onPlayerPlay($event)"
+                    @pause="onPlayerPause($event)"
+                    @ended="onPlayerEnded($event)"
+                    @loadeddata="onPlayerLoadeddata($event)"
+                    @waiting="onPlayerWaiting($event)"
+                    @playing="onPlayerPlaying($event)"
+                    @timeupdate="onPlayerTimeupdate($event)"
+                    @canplay="onPlayerCanplay($event)"
+                    @canplaythrough="onPlayerCanplaythrough($event)"
+                    @ready="playerReadied"
+                    @statechanged="playerStateChanged($event)"
+                  ></video-player>
+                </div>
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </a-col>
+        <a-col :span="16" class="addetail_right">
+          <div v-if="videoModel != null">
+            <detail-list :col="1">
+              <detail-list-item term="简介">{{ videoModel.caption }}</detail-list-item>
+            </detail-list>
+            <detail-list :col="1">
+              <detail-list-item term="播放数">{{ videoModel.playingTime }}</detail-list-item>
+            </detail-list>
+            <detail-list :col="1">
+              <detail-list-item term="点赞数">{{ videoModel.likeTime }}</detail-list-item>
+            </detail-list>
+            <detail-list :col="1">
+              <detail-list-item term="评论数">{{ videoModel.commentTime }}</detail-list-item>
+            </detail-list>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </a-modal>
+</template>
+<script>
+// custom skin css
+// import '../src/custom-theme.css'
+import 'video.js/dist/video-js.css'
+import { videoPlayer } from 'vue-video-player'
+import DetailList from '@/components/tools/DetailList'
+import PageLayout from '@/components/page/PageLayout'
+import STable from '@/components/table/'
+import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
+const DetailListItem = DetailList.Item
+export default {
+  components: {
+    videoPlayer,
+    PageLayout,
+    DetailList,
+    DetailListItem,
+    STable
+  },
+  data() {
+    return {
+      goodsColumns: [
+        {
+          title: '封面ID',
+          dataIndex: 'coverId',
+          key: 'coverId'
+        },
+        {
+          title: '封面预览',
+          //   dataIndex: 'coverUrl',
+          //   key: 'coverUrl',
+          dataIndex: 'ADcoverImagePreview',
+          scopedSlots: { customRender: 'ADcoverImagePreview' }
+        },
+        {
+          title: '创意ID',
+          dataIndex: 'creativeId',
+          key: 'creativeId'
+        },
+        {
+          title: '展示数',
+          dataIndex: 'viewCount',
+          key: 'viewCount'
+        },
+        {
+          title: '喜欢数',
+          dataIndex: 'likeCount',
+          key: 'likeCount'
+        },
+        {
+          title: '评论数',
+          dataIndex: 'commentCount',
+          key: 'commentCount'
+        },
+        {
+          title: '质量分',
+          dataIndex: 'score',
+          key: 'score'
+        },
+        {
+          title: 'App名称',
+          dataIndex: 'appName',
+          key: 'appName'
+        },
+        {
+          title: '发布时间',
+          dataIndex: 'time',
+          key: 'time'
+        }
+      ],
+      userId: 0,
+      photoId: 0,
+      title: '操作',
+      visible: false,
+      model: [],
+      userModel: {},
+      videoModel: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      // videojs options
+      playerOptions: {
+        height: '640',
+        width: '360',
+        autoplay: false,
+        muted: true,
+        language: 'en',
+        playbackRates: [0.7, 1.0, 1.5, 2.0],
+        sources: [
+          {
+            type: 'video/mp4',
+            // mp4
+            src: ''
+            // webm
+            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
+          }
+        ],
+        poster: ''
+      },
+      defaultActiveKey: '1',
+
+      //   封面预览弹窗
+      coverPreviewVisible: false,
+      coverPreviewMaskStyle: {
+        background: 'rgba(0,0,0,.08)'
+      },
+      coverPreviewUrl: ''
+    }
+  },
+  mounted() {
+    // console.log('this is current player instance object', this.player)
+    setTimeout(() => {
+      //   console.log('dynamic change options', this.player)
+      // change src
+      // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
+      // change item
+      // this.$set(this.playerOptions.sources, 0, {
+      //   type: "video/mp4",
+      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
+      // })
+      // change array
+      // this.playerOptions.sources = [{
+      //   type: "video/mp4",
+      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
+      // }]
+      //   this.player.muted(false)
+    }, 5000)
+  },
+  computed: {
+    // player() {
+    //   return this.$refs.videoPlayer.player
+    // }
+  },
+  methods: {
+    // listen event
+    onPlayerPlay(player) {
+      // console.log('player play!', player)
+    },
+    onPlayerPause(player) {
+      //   console.log('player pause!', player)
+    },
+    onPlayerEnded(player) {
+      // console.log('player ended!', player)
+    },
+    onPlayerLoadeddata(player) {
+      // console.log('player Loadeddata!', player)
+    },
+    onPlayerWaiting(player) {
+      // console.log('player Waiting!', player)
+    },
+    onPlayerPlaying(player) {
+      // console.log('player Playing!', player)
+    },
+    onPlayerTimeupdate(player) {
+      // console.log('player Timeupdate!', player.currentTime())
+    },
+    onPlayerCanplay(player) {
+      // console.log('player Canplay!', player)
+    },
+    onPlayerCanplaythrough(player) {
+      // console.log('player Canplaythrough!', player)
+    },
+    // or listen state event
+    playerStateChanged(playerCurrentState) {
+      // console.log('player current update state', playerCurrentState)
+    },
+    // player is ready
+    playerReadied(player) {
+      // seek to 10s
+      console.log('example player 1 readied', player)
+      // player.currentTime(10)
+      // console.log('example 01: the player is readied', player)
+    },
+    show(value) {
+      this.model = []
+      this.userModel = {}
+      this.videoModel = value
+      this.playerOptions.sources[0].src = value.mainMvUrl
+      this.visible = true
+      this.defaultActiveKey = '1'
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.defaultActiveKey = '1'
+      closeAllVideoFun()
+    },
+    handleCancel() {
+      this.close()
+      this.defaultActiveKey = '1'
+    },
+
+    // 封面预览弹窗
+    coverPreviewShowModal(record) {
+      this.coverPreviewVisible = true
+      this.coverPreviewUrl = record.coverUrl
+      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,.08)'
+    },
+    coverPreviewHandleOk() {
+      this.coverPreviewVisible = false
+      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
+    },
+    coverPreviewHandleCancel() {
+      this.coverPreviewVisible = false
+      this.coverPreviewUrl = ''
+      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
+    }
+  }
+}
+</script>
+<style lang="scss">
+.ant-carousel >>> .slick-slide {
+  text-align: center;
+  //   height: 160px;
+  //   line-height: 160px;
+  background: #364d79;
+  overflow: hidden;
+}
+
+.ad_cover_container .ant-card-body {
+  padding: 0;
+}
+
+.ant-carousel >>> .slick-slide h3 {
+  color: #fff;
+}
+.ant-carousel >>> .custom-slick-arrow {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  color: #fff;
+  background-color: rgba(31, 45, 61, 0.11);
+  opacity: 0.3;
+}
+.ant-carousel >>> .custom-slick-arrow:before {
+  display: none;
+}
+.ant-carousel >>> .custom-slick-arrow:hover {
+  opacity: 0.5;
+}
+.addetail_left {
+  padding-right: 56px;
+  .custom-slick-arrow {
+    width: 40px;
+    height: 40px;
+  }
+  .slick_arrow_left {
+    background: url(../images/arrow_left.png);
+  }
+  .slick_arrow_right {
+    background: url(../images/arrow_right.png);
+  }
+  .slick_arrow_left:hover {
+    background: url(../images/arrow_left.png) !important;
+  }
+  .slick_arrow_right:hover {
+    background: url(../images/arrow_right.png) !important;
+  }
+}
+</style>

+ 323 - 0
src/views/openMindCreativity/modules/analysisModal.vue

@@ -0,0 +1,323 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="1300"
+    :visible="visible"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    class="ad_cover_container"
+  >
+    <div>
+      <a-row>
+        <a-col :span="8" class="addetail_left">
+          <a-tabs :defaultActiveKey="defaultActiveKey">
+            <a-tab-pane tab="视频" key="1">
+              <div class="item">
+                <div class="player">
+                  <video-player
+                    class="vjs-custom-skin"
+                    ref="videoPlayer"
+                    :options="playerOptions"
+                    :playsinline="true"
+                    @play="onPlayerPlay($event)"
+                    @pause="onPlayerPause($event)"
+                    @ended="onPlayerEnded($event)"
+                    @loadeddata="onPlayerLoadeddata($event)"
+                    @waiting="onPlayerWaiting($event)"
+                    @playing="onPlayerPlaying($event)"
+                    @timeupdate="onPlayerTimeupdate($event)"
+                    @canplay="onPlayerCanplay($event)"
+                    @canplaythrough="onPlayerCanplaythrough($event)"
+                    @ready="playerReadied"
+                    @statechanged="playerStateChanged($event)"
+                  ></video-player>
+                </div>
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </a-col>
+        <a-col :span="16" class="addetail_right">
+          <div v-if="videoModel != null">
+            <detail-list :col="1">
+              <detail-list-item term="简介">{{ videoModel.caption }}</detail-list-item>
+            </detail-list>
+            <!-- <detail-list :col="1">
+              <detail-list-item term="播放数">{{ videoModel.playingTime }}</detail-list-item>
+            </detail-list>
+            <detail-list :col="1">
+              <detail-list-item term="点赞数">{{ videoModel.likeTime }}</detail-list-item>
+            </detail-list>
+            <detail-list :col="1">
+              <detail-list-item term="评论数">{{ videoModel.commentTime }}</detail-list-item>
+            </detail-list> -->
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </a-modal>
+</template>
+<script>
+// custom skin css
+// import '../src/custom-theme.css'
+import 'video.js/dist/video-js.css'
+import { videoPlayer } from 'vue-video-player'
+import DetailList from '@/components/tools/DetailList'
+import PageLayout from '@/components/page/PageLayout'
+import STable from '@/components/table/'
+import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
+const DetailListItem = DetailList.Item
+export default {
+  components: {
+    videoPlayer,
+    PageLayout,
+    DetailList,
+    DetailListItem,
+    STable
+  },
+  data() {
+    return {
+      goodsColumns: [
+        {
+          title: '封面ID',
+          dataIndex: 'coverId',
+          key: 'coverId'
+        },
+        {
+          title: '封面预览',
+          //   dataIndex: 'coverUrl',
+          //   key: 'coverUrl',
+          dataIndex: 'ADcoverImagePreview',
+          scopedSlots: { customRender: 'ADcoverImagePreview' }
+        },
+        {
+          title: '创意ID',
+          dataIndex: 'creativeId',
+          key: 'creativeId'
+        },
+        {
+          title: '展示数',
+          dataIndex: 'viewCount',
+          key: 'viewCount'
+        },
+        {
+          title: '喜欢数',
+          dataIndex: 'likeCount',
+          key: 'likeCount'
+        },
+        {
+          title: '评论数',
+          dataIndex: 'commentCount',
+          key: 'commentCount'
+        },
+        {
+          title: '质量分',
+          dataIndex: 'score',
+          key: 'score'
+        },
+        {
+          title: 'App名称',
+          dataIndex: 'appName',
+          key: 'appName'
+        },
+        {
+          title: '发布时间',
+          dataIndex: 'time',
+          key: 'time'
+        }
+      ],
+      userId: 0,
+      photoId: 0,
+      title: '操作',
+      visible: false,
+      model: [],
+      userModel: {},
+      videoModel: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      // videojs options
+      playerOptions: {
+        height: '640',
+        width: '360',
+        autoplay: false,
+        muted: true,
+        language: 'en',
+        playbackRates: [0.7, 1.0, 1.5, 2.0],
+        sources: [
+          {
+            type: 'video/mp4',
+            // mp4
+            src: ''
+            // webm
+            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
+          }
+        ],
+        poster: ''
+      },
+      defaultActiveKey: '1',
+
+      //   封面预览弹窗
+      coverPreviewVisible: false,
+      coverPreviewMaskStyle: {
+        background: 'rgba(0,0,0,.08)'
+      },
+      coverPreviewUrl: ''
+    }
+  },
+  mounted() {
+    // console.log('this is current player instance object', this.player)
+    setTimeout(() => {
+      //   console.log('dynamic change options', this.player)
+      // change src
+      // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
+      // change item
+      // this.$set(this.playerOptions.sources, 0, {
+      //   type: "video/mp4",
+      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
+      // })
+      // change array
+      // this.playerOptions.sources = [{
+      //   type: "video/mp4",
+      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
+      // }]
+      //   this.player.muted(false)
+    }, 5000)
+  },
+  computed: {
+    // player() {
+    //   return this.$refs.videoPlayer.player
+    // }
+  },
+  methods: {
+    // listen event
+    onPlayerPlay(player) {
+      // console.log('player play!', player)
+    },
+    onPlayerPause(player) {
+      //   console.log('player pause!', player)
+    },
+    onPlayerEnded(player) {
+      // console.log('player ended!', player)
+    },
+    onPlayerLoadeddata(player) {
+      // console.log('player Loadeddata!', player)
+    },
+    onPlayerWaiting(player) {
+      // console.log('player Waiting!', player)
+    },
+    onPlayerPlaying(player) {
+      // console.log('player Playing!', player)
+    },
+    onPlayerTimeupdate(player) {
+      // console.log('player Timeupdate!', player.currentTime())
+    },
+    onPlayerCanplay(player) {
+      // console.log('player Canplay!', player)
+    },
+    onPlayerCanplaythrough(player) {
+      // console.log('player Canplaythrough!', player)
+    },
+    // or listen state event
+    playerStateChanged(playerCurrentState) {
+      // console.log('player current update state', playerCurrentState)
+    },
+    // player is ready
+    playerReadied(player) {
+      // seek to 10s
+      console.log('example player 1 readied', player)
+      // player.currentTime(10)
+      // console.log('example 01: the player is readied', player)
+    },
+    show(value) {
+      this.model = []
+      this.userModel = {}
+      this.videoModel = value
+      this.playerOptions.sources[0].src = value.mainMvUrl
+      this.visible = true
+      this.defaultActiveKey = '1'
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.defaultActiveKey = '1'
+      closeAllVideoFun()
+    },
+    handleCancel() {
+      this.close()
+      this.defaultActiveKey = '1'
+    },
+
+    // 封面预览弹窗
+    coverPreviewShowModal(record) {
+      this.coverPreviewVisible = true
+      this.coverPreviewUrl = record.coverUrl
+      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,.08)'
+    },
+    coverPreviewHandleOk() {
+      this.coverPreviewVisible = false
+      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
+    },
+    coverPreviewHandleCancel() {
+      this.coverPreviewVisible = false
+      this.coverPreviewUrl = ''
+      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
+    }
+  }
+}
+</script>
+<style lang="scss">
+.ant-carousel >>> .slick-slide {
+  text-align: center;
+  //   height: 160px;
+  //   line-height: 160px;
+  background: #364d79;
+  overflow: hidden;
+}
+
+.ad_cover_container .ant-card-body {
+  padding: 0;
+}
+
+.ant-carousel >>> .slick-slide h3 {
+  color: #fff;
+}
+.ant-carousel >>> .custom-slick-arrow {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  color: #fff;
+  background-color: rgba(31, 45, 61, 0.11);
+  opacity: 0.3;
+}
+.ant-carousel >>> .custom-slick-arrow:before {
+  display: none;
+}
+.ant-carousel >>> .custom-slick-arrow:hover {
+  opacity: 0.5;
+}
+.addetail_left {
+  padding-right: 56px;
+  .custom-slick-arrow {
+    width: 40px;
+    height: 40px;
+  }
+  .slick_arrow_left {
+    background: url(../images/arrow_left.png);
+  }
+  .slick_arrow_right {
+    background: url(../images/arrow_right.png);
+  }
+  .slick_arrow_left:hover {
+    background: url(../images/arrow_left.png) !important;
+  }
+  .slick_arrow_right:hover {
+    background: url(../images/arrow_right.png) !important;
+  }
+}
+</style>

+ 323 - 0
src/views/openMindCreativity/modules/creativeModal.vue

@@ -0,0 +1,323 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="1300"
+    :visible="visible"
+    @cancel="handleCancel"
+    cancelText="关闭"
+    class="ad_cover_container"
+  >
+    <div>
+      <a-row>
+        <a-col :span="8" class="addetail_left">
+          <a-tabs :defaultActiveKey="defaultActiveKey">
+            <a-tab-pane tab="视频" key="1">
+              <div class="item">
+                <div class="player">
+                  <video-player
+                    class="vjs-custom-skin"
+                    ref="videoPlayer"
+                    :options="playerOptions"
+                    :playsinline="true"
+                    @play="onPlayerPlay($event)"
+                    @pause="onPlayerPause($event)"
+                    @ended="onPlayerEnded($event)"
+                    @loadeddata="onPlayerLoadeddata($event)"
+                    @waiting="onPlayerWaiting($event)"
+                    @playing="onPlayerPlaying($event)"
+                    @timeupdate="onPlayerTimeupdate($event)"
+                    @canplay="onPlayerCanplay($event)"
+                    @canplaythrough="onPlayerCanplaythrough($event)"
+                    @ready="playerReadied"
+                    @statechanged="playerStateChanged($event)"
+                  ></video-player>
+                </div>
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </a-col>
+        <a-col :span="16" class="addetail_right">
+          <div v-if="videoModel != null">
+            <detail-list :col="1">
+              <detail-list-item term="简介">{{ videoModel.caption }}</detail-list-item>
+            </detail-list>
+            <!-- <detail-list :col="1">
+              <detail-list-item term="播放数">{{ videoModel.playingTime }}</detail-list-item>
+            </detail-list>
+            <detail-list :col="1">
+              <detail-list-item term="点赞数">{{ videoModel.likeTime }}</detail-list-item>
+            </detail-list>
+            <detail-list :col="1">
+              <detail-list-item term="评论数">{{ videoModel.commentTime }}</detail-list-item>
+            </detail-list> -->
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </a-modal>
+</template>
+<script>
+// custom skin css
+// import '../src/custom-theme.css'
+import 'video.js/dist/video-js.css'
+import { videoPlayer } from 'vue-video-player'
+import DetailList from '@/components/tools/DetailList'
+import PageLayout from '@/components/page/PageLayout'
+import STable from '@/components/table/'
+import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
+const DetailListItem = DetailList.Item
+export default {
+  components: {
+    videoPlayer,
+    PageLayout,
+    DetailList,
+    DetailListItem,
+    STable
+  },
+  data() {
+    return {
+      goodsColumns: [
+        {
+          title: '封面ID',
+          dataIndex: 'coverId',
+          key: 'coverId'
+        },
+        {
+          title: '封面预览',
+          //   dataIndex: 'coverUrl',
+          //   key: 'coverUrl',
+          dataIndex: 'ADcoverImagePreview',
+          scopedSlots: { customRender: 'ADcoverImagePreview' }
+        },
+        {
+          title: '创意ID',
+          dataIndex: 'creativeId',
+          key: 'creativeId'
+        },
+        {
+          title: '展示数',
+          dataIndex: 'viewCount',
+          key: 'viewCount'
+        },
+        {
+          title: '喜欢数',
+          dataIndex: 'likeCount',
+          key: 'likeCount'
+        },
+        {
+          title: '评论数',
+          dataIndex: 'commentCount',
+          key: 'commentCount'
+        },
+        {
+          title: '质量分',
+          dataIndex: 'score',
+          key: 'score'
+        },
+        {
+          title: 'App名称',
+          dataIndex: 'appName',
+          key: 'appName'
+        },
+        {
+          title: '发布时间',
+          dataIndex: 'time',
+          key: 'time'
+        }
+      ],
+      userId: 0,
+      photoId: 0,
+      title: '操作',
+      visible: false,
+      model: [],
+      userModel: {},
+      videoModel: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      // videojs options
+      playerOptions: {
+        height: '640',
+        width: '360',
+        autoplay: false,
+        muted: true,
+        language: 'en',
+        playbackRates: [0.7, 1.0, 1.5, 2.0],
+        sources: [
+          {
+            type: 'video/mp4',
+            // mp4
+            src: ''
+            // webm
+            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
+          }
+        ],
+        poster: ''
+      },
+      defaultActiveKey: '1',
+
+      //   封面预览弹窗
+      coverPreviewVisible: false,
+      coverPreviewMaskStyle: {
+        background: 'rgba(0,0,0,.08)'
+      },
+      coverPreviewUrl: ''
+    }
+  },
+  mounted() {
+    // console.log('this is current player instance object', this.player)
+    setTimeout(() => {
+      //   console.log('dynamic change options', this.player)
+      // change src
+      // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
+      // change item
+      // this.$set(this.playerOptions.sources, 0, {
+      //   type: "video/mp4",
+      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
+      // })
+      // change array
+      // this.playerOptions.sources = [{
+      //   type: "video/mp4",
+      //   src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
+      // }]
+      //   this.player.muted(false)
+    }, 5000)
+  },
+  computed: {
+    // player() {
+    //   return this.$refs.videoPlayer.player
+    // }
+  },
+  methods: {
+    // listen event
+    onPlayerPlay(player) {
+      // console.log('player play!', player)
+    },
+    onPlayerPause(player) {
+      //   console.log('player pause!', player)
+    },
+    onPlayerEnded(player) {
+      // console.log('player ended!', player)
+    },
+    onPlayerLoadeddata(player) {
+      // console.log('player Loadeddata!', player)
+    },
+    onPlayerWaiting(player) {
+      // console.log('player Waiting!', player)
+    },
+    onPlayerPlaying(player) {
+      // console.log('player Playing!', player)
+    },
+    onPlayerTimeupdate(player) {
+      // console.log('player Timeupdate!', player.currentTime())
+    },
+    onPlayerCanplay(player) {
+      // console.log('player Canplay!', player)
+    },
+    onPlayerCanplaythrough(player) {
+      // console.log('player Canplaythrough!', player)
+    },
+    // or listen state event
+    playerStateChanged(playerCurrentState) {
+      // console.log('player current update state', playerCurrentState)
+    },
+    // player is ready
+    playerReadied(player) {
+      // seek to 10s
+      console.log('example player 1 readied', player)
+      // player.currentTime(10)
+      // console.log('example 01: the player is readied', player)
+    },
+    show(value) {
+      this.model = []
+      this.userModel = {}
+      this.videoModel = value
+      this.playerOptions.sources[0].src = value.mainMvUrl
+      this.visible = true
+      this.defaultActiveKey = '1'
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.defaultActiveKey = '1'
+      closeAllVideoFun()
+    },
+    handleCancel() {
+      this.close()
+      this.defaultActiveKey = '1'
+    },
+
+    // 封面预览弹窗
+    coverPreviewShowModal(record) {
+      this.coverPreviewVisible = true
+      this.coverPreviewUrl = record.coverUrl
+      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,.08)'
+    },
+    coverPreviewHandleOk() {
+      this.coverPreviewVisible = false
+      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
+    },
+    coverPreviewHandleCancel() {
+      this.coverPreviewVisible = false
+      this.coverPreviewUrl = ''
+      this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
+    }
+  }
+}
+</script>
+<style lang="scss">
+.ant-carousel >>> .slick-slide {
+  text-align: center;
+  //   height: 160px;
+  //   line-height: 160px;
+  background: #364d79;
+  overflow: hidden;
+}
+
+.ad_cover_container .ant-card-body {
+  padding: 0;
+}
+
+.ant-carousel >>> .slick-slide h3 {
+  color: #fff;
+}
+.ant-carousel >>> .custom-slick-arrow {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  color: #fff;
+  background-color: rgba(31, 45, 61, 0.11);
+  opacity: 0.3;
+}
+.ant-carousel >>> .custom-slick-arrow:before {
+  display: none;
+}
+.ant-carousel >>> .custom-slick-arrow:hover {
+  opacity: 0.5;
+}
+.addetail_left {
+  padding-right: 56px;
+  .custom-slick-arrow {
+    width: 40px;
+    height: 40px;
+  }
+  .slick_arrow_left {
+    background: url(../images/arrow_left.png);
+  }
+  .slick_arrow_right {
+    background: url(../images/arrow_right.png);
+  }
+  .slick_arrow_left:hover {
+    background: url(../images/arrow_left.png) !important;
+  }
+  .slick_arrow_right:hover {
+    background: url(../images/arrow_right.png) !important;
+  }
+}
+</style>

+ 2 - 2
vue.config.js

@@ -64,10 +64,10 @@ module.exports = {
          }
        },*/
       '/jeecg-boot': {
-        target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
+        // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
         // target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.2.143:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
-        // target: 'http://192.168.2.110:8080', //请求本地 需要jeecg-boot后台项目  英豪
+        target: 'http://192.168.2.110:8080', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.2.132:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
         // target: 'http://192.168.2.132:8080', //请求本地 需要jeecg-boot后台项目  孙震