Browse Source

快手创意创建、素材管理、应用管理页面以及素材封面查询页面调整

刘政和 5 years ago
parent
commit
c9dc30cc77

+ 12 - 4
src/mixins/JeecgListMixin.js

@@ -177,13 +177,21 @@ export const JeecgListMixin = {
         }
       });
     },
-    handleEdit: function (record) {
-      this.$refs.modalForm.edit(record);
+    handleEdit: function (record,sign) {
+      this.$refs.modalForm.edit(record,sign);
       this.$refs.modalForm.title = "编辑";
       this.$refs.modalForm.disableSubmit = false;
+      if(sign == 'preview'){
+        this.$refs.modalForm.title = "预览";
+      }
+    },
+    handleImagePreview: function (record) {
+        this.$refs.modalForm.imagePreview(record);
+        this.$refs.modalForm.title = "预览";
+        this.$refs.modalForm.disableSubmit = false;
     },
-    handleAdd: function () {
-      this.$refs.modalForm.add();
+    handleAdd: function (sign) {
+      this.$refs.modalForm.add(sign);
       this.$refs.modalForm.title = "新增";
       this.$refs.modalForm.disableSubmit = false;
     },

+ 33 - 0
src/utils/videoControl.js

@@ -0,0 +1,33 @@
+import $ from 'jquery';
+
+// 播放当前视频时停止其他视频播放
+const stopOtherVideo = function () {
+    $(document).ready(function () {
+        let videos = $('video');
+        function pauseAll() {
+            let self = this;
+            ;[].forEach.call(videos, i => {
+                // 将 videos 中其他的 video 全部暂停
+                i !== self && i.pause();
+                // i !== self && i.load();
+
+            });
+        };
+        // 给play事件绑定暂停函数
+        ;[].forEach.call(videos, i => {
+            i.addEventListener('play', pauseAll.bind(i))
+        });
+    });
+};
+
+// 关闭所有视频
+const closeAllVideoFun = function () {
+    let videos = $('video');
+    let videosArr = Array.prototype.slice.call(videos);
+    videosArr.forEach(x => {
+        x.pause();
+        // x.load();
+    });
+};
+
+export { stopOtherVideo, closeAllVideoFun }

+ 293 - 188
src/views/modules/appad/AdList.vue

@@ -14,8 +14,8 @@
                     v-decorator="['pid', validatorRules.pid]"
                     dict="sys_category,name,id"
                     pidField="pid"
-                    pidValue="67d69117968be1eecb1e705b399b9d93">
-                  </j-tree-select>
+                    pidValue="67d69117968be1eecb1e705b399b9d93"
+                  ></j-tree-select>
                 </a-form-item>
               </a-col>
               <a-col :md="8" :sm="8">
@@ -58,12 +58,9 @@
                 <a-form-item
                   label="发布日期"
                   :labelCol="{lg: {span: 7}, sm: {span: 7}}"
-                  :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
-                  <a-range-picker
-                    name="buildTime"
-                    style="width: 100%"
-                    v-model="time"
-                  />
+                  :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+                >
+                  <a-range-picker name="buildTime" style="width: 100%" v-model="time" />
                 </a-form-item>
               </a-col>
               <a-col :md="8" :sm="8">
@@ -94,216 +91,324 @@
               </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-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 ref="waterfall" :imgsArr="imgsArr" @click="handleDetail" @scrollReachBottom="getData"
-                        style="height: 800px;">
+    <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">
-        <p class="some-info">发布人:{{props.value.userName}},质量分:{{props.value.score}}<br/>发布时间:{{props.value.time}}<br/>展示:{{props.value.viewCount}},喜欢:{{props.value.likeCount}},评论:{{props.value.commentCount}}
-        </p>
+        <div class="some-info">
+          <ul>
+            <li>
+              <b>发布人:</b>
+              <span>{{props.value.userName}}</span>
+            </li>
+            <li>
+              <b>质量分:</b>
+              <span>{{props.value.score}}</span>
+            </li>
+            <li>
+              <b>发布时间:</b>
+              <span>{{props.value.time}}</span>
+            </li>
+            <li>
+              <b>展示:</b>
+              <span>{{props.value.viewCount}}</span>
+            </li>
+            <li>
+              <b>喜欢:</b>
+              <span>{{props.value.likeCount}}</span>
+            </li>
+            <li>
+              <b>评论:</b>
+              <span>{{props.value.commentCount}}</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 { 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;
+let timeout
+let currentValue
 
-  function fetch(value, callback) {
-    if (timeout) {
-      clearTimeout(timeout);
-      timeout = null;
-    }
-    currentValue = value;
+function fetch(value, callback) {
+  if (timeout) {
+    clearTimeout(timeout)
+    timeout = null
+  }
+  currentValue = value
+
+  function fake() {}
 
-    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()
     }
+  })
+})
 
-    timeout = setTimeout(fake, 300);
-  }
+export default {
+  name: 'waterfall',
+  // mixins:[JeecgListMixin],
+  data() {
+    return {
+      queryParam: {
+        orderByColumn: 'create_time',
+        orderByType: 'desc',
+        start: '',
+        end: ''
+      },
+      time: [],
+      companyData: [],
+      productData: [],
+      value: undefined,
+      imgsArr: [],
+      pageNo: 1, // request param
+      url: {
+        feedsUrl: '/ctop/adcover/feeds',
+        companySugestUrl: '/ctop/kuaishou/advertiser/companysugest',
+        productSugestUrl: '/ctop/kuaishou/advertiser/productsugest',
+        list: '/ctop/adcover/feeds'
+      },
+      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')
+      }
 
-  export default {
-    name: 'waterfall',
-    // mixins:[JeecgListMixin],
-    data() {
-      return {
-        queryParam: {
-          orderByColumn: 'create_time',
-          orderByType: 'desc',
-          start: '',
-          end: ''
-        },
-        time: [],
-        companyData: [],
-        productData: [],
-        value: undefined,
-        imgsArr: [],
-        pageNo: 1,// request param
-        url: {
-          feedsUrl: '/ctop/adcover/feeds',
-          companySugestUrl: '/ctop/kuaishou/advertiser/companysugest',
-          productSugestUrl: '/ctop/kuaishou/advertiser/productsugest',
-          list: '/ctop/adcover/feeds',
-        },
-        validatorRules: {
-          pid: {},
-          name: {},
-          code: {},
-        },
-        pidField: "pid"
+      this.getData()
+    },
+    searchReset() {
+      this.queryParam = {
+        orderByColumn: 'create_time',
+        orderByType: 'desc'
       }
+      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)
     },
-    components: {
-      AFormItem,
-      ACol,
-      ARow,
-      vueWaterfallEasy,
-      AppAdModal,
-      JTreeSelect,
+    handleProductChange(value) {
+      this.value = value
+      fetch(value, data => (this.productData = data))
     },
-    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')
+    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
         }
-
-        this.getData();
-      },
-      searchReset() {
-        this.queryParam = {
-          orderByColumn: 'create_time',
-          orderByType: 'desc'
+      })
+      fetch(value)
+    },
+    handleCompanyChange(value) {
+      this.value = value
+      fetch(value, data => (this.companyData = data))
+    },
+    handleDetail(event, { index, value }) {
+      this.$refs.modalForm.show(value.photoId, value.userId)
+      this.$refs.modalForm.title = '详情'
+    },
+    flushData() {
+      this.imgsArr = []
+      this.pageNo = 1
+      this.getData()
+    },
+    modalFormOk() {},
+    getQueryParams() {
+      //获取查询条件
+      var param = Object.assign(this.queryParam, this.isorter, this.filters)
+      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.length == 0) {
+            this.$refs.waterfall.waterfallOver()
+            return
+          }
+          for (var i = 0; i < res.result.length; i++) {
+            let arr = {}
+            arr.coverId = res.result[i].coverId
+            arr.src = res.result[i].coverUrl
+            arr.time = res.result[i].time
+            arr.userName = res.result[i].userName
+            arr.viewCount = res.result[i].viewCount
+            arr.likeCount = res.result[i].likeCount
+            arr.commentCount = res.result[i].commentCount
+            arr.score = res.result[i].score
+            arr.userId = res.result[i].userId
+            arr.photoId = res.result[i].photoId
+            //arr.href=res.result.records[i].mvUrl
+            this.imgsArr = this.imgsArr.concat(arr)
+          }
         }
-        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.photoId, value.userId);
-        this.$refs.modalForm.title = "详情";
-      },
-      flushData() {
-        this.imgsArr = []
-        this.pageNo = 1
-        this.getData()
-      },
-      modalFormOk() {
+      })
+    },
+  },
+  created() {
+    this.getData()
+  }
+}
+</script>
 
-      },
-      getQueryParams() {
-        //获取查询条件
-        var param = Object.assign(this.queryParam, this.isorter, this.filters);
-        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.length == 0) {
-              this.$refs.waterfall.waterfallOver()
-              return
-            }
-            for (var i = 0; i < res.result.length; i++) {
-              let arr = {}
-              arr.coverId = res.result[i].coverId
-              arr.src = res.result[i].coverUrl
-              arr.time = res.result[i].time
-              arr.userName = res.result[i].userName
-              arr.viewCount = res.result[i].viewCount
-              arr.likeCount = res.result[i].likeCount
-              arr.commentCount = res.result[i].commentCount
-              arr.score = res.result[i].score
-              arr.userId = res.result[i].userId
-              arr.photoId = res.result[i].photoId
-              //arr.href=res.result.records[i].mvUrl
-              this.imgsArr = this.imgsArr.concat(arr)
 
+<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;
             }
           }
-        })
-      },
-    },
-    created() {
-      this.getData()
+        }
+        .cover_star {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          padding: 10px;
+          z-index: 1;
+          color: rgba(0, 0, 0, 0.65);
+          .coverStar {
+            color: red;
+          }
+        }
+      }
     }
   }
-</script>
-
-<style scoped>
-
+}
+.scroll_top {
+  position: fixed;
+  z-index: 9;
+  right: 80px;
+  bottom: 40px;
+  display: none;
+  cursor: pointer;
+  color: #1890ff;
+  font-size: 40px;
+}
 </style>

BIN
src/views/modules/appad/images/arrow_left.png


BIN
src/views/modules/appad/images/arrow_right.png


+ 291 - 253
src/views/modules/appad/modules/AppAdModal.vue

@@ -1,59 +1,73 @@
 <template>
-  <a-modal
-    :title="title"
-    :width="1300"
-    :visible="visible"
-    @cancel="handleCancel"
-    cancelText="关闭">
+  <a-modal :title="title" :width="1300" :visible="visible" @cancel="handleCancel" cancelText="关闭">
     <div>
       <a-row>
-        <a-col :span="8">
-          <a-tabs defaultActiveKey="1">
+        <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>
+                  <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-tab-pane tab="视频封面" key="2">
               <a-carousel>
-                <div v-if="videoModel != null"><img :src="videoModel.coverUrl" :width="360"></div>
+                <div v-if="videoModel != null">
+                  <img :src="videoModel.coverUrl" :width="360" />
+                </div>
               </a-carousel>
             </a-tab-pane>
             <a-tab-pane tab="广告封面" key="3">
-              <a-carousel>
-                <div v-for="item in model">
-                  <img :src="item.coverUrl" :width="360">
+              <a-carousel arrows>
+                <div v-for="(item,index) in model" :key="index">
+                  <img :src="item.coverUrl" :width="360" />
+                </div>
+                <div
+                  slot="prevArrow"
+                  slot-scope
+                  class="custom-slick-arrow slick_arrow_left"
+                  style="left: 10px;zIndex: 1"
+                >
+                  <a-icon type="left-circle" />
+                </div>
+                <div
+                  slot="nextArrow"
+                  slot-scope
+                  class="custom-slick-arrow slick_arrow_right"
+                  style="right: 10px;zIndex: 9"
+                >
+                  <a-icon type="right-circle" />
                 </div>
               </a-carousel>
             </a-tab-pane>
           </a-tabs>
-
         </a-col>
-        <a-col :span="16">
+        <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="3">
-              <detail-list-item term="快手视频ID"><a :href="[videoModel.share_info]"
-                                                 target="_blank">{{videoModel.photo_id}}</a></detail-list-item>
+              <detail-list-item term="快手视频ID">
+                <a :href="[videoModel.share_info]" target="_blank">{{videoModel.photo_id}}</a>
+              </detail-list-item>
               <detail-list-item term="发布时间">{{videoModel.time}}</detail-list-item>
               <detail-list-item term="抓取时间">{{videoModel.createTime}}</detail-list-item>
             </detail-list>
@@ -65,7 +79,8 @@
           </div>
           <div v-if="userModel != null">
             <detail-list :col="3">
-              <detail-list-item term="发布人"><a :href="[userModel.url]" target="_blank">{{userModel.name}}</a>
+              <detail-list-item term="发布人">
+                <a :href="[userModel.url]" target="_blank">{{userModel.name}}</a>
               </detail-list-item>
               <detail-list-item term="广告主">{{userModel.company}}</detail-list-item>
               <detail-list-item term="推广产品">{{userModel.product}}</detail-list-item>
@@ -76,248 +91,271 @@
               <detail-list-item term="二级行业">{{userModel.secondIndustry}}</detail-list-item>
             </detail-list>
           </div>
-          <a-table
-            :columns="goodsColumns"
-            :dataSource="model"
-            :pagination="false">
-
-          </a-table>
-
-
+          <a-table :columns="goodsColumns" :dataSource="model" :pagination="false"></a-table>
         </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'
+// 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'
 
-  const DetailListItem = DetailList.Item
-  export default {
-    components: {
-      videoPlayer,
-      PageLayout,
-      DetailList,
-      DetailListItem,
-      STable
-    },
-    data() {
-      return {
-        goodsColumns: [
-          {
-            title: '封面ID',
-            dataIndex: 'coverId',
-            key: 'coverId'
-          },
-          {
-            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},
+const DetailListItem = DetailList.Item
+export default {
+  components: {
+    videoPlayer,
+    PageLayout,
+    DetailList,
+    DetailListItem,
+    STable
+  },
+  data() {
+    return {
+      goodsColumns: [
+        {
+          title: '封面ID',
+          dataIndex: 'coverId',
+          key: 'coverId'
         },
-        wrapperCol: {
-          xs: {span: 24},
-          sm: {span: 16},
+        {
+          title: '创意ID',
+          dataIndex: 'creativeId',
+          key: 'creativeId'
         },
-        // videojs options
-        playerOptions: {
-          height: '640',
-          width: '360',
-          autoplay: true,
-          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: "",
+        {
+          title: '展示数',
+          dataIndex: 'viewCount',
+          key: 'viewCount'
         },
-        loadGoodsData: () => {
-          var params = {
-            "photoId": this.photoId,
-            "userId": this.userId
-          }
-          return getAction("/ctop/adcover/adlist", params).then(res => {
-            this.model = res.result
-            console.log(res.result)
-            return res.result
-          })
+        {
+          title: '喜欢数',
+          dataIndex: 'likeCount',
+          key: 'likeCount'
         },
-      }
-    },
-    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)
+        {
+          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 }
       },
-      // 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)
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
       },
-      show(photoId, userId) {
-        this.model = []
-        this.userModel = {}
-        this.videoModel = {}
-        this.playerOptions.sources[0].src = ""
-        this.photoId = photoId
-        this.userId = userId
-        this.loadDetail(photoId, userId)
-        this.visible = true;
+      // 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: ''
       },
-      loadDetail(photoId, userId) {
+      loadGoodsData: () => {
         var params = {
-          "photoId": photoId,
-          "userId": userId
+          photoId: this.photoId,
+          userId: this.userId
         }
-        console.log(params)
-        getAction("/ctop/adcover/detail", params).then((res) => {
-          if (res.success) {
-            console.log(res.result)
-            this.userModel = res.result.user
-            this.videoModel = res.result.video
-            this.model = res.result.adlist
-            if (res.result.video != null) {
-              this.playerOptions.sources[0].src = res.result.video.mvUrl
-            }
-
-            // this.dataSource = res.result.records;
-          }
+        return getAction('/ctop/adcover/adlist', params).then(res => {
+          this.model = res.result
+          console.log(res.result)
+          return res.result
         })
-
-      },
-      close() {
-        this.$emit('close');
-        this.visible = false;
-      },
-      handleCancel() {
-        this.close()
       },
+      defaultActiveKey:"1"
+    }
+  },
+  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(photoId, userId) {
+      this.model = []
+      this.userModel = {}
+      this.videoModel = {}
+      this.playerOptions.sources[0].src = ''
+      this.photoId = photoId
+      this.userId = userId
+      this.loadDetail(photoId, userId)
+      this.visible = true
+      this.defaultActiveKey = "1"
+    },
+    loadDetail(photoId, userId) {
+      var params = {
+        photoId: photoId,
+        userId: userId
+      }
+      console.log(params)
+      getAction('/ctop/adcover/detail', params).then(res => {
+        if (res.success) {
+          console.log(res.result)
+          this.userModel = res.result.user
+          this.videoModel = res.result.video
+          this.model = res.result.adlist
+          if (res.result.video != null) {
+            this.playerOptions.sources[0].src = res.result.video.mvUrl
+          }
+
+          // this.dataSource = res.result.records;
+        }
+      })
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+      this.defaultActiveKey = "1";
+    },
+    handleCancel() {
+      this.close()
+      this.defaultActiveKey = "1";
     }
   }
+}
 </script>
-<style>
-  .ant-carousel >>> .slick-slide {
-    text-align: center;
-    height: 160px;
-    line-height: 160px;
-    background: #364d79;
-    overflow: hidden;
-  }
+<style lang="scss" scoped>
+.ant-carousel >>> .slick-slide {
+  text-align: center;
+  height: 160px;
+  line-height: 160px;
+  background: #364d79;
+  overflow: hidden;
+}
 
-  .ant-card-body {
-    padding: 0;
-  }
+.ant-card-body {
+  padding: 0;
+}
 
-  .ant-carousel >>> .slick-slide h3 {
-    color: #fff;
+.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-image: url(../images/arrow_left.png);
+  }
+  .slick_arrow_right {
+    background-image: url(../images/arrow_right.png);
   }
+}
 </style>

+ 2 - 2
src/views/modules/kuaishouapp/KuaiShouCreateAppTemplateList.vue

@@ -50,7 +50,7 @@
 
     <!-- 操作按钮区域 -->
     <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <a-button @click="handleAdd('add')" type="primary" icon="plus">新增</a-button>
       <a-button type="primary" icon="download" @click="handleExportXls('创建应用')">导出</a-button>
       <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
         <a-button type="primary" icon="import">导入</a-button>
@@ -83,7 +83,7 @@
         @change="handleTableChange">
 
         <span slot="action" slot-scope="text, record">
-          <a @click="handleEdit(record)">编辑</a>
+          <a @click="handleEdit(record,'edit')">编辑</a>
 
           <a-divider type="vertical" />
           <a-dropdown>

+ 184 - 95
src/views/modules/kuaishouapp/KuaiShouImageList.vue

@@ -1,63 +1,77 @@
 <template>
   <a-card :bordered="false">
-
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
         <a-row :gutter="24">
-
-
-          <a-col :md="6" :sm="8">
-            <a-form-item label="">
-              <a-input  v-model="queryParam.imageName"></a-input>
-            </a-form-item>
-          </a-col>
-        <template v-if="toggleSearchStatus">
-        <a-col :md="6" :sm="8">
-            <a-form-item label="视频类别">
-              <a-input placeholder="请输入视频类别" v-model="queryParam.imageType"></a-input>
-            </a-form-item>
-          </a-col>
           <a-col :md="6" :sm="8">
-            <a-form-item label="图片类型">
-              <a-input placeholder="请输入图片类型" v-model="queryParam.materialType"></a-input>
+            <a-form-item label>
+              <a-input v-model="queryParam.imageName"></a-input>
             </a-form-item>
           </a-col>
+          <template v-if="toggleSearchStatus">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="视频类别">
+                <a-input placeholder="请输入视频类别" v-model="queryParam.imageType"></a-input>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="8">
+              <a-form-item label="图片类型">
+                <a-input placeholder="请输入图片类型" v-model="queryParam.materialType"></a-input>
+              </a-form-item>
+            </a-col>
           </template>
-          <a-col :md="6" :sm="8" >
+          <a-col :md="6" :sm="8">
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
               <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-button
+                type="primary"
+                @click="searchReset"
+                icon="reload"
+                style="margin-left: 8px"
+              >重置</a-button>
               <a @click="handleToggleSearch" style="margin-left: 8px">
                 {{ toggleSearchStatus ? '收起' : '展开' }}
-                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
               </a>
             </span>
           </a-col>
-
         </a-row>
       </a-form>
     </div>
 
     <!-- 操作按钮区域 -->
     <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <a-button @click="handleAdd()" type="primary" icon="plus">新增</a-button>
       <a-button type="primary" icon="download" @click="handleExportXls('快手-本地图片保存')">导出</a-button>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+      <a-upload
+        name="file"
+        :showUploadList="false"
+        :multiple="false"
+        :headers="tokenHeader"
+        :action="importExcelUrl"
+        @change="handleImportExcel"
+      >
         <a-button type="primary" icon="import">导入</a-button>
       </a-upload>
       <a-dropdown v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay">
-          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+          <a-menu-item key="1" @click="batchDel">
+            <a-icon type="delete" />删除
+          </a-menu-item>
         </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
+        <a-button style="margin-left: 8px">
+          批量操作
+          <a-icon type="down" />
+        </a-button>
       </a-dropdown>
     </div>
 
     <!-- table区域-begin -->
     <div>
       <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
+        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
         <a style="margin-left: 24px" @click="onClearSelected">清空</a>
       </div>
 
@@ -71,14 +85,17 @@
         :pagination="ipagination"
         :loading="loading"
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange">
-
+        @change="handleTableChange"
+      >
         <span slot="action" slot-scope="text, record">
           <a @click="handleEdit(record)">编辑</a>
 
           <a-divider type="vertical" />
           <a-dropdown>
-            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
+            <a class="ant-dropdown-link">
+              更多
+              <a-icon type="down" />
+            </a>
             <a-menu slot="overlay">
               <a-menu-item>
                 <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
@@ -89,6 +106,45 @@
           </a-dropdown>
         </span>
 
+        <!-- 图片预览 -->
+        <div slot="coverImagePreview" slot-scope="text, record">
+          <img
+            style="width:100px;cursor: pointer;"
+            :src="record.localUrl"
+            @click="imagePreviewShowModal(record)"
+          />
+          <a-modal
+            title="图片预览"
+            v-model="imagePreviewVisible"
+            @ok="imagePreviewHandleOk"
+            @cancel="imagePreviewHandleCancel"
+            :footer="null"
+            :maskStyle="imagePreviewMaskStyle"
+          >
+            <div style="text-align:center;">
+              <img style="width:250px;" :src="imagePreviewUrl" />
+            </div>
+          </a-modal>
+          <!-- <img style="width:100px;" :src="record.localUrl" @click="handleEdit(record,'preview')" /> -->
+        </div>
+
+        <!-- 图片类别 -->
+        <!-- <div slot="imageTypeShow" slot-scope="text, record">
+            {{record.imageType}}
+            {{imageTypeArr}}
+        </div>-->
+
+        <!-- 图片类型 -->
+        <div
+          slot="materialTypeShow"
+          slot-scope="text, record"
+        >{{materialTypeArr[record.materialType]}}</div>
+
+        <!-- 素材类型 -->
+        <div
+          slot="positionTypeShow"
+          slot-scope="text, record"
+        >{{positionTypeArr[record.positionType]}}</div>
       </a-table>
     </div>
     <!-- table区域-end -->
@@ -99,82 +155,115 @@
 </template>
 
 <script>
-  import KuaiShouImageModal from './modules/KuaiShouImageModal'
-  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-
-  export default {
-    name: "KuaiShouImageList",
-    mixins:[JeecgListMixin],
-    components: {
-      KuaiShouImageModal
-    },
-    data () {
-      return {
-        description: '快手-本地图片保存管理页面',
-        // 表头
-        columns: [
-          {
-            title: '#',
-            dataIndex: '',
-            key:'rowIndex',
-            width:60,
-            align:"center",
-            customRender:function (t,r,index) {
-              return parseInt(index)+1;
-            }
-           },
-		   {
-            title: '图片保存地址',
-            align:"center",
-            dataIndex: 'localUrl'
-           },
-		   {
-            title: '图片名称',
-            align:"center",
-            dataIndex: 'imageName'
-           },
-		   {
-            title: '图片类别',
-            align:"center",
-            dataIndex: 'imageType'
-           },
+import KuaiShouImageModal from './modules/KuaiShouImageModal'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 
-		   {
-            title: '图片类型',
-            align:"center",
-            dataIndex: 'materialType'
-           },
-          {
-            title: '素材',
-            align:"center",
-            dataIndex: 'positionType'
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align:"center",
-            scopedSlots: { customRender: 'action' },
+export default {
+  name: 'KuaiShouImageList',
+  mixins: [JeecgListMixin],
+  components: {
+    KuaiShouImageModal
+  },
+  data() {
+    return {
+      imageTypeArr: ['类别1', '类别2'], // 图片类别
+      materialTypeArr: ['', '竖版图片', '横版图片'], // 图片类型
+      positionTypeArr: ['', '信息广告流', '后贴片'], // 素材类型
+      description: '快手-本地图片保存管理页面',
+      // 表头
+      columns: [
+        {
+          title: '#',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function(t, r, index) {
+            return parseInt(index) + 1
           }
-        ],
-		url: {
-          list: "/kuaishou/kuaiShouImage/list",
-          delete: "/kuaishou/kuaiShouImage/delete",
-          deleteBatch: "/kuaishou/kuaiShouImage/deleteBatch",
-          exportXlsUrl: "kuaishou/kuaiShouImage/exportXls",
-          importExcelUrl: "kuaishou/kuaiShouImage/importExcel",
-       },
+        },
+        {
+          title: '图片保存地址',
+          align: 'center',
+          // dataIndex: 'localUrl',
+          dataIndex: 'coverImagePreview',
+          scopedSlots: { customRender: 'coverImagePreview' }
+        },
+        {
+          title: '图片名称',
+          align: 'center',
+          dataIndex: 'imageName'
+        },
+        // {
+        //   title: '图片类别',
+        //   align: 'center',
+        //   dataIndex: 'imageType'
+        //   //   dataIndex: 'imageTypeShow',
+        //   // scopedSlots: { customRender: 'imageTypeShow' }
+        // },
+
+        {
+          title: '图片类型',
+          align: 'center',
+          //   dataIndex: 'materialType'
+          dataIndex: 'materialTypeShow',
+          scopedSlots: { customRender: 'materialTypeShow' }
+        },
+        {
+          title: '素材',
+          align: 'center',
+          //   dataIndex: 'positionType',
+          dataIndex: 'positionTypeShow',
+          scopedSlots: { customRender: 'positionTypeShow' }
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: '/kuaishou/kuaiShouImage/list',
+        delete: '/kuaishou/kuaiShouImage/delete',
+        deleteBatch: '/kuaishou/kuaiShouImage/deleteBatch',
+        exportXlsUrl: 'kuaishou/kuaiShouImage/exportXls',
+        importExcelUrl: 'kuaishou/kuaiShouImage/importExcel'
+      },
+
+      //   图片预览弹窗
+      imagePreviewVisible: false,
+      imagePreviewMaskStyle: {
+        background: 'rgba(0,0,0,.08)'
+      },
+      imagePreviewUrl: ''
     }
   },
   computed: {
-    importExcelUrl: function(){
-      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+    importExcelUrl: function() {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
     }
   },
-    methods: {
-     
+  methods: {
+    testUrl(url) {
+      console.log(url)
+    },
+
+    // 图片预览弹窗
+    imagePreviewShowModal(record) {
+      this.imagePreviewVisible = true
+      this.imagePreviewUrl = record.localUrl
+    },
+    imagePreviewHandleOk() {
+      this.imagePreviewVisible = false
+    },
+    imagePreviewHandleCancel() {
+      this.imagePreviewVisible = false
+      this.imagePreviewUrl = ''
     }
   }
+}
 </script>
 <style scoped>
-  @import '~@assets/less/common.less'
+@import '~@assets/less/common.less';
 </style>

+ 114 - 83
src/views/modules/kuaishouapp/KuaiShouVideoList.vue

@@ -1,12 +1,9 @@
 <template>
   <a-card :bordered="false">
-
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
         <a-row :gutter="24">
-
-
           <template v-if="toggleSearchStatus">
             <a-col :md="6" :sm="8">
               <a-form-item label="视频名称">
@@ -22,35 +19,45 @@
           <a-col :md="6" :sm="8">
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
               <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-button
+                type="primary"
+                @click="searchReset"
+                icon="reload"
+                style="margin-left: 8px"
+              >重置</a-button>
               <a @click="handleToggleSearch" style="margin-left: 8px">
                 {{ toggleSearchStatus ? '收起' : '展开' }}
-                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
               </a>
             </span>
           </a-col>
-
         </a-row>
       </a-form>
     </div>
 
     <!-- 操作按钮区域 -->
     <div class="table-operator">
-      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <a-button @click="handleAdd('add')" type="primary" icon="plus">新增</a-button>
       <a-button type="primary" icon="download" @click="handleExportXls('快手-上传视频')">导出</a-button>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
-                @change="handleImportExcel">
+      <a-upload
+        name="file"
+        :showUploadList="false"
+        :multiple="false"
+        :headers="tokenHeader"
+        :action="importExcelUrl"
+        @change="handleImportExcel"
+      >
         <a-button type="primary" icon="import">导入</a-button>
       </a-upload>
       <a-dropdown v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay">
           <a-menu-item key="1" @click="batchDel">
-            <a-icon type="delete"/>
-            删除
+            <a-icon type="delete" />删除
           </a-menu-item>
         </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作
-          <a-icon type="down"/>
+        <a-button style="margin-left: 8px">
+          批量操作
+          <a-icon type="down" />
         </a-button>
       </a-dropdown>
     </div>
@@ -58,8 +65,11 @@
     <!-- table区域-begin -->
     <div>
       <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
-        selectedRowKeys.length }}</a>项
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
+        <a style="font-weight: 600">
+          {{
+          selectedRowKeys.length }}
+        </a>项
         <a style="margin-left: 24px" @click="onClearSelected">清空</a>
       </div>
 
@@ -73,14 +83,17 @@
         :pagination="ipagination"
         :loading="loading"
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        @change="handleTableChange">
-
+        @change="handleTableChange"
+      >
         <span slot="action" slot-scope="text, record">
           <a @click="handleEdit(record)">编辑</a>
 
-          <a-divider type="vertical"/>
+          <a-divider type="vertical" />
           <a-dropdown>
-            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
+            <a class="ant-dropdown-link">
+              更多
+              <a-icon type="down" />
+            </a>
             <a-menu slot="overlay">
               <a-menu-item>
                 <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
@@ -91,6 +104,17 @@
           </a-dropdown>
         </span>
 
+        <!-- 视频预览 -->
+        <div slot="coverVideoPreview" slot-scope="text, record" class="coverVideoPreview">
+          <video
+            class="video"
+            style="width:100px;"
+            :src="record.localUrl"
+            controls="controls"
+          >您的浏览器不支持 video 标签。</video>
+          <img src="" alt="">
+        </div>
+        <!-- 视频预览 E -->
       </a-table>
     </div>
     <!-- table区域-end -->
@@ -101,75 +125,82 @@
 </template>
 
 <script>
-  import KuaiShouVideoModal from './modules/KuaiShouVideoModal'
-  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
-
-  export default {
-    name: "KuaiShouVideoList",
-    mixins: [JeecgListMixin],
-    components: {
-      KuaiShouVideoModal
-    },
-    data() {
-      return {
-        description: '快手-上传视频管理页面',
-        // 表头
-        columns: [
-          {
-            title: '#',
-            dataIndex: '',
-            key: 'rowIndex',
-            width: 60,
-            align: "center",
-            customRender: function (t, r, index) {
-              return parseInt(index) + 1;
-            }
-          },
-          {
-            title: '视频本地地址',
-            align: "center",
-            dataIndex: 'localUrl'
-          },
-          {
-            title: '视频描述',
-            align: "center",
-            dataIndex: 'videoDesc'
-          },
-          {
-            title: '视频名称',
-            align: "center",
-            dataIndex: 'videoName'
-          },
-          {
-            title: '视频类别',
-            align: "center",
-            dataIndex: 'videoType'
-          },
+import KuaiShouVideoModal from './modules/KuaiShouVideoModal'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { create } from 'domain'
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
 
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align: "center",
-            scopedSlots: {customRender: 'action'},
+export default {
+  name: 'KuaiShouVideoList',
+  mixins: [JeecgListMixin],
+  components: {
+    KuaiShouVideoModal
+  },
+  data() {
+    return {
+      description: '快手-上传视频管理页面',
+      // 表头
+      columns: [
+        {
+          title: '#',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: 'center',
+          customRender: function(t, r, index) {
+            return parseInt(index) + 1
           }
-        ],
-        url: {
-          list: "/kuaishou/kuaiShouVideo/list",
-          delete: "/kuaishou/kuaiShouVideo/delete",
-          deleteBatch: "/kuaishou/kuaiShouVideo/deleteBatch",
-          exportXlsUrl: "kuaishou/kuaiShouVideo/exportXls",
-          importExcelUrl: "kuaishou/kuaiShouVideo/importExcel",
         },
+        {
+          title: '视频本地地址',
+          align: 'center',
+          // dataIndex: 'localUrl',
+          dataIndex: 'coverVideoPreview',
+          scopedSlots: { customRender: 'coverVideoPreview' }
+        },
+        {
+          title: '视频描述',
+          align: 'center',
+          dataIndex: 'videoDesc'
+        },
+        {
+          title: '视频名称',
+          align: 'center',
+          dataIndex: 'videoName'
+        },
+        {
+          title: '视频类别',
+          align: 'center',
+          dataIndex: 'videoType'
+        },
+
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: '/kuaishou/kuaiShouVideo/list',
+        delete: '/kuaishou/kuaiShouVideo/delete',
+        deleteBatch: '/kuaishou/kuaiShouVideo/deleteBatch',
+        exportXlsUrl: 'kuaishou/kuaiShouVideo/exportXls',
+        importExcelUrl: 'kuaishou/kuaiShouVideo/importExcel'
       }
-    },
-    computed: {
-      importExcelUrl: function () {
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
-      }
-    },
-    methods: {}
+    }
+  },
+  computed: {
+    importExcelUrl: function() {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
+    }
+  },
+  methods: {},
+  updated() {
+    stopOtherVideo()
   }
+}
 </script>
 <style scoped>
-  @import '~@assets/less/common.less'
+@import '~@assets/less/common.less';
 </style>

+ 8 - 35
src/views/modules/kuaishouapp/creativeCreate.vue

@@ -416,6 +416,7 @@
   import moment from 'moment'
   import VuePreview from 'vue-preview'
   import jq from 'jquery'
+  import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
 
   export default {
     name: 'BaseForm',
@@ -551,28 +552,28 @@
       // 上传视频弹窗
       handleOkVideo(e) {
         this.visibleVideo = false
-        this.closeAllVideoFun()
+        closeAllVideoFun()
       },
       showModalVideo() {
         this.visibleVideo = true
-        this.stopOtherVideo()
+        stopOtherVideo()
       },
       handleCancelVideo() {
-        this.closeAllVideoFun()
+        closeAllVideoFun()
         this.videoUrl = ''
       },
 
       // 有单张图片的上传视频弹窗,多选
       handleOkSinglePicVideo(e) {
         this.visibleSinglePicVideo = false
-        this.closeAllVideoFun()
+        closeAllVideoFun()
       },
       showSinglePicModalVideo() {
         this.visibleSinglePicVideo = true
-        this.stopOtherVideo()
+        stopOtherVideo()
       },
       handleCancelSinglePicVideo() {
-        this.closeAllVideoFun()
+        closeAllVideoFun()
         this.videoUrl = ''
       },
       //   视频多选
@@ -581,34 +582,6 @@
         console.log(this.haveSinglePicVideoUrl)
       },
 
-      // 停止播放除当前外的视频
-      stopOtherVideo() {
-        jq(document).ready(function() {
-          // 播放当前视频停止其他视频
-          let videos = jq('video')
-
-          function pauseAll() {
-            let self = this
-            ;[].forEach.call(videos, i => {
-              // 将 videos 中其他的 video 全部暂停
-              i !== self && i.pause()
-            })
-          }
-          // 给play事件绑定暂停函数
-          ;[].forEach.call(videos, i => {
-            i.addEventListener('play', pauseAll.bind(i))
-          })
-        })
-      },
-      // 停止播放所有视频
-      closeAllVideoFun() {
-        let videos = jq('video')
-        let videosArr = Array.prototype.slice.call(videos)
-        videosArr.forEach(x => {
-          x.pause()
-        })
-      },
-
       changChecked() {
         if (this.imageList.length == this.checkeds.length) {
           this.isAllChecked = true
@@ -1107,7 +1080,7 @@
   }
 
   .ant-modal-body {
-    height: 650px;
+    max-height: 650px;
     overflow-y: scroll;
 
     .image_item_container {

+ 426 - 86
src/views/modules/kuaishouapp/modules/KuaiShouCreateAppTemplateModal.vue

@@ -4,11 +4,12 @@
     :width="800"
     :visible="visible"
     :confirmLoading="confirmLoading"
+    :footer="null"
     @ok="handleOk"
     @cancel="handleCancel"
-    cancelText="关闭">
-    
-    <a-spin :spinning="confirmLoading">
+    cancelText="关闭"
+  >
+    <!-- <a-spin :spinning="confirmLoading">
       <a-form :form="form">
       
         <a-form-item
@@ -67,106 +68,445 @@
         </a-form-item>
 		
       </a-form>
-    </a-spin>
+    </a-spin>-->
+    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+      <a-form>
+        <a-form-item
+          label="设备类型"
+          :labelCol="{xs: {span: 24},sm: {span: 5}}"
+          :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+        >
+          <a-radio-group v-model="appType" @change="changePlatform">
+            <a-radio-button value="android">安卓</a-radio-button>
+            <a-radio-button value="ios">IOS</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item v-if="showAndroid">
+          <a-form @submit="handleSubmit" :form="form">
+            <a-form-item
+              label="推广类型"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <a-radio-group v-model="platform" @change="changeShowUploadType">
+                <a-radio value="1">应用下载</a-radio>
+                <a-radio value="2">网页游戏</a-radio>
+              </a-radio-group>
+            </a-form-item>
+
+            <a-form-item
+              label="上传应用"
+              v-if="showUpload"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <a-radio-group v-model="uploadType" @change="changeShowUpload">
+                <a-radio-button value="1">本地上传</a-radio-button>
+                <a-radio-button value="2">填写链接</a-radio-button>
+              </a-radio-group>
+            </a-form-item>
+
+            <a-form-item
+              label="上传文件"
+              v-if="showUploadFile"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <upload-to-ali
+                v-model="file"
+                :customDomain="customDomain"
+                preview
+                :region="region"
+                :bucket="bucket"
+                :accept="acceptVideo"
+                :max="10"
+                :size="1024000"
+                :accessKeyId="accessKeyId"
+                :accessKeySecret="accessKeySecret"
+              ></upload-to-ali>
+            </a-form-item>
+
+            <a-form-item
+              v-if="showDownLoad"
+              label="下载链接"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <a-input placeholder="请填写应用链接" v-model="downloadUrl" />
+            </a-form-item>
+
+            <a-form-item
+              label="应用包名"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <a-input placeholder="请填写包名称,如com.smile.gifmaker" v-model="packageName" />
+            </a-form-item>
+
+            <a-form-item
+              label="应用名称"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <a-input placeholder="请填写应用名称" v-model="appName" />
+            </a-form-item>
+
+            <a-form-item
+              label="上传图标"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <upload-to-ali
+                v-model="imageUrl"
+                :customDomain="customDomain"
+                preview
+                :region="region"
+                :bucket="bucket"
+                :accept="acceptVideo"
+                :max="10"
+                :size="1024000"
+                :accessKeyId="accessKeyId"
+                :accessKeySecret="accessKeySecret"
+              ></upload-to-ali>
+            </a-form-item>
+
+            <a-form-item
+              label="应用标记"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <a-input placeholder="请填写应用标记,必填且不可重复,如快手-5.6.1.66" v-model="appVersion" />
+            </a-form-item>
+
+            <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
+              <a-button htmlType="submit" type="primary">提交</a-button>
+              <a-button style="margin-left: 8px">保存</a-button>
+            </a-form-item>
+          </a-form>
+        </a-form-item>
+
+        <a-form-item v-if="showIOS">
+          <a-form @submit="submitIOS" :form="form">
+            <a-form-item
+              label="推广类型"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <a-radio-group v-model="platform">
+                <a-radio value="3">应用下载</a-radio>
+                <a-radio value="4">网页游戏</a-radio>
+              </a-radio-group>
+            </a-form-item>
+
+            <a-form-item
+              v-if="showDownLoad"
+              label="填写链接"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <a-input placeholder="请填写应用下载地址" v-model="downloadUrl" />
+            </a-form-item>
+
+            <a-form-item
+              label="应用名称"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <a-input placeholder="请填写应用名称" v-model="appName" />
+            </a-form-item>
+            <a-form-item
+              label="应用标记"
+              :labelCol="{xs: {span: 24},sm: {span: 5}}"
+              :wrapperCol="{xs: {span: 24},sm: {span: 16}}"
+            >
+              <a-input placeholder="请填写应用标记,必填且不可重复,如快手-5.6.1.66" v-model="appVersion" />
+            </a-form-item>
+            <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
+              <a-button htmlType="submit" type="primary">提交</a-button>
+              <a-button style="margin-left: 8px">保存</a-button>
+            </a-form-item>
+          </a-form>
+        </a-form-item>
+      </a-form>
+    </a-card>
   </a-modal>
 </template>
 
 <script>
-  import { httpAction } from '@/api/manage'
-  import pick from 'lodash.pick'
-  import moment from "moment"
-
-  export default {
-    name: "KuaiShouCreateAppTemplateModal",
-    data () {
-      return {
-        title:"操作",
-        visible: false,
-        model: {},
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 },
-        },
-
-        confirmLoading: false,
-        form: this.$form.createForm(this),
-        validatorRules:{
-        },
-        url: {
-          add: "/kuaishou/kuaiShouCreateAppTemplate/add",
-          edit: "/kuaishou/kuaiShouCreateAppTemplate/edit",
-        },
+import { httpAction } from '@/api/manage'
+import pick from 'lodash.pick'
+import moment from 'moment'
+
+import { deleteAction, postAction, getAction } from '@/api/manage'
+import UploadToAli from '@femessage/upload-to-ali'
+import { mapActions, mapGetters } from 'vuex'
+import { constants } from 'crypto'
+
+export default {
+  name: 'KuaiShouCreateAppTemplateModal',
+  components: {
+    UploadToAli
+  },
+  data() {
+    return {
+      title: '操作',
+      visible: false,
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      validatorRules: {},
+      url: {
+        add: '/kuaishou/kuaiShouCreateAppTemplate/add',
+        edit: '/kuaishou/kuaiShouCreateAppTemplate/edit'
+      },
+
+      appType: 'android', //设备类型
+      platform: '1', //应用类型   : 1 Android 应用下载,2: Android 网页游戏,3: iOS 应用下载, 4:iOS 网页游戏
+      uploadType: '1', //上传类型 1 本地上传 2 填写链接
+      appVersion: '', //应用标记
+      appName: '', // 应用名称
+      packageName: '', //应用包名
+      file: '', // 上传文件
+      imageUrl: '', // 上传图标链接链接
+      downloadUrl: '', //下载链接
+      showUploadFile: true,
+      showDownLoad: false,
+      showUpload: true,
+      showAndroid: true,
+      showIOS: false,
+      customDomain: '',
+      acceptVideo: '/*.apk,/*.png,/*.jpg,/*.jpeg,/*.mp4',
+      accessKeyId: 'LTAIbNbqWzSOklQV',
+      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+      region: 'oss-cn-beijing',
+      bucket: 'ctop-media',
+      form: this.$form.createForm(this),
+      url: {
+        insertTemplateUrl: '/kuaishou/kuaiShouCreateAppTemplate/insert'
       }
+    }
+  },
+  created() {},
+  methods: {
+    ...mapGetters(['nickname', 'avatar', 'userInfo']),
+    add(sign) {
+      this.edit({})
+      this.appType = 'android'
     },
-    created () {
+    edit(record, sign) {
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.visible = true
+      this.appType = record.appType
+      this.platform = record.platform
+      this.appVersion = record.appVersion
+      this.appName = record.appName
+      this.packageName = record.packageName
+      this.file = record.file
+      this.imageUrl = record.imageUrl
+      this.url = record.url
+      this.loginId = record.loginId
+        // this.$nextTick(() => {
+        //   this.form.setFieldsValue(
+        //     pick(
+        //       (this.appType = record.appType),
+        //       (this.platform = record.platform),
+        //       (this.appVersion = record.appVersion),
+        //       (this.appName = record.appName),
+        //       (this.packageName = record.packageName),
+        //       (this.file = record.file),
+        //       (this.imageUrl = record.imageUrl),
+        //       (this.url = record.url),
+        //       (this.loginId = record.loginId),
+        //       this.model,
+        //       // 'appType',
+        //       // 'platform',
+        //       // 'appVersion',
+        //       // 'appName',
+        //       // 'packageName',
+        //       // 'file',
+        //       // 'imageUrl',
+        //       // 'url',
+        //       // 'loginId'
+        //     )
+        //   )
+        // })
+      if (sign == 'add') {
+        this.appType = 'android'
+      }
     },
-    methods: {
-      add () {
-        this.edit({});
-      },
-      edit (record) {
-        this.form.resetFields();
-        this.model = Object.assign({}, record);
-        this.visible = true;
-        this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model,'appType','platform','appVersion','appName','packageName','file','imageUrl','url','loginId'))
-		  //时间格式化
-        });
+    close() {
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          let httpurl = ''
+          let method = ''
+          if (!this.model.id) {
+            httpurl += this.url.add
+            method = 'post'
+          } else {
+            httpurl += this.url.edit
+            method = 'put'
+          }
+          let formData = Object.assign(this.model, values)
+          //时间格式化
 
-      },
-      close () {
-        this.$emit('close');
-        this.visible = false;
-      },
-      handleOk () {
-        const that = this;
-        // 触发表单验证
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            that.confirmLoading = true;
-            let httpurl = '';
-            let method = '';
-            if(!this.model.id){
-              httpurl+=this.url.add;
-              method = 'post';
-            }else{
-              httpurl+=this.url.edit;
-               method = 'put';
-            }
-            let formData = Object.assign(this.model, values);
-            //时间格式化
-            
-            console.log(formData)
-            httpAction(httpurl,formData,method).then((res)=>{
-              if(res.success){
-                that.$message.success(res.message);
-                that.$emit('ok');
-              }else{
-                that.$message.warning(res.message);
+          console.log(formData)
+          httpAction(httpurl, formData, method)
+            .then(res => {
+              if (res.success) {
+                that.$message.success(res.message)
+                that.$emit('ok')
+              } else {
+                that.$message.warning(res.message)
               }
-            }).finally(() => {
-              that.confirmLoading = false;
-              that.close();
             })
+            .finally(() => {
+              that.confirmLoading = false
+              that.close()
+            })
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
+    },
+    changePlatform() {
+      if (this.appType == 'android') {
+        this.showAndroid = true
+        this.showIOS = false
+        this.platform = '1'
+      } else {
+        this.showAndroid = false
+        this.showIOS = true
+        this.showDownLoad = true
+        this.platform = '3'
+      }
+    },
+    changeShowUpload() {
+      if (this.uploadType == '1') {
+        this.showUploadFile = true
+        this.showDownLoad = false
+      } else {
+        this.showUploadFile = false
+        this.showDownLoad = true
+      }
+    },
+    changeShowUploadType() {
+      if (this.platform == '2') {
+        this.showUpload = false
+        this.showUploadFile = false
+        this.showDownLoad = true
+        this.uploadType = '1'
+      } else {
+        this.showUpload = true
+        this.showUploadFile = true
+        this.showDownLoad = false
+      }
+    },
 
-
-
+    handleSubmit(e) {
+      console.log('设备类型:' + this.appType)
+      console.log('应用类型:' + this.platform)
+      console.log('上传类型:' + this.uploadType)
+      console.log('应用标记:' + this.appVersion)
+      console.log('应用名称:' + this.appName)
+      console.log('包名称:' + this.packageName)
+      console.log('文件地址:' + this.file)
+      console.log('图片地址:' + this.imageUrl)
+      e.preventDefault()
+      this.visible = false
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+          let params = {}
+          if (this.uploadType == '1') {
+            if (this.file != '') {
+              params.file = this.file
+            }
+          } else if (this.uploadType == '2') {
+            params.url = this.downloadUrl
           }
-        })
-      },
-      handleCancel () {
-        this.close()
-      },
+          if (this.imageUrl != '') {
+            params.imageUrl = this.imageUrl
+          }
+          params.platform = this.platform
+          params.appType = this.appType
+          params.packageName = this.packageName
+          params.appName = this.appName
+          params.appVersion = this.appVersion
+          params.loginId = this.userInfo().id
+          console.log(params)
+          postAction(this.url.insertTemplateUrl, params).then(res => {
+            console.log(res)
+            if (res.success) {
+              this.loadData()
+              alert('创建应用成功')
+              //   location.reload();
+            } else {
+              alert(res.message)
+            }
+          })
+        }
+      })
+    },
 
+    submitIOS(e) {
+      console.log('设备类型:' + this.appType)
+      console.log('应用类型:' + this.platform)
+      console.log('上传类型:' + this.uploadType)
+      console.log('应用标记:' + this.appVersion)
+      console.log('应用名称:' + this.appName)
+      console.log('包名称:' + this.packageName)
+      console.log('文件地址:' + this.file)
+      console.log('图片地址:' + this.imageUrl)
+      e.preventDefault()
+      this.visible = false
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+          let params = {}
+          params.appType = this.appType
+          params.platform = this.platform
+          params.url = this.downloadUrl
+          params.appName = this.appName
+          params.appVersion = this.appVersion
+          params.loginId = this.userInfo().id
+          console.log(params)
+          postAction(this.url.insertTemplateUrl, params).then(res => {
+            console.log(res)
+            if (res.success) {
+              alert('广告组模板创建成功')
+              //   location.reload();
+            } else {
+              alert(res.message)
+            }
+          })
+        }
+      })
+    },
 
+    onChange(value) {
+      console.log(value)
     }
   }
+}
 </script>
 
 <style lang="less" scoped>
-
 </style>

+ 120 - 99
src/views/modules/kuaishouapp/modules/KuaiShouImageModal.vue

@@ -6,143 +6,164 @@
     :confirmLoading="confirmLoading"
     @ok="handleOk"
     @cancel="handleCancel"
-    cancelText="关闭">
-    
+    cancelText="关闭"
+  >
     <a-spin :spinning="confirmLoading">
       <a-form :form="form">
-      
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
-          label="图片保存本地地址">
+          v-if="imageLocalUrl"
+          label="图片保存本地地址"
+        >
           <a-input placeholder="请输入图片保存本地地址" v-decorator="['localUrl', {}]" />
         </a-form-item>
+
+        <!-- 图片预览 -->
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
-          label="imageName">
-          <a-input placeholder="请输入imageName" v-decorator="['videoName', {}]" />
+          label="图片预览"
+          v-if="imagePreviewItem"
+        >
+          <img style="width:200px;" :src="imagePreviewUrl" />
         </a-form-item>
+        <!-- 图片预览 E -->
+
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
-          label="视频类别">
-          <a-input placeholder="请输入视频类别" v-decorator="['imageType', {}]" />
+          label="图片名称"
+          v-if="imageNameItem"
+        >
+          <a-input placeholder="请输入图片名称" v-decorator="['imageName', {}]" />
         </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="登录人id">
+        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="loginIdItem" label="登录人id">
           <a-input placeholder="请输入登录人id" v-decorator="['loginId', {}]" />
         </a-form-item>
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
-          label="图片类型 1-竖版图片 2-横版图片">
+          v-if="imageTypeItem"
+          label="图片类型 1-竖版图片 2-横版图片"
+        >
           <a-input placeholder="请输入图片类型 1-竖版图片 2-横版图片" v-decorator="['materialType', {}]" />
         </a-form-item>
-		
       </a-form>
     </a-spin>
   </a-modal>
 </template>
 
 <script>
-  import { httpAction } from '@/api/manage'
-  import pick from 'lodash.pick'
-  import moment from "moment"
-
-  export default {
-    name: "KuaiShouImageModal",
-    data () {
-      return {
-        title:"操作",
-        visible: false,
-        model: {},
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 },
-        },
-
-        confirmLoading: false,
-        form: this.$form.createForm(this),
-        validatorRules:{
-        },
-        url: {
-          add: "/kuaishou/kuaiShouImage/add",
-          edit: "/kuaishou/kuaiShouImage/edit",
-        },
-      }
-    },
-    created () {
-    },
-    methods: {
-      add () {
-        this.edit({});
-      },
-      edit (record) {
-        this.form.resetFields();
-        this.model = Object.assign({}, record);
-        this.visible = true;
-        this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model,'localUrl','videoName','imageType','loginId','materialType'))
-		  //时间格式化
-        });
+import { httpAction } from '@/api/manage'
+import pick from 'lodash.pick'
+import moment from 'moment'
 
+export default {
+  name: 'KuaiShouImageModal',
+  data() {
+    return {
+      title: '操作',
+      visible: false,
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
       },
-      close () {
-        this.$emit('close');
-        this.visible = false;
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
       },
-      handleOk () {
-        const that = this;
-        // 触发表单验证
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            that.confirmLoading = true;
-            let httpurl = '';
-            let method = '';
-            if(!this.model.id){
-              httpurl+=this.url.add;
-              method = 'post';
-            }else{
-              httpurl+=this.url.edit;
-               method = 'put';
-            }
-            let formData = Object.assign(this.model, values);
-            //时间格式化
-            
-            console.log(formData)
-            httpAction(httpurl,formData,method).then((res)=>{
-              if(res.success){
-                that.$message.success(res.message);
-                that.$emit('ok');
-              }else{
-                that.$message.warning(res.message);
-              }
-            }).finally(() => {
-              that.confirmLoading = false;
-              that.close();
-            })
-
 
-
-          }
-        })
-      },
-      handleCancel () {
-        this.close()
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      validatorRules: {},
+      url: {
+        add: '/kuaishou/kuaiShouImage/add',
+        edit: '/kuaishou/kuaiShouImage/edit'
       },
+      imageNameItem: true,
+      imagePreviewUrl: '',
+      loginIdItem: true,
+      imageTypeItem: true,
+      imagePreviewItem: true,
+      imageLocalUrl: true
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    // 新增
+    add() {
+      this.edit({})
+      this.loginIdItem = true
+      this.imageTypeItem = true
+      this.imagePreviewItem = false
+      this.imageLocalUrl = true
+    },
+    //   编辑
+    edit(record, sign) {
+    //   if (sign == 'preview') {
+    //     this.imageNameItem = false
+    //   }
+      this.loginIdItem = false
+      this.imageTypeItem = false
+      this.imagePreviewItem = true
+      this.imageLocalUrl = false
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      this.visible = true
 
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'localUrl', 'imageName', 'imageType', 'loginId', 'materialType'))
+      })
+      this.imagePreviewUrl = record.localUrl;
+    },
+    close() {
+      this.$emit('close')
+      this.visible = false
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          let httpurl = ''
+          let method = ''
+          if (!this.model.id) {
+            httpurl += this.url.add
+            method = 'post'
+          } else {
+            httpurl += this.url.edit
+            method = 'put'
+          }
+          let formData = Object.assign(this.model, values)
+          //时间格式化
 
+          console.log(formData)
+          httpAction(httpurl, formData, method)
+            .then(res => {
+              if (res.success) {
+                that.$message.success(res.message)
+                that.$emit('ok')
+              } else {
+                that.$message.warning(res.message)
+              }
+            })
+            .finally(() => {
+              that.confirmLoading = false
+              that.close()
+            })
+        }
+      })
+    },
+    handleCancel() {
+      this.close()
     }
   }
+}
 </script>
 
 <style lang="less" scoped>
-
 </style>

+ 142 - 95
src/views/modules/kuaishouapp/modules/KuaiShouVideoModal.vue

@@ -6,143 +6,190 @@
     :confirmLoading="confirmLoading"
     @ok="handleOk"
     @cancel="handleCancel"
-    cancelText="关闭">
-    
+    cancelText="关闭"
+  >
     <a-spin :spinning="confirmLoading">
       <a-form :form="form">
-      
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
-          label="视频保存本地地址">
+          v-if="videoLocalUrlItem"
+          label="视频保存本地地址"
+        >
           <a-input placeholder="请输入视频保存本地地址" v-decorator="['localUrl', {}]" />
         </a-form-item>
+
+        <!-- 视频预览 -->
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          v-if="videoPreviewItem"
+          label="视频预览"
+        >
+          <video
+            class="video"
+            style="width:200px;"
+            :src="videoPreviewUrl"
+            controls="controls"
+          >您的浏览器不支持 video 标签。</video>
+        </a-form-item>
+        <!-- 视频预览 E -->
+
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
-          label="视频描述">
+          v-if="videoDescItem"
+          label="视频描述"
+        >
           <a-input placeholder="请输入视频描述" v-decorator="['videoDesc', {}]" />
         </a-form-item>
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
-          label="videoName">
-          <a-input placeholder="请输入videoName" v-decorator="['videoName', {}]" />
+          v-if="vodeoNameItem"
+          label="视频名称"
+        >
+          <a-input placeholder="请输入视频名称" v-decorator="['videoName', {}]" />
         </a-form-item>
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
-          label="视频类别">
+          v-if="videoTypeItem"
+          label="视频类别"
+        >
           <a-input placeholder="请输入视频类别" v-decorator="['videoType', {}]" />
         </a-form-item>
         <a-form-item
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
-          label="登录人id">
+          v-if="videoLoginIdItem"
+          label="登录人id"
+        >
           <a-input placeholder="请输入登录人id" v-decorator="['loginId', {}]" />
         </a-form-item>
-		
       </a-form>
     </a-spin>
   </a-modal>
 </template>
 
 <script>
-  import { httpAction } from '@/api/manage'
-  import pick from 'lodash.pick'
-  import moment from "moment"
+import { httpAction } from '@/api/manage'
+import pick from 'lodash.pick'
+import moment from 'moment'
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
 
-  export default {
-    name: "KuaiShouVideoModal",
-    data () {
-      return {
-        title:"操作",
-        visible: false,
-        model: {},
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 },
-        },
+export default {
+  name: 'KuaiShouVideoModal',
+  data() {
+    return {
+      title: '操作',
+      visible: false,
+      model: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
 
-        confirmLoading: false,
-        form: this.$form.createForm(this),
-        validatorRules:{
-        },
-        url: {
-          add: "/kuaishou/kuaiShouVideo/add",
-          edit: "/kuaishou/kuaiShouVideo/edit",
-        },
+      confirmLoading: false,
+      form: this.$form.createForm(this),
+      validatorRules: {},
+      url: {
+        add: '/kuaishou/kuaiShouVideo/add',
+        edit: '/kuaishou/kuaiShouVideo/edit'
+      },
+      videoPreviewUrl: '',
+      videoLocalUrlItem: true,
+      videoDescItem: true,
+      vodeoNameItem: true,
+      videoTypeItem: true,
+      videoLoginIdItem: true,
+      videoPreviewItem: true
+    }
+  },
+  methods: {
+    add(sign) {
+      /**
+       * 在 src\mixins\JeecgListMixin.js 中给 handleAdd 一个参数 sign
+       * sign---add---新增
+       */
+      if (sign == 'add') {
+        this.edit({});
+        this.videoPreviewItem = false;
+        this.vodeoNameItem = true;
+        this.videoTypeItem = true;
+        this.videoLoginIdItem = true;
       }
+      closeAllVideoFun();
     },
-    created () {
+    edit(record) {
+      this.form.resetFields();
+      this.model = Object.assign({}, record);
+      this.visible = true;
+      this.videoLocalUrlItem = false;
+      this.videoDescItem = true;
+      this.vodeoNameItem = false;
+      this.videoTypeItem = false;
+      this.videoLoginIdItem = false;
+      this.videoPreviewItem = true;
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.model, 'localUrl', 'videoDesc', 'videoName', 'videoType', 'loginId'));
+        //时间格式化
+        this.videoPreviewUrl = record.localUrl;
+      })
+      closeAllVideoFun();
     },
-    methods: {
-      add () {
-        this.edit({});
-      },
-      edit (record) {
-        this.form.resetFields();
-        this.model = Object.assign({}, record);
-        this.visible = true;
-        this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model,'localUrl','videoDesc','videoName','videoType','loginId'))
-		  //时间格式化
-        });
+    close() {
+      this.$emit('close');
+      this.visible = false;
+      closeAllVideoFun();
+    },
+    handleOk() {
+      const that = this
+      // 触发表单验证
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          that.confirmLoading = true
+          let httpurl = ''
+          let method = ''
+          if (!this.model.id) {
+            httpurl += this.url.add
+            method = 'post'
+          } else {
+            httpurl += this.url.edit
+            method = 'put'
+          }
+          let formData = Object.assign(this.model, values)
+          //时间格式化
 
-      },
-      close () {
-        this.$emit('close');
-        this.visible = false;
-      },
-      handleOk () {
-        const that = this;
-        // 触发表单验证
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            that.confirmLoading = true;
-            let httpurl = '';
-            let method = '';
-            if(!this.model.id){
-              httpurl+=this.url.add;
-              method = 'post';
-            }else{
-              httpurl+=this.url.edit;
-               method = 'put';
-            }
-            let formData = Object.assign(this.model, values);
-            //时间格式化
-            
-            console.log(formData)
-            httpAction(httpurl,formData,method).then((res)=>{
-              if(res.success){
-                that.$message.success(res.message);
-                that.$emit('ok');
-              }else{
-                that.$message.warning(res.message);
+          console.log(formData)
+          httpAction(httpurl, formData, method)
+            .then(res => {
+              if (res.success) {
+                that.$message.success(res.message)
+                that.$emit('ok')
+              } else {
+                that.$message.warning(res.message)
               }
-            }).finally(() => {
-              that.confirmLoading = false;
-              that.close();
             })
-
-
-
-          }
-        })
-      },
-      handleCancel () {
-        this.close()
-      },
-
-
-    }
+            .finally(() => {
+              that.confirmLoading = false
+              that.close()
+            })
+        }
+      })
+      closeAllVideoFun();
+    },
+    handleCancel() {
+      this.close();
+      closeAllVideoFun();
+    },
   }
+}
 </script>
 
 <style lang="less" scoped>
-
 </style>

+ 1 - 1
src/views/template/creative/create.vue

@@ -95,7 +95,7 @@
           :filterOption="filterOption"
           @change="changeConvertType"
         >
-          <a-select-option v-if="showSimple"value="SIMPLE">普通应用下载</a-select-option>
+          <a-select-option v-if="showSimple" value="SIMPLE">普通应用下载</a-select-option>
           <a-select-option value="API">应用下载API</a-select-option>
         </a-select>
       </a-form-item>