Explorar o código

快手-图片预览

yumeng %!s(int64=5) %!d(string=hai) anos
pai
achega
f9f6a2b7f6
Modificáronse 2 ficheiros con 127 adicións e 19 borrados
  1. 3 0
      src/main.js
  2. 124 19
      src/views/modules/kuaishouapp/creativeCreate.vue

+ 3 - 0
src/main.js

@@ -20,6 +20,8 @@ import VueApexCharts from 'vue-apexcharts'
 import preview from 'vue-photo-preview'
 import 'vue-photo-preview/dist/skin.css'
 
+import VuePreview from 'vue-preview';
+
 import {
   ACCESS_TOKEN,
   DEFAULT_COLOR,
@@ -54,6 +56,7 @@ Vue.component('apexchart', VueApexCharts)
 Vue.use(preview)
 Vue.use(vueBus);
 Vue.use(JeecgComponents);
+Vue.use(VuePreview);
 
 new Vue({
   router,

+ 124 - 19
src/views/modules/kuaishouapp/creativeCreate.vue

@@ -1,4 +1,4 @@
-<template>
+<template xmlns="http://www.w3.org/1999/html">
   <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
     <a-form @submit="handleSubmit" :form="form">
 
@@ -151,12 +151,8 @@
         </a-radio-group>
       </a-form-item>
 
-      <a-form-item
-        v-if="showCover"
-        label="选择封面"
-        :labelCol="labelCol"
-        :wrapperCol="wrapperCol">
-        <a-select
+
+      <!-- <a-select
           v-model="imageUrl"
           showSearch
           allowClear
@@ -170,8 +166,49 @@
           <a-select-option v-for="image in imageList" :key="image.localUrl" :value="image.localUrl">
             {{image.imageName}}
           </a-select-option>
-        </a-select>
+        </a-select>-->
+
+      <a-form-item
+        v-if="showCover"
+        label="选择封面"
+        :labelCol="labelCol"
+        :wrapperCol="wrapperCol">
+        <div>
+          <a type="primary" @click="showModal">点击选中已上传封面</a>
+          <a-modal
+            title="选择封面"
+            v-model="visible"
+            @ok="handleOk"
+            :width="800"
+          >
+            <template>
+              <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)"> 全选
+              <br/>
+
+              <div v-for="(item ,index) in imageList" style="display:inline-block;width:20%">
+                <a href="javascript:" >
+                  <img :src="item.src" alt="" height="100">&nbsp;&nbsp;&nbsp;
+                  <p>
+                    <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
+                           @onClick="checkeda(item.id)"
+                           @change="changChecked">
+                  </p>
+
+                </a>
+              </div>
+            </template>
+          </a-modal>
+        </div>
       </a-form-item>
+      <!-- <ul>
+         <li v-for="(item ,index) in items" @click="checkeda(index)">
+           <a href="javascript:">
+             <img :src="item.img" alt="">
+           </a>
+           <p>{{item.title}}</p>
+           <input type="checkbox" v-model="checkeds" :value="index">
+         </li>
+       </ul>-->
 
 
       <a-form-item
@@ -254,12 +291,15 @@
   import {mapGetters} from 'vuex'
   import UploadToAli from '@femessage/upload-to-ali'
   import moment from "moment"
+  import VuePreview from 'vue-preview'
+  import jq from 'jquery'
 
 
   export default {
     name: 'BaseForm',
     components: {
-      UploadToAli
+      UploadToAli,
+      VuePreview
     },
     data() {
       return {
@@ -295,8 +335,9 @@
         clickTrackUrl: '',// 第三方检测链接
         showLocalImageUpload: false,
         showUploadImageRadio: true,
-
-
+        visible: false,
+        isAllChecked: false,
+        checkeds: [],
         customDomain: '',
         acceptVideo: 'video/mpeg,video/mp4',
         acceptImage: 'image/jpeg,image,jpg/png',
@@ -335,7 +376,7 @@
             getOptionsUrl: '/kuaishou/create/getOptions',
             getChildrenUrl: '/kuaishou/create/getChildren',
             videoListUrl: '/kuaishou/kuaiShouVideo/list',
-            imageListUrl: '/kuaishou/kuaiShouImage/list',
+            imageListUrl: '/kuaishou/kuaiShouImage//image/list',
             actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
             getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
 
@@ -347,6 +388,64 @@
     methods: {
       ...mapGetters(["nickname", "avatar", "userInfo"]),
 
+      handleOk(e) {
+        console.log(e);
+        this.visible = false;
+        this.imageUrl = [];
+        if (this.checkeds.length > 0) {
+          for (let i = 0; i < this.checkeds.length; i++) {
+            let imageId = this.checkeds[i];
+            for (let j = 0; j < this.imageList.length; j++) {
+              let imageVo = this.imageList[j];
+              if (imageId == imageVo.id) {
+                this.imageUrl.push(imageVo.src)
+                console.log(this.imageUrl);
+              }
+            }
+          }
+        }
+      },
+      showModal() {
+        this.visible = true
+      },
+
+      changChecked() {
+        if (this.imageList.length == this.checkeds.length) {
+          this.isAllChecked = true;
+        } else {
+          this.isAllChecked = false;
+        }
+
+
+      },
+
+      checkeda: function (id) {
+        let indexOf = this.checkeds.indexOf(id)
+        if (indexOf >= 0) {
+          this.$delete(this.checkeds, id);
+        } else {
+          this.checkeds.push(id)
+        }
+        console.log(this.checkeds)
+
+      },
+
+
+      checkAll(e) { // 点击全选事件函数
+        let checkObj = document.querySelectorAll('.checkItem'); // 获取所有checkbox项
+        if (e.target.checked) { // 判定全选checkbox的勾选状态
+          for (let i = 0; i < this.imageList.length; i++) {
+            if (!checkObj[i].checked) { // 将未勾选的checkbox选项push到绑定数组中
+              this.checkeds.push(checkObj[i].value);
+              console.log(this.checkeds)
+            }
+          }
+        } else { // 如果是去掉全选则清空checkbox选项绑定数组
+          this.checkeds = [];
+        }
+      },
+
+
       changeImageType() {
         if (this.imageType == '2') {
           this.showLocalImageUpload = true;
@@ -420,9 +519,9 @@
             }
           });
           getAction(this.url.imageListUrl, params).then((res) => {
-            if (res.success) {
-              this.imageList = res.result.records
-            }
+
+            this.imageList = res
+
           });
         } else {
           this.showImageUpload = true;
@@ -471,9 +570,13 @@
 
 
       handleSubmit(e) {
+        console.log(this.imageIds);
+        console.log(this.imageUrl)
+        console.log(this.localUrl)
         e.preventDefault()
         this.form.validateFields((err, values) => {
           if (!err) {
+            console.log(this.imageIds);
             console.log('Received values of form: ', values);
             console.log('快手账号: ', this.accountId);
             console.log('  ---: ', this.ids);
@@ -553,7 +656,8 @@
           console.log(res)
         });
       }
-    },
+    }
+    ,
 
     created: function () {
       let params = {};
@@ -582,9 +686,10 @@
 
       // 图片列表
       getAction(this.url.imageListUrl, params).then((res) => {
-        if (res.success) {
-          this.imageList = res.result.records
-        }
+
+        this.imageList = res
+        console.log(res)
+
       });