|
@@ -1,4 +1,4 @@
|
|
-<template>
|
|
|
|
|
|
+<template xmlns="http://www.w3.org/1999/html">
|
|
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
|
|
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
|
|
<a-form @submit="handleSubmit" :form="form">
|
|
<a-form @submit="handleSubmit" :form="form">
|
|
|
|
|
|
@@ -151,12 +151,8 @@
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
|
|
|
|
- <a-form-item
|
|
|
|
- v-if="showCover"
|
|
|
|
- label="选择封面"
|
|
|
|
- :labelCol="labelCol"
|
|
|
|
- :wrapperCol="wrapperCol">
|
|
|
|
- <a-select
|
|
|
|
|
|
+
|
|
|
|
+ <!-- <a-select
|
|
v-model="imageUrl"
|
|
v-model="imageUrl"
|
|
showSearch
|
|
showSearch
|
|
allowClear
|
|
allowClear
|
|
@@ -170,8 +166,50 @@
|
|
<a-select-option v-for="image in imageList" :key="image.localUrl" :value="image.localUrl">
|
|
<a-select-option v-for="image in imageList" :key="image.localUrl" :value="image.localUrl">
|
|
{{image.imageName}}
|
|
{{image.imageName}}
|
|
</a-select-option>
|
|
</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="860"
|
|
|
|
+ style="height:650px;overflow-y:auto"
|
|
|
|
+ >
|
|
|
|
+ <template>
|
|
|
|
+ <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)"> 全选
|
|
|
|
+ <br/>
|
|
|
|
+ <br/>
|
|
|
|
+ <div v-for="(item ,index) in imageList" style="display:inline-block;width:20%">
|
|
|
|
+ <a href="javascript:">
|
|
|
|
+ <img :src="item.src" alt="" height="100">
|
|
|
|
+ <p>{{item.name}}</p>
|
|
|
|
+ <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>
|
|
</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
|
|
<a-form-item
|
|
@@ -254,12 +292,15 @@
|
|
import {mapGetters} from 'vuex'
|
|
import {mapGetters} from 'vuex'
|
|
import UploadToAli from '@femessage/upload-to-ali'
|
|
import UploadToAli from '@femessage/upload-to-ali'
|
|
import moment from "moment"
|
|
import moment from "moment"
|
|
|
|
+ import VuePreview from 'vue-preview'
|
|
|
|
+ import jq from 'jquery'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: 'BaseForm',
|
|
name: 'BaseForm',
|
|
components: {
|
|
components: {
|
|
- UploadToAli
|
|
|
|
|
|
+ UploadToAli,
|
|
|
|
+ VuePreview
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
@@ -295,8 +336,9 @@
|
|
clickTrackUrl: '',// 第三方检测链接
|
|
clickTrackUrl: '',// 第三方检测链接
|
|
showLocalImageUpload: false,
|
|
showLocalImageUpload: false,
|
|
showUploadImageRadio: true,
|
|
showUploadImageRadio: true,
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ visible: false,
|
|
|
|
+ isAllChecked: false,
|
|
|
|
+ checkeds: [],
|
|
customDomain: '',
|
|
customDomain: '',
|
|
acceptVideo: 'video/mpeg,video/mp4',
|
|
acceptVideo: 'video/mpeg,video/mp4',
|
|
acceptImage: 'image/jpeg,image,jpg/png',
|
|
acceptImage: 'image/jpeg,image,jpg/png',
|
|
@@ -335,7 +377,7 @@
|
|
getOptionsUrl: '/kuaishou/create/getOptions',
|
|
getOptionsUrl: '/kuaishou/create/getOptions',
|
|
getChildrenUrl: '/kuaishou/create/getChildren',
|
|
getChildrenUrl: '/kuaishou/create/getChildren',
|
|
videoListUrl: '/kuaishou/kuaiShouVideo/list',
|
|
videoListUrl: '/kuaishou/kuaiShouVideo/list',
|
|
- imageListUrl: '/kuaishou/kuaiShouImage/list',
|
|
|
|
|
|
+ imageListUrl: '/kuaishou/kuaiShouImage//image/list',
|
|
actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
|
|
actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
|
|
getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
|
|
getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
|
|
|
|
|
|
@@ -347,6 +389,64 @@
|
|
methods: {
|
|
methods: {
|
|
...mapGetters(["nickname", "avatar", "userInfo"]),
|
|
...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() {
|
|
changeImageType() {
|
|
if (this.imageType == '2') {
|
|
if (this.imageType == '2') {
|
|
this.showLocalImageUpload = true;
|
|
this.showLocalImageUpload = true;
|
|
@@ -420,9 +520,9 @@
|
|
}
|
|
}
|
|
});
|
|
});
|
|
getAction(this.url.imageListUrl, params).then((res) => {
|
|
getAction(this.url.imageListUrl, params).then((res) => {
|
|
- if (res.success) {
|
|
|
|
- this.imageList = res.result.records
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ this.imageList = res
|
|
|
|
+
|
|
});
|
|
});
|
|
} else {
|
|
} else {
|
|
this.showImageUpload = true;
|
|
this.showImageUpload = true;
|
|
@@ -471,9 +571,13 @@
|
|
|
|
|
|
|
|
|
|
handleSubmit(e) {
|
|
handleSubmit(e) {
|
|
|
|
+ console.log(this.imageIds);
|
|
|
|
+ console.log(this.imageUrl)
|
|
|
|
+ console.log(this.localUrl)
|
|
e.preventDefault()
|
|
e.preventDefault()
|
|
this.form.validateFields((err, values) => {
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
if (!err) {
|
|
|
|
+ console.log(this.imageIds);
|
|
console.log('Received values of form: ', values);
|
|
console.log('Received values of form: ', values);
|
|
console.log('快手账号: ', this.accountId);
|
|
console.log('快手账号: ', this.accountId);
|
|
console.log(' ---: ', this.ids);
|
|
console.log(' ---: ', this.ids);
|
|
@@ -553,7 +657,8 @@
|
|
console.log(res)
|
|
console.log(res)
|
|
});
|
|
});
|
|
}
|
|
}
|
|
- },
|
|
|
|
|
|
+ }
|
|
|
|
+ ,
|
|
|
|
|
|
created: function () {
|
|
created: function () {
|
|
let params = {};
|
|
let params = {};
|
|
@@ -582,9 +687,10 @@
|
|
|
|
|
|
// 图片列表
|
|
// 图片列表
|
|
getAction(this.url.imageListUrl, params).then((res) => {
|
|
getAction(this.url.imageListUrl, params).then((res) => {
|
|
- if (res.success) {
|
|
|
|
- this.imageList = res.result.records
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ this.imageList = res
|
|
|
|
+ console.log(res)
|
|
|
|
+
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|