Explorar o código

快手-创建应用,创建广告组,批量上传视频

yumeng %!s(int64=5) %!d(string=hai) anos
pai
achega
daf098b6e6

+ 188 - 0
src/views/modules/kuaishouapp/KuaiShouVideoList.vue

@@ -0,0 +1,188 @@
+<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 placeholder="请输入视频保存本地地址" v-model="queryParam.localUrl"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="视频描述">
+              <a-input placeholder="请输入视频描述" v-model="queryParam.videoDesc"></a-input>
+            </a-form-item>
+          </a-col>
+        <template v-if="toggleSearchStatus">
+        <a-col :md="6" :sm="8">
+            <a-form-item label="videoName">
+              <a-input placeholder="请输入videoName" v-model="queryParam.videoName"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="视频类别">
+              <a-input placeholder="请输入视频类别" v-model="queryParam.videoType"></a-input>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="8">
+            <a-form-item label="登录人id">
+              <a-input placeholder="请输入登录人id" v-model="queryParam.loginId"></a-input>
+            </a-form-item>
+          </a-col>
+          </template>
+          <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 @click="handleToggleSearch" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <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 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>
+      </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>
+        <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>项
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
+
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @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-menu slot="overlay">
+              <a-menu-item>
+                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+                  <a>删除</a>
+                </a-popconfirm>
+              </a-menu-item>
+            </a-menu>
+          </a-dropdown>
+        </span>
+
+      </a-table>
+    </div>
+    <!-- table区域-end -->
+
+    <!-- 表单区域 -->
+    <kuaiShouVideo-modal ref="modalForm" @ok="modalFormOk"></kuaiShouVideo-modal>
+  </a-card>
+</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: 'videoName',
+            align:"center",
+            dataIndex: 'videoName'
+           },
+		   {
+            title: '视频类别',
+            align:"center",
+            dataIndex: 'videoType'
+           },
+		   {
+            title: '登录人id',
+            align:"center",
+            dataIndex: 'loginId'
+           },
+          {
+            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: {
+     
+    }
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less'
+</style>

+ 280 - 0
src/views/modules/kuaishouapp/campaignCreate.vue

@@ -0,0 +1,280 @@
+<template>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <a-form @submit="handleSubmit" :form="form">
+      <a-form-item
+        label="推广目的"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group @change="typeChange" v-model="type">
+          <a-radio-button v-for="purpose in typeList" :key="purpose.itemText" :value="purpose.itemValue">
+            {{purpose.itemText}}
+          </a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+
+      <a-form-item
+        label="计划名称"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input v-model="campaignName"></a-input>
+      </a-form-item>
+
+      <a-form-item
+        label="单日预算"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group @change="showBudgetStatusChange" v-model="campaignBudget">
+          <a-radio-button value="UNLIMITED">不限</a-radio-button>
+          <a-radio-button value="AS_BUDGET">统一预算</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        label="预算金额"
+        v-if="showBudgetDaily"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input
+          v-model="dayBudget"
+          v-decorator="[
+                  'confirm_dayBudget',
+                  {rules: [{ required: true, message: 'error:' },
+                  {validator: handleConfirmValue}]}
+                ]"
+          placeholder="不小于500,不超过100000000,仅支持输入自然数" type="number" style="width: 70%"></a-input>
+        元
+      </a-form-item>
+
+
+      <a-form-item
+        v-if="showApp"
+        label="目标应用"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-select
+          v-model="appId"
+          showSearch
+          allowClear
+          placeholder="选择应用目标"
+          optionFilterProp="children"
+          style="width: 200px"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @change="handleChange"
+          :filterOption="filterOption"
+        >
+          <a-select-option value="0">请选择目标应用</a-select-option>
+          <a-select-option v-for="appModel in appList" :key="appModel.id" :value="appModel.id">{{appModel.appName}}&#12288;&nbsp;{{appModel.appType}}</a-select-option>
+        </a-select>
+      </a-form-item>
+
+
+      <a-form-item
+        v-if="showUrlType"
+        label="转化类型"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group v-model="urlType">
+          <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
+        v-if="showChannelType"
+        label="转化类型"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group v-model="channelType">
+          <a-radio-button value="1">填写链接</a-radio-button>
+          <a-radio-button value="2" disabled="disabled">落地页工具</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+
+      <a-form-item
+        v-if="showRedirect"
+        label="链接地址"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input v-model="redirectUrl"></a-input>
+
+      </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-card>
+</template>
+
+<script>
+  import {deleteAction, postAction, getAction} from '@/api/manage'
+  import moment from "moment"
+  import {mapActions, mapGetters} from 'vuex'
+
+
+  export default {
+    name: 'BaseForm',
+    data() {
+      return {
+        promotionName: '',
+        type: '2',
+        typeList: {},
+        appList: {},
+        showBudgetDaily: false,
+        campaignName: '提升应用安装_' + moment(new Date()),
+        campaignBudget: 'UNLIMITED',
+        dayBudget: 0,
+        appId: '0',//应用目标
+        showApp: true,
+        redirectUrl: '',// 链接地址
+        showRedirect: false,
+        urlType: '1',
+        showUrlType: false,
+        channelType: '1',
+        showChannelType: false,
+
+        form: this.$form.createForm(this),
+        url: {
+          dictListUrl: 'toutiao/dictitem/list',
+          appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
+          insertTemplateUrl: '/kuaishou/kuaiShouCampaignTemplate/insert'
+        }
+      }
+    },
+    methods: {
+      ...mapGetters(["nickname", "avatar", "userInfo"]),
+      handleConfirmValue(rule, value,callback) {
+        if (this.dayBudget == '' || this.dayBudget <= 500 || this.dayBudget >= 100000000) {
+          callback('请输入正确预算金额')
+        }
+        callback()
+      },
+
+      handleConfirmAppId(rule,value, callback) {
+        if (this.type == 2 && (this.appId == '0' || this.appId == '')) {
+          callback('请选择目标应用')
+        }
+        callback()
+      },
+      handleSubmit(e) {
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            console.log('Received values of form: ', values);
+            let params = {};
+            params.type = this.type;
+            if (this.type == '2') {
+              params.appId = this.appId;
+            }
+            if (this.type == '3') {
+              params.urlType = this.urlType;
+            }
+            if (this.type == '5' || this.type == '4' || this.type == '3') {
+              params.url = this.redirectUrl;
+            }
+            // params.campaignBudget = this.campaignBudget;
+            params.dayBudget = this.dayBudget;
+            params.campaignName = this.campaignName;
+            params.loginId = this.userInfo().id;
+            console.log(params)
+
+            postAction(this.url.insertTemplateUrl, params).then((res) => {
+              console.log(res)
+              if (res.success) {
+                alert("广告组模板创建成功");
+              }
+            });
+          }
+        })
+      },
+      onChange(value) {
+        console.log(value);
+      },
+      showBudgetStatusChange() {
+        if (this.campaignBudget == 'UNLIMITED') {
+          this.showBudgetDaily = false;
+          this.dayBudget = 0;
+        } else {
+          this.showBudgetDaily = true;
+          this.dayBudget = '';
+
+
+        }
+      },
+      typeChange() {
+        if (this.type == 2) {
+          this.promotionName = '提升应用安装';
+          this.showApp = true;
+          this.showRedirect = false;
+          this.showUrlType = false;
+          this.showChannelType = false;
+        }
+        if (this.type == 3) {
+          this.promotionName = '获取电商下单';
+          this.showApp = false;
+          this.showRedirect = true;
+          this.showUrlType = true;
+          this.showChannelType = false;
+        }
+        if (this.type == 4) {
+          this.promotionName = '推广品牌活动';
+          this.showApp = false;
+          this.showRedirect = true;
+          this.showUrlType = false;
+          this.showChannelType = false;
+        }
+        if (this.type == 5) {
+          this.promotionName = '收集销售线索';
+          this.showApp = false;
+          this.showRedirect = true;
+          this.showUrlType = false;
+          this.showChannelType = true;
+        }
+        this.campaignName = this.promotionName + '_' + moment(new Date());
+      },
+      handleChange(value) {
+        console.log(`selected ${value}`);
+      },
+      handleBlur() {
+        console.log('blur');
+      },
+      handleFocus() {
+        console.log('focus');
+      },
+      filterOption(input, option) {
+        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+    },
+    created: function () {
+      //出价方式
+      let params = {};
+      params.dictId = '181afbae847dd3bc7e27795d8958956';
+      params.pageSize = '1000';
+      getAction(this.url.dictListUrl, params).then((res) => {
+        if (res.success) {
+          this.typeList = res.result.records
+        }
+      });
+
+      // 应用列表
+      //出价方式
+      let params2 = {};
+      params2.loginId = this.userInfo().id;
+      params2.pageSize = '1000';
+      getAction(this.url.appListUrl, params).then((res) => {
+        if (res.success) {
+          this.appList = res.result.records
+          console.log(this.appList)
+        }
+      });
+
+
+    }
+  }
+</script>

+ 905 - 0
src/views/modules/kuaishouapp/groupCreate.vue

@@ -0,0 +1,905 @@
+<template>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <a-form @submit="handleSubmit" :form="form">
+
+
+      <a-form-item
+        label="单日预算"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group buttonStyle="solid" @change="showBudgetStatusChange" v-model="campaignBudget">
+          <a-radio-button value="UNLIMITED">不限</a-radio-button>
+          <a-radio-button value="AS_BUDGET">统一预算</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        label="预算金额"
+        v-if="showBudgetDaily"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input
+          v-model="dayBudget"
+          v-decorator="[
+                  'confirm_dayBudget',
+                  {rules: [{ required: true, message: ' ' },
+                  {validator: handleConfirmValue}]}
+                ]"
+          placeholder="不小于500,不超过100000000,仅支持输入自然数" type="number" style="width: 70%"></a-input>
+        元
+      </a-form-item>
+
+
+      <a-form-item
+        label="投放方式"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group v-model="speed">
+          <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="排期"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group buttonStyle="solid" v-model="schedulingType" @change="showSetDate">
+          <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="showTime"
+                   :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"/>
+      </a-form-item>
+
+
+      <a-form-item
+        label="投放时段"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group buttonStyle="solid" v-model="scheduleTimeType" @change="showSetScheduleTime">
+          <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="showScheduleTime"
+        v-model="scheduleTime"
+        :labelCol="{lg: {span: 7}, sm: {span: 20}}"
+        :wrapperCol="{lg: {span: 15}, sm: {span: 16} }">
+        <div id="table_time_selected1" class="table_time_selected1">
+        </div>
+      </a-form-item>
+
+
+      <a-form-item
+        label="创意展现方式"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group v-model="showMode">
+          <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="优化目标出价类型"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group v-model="bidType" buttonStyle="solid" @change="showBidType">
+          <a-radio-button value='2'>CPC</a-radio-button>
+          <a-radio-button value='20'>ECPC</a-radio-button>
+          <a-radio-button value='6'>OCPC</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+
+      <a-form-item
+        label="出价"
+        v-if="showBid"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input
+          v-model="bid"
+          v-decorator="[
+                  'confirm_bid',
+                  {rules: [{ required: true, message: ' ' },
+                  {validator: handleConfirmBid}]}
+                ]"
+          placeholder="不低于0.2元,不高于100元" style="width: 70%"></a-input>
+        元
+      </a-form-item>
+
+
+      <a-form-item
+        label="优化目标"
+        v-if="showOcpxActionType"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-radio-group v-model="ocpxActionType" @change="showBidType">
+          <a-radio-button value="2">行为数</a-radio-button>
+          <a-radio-button value="180">激活数</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+
+
+      <a-form-item
+        label="出价"
+        v-if="showCpaBid"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input
+          v-model="cpaBid"
+          v-decorator="[
+                  'confirm_cap_bid',
+                  {rules: [{ required: true, message: ' ' },
+                  {validator: handleConfirmCpaBid}]}
+                ]"
+          placeholder="请填写出价金额" style="width: 70%"></a-input>
+        元
+      </a-form-item>
+
+
+      <a-form-item
+        label="广告组名称"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input v-model="unitName" placeholder="请填写广告组名称" style="width: 70%"></a-input>
+      </a-form-item>
+
+
+      <a-form-item
+        :wrapperCol="{ span: 20 }"
+        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-card>
+</template>
+
+<script>
+  import {postAction} from '@/api/manage'
+  import moment from "moment"
+  import {mapGetters} from 'vuex'
+  import jq from 'jquery'
+
+  let dateQuantumRangeConst = '';
+
+  export default {
+    name: 'BaseForm',
+    data() {
+      return {
+        campaignBudget: 'UNLIMITED',
+        dayBudget: 0,
+        showBudgetDaily: false,
+        speed: '1', // 1 快速投放 2平滑投放
+        schedulingType: '1',// 1 从今天开始长期投放 2 设置开始和结束日期
+        showTime: false,
+        time: [],
+        scheduleTimeType: '1',
+        showScheduleTime: false,
+        scheduleTime: '',// 投放时间选择值
+        showMode: '1', // 1 轮播 2 优选
+        bidType: '2',
+        showBid: true,
+        bid: 0,// bid_type 为 CPC/eCPC 出价
+        ocpxActionType: '2',// 2行为数 180 激活数
+        showOcpxActionType: false,
+        showCpaBid: false,
+        cpaBid: 0,// bid_type 是 OCPC 时该字段必填
+        page: 2,// 资源位置
+        unitName: "_" + moment().format('YYYY-MM-DD HH:mm'),//广告组名称
+
+
+        form: this.$form.createForm(this),
+        url: {
+          insertTemplateUrl: '/kuaishou/kuaiShouGroupCreateTemplate/insert'
+        }
+      }
+    },
+    methods: {
+      ...mapGetters(["nickname", "avatar", "userInfo"]),
+
+      showBidType() {
+        if (this.bidType == '6') {
+          this.showBid = false;
+          this.showOcpxActionType = true;
+          this.showCpaBid = true;
+        } else {
+          this.showBid = true;
+          this.showOcpxActionType = false;
+          this.showCpaBid = false;
+        }
+        this.unitName = "_" + moment().format('YYYY-MM-DD HH:mm');
+
+      },
+      showSetScheduleTime() {
+        if (this.scheduleTimeType == 2) {
+          this.showScheduleTime = true;
+          jq(function () {
+            load_time_table('table_time_selected1', dateQuantumRangeConst);
+          });
+        } else {
+          this.showScheduleTime = false;
+        }
+      },
+
+      showSetDate() {
+        if (this.schedulingType == '2') {
+          this.showTime = true;
+        } else {
+          this.showTime = false;
+        }
+
+      },
+
+      handleConfirmValue(rule, value, callback) {
+        if (this.dayBudget == '' || this.dayBudget <= 500 || this.dayBudget >= 100000000) {
+          callback('请输入正确预算金额')
+        }
+        callback()
+      },
+      handleConfirmBid(rule, value, callback) {
+        if (this.bid == 0 || this.bid <= 0.2 || this.bid >= 100) {
+          callback('不得低于0.2元,不得高于100元')
+        }
+        callback()
+      },
+
+      handleConfirmCpaBid(rule, value, callback) {
+        if (this.ocpxActionType == '2' && (this.cpaBid == 0 || this.cpaBid <= 1 || this.cpaBid >= 3000)) {
+          callback('金额不得低于1元,不得高于3000元')
+        }
+        if (this.ocpxActionType == '180' && (this.cpaBid == 0 || this.cpaBid <= 5 || this.cpaBid >= 3000)) {
+          callback('金额不得低于5元,不得高于3000元')
+        }
+        callback()
+      },
+
+      showBudgetStatusChange() {
+        if (this.campaignBudget == 'AS_BUDGET') {
+          this.showBudgetDaily = true;
+        } else {
+          this.showBudgetDaily = false;
+          this.dayBudget = '0';
+        }
+      },
+
+
+      handleSubmit(e) {
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            console.log('Received values of form: ', values);
+            console.log('预算金额: ', this.dayBudget);
+            console.log('投放方式: ', this.speed);
+
+            if (this.schedulingType == '1') {
+              console.log('开始投放时间: ', moment().format('YYYY-MM-DD'));
+            }
+            if (this.schedulingType == '2') {
+              console.log('开始投放时间: ', moment(this.time[0]).format('YYYY-MM-DD'));
+              console.log('结束投放时间: ', moment(this.time[1]).format('YYYY-MM-DD'));
+            }
+            if (this.scheduleTimeType == '2') {
+              this.scheduleTime = jq("#table_time_selected1_time_num").val();
+              console.log('投放时间段: ', this.scheduleTime);
+            }
+            console.log('出价方式:: ', this.bidType);
+            if (this.bidType == '2' || this.bidType == '20') {
+              console.log('出价金额,bid:: ', this.bid);
+            }
+            if (this.bidType == '6') {
+              console.log('优化目标:', this.ocpxActionType);
+              console.log('出价金额,cpaBid:', this.cpaBid);
+            }
+            console.log('资源位置: ', this.page);
+            console.log('广告组名称: ', this.unitName);
+            let params = {};
+            params.dayBudget = this.dayBudget;
+            params.speed = this.speed;
+            if (this.schedulingType == '1') {
+              params.beginTime = moment().format('YYYY-MM-DD');
+            }
+            if (this.schedulingType == '2') {
+              params.beginTime = moment(this.time[0]).format('YYYY-MM-DD');
+              params.endTime = moment(this.time[1]).format('YYYY-MM-DD');
+            }
+            if (this.scheduleTimeType == '2') {
+              this.scheduleTime = jq("#table_time_selected1_time_num").val();
+              params.scheduleTime = this.scheduleTime;
+            }
+            params.bidType = this.bidType;
+            if (this.bidType == '2' || this.bidType == '20') {
+              params.bid = this.bid * 1000;
+            }
+            if (this.bidType == '6') {
+              params.ocpxActionType = this.ocpxActionType;
+              params.cpaBid = this.cpaBid * 1000;
+            }
+            params.page = this.page;
+            params.showModel = this.showMode;
+            params.unitName = this.unitName;
+            params.loginId = this.userInfo().id;
+            console.log(params)
+            postAction(this.url.insertTemplateUrl, params).then((res) => {
+              console.log(res)
+              if (res.success) {
+                alert("广告组模板创建成功");
+              }
+            });
+          }
+        })
+      },
+      onChange(value) {
+        console.log(value);
+      },
+
+    }
+  }
+
+
+  var box_id;
+  var StartTD = null;
+  var StartIndex = null;
+  var EndTD = null;
+  var EndIndex = null;
+  var Selected = 'Selected';
+  var Start_x = null;
+  var Start_y = null;
+  //点击中表格的小时值
+  var hour;
+  //点击选中的星期值
+  var week;
+  //1为这个格子在此次鼠标拖拽过程中被选中(不执行选中方法),0为没选中过
+  var td_state = 0;
+  //生成星期数组
+  var num = ['一', '二', '三', '四', '五', '六', '日'];
+  //生成时间值数组
+  var arr_hour = get_hour_arr();
+
+
+  //按下鼠标左键拖动选中单元格
+  function SelectTD(StartIndex, EndIndex, Selected) {
+
+    var MinX = null;
+    var MaxX = null;
+    var MinY = null;
+    var MaxY = null;
+
+    var coordinate = get_coordinate(StartIndex, EndIndex);
+    MinX = coordinate[0];
+    MaxX = coordinate[1];
+    MinY = coordinate[2];
+    MaxY = coordinate[3];
+
+    for (var i = MinY; i <= MaxY; i++) {
+
+      for (var j = MinX; j <= MaxX; j++) {
+
+        var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
+        var td_class = jq("td", SelectTR).eq(j).attr('class');
+        td_state = jq("td", SelectTR).eq(j).attr("td_state");
+
+        //在同一次鼠标按下的过程中,选中过的表格不进行选中或取消操作
+        if (!td_state) {
+          if (td_class == Selected) {
+            jq("td", SelectTR).eq(j).removeClass(Selected);
+          } else {
+            //筛选掉标明为星期的表格
+            jq("td", SelectTR).eq(j).attr("class", Selected);
+          }
+          jq("td", SelectTR).eq(j).attr("td_state", '1');
+        }
+
+      }
+
+    }
+
+    //改变二进制值
+    get_time_val();
+    //改变日期显示
+    convert_date();
+
+  }
+
+  //点击选中或去掉选中整行、整列
+  function SelectTD_click(StartIndex, EndIndex, Selected) {
+
+    var MinX = null;
+    var MaxX = null;
+    var MinY = null;
+    var MaxY = null;
+    var Selected_true = 0;
+    var Selected_false = 0;
+
+    var coordinate = get_coordinate(StartIndex, EndIndex);
+    MinX = coordinate[0];
+    MaxX = coordinate[1];
+    MinY = coordinate[2];
+    MaxY = coordinate[3];
+
+    //列出此列当中的表格选中状态
+    for (var i = MinY; i <= MaxY; i++) {
+
+      for (var j = MinX; j <= MaxX; j++) {
+
+        var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
+        var td_class = jq("td", SelectTR).eq(j).attr('class');
+
+        if (td_class == Selected) {
+          //表格里存在已选中的元素
+          Selected_true = 1;
+        } else {
+          //表格里存在未选中的元素
+          Selected_false = 1;
+        }
+
+      }
+
+    }
+
+    //执行选中或去掉选中方法
+    for (var i = MinY; i <= MaxY; i++) {
+
+      for (var j = MinX; j <= MaxX; j++) {
+
+        var SelectTR = jq('#' + box_id + ' table tbody tr ').eq(i);
+        var td_class = jq("td", SelectTR).eq(j).attr('class');
+
+        //一列当中存在已选中与未选中的表格处理:整列全部选中
+        if (Selected_true == 1 && Selected_false == 1) {
+          jq("td", SelectTR).eq(j).attr("class", Selected);
+        } else if (Selected_false == 1) {
+          //一列当中只存在未选中的表格处理:整列全部选中
+          jq("td", SelectTR).eq(j).attr("class", Selected);
+        } else {
+          //一列当中只存在已选中的表格处理:整列全部去掉选中
+          jq("td", SelectTR).eq(j).removeClass(Selected);
+        }
+
+      }
+
+    }
+    //改变二进制值
+    get_time_val();
+    //改变日期显示
+    convert_date();
+  }
+
+  //获取选中范围的开始与结束的坐标
+  function get_coordinate(StartIndex, EndIndex) {
+    var MinX = null;
+    var MaxX = null;
+    var MinY = null;
+    var MaxY = null;
+
+    if (StartIndex.x < EndIndex.x) {
+      MinX = StartIndex.x;
+      MaxX = EndIndex.x;
+    } else {
+      MinX = EndIndex.x;
+      MaxX = StartIndex.x;
+    }
+    if (StartIndex.y < EndIndex.y) {
+      MinY = StartIndex.y;
+      MaxY = EndIndex.y;
+    } else {
+      MinY = EndIndex.y;
+      MaxY = StartIndex.y;
+    }
+    return [MinX, MaxX, MinY, MaxY];
+  }
+
+  //改变二进制值
+  function get_time_val() {
+    var time_type = '';
+    jq('#' + box_id + ' table tbody').find('td').each(function (k) {
+      var Selected_type = jq(this).attr('class');
+      var week = jq(this).attr('week');
+
+      if (Selected_type == Selected && !week) {
+        time_type += "1";
+      } else if (!week) {
+        time_type += "0";
+      }
+    });
+    jq('#' + box_id + '_time_num').val(time_type);
+    // convert_date();
+  }
+
+  //二进制数转换日期
+  function convert_date(external_binary) {
+    //初始化周数数组
+    var time_week_arr = [];
+    if (!external_binary) {
+      //内部调用,进行选中表格和输出时间操作。
+      var binary = jq('#' + box_id + '_time_num').val();
+    } else {
+      //存在外部参入传入,此函数进行返回时间操作。
+      var date_html = '';
+      var binary = external_binary;
+    }
+
+    for (var y = 0; y < 7; y++) {
+      //初始化小时数组
+      var time_hour_arr = [];
+
+      for (var x = 0; x < 48; x++) {
+
+        //获取当前点击元素的位置
+        if (y == 0) {
+          var index = x;
+        } else {
+          var index = (y * 48) + x;
+        }
+        //获取td对应的二进制值
+        var Selected_val = binary.charAt(index);
+
+        if (Selected_val == 1) {
+          //组装保存进数组里
+          if (time_hour_arr == []) {
+            //表格的第一个位置的值
+            time_hour_arr = arr_hour[x];
+          } else if (binary.charAt(index - 1) == 1 && binary.charAt(index - 2) == 1) {
+            //此位置(包含上一行)的前两个都为选中时
+
+            if (x == 0 && binary.charAt(index + 1) == 0) {
+              //选中行里第一个,后一个表格没选中,加逗号
+              time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
+            } else if (x == 0 && binary.charAt(index + 1) == 1) {
+              //选中行里第一个,后一个表格已选中,不加逗号
+              time_hour_arr[time_hour_arr.length] = arr_hour[x];
+            } else if (x == 1 && binary.charAt(index - 1) == 0) {
+              //选中行里第二个,上一个表格没选中,加逗号
+              time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
+            } else if (x == 1 && binary.charAt(index - 1) == 1) {
+              //选中行里第二个,上一个表格已选中,前加-号,后加逗号
+              time_hour_arr[time_hour_arr.length] = '-' + arr_hour[x] + ', ';
+            } else {
+              //选中行里除第一、二的表格以外,前一个表格已经选中,此元素前加- 后加逗号
+              time_hour_arr[time_hour_arr.length - 1] = '-' + arr_hour[x] + ', ';
+            }
+
+          } else if (binary.charAt(index - 1) == 1 && x > 0) {
+            //选中的前一个已选中,且此次选中的不是行里第一个,此次选中的元素前加-后加逗号
+            time_hour_arr[time_hour_arr.length] = '-' + arr_hour[x] + ', ';
+          } else if (binary.charAt(index + 1) != 1 || x == 47) {
+            //选中的后一个没选中,或者此次选中的是行里最后一个,此次选中的元素加逗号
+            time_hour_arr[time_hour_arr.length] = arr_hour[x] + ', ';
+          } else {
+            //选中的后一已选中,此次选中的元素不加逗号
+            time_hour_arr[time_hour_arr.length] = arr_hour[x];
+          }
+        }
+      }
+
+      time_week_arr[y] = time_hour_arr;
+
+    }
+// console.info(box_id);
+    if (!external_binary) {
+      jq('#' + box_id + '_time_seled').html('');
+    }
+    //再次组装并输出数组
+    var time_html = [];
+    for (var y = 0; y < 7; y++) {
+
+      for (var x = 0; x < time_week_arr[y].length; x++) {
+
+        if (!time_html[y]) {
+          time_html[y] = time_week_arr[y][x];
+        } else {
+          time_html[y] += time_week_arr[y][x];
+        }
+
+      }
+
+      if (time_html[y]) {
+        time_html[y] = time_html[y].substring(0, time_html[y].length - 2);
+
+        if (!external_binary) {
+          jq('#' + box_id + '_time_seled').append('<div>星期' + num [y] + ' (' + time_html[y] + ')' + '</div>');
+        } else {
+          date_html += '星期' + num [y] + ' (' + time_html[y] + ')' + ', ';
+        }
+      }
+    }
+
+    if (external_binary) {
+      return date_html;
+    }
+    // console.info(time_html);
+  }
+
+  //生成时间值数组
+  function get_hour_arr() {
+    var arr_hour = [];
+    var oDate = new Date("2016/07/01 00:00:00"); //实例一个时间对象;
+    var oDate_hour = oDate.getHours();
+    var oDate_minute = oDate.getMinutes();
+    for (var i = 0; i < 48; i++) {
+      if (oDate_minute < 10) {
+        var oDate_minute = "0" + oDate_minute;
+      }
+      if (i >= 1) {
+        oDate.setMinutes(oDate.getMinutes() + 30);
+        oDate_hour = oDate.getHours();
+        oDate_minute = oDate.getMinutes();
+        if (oDate_minute < 10) {
+          var oDate_minute = "0" + oDate_minute;
+        }
+      }
+      arr_hour[i] = oDate_hour + ':' + oDate_minute;
+    }
+    return arr_hour;
+  }
+
+  //更新操作
+  function renewal(id) {
+    if (id) {
+      box_id = id;
+    }
+    //解绑鼠标移动监听事件
+    jq('#' + box_id + ' table tbody tr td').unbind("mouseover");
+    //初始化表格的在此次选中状态
+    jq('#' + box_id + ' table tbody tr td').attr("td_state", '');
+    //改变二进制值
+    get_time_val();
+    //改变日期显示
+    convert_date();
+  }
+
+  //二进制数赋值选中表格
+  function binary_selected() {
+    var default_time_val = jq('#' + box_id + ' .default_time_val').val();
+    if (default_time_val) {
+      for (var i = 0; i < 336; i++) {
+        var td_selected = default_time_val.charAt(i);
+        if (td_selected != 0) {
+          jq('#' + box_id + ' table tbody tr td').eq(i).attr('class', 'Selected');
+          //更新操作,显示文字形日期
+          renewal();
+        }
+
+      }
+    }
+  }
+
+
+  //实例化程序
+  function load_time_table(id, value) {
+    //包住table的元素id
+    box_id = id;
+    var html;
+    html = '<input type="hidden" class="default_time_val" value="' + value + '"/>';
+    html += '<table cellspacing="0" cellpadding="0" border="0" class="plug-timer-grid"  onselectstart="return false" onselect="document.selection.empty()">';
+    html += '<thead>';
+    html += '<tr>';
+    html += '<th></th>';
+    html += '<th colSpan="24">上午</th>';
+    html += '<th colSpan="24">下午</th>';
+    html += '</tr>';
+    html += '<tr class="hour">';
+    html += '<th></th>';
+    html += '</tr>';
+    html += '</thead>';
+    html += '<tbody></tbody>';
+    html += '</table>';
+    html += '<input class="focus" type="hidden" style="opacity: 0;">';
+    html += '<div id="' + box_id + '_time_seled" style="line-height: 15px;font-size:10px;"></div>';
+    html += '<input type="hidden" id="' + box_id + '_time_num" name="time" caption="每日投放时段" switchname="selectTime"  value="' + value + '">';
+    jq('#' + box_id).html('');
+    jq('#' + box_id).append(html);
+    var html_tbody_td = '';
+    var html_thead_td = '';
+    //创建表格
+    for (var i = 0; i < 7; i++) {
+      var week = i + 1;
+      html_tbody_td += '<tr>';
+      for (var j = 0; j < 49; j++) {
+        if (j == 0) {
+          html_tbody_td += '<th week="' + week + '">星期' + num[i] + '</th>';
+        } else {
+          html_tbody_td += '<td>' + '</td>';
+        }
+      }
+      html_tbody_td += '</tr>';
+    }
+
+    //创建表格小时栏目
+    for (var i = 0; i <= 23; i++) {
+      html_thead_td += '<td colSpan="2" hour="' + i + '">' + i + '</td>';
+    }
+    jq('#' + box_id + ' table thead .hour').append(html_thead_td);
+    jq('#' + box_id + ' table tbody').html(html_tbody_td);
+    //检查是否有赋有二进制值,如有,将选中相应的表格
+    binary_selected();
+
+    //控制器,控制当前在哪个表格进行操作
+    jq('.plug-timer-grid').hover(function (e) {
+      if (1 != e.which) {    //判断是否为左击
+        var id = jq(this).parent().attr('id');
+        box_id = id;
+      }
+    });
+
+    //清除所有选中项
+    jq('.clear').click(function () {
+      jq(this).parent().find('td').removeClass(Selected);
+      var id = jq(this).parent().attr('id');
+      renewal(id);
+    });
+
+    //点击小时选中或去掉整列处理块
+    jq('#' + box_id + ' table thead tr td').click(function () {
+      hour = jq(this).attr('hour');
+      if (hour >= 0) {
+        var rows = jq('#' + box_id + ' table tbody tr').length;
+        Start_x = (jq(this).index()) * 2 - 1;
+        Start_y = 0;
+
+        StartIndex = {x: Start_x, y: Start_y};
+
+        EndTD = jq(this);
+        var x = (jq(this).index()) * 2 - 2;
+        var y = rows - 1;    //为了配合for计算公式-1
+
+        EndIndex = {x: x, y: y};
+        //改变第一次按下鼠标时候的改变选中状态
+        SelectTD_click(StartIndex, EndIndex, Selected);
+      }
+    });
+
+    //点击星期选中或去掉整行处理块
+    jq('#' + box_id + ' table tbody tr th').click(function () {
+      var week = jq(this).attr('week');
+      if (week >= 0) {
+        var line = jq('#' + box_id + ' table tbody tr td').length / jq('#' + box_id + ' table tbody tr').length;
+
+        Start_x = 0;
+        Start_y = jq(this).parent().index();
+
+        StartIndex = {x: Start_x, y: Start_y};
+
+        EndTD = jq(this);
+        var y = jq(this).parent().index();
+        var x = line - 1;     //为了配合for计算公式-1
+
+        EndIndex = {x: x, y: y};
+
+        //改变第一次按下鼠标时候的改变选中状态
+        SelectTD_click(StartIndex, EndIndex, Selected);
+      }
+    });
+
+    //监听鼠标按下事件(鼠标按下左键拖动选中处理块)
+    jq('#' + box_id + ' table tbody tr td').unbind("mousedown").bind("mousedown", function () {
+      //记录刚开始点击的元素位置
+      Start_x = jq(this).index() - 1;
+      Start_y = jq(this).parent().index();
+      StartIndex = {x: Start_x, y: Start_y};
+
+      EndTD = jq(this);
+      var x = jq(this).index() - 1;
+      var y = jq(this).parent().index();
+      EndIndex = {x: x, y: y};
+      //改变第一次按下鼠标时候的改变选中状态
+      SelectTD(StartIndex, EndIndex, Selected);
+
+      StartTD = jq(this);
+
+      StartIndex = {x: Start_x, y: Start_y};
+
+      //监听鼠标移动事件,实现改变后续鼠标拖拽时候的表格选中状态
+      jq('#' + box_id + ' table tbody tr td').mouseover(function (e) {
+        EndTD = jq(this);
+        var x = jq(this).index() - 1;
+        var y = jq(this).parent().index();
+        EndIndex = {x: x, y: y};
+        if (1 != e.which) {    //判断是否为左击
+          jq('#' + box_id + ' table tbody tr td').unbind("mouseover");
+        }
+        //去除停留在td上的光标
+        jq('#' + box_id + ' .focus').focus();
+        SelectTD(StartIndex, EndIndex, Selected);
+      });
+
+
+      //放开鼠标左键时,初始化相关参数和解绑相关监听
+      jq('html').unbind("mouseup").bind("mouseup", function () {
+        renewal();
+      });
+
+    });
+
+  }
+
+  /*外部调用接口*/
+
+  //解绑鼠标松开监听事件
+  function unbundle_mouseover() {
+    jq('html').unbind("mouseup");
+  }
+
+  /*二进制获取转换后的时间*/
+  function get_time_html(binary) {
+    return convert_date(binary);
+  }
+
+  jq(function () {
+    load_time_table('table_time_selected1', this.dateQuantumRange);
+
+  });
+
+
+</script>
+
+
+<style type="text/css">
+  .plug-timer-grid {
+    width: 100%;
+  }
+
+  .plug-timer-grid td, .plug-timer-grid th {
+    border: 1px solid #97B4D1;
+    text-align: center; /*cursor:pointer;*/
+    font-size: 10px;
+    line-height: 10px;
+  }
+
+  .Selected {
+    background-color: rgb(102, 162, 243);
+    opacity: 0.5;
+  }
+
+  .plug-timer-grid {
+    border-collapse: collapse;
+    z-index: 4;
+  }
+
+  .plug-timer-grid thead tr {
+    display: table-row;
+    vertical-align: inherit;
+    border-color: inherit;
+  }
+
+  table td {
+    height: 20px;
+    max-width: 5px;
+    border: 1px solid #dfe6ec;
+    font-size: 12px;
+    text-align: center;
+    vertical-align: middle;
+    overflow: hidden;
+    transition: background .5s;
+    -webkit-transition: background .5s;
+  }
+
+  .plug-timer-grid tbody th {
+    width: 4%;
+  }
+
+  .plug-timer-grid tbody tr td {
+    width: 2%;
+  }
+
+  /*.clear{*/
+  /*  margin:20px 0px 20px 0px;*/
+  /*}*/
+</style>
+

+ 148 - 0
src/views/modules/kuaishouapp/modules/KuaiShouVideoModal.vue

@@ -0,0 +1,148 @@
+<template>
+  <a-modal
+    :title="title"
+    :width="800"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+      
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="视频保存本地地址">
+          <a-input placeholder="请输入视频保存本地地址" v-decorator="['localUrl', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          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', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="视频类别">
+          <a-input placeholder="请输入视频类别" v-decorator="['videoType', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          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"
+
+  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",
+        },
+      }
+    },
+    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','videoDesc','videoName','videoType','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);
+            //时间格式化
+            
+            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>

+ 155 - 0
src/views/modules/kuaishouapp/modules/KuaiShouVideoModal__Style#Drawer.vue

@@ -0,0 +1,155 @@
+<template>
+  <a-drawer
+      :title="title"
+      :width="800"
+      placement="right"
+      :closable="false"
+      @close="close"
+      :visible="visible"
+  >
+
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+      
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="视频保存本地地址">
+          <a-input placeholder="请输入视频保存本地地址" v-decorator="['localUrl', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          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', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="视频类别">
+          <a-input placeholder="请输入视频类别" v-decorator="['videoType', {}]" />
+        </a-form-item>
+        <a-form-item
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          label="登录人id">
+          <a-input placeholder="请输入登录人id" v-decorator="['loginId', {}]" />
+        </a-form-item>
+		
+      </a-form>
+    </a-spin>
+    <a-button type="primary" @click="handleOk">确定</a-button>
+    <a-button type="primary" @click="handleCancel">取消</a-button>
+  </a-drawer>
+</template>
+
+<script>
+  import { httpAction } from '@/api/manage'
+  import pick from 'lodash.pick'
+  import moment from "moment"
+
+  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",
+        },
+      }
+    },
+    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','videoDesc','videoName','videoType','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);
+            //时间格式化
+            
+            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>
+/** Button按钮间距 */
+  .ant-btn {
+    margin-left: 30px;
+    margin-bottom: 30px;
+    float: right;
+  }
+</style>

+ 313 - 0
src/views/modules/kuaishouapp/uploadApp.vue

@@ -0,0 +1,313 @@
+<template>
+  <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 v-model="downloadUrl" placeholder="请填写视频链接"/>
+          </a-form-item>
+
+
+          <a-form-item
+            label="应用包名"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-input v-model="packageName" placeholder="请填写包名称,如com.smile.gifmaker"/>
+          </a-form-item>
+
+          <a-form-item
+            label="应用名称"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-input v-model="appName" placeholder="请填写应用名称"/>
+          </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 v-model="appVersion" placeholder="请填写应用标记,必填且不可重复,如快手-5.6.1.66"/>
+          </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 v-model="downloadUrl" placeholder="请填写应用下载地址"/>
+          </a-form-item>
+
+          <a-form-item
+            label="应用名称"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-input v-model="appName" placeholder="请填写应用名称"/>
+          </a-form-item>
+          <a-form-item
+            label="应用标记"
+            :labelCol="{xs: {span: 24},sm: {span: 5}}"
+            :wrapperCol="{xs: {span: 24},sm: {span: 16}}">
+            <a-input v-model="appVersion" placeholder="请填写应用标记,必填且不可重复,如快手-5.6.1.66"/>
+          </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>
+</template>
+
+<script>
+  import {deleteAction, postAction, getAction} from '@/api/manage'
+  import UploadToAli from '@femessage/upload-to-ali';
+  import {mapActions, mapGetters} from 'vuex'
+
+  export default {
+    name: 'BaseForm',
+    components: {
+      UploadToAli
+    },
+    data() {
+      return {
+        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',
+        accessKeyId: 'LTAIbNbqWzSOklQV',
+        accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+        region: 'oss-cn-beijing',
+        bucket: 'ctop-media',
+        form: this.$form.createForm(this),
+        url: {
+
+          insertTemplateUrl: '/kuaishou/kuaiShouCreateAppTemplate/insert'
+        }
+      }
+    },
+    methods: {
+      ...mapGetters(["nickname", "avatar", "userInfo"]),
+      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.form.validateFields((err, values) => {
+          if (!err) {
+            console.log('Received values of form: ', values);
+            let params = {};
+            if (this.uploadType == '1') {
+              params.file = this.file;
+            } else if (this.uploadType == '2') {
+              params.url = this.downloadUrl;
+            }
+            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) {
+                 alert("创建应用成功");
+               }
+             });
+          }
+        })
+      },
+
+
+      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.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("广告组模板创建成功");
+               }
+             });
+          }
+        })
+      },
+
+
+      onChange(value) {
+        console.log(value);
+      },
+
+
+    }
+  }
+</script>

+ 130 - 0
src/views/modules/kuaishouapp/uploadVideo.vue

@@ -0,0 +1,130 @@
+<template>
+  <a-card :bordered="false">
+
+
+    <a-form @submit="handleSubmit" :form="form">
+
+      <!--<a-form-item
+        label="视频标识"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 8}, sm: {span: 8} }">
+        <a-input v-model="videoName" placeholder="(必填) 区分视频的标识"></a-input>
+      </a-form-item>-->
+
+      <a-form-item
+        label="视频素材上传"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 12}, sm: {span: 12} }">
+        <upload-to-ali v-model="localUrl"
+                       :customDomain="customDomain"
+                       multiple
+                       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="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 8}, sm: {span: 8} }">
+        <a-textarea
+          v-decorator="[
+                  'confirm_videoDesc',
+                  {rules: [{ required: true, message: 'error:' },
+                  {validator: handleConfirmValue}]}
+                ]"
+          v-model="videoDesc" placeholder="(必填) 说点什么..." :rows="4"/>
+      </a-form-item>
+
+      <a-form-item
+        label="格式"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 8}, sm: {span: 2} }">
+        <span>视频上传需满足以下条件</span>
+        <ul siz>
+          <li>视频格式为MPEG-4/H.264/HEVC编码的MP4,
+            其中,分辨率不小于720p、码率不小于3000kbps以及帧率不小于20fps
+          </li>
+          <li>音频编码为AAC并且码率不小于64kbps</li>
+          <li>上传视频的时长为5秒到10分钟以内且大小不超过 100 M</li>
+        </ul>
+      </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-card>
+</template>
+
+<script>
+  import UploadToAli from '@femessage/upload-to-ali';
+  import {postAction, getAction} from '@/api/manage';
+  import {mapActions, mapGetters} from 'vuex'
+
+  export default {
+    name: 'BaseForm',
+    components: {
+      UploadToAli
+    },
+    data() {
+      return {
+        localUrl: '',
+        videoDesc: '',
+        customDomain: '',
+        acceptVideo: 'video/mpeg,video/mp4',
+        accessKeyId: 'LTAIbNbqWzSOklQV',
+        accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+        region: 'oss-cn-beijing',
+        bucket: 'ctop-media',
+        form: this.$form.createForm(this),
+        url: {
+          addUrl: '/kuaishou/kuaiShouVideo/insert',
+        }
+      }
+    },
+
+    methods: {
+      ...mapGetters(["nickname", "avatar", "userInfo"]),
+      handleConfirmValue(rule, value, callback) {
+        value = this.videoDesc;
+        if (value == '') {
+          callback('请输入视频描述')
+        }
+        callback()
+      },
+      handleSubmit(e) {
+        console.log("测试提交");
+        console.log(this.localUrl);
+        console.log(this.videoDesc);
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            console.log('Received values of form: ', values);
+            let params = {};
+            params.localUrl = this.localUrl;
+            params.videoDesc = this.videoDesc;
+            params.loginId = this.userInfo().id;
+            console.log(params)
+            postAction(this.url.addUrl, params).then((res) => {
+              console.log(res)
+              if (res.success) {
+                alert("视频批量上传成功");
+              }
+            });
+          }
+        })
+      },
+    }
+  }
+</script>