魏志佳 преди 5 години
родител
ревизия
5d9aa8bc00
променени са 1 файла, в които са добавени 172 реда и са изтрити 0 реда
  1. 172 0
      src/views/modules/BatchCreate/TouTiaoBatch.vue

+ 172 - 0
src/views/modules/BatchCreate/TouTiaoBatch.vue

@@ -0,0 +1,172 @@
+<template>
+    <div class="toutiaoBatch">
+        <div class="tabs">
+            <a-tabs  @change="callback">
+                <a-tab-pane key="group" tab="广告组">                
+                </a-tab-pane>
+                <a-tab-pane key="plan" tab="广告计划">              
+                </a-tab-pane>
+                <a-tab-pane key="idea" tab="广告创意">               
+                </a-tab-pane>
+                <a-button type='primary' slot="tabBarExtraContent" @click="goBatch">
+                   + 头条批量创建
+                </a-button>
+            </a-tabs>
+        </div>
+        <div class="topOptions">
+            <span class="OptinItem">
+                <a-select  style="width: 120px" @change="statusChange" placeholder="请选择状态">    
+                    <a-select-option value="open" >
+                        开
+                    </a-select-option>
+                    <a-select-option value="close">
+                        关
+                    </a-select-option>
+                </a-select>
+            </span>
+            <span class="OptinItem">           
+                <a-input-search  placeholder="请选择媒体账户" style="width: 200px" v-model="account" />
+            </span>
+            <span class="OptinItem">
+                <a-date-picker @change="dateChange" />
+            </span>
+            <span class="OptinItem">
+                <a-input-search placeholder="请输入ID或名称关键词" v-model="optionId" style="width: 200px" @search="onSearch" />
+            </span>
+            <span class="optionBtn">
+                <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
+                <a-button type='default' @click="reset">重置</a-button>
+            </span>
+        </div>
+        <div class="tableArea">
+            <div class="tableOption">
+                <span class="OptinItem">
+                    
+                    <a-tooltip>
+                        <template slot="title" :getPopupContainer='getPopupContainer'>
+                        点我就可以批量启动、暂停、删除你的选择哦~
+                        </template>
+                        <a-button type="link" @click="changeSelectStatus">批量操作</a-button>
+                    </a-tooltip>
+                </span>
+                <span class="OptinItem">
+                    <a-select  style="width: 120px" @change="statusChange" placeholder="" :disable='selectDisable'>    
+                        <a-select-option value="open" >
+                            启动
+                        </a-select-option>
+                        <a-select-option value="close">
+                            暂停
+                        </a-select-option>
+                        <a-select-option value="close">
+                            删除
+                        </a-select-option>
+                    </a-select>
+                </span>
+                 <span class="OptinItem">
+                    <a-button type='primary' @click="isOkHandle" class="ok">确定</a-button>
+                    <a-button type='default' @click="reset" v-show="tabkey!='idea'">更改预算</a-button>
+                    <a-button type='default' @click="reset" v-show="tabkey=='plan'">更改出价</a-button>
+                 </span>
+                <span class="optionBtn">                    
+                    <a-button type='primary' @click="reset">自定义列</a-button>
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+export default {
+    data() {
+        return {
+            account:'',//媒体账号
+            optionId:'',//input输入的id或关键词
+            dateValue:'',//日期选择框选择的事件--我赋值的是dateString
+            tabkey:'group',//tab选中的页
+            selectDisable:true,
+        }
+    },
+    methods: {
+        //tab切换页的函数
+        callback(key) {
+            console.log(key);
+        },
+        //跳转到批量页面
+        goBatch(){
+
+        },
+        //状态改变
+        statusChange(value){
+            console.log('status--'+value)
+        },
+        //日期改变
+        dateChange(date, dateString) {
+            console.log(date, dateString);
+        },
+        //输入框查询事件
+        onSearch(value){
+            console.log('input--'+value);
+        },
+        //查询按钮事件
+        search(){
+
+        },
+        //重置按钮事件
+        reset(){
+
+        },
+
+        //改变批量操作的按钮
+        changeSelectStatus(){
+            this.selectDisable=false;
+        },
+        //批量操作的确定按钮
+        isOkHandle(){
+            this.selectDisable=true;
+        },
+        //更改文字提示的父节点
+        getPopupContainer(){
+            console.log(this);
+            return this.$el
+        },
+    },
+    mounted() {
+        console.log(this)
+    },
+}
+</script>
+<style lang="scss">
+     .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
+        background-color: #fff;
+        color: #333;
+    }
+
+</style>
+<style lang="scss" scoped>
+.toutiaoBatch{
+    background-color: #fff;
+    padding: 10px 20px;
+    position: relative;
+    .OptinItem{
+        display: inline-block;
+        margin-right: 15px;
+        .ok{
+            margin-right: 15px;
+        }
+    }
+    .topOptions{
+        padding: 15px 0;
+    }
+    .optionBtn{
+        // display: inline-block;
+        float: right;
+        .searchBtn{
+            margin-right: 10px;
+        }
+    }
+    .tableArea{
+        margin-top: 20px;
+    }
+}
+</style>