admin_home/src/views/componentGallery/plate.vue

<!-- 板块 -->
<template>
    <div>
        <!-- 头部搜索框部分 -->
        <div class="title">
            <el-row>
                <el-col :span="6" class="left">
                    <div class="searchBox">
                        <div class="searchTitle">通栏名称</div>
                        <el-input v-model="apiData.sector_name" clearable placeholder="请输入通栏名称"></el-input>
                    </div>
                </el-col>
                <el-col :span="6" class="left">
                    <div class="searchBox">
                        <div class="searchTitle">模板风格</div>
                        <el-select v-model="apiData.template_class_id" clearable placeholder="请选择模板风格" @change="getSkinList">
                            <el-option v-for="item in class_options" :key="item.class_id" :label="item.name" :value="item.class_id">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="6" class="left">
                    <div class="searchBox">
                        <div class="searchTitle">所属皮肤</div>
                        <el-select v-model="apiData.template_id" clearable placeholder="请选择所属皮肤">
                            <el-option v-for="item in template_options" :key="item.template_id" :label="item.template_name" :value="item.template_id">
                            </el-option>
                        </el-select>
                        
                    </div>
                </el-col>
                <el-col :span="6" class="right">
                    <div class="btnList">
                        <button class="search" @click="goSearch">搜索</button>
                        <button class="reset" @click="goReset">重置</button>
                    </div>
                </el-col>
            </el-row>
            <el-row class="rowMargin">
                <el-col :span="6" class="left">
                    <div class="searchBox">
                        <div class="searchTitle">尺寸</div>
                        <div class="sizeBox">
                            <div class="sizeInput"><el-input v-model="apiData.width" clearable placeholder="宽"></el-input> </div>
                            <div class="sizeInputSymbol">*</div>
                            <div class="sizeInput"><el-input v-model="apiData.height" clearable placeholder="高"></el-input></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--表格内容 start------------------------------------------------------------>
        <div class="layerBox">
            <tableTitle :name="tableDivTitle" />
            <button class="btn" @click="addPlate">添加通栏</button>
            <el-row>
                <template>
                    <el-table class="my-table" :data="tableData" style="width: 100%" >
                        <el-table-column fixed prop="sector_id" label="编号" width="90"></el-table-column>
                        <el-table-column prop="sector_name" label="通栏名称" width=""></el-table-column>
                        <el-table-column prop="sector_size" label="尺寸" width=""></el-table-column>
                        <el-table-column prop="template_name" label="所属皮肤" width=""></el-table-column>
                        <el-table-column prop="class_name" label="所属风格" width=""></el-table-column>
                        <el-table-column prop="pagetype" label="所属页面" width="230">
                        </el-table-column>
                        <el-table-column prop="created_at" label="添加时间" width=""></el-table-column>
                        <el-table-column prop="updated_at" label="修改时间" width=""></el-table-column>
                        <el-table-column fixed="right" label="操作" width="200">
                            <template slot-scope="scope">
                                <div class="listBtnBox">
                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
                                        <i class="el-icon-delete"></i>
                                        删除
                                    </div>
                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
                                        <i class="el-icon-edit-outline"></i>
                                        编辑
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-row>
        </div>
        <!--分页 start------------------------------------------------------------>
        <div class="alignBox">
            <el-row>
                <el-col :span="24">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
        <!--分页 end------------------------------------------------------------>
        <!--表格内容 end------------------------------------------------------------>

        <!-- 弹出框 编辑 start----------------------------------------------------------->
        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh" :close-on-click-modal="false">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <div class="dialogText">
                    <el-form-item label="通栏名称:" prop="sectorName">
                        <el-input v-model="ruleForm.sectorName" placeholder="输入通栏名称"></el-input>
                    </el-form-item>
                    <el-form-item label="通栏编号:" prop="sectorId">
                        <el-input v-model.number="ruleForm.sectorId" placeholder="输入通栏编号" type="number" min="1"></el-input>
                    </el-form-item>
                    <el-form-item label="组件数量:" prop="component_num">
                        <el-input v-model.number="ruleForm.component_num" placeholder="输入组件数量" type="number" min="1" @change="getPlaceList(ruleForm.component_num)">

                        </el-input>
                    </el-form-item>
                    <el-form-item label="所属皮肤:" prop="templateStyle">
                        <el-select v-model="ruleForm.templateStyle" placeholder="请选择所属皮肤"
                            :disabled="this.dialogName === '编辑'" @change="changeTemplateStyle">
                            <el-option v-for="item in template_options" :key="item.template_id" 
                            :label="item.template_name" :value="item.template_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="皮肤id:" prop="templateStyle">
                        <el-input v-model="ruleForm.templateStyle" placeholder="所属皮肤id"
                            disabled></el-input>
                    </el-form-item>
                    <el-form-item label="尺寸:" prop="sizeList">
                        <el-select v-model="ruleForm.sizeList" placeholder="请选择尺寸" @change="changeTemplateStyle">
                            <el-option v-for="item in size_options" :key="item.id" :label="item.label" :value="item.id">{{item.label}}
                            </el-option>
                        </el-select>
                    </el-form-item>
                   
                     <el-form-item label="通栏类别:" prop="sectorType">
                        <el-select v-model="ruleForm.sectorType" placeholder="请选择所属页面" :disabled="this.dialogName === '编辑'">
                            <!-- 通栏分类：1：资讯类：2：通栏广告类；3：混合类；4：搜索框类；5：导航类；6：头条类；7：轮播图类； -->
                            <el-option :value="1" label="资讯类">资讯类</el-option>
                            <el-option :value="2" label="广告类">广告类</el-option>
                            <el-option :value="3" label="混合类">混合类</el-option>
                            <el-option :value="4" label="搜索框类">搜索框类</el-option>
                            <el-option :value="5" label="导航类">导航类</el-option>
                            <el-option :value="6" label="通栏类">头条类</el-option>
                            <el-option :value="7" label="通栏类">轮播图类</el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="页面类型:" prop="pageType">
                        <el-checkbox-group v-model="ruleForm.pageType" @change="changeCheckbox"
                            :disabled="this.dialogName === '编辑'">
                            <el-checkbox v-for="(item, index) in checkList" :key="index" :label="item.value">{{item.label}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                     <el-form-item label="通栏模版类型:" prop="sectorPlace">
                        <el-select v-model="ruleForm.sectorPlace" placeholder="请选择通栏模版类型" @change="changeTemplateStyle">
                            <el-option v-for="item in sectorPlace_options" :key="item.type" :label="item.component_img" :value="item.type">{{item.component_img}}
                            </el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="通栏关键词：" prop="sectorKeyword" class="custom-align-right">
                        <template #label>
                        <span class="askBox">
                            通栏关键词：
                            <el-tooltip class="item" effect="dark" content="皮肤关键词，如：黑色、卡通、英雄。" placement="top">
                            <i class="el-icon-question"></i>
                            </el-tooltip>
                        </span>
                        </template>
                        <tagInput :initialTags="tags" @tags-updated="updateTags"></tagInput>
                    </el-form-item>
                    <el-form-item label="通栏缩略图：" prop="image" :label-width="formLabelWidth"
                        :class="['custom-form-item']" class="custom-align-right">
                        <div class="uploaderBox">
                            <!--图片上传组件 start ------------------------------------------------------------>
                            <div class="avatar-upload-container" @mouseenter="hovering = true"
                                @mouseleave="hovering = false">
                                <!-- 上传组件 -->
                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
                                    :before-upload="beforeAvatarUpload">
                                    <!-- 预览图片 -->
                                    <img v-if="this.logoUrl" :src="this.logoUrl" class="avatar">
                                    <!-- 上传图标 -->
                                    <div v-else class="chooseImgDiv">
                                        <div>
                                            <img src="@/assets/public/upload/noImage.png">
                                            <div>选择图片</div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="logo" v-model="ruleForm.image">
                                </el-upload>
                                <!-- 删除按钮，当鼠标悬浮时显示 -->
                                <div v-if="hovering && logoUrl" class="delete-button" @click="handleDelete">
                                    <i class="el-icon-delete"></i>
                                </div>
                            </div>
                            <!--图片上传组件 end ------------------------------------------------------------>
                        </div>
                    </el-form-item>
                </div>
                <div class="dialogBtn">
                    <el-button type="info" @click="cancelForm">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                </div>
            </el-form>
        </el-dialog>
        <!-- 弹出框 编辑 end----------------------------------------------------------->
    </div>
</template>

<script>
//表格标题
import tableTitle from './components/tableTitle.vue';
import tagInput from '../../components/InputTag/index.vue';
//引入公用样式
import '@/styles/global.less';
// import { getSectorList, addSector, delSector, updateSector, getSectorInfo } from '@/api/plate'
// import { getTemplateClass } from '@/api/style'
export default {
    components: {
        tableTitle,//表格标题-
        tagInput
    },
    data() {
        const validateEmpty = (rule, value, callback) => {
            if (value.length == 0) {
                callback(new Error('该项不能为空！'))
            } else {
                callback()
            }
        }
        const validateArray = (rule, value, callback) => {
            if (value.length == 0) {
                callback(new Error('该项不能为空！'))
            } else {
                callback()
            }
        }
        return {
            //1.1 初始化信息 
            tableDivTitle: "通栏列表",  //列表标题
            dialogTableVisible: false,      //编辑弹框
            dialogName: '编辑', //编辑弹窗名称
            plateLoading: true, //表格内容加载中

            tableData: [],//表格数据
            class_options: [],//风格下拉列表
            template_options: [],//皮肤下拉列表
            size_options: [],//尺寸下拉列表
            sectorPlace_options: [],//通栏模版类型下拉列表
            tags: [],//标签数据
            // 1.2搜索框相关 
            apiData:{
                pagetype: '',//页面类型
                template_class_id: '',//模板风格
                tempalte_id: '',//皮肤名称
                sector_name: '',//通栏名称

                width: '',//通栏宽度
                height: '',//通栏高度
                keyword: '',//通栏关键词
            },
            templateStyle: '',//风格
            plateName: '',

            pageType: '',//页面类型
            value: '',
            checkList: [
                {
                    value: 1,
                    label: '首页',
                },
                {
                    value: 2,
                    label: '分类页',
                },
                {
                    value: 3,
                    label: '列表页',
                },
                {
                    value: 4,
                    label: '详情页',
                },
                {
                    value: 5,
                    label: '搜索页',
                },
                {
                    value: 6,
                    label: '特殊列表页',
                },
                {
                    value: 7,
                    label: '特殊详情页',
                },
            ],

            //活动id
            activeid: "",

            newArr: [],

            // 1.3 分页相关 
            page: 1,
            pageSize: 10,
            total: 0,

            formLabelWidth: '', //广告示例图相关


            //1.4 弹框相关数据 
            ruleForm: {
                sectorName: '',     //通栏名称
                sectorPlace: null,  //通栏模版类型
                component_num: null,  //组件数量 
                sectorId: null,       //通栏编号id
                templateStyle: '',  //所属皮肤
                pageType: '',       //页面类型
                sizeList: '',       //尺寸
                sectorType: null,     //通栏名称
                plateCode: '',      //通栏代码
                pageType: [],       //页面类型
                sectorKeyword: '',  //通栏关键词
                image: '',          //组件展示图
            },
            rules: {
                sectorName: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                component_num: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                sectorId: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                templateStyle: [{ required: true, trigger: 'blur', validator: validateEmpty }], //关联皮肤名称 
                sizeList: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                // plateCode: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                sectorType: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                pageType: [{ required: true, trigger: 'blur', validator: validateArray }],
                sectorKeyword: [{ required: true, trigger: 'blur', validator: validateEmpty }],
                image: [{ required: true, trigger: 'blur', validator: validateEmpty }],
            },


            //1.5 弹窗中 上传logo图片
            logoUrl: '',
            hovering: false, // 鼠标悬浮状态 悬浮时显示删除
        }
    },
    methods: {
        //1.列表和分页相关 start ------------------------------------------------------------>
        //1.1 开始请求列表信息方法
        getData() {
            this.$store.dispatch('plate/getSectorList', { page: this.page, page_size: this.pageSize }).then(data => {
                this.tableData = data.data.data
                this.total = data.data.total
                console.log(typeof(data.data.data));
                for (let i = 0; i < data.data.data.length; i++) {
                    const item = data.data.data[i];
                    this.tableData[i].sector_size = item.width + ' * ' + item.height;
                    let pageArray = JSON.parse(item.page_type);
                    if (Array.isArray(pageArray)) {
                        // item.tags = keywordArray;
                        item.pagetype = pageArray.map(type => {
                            const pageTypeMap = {
                                1: '首页',
                                2: '分类页',
                                3: '列表页',
                                4: '详情页',
                                5: '搜索页',
                                6: '特殊列表页',
                                7: '特殊详情页'
                            };
                            return pageTypeMap[type] || type;
                        }).join(' | ');
                    } else {
                        item.pagetype = '';
                    }
                }
            })

        },

        //获取风格列表
        getStyleList() {
            this.$store.dispatch('genre/getTemplateClass').then(res => {
                this.class_options  = res.data
                // console.log(res.data);
            }).catch(() => {
                this.$message({
                    type: 'error',
                    message: '网络错误，请重试！'
                });
            })
        },
        //获取皮肤列表
        getSkinList() {
            let data = [];
            // console.log("5588888",this.apiData.template_class_id);
            if(this.apiData.template_class_id){
                let data = {
                    templte_class_id: this.apiData.template_class_id,
                }  
            }
            this.$store.dispatch('plate/getAllTemplate', data).then(res => {
                this.template_options  = res.data
                console.log(res.data);
            }).catch(() => {
                this.$message({
                    type: 'error',
                    message: '网络错误，请重试！'
                });
            })
        },
        // 获取尺寸列表
        getSizeList() {
            this.$store.dispatch('plate/getAllSize').then(res => {
                this.size_options  = res.data
                if(res.data){
                    this.size_options.forEach(item => {
                        item.label = item.width + ' * ' + item.height;
                    })
                }
                console.log(res.data);
            }).catch(() => {
                this.$message({
                    type: 'error',
                    message: '网络错误，请重试！'
                });
            })
        },
         // 获取位置列表
        getPlaceList(sectorType) {
            // if( this.dialogName == '编辑' ||  this.dialogName == '添加'){
                let data = {
                 sector_num : sectorType,
                }
                console.log("888888888888888888",data);
                this.$store.dispatch('plate/getSectorPlace',data).then(res => {
                    this.sectorPlace_options  = res.data
                    console.log(res.data);
                }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '网络错误，请重试！'
                    });
                })
            // }
            
        },
        //1.2 删除内容
        deleteRow(id) {
            console.log(id);
            let data = new FormData()
            data.append('id', id)
            this.$confirm('注意:删除后，该条信息及其绑定关系全部删除', '是否确认删除该条信息？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                console.log("当前删除：" + id)
                this.$store.dispatch('plate/delSector', {id:id}).then(res => {
                    console.log(res);
                    if (res.code = 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getData()
                    } else if (res.code == 0) {
                        this.$message({
                            message: res.message,
                            type: 'error'
                        })
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'warning',
                    message: '已取消删除'
                });
            });
        },
        //1.3 多选按钮发生变化
        changeCheckbox(val) {
            console.log(val);
            this.newArr = []
            val.forEach(item => {
                if (typeof item !== 'object' || !item.hasOwnProperty('__ob__')) {
                    this.newArr.push(item);
                }
            });
            this.pageType = JSON.stringify(this.newArr);
            console.log(this.pageType);
        },

        changeTemplateStyle(val) {
            console.log('风格id', val);
            console.log(this.ruleForm.templateStyle);
        },

        //1.4 列表内容分页
        //直接跳转
        handleSizeChange(val) {
            this.page = val;
            this.getData();
        },
        //1.5 点击分页
        handleCurrentChange(val) {
            this.page = val;
            this.getData();
        },
        // 1.6 搜索按钮
        goSearch() {
            const data = {
                page: this.page,
                page_size: this.pageSize,
                sector_name: this.apiData.sector_name ?? '', //通栏名称
                template_class_id: this.apiData.template_class_id ?? null, //风格id
                template_id: this.apiData.template_id ?? null, //通栏id
                width: this.apiData.width ?? null,   //通栏宽度
                height: this.apiData.height ?? null, //通栏高度
                keyword: this.apiData.keyword ?? '', //通栏关键词
            }
            this.$store.dispatch('plate/getSectorList',data ).then(data => {
                this.tableData = data.data.data
                this.total = data.data.total
                for (let i = 0; i < data.data.data.length; i++) {
                    const item = data.data.data[i];
                    this.tableData[i].sector_size = item.width + ' * ' + item.height;
                    try {
                        let pageArray = JSON.parse(item.pagetype);
                        if (Array.isArray(pageArray)) {
                            // item.tags = keywordArray;
                            item.pagetype = pageArray.map(type => {
                                const pageTypeMap = {
                                    '1': '首页',
                                    '2': '分类页',
                                    '3': '列表页',
                                    '4': '详情页',
                                    '5': '搜索页',
                                    '6': '特殊列表页',
                                    '7': '特殊详情页'
                                };
                                return pageTypeMap[type] || type;
                            }).join(' | ');
                        } else {
                            item.pagetype = '';
                        }
                    } catch (error) {
                        console.error('解析 keyword 失败:', error);
                    }
                }
            })
        },
        //1.7 重置按钮
        goReset() {
            this.apiData.pagetype = '',//页面类型
            this.apiData.template_class_id= '',//模板风格
            this.apiData.template_id = '',//皮肤名称
            this.apiData.sector_name= '',//通栏名称
            this.apiData.width= '',//通栏宽度
            this.apiData.height= '',//通栏高度
            this.apiData.keyword= '',//通栏关键词
            this.page=1
            this.pageSize=10
            this.getData()
        },
        //列表和分页相关 end ------------------------------------------------------------>

        //1.9 编辑
        goEdit(id, val) {
            // console.log(id);
            this.dialogName = '编辑'
            this.activeid = id
            this.dialogTableVisible = true
            console.log(id, val);
            // console.log("状态", val.status);
            this.hovering = false

            //数据回显
            console.log("valbianji ",val);
            this.ruleForm.sectorName = val.sector_name;      //通栏名称
            this.ruleForm.sectorId = val.sector_id;      //通栏编号id
            this.ruleForm.templateStyle = val.template_id;   //关联皮肤名称
            this.ruleForm.component_num = val.component_num;   //组件数量
            this.ruleForm.sizeList = val.size_id;        //通栏尺寸
            this.ruleForm.sectorType = val.place_type;      //通栏类别
            this.ruleForm.pageType = JSON.parse(val.page_type);        // 通栏页面类型，根据符号|划分字符串为数组
            this.ruleForm.sectorPlace = val.sector_place;        //通栏模版类型
            this.tags =  val.pagetype ? val.pagetype.split(' | ') : [];
            this.ruleForm.plateCode = val.sector_code;       //通栏代码
            this.ruleForm.sectorKeyword = JSON.parse(val.sector_keyword);   //通栏关键词
            this.ruleForm.image = val.sector_img;           //通栏展示图
            this.logoUrl = val.sector_img;
            console.log("valruleForm ",this.ruleForm);
        },


        //1.7 添加
        addPlate() {
            this.dialogTableVisible = true
            this.dialogName = "添加"
            //添加时清空回显回来的数据
            this.ruleForm.sectorName = '';      //通栏名称
            this.ruleForm.sectorId = null;      //通栏编号id
            this.ruleForm.templateStyle = '';   //关联皮肤名称
            this.ruleForm.sizeList = '';        //通栏尺寸
            this.ruleForm.sectorType = null;      //通栏类别
            this.ruleForm.pageType = [];        //通栏页面类型
            this.ruleForm.plateCode = '';       //通栏代码
            this.ruleForm.sectorKeyword = '';   //通栏关键词
            this.ruleForm.component_num = null;  //组件数量
            this.ruleForm.image = '';           //通栏展示图
            // this.getPlaceList();
        },

        // 弹出层相关方法
        // 提交表单
        submitForm(formName) {
            if (this.dialogName == "添加") {
                const data = {
                    sector_name: this.ruleForm.sectorName,       //通栏名称
                    sector_id: this.ruleForm.sectorId,           //通栏编号
                    template_id: this.ruleForm.templateStyle,    //所属皮肤
                    size_id: this.ruleForm.sizeList,             //通栏尺寸
                    sector_type: this.ruleForm.sectorType,       //通栏类别
                    sector_code: this.ruleForm.plateCode,        //通栏代码
                    page_type: this.ruleForm.pageType,           //页面类型
                    component_num: this.ruleForm.component_num,  //组件数量
                    sector_keyword: JSON.stringify(this.ruleForm.sectorKeyword), //通栏关键词
                    sector_img: this.ruleForm.image,           //通栏展示图
                }
                console.log("5555555555555",data);
                this.$store.dispatch('plate/addSector',data).then(data => {
                    if (data.code == 200) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        })
                        this.dialogTableVisible = false
                        this.getData()
                    }else{
                        this.$message({
                            message: data.message,
                            type: 'error'
                        })
                    }
                })
                
            }
            if (this.dialogName == "编辑") {
                const data = {
                    id: this.activeid,
                    sector_name: this.ruleForm.sectorName,       //通栏名称
                    sector_id: this.ruleForm.sectorId,           //通栏编号
                    template_id: this.ruleForm.templateStyle,    //所属皮肤
                    size_id: this.ruleForm.sizeList,             //通栏尺寸
                    sector_type: this.ruleForm.sectorType,       //通栏类别
                    sector_code: this.ruleForm.plateCode,        //通栏代码
                    page_type: this.ruleForm.pageType,           //页面类型
                    component_num: this.ruleForm.component_num,  //组件数量
                    sector_keyword: JSON.stringify(this.ruleForm.sectorKeyword), //通栏关键词
                    sector_img: this.ruleForm.image,           //通栏展示图
                }
                console.log("data",data);
                this.$store.dispatch('plate/updateSector', data).then(data => {
                    console.log(data);
                    if (data.code == 200) {
                        this.$message({
                            message: '编辑成功',
                            type: 'success'
                        })  
                        this.dialogTableVisible = false
                        this.getData()
                    }else{
                        this.$message({
                            message: data.message,
                            type: 'error'
                        })
                    }
                })
            }
        },
        //取消添加或编辑
        cancelForm() {
            this.dialogTableVisible = false
        },
        //3.6 上传图片操作
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isPNG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG && !isPNG) {
                this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
                return false;
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
                return false;
            }

            const formData = new FormData();
            formData.append('file', file);

            this.$store.dispatch('pool/uploadFile', formData).then(res => {
                this.logoUrl = res.data.imgUrl;//显示缩略图
                this.ruleForm.image = res.data.imgUrl;//提供表单地址
                console.log(res.data.imgUrl)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '网络错误，请重试！'
                });
            })

            // 阻止默认的上传行为
            return false;
        },
        handleDelete() {
            // 删除图片
            this.logoUrl = ''; // 清空图片 URL
        },

        //
        getWebNavList(query) {
            if (query !== '') {
                this.webSiteLoading = true;
                let data = { keyword: query }
                let dataArr = [];
                this.$store.dispatch('pool/getNavWebList', data).then(res => {
                    console.log(res.data)
                    for (let item of res.data) {
                        let data = {};
                        data.key = item.id;
                        data.value = item.id;
                        data.label = item.website_name;
                        dataArr.push(data)
                    }
                    this.webSiteList = dataArr;
                    this.webSiteLoading = false;
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '网络错误，请重试！'
                    });
                })
            } else {
                this.navList = [];
            }
        },
        // 关键词标签
        updateTags(newTags) {
            // this.foem.seo_keywords = newTags;
            
            this.tags = newTags;
            this.ruleForm.sectorKeyword = newTags;
          },
    },
    mounted() {
        this.getData()
        this.getStyleList()
        this.getSkinList()
        this.getSizeList()
        // this.getPlaceList()
    },
}
</script>

<style scoped lang="less">
input[aria-hidden=true] {
    display: none !important;
}

// 提示信息
.tips {
    margin: 30px;
    background-color: #e9ecf9;
    border-radius: 11px;

    .tipsIcon {
        margin: 10px 15px;
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url("../../assets/advertise/Info Circle.png") no-repeat;
        vertical-align: middle;
    }

    .tipsText {
        font-size: 14px;
        color: #666666;
    }
}

// 头部
.title {
    margin: 30px 30px 20px 30px;
    padding: 30px 30px 40px 30px;
    background-color: #fff;
    border-radius: 20px 20px 20px 20px;
    border: 1px solid #E9EDF7;

    .left {
        float: left;
    }

    .right {
        float: right;
    }


    .searchBox {
        ::v-deep .el-input {
            position: relative;
            font-size: 14px;
            display: inline-block;
            width: 80%;
        }

        .searchTitle {
            padding-bottom: 10px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 16px;
        }

        .el-select {
            width: 100%;
            display: inline-block;
            position: relative;
        }
    }


    .btnList {
        float: right;
        padding-top: 28px;

        button {
            height: 38px;
            border: none;
            border-radius: 8px;
            padding: 0 30px;
        }

        .search {
            background-color: #5570f1;
            color: #fff;
            margin-right: 20px;
        }

        .reset {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            background: #F5F7FB;
            border-radius: 8px 8px 8px 8px;
            border: 1px solid rgba(85, 112, 241, 0.11);
        }
    }
}

.layerBox {
    padding: 30px 20px;
    position: relative;

    .btn {
        position: absolute;
        top: 30px;
        right: 20px;
        height: 38px;
        color: #fff;
        background-color: #5570f1;
        border: none;
        border-radius: 8px;
        padding: 8px 28px 9px;
        box-sizing: border-box;
    }

    .listBtnBox {
        justify-content: left;
    }


    .listDeleteBtn,
    .listEditBtn {
        margin-left: 0px;
        padding-left: 0px;
        margin-right: 20px;
        width: 76px;
        height: 36px;
        line-height: 36px;
    }


    ::v-deep .el-form-item {
        margin-bottom: 50px;
    }

    ::v-deep .el-select {
        width: 100%;
    }

    ::v-deep .el-input--medium,
    ::v-deep .el-form-item__label {
        line-height: 36px;
        font-size: 16px;
    }

}

.sizeBox {
    display: flex;
    align-items: center;
    width: 80%;
    .sizeInputSymbol {
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sizeInput {
        width: 50%;
        ::v-deep .el-input {
            position: relative;
            font-size: 14px;
            display: inline-block;
            width: 100%;
        }
    }
}

// 弹出层内容
.dialogText {
    margin: 0 7px 0 3px;
    padding-bottom: 1px;
    padding: 30px 60px 1px 20px;
    background-color: #f5f7fb;

    .adImage {
        width: 140px;
        height: 140px;
        line-height: 210px;
        border-radius: 12px;
        border: 1px solid rgba(85, 112, 241, 0.11);

        img {
            width: 140px;
            height: 80px;
        }
    }



    ::v-deep .avatar {
        width: 140px;
        height: auto;
    }

    .price {
        ::v-deep .el-input {
            width: 29%;
        }
    }

    .example {
        font-family: Microsoft YaHei;
        color: #5570F1;
    }

    .el_btnList {
        margin-right: 15px;
        margin-top: 20px;
    }

    //日期时间选择器的宽
    ::v-deep .el-date-editor.el-input {
        width: 48%;
    }

    ::v-deep .el-button+.el-button {
        margin-left: 0px;
    }

    ::v-deep .el-select {
        width: 100%;
    }

    ::v-deep .el-form-item {
        margin-bottom: 50px;
    }
}

// 弹出层按钮
.dialogBtn {
    text-align: center;
    margin: 50px auto 20px;

    button {
        width: 184px;
        padding: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        border: none;
        border-radius: 12px 12px 12px 12px;
    }

    // 取消
    .cancel {
        color: #333333;
        background-color: #f5f7fb;
        border: 2px solid rgba(85, 112, 241, 0.11);
    }

    // 提交
    .submit {
        color: #fff;
        background-color: #5570F1;
        margin-left: 40px;
    }
}

//审核弹出框
.radioGroup {
    ::v-deep .el-form-item {
        margin-top: 40px;
        margin-bottom: 0;
    }
}

.graph {
    background-color: #f5f7fb;
    padding: 60px 100px;
    overflow: hidden;

    li {
        float: left;
    }

    >li:first-child {
        margin-right: 100px;
    }
}

.dialog-footer {
    margin: 0 auto;
}

.rowMargin {
    margin-top: 20px;
}


</style>