spfm-market-front/src/pages/main/mbh/CMkMagicBoxTop.vue

<template>
    <div>
        <div class="container" v-loading="pageloading">
            <div class="container-box">
                <h2>魔百和</h2>
                <div class="adv-type">
                    <div class="search-list-box">
                        <el-select
                            v-model="modNameVal"
                            @change="changeModName"
                            class="search-box"
                            clearable
                            style="width:15vw"
                        >
                            <el-option
                                v-for="items in modNameList"
                                :key="items.id"
                                :label="items.name"
                                :value="items.id"
                            >
                            </el-option>
                        </el-select>
                        <!--  <el-input v-model="fileNameSearch" placeholder="文件名称" @input="searchInput" class="file-name-search search-box"></el-input>
                    <el-select v-model="timeSort" @change="timeSortChange" class="search-box">
                        <el-option v-for="item in sortList" :key="item.sortCode" :label="item.sortName"
                            :value="item.sortCode">
                        </el-option>
                    </el-select>
                    <div class="block search-box search-box1">
                        <el-date-picker
                        v-model="dateSearch"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="dateSearchChange"
                        class="search-inner-box">
                        </el-date-picker>
                    </div>-->
                    </div>
                    <span v-if="isFuncBtnShow">
                        <el-button
                            type="success"
                            @click="uploadBtn"
                            size="medium"
                            >批量上传
                        </el-button>
                        <el-button type="primary" @click="addMod" size="medium"
                            >新增模块
                        </el-button>
                        <!-- <myUpload
                            style="float: left;"
                            @uploadBack="uploadBack"
                            :fileInfo="fileInfo"
                            :fileList="fileInfo.fileList"
                        ></myUpload> -->
                        <!-- <el-button
                            type="primary"
                            @click="mstatuschange"
                            size="medium"
                            >{{ mstatus ? "取消多选" : "多选" }}
                        </el-button> -->
                        <!-- <el-button
                            type="primary"
                            @click="dialogCli(1)"
                            size="medium"
                            :disabled="!mstatus"
                            >导出
                        </el-button> -->
                    </span>
                </div>

                <div class="img-box">
                    <div class="boximg">
                        <div
                            class="imgMod"
                            v-for="(item, index) in modInfoList"
                            :key="index"
                        >
                            <div class="imgModTitle">
                                <p>{{ item.categoryName }}</p>
                                <div class="modBtnBox" v-if="isFuncBtnShow">
                                    <myUpload
                                        style="float: left;"
                                        @uploadBack="uploadBack"
                                        :fileInfo="fileInfot"
                                        :fileList="fileInfot.fileList"
                                        @test="testBack(item)"
                                    ></myUpload>
                                    <el-button
                                        type="primary"
                                        @click="modifyMod(item)"
                                        size="medium"
                                        >修改模块</el-button
                                    >
                                    <el-button
                                        type="danger"
                                        @click="toMessage(item.categoryId)"
                                        size="medium"
                                        >删除模块</el-button
                                    >
                                </div>
                            </div>
                            <div class="imgModBox">
                                <div
                                    v-for="(imgItem,
                                    imgIndex) in item.mkMagicBoxTopList"
                                    :key="imgIndex"
                                    class="img-list"
                                >
                                    <div class="img-content">
                                        <img
                                            :src="imgItem.imageUrl"
                                            alt=""
                                            @click="checkimg(imgItem, imgIndex)"
                                        />
                                        <div class="func-box" v-if="isFuncBtnShow">
                                            <div class="func-inner-box">
                                                <div
                                                    class="modify-img-box"
                                                    @click="modifyImg(imgItem)"
                                                >
                                                    <i
                                                        class="el-icon-edit"
                                                        color="#ffffff"
                                                    ></i>
                                                </div>
                                                <div
                                                    class="del-img-box"
                                                    @click="toMessage2(imgItem)"

                                                >
                                                    <i
                                                        class="el-icon-delete"
                                                    ></i>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <el-checkbox
                                            v-if="mstatus"
                                            v-model="imgItem.checked"
                                            @change="checkAdd(imgItem)"
                                        ></el-checkbox> -->
                                    </div>
                                    <div class="file-name">
                                        {{ imgItem.name }}
                                    </div>
                                    <!-- <input
                                        type="text"
                                        class="file-name"
                                        v-model="imgItem.name"
                                        :readonly="!item.isRename"
                                        @dblclick="renameFile(item)"
                                        :style="{
                                            border: !item.isRename
                                                ? 'none'
                                                : '1px solid #ddd'
                                        }"
                                        @blur="submitFileName(item)"
                                    /> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <el-pagination :page-size="20" class="pageBox" @current-change="currchange" layout="prev, pager, next" background
                        :total="total">
                    </el-pagination> -->
                </div>
            </div>
            <!-- <div v-if="bigImgs" class="bigimgcheck">
                <i class="el-icon-close close" @click="bigImgs = false"></i>
                <img :src="checksrc" alt="" />
            </div> -->
        </div>
        <!-- 新增模块 -->
        <el-dialog
            title="新增模块"
            :visible.sync="addModDialogStatus"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="addModClosedia"
            :fullscreen="false"
        >
            <div v-loading="loadinged">
                <el-form :model="modList" ref="modList" :rules="rules">
                    <el-form-item prop="modName">
                        <span>模块名称</span>
                        <el-input v-model="modList.modName"></el-input>
                    </el-form-item>
                    <el-form-item prop="modSort">
                        <span>模块序号(数字越大,位置越靠前)</span>
                        <el-input v-model="modList.modSort" type="number"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer myfooter">

                    <el-button @click="addModClosedia">取消</el-button>
                    <el-button type="primary" @click="dialogCli(1)" class="mRight10"
                        >提交</el-button
                    >
                </div>
            </div>
        </el-dialog>
        <!-- 修改模块 -->
        <el-dialog
            title="修改模块"
            :visible.sync="modifyModDialogStatus"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="modifyModClosedia"
            :fullscreen="false"
        >
            <div v-loading="loadinged">
                <el-form :model="modList" ref="modList" :rules="rules">
                    <el-form-item prop="modName">
                        <span>模块名称</span>
                        <el-input v-model="modList.modName"></el-input>
                    </el-form-item>
                    <el-form-item prop="modSort">
                        <span>模块序号(数字越大,位置越靠前)</span>
                        <el-input v-model="modList.modSort" type="number"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer myfooter">
                    <el-button @click="modifyModClosedia">取消</el-button>
                    <el-button type="primary" @click="dialogCli(2)" class="mRight10"
                        >提交</el-button
                    >

                </div>
            </div>
        </el-dialog>
        <!-- 修改图片信息 -->
        <el-dialog
            title="修改图片信息"
            :visible.sync="modifyImgDialogStatus"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="modifyImgClosedia"
            :fullscreen="false"
        >
            <div v-loading="loadinged">
                <el-form :model="imgList" ref="imgList" :rules="rules">
                    <el-form-item prop="imgName">
                        <span>图片名称</span>
                        <el-input v-model="imgList.imgName"></el-input>
                    </el-form-item>
                    <el-form-item prop="imgSort">
                        <span>图片序号(数字越大,位置越靠前)</span>
                        <el-input v-model="imgList.imgSort" type="number"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer myfooter">

                    <el-button @click="modifyImgClosedia">取消</el-button>
                    <el-button type="primary" @click="dialogCli(3)"  class="mRight10"
                        >提交</el-button
                    >
                </div>
            </div>
        </el-dialog>
        <!-- 批量上传图片 -->
        <el-dialog
            title="批量上传图片"
            :visible.sync="uploadImgDialogStatus"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="uploadImgClosedia"
            :fullscreen="false"
        >
            <div v-loading="loadinged">
                <el-form :model="uploadList" ref="uploadList" :rules="rules">
                    <!-- 批量上传模块选择下拉 -->
                    <el-form-item prop="modNameValUpload" class="multiUpload">
                        <span class="multiUploadLabel">模块名称</span>
                        <el-select
                            v-model="uploadList.modNameValUpload"
                            class="search-box"
                            clearable
                        >
                            <el-option
                                v-for="items in modNameList"
                                :key="items.id"
                                :label="items.name"
                                :value="items.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item  class="multiUpload">
                        <span class="multiUploadLabel">图片选择</span>
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="/mkt/market/CMkMagicBox/upload"
                            :file-list="fileList"
                            :auto-upload="false"
                            :data="otherParams"
                            name="files"
                            :headers="uploadHeader"
                            :multiple="true"
                            :on-success="uploadSucc"
                            :on-error="uploadError"

                        >
<!--                            :before-upload="beforeUpload"-->
                            <el-button
                                slot="trigger"
                                size="small"
                                type="success"
                                >选取图片</el-button>

                        <span class="multiUploadLabelerr">只支持jpg、png格式的文件上传，且单个文件大小在2M以内</span>
                            <!-- <div slot="tip" class="el-upload__tip">
                                只能上传jpg/png文件，且不超过500kb
                            </div> -->
                        </el-upload>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer myfooter">

                    <el-button @click="uploadImgClosedia">取消</el-button>
                    <el-button
                         class="mRight10"
                        type="primary"
                        @click="submitUpload"
                        >提交</el-button
                    >

                </div>
            </div>
        </el-dialog>
        <myMessage
            :messTit="messTit"
            @closeMessage="closeMessage"
            :centerDialogVisible="centerDialogVisible"
            v-if="centerDialogVisible"
        ></myMessage>
    </div>
</template>
<script>
import myUpload from "../../../components/modUpload";
import myMessage from "../../../components/myMessage.vue";
export default {
    components: {
        myUpload,
        myMessage
    },
    data() {
        return {
            rules: {
                modName: [
                    {
                        required: true,
                        trigger: "change",
                        message: "不能为空"
                    }
                ],
                modSort: [
                    {
                        required: true,
                        trigger: "change",
                        message: "不能为空"
                    }
                ],
                imgName: [
                    {
                        required: true,
                        trigger: "change",
                        message: "不能为空"
                    }
                ],
                imgSort: [
                    {
                        required: true,
                        trigger: "change",
                        message: "不能为空"
                    }
                ],
                modNameValUpload: [
                    {
                        required: true,
                        trigger: "change",
                        message: "不能为空"
                    }
                ]
            },

            addModDialogStatus: false, //新增模块弹窗
            modifyModDialogStatus: false, //修改模块弹窗
            modifyImgDialogStatus: false, //修改图片信息弹窗
            uploadImgDialogStatus: false, //上传图片信息弹窗
            fileList: [],
            modList: {},
            imgList: {},
            loadinged: false,
            modNameList: [],
            modNameVal: "",
            modNameValUpload: "",
            otherParams: {},
            uploadList: {},
            uploadHeader: {
                agileauthtoken: JSON.parse(window.sessionStorage.agileauthtoken)
            },
            info: {},
            delbox: [],
            infotype: "",
            typeList: [],

            fileInfot: {
                type: "btn",
                typename: "一键上传",
                btntype: "success",
                limit: 10,
                url: "/market/CMkMagicBox/upload",
                fileList: [],
                categoryId: "",
                categoryName: "",
                fileSize: 20
            },
            total: 0,
            pageSize: 1,
            modInfoList: [],
            bigImgs: false,
            checksrc: null,
            mstatus: false,
            checkList: [],
            params: {},
            fileNameSearch: "",
            isRename: true,
            cid: null,
            messTit:"",
            centerDialogVisible:false,
            messTyp:0,
            idList : [],

            //时间排序
            sortList: [
                {
                    sortCode: "1",
                    sortName: "倒序"
                },
                {
                    sortCode: "2",
                    sortName: "正序"
                }
            ],
            timeSort: "倒序",
            isDesc: "desc",
            dateSearch: [],
            createTimeFrom: "",
            createTimeTo: "",
            menus: JSON.parse(window.sessionStorage.childrenMenus),
            isFuncBtnShow: false,
            pageloading: false,
        };
    },
    methods: {
        //批量上传
        uploadBtn() {
            this.uploadImgDialogStatus = true;
        },
        uploadImgClosedia() {
            this.uploadImgDialogStatus = false;
            this.uploadList.modNameValUpload = "";
        },
        submitUpload() {
            // this.$refs.upload.submit();

            this.$refs.uploadList.validate(valid => {
                if (valid) {

                    // 批量上传模块选择下拉
                    let temp = this.modNameList.find(item => {
                        return item.id == this.uploadList.modNameValUpload;
                    });
                    this.otherParams.categoryId = this.uploadList.modNameValUpload;
                    this.otherParams.categoryName = temp.name;



                    // if(this.fileList.length == 0){
                    //     this.$message({
                    //         message: "请选择图片并且只能上传图片!",
                    //         type: "error"
                    //     });
                    // }else{
                    //     this.$refs.upload.submit();
                    // }

                    if(this.$refs.upload.uploadFiles.length==0){
                        this.$message.error('未选择图片!');
                    }
                    var bol=true;
                    for (let i = 0; i < this.$refs.upload.uploadFiles.length; i++) {
                        if(!this.beforeUpload(this.$refs.upload.uploadFiles[i])){
                            bol=false;

                        }
                    }
                    if(bol) {
                        this.$refs.upload.submit();
                    }
                }
            });
        },
        beforeUpload(file){
            // const isJPG = file.type.indexOf('image') != -1;
             const isJPG = (file.raw.type === 'image/jpeg') || (file.raw.type ==='image/png');

        if (!isJPG) {
          this.$message.error('只能上传jpg或png图片!');
            return isJPG;
        }
            const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            this.$message.error('上传单文件大小不能超过 2MB!');
            return  isLt2M;
        }
            return isJPG;
        },
        uploadSucc(res) {
            if (res.result === 0) {
                this.$message({
                    message: "上传成功",
                    type: "success"
                });
            } else {
                this.$message({
                    message: res.desc,
                    type: "error"
                });
            }
            this.uploadImgClosedia();
            this.getlist("");
        },
        uploadError(res) {
            // console.log("222", res);
        },
        testBack(item) {
            this.fileInfot.categoryId = item.categoryId;
            this.fileInfot.categoryName = item.categoryName;
        },
        //新增模块
        addMod() {
            this.addModDialogStatus = true;
        },
        //修改模块
        modifyMod(item) {
            // this.modList = item
            // this.modList.modName = item.categoryName;
            // this.modList.modSort = item.sort;
            this.$set(this.modList, "modId", item.categoryId);
            this.$set(this.modList, "modName", item.categoryName);
            this.$set(this.modList, "modSort", item.sort);
            this.modifyModDialogStatus = true;
        },
        //新增模块弹窗关闭
        addModClosedia() {
            this.addModDialogStatus = false;
            this.modList = {};
        },
        modifyModClosedia() {
            this.modifyModDialogStatus = false;
            this.modList = {};
        },
        modifyImg(imgItem) {
            this.$set(this.imgList, "imgId", imgItem.id);
            this.$set(this.imgList, "imgName", imgItem.name);
            this.$set(this.imgList, "imgSort", imgItem.sort);
            this.modifyImgDialogStatus = true;
        },
        modifyImgClosedia() {
            this.modifyImgDialogStatus = false;
            this.imgList = {};
        },
        delDialogCli(cId) {
            //模块删除
            // if (v == 2) {
            this.$http({
                url: "/market/CMkMagicBox/delMkMagicBoxCategory ",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: { id: cId }
            }).then(res => {
                if (res.data.result === 0) {
                    this.$message({
                        message: "成功",
                        type: "success"
                    });
                    this.getlist("");
                    location.reload();
                } else {
                    this.$message({
                        message: res.data.desc,
                        type: "error"
                    });
                }
            });
            // }
        },
        delImg(imgItem) {
            //图片删除
            // if (v == 2) {
            let idList = [
                {
                    id: imgItem.id
                }
            ];
            this.$http({
                url: "/market/CMkMagicBox/delMkMagicBoxTop",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: idList
            }).then(res => {
                if (res.data.result === 0) {
                    this.$message({
                        message: "成功",
                        type: "success"
                    });
                    this.getlist("");
                } else {
                    this.$message({
                        message: res.data.desc,
                        type: "error"
                    });
                }
            });
            // }
        },
        changeModName(v) {
            this.getlist(v);
        },
        timeSortChange(v) {
            if (v == 1) {
                this.isDesc = "desc";
                this.getlist(this.pageSize);
            } else if (v == 2) {
                this.isDesc = "";
                this.getlist(this.pageSize);
            }
        },
        dateSearchChange(v) {
            this.createTimeFrom = this.$formatDate(v[0], "YYYY-MM-DD");
            this.createTimeTo = this.$formatDate(v[1], "YYYY-MM-DD");
            this.getlist(this.pageSize);
        },
        searchInput(v) {
            this.fileNameSearch = v;
            this.getlist(this.pageSize);
        },
        uploadBack(v) {
            this.getlist("");
        },
        dialogCli(v) {
            //1 新增模块提交 2修改模块提交 3修改图片提交

            if (v == 1) {
                this.loadinged = false;
                this.$refs.modList.validate(valid => {
                    if (valid) {
                        this.$http({
                            url: "/market/mkMagicBoxCategory/add",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json"
                            },
                            data: {
                                name: this.modList.modName,
                                sort: this.modList.modSort
                            }
                        }).then(res => {
                            if (res.data.result === 0) {
                                this.$message({
                                    message: "成功",
                                    type: "success"
                                });
                                this.addModDialogStatus = false;
                                this.getlist("");
                                location.reload()

                            } else {
                                this.$message({
                                    message: res.data.desc,
                                    type: "error"
                                });
                            }
                        });
                    }
                });
            } else if (v === 2) {
                this.loadinged = false;
                this.$refs.modList.validate(valid => {
                    if (valid) {
                        this.$http({
                            url: "/market/mkMagicBoxCategory/update",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json"
                            },
                            data: {
                                id: this.modList.modId,
                                name: this.modList.modName,
                                sort: this.modList.modSort
                            }
                        }).then(res => {
                            if (res.data.result === 0) {
                                this.$message({
                                    message: "成功",
                                    type: "success"
                                });
                                this.modifyModDialogStatus = false;
                                this.getlist("");
                            } else {
                                this.$message({
                                    message: res.data.desc,
                                    type: "error"
                                });
                            }
                        });
                    }
                });
            } else if (v === 3) {
                this.loadinged = false;
                this.$refs.imgList.validate(valid => {
                    if (valid) {
                        this.$http({
                            url: "/market/mkMagicBox/update",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json"
                            },
                            data: {
                                id: this.imgList.imgId,
                                name: this.imgList.imgName,
                                sort: this.imgList.imgSort
                            }
                        }).then(res => {
                            if (res.data.result === 0) {
                                this.$message({
                                    message: "成功",
                                    type: "success"
                                });
                                this.modifyImgDialogStatus = false;
                                this.getlist("");
                            } else {
                                this.$message({
                                    message: res.data.desc,
                                    type: "error"
                                });
                            }
                        });
                    }
                });
            }
            // let params = [];
            // let paramsf = [];
            // for (let i = 0; i < this.checkList.length; i++) {
            //     params.push({
            //         id: this.checkList[i].id
            //     });
            //     paramsf.push({
            //         compressFileId: this.checkList[i].compressFileId,
            //         fileName: this.checkList[i].fileName
            //     });
            // }

            // else if (v == 1) {
            //     this.$http({
            //         url: "/market/cadvMaterial/exportAdvMaterialZip",
            //         method: "post",
            //         responseType: "blob",
            //         headers: {
            //             "Content-Type": "application/json"
            //         },
            //         data: paramsf
            //     }).then(response => {
            //         if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            //             let blob = new Blob([response.data], {
            //                 type: response.data.type
            //             });
            //             window.navigator.msSaveOrOpenBlob(blob, "adv.zip");
            //         } else {
            //             /* 火狐谷歌的文件下载方式 */
            //             console.log(response.data.type);
            //             var blob = new Blob([response.data]);
            //             var downloadElement = document.createElement("a");
            //             var href = window.URL.createObjectURL(blob);
            //             downloadElement.href = href;
            //             downloadElement.download = "adv.zip";
            //             document.body.appendChild(downloadElement);
            //             downloadElement.click();
            //             document.body.removeChild(downloadElement);
            //             window.URL.revokeObjectURL(href);
            //         }
            //     });
            // }
        },
        renameFile(v) {
            this.$set(v, "isRename", true);
        },
        submitFileName(v) {
            v.isRename = false;
            let params = {
                id: v.id,
                fileName: v.fileName
            };
            this.$http({
                url: "/market/cadvMaterial/updateMkAdvFileName",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: params
            }).then(res => {
                if (res.data.result === 1) {
                    this.$message({
                        message: res.data.desc,
                        type: "error"
                    });
                } else {
                    this.$message({
                        message: "成功",
                        type: "success"
                    });
                    this.getlist('');
                }
            });
        },
        getlist(v) {
            // let params = {
            //     advType: this.infotype,
            //     fileName: this.fileNameSearch,
            //     isDesc: this.isDesc,
            //     createTimeFrom: this.createTimeFrom,
            //     createTimeTo: this.createTimeTo
            // };
            // if (this.infotype == "08") {
            //     params.advType = "";
            // }
            this.pageloading = true;
            this.$http({
                url: "/market/CMkMagicBox/getCMkMagicBoxHomeList",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: {
                    categoryId: v
                }
            }).then(res => {
                this.modInfoList = res.data.body;
                this.pageloading = false
                // this.total = res.data.totalRecord;
                // this.imgList = [];
                // this.imgListold = res.data.data;
                // res.data.data.forEach(item => {
                //     item.checked = false;
                //     this.imgList.push(item)
                // })
            });
        },
        getModlist() {
            this.$http({
                url: "/market/mkMagicBoxCategory/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: {}
            }).then(res => {
                this.modNameList = res.data;
            });
        },
        // 分页
        // currchange(v) {
        //     this.pageSize = v;
        //     this.getlist(this.pageSize);
        // },
        // gettype() {
        //     this.$http({
        //         url: "/sysmgr/cfgDataDicts/queryMap",
        //         method: "post",
        //         headers: {
        //             "Content-Type": "application/json"
        //         },
        //         data: {
        //             dictCodePks: "materType"
        //         }
        //     }).then(res => {
        //         this.typeList = res.data.body.materType;
        //         this.infotype = this.$route.query.type;
        //         this.changeType(this.infotype);
        //     });
        // },
        //切换状态
        mstatuschange() {
            this.mstatus = !this.mstatus;
            this.checkList = [];
            this.imgList = [];
            for (let i = 0; i < this.imgListold.length; i++) {
                let item = this.imgListold[i];
                item.checked = false;
                this.imgList.push(item);
            }
        },
        //点击图片
        checkimg(v, i) {
            if (this.mstatus) {
                this.imgList[i].checked = !this.imgList[i].checked;
                this.checkAdd(v);
                return;
            }
            // this.bigImgs = true;
            // this.checksrc = v.fileBase64;
            this.$http({
                url:
                    "/market/cadvMaterial/previewAdvMaterial?compressFileId=" +
                    v.fileId,
                method: "post",
                responseType: "blob",
                headers: {
                    "Content-Type": "application/json"
                },
                data: {}
            }).then(res => {
                let _this = this;
                if (res && res.data && res.data.size) {
                    const dataInfo = res.data;
                    let reader = new window.FileReader();
                    reader.readAsArrayBuffer(dataInfo);
                    reader.onload = function(e) {
                        const result = e.target.result;
                        const contentType = dataInfo.type;
                        const blob = new Blob([result], {
                            type: contentType
                        });
                        const url = window.URL.createObjectURL(blob);
                        _this.bigImgs = true;
                        _this.checksrc = url;
                    };
                }
            });
        },
        //选中图片
        checkAdd(v) {
            let s = true;
            for (let i = 0; i < this.checkList.length; i++) {
                if (this.checkList[i].id == v.id) {
                    s = false;
                    this.checkList.splice(i, 1);
                    return;
                }
            }
            if (s) {
                this.checkList.push(v);
            }
        },
        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
        },
        toMessage(cid){
            this.messTyp=0;
            this.centerDialogVisible=true;
            this.messTit = "是否确定删除";
            this.cId=cid;
        },
        closeMessage(v){
            this.centerDialogVisible = false;
            if(this.messTyp===0){
                if (v === 1) {
                    this.$http({
                        url: "/market/CMkMagicBox/delMkMagicBoxCategory ",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        data: { id: this.cId }
                    }).then(res => {
                        if (res.data.result === 0) {
                            this.$message({
                                message: "成功",
                                type: "success"
                            });
                            this.getlist('');
                            location.reload();
                        } else {
                            this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        }
                    });
                }
            }else{
                if (v === 1) {
                    this.$http({
                        url: "/market/CMkMagicBox/delMkMagicBoxTop",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        data: this.idList
                    }).then(res => {
                        if (res.data.result === 0) {
                            this.$message({
                                message: "成功",
                                type: "success"
                            });
                            this.getlist('');
                        } else {
                            this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        }
                    });
                }
            }
        },
        toMessage2(imgItem){
            this.messTyp=1;
            this.centerDialogVisible=true;
            this.messTit = "是否确定删除";
            this.idList = [
                {
                    id: imgItem.id
                }
            ];
        }
    },
    mounted() {
        // this.gettype();
        this.getUser();
        this.getlist("");
        this.getModlist();

        for (var i = 0; i < this.menus.length; i++) {
            if (this.menus[i].jspUrl == "/CMkMagicBoxTop") {
                this.isFuncBtnShow = true;
                break;
            }
        }
    },
    created() {

    }

};
</script>
<style scoped lang="scss">
.mRight10{
    margin-right: 10px;
}
.container-box {
    h2 {
        margin-bottom: 20px;
    }

    .adv-type {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .file-name-search {
            width: 30%;
        }
        span {
            display: inline-block;
        }
    }

    .img-box {
        height: 90%;

        .boximg {
            height: 90%;
            overflow-y: auto;

            // justify-content: space-between;
            margin-top: 20px;
            .imgMod {
                // height: 48%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .imgModTitle {
                    font-weight: bold;
                    font-size: 22px;
                    margin-bottom: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .modBtnBox {
                    margin-right: 2%;
                }
                .imgModBox {
                    display: flex;
                    flex-wrap: wrap;
                    flex: 1;
                    .img-list {
                        display: inline-block;
                        width: 18%;
                        margin-right: 2%;
                        margin-bottom: 20px;
                        overflow: hidden;
                        // border: 1px solid #ddd;
                        border-radius: 3px;
                        background: #fff;
                        position: relative;
                        // height: 50%;

                        .img-content {
                            // border: 1px solid #ddd;
                            display: flex;
                            align-items: center;
                            width: 100%;
                            // height: 90%;
                            height: 20vh;
                            text-align: center;
                            position: relative;
                            img {
                                // width: 100%;
                                display: block;
                                max-width: 100%;
                                max-height: 100%;
                                // position: absolute;
                                // top: 0;
                                // bottom: 0;
                                margin: auto;
                                // height: 100%;
                            }
                            .func-box {
                                display: none;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                top: 0;
                                left: 0;
                                background: rgba(0, 0, 0, 0.5);
                                .func-inner-box {
                                    display: flex;
                                    width: 60%;
                                    margin: 0 auto;
                                    align-items: center;
                                    justify-content: space-between;
                                    // margin-top: 50%;
                                    // transform: translateY(-50%);
                                    .modify-img-box {
                                        width: 50px;
                                        height: 50px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        background: #0b82ff;
                                        border-radius: 50%;
                                        cursor: pointer;
                                        i {
                                            color: #fff;
                                            font-size: 22px;
                                        }
                                    }
                                    .del-img-box {
                                        width: 50px;
                                        height: 50px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        background: #0b82ff;
                                        border-radius: 50%;
                                        cursor: pointer;
                                        i {
                                            color: #fff;
                                            font-size: 22px;
                                        }
                                    }
                                }
                            }
                            .el-checkbox {
                                position: absolute;
                                top: 0;
                                right: 0;
                                display: inline-block;
                            }

                            span {
                            }
                        }
                        .img-content:hover .func-box {
                            display: flex;
                        }
                        .file-name {
                            margin-top: 5px;
                            border: none;
                            outline: none;
                            width: 100%;
                            white-space: wrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }

    .pageBox {
        text-align: right;
        margin-top: 10px;
    }
}

.bigimgcheck {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.6);

    img {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        max-width: 90vw;
    }

    .close {
        position: absolute;
        top: 40px;
        right: 40px;
        font-size: 28px;
        color: #fff;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        padding: 5px;
        cursor: pointer;
    }
}
.search-list-box {
    display: flex;
    flex-wrap: wrap;
    max-width: 50%;
    .search-box {
        width: 30%;
        margin-right: 10px;
        margin-bottom: 10px;
        .search-inner-box {
            width: 100%;
        }
    }
    .search-box1 {
        width: 80%;
    }
}
.multiUpload::v-deep .el-form-item__content{
    display: flex !important;
    .multiUploadLabel{
        margin: 0 15px;
    }
    .multiUploadLabelerr{
        margin: 0 12px;
        color: rgb(214, 99, 99);
    }
}
.myfooter{
    display: flex;
    flex-direction: row-reverse;
}
</style>