wenhuayun_admin/src/components/page/OperationManagement/bannerConfigure.vue

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 运营管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>banner配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container banner_title">
            <div class="banner_title_item">
                <img src="../../../assets/img/photo.png" alt="" class="photo">
                <p>图片库</p>
            </div>
            <div class="banner_title_item">
                <img src="../../../assets/img/preview.png" alt="" class="preview">
                <p>效果预览</p>
            </div>
        </div>
        <div class="container banner_content">
            <div class="banner_num">
                <span class="banner_num_span">图片数量：</span>
                <el-input placeholder="请输入图片数量" v-model.number="banner_num" @input="changeNum()"></el-input>
                <!-- <el-select  placeholder="请选择图片数量" class="handle-select mr10">
                    <el-option key="1" label="广东省" value="广东省"></el-option>
                    <el-option key="2" label="湖南省" value="湖南省"></el-option>
                </el-select> -->
            </div>
            <template v-if="banner.length !=0">
                <div class="banner_num" v-for="(item,index) in banner.slice(0,banner_num)" :key="index">
                    <span class="banner_num_span">图片{{index+1}}：</span>
                    <el-input placeholder="图片名称" v-model="item.name" readonly></el-input>
                    <el-input placeholder="图片路径" class="banner_num_input" v-model="item.img" readonly></el-input>
                    <el-upload
                        class="upload-demo"
                        :action="action"
                        :on-change="fileChange"
                        :show-file-list="false"
                        :on-error="handleAvatarError"
                        list-type="picture"
                        :on-success="(res,file)=>{handleAvatarSuccess(res,file,index)}"
                    >
                    <span class="banner_num_span1">上传图片</span>
                    </el-upload>
                    <span class="banner_num_span1">打开图片库</span>
                    <span class="banner_num_span1" @click="moveUp(index)">上移</span>
                    <span class="banner_num_span1" @click="moveDown(index)">下移</span>
                </div>
            </template>
            <div v-if="banner_num!='' || banner_num!=0">
                <el-button type="primary"  @click="setBanner">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { getBanner,setBanner } from '../../../api/index';
export default {
    data() {
        return {
            query: {
                address: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            host:'http://wenhua.xingtongworld.com',
            action:'http://wenhua.xingtongworld.com/api/Index/uploadimg',
            banner_num:'',
            banner:[]
        };
    },
    created() {
        this.getData();
    },
    methods: {
        moveDown(index){
            let length=this.banner.length
            if (length!=1) {
                let list= this.banner[index + 1];
                this.$set(this.banner, index + 1, this.banner[index]);
                this.$set(this.banner, index, list)
            }
        },
        moveUp(index){
            let length=this.banner.length
            if (length!=1) {
                let list= this.banner[index - 1];
                this.$set(this.banner, index - 1, this.banner[index]);
                this.$set(this.banner, index, list)
            }
        },
        changeNum(){
            if (this.banner_num>this.banner.length) {
                let index=this.banner_num-this.banner.length
                for (let i=0;i<index;i++){
                    this.banner.push({name:'',img:''})
                }
            }
        },
        setBanner(){
            setBanner(this.banner).then(res=>{
                console.info(res)
                if (res.code==100) {
                    this.$message.success('文件上传成功！');
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        // 获取 easy-mock 的模拟数据
        getData() {
            getBanner().then(res => {
                console.log(res);
                if (res.code==100) {
                    this.banner =res.data.list
                    if (this.banner.length!=0) {
                        this.banner_num=this.banner.length
                    }
                }else{
                    this.$message.error(res.msg)
                }
            });
        },
        handleAvatarSuccess(res, file, index,key){
            console.info(res)
            console.info(file)
            if(res.code==1){
                let data={name:file.name,img:this.host+res.data.img_url}
                this.$set(this.banner, index , data);
                // this.banner.push()
            }
        },
        handleAvatarError(){
            this.$message.error('文件上传失败！');
        },
        fileChange(file){
            const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
            const isJPG = typeArr.indexOf(file.raw.type) !== -1;
            const isLt3M = file.size / 1024 / 1024 < 3;
            if (!isJPG) {
                this.$message.error('只能是图片!');
                this.$refs.upload.clearFiles();
                return;
            }
            if (!isLt3M) {
                this.$message.error('上传图片大小不能超过 3MB!');
                this.$refs.upload.clearFiles();
                // this.$set(this.query, 'goods_img', '');
                return;
            }
        },
    }
};
</script>

<style scoped>
.banner_num{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.banner_num_span{
    display: inline-block;
    width: 80px;
}
.banner_num_span1{
    color:#4E73E4 ;
    text-decoration: underline;
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}
.banner_num_input{
    width: 300px !important;
    margin-right: 40px;
}
.banner_num .handle-select{
    width: 200px;
    margin-left: 20px;
}
.banner_num .el-input{
    width: auto;
    margin-left: 20px;
}
.banner_content{
    margin-top: 20px;
}
.banner_title{
    display: flex;
    padding-left: 80px;
}
.banner_title_item {
    text-align: center;
    margin-right: 100px;
}
.photo{
    width: 60px;
    height: 55px;
}
.preview{
    width: 60px;
    height: 60px;
}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 150px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>