完成logo管理

“dzb”

2022-09-26 ccd7b3c5b24fa115a732ea915e2e586de717ea1c

 src/views/systemSetting/platform/portalSetting/index.vue

@@ -11,30 +11,23 @@
                <li>
                    <div class="desc">产品图标：主要用于网页头部</div>
                    <div class="upload">
                        <div class="uploadBtn">
                            <i class="el-icon-plus"></i>
                            <span>上传图片</span>
                        </div>
                        <MyUpload @getPicUrl="setPicUrl" mykey="chromeLinkUrl" :picUrl="icon.chromeLinkUrl"></MyUpload>
                        <div class="uploadTip"><span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span></div>
                    </div>
                </li>
                <li>
                    <div class="desc">网站图标：主要用于浏览器标签页</div>
                    <div class="upload">
                        <div class="uploadBtn">
                            <i class="el-icon-plus"></i>
                            <span>上传图片</span>
                        </div>
                        <MyUpload @getPicUrl="setPicUrl" mykey="websiteHeadUrl" :picUrl="icon.websiteHeadUrl">
                        </MyUpload>
                        <div class="uploadTip"><span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span></div>
                    </div>
                </li>
                <li>
                    <div class="desc">登录页图标：主要用于登录页</div>
                    <div class="upload">
                        <div class="uploadBtn">
                            <i class="el-icon-plus"></i>
                            <span>上传图片</span>
                        </div>
                        <MyUpload @getPicUrl="setPicUrl" mykey="loginPageIconUrl" :picUrl="icon.loginPageIconUrl">
                        </MyUpload>
                        <div class="uploadTip"><span>只允许上传jpg,jpeg,png,svg格式的图片，建议尺寸为105px*105px</span></div>
                    </div>
                </li>
@@ -44,28 +37,117 @@
            <div class="webTitle">
                <div class="text">网站标题:</div>
                <div class="inner">
                    <el-input type="text" placeholder="遂昌执法局" v-model="title"></el-input>
                    <el-input type="text" placeholder="遂昌执法局" v-model="icon.title"></el-input>
                </div>
            </div>
            <div class="footerBtn">
                <el-button class="cancel">返回</el-button>
                <el-button type="primary">提交</el-button>
                <el-button type="primary" @click="changeLogo">提交</el-button>
            </div>
        </footer>
    </div>
</template>
<script>
import MyUpload from '@/components/Upload'
export default {
    components: {
        MyUpload,
    },
    data() {
        return {
            title:'',
            icon:{
                login:'',
                website:'',
                product:'',
            }
            icon: {
                loginPageIconUrl: '',
                websiteHeadUrl: '',
                chromeLinkUrl: '',
                title: '',
            },
        }
    }

    },
    methods: {
        setPicUrl({obj, value}) {
            const { icon } = this;
            const baseUrl = 'http://140.143.152.226:8410/';
            for (let key in icon) {
                if (key === value) {
                    icon[key] = baseUrl + obj.url1;
                }
            }
            this.icon = icon;
        },
        // 更改logo入口
        async changeLogo() {
            const {icon} = this;
            console.log(icon);
            const preIcon = await this.getIcon();
            if (preIcon.length === 0) {
                this.handleChangeLogo();
                return;
            }
            for(let key in icon){
                if(icon[key]!==''){
                    preIcon[key] = icon[key];
                }
            }
            this.handleChangeLogo(preIcon);
        },
        // 获取更改前的logo
        async getIcon() {
            let result;
            await this.$axios({
                method: 'get',
                url: 'sccg/system/portal/logo/search',
            }).then(res => {
                result = res.data;
            })
            return result;
        },
        // 执行更改logo操作
        handleChangeLogo(obj = null) {
            if (obj === null) {
                const { icon } = this;
                for (let key in icon) {
                    if (icon[key] === '') {
                        delete icon[key];
                    }
                }
                let length = Object.keys(icon).length;
                if (length !== 0) {
                    // 发送请求
                    this.$axios({
                        method: 'post',
                        url: 'sccg/system/portal/logo/add',
                        data: icon
                    }).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message({
                                message: res.message,
                                type: 'success'
                            })
                        }
                    })
                }
            } else {
                console.log(obj);
                // 发送请求
                this.$axios({
                    method: 'put',
                    url: 'sccg/system/portal/logo/update',
                    data: obj
                }).then(res => {
                    console.log(res);
                    this.$message({
                        message: res.message,
                        type: 'success'
                    })
                })
            }
            localStorage.removeItem('pic');
            window.location.href='';

        }
    },
}
</script>
<style lang="scss" scoped>
@@ -98,6 +180,7 @@

            li {
                margin-top: 30px;

                .desc {
                    line-height: 22px;
                }
@@ -107,31 +190,13 @@
                    line-height: 100px;
                    margin-top: 15px;

                    .uploadBtn {
                        width: 120px;
                        height: 120px;
                        background-color:rgba(249, 249, 249, 1);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        border-radius: 4px;
                        i {
                            font-size: 30px;
                            font-weight: 650;
                        }

                        span {
                            line-height: 22px;
                        }
                    }

                    .uploadTip {
                        display: flex;
                        align-items: flex-end;
                        margin-left: 20px;
                        font-size: 14px;
                        span{

                        span {
                            line-height: 22px;
                        }
                    }
@@ -139,34 +204,44 @@
            }
        }
    }
    footer{

    footer {
        padding: 0 20px;
        .webTitle{

        .webTitle {
            display: flex;
            line-height: 40px;
            margin:30px 0;
            .text{
            margin: 30px 0;

            .text {
                flex: 1;
            }
            .inner{

            .inner {
                flex: 13;
                .el-input{

                .el-input {
                    width: 496px;
                }
                &::v-deep .el-input__inner{

                &::v-deep .el-input__inner {
                    background-color: #09152f;
                    border: 1px solid #17324c;;
                    border: 1px solid #17324c;
                    ;
                }
            }
        }
        .footerBtn{

        .footerBtn {
            display: flex;
            justify-content: center;
            &::v-deep .el-button{

            &::v-deep .el-button {
                padding: 12px 40px;
                font-weight: 600;
            }
            .cancel{

            .cancel {
                border: 2px solid #0079fe;
                color: #0079fe;
            }