qimall/addons/BusinessActivity/backend/views/setting/index.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-rich-text');
ComponentHelper::loadComponentView('com-upload');

?>
<link rel=" stylesheet" href="/resources/css/iconfont.css?t=<?= Yii::$app->params['css_cache_time'] ?>"">
<div id="app" v-cloak>
    <div style="display:flex;justify-content:space-between;align-items:center;background-color:#FFF;padding: 10px 20px;font-weight:800;font-size:15px;">
        <div>招商活动设置</div>
        <div>
            <el-button :loading="btnLoading" class="button-item" type="primary" @click="store('ruleForm')" size="small">保存
            </el-button>
        </div>
    </div>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div class="form_box">
            <template>
                <el-card>
                    <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="150px" id="settingForm">
                        <el-row>
                            <div style="display:flex;justify-content:space-between;">

                                <el-tabs v-model="activeName" type="card">
                                    <el-tab-pane label="基础设置" name="basic">
                                        <?php ComponentHelper::loadComponentView('basic', __DIR__ . '/'); ?>
                                    </el-tab-pane>
                                    <el-tab-pane label="海报设置" name="poster">
                                        <?php ComponentHelper::loadComponentView('poster', __DIR__ . '/'); ?>
                                    </el-tab-pane>
                                </el-tabs>

                            </div>
                        </el-row>

                    </el-form>
                </el-card>
            </template>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                activeName: 'basic',
                loading: false,
                btnLoading: false,
                list: [],
                listLoading: false,
                addImgLoad: false,
                select_index: 3,
                avatar_max_top: 1285,
                avatar_max_left: 610,
                select_arr: [],
                ruleForm: {
                    // 基础设置
                    basic: {
                        is_enable: 1,
                        name: '',
                        is_commission: 0,
                        commission_type: 0,
                        investment_scale: 0,
                        investment_scale_parent: 0,
                        site_scale: 0,
                        site_scale_parent: 0,
                        payment_method: 0,
                        payment_type: 0,
                        valid_duration: 0,
                        is_show_at_center: 1,
                        poster: {
                            bg_pic: {
                                url: '',
                                is_show: 0
                            },
                            qr_code: {
                                is_show: 0,
                                size: 80,
                                top: 0,
                                left: 0,
                                type: 1,
                                file_type: 'image',
                            },
                        }
                    },
                },


            }
        },
        mounted: function() {
            this.loadData();
        },
        watch: {

        },
        computed: {
            selectBool() {
                return function(num) {
                    if (JSON.stringify(this.select_arr).indexOf(num) != -1) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
        methods: {
            assiginObj(target = {}, sources = {}) {
                let obj = target;
                if (typeof target != 'object' || typeof sources != 'object') {
                    return sources; // 如果其中一个不是对象 就返回sources
                }
                for (let key in sources) {
                    // 如果target也存在 那就再次合并
                    if (target.hasOwnProperty(key)) {
                        obj[key] = this.assiginObj(target[key], sources[key]);
                    } else {
                        // 不存在就直接添加
                        obj[key] = sources[key];
                    }
                }
                return obj;
            },
            loadData() {
                if (this.loading === true) return;
                this.loading = true;

                request({
                    params: {
                        r: 'business-activity/setting/index',
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        let basic = e.data.data;
                        this.ruleForm.basic = this.assiginObj(this.ruleForm.basic, basic);
                        if (this.ruleForm.basic.poster.qr_code.is_show == 1) {
                            this.select_arr.push(3);
                        }
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },

            deleteSelect(num) { //删除所选择的属性
                this.select_arr.forEach((item, index) => {
                    if (item == num) {
                        this.select_arr.splice(index, 1);
                        if (num == 3) {
                            this.ruleForm.basic.poster.qr_code.is_show = 0;
                        }
                    }
                })
                if (this.select_index == num) {
                    this.select_index = 0;
                }
            },

            attarController(e, str) { //属性控制器
                if (str != 'avatarSize' && str != 'nameSize') {
                    this.avatar_max_top = 1334 - e;
                    this.avatar_max_left = 750 - e;
                    this.ruleForm.basic.poster.qr_code.max_top = this.avatar_max_top;
                    this.ruleForm.basic.poster.qr_code.max_left = this.avatar_max_left;
                }
            },

            selectItem(num) { //选中了哪一个海报属性
                this.select_index = num;
                if (JSON.stringify(this.select_arr).indexOf(num) == -1) {
                    this.select_arr.push(num);
                }
            },

            beginAddImg(e) {
                if (e[0]) { //判断图片是否正在上传
                    this.addImgLoad = true;
                }
            },
            handleSuccess(e) { //图片上传成功
                this.ruleForm.basic.poster.bg_pic.url = e.response.data.data.url;
                this.addImgLoad = false;
                this.$message({
                    message: '图片上传成功！',
                    type: 'success'
                });
            },

            store(formName) {

                this.$refs[formName].validate((valid) => {

                    if (this.ruleForm.basic.poster.bg_pic.url == '') {
                        this.$message.error('请添加海报背景');
                        return;
                    }
                    if (this.ruleForm.basic.poster.bg_pic.url) {
                        this.ruleForm.basic.poster.bg_pic.is_show = 1;
                    } else {
                        this.ruleForm.basic.poster.bg_pic.is_show = 0;
                    }

                    this.select_arr.forEach((item, index) => {
                        if (item == 3) {
                            this.ruleForm.basic.poster.qr_code.is_show = 1;
                        }
                    })
                    if (!this.ruleForm.basic.poster.qr_code.is_show) {
                        this.$message.error('请添加二维码');
                        return;
                    }

                    let share = this.ruleForm.basic.poster;
                    for (let key in share) {
                        if (key == 'bg_pic') {
                            let img = document.getElementsByClassName("main_content_img");
                            this.ruleForm.basic.poster[key].width = img[0].width;
                            this.ruleForm.basic.poster[key].height = img[0].height;
                        } else {
                            this.ruleForm.basic.poster[key].top_ratio = Math.floor(share[key].top / share[key].max_top * 100) / 100;
                            this.ruleForm.basic.poster[key].left_ratio = Math.floor(share[key].left / share[key].max_left * 100) / 100;
                        }
                    }
                    this.ruleForm.basic.poster.frame = {
                        width: 750,
                        height: 1334
                    };

                    if (valid) {
                        if (this.btnLoading) return
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'business-activity/setting/index',
                            },
                            method: 'post',
                            data: this.ruleForm.basic
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.btnLoading = false;
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
    });
</script>
<style>
    #settingForm .el-form-item__label {
        font-size: 13px;
    }

    .my-desc-label {
        font-size: 13px;
    }

    img {
        display: block;
    }

    .el-menu-item:hover {
        background: #ffffff !important;
    }

    .el-submenu__title:hover {
        background: #ffffff !important;
    }

    .header_box {
        border-radius: 5px 5px 0 0;
        color: #808695;
    }

    .add_temp_box {
        margin-bottom: 10px;
    }


    .template_data_left_title {
        margin-right: 13px;
    }

    .el-input {
        /* height: 40px; */
        width: 229px;
    }

    .main_box {
        background: #fff;
        padding: 0 25px 25px;
    }

    .main_img_box {
        width: 376px;
        height: 760px;
        position: relative;
        margin-right: 48px;
    }

    .main_img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .main_content {
        background: #ffffff;
        width: 750px;
        height: 1334px;
        position: absolute;
        top: 137px;
        left: 49.1%;
        transform: translateX(-50%);
        border-radius: 0 0 77px 74px;
        scrollbar-width: none;
        zoom: 0.464;
        /* firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .main_content_img {
        width: 100%;
    }

    .add_img_title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 30px;
    }

    .add_img_text {
        margin-right: 30px;
        color: #606266;
    }

    .edit_box .el-button {
        width: 158px;
        height: 35px;
        padding: 10px 20px;
    }

    .edit_box {
        padding-top: 40px;
    }

    .btn_list_box {
        margin: 40px 0;
        padding-bottom: 30px;
        width: 500px;
        border-bottom: 1px solid #F1F1F1;
    }

    .btn_list {
        border-radius: 5px;
        width: 80px;
        height: 80px;
        border: 2px solid #C5C8CE;
        position: relative;
        margin-right: 26px;
        cursor: pointer;
    }

    .btn_active {
        border: 2px solid #2DB7F5;
        background: #CBF3FF;
    }

    .btn_icon {
        color: #C5C8CE;
        font-size: 45px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .btn_icon_close {
        position: absolute;
        right: 3px;
        top: 4px;
        color: #C5C8CE;
    }

    .btn_icon_close_active {
        color: #2DB7F5;
    }

    .set_title {
        font-weight: 700;
        color: #515A6E;
        font-size: 14px;
        margin-bottom: 19px;
    }

    .slider_title {
        width: 56px;
        text-align: right;
        margin-right: 17px;
        color: #606266;
    }

    .diy_avatar {
        position: absolute;
        color: #C5C8CE;
    }

    .save_btn {
        margin-top: 80px;
    }

    /* 修改原生element滑块的样式 */
    .el-input-number.is-without-controls .el-input__inner {
        padding-left: 10px;
        padding-right: 10px;
    }


    .el-input-number .el-input {
        display: block;
        width: 45px;
        height: 20px;
        font-size: 12px;
    }

    .el-slider__button {
        width: 10px;
        height: 10px;
        border: 1px solid #03C5FF;
    }

    .el-slider__button-wrapper {
        top: -17px;
    }

    .el-slider__runway {
        height: 2px;
    }

    .el-slider__input {
        margin-top: 0;
    }

    .el-slider__bar {
        height: 3px;
    }


    /* 修改原生element颜色选择器样式 */
    .el-color-picker__trigger {
        border-radius: 50%;
        height: 30px;
        width: 30px;
        padding: 3px;
    }

    .el-color-picker__color {
        border: 0px;
    }

    .el-color-picker__icon {
        display: none;
    }

    .el-color-picker__color-inner {
        border-radius: 50%;
    }

    /* 公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    /* 溢出隐藏 */
    .over1 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .over2 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .pagination {
        width: 100%;
        flex-direction: row-reverse;
    }

    .default_tips {
        text-align: center;
        margin-top: 200px;
        color: #D0D2D6;
        font-size: 35px;
    }
</style>