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

<!-- 加载字体库 -->
<el-card shadow='never' style="background: transparent;padding:0;border:0">
    <div style="min-width: 1200px;">

        <div class="main_box flex">
            <div class="main_img_box">
                <img class="main_img" src="resources/img/mall/decorate/duihuakuangSmall.png" alt="">
                <div class="main_content">
                    <img class="main_content_img" :src="ruleForm.basic.poster.bg_pic.url" v-if='ruleForm.basic.poster.bg_pic.url' alt="">
                    <div v-else class="default_tips">暂时未设置海报背景</div>
                    <!-- 自定义海报内容插件 -->
                    <img class="diy_avatar" src="resources/img/mall/decorate/code.jpg" v-if='selectBool(3)' :style="{width:ruleForm.basic.poster.qr_code.size+'px',top:ruleForm.basic.poster.qr_code.top+'px',left:ruleForm.basic.poster.qr_code.left+'px'}">

                </div>
            </div>
            <div class="edit_box">
                <com-attachment v-model="ruleForm.basic.poster.bg_pic.url" :multiple="false" :max="1">
                    <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 1334" placement="top">
                        <el-button size="mini">更换海报背景</el-button>
                    </el-tooltip>
                </com-attachment>

                <div class="btn_list_box flex">
                    <div class="btn_list" @click.stop='selectItem(3)' class="{btn_active:select_index == 3}">
                        <i class="iconfont icon-a-31erweima btn_icon" :class="{btn_icon_close_active:select_index == 3}"></i>
                        <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(3)' v-if='selectBool(3)' :class="{btn_icon_close_active:select_index == 3}"></i>
                    </div>
                </div>

                <div class="set_box">

                    <!-- 二维码设置 -->
                    <div class="set_avatar" v-if="select_index == 3">
                        <div class="set_title">二维码设置</div>
                        <div style="padding-left: 16px;width:500px">
                            <!--                                <div class="flex flex-y-center" style="margin-bottom: 4px;">-->
                            <!--                                    <span class="slider_title">样式</span>-->
                            <!--                                    <el-radio v-model="sendData.share.qr_code.type" :label="1">圆形</el-radio>-->
                            <!--                                    <el-radio v-model="sendData.share.qr_code.type" :label="2">方形</el-radio>-->
                            <!--                                </div>-->
                            <div class="flex flex-y-center">
                                <span class="slider_title">大小</span>
                                <el-slider v-model="ruleForm.basic.poster.qr_code.size" @input="attarController($event,'codeSize')" :min="80" :max='400' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                            </div>
                            <div class="flex flex-y-center">
                                <span class="slider_title">上间距</span>
                                <el-slider v-model="ruleForm.basic.poster.qr_code.top" :max="avatar_max_top" style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                            </div>
                            <div class="flex flex-y-center">
                                <span class="slider_title">左间距</span>
                                <el-slider v-model="ruleForm.basic.poster.qr_code.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</el-card>


<!-- <script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeIndex: '1',
                activeName: '1',
                select_index: 0,
                select_arr: [], //选择了那些属性
                addImgLoad: false, //是否在上传图片
                options: [],
                color1: '#000000',
                posterLoading: false,
                sendData: {
                    share: {
                        bg_pic: {
                            url: '',
                            is_show: 0
                        },
                        qr_code: {
                            is_show: 0,
                            size: 80,
                            top: 0,
                            left: 0,
                            type: 1,
                            file_type: 'image',
                        },
                    },
                },
                params: {},
                fields: {
                    upload_type: 'images'
                },
                avatar_max_top: 1285,
                avatar_max_left: 610,
                id: '',
            }
        },
    
       
        methods: {
            getPosterDetail() {
                this.posterLoading = true;
                this.$request({
                    params: {
                        r: 'mall/poster/edit',
                        id: this.id
                    },
                    method: 'get',
                }).then(e => {
                    this.posterLoading = false;
                    if (e.data.code == 0) {
                        this.sendData.name = e.data.data.name;
                        this.sendData.key_word = e.data.data.key_word;

                        this.sendData.share.bg_pic = e.data.data.poster_content.bg_pic;
                        this.sendData.share.frame = e.data.data.poster_content.frame;
                        this.sendData.share.qr_code = e.data.data.poster_content.qr_code;
                        if (e.data.data.poster_content.name) {
                            this.sendData.share.name = e.data.data.poster_content.name;
                            e.data.data.poster_content.name.font = e.data.data.poster_content.name.font * 1;
                            if (this.sendData.share.name.is_show == 1) {
                                this.select_arr.push(2);
                            }
                        }
                        if (e.data.data.poster_content.memberid) {
                            this.sendData.share.memberid = e.data.data.poster_content.memberid;
                            e.data.data.poster_content.memberid.font = e.data.data.poster_content.memberid.font * 1;
                            if (this.sendData.share.memberid.is_show == 1) {
                                this.select_arr.push(4);
                            }
                        }
                        if (e.data.data.poster_content.head) {
                            this.sendData.share.head = e.data.data.poster_content.head;
                            if (this.sendData.share.head.is_show == 1) {
                                this.select_arr.push(1);
                            }
                        }
                        if (this.sendData.share.qr_code.is_show == 1) {
                            this.select_arr.push(3);
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                });
            },
            savePoster() {
                
                // if (this.sendData.share.bg_pic.url == '') {
                //     this.$message.error('请添加海报背景');
                //     return;
                // }

                // if (this.sendData.share.bg_pic.url) {
                //     this.sendData.share.bg_pic.is_show = 1;
                // } else {
                //     this.sendData.share.bg_pic.is_show = 0;
                // }
                // this.select_arr.forEach((item, index) => {
                //     if (item == 1) {
                //         this.sendData.share.head.is_show = 1;
                //     } else if (item == 2) {
                //         this.sendData.share.name.is_show = 1;
                //     } else if (item == 3) {
                //         this.sendData.share.qr_code.is_show = 1;
                //     } else if (item == 4) {
                //         this.sendData.share.memberid.is_show = 1;
                //     }
                // })

                // if (!this.sendData.share.qr_code.is_show) {
                //     this.$message.error('请添加二维码');
                //     return;
                // }

                // 计算百分比
                // let share = this.sendData.share;
                // for (let key in share) {
                //     if (key == 'bg_pic') {
                //         let img = document.getElementsByClassName("main_content_img");
                //         this.sendData.share[key].width = img[0].width;
                //         this.sendData.share[key].height = img[0].height;
                //     } else {
                //         this.sendData.share[key].top_ratio = Math.floor(share[key].top / share[key].max_top * 100) / 100;
                //         this.sendData.share[key].left_ratio = Math.floor(share[key].left / share[key].max_left * 100) / 100;
                //     }
                // }
                // this.sendData.share.frame = {
                //     width: 750,
                //     height: 1334
                // };
                var obj = {
                    poster_content: {
                        share: ''
                    },
                    name: '',
                    key_word: '',
                    id: this.id
                };
                obj.poster_content.share = this.sendData.share;
                obj.name = this.sendData.name;
                obj.key_word = this.sendData.key_word;
                obj.share_url = this.sendData.share.bg_pic.url;

                this.posterLoading = true;
                this.select_arr.forEach((item, index) => {
                    if (this.select_arr.indexOf(1) == -1) {
                        delete obj.poster_content.share.head
                    }
                    if (this.select_arr.indexOf(2) == -1) {
                        delete obj.poster_content.share.name
                    }
                })
                this.$request({
                    params: {
                        r: 'mall/poster/edit',
                    },
                    method: 'post',
                    data: obj
                }).then(e => {
                    this.posterLoading = false;
                    if (e.data.code == 0) {
                        this.$message({
                            message: '保存成功!',
                            type: 'success'
                        });
                        setTimeout(() => {
                            this.$navigate({
                                r: 'mall/poster/index'
                            })
                        }, 1000)
                    } else {
                        this.$message.error(e.data.msg);
                    }
                });

            },
         
          
           
          
        }
    })
</script> -->