qimall/addons/Certificate/backend/views/default/edit.php

<?php
/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: lun
 * Date: 2021-09-15
 * Time: 12:36
 */
use common\helpers\ComponentHelper;

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

<!-- 加载字体库 -->、
<!-- 加载字体库 -->
<div id="app" v-cloak>
    <el-card shadow='never' v-loading="posterLoading" style="background: transparent;padding:0;border:0">
        <div style="min-width: 1300px;">
            <div class="header_box">
                <div class="add_temp_box" style="background: #fff;border-radius:5px;overflow:hidden">
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="编辑证书" name="1"></el-tab-pane>
                    </el-tabs>
                </div>
                <div :rules="addRule" class="flex flex-y-center" style="background: #fff;padding: 25px;border-radius:5px 5px 0 0">
                    <div class="template_data_left flex flex-y-center" prop="name" style="margin-right: 40px;">
                        <div class="template_data_left_title">证书名称</div>
                        <el-input placeholder="请输入名称，不超过12个文字" maxlength='12' v-model="sendData.name" clearable></el-input>
                    </div>
                </div>
            </div>

            <div class="main_box flex">
                <div class="main_img_box">
                    <div class="main_content">
                        <img class="main_content_img" :src="sendData.share.bg_pic.url?sendData.share.bg_pic.url:'/resources/addons/certificate/poster_bg.jpg'"  alt="">
                        <!-- 自定义海报内容插件 -->
                        <img class="diy_avatar" src="/resources/addons/certificate/user_head.png" v-if='selectBool(1)' :style="{width:sendData.share.head.size+'px',top:sendData.share.head.top+'px',left:sendData.share.head.left+'px'}">
                        <div class="diy_avatar" ref="nameAttr" v-if='selectBool(2)' :style="{color:sendData.share.name.color,fontSize:sendData.share.name.font+'px',top:sendData.share.name.top+'px',left:sendData.share.name.left+'px'}">昵称设置</div>
                        <img class="diy_avatar" src="resources/img/mall/decorate/code.jpg" v-if='selectBool(3)' :style="{width:sendData.share.qr_code.size+'px',top:sendData.share.qr_code.top+'px',left:sendData.share.qr_code.left+'px'}">
                        <div class="diy_avatar" ref="nameAttr" v-if='selectBool(4)' :style="{color:sendData.share.number.color,fontSize:sendData.share.number.font+'px',top:sendData.share.number.top+'px',left:sendData.share.number.left+'px'}">证书编号</div>
                        <div class="diy_avatar" ref="nameAttr" v-if='selectBool(5)' :style="{color:sendData.share.user_level.color,fontSize:sendData.share.user_level.font+'px',top:sendData.share.user_level.top+'px',left:sendData.share.user_level.left+'px'}">会员等级</div>
                        <div class="diy_avatar" ref="nameAttr" v-if='selectBool(6)' :style="{color:sendData.share.mobile.color,fontSize:sendData.share.mobile.font+'px',top:sendData.share.mobile.top+'px',left:sendData.share.mobile.left+'px'}">手机号码</div>
                        <img class="diy_avatar" :src="sendData.share.img.url" v-if='selectBool(7)' :style="{width:sendData.share.img.size+'px',top:sendData.share.img.top+'px',left:sendData.share.img.left+'px'}">
                        <div class="diy_avatar" ref="nameAttr" v-if='selectBool(8)' :style="{color:sendData.share.text.color,fontSize:sendData.share.text.font+'px',top:sendData.share.text.top+'px',left:sendData.share.text.left+'px'}" >{{sendData.share.text.text}}</div>
                    </div>
                </div>
                <div class="edit_box">
                    <com-attachment v-model="sendData.share.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='selectItem(1)' :class="{btn_active:select_index == 1}">
                            <img src="/resources/addons/certificate/user_head.png">
                            <div style="width: 100%;text-align: center;">头像</div>
                            <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(1)' v-if='selectBool(1)' :class="{btn_icon_close_active:select_index == 1}"></i>
                        </div>
                        <div class="btn_list" @click='selectItem(2)' :class="{btn_active:select_index == 2}">
                            <img  src="/resources/addons/certificate/user_name.png">
                            <div style="width: 100%;text-align: center;">会员名称</div>
                            <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(2)' v-if='selectBool(2)' :class="{btn_icon_close_active:select_index == 2}"></i>
                        </div>
                        <div class="btn_list"  :class="{btn_active:select_index == 3}" @click.stop='selectItem(3)'>
                            <img  src="/resources/addons/certificate/qrode.png">
                            <div style="width: 100%;text-align: center;">会员二维码</div>
                            <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 class="btn_list"  :class="{btn_active:select_index == 4}" @click.stop='selectItem(4)'>
                            <img  src="/resources/addons/certificate/number.png">
                            <div style="width: 100%;text-align: center;">证书编号</div>
                            <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(4)' v-if='selectBool(4)' :class="{btn_icon_close_active:select_index == 4}"></i>
                        </div>

                    </div>
                    <div class="btn_list_box flex">
                        <div class="btn_list"  :class="{btn_active:select_index == 5}" @click.stop='selectItem(5)'>
                            <img src="/resources/addons/certificate/user_level.png">
                            <div style="width: 100%;text-align: center;">会员等级</div>
                            <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(5)' v-if='selectBool(5)' :class="{btn_icon_close_active:select_index == 5}"></i>
                        </div>
                        <div class="btn_list" :class="{btn_active:select_index == 6}" @click.stop='selectItem(6)'>
                            <img src="/resources/addons/certificate/mobile.png">
                            <div style="width: 100%;text-align: center;">手机号码</div>
                            <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(6)' v-if='selectBool(6)' :class="{btn_icon_close_active:select_index == 6}"></i>
                        </div>
                        <div class="btn_list"  :class="{btn_active:select_index == 7}" @click.stop='selectItem(7)'>
                            <img  src="/resources/addons/certificate/img.png">
                            <div style="width: 100%;text-align: center;">图片</div>
                            <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(7)' v-if='selectBool(7)' :class="{btn_icon_close_active:select_index == 7}"></i>
                        </div>
                        <div class="btn_list"  :class="{btn_active:select_index == 8}" @click.stop='selectItem(8)'>
                            <img  src="/resources/addons/certificate/text.png">
                            <div style="width: 100%;text-align: center;">文本</div>
                            <i class="el-icon-close btn_icon_close" @click.stop='deleteSelect(8)' v-if='selectBool(8)' :class="{btn_icon_close_active:select_index == 8}"></i>
                        </div>
                    </div>

                    <div class="btn_list_box">
                        <p style="font-weight: bold; margin-bottom: 5px;">允许查看及下载的用户等级</p>
                        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        <el-checkbox-group v-model="sendData.member_level" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(row, index) in member_level_list" :label="row.level" :key="index">{{row.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>

                    <div class="set_box">
                        <!-- 头像设置 -->
                        <div class="set_avatar" v-if="select_index == 1">
                            <div class="set_title">头像设置</div>
                            <div style="padding-left: 16px;width:500px">
                                <div class="flex flex-y-center">
                                    <span class="slider_title">大小</span>
                                    <!-- :disabled='!selectBool(1)' 用来判断是否禁用，暂没用到-->
                                    <el-slider v-model="sendData.share.head.size" @input="attarController($event,'avatarSize')" :min="40" :max='350' 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="sendData.share.head.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="sendData.share.head.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                            </div>
                        </div>
                        <!-- 昵称设置 -->
                        <div class="set_nickname" v-if="select_index == 2">
                            <div class="set_title">昵称设置</div>
                            <div style="padding-left: 16px;width:500px">
                                <div class="flex flex-y-center">
                                    <span class="slider_title" style="position: relative;top:-5px">昵称颜色</span>
                                    <el-color-picker v-model="sendData.share.name.color"></el-color-picker>
                                </div>
                                <div class="flex flex-y-center">
                                    <span class="slider_title">大小</span>
                                    <el-slider v-model="sendData.share.name.font" @input="attarController($event,'nameSize')" :min="12" :max='100' 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="sendData.share.name.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="sendData.share.name.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                            </div>
                        </div>
                        <!-- 二维码设置 -->
                        <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">
                                    <span class="slider_title">大小</span>
                                    <el-slider v-model="sendData.share.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="sendData.share.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="sendData.share.qr_code.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                            </div>
                        </div>

                        <!-- 证书编号设置 -->
                        <div class="set_nickname" v-if="select_index == 4">
                            <div class="set_title">证书编号设置</div>
                            <div style="padding-left: 16px;width:500px">
                                <div class="flex flex-y-center">
                                    <span class="slider_title" style="position: relative;top:-5px">证书编号颜色</span>
                                    <el-color-picker v-model="sendData.share.number.color"></el-color-picker>
                                </div>
                                <div class="flex flex-y-center">
                                    <span class="slider_title">大小</span>
                                    <el-slider v-model="sendData.share.number.font" @input="attarController($event,'number')" :min="12" :max='100' 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="sendData.share.number.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="sendData.share.number.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                            </div>
                        </div>

                        <!-- 会员等级设置 -->
                        <div class="set_nickname" v-if="select_index == 5">
                            <div class="set_title">会员等级设置</div>
                            <div style="padding-left: 16px;width:500px">
                                <div class="flex flex-y-center">
                                    <span class="slider_title" style="position: relative;top:-5px">会员等级颜色</span>
                                    <el-color-picker v-model="sendData.share.user_level.color"></el-color-picker>
                                </div>
                                <div class="flex flex-y-center">
                                    <span class="slider_title">大小</span>
                                    <el-slider v-model="sendData.share.user_level.font" @input="attarController($event,'user_level')" :min="12" :max='100' 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="sendData.share.user_level.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="sendData.share.user_level.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                            </div>
                        </div>

                        <!-- 手机号码等级设置 -->
                        <div class="set_nickname" v-if="select_index == 6">
                            <div class="set_title">手机号码设置</div>
                            <div style="padding-left: 16px;width:500px">
                                <div class="flex flex-y-center">
                                    <span class="slider_title" style="position: relative;top:-5px">手机号码颜色</span>
                                    <el-color-picker v-model="sendData.share.mobile.color"></el-color-picker>
                                </div>
                                <div class="flex flex-y-center">
                                    <span class="slider_title">大小</span>
                                    <el-slider v-model="sendData.share.mobile.font" @input="attarController($event,'mobile')" :min="12" :max='100' 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="sendData.share.mobile.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="sendData.share.mobile.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                            </div>
                        </div>

                        <!-- 图片设置 -->
                        <div class="set_avatar" v-if="select_index == 7">
                            <div class="set_title">图片设置</div>
                            <div style="padding-left: 16px;width:500px">
                                <div class="flex flex-y-center">
                                    <span class="slider_title">大小</span>
                                    <el-slider v-model="sendData.share.img.size" @input="attarController($event,'img')" :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="sendData.share.img.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="sendData.share.img.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                            </div>
                            <div  style=" margin-left: 34px;">
                                <com-attachment v-model="sendData.share.img.url" :multiple="false" :max="1">
                                    <el-tooltip class="item" effect="dark" content="建议尺寸:420 * 336" placement="top">
                                        <el-button size="mini">选择图片</el-button>
                                    </el-tooltip>
                                </com-attachment>
                                <div class="customize-share-title" style="margin-top: 10px;">
                                    <com-image mode="aspectFill" width='80px' height='80px' :src="sendData.share.img.url ? sendData.share.img.url : ''"></com-image>
                                </div>
                            </div>
                        </div>
                        <!-- 图片设置 -->
                        <div class="set_avatar" v-if="select_index == 8" :rules="addRule">
                            <div class="set_title">文本</div>
                            <div style="padding-left: 16px;width:500px">
                                <div class="flex flex-y-center">
                                    <span class="slider_title">大小</span>
                                    <el-slider v-model="sendData.share.text.font" @input="attarController($event,'text')" :min="20" :max='40' 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="sendData.share.text.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="sendData.share.text.left" :max='avatar_max_left' style="flex: 1;" show-input :show-input-controls='false'></el-slider>
                                </div>
                            </div>
<!--                            <div style="width: 100%; height: 150px; overflow:scroll;display: none; ">-->
<!--                                <com-rich-text style="width: 750px; " v-model="sendData.share.text.text"></com-rich-text>-->
<!--                            </div>-->
                        </div>

                    </div>

                    <div class="save_btn">
                        <el-button type="primary" :loading="posterLoading" @click="savePoster">点击保存</el-button>
                    </div>
                </div>


            </div>
        </div>
    </el-card>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            var validatePass = (rule, value, callback) => {
                var reg = /^[\u4e00-\u9fa5\w]+$/;
                if (reg.test(value)) {
                    callback();
                }else{
                    callback(new Error('规则名不能含有特殊字符'));
                }
            };
            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
                        },
                        head: {
                            is_show: 1,
                            size: 73,
                            top: 388,
                            left: 256,
                            file_type: 'image'
                        },
                        qr_code: {
                            is_show: 1,
                            size: 80,
                            top: 579,
                            left: 536,
                            type: 1,
                            file_type: 'image',
                        },
                        name: {
                            is_show: 1,
                            font: 25,
                            top: 468,
                            left: 253,
                            color: '#000000',
                            file_type: 'text'
                        },
                        number: {
                            is_show: 1,
                            font: 25,
                            top: 568,
                            left: 253,
                            color: '#141313',
                        },
                        user_level: {
                            is_show: 1,
                            font: 25,
                            top: 616,
                            left: 253,
                            max_left:646,
                            max_top:1298,
                            color: '#141313',
                        },
                        mobile: {
                            is_show: 1,
                            font: 25,
                            top: 520,
                            left: 253,
                            color: '#000000',
                            max_left:646,
                            max_top:1298,
                            file_type: 'text'
                        },
                        img: {
                            url:'',
                            is_show: 0,
                            size: 80,
                            font: 25,
                            top: 0,
                            left: 0,
                            color: '#000000',
                        },
                        text: {
                            text:"长按识别小程序码进入",
                            is_show: 0,
                            font: 10,
                            top: 668,
                            left: 253,
                            color: '#000000',
                            file_type: 'text'
                        },
                    },
                    name: '',
                    key_word: '',
                    member_level: []
                },
                member_level_list: [],
                addRule: {

                    destext: [
                        {required: true, message: '请填写分类名称', trigger: 'change'},
                        {
                            validator: (rule, value, callback) => {
                            if(value.length>50||value.length<0){
                                callback('最大长度在1-50个字内');
                            }
                            callback();
                        }
                        },
                            {
                                validator:validatePass,
                                    trigger: 'blur'
                            },
                        ],
                    name: [
                        {required: true, message: '请填写分类名称', trigger: 'change'},
                        {
                            validator: (rule, value, callback) => {
                            if(value.length>12||value.length<0){
                            callback('最大长度在1-12个字内');
                        }
                        callback();
                    }
                    },
                        {
                            validator:validatePass,
                                trigger: 'blur'
                        },
                    ],
                },
                params: {},
                fields: {
                    upload_type: 'images'
                },
                avatar_max_top: 1285,
                avatar_max_left: 610,
                id: '',
                checkAll: false
            }
        },
        computed: {
            selectBool() {
                return function(num) {
                    if (JSON.stringify(this.select_arr).indexOf(num) != -1) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
        created() {
            this.id = getQuery('id');
            if (this.id) {
                this.getPosterDetail();
            }else{
                this.select_arr = [1,2,3,4,5,6];

                // 请求等级列表
                this.getLevelList()
            }
        },
        methods: {
            getPosterDetail() {
                this.posterLoading = true;
                this.$request({
                    params: {
                        r: 'certificate/default/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.member_level = e.data.data.member_level;
                    this.member_level_list = e.data.data.levels
                    this.checkAll = this.sendData.member_level.length > 0 && this.member_level_list.length === this.sendData.member_level.length
                    if(e.data.data.content && e.data.data.content.share ){
                        this.sendData.share = e.data.data.content.share;
                        if(this.sendData.share.head && this.sendData.share.head.is_show == 1) this.select_arr.push(1);
                        if(this.sendData.share.name && this.sendData.share.name.is_show == 1) this.select_arr.push(2);
                        if(this.sendData.share.qr_code && this.sendData.share.qr_code.is_show == 1) this.select_arr.push(3);
                        if(this.sendData.share.number && this.sendData.share.number.is_show == 1) this.select_arr.push(4);
                        if(this.sendData.share.user_level && this.sendData.share.user_level.is_show == 1) this.select_arr.push(5);
                        if(this.sendData.share.mobile && this.sendData.share.mobile.is_show == 1) this.select_arr.push(6);
                        if(this.sendData.share.img && this.sendData.share.img.is_show == 1) this.select_arr.push(7);
                        if(this.sendData.share.text && this.sendData.share.text.is_show == 1) this.select_arr.push(8);
                        console.log(this.sendData.share);
                    }

                } else {
                    this.$message.error(e.data.msg);
                }
            });
            },
            getLevelList() {
                this.$request({
                    params: {
                        r: 'certificate/default/get-level-list'
                    },
                    method: 'get',
                }).then(e => {
                    if (e.data.code == 0) {
                        this.member_level_list = e.data.data

                        // 默认全选
                        this.checkAll = true
                        this.handleCheckAllChange(true)
                    } else {
                        this.$message.error(e.data.msg);
                    }
                });
            },
            savePoster() {
                if (this.sendData.name == '') {
                    this.$message.error('请输入证书名称');
                    return;
                }
                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.number.is_show = 1;
                } else if (item == 5) {
                    this.sendData.share.user_level.is_show = 1;
                } else if (item == 6) {
                    this.sendData.share.mobile.is_show = 1;
                } else if (item == 7) {
                    this.sendData.share.img.is_show = 1;
                } else if (item == 8) {
                    this.sendData.share.text.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 {
                        //console.log(key,share[key].max_left,3333,share[key].max_top);
                        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 = {
                    content: {
                        share: ''
                    },
                    name: '',
                    key_word: '',
                    id: this.id
                };
                obj.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;
                obj.member_level = this.sendData.member_level;

                this.posterLoading = true;
                this.$request({
                    params: {
                        r: 'certificate/default/edit',
                    },
                    method: 'post',
                    data: obj
                }).then(e => {
                    this.posterLoading = false;
                if (e.data.code == 0) {
                    this.$message({
                        message: '保存成功!',
                        type: 'success'
                    });
                    window.history.go(-1);
                } else {
                    this.$message.error(e.data.msg);
                }
            });

            },
            attarController(e, str) { //属性控制器
                if (str == 'avatarSize') {
                    this.avatar_max_top = 1334 - (e + 4);
                    this.avatar_max_left = 750 - e;
                    this.sendData.share.head.max_top = this.avatar_max_top;
                    this.sendData.share.head.max_left = this.avatar_max_left;
                } else if (str == 'nameSize') {
                    this.avatar_max_top = 1334 - (this.$refs.nameAttr.offsetHeight + 4);
                    this.avatar_max_left = 750 - this.$refs.nameAttr.offsetWidth - 4;
                    this.sendData.share.name.max_top = this.avatar_max_top;
                    this.sendData.share.name.max_left = this.avatar_max_left;
                } else if (str == 'number') {
                    this.avatar_max_top = 1334 - (this.$refs.nameAttr.offsetHeight + 4);
                    this.avatar_max_left = 750 - this.$refs.nameAttr.offsetWidth - 4;
                    this.sendData.share.number.max_top = this.avatar_max_top;
                    this.sendData.share.number.max_left = this.avatar_max_left;
                } else if (str == 'user_level') {
                    this.avatar_max_top = 1334 - (this.$refs.nameAttr.offsetHeight + 4);
                    this.avatar_max_left = 750 - this.$refs.nameAttr.offsetWidth - 4;
                    this.sendData.share.user_level.max_top = this.avatar_max_top;
                    this.sendData.share.user_level.max_left = this.avatar_max_left;
                }  else if (str == 'mobile') {
                    this.avatar_max_top = 1334 - (this.$refs.nameAttr.offsetHeight + 4);
                    this.avatar_max_left = 750 - this.$refs.nameAttr.offsetWidth - 4;
                    console.log(this.avatar_max_top,55);
                    this.sendData.share.mobile.max_top = this.avatar_max_top;
                    this.sendData.share.mobile.max_left = this.avatar_max_left;
                }  else if (str == 'img') {
                    this.avatar_max_top = 1334 - e;
                    this.avatar_max_left = 750 - e;
                    this.sendData.share.img.max_top = this.avatar_max_top;
                    this.sendData.share.img.max_left = this.avatar_max_left;
                }   else if (str == 'text') {
                    this.avatar_max_top = 1334 - (this.$refs.nameAttr.offsetHeight + 4);
                    this.avatar_max_left = 750 - this.$refs.nameAttr.offsetWidth - 4;
                    console.log(this.avatar_max_top,66);
                    this.sendData.share.text.max_top = this.avatar_max_top;
                    this.sendData.share.text.max_left = this.avatar_max_left;
                } else {
                    this.avatar_max_top = 1334 - e;
                    this.avatar_max_left = 750 - e;
                    this.sendData.share.qr_code.max_top = this.avatar_max_top;
                    this.sendData.share.qr_code.max_left = this.avatar_max_left;
                }
            },
            selectItem(num) { //选中了哪一个海报属性
                console.log('xaunzhong ',num,this.sendData.share)
                this.select_index = num;

                if (JSON.stringify(this.select_arr).indexOf(num) == -1) {
                    this.select_arr.push(num);
                }
                console.log(this.sendData.share.name.top,'share3')
            },
            deleteSelect(num) { //删除所选择的属性
                this.select_arr.forEach((item, index) => {
                    if (item == num) {
                    this.select_arr.splice(index, 1);
                    if (num == 1) {
                        this.sendData.share.head.is_show = 0;
                    } else if (num == 2) {
                        this.sendData.share.name.is_show = 0;
                    } else if (num == 3) {
                        this.sendData.share.qr_code.is_show = 0;
                    } else if (num == 4) {
                        this.sendData.share.number.is_show = 0;
                    } else if (num == 5) {
                        this.sendData.share.user_level.is_show = 0;
                    } else if (num == 6) {
                        this.sendData.share.mobile.is_show = 0;
                    } else if (num == 7) {
                        this.sendData.share.img.is_show = 0;
                    } else if (num == 8) {
                        this.sendData.share.text.is_show = 0;
                    }
                }
            })
                if (this.select_index == num) {
                    this.select_index = 0;
                }
            },
            beginAddImg(e) {
                if (e[0]) { //判断图片是否正在上传
                    this.addImgLoad = true;
                }
            },
            handleSuccess(e) { //图片上传成功
                this.sendData.share.bg_pic.url = e.response.data.data.url;
                this.addImgLoad = false;
                this.$message({
                    message: '图片上传成功！',
                    type: 'success'
                });
            },
            // 会员等级全选
            handleCheckAllChange(isSelect) {
                this.sendData.member_level = []

                if (isSelect) {
                    for (const levelItem of this.member_level_list) {
                        this.sendData.member_level.push(levelItem.level)
                    }
                }
            },
            // 会员等级选择时
            handleCheckedCitiesChange() {
                this.checkAll = this.sendData.member_level.length > 0 && this.member_level_list.length === this.sendData.member_level.length
            }
        }
    })
</script>

<style scoped>
    .btn_list img{
        margin: 13% 0 5% 20%; height: 40px;
    }
    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;
    }

    .el-tabs__header {
        margin: 0;
    }

    .el-tabs__item {
        height: 70px;
        line-height: 70px;
        width: 96px;
        text-align: center;
        padding: 0;
    }

    .el-tabs__active-bar {
        width: 96px !important;
        height: 4px;
    }

    .template_data_left_title {
        margin-right: 13px;
    }

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

    .main_box {
        background: #fff;
        padding: 0 25px 25px;
        border-radius: 5px;
    }

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

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

    .main_content {

        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: 40px 0 20px 20px;
        border: 1px #f9f6f6 solid;
    }

    .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--small .el-input__inner {
        height: 20px;
        line-height: 20px;
    }

    .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>