hemall.terabimsoft.com.cn/plugins/new-poster/views/admin/deposit-ladder.blade.php

@extends('layouts.base')
@section('title', '基础设置')
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/new-poster/views/admin/index.css')}}">
<link rel="stylesheet" href="{{resource_get('plugins/new-poster/views/admin/edit.css')}}">
<link rel="stylesheet" href="{{static_url('css/public-number.css')}}">

<style>
    /* 导航 */
    .el-radio-button .el-radio-button__inner,.el-radio-button:first-child .el-radio-button__inner {border-radius: 4px 4px 4px 4px;border-left: 0px;}
    .el-radio-button__inner{border:0;}
    .el-radio-button:last-child .el-radio-button__inner {border-radius: 4px 4px 4px 4px;}
    .upload-boxed .el-icon-close {position: absolute;top: -5px;right: -5px;color: #fff;background: #333;border-radius: 50%;cursor: pointer;}
    .el-radio__inner { border: 1px solid #cfcfcf;}
    .edit-poster .el-form-item__label{width:20%!important}
    .edit-poster .el-form-item__content{margin-left:20%!important}

</style>
    <div class="all">
        <div id="app" v-cloak>
            <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                <div class="vue-head">
                    <el-radio-group v-model="order_type">
                        <el-radio-button label="1">海报设置</el-radio-button>
                    </el-radio-group>
                </div>
                <div v-show="order_type==1">
                    <div class="vue-head">
                        <div class="vue-main-title">
                            <div class="vue-main-title-left"></div>
                            <div class="vue-main-title-content">基础设置</div>
                        </div>
                        <div class="vue-main-form">
                            <el-form-item label="海报名称" prop="title">
                                <el-input v-model="form.title" style="width:70%;" ref="title"></el-input>
                            </el-form-item>

                            <el-form-item label="是否启用" prop="status">
                                <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
                            </el-form-item>

                        </div>
                    </div>
                    <div class="vue-head" style="margin-top:20px">
                        <div class="vue-main-title">
                            <div class="vue-main-title-left"></div>
                            <div class="vue-main-title-content">海报设计</div>
                        </div>
                        <div class="vue-main-form">
                            <div style="width:85%;margin:auto;display:flex;margin-bottom:30px;">
                                <div style="width: 320px;height: 504px;border: 1px solid #ccc;position: relative;" :style="{backgroundColor:(background_type==0?form.color:'')}">
                                    <img v-if="form.background_url&&background_type==1" :src="form.background_url" alt="" style="width:100%;height:100%;">
                                    <drag-resize
                                        v-for="(rect, index) in rects"
                                        :key="index"
                                        :w="rect.width"
                                        :h="rect.height"
                                        :x="rect.left"
                                        :y="rect.top"
                                        :axis="rect.axis"
                                        :is-active="rect.active"
                                        :minw="rect.minw"
                                        :minh="rect.minh"
                                        :is-draggable="rect.draggable"
                                        :is-resizable="rect.resizable"
                                        :parent-limitation="rect.parentLim"
                                        :aspect-ratio="rect.aspectRatio"
                                        :z="rect.zIndex"
                                        :content-class="rect.class"
                                        v-on:activated="activateEv(index)"
                                        v-on:deactivated="deactivateEv(index)"
                                        v-on:dragging="changePosition($event, index)"
                                        v-on:resizing="changeSize($event, index)"
                                        style="position: absolute;"
                                    >
                                        <!-- logo  -->
                                        <img v-if="rect.type=='logo'" :src="rect.logo_type?rect.src_url:logo_url" alt="" style="width:100%;height:100%;">
                                        <!-- logo  -->
                                        <!-- 商品主图 -->
                                        <img v-if="rect.type=='img'" :src="goods_url" alt="" style="width:100%;height:100%;">
                                        <!-- 商品主图 -->
                                        <!-- 商品名称 -->
                                        <!-- bold:0,italic:0,slide:0,under:0 -->
                                        <div v-if="rect.type=='title'"
                                            :style="{color:rect.color,fontSize:rect.size+'px',fontWeight:(rect.bold?'bold':''),fontStyle:(rect.italic?'italic':''),textDecoration:((rect.slide||rect.under)?rect.slide?'line-through':'underline':'')}"
                                            style="width:100%;height:100%;white-space:nowrap;overflow:hidden"
                                        >
                                            商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称
                                        </div>
                                        <!-- 商品名称 -->
                                        <!-- 图片 -->
                                        <img v-if="rect.type=='other_img'" :src="rect.src_url" alt="" style="width:100%;height:100%;">
                                        <!-- 图片 -->
                                        <!-- 会员价 -->
                                        <div v-if="rect.type=='deposit'"
                                            :style="{color:rect.color,fontSize:rect.size+'px',fontWeight:(rect.bold?'bold':''),fontStyle:(rect.italic?'italic':''),textDecoration:((rect.slide||rect.under)?rect.slide?'line-through':'underline':'')}"
                                            style="width:100%;height:100%;white-space:nowrap;overflow:hidden"
                                        >
                                            定金:¥20.00
                                        </div>
                                        <!-- 会员价 -->
                                        <!-- 现价 -->
                                        <div v-if="rect.type=='price'"
                                            :style="{color:rect.color,fontSize:rect.size+'px',fontWeight:(rect.bold?'bold':''),fontStyle:(rect.italic?'italic':''),textDecoration:((rect.slide||rect.under)?rect.slide?'line-through':'underline':'')}"
                                            style="width:100%;height:100%;white-space:nowrap;overflow:hidden"
                                        >
                                            现价:¥20.00
                                        </div>
                                        <!-- 现价 -->
                                        <!-- 头像 -->
                                        <img v-if="rect.type=='head'" :src="head_url" alt="" style="width:100%;height:100%;">

                                        <!-- 关注二维码  -->
                                        <img v-if="rect.type=='qr'" :src="qr_url" alt="" style="width:100%;height:100%;">
                                        <!-- 关注二维码  -->
                                        <!-- <img v-if="rect.type=='img'" :src="rect.src_url" alt="" style="width:100%;height:100%;"> -->
                                        <div v-if="rect.type=='nickname'"
                                            :style="{color:rect.color,fontSize:rect.size+'px'}"
                                            style="width:100%;height:100%;"
                                        >
                                            昵称
                                        </div>
                                        <div v-if="rect.type=='invite'"
                                            :style="{color:rect.color,fontSize:rect.size+'px'}"
                                            style="width:100%;height:100%;"
                                        >
                                            A1H3U5GF
                                        </div>
                                        <div v-if="rect.type=='mid'"
                                            :style="{color:rect.color,fontSize:rect.size+'px'}"
                                            style="width:100%;height:100%;"
                                        >
                                            8888
                                        </div>
                                    </drag-resize>

                                </div>
                                <div class="edit-poster" style="flex:1;margin-left:10%">
                                    <!-- <div>背景图片</div> -->
                                    <el-form-item label="背景" prop="background">
                                        <el-radio v-model="background_type" :label="0">颜色</el-radio>
                                        <el-radio v-model="background_type" :label="1">自定义图片</el-radio>
                                    </el-form-item>
                                    <el-form-item label="" prop="background" v-if="background_type==1">
                                        <div class="upload-box" @click="openUpload('background')" v-if="!form.background_url">
                                            <i class="el-icon-plus" style="font-size:32px"></i>
                                        </div>
                                        <div @click="openUpload('background')" class="upload-boxed" v-if="form.background_url" style="height:236.25px">
                                            <img :src="form.background_url" alt="" style="width:150px;height:236.25px;border-radius: 5px;cursor: pointer;">
                                            <i class="el-icon-close" @click.stop="clearImg('background')" title="点击清除图片"></i>
                                            <div class="upload-boxed-text">点击重新上传</div>
                                        </div>
                                        <div class="tip">建议背景图片尺寸: 640*1008
                                            <span v-if="isDecorate">
                                                <span @click.stop="jumpUrl" style="color: #196dfa;font-weight: 600;margin-left: 15px;cursor:pointer;">图片智能在线设计</span><i class="el-icon-question" style="color:#196dfa;margin-left:2px;" @click="showIntroduce = true;"></i>
                                            </span>
                                        </div>
                                    </el-form-item>
                                    <el-form-item label="" prop="" v-else>
                                        <el-color-picker v-model="form.color" style="display:inline-block"></el-color-picker>
                                    </el-form-item>

                                    <el-form-item label="海报元素" prop="" >
                                        <div style="width:500px;">
                                            活动名称，定金，现价，活动二维码，头像，昵称，会员id，邀请码
                                            <el-button size="small" @click="addEle('logo')">商城logo</el-button>
                                            <el-button size="small" @click="addEle('img')">商品主图</el-button>
                                            <el-button size="small" @click="addEle('deposit')">定金</el-button>
                                            <el-button size="small" @click="addEle('price')">现价</el-button>
                                            <el-button size="small" @click="addEle('qr')">活动二维码</el-button>
                                            <el-button size="small" @click="addEle('head')">头像</el-button>
                                            <el-button size="small" @click="addEle('nickname')">昵称</el-button>
                                            <el-button size="small" @click="addEle('invite')">邀请码</el-button>
                                            <el-button size="small" @click="addEle('mid')">会员ID</el-button>
                                            <el-button type="text" v-if="choosed_index!=-1" icon="iconfont icon-ht_operation_delete" @click="delEle" title="删除当前元素" style="color:#F56C6C"></el-button>
                                        </div>
                                    </el-form-item>
                                    <!-- logo设置项 -->
                                    <div v-if="choosed_obj.type=='logo'">
                                        <el-form-item label="商城logo" prop="background">
                                            <el-radio v-model="choosed_obj.logo_type" :label="0">默认</el-radio>
                                            <el-radio v-model="choosed_obj.logo_type" :label="1">自定义</el-radio>
                                        </el-form-item>
                                        <el-form-item label="图片设置" prop="" v-if="choosed_obj.logo_type==1">
                                            <div class="upload-box" @click="openUpload('src',2)" v-if="!choosed_obj.src_url">
                                                <i class="el-icon-plus" style="font-size:32px"></i>
                                            </div>
                                            <div @click="openUpload('src',2)" class="upload-boxed" v-if="choosed_obj.src_url" style="height:150px">
                                                <img :src="choosed_obj.src_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                                <i class="el-icon-close" @click.stop="clearImg('src',2)" title="点击清除图片"></i>
                                                <div class="upload-boxed-text">点击重新上传</div>
                                            </div>
                                        </el-form-item>
                                    </div>
                                    <!-- 商品主图设置项 -->
                                    <!-- <div v-if="choosed_obj.type=='img'">
                                        <el-form-item label="商品主图圆角" prop="background">
                                            <el-slider v-model="choosed_obj.borderRadius" style="width:500px" show-input></el-slider>

                                        </el-form-item>
                                    </div> -->

                                    <!-- 商品名称设置项 -->
                                    <div v-if="choosed_obj.type=='title'">
                                        <el-form-item label="商品名称文字颜色" prop="banner1">
                                            <el-color-picker v-model="choosed_obj.color" style="display:inline-block"></el-color-picker>
                                        </el-form-item>
                                        <el-form-item label="商品名称文字大小" prop="banner1">
                                            <el-input v-model="choosed_obj.size" style="width:200px">
                                                <template slot="append">PX</template>
                                            </el-input>
                                            <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_blod" @click="changeText('b')" title="加粗" :style="{color:choosed_obj.bold?'':'#000'}"></el-button> -->
                                            <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_italic" @click="changeText('i')" title="斜体" :style="{color:choosed_obj.italic?'':'#000'}"></el-button> -->
                                            <el-button type="text" icon="iconfont icon-ht_textstyle_delete" @click="changeText('s')" title="中划线" :style="{color:choosed_obj.slide?'':'#000'}"></el-button>
                                            <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_delete1" @click="changeText('u')" title="下划线" :style="{color:choosed_obj.under?'':'#000'}"></el-button> -->
                                        </el-form-item>
                                    </div>
                                    <!-- 图片设置项 -->
                                    <div v-if="choosed_obj.type=='other_img'">
                                        <el-form-item label="图片设置" prop="">
                                            <div class="upload-box" @click="openUpload('src',2)" v-if="!choosed_obj.src_url">
                                                <i class="el-icon-plus" style="font-size:32px"></i>
                                            </div>
                                            <div @click="openUpload('src',2)" class="upload-boxed" v-if="choosed_obj.src_url" style="height:150px">
                                                <img :src="choosed_obj.src_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                                <i class="el-icon-close" @click.stop="clearImg('src',2)" title="点击清除图片"></i>
                                                <div class="upload-boxed-text">点击重新上传</div>
                                            </div>
                                        </el-form-item>
                                    </div>
                                    <!-- 会员价设置项 -->
                                    <div v-if="choosed_obj.type=='deposit'">
                                        <el-form-item label="定金文字颜色" prop="banner1">
                                            <el-color-picker v-model="choosed_obj.color" style="display:inline-block"></el-color-picker>
                                        </el-form-item>
                                        <el-form-item label="定金文字大小" prop="banner1">
                                            <el-input v-model="choosed_obj.size" style="width:200px">
                                                <template slot="append">PX</template>
                                            </el-input>
                                            <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_blod" @click="changeText('b')" title="加粗" :style="{color:choosed_obj.bold?'':'#000'}"></el-button> -->
                                            <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_italic" @click="changeText('i')" title="斜体" :style="{color:choosed_obj.italic?'':'#000'}"></el-button> -->
                                            <el-button type="text" icon="iconfont icon-ht_textstyle_delete" @click="changeText('s')" title="中划线" :style="{color:choosed_obj.slide?'':'#000'}"></el-button>
                                            <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_delete1" @click="changeText('u')" title="下划线" :style="{color:choosed_obj.under?'':'#000'}"></el-button> -->
                                        </el-form-item>
                                    </div>
                                    <!-- 现价设置项 -->
                                    <div v-if="choosed_obj.type=='price'">
                                        <el-form-item label="现价文字颜色" prop="">
                                            <el-color-picker v-model="choosed_obj.color" style="display:inline-block"></el-color-picker>
                                        </el-form-item>
                                        <el-form-item label="现价文字大小" prop="">
                                            <el-input v-model="choosed_obj.size" style="width:200px">
                                                <template slot="append">PX</template>
                                            </el-input>
                                            <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_blod" @click="changeText('b')" title="加粗" :style="{color:choosed_obj.bold?'':'#000'}"></el-button> -->
                                            <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_italic" @click="changeText('i')" title="斜体" :style="{color:choosed_obj.italic?'':'#000'}"></el-button> -->
                                            <el-button type="text" icon="iconfont icon-ht_textstyle_delete" @click="changeText('s')" title="中划线" :style="{color:choosed_obj.slide?'':'#000'}"></el-button>
                                            <!-- <el-button type="text" icon="iconfont icon-ht_textstyle_delete1" @click="changeText('u')" title="下划线" :style="{color:choosed_obj.under?'':'#000'}"></el-button> -->
                                        </el-form-item>
                                    </div>
                                    <!-- 昵称、邀请码、会员ID设置项 -->
                                    <div v-if="choosed_obj.type=='nickname' || choosed_obj.type=='invite' || choosed_obj.type=='mid'">
                                        <el-form-item label="文字颜色" prop="banner1">
                                            <el-color-picker v-model="choosed_obj.color" style="display:inline-block"></el-color-picker>
                                        </el-form-item>
                                        <el-form-item label="文字大小" prop="banner1">
                                            <el-input v-model="choosed_obj.size" style="width:200px">
                                                <template slot="append">PX</template>
                                            </el-input>
                                        </el-form-item>
                                    </div>

                                    <!-- 小程序二维码设置项 -->
                                    <div v-if="choosed_obj.type=='qr'&&poster_type==2">
                                        <el-form-item label="小程序二维码链接跳转" prop="">
                                            <el-input v-model="choosed_obj.mini_link" style="width:300px;"></el-input>
                                            <el-button   @click="showLink('mini','mini_link',2)">选择链接</el-button>
                                            <div class="tip">默认跳转小程序首页</div>
                                        </el-form-item>
                                    </div>
                                    <!-- H5二维码设置项 -->
                                    <div v-if="choosed_obj.type=='qr'&&poster_type==5">
                                        <el-form-item label="二维码链接跳转" prop="">
                                            <el-input v-model="choosed_obj.h5_link" style="width:300px;"></el-input>
                                            <el-button   @click="showLink('link','h5_link',5)">选择链接</el-button>
                                            <div class="tip">默认跳转商城首页</div>
                                        </el-form-item>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </el-form>
            <!-- 分页 -->
            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="submitForm('form')">提交</el-button>
                    <el-button @click="goBack">返回</el-button>
                </div>
            </div>
            <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
            <pop :show="show" @replace="changeLink" @add="parHref"></pop>
            <program :pro="pro" @replacepro="changeprogram" @addpro="parpro"></program>
        </div>
    </div>
    @include('public.admin.uploadImg')
    @include('public.admin.vueDragResize')
    @include('public.admin.pop')
    @include('public.admin.program')

    <script>
        const CktUrl = "{!!  $ckt_url !!}"; //* 创客贴url
        const IsDecorate = "{!!  $is_decorate !!}";
    </script>

    <script>
        const qr_url = `{!! resource_get('plugins/new-poster/assets/img/qr.png') !!}`;
        const head_url = `{!! resource_get('plugins/new-poster/assets/img/head.jpg') !!}`;
        const thumb_url = `{!! resource_get('plugins/new-poster/assets/img/img.jpg') !!}`;
        const app_qr_url = `{!! resource_get('plugins/new-poster/assets/img/qr_app_share.jpg') !!}`;
        const qr_shop = `{!! resource_get('plugins/new-poster/assets/img/qr_shop.jpg') !!}`;
        const logo_url = `{!! resource_get('plugins/new-poster/assets/img/logo.png') !!}`;
        const goods_url = `{!! resource_get('plugins/new-poster/assets/img/goods.png') !!}`;
        let data = {!! json_encode($data)?:'[]' !!};
        let poster = {!! json_encode($poster)?:'{}' !!};
        let shop_credit1 = {!! json_encode($shop_credit1)?:'{}' !!};
        let id = 0;
        let supplement = {};
        let background_type = 1;
        if(data==null) {
            data = [];
        }
        if(poster==null) {
            poster = {};
        }
        else{
            supplement = poster.supplement;
            id = poster.id;
            background_type = poster.background?1:0;
        }
        if(shop_credit1==null) {
            shop_credit1 = "";
        }
        console.log(data);
        console.log(poster);
        console.log(shop_credit1);
        console.log(id);
        console.log(background_type);
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    id:id,
                    poster_type:1,
                    background_type:background_type,
                    label_word:"",
                    label_show:false,
                    history_show:false,
                    label_list:[],
                    label_total:0,
                    label_per_page:0,
                    label_current_page:0,

                    show:false,//是否开启公众号弹窗
                    pro:false ,//是否开启小程序弹窗
                    chooseLink:'',
                    chooseMiniLink:'',
                    link_type:1,

                    coupon_word:"",
                    coupon_show:false,
                    coupon_list:[],
                    coupon_total:0,
                    coupon_per_page:0,
                    coupon_current_page:0,

                    coupon_type:0,

                    rects:[],
                    data:data,
                    zIndex:0,//全局层次
                    choosed_obj:{},
                    choosed_index:-1,
                    qr_url :qr_url,
                    head_url :head_url,
                    thumb_url:thumb_url,
                    app_qr_url:app_qr_url,
                    logo_url:logo_url,
                    qr_shop:qr_shop,
                    goods_url:goods_url,
                    listWidth:"",
                    listHeight:"",
                    color1:'1',
                    order_type:1,

                    link_show:false,
                    link_ref : "",
                    link_type : "",
                    link_form:{

                    },

                    form:{
                        // poster
                        title:poster.title || "",
                        status:poster.status || 0,

                        background:poster.background || "",
                        background_url:poster.background_url || "",
                        color:poster.color || "",

                    },

                    coupon_word1:"",
                    coupon_word2:"",

                    uploadShow:false,
                    chooseImgName:'',
                    img_type:"",
                    submit_url:'',
                    showVisible:false,

                    loading: false,
                    rules:{
                        name:{ required: true, message: '请输入'}
                    },
                    isDecorate:IsDecorate,
                }
            },
            created() {

            },
            mounted() {
                if(this.id) {
                    this.submit_url = '{!! yzWebFullUrl('plugin.new-poster.admin.poster.edit-deposit-ladder') !!}'
                }
                else {
                    this.submit_url = '{!! yzWebFullUrl('plugin.new-poster.admin.poster.add-deposit-ladder') !!}'
                }
                this.poster_type = this.getParam('poster_type');
                console.log(this.poster_type)
                this.setPosterView(this.data);

            },
            methods: {
                setPosterView(data) {
                    data.forEach((item,index) => {
                        let width = parseInt(item.width);
                        let height = parseInt(item.height);
                        let top = parseInt(item.top);
                        let left =parseInt(item.left);
                        if(item.type=='logo') {
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,src:item.src,src_url:item.src_url,logo_type:item.logo_type,width:width,height:width,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:true,class:""}
                            )
                        }
                        else if(item.type=='img') {
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,width:width,height:width,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                            )
                        }
                        else if(item.type=='title') {
                            let size = Number(item.size.split('p')[0]);
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                            )
                        }

                        else if(item.type=="other_img") {
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,src:item.src,src_url:item.src_url,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                            )
                        }
                        else if(item.type=="member_price") {
                            let size = Number(item.size.split('p')[0]);
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                            )
                        }
                        else if(item.type=="market_price") {
                            let size = Number(item.size.split('p')[0]);
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                            )
                        }
                        else if(item.type=="deposit") {
                            let size = Number(item.size.split('p')[0]);
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                            )
                        }
                        else if(item.type=="price") {
                            let size = Number(item.size.split('p')[0]);
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                            )
                        }
                        else if(item.type=="qr"){
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:true,class:""}
                            )
                        }
                        else if(item.type=="nickname") {
                            let size = Number(item.size.split('p')[0]);
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                            )
                        }
                        else if(item.type=="invite") {
                            let size = parseInt(item.size);
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                            )
                        }
                        else if(item.type=="mid") {
                            let size = Number(item.size.split('p')[0]);
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                            )
                        }
                        else if(item.type=="head") {
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:true,class:""}
                            )
                        }

                        this.zIndex++;
                    })
                },


                submitForm(formName) {
                    console.log(this.form)
                    console.log(this.rects)
                    let that = this;
                    let json = {
                        poster:{
                            poster_type:this.poster_type,
                            title:this.form.title,
                            status:this.form.status,
                            background:this.form.background,
                            background_url:this.form.background_url,
                            color:this.form.color,
                        },
                        poster_supplement:{

                        },
                        data:[],
                    };
                    // 背景类型
                    if(this.background_type==1) {
                        json.poster.color = "";
                    }
                    else {
                        json.poster.background = "";
                        json.poster.background_url = "";
                    }
                    this.rects.forEach((item,index) => {
                        if(item.type=="logo") {
                            json.data.push({src:item.src,src_url:item.src_url,logo_type:item.logo_type,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,})
                        }
                        if(item.type=="img") {
                            json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                        }
                        if(item.type=="title") {
                            json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                        }
                        if(item.type=="other_img") {
                            json.data.push({src:item.src,src_url:item.src_url,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,})
                        }
                        if(item.type=="member_price") {
                            json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                        }
                        if(item.type=="deposit") {
                            json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                        }
                        if(item.type=="market_price") {
                            json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                        }
                        if(item.type=="price") {
                            json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                        }
                        if(item.type=="qr"){
                            json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                        }
                        if(item.type=="nickname") {
                            json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                        }
                        if(item.type=="invite") {
                            json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                        }
                        if(item.type=="mid") {
                            json.data.push({color:item.color,size:item.size+'px',bold:item.bold,italic:item.italic,slide:item.slide,under:item.under,width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                        }
                        if(item.type=="head") {
                            json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                        }

                    });
                    let json1 = {
                        form_data : json,
                    }
                    if(this.id) {
                        json1.id = this.id
                    }
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                            this.$http.post(this.submit_url, json1).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    this.goBack();
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                            },response => {
                                loading.close();
                            });
                        }
                        else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },

                goBack() {
                    history.go(-1)
                },


                openUpload(str,img_type) {
                    this.chooseImgName = str;
                    this.uploadShow = true;
                    this.img_type = img_type;
                },
                changeProp(val) {
                    if(val == true) {
                        this.uploadShow = false;
                    }
                    else {
                        this.uploadShow = true;
                    }
                },
                sureImg(name,image,image_url) {
                    if(this.img_type) {
                        this.rects[this.choosed_index][name] = image;
                        this.rects[this.choosed_index][name+'_url'] = image_url;
                        this.choosed_obj[name] = image;
                        this.choosed_obj[name+'_url'] = image_url;
                        this.$forceUpdate();

                    }
                    else {
                        this.form[name] = image;
                        this.form[name+'_url'] = image_url;
                    }
                    console.log(this.rects)
                },
                clearImg(str,type) {

                    if(type) {
                        this.rects[this.choosed_index][str] = "";
                        this.rects[this.choosed_index][str+'_url'] = "";
                        this.choosed_obj[str] = "";
                        this.choosed_obj[str+'_url'] = "";
                    }
                    else {
                        this.form[str] = "";
                        this.form[str+'_url'] = "";
                    }
                    this.$forceUpdate();
                },
                openCoupon(type) {
                    this.coupon_type = type;
                    this.coupon_show = true;
                },
                searchCoupon() {

                    this.$http.post('{!! yzWebFullUrl('plugin.new-poster.admin.poster.getCouponByWord') !!}',{coupon_kwd:this.coupon_word}).then(response => {
                        if (response.data.result) {
                            this.coupon_list = response.data.data.list.data;
                            this.coupon_total = response.data.data.list.total;
                            this.coupon_per_page = response.data.data.list.per_page;
                            this.coupon_current_page = response.data.data.list.current_page;
                        } else {
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                    },response => {
                    });
                },
                chooseCoupon(row) {
                    if(this.coupon_type==1) {
                        this.form.recommender_coupon_id = row.id;
                        this.form.recommender_coupon_name = row.name;
                        this.coupon_word1 = `【ID:】`+this.form.recommender_coupon_id+``+this.form.recommender_coupon_name;
                    }
                    else if(this.coupon_type==2) {
                        this.form.subscriber_coupon_id = row.id;
                        this.form.subscriber_coupon_name = row.name;
                        this.coupon_word2 = `【ID:】`+this.form.subscriber_coupon_id+``+this.form.subscriber_coupon_name;
                    }
                    this.coupon_show = false;
                    console.log(this.form)
                },
                clearCoupon(type) {
                    if(type==1) {
                        this.form.recommender_coupon_id = "";
                        this.form.recommender_coupon_name = "";
                        this.coupon_word1 = "";
                    }
                    else if(type==2) {
                        this.form.subscriber_coupon_id = "";
                        this.form.subscriber_coupon_name = "";
                        this.coupon_word2 = "";
                    }
                },
                addEle(type) {
                    let is_true = false;
                    let choose_index = -1;
                    this.rects.some((item,index) => {
                        if(item.type == type) {
                            is_true =  true;
                            choose_index = index
                            return true
                        }
                    })
                    if(is_true) {
                        this.rects[choose_index].active = true;
                        return false;
                    }
                    if(type=="logo") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,src:"",src_url:"",logo_type:0,width:100,height:100,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="img") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,width:100,height:100,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="title") {
                        this.rects.push(

                            {zIndex:this.zIndex+1,type:type,color:"#000",size:14,bold:0,italic:0,slide:0,under:0,width:200,height:40,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="other_img") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,src:thumb_url,src_url:thumb_url,width:100,height:100,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="member_price") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,color:"#000",size:14,bold:0,italic:0,slide:0,under:0,width:200,height:40,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="market_price") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,color:"#000",size:14,bold:0,italic:0,slide:0,under:0,width:200,height:40,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="deposit") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,color:"#000",size:14,bold:0,italic:0,slide:0,under:0,width:200,height:40,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="price") {
                        this.rects.push(

                            {zIndex:this.zIndex+1,type:type,color:"#000",size:14,bold:0,italic:0,slide:0,under:0,width:200,height:40,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="qr"){
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,width:100,height:100,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:true,class:""}
                        )
                    }
                    if(type=="nickname") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,color:"#f00",size:20,width:130,height:22,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="invite") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,color:"#f00",size:20,width:107,height:22,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="mid") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,color:"#f00",size:20,width:54,height:22,left:0,top:0,axis:"both",active:false,minw:40,minh:20,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="head") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,width:100,height:100,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:true,class:""}
                        )
                    }

                    this.zIndex++;
                    console.log(this.rects)
                },
                delEle() {
                    console.log(this.rects);
                    let list = JSON.parse(JSON.stringify(this.rects));
                    list.splice(this.choosed_index,1);
                    console.log(list);
                    this.rects = [];
                    // 样式处理
                    setTimeout(() => {
                        list.forEach((item,index) => {
                            this.rects.push(item)
                        })
                    },10)
                    this.choosed_obj = {};
                    console.log(this.rects);
                    this.choosed_index = -1;

                },
                activateEv(index) {
                    console.log(index);
                    if(this.choosed_index!=-1) {
                        this.rects[this.choosed_index].active = false;
                    }
                    this.choosed_obj = this.rects[index];
                    this.choosed_index = index;
                    this.rects[index].active = true;
                },

                deactivateEv(index) {
                    console.log(index)
                    // this.rects[index].active = false;
                    // this.choosed_index!=-1;
                },
                changePosition(newRect, index) {
                    this.rects[index].top = newRect.top;
                    this.rects[index].left = newRect.left;
                    this.rects[index].width = newRect.width;
                    this.rects[index].height = newRect.height;

                },
                changeSize(newRect, index) {
                    this.rects[index].top = newRect.top;
                    this.rects[index].left = newRect.left;
                    this.rects[index].width = newRect.width;
                    this.rects[index].height = newRect.height;

                },

                showLink(type,name,link_type) {
                    if(type=="link") {
                        this.chooseLink = name;
                        this.show = true;
                    }
                    else {
                        this.chooseMiniLink = name;
                        this.pro = true;
                    }
                    this.link_type = link_type;
                },
                changeProp(val) {
                    if(val == true) {
                        this.uploadShow = false;
                    }
                    else {
                        this.uploadShow = true;
                    }
                },
                //弹窗显示与隐藏的控制
                changeLink(item){
                    this.show=item;
                },
                //当前链接的增加
                parHref(child,confirm){
                    this.show=confirm;
                    // this.form.link=child;
                    if(this.link_type!=5) {
                        this.form[this.chooseLink] = child;
                    }
                    else {
                        this.rects[this.choosed_index]['h5_link'] = child;
                        this.$forceUpdate();
                    }
                },
                changeprogram(item){
                    this.pro=item;
                },
                parpro(child,confirm){
                    this.pro=confirm;
                    // this.form.prolink=child;
                    if(this.link_type!=2) {
                        this.form[this.chooseMiniLink] = child;
                    }
                    else {
                        this.rects[this.choosed_index]['mini_link'] = child;
                        this.$forceUpdate();
                    }

                },
                changeText(type) {
                    if(type=='b') {
                        this.choosed_obj.bold = this.choosed_obj.bold==1?0:1;
                        this.rects[this.choosed_index].bold = this.choosed_obj.bold;
                    }
                    if(type=='i') {
                        this.choosed_obj.italic = this.choosed_obj.italic==1?0:1;
                        this.rects[this.choosed_index].italic = this.choosed_obj.italic;
                    }
                    if(type=='s') {
                        this.choosed_obj.slide = this.choosed_obj.slide==1?0:1;
                        this.rects[this.choosed_index].slide = this.choosed_obj.slide;
                        if(this.rects[this.choosed_index].slide) {
                            this.rects[this.choosed_index].under = 0;
                        }

                    }
                    if(type=='u') {
                        this.choosed_obj.under = this.choosed_obj.under==1?0:1;
                        this.rects[this.choosed_index].under = this.choosed_obj.under;
                        if(this.rects[this.choosed_index].under) {
                            this.rects[this.choosed_index].slide = 0;
                        }
                    }

                },

                getParam(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]);
                    return null;
                },
                jumpUrl() {
                    window.open(CktUrl);
                },
            },
        })

    </script>
@endsection