hemall.terabimsoft.com.cn/plugins/new-poster/views/admin/edit.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-button label="2" v-if="poster_type==1">权限设置</el-radio-button>
                        <el-radio-button label="3" v-if="poster_type==1">推送设置</el-radio-button>
                        <el-radio-button label="4" v-if="poster_type==1">奖励设置</el-radio-button>
                        <el-radio-button label="5" v-if="poster_type==1">通知设置</el-radio-button>
                        <el-radio-button label="6" v-if="poster_type==1">推广设置</el-radio-button>
                        <el-radio-button label="7" v-if="poster_type==1||poster_type==2||poster_type==5||poster_type==7||poster_type==16">海报中心</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="keyword" v-if="poster_type==1">
                                <el-input v-model="form.keyword" style="width:70%;" ref="keyword"></el-input>
                                <div class="tip">接入微信公众号有效，公众号触发生成海报的关键词</div>
                            </el-form-item>
                            <el-form-item label="是否启用" prop="status" v-if="poster_type == 1">
                                <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
                            </el-form-item>
                            <el-form-item label="会员中心显示" prop="center_show" v-if="poster_type!=30">
                                <el-checkbox-group v-model="form.center_show">
                                    <el-checkbox label="1" @change="changeCenterShow()">微信公众号</el-checkbox>
                                    <el-checkbox label="5" @change="changeCenterShow()">H5</el-checkbox>
                                    <el-checkbox label="2" @change="changeCenterShow()">微信小程序</el-checkbox>
                                    <el-checkbox label="7" @change="changeCenterShow()">商城APP</el-checkbox>
                                    <el-checkbox label="0" @change="changeCenterShow('other')">不显示</el-checkbox>
                                </el-checkbox-group>

                                <div class="tip">开启状态：会员中心推广二维码显示该海报图片</div>
                            </el-form-item>

                            <!-- <el-form-item label="会员中心显示" prop="center_show">
                                <el-switch v-model="form.center_show" :active-value="1" :inactive-value="0"></el-switch>
                                <div class="tip">开启状态：会员中心推广二维码显示该海报图片</div>
                            </el-form-item> -->
                            <el-form-item label="APP分享页面显示" prop="app_share_show" v-if="poster_type == 7 || poster_type == 16">
                                <el-switch v-model="form.app_share_show" :active-value="1" :inactive-value="0"></el-switch>
                                <div class="tip">开启状态：APP分享页面显示该海报图片</div>
                            </el-form-item>
                            <el-form-item label="是否前端生成" prop="is_ago" v-if="poster_type!=30">
                                <el-switch v-model="form.is_ago" :active-value="1" :inactive-value="0"></el-switch>
                            </el-form-item>
                            <el-form-item label="标签" prop="">
                                <!-- 回显选择标签-->
                                <div v-if="form.label">
                                    <el-tag closable :disable-transitions="false" @close="handleClose(tag)">
                                        [[form.label]]
                                    </el-tag>
                                </div>
                                <el-popover placement="top" width="200" v-model="label_show">
                                    <el-input v-model="label_word" size="mini" placeholder="请输入标签名"></el-input>
                                    <div style="text-align: right; margin: 10px 0">
                                        <el-button size="mini" type="text" @click="label_show = false">取消</el-button>
                                        <el-button type="primary" size="mini" @click="sureAddLabel">确定</el-button>
                                    </div>
                                    <el-button plain type="primary" slot="reference" icon="el-icon-plus" size="small">添加标签</el-button>
                                </el-popover>
                                <el-popover placement="right" width="400" v-model="history_show">
                                    <div>
                                        <el-input v-model="label_word" size="mini" placeholder="请输入标签名" style="width:70%"></el-input>
                                        <el-button type="primary" size="mini" @click="getLabel()">搜索</el-button>
                                    </div>
                                    <div class="label-history" style="min-height:200px;overflow:auto;margin:10px 0;">
                                        <!-- 循环标签 -->
                                        <div style="display:flex;flex-wrap:wrap">
                                            <div v-for="(item,index) in label_list" :key="index" @click="chooseLabel(item)" :style="{color:item.name==form.label?'#29BA9C':''}" style="margin:5px 10px;font-weight: 400;cursor: pointer;">[[item.name]]</div>
                                        </div>
                                    </div>
                                    <el-row>
                                        <el-col align="right">
                                            <el-pagination layout="prev, pager, next,jumper" @current-change="getLabel" :total="label_total"
                                                :page-size="label_per_page" :current-page="label_current_page" background
                                                ></el-pagination>
                                        </el-col>
                                    </el-row>
                                    <el-button type="text" slot="reference" @click="getLabel()" size="small" style="color:#ff9b19;margin-left:20px">历史标签</el-button>
                                </el-popover>

                            </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;">
                                    <img v-if="form.background_url" :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;"
                                    >
                                        <!-- 头像 -->
                                        <img v-if="rect.type=='head'" :src="head_url" alt="" style="width:100%;height:100%;">
                                        <!-- 关注二维码  -->
                                        <img v-if="poster_type==1&&rect.type=='qr'" :src="qr_url" alt="" style="width:100%;height:100%;">
                                        <!-- 关注二维码  -->
                                        <!-- 商城二维码  -->
                                        <img v-if="poster_type==1&&rect.type=='shopqr'" :src="qr_shop" alt="" style="width:100%;height:100%;">
                                        <!-- 商城二维码  -->
                                        <!-- 小程序二维码  -->
                                        <img v-if="poster_type==2&&rect.type=='qr'" :src="qr_url" alt="" style="width:100%;height:100%;">
                                        <!-- 小程序二维码  -->
                                        <!-- H5二维码  -->
                                        <img v-if="poster_type==5&&rect.type=='qr'" :src="qr_shop" alt="" style="width:100%;height:100%;">
                                        <!-- H5二维码  -->
                                        <!-- APP二维码  -->
                                        <img v-if="(poster_type==7 || poster_type==16) &&rect.type=='qr'" :src="app_qr_url" alt="" style="width:100%;height:100%;">
                                        <!-- APP二维码  -->
                                        <img v-if="rect.type=='img'" :src="rect.src_url" alt="" style="width:100%;height:100%;">
                                        <!-- 企业成员二维码  -->
                                        <img v-if="poster_type==30&&rect.type=='customer_qr'" :src="qr_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>
                                        <div v-if="rect.type=='customer_activity'"
                                            :style="{color:rect.color,fontSize:rect.size+'px'}"
                                            style="width:100%;height:100%;"
                                        >
                                        活动名称
                                        </div>
                                    </drag-resize>

                                </div>
                                <div class="edit-poster" style="flex:1;margin-left:10%">
                                    <!-- <div>背景图片</div> -->
                                    <el-form-item label="背景图片" prop="background">
                                        <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="">
                                        <el-button size="small" @click="addEle('head')">头像</el-button>
                                        <el-button size="small" @click="addEle('nickname')">昵称</el-button>
                                        <el-button size="small" @click="addEle('qr')" v-if="poster_type==1">关注二维码</el-button>
                                        <el-button size="small" @click="addEle('shopqr')" v-if="poster_type==1">商城二维码</el-button>
                                        <el-button size="small" @click="addEle('qr')" v-if="poster_type==2">小程序二维码</el-button>
                                        <el-button size="small" @click="addEle('qr')" v-if="poster_type==5">商城二维码</el-button>
                                        <el-button size="small" @click="addEle('qr')" v-if="poster_type==7 || poster_type==16">APP二维码</el-button>
                                        <el-button size="small" @click="addEle('img')">图片</el-button>
                                        <el-button size="small" @click="addEle('invite')">邀请码</el-button>
                                        <el-button size="small" @click="addEle('mid')">会员ID</el-button>
                                        <el-button size="small" @click="addEle('customer_activity')" v-if="poster_type==30">活动名称</el-button>
                                        <el-button size="small" @click="addEle('customer_qr')" v-if="poster_type==30">企业成员二维码</el-button>
                                        <el-button type="text" icon="iconfont icon-ht_operation_delete" @click="delEle" title="删除当前元素" style="color:#F56C6C"></el-button>
                                    </el-form-item>
                                    <!-- 昵称设置项、邀请码、会员ID -->
                                    <div v-if="choosed_obj.type=='nickname' || choosed_obj.type=='invite' || choosed_obj.type=='mid'">
                                        <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-form-item>
                                    </div>
                                    <!-- 图片设置项 -->
                                    <div v-if="choosed_obj.type=='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=='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 v-if="choosed_obj.type=='shopqr'&&poster_type==1">
                                        <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>
                            <el-form-item label="" prop="wait_reminder" v-if="poster_type==1">
                                <template slot="label">
                                    <div style="line-height:30px">用户生成海报时等待文字</div>
                                    <div style="line-height:30px">（微信公众号关键词回复）</div>
                                </template>
                                <el-input v-model="form.wait_reminder" rows="5" type="textarea" style="width:70%;" ref="wait_reminder" placeholder="默认：您的专属海报正在拼命生成中，请稍等片刻...">
                                </el-input>
                                    <div>
                                        <el-button size="mini" @click="addContent('nickname','wait_reminder')" ref="nickname">会员昵称</el-button>
                                        <el-button size="mini" @click="addLink('link','wait_reminder')">链接</el-button>
                                    </div>
                            </el-form-item>
                            <el-form-item label="" prop="disable_reminder" v-if="poster_type==1">
                                <template slot="label">
                                    <div style="line-height:30px">海报禁用时回复文字</div>
                                    <div style="line-height:30px">（微信公众号关键词回复）</div>
                                </template>
                                <el-input v-model="form.disable_reminder" rows="5" type="textarea" style="width:70%;" ref="disable_reminder" placeholder="默认：该海报已经失效，请尝试其他海报">
                                </el-input>
                                    <div>
                                        <el-button size="mini" @click="addContent('nickname','disable_reminder')" ref="nickname">会员昵称</el-button>
                                        <el-button size="mini" @click="addLink('link','disable_reminder')">链接</el-button>
                                    </div>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <!-- 权限设置 -->
                <div v-show="order_type==2">
                    <div class="vue-main">
                        <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="is_open">
                                <el-radio v-model="form.is_open" :label="0">不允许</el-radio>
                                <el-radio v-model="form.is_open" :label="1">允许</el-radio>
                                <div class="tip">是否允许没有发展下线资格的用户生成自己的海报</div>
                                <div class="tip"><span style="color:#f00">*</span>由于每个公众号的永久二维码数量有限，建议不要开放权限</div>
                            </el-form-item>
                            <el-form-item label="未开放权限时的提示" prop="not_open_reminder">
                                <el-input v-model="form.not_open_reminder" style="width:70%;" ref="not_open_reminder" placeholder="默认：您还没有发展下线的资格，努力去拥有资格，获得您的专属海报吧！"></el-input>
                                    <div>
                                        <el-button size="mini" @click="addContent('nickname','not_open_reminder','input')" ref="nickname">会员昵称</el-button>
                                    </div>
                            </el-form-item>
                            <el-form-item label="未开放权限时的说明链接" prop="not_open_reminder_url">
                                <el-input v-model="form.not_open_reminder_url" style="width:70%;"></el-input>
                            </el-form-item>
                        </div>
                    </div>

                </div>
                <!-- 推送设置 -->
                <div v-show="order_type==3" v-if="poster_type==1">
                    <div class="vue-main">
                        <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="response_status">
                                <el-switch v-model="form.response_status" :active-value="1" :inactive-value="0"></el-switch>
                                <div class="tip">提示：开启后，如果关注的会员有权限或者权限设置开放权限设置为允许，当用户扫海报关注公众号状态下则自动推送该会员专属海报！</div>
                            </el-form-item>
                            <hr>
                            <el-form-item label="推送类型" prop="response_type">
                                <el-radio v-model="form.response_type" :label="0">图文推送</el-radio>
                                <el-radio v-model="form.response_type" :label="1">文本推送</el-radio>
                            </el-form-item>
                            <!-- 图文 -->
                            <div v-if="!form.response_type">
                                <el-form-item label="推送标题" prop="response_title">
                                    <el-input v-model="form.response_title" style="width:70%;" placeholder="如果这里设置为空，则用户扫码推荐者的海报二维码后，系统不推荐内容"></el-input>
                                </el-form-item>
                                <el-form-item label="推送封面" prop="response_thumb">
                                    <div class="upload-box" @click="openUpload('response_thumb')" v-if="!form.response_thumb_url">
                                        <i class="el-icon-plus" style="font-size:32px"></i>
                                    </div>
                                    <div @click="openUpload('response_thumb')" class="upload-boxed" v-if="form.response_thumb_url" style="height:150px">
                                        <img :src="form.response_thumb_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                        <i class="el-icon-close" @click.stop="clearImg('response_thumb')" title="点击清除图片"></i>
                                        <div class="upload-boxed-text">点击重新上传</div>
                                    </div>
                                </el-form-item>
                                <el-form-item label="推送描述" prop="response_desc">
                                    <el-input type="textarea" rows="5" v-model="form.response_desc" style="width:70%;"></el-input>
                                </el-form-item>
                                <el-form-item label="推送链接" prop="response_url">
                                    <el-input v-model="form.response_url" style="width:70%;" placeholder="默认为商城首页链接"></el-input>
                                </el-form-item>
                            </div>
                            <!-- 文本 -->
                            <div v-if="form.response_type">
                                <el-form-item label="推送消息" prop="response_text">
                                    <el-input type="textarea" rows="5" v-model="form.response_text" ref="response_text" style="width:70%;"></el-input>
                                    <div>
                                        <el-button size="mini" @click="addContent('nickname','response_text')">会员昵称</el-button>
                                        <el-button size="mini" @click="addLink('link','response_text')">链接</el-button>
                                        <el-button size="mini" @click="addContent('shopname','response_text')">商城名称</el-button>
                                        <el-button size="mini" @click="addContent('credit','response_text')">积分数量</el-button>
                                        <el-button size="mini" @click="addContent('bonus','response_text')">现金金额</el-button>
                                        <el-button size="mini" @click="addContent('coupon_name','response_text')">优惠券名称</el-button>
                                        <el-button size="mini" @click="addContent('coupon_num','response_text')">优惠券张数</el-button>
                                        <el-popover placement="right" width="300">
                                            <div style="margin:10px 0;line-height:24px;font-weight: 500;">
                                                <div>你好，[用户昵称]</div>
                                                <div>感谢您关注[商城名称]</div>
                                                <div>分享下方海报，邀请好友关注：</div>
                                                <div>[积分数量]个[[shop_credit1]]，[现金金额]元，[优惠券名称][优惠券张数]张的奖励！</div>
                                                <div>快去分享你的专属海报↓↓↓</div>

                                            </div>
                                            <el-button size="mini" type="text" slot="reference"  icon="el-icon-info">查看示例</el-button>
                                        </el-popover>
                                    </div>
                                </el-form-item>
                            </div>

                        </div>
                    </div>

                </div>
                <!-- 奖励设置 -->
                <div v-show="order_type==4">
                    <div class="vue-main">
                        <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="">
                            </el-form-item>
                            <el-form-item :label="shop_credit1" prop="recommender_credit">
                                <el-input v-model="form.recommender_credit" style="width:70%;"></el-input>
                            </el-form-item>
                            <el-form-item label="现金" prop="recommender_bonus">
                                <el-input v-model="form.recommender_bonus" style="width:70%;"></el-input>
                            </el-form-item>
                            <el-form-item label="优惠券" prop="">
                                <el-input :value="coupon_word1" style="width:calc(70% - 180px)" disabled></el-input>
                                <!-- recommender_coupon_id+recommender_coupon_name -->
                                <el-button type="primary" @click="openCoupon('1')">选择优惠券</el-button>
                                <el-button type="text" style="color:#F56C6C" @click="clearCoupon('1')">清除选择</el-button>
                            </el-form-item>
                            <el-form-item label="优惠券张数" prop="recommender_coupon_num">
                                <el-input v-model="form.recommender_coupon_num" style="width:70%;"></el-input>
                            </el-form-item>

                            <el-form-item label="关注者奖励" prop="">
                            </el-form-item>
                            <el-form-item :label="shop_credit1" prop="subscriber_credit">
                                <el-input v-model="form.subscriber_credit" style="width:70%;"></el-input>
                            </el-form-item>
                            <el-form-item label="现金" prop="subscriber_bonus">
                                <el-input v-model="form.subscriber_bonus" style="width:70%;"></el-input>
                            </el-form-item>
                            <!-- subscriber_coupon_id+subscriber_coupon_name -->
                            <el-form-item label="优惠券" prop="subscriber_coupon_name">
                                <el-input :value="coupon_word2" style="width:calc(70% - 180px)" disabled></el-input>
                                <el-button type="primary" @click="openCoupon('2')">选择优惠券</el-button>
                                <el-button type="text" style="color:#F56C6C" @click="clearCoupon('2')">清除选择</el-button>
                            </el-form-item>
                            <el-form-item label="优惠券张数" prop="subscriber_coupon_num">
                                <el-input v-model="form.subscriber_coupon_num" style="width:70%;"></el-input>
                            </el-form-item>

                            <el-form-item label="奖励现金方式" prop="bonus_method">
                                <el-radio v-model="form.bonus_method" :label="1">余额</el-radio>
                                <el-radio v-model="form.bonus_method" :label="2">微信钱包</el-radio>
                                <div class="tip">如果奖励现金，可以选择打款到用户余额或者是微信钱包（微信钱包需要开通微信支付,并在后台上传证书）</div>
                            </el-form-item>
                        </div>
                    </div>

                </div>
                <!-- 奖励设置 -->
                <div v-show="order_type==5" v-if="poster_type==1">
                    <div class="vue-main">
                        <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="recommender_award_title">--}}
                                {{--<el-input v-model="form.recommender_award_title" ref="recommender_award_title" style="width:70%;" placeholder="默认“推荐关注奖励通知”"></el-input>--}}
                            {{--</el-form-item>--}}
                            <el-form-item label="推荐者的奖励通知-内容" prop="recommender_award_notice">
                                <el-input type="textarea" rows="5" v-model="form.recommender_award_notice" ref="recommender_award_notice" style="width:70%;"></el-input>
                                <div>
                                    <el-button size="mini" @click="addContent('s_nickname','recommender_award_notice')">扫码者昵称</el-button>
                                    <el-button size="mini" @click="addContent('credit','recommender_award_notice')">积分数量</el-button>
                                    <el-button size="mini" @click="addContent('bonus','recommender_award_notice')">现金金额</el-button>
                                    <el-button size="mini" @click="addContent('coupon_name','recommender_award_notice')">优惠券名称</el-button>
                                    <el-button size="mini" @click="addContent('coupon_num','recommender_award_notice')">优惠券张数</el-button>
                                    <el-popover placement="right" width="300">
                                        <div style="margin:10px 0;line-height:24px;font-weight: 500;">
                                            <div>[扫码者昵称]通过您的二维码关注公众号，恭喜您可获得[积分数量]个积分，[现金金额]元，[优惠券名称][优惠券张数]张的奖励！</div>
                                            <div>继续加油哟！</div>
                                        </div>
                                        <el-button size="mini" type="text" slot="reference"  icon="el-icon-info">查看示例</el-button>
                                    </el-popover>
                                </div>
                            </el-form-item>

                            {{--<el-form-item label="关注者的奖励通知-标题" prop="subscriber_award_title">--}}
                                {{--<el-input v-model="form.subscriber_award_title" ref="subscriber_award_title" style="width:70%;" placeholder="默认“关注奖励通知”"></el-input>--}}
                            {{--</el-form-item>--}}
                            <el-form-item label="关注者的奖励通知-内容" prop="subscriber_award_notice">
                                <el-input type="textarea" rows="5" v-model="form.subscriber_award_notice" ref="subscriber_award_notice" style="width:70%;"></el-input>
                                <div>
                                    <el-button size="mini" @click="addContent('t_nickname','subscriber_award_notice')">推荐者昵称</el-button>
                                    <el-button size="mini" @click="addContent('credit','subscriber_award_notice')">积分数量</el-button>
                                    <el-button size="mini" @click="addContent('bonus','subscriber_award_notice')">现金金额</el-button>
                                    <el-button size="mini" @click="addContent('coupon_name','subscriber_award_notice')">优惠券名称</el-button>
                                    <el-button size="mini" @click="addContent('coupon_num','subscriber_award_notice')">优惠券张数</el-button>
                                    <el-popover placement="right" width="300">
                                        <div style="margin:10px 0;line-height:24px;font-weight: 500;">
                                            <div>恭喜您通过扫[推荐者昵称]的二维码关注公众号，可获得[积分数量]个积分，[现金金额]元，[优惠券名称][优惠券张数]张的奖励！</div>
                                            <div>分享可获得更多奖励哟！</div>
                                        </div>
                                        <el-button size="mini" type="text" slot="reference"  icon="el-icon-info">查看示例</el-button>
                                    </el-popover>
                                </div>
                            </el-form-item>

                        </div>
                    </div>

                </div>
                <!-- 分销设置 -->
                <div v-show="order_type==6" v-if="poster_type==1">
                    <div class="vue-main">
                        <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="auto_sub">
                                <el-radio v-model="form.auto_sub" :label="1">是</el-radio>
                                <el-radio v-model="form.auto_sub" :label="0">否</el-radio>
                                <div class="tip">如果扫码用户之前不存在分销关系，那么扫码关注后直接成为推荐人的下线</div>
                            </el-form-item>
                        </div>
                    </div>

                </div>
                <!-- 海报中心 -->
                <div v-show="order_type==7">
                    <div class="vue-main">
                        <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="是否在海报中心显示">
                                <el-switch v-model="form.is_show_center" :active-value="1" :inactive-value="0"></el-switch>
                            </el-form-item>
                            <el-form-item label="海报中心效果图显示">
                                <el-radio v-model="form.design_img_show" :label="0">背景图</el-radio>
                                <el-radio v-model="form.design_img_show" :label="1">自定义图片</el-radio>
                            </el-form-item>
                            <el-form-item v-if="form.design_img_show==1">
                                <div v-if="!form.design_img_url">
                                    <div class="upload-box" @click="openUpload('design_img')">
                                        <i class="el-icon-plus" style="font-size:32px"></i>
                                    </div>
                                    <div class="tip">建议尺寸：640*1008</div>
                                </div>
                                <div @click="openUpload('design_img')" class="upload-boxed" v-if="form.design_img_url" style="height:150px">
                                    <img :src="form.design_img_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                    <i class="el-icon-close" @click.stop="clearImg('design_img')" title="点击清除图片"></i>
                                    <div class="upload-boxed-text">点击重新上传</div>
                                    <div class="tip">建议尺寸：640*1008</div>
                                </div>
                            </el-form-item>
                        </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>
            <!-- 选择优惠券 -->
            <el-dialog :visible.sync="coupon_show" width="850px" center title="选择优惠券">
                <div>
                    <el-input v-model="coupon_word" style="width:70%"></el-input>
                    <el-button @click="searchCoupon" type="primary">搜索</el-button>
                </div>
                <el-table :data="coupon_list" style="width: 100%;height:500px;overflow:auto" id="goods-list">

                    <el-table-column label="ID" prop="id" align="center" width="150px"></el-table-column>
                    <el-table-column label="优惠券">
                        <template slot-scope="scope">
                            <div>
                                <div style="color:#333;font-weight:500">[[scope.row.name]]</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="选择" prop="id" align="center" width="150px">
                        <template slot-scope="scope">
                            <el-button size="small" @click="chooseCoupon(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col align="right">
                        <el-pagination layout="prev, pager, next,jumper" @current-change="searchCoupon" :total="coupon_total"
                            :page-size="coupon_per_page" :current-page="coupon_current_page" background
                            ></el-pagination>
                    </el-col>
                </el-row>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="coupon_show = false">取 消</el-button>
                </span>
            </el-dialog>
            <el-dialog :visible.sync="link_show" width="850px" center title="插入链接">
                <el-form ref="link_form" :model="link_form" label-width="15%">
                    <el-form-item label="链接标题" prop="title">
                        <el-input v-model="link_form.title" style="width:70%;" placeholder="请输入链接显示的文字"></el-input>
                    </el-form-item>
                    <el-form-item label="链接地址" prop="content">
                        <el-input v-model="link_form.content" style="width:70%;" placeholder="以https://开头"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="sureAddLink">确 定</el-button>
                    <el-button @click="link_show = false">取 消</el-button>
                </span>
            </el-dialog>
            <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>
            <introduce v-model="showIntroduce" v-show="showIntroduce"></introduce>
        </div>
    </div>
    @include('public.admin.uploadImg')
    @include('public.admin.vueDragResize')
    @include('public.admin.pop')
    @include('public.admin.program')
    @include('public.admin.new-poster-introduce')
    <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 invite = `{!! resource_get('plugins/new-poster/assets/img/qr_shop.jpg') !!}`;
        let data = {!! json_encode($data)?:'[]' !!};
        let poster = {!! json_encode($poster)?:'{}' !!};
        let shop_credit1 = {!! json_encode($shop_credit1)?:' ' !!};
        let id = 0;
        let supplement = {};
        if(data==null) {
            data = [];
        }
        if(poster==null) {
            poster = {};
        }
        else{
            if(poster.supplement && poster.supplement!=null) {
                supplement = poster.supplement;
            }
            id = poster.id;
        }
        if(shop_credit1==null) {
            shop_credit1 = "";
        }
        console.log(data);
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    showIntroduce:false,
                    id:id,
                    poster_type:1,
                    label_word:"",
                    label_show:false,
                    history_show:false,
                    label_list:[],
                    label_total:0,
                    label_per_page:0,
                    label_current_page:0,

                    shop_credit1:shop_credit1,//积分字样

                    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,
                    qr_shop:qr_shop,
                    invite:invite,
                    listWidth:"",
                    listHeight:"",
                    color1:'1',
                    order_type:1,

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

                    },

                    form:{
                        // poster
                        title:poster.title || "",
                        keyword:poster.keyword || "",
                        status:poster.status || 0,
                        center_show:poster.center_show&&poster.center_show.length>=0?poster.center_show:[],//会员中心显示
                        app_share_show:poster.app_share_show || 0,
                        is_ago:poster.is_ago || 0,
                        background:poster.background || "",
                        background_url:poster.background_url || "",
                        is_open:poster.is_open || 0,
                        response_status:poster.response_status || 0,//推送状态
                        response_type:poster.response_type || 0,
                        response_title:poster.response_title || "",//推送
                        response_thumb:poster.response_thumb || "",
                        response_thumb_url:poster.response_thumb_url || "",
                        response_text:poster.response_text || "",
                        label:(poster.label&&poster.label!=null)?poster.label.name:"",
                        label_id:poster.label_id || "",
                        response_desc:poster.response_desc || "",
                        response_url:poster.response_url || "",
                        auto_sub:poster.auto_sub == 0 ?0: 1,//扫码关注成为下线
                        // poster_supplement
                        wait_reminder:supplement.wait_reminder || "",
                        disable_reminder:supplement.disable_reminder || "",
                        not_open_reminder:supplement.not_open_reminder || "",
                        not_open_reminder_url:supplement.not_open_reminder_url || "",
                        recommender_credit:supplement.recommender_credit || "",//奖励
                        recommender_bonus:supplement.recommender_bonus || "",
                        recommender_coupon_id:supplement.recommender_coupon_id || "",
                        recommender_coupon_name:supplement.recommender_coupon_name || "",
                        recommender_coupon_num:supplement.recommender_coupon_num || "",
                        subscriber_credit:supplement.subscriber_credit || "",
                        subscriber_bonus:supplement.subscriber_bonus || "",
                        subscriber_coupon_id:supplement.subscriber_coupon_id || "",
                        subscriber_coupon_name:supplement.subscriber_coupon_name || "",
                        subscriber_coupon_num:supplement.subscriber_coupon_num || "",
                        bonus_method:supplement.bonus_method || 1,//奖励现金方式
                        recommender_award_title:supplement.recommender_award_title || "",// 通知
                        recommender_award_notice:supplement.recommender_award_notice || "",
                        subscriber_award_title:supplement.subscriber_award_title || "",
                        subscriber_award_notice:supplement.subscriber_award_notice || "",
                        is_show_center: poster.is_show_center==0?0: 1,
                        design_img_show: poster.design_img_show==1?1:0,
                        design_img: poster.design_img || '',
                        design_img_url: poster.design_img_url || '',
                    },

                    coupon_word1:"",
                    coupon_word2:"",

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

                    loading: false,
                    rules:{
                        keyword:{ required: true, message: '请输入关键字'}
                    },
                    isDecorate:IsDecorate,
                }
            },
            // watch: {
            //     formResponseStatus(val) {
            //         if(val == 1) {
            //             this.form.response_type = 1
            //         }
            //     },
            //     formResponseType(val) {
            //         if(val == 0 && this.form.response_status == 1) {
            //             this.form.response_type = 1;
            //         }
            //     }
            // },
            computed: {
                formResponseStatus() {
                    return this.form.response_status;
                },
                formResponseType() {
                    return this.form.response_type;
                }
            },
            created() {

            },
            mounted() {
                if(this.id) {
                    this.submit_url = '{!! yzWebFullUrl('plugin.new-poster.admin.poster.edit') !!}'
                    if(this.form.recommender_coupon_id) {
                        this.coupon_word1 = `【ID:】`+this.form.recommender_coupon_id+``+this.form.recommender_coupon_name;
                    }
                    if(this.form.subscriber_coupon_id) {
                        this.coupon_word2 = `【ID:】`+this.form.subscriber_coupon_id+``+this.form.subscriber_coupon_name;
                    }
                }
                else {
                    this.submit_url = '{!! yzWebFullUrl('plugin.new-poster.admin.poster.add') !!}'
                }
                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=='head') {
                            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:true,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,width:width,height:height,left:left,top:top,axis:"both",active:false,minw:100,minh:20,draggable:true,resizable:true,parentLim:false,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,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=="nickname") {
                            let size = Number(item.size.split('p')[0]);
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,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=="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=='qr') {
                            if(this.poster_type==1 || this.poster_type==7 || this.poster_type==16) {
                                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:true,class:""}
                                )
                            }
                            else if(this.poster_type==2) {
                                this.rects.push(
                                    {zIndex:this.zIndex+1,type:item.type,mini_link:item.mini_link,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(this.poster_type==5) {
                                this.rects.push(
                                    {zIndex:this.zIndex+1,type:item.type,h5_link:item.h5_link,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=='shopqr') {
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,h5_link:item.h5_link,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=="customer_activity") {
                            let size = Number(item.size.split('p')[0]);
                            this.rects.push(
                                {zIndex:this.zIndex+1,type:item.type,color:item.color,size:size,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=='customer_qr') {
                            console.log(item.type,12);
                            if(this.poster_type==30) {
                                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:true,class:""}
                                )
                            }
                        }
                        this.zIndex++;
                    })
                },
                getLabel() {
                    let url = '{!! yzWebFullUrl('plugin.new-poster.admin.poster.getLabelList') !!}';
                    if(this.label_word) {
                        url = '{!! yzWebFullUrl('plugin.new-poster.admin.poster.searchLabel') !!}';
                    }
                    let loading = this.$loading({target:document.querySelector(".label-history"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post(url,{label_kwd:this.label_word}).then(function (response) {
                            if (response.data.result){
                                this.label_list = response.data.data.list.data;
                                this.label_total = response.data.data.list.total;
                                this.label_per_page = response.data.data.list.per_page;
                                this.label_current_page = response.data.data.list.current_page;
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            loading.close();
                        },function (response) {
                            this.$message({message: response.data.msg,type: 'error'});
                            loading.close();
                        }
                    );
                },

                sureAddLabel() {
                    if(this.label_word == "") {
                        this.$message.error("请输入标签")
                        return;
                    }
                    this.$http.post('{!! yzWebFullUrl('plugin.new-poster.admin.poster.addLabel') !!}',{label:{name:this.label_word}}).then(response => {
                        if (response.data.result) {
                            this.$message({type: 'success',message: '操作成功!'});
                            this.form.label = this.label_word;
                            this.form.label_id = response.data.data.label.id;
                            this.label_word = "";
                            this.label_show = false;
                        } else {
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                    },response => {
                    });
                },
                handleClose() {
                    this.form.label = "";
                },
                chooseLabel(item) {
                    console.log(item);
                    this.history_show = false;
                    this.form.label = item.name;
                    this.form.label_id = item.id;

                },

                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,
                            keyword:this.form.keyword,
                            status:this.form.status,
                            label_id:this.form.label_id,
                            center_show:this.form.center_show,
                            app_share_show:this.form.app_share_show,
                            is_ago:this.form.is_ago,
                            is_open:this.form.is_open,
                            background:this.form.background,
                            response_status:this.form.response_status,
                            response_type:this.form.response_type,
                            response_title:this.form.response_title,
                            response_thumb:this.form.response_thumb,
                            response_thumb_url:this.form.response_thumb_url,
                            response_desc:this.form.response_desc,
                            response_url:this.form.response_url,
                            response_text:this.form.response_text,
                            auto_sub:this.form.auto_sub,
                            is_show_center:this.form.is_show_center,
                            design_img_show:this.form.design_img_show,
                            design_img:this.form.design_img,
                        },
                        poster_supplement:{
                            wait_reminder:this.form.wait_reminder,
                            disable_reminder:this.form.disable_reminder,
                            not_open_reminder:this.form.not_open_reminder,
                            not_open_reminder_url:this.form.not_open_reminder_url,
                            recommender_credit:this.form.recommender_credit,
                            recommender_bonus:this.form.recommender_bonus,
                            recommender_coupon_id:this.form.recommender_coupon_id,
                            recommender_coupon_name:this.form.recommender_coupon_name,
                            recommender_coupon_num:this.form.recommender_coupon_num,
                            subscriber_credit:this.form.subscriber_credit,
                            subscriber_bonus:this.form.subscriber_bonus,
                            subscriber_coupon_id:this.form.subscriber_coupon_id,
                            subscriber_coupon_name:this.form.subscriber_coupon_name,
                            subscriber_coupon_num:this.form.subscriber_coupon_num,
                            bonus_method:this.form.bonus_method,
                            recommender_award_title:this.form.recommender_award_title,
                            recommender_award_notice:this.form.recommender_award_notice,
                            subscriber_award_title:this.form.subscriber_award_title,
                            subscriber_award_notice:this.form.subscriber_award_notice,
                        },
                        data:[],
                    };
                    this.rects.forEach((item,index) => {

                        if(item.type=='nickname') {
                            json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,size:item.size+'px',color:item.color})
                        }
                        else if(item.type=='invite') {
                            json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,size:item.size+'px',color:item.color})
                        }
                        else if(item.type=='mid') {
                            json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,size:item.size+'px',color:item.color})
                        }
                        else 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})
                        }
                        else 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,src:item.src,src_url:item.src_url})
                        }
                        else if(item.type=='shopqr') {
                            json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,h5_link:item.h5_link})
                        }

                        else if(item.type=='qr') {
                            if(this.poster_type == 1 || this.poster_type == 7 || this.poster_type == 16) {
                                json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type})
                            }
                            else if(this.poster_type == 2) {
                                json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,mini_link:item.mini_link})
                            }
                            else if(this.poster_type == 5) {
                                json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,h5_link:item.h5_link})
                            }
                        }
                        if(item.type=='customer_activity') {
                            json.data.push({width:item.width+'px',height:item.height+'px',top:item.top+'px',left:item.left+'px',type:item.type,size:item.size+'px',color:item.color})
                        }
                        else if(item.type=='customer_qr') {
                            if(this.poster_type == 30) {
                                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 {
                            if(!this.form.keyword) {
                                this.$message.error('请输入关键字')
                            }
                            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=="nickname") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,color:"#f00",size:20,width:130,height:30,left:0,top:0,axis:"both",active:false,minw:40,minh:40,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:110,height:30,left:0,top:0,axis:"both",active:false,minw:100,minh:22,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:30,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,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:true,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:""}
                        )
                    }
                    if(type=="qr"&&(this.poster_type==1||this.poster_type==7||this.poster_type==16)){
                        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=="qr"&&this.poster_type==2){
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,mini_link:"/pages/index/index",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=="qr"&&this.poster_type==5){
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,h5_link:"",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=="shopqr"&&this.poster_type==1){
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,h5_link:"",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=="customer_activity") {
                        this.rects.push(
                            {zIndex:this.zIndex+1,type:type,color:"#f00",size:20,width:130,height:30,left:0,top:0,axis:"both",active:false,minw:40,minh:40,draggable:true,resizable:true,parentLim:true,aspectRatio:false,class:""}
                        )
                    }
                    if(type=="customer_qr"&& this.poster_type== 30 ){
                        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++;
                },
                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;

                },
                // 添加关键词
                addContent(name,ref,type) {
                    let words = "";
                    if(name=='nickname'){
                        words = "[会员昵称]";
                    }
                    if(name=='s_nickname'){
                        words = "[扫码者昵称]";
                    }
                    if(name=='credit'){
                        words = "[积分数量]";
                    }
                    if(name=='bonus'){
                        words = "[现金金额]";
                    }
                    if(name=='coupon_name'){
                        words = "[优惠券名称]";
                    }
                    if(name=='coupon_num'){
                        words = "[优惠券张数]";
                    }
                    if(name=='t_nickname'){
                        words = "[推荐者昵称]";
                    }
                    if(name=='shopname'){
                        words = "[商城名称]";
                    }



                    this.insertInputTxt(name,words,ref,type)
                },
                insertInputTxt(name1,words,ref,type) {

                    let name = "";
                    if(type) {
                        console.log(this.$refs[ref])
                        name = this.$refs[ref].$refs[type];
                    }
                    else {
                        name = this.$refs[ref].$refs.textarea;
                    }
                    var startPos = name.selectionStart;
                    console.log(startPos);
                    var endPos = name.selectionEnd;
                    if (startPos === undefined || endPos === undefined) return
                    var txt = name.value;
                    var result = txt.substring(0, startPos) + words + txt.substring(endPos)
                    name.value = result;
                    name.focus();
                    name.selectionStart = startPos + words.length;
                    name.selectionEnd = startPos + words.length;
                    console.log(name.value)
                    console.log(ref)
                    this.form[ref] = name.value;

                },

                addLink(name,ref,type) {
                    this.link_show = true;
                    this.link_ref = ref;
                    this.link_type = type
                },
                sureAddLink() {
                    let title = this.link_form.title;
                    let content = this.link_form.content;
                    let words = `<a href="`+content+`">`+title+`</a>`
                    this.insertInputTxt('link',words,this.link_ref,this.link_type);
                    this.link_show = false;
                },
                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();
                    }

                },

                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;
                },
                changeCenterShow(type) {
                    if(type=="other"&&this.form.center_show.indexOf(0)>=-1) {
                        this.form.center_show = [];
                        this.form.center_show.push(0);
                    }
                    else {
                        let arr = []
                        for(let i=0;i<this.form.center_show.length;i++) {
                            if(this.form.center_show[i]!=0) {
                                arr.push(this.form.center_show[i])
                            }
                        }
                        this.form.center_show = arr;
                    }
                    console.log(this.form.center_show)
                    this.$forceUpdate();
                },
                jumpUrl() {
                    window.open(CktUrl);
                },
            },
        })

    </script>
@endsection