846 lines
49 KiB
PHP
846 lines
49 KiB
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 -->
|
|
<!-- 商城名称 -->
|
|
<!-- bold:0,italic:0,slide:0,under:0 -->
|
|
<div v-if="rect.type=='shop_name'"
|
|
: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>
|
|
<div v-if="rect.type=='crop_name'"
|
|
: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>
|
|
<div v-if="rect.type=='group_name'"
|
|
: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>
|
|
<div v-if="rect.type=='group_owner_name'"
|
|
: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>
|
|
<div v-if="rect.type=='group_owner_username'"
|
|
: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=='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%;">
|
|
|
|
<!-- 邀请会员昵称 -->
|
|
<div v-if="rect.type=='chat_invite_nickname'"
|
|
: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=='chat_invite_avatar'" :src="head_url" alt="" style="width:100%;height:100%;">
|
|
<!-- 企业微信商城码 -->
|
|
<img v-if="rect.type=='chat_shop_code'" :src="qr_url" alt="" style="width:100%;height:100%;">
|
|
</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;">
|
|
<el-button size="small" @click="addEle('logo')">商城logo</el-button>
|
|
<el-button size="small" @click="addEle('shop_name')">商城名称</el-button>
|
|
<el-button size="small" @click="addEle('crop_name')">企业名称</el-button>
|
|
<el-button size="small" @click="addEle('group_name')">群名称</el-button>
|
|
<el-button size="small" @click="addEle('group_owner_name')">群主名称</el-button>
|
|
<el-button size="small" @click="addEle('group_owner_username')">锁客会员昵称</el-button>
|
|
<el-button size="small" @click="addEle('head')">锁客会员头像</el-button>
|
|
<el-button size="small" @click="addEle('qr')">群二维码</el-button>
|
|
<el-button size="small" @click="addEle('chat_invite_nickname')">邀请人会员昵称</el-button>
|
|
<el-button size="small" @click="addEle('chat_invite_avatar')">邀请人会员头像</el-button>
|
|
<el-button size="small" @click="addEle('chat_shop_code')">群拓客商城二维码</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=='member_price'">
|
|
<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=='market_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>
|
|
<!-- 现价设置项 -->
|
|
<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>
|
|
</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>
|
|
<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 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 is_copy = {!! $is_copy?:0 !!};
|
|
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{
|
|
showIntroduce:false,
|
|
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_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,
|
|
is_copy:is_copy,
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
mounted() {
|
|
if(this.id) {
|
|
this.submit_url = '{!! yzWebFullUrl('plugin.new-poster.admin.poster.edit') !!}'
|
|
}
|
|
else {
|
|
this.submit_url = '{!! yzWebFullUrl('plugin.new-poster.admin.poster.add') !!}'
|
|
}
|
|
this.poster_type = this.getParam('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=='shop_name'||item.type=='crop_name'
|
|
||item.type=='group_name'||item.type=='group_owner_name'
|
|
||item.type=='group_owner_username'||item.type=='chat_invite_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=="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=="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:""}
|
|
)
|
|
}
|
|
else if(item.type=="chat_invite_avatar") {
|
|
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=="chat_shop_code"){
|
|
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=='shop_name'||item.type=='crop_name'
|
|
||item.type=='group_name'||item.type=='group_owner_name'
|
|
||item.type=='group_owner_username'||item.type=='chat_invite_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=="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=="head") {
|
|
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=="chat_invite_avatar") {
|
|
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=="chat_shop_code"){
|
|
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
|
|
}
|
|
if(this.is_copy) {
|
|
json1.is_copy = this.is_copy;
|
|
}
|
|
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=='shop_name'||type=='crop_name'
|
|
||type=='group_name'||type=='group_owner_name'
|
|
||type=='group_owner_username'||type=='chat_invite_nickname') {
|
|
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=="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=="chat_invite_avatar") {
|
|
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=="chat_shop_code"){
|
|
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
|