<style>
@import "../../assets/css/advert/advertfont";
@import "../../assets/css/advert/advmanager";
</style>
<template>
<div class="adv-box">
<div v-if='bg!=""' v-loading='isLoading'>
<div class="board" ref="board">
<img :src="bg" class="bg" @click="currentNode={},currentNodeList=[]" />
<a style="display:none" ref='down'></a>
<VueDraggableResizable @click="moreSelect()" v-for="item in nodes" tabindex="0" :key="item.nodeId"
:active="item.active" :parent="item.rotate==0||item.rotate==360?true:false"
:style="{transform:'rotate('+item.rotate+'deg)'}" @activated="onActivated(item.nodeId)" :w="item.width"
:h="item.height" :x="item.x" :y="item.y" :minh='item.fontSize' :minw='item.fontSize' :z="item.zindex"
@resizestop="onResizstop" @dragstop="onDragstop">
<div v-if="item.type==0" class='text'
:style="{'font-size':item.fontSize+'px','letter-spacing':item.letterSpacing+'px','background':item.bg,'font-family':item.fontname,'color':item.color,'line-height':item.lineHeight,'text-align':item.textAlign,'font-weight':(item.isBold==0?'400':'bold'),'font-style':(item.isXie==0?'normal':'italic'),'border-radius':item.radius+'px','text-shadow':item.hshadow+'px '+item.vshadow+'px '+item.blur+'px '+item.shadowcolor,'text-stroke':item.strokeWidth+'px '+item.strokeColor}">
{{item.content}}</div>
<img class="img" v-if="item.type==1" :src="item.src"
:style="{'border-radius':item.radius+'px','box-shadow':item.hshadow+'px '+item.vshadow+'px '+item.blur+'px '+item.shadowcolor,'opacity':(item.alpha/100),'border':item.strokeWidth+'px solid '+item.strokeColor}" />
<div style='height:1px' v-if="item.type==2"
:style="{'border-bottom':item.height+'px '+item.style+' '+item.bg,'border-radius':item.radius+'px','box-shadow':item.hshadow+'px '+item.vshadow+'px '+item.blur+'px '+item.shadowcolor,'opacity':(item.alpha/100)}">
</div>
<img class="img" v-if="item.type==3" :src="item.src"
:style="{'box-shadow':item.hshadow+'px '+item.vshadow+'px '+item.blur+'px '+item.shadowcolor,'opacity':(item.alpha/100)}" />
</VueDraggableResizable>
</div>
<ul class="tools">
<li @click="returnback">
<el-tooltip effect="dark" content="切换背景" placement="top-start">
<i class="iconfont icon-genghuanx"></i>
</el-tooltip>
</li>
<li @click="addQr">
<el-tooltip effect="dark" content="插入二维码" placement="top-start">
<i class="iconfont icon-QR_code"></i>
</el-tooltip>
</li>
<li @click="addTitle">
<el-tooltip effect="dark" content="插入标题" placement="top-start">
<i class="iconfont icon-biaoti"></i>
</el-tooltip>
</li>
<li @click="addP">
<el-tooltip effect="dark" content="插入文字" placement="top-start">
<i class="iconfont icon-duanluo"></i>
</el-tooltip>
</li>
<li @click="addLine">
<el-tooltip effect="dark" content="插入线条" placement="top-start">
<i class="iconfont icon-hengxian"></i>
</el-tooltip>
</li>
<li @click="openUploadPic">
<el-tooltip effect="dark" content="插入图片" placement="top-start">
<i class="iconfont icon-tupian1"></i>
</el-tooltip>
<input type="file" ref='addImage' style="display:none" @change="addPic" />
</li>
<li @click="tiggerMax" class="source">
原图
</li>
<li class="save" @click="outerVisible=true">
保存
</li>
<li class="down" @click="getFileBase64(1)">
下载
</li>
<!-- <li class="return" @click="returnback">
返回
</li> -->
</ul>
<div class="property-box" v-if='currentNode.type==0 && !isMax'>
<el-form ref="form" :model="currentNode" label-width="100px">
<el-form-item label="内容：">
<el-input type="textarea" v-model="currentNode.content"></el-input>
</el-form-item>
<el-form-item label="字号：">
<el-input-number v-model="currentNode.fontSize" :min="12" :max="280"></el-input-number>
<label class="remark">修改文字大小</label>
</el-form-item>
<el-form-item label="行高：">
<el-input-number v-model="currentNode.lineHeight" :min="1" :max="10"></el-input-number>
<label class="remark">修改文字上下间距</label>
</el-form-item>
<el-form-item label="文字间距：">
<el-input-number v-model="currentNode.letterSpacing" :min="1" :max="10"></el-input-number>
<label class="remark">修改文字左右间距</label>
</el-form-item>
<el-form-item label="字体：">
<el-select v-model="currentNode.fontname" placeholder="请选择字体">
<el-option v-for="item in fonts" :key="item.value" :label="item.label" :value="item.value">
<span :style="{'font-family':item.value}" style="font-size:14px;">{{ item.label }}</span>
</el-option>
</el-select>
<label>加粗</label>
<el-switch v-model="currentNode.isBold" active-color="#13ce66" active-value="1" inactive-value="0"
inactive-color="#ccc">
</el-switch>
<label>斜体</label>
<el-switch v-model="currentNode.isXie" active-color="#13ce66" active-value="1" inactive-value="0"
inactive-color="#ccc">
</el-switch>
</el-form-item>
<el-form-item label="字体阴影：">
<el-col :span="6">
<el-input size="mini" v-model="currentNode.hshadow">
<template slot="prepend">水平位置</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input size="mini" v-model="currentNode.vshadow">
<template slot="prepend">垂直位置</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input size="mini" v-model="currentNode.blur">
<template slot="prepend">距离</template>
</el-input>
</el-col>
<el-col :span="6">
<el-color-picker v-model="currentNode.shadowcolor" show-alpha>
<template slot="prepend">颜色</template>
</el-color-picker>
</el-col>
</el-form-item>
<el-form-item label="对齐方式：">
<el-button type="primary" @click='alignMethod(1)'><i class="iconfont icon-zuoduiqi"
style="margin-right:5px"></i>左对齐</el-button>
<el-button type="primary" @click='alignMethod(2)'><i class="iconfont icon-juzhongduiqi"
style="margin-right:5px"></i>居中</el-button>
<el-button type="primary" @click='alignMethod(3)'><i class="iconfont icon-youduiqi"
style="margin-right:5px"></i>右对齐</el-button>
</el-form-item>
<el-form-item label="文字颜色：">
<el-color-picker v-model="currentNode.color" show-alpha></el-color-picker>
<label style="margin:0 0 0 15px;vertical-align: top;">背景颜色：</label>
<el-color-picker v-model="currentNode.bg" show-alpha></el-color-picker>
</el-form-item>
<el-form-item label="文字描边：">
<el-input-number v-model="currentNode.strokeWidth" :min="0" :max="30"></el-input-number>
<label style="margin:0 0 0 15px;vertical-align: top;">描边颜色：</label>
<el-color-picker v-model="currentNode.strokeColor" show-alpha></el-color-picker>
</el-form-item>
<el-form-item label="圆角：">
<el-input-number v-model="currentNode.radius" :min="0"></el-input-number>
<label class="remark">修改块的圆角弧度（有背景色时体现）</label>
</el-form-item>
<el-form-item label="旋转：">
<el-input-number v-model="currentNode.rotate" :min="0" :max="360"></el-input-number>
<el-slider v-model="currentNode.rotate" :max="360" :step="1"></el-slider>
</el-form-item>
<el-form-item label="排序：">
<el-button type="primary" @click='moveLayer(1)'>上移</el-button>
<el-button type="primary" @click='moveLayer(2)'>下移</el-button>
<el-button type="primary" @click='moveLayer(3)'>置顶</el-button>
<el-button type="primary" @click='moveLayer(4)'>置底</el-button>
</el-form-item>
<el-form-item label="操作：">
<el-button type="danger" @click='operation(0)'>删除此项</el-button>
<el-button type="success" @click='operation(1)'>复制此项</el-button>
</el-form-item>
</el-form>
</div>
<div class="resorece max-resource" @click="tiggerMax" v-if="isMax">
<img :src="st" />
</div>
<div class="property-box" v-if='currentNode.type==1 && !isMax'>
<el-form ref="form" :model="currentNode" label-width="100px">
<!-- <el-form-item label="宽度：">
<el-input-number v-model="currentNode.width" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="高度">
<el-input-number v-model="currentNode.height" :min="0"></el-input-number>
</el-form-item> -->
<el-form-item label="圆角：">
<el-input-number v-model="currentNode.radius" :min="0"></el-input-number>
<label class="remark">修改块的圆角弧度（有背景色时体现）</label>
</el-form-item>
<el-form-item label="旋转：">
<el-input-number v-model="currentNode.rotate" :min="0" :max="360"></el-input-number>
<el-slider v-model="currentNode.rotate" :max="360" :step="1"></el-slider>
</el-form-item>
<el-form-item label="阴影：">
<el-col :span="6">
<el-input v-model="currentNode.hshadow">
<template slot="prepend">水平位置</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="currentNode.vshadow">
<template slot="prepend">垂直位置</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="currentNode.blur">
<template slot="prepend">距离</template>
</el-input>
</el-col>
<el-col :span="6">
<el-color-picker v-model="currentNode.shadowcolor" show-alpha>
<template slot="prepend">颜色</template>
</el-color-picker>
</el-col>
</el-form-item>
<el-form-item label="透明：">
<el-slider v-model="currentNode.alpha" :max="100" :step="1"></el-slider>
</el-form-item>
<el-form-item label="图片描边：">
<el-input-number v-model="currentNode.strokeWidth" :min="0" :max="30"></el-input-number>
<label style="margin:0 0 0 15px;vertical-align: top;">描边颜色：</label>
<el-color-picker v-model="currentNode.strokeColor" show-alpha></el-color-picker>
</el-form-item>
<el-form-item label="排序：">
<el-button type="primary" @click='moveLayer(1)'>上移</el-button>
<el-button type="primary" @click='moveLayer(2)'>下移</el-button>
<el-button type="primary" @click='moveLayer(3)'>置顶</el-button>
<el-button type="primary" @click='moveLayer(4)'>置底</el-button>
</el-form-item>
<el-form-item label="操作：">
<el-button type="danger" @click='operation(0)'>删除此项</el-button>
<el-button type="success" @click='operation(1)'>复制此项</el-button>
</el-form-item>
</el-form>
</div>
<div class="property-box" v-if='currentNode.type==2 && !isMax'>
<el-form ref="form" :model="currentNode" label-width="100px">
<el-form-item label="圆角：">
<el-input-number v-model="currentNode.radius" :min="0"></el-input-number>
<label class="remark">修改块的圆角弧度（有背景色时体现）</label>
</el-form-item>
<el-form-item label="旋转：">
<el-input-number v-model="currentNode.rotate" :min="0" :max="360"></el-input-number>
<el-slider v-model="currentNode.rotate" :max="360" :step="1"></el-slider>
</el-form-item>
<el-form-item label="阴影：">
<el-col :span="6">
<el-input v-model="currentNode.hshadow">
<template slot="prepend">水平位置</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="currentNode.vshadow">
<template slot="prepend">垂直位置</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="currentNode.blur">
<template slot="prepend">距离</template>
</el-input>
</el-col>
<el-col :span="6">
<el-color-picker v-model="currentNode.shadowcolor" show-alpha>
<template slot="prepend">颜色</template>
</el-color-picker>
</el-col>
</el-form-item>
<el-form-item label="透明：">
<el-slider v-model="currentNode.alpha" :max="100" :step="1"></el-slider>
</el-form-item>
<el-form-item label="颜色：">
<el-color-picker v-model="currentNode.bg" show-alpha></el-color-picker>
</el-form-item>
<el-form-item label="线条样式：">
<el-select v-model="currentNode.style">
<el-option label="实线" value='solid'></el-option>
<el-option label="点线" value='dotted'></el-option>
<el-option label="虚线" value='dashed'></el-option>
<el-option label="双线" value='double'></el-option>
</el-select>
</el-form-item>
<el-form-item label="排序：">
<el-button type="primary" @click='moveLayer(1)'>上移</el-button>
<el-button type="primary" @click='moveLayer(2)'>下移</el-button>
<el-button type="primary" @click='moveLayer(3)'>置顶</el-button>
<el-button type="primary" @click='moveLayer(4)'>置底</el-button>
</el-form-item>
<el-form-item label="操作：">
<el-button type="danger" @click='operation(0)'>删除此项</el-button>
<el-button type="success" @click='operation(1)'>复制此项</el-button>
</el-form-item>
</el-form>
</div>
<div class="property-box" v-if='currentNode.type==3 && !isMax'>
<el-form ref="form" :model="currentNode" label-width="100px">
<el-form-item label="内容：">
<el-input type="textarea" v-model="currentNode.content"></el-input>
</el-form-item>
<el-form-item label="背景颜色：">
<el-color-picker v-model="currentNode.bg"></el-color-picker>
<label style="margin:0 0 0 15px;vertical-align: top;">前置颜色：</label>
<el-color-picker v-model="currentNode.forecolor"></el-color-picker>
</el-form-item>
<el-form-item label="">
<el-button type="danger" @click='canvasQrCode'>重新生成二维码</el-button>
</el-form-item>
<el-form-item label="旋转：">
<el-input-number @mousewheel.native="whellRotate()" v-model="currentNode.rotate" :min="0" :max="360">
</el-input-number>
<el-slider v-model="currentNode.rotate" :max="360" :step="1"></el-slider>
</el-form-item>
<el-form-item label="阴影：">
<el-col :span="6">
<el-input size="mini" v-model="currentNode.hshadow">
<template slot="prepend">水平位置</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input size="mini" v-model="currentNode.vshadow">
<template slot="prepend">垂直位置</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input size="mini" v-model="currentNode.blur">
<template slot="prepend">距离</template>
</el-input>
</el-col>
<el-col :span="6">
<el-color-picker v-model="currentNode.shadowcolor" show-alpha>
<template slot="prepend">颜色</template>
</el-color-picker>
</el-col>
</el-form-item>
<el-form-item label="透明：">
<el-slider v-model="currentNode.alpha" :max="100" :step="1"></el-slider>
</el-form-item>
<el-form-item label="排序：">
<el-button type="primary" @click='moveLayer(1)'>上移</el-button>
<el-button type="primary" @click='moveLayer(2)'>下移</el-button>
<el-button type="primary" @click='moveLayer(3)'>置顶</el-button>
<el-button type="primary" @click='moveLayer(4)'>置底</el-button>
</el-form-item>
<el-form-item label="操作：">
<el-button type="danger" @click='operation(0)'>删除此项</el-button>
<el-button type="success" @click='operation(1)'>复制此项</el-button>
</el-form-item>
</el-form>
</div>
</div>
<div v-if='bg==""' class='advmanager-box'>
<div class="query-box">
<ul>
<!-- <li>
<span>{{$t('advmanager.v_line')}}：</span>
<el-select v-model="msg.lineId" clearable class="w150" filterable @change="changeLine">
<el-option :label="$t('advmanager.v_all')" value='0' ></el-option>
<el-option v-for='item in lines'
:key="item.lineID"
:label="item.lineName"
:value="item.lineID">
</el-option>
</el-select>
</li> -->
<!-- <li>
<span>{{$t('advmanager.v_xilie')}}：</span>
<el-select v-model="msg.teamId" clearable class="w150" >
<el-option :label="$t('advmanager.v_all')" value='0'></el-option>
<el-option v-for='item in teams'
:key="item.LtID"
:label="item.LtName"
:value="item.LtID">
</el-option>
</el-select>
</li> -->
<li>
<span>{{$t('advmanager.v_country')}}：</span>
<el-select v-model="msg.countryId" clearable class="w150" filterable>
<el-option :label="$t('advmanager.v_all')" value='0'></el-option>
<el-option v-for='item in countrys' :key="item.ID" :label="item.Name" :value="item.ID">
</el-option>
</el-select>
</li>
<li>
<span>{{$t('advmanager.v_type')}}：</span>
<el-select v-model="msg.type" class="w150" clearable filterable>
<el-option :label="$t('advmanager.v_all')" value='0'></el-option>
<el-option :label="$t('advmanager.v_shoufei')" value='1'></el-option>
<el-option :label="$t('advmanager.v_free')" value='2'></el-option>
</el-select>
</li>
<li>
<button class="hollowFixedBtn" type="button" @click="getaddatas(0)"
style="top:-66px;right:10px;">{{$t('pub.searchBtn')}}</button>
</li>
</ul>
</div>
<div class="content">
<!-- <ul>
<li v-for="x in addatas" :key="x.ID">
<div class="img-box">
<img :src="`${x.SamplePicturesUrl}?x-oss-process=image/resize,w_200`" />
<span class="money" v-if="x.IsFee==1">￥{{x.ChargeAmount.toFixed(2)}}</span>
<span class="free" v-else>{{$t('advmanager.v_free')}}</span>
<div class="star-box">
<i class="iconfont icon-star star"></i> {{x.AdvertisingCount}}
</div>
<div class="zezhao">
<i class="el-icon-edit-outline" title="选择此图" @click="chosenbg(x)"></i>
</div>
</div>
</li>
</ul> -->
<vueWaterfallEasy :imgsArr="addatas" ref="waterfall" @scrollReachBottom="handleCurrentChange" :maxCols='7'
:imgWidth='208' :enablePullDownEvent='true'>
<template slot-scope="props">
<span class="money" v-if="props.value.IsFee==1">￥{{props.value.ChargeAmount.toFixed(2)}}</span>
<span class="free" v-else>{{$t('advmanager.v_free')}}</span>
<div class="star-box">
<i class="iconfont icon-star star"></i> {{props.value.AdvertisingCount}}
</div>
<div class="zezhao">
<i class="el-icon-edit-outline" title="选择此图" @click="chosenbg(props.value)"></i>
</div>
</template>
</vueWaterfallEasy>
</div>
<!-- <el-pagination background @current-change="handleCurrentChange" :current-page.sync="pageIndex" layout="total,prev, pager, next, jumper" :page-size="pageSize" :total="total">
</el-pagination> -->
<div class='goon' v-if="backBg!=''" @click="goon">
继续
</div>
</div>
<el-dialog custom-class='isAssociatTeam' title="是否关联团期" :visible.sync="outerVisible" center>
<el-switch v-model="AssociatedTeam" active-color="#13ce66" inactive-color="#ff4949" active-text="关联团期"
inactive-text="不关联团期"></el-switch>
<div slot="footer" class="dialog-footer">
<button class="hollowFixedBtn" @click="outerVisible = false">{{$t('pub.cancelBtn')}}</button>
<button class="normalBtn" type="primary" @click="getFileBase64(2)">{{$t('pub.sureBtn')}}</button>
</div>
</el-dialog>
</div>
</template>
<script>
import VueDraggableResizable from 'vue-draggable-resizable'
import QRCode from 'qrcode'
import browserMD5File from 'browser-md5-file';
import vueWaterfallEasy from 'vue-waterfall-easy'
import h2c from 'html2canvas'
// import Canvas2Image from 'Canvas2Image'
export default {
components: {
VueDraggableResizable,
vueWaterfallEasy
},
data() {
return {
isLoading: true,
isMax: false,
outerVisible: false,
AssociatedTeam: true,
imgUrl: '',
currentZIndex: 100,
currentMaxId: 0,
nodes: [],
currentnodeId: -1,
user: {},
currentNode: {
nodeId: 0,
type: -1,
lineHeight: '1',
bg: null,
color: '#333',
zindex: 100,
content: '',
textAlign: 'center',
fontSize: 16,
fontname: '微软雅黑',
active: false,
letterSpacing: 1,
isBold: 0,
isXie: 0,
radius: 0,
rotate: 0,
hshadow: 0,
vshadow: 0,
blur: 0,
shadowcolor: null,
alpha: 100,
width: 0,
height: 0,
style: 'solid',
strokeWidth: 0,
strokeColor: null
},
fonts: [],
bg: '',
st: '',
templateId: 0,
backBg: '',
backSt: '',
lines: [],
teams: [],
modelTeams: [],
countrys: [],
addatas: [],
pageIndex: 1,
pageSize: 50,
total: 0,
msg: {
lineId: '0',
teamId: '0',
countryId: '0',
type: '0'
},
dataId: 0,
isCtrl: false,
currentNodeList: [],
TCID: 0,
}
},
mounted() {
this.dataId = this.$route.query.id ? this.$route.query.id : 0
this.msg.lineId = this.$route.query.LineID ? parseInt(this.$route.query.LineID) : '0';
var QTCID = this.$route.query.TCID;
if (QTCID != undefined) {
this.TCID = QTCID;
} else {
this.TCID = '';
}
this.user = JSON.parse(window.localStorage.userInfo)
if (this.dataId != 0) {
this.bg = ' '
this.loadObj()
} else {
this.isLoading = false
}
//this.loadingFont(this.nodes[0])
this.nodes.forEach(x => {
this.currentZIndex = x.zindex > this.currentZIndex ? x.zindex : this.currentZIndex
this.currentMaxId = x.nodeId > this.currentMaxId ? x.nodeId : this.currentMaxId
})
this.fonts.push({
'label': '默认',
'value': '微软雅黑'
})
this.fonts.push({
'label': '苹果黑体',
'value': 'pingfang'
})
this.fonts.push({
'label': '时尚中黑体',
'value': 'sszhjt'
})
this.fonts.push({
'label': '方正剪纸体',
'value': 'fzjzjt'
})
this.fonts.push({
'label': '方正喵呜体',
'value': 'fzmwt'
})
this.fonts.push({
'label': '方正铁筋隶书体',
'value': 'fztjlst'
})
this.fonts.push({
'label': '方正硬笔行书体',
'value': 'FZYBXSJW'
})
this.fonts.push({
'label': '汉仪萝卜体',
'value': 'hxlbjt'
})
this.fonts.push({
'label': '汉仪火柴体',
'value': 'hybqt'
})
this.fonts.push({
'label': '汉仪哈哈体',
'value': 'hyhht'
})
this.fonts.push({
'label': '汉仪凌波体',
'value': 'hylbt'
})
this.fonts.push({
'label': '汉仪清韵体',
'value': 'hyqytj'
})
this.fonts.push({
'label': '汉仪娃娃篆体',
'value': 'hywwzj'
})
this.fonts.push({
'label': '汉仪燕翎体',
'value': 'hyyltj'
})
this.fonts.push({
'label': '迷你菱心体',
'value': 'jlx'
})
this.fonts.push({
'label': '叶根友圆趣卡通体',
'value': 'katongjian'
})
this.fonts.push({
'label': '叶根友毛笔行书体',
'value': 'YGYXSZITI'
})
this.getline()
this.getcountry()
this.getaddatas(0)
var sUserAgent = navigator.userAgent;
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform ==
"Macintosh") || (navigator.platform == "MacIntel");
document.addEventListener('keydown', e => {
if ((e.keyCode === 17 && isWin) || (e.keyCode === 91 && isMac)) {
this.isCtrl = true
}
})
document.addEventListener('keyup', e => {
if ((e.keyCode === 17 && isWin) || (e.keyCode === 91 && isMac)) {
this.isCtrl = false
}
})
},
methods: {
loadObj() {
let msg = {
'ID': this.dataId
}
this.apipost("Advertising_post_Get", msg, x => {
this.isLoading = false
if (x.data.resultCode == 1) {
let data = x.data.data
this.dataId = data.id,
this.bg = data.pictureUrl + '?width=470'
this.st = data.samplePicturesUrl + '?width=470'
this.templateId = data.baseAdvertisingID
this.nodes = JSON.parse(data.content)
this.nodes.forEach(y => {
this.currentZIndex = y.zindex > this.currentZIndex ? y.zindex : this.currentZIndex
this.currentMaxId = y.nodeId > this.currentMaxId ? y.nodeId : this.currentMaxId
})
let reg = /^http(s)?:\/\/(.*?)\//
let getBlob = this.getFileBlob(data.pictureUrl.replace(reg, ''), 'aa.jpg')
let that = this
getBlob.then(blob => {
that.blobToDataURL(blob, function (e) {
that.bg = e
})
});
} else {
this.dataId = 0
this.bg = ''
}
}, err => {})
},
save(imgUrl) {
this.isLoading = true;
let msg = {
ID: this.dataId,
BaseAdvertisingID: this.templateId,
content: JSON.stringify(this.nodes),
AdvertisingPicUrl: '',
SecretKey: '',
fileName: '',
fileSize: '',
TCID: 0,
IsAssociated: 0,
}
if (this.AssociatedTeam) {
msg.TCID = this.TCID;
msg.IsAssociated = 1;
} else {
msg.TCID = this.TCID;
msg.IsAssociated = 0;
}
let that = this
let blob = that.base64ToBlob(imgUrl)
let newArr = [];
newArr.push(blob);
var fileName = `${that.uuid(10,10)}.png`
var path = `/Adv/user/${that.user.EmployeeId}/${fileName}`;
msg.AdvertisingPicUrl = path
that.uploadBlob(path, newArr, x => {
browserMD5File(blob, function (err, md5) {
msg.SecretKey = md5;
msg.fileName = fileName;
msg.fileSize = blob.size;
that.apipost("Advertising_post_Set", msg, x => {
that.isLoading = false;
that.outerVisible = false;
if (x.data.resultCode == 1) {
that.$message.success('保存成功!')
if (msg.ID == 0) {
that.dataId = x.data.data.result
}
} else
that.$message.success(x.data.message)
}, err => {})
})
})
},
uuid(len, radix) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
var uuid = [],
i;
radix = radix || chars.length;
if (len) {
// Compact form
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
} else {
var r;
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
uuid[14] = '4';
for (i = 0; i < 36; i++) {
if (!uuid[i]) {
r = 0 | Math.random() * 16;
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
}
}
}
return uuid.join('');
},
goon() {
this.bg = ''
this.st = ''
this.bg = this.backBg
this.st = this.backSt
},
returnback() {
this.backBg = this.bg
this.backSt = this.st
this.bg = ''
this.st = ''
//this.$message.success('已自动保存数据')
},
chosenbg(x) {
this.bg = x.PictureUrl + '?width=470'
this.st = x.SamplePicturesUrl + '?width=470'
this.templateId = x.ID
let reg = /^http(s)?:\/\/(.*?)\//
let getBlob = this.getFileBlob(x.PictureUrl.replace(reg, ''), 'aa.jpg')
let that = this
getBlob.then(blob => {
that.blobToDataURL(blob, function (e) {
that.bg = e
})
});
},
blobToDataURL(blob, callback) {
var a = new FileReader()
a.onload = function (e) {
callback(e.target.result);
}
a.readAsDataURL(blob)
},
handleCurrentChange() {
this.pageIndex++
this.getaddatas(1)
},
getaddatas(type) {
if (type == 0) {
this.pageIndex = 1
}
let msg = {
pageIndex: this.pageIndex,
pageSize: this.pageSize,
lineId: 0,
SeriesId: 0,
CountryId: this.msg.countryId,
AdvName: '',
IsFee: this.msg.type
}
this.apipost("Advertising_get_GetAdvertisingList", msg, x => {
x.data.data.pageData.forEach(x => {
x.src = this.compressImg(x.SamplePicturesUrl, "filt", 200, "")
x.id = x.ID
})
if (x.data.data.pageData.length == 0) {
this.$refs.waterfall.waterfallOver()
}
if (type == 0) {
this.addatas = x.data.data.pageData
} else {
this.addatas = this.addatas.concat(x.data.data.pageData)
}
this.total = x.data.data.pageCount
}, err => {})
},
getcountry() {
this.apipost("dict_post_Destination_GetCountry", {}, x => {
this.countrys = x.data.data
}, err => {})
},
getteam() {
let msg = {
'RB_Branch_id': this.user.RB_Branch_id,
'isTOOP': 1,
'lineID': this.msg.lineId
}
this.apipost("team_post_GetList", msg, x => {
this.teams = x.data.data
if (x.data.data.length > 0)
this.msg.teamId = x.data.data[0].LtID
}, err => {})
},
changeLine() {
this.teams.splice(0, this.teams.length - 1)
if (this.msg.lineId !== 0) {
this.getteam()
}
},
changeLineForm() {
this.modelTeams.splice(0, this.modelTeams.length - 1)
if (this.model.LineID !== 0 && this.model.LineID != '') {
let msg = {
'RB_Branch_id': this.user.RB_Branch_id,
'isTOOP': 1,
'lineID': this.model.LineID
}
this.apipost("team_post_GetList", msg, x => {
this.modelTeams = x.data.data
if (x.data.data.length > 0)
this.model.SeriesID = x.data.data[0].LtID
}, err => {})
}
},
getline() {
let msg = {
'pageIndex': 0,
'pageSize': 100
}
this.apipost("line_post_GetPageList", msg, x => {
this.lines = x.data.data.pageData
}, err => {})
},
tiggerMax() {
this.isMax = !this.isMax
},
downAdv() {
let that = this
var cntElem = this.$refs.board;
var shareContent = cntElem
var width = shareContent.offsetWidth
var height = shareContent.offsetHeight
var canvas = document.createElement("canvas")
var scale = 2
canvas.width = width * scale
canvas.height = height * scale
canvas.getContext("2d").scale(scale, scale)
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
h2c(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d')
context.mozImageSmoothingEnabled = false
context.webkitImageSmoothingEnabled = false
context.msImageSmoothingEnabled = false
context.imageSmoothingEnabled = false
// 【重要】默认转化的格式为png,也可设置为其他格式
let imgUrl = canvas.toDataURL("image/png")
that.downloadFile('我的广告图.png', imgUrl)
})
},
getFileBase64(type) {
let that = this
var cntElem = this.$refs.board;
var shareContent = cntElem
var width = shareContent.offsetWidth
var height = shareContent.offsetHeight
var canvas = document.createElement("canvas")
var scale = 2
canvas.width = width * scale
canvas.height = height * scale
canvas.getContext("2d").scale(scale, scale)
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
h2c(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d')
context.mozImageSmoothingEnabled = false
context.webkitImageSmoothingEnabled = false
context.msImageSmoothingEnabled = false
context.imageSmoothingEnabled = false
// 【重要】默认转化的格式为png,也可设置为其他格式
let imgUrl = canvas.toDataURL("image/png")
if (type == 1)
that.downloadFile('我的广告图.png', imgUrl)
else {
that.save(imgUrl)
}
})
},
downloadFile(fileName, content) {
let aLink = this.$refs.down
let blob = this.base64ToBlob(content)
this.uploadImage(fileName, blob)
let evt = document.createEvent("HTMLEvents")
evt.initEvent("click", true, true)
aLink.download = fileName
aLink.href = URL.createObjectURL(blob)
aLink.click()
},
base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: contentType
});
},
uploadImage(name, file) {
let newArr = [];
newArr.push(file);
var path = `/Adv/user/${this.user.EmployeeId}/${name}`;
this.uploadBlob(path, newArr, x => {
});
},
operation(type) {
if (type == 0) {
let index = this.nodes.indexOf(this.currentNode)
this.nodes.splice(index, 1)
this.currentNode.type = -1
} else {
this.currentMaxId = this.currentMaxId + 1
this.currentZIndex++
let t = {}
if (this.currentNode.type == 0) {
t = {
nodeId: this.currentMaxId,
type: 0, //0文本，1图片
width: (this.currentNode.fontSize * 4) + 10,
height: this.currentNode.fontSize,
lineHeight: this.currentNode.lineHeight,
bg: this.currentNode.bg,
color: this.currentNode.color,
zindex: this.currentZIndex,
content: this.currentNode.content,
x: 200,
y: 300,
textAlign: this.currentNode.textAlign,
fontSize: this.currentNode.fontSize,
fontname: this.currentNode.fontname,
active: false,
letterSpacing: this.currentNode.letterSpacing,
isBold: this.currentNode.isBold,
isXie: this.currentNode.isXie,
radius: this.currentNode.radius,
rotate: this.currentNode.rotate,
hshadow: this.currentNode.hshadow,
vshadow: this.currentNode.vshadow,
blur: this.currentNode.blur,
shadowcolor: this.currentNode.shadowcolor,
alpha: this.currentNode.alpha,
strokeWidth: this.currentNode.strokeWidth,
strokeColor: this.currentNode.strokeColor
}
} else if (this.currentNode.type == 1) {
t = {
nodeId: this.currentMaxId,
type: 1, //0文本，1图片
width: this.currentNode.width,
height: this.currentNode.height,
zindex: this.currentZIndex,
x: 200,
y: 300,
active: false,
src: this.currentNode.src,
radius: this.currentNode.radius,
rotate: this.currentNode.rotate,
hshadow: this.currentNode.hshadow,
vshadow: this.currentNode.vshadow,
blur: this.currentNode.blur,
shadowcolor: this.currentNode.shadowcolor,
alpha: this.currentNode.alpha,
strokeWidth: this.currentNode.strokeWidth,
strokeColor: this.currentNode.strokeColor
}
} else if (this.currentNode.type == 2) {
t = {
nodeId: this.currentMaxId,
type: 2, //0文本，1图片
width: this.currentNode.width,
height: this.currentNode.height,
zindex: this.currentZIndex,
x: 50,
y: 300,
active: false,
radius: this.currentNode.radius,
rotate: this.currentNode.rotate,
hshadow: this.currentNode.hshadow,
vshadow: this.currentNode.vshadow,
blur: this.currentNode.blur,
shadowcolor: this.currentNode.shadowcolor,
alpha: this.currentNode.alpha,
bg: this.currentNode.bg,
style: this.currentNode.style,
fontSize: 1
}
} else if (this.currentNode.type == 3) {
t = {
nodeId: this.currentMaxId,
type: 3, //0文本，1图片
width: this.currentNode.width,
height: this.currentNode.height,
zindex: this.currentZIndex,
x: 200,
y: 300,
active: false,
rotate: this.currentNode.rotate,
hshadow: this.currentNode.hshadow,
vshadow: this.currentNode.vshadow,
blur: this.currentNode.blur,
shadowcolor: this.currentNode.shadowcolor,
alpha: this.currentNode.alpha,
bg: this.currentNode.bg,
fontSize: 50,
content: this.currentNode.content,
src: this.currentNode.src,
forecolor: this.currentNode.forecolor
}
}
this.nodes.push(t)
this.nodes.forEach((x, i) => {
x.active = false
})
this.nodes[this.nodes.length - 1].active = true
this.currentNode = this.nodes[this.nodes.length - 1]
this.currentnodeId = t.nodeId
}
},
moveLayer(type) {
if (type == 1) {
this.currentNode.zindex = this.currentNode.zindex + 1
this.currentZIndex = this.currentZIndex > this.currentNode.zindex ? this.currentZIndex : this.currentNode
.zindex
} else if (type == 2) {
this.currentNode.zindex = this.currentNode.zindex - 1
} else if (type == 3) {
this.currentZIndex++
this.currentNode.zindex = this.currentZIndex
} else {
let min = 1
this.nodes.forEach(x => {
min = min > x.zindex ? x.zindex : min
})
min--
min = min < 100 ? 100 : min
this.currentNode.zindex = min
}
},
alignMethod(type) {
if (type == 1)
this.currentNode.textAlign = 'left'
else if (type == 2)
this.currentNode.textAlign = 'center'
else
this.currentNode.textAlign = 'right'
},
addPic() {
let that = this;
if (this.$refs.addImage.files.length > 0 && this.$refs.addImage.files[0].size > 0) {
// 压缩图片需要的一些元素和对象
var reader = new FileReader(),
img = new Image();
// 选择的文件对象
var file = null;
// 是否含透明背景的标志量
var isAlphaBackground = false;
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// base64地址图片加载完毕后
img.onload = function () {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// canvas尺寸设置
canvas.width = originWidth;
canvas.height = originHeight;
// 清除画布
context.clearRect(0, 0, originWidth, originHeight);
// 图片绘制在画布上
context.drawImage(img, 0, 0);
// 获取图片像素信息
var imageData = context.getImageData(0, 0, originWidth, originHeight).data;
// 检测有没有透明数据
isAlphaBackground = false;
for (var index = 3; index < imageData.length; index += 4) {
if (imageData[index] != 255) {
isAlphaBackground = true;
break;
}
}
that.chuliImg(isAlphaBackground, img.src);
// isAlphaBackground就是最后石头有透明或半透明背景色的结果
};
// 文件base64化，以便获知图片原始尺寸
reader.onload = function (e) {
img.src = e.target.result;
};
reader.readAsDataURL(this.$refs.addImage.files[0])
}
},
chuliImg(i, e) { // 判断是否有透明背景进行不同操作
let that = this;
if (i) {
that.creatImg(e);
} else {
this.lrz(e, {
quality: 0.7
}).then(function (rst) {
that.creatImg(rst.base64);
}).catch(function (err) {
// 处理失败会执行
}).always(function () {
// 不管是成功失败，都会执行
});
}
},
creatImg(e) { // 展示图片
let that = this;
that.currentMaxId = that.currentMaxId + 1
that.currentZIndex++
//e.target.result
let t = {
nodeId: that.currentMaxId,
type: 1, //0文本，1图片
width: 100,
height: 100,
zindex: that.currentZIndex,
x: 200,
y: 300,
active: false,
src: e,
radius: 1,
rotate: 0,
hshadow: 0,
vshadow: 0,
blur: 0,
shadowcolor: null,
alpha: 100,
strokeWidth: 0,
strokeColor: null
}
that.nodes.push(t)
this.nodes.forEach((x, i) => {
x.active = false
})
this.nodes[this.nodes.length - 1].active = true
that.currentNode = that.nodes[that.nodes.length - 1]
that.currentnodeId = t.nodeId
},
addLine() {
this.currentMaxId = this.currentMaxId + 1
this.currentZIndex++
//e.target.result
let t = {
nodeId: this.currentMaxId,
type: 2, //0文本，1图片
width: 300,
height: 1,
zindex: this.currentZIndex,
x: 50,
y: 300,
active: false,
radius: 1,
rotate: 0,
hshadow: 0,
vshadow: 0,
blur: 0,
shadowcolor: null,
alpha: 100,
bg: '#000',
style: 'solid',
fontSize: 1
}
this.nodes.push(t)
this.nodes.forEach((x, i) => {
x.active = false
})
this.nodes[this.nodes.length - 1].active = true
this.currentNode = this.nodes[this.nodes.length - 1]
this.currentnodeId = t.nodeId
},
addQr() {
this.currentMaxId = this.currentMaxId + 1
this.currentZIndex++
//e.target.result
let t = {
nodeId: this.currentMaxId,
type: 3, //0文本，1图片
width: 100,
height: 100,
zindex: this.currentZIndex,
x: 200,
y: 300,
active: false,
radius: 0,
rotate: 0,
hshadow: 0,
vshadow: 0,
blur: 0,
shadowcolor: null,
alpha: 100,
bg: null,
fontSize: 50,
content: '新增二维码',
src: '',
forecolor: '#000'
}
this.nodes.push(t)
this.nodes.forEach((x, i) => {
x.active = false
})
this.nodes[this.nodes.length - 1].active = true
this.currentNode = this.nodes[this.nodes.length - 1]
this.currentnodeId = t.nodeId
this.canvasQrCode()
},
canvasQrCode() {
let that = this
QRCode.toDataURL(this.currentNode.content, {
color: {
dark: this.currentNode.forecolor, // Blue dots
light: this.currentNode.bg == null ? '#0000' : this.currentNode.bg // Transparent background
}
}, function (err, url) {
that.currentNode.src = url
})
},
openUploadPic() {
this.$refs.addImage.click()
},
addTitle() {
this.currentMaxId = this.currentMaxId + 1
this.currentZIndex++
let t = {
nodeId: this.currentMaxId,
type: 0, //0文本，1图片
width: (36 * 4) + 10,
height: 36,
lineHeight: '1',
bg: null,
color: '#000',
zindex: this.currentZIndex,
content: '新增标题',
x: 200,
y: 300,
textAlign: 'center',
fontSize: 36,
fontname: 'sszhjt',
active: false,
letterSpacing: 1,
isBold: 0,
isXie: 0,
radius: 0,
rotate: 0,
hshadow: 0,
vshadow: 0,
blur: 0,
shadowcolor: null,
strokeWidth: 0,
strokeColor: null
}
this.nodes.push(t)
this.nodes.forEach((x, i) => {
x.active = false
})
this.nodes[this.nodes.length - 1].active = true
this.currentNode = this.nodes[this.nodes.length - 1]
this.currentnodeId = t.nodeId
},
addP() {
this.currentMaxId = this.currentMaxId + 1
this.currentZIndex++
let t = {
nodeId: this.currentMaxId,
type: 0, //0文本，1图片
width: (16 * 4) + 10,
height: 16,
lineHeight: '1',
bg: null,
color: '#000',
zindex: this.currentZIndex,
content: '新增文字',
x: 200,
y: 300,
textAlign: 'center',
fontSize: 16,
fontname: 'pingfang',
active: false,
letterSpacing: 1,
isBold: 0,
isXie: 0,
radius: 0,
rotate: 0,
hshadow: 0,
vshadow: 0,
blur: 0,
shadowcolor: null,
strokeWidth: 0,
strokeColor: null
}
this.nodes.push(t)
this.nodes.forEach((x, i) => {
x.active = false
})
this.nodes[this.nodes.length - 1].active = true
this.currentNode = this.nodes[this.nodes.length - 1]
this.currentnodeId = t.nodeId
},
onResizstop(x, y, w, h) {
if (this.currentnodeId == -1 || !x)
return;
this.currentNode.x = x
this.currentNode.y = y
this.currentNode.width = w
this.currentNode.height = h
},
onDragstop(x, y) {
if (this.currentnodeId == -1)
return;
this.currentNode.x = x
this.currentNode.y = y
},
onActivated(id) { //isCtrl ==true多选 ==false单选
if (!this.isCtrl) {
this.currentnodeId = id
this.nodes.forEach(x => {
if (x.nodeId == id) {
this.currentNode = x
}
})
} else {
this.nodes.forEach(x => {
if (x.nodeId == id) {
if (this.currentNodeList.length > 0) {
let isRepeat = false;
for (let i = 0; i < this.currentNodeList.length; i++) {
if (this.currentNodeList[i].nodeId == id) {
isRepeat = true;
break;
}
}
if (!isRepeat) {
this.currentNodeList.push(x);
}
} else {
this.currentNodeList.push(x)
}
}
})
}
}
}
}
</script>