Skip to content

C
confucius
Commit d2cc104d authored by 罗超's avatar 罗超
Browse files
Options

1

parent 11d2bd25
Hide whitespace changes
Inline Side-by-side
Showing with 37152 additions and 0 deletions
src/assets/webfont/FZDBSJW.svg 0 → 100644
View file @ d2cc104d
This source diff could not be displayed because it is too large. You can view the blob instead.
src/pages/activity/makeAd.vue 0 → 100644
View file @ d2cc104d
<style>
@import "../../assets/css/advert/advertfont.css";
@import "../../assets/css/advert/advmanager.css";
</style>
<template>
<div class="adv-box page-body">
<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="save" @click="getFileBase64(2)">
保存
</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="page-search row items-center">
<div class="col row wrap q-mr-lg q-col-gutter-md">
<div class="col-3">
<q-select @input="getaddatas(0)" standout="bg-primary text-white" v-model="adMsg.IsFee" :options="statusOpts"
emit-value map-options label="类型" />
</div>
</div>
</div>
<div class="content">
<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>&nbsp; {{props.value.AdvertisingCount}}
</div>
<div class="zezhao">
<i class="el-icon-edit-outline" title="选择此图" @click="chosenbg(props.value)"></i>
</div>
</template>
</vueWaterfallEasy>
</div>
</div>
</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'
import {getAdvertisingList,saveMakeAd,getMyAdDetail} from '../../api/AD/index.js'
import {UploadViittoFile} from '../../api/common/common'
export default {
components: {
VueDraggableResizable,
vueWaterfallEasy
},
data() {
return {
statusOpts:[
{
label: "全部",
value: 0
},
{
label: "收费",
value: 1
},
{
label: "免费",
value: 2
}
],
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,
adMsg:{
pageIndex:1,
pageSize:10,
IsFee:0
}
}
},
mounted() {
if(this.$route.query.id){
this.dataId = this.$route.query.id
}
console.log(479,this.dataId)
// 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.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 => {})
getMyAdDetail({ID:this.dataId}).then(res=>{
console.log('tag', res)
this.isLoading = false
if(res.Code===1){
let data = res.Data
this.dataId = data.ID,
this.bg = data.PictureUrl + '?width=470'
this.st = data.SamplePicturesUrl + '?width=470'
this.templateId = data.AdvertisingID
this.nodes = JSON.parse(data.Content)
console.log('tag1', this.nodes)
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 = ''
}
})
},
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,
// }
let msg = {
ID: this.dataId,
AdvertisingPicUrl: '',
AdvertisingID:this.templateId,
Content:JSON.stringify(this.nodes),
SecretKey:""
}
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}`;
// var path = `/Adv/user/template/${fileName}`;
UploadViittoFile ("Edu",blob,(res)=>{
this.isLoading = false;
if(res.Code===1){
console.log(644,res);
// msg.AdvertisingPicUrl = path
new browserMD5File(blob, function (err, md5) {
msg.SecretKey = md5;
saveMakeAd(msg).then(res=>{
console.log(res)
})
// 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.adMsg.pageIndex=1
}
getAdvertisingList(this.adMsg).then(res=>{
if(res.Code===1){
console.log(397,res)
res.Data.PageData.forEach(x=>{
x.src=`${x.SamplePicturesUrl}?x-oss-process=image/resize,w_200`
x.id=x.ID
})
if(type==0){
this.addatas=res.Data.PageData
}else{
this.addatas=this.addatas.concat(resDdata.PageData)
}
this.total=res.Data.Count
if (res.Data.PageData.length == 0) {
this.$refs.waterfall.waterfallOver()
}
}
})
},
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) {
console.log(856,name);
// let newArr = [];
// newArr.push(file);
// var path = `/Adv/user/${this.user.EmployeeId}/${name}`;
// this.uploadSelfBlob(path, newArr, x => {
// console.log(848,x)
// });
// UploadViittoFile ("ad",file,(res)=>{
// console.log(864,res);
// })
},
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>
src/pages/activity/myadvert.vue 0 → 100644
View file @ d2cc104d
<style>
@import "../../assets/css/advert/advmanager.css";
</style>
<template>
<div class="advmanager-box">
<div class="content" style="top:50px;">
<vueWaterfallEasy v-if='addatas.length!=0' ref="waterfall" :imgsArr="addatas" @scrollReachBottom="handleCurrentChange" :maxCols='7' :imgWidth='208' :enablePullDownEvent='true'>
<template slot-scope="props">
<span class="free"><i class="el-icon-share"></i> 0</span>
<div class="zezhao">
<a :href='`/#/activity/makeAd?id=${props.value.ID}`'><i class="el-icon-edit" title="修改"></i></a>
<a :href='props.value.advertisingPicUrlStr' download="广告图.png"><i class="el-icon-download" title="下载"></i></a>
<i class="el-icon-delete" title="删除" @click="deleteItem(props.value)"></i>
</div>
</template>
</vueWaterfallEasy>
<div v-if='addatas.length==0' style='width:100%;margin-top:50px;text-align:center;color: #ccc;'>
<i class="iconfont icon-kong" style="font-size: 120px;"></i><br/>
还没有广告哦，<a href='/#/activity/makeAd' style="color:rgb(0, 129, 255)">立即制作</a>
</div>
</div>
</div>
</template>
<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
import {getMyAd,delMyAd} from '../../api/AD/index'
export default {
data(){
return{
lines:[],
teams:[],
modelTeams:[],
countrys:[],
addatas:[],
pageIndex:0,
pageSize:15,
total:0,
msg:{
lineId:'0',
teamId:'0',
countryId:'0',
type:'0'
},
user:{},
model:{},
isAdd:false,
uploadType:0,
}
},
components: {
vueWaterfallEasy
},
mounted(){
this.getaddatas(0)
},
methods:{
deleteItem(x){
delMyAd({ID:x.ID}).then(res=>{
if(res.Code==1){
this.$message.success('删除成功')
this.getaddatas(0)
}else{
this.$message.error(res.Message)
}
})
},
handleCurrentChange(val) {
this.pageIndex++
this.getaddatas(1)
},
getaddatas(type){
if(type==0){
this.pageIndex=0
}
let msg={
pageIndex:this.pageIndex,
pageSize:this.pageSize
}
getMyAd(msg).then(res=>{
if(res.Code===1){
res.Data.PageData.forEach(x=>{
x.src=`${x.advertisingPicUrlStr}?x-oss-process=image/resize,w_200`
})
if(res.Data.PageData.length==0){
this.$refs.waterfall.waterfallOver()
}
if(type==0){
this.addatas=res.Data.PageData
}else{
this.addatas=this.addatas.concat(resDdata.PageData)
}
this.total=res.Data.pageCount
}
console.log(98,res)
})
},
}
}
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment