<template>
<view class="full-width full-height" style="background: #FFFFFF; ">
<!-- 自定义头部 -->
<myhead :worksid="works_id" :title="titlename" :color="'#131319'" :titleShow="true" :backShow="true" :background="'#fff'"></myhead>
<!-- 登录弹框 -->
<Signin ref="Signin"></Signin>
<!-- 裁剪图片 -->
<view class="full-width content-color full-height" style="background: black;" v-show="state">
<kps-image-cutter @ok="onok" @cancel="oncancle" ref="index" :properties="properties"></kps-image-cutter>
</view>
<!-- 设计区域 -->
<view v-show="!state" class="full-width content-color full-height" :style="{background: design_color }">
<!-- 取消选中 -->
<view class="full-width full-height" style="position: absolute; top: 0; left: 0;" @click.stop="itemCancel"></view>
<view class="container" @click='itemCancel' @touchmove.stop="touchMove" @touchend.stop="touchEnd">
<view :style="{width: data.bgWidth +'px',height: data.bgHeight +'px' }" style="position: relative; ">
<!-- 底图 -->
<image :src="data.bgImage_old" mode="widthFix"
:style="{width: (data.bgWidth - 30) +'px',height: data.bgWidth +'px' ,left: '15px'}"
style="position: absolute; z-index: 0; top: 0; bottom: 0; margin: auto;"></image>
<!-- 底色 -->
<view :style="{width: data.editorWidth + 'px',height: data.editorHeight +'px',
background:background_color ? background_color : ''}"
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 1;">
</view>
<!-- 遮罩图 -->
<image :src="data.bgImage" mode="widthFix"
:style="{width: (data.bgWidth - 30 ) +'px',height: data.bgWidth +'px',left: '15px'}"
style="position: absolute; z-index: 2; top: 0; bottom: 0; margin: auto;"></image>
<!-- 辅助线 -->
<view v-if="guide_left"
style="border-left: 1px dashed #43cf7c;position: absolute; height: 100%; z-index: 999;"
:style="{left: ((data.bgWidth / 2) - 0.5) +'px'}"></view>
<view v-if="guide_top"
style="width: 100%; border-top: 1px dashed #47e5e5;position: absolute; z-index: 999;"
:style="{top: (editory + (data.editorHeight * location_scale - 0.5)) +'px'}"></view>
<!-- 主干 -->
<view :class="['item-list', { 'list-active': data.listActive == true }]"
style="opacity: 1;z-index: 1;"
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',top: editory +'px'}">
<view
:style="{'margin-top': (editor_top - (data.editorHeight * mix_scale / 2)) +'px',width: data.editorWidth * mix_scale +'px',height: data.editorHeight * mix_scale +'px','mask-image':shape_image ? 'url(' + shape_image + ')' : 'none', '-webkit-mask-image':shape_image ? 'url(' + shape_image + ')' : 'none',}"
style="overflow: hidden; mask-size: 100%; -webkit-mask-size: 100%;margin-left:auto; margin-right: auto;mask-repeat:no-repeat;-webkit-mask-repeat: no-repeat;">
<block v-for="(item,idx) in data.itemList" :key="idx">
<!-- 文本 -->
<view v-if="item.type == 1" class='item-box' :style="{'z-index':item.index , transform: 'scale(' + item.scale + ')',
top: item.top + 'px',left: item.left + 'px'}">
<view class='item-box-in' style="text-align: center;" :style="{transform: 'rotate(' + item.angle + 'deg)', width: item.width + 'px',height: item.height + 'px',
'line-height': item.height + 'px', 'background-color': item.under_color}">
<view :id="'item-text-' + idx " class="item-text"
style="margin:auto;white-space:nowrap;display:table;"
:style="{'font-family': item.font_family,'font-weight': item.font_style,'font-size': item.font_size + 'px', color:item.font_color,'background-color': item.under_color}">
{{item.content}}
</view>
</view>
</view>
<!-- 图片 -->
<view v-if="item.type == 0 || item.type == 2" class='item-box'
:style="{'z-index':item.index,transform: 'scale(' + item.scale + ')',top:item.top + 'px',left:item.left + 'px'}">
<view class='item-box-in' style="overflow: hidden;"
:style="{width: item.width + 'px' , height: item.height +'px',transform: 'rotate(' + item.angle + 'deg)'}">
<!-- 图片裁剪 -->
<image v-if="item.replace == 1" mode='aspectFill'
:src="item.content + '?x-oss-process=image/resize,lfit,w_1500'"
:data-id="item.id" :style="{width: item.initialWidth * item.initialScale + 'px',
height: item.initialHeight * item.initialScale +'px',
'margin-top': item.image_top +'px','margin-left': item.image_left +'px'}"></image>
<!--图片 @load="loadImage"-->
<image v-else-if="item.type == 0" mode='aspectFill'
style="min-height: 50px;min-width: 50px;"
:src="item.content "
:data-id="item.id" :style="{width: item.initialWidth * item.initialScale + 'px',
height: item.initialHeight * item.initialScale +'px',
'margin-top': item.image_top +'px','margin-left': item.image_left +'px'}"></image>
<!-- 贴图 -->
<image v-else-if="item.type == 2" mode='aspectFit'
:src="item.content + '?x-oss-process=image/resize,lfit,w_1500'"
:data-id="item.id"
:style="{width: item.width + 'px',height: item.height +'px'}"></image>
</view>
</view>
</block>
</view>
</view>
<!-- 操作列表 -->
<view v-if="editory" class='operate-list' style="z-index: 10;"
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',top: editory +'px'}">
<block v-for="(item,idx) in data.itemList" :key="idx">
<view class='item-box'
:style="{'z-index':item.active == true ? 999:(item.index + 10), transform: 'scale(' + item.scale + ')',top: item.top + 'px',left: item.left + 'px'}">
<view :class="['item-box-in', { 'active': item.active == true }]"
style="background: none;" :style="{transform: 'rotate(' + item.angle + 'deg)'}">
<!-- 图片拖动 -->
<view :data-id='item.id' :data-time="lastTapTime"
style="position: relative; background: none;"
:style="{width: item.width + 'px' , height: item.height +'px'}"
@longtap.stop="itemlongtap" @touchstart.stop="itemTouchStart"
@touchmove.stop="itemTouchMove" @touchend.stop="itemTouchEnd"
@touchcancel.stop="itemTouchCancel"></view>
<!-- 边框 -->
<view v-if="item.type == 0 ">
<view v-if="item.activeedge"
:style="{transform: item.typetext =='left' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
class='left_edge-wrap' :data-id='item.id'
@touchstart.stop="edgeStart($event, 'left')"
@touchend.stop.prevent='edgeEnd'>
<view class='left_edge'>
<image src="../../static/icon/icon_sticker_left_tailoring.png"
mode="aspectFill" style="width: 40upx; height: 55upx;margin: auto">
</image>
</view>
</view>
<view v-if="item.activeedge"
:style="{transform: item.typetext =='top' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
class='topedge-wrap' :data-id='item.id'
@touchstart.stop="edgeStart($event, 'top')"
@touchend.stop.prevent='edgeEnd'>
<view class='topedge'>
<image src="../../static/icon/icon_sticker_top_tailoring.png"
mode="aspectFill" style="width: 50upx; height: 37upx; margin: auto">
</image>
</view>
</view>
<view v-if="item.activeedge"
:style="{transform: item.typetext =='right' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
class='rightedge-wrap' :data-id='item.id'
@touchstart.stop="edgeStart($event, 'right')"
@touchend.stop.prevent='edgeEnd'>
<view class='rightedge'>
<image src="../../static/icon/icon_sticker_right_tailoring.png"
mode="aspectFill" style="width: 40upx; height: 55upx;margin: auto">
</image>
</view>
</view>
<view v-if="item.activeedge"
:style="{transform: item.typetext =='bottom' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
class='bottomedge-wrap' :data-id='item.id'
@touchstart.stop="edgeStart($event, 'bottom')"
@touchend.stop.prevent='edgeEnd'>
<view class='bottomedge'>
<image src="../../static/icon/icon_sticker_buttom_tailoring.png"
mode="aspectFill" style="width: 50upx; height: 37upx; margin: auto">
</image>
</view>
</view>
</view>
<!-- 四角 -->
<view v-if="item.activehorn" class='frame-left-top-wrap'
:style="{transform: item.typetext =='left-top' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
:data-id='item.id' @touchstart="scaleStart($event, 'left-top')"
@touchend.stop.prevent='scaleEnd'>
<view v-if="item.support_zoom == 1" class='frame-left-top'
:style="{'border-left-color': item.typetext =='left-top' ? '#F56364' : '#5CE6B5', 'border-top-color': item.typetext =='left-top' ? '#F56364' : '#5CE6B5'}">
</view>
</view>
<view v-if="item.activehorn" class='frame-right-top-wrap'
:style="{transform: item.typetext =='right-top' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
:data-id='item.id' @touchstart="scaleStart($event, 'right-top')"
@touchend.stop.prevent='scaleEnd'>
<view v-if="item.support_zoom == 1" class='frame-right-top'
:style="{'border-right-color': item.typetext =='right-top' ? '#F56364' : '#5CE6B5', 'border-top-color': item.typetext =='right-top' ? '#F56364' : '#5CE6B5'}">
</view>
</view>
<view v-if="item.activehorn" class='frame-left-bottom-wrap'
:style="{transform: item.typetext =='left-bottom' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
:data-id='item.id' @touchstart="scaleStart($event, 'left-bottom')"
@touchend.stop.prevent='scaleEnd'>
<view v-if="item.support_zoom == 1" class='frame-left-bottom'
:style="{'border-left-color': item.typetext =='left-bottom' ? '#F56364' : '#5CE6B5', 'border-bottom-color': item.typetext =='left-bottom' ? '#F56364' : '#5CE6B5'}">
</view>
</view>
<view v-if="item.activehorn" class='frame-right-bottom-wrap'
:style="{transform: item.typetext =='right-bottom' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
:data-id='item.id' @touchstart="scaleStart($event, 'right-bottom')"
@touchend.stop.prevent='scaleEnd'>
<view v-if="item.support_zoom == 1" class='frame-right-bottom'
:style="{'border-right-color': item.typetext =='right-bottom' ? '#F56364' : '#5CE6B5', 'border-bottom-color': item.typetext =='right-bottom' ? '#F56364' : '#5CE6B5'}">
</view>
</view>
<!-- 图片旋转 -->
<view v-if="item.activescale"
:class="[item.typetext =='rotate' ? 'rotate-red' : 'rotate']"
style="transform-origin:center;" :style="{transform: item.typetext =='rotate' ? 'scale(' + item.oScale * 1.5 + ')' : 'scale(' + item.oScale + ')',
top: item.height + 20 - (28 - 28*(item.typetext == 'rotate' ? item.oScale * 1.5 : item.oScale))/2 + 'px'}"
:data-id='item.id' @touchstart.stop='rotateStart' @touchmove.stop='rotateMove'
@touchend.stop='rotateEnd'></view>
<!-- 辅助线 -->
<view v-if="item.activeguide" style="border-left: 1px dashed #F56364;
height: 100%;position: absolute; top: 0; z-index: 999; bottom: 0;"
:style="{left: ((item.width / 2) - 0.5) +'px',
transform:'scale(' + item.oScale + ')',height:100 * item.scale + '%',top: (- 100 * (item.scale - 1))/2 + '%'}"></view>
<view v-if="item.activeguide" style="width: 100%; border-top: 1px dashed #F56364;
position: absolute;z-index: 999;"
:style="{top: ((item.height / 2) - 0.5) +'px',
transform:'scale(' + item.oScale + ')',width:100 * item.scale + '%',left: (- 100 * (item.scale - 1))/2 + '%'}">
</view>
</view>
</view>
</block>
</view>
</view>
<!-- 计算字体大小 -->
<view class='item-box' style='top:-1000px;left:-1000px; visibility: hidden; '>
<view class='item-box-in'
:style="{width:data.editorWidth + 'px' ,height: data.itemList[data.cidx].height +'px'}"
style="text-align: center;">
<view ref="itemText" id="item-text" class="item-text" :style="{'font-weight': data.itemList[data.cidx].font_style ,
'font-size': data.itemList[data.cidx].font_size+ 'px',color:data.itemList[data.cidx].font_color,
'background-color': data.itemList[data.cidx].under_color,'font-family': data.itemList[data.cidx].font_family }"
style="margin:auto;white-space:nowrap;display:table;">{{data.itemList[data.cidx].content}}
</view>
</view>
<image :src="upLoadImageUrl" mode="scaleToFill" @load="upLoadIImageLoad" @error="upLoadIImageLoadErr"></image>
</view>
<!-- 上一步、下一步按钮 -->
<view class="operation" v-if="!active && !guide_left">
<view class="operation_top">
<image @click.stop='prev' src="../../static/icon_back_enabled.png" mode="aspectFill"
style="width: 96upx; height: 96upx;"></image>
</view>
<view class="operation_bottom">
<image @click.stop='next' src="../../static/icon_nextstep.png" mode="aspectFill"
style="width: 96upx; height: 96upx;"></image>
</view>
</view>
<!-- 拖拽删除图库 -->
<view v-if="delete_wrap_state" class="delete-wrap" :class="{'delete-wrap-active':deleteWrap}"
:animation="animationData">
<view>
<image :src="deleteWrap ? '../../static/delete-active.png':'../../static/delete.png'" mode=""
style="width: 42upx; height: 42upx; margin: auto;"></image>
<view>{{deleteWrap ? '松开即可删除':'拖到此处可删除'}}</view>
</view>
</view>
</view>
<!-- 图片提示 -->
<view v-if="showone">
<view
style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
@click.stop="showone = !showone"></view>
<view style="position: fixed; background: #FFFFFF; top:calc((100% - 621upx) / 2); left:calc((100% - 560upx) / 2);
z-index:1000; width: 560upx; min-height: 621upx; border-radius: 12upx;">
<image style="width: 560upx; height: 298upx; display: block;margin: auto;"
src="../../static/image/remind_picture.png" mode="aspectFill"></image>
<view v-if="shape_image != '' && data.itemList.length == 0"
style="text-align: center; font-size: 28upx; font-weight: 500; color: #333333; line-height: 45upx; margin-top: 62upx;">
效果需要先上传照片才可使用<br>请先上传一张相片
</view>
<view v-else
style="text-align: center; font-size: 28upx; font-weight: 500; color: #333333; line-height: 45upx; margin-top: 62upx;">
请选择手机拍摄或尺寸较大的图片<br>以体验最佳冲印效果
</view>
<view @click="selectPicturePop()" style="width: 466upx; height: 82upx; background: #47e5e5; border-radius: 10upx; font-size: 36upx; font-weight: 400;
color: #FFFFFF; text-align: center; line-height: 82upx; margin: 46upx auto 46upx; ">好的</view>
</view>
</view>
<!-- 上传进度条 -->
<view v-if="percent > 0 && percent < 100"
style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;">
<view style="position: absolute; top: 0; bottom: 0;margin: auto; top: 30%; width: 100%;">
<view style="text-align: center; margin:0 0 30upx; color: #FFFFFF; font-size: 28upx;">图片上传中...
</view>
<ProgressBar :Width="percent" Type="candy"></ProgressBar>
</view>
</view>
<!-- 1、增加在线定制站、正在休息-》体验中；
2、关闭官方图库，要同时关掉：贴图素材、智能推荐；
3、关闭上传相片，要同时关掉：上传相片、添加文字、添加涂鸦
4、排队列表，没有打印中状态的，全都是排队中 -->
<!-- 1、is_authority官方功能：手机壁纸、贴图素材、背景底色、相框形状、智能推荐
2、is_photo上传图片：上传相片、添加文字、添加涂鸦
3、is_recommend智能推荐：AI图像、AI画图
4、is_home 返回首页：设备页不可返回首页 -->
<!-- this.machine_item -->
<!-- 菜单栏目 -->
<view v-if="!active && !guide_left" class="toolRight">
<view class="tool_li">
<view class="tool_li" @click="showPopup(99)">
<image class="tool_li_img" src="../../static/img/icon_history_image.png" mode=""></image>
<view class="tool_li_text">历史作品</view>
</view>
<view class="tool_li" @click="showPopup(23)" v-if="is_authority == 1">
<image class="tool_li_img" src="../../static/icon_diy_wallpaper.png" mode=""></image>
<view class="tool_li_text">全幅壁纸</view>
</view>
<view class="tool_li" @click="showPopup(2)" v-if="is_authority == 1">
<image class="tool_li_img" src="../../static/icon/icon_stickers.png" mode=""></image>
<view class="tool_li_text">贴图素材</view>
</view>
<view class="tool_li" @click="showPopup(24)" v-if="is_authority == 1" >
<image class="tool_li_img" src="../../static/icon_make_diy_uplaod_image.png" mode=""></image>
<view class="tool_li_text">背景底色</view>
</view>
<view class="tool_li" @click="showone = !showone" v-if="is_photo == 1" style="margin-bottom: 20upx;" >
<image @click="cancel('share')" class="tool_li_img"
src="../../static/icon_make_diy_back_color.png" mode="" style="width: 74upx; height: 70upx;" ></image>
<view @click="cancel()" class="tool_li_text">上传相片</view>
</view>
<view class="tool_li" @click="showPopup(3)" v-if="is_photo == 1" >
<image class="tool_li_img" src="../../static/icon_diy_typeface.png"
style="width: 45upx; height: 40upx;" mode=""></image>
<view @click="cancel()" class="tool_li_text">添加文字</view>
</view>
<view class="tool_li" @click="ontuya()"v-if="is_photo == 1" >
<image class="tool_li_img" style="width: 62upx; height: 55upx;" src="../../static/icon_tuya.png"
mode=""></image>
<view class="tool_li_text">添加涂鸦</view>
</view>
<view class="tool_li" @click="wallpaperOnclick()" v-if="is_recommend == 1">
<image class="tool_li_img" style="width: 71upx; height: 59upx;"
src="../../static/randomwallpaper.png" mode=""></image>
<view class="tool_li_text">智能推荐</view>
</view>
<!-- AI图像 -->
<view class="tool_li" @click.stop='showAiChange()' v-if="is_recommend == 1">
<image class="tool_li_img" style="width: 51upx; height: 38upx;"
src="../../static/icon_diy_ai.png" mode=""></image>
<view class="tool_li_text">AI图像</view>
</view>
<view class="tool_li" @click="openAiMakePicture()" v-if="is_recommend == 1">
<image class="tool_li_img" style="width: 44upx; height: 42upx;"
src="../../static/icon_diy_draw_designs.png" mode=""></image>
<view class="tool_li_text">AI画图</view>
</view>
<view class="tool_li" @click.stop="removedeleteItem" v-if="data.itemList.length > 0">
<image class="tool_li_img" style="width: 50upx; height: 50upx;"
src="../../static/diy_icon_middle_default.png" mode=""></image>
<view class="tool_li_text">移除图片</view>
</view>
<view class="tool_li" style="height: 70upx;" v-if="background_color"
@click.stop="background_color = null">
<image class="tool_li_img" style="width: 51upx; height: 51upx;"
src="../../static/diy_icon_replace_default.png" mode=""></image>
<view class="tool_li_text">清空底色</view>
</view>
<image v-if="isShowGif && !guide_left" src="../../static/img/icon_finger_stretch.gif" style="width: 450upx; height: 450upx; left:calc(50% - 225upx); position: fixed;
top: calc(50% - 225upx);
z-index: 1000;
display: flex;
align-items: center;" @click="oclikGifImage()" @touchstart="oclikGifImage()">
</image>
</view>
</view>
<tuya ref="tuya" @tuyaimg="tuyaimg"></tuya>
<!-- 菜单栏目 -->
<view v-if="active && !guide_left" class="toolRight">
<view class="tool_li" @click.stop='deleteItem'>
<image class="tool_li_img" style="width: 51upx; height: 51upx;"
src="../../static/diy_icon_middle_default.png" mode=""></image>
<view class="tool_li_text">移除</view>
</view>
<view v-if="data.itemList.length > 0">
<view class="tool_li" v-if="data.itemList[data.cidx].type == 1" @click="showPopup(4)">
<image class="tool_li_img" style="width: 51upx; height: 51upx;"
src="../../static/icon/diy_icon_editor_default.png" mode=""></image>
<view class="tool_li_text">编辑</view>
</view>
</view>
<!-- 点击画布区域取消聚焦 -->
<view class="tool_li" @click.stop="itemCancel">
<image class="tool_li_img" style="width: 51upx; height: 51upx;" src="../../static/icon_confirm.png"
mode=""></image>
</view>
</view>
<!-- 生成作品 -->
<view v-if="!guide_left" class="toolBottom">
<view @click.stop="createWorks" hover-class="hover-class-bg"
:class="['tool_add',!machine_id ? 'grey' : '']">立即下单</view>
</view>
<!-- 单指可拖拽 -->
<view v-if="!guide_left "
style="position: fixed; font-size: 22upx; color: #999999; bottom: 280upx;left: 50%;transform: translate(-50%, 0%);z-index: 999; ">
<view>单指拖拽，双指伸缩</view>
</view>
<!-- 预览 -->
<view v-if="showtwo">
<view
style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
@click.stop="showtwo = !showtwo"></view>
<view style="position: fixed; top:calc((100% - 550upx) / 2); left:calc((100% - 600upx) / 2);
z-index:1000; width: 600upx; min-height: 550upx; border-radius: 12upx;">
<view style="display: flex; align-items: center; justify-content: center; margin: auto;
width: 600upx; height: 454upx; position: relative;">
<view style="width: 95%; height: 95%; background: #383838; display: flex;">
<view style="width: calc(100% / 4); height: 100%;" v-for="item in 4" :key="a">
<view v-for="item in 3" :key="b"
style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
<image style="width: 36%; height: 36%; position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto; z-index:0;" src="https://img.colorpark.cn/yun/11636_16349613693433.png?x-oss-process=image/resize,lfit,w_300"
mode="aspectFit">
</image>
<image style="width: 100%; height: 100%;position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin:auto; z-index: 1;" src="https://img.colorpark.cn/back/16351440306176515e7f196.png" mode="aspectFit">
</image>
</view>
</view>
</view>
</view>
<view style="width: 600upx;" @click.stop="showtwo = !showtwo">
<image src="../../static/quxiao.png" mode=""
style="width: 80upx; height: 80upx; margin: 30upx auto 0;"></image>
</view>
</view>
</view>
<!-- 替换选项 -->
<uni-popup ref="replacebottom" type="bottom" @change="change">
<view class="uni-share" style="width: 90%; margin: auto;">
<view style="background: #FFFFFF; border-radius: 20upx;">
<view
style="font-size: 30upx; font-weight: 400; height: 100upx; line-height: 100upx; text-align: center; width: 100%;"
@click="replaceimage()">更换其他照片</view>
</view>
<view
style="height: 90rpx; line-height: 90rpx; font-size: 14px; text-align: center; color: #666; background: #FFFFFF; border-radius: 20upx; margin: 20upx 0;"
@click="cancel_replace()">取消</view>
</view>
</uni-popup>
<!-- 字体 -->
<uni-popup ref="textsettingsshare" type="bottom" @change="change" style="position: fixed; z-index: 9999;">
<view class="uni-share" style="width: 100%; height: 600upx;background: #292933;"
v-if="e_active == 3 || e_active == 4">
<textsettings @textInput='textInput' @cancel="cancel" @workcolor="workcolor"
@workweight="workweight" @bgtextcolor="bgtextcolor" @typefaceClick="typefaceClick"
ref="textsettingstwo">
</textsettings>
</view>
</uni-popup>
<!-- 文本，贴图，相框 1模板 2贴图 3字体 4编辑 22添加相框 -->
<uni-popup ref="showshare" :type="type" @change="change"
style="position: relative; z-index: 9998; width: 100%;" :style="{height: data.windowHeight +'px'}">
<!-- 文本 -->
<view class="uni-share full-width" :style="{height: data.windowHeight +'px'}"
v-if="e_active == 3 || e_active == 4">
<view
style="position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 997; opacity: 0.8;"
@click="cancel('share')"></view>
<view style="position: fixed; bottom: 0; left: 0; width: 100%; height: 25%; z-index: 999;">
<textsettings @textInput='textInput' @cancel="cancel" @workcolor="workcolor"
@workweight="workweight" @bgtextcolor="bgtextcolor" @typefaceClick="typefaceClick"
@typefaceshow="typefaceshow" ref="textsettings">
</textsettings>
</view>
</view>
<!-- 贴图/模板形状 -->
<view v-if="e_active == 2 || e_active == 23 || e_active == 99 || e_active == 24"
class="uni-share full-width" :style="{height: data.windowHeight +'px'}">
<!-- 遮罩 -->
<view class="full-width"
style="position: absolute; bottom: 0; left: 0; height: 100%; z-index: 997; opacity: 0.8;"
@click="cancel('share')"></view>
<!-- 正文 -->
<view
style="position: absolute; bottom: 0upx; left: 0; height: 100%; width: 120upx; z-index: 999; background: #1A1D33; overflow: hidden;">
<view style="width: 120upx; margin-top:190upx "
:style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}"
v-if="e_active == 2 || e_active == 23 || e_active == 99 ">
<scroll-view class="scroll-container"
:style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}" scroll-y
scroll-with-animation v-if="brands.length > 0" :scroll-into-view="'s' + currentIndex">
<view :class="['scroll-item', { activeone: index == currentId }]" :id="'s' + index"
v-for="(item, index) in brands" :key="index" @tap="handleScroll(index,item)">
<image
style="width: 60upx; height: 60upx; display: block;margin:auto; padding: 18upx;"
:src="index == currentId ? item.icon_click : item.icon" mode="aspectFill">
</image>
<view v-if="item.update_flag == 1" style="width: 20upx; height: 20upx;
margin-left: 80upx;
background: #ff0000;
z-index:10;
border-radius: 50%;
margin-top: -80upx;
position: absolute;">
</view>
</view>
</scroll-view>
</view>
</view>
<view style="position: absolute; bottom: 0upx; left: 120upx; height: 100%; width: calc(100% - 240upx);
z-index: 999; overflow: hidden; background: #282932;">
<!-- 轮播图 -->
<view style="position: relative; width: calc(100% - 40upx); z-index: 99; margin:30upx auto;">
<swiper :autoplay="true" :interval="3000" :duration="1000" :indicator-dots="true"
:indicator-active-color="'#ffffff'"
style="height: 150upx; width: 100%; border-radius: 10upx; overflow: hidden; margin:auto;">
<swiper-item v-for="(item, index) in Adlists" :key="index" class="full-width">
<image :src="item.content + '?x-oss-process=image/resize,lfit,w_375'"
mode="aspectFill" class="full-width full-height"
style="border-radius: 10upx; background: #007AFF;"></image>
</swiper-item>
</swiper>
</view>
<view id="classification" v-if="e_active == 2 || e_active == 23 || e_active == 99"
style="width: 100%; position: relative; z-index: 99; ">
<view style="overflow: hidden;" v-if="material_series_list.length > 0">
<view
:class="['material-series-scroll-item', { 'material-series-scroll-item-active': item.id == material_series_currentId }]"
:id="'s' + index" v-for="(item, index) in material_series_list" :key="index"
@tap="material_series_handleScroll(index,item)">
<view>{{item.title}}</view>
</view>
</view>
</view>
<!-- 贴图 -->
<scrollList v-if=" e_active == 2 || e_active == 23 || e_active == 99 " ref="scrollList"
@Worksdetail="Worksdetail" :classificationHeight="classificationHeight"
:windowHeight="(data.windowHeight - 210 * data.pixelRate)"></scrollList>
<!-- 背景颜色 -->
<bgColor v-if="e_active == 24 && backgroundColor" ref="bgColor"
@bgColorAssembly="bgColorAssembly" :classificationHeight="classificationHeight"
:windowHeight="(data.windowHeight)">
</bgColor>
</view>
</view>
</uni-popup>
<uni-popup ref="showpicture" type="bottom" @change="change" style="position: fixed; z-index: 9999;">
<view class="uni-share"
style="width: 100%; height: 420upx;background: #FFFFFF;text-align: center; border-top-left-radius: 20upx; border-top-right-radius: 20upx; ">
<view @click.stop='addItemFromCamera'
style="color: #333333; font-size: 35upx; height:100upx;padding-top: 30upx;">
拍照
</view>
<view @click.stop='addItemFromAlbum'
style="color: #333333; font-size: 35upx;border-top: 1upx solid #ebebeb; height:100upx;padding-top: 30upx;">
上传手机相片
</view>
<view
style="color: #333333; font-size: 35upx; height: 100upx;padding-top: 30upx; border-top: 1upx solid #ebebeb;"
@click.stop='addItemFromeWx'>
导入微信照片
</view>
<view
style="color: #333333; font-size: 35upx; height: 100upx;padding-top: 30upx; border-top: 20upx solid #ebebeb"
@click="selectPicturePopColse()">
取消
</view>
</view>
</uni-popup>
<!-- Ai转换 -->
<uni-popup ref="showAiChange" type="center" style="position: fixed; z-index: 9999; ">
<view style="height: 1000upx;border-radius:20upx; background: #fff;width: 600upx;">
<image src="../../static/img/icon_close_image.png" style="width: 30upx;
padding: 30upx;
position: absolute;
right:0;
top:0;
z-index: 999;" mode="widthFix" @click="showAiChangeClose()">
</image>
<view style="height: 240upx; padding-top: 80upx;width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;">
<view style="align-items: center;">
<image style="width:160upx;height:160upx;" src="../../static/icon_diy_anime_style.png"
@click="showAiChangeType(1)"></image>
<view style="width:160upx;height:130upx;text-align: center;line-height: 130upx;">动漫风格
</view>
</view>
<view style="align-items: center;margin-left: 100upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_sketch_style.png"
@click="showAiChangeType(2)"></image>
<view style="width:160upx;height:130upx;text-align: center;line-height: 130upx;">素描风格
</view>
</view>
</view>
<view style="height: 240upx; padding-top: 40upx;width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;">
<view style="align-items: center;margin-left: 20upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_matting_style.png"
@click="showAiChangeType(3)"></image>
<view style="width:160upx;height:130upx;text-align: center;line-height: 130upx;">人像抠图</view>
</view>
<view style="align-items: center;margin-left: 100upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_enhance_style.png"
@click="showAiChangeType(4)"></image>
<view style="width:160upx;height:130upx;text-align: center;line-height: 130upx;">色彩增强</view>
</view>
</view>
<view style="height: 240upx; padding-top: 40upx;width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;">
<view style="align-items: center;margin-left: 20upx; width: 50%;">
<image style="width:160upx;height:160upx; margin: auto;"
src="../../static/icon_diy_matting_style.png" @click="showAiChangeType(5)"></image>
<view style="height:130upx;text-align: center;line-height: 130upx;">色彩超分</view>
</view>
<view style="align-items: center;margin-left: 20upx; width: 50%;">
</view>
</view>
<view style="font-size: 30upx;color:#333; width:100%;text-align: center;margin: auto;">
选中的图片必须带有清晰人物头像</view>
</view>
</uni-popup>
<!-- Ai转换 -->
<!-- <uni-popup ref="showAiChange" type="center" style="position: fixed; z-index: 9999; ">
<view style="height: 950upx;border-radius:20upx; background: #fff;width: 600upx;">
<image src="../../static/img/icon_close_image.png" style="width: 30upx;
padding: 30upx;
position: absolute;
right:0;
top:0;
z-index: 999;" mode="widthFix" @click="showAiChangeClose()">
</image>
<view style="height: 360upx; padding-top: 80upx;width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;">
<view style="align-items: center;">
<image style="width:160upx;height:160upx;" src="../../static/icon_diy_anime_style.png"
@click="showAiChangeType(1)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">动漫风格
</view>
</view>
<view style="align-items: center;margin-left: 100upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_sketch_style.png"
@click="showAiChangeType(2)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">素描风格
</view>
</view>
</view>
<view style="height: 360upx; padding-top: 40upx;width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;">
<view style="align-items: center;margin-left: 20upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_matting_style.png"
@click="showAiChangeType(3)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">人像抠图</view>
</view>
<view style="align-items: center;margin-left: 100upx;">
<image style="width:160upx;height:160upx; " src="../../static/icon_diy_enhance_style.png"
@click="showAiChangeType(4)"></image>
<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;">色彩增强</view>
</view>
</view>
<view style="font-size: 30upx;color:#333; width:100%;text-align: center;margin: auto;">选中的图片必须带有清晰人物头像</view>
</view>
</uni-popup> -->
<!--Ai作画 -->
<uni-popup ref="showAiMakePicture" type="center" style="position: fixed; z-index: 9999; width: 200upx">
<view style="width: 700upx; height: 700upx;background: #FFFFFF; border-radius: 10upx; ">
<view style="width:100%;height: 50upx; ">
<image src="../../static/img/icon_close_image.png"
style=" width: 25upx; padding: 20upx; float:right;" mode="widthFix" @click="showAiMakePictureClose()">
</image>
</view>
<view style="font-size: 36upx;font-weight: 600;color: #333333;margin-left: 300upx; margin-top: 20upx;">AI画图</view>
<view style="margin-left: 40upx;margin-top: 60upx;" >给我一段文字，我就能为您绘出一幅画喔~~</view>
<view style="display: flex; align-items: center; justify-content: center; margin-top: 20upx; position: relative;">
<view style="width: 600upx; height: 200upx;
background: #EEEEEE;
border-radius: 10upx;
margin-top: 20upx; margin-left: 40upx;">
<textarea
placeholder="请输入搜索关键字"
@input="aiSearchTextChange"
:value="aiSearchText"
maxlength="250"
style="color: #333333;
font-size: 26upx;
padding-top: 20upx;
padding-left: 20upx;
width: 600upx;
height: 200upx;"/>
</view>
</view>
<view style="margin-left: 0upx; margin-top: 30upx; ">
<radio-group @change="chang" style="transform:scale(0.82)" :name="raido">
<label v-for="item in radioGroup" :key="item">
<radio :value="item" :checked="item==activeRadio" color="#854AC2"
:class="item.checked ? 'sunui-radio-checkd' : ''"/>
{{item}}
</label>
</radio-group>
</view>
<view @click="textToImage()"
style="margin: auto;color: #fff;text-align: center;
line-height: 60upx;
width: 220upx;
height: 70upx;
background: #854AC2;
box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
border-radius: 50upx;
margin-top: 40upx;">确认</view>
</view>
</uni-popup>
<switchGoods ref="switchGoods" @selectGoodItem="selectGoodItem"></switchGoods>
<!--商品弹框 -->
</view>
</view>
</template>
<script>
import homeservice from '@/service/homeservice.js';
import userService from '@/service/UserService';
import uniPopup from './common/uni-popup/uni-popup.vue'
import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue"; // 剪切
import WxTouchEvent from "../../util/wx-touch-event";
import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
import scrollList from './scrollView.vue';
import shapeScrollView from './shapeScrollView.vue';
import textsettings from './textsettings.vue'; // 文本
import Signin from '../index/Signin.vue'; // 登录
import drag from './js/drag.js'; // 封装
import bgColor from './components/bgColor.vue'; // 相框
import myhead from './head/head.vue'; // 页眉
import switchGoods from '../index/switchGoods.vue'; //选择商品
import tuya from './tuya.vue'; //
import client from '../../util/script.js' // 封装全局变量
import {Base64} from "js-base64"
import CryptoJS from 'crypto-js';
/* 色彩公园图片 DIY 功能页 */
var app = getApp(); // 当前APP实例
var items = []; // 当前显示的图片列表
var index = 0; // 所点击的图片的索引
var maxFontSize = 50;
var heightRate = 1.48;
var snapshot = []; // 操作历史记录
var snapshotIndex = -1;
var infoListTouchEvent = new WxTouchEvent(); //在 Page外实例化函数，可以直接复制给 Page 中的回调函数
var textQuery;//文字选择器
export default {
components: {
uniPopup,
kpsImageCutter,
ProgressBar,
scrollList,
shapeScrollView,
Signin,
textsettings,
bgColor,
myhead,
switchGoods,
tuya,
},
computed: {},
data() {
return {
collection_currentId: 0, //点赞选中Id
collection_currentIndex: null, //点赞选中坐标
wallpaper_currentId: 0, //壁纸选中Id
wallpaper_currentIndex: null, //壁纸选中坐标
wallpaper_material_series_currentId: null, //壁纸系列选中
mapping_currentId: 0, //贴图选中Id
mapping_currentIndex: null, //贴图选中坐标
mapping_material_series_currentId: null, //贴纸系列选中
classificationHeight: 0,
backgroundColor: false, //控制底色
Adlists: [],
diy_backList: [],
diy_bannerList: [],
textHeight: null, //设备头部高度
system_config: null, //控制是否上传图片
type: '',
content: '底部弹出 popup',
active: false,
currentId: 0,
/* 控制被选中 */
currentIndex: null,
/* 控制位置 */
currentId_Works: 0,
/* 控制被选中 */
currentIndex_Works: null,
/* 控制位置 */
currentId_Material: 0,
/* 控制被选中 */
currentIndex_Material: null,
/* 控制位置 */
currentId_wallpaper: 0,
/* 控制被选中 */
currentIndex_wallpaper: null,
/* 控制位置 */
material_series_currentId: null,
/* 控制位置 */
brands: [], //贴图分类
e_active: null, //判断弹框是贴图还是文本
addtext: false, //判断加减文字
bg_text_color: false, //判断加减文字
showone: false, //判断图片弹框
showtwo: false, //判断图片弹框
Works_category: [], //作品分类
Material_category: [], //贴图分类
Works_category_id: null, //作品选中分类id
Material_category_id: null, //贴图选中分类
Works_categorydatalist: [], //作品分类作品列表
Material_categorydatalist: [], //贴图分类贴图列表
datalist: [], //作品、贴图列表
queryPage: {
s: '',
page: 1, //分页
per_page: 40, //分页
is_revise: '1', //可调整
is_edit: '1', //模板属性
machine_id: null, //设备id
goods_category_id: null, //星形接口列表增加，产品分类参数
works_category_id: null, //作品选中分类id
material_category_id: null, //贴图壁纸选择值一级分类
material_series_id: null, //贴图壁纸选择值二级分类
is_new: null, //最新
is_hot: null, //热门
goods_id: null, //商品id
is_under: 0, //贴图是否为背景图
partner_id: null
},
works_id: null, //作品id
machine_id: null, //设备id
key: null, //1直营配送站 2 万能通用版 3色彩自助站
design_color: '#fff',
mix_scale: 1, //图片比率
design_width: 240,
design_height: 340,
design_width: 240,
print_height: 340,
design_widthrate: 1, //宽度比率
design_heightrate: 1, //高度比率
guide_left: false, //辅助线
guide_top: false, //辅助线
editor_top: 0, //辅助线距离
center_scale: 0, //设计区中心点比率
location_scale: 0, //辅助线距离
editory: null, //设计区距离
lastTapTime: 0, //判断点击时间间隔
properties: {}, //剪切数据
state: false,
isRotate: false, // 是否是旋转
data: {
user_id: null, //用户id
goods_id: 1, //背景图id
template: null, //源作品id
template_price: null, //源作品sales_price
template_user_id: null, //源作品user_id
works_idlenght: 0, //模板个数
windowWidth: 0, // 屏幕宽度
windowHeight: 0, // 屏幕高度
editorWidth: 0, // 设计宽度
editorHeight: 0, // 设计高度
bgImage: '', // 背景图
bgImage_old: '', // 背景图
bgImage_thumbnail: '', // 介绍图片（主图遮罩）
bgWidth: 0, // 画布宽度
bgHeight: 0, // 画布高度
pixelRate: null,
listActive: true,
currentText: '',
cidx: 0,
itemList: [],
loadbgImageheight: '100%',
loadbgImageheightstate: false, //白底图
},
titlename: "", //自定义头部
sizelist: null, //库存信息
sizetext_id: null,
sizetext: null, //选中配送的尺码
dict_id: null, //属性字典id
channel_no: null, //货道
Workcomponents: null, //订单号
loading: null,
percent: 0, //进度条
shape_image: '', //形状图片
shape_id: '', //形状id
shape_price: '', //形状价格
goods_images_type: 0,
front_image_long: false, //背景图加载完
// 拖拽删除
animationData: {},
animation: null,
deleteTop: 0,
deleteWrap: false,
delete_wrap_state: true,
background_color: null,
translateX: -400,
translateXState: 1,
translateLeft: null,
translateHide: null,
functionHide: null,
transformscale: 0.5, //整体缩小
functionScale: null, //整体缩小
isReady: false, //礼花
//画布
canvasHidden: false, //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
shareImgPath: '', //用于储存canvas生成的图片
isComeDelivery: false, //是否默认进入配送订单
support_pay: null, //单机版是否支付 0不需要支付 1需要支付
material_series_list: [], //系列分类
material_series_currentId: 0,
isShowGif: false, //是否显示
history_bannerList: [] ,//历史banner集合
selectChangeType:1,
aiSearchText: "",//Ai搜索文字
aiStyle: "contemporary style",
activeRadio: '现代风', //存的是单选按钮选中的value值
radioGroup: ['现代风', '卡通风', '铅笔画风'],
upLoadImageUrl: "", //上传图片地址
diy_upload_menu:0,
is_public:0,
is_authority:0,
is_photo:0,
is_recommend:0,
is_home:0
};
},
created() { //设备信息
let app = uni.getSystemInfoSync(); //设备信息
let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); //胶囊信息
this.textHeight = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2
},
methods: {
upLoadIImageLoadErr(e){
uni.showToast({
title: '上传失败',
icon: 'none',
duration: 3000
})
},
upLoadIImageLoad(e) {
if(this.upLoadImageUrl == "" || this.upLoadImageUrl == null ){
return;
}
uni.showToast({
title: '上传成功',
icon: 'none',
duration: 3000
})
var id = e.currentTarget.dataset.id;
var image = {
width : e.detail.width,
height: e.detail.height
}
let width = 0
let height = 0
let top = 0
let lef = 0
let ratio = image.width / image.height
let ratiowidth = (this.data.editorWidth * this.mix_scale) / image.width
let ratioheight = (this.data.editorHeight * this.mix_scale) /image.height
width = this.data.editorWidth * this.mix_scale
height = image.height * ratiowidth
if (height / 2 > this.editor_top) {
width = width * (this.editor_top * 2 / height)
height = this.editor_top * 2
}
this.isShowGif = true;
let index = items.length;
items.push({
support_zoom: 1, // 0是不支持缩放，为1时支持缩放
support_drag: 1, // 0是不支持拖动，为1时支持拖动
is_under: 0, //贴图是否为背景图
is_discount: 0, //贴图是否用卷
id: index + 1,
type: 0, //0为图片，1为文字，2为素材
material_id: 0,
original_id: 0,
index: index,
font_family: '',
font_style: '',
font_size: '',
font_color: '',
under_color: '',
content: this.upLoadImageUrl, // 图片地址
top: this.editor_top - height / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: this.data.editorWidth / 2 - width / 2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: this.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: this.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
angle: 0, // 旋转角度
rotate: 0, // 旋转值
active: false, // 判定点击状态
width: width, // 预设生成图片的宽度
height: height, // 预设生成图片的高度
rScale: 1, // 图片原始缩放比例
// 新增加默认属性
activeguide: false, // 开启辅助线
activescale: false, // 开启旋转状态
activehorn: false, // 开启角状态
activeedge: false, // 开启边状态
initialScale: 1, // 图片缩放比例
initialscaling: 1, // 图片初始时缩放比例
initialScalex: 1, // 图片宽缩放比例
initialScaley: 1, // 图片高缩放比例
initialWidth: width, // 图片原始宽度
initialHeight: height, // 图片原始高度
frame_left: null, // 裁剪窗口x
image_left: null, // 图片x
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
isUpLoadImage: true
})
this.data.itemList = items
this.isUpLoadImage = false;
this.saveSnapshot();
},
chang(e) {
this.activeRadio = e.detail.value; //选中按钮的value值
if(this.activeRadio == "现代风"){
this.aiStyle = "contemporary style";
}else if(this.activeRadio == "卡通风"){
this.aiStyle = "cartoon style";
}else if(this.activeRadio == "铅笔画风"){
this.aiStyle = "pencil art";
}
},
showAiMakePictureStyleType(type){
if(type == 1){
this.aiStyle = "contemporary style";
}else if(type == 2){
this.aiStyle = "cartoon style";
}else if(type == 3){
this.aiStyle = "pencil art";
}
this.showAiMakePictureStyleClose();
this.textToImage();
},
//文字生成图片
textToImage(){
uni.showLoading({
title: '加载中...',
mask: true
})
homeservice.queryList({
s: 'VolcEngine.ViusalTextToImage',
style_term: this.aiStyle,
text: this.aiSearchText,
}).then(result => {
this.showAiMakePictureClose()
var _this = this;
uni.getImageInfo({
src: result.img_url,
success: (image) => {
uni.hideLoading();
let width = 0
let height = 0
let top = 0
let lef = 0
let ratio = image.width / image.height
let ratiowidth = (_this.data.editorWidth * _this.mix_scale) / image.width
let ratioheight = (_this.data.editorHeight * _this.mix_scale) / image.height
width = _this.data.editorWidth * _this.mix_scale
height = image.height * ratiowidth
let index = items.length;
items.push({
support_zoom: 1, // 0是不支持缩放，为1时支持缩放
support_drag: 1, // 0是不支持拖动，为1时支持拖动
is_under: 0, //贴图是否为背景图
is_discount: 0, //贴图是否用卷
id: index + 1,
type: 2, //0为图片，1为文字，2为素材
material_id: 0,
original_id: 0,
index: index,
font_family: '',
font_style: '',
font_size: '',
font_color: '',
under_color: '',
content: result.img_url, // 图片地址
top: _this.editor_top -
height /
2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: _this.data.editorWidth /
2 - width /
2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: _this.data.editorWidth /
2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: _this.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
angle: 0, // 旋转角度
rotate: 0, // 旋转值
active: false, // 判定点击状态
width: width, // 预设生成图片的宽度
height: height, // 预设生成图片的高度
rScale: 1, // 图片原始缩放比例
// 新增加默认属性
activeguide: false, // 开启辅助线
activescale: false, // 开启旋转状态
activehorn: false, // 开启角状态
activeedge: false, // 开启边状态
initialScale: 1, // 图片缩放比例
initialscaling: 1, // 图片初始时缩放比例
initialScalex: 1, // 图片宽缩放比例
initialScaley: 1, // 图片高缩放比例
initialWidth: width, // 图片原始宽度
initialHeight: height, // 图片原始高度
frame_left: null, // 裁剪窗口x
image_left: null, // 图片x
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
isUpLoadImage: false
})
_this.data.itemList = items
_this.saveSnapshot();
}
});
}).catch(err => {
this.showAiMakePictureClose()
uni.showToast({
title: '暂无Ai画像',
icon: 'none'
});
});
},
aiSearchTextChange(event) {
this.aiSearchText = event.detail.value
return this.aiSearchText;
},
showAiMakePictureClose() {
this.$refs["showAiMakePicture"].close();
},
openAiMakePicture() {
this.$refs["showAiMakePicture"].open();
},
showAiChangeClose() {
this.selectChangeType = 1;
this.$refs["showAiChange"].close();
},
//显示Ai转换
showAiChange() {
if(this.data == null ){
uni.showToast({
icon: "none",
title: "请上传人物图片",
duration: 2000
});
return
}
if(this.data.itemList == null || this.data.itemList.length == 0){
uni.showToast({
icon: "none",
title: "请上传人物图片",
duration: 2000
});
return
}
if(this.data.itemList[this.data.itemList.length-1].type == 0 && this.data.itemList[this.data.itemList.length-1].isUpLoadImage){
this.selectChangeType = 1;
this.$refs["showAiChange"].open();
}else{
uni.showToast({
icon: "none",
title: "Ai必须是上传图片类型",
duration: 2000
});
}
},
showAiChangeType(type) {
this.selectChangeType = type
this.changeHumanPortrait();
},
//人画像
changeHumanPortrait() {
var item = this.data.itemList[this.data.cidx];
if (item == null) {
return
}
let imageUrl = item.content + "?x-oss-process=image/resize,lfit,w_1000";
if (item.isChangeAi) {
imageUrl = item.contentOld + "?x-oss-process=image/resize,lfit,w_1000";
}
uni.showLoading({
title: 'AI图像处理中...',
mask: true
})
setTimeout(function() {
uni.hideLoading();
}, 6000);
let that = this;
this.getOssStsToken(function(result) {
wx.downloadFile({
url: imageUrl,
success: function(res) {
if (res.statusCode === 200) {
that.uploadToTempOss(result.Data, res.tempFilePath, ".jpg",
function(resultImage) {
client.callRecognizeBankCard(resultImage, wx, that.selectChangeType,
function(result) {
uni.hideLoading();
if (result.Code) {
uni.showToast({
icon: "none",
title: "处理失败！图片中无清晰的真人头像",
duration: 2000
});
} else {
if (result.Data) {
//let imageURL = result.Data.ImageURL;
let imageURL;
if (that.selectChangeType == 5) {
imageURL = result.Data.Url;
} else {
imageURL = result.Data.ImageURL;
}
imageURL = imageURL.replace("http:",
"https:")
if (!item.isChangeAi) {
item.contentOld = item.content;
}
item.content = imageURL;
item.isChangeAi = true
that.data.itemList[that.data.cidx];
}
}
that.$refs["showAiChange"].close();
}.bind(this));
}
);
}
}
})
})
},
getOssStsToken(callback) {
//这里endpoint为API访问域名，与类目相关，具体类目的API访问域名请参考：https://help.aliyun.com/document_detail/143103.html
const endpoint = "viapiutils.cn-shanghai.aliyuncs.com";
const Action = "GetOssStsToken";
//API_VERSION为API版本，与类目相关，具体类目的API版本请参考：https://help.aliyun.com/document_detail/464194.html
const API_VERSION = "2020-04-01";
const API_HTTP_METHOD = "POST";
const request_ = {};
//系统参数
request_["SignatureMethod"] = "HMAC-SHA1";
request_["SignatureNonce"] = client.signNRandom();
request_["AccessKeyId"] = "LTAI5tDPiEBZgfqNcWBqaFEc";
request_["SignatureVersion"] = "1.0";
request_["Timestamp"] = client.getTimestamp();
request_["Format"] = "JSON";
request_["RegionId"] = "cn-shanghai";
request_["Version"] = API_VERSION;
request_["Action"] = Action;
const url = client.generateUrl(request_, API_HTTP_METHOD, endpoint, "amI84BLFbHz6dhOVbuArrERmeemmnx");
wx.request({
url: url,
method: 'POST',
header: {
"ContentType": "application/json"
},
success: (result) => {
//获取结果
return typeof callback == "function" && callback(result.data)
},
fail: (error) => {
//获取报错信息
return typeof callback == "function" && callback(error.data)
}
})
},
//使用oss-client-sdk进行文件上传
uploadToTempOss(ossStsToken, tempFilePath, fileName, callback) {
const host = 'https://viapi-customer-temp.oss-cn-shanghai.aliyuncs.com';
let formDataParams = this.getFormDataParams(ossStsToken.AccessKeyId, ossStsToken.AccessKeySecret,ossStsToken.SecurityToken);
const signature = formDataParams.signature;
const ossAccessKeyId = ossStsToken.AccessKeyId;
const policy = formDataParams.policy;
const key = "LTAI5tDPiEBZgfqNcWBqaFEc" + '/' + this.getNonce(6) + '/' + fileName;
const securityToken = formDataParams['x-oss-security-token'];
wx.uploadFile({
url: host, // 开发者服务器的URL。
filePath: tempFilePath,
name: 'file', // 必须填file。
formData: {
'key': key,
'OSSAccessKeyId': ossAccessKeyId,
'policy': policy,
'Signature': signature,
'x-oss-security-token': securityToken
},
success: (res) => {
if (res.statusCode === 204 || res.statusCode === '204') {
let result = 'https://viapi-customer-temp.oss-cn-shanghai.aliyuncs.com/' + key;
callback && callback(result);
} else {
//console.log('upload error', res);
}
},
fail: err => {
//console.log(err);
}
});
},
//随机字符串
getNonce(length) {
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var result = '';
for (var i = length; i > 0; --i) {
result += str[Math.floor(Math.random() * str.length)];
}
return result;
},
//计算上传OSS的计算签名
getFormDataParams(stsAccessKeyId, stsAccessKeySecret, securityToken) {
const date = new Date();
date.setHours(date.getHours() + 1);
const policyText = {
expiration: date.toISOString(), // 设置policy过期时间。
conditions: [
// 限制上传大小。
["content-length-range", 0, 1024 * 1024 * 1024],
],
};
const policy = Base64.encode(JSON.stringify(policyText)) // policy必须为base64的string。
const signature = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA1(policy, stsAccessKeySecret));
const formData = {
OSSAccessKeyId: stsAccessKeyId,
signature,
policy,
'x-oss-security-token': securityToken
}
return formData
},
//点击显示动画
oclikGifImage() {
this.isShowGif = false;
},
//涂鸦
ontuya() {
this.$nextTick(() => {
this.$refs['tuya'].open({
data: this.data
})
})
},
//添加涂鸦
tuyaimg(e) {
this.e_active = 0
let index = items.length;
items.push({
support_zoom: 1, // 0是不支持缩放，为1时支持缩放
support_drag: 1, // 0是不支持拖动，为1时支持拖动
is_under: 0, //贴图是否为背景图
is_discount: 0, //贴图是否用0
id: index + 1,
type: 2, //0为图片，1为文字，2为素材
material_id: 0,
original_id: 0,
index: index,
font_family: '',
font_style: '',
font_size: '',
font_color: '',
under_color: '',
content: e, // 图片地址
top: this.editor_top - this.data.editorHeight / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: this.data.editorWidth / 2 - this.data.editorWidth /
2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: this.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: this.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
angle: 0, // 旋转角度
rotate: 0, // 旋转值
active: false, // 判定点击状态
width: this.data.editorWidth, // 预设生成图片的宽度
height: this.data.editorHeight, // 预设生成图片的高度
rScale: 1, // 图片原始缩放比例
// 新增加默认属性
activeguide: false, // 开启辅助线
activescale: false, // 开启旋转状态
activehorn: false, // 开启角状态
activeedge: false, // 开启边状态
initialScale: 1, // 图片缩放比例
initialscaling: 1, // 图片初始时缩放比例
initialScalex: 1, // 图片宽缩放比例
initialScaley: 1, // 图片高缩放比例
initialWidth: this.data.editorWidth, // 图片原始宽度
initialHeight: this.data.editorHeight, // 图片原始高度
frame_left: null, // 裁剪窗口x
image_left: null, // 图片x
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
})
this.data.itemList = items
this.saveSnapshot();
this.$refs['showshare'].close()
this.delete_wrap_state = true
},
//切换商品
changeGoods() {
this.$refs['switchGoods'].open(this.machine_id);
},
//选择商品进来
selectGoodItem(item) {
items = [];
this.data.itemList = [];
this.data.goods_id = item.id;
snapshot = []; // 操作历史记录清空
snapshotIndex = -1;
// 获取产品详情数据
this.goodslist()
},
//壁纸推荐
wallpaperOnclick() {
this.isShowGif = false;
var that = this
homeservice.queryList({
s: 'Material.randomMaterial',
machine_id: that.machine_id,
goods_id: that.data.goods_id
}).then(result => {
uni.showLoading({
title: '加载中...',
mask: true
})
//读取主图遮罩
uni.getImageInfo({
src: result.url,
success: (image) => {
//清空历史记录
items = []; // 当前显示的图片列表
index = 0; // 所点击的图片的索引
snapshot = []; // 操作历史记录清空
snapshotIndex = -1;
uni.hideLoading()
let index = items.length;
let width = 0
let height = 0
let top = 0
let lef = 0
let ratio = image.width / image.height
let ratiowidth = (that.data.editorWidth * that.mix_scale) / image.width
let ratioheight = (that.data.editorHeight * that.mix_scale) / image.height
let resultmix_scale = result.mix_scale || 1
// if (ratio >= 1) { //长方形
width = that.data.editorWidth * that.mix_scale * resultmix_scale
height = image.height * ratiowidth * resultmix_scale
// } else if (ratio < 1) { //长高方形
// height = that.data.editorHeight * that.mix_scale * resultmix_scale
// width = image.width * ratioheight * resultmix_scale
// }
if (result.is_under == 1) { //贴图是否为背景图
let number_index = 0
for (var item of items) {
if (item.is_under == 0) {
item.index = item.index + 1;
} else if (item.is_under == 1) {
number_index++
}
}
index = number_index
}
items.push({
support_zoom: result.support_zoom, // 0是不支持缩放，为1时支持缩放
support_drag: result.support_drag, // 0是不支持拖动，为1时支持拖动
is_under: result.is_under, //贴图是否为背景图
is_discount: result.is_discount, //贴图是否用卷
id: items.length + 1,
type: 2, //0图片 1文字 2贴图
material_id: result.id, //贴图id
original_id: result.id,
index: index,
font_family: '',
font_style: '',
font_size: '',
font_color: '',
under_color: '',
content: result.url, // 贴图地址
top: that.editor_top - height / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: that.data.editorWidth / 2 - width / 2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: that.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: that.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
angle: 0, // 旋转角度
rotate: 0, // 旋转值
active: false, // 判定点击状态
width: width, // 预设生成图片的宽度
height: height, // 预设生成图片的高度
rScale: 1, // 贴图原始缩放比例
activeguide: false, // 开启辅助线
activescale: false, // 开启旋转状态
activehorn: false, // 开启角状态
activeedge: false, // 开启边状态
// 分界线
initialScale: 1, // 图片缩放比例
initialscaling: 1, // 图片初始时缩放比例
initialScalex: 1, // 图片宽缩放比例
initialScaley: 1, // 图片高缩放比例
initialWidth: width, // 图片原始宽度
initialHeight: height, // 图片原始高度
frame_left: null, // 裁剪窗口x
image_left: null, // 图片x
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
})
//赋值
that.data.itemList = items
that.saveSnapshot();
uni.hideLoading()
},
fail: function(err) {
uni.hideLoading()
uni.showToast({
title: '暂无智能推荐',
icon: 'none'
});
}
})
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
},
drawImg(e, res) {
this.showtwo = true
},
//解决滚动穿透问题
// myCatchTouch() {
// return
// },
// 替换图片
// addItemreplace() {
// this.replaceimage()
// },
replaceimage() {
this.$refs['replacebottom'].close()
let item = items[index];
var _this = this
uni.chooseImage({
sizeType: ['original'], //可以指定是original原图还是compressed压缩图，默认二者都有
sourceType: ['camera', 'album'], //从相册选择
count: 1,
success: (res) => {
let tempFilePaths = res.tempFilePaths;
var size = res.tempFiles[0].size;
var path = res.tempFiles[0].path;
var formatImage = path.split(".")[(path.split(".")).length - 1];
if (formatImage != "png" && formatImage != "jpg" && formatImage != "jpeg") {
return wx.showToast({
title: '只能上传.png、.jpg、.jpep 格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
let machine_id = _this.machine_id || 0
let user_id = userService.getUserInfo().id || 0
wx.request({
url: _this.$Env.getDevBaseURL() + '/api/AliossSign/getSign?machine_id=' +
machine_id + '&user_id=' + user_id,
method: 'GET',
data: '',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
success: function(res) {
//这里是进度条
_this.percent = 0
var atter = res.data
let time = new Date().getTime() + Math.floor((Math.random() *
1000) + 1)
var uploadTask = wx.uploadFile({
url: atter.host.replace("http:", "https:"),
filePath: tempFilePaths[0],
name: 'file',
formData: {
'key': atter.dir + time + '.jpg',
'OSSAccessKeyId': atter.accessid,
'policy': atter.policy,
'Signature': atter.signature,
'success_action_status': '200',
'callback': atter.callback,
},
success: function(res) {
if (res.statusCode != 200) {
// console.log({errCode: '599', msg:'其他错误'})
return;
}
if (res.statusCode == 200) {
_this.percent = 100
uni.showToast({
title: '上传成功',
icon: 'none',
duration: 3000
})
// console.log(atter.host + '/' + atter.dir + time + '.jpg')
uni.getImageInfo({
src: tempFilePaths[0],
success: (image) => {
// 替换图片的算法：
// 图片的宽为W1，高为 H1 , 图片宽高比为： R1 = W1/H1
// 外框的宽为W2，高为 H2 , 外框宽高比为： R2 = W2/H2
// 当R1 > R2, 放入的图片宽度要适应外框的宽W2, 图片高度需要裁剪
// 当R1 < R2, 放入的图片宽度要适应外框的高H2, 图片宽度需要裁剪
let W1 = item.width
let H1 = item.height
let W2 = image.width
let H2 = image.height
let R1 = W1 / H1
let R2 = W2 / H2
// 替换图片，初始值
item.image_left = 0
item.image_top = 0
item.initialScale = 1
item.initialscaling = 1
item.initialScalex = 1
item.initialScaley = 1
if (R1 > R2) {
item.replace = 1
item.content =
atter.host +
'/' + atter
.dir + time +
'.jpg'
item.initialWidth =
item.width
item.initialHeight =
W1 / W2 * image
.height
item.image_top = -(
W1 / W2 *
image
.height -
H1) / 2
} else if (R1 < R2) {
item.replace = 1
item.content =
atter.host +
'/' + atter
.dir + time +
'.jpg'
item.initialHeight =
item.height
item.initialWidth =
H1 / H2 * image
.width
item.image_left = -
(H1 / H2 *
image
.width - W1
) / 2
} else {
item.content =
atter.host +
'/' + atter
.dir + time +
'.jpg'
}
item.type =
0 //0为图片，1为文字，2为素材
if (item.works_id !=
undefined) {
if (item.works_id >
0) {
_this.data
.works_idlenght--
item.material_id =
0
item.original_id =
0
item.works_id =
0
}
} else {
item.original_id =
0
item.material_id =
0
}
}
});
}
},
fail: function(err) {
wx.showToast({
title: '上传失败！',
icon: 'none',
duration: 1200
})
},
complete: function(err) {
}
})
uploadTask.onProgressUpdate((res) => {
_this.percent = res.progress - 1
})
}
})
}
})
},
/* 上传图片 */
addItem: async function(e) {
this.showone = false
var _this = this
uni.chooseImage({
sizeType: ['original'], //可以指定是original原图还是compressed压缩图，默认二者都有
sourceType: ['camera', 'album'], //从相册选择
count: 1,
success: (res) => {
let tempFilePaths = res.tempFilePaths;
var size = res.tempFiles[0].size;
var path = res.tempFiles[0].path;
var formatImage = path.split(".")[(path.split(".")).length - 1];
if (formatImage != "png" &&
formatImage != "jpg" &&
formatImage != "jpeg" &&
formatImage != "webp" &&
formatImage != "gif" &&
formatImage != "bmp" &&
formatImage != "tiff" &&
formatImage != "tif"
) {
return uni.showToast({
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length,formatImage);
}
})
},
/* 上传图片拍照 */
addItemFromCamera: async function(e) {
this.showone = false
var _this = this
uni.chooseImage({
sizeType: ['original'], //可以指定是original原图还是compressed压缩图，默认二者都有
sourceType: ['camera'], //从相册选择
count: 1,
success: (res) => {
this.$refs['showpicture'].close();
//console.log(res.tempFilePaths)
let tempFilePaths = res.tempFilePaths;
// let tempFilePaths = 'http://ws.colorpark.cn/static/alioss/images/icon_picture.png';
var size = res.tempFiles[0].size;
var path = res.tempFiles[0].path;
var formatImage = path.split(".")[(path.split(".")).length - 1];
if (formatImage != "png" &&
formatImage != "jpg" &&
formatImage != "jpeg" &&
formatImage != "webp" &&
formatImage != "gif" &&
formatImage != "bmp" &&
formatImage != "tiff" &&
formatImage != "tif"
) {
return wx.showToast({
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length,formatImage);
}
})
},
/* 上传图片从相册 */
addItemFromAlbum: async function(e) {
this.showone = false
var _this = this
uni.chooseImage({
sizeType: ['original'], //可以指定是original原图还是compressed压缩图，默认二者都有
sourceType: ['album'], //从相册选择
count: 1,
success: (res) => {
this.$refs['showpicture'].close();
//console.log(res.tempFilePaths)
let tempFilePaths = res.tempFilePaths;
// let tempFilePaths = 'http://ws.colorpark.cn/static/alioss/images/icon_picture.png';
var size = res.tempFiles[0].size;
var path = res.tempFiles[0].path;
var formatImage = path.split(".")[(path.split(".")).length - 1];
if (formatImage != "png" &&
formatImage != "jpg" &&
formatImage != "jpeg" &&
formatImage != "webp" &&
formatImage != "gif" &&
formatImage != "bmp" &&
formatImage != "tiff" &&
formatImage != "tif"
) {
return wx.showToast({
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length,formatImage);
}
})
},
/* 上传图片重微信 */
addItemFromeWx: async function() {
this.showone = false
var _this = this
uni.chooseMessageFile({
type: 'image',
count: 1,
success: (res) => {
this.$refs['showpicture'].close();
let tempFilePaths = res.tempFiles;
//let tempFilePaths = 'http://ws.colorpark.cn/static/alioss/images/icon_picture.png';
var size = res.tempFiles[0].size;
var path = res.tempFiles[0].path;
tempFilePaths[0] = path;
//let tempFilePaths =res.tempFiles.path;
//var size = res.tempFiles.size;
//console.log("微信上传图片" + tempFilePaths + size + path)
var formatImage = path.split(".")[(path.split(".")).length - 1];
if (formatImage != "png" &&
formatImage != "jpg" &&
formatImage != "jpeg" &&
formatImage != "webp" &&
formatImage != "gif" &&
formatImage != "bmp" &&
formatImage != "tiff" &&
formatImage != "tif"
) {
return wx.showToast({
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length,formatImage);
}
})
},
//选择微信相片跟本地相册弹框
selectPicturePop() {
this.delete_wrap_state = false
this.showone = false
this.$refs['showpicture'].open()
},
//选择微信相片跟本地相册弹框取消
selectPicturePopColse() {
//this.delete_wrap_state = false
this.showone = false
this.$refs['showpicture'].close();
},
/* 函数描述：作为上传文件时递归上传的函数体体；
* 参数描述：
* filePaths是文件路径数组
* successUp是成功上传的个数->0
* failUp是上传失败的个数->0
* i是文件路径数组的指标->0
* length是文件路径数组的长度
* machine_id=user_id=
*/
uploadDIY(tempFilePaths, successUp, failUp, i, length,formatImage) {
let machine_id = this.machine_id || 0
let user_id = userService.getUserInfo().id || 0
var _this = this
wx.request({
url: _this.$Env.getDevBaseURL() + '/api/AliossSign/getSign?machine_id=' + machine_id +
'&user_id=' + user_id,
method: 'GET',
data: '',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
success: function(res) {
//这里是进度条
_this.percent = 0
var atter = res.data
let time = new Date().getTime() + Math.floor((Math.random() * 1000) + 1)
var uploadTask = wx.uploadFile({
url: atter.host.replace("http:", "https:"),
filePath: tempFilePaths[i],
name: 'file',
formData: {
'key': atter.dir + time + '.' + formatImage,
'OSSAccessKeyId': atter.accessid,
'policy': atter.policy,
'Signature': atter.signature,
'success_action_status': '200',
'callback': atter.callback,
},
success: function(res) {
successUp++;
if (res.statusCode != 200) {
// console.log({errCode: '599', msg:'其他错误'})
return;
}
if (res.statusCode == 200) {
_this.percent = 100
_this.percent = 100
var imageUrl = atter.host + '/' + atter.dir + time + '.' + formatImage;
_this.upLoadImageUrl = imageUrl
console.log(_this.upLoadImageUrl);
if (formatImage == "bmp" ||
formatImage == "tiff" ||
formatImage == "tif"){
_this.upLoadImageUrl = imageUrl + "?x-oss-process=image/format,png"
}
/* uni.showToast({
title: '上传成功',
icon: 'none',
duration: 3000
})
uni.getImageInfo({
src: tempFilePaths[i],
success: (image) => {
let width = 0
let height = 0
let top = 0
let lef = 0
let ratio = image.width / image.height
let ratiowidth = (_this.data.editorWidth *
_this.mix_scale) / image.width
let ratioheight = (_this.data.editorHeight * _this.mix_scale) / image.height
width = _this.data.editorWidth * _this.mix_scale
height = image.height * ratiowidth
_this.isShowGif = true;
let index = items.length;
items.push({
support_zoom: 1, // 0是不支持缩放，为1时支持缩放
support_drag: 1, // 0是不支持拖动，为1时支持拖动
is_under: 0, //贴图是否为背景图
is_discount: 0, //贴图是否用卷
id: index + 1,
type: 0, //0为图片，1为文字，2为素材
material_id: 0,
original_id: 0,
index: index,
font_family: '',
font_style: '',
font_size: '',
font_color: '',
under_color: '',
content: atter.host + '/' +
atter.dir + time +
'.jpg', // 图片地址
top: _this.editor_top -
height /
2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: _this.data.editorWidth /
2 - width /
2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: _this.data.editorWidth /
2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: _this.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
angle: 0, // 旋转角度
rotate: 0, // 旋转值
active: false, // 判定点击状态
width: width, // 预设生成图片的宽度
height: height, // 预设生成图片的高度
rScale: 1, // 图片原始缩放比例
// 新增加默认属性
activeguide: false, // 开启辅助线
activescale: false, // 开启旋转状态
activehorn: false, // 开启角状态
activeedge: false, // 开启边状态
initialScale: 1, // 图片缩放比例
initialscaling: 1, // 图片初始时缩放比例
initialScalex: 1, // 图片宽缩放比例
initialScaley: 1, // 图片高缩放比例
initialWidth: width, // 图片原始宽度
initialHeight: height, // 图片原始高度
frame_left: null, // 裁剪窗口x
image_left: null, // 图片x
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
isUpLoadImage:true
})
_this.data.itemList = items
_this.saveSnapshot();
}
}); */
}
// console.log(atter.host + '/' + atter.dir + time + '.jpg')
},
fail: function(err) {
failUp++;
wx.showToast({
title: '上传失败！',
icon: 'none',
duration: 1200
})
},
complete: function(err) {
// console.log('总共' + successUp + '张上传成功,' + failUp + '张上传失败！');
}
})
uploadTask.onProgressUpdate((res) => {
// console.log('上传进度', res.progress + " " + new Date())// console.log('已经上传的数据长度', res.totalBytesSent)// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
_this.percent = res.progress - 1
})
}
})
},
// 移除遮罩形状
empty() {
if (this.shape_image != '') {
uni.showToast({
title: '形状已移除',
icon: 'none'
});
}
this.$refs['showshare'].close()
this.shape_image = ''
this.shape_id = ''
this.shape_price = ''
this.delete_wrap_state = true
},
// 替换图片取消
cancel_replace() {
this.$refs['replacebottom'].close()
},
/*生成作品*/
createWorks(e) {
this.isShowGif = false;
var that = this
if (this.$base.isclick == true) {
this.$base.isclick = false;
this.$refs['textsettingsshare'].close()
// 获取商品库存信息
homeservice.WorksList({
s: 'machine.getProductAttribute',
goods_id: this.data.goods_id
}).then(res => {
this.sizelist = res
if (this.sizelist.length > 0) {
this.sizetext_id = this.sizelist[0].goods_id
this.sizetext = this.sizelist[0].title
this.dict_id = this.sizelist[0].dict_id
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
var that = this
if (this.machine_id != undefined && this.machine_id != null && this.machine_id != '') {
//判断设备是否正常
that.isComeDelivery = false;
//判断设备是否正常
homeservice.WorksList({
s: 'machine.detail',
//s: 'machine.newDetail',
machine_id: this.machine_id
}).then(res => {
that.machine_item = res
that.is_authority = res.is_authority
that.is_photo = res.is_photo
that.is_recommend = res.is_recommend
that.is_home = res.is_home
//判断配送版
if (res.delivery == 1 && res.machine_category_id == "64") {
//this.key = 1;
this.isComeDelivery = true;
} //key:null,//1直营配送站 2 万能通用版 3色彩自助站
//that.diy_upload_menu = that.machine_item.diy_upload_menu
//that.support_pay = res.support_pay //单机版是否支付
//that.is_public = res.is_public
that.diy_upload_menu = res.diy_upload_menu;
that.is_public = res.is_public;
that.support_pay = res.support_pay
// 先登陆
uni.login({
provider: 'weixin',
success: (weixinres) => {
userService.login({
s: 'Init.init',
code: weixinres.code,
appcode: that.$Env.getappcode()
}).then(r => {
that.createWorks_one(e)
}).catch(err => {
that.$refs.Signin.init();
});
},
fail: (weixinres) => {
uni.showToast({
title: weixinres.msg,
icon: 'none'
})
}
});
}).catch(err => {
uni.showToast({
title: '当前打印站正在维护',
icon: 'none'
});
});
} else {
uni.showToast({
title: '啊嘞，色彩定制站必须扫码才能使用',
icon: 'none'
});
}
//定时器
setTimeout(function() {
that.$base.isclick = true;
}, 1500);
}
},
//创建订单
createWorks_one(e) {
let pixelRate = this.data.pixelRate;
let components = [];
let scalePos = {};
let width = 0.00;
let height = 0.00;
let left = 0.00;
let top = 0.00;
// 循环当前的组件数据
for (var item of this.data.itemList) {
item.rotate = item.angle
width = (item.width * item.scale) / pixelRate;
height = (item.height * item.scale) / pixelRate;
if (item.scale == 1) {
scalePos = this.calNoScalePos(item.left, item.top, item.width, item.height);
left = item.left / pixelRate;
top = item.top / pixelRate;
} else {
scalePos = this.calScalePos(item.scale, item.left, item.top, item.width, item.height);
left = scalePos.leftTopX / pixelRate;
top = scalePos.leftTopY / pixelRate;
}
if (item.rotate != 0) {
scalePos = this.calRocatePos(scalePos, {
x: item.x,
y: item.y
}, item.rotate);
}
var comlist = {
support_zoom: item.support_zoom, // 0是不支持缩放，为1时支持缩放
support_drag: item.support_drag, // 0是不支持拖动，为1时支持拖动
is_under: item.is_under ? item.is_under : 0, //贴图是否为背景图
is_discount: item.is_discount ? item.is_discount : 0, //贴图是否用卷
id: item.idone ? item.idone : null,
type: item.type,
material_id: item.material_id,
works_id: item.works_id ? item.works_id : null,
original_id: item.original_id,
index: item.index,
font_family: item.font_family + '.ttf',
font_dict_id: item.font_dict_id,
//font_style: item.font_style == "normal" ? "regular" : "bold",
font_style: "regular",
font_size: item.font_size / pixelRate / this.design_widthrate,
font_color: item.font_color,
under_color: item.under_color ? item.under_color : "#00000000",
width: width / this.design_widthrate,
height: height / this.design_heightrate,
top: top / this.design_heightrate,
left: left / this.design_widthrate,
zoom: item.scale,
rotate: item.rotate,
content: item.content,
upper_left_x: scalePos.leftTopX / pixelRate / this.design_widthrate,
upper_left_y: scalePos.leftTopY / pixelRate / this.design_heightrate,
upper_right_x: scalePos.rightTopX / pixelRate / this.design_widthrate,
upper_right_y: scalePos.rightTopY / pixelRate / this.design_heightrate,
lower_left_x: scalePos.leftBottomX / pixelRate / this.design_widthrate,
lower_left_y: scalePos.leftBottomY / pixelRate / this.design_heightrate,
lower_right_x: scalePos.rightBottomX / pixelRate / this.design_widthrate,
lower_right_y: scalePos.rightBottomY / pixelRate / this.design_heightrate,
center_x: item.x / pixelRate / this.design_widthrate,
center_y: item.y / pixelRate / this.design_heightrate,
}
// type: 0, //0为图片，1为文字，2为素材
if (item.type == 0) {
// 新添加的参数
comlist.image_left = item.image_left ? (item.image_left + item.left) / pixelRate / this
.design_widthrate : (left / this.design_widthrate) // 图片的x
comlist.image_top = item.image_top ? (item.image_top + item.top) / pixelRate / this
.design_heightrate : (top / this.design_heightrate) // 图片的y
comlist.image_width = item.initialWidth * item.initialScale / pixelRate / this
.design_widthrate // 图片宽度
comlist.image_height = item.initialHeight * item.initialScale / pixelRate / this
.design_heightrate // 图片高度
}
// 创建组件数据
components.push(comlist);
this.Workcomponents = components
}
if (this.data.works_idlenght == 0 && this.works_id == null) {
this.data.template = null //源作品id
this.data.template_price = null //源作品sales_price
this.data.template_user_id = null //源作品user_id
}
this.loading = false
if (this.loading) return;
if (components.length <= 0) {
uni.showToast({
title: '啊嘞，作品还是一片荒漠！',
icon: 'none'
});
return false;
}
this.loading = true
if (this.loading) {
uni.showLoading({
title: '色彩正在绘制',
mask: true
})
homeservice.cheshi({
s: 'Works.save',
components: this.Workcomponents,
works_id: this.works_id,
goods_id: this.data.goods_id,
template: this.data.template, //源作品id
template_price: this.data.template_price, //源作品sales_price
template_user_id: this.data.template_user_id, //源作品user_id
user_id: this.data.user_id,
platform: 3,
shape_image: this.shape_image, //形状图片
shape_id: this.shape_id, //形状id
shape_price: this.shape_price, //形状价格
machine_id: this.machine_id, //设备idmachine_id
background_color: this.background_color, //手机壳背景颜色
}).then(result => {
uni.hideLoading();
uni.showToast({
title: '作品绘制成功',
icon: 'none',
mask: true
});
homeservice.setCate({
goodid: result.id,
machine_id: this.machine_id,
goods_id: this.data.goods_id,
goods_images_type: 0, //0 主图，1 副图
})
this.goods_images_type = 0
/*if(this.support_pay == 1){
uni.navigateTo({
url: '../mine/order?goodid=' + result.id +
'&machine_id=' + this.machine_id +
'&goods_id=' + this.data.goods_id +
'&sn=' + this.sn
})
}else{ */
this.self_help(this.loading, result.id)
/* } */
}).catch(err => {
uni.hideLoading();
this.loading = false;
uni.showModal({
title: '提示',
showCancel: false,
content: '网络超时，请重试！',
success: function() {}
});
});
}
},
self_help(loading, works_id) {
let data = {
s: 'Order.create',
type: this.key, //1：配送版，2：单机版，3：自助版
machine_id: this.machine_id, //设备
goods_id: this.data.goods_id, //产品
works_id: works_id, //作品
channel_no: this.channel_no, //货道
dict_id: this.dict_id, //属性字典id
goods_size: this.sizetext, //产品尺寸
works_num: null, //作品数量
shop_id: null, //商铺
sn: null, //前端查询标志
coupon_id: null, //优惠券id，支付多个id( 1-2-3)
user_address: null, //收货地址
goods_images_type: this.goods_images_type
}
uni.showLoading({
title: '正在生成订单...',
mask: true
})
homeservice.WorksList(data).then(result => {
uni.navigateTo({
url: '../mall/lineUp?machine_id=' + this.machine_id + '&key=' + this.key
})
uni.hideLoading();
}).catch(err => {
this.loading = false;
uni.hideLoading();
uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
});
},
onok(item) {
this.state = false
//赋值就移动了
items[index] = item
// 初始化的位置
drag.initPos(items[index])
drag.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos, item)
this.data.itemList = items
},
oncancle() {
this.state = false
},
touchMove(ev) {
ev.preventDefault();
// 获取当前选中的部件
var item = items[index];
// 点击
if (ev.touches.length == 1 && item != undefined) {
if (item.typetext == "left-top" || item.typetext == "left-bottom" || item.typetext == "right-top" ||
item.typetext == "right-bottom") {
// 四角缩放
drag.scaleMove(ev, item, this.data)
} else if (item.typetext == "left" || item.typetext == "right" || item.typetext == "top" || item
.typetext == "bottom") {
// 四边伸缩
drag.edgeMove(ev, item, this.data)
}
} else if (ev.touches.length == 2 && ev.touches.length == 2) {
// 双指头操作
}
},
touchEnd(ev) {
// 获取当前选中的部件
var item = items[index];
if (item != undefined) {
item.typetext = null
}
},
// 边框移动
edgeStart(e, type) {
//获取当前选中的部件
var item = items[index];
item.typetext = type //判断边框
//获取作为移动前坐标
item.edgestartX = e.touches[0].clientX;
item.edgestartY = e.touches[0].clientY;
//记录坐标
item.scaleone = item.width / item.height
item.initCenterPos = item.centerPos
// 获取编辑框的左边距和上边距
var mLeft = this.getLeft();
var mTop = this.getTop();
item.mLeft = mLeft
item.mTop = mTop
drag.recordPressDownData(item);
},
// 边框移动结束
edgeEnd(e) {
// 获取当前选中的部件
var item = items[index];
item.typetext = null
//属性
item.active = true //辅助线
item.activeguide = false //辅助线
item.activescale = true // 旋转状态
item.activehorn = true // 角状态
item.activeedge = true // 边状态
//赋值
// this.data.listActive = false
drag.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos, item)
this.saveSnapshot();
},
designcolor(e) { //切换背景图
snapshot = []; // 操作历史记录清空
snapshotIndex = -1;
this.data.goods_id = e.id
// 获取产品详情数据
this.goodslist()
},
// 获取作品详情
Worksdetail(item) {
this.delete_wrap_state = true
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
}
this.$refs['showshare'].close()
var that = this
if (this.e_active == 1) {
if (items.length > 0) { //模板
uni.showModal({
title: '温馨提示',
content: '更换当前模版会清空DIY区域内容，确认要更新吗？',
cancelText: '取消',
confirmText: '确定',
confirmColor: '#ff3b32',
success: async function(res) {
if (res.confirm) {
that.Worksdetaildata(item)
} else if (res.cancel) {
}
}
});
} else {
that.Worksdetaildata(item)
}
} else if (this.e_active == 2 || this.e_active == 23) {
that.Worksdetaildata(item)
} else if (this.e_active == 22) { //特效
this.shape_image = item.image
this.shape_id = item.id
this.shape_price = item.sales_price
if (this.shape_image != '' && this.data.itemList.length == 0) {
this.showone = !this.showone
}
} else if (this.e_active == 99) {
that.Worksdetaildata(item)
}
},
Worksdetaildata(item) { //this.e_active 1模板 2贴图 3字体 4编辑 22添加相框
let s_data = 'Works'
let isWork = item.isWork;
if (this.e_active == 1) {
items = []
} else if (this.e_active == 2 || this.e_active == 23 || this.e_active == 99) {
if (isWork) {
s_data = 'Works'
} else {
s_data = 'Material'
}
}
uni.showLoading({
title: '正在加载中...',
mask: true
})
homeservice.queryList({
s: s_data + '.detail',
id: item.id
}).then(result => {
if (this.e_active == 1) { //作品保留提交数据
this.data.template = result.id
this.data.template_price = result.sales_price
this.data.template_user_id = result.user_id
this.data.works_idlenght = result.component.length
var components = result.component;
for (var i = 0; i < components.length; i++) {
var item = components[i];
var top = item.upper_left_y;
var left = item.upper_left_x;
let pixelRate = this.data.pixelRate;
if (item.rotate != 0.00) {
left = item.center_x - (item.width / 2);
top = item.center_y - (item.height / 2);
}
items.push({
support_zoom: item.support_zoom, // 0是不支持缩放，为1时支持缩放
support_drag: item.support_drag, // 0是不支持拖动，为1时支持拖动
is_under: result.is_under || 0, //贴图是否为背景图
is_discount: item.is_discount, //贴图是否用卷
idone: item.id,
id: i + 1,
type: item.type.value,
material_id: item.material_id,
index: item.index,
font_family: item.font_family,
font_style: item.font_style,
font_size: item.font_size * pixelRate * this.design_widthrate,
font_color: item.font_color,
under_color: item.under_color,
content: item.content, // 图片地址
top: top * pixelRate * this.design_heightrate, // 初始图片Y坐标，根据画布高/2-图片高/2
left: left * pixelRate * this
.design_widthrate, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: item.center_x * pixelRate * this
.design_widthrate, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: item.center_y * pixelRate * this.design_heightrate,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
angle: parseFloat(item.rotate), // 旋转角度
rotate: parseFloat(item.rotate), // 旋转值
active: false, // 判定点击状态
usedwidth: item.width * pixelRate * this.design_widthrate, // 预设生成图片的宽度
usedheight: item.height * pixelRate * this.design_heightrate, // 预设生成图片的高度
width: item.width * pixelRate * this.design_widthrate, // 预设生成图片的宽度
height: item.height * pixelRate * this.design_heightrate, // 预设生成图片的高度
rScale: 1, // 图片原始缩放比例
works_id: item.works_id, //模板id
original_id: item.works_id,
activeguide: false, // 开启辅助线
activescale: false, // 开启旋转状态
activehorn: false, // 开启角状态
activeedge: false, // 开启边状态
// 分界线
initialScale: 1, // 图片缩放比例
initialscaling: 1, // 图片初始时缩放比例
initialScalex: 1, // 图片宽缩放比例
initialScaley: 1, // 图片高缩放比例
initialWidth: item.width * pixelRate * this.design_widthrate, // 图片原始宽度
initialHeight: item.height * pixelRate * this.design_heightrate, // 图片原始高度
frame_left: null, // 裁剪窗口x
image_left: null, // 图片x
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
});
}
//赋值
this.data.itemList = items
this.saveSnapshot();
uni.hideLoading();
} else if (this.e_active == 2 || this.e_active == 23 || this.e_active == 99) { //贴图
uni.showLoading({
title: '加载中...',
mask: true
})
let support_zoom = 1; // 0是不支持缩放，为1时支持缩放
let support_drag = 1; // 0是不支持拖动，为1时支持拖动
let is_under = 0; //贴图是否为背景图
let is_discount = 0; //贴图是否用卷
let urlData;
let material_id = 0; //贴图id
let original_id = 0;
if (isWork) {
urlData = result.image
result.mix_scale = 1;
result.is_under = 0;
} else {
urlData = result.url
support_zoom = result.support_zoom; // 0是不支持缩放，为1时支持缩放
support_drag = result.support_drag; // 0是不支持拖动，为1时支持拖动
is_under = result.is_under; //贴图是否为背景图
is_discount = result.is_discount; //贴图是否用卷
}
// 读取主图遮罩
uni.getImageInfo({
src: urlData,
success: (image) => {
if (this.e_active == 23) {
// 清空历史记录
items = []; // 当前显示的图片列表
index = 0; // 所点击的图片的索引
snapshot = []; // 操作历史记录清空
snapshotIndex = -1;
}
uni.hideLoading()
let index = items.length;
let width = 0
let height = 0
let top = 0
let lef = 0
let ratio = image.width / image.height
let ratiowidth = (this.data.editorWidth * this.mix_scale) / image.width
let ratioheight = (this.data.editorHeight * this.mix_scale) / image.height
let resultmix_scale = result.mix_scale || 1
// if (ratio >= 1) { //长方形
width = this.data.editorWidth * this.mix_scale * resultmix_scale
height = image.height * ratiowidth * resultmix_scale
// } else if (ratio < 1) { //长高方形
// height = this.data.editorHeight * this.mix_scale * resultmix_scale
// width = image.width * ratioheight * resultmix_scale
// }
if (result.is_under == 1) {
let number_index = 0
for (var item of items) {
if (item.is_under == 0) {
item.index = item.index + 1;
} else if (item.is_under == 1) {
number_index++
}
}
index = number_index
}
items.push({
support_zoom: support_zoom, // 0是不支持缩放，为1时支持缩放
support_drag: support_drag, // 0是不支持拖动，为1时支持拖动
is_under: is_under, //贴图是否为背景图
is_discount: is_discount, //贴图是否用卷
id: items.length + 1,
type: 2, //0图片 1文字 2贴图
material_id: material_id, //贴图id
original_id: original_id,
index: index,
font_family: '',
font_style: '',
font_size: '',
font_color: '',
under_color: '',
content: urlData, // 贴图地址
top: this.editor_top - height / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: this.data.editorWidth / 2 - width /
2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: this.data.editorWidth /
2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: this.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
angle: 0, // 旋转角度
rotate: 0, // 旋转值
active: false, // 判定点击状态
width: width, // 预设生成图片的宽度
height: height, // 预设生成图片的高度
rScale: 1, // 贴图原始缩放比例
activeguide: false, // 开启辅助线
activescale: false, // 开启旋转状态
activehorn: false, // 开启角状态
activeedge: false, // 开启边状态
initialScale: 1, // 图片缩放比例
initialscaling: 1, // 图片初始时缩放比例
initialScalex: 1, // 图片宽缩放比例
initialScaley: 1, // 图片高缩放比例
initialWidth: width, // 图片原始宽度
initialHeight: height, // 图片原始高度
frame_left: null, // 裁剪窗口x
image_left: null, // 图片x
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
})
//提示用户此贴图可用卷
if (result.is_discount == '1') {
if (this.$base.coupon_flag_desc == '') return;
uni.showToast({
title: this.$base.coupon_flag_desc,
icon: 'none',
duration: 2000,
mask: false
});
}
this.data.itemList = items
this.saveSnapshot();
},
fail: function(err) {
uni.hideLoading()
uni.showToast({
title: '图片加载失败',
icon: 'none'
});
}
})
}
}).catch(err => {
uni.hideLoading();
uni.showToast({
title: err.msg,
icon: 'none'
});
});
},
isLeft(flag = null) {
},
bgColorAssembly(bg) {
this.background_color = bg
this.$refs['showshare'].close()
},
bgColorClick() {
this.queryPage.page = 1
this.backgroundColor = !this.backgroundColor
if (this.backgroundColor) {
this.$nextTick(() => {
this.$refs['bgColor'].open()
})
} else {
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: this.e_active,
queryPage: this.queryPage,
})
})
}
},
//打开弹框 1模板 2贴图 3字体 4编辑 22添加相框 23壁纸
material_series_handleScroll(index, item) {
this.queryPage.page = 1
this.material_series_currentId = item.id
this.queryPage.material_series_id = item.id
if (this.e_active == 23) { //壁纸
this.wallpaper_material_series_currentId = item.id;
} else if (this.e_active == 2) { //贴图
this.mapping_material_series_currentId = item.id;
}
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: this.e_active,
queryPage: this.queryPage,
val: this.brands[this.currentId_Material].val
})
})
},
handleScroll(index, item) { //选中
this.queryPage.material_series_id = 0
this.material_series_currentId = 0
this.backgroundColor = false
//判断系列
if (this.e_active == 23) {
this.wallpaper_material_series_currentId = 0;
} else if (this.e_active == 2) {
this.mapping_material_series_currentId = 0;
}
if (this.e_active == 1) {
// this.currentId_Works = index;
// this.currentIndex_Works = Math.max(0, index - 1);
// this.Works_categorydatalist = []
// this.queryPage.page = 1
// this.Works_category_id = item.id
// if (this.brands[this.currentId_Works].title == '热门') {
// this.queryPage.is_hot = 1
// this.queryPage.is_new = null
// this.queryPage.works_category_id = null
// } else if (this.brands[this.currentId_Works].title == '最新') {
// this.queryPage.is_new = 1
// this.queryPage.is_hot = null
// this.queryPage.works_category_id = null
// } else {
// this.queryPage.is_hot = null
// this.queryPage.is_new = null
// this.queryPage.works_category_id = item.id
// }
} else if (this.e_active == 2) { //贴图
this.currentId_Material = index;
this.currentIndex_Material = Math.max(0, index - 1);
this.Material_categorydatalist = []
this.queryPage.page = 1
this.Material_category_id = item.id
if (this.brands[this.currentId_Material].title == '热门') {
this.classificationHeight = 0
this.material_series_list = []
this.queryPage.is_hot = '1'
this.queryPage.is_new = null
this.queryPage.material_category_id = null
} else if (this.brands[this.currentId_Material].title == '最新') {
this.classificationHeight = 0
this.material_series_list = []
this.queryPage.is_new = '1'
this.queryPage.is_hot = null
this.queryPage.material_category_id = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = item.id
}
this.currentId = index;
this.currentIndex = Math.max(0, index - 1);
if (this.brands[this.currentId_Material].title == '我的') {
this.classificationHeight = 0
this.material_series_list = []
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: this.e_active,
queryPage: {
s: 'Material.myMaterial',
page: 1,
per_page: 50
},
})
})
} else {
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: this.e_active,
queryPage: this.queryPage,
val: this.brands[this.currentId_Material].val
})
})
}
} else if (this.e_active == 22) { //相框
this.currentId_Works = index;
this.currentIndex_Works = Math.max(0, index - 1);
this.Works_categorydatalist = []
this.queryPage.page = 1
this.Works_category_id = item.id
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.works_category_id = item.id
this.queryPage.shape_category_id = item.id
this.currentId = index;
this.currentIndex = Math.max(0, index - 1);
} else if (this.e_active == 23) { //壁纸
this.currentId_wallpaper = index;
this.currentIndex_wallpaper = Math.max(0, index - 1);
this.wallpaper_categorydatalist = [] //壁纸列表
this.queryPage.page = 1
this.wallpaper_category_id = item.id //记录壁纸选中分类
if (this.brands[this.currentId_wallpaper].title == '热门') {
this.classificationHeight = 0
this.material_series_list = []
this.queryPage.is_hot = '1'
this.queryPage.is_new = null
this.queryPage.material_category_id = null
} else if (this.brands[this.currentId_wallpaper].title == '最新') {
this.classificationHeight = 0
this.material_series_list = []
this.queryPage.is_new = '1'
this.queryPage.is_hot = null
this.queryPage.material_category_id = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = item.id
}
this.currentId = index;
this.currentIndex = Math.max(0, index - 1);
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: this.e_active,
queryPage: this.queryPage,
})
})
} else if (this.e_active == 99) { //收藏
this.currentId = index;
this.currentIndex = Math.max(0, index - 1);
this.collection_currentId = this.currentId;
this.collection_currentIndex = this.currentIndex;
this.$nextTick(() => {
setTimeout(function() {
this.$refs['scrollList'].open({
e: this.e_active,
goods_id: this.data.goods_id,
queryPage: {
currentId: this.currentId,
},
})
}.bind(this), 500)
})
}
},
MaterialseriesList() { //查询分类下二级分类
this.material_series_list = []
homeservice.queryList({
s: 'Material.seriesList',
category_id: this.queryPage.material_category_id,
}).then(result => {
this.queryPage.material_series_id = 0
this.material_series_list = result
if (this.material_series_list.length > 0) {
if (this.e_active == 23) {
if (this.wallpaper_material_series_currentId != 0) {
this.queryPage.material_series_id = this.wallpaper_material_series_currentId;
this.material_series_currentId = this.wallpaper_material_series_currentId
} else {
this.queryPage.material_series_id = this.material_series_list[0].id
this.material_series_currentId = this.material_series_list[0].id
}
} else if (this.e_active == 2) {
if (this.mapping_material_series_currentId != 0) {
this.queryPage.material_series_id = this.mapping_material_series_currentId
this.material_series_currentId = this.mapping_material_series_currentId
} else {
this.queryPage.material_series_id = this.material_series_list[0].id
this.material_series_currentId = this.material_series_list[0].id
}
} else {
this.queryPage.material_series_id = this.material_series_list[0].id
this.material_series_currentId = this.material_series_list[0].id
}
let that = this
setTimeout(function() {
var query = wx.createSelectorQuery();
query.select('#classification').boundingClientRect();
query.exec(function(res) {
that.classificationHeight = res[0].height
that.setData({
classificationHeight: that.classificationHeight
})
})
}.bind(this), 100)
} else {
this.classificationHeight = 0
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
},
//打开弹框 1模板 2贴图 3字体 4编辑 22添加相框 23壁纸
showPopup(e) {
this.isShowGif = false;
this.material_series_list = []
this.queryPage.material_series_id = 0
this.material_series_currentId = 0
this.delete_wrap_state = false
this.showone = false
this.e_active = e
this.togglePopup('bottom', 'share')
this.$refs['textsettingsshare'].close()
this.queryPage.page = 1
if (e == 1) { //模板
} else if (e == 2) { //贴图
this.category(2)
} else if (e == 3) { //文本
index = null
this.addtext = true
this.data.currentText = ''
this.$nextTick(() => {
this.$refs['textsettings'].open({
data: this.data,
bg_text_color: this.bg_text_color
})
})
} else if (e == 4) { //文本
this.addtext = false
this.$nextTick(() => {
this.$refs['textsettings'].open({
data: this.data,
bg_text_color: this.bg_text_color
})
})
} else if (e == 22) { //形状
} else if (e == 23) { //壁纸
this.category(23)
} else if (e == 24) {
this.Adlists = this.diy_bannerList
this.backgroundColor = true;
this.$nextTick(() => {
this.$refs['bgColor'].open()
})
} else if (e == 99) { //收藏
this.Adlists = this.history_bannerList
this.brands = [{
icon: "../../static/img/icon_history_sticker.png",
icon_click: "../../static/img/icon_history_sticker-o.png",
title: "我的历史"
},
{
icon: "../../static/img/my.png",
icon_click: "../../static/img/my-o.png",
title: "我的作品"
},
{
icon: "../../static/img/icon_collection_@2x.png",
icon_click: "../../static/img/icon_collection_@2x-o.png",
title: "我的收藏"
},
{
icon: "../../static/img/icon_good@2x.png",
icon_click: "../../static/img/icon_good@2x-o.png",
title: "我的点赞"
},
]
if (this.collection_currentId != 0) {
this.currentId = this.collection_currentId;
this.currentIndex = this.collection_currentIndex;
} else {
this.currentId = 0;
this.currentIndex = 0; /* 控制位置 */
}
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: e,
goods_id: this.data.goods_id,
queryPage: {
currentId: this.currentId,
}
})
})
}
},
cancel(type) { //关闭弹框
this.isShowGif = false;
try {
this.$refs['show' + type].close()
} catch (e) {
}
this.addtext = false
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
}
this.delete_wrap_state = true
this.e_active = null
},
typefaceshow(type) { //关闭弹框
//获取当前选中的部件
var item = items[index];
if (item != undefined && item.type == 1) {
//字体
this.$refs['textsettingsshare'].open()
this.$nextTick(() => {
this.$refs['textsettingstwo'].open({
data: this.data,
bg_text_color: this.bg_text_color,
text: 'typeface'
})
})
} else {
uni.showToast({
title: '啊嘞，请先输入或者选择文字内容哦',
icon: 'none'
})
}
},
//关闭所有弹窗回调事件
change(e) {
if (items != null && items.length >= 1) {
var index = items.length - 1;
var item = items[index];
if (item != undefined && item.type == 1) {
if (items[index].content == "" || items[index].content == null) {
items.splice(index, 1); // 删除指定的部件
this.setData({
'data': this.data
});
this.active = false;
}
}
}
},
togglePopup(type, open) { //打开弹框
switch (type) {
case 'bottom':
this.content = '底部弹出 popup'
break
}
this.type = type
this.$nextTick(() => {
this.$refs['show' + open].open()
})
},
bgtextcolor() {
this.bg_text_color = !this.bg_text_color
this.$nextTick(() => {
this.$refs['textsettings'].open({
data: this.data,
bg_text_color: this.bg_text_color
})
})
},
//文本字体
async typefaceClick(typeface) {
//获取当前选中的部件
var item = items[index];
if (item != undefined && item.type == 1) {
item.font_family = typeface.title
item.font_dict_id = typeface.id
this.data.itemList = items
await this.setData({
data: this.data
})
//字体行高变化
if (typeface.title == '思源黑体') {
heightRate = 1.48
} else if (typeface.title == '字体视界法棍体') {
heightRate = 1.14
} else if (typeface.title == '千图小兔体') {
heightRate = 1.2
} else if (typeface.title == '仓耳小字体') {
heightRate = 1.26
} else if (typeface.title == '站酷酷黑') {
heightRate = 1.14
} else if (typeface.title == '站酷快乐体') {
heightRate = 1.14
}else{
heightRate = 1.4
}
var that = this;
var query = wx.createSelectorQuery();
query.select('#item-text').boundingClientRect();
uni.createSelectorQuery().in(this).select('#item-text').boundingClientRect(res => {
var width = res.width;
var rate = item.width / width;
var tmpSize = item.font_size * rate;
if (tmpSize > maxFontSize) {
item.font_size = maxFontSize;
item.height = maxFontSize * heightRate;
item.top = item.y - (item.height / 2);
} else {
item.font_size = item.font_size * rate;
item.height = item.height * rate;
item.top = item.y - (item.height / 2);
}
that.setData({
data: that.data
})
that.data.itemList = items
}).exec()
} else {
uni.showToast({
title: '啊嘞，你还没有输入内容哦',
icon: 'none'
})
}
this.saveSnapshot();
},
//文本加粗
workweight() {
// 获取当前选中的部件
var item = items[index];
if (item != undefined) {
item.font_style = item.font_style == "" ? "bold" : ""
} else {
uni.showToast({
title: '啊嘞，你还没有输入内容哦',
icon: 'none'
})
}
this.saveSnapshot();
},
//文本颜色
workcolor(color) {
// 获取当前选中的部件
var item = items[index];
if (item != undefined) {
if (this.bg_text_color) {
item.under_color = color == item.under_color ? '' : color
} else {
item.font_color = color == item.font_color ? '#000000' : color
}
} else {
uni.showToast({
title: '啊嘞，你还没有输入内容哦',
icon: 'none'
})
}
this.saveSnapshot();
},
/*
* 通过旧坐标、旋转角度、圆心计算旋转后点的新坐标
* @param origin 原始坐标对象
* @param center 圆心坐标对象
* @param angle 旋转角度
* @return {{x: string, y: string}}
*/
calNewPos: function(origin, center, angle) {
//计算
let radian = Math.PI / 180 * angle;
let newX = (origin.x - center.x) * Math.cos(radian) - (origin.y - center.y) * Math.sin(radian) + center.x;
let newY = (origin.y - center.y) * Math.cos(radian) + (origin.x - center.x) * Math.sin(radian) + center.y;
//取10位小数
newX = newX.toFixed(10);
newY = newY.toFixed(10);
return {
x: newX,
y: newY
};
},
/*
* 通当新坐标、旋转角度、圆心计算旋转后点的旧坐标
* @param origin 原始坐标对象
* @param center 圆心坐标对象
* @param angle 旋转角度
* @return {{x: string, y: string}}
*/
calOldPos: function(origin, center, angle) {
//计算
let radian = -Math.PI / 180 * angle;
let oldX = (origin.x - center.x) * Math.cos(radian) - (origin.y - center.y) * Math.sin(radian) + center.x;
let oldY = (origin.y - center.y) * Math.cos(radian) + (origin.x - center.x) * Math.sin(radian) + center.y;
//取10位小数
oldX = oldX.toFixed(10);
oldY = oldY.toFixed(10);
return {
x: oldX,
y: oldY
};
},
/*
* 计算伸缩后的四个顶部坐标
* @param scale 放大倍部
* @param left 左上顶点的左距离
* @param top 左上顶点的上距离
* @param width 部件宽度
* @param height 部件高度
* @return {{leftTopY: string, rightTopX: string, leftTopX: string, leftBottomY: string, rightBottomX: string, rightTopY: string, leftBottomX: string, rightBottomY: string}}
*/
calScalePos: function(scale, left, top, width, height) {
// 计算单边需要伸缩的比例，可为正可为负
let rate = (scale - 1) / 2;
// 通过比例计算宽和高的差值
let widthDiff = rate * width;
let heightDiff = rate * height;
// 左上顶点的坐标
let leftTopX = left - widthDiff;
let leftTopY = top - heightDiff;
// 右上顶点的坐标
let rightTopX = (left + width) + widthDiff;
let rightTopY = leftTopY;
// 左下顶点的坐标
let leftBottomX = leftTopX;
let leftBottomY = (top + height) + heightDiff;
// 右下顶点的坐标
let rightBottomX = rightTopX;
let rightBottomY = leftBottomY;
// 返回所有的8个坐标
return {
leftTopX: leftTopX.toFixed(10),
leftTopY: leftTopY.toFixed(10),
rightTopX: rightTopX.toFixed(10),
rightTopY: rightTopY.toFixed(10),
leftBottomX: leftBottomX.toFixed(10),
leftBottomY: leftBottomY.toFixed(10),
rightBottomX: rightBottomX.toFixed(10),
rightBottomY: rightBottomY.toFixed(10),
centerX: (rightTopX - leftTopX) / 2,
centerY: (rightTopY - leftTopY) / 2
};
},
/*
* 计算未伸缩时的四个顶点坐标
* @param left 左上顶点的左距离
* @param top 左上顶点的上距离
* @param width 部件宽度
* @param height 部件高度
* @return {{leftTopY: string, rightTopX: string, leftTopX: string, leftBottomY: string, rightBottomX: string, rightTopY: string, leftBottomX: string, rightBottomY: string}}
*/
calNoScalePos: function(left, top, width, height) {
// 左上顶点的坐标
let leftTopX = left;
let leftTopY = top;
// 右上顶点的坐标
let rightTopX = left + width;
let rightTopY = leftTopY;
// 左下顶点的坐标
let leftBottomX = leftTopX;
let leftBottomY = top + height;
// 右下顶点的坐标
let rightBottomX = rightTopX;
let rightBottomY = leftBottomY;
// 返回所有的8个坐标
return {
leftTopX: leftTopX.toFixed(10),
leftTopY: leftTopY.toFixed(10),
rightTopX: rightTopX.toFixed(10),
rightTopY: rightTopY.toFixed(10),
leftBottomX: leftBottomX.toFixed(10),
leftBottomY: leftBottomY.toFixed(10),
rightBottomX: rightBottomX.toFixed(10),
rightBottomY: rightBottomY.toFixed(10),
centerX: (rightTopX - leftTopX) / 2,
centerY: (rightTopY - leftTopY) / 2
};
},
/*
* 计算四个顶点旋转后的坐标系
* @param scalePos 四个顶点未旋转前的坐标系
* @param center 中心点位置
* @param angle 旋转角度
* @return {{leftTopY: string, rightTopX: string, leftTopX: string, leftBottomY: string, rightBottomX: string, rightTopY: string, leftBottomX: string, rightBottomY: string}}
*/
calRocatePos: function(scalePos, center, angle) {
// 左上顶点的坐标
let leftTop = this.calNewPos({
x: scalePos.leftTopX,
y: scalePos.leftTopY
}, center, angle);
// 右上顶点的坐标
let rightTop = this.calNewPos({
x: scalePos.rightTopX,
y: scalePos.rightTopY
}, center, angle);
// 左下顶点的坐标
let leftBottom = this.calNewPos({
x: scalePos.leftBottomX,
y: scalePos.leftBottomY
}, center, angle);
// 右下顶点的坐标
let rightBottom = this.calNewPos({
x: scalePos.rightBottomX,
y: scalePos.rightBottomY
}, center, angle);
// 返回所有的8个坐标
return {
leftTopX: leftTop.x,
leftTopY: leftTop.y,
rightTopX: rightTop.x,
rightTopY: rightTop.y,
leftBottomX: leftBottom.x,
leftBottomY: leftBottom.y,
rightBottomX: rightBottom.x,
rightBottomY: rightBottom.y,
centerX: (scalePos.rightTopX - scalePos.leftTopX) / 2,
centerY: (scalePos.rightTopY - scalePos.leftTopY) / 2
};
},
/*
* 计算四个顶点旋转后的旧坐标
* @param scalePos 四个顶点未旋转前的坐标系
* @param center 中心点位置
* @param angle 旋转角度
* @return {{leftTopY: string, rightTopX: string, leftTopX: string, leftBottomY: string, rightBottomX: string, rightTopY: string, leftBottomX: string, rightBottomY: string}}
*/
calOldRocatePos: function(scalePos, center, angle) {
// 左上顶点的坐标
let leftTop = this.calOldPos({
x: scalePos.leftTopX,
y: scalePos.leftTopY
}, center, angle);
// 右上顶点的坐标
let rightTop = this.calOldPos({
x: scalePos.rightTopX,
y: scalePos.rightTopY
}, center, angle);
// 左下顶点的坐标
let leftBottom = this.calOldPos({
x: scalePos.leftBottomX,
y: scalePos.leftBottomY
}, center, angle);
// 右下顶点的坐标
let rightBottom = this.calOldPos({
x: scalePos.rightBottomX,
y: scalePos.rightBottomY
}, center, angle);
// 返回所有的8个坐标
return {
leftTopX: leftTop.x,
leftTopY: leftTop.y,
rightTopX: rightTop.x,
rightTopY: rightTop.y,
leftBottomX: leftBottom.x,
leftBottomY: leftBottom.y,
rightBottomX: rightBottom.x,
rightBottomY: rightBottom.y,
centerX: (rightTopX - leftTopX) / 2,
centerY: (rightTopY - leftTopY) / 2
};
},
//读取图片操作
loadImage(e) {
var id = e.currentTarget.dataset.id;
var width = e.detail.width * this.data.pixelRate * this.design_widthrate; //获取图片真实宽度
var height = e.detail.height * this.data.pixelRate * this.design_widthrate; //获取图片真实高度
var rScale = width / items[id - 1]['width'];
items[id - 1]['height'] = height / rScale;
items[id - 1]['top'] = items[id - 1]['y'] - (items[id - 1]['height'] / 2);
},
/*部件点击事件 */
itemClick(e) {
this.isShowGif = false;
// 循环数据找到点击点
for (let i = 0; i < items.length; i++) {
//关闭点击属性
items[i].active = false; //选中状态
items[i].activeguide = false // 辅助线状态
items[i].activescale = false // 旋转状态
items[i].activehorn = false // 角状态
items[i].activeedge = false // 边状态
if (e.currentTarget.dataset.id == items[i].id) {
//记录下标
index = i;
//开启点击属性
items[index].active = true; //选中状态
items[index].activeguide = false // 辅助线状态
items[index].activescale = true // 旋转状态
items[index].activehorn = true // 角状态
items[index].activeedge = true // 边状态
}
}
this.active = true
this.data.listActive = true
this.data.cidx = index
// 初始化的位置
drag.initPos(items[index])
},
/*点击画布区域取消聚焦 */
itemCancel(e) {
this.isShowGif = false;
if (items.length > 0) {
for (let i = 0; i < items.length; i++) {
items[i].active = false;
items[i].active = false //辅助线
items[i].activeguide = false //辅助线
items[i].activescale = false // 旋转状态
items[i].activehorn = false // 角状态
items[i].activeedge = false // 边状态
}
this.data.itemList = items
//赋值 取消边框显示
this.data.listActive = false
// this.setData({itemList: items});
this.active = false
}
},
/*获取编辑区域左边距 */
getLeft: function() {
//return this.data.bgWidth * 0.3;
// return 235 * this.data.pixelRate;
return (750 - this.design_width) / 2 * this.data.pixelRate;
},
/*获取编辑区域上边距 */
getTop: function() {
// return this.data.bgHeight * 0.25;
return (this.data.bgHeight - this.data.editorHeight) / 2;
},
/*图片拖动开始事件 */
dragStart: function(e) {
//剪切数据
this.properties = items[index]
//点击选中部件
this.itemClick(e);
//获取当前选中的部件
var item = items[index];
if (e.touches.length > 1) {
//获取作为移动前角度的坐标
item.touchX = e.touches[0].clientX;
item.touchY = e.touches[0].clientY;
//当两根手指放上去的时候，将距离(distance)初始化。
let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
//计算开始触发两个手指坐标的距离
item.distance = Math.sqrt(xMove * xMove + yMove * yMove);
//获取图片半径
item.r = this.computeDistance(item.x, item.y, item.left, item.top);
} else {
//记录点击时的坐标值
item.startX = e.touches[0].clientX;
item.startY = e.touches[0].clientY;
}
var currentText = '';
if (item.type == 1) {
currentText = item.content;
}
item.mLeft = item.left;
item.mTop = item.top;
drag.recordPressDownData(item);
//赋值
this.data.listActive = true
this.data.cidx = index
this.data.currentText = currentText
this.data.itemList = items
},
/*图片拖动中事件 */
dragMove: function(e) {
// 获取当前选中的部件
var item = items[index];
if (e.touches.length > 1) {
// //记录移动后的位置
// item.touchMoveX = e.touches[0].clientX;
// item.touchMoveY = e.touches[0].clientY;
// //双手指运动 x移动后的坐标和y移动后的坐标
// let xMove = e.touches[1].clientX - e.touches[0].clientX;
// let yMove = e.touches[1].clientY - e.touches[0].clientY;
// //双手指运动新的 ditance
// let distance = Math.sqrt(xMove * xMove + yMove * yMove);
// //计算移动的过程中实际移动了多少的距离
// let distanceDiff = distance - item.distance;
// item.scale = item.scale + 0.001 * distanceDiff;
// //设置最大缩放为10倍
// if (Math.abs(item.scale) > 10) {
// item.scale = 10;
// }
// //设置最小缩放为0.3倍
// if (Math.abs(item.scale) < 0.3) {
// item.scale = 0.3;
// }
// //图片放大响应的右下角按钮同比缩小
// item.oScale = 1 / item.scale;
} else {
drag.dragMove(e, item, this.data, this.editor_top)
this.guide_left = true // 开启辅助线
this.guide_top = true // 开启辅助线
this.delete_wrap_state = true
if (e.changedTouches[0].pageY + 80 > this.deleteTop) { //如果图片容器底部距离大于删除框顶部距离就删除图片
this.deleteWrap = true
} else {
this.deleteWrap = false
}
}
this.data.itemList = items //赋值就移动了
},
/*拖动结束事件 */
dragEnd: function(e) {
//赋值
this.guide_top = false
this.guide_left = false
// 获取当前选中的部件
var item = items[index];
item.lastScale = item.scale;
//属性
item.active = true //辅助线
item.activeguide = false //辅助线
item.activescale = true // 旋转状态
item.activehorn = true // 角状态
item.activeedge = true // 边状态
// 恢复
if (item.heart_startX != undefined) {
item.startX = item.heart_startX;
item.startY = item.heart_startY;
}
if (item.xheart != undefined) {
item.x = item.xheart
item.y = item.yheart
}
//赋值就移动了
this.data.itemList = items
//赋值
// this.data.listActive = false
this.saveSnapshot();
},
/*部件缩放开始事件*/
scaleStart(e, type) {
this.itemClick(e); // 点击选中部件
var item = items[index]; // 获取当前选中的部件
if (item.support_zoom == 0) return; // 0不支持缩放，1时支持缩放
item.typetext = type
//获取作为移动前角度的坐标
item.touchX = e.touches[0].clientX;
item.touchY = e.touches[0].clientY;
//获取图片半径
item.r = this.computeDistance(item.x, item.y, item.left, item.top);
// 记录坐标
item.scaleone = item.width / item.height
item.initCenterPos = item.centerPos
// 获取编辑框的左边距和上边距
var mLeft = this.getLeft();
var mTop = this.getTop();
item.mLeft = mLeft
item.mTop = mTop
drag.recordPressDownData(item);
//赋值
this.data.listActive = true
},
/* 部件旋转开始事件 */
rotateStart: function(e) {
// 点击选中部件
this.itemClick(e);
// 获取当前选中的部件
var item = items[index];
item.typetext = 'rotate';
//获取作为移动前角度的坐标
item.touchX = e.touches[0].clientX;
item.touchY = e.touches[0].clientY;
// 获取编辑框的左边距和上边距
var mLeft = this.getLeft();
var mTop = this.getTop();
//移动前的角度
item.anglePre = this.computeAngle(item.x, item.y, item.touchX - mLeft, item.touchY - mTop);
//获取图片半径
item.r = this.computeDistance(item.x, item.y, item.left, item.top);
//赋值
this.data.listActive = true
},
/* 部件缩放中事件 */
scaleMove: function(e) {
// 获取当前选中的部件
var item = items[index];
if (item.support_zoom == 0) return; // 0不支持缩放，1时支持缩放
//记录移动后的位置
item.touchMoveX = e.touches[0].clientX;
item.touchMoveY = e.touches[0].clientY;
//属性
item.active = false //辅助线
item.activeguide = false //辅助线
item.activescale = false // 旋转状态
item.activehorn = true // 角状态
item.activeedge = false // 边状态
// 获取编辑框的左边距和上边距
var mLeft = this.getLeft();
var mTop = this.getTop();
//移动的点到圆心的距离
item.disPtoO = this.computeDistance(item.x, item.y, item.touchMoveX - mLeft, item.touchMoveY - mTop)
//手指滑动的点到圆心的距离与半径的比值作为图片的放大比例
item.scale = item.disPtoO / item.r;
//设置最大缩放为10倍
if (Math.abs(item.scale) > 10) {
item.scale = 10;
}
//设置最小缩放为0.3倍
if (Math.abs(item.scale) < 0.3) {
item.scale = 0.3;
}
//图片放大响应的右下角按钮同比缩小
item.oScale = 1 / item.scale;
drag.initPos(item)
//赋值setData渲染
this.data.itemList = items
},
/* 部件旋转中事件 */
rotateMove: function(e) {
// 获取当前选中的部件
var item = items[index];
//记录移动后的位置
item.touchMoveX = e.touches[0].clientX;
item.touchMoveY = e.touches[0].clientY;
// 获取编辑框的左边距和上边距
var mLeft = this.getLeft();
var mTop = this.getTop();
//移动的点到圆心的距离
item.disPtoO = this.computeDistance(item.x, item.y, item.touchMoveX - mLeft, item.touchMoveY - mTop);
//移动后位置的角度
item.angleNext = this.computeAngle(item.x, item.y, item.touchMoveX - mLeft, item.touchMoveY - mTop);
//角度差
item.new_rotate = item.angleNext - item.anglePre;
//叠加的角度差
item.rotate += item.new_rotate;
item.angle = item.rotate; //赋值
//用过移动后的坐标赋值为移动前坐标
item.touchX = e.touches[0].clientX;
item.touchY = e.touches[0].clientY;
item.anglePre = this.computeAngle(item.x, item.y, item.touchX - mLeft, item.touchY - mTop);
//属性
item.active = false //辅助线
item.activeguide = true //开启辅助线
item.activescale = true // 旋转状态
item.activehorn = false // 角状态
item.activeedge = false // 边状态
// 角度计算
let roat = Math.abs(item.angle) % 360
if (item.angle < 0) {
let multiple = Math.ceil(Math.abs(item.angle) / 360)
roat = item.angle + multiple * 360
}
drag.initPos(item)
if (roat <= 5 || roat >= 355) {
item.angle = 0.00
if (item.angle == 0) {
wx.vibrateShort(); // 使手机振动15ms
}
} else if (roat <= 50 && roat >= 40) {
item.angle = 45
if (item.angle == 45) {
wx.vibrateShort(); // 使手机振动15ms
}
} else if (roat <= 95 && roat >= 85) {
item.angle = 90
if (item.angle == 90) {
wx.vibrateShort(); // 使手机振动15ms
}
} else if (roat <= 140 && roat >= 130) {
item.angle = 135
if (item.angle == 135) {
wx.vibrateShort(); // 使手机振动15ms
}
} else if (roat <= 185 && roat >= 175) {
item.angle = 180
if (item.angle == 180) {
wx.vibrateShort(); // 使手机振动15ms
}
} else if (roat <= 230 && roat >= 220) {
item.angle = 225
if (item.angle == 225) {
wx.vibrateShort(); // 使手机振动15ms
}
} else if (roat <= 275 && roat >= 265) {
item.angle = 270
if (item.angle == 270) {
wx.vibrateShort(); // 使手机振动15ms
}
} else if (roat <= 320 && roat >= 310) {
item.angle = 315
if (item.angle == 315) {
wx.vibrateShort(); // 使手机振动15ms
}
}
//赋值setData渲染
this.data.itemList = items
},
/* 部件缩放结束事件 */
scaleEnd: function(e) {
// 获取当前选中的部件
var item = items[index];
if (item.support_zoom == 0) return; // 0不支持缩放，1时支持缩放
item.typetext = null
//关闭点击属性
item.active = true //辅助线
item.activeguide = false // 辅助线状态
item.activescale = true // 旋转状态
item.activehorn = true // 角状态
item.activeedge = true // 边状态
//赋值
// this.data.listActive = false
drag.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos,
item)
this.saveSnapshot();
},
/* 部件旋转结束事件*/
rotateEnd: function(e) {
// 获取当前选中的部件
var item = items[index];
item.typetext = null;
//赋值
// this.data.listActive = false
//关闭点击属性
item.active = true //辅助线
item.activeguide = false // 辅助线状态
item.activescale = true // 旋转状态
item.activehorn = true // 角状态
item.activeedge = true // 边状态
this.saveSnapshot();
},
/**
* 计算手点击坐标到圆心的角度
* @param centerX 圆心的 x 坐标
* @param centerY 圆心的 y 坐标
* @param x 手点击的 x 坐标
* @param y 手点击的 y 坐标
* @returns {number}
*/
computeAngle: function(centerX, centerY, x, y) {
var diffX = x - centerX;
var diffY = y - centerY;
var rate = Math.abs(diffX / diffY);
//鼠标相对于旋转中心的角度
var angle = Math.atan(rate) / (2 * Math.PI) * 360;
if (diffX < 0 && diffY < 0) { // 右下角，第四象限
angle = -angle;
} else if (diffX <= 0 && diffY >= 0) { // 左下角，第三象限
angle = -(180 - angle)
} else if (diffX > 0 && diffY < 0) { // 右上角，第一象限
angle = angle;
} else if (diffX > 0 && diffY > 0) { // 左上角，第二象限
angle = 180 - angle;
}
return angle;
},
/**
* 计算触摸点到圆心的距离
* @param centerX 圆心的 x 坐标
* @param centerY 圆心的 y 坐标
* @param x 手点击的 x 坐标
* @param y 手点击的 y 坐标
* @returns {number}
*/
computeDistance: function(centerX, centerY, x, y) {
var diffX = x - centerX;
var diffY = y - centerY;
return Math.sqrt(diffX * diffX + diffY * diffY);
},
// 移除图片
removedeleteItem(item, ix) {
if (!this.active) {
index = items.length - 1
items.splice(index, 1); // 删除指定的部件
this.setData({
'data': this.data
});
this.saveSnapshot();
this.active = false;
} else {
this.deleteItem(item, ix);
}
},
/* 删除部件 */
deleteItem: function(item, ix) {
// 当前选中的部件
var currentItem = items[index];
if (currentItem != null) {
// 判断删除的是否是模板组件
if (currentItem.works_id) {
this.data.works_idlenght--
}
let zIndex = items[index].index;
let zid = items[index].id;
// 删除指定的部件
items.splice(index, 1);
// 后面的部件index需要减1
for (var item of items) {
if (item.index > zIndex) {
item.index = item.index - 1;
}
}
for (var item of items) {
if (item.id > zid) {
item.id = item.id - 1;
}
}
this.setData({
'data': this.data
});
}
this.saveSnapshot();
this.active = false
},
/* 检测文字的输入 */
textInput(content) {
if (this.addtext) {
let index_id = items.length;
items.push({
support_zoom: 1, // 0是不支持缩放，为1时支持缩放
support_drag: 1, // 0是不支持拖动，为1时支持拖动
is_under: 0, //贴图是否为背景图
is_discount: 0, //贴图是否用卷
id: index_id + 1,
type: 1,
material_id: 0,
index: index_id,
font_family: 'SOURCEHANSANSCN-REGULAR.OTF',
font_style: '',
//font_size: '50',
font_size: '50',
font_color: '#000000',
under_color: '',
content: content, // 文本
top: this.editor_top - 74 / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: 0, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: this.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: this.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
fontscale: 1, // 文本缩放比例 1为不缩放
angle: 0.00, // 旋转角度
rotate: 0.00, // 旋转值
active: false, // 判定点击状态
width: this.data.editorWidth, // 预设生成图片的宽度
height: 74, // 预设生成图片的高度
rScale: 1, // 图片原始缩放比例
})
this.data.itemList = items
this.addtext = false
this.saveSnapshot();
index = items.length - 1
this.data.cidx = index
this.setData({
data: this.data
})
this.text_awaitone(content)
} else {
this.text_await(content)
}
},
async text_awaitone(content) {
// 获取当前选中的部件
if (content == '' || content == null) {
var item = items[index];
if (item != null) {
this.deleteItem();
}
return;
}
var item = items[index];
item.content = content;
var that = this;
//赋值
this.data.currentText = content
this.data.itemList = items
await this.setData({
data: this.data
})
textQuery.select('#item-text').boundingClientRect();
textQuery.exec(function(res) {
var width = res[0].width;
var rate = item.width / width;
var tmpSize = item.font_size * rate;
if (tmpSize > maxFontSize) {
item.font_size = maxFontSize;
item.height = maxFontSize * heightRate;
item.top = item.y - (item.height / 2);
} else {
item.font_size = item.font_size * rate;
item.height = item.height * rate;
item.top = item.y - (item.height / 2);
}
// that.setData({itemList:items});
that.setData({
data: that.data
})
that.data.itemList = items
})
},
async text_await(content) {
//获取当前选中的部件
var item = items[index];
if (content != item.content) {
item.content = content;
var that = this;
//赋值
this.data.currentText = content
this.data.itemList = items
await this.setData({
data: this.data
})
textQuery.select('#item-text').boundingClientRect();
textQuery.exec(function(res) {
var width = res[0].width;
var rate = item.width / width;
var tmpSize = item.font_size * rate;
if (tmpSize > maxFontSize) {
item.font_size = maxFontSize;
item.height = maxFontSize * heightRate;
item.top = item.y - (item.height / 2);
} else {
item.font_size = item.font_size * rate;
item.height = item.height * rate;
item.top = item.y - (item.height / 2);
}
that.setData({
data: that.data
})
that.data.itemList = items
})
}
},
/* 保存当前作品的快照 */
saveSnapshot: function() {
var currentSnapshot = JSON.stringify(this.data);
var lastSnapshot = "";
if (snapshot.length > 0) {
lastSnapshot = JSON.stringify(snapshot[snapshotIndex]);
}
if (currentSnapshot != lastSnapshot) {
//清除当前步骤后面的所有步骤
if (snapshot.length > 0 && (snapshot.length - 1 > snapshotIndex)) {
for (var i = snapshotIndex + 1; i < snapshot.length; i++) {
snapshot.pop();
}
}
//加入快照
snapshot.push(currentSnapshot);
snapshotIndex = snapshotIndex + 1;
}
},
/* 上一步功能 */
prev: function() {
if (snapshotIndex > 0) {
snapshotIndex = snapshotIndex - 1;
this.data = JSON.parse(snapshot[snapshotIndex]);
items = this.data.itemList;
index = this.data.cidx;
} else {
wx.showToast({
title: '已是最上一步',
icon: 'success',
duration: 2000
});
}
},
/* 下一步 */
next: function() {
if (snapshotIndex < snapshot.length - 1) {
snapshotIndex = snapshotIndex + 1;
this.data = JSON.parse(snapshot[snapshotIndex]);
items = this.data.itemList;
index = this.data.cidx;
} else {
wx.showToast({
title: '已是最下一步',
icon: 'success',
duration: 2000
});
}
},
//设置数据
setData(obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function(key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function(key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
})
});
},
//获取产品详情数据
goodslist() {
this.front_image_long = false
homeservice.queryList({
s: 'Product.detail',
id: this.data.goods_id
}).then(result => {
this.titlename = result.name //修改头部名称
//读取背景图
uni.getImageInfo({
src: result.front_image_old,
success: (front_image) => {
this.data.bgHeight = this.data.bgHeight // 画布高度
this.editory = (this.data.bgHeight - (result.design_height * this.data.pixelRate)) / 2; //辅助线距离
this.data.editorWidth = result.design_width * this.data.pixelRate // 设计宽度
this.data.editorHeight = result.design_height * this.data.pixelRate // 设计高度
this.editor_top = this.data.editorHeight * Number(this.location_scale) //辅助线距离
this.design_widthrate = (result.design_width / result.print_width) // 设计区放大宽度比率
this.design_heightrate = (result.design_height / result.print_height) // 设计区放大高度比率
this.front_image_long = true
}
})
this.$base.goods_feature_id = result.goods_feature_id
this.data.bgImage = result.front_image // 背景图
this.data.bgImage_old = result.front_image_old // 旧背景图
this.data.bgImage_thumbnail = result.thumbnail // 介绍图片（主图遮罩）
this.design_color = result.design_color // 背景颜色
this.mix_scale = result.mix_scale //上传图片比率
this.design_height = result.design_height // 设计高度
this.design_width = result.design_width // 设计宽度
this.print_height = result.print_height // 设计基础宽度
this.print_width = result.print_width // 设计基础高度
this.center_scale = result.center_scale //设计器中心点位置对应底图高度占比（居中=0.5）
this.location_scale = result.location_scale //参考线中心点对应设计器高度占比（居中=0.5）
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
},
category(type) {
//查询贴图分类 key=0贴图
if (type == 2) {
homeservice.queryList({
s: 'Material.category',
machine_id: this.machine_id,
key: 0,
}).then(result => {
this.Material_category = result
this.Adlists = this.diy_bannerList
this.queryPage.goods_id = this.data.goods_id
this.brands = this.Material_category
this.currentId = this.currentId_Material;
this.currentIndex = this.currentIndex_Material;
this.queryPage.s = 'Material.list'
this.queryPage.works_category_id = null
this.queryPage.material_category_id = null
if (this.brands[this.currentId].title == '热门') {
this.queryPage.is_hot = '1'
this.queryPage.is_new = null
} else if (this.brands[this.currentId].title == '最新') {
this.queryPage.is_new = '1'
this.queryPage.is_hot = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = this.Material_category[0].id
if (this.Material_category_id) {
this.queryPage.material_category_id = this.Material_category_id
}
}
if (this.mapping_material_series_currentId != 0) {
this.queryPage.material_series_id = this.mapping_material_series_currentId
this.material_series_currentId = this.mapping_material_series_currentId
}
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: 2,
queryPage: this.queryPage,
val: this.brands[this.currentId].val
})
})
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
}
if (type == 23) {
//查询壁纸分类 key=1壁纸
homeservice.queryList({
s: 'Material.category',
machine_id: this.machine_id,
key: 1,
}).then(result => {
this.wallpaper_category = result
this.Adlists = this.diy_backList
this.queryPage.goods_id = this.data.goods_id
this.brands = this.wallpaper_category //壁纸分类
this.currentId = this.currentId_wallpaper; /* 控制被选中 */
this.currentIndex = this.currentIndex_wallpaper; /* 控制位置 */
this.queryPage.s = 'Material.list'
this.queryPage.works_category_id = null //作品选中分类id
this.queryPage.material_category_id = null //贴图选中分类
if (this.wallpaper_material_series_currentId != 0) {
this.queryPage.material_series_id = this.wallpaper_material_series_currentId
this.material_series_currentId = this.wallpaper_material_series_currentId
}
if (this.brands[this.currentId].title == '热门') {
this.queryPage.is_hot = '1'
this.queryPage.is_new = null
} else if (this.brands[this.currentId].title == '最新') {
this.queryPage.is_new = '1'
this.queryPage.is_hot = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = this.wallpaper_category[0].id
if (this.wallpaper_category_id) {
this.queryPage.material_category_id = this.wallpaper_category_id
}
}
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: 23,
queryPage: this.queryPage,
})
})
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
}
},
//获取自定义产品数据详情
getCustomDetail() {
this.isReady = false;
this.front_image_long = false
homeservice.queryList({
s: 'Product.getCustomize',
id: this.data.goods_id
}).then(result => {
this.queryPage.goods_category_id = result.goods_category_id //星形接口列表增加，产品分类参数
//读取背景图
uni.getImageInfo({
src: result.front_image,
success: (front_image) => {
this.data.bgHeight = front_image.height * (this.data.bgWidth / front_image.width) // 画布高度
this.editory = result.center_scale * (this.data.bgWidth / front_image.width) //辅助线距离
this.front_image_long = true
}
})
this.titlename = this.options.name
uni.setNavigationBarTitle({
title: this.titlename
}) //修改头部名称
this.data.bgImage = result.front_image // 背景图
this.data.bgImage_old = result.front_image_old // 旧背景图
if (this.$base.surfaceData.surface_type == 0 || this.$base.surfaceData.surface_type == 2) { //默认
this.background_color = 'none' //手机底色
}
this.mix_scale = result.mix_scale //上传图片比率
this.design_height = result.design_height // 设计宽度
this.design_width = result.design_width // 设计高度
this.print_height = result.print_height // 设计基础宽度
this.print_width = result.print_width // 设计基础高度
this.design_widthrate = result.design_width / result.print_width // 设计区放大宽度比率
this.design_heightrate = result.design_height / result.print_height // 设计区放大高度比率
this.data.editorWidth = this.design_width * this.data.pixelRate // 设计宽度
this.data.editorHeight = this.design_height * this.data.pixelRate // 设计高度
this.center_scale = result.center_scale // 设计区中心点比率
this.location_scale = result.location_scale // 辅助线比率
this.editor_top = this.data.editorHeight * Number(this.location_scale) //辅助线距离
let scaleWidth = this.data.editorWidth / 100;
let scaleHeight = this.data.editorHeight / 185;
this.real_print_height = (this.options.HeightIndex / 3) * scaleWidth; // 设计宽度
this.real_print_width = (this.options.WidthIndex / 3) * scaleHeight;
this.clipLeft = (this.data.editorWidth - this.real_print_width) / 2;
this.clipRight = this.clipLeft;
this.clipTop = (this.data.editorHeight - this.real_print_height) / 2;
this.clipButtom = this.clipTop;
this.filletSize = (this.options.fillet / 3) * scaleWidth;
if (snapshot.length > 0) {
let listSnapshot = []
snapshot.forEach((item, index) => {
let list = JSON.parse(item)
list.bgImage = this.data.bgImage
list.bgImage_old = this.data.bgImage_old
list.goods_id = this.data.goods_id
listSnapshot.push(JSON.stringify(list))
})
snapshot = listSnapshot
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
},
itemlongtap(e) { //长按事件
var item = items[index]; // 获取当前选中的部件
},
itemTouchStart: infoListTouchEvent.start.bind(infoListTouchEvent),
itemTouchMove: infoListTouchEvent.move.bind(infoListTouchEvent),
itemTouchEnd: infoListTouchEvent.end.bind(infoListTouchEvent),
itemTouchCancel: infoListTouchEvent.cancel.bind(infoListTouchEvent)
},
onLoad(options) {
items = []
textQuery = wx.createSelectorQuery();
this.data.goods_id = options.good_id;
let that = this;
this.infoListTouchEvent = infoListTouchEvent;
this.infoListTouchEvent.bind({
doubleTap: function(e) {
that.isShowGif = false;
if (items[index].type == 0) {
that.state = true
that.$refs.index.init();
}
},
tap: function(e) {
if (items == null || items.length == 0) {
that.active = false;
that.guide_left = false
} else {
that.isShowGif = false;
var curTime = e.timeStamp
var lastTime = e.currentTarget.dataset.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据
if (curTime - lastTime > 0) {
if (curTime - lastTime < 300) { //是双击事件
if (items[index].type == 0) {
that.state = true
that.$refs.index.init();
}
} else {
//点击选中部件
that.itemClick(e);
}
}
that.lastTapTime = curTime
}
},
touchStart: function(e) {
that.isRotate = e.touches.length > 1;
that.dragStart(e);
//底部删除框出现动画
that.animation.bottom(0).step()
that.setData({
animationData: that.animation.export()
})
that.deleteWrap = false
},
touchEnd: function(e) {
that.dragEnd(e)
let item = items[index];
if (item.scale != 1) {
//初始化的位置
drag.initPosscale(item)
drag.getTransferPositionangle(item.left, item.top, item.width, item.height, item.angle,item.centerPos, item)
//缩放
item.scale = 1;
item.lastScale = 1
//图片放大响应的右下角按钮同比缩小
item.oScale = 1 / item.scale;
}
//底部删除框出现动画
that.animation.bottom(-100).step()
that.setData({
animationData: that.animation.export()
})
if (that.deleteWrap == true) {
that.removedeleteItem();
that.deleteWrap = false
}
},
touchCancel: function(e) {
that.isShowGif = false;
that.$refs['textsettingsshare'].close()
if (items.length > 0) {
let item = items[index];
item.active = false
item.activeguide = false //辅助线
item.activescale = false // 旋转状态
item.activeedge = false // 边状态
that.data.itemList = items
that.data.listActive = false
that.active = false
that.guide_left = false;
that.deleteWrap = false
that.animation.bottom(-100).step()
that.setData({
animationData: that.animation.export()
})
}
}.bind(this),
rotate: function(e) { //双指缩放
let item = items[index];
if (item.support_zoom == 0) return; // 0不支持缩放，1时支持缩放
var oldWidth = (item.width * item.scale) * e.scale
if (oldWidth > 1000) {
return;
}
var newScale = Math.max(e.scale * item.lastScale, .01);
newScale || (newScale = item.lastScale);
//角度
item.rotate += e.angle;
item.angle = item.rotate;
//缩放
item.scale = newScale;
//图片放大响应的右下角按钮同比缩小
item.oScale = 1 / item.scale;
item.active = false //辅助线
item.activeguide = true //开启辅助线
item.activescale = false // 旋转状态
item.activehorn = false // 角状态
item.activeedge = false // 边状态
//赋值setData渲染
this.data.itemList = items
}.bind(this),
pressMove: function(e) { //拖拽中
let item = items[index];
if (item.support_drag == 0) return; // 0不支持拖动，1支持拖动
if (!that.isRotate) {
that.dragMove(e);
}
}
})
//获取屏幕宽高
wx.getSystemInfo({
success: function(res) {
let pixelRate = res.windowWidth / 750
that.data.windowWidth = res.windowWidth // 屏幕宽度
that.data.windowHeight = res.windowHeight // 屏幕高度
that.deleteTop = res.windowHeight // 屏幕高度
that.data.bgWidth = res.windowWidth // 画布宽度
that.data.bgHeight = res.windowHeight // (861 / 1196) // 画布高度 高度比率 * (861 / 1196)
that.data.pixelRate = pixelRate // 屏幕宽度比率
that.machine_id = options.machine_id || null // 设备id
that.queryPage.machine_id = options.machine_id || null // 设备id
that.key = 2
that.goodslist() // 获取产品详情数据
}
})
homeservice.WorksList({
s: 'machine.detail',
machine_id: this.machine_id
}).then(res => {
this.machine_item = res
this.diy_upload_menu = res.diy_upload_menu;
this.is_public = res.is_public;
this.support_pay = res.support_pay
this.is_authority = res.is_authority
this.is_photo = res.is_photo
this.is_recommend = res.is_recommend
this.is_home = res.is_home
//console.log(this.diy_upload_menu);
//console.log(this.is_public);
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
},
onShow() {
var _this = this
wx.request({
url: _this.$Env.getDevBaseURL() + '/api/system_config/detail',
method: 'GET',
data: {},
success: function(res) {
_this.system_config = res.data.data
}
})
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation
// 壁纸广告KEY：diy_back，贴纸广告KEY：diy_banner
homeservice.queryList({
s: 'Ad.list',
ad_position_key: 'diy_back',
machine_id: this.machine_id
}).then(result => {
this.diy_backList = result
}).catch(err => {});
// 贴纸广告KEY：diy_banner
homeservice.queryList({
s: 'Ad.list',
ad_position_key: 'diy_banner',
machine_id: this.machine_id
}).then(result => {
this.diy_bannerList = result
}).catch(err => {});
homeservice.queryList({
s: 'Ad.list',
ad_position_key: 'history_works',
machine_id: this.machine_id
}).then(result => {
this.history_bannerList = result
}).catch(err => {});
},
onUnload() { // 卸载程序
items = []; // 当前显示的图片列表
index = 0; // 所点击的图片的索引
snapshot = []; // 操作历史记录
snapshotIndex = -1;
homeservice.setSnapshot(items)
}
};
</script>
<style lang="scss">
page {
width: 100%;
height: 100%;
background: #FFFFFF
}
.page {
background: #FFFFFF;
width: 100%;
height: 100%;
}
/* 图片 */
image {
display: block;
}
/* 容器 */
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
}
/* 部件列表和部件操作列表 */
.item-list,
.operate-list {
width: 240rpx;
height: 340rpx;
position: absolute;
left: 0;
right: 0;
top: 0;
// bottom:0;
margin: auto;
}
.item-list {
overflow: hidden;
}
.item-text {
font-family: '思源黑体 CN';
}
.list-active {
// outline: #ccc solid 1px;
}
.item-box {
position: absolute;
}
.active {
// outline: 0.5upx solid #4EE2AE;
}
/* 删除、缩放、旋转操作按钮 */
.rotate,
.rotate-red,
.scale,
.close {
width: 28px;
height: 28px;
position: absolute;
z-index: 99;
cursor: pointer;
}
.rotate {
background-image: url(../../static/icon/icon_refresh.png);
background-size: 100%;
right: 0;
left: 0;
margin: auto;
}
.rotate-red {
background-image: url(../../static/icon/icon_refresh_red.png);
background-size: 100%;
right: 0;
left: 0;
margin: auto;
}
.scale {
background-image: url(../../static/icon/icon_zoom.png);
background-size: 100%;
transform-origin: center;
}
.frame-left-top-wrap {
position: absolute;
z-index: 100;
width: 60upx;
height: 60upx;
left: -30upx;
top: -30upx;
}
.frame-left-top {
position: absolute;
z-index: 100;
width: 30upx;
height: 30upx;
left: 24upx;
top: 24upx;
border-left: 6upx solid #5CE6B5;
border-top: 6upx solid #5CE6B5;
}
.frame-left-top::after,
.frame-right-top::after,
.frame-left-bottom::after,
.frame-right-bottom::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(1.5);
}
.frame-right-top-wrap {
position: absolute;
z-index: 100;
width: 60upx;
height: 60upx;
right: -30upx;
top: -30upx;
}
.frame-right-top {
position: absolute;
z-index: 100;
width: 30upx;
height: 30upx;
right: 24upx;
top: 24upx;
border-right: 6upx solid #5CE6B5;
border-top: 6upx solid #5CE6B5;
}
.frame-left-bottom-wrap {
position: absolute;
z-index: 100;
width: 60upx;
height: 60upx;
left: -30upx;
bottom: -30upx;
}
.frame-left-bottom {
position: absolute;
z-index: 100;
width: 30upx;
height: 30upx;
left: 24upx;
bottom: 24upx;
border-left: 6upx solid #5CE6B5;
border-bottom: 6upx solid #5CE6B5;
}
.frame-right-bottom-wrap {
position: absolute;
z-index: 100;
width: 60upx;
height: 60upx;
right: -30upx;
bottom: -30upx;
}
.frame-right-bottom {
position: absolute;
z-index: 100;
width: 30upx;
height: 30upx;
right: 24upx;
bottom: 24upx;
border-right: 6upx solid #5CE6B5;
border-bottom: 6upx solid #5CE6B5;
}
// 四边
.left_edge-wrap {
position: absolute;
z-index: 99;
left: -30upx;
width: 40upx;
height: 100%;
top: 0;
background: transparent;
}
.left_edge {
position: absolute;
z-index: 99;
left: 4upx;
/* width: 6upx; */
height: 40upx;
/* background: #5CE6B5; */
top: calc(50% - 20upx);
}
.left_edge::after,
.rightedge::after,
.topedge::after,
.bottomedge::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(2);
}
.rightedge-wrap {
position: absolute;
z-index: 99;
right: -30upx;
width: 40upx;
height: 100%;
background: transparent;
top: 0;
}
.rightedge {
position: absolute;
z-index: 99;
right: 4upx;
height: 40upx;
top: calc(50% - 20upx);
}
.topedge-wrap {
position: absolute;
z-index: 99;
top: -30upx;
width: 100%;
height: 40upx;
background: transparent;
left: 0;
right: 0;
margin: auto;
}
.topedge {
position: absolute;
z-index: 99;
top: 4upx;
width: 40upx;
/* height: 6upx;
background: #5CE6B5; */
left: 0;
right: 0;
margin: auto;
}
.bottomedge-wrap {
position: absolute;
z-index: 99;
bottom: -30upx;
width: 100%;
height: 40upx;
background: transparent;
left: 0;
right: 0;
margin: auto;
}
.bottomedge {
position: absolute;
z-index: 99;
bottom: 4upx;
width: 40upx;
/* height: 6upx;
background: #5CE6B5; */
left: 0;
right: 0;
margin: auto;
}
// 上一步、下一步按钮
.operation {
display: flex;
justify-items: center;
align-items: center;
z-index: 99;
position: fixed;
bottom: 120upx;
left: 50%;
transform: translate(-50%, -50%);
}
.operation_top {
overflow: hidden;
width: 89upx;
height: 88upx;
border-radius: 50%;
}
.operation_bottom {
overflow: hidden;
width: 89upx;
height: 88upx;
border-radius: 50%;
}
.operation_icon {
font-size: 40upx;
line-height: 100upx;
display: block;
text-align: center;
}
.toolLeft {
position: fixed;
top: 400upx;
left: 0;
width: 100upx;
.tool_li {
width: 100%;
height: 100upx;
.tool_li_img {
width: 40upx;
height: 40upx;
display: block;
margin: auto;
}
}
}
// 底部工具栏
.toolRight {
position: fixed;
top: 180upx;
right: 0;
width: 120upx;
z-index: 99;
.tool_li {
width: 100%;
height: 102upx;
.tool_li_img {
width: 53upx;
height: 48upx;
display: block;
margin: auto;
}
.tool_li_text {
text-align: center;
color: #333333;
font-size: 22upx;
margin-top: 10upx;
}
}
}
.toolBottom {
position: fixed;
bottom: 0;
z-index: 1000;
// width: 100%;
display: flex;
align-items: center;
height: 98upx;
right: 0;
.tool_add {
width: 207upx;
background: #47e5e5;
line-height: 98upx;
text-align: center;
color: #FFFFFF;
box-shadow: 0upx 0upx 16upx 0upx rgba(0, 0, 0, 0.08);
border-radius: 49upx 50upx 0upx 49upx;
font-size: 36upx;
font-weight: 500;
color: #FFFFFF;
margin-left: auto;
}
.grey {
background: #8F8F94 !important;
}
}
//底部工具栏
.tool {
position: fixed;
bottom: 0;
z-index: 1000;
width: 100%;
display: flex;
align-items: center;
height: 160upx;
background: #292933;
.tool_li {
width: 25%;
.tool_li_img {
width: 44upx;
height: 40upx;
display: block;
margin: auto;
}
.tool_li_text {
text-align: center;
color: #FFFFFF;
font-size: 22upx;
margin-top: 10upx;
}
}
.tool_add {
width: 210upx;
background: #47e5e5;
line-height: 160upx;
text-align: center;
color: #FFFFFF;
font-size: 36upx;
font-weight: 500;
}
.grey {
background: #8F8F94 !important;
}
}
.tooltext {
position: fixed;
bottom: 0;
z-index: 1000;
width: 100%;
display: flex;
align-items: center;
height: 160upx;
background: #292933;
.tooltext_li {
width: 25%;
.tooltext_li_image {
width: 50upx;
height: 50upx;
display: block;
margin: auto;
}
.tooltext_li_text {
text-align: center;
color: #FFFFFF;
font-size: 22upx;
margin-top: 10upx;
}
}
}
/* 底部分享 */
.uni-share {
position: relative;
display: flex;
flex-direction: column;
z-index: 9999;
}
// 分类
.scroll-container {
box-sizing: border-box;
white-space: nowrap;
.scroll-item {
text-align: center;
height: 80upx;
}
}
.material-series-scroll-item {
text-align: center;
padding: 10upx 20upx;
color: #FFFFFF;
background: #000;
border-radius: 40upx;
float: left;
margin: 0 10upx 5upx;
font-size: 21upx;
}
.material-series-scroll-item-active {
background: #864BC3;
}
// 尺码
.size {
width: 85upx;
height: 85upx;
background: #1E1E2A;
text-align: center;
line-height: 85upx;
color: #888888;
border-radius: 5upx;
margin-right: 26upx;
border: 1upx solid #1E1E2A;
font-size: 32upx;
}
.sizeactive {
background: #EF6262 !important;
border: 1upx solid #EF6262 !important;
color: #FFFFFF !important;
}
// placeholder属性
.place-holder {
color: #FFFFFF;
font-size: 40upx !important;
}
// 删除
.delete-wrap {
width: 100%;
height: 80px;
text-align: center;
font-size: 38rpx;
background: red;
color: #fff;
// position: absolute;
position: fixed;
bottom: -80px;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
}
.delete-wrap-active {
box-shadow: 0 0 15px #FFFFFF;
}
</style>