<template>
<view class="full-width content-color full-height" style="overflow: hidden;">
<!-- 自定义头部 -->
<myhead :worksid="0" :title="titlename" :color="'#864BC3'" :titleShow="true" :backShow="true" :background="'#131319'"></myhead>
<!-- 礼花 -->
<firework ref="firework" v-if="isReady" style="position: fixed;z-index: 9999;"></firework>
<!-- 裁剪图片 -->
<view class="full-width content-color full-height" style="background: black;" v-show="state">
<kps-image-cutter @ok="onok" @cancel="oncancle" ref="index" :fixed="false" :properties="properties">
</kps-image-cutter>
</view>
<!-- 滑到底图 -->
<view :animation="translateXState"
style="position: fixed; left: 0; width: 100%; overflow: hidden; height: 100%;" :style="{ top: textHeight + 'px'}">
<image src="https://img.colorpark.cn/wechat/track/shejiqu_2.png" mode="widthFix" style="width: 100%;"></image>
</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" :style="{height: data.windowHeight +'px'}"
@touchmove.stop="touchMove" @touchend.stop="touchEnd" @click.stop="itemCancel">
<!-- ,'background-image':' url(' + data.bgImage + ')' background-size:contain;background-repeat:no-repeat; background-position: center; -->
<!-- 辅助线 -->
<view v-if="guide_left" style="border-left: 1px dashed #864BC3;position: absolute; height: 100%; z-index: 999; left: calc(50% - 0.5px);"></view>
<!-- :animation="functionScale" :class="{translateXClass:translateX >= 0}" -->
<view
:style="{width: data.bgWidth +'px',height: data.editorHeight +'px',
transform: 'translateX(' + translateX + 'px) scale(' + transformscale + ')',
'-webkit-transform': 'translateX(' + translateX + 'px) scale(' + transformscale + ')'}"
:class="{translateXClass:translateX >= 0}"
style="position: relative;transition: all 2s; -webkit-transition: all 2s;">
<!-- 辅助线 -->
<view v-if="guide_top" style="width: 100%; border-top: 1px dashed #864BC3;position: absolute; z-index: 999;"
:style="{top: (data.editorHeight * location_scale - 0.5) +'px'}"></view>
<!-- 部件列表 -->
<view v-if="front_image_long" :class="['item-list', { 'list-active': data.listActive == true }]" style="overflow: hidden;"
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}">
<!-- 定制壳底图 -->
<image v-if="data.loadbgImageheightstate" :src="background_surface_image + '?x-oss-process=image/resize,lfit,w_1500'" mode=""
:style="{width: data.editorWidth * 0.95 +'px',height: data.editorHeight * 0.95 +'px'}"
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 0;"></image>
<!-- <view v-if="data.loadbgImageheightstate"
:style="{width: data.editorWidth * 0.95 +'px',height: data.editorHeight * 0.95 +'px',background:background_surface_color ? background_surface_color : 'none'}"
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 0;"></view> -->
<!-- 白底图 -->
<view v-if="data.loadbgImageheightstate"
:style="{width: data.editorWidth * 0.95 +'px',height: data.editorHeight * 0.95 +'px',background:background_color ? background_color : 'none'}"
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 0;"></view>
<!-- 遮罩图层 -->
<view :style="{'margin-top': (data.editorHeight * (1 - 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>
<!--图片 -->
<image v-else-if="item.type == 0" mode='aspectFill' style="min-height: 50px;min-width: 50px;"
: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>
<!-- 贴图 -->
<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>
<!-- 手机壳图 -->
<!-- <image :src="data.bgImage" mode=""
@load="loadbgImage"
style="position: absolute;z-index: 9;top: -1px; bottom: 0; left: -1px; right: 0;margin: auto;"
:style="{width: (data.editorWidth + 2) +'px',height: (data.editorHeight + 2) +'px'}"></image> -->
<!-- 旧——手机壳图 -->
<image :src="data.bgImage_old" mode="" @load="loadbgImage"
style="position: absolute;z-index: 9;top: -1px; bottom: 0; left: -1px; right: 0;margin: auto;"
:style="{width: (data.editorWidth + 2) +'px',height: (data.editorHeight + 2) +'px'}"></image>
</view>
<!-- 手机顶部盒子图 -->
<!-- <view v-if="front_image_long"
style="z-index: 10;position: absolute; left: 0; right: 0; top: 0; margin: auto;"
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}"
:animation="translateLeft">
<view :animation="translateHide"
style="position: absolute; width: 100%; height: 100%; overflow: hidden; top: 0; z-index: 10;transition: all 2s;opacity: 0;">
<image src="https://img.colorpark.cn/api/render/1627457707677.jpg" mode="widthFix"
style="position: absolute;z-index: 9;top: -1px; bottom: 0; left: -1px; right: 0;margin: auto; "
:style="{width: (data.editorWidth + 2) +'px',height: (data.editorHeight + 2) +'px'}"></image>
</view>
</view> -->
<!-- 遮挡镂空 -->
<!-- <view v-show="data.loadbgImageheight != '100%' && editory" style="width: 100%; position: relative; z-index: 9;" :style="{height: data.bgHeight +'px',top: editory +'px'}"> -->
<!-- <view :style="{height: 'calc((100% - ' + data.loadbgImageheight + 'px) / 2)'}" style="position: absolute; width: 100%; background: #FFFFFF; top: 0;"></view> -->
<!-- <image :src="data.bgImage" @load="loadbgImage" mode="aspectFit" :style="{width: data.bgWidth +'px',height: data.loadbgImageheight +'px'}"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;"></image> -->
<!-- <view :style="{height: 'calc((100% - ' + data.loadbgImageheight + 'px) / 2)'}" style="position: absolute; width: 100%; background: #FFFFFF; bottom: 0;"></view> -->
<!-- </view> -->
<!-- 操作列表 ,top: editory +'px' v-if="editory" front_image_long---->
<view v-if="front_image_long" :class="['operate-list', { 'list-active': data.listActive == true }]" style="z-index: 10;"
:style="{width: data.editorWidth +'px',height: data.editorHeight +'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.prevent="itemlongtap" @touchstart.stop.prevent="itemTouchStart" @touchmove.stop.prevent="itemTouchMove" @touchend.stop.prevent="itemTouchEnd" @touchcancel.stop.prevent="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.prevent="edgeStart($event, 'left')" @touchend.stop.prevent='edgeEnd'>
<view class='left_edge' :style="{background: item.typetext =='left' ? '#F56364' : '#1784D8'}">
</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.prevent="edgeStart($event, 'top')" @touchend.stop.prevent='edgeEnd'>
<view class='topedge' :style="{background: item.typetext =='top' ? '#F56364' : '#1784D8'}">
</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.prevent="edgeStart($event, 'right')" @touchend.stop.prevent='edgeEnd'>
<view class='rightedge' :style="{background: item.typetext =='right' ? '#F56364' : '#1784D8'}">
</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.prevent="edgeStart($event, 'bottom')" @touchend.stop.prevent='edgeEnd'>
<view class='bottomedge' :style="{background: item.typetext =='bottom' ? '#F56364' : '#1784D8'}">
</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.stop.prevent="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' : '#1784D8', 'border-top-color': item.typetext =='left-top' ? '#F56364' : '#1784D8'}">
</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.stop.prevent="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' : '#1784D8', 'border-top-color': item.typetext =='right-top' ? '#F56364' : '#1784D8'}">
</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.stop.prevent="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' : '#1784D8', 'border-bottom-color': item.typetext =='left-bottom' ? '#F56364' : '#1784D8'}">
</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.stop.prevent="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' : '#1784D8', 'border-bottom-color': item.typetext =='right-bottom' ? '#F56364' : '#1784D8'}">
</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.prevent='rotateStart' @touchmove.stop.prevent='rotateMove' @touchend.stop.prevent='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;' v-if="data.itemList[data.cidx]">
<view class='item-box-in' :style="{width: data.itemList[data.cidx].width + 'px' ,height: data.itemList[data.cidx].height +'px'}"
style="text-align: center;">
<view 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 }"
style="margin:auto;white-space:nowrap;display:table;">{{data.itemList[data.cidx].content}}</view>
</view>
</view>
<!-- 上一步、下一步按钮-->
<view :animation="functionHide" style="opacity: 0;"
class="operation" v-if="!active && !guide_left">
<view class="operation_top">
<image @click.stop='prev' src="../../static/image/icon_back_.png" mode="aspectFill" style="width: 89upx; height: 88upx;"></image>
</view>
<view class="operation_bottom">
<image @click.stop='next' src="../../static/image/icon_nextstep.png" mode="aspectFill" style="width: 89upx; height: 88upx;"></image>
</view>
</view>
<view style="position: fixed; left:0upx; right:0upx; bottom: 298upx;">
<view :animation="functionHide"
v-if="surface_type == 1 || surface_type == 2 || surface_type == 0"
style="color: #919192; font-size: 22upx; display: flex; justify-content: center; opacity: 0;">
<view style="text-align: center;z-index: 99; position: relative;color: #fff;" v-if="surface_type == 0">
<view>{{titlename}}</view>
<view @click="ordersize()">材质详情</view>
</view>
<view style="text-align: center;" v-if="surface_type == 1">
<view>自带壳</view>
<view>效果图仅供参考</view>
</view>
<view style="text-align: center;" v-if="surface_type == 2">
<view>打印材质为{{surfaceName || ''}}</view>
<view>效果图仅供参考</view>
</view>
<view v-if="surface_type == 1 || surface_type == 2 || surface_type == 0" @click="topagecategory(2)"
style="margin-left: 20upx; z-index: 99; position: relative;">
<image src="../../static/qiehuanke.png" mode="" style="width: 50upx; height: 50upx;"></image>
</view>
</view>
</view>
<!-- 提示 && data.itemList.length > 0-->
<view :animation="functionHide" v-if="!guide_left"
style="position: fixed; left:12upx; font-size: 25upx; color: #FFFFFF; bottom: 298upx;opacity: 0;" >
<view>单指可拖拽</view>
<view>双指可缩放</view>
<view>双击可裁剪</view>
</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>
<!-- 切换手机弹框 -->
<switchBrands ref="switchBrands" @goodsbrands="goodsbrands"></switchBrands>
<!-- 图片提示 -->
<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: #854AC2; 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>
<!-- 菜单栏目 -->
<view v-if="!active && !guide_left" class="toolRight" :animation="functionHide" style="opacity: 0;">
<view class="tool_li">
<view class="tool_li" @click="showPopup(23)" v-if="surface_type != 1">
<image class="tool_li_img" src="../../static/icon/icon_form.png" mode=""></image>
<view class="tool_li_text">壁纸底色</view>
</view>
<view class="tool_li" @click="showPopup(2)">
<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="showone = !showone" v-if="surface_type != 1">
<image @click="cancel('share')" class="tool_li_img" src="../../static/icon/icon_zuopin.png" mode=""></image>
<view @click="cancel('share')" class="tool_li_text">上传相片</view>
</view>
<view class="tool_li" @click="showPopup(3)" v-if="surface_type != 1">
<image class="tool_li_img" src="../../static/icon/icon_typeface.png" mode=""></image>
<view class="tool_li_text">添加文字</view>
</view>
<view class="tool_li" @click="wallpaperOnclick()" v-if="machine_id && surface_type != 1">
<image class="tool_li_img" style="width: 67upx; height: 56upx;"
src="../../static/randomwallpaper.png" mode=""></image>
<view class="tool_li_text">智能推荐</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" v-if="(background_color && background_color != 'none') && (surface_type == 0 || surface_type == 2)" @click.stop="eliminateBackgroundColor()">
<image class="tool_li_img" style="width: 50upx; height: 50upx;"
src="../../static/diy_icon_replace_default.png" mode=""></image>
<view class="tool_li_text">清空底色</view>
</view>
</view>
</view>
<view v-if="active && !guide_left" class="toolRight">
<view class="tool_li">
<!-- 移除 -->
<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: 54upx; height: 54upx;"
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>
<!-- 切换手机 :style="{ top: textHeight + 'px'}"-->
<view :animation="functionHide" v-if="!active && !guide_left" @click="topagecategory(0)"
style="z-index: 99;position: fixed; left: 12upx; opacity: 0; top: 200upx;">
<image style="width: 94upx; height: 119upx; display: block; margin: auto;"
src="../../static/qiehuan.png" mode=""></image>
</view>
<!-- 生成作品 -->
<view v-if="!guide_left" class="toolBottom" :animation="functionHide" style="opacity: 0;">
<view @click.stop="createWorks" hover-class="hover-class-bg"
:class="['tool_add',available == 0 ? 'grey' : '']"> {{createWorkstext}} </view>
</view>
<!-- 文本字体 -->
<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: 20%; 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-else class="uni-share full-width" :style="{height: data.windowHeight +'px'}">
<!-- 遮罩 -->
<view style="position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; z-index: 997; opacity: 0.8;" @click="cancel('share')"></view>
<!-- <view style="position: absolute; bottom: 0upx; left: 0; height: 100%; width: calc(100% - 120upx); z-index: 998; background: linear-gradient(0deg, #1B294F, #4E2761, #E73231); opacity: 0.8;"></view> -->
<view style="position: absolute; bottom: 0upx; left: 0; height: 100%; width: 120upx; z-index: 999; background: #1A1D33; overflow: hidden;">
<view style="width: 120upx; height: 188upx;">
<view style="position: relative;width: 120upx; height: 188upx;" v-if="e_active == 23 && (surface_type == 0 || surface_type == 2)"
@click="bgColorClick()">
<!-- 切换底色 -->
<image v-if="!backgroundColor" src="../../static/dise.png" mode=""
style="width: 66upx; height: 398upx; margin: auto; display: block;
position: absolute; top: -210upx; left: 0; right: 0;"></image>
<view v-if="!backgroundColor" style="text-align: center; position: absolute; left: 0; right: 0; bottom: 10upx; color: #FFFFFF;">底<br/>色</view>
<!-- 切换壁纸 -->
<image v-if="backgroundColor" src="../../static/bizhi.png" mode=""
style="width: 66upx; height: 231upx; margin: auto; display: block;
position: absolute; top: -40upx; left: 0; right: 0;"></image>
<view v-if="backgroundColor" style="text-align: center; position: absolute; left: 0; right: 0; bottom: 10upx; color: #000;">壁<br/>纸</view>
</view>
</view>
<!-- 一级分类 -->
<view style="width: 120upx;" :style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}"
v-if="e_active == 2 || e_active == 23">
<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: 10upx;"
:src="index == currentId ? item.icon_click : item.icon"
mode="aspectFill"></image>
</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 && !backgroundColor)" 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)">
{{item.title}}
</view>
</view>
</view>
<!-- 特效添加相框 -->
<!-- <shapeScrollView v-if="e_active == 22" ref="shapeScrollView" @Worksdetail="Worksdetail"
:windowHeight="(data.windowHeight * 0.8 - 160 * data.pixelRate)"></shapeScrollView> -->
<!-- 贴图/壁纸 -->
<scrollList v-if="e_active == 2 || (e_active == 23 && !backgroundColor)" ref="scrollList"
@Worksdetail="Worksdetail"
:windowHeight="(data.windowHeight - 210 * data.pixelRate - classificationHeight)"></scrollList>
<!-- 背景颜色 -->
<bgColor v-if="e_active == 23 && backgroundColor" ref="bgColor"
@bgColorAssembly="bgColorAssembly"
:windowHeight="(data.windowHeight - 210 * data.pixelRate - classificationHeight)"></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>
<!-- 上传照片选项 -->
</view>
</view>
</template>
<script>
import Env from '@/util/Env.js';
import http from '@/util/http.js';
import WxTouchEvent from "@/util/wx-touch-event";
import loadFont from '@/util/loadFont.js'// 封装字体加载
import homeservice from '@/service/homeservice.js';
import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";// 截取图片
import tColorPicker from '@/components/t-color-picker/t-color-picker.vue' //手机壳背景颜色
import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';// 上传图片进度条
import scrollList from './components/scrollView.vue';// 贴图
import shapeScrollView from './components/shapeScrollView.vue';// 相框
import textsettings from './components/textsettings.vue';// 文本弹框
import switchBrands from './components/switchBrands.vue';// 手机壳
// import wallpaper from './components/wallpaper.vue';// 壁纸推荐
import uniPopup from './common/uni-popup/uni-popup.vue';
import myhead from './head/head.vue';// 页眉
import drag from './js/drag.js'// 封装核心代码
import firework from '@/components/ay-firework/firework.vue';//礼花
import bgColor from './components/bgColor.vue';//手机壳颜色
/*** 色彩公园图片 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 中的回调函数
export default {
components: {
uniPopup,
kpsImageCutter,
myhead,
ProgressBar,
scrollList,
shapeScrollView,
textsettings,
switchBrands,
// wallpaper,
tColorPicker,
firework,
bgColor
},
computed: {},
data() {
return {
classificationHeight:0,
backgroundColor:false, //控制底色
Adlists:[],
diy_backList:[],
diy_bannerList:[],
getStocklist: [], //查询货到库存
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, //判断弹框是贴图还是文本 1模板 2贴图 3字体 4编辑 22添加相框
addtext: false, //判断加减文字
bg_text_color: false, //判断加减文字
showone: false, //判断图片弹框
Works_category: [], //作品分类
Works_category_id: null, //作品选中分类id
Works_categorydatalist: [], //作品分类作品列表
Material_category: [], //贴图分类
Material_category_id: null, //贴图选中分类
Material_categorydatalist: [], //贴图分类贴图列表
wallpaper_category: [], //壁纸分类
wallpaper_category_id: null, //壁纸选中分类
wallpaper_categorydatalist: [], //壁纸列表
material_series_list: [], //二级分类
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_recommend:'1',//推荐
is_under:0, //贴图是否为背景图
partner_id:null
},
works_id: null, //作品id
createWorkstext: '生成',
machine_id: null, //设备id
key: 2, //1直营配送站 2 万能通用版 3色彩自助站
sn:null,
design_color: '#131319',
mix_scale: 1, //图片比率
design_width: 280,
design_height: 380,
design_width: 280,
print_height: 380,
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: '', // 背景图
bgWidth: 0, // 画布宽度
bgHeight: 0, // 画布高度
pixelRate: null,
listActive: true,
currentText: '',
cidx: 0,
itemList: [],
loadbgImageheight:'100%',
loadbgImageheightstate:false,//白底图
},
titlename:"色彩公园手机壳" ,//自定义头部
loading:null,
percent:0, //进度条
shape_image:'' ,//形状图片
shape_id:'',//形状id
shape_price:'',//形状价格
dict_id:null,//手机壳属性字典id
goods_id:null,//手机壳属性字典id
goods_size:null,//手机壳属性字典id
front_image_long: false,//记录产品详情数据是否加载已完成
available:1,//根据设备是否禁用下订单 0禁用下单 1默认
support_pay:null,//单机版是否支付 0不需要支付 1需要支付
textHeight:null,//设备头部高度
// textTop:null,
background_color:null,//手机壳底色
background_surface_color:null,//定制壳手机壳底色
background_surface_image:null,//定制壳手机壳底色
tColorPicker_color: {r: 0,g: 0,b: 0,a: 1},
animationData:{},
animation:null,
deleteTop:0,
deleteWrap:false,//拖拽删除图库
delete_wrap_state:true,//拖拽删除图库
translateX:-400,
translateXState:1,
translateLeft:null,
translateHide:null,
translateHideImg:false,
functionHide:null,
transformscale:1,//整体缩小
functionScale:null,//整体缩小
isReady: false,//礼花
orderUpdateTime:null,
titleHeight:0,
surface_type:0, //材质类型 0：默认 1：自带壳 2：定制壳
surfaceName:null,
};
},
created() {//设备信息
this.textHeight = 60
},
methods: {
ordersize(){
uni.navigateTo({
url: '../mine/goodsordersize?goods_id=' + this.data.goods_id
})
},
eliminateBackgroundColor(){
if(this.$base.surfaceData.surface_type == 2){ //定制壳
this.background_color = 'none'
}
if(this.$base.surfaceData.surface_type == 0){ //默认
this.background_color = null
}
},
// 壁纸推荐
wallpaperOnclick(){
var that = this
homeservice.queryListPhone({
s: 'Material.randomMaterial',
machine_id:that.machine_id,
goods_id:that.data.goods_id
}).then(result => {
console.log(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
// top: this.data.editorHeight / 2 - height / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: that.data.editorWidth / 2 - width / 2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: that.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
// y: this.data.editorHeight / 2,
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
})
// 提示用户此贴图可用卷
if(result.is_discount == '1'){
if(that.$base.coupon_flag_desc == '') return;
uni.showToast({title: that.$base.coupon_flag_desc,icon: 'none',duration: 2000,mask: false});
}
//赋值
that.data.itemList = items
that.saveSnapshot();
},
fail:function(err){
uni.hideLoading()
uni.showToast({title: '暂无智能推荐',icon: 'none'});
}
})
}).catch(err => {
uni.showToast({title: err.msg,icon: 'none'});
});
},
addItemreplace() {// 替换图片
this.replaceimage()
},
replaceimage(){
let item = items[index];
var _this = this
uni.chooseImage({
sizeType: ['original'], //可以指定是original原图还是compressed压缩图，默认二者都有
sourceType: ['camera', 'album'], //从相册选择
count: 1,
success: (res) => {
console.log(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 = 0
wx.request({
url: 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) {
console.log(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) => {
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") {
return wx.showToast({
title: '只能上传.png、.jpg、.jpep 格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length);
}
})
},
/* 上传图片拍照 */
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") {
return wx.showToast({
title: '只能上传.png、.jpg、.jpep 格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length);
}
})
},
/* 上传图片从相册 */
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") {
return wx.showToast({
title: '只能上传.png、.jpg、.jpep 格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length);
}
})
},
/* 上传图片重微信 */
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;
var size = res.tempFiles[0].size;
var path = res.tempFiles[0].path;
tempFilePaths[0] = path;
console.log("微信上传图片" + tempFilePaths + size + 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,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length);
}
})
},
//选择微信相片跟本地相册弹框
selectPicturePop() {
this.delete_wrap_state = false
this.showone = false
this.$refs['showpicture'].open()
},
//选择微信相片跟本地相册弹框取消
selectPicturePopColse() {
console.log("取消进来")
//this.delete_wrap_state = false
this.showone = false
this.$refs['showpicture'].close();
},
/* 函数描述：作为上传文件时递归上传的函数体体；
* 参数描述：
* filePaths是文件路径数组
* successUp是成功上传的个数->0
* failUp是上传失败的个数->0
* i是文件路径数组的指标->0
* length是文件路径数组的长度
*/
uploadDIY(tempFilePaths, successUp, failUp, i, length) {
let machine_id = this.machine_id || 0
let user_id = 0
var _this = this
wx.request({
url: 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) {
console.log(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 + '.jpg',
'OSSAccessKeyId': atter.accessid,
'policy': atter.policy,
'Signature': atter.signature,
'success_action_status': '200',
'callback':atter.callback,
},
success: function(res) {
console.log(res)
successUp++;
if (res.statusCode != 200) {
// console.log({errCode: '599', msg:'其他错误'})
return;
}
if (res.statusCode == 200){
_this.percent = 100
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
// console.log(_this.mix_scale)
if (ratio >= 1) { //长方形
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
}
} else if (ratio < 1) { //长高方形
height = _this.data.editorHeight * _this.mix_scale
width = image.width * ratioheight
if (height / 2 > _this.editor_top) {
width = width * (_this.editor_top * 2 / height)
height = _this.editor_top * 2
}
}
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
})
_this.data.itemList = items
_this.saveSnapshot();
}
});
}
// console.log(atter.host + '/' + atter.dir + time + '.jpg')
},
fail: function(err) {
failUp++;
console.log(err)
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
})
}
})
},
goodsbrands(obj){
if(obj.switchBrandState == 2){ //切换手机壳
this.backgroundColor = false //控制底色
this.data.loadbgImageheightstate = true
this.$base.surfaceData = {
surface_type:obj.surface_type, //材质类型 0：默认 1：自带壳 2：定制壳
surface_id: obj.surface_id,//材质对应的编号，没有的话就为0或者不传
surface_color: obj.surface_color,//材质颜色
surfaceName:obj.surfaceName,//材质名称
surface_color_series_id:obj.surface_color_series_id, //选择的色系编号，没有的话就不传或者为0
surface_color_id:obj.surface_color_id,//选择的颜色编号，没有的话就不传或者为0
surface_color_series_id_text:obj.surface_color_series_id_text,
surface_color_id_text:obj.surface_color_id_text,//手机底色
}
console.log(this.$base.surfaceData)
this.surface_type = this.$base.surfaceData.surface_type
this.surfaceName = this.$base.surfaceData.surfaceName
if(this.$base.surfaceData.surface_type == 0){ //默认
this.background_color = null //手机底色
// this.background_surface_color = null //定制壳手机壳底色
}
if(this.$base.surfaceData.surface_type == 1){ //自带壳
this.background_color = this.$base.surfaceData.surface_color_id_text //手机底色
// this.background_surface_color = null //定制壳手机壳底色
// 清空历史记录
items = []; // 当前显示的图片列表
index = 0; // 所点击的图片的索引
snapshot = []; // 操作历史记录清空
snapshotIndex = -1;
this.data.itemList = items//赋值
this.saveSnapshot();
}
if(this.$base.surfaceData.surface_type == 2){ //定制壳
this.background_color = 'none'
// this.background_surface_color = this.$base.surfaceData.surface_color //定制壳手机壳底色
}
this.goodslist() // 获取产品详情数据
if(this.key != 2){
this.orderNewLockAttrStock() //锁库存
}
}else{ //切换手机
this.data.loadbgImageheightstate = false
this.data.goods_id = obj.goods_id_e.goods_id // 商品id
this.dict_id = obj.goods_id_e.dict_id //产品属性id
this.goods_id = obj.goods_id_e.goods_id //产品id
this.goods_size = obj.goods_id_e.modeltext// 品牌名
if(obj.sn){
this.sn = obj.sn
}
this.$base.surfaceData = {
surface_type:obj.surface_type, //材质类型 0：默认 1：自带壳 2：定制壳
surface_id: obj.surface_id,//材质对应的编号，没有的话就为0或者不传
surface_color: obj.surface_color,//材质颜色
surfaceName:obj.surfaceName,//材质名称
surface_color_series_id:obj.surface_color_series_id, //选择的色系编号，没有的话就不传或者为0
surface_color_id:obj.surface_color_id,//选择的颜色编号，没有的话就不传或者为0
surface_color_series_id_text:obj.surface_color_series_id_text,
surface_color_id_text:obj.surface_color_id_text,
}
console.log(this.$base.surfaceData)
this.surface_type = this.$base.surfaceData.surface_type
this.surfaceName = this.$base.surfaceData.surfaceName
if(this.$base.surfaceData.surface_type == 0){ //默认
this.background_color = null //手机底色
// this.background_surface_color = null //定制壳手机壳底色
}
if(this.$base.surfaceData.surface_type == 1){ //自带壳
this.background_color = this.$base.surfaceData.surface_color_id_text //手机底色
// this.background_surface_color = null //定制壳手机壳底色
// 清空历史记录
items = []; // 当前显示的图片列表
index = 0; // 所点击的图片的索引
snapshot = []; // 操作历史记录清空
snapshotIndex = -1;
this.data.itemList = items//赋值
this.saveSnapshot();
}
if(this.$base.surfaceData.surface_type == 2){ //定制壳
this.background_color = 'none'
// this.background_surface_color = this.$base.surfaceData.surface_color
}
this.goodslist() // 获取产品详情数据
if(this.key != 2){
this.orderNewLockAttrStock() //锁库存
}
}
// 作品分类 贴图分类
this.category()
},
orderNewLockAttrStock(){
homeservice.queryListPhone({// 释放锁定库存
s: 'Order.newLockAttrStock',
machine_id:this.machine_id, //设备id
goods_id:null, //产品
dict_id:null,//产品属性id
old_sn:null,
onlyClear:1
}).then(result => {}).catch(err => {
uni.showToast({title: err.msg || err.data,icon: 'none'});
});
// 锁定库存
homeservice.queryListPhone({
// s: 'Order.lockAttrStock',
s: 'Order.newLockAttrStock',
machine_id:this.machine_id, //设备id
goods_id:this.goods_id, //产品
dict_id:this.dict_id,//产品属性id
old_sn:this.sn
}).then(result => {
this.$base.lockInventory = result //锁库存储存信息
this.sn = result.sn
this.orderUpdateSn() //定时器锁库存
}).catch(err => {
uni.showToast({title: err.msg || err.data,icon: 'none'});
});
},
// 移除遮罩形状
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) {
if(this.available == 0) return;
var that = this
if(this.$base.isclick == true){
this.$base.isclick = false;
this.$refs['textsettingsshare'].close()
var that = this
if (this.machine_id != undefined && this.machine_id != null && this.machine_id != '') {
// 判断设备是否正常
homeservice.queryListPhone({
s: 'machine.newDetail',
machine_id: this.machine_id
}).then(res => {
this.available = res.available //禁用下订单
if(this.available == 0){
this.createWorkstext = '暂时缺货'
}
this.$base.coupon_flag_desc = res.coupon_flag_desc
this.support_pay = res.support_pay //单机版是否支付
that.createWorks_one(e)
}).catch(err => {
uni.showToast({title: '当前打印站正在维护' ,icon: 'none'});
});
}else{
that.createWorks_one(e)
}
//定时器
setTimeout(function(){
that.$base.isclick = true;
}, 1500);
}
},
createWorks_one: function(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);
}
// console.log(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
}
var loading = false
if (loading) return;
if (components.length <= 0) {
uni.showToast({title: '啊嘞，作品还是一片荒漠！',icon: 'none'});
return false;
}
loading = true
uni.showLoading({title: '正在设计',mask: true})
if (loading) {
homeservice.WorkssavePhone({
s: 'Works.save',
components: components,
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,//手机壳背景颜色
// dict_id:this.dict_id,//属性字典id
// goods_id:this.goods_id,//属性字典id
// goods_size:this.goods_size//属性字典id
}).then(result => {
uni.hideLoading();
uni.showToast({title: '作品绘制成功',icon: 'none',mask: true});
if (this.createWorkstext == '生成' || this.createWorkstext == '立即下单' || this.createWorkstext == '保存' || this.createWorkstext == '更新') {
homeservice.setCate({
goodid: result.id,
machine_id: this.machine_id,
goods_id: this.data.goods_id
})
if (this.key == 2) {
this.self_help(loading, result.id)
} else {
// 有设备machine_id
// console.log(this.machine_id)
if(this.machine_id != null){
//隐藏功能按钮 1s
let functionHideanimation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease-out'
})
functionHideanimation.opacity(0).step()
this.setData({
functionHide: functionHideanimation.export()
})
// // 手机变小
// setTimeout(function(){
// this.transformscale = 0.5
// // let animation = wx.createAnimation({
// // duration: 3000,
// // timingFunction: 'ease-out'
// // })
// // animation.scale(0.5).step()
// // this.setData({
// // functionScale: animation.export()
// // })
// }.bind(this), 1500)
// 手机顶部盒子移动回来
// setTimeout(function(){
// let animationDelLots = wx.createAnimation({
// duration: 2000,
// timingFunction: 'ease-out'
// })
// animationDelLots.translate(0, 0).step();//向左移动
// this.setData({
// translateLeft: animationDelLots.export()
// })
// }.bind(this), 1000)
// 手机顶部和旧背景图消失
// setTimeout(function(){
// this.isReady = true;// 礼花
// let animationDelLots = wx.createAnimation({
// duration: 1000,
// timingFunction: 'ease-out'
// })
// animationDelLots.opacity(0).step()
// this.setData({
// translateHide: animationDelLots.export()
// })
// // 背景图显示
// let animation = wx.createAnimation({
// duration: 1000,
// timingFunction: 'ease-out'
// })
// animation.opacity(1).step()
// this.setData({
// translateXState: animation.export()
// })
// }.bind(this), 3000)
// 手机壳离开
setTimeout(function(){
this.translateX = ((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth)
// let scalex = wx.createAnimation({
// duration: 2000,
// timingFunction: 'ease-out'
// })
// scalex.scale(0.5).translate(this.translateX*2, 0).step();//向左移动
// this.setData({
// functionScale: scalex.export()
// })
}.bind(this), 4000)
// 跳转订单
setTimeout(function(){
this.isReady = false;// 礼花
uni.navigateTo({
url: '../mine/order?goodid=' + result.id + '&machine_id=' + this.machine_id + '&goods_id=' + this.data.goods_id + '&sn=' + this.sn
})
}.bind(this), 6000)
}else{
uni.navigateTo({
url: '../mine/nothingmachineid'
})
}
}
} else {
uni.navigateTo({
url: '../mall/myworksDetail?id=' + result.id
})
}
}).catch(err => {
uni.hideLoading();
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：自助版
type: 2, //1：配送版，2：单机版，3：自助版
machine_id: this.machine_id, //设备
goods_id: this.data.goods_id, //产品
works_id: works_id, //作品
channel_no: null, //货道
dict_id: null, //属性字典id
goods_size: null, //产品尺寸
works_num: null, //作品
shop_id: null, //商铺
sn: null, //前端查询标志
coupon_id: null, //优惠券id，支付多个id( 1-2-3)
user_address: null ,//地址
support_pay: this.support_pay,//地址
surface_type:this.$base.surfaceData.surface_type, //材质类型 0：默认 1：自带壳 2：定制壳
surface_id: this.$base.surfaceData.surface_id,//材质对应的编号，没有的话就为0或者不传
surface_color_series_id:this.$base.surfaceData.surface_color_series_id, //选择的色系编号，没有的话就不传或者为0
surface_color_id:this.$base.surfaceData.surface_color_id,//选择的颜色编号，没有的话就不传或者为0
}
if(this.support_pay == 1){
uni.navigateTo({
url: '../mine/order?goodid=' + works_id + '&machine_id=' + this.machine_id + '&goods_id=' + this.data.goods_id + '&sn=' + this.sn
})
}else{
uni.showLoading({
title: '正在生成订单...',mask: true
})
homeservice.queryListPhone(data).then(result => {
// 关闭当前页面，跳转到应用内的某个页面。
uni.navigateTo({
url: '../mall/lineUp?machine_id=' + this.machine_id + '&key=' + this.key
})
uni.hideLoading();
}).catch(err => {
loading = false;
uni.hideLoading();
uni.showToast({title: err.msg || err.data,icon: 'none'});
});
}
},
// 切换手机
topagecategory(e){
if(this.key == 2){ //单机版
this.$nextTick(() => {
this.$refs['switchBrands'].open({
machine_id:this.machine_id,//设备编号
key:this.key,//
goods_id:this.data.goods_id,//产品id
dict_id:this.dict_id, //产品属性id
sn:this.sn,//
switchBrandState:e //0正常 1跳过选择手机型号 2定制页选择材质
})
})
}else{
this.$nextTick(() => {
this.$refs['switchBrands'].open({
machine_id:this.machine_id,//设备编号
key:this.key,//
goods_id:this.data.goods_id,//产品id
dict_id:this.dict_id, //产品属性id
sn:this.sn,//
switchBrandState:e //0正常 1跳过选择手机型号 2定制页选择材质
})
})
}
},
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.min_width = item.width
item.min_height = item.height
if (item.min_width == 50) {
item.min_width = 55
}
if (item.min_height == 50) {
item.min_height = 55
}
// 记录坐标
item.scaleone = item.width / item.height
item.initRightBottomPoint = item.rightBottomPoint
item.initRightTopPoint = item.rightTopPoint
item.initLeftTopPoint = item.leftTopPoint
item.initLeftBottomPoint = item.leftBottomPoint
item.initLeftMiddlePoint = item.leftMiddlePoint
item.initRightMiddlePoint = item.rightMiddlePoint
item.initTopMiddlePoint = item.topMiddlePoint
item.initBottomMiddlePoint = item.bottomMiddlePoint
item.initCenterPos = item.centerPos
// 获取编辑框的左边距和上边距
var mLeft = this.getLeft();
var mTop = this.getTop();
item.mLeft = mLeft
item.mTop = mTop
},
// 边框移动结束
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) { //特效
// console.log(item)
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){
// console.log(this.data.itemList.length)
this.showone = !this.showone
}
}
},
Worksdetaildata(item) { //this.e_active 1模板 2贴图 3字体 4编辑 22添加相框
let s_data = 'Works'
if (this.e_active == 1) {
items = []
} else if (this.e_active == 2 || this.e_active == 23) {
s_data = 'Material'
}
uni.showLoading({title: '正在加载中...',mask: true})
homeservice.queryListPhone({
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) { //贴图
uni.showLoading({title: '加载中...',mask: true})
// 读取主图遮罩
uni.getImageInfo({
src: result.url,
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: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: this.editor_top - height / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
// top: this.data.editorHeight / 2 - height / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: this.data.editorWidth / 2 - width / 2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: this.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
// y: this.data.editorHeight / 2,
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: '图片不在以下 downloadFile 合法域名列表中',icon: 'none'});
}
})
}
}).catch(err => {
uni.hideLoading();
uni.showToast({title: err.msg,icon: 'none'});
});
},
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,
})
})
}
},
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.$nextTick(() => {
this.$refs['scrollList'].open({
e:this.e_active,
queryPage:this.queryPage,
})
})
// }
},
handleScroll(index, item) { //选中
this.queryPage.material_series_id = 0
this.material_series_currentId = 0
this.backgroundColor = false
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,
})
})
}
}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);
this.$nextTick(() => {
this.$refs['shapeScrollView'].open(this.queryPage)
})
}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,
})
})
}
},
MaterialseriesList(){ //查询分类下二级分类
this.material_series_list = []
homeservice.queryListPhone({
s: 'Material.seriesList',
category_id:this.queryPage.material_category_id,
}).then(result => {
this.queryPage.material_series_id = null
this.material_series_list = result
if(this.material_series_list.length > 0){
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
})
// console.log('height' + that.classificationHeight)
})
}.bind(this),100)
}).catch(err => {
uni.showToast({title: err.msg,icon: 'none'});
});
},
showPopup(e) { //打开弹框 1模板 2贴图 3字体 4编辑 22添加相框 23壁纸
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 == 2) { //贴图
this.Adlists = this.diy_bannerList
// old
// this.queryPage.goods_id = null
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.brands[this.currentId].title == '我的'){
this.$nextTick(() => {
setTimeout(function(){
this.$refs['scrollList'].open({
e:this.e_active,
queryPage:{
s: 'Material.myMaterial',
page: 1,
per_page: 50
},
})
}.bind(this),100)
})
}else{
this.MaterialseriesList()
this.$nextTick(() => {
setTimeout(function(){
this.$refs['scrollList'].open({
e:e,
queryPage:this.queryPage,
})
}.bind(this),100)
})
}
} else if (e == 3) { //文本
index = null
this.addtext = true
this.data.currentText = ''
this.$nextTick(() => {
setTimeout(function(){
this.$refs['textsettings'].open({
data:this.data,
bg_text_color:this.bg_text_color
})
}.bind(this),200)
})
} else if (e == 4) { //文本
this.addtext = false
this.$nextTick(() => {
setTimeout(function(){
this.$refs['textsettings'].open({
data:this.data,
bg_text_color:this.bg_text_color
})
}.bind(this),200)
})
}else if (e == 22){ //形状
// this.queryPage.goods_id = this.data.goods_id
// this.brands = this.Works_category
// this.currentId = this.currentId_Works;
// this.currentIndex = this.currentIndex_Works;
// this.queryPage.s = 'Material.getShapeList'
// this.queryPage.material_category_id = null
// this.queryPage.works_category_id = null
// this.queryPage.shape_category_id = null
// this.queryPage.is_hot = null
// this.queryPage.is_new = null
// this.queryPage.shape_category_id = this.Works_category[0].id
// if (this.Works_category_id) {
// this.queryPage.shape_category_id = this.Works_category_id
// }
// this.$nextTick(() => {
// this.$refs['shapeScrollView'].open(this.queryPage)
// })
}else if (e == 23){ //壁纸
this.Adlists = this.diy_backList
// this.queryPage.goods_id = null
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.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()
if(this.backgroundColor){
this.$nextTick(() => {
setTimeout(function(){
this.$refs['bgColor'].open()
}.bind(this),200)
})
}else{
this.$nextTick(() => {
setTimeout(function(){
this.$refs['scrollList'].open({
e:e,
queryPage:this.queryPage,
})
}.bind(this),200)
})
}
}
},
cancel(type) { //关闭弹框
this.$refs['show' + type].close()
this.addtext = false
if (wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop: 0
})
}
this.delete_wrap_state = true
},
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) {},
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
})
})
},
// 文本字体
typefaceClick(typeface) {
// 获取当前选中的部件
var item = items[index];
if(item != undefined && item.type == 1){
item.font_family = typeface.key
item.font_dict_id = typeface.id
// 字体行高变化
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
}
var that = this;
var query = wx.createSelectorQuery();
query.select('#item-text').boundingClientRect();
query.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
})
}else{
uni.showToast({title: '啊嘞，你还没有输入内容哦',icon: 'none'})
}
this.saveSnapshot();
},
// 文本加粗
workweight() {
// 获取当前选中的部件
var item = items[index];
if(item != undefined && item.type == 1){
item.font_style = item.font_style == "" ? "bold" : ""
}else{
uni.showToast({title: '啊嘞，你还没有输入内容哦',icon: 'none'})
}
this.saveSnapshot();
},
// 文本颜色
workcolor(color) {
// 获取当前选中的部件
var item = items[index];
console.log(item)
if(item != undefined && item.type == 1){
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(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(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(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(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(scalePos, center, angle) {
// console.log(scalePos)
// 左上顶点的坐标
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(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
};
},
/**
* 读取图片操作
*
* @param e object 事件
* @return void
*/
loadbgImage(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 / this.data.bgWidth;
this.data.loadbgImageheight = height / rScale
this.data.loadbgImageheightstate = true
},
/** 读取图片操作 **/
// loadImage(e) {
// var id = e.currentTarget.dataset.id;
// let width = 0
// let height = 0
// let ratio = e.detail.width / e.detail.height
// let ratiowidth = this.print_width / e.detail.width
// let ratioheight = this.print_height / e.detail.height
// if (ratio >= 1) { //长方形
// width = this.print_width * this.data.pixelRate * this.mix_scale * this.design_widthrate
// height = e.detail.height * ratiowidth * this.data.pixelRate * this.mix_scale * this.design_heightrate
// if (height / 2 > this.editor_top) {
// width = width * (this.editor_top * 2 / height)
// height = this.editor_top * 2
// }
// } else if (ratio < 1) { //长高方形
// height = this.print_height * this.data.pixelRate * this.mix_scale * this.design_widthrate
// width = e.detail.width * ratioheight * this.data.pixelRate * this.mix_scale * this.design_heightrate
// if (height / 2 > this.editor_top) {
// width = width * (this.editor_top * 2 / height)
// height = this.editor_top * 2
// }
// }
// items[id - 1]['width'] = width;
// items[id - 1]['height'] = height;
// items[id - 1]['top'] = items[id - 1]['y'] - (items[id - 1]['height'] / 2);
// items[id - 1]['left'] = items[id - 1]['x'] - (items[id - 1]['width'] / 2);
// // 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);
// },
/**
* 部件点击事件
*
* @param e object 事件
* @return void
*/
itemClick(e) {
// 循环数据找到点击点
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) {
// console.log('点击画布区域取消聚焦')
this.$refs['textsettingsshare'].close()
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() {
//return this.data.bgWidth * 0.3;
// return 235 * this.data.pixelRate;
return (750 - this.design_width) / 2 * this.data.pixelRate;
},
// 获取编辑区域上边距
getTop() {
// return this.data.bgHeight * 0.25;
return (this.data.bgHeight - this.data.editorHeight) / 2;
},
/**
* 图片拖动开始事件
*
* @param e object 事件
* @return void
*/
dragStart(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;
}
//赋值
this.data.listActive = true
this.data.cidx = index
this.data.currentText = currentText
this.data.itemList = items
},
// 图片拖动中事件
dragMove(e) {
let that = this;
wx.createSelectorQuery().select('.delete-wrap').boundingClientRect(function(rect) {
that.setData({
deleteTop: rect.top,
})
}).exec();
// 获取当前选中的部件
var item = items[index];
if (e.touches.length > 1) {} else {
drag.dragMove(e,item,this.data,this.editor_top)
this.guide_left = true // 开启辅助线
this.guide_top = true // 开启辅助线
this.delete_wrap_state = true
// console.log(e.changedTouches[0].pageY + 80)
// console.log(this.deleteTop)
if (e.changedTouches[0].pageY + 80 > this.deleteTop) { //如果图片容器底部距离大于删除框顶部距离就删除图片
this.deleteWrap = true
}else{
this.deleteWrap = false
}
}
//赋值就移动了
this.data.itemList = items
// this.setData({itemList: items});
},
// 拖动结束事件
dragEnd(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.initRightBottomPoint = item.rightBottomPoint
item.initRightTopPoint = item.rightTopPoint
item.initLeftTopPoint = item.leftTopPoint
item.initLeftBottomPoint = item.leftBottomPoint
item.initLeftMiddlePoint = item.leftMiddlePoint
item.initRightMiddlePoint = item.rightMiddlePoint
item.initTopMiddlePoint = item.topMiddlePoint
item.initBottomMiddlePoint = item.bottomMiddlePoint
item.initCenterPos = item.centerPos
// 获取编辑框的左边距和上边距
var mLeft = this.getLeft();
var mTop = this.getTop();
item.mLeft = mLeft
item.mTop = mTop
//赋值
this.data.listActive = true
},
// 部件旋转开始事件
rotateStart(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(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(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(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(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){
index = items.length - 1
items.splice(index, 1);// 删除指定的部件
this.setData({
'data': this.data
});
this.saveSnapshot();
},
// 删除部件
deleteItem: function(item, ix) {
let currentItem = items[index];// 当前选中的部件
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(e) {
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_color: '#000000',
under_color: '',
content: e.detail.value, // 文本
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
})
// console.log(items)
this.text_awaitone(e)
} else {
this.text_await(e)
}
},
async text_awaitone(e) {
// 获取当前选中的部件
var item = items[index];
item.content = e.detail.value;
var that = this;
//赋值
this.data.currentText = e.detail.value
this.data.itemList = items
await this.setData({
data: this.data
})
var query = wx.createSelectorQuery();
query.select('#item-text').boundingClientRect();
setTimeout(function(){
query.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
})
},200)
},
async text_await(e) {
// 获取当前选中的部件
var item = items[index];
if (e.detail.value != item.content) {
item.content = e.detail.value;
var that = this;
//赋值
this.data.currentText = e.detail.value
this.data.itemList = items
await this.setData({
data: this.data
})
var query = wx.createSelectorQuery();
query.select('#item-text').boundingClientRect();
setTimeout(function(){
query.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
})
},200)
}
},
// 保存当前作品的快照
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});
}
},
// 下一层
lowerIndex() {
var currentItem = items[index];// 当前选中的部件
if (currentItem.index <= 0) {
wx.showToast({title: '已经到达最底层',icon: 'success',duration: 2000});
} else {
if(currentItem.is_under == 1){
// 循环当前的组件数据
for (var item of items) {
if (item.index == currentItem.index - 1) {
item.index = item.index + 1;
currentItem.index = currentItem.index - 1;
this.data.itemList = items
// this.setData({itemList:items});
this.saveSnapshot();
break;
}
}
}else{
let number_index = 0
for (var item of items) {
if (item.is_under == 1){
number_index++
}
}
if (currentItem.index <= number_index) {
wx.showToast({title: '已经到达最底层',icon: 'success',duration: 2000});
} else {
// 循环当前的组件数据
for (var item of items) {
if (item.index == currentItem.index - 1) {
item.index = item.index + 1;
currentItem.index = currentItem.index - 1;
this.data.itemList = items
// this.setData({itemList:items});
this.saveSnapshot();
break;
}
}
}
}
}
},
// 上一层
upperIndex() {
// 当前选中的部件
var currentItem = items[index];
if (currentItem.index >= items.length - 1) {
wx.showToast({title: '已经到达最顶层',icon: 'success',duration: 2000});
} else {
if(currentItem.is_under == 1){
let number_index = 0
for (var item of items) {
if (item.is_under == 1){
number_index++
}
}
if (currentItem.index >= number_index - 1) {
wx.showToast({title: '已经到达最顶层',icon: 'success',duration: 2000});
} else {
// 循环当前的组件数据
for (var item of items) {
if (item.index == currentItem.index + 1) {
item.index = item.index - 1;
currentItem.index = currentItem.index + 1;
this.data.itemList = items
this.saveSnapshot();
break;
}
}
}
}else{
// 循环当前的组件数据
for (var item of items) {
if (item.index == currentItem.index + 1) {
item.index = item.index - 1;
currentItem.index = currentItem.index + 1;
this.data.itemList = items
// this.setData({itemList:items});
this.saveSnapshot();
break;
}
}
}
}
},
// 平正
// setZeroRotate: function() {
// // 当前选中的部件恢复旋转角度
// let item = items[index];
// item.rotate = 0.00;
// item.angle = 0.00;
// this.data.itemList = items
// // this.setData({itemList:items});
// this.saveSnapshot();
// },
// 居中
// setCenterPlace: function() {
// let pixelRate = this.data.pixelRate;
// // 当前选中的部件位置居中
// let item = items[index];
// // item.x = 140.00 * pixelRate;
// // item.y = 190.00 * pixelRate;
// item.x = (this.design_width / 2) * pixelRate;
// item.y = this.editor_top;
// item.left = item.x - item.width / 2;
// item.top = item.y - item.height / 2;
// this.data.itemList = items
// this.saveSnapshot();
// },
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(e) {
this.isReady = false;
this.front_image_long = false
homeservice.queryListPhone({
s: 'Product.detail',
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 = result.name
wx.setNavigationBarTitle({title: result.name }) //修改头部名称
this.data.bgImage = result.front_image // 背景图
this.data.bgImage_old = result.front_image_old // 旧背景图
// this.design_color = result.design_color // 背景颜色
if(this.$base.surfaceData.surface_type == 0 || this.$base.surfaceData.surface_type == 2){ //默认
this.background_color = 'none' //手机底色
// this.background_surface_color = result.design_color //定制壳手机壳底色
this.background_surface_image = result.surface_pic
}
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)//辅助线距离
// this.editory = this.data.bgHeight * Number(this.center_scale) - this.data.editorHeight / 2 //设计区距离
// this.editor_top = (this.data.bgHeight * Number(this.location_scale) - 0.5) - (this.data.bgHeight - this.data.editorHeight) /2 //辅助线距离
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
console.log(snapshot)
}
// 进入页面动画
if(this.translateX != 0 && e == 1){
// 初始化位置
this.translateX = -((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth)
// 手机壳缓缓移动进入
setTimeout(function(){
this.translateX = 0
}.bind(this), 2000)
// 撒礼花特效
setTimeout(function(){
this.isReady = true;
}.bind(this), 4000)
// 背景消失,显示手机壳
setTimeout(function(){
var animationDelLots = wx.createAnimation({
duration: 1000,
timingFunction: 'ease-out'
})
animationDelLots.opacity(0).step()
this.setData({
translateXState: animationDelLots.export()
})
// let animation = wx.createAnimation({
// duration: 1000,
// timingFunction: 'ease-out'
// })
// animation.opacity(1).step()
// this.setData({
// translateHide: animation.export()
// })
}.bind(this), 5000)
// 手机顶部盒子离开视线
// setTimeout(function(){
// let animationDelLots = wx.createAnimation({
// duration: 2000,
// timingFunction: 'ease-out'
// })
// animationDelLots.translate(-((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth)*2, 0).step();//向左移动
// this.setData({
// translateLeft: animationDelLots.export()
// })
// }.bind(this), 6000)
// 手机变大
// setTimeout(function(){
// this.transformscale = 1
// // let animation = wx.createAnimation({
// // duration: 3000,
// // timingFunction: 'ease-out'
// // })
// // animation.scale(1).step()
// // this.setData({
// // functionScale: animation.export()
// // })
// }.bind(this), 9000)
//显示功能按钮
setTimeout(function(){
this.isReady = false; // 消失礼花
let animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease-out'
})
animation.opacity(1).step()
this.setData({
functionHide: animation.export()
})
}.bind(this), 8000)
}else{
// 消失礼花
setTimeout(function(){
this.isReady = true;
}.bind(this), 200)
setTimeout(function(){
this.isReady = false;
}.bind(this), 4000)
}
}).catch(err => {
uni.showToast({title: err.msg,icon: 'none'});
});
// 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;
// }
},
category() {
// homeservice.queryListPhone({ //形状分类
// s: 'Material.getShapeCategory',
// 'machine_id': this.machine_id || null
// }).then(result => {
// this.Works_category = result
// }).catch(err => {
// uni.showToast({title: err.msg,icon: 'none'})
// });
// homeservice.queryListPhone({ //作品分类
// s: 'Works.category'
// }).then(result => {
// this.Works_category = result
// this.Works_category.unshift({icon: "../../static/image/icon_new_default.png",icon_click: "../../static/image/icon_new_pressed.png",title: "最新",}, {icon: "../../static/image/icon_hot_default.png",icon_click: "../../static/image/icon_hot_pressed.png",title: "热门",})
// }).catch(err => {
// uni.showToast({// title: err.msg,// icon: 'none'// })
// });
//查询贴图分类 key=0贴图
homeservice.queryListPhone({
s: 'Material.category',
machine_id: this.machine_id || null,
key:0,
surface_color_series_id:this.$base.surfaceData.surface_color_series_id//色系编号
}).then(result => {
this.Material_category = result
this.Material_category.unshift(
{icon: "../../static/image/icon_new_default.png",icon_click: "../../static/image/icon_new_pressed.png",title: "最新"},
// {icon: "../../static/image/icon_hot_default.png",icon_click: "../../static/image/icon_hot_pressed.png",title: "热门"}
)
if(this.$base.surfaceData.surface_type == 2 || this.$base.surfaceData.surface_type == 0){ //定制壳
this.Material_category.push(
{icon: "../../static/icon/my.png",icon_click: "../../static/icon/my-o.png",title: "我的"}
)
}
}).catch(err => {
uni.showToast({title: err.msg,icon: 'none'})
});
//查询壁纸分类 key=1壁纸
homeservice.queryListPhone({
s: 'Material.category',
machine_id:this.machine_id,
key:1,
surface_color_series_id:this.$base.surfaceData.surface_color_series_id//色系编号
}).then(result => {
this.wallpaper_category = result
this.wallpaper_category.unshift(
{icon: "../../static/image/icon_new_default.png",icon_click: "../../static/image/icon_new_pressed.png",title: "最新"},
// {icon: "../../static/image/icon_hot_default.png",icon_click: "../../static/image/icon_hot_pressed.png",title: "热门"}
)
// this.wallpaper_category = this.wallpaper_category.concat(result)
// this.wallpaper_category = this.wallpaper_category.concat(result)
// this.wallpaper_category = this.wallpaper_category.concat(result)
// this.wallpaper_category = this.wallpaper_category.concat(result)
}).catch(err => {
uni.showToast({title: err.msg,icon: 'none'});
});
},
getmachine_id(){
// 判断设备是否正常
homeservice.queryListPhone({
s: 'machine.newDetail',
machine_id: this.machine_id
}).then(res => {
this.available = res.available //禁用下订单
if(this.available == 0){
this.createWorkstext = '暂时缺货'
}
this.$base.coupon_flag_desc = res.coupon_flag_desc
this.support_pay = res.support_pay //单机版是否支付
}).catch(err => {
// uni.showToast({title: '当前打印站正在维护' ,icon: 'none'});
});
},
itemlongtap(e){ //长按事件
var item = items[index];// 获取当前选中的部件
},
orderUpdateSn(){
clearInterval(this.orderUpdateTime)
this.orderUpdateTime = null
this.orderUpdateTime = setInterval(function(){
homeservice.queryListPhone({
s: 'Order.updateStockTime',
machine_id: this.machine_id,
sn:this.sn
}).then(res => {
console.log(res)
this.sn = res.sn
}).catch(err => {
uni.showToast({title: err.msg,icon: 'none'})
});
}.bind(this),120000)
},
itemTouchStart: infoListTouchEvent.start.bind(infoListTouchEvent),
itemTouchMove: infoListTouchEvent.move.bind(infoListTouchEvent),
itemTouchEnd: infoListTouchEvent.end.bind(infoListTouchEvent),
itemTouchCancel: infoListTouchEvent.cancel.bind(infoListTouchEvent)
},
onLoad(options) {
var that = this
uni.getStorage({
key: 'globalData',
success: function (res) {
that.language = that.$zhch.list.filter(function (item) { return item.language == res.data.language})[0]
}
});
// machine_id=100003&goods_id=21&key=3&sn=1628066995624649
console.log(options)
items = []
this.infoListTouchEvent = infoListTouchEvent;
this.infoListTouchEvent.bind({
doubleTap: function(e) { //是双击事件
console.log('是双击事件')
if (items[index].type == 0) {
that.state = true
that.$refs.index.init();
}
},
tap: function(e) {
console.log('单击事件')
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) { //拖拽开始
console.log('拖拽开始')
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) { //拖拽结束
console.log('拖拽结束')
let item = items[index];
that.dragEnd(e)
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.deleteItem()
that.deleteWrap = false
}
},
touchCancel: function(e) {
}.bind(this),
rotate: function(e) { //双指缩放
console.log('双指缩放')
let item = items[index];
if(item.support_zoom == 0) return;// 0不支持缩放，1时支持缩放
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) { //拖拽中
console.log('拖拽中')
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.data.bgWidth = res.windowWidth // 画布宽度
that.data.bgHeight = res.windowHeight * (861 / 1196) // 画布高度 高度比率
that.data.pixelRate = pixelRate // 屏幕宽度比率
if (options.machine_id != undefined) { // 判断是从设备进来
that.machine_id = options.machine_id // 设备id
that.queryPage.machine_id = options.machine_id // 设备id
that.data.goods_id = options.goods_id // 商品id
// that.key = 2
that.sn = options.sn // 商品sn
that.dict_id = options.dict_id // //产品属性id
that.createWorkstext = '下单'
try{
const base = uni.getStorageSync('base');
if(base){
that.$base = base
}
}catch(e){};
that.surface_type = that.$base.surfaceData.surface_type
that.surfaceName = that.$base.surfaceData.surfaceName
if(that.$base.surfaceData.surface_type == 0){ //默认
that.background_color = null //手机底色
// that.background_surface_color = null //定制壳手机壳底色
}
if(that.$base.surfaceData.surface_type == 1){ //自带壳
that.background_color = that.$base.surfaceData.surface_color_id_text//手机底色
// that.background_surface_color = null //定制壳手机壳底色
// 清空历史记录
items = []; // 当前显示的图片列表
index = 0; // 所点击的图片的索引
snapshot = []; // 操作历史记录清空
snapshotIndex = -1;
}
if(that.$base.surfaceData.surface_type == 2){ //定制壳
that.background_color = 'none'//手机底色
// that.background_surface_color = that.$base.surfaceData.surface_color //定制壳手机壳底色
}
that.goodslist(1)// 获取产品详情数据
that.getmachine_id()// 判断设备是否正常
// if(options.key != 2){
// that.orderUpdateSn() //定时器锁库存
// }
} else { // 首页进入-默认背景图
that.data.goods_id = options.goods_id ? options.goods_id : 21 // 商品id
that.goodslist(1)// 获取产品详情数据
that.createWorkstext = '保存'
}
// 作品分类 贴图分类
that.category()
},
});
},
onShow(obj) {
// 当页面返回,画布区回到原来位置
// if(this.translateX > 0){
// this.translateX = 0
// let scalex = wx.createAnimation({
// duration: 2000,
// timingFunction: 'ease-out'
// })
// scalex.scale(0.5).translate(0, 0).step();//向左移动
// this.setData({
// functionScale: scalex.export()
// })
// setTimeout(function(){
// // 背景消失
// var animationDelLots = wx.createAnimation({
// duration: 1000,
// timingFunction: 'ease-out'
// })
// animationDelLots.opacity(0).step()
// this.setData({
// translateXState: animationDelLots.export()
// })
// // 手机顶部盒子和旧图显示
// let animation = wx.createAnimation({
// duration: 1000,
// timingFunction: 'ease-out'
// })
// animation.opacity(1).step()
// this.setData({
// translateHide: animation.export()
// })
// }.bind(this), 2000)
// 手机顶部盒子离开视线
// setTimeout(function(){
// let animationDelLots = wx.createAnimation({
// duration: 2000,
// timingFunction: 'ease-out'
// })
// animationDelLots.translate(-((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth)*2, 0).step();//向左移动
// this.setData({
// translateLeft: animationDelLots.export()
// })
// }.bind(this), 3000)
// 手机变大
// setTimeout(function(){
// this.transformscale = 1
// // let animation = wx.createAnimation({
// // duration: 3000,
// // timingFunction: 'ease-out'
// // })
// // animation.scale(1).step()
// // this.setData({
// // functionScale: animation.export()
// // })
// }.bind(this), 6000)
//显示功能按钮
// setTimeout(function(){
// this.isReady = false;
// let animation = wx.createAnimation({
// duration: 1000,
// timingFunction: 'ease-out'
// })
// animation.opacity(1).step()
// this.setData({
// functionHide: animation.export()
// })
// }.bind(this), 5000)
// }
// if (obj) {
// this.data.goods_id = obj // 商品id
// // 获取产品详情数据
// this.goodslist()
// }
// var _this = this
// var animation = wx.createAnimation({
// duration: 1000,
// timingFunction: 'ease',
// })
// this.animation = animation
// 壁纸广告KEY：diy_back，贴纸广告KEY：diy_banner
homeservice.queryListPhone({s: 'Ad.list',ad_position_key: 'diy_back'}).then(result => {
this.diy_backList = result
}).catch(err => {});
homeservice.queryListPhone({s: 'Ad.list',ad_position_key: 'diy_banner'}).then(result => {
this.diy_bannerList = result
}).catch(err => {});
},
// 卸载程序
onUnload() {
items = []; // 当前显示的图片列表
index = 0; // 所点击的图片的索引
snapshot = []; // 操作历史记录
snapshotIndex = -1;
homeservice.setSnapshot(items)
// 清除库存续时间接口
clearInterval(this.orderUpdateTime)
this.orderUpdateTime = null
uni.reLaunch({url: '/pages/index/detailsphone?machine_id=' + this.queryPage.machine_id});
}
};
</script>
<style lang="scss">
.translateXClass{
transition: all 2s;
-webkit-transition: all 2s;
}
page {
width: 100%;
height: 100%;
}
.page {
background: #FFFFFF !important;
}
/* 图片 */
image {
display: block;
}
/* 容器 */
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
justify-content: center;
}
/* 部件列表和部件操作列表 */
.item-list,
.operate-list {
width: 280rpx;
height: 380rpx;
position: absolute;
left: 0;
right: 0;
top: 0;
// bottom:0;
margin: auto;
}
.item-list {
overflow: hidden;
}
.item-text {
font-family: '思源黑体 CN';
/*font-family: 'PingFang SC Regular';*/
}
.list-active {
// outline: #4EE2AE 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;
// background-image: url('http://tprint.refinecolor.com/static/images/wechat/sprites.png');
cursor: pointer;
}
.rotate {
background-image: url(../../static/icon/icon_refresh.png);
background-size: 100%;
right: 0;
left: 0;
margin: auto;
// background-position: -50px -10px;
}
.rotate-red {
background-image: url(../../static/icon/icon_refresh_red.png);
background-size: 100%;
right: 0;
left: 0;
margin: auto;
// background-position: -50px -10px;
}
.scale {
background-image: url(../../static/icon/icon_zoom.png);
background-size: 100%;
transform-origin: center;
// background-position: -10px -50px;
}
.frame-left-top-wrap{
position: absolute;
z-index: 100;
width: 60upx;
height: 60upx;
left: -30upx;
top: -30upx;
/*background-color: blue;*/
}
.frame-left-top{
position: absolute;
z-index: 100;
width: 30upx;
height: 30upx;
left: 24upx;
top: 24upx;
border-left: 6upx solid #864BC3;
border-top: 6upx solid #864BC3;
}
.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);
// border: 1px solid lightgray;
}
.frame-right-top-wrap {
position: absolute;
z-index: 100;
width: 60upx;
height: 60upx;
right: -30upx;
top: -30upx;
/*background-color: blue;*/
}
.frame-right-top {
position: absolute;
z-index: 100;
width: 30upx;
height: 30upx;
right: 24upx;
top: 24upx;
border-right: 6upx solid #864BC3;
border-top: 6upx solid #864BC3;
}
.frame-left-bottom-wrap {
position: absolute;
z-index: 100;
width: 60upx;
height: 60upx;
left: -30upx;
bottom: -30upx;
/*background-color: blue;*/
}
.frame-left-bottom {
position: absolute;
z-index: 100;
width: 30upx;
height: 30upx;
left: 24upx;
bottom: 24upx;
border-left: 6upx solid #864BC3;
border-bottom: 6upx solid #864BC3;
}
.frame-right-bottom-wrap {
position: absolute;
z-index: 100;
width: 60upx;
height: 60upx;
right: -30upx;
bottom: -30upx;
/*background-color: blue;*/
}
.frame-right-bottom {
position: absolute;
z-index: 100;
width: 30upx;
height: 30upx;
right: 24upx;
bottom: 24upx;
border-right: 6upx solid #864BC3;
border-bottom: 6upx solid #864BC3;
}
// 四边
.left_edge-wrap {
position: absolute;
z-index: 99;
left: -30upx;
width: 40upx;
height: 100%;
top: 0;
background: transparent;
/*background: red;*/
}
.left_edge {
position: absolute;
z-index: 99;
left: 24upx;
width: 6upx;
height: 40upx;
background: #864BC3;
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);
// border: 1px solid lightgray;
}
.rightedge-wrap {
position: absolute;
z-index: 99;
right: -30upx;
width: 40upx;
height: 100%;
background: transparent;
top: 0;
/*background: red;*/
}
.rightedge {
position: absolute;
z-index: 99;
right: 24upx;
width: 6upx;
height: 40upx;
background: #864BC3;
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;
/*background: red;*/
}
.topedge {
position: absolute;
z-index: 99;
top: 24upx;
width: 40upx;
height: 6upx;
background: #864BC3;
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;
/*background: red;*/
}
.bottomedge {
position: absolute;
z-index: 99;
bottom: 24upx;
width: 40upx;
height: 6upx;
background: #864BC3;
left: 0;
right: 0;
margin: auto;
}
// .close {
// background-image: url(../../static/icon/icon_close.png);
// background-size: 100%;
// left: -14px;
// top: -14px;
// // background-position: -10px -10px;
// }
// 上一步、下一步按钮
.operation {
display: flex;
justify-items: center;
align-items: center;
z-index: 99;
position: fixed;
bottom: 198upx;
left: 0;
}
.operation_top {
overflow: hidden;
width: 89upx;
height: 88upx;
border-radius: 50%;
}
.operation_bottom {
overflow: hidden;
width: 89upx;
height: 88upx;
border-radius: 50%;
}
.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;
}
.tool_li_text {
text-align: center;
color: #FFFFFF;
font-size: 15upx;
margin-top: 10upx;
}
}
}
// 底部工具栏
.toolRight{
position: fixed;
top: 200upx;
right:0;
width: 120upx;
.tool_li {
width: 100%;
height: 130upx;
.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;
}
}
}
.toolBottom {
position: fixed;
bottom: 0;
z-index: 1000;
// width: 100%;
display: flex;
align-items: center;
height: 90upx;
right: 0;
// 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: 228upx;
background: #864BC3;
line-height: 90upx;
text-align: center;
color: #FFFFFF;
font-size: 36upx;
font-weight: 500;
color: #FFFFFF;
margin-left: auto;
border-radius: 45upx 0 0 45upx;
}
.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;
// padding-left: 27upx;
.scroll-item {
text-align: center;
// display: inline-block;
// margin: 15upx 0upx;
height: 80upx;
}
}
.material-series-scroll-item{
text-align: center;
// display: inline-block;
padding:10upx 20upx;
color: #FFFFFF;
background: #000;
border-radius: 25upx;
float: left;
margin: 0 10upx 5upx;
font-size: 21upx;
}
.material-series-scroll-item-active{
background: #864BC3;
}
// 删除
.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>