<template>
	<view class="full-width content-color full-height" style="overflow: hidden;background: #FFFFFF; ">
		<!-- 自定义头部 -->
		<!-- <myhead :worksid="works_id" :title="titlename" :color="'#fff'" :titleShow="true" :backShow="true" :background="'none'"></myhead> -->

		<myhead :worksid="works_id" :title="titlename" :color="'#131319'" :titleShow="true" :backShow="true"
			:background="'#fff'"></myhead>

		<!-- 登录弹框 -->
		<Signin ref="Signin"></Signin>
		<!-- 裁剪图片 -->
		<view class="full-width content-color full-height" style="background: black;" v-show="state">
			<kps-image-cutter @ok="onok" @cancel="oncancle" ref="index" :properties="properties"></kps-image-cutter>
		</view>

		<!-- 设计区域 -->
		<view v-show="!state" class="full-width content-color full-height" :style="{background: design_color }"
			style=" ">
			<!-- margin-top: 170upx; -->
			<!-- 取消选中 -->
			<view class="full-width full-height" style="position: absolute; top: 0; left: 0;" @click.stop="itemCancel">
			</view>
			<view class="container" @click='itemCancel' @touchmove.stop="touchMove" @touchend.stop="touchEnd">
				<!-- style="justify-content:center;" -->
				<!-- :style="{height: data.windowHeight  + 'px'}" -->
				<!-- style="background: #aa0000; height: 1000upx; " -->
				<!-- :style="{height: data.windowHeight  +'400px'}" -->
				<!-- style=" display:flex;
				justify-content:center;" -->
				<!--  margin-top: 100upx; -->
				<!--view style="width: 100%; height: 80upx; background: #FFFFFF;"></view> -->
				<view :style="{width: data.bgWidth +'px',height: data.bgHeight +'px'  }" style="position: relative; ">
					<!-- background: #ffaa00; -->
					<!-- 底图 -->
					<image :src="data.bgImage_old" mode="widthFix"
						:style="{width: data.bgWidth +'px',height: data.bgWidth +'px'}"
						style="position: absolute; z-index: 0; top: 0; bottom: 0; margin: auto;"></image>
					<!-- background: #007AFF; -->
					<!-- 底色 -->
					<!--<view :style="{width: data.editorWidth * 1.1 +'px',height: data.editorHeight * 1.1 +'px',
					background:background_color ? background_color : ''}"
						style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 1;">
					</view> -->
					<!-- 底色 -->
					<view :style="{width: data.editorWidth  + 'px',height: data.editorHeight +'px',
						background:background_color ? background_color : ''}"
						style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 1;">
					</view>

					<!-- 遮罩图 -->
					<image :src="data.bgImage" mode="widthFix"
						:style="{width: data.bgWidth +'px',height: data.bgWidth +'px'}"
						style="position: absolute; z-index: 2; top: 0; bottom: 0; margin: auto;"></image>
					<!-- 辅助线  -->
					<view v-if="guide_left"
						style="border-left: 1px dashed #43cf7c;position: absolute; height: 100%; z-index: 999;"
						:style="{left: ((data.bgWidth / 2) - 0.5) +'px'}"></view>
					<view v-if="guide_top"
						style="width: 100%; border-top: 1px dashed #43cf7c;position: absolute; z-index: 999;"
						:style="{top: (editory + (data.editorHeight * location_scale - 0.5)) +'px'}"></view>
					<!-- 主干 -->
					<view :class="['item-list', { 'list-active': data.listActive == true }]"
						style="opacity: 1;z-index: 1;"
						:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',top: editory +'px'}">
						<view
							:style="{'margin-top': (editor_top - (data.editorHeight * mix_scale / 2)) +'px',width: data.editorWidth * mix_scale +'px',height: data.editorHeight * mix_scale +'px','mask-image':shape_image ? 'url(' + shape_image + ')' : 'none', '-webkit-mask-image':shape_image ? 'url(' + shape_image + ')' : 'none',}"
							style="overflow: hidden; mask-size: 100%; -webkit-mask-size: 100%;margin-left:auto; margin-right: auto;mask-repeat:no-repeat;-webkit-mask-repeat: no-repeat;">
							<block v-for="(item,idx) in data.itemList" :key="idx">
								<!-- 文本 -->
								<view v-if="item.type == 1" class='item-box' :style="{'z-index':item.index , transform: 'scale(' + item.scale + ')',
									top: item.top + 'px',left: item.left + 'px'}">
									<view class='item-box-in' style="text-align: center;" :style="{transform: 'rotate(' + item.angle + 'deg)', width: item.width + 'px',height: item.height + 'px', 
										'line-height': item.height + 'px', 'background-color': item.under_color}">
										<view :id="'item-text-' + idx " class="item-text"
											style="margin:auto;white-space:nowrap;display:table;"
											:style="{'font-family': item.font_family,'font-weight': item.font_style,'font-size': item.font_size + 'px', color:item.font_color,'background-color': item.under_color}">
											{{item.content}}
										</view>
									</view>
								</view>
								<!-- 图片 -->
								<view v-if="item.type == 0 || item.type == 2" class='item-box'
									:style="{'z-index':item.index,transform: 'scale(' + item.scale + ')',top:item.top + 'px',left:item.left + 'px'}">
									<view class='item-box-in' style="overflow: hidden;"
										:style="{width: item.width + 'px' , height: item.height +'px',transform: 'rotate(' + item.angle + 'deg)'}">
										<!-- 图片裁剪 -->
										<image v-if="item.replace == 1" mode='aspectFill'
											:src="item.content + '?x-oss-process=image/resize,lfit,w_1500'"
											:data-id="item.id" :style="{width: item.initialWidth * item.initialScale + 'px',
											height: item.initialHeight * item.initialScale +'px',
											'margin-top': item.image_top +'px','margin-left': item.image_left +'px'}"></image>
										<!--图片 @load="loadImage"-->
										<image v-else-if="item.type == 0" mode='aspectFill'
											style="min-height: 50px;min-width: 50px;"
											:src="item.content + '?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>
					</view>
					<!-- 操作列表 -->
					<view v-if="editory" class='operate-list' style="z-index: 10;"
						:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',top: editory +'px'}">
						<block v-for="(item,idx) in data.itemList" :key="idx">
							<view class='item-box'
								:style="{'z-index':item.active == true ? 999:(item.index + 10), transform: 'scale(' + item.scale + ')',top: item.top + 'px',left: item.left + 'px'}">
								<view :class="['item-box-in', { 'active': item.active == true }]"
									style="background: none;" :style="{transform: 'rotate(' + item.angle + 'deg)'}">
									<!-- 图片拖动 -->
									<view :data-id='item.id' :data-time="lastTapTime"
										style="position: relative; background: none;"
										:style="{width: item.width + 'px' , height: item.height +'px'}"
										@longtap.stop="itemlongtap" @touchstart.stop="itemTouchStart"
										@touchmove.stop="itemTouchMove" @touchend.stop="itemTouchEnd"
										@touchcancel.stop="itemTouchCancel"></view>
									<!-- 边框 -->
									<view v-if="item.type == 0 ">
										<view v-if="item.activeedge"
											:style="{transform: item.typetext =='left' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
											class='left_edge-wrap' :data-id='item.id'
											@touchstart.stop="edgeStart($event, 'left')"
											@touchend.stop.prevent='edgeEnd'>
											<!-- :style="{background:  item.typetext =='left' ? '#F56364' : '#5CE6B5'}" -->
											<view class='left_edge'>
												<image src="../../static/icon/icon_sticker_left_tailoring.png"
													mode="aspectFill" style="width: 40upx; height: 55upx;margin: auto">
												</image>
											</view>
										</view>
										<view v-if="item.activeedge"
											:style="{transform: item.typetext =='top' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
											class='topedge-wrap' :data-id='item.id'
											@touchstart.stop="edgeStart($event, 'top')"
											@touchend.stop.prevent='edgeEnd'>
											<!-- :style="{background:  item.typetext =='top' ? '#F56364' : '#5CE6B5'}" -->
											<view class='topedge'>
												<image src="../../static/icon/icon_sticker_top_tailoring.png"
													mode="aspectFill" style="width: 50upx; height: 37upx; margin: auto">
												</image>
											</view>
										</view>
										<view v-if="item.activeedge"
											:style="{transform: item.typetext =='right' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
											class='rightedge-wrap' :data-id='item.id'
											@touchstart.stop="edgeStart($event, 'right')"
											@touchend.stop.prevent='edgeEnd'>
											<!-- :style="{background:  item.typetext =='right' ? '#F56364' : '#5CE6B5'}" -->
											<view class='rightedge'>
												<image src="../../static/icon/icon_sticker_right_tailoring.png"
													mode="aspectFill" style="width: 40upx; height: 55upx;margin: auto">
												</image>
											</view>
										</view>
										<view v-if="item.activeedge"
											:style="{transform: item.typetext =='bottom' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
											class='bottomedge-wrap' :data-id='item.id'
											@touchstart.stop="edgeStart($event, 'bottom')"
											@touchend.stop.prevent='edgeEnd'>
											<!-- :style="{background:  item.typetext =='bottom' ? '#F56364' : '#5CE6B5'}" -->
											<view class='bottomedge'>
												<image src="../../static/icon/icon_sticker_buttom_tailoring.png"
													mode="aspectFill" style="width: 50upx; height: 37upx; margin: auto">
												</image>
											</view>
										</view>
									</view>
									<!-- 四角 -->
									<view v-if="item.activehorn" class='frame-left-top-wrap'
										:style="{transform: item.typetext =='left-top' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
										:data-id='item.id' @touchstart="scaleStart($event, 'left-top')"
										@touchend.stop.prevent='scaleEnd'>
										<view v-if="item.support_zoom == 1" class='frame-left-top'
											:style="{'border-left-color':  item.typetext =='left-top' ? '#F56364' : '#5CE6B5', 'border-top-color':  item.typetext =='left-top' ? '#F56364' : '#5CE6B5'}">
										</view>
									</view>
									<view v-if="item.activehorn" class='frame-right-top-wrap'
										:style="{transform: item.typetext =='right-top' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
										:data-id='item.id' @touchstart="scaleStart($event, 'right-top')"
										@touchend.stop.prevent='scaleEnd'>
										<view v-if="item.support_zoom == 1" class='frame-right-top'
											:style="{'border-right-color':  item.typetext =='right-top' ? '#F56364' : '#5CE6B5', 'border-top-color':  item.typetext =='right-top' ? '#F56364' : '#5CE6B5'}">
										</view>
									</view>
									<view v-if="item.activehorn" class='frame-left-bottom-wrap'
										:style="{transform: item.typetext =='left-bottom' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
										:data-id='item.id' @touchstart="scaleStart($event, 'left-bottom')"
										@touchend.stop.prevent='scaleEnd'>
										<view v-if="item.support_zoom == 1" class='frame-left-bottom'
											:style="{'border-left-color':  item.typetext =='left-bottom' ? '#F56364' : '#5CE6B5', 'border-bottom-color':  item.typetext =='left-bottom' ? '#F56364' : '#5CE6B5'}">
										</view>
									</view>
									<view v-if="item.activehorn" class='frame-right-bottom-wrap'
										:style="{transform: item.typetext =='right-bottom' ? 'scale(' + 1/item.scale*1.5 + ')' :'scale(' + 1/item.scale + ')'}"
										:data-id='item.id' @touchstart="scaleStart($event, 'right-bottom')"
										@touchend.stop.prevent='scaleEnd'>
										<view v-if="item.support_zoom == 1" class='frame-right-bottom'
											:style="{'border-right-color':  item.typetext =='right-bottom' ? '#F56364' : '#5CE6B5', 'border-bottom-color':  item.typetext =='right-bottom' ? '#F56364' : '#5CE6B5'}">
										</view>
									</view>
									<!-- 图片旋转 -->
									<view v-if="item.activescale"
										:class="[item.typetext =='rotate' ? 'rotate-red' : 'rotate']"
										style="transform-origin:center;" :style="{transform: item.typetext =='rotate' ? 'scale(' + item.oScale * 1.5 + ')' : 'scale(' + item.oScale + ')',
									 top: item.height + 20 - (28 - 28*(item.typetext == 'rotate' ? item.oScale * 1.5 : item.oScale))/2 + 'px'}"
										:data-id='item.id' @touchstart.stop='rotateStart' @touchmove.stop='rotateMove'
										@touchend.stop='rotateEnd'></view>
									<!-- 辅助线 -->
									<view v-if="item.activeguide" style="border-left: 1px dashed #F56364; 
									 height: 100%;position: absolute; top: 0; z-index: 999; bottom: 0;"
										:style="{left: ((item.width / 2) - 0.5) +'px',
									 transform:'scale(' + item.oScale + ')',height:100 * item.scale + '%',top: (- 100 * (item.scale - 1))/2 + '%'}"></view>
									<view v-if="item.activeguide" style="width: 100%; border-top: 1px dashed #F56364;
									 position: absolute;z-index: 999;"
										:style="{top: ((item.height / 2) - 0.5) +'px',
									 transform:'scale(' + item.oScale + ')',width:100 * item.scale + '%',left: (- 100 * (item.scale - 1))/2 + '%'}">
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
				<!-- 计算字体 -->
				<view class='item-box' style='top:-1000px;left:-1000px;'>
					<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 class="operation" v-if="!active && !guide_left">
					<view class="operation_top">
						<image @click.stop='prev' src="../../static/icon_back_enabled.png" mode="aspectFill"
							style="width: 89upx; height: 88upx;"></image>
					</view>
					<view class="operation_bottom">
						<image @click.stop='next' src="../../static/icon_nextstep.png" mode="aspectFill"
							style="width: 89upx; height: 88upx;"></image>
					</view>
				</view>
				<!-- 切换商品 -->
				<!-- <view :class="operation" v-if="!active && !guide_left" @click="changeGoods()"
					style="display:flex;z-index: 99;position: fixed; left: 0; bottom:300upx; ">
					<image src="../../static/icon_change_good.png" mode="aspectFill"
						style="width: 84upx; height: 98upx;"></image>
				</view> -->

				<!-- 拖拽删除图库 -->
				<view v-if="delete_wrap_state" class="delete-wrap" :class="{'delete-wrap-active':deleteWrap}"
					:animation="animationData">
					<view>
						<image :src="deleteWrap ? '../../static/delete-active.png':'../../static/delete.png'" mode=""
							style="width: 42upx; height: 42upx; margin: auto;"></image>
						<view>{{deleteWrap ? '松开即可删除':'拖到此处可删除'}}</view>
					</view>
				</view>
			</view>
			<!-- 图片提示 -->
			<view v-if="showone">
				<view
					style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
					@click.stop="showone = !showone"></view>
				<view style="position: fixed; background: #FFFFFF; top:calc((100% - 621upx) / 2); left:calc((100% - 560upx) / 2);
				z-index:1000; width: 560upx; min-height: 621upx; border-radius: 12upx;">
					<image style="width: 560upx; height: 298upx; display: block;margin: auto;"
						src="../../static/image/remind_picture.png" mode="aspectFill"></image>
					<view v-if="shape_image != '' && data.itemList.length == 0"
						style="text-align: center; font-size: 28upx; font-weight: 500; color: #333333; line-height: 45upx; margin-top: 62upx;">
						效果需要先上传照片才可使用<br>请先上传一张相片
					</view>
					<view v-else
						style="text-align: center; font-size: 28upx; font-weight: 500; color: #333333; line-height: 45upx; margin-top: 62upx;">
						请选择手机拍摄或尺寸较大的图片<br>以体验最佳冲印效果
					</view>
					<!-- <view @click.stop='addItem' style="width: 466upx; height: 82upx; background: #F56364; border-radius: 10upx; font-size: 36upx; 
					font-weight: 400; color: #FFFFFF; text-align: center; line-height: 82upx; margin: 46upx auto 46upx; ">好的</view> -->
					<view @click="selectPicturePop()" style="width: 466upx; height: 82upx; background: #F29F3D; 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">
				<view class="tool_li">
					<view class="tool_li" @click="showPopup(99)">
						<image class="tool_li_img" src="../../static/icon_diy_shoucang.png" mode=""></image>
						<view class="tool_li_text">我的收藏</view>
					</view>
					<view class="tool_li" @click="showPopup(23)">
						<image class="tool_li_img" src="../../static/icon_diy_wallpaper.png" mode=""></image>
						<view class="tool_li_text">全幅壁纸</view>
					</view>
					<view class="tool_li" @click="showPopup(2)">
						<image class="tool_li_img" src="../../static/icon/icon_stickers.png" mode=""></image>
						<view class="tool_li_text">贴图素材</view>
					</view>

					<view class="tool_li" @click="showPopup(24)" v-if="surface_type != 1">
						<image class="tool_li_img" src="../../static/icon_make_diy_uplaod_image.png" mode=""></image>
						<view class="tool_li_text">背景底色</view>
					</view>
					<!-- 	<view class="tool_li" @click="showPopup(28)">
						<image class="tool_li_img" src="../../static/icon_make_diy_uplaod_image.png" mode=""></image>
						<view class="tool_li_text">背景底色</view>
					</view> -->
					<view class="tool_li" @click="showone = !showone">
						<image @click="cancel('share')" class="tool_li_img"
							src="../../static/icon_make_diy_back_color.png" mode=""></image>
						<view @click="cancel()" class="tool_li_text">上传相片</view>
					</view>
					<view class="tool_li" @click="showPopup(3)">
						<image class="tool_li_img" src="../../static/icon_diy_typeface.png"
							style="width: 45upx; height: 40upx;" mode=""></image>
						<view @click="cancel()" class="tool_li_text">添加文字</view>
					</view>
					<view class="tool_li" @click="ontuya()" v-if="machine_id">
						<image class="tool_li_img" style="width: 62upx; height: 55upx;" src="../../static/icon_tuya.png"
							mode=""></image>
						<view class="tool_li_text">添加涂鸦</view>
					</view>
					<view class="tool_li" @click="wallpaperOnclick()" v-if="machine_id">
						<image class="tool_li_img" style="width: 71upx; height: 59upx;"
							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" style="height: 70upx;" v-if="background_color"
						@click.stop="background_color = null">
						<image class="tool_li_img" style="width: 51upx; height: 51upx;"
							src="../../static/diy_icon_replace_default.png" mode=""></image>
						<view class="tool_li_text">清空底色</view>
					</view>


					<image v-if="isShowGif && !guide_left" src="../../static/img/icon_finger_stretch.gif" style="width: 450upx; height: 450upx; left:calc(50% - 225upx);  position: fixed;
					   top: calc(50% - 225upx);
					   z-index: 1000;
					  display: flex;
					  align-items: center;" @click="oclikGifImage()" @touchstart="oclikGifImage()">
					</image>

					<!-- <view style="height: 200upx;"></view>
					<view class="tool_li" v-if="background_color" @click.stop="background_color = null">
						<image class="tool_li_img" style="width: 50upx; height: 50upx;"
						src="../../static/diy_icon_replace_default.png" mode=""></image>
					</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> -->
					<!-- <view class="tool_li" @click="showPopup(30)">
						<image class="tool_li_img" src="../../static/color.png" mode=""></image>
					</view> -->
				</view>
			</view>

			<tuya ref="tuya" @tuyaimg="tuyaimg"></tuya>

			<!-- 菜单栏目 -->
			<view v-if="active && !guide_left" class="toolRight">
				<view class="tool_li" @click.stop='deleteItem'>
					<image class="tool_li_img" style="width: 51upx; height: 51upx;"
						src="../../static/diy_icon_middle_default.png" mode=""></image>
					<view class="tool_li_text">移除</view>
				</view>
				<view v-if="data.itemList.length > 0">
					<view class="tool_li" v-if="data.itemList[data.cidx].type == 1" @click="showPopup(4)">
						<image class="tool_li_img" style="width: 51upx; height: 51upx;"
							src="../../static/icon/diy_icon_editor_default.png" mode=""></image>
						<view class="tool_li_text">编辑</view>
					</view>
				</view>
				<!-- 点击画布区域取消聚焦 -->
				<view class="tool_li" @click.stop="itemCancel">
					<image class="tool_li_img" style="width: 51upx; height: 51upx;" src="../../static/icon_confirm.png"
						mode=""></image>
				</view>
			</view>

			<!-- 生成作品 -->
			<view v-if="!guide_left" class="toolBottom">
				<view @click.stop="createWorks" hover-class="hover-class-bg"
					:class="['tool_add',!machine_id ? 'grey' : '']">立即下单</view>
			</view>
			<!-- 单指可拖拽 -->
			<!-- && data.itemList.length > 0 -->
			<view v-if="!guide_left "
				style="position: fixed; font-size: 22upx; color: #999999; bottom: 340upx;left: 50%;transform: translate(-50%, 0%);z-index: 999; ">
				<view>单指拖拽，双指伸缩</view>
				<!-- <view>双指可缩放</view>
				<view>双击可裁剪</view> -->
			</view>


			<!-- <view style="text-align: center; color: #FFFFFF; position: fixed; z-index: 99;
			left: 0; right: 0; bottom: 227upx;">
				<view>打印时，自动生成 4 x 3 排版</view>
				<text style="color: #0CA457; padding: 20upx;" @click="drawImg">预览></text>
			</view> -->
			<!-- 预览 -->
			<view v-if="showtwo">
				<view
					style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
					@click.stop="showtwo = !showtwo"></view>
				<view style="position: fixed; top:calc((100% - 550upx) / 2); left:calc((100% - 600upx) / 2);
				z-index:1000; width: 600upx; min-height: 550upx; border-radius: 12upx;">
					<view style="display: flex; align-items: center; justify-content: center; margin: auto;
					 width: 600upx; height: 454upx; position: relative;">
						<view style="width: 95%; height: 95%; background: #383838; display: flex;">
							<view style="width: calc(100% / 4); height: 100%;" v-for="item in 4" :key="a">
								<view v-for="item in 3" :key="b"
									style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
									<image style="width: 36%; height: 36%; position: absolute; 
									top: 0; left: 0; right: 0; bottom: 0;
									margin: auto; z-index:0;" src="https://img.colorpark.cn/yun/11636_16349613693433.png?x-oss-process=image/resize,lfit,w_300"
										mode="aspectFit"></image>
									<image style="width: 100%; height: 100%;position: absolute; 
									top: 0; left: 0; right: 0; bottom: 0; 
									margin:auto; z-index: 1;" src="https://img.colorpark.cn/back/16351440306176515e7f196.png" mode="aspectFit">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view style="width: 600upx;" @click.stop="showtwo = !showtwo">
						<image src="../../static/quxiao.png" mode=""
							style="width: 80upx; height: 80upx; margin: 30upx auto 0;"></image>
					</view>
				</view>
			</view>
			<!-- 替换选项 -->
			<uni-popup ref="replacebottom" type="bottom" @change="change">
				<view class="uni-share" style="width: 90%; margin: auto;">
					<view style="background: #FFFFFF; border-radius: 20upx;">
						<view
							style="font-size: 30upx; font-weight: 400; height: 100upx; line-height: 100upx; text-align: center; width: 100%;"
							@click="replaceimage()">更换其他照片</view>
					</view>
					<view
						style="height: 90rpx; line-height: 90rpx; font-size: 14px; text-align: center; color: #666; background: #FFFFFF; border-radius: 20upx; margin: 20upx 0;"
						@click="cancel_replace()">取消</view>
				</view>
			</uni-popup>
			<!-- 字体 -->
			<uni-popup ref="textsettingsshare" type="bottom" @change="change" style="position: fixed; z-index: 9999;">
				<view class="uni-share" style="width: 100%; height: 600upx;background: #292933;"
					v-if="e_active == 3 || e_active == 4">
					<textsettings @textInput='textInput' @cancel="cancel" @workcolor="workcolor"
						@workweight="workweight" @bgtextcolor="bgtextcolor" @typefaceClick="typefaceClick"
						ref="textsettingstwo">
					</textsettings>
				</view>
			</uni-popup>

			<!-- 文本，贴图，相框 1模板 2贴图 3字体 4编辑 22添加相框 -->
			<uni-popup ref="showshare" :type="type" @change="change"
				style="position: relative; z-index: 9998; width: 100%;" :style="{height: data.windowHeight +'px'}">
				<!-- 文本 -->
				<view class="uni-share full-width" :style="{height: data.windowHeight +'px'}"
					v-if="e_active == 3 || e_active == 4">
					<view
						style="position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 997; opacity: 0.8;"
						@click="cancel('share')"></view>
					<view style="position: fixed; bottom: 0; left: 0; width: 100%; height: 25%; z-index: 999;">
						<textsettings @textInput='textInput' @cancel="cancel" @workcolor="workcolor"
							@workweight="workweight" @bgtextcolor="bgtextcolor" @typefaceClick="typefaceClick"
							@typefaceshow="typefaceshow" ref="textsettings">
						</textsettings>
					</view>
				</view>
				<!-- 贴图/模板形状 -->
				<view v-else class="uni-share full-width" :style="{height: data.windowHeight +'px'}">
					<!-- 遮罩 -->
					<view class="full-width"
						style="position: absolute; bottom: 0; left: 0; height: 100%; z-index: 997; opacity: 0.8;"
						@click="cancel('share')"></view>
					<!-- 正文 -->
					<view
						style="position: absolute; bottom: 0upx; left: 0; height: 100%; width: 120upx; z-index: 999; background: #1A1D33; overflow: hidden;">
						<view style="width: 120upx; height: 188upx;">
							<!-- <view style="position: relative;width: 120upx; height: 188upx;" v-if="e_active == 2 || e_active == 23" 
							@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 ||  e_active == 99 ">
							<scroll-view class="scroll-container"
								:style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}" scroll-y
								scroll-with-animation v-if="brands.length > 0" :scroll-into-view="'s' + currentIndex">
								<view :class="['scroll-item', { activeone: index == currentId }]" :id="'s' + index"
									v-for="(item, index) in brands" :key="index" @tap="handleScroll(index,item)">
									<image
										style="width: 60upx; height: 60upx; display: block;margin:auto; padding: 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>
						<!-- material_series_list 二级分类 -->
						<!-- <view style="font-size: 40upx;color: #007AFF;">11111{{ material_series_list.length}}<view> -->
						<view id="classification" v-if="e_active == 2 || e_active == 23  || e_active == 99"
							style="width: 100%; position: relative; z-index: 99; ">
							<view style="overflow: hidden;" v-if="material_series_list.length > 0">
								<view
									:class="['material-series-scroll-item', { 'material-series-scroll-item-active': item.id == material_series_currentId }]"
									:id="'s' + index" v-for="(item, index) in material_series_list" :key="index"
									@tap="material_series_handleScroll(index,item)">
									<view>{{item.title}}</view>
								</view>
							</view>
						</view>
						<!-- 特效添加相框 -->
						<!-- <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 || e_active == 99 " ref="scrollList"
							@Worksdetail="Worksdetail" :classificationHeight="classificationHeight"
							:windowHeight="(data.windowHeight - 210 * data.pixelRate)"></scrollList>
						<!-- 背景颜色 -->
						<bgColor v-if="e_active == 24 && backgroundColor" ref="bgColor"
							@bgColorAssembly="bgColorAssembly" :classificationHeight="classificationHeight"
							:windowHeight="(data.windowHeight)">
						</bgColor>

					</view>
				</view>
			</uni-popup>
			<uni-popup ref="showpicture" type="bottom" @change="change" style="position: fixed; z-index: 9999;">
				<view class="uni-share"
					style="width: 100%; height: 420upx;background: #FFFFFF;text-align: center; border-top-left-radius: 20upx; border-top-right-radius: 20upx; ">
					<view @click.stop='addItemFromCamera'
						style="color: #333333; font-size: 35upx; height:100upx;padding-top: 30upx;">
						拍照
					</view>
					<view @click.stop='addItemFromAlbum'
						style="color: #333333; font-size: 35upx;border-top: 1upx solid #ebebeb; height:100upx;padding-top: 30upx;">
						上传手机相片
					</view>
					<view
						style="color: #333333; font-size: 35upx; height: 100upx;padding-top: 30upx; border-top: 1upx solid #ebebeb;"
						@click.stop='addItemFromeWx'>
						导入微信照片
					</view>
					<view
						style="color: #333333; font-size: 35upx; height: 100upx;padding-top: 30upx; border-top: 20upx solid #ebebeb"
						@click="selectPicturePopColse()">
						取消
					</view>
				</view>
			</uni-popup>

			<switchGoods ref="switchGoods" @selectGoodItem="selectGoodItem"></switchGoods>
			<!--商品弹框 -->

		</view>
	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js';
	import userService from '@/service/UserService';
	import uniPopup from './common/uni-popup/uni-popup.vue'
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue"; // 剪切
	import WxTouchEvent from "../../util/wx-touch-event";
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
	import scrollList from './scrollView.vue';
	import shapeScrollView from './shapeScrollView.vue';
	import textsettings from './textsettings.vue'; // 文本
	import Signin from '../index/Signin.vue'; // 登录
	import drag from './js/drag.js'; // 封装
	import bgColor from './components/bgColor.vue'; // 相框
	import myhead from './head/head.vue'; // 页眉
	import switchGoods from '../index/switchGoods.vue'; //选择商品
	import tuya from './tuya.vue'; // 


	/* 色彩公园图片 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,
			ProgressBar,
			scrollList,
			shapeScrollView,
			Signin,
			textsettings,
			bgColor,
			myhead,
			switchGoods,
			tuya,
		},
		computed: {},
		data() {
			return {

				collection_currentId: 0, //点赞选中Id
				collection_currentIndex: null, //点赞选中坐标

				wallpaper_currentId: 0, //壁纸选中Id
				wallpaper_currentIndex: null, //壁纸选中坐标
				wallpaper_material_series_currentId: null, //壁纸系列选中

				mapping_currentId: 0, //贴图选中Id
				mapping_currentIndex: null, //贴图选中坐标
				mapping_material_series_currentId: null, //贴纸系列选中

				classificationHeight: 0,
				backgroundColor: false, //控制底色
				Adlists: [],
				diy_backList: [],
				diy_bannerList: [],
				textHeight: null, //设备头部高度

				system_config: null, //控制是否上传图片
				type: '',
				content: '底部弹出 popup',
				active: false,

				currentId: 0,
				/* 控制被选中 */
				currentIndex: null,
				/* 控制位置 */
				currentId_Works: 0,
				/* 控制被选中 */
				currentIndex_Works: null,
				/* 控制位置 */
				currentId_Material: 0,
				/* 控制被选中 */
				currentIndex_Material: null,
				/* 控制位置 */
				currentId_wallpaper: 0,
				/* 控制被选中 */
				currentIndex_wallpaper: null,
				/* 控制位置 */

				material_series_currentId: null,

				/* 控制位置 */
				brands: [], //贴图分类
				e_active: null, //判断弹框是贴图还是文本
				addtext: false, //判断加减文字
				bg_text_color: false, //判断加减文字
				showone: false, //判断图片弹框
				showtwo: false, //判断图片弹框
				Works_category: [], //作品分类
				Material_category: [], //贴图分类
				Works_category_id: null, //作品选中分类id
				Material_category_id: null, //贴图选中分类
				Works_categorydatalist: [], //作品分类作品列表
				Material_categorydatalist: [], //贴图分类贴图列表
				datalist: [], //作品、贴图列表
				queryPage: {
					s: '',
					page: 1, //分页
					per_page: 40, //分页
					is_revise: '1', //可调整
					is_edit: '1', //模板属性
					machine_id: null, //设备id
					goods_category_id: null, //星形接口列表增加，产品分类参数
					works_category_id: null, //作品选中分类id
					material_category_id: null, //贴图壁纸选择值一级分类
					material_series_id: null, //贴图壁纸选择值二级分类
					is_new: null, //最新
					is_hot: null, //热门
					goods_id: null, //商品id
					is_under: 0, //贴图是否为背景图
					partner_id: null
				},
				works_id: null, //作品id
				machine_id: null, //设备id
				key: null, //1直营配送站 2 万能通用版 3色彩自助站
				design_color: '#131319',
				mix_scale: 1, //图片比率
				design_width: 240,
				design_height: 340,
				design_width: 240,
				print_height: 340,
				design_widthrate: 1, //宽度比率
				design_heightrate: 1, //高度比率
				guide_left: false, //辅助线
				guide_top: false, //辅助线
				editor_top: 0, //辅助线距离
				center_scale: 0, //设计区中心点比率
				location_scale: 0, //辅助线距离
				editory: null, //设计区距离
				lastTapTime: 0, //判断点击时间间隔
				properties: {}, //剪切数据
				state: false,
				isRotate: false, // 是否是旋转
				data: {
					user_id: null, //用户id
					goods_id: 1, //背景图id
					template: null, //源作品id
					template_price: null, //源作品sales_price
					template_user_id: null, //源作品user_id
					works_idlenght: 0, //模板个数
					windowWidth: 0, // 屏幕宽度
					windowHeight: 0, // 屏幕高度
					editorWidth: 0, // 设计宽度
					editorHeight: 0, // 设计高度
					bgImage: '', // 背景图
					bgImage_old: '', // 背景图
					bgImage_thumbnail: '', // 介绍图片（主图遮罩）
					bgWidth: 0, // 画布宽度
					bgHeight: 0, // 画布高度
					pixelRate: null,
					listActive: true,
					currentText: '',
					cidx: 0,
					itemList: [],
					loadbgImageheight: '100%',
					loadbgImageheightstate: false, //白底图
				},
				titlename: "", //自定义头部
				sizelist: null, //库存信息
				sizetext_id: null,
				sizetext: null, //选中配送的尺码
				dict_id: null, //属性字典id
				channel_no: null, //货道
				Workcomponents: null, //订单号
				loading: null,
				percent: 0, //进度条
				shape_image: '', //形状图片
				shape_id: '', //形状id 
				shape_price: '', //形状价格
				goods_images_type: 0,
				front_image_long: false, //背景图加载完
				// 拖拽删除
				animationData: {},
				animation: null,
				deleteTop: 0,
				deleteWrap: false,
				delete_wrap_state: true,

				background_color: null,

				translateX: -400,
				translateXState: 1,
				translateLeft: null,
				translateHide: null,
				functionHide: null,
				transformscale: 0.5, //整体缩小
				functionScale: null, //整体缩小
				isReady: false, //礼花

				//画布
				canvasHidden: false, //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
				shareImgPath: '', //用于储存canvas生成的图片
				isComeDelivery: false, //是否默认进入配送订单
				support_pay: null, //单机版是否支付 0不需要支付 1需要支付
				material_series_list: [], //系列分类
				material_series_currentId: 0,
				isShowGif: false, //是否显示

			};
		},

		created() { //设备信息
			let app = uni.getSystemInfoSync(); //设备信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); //胶囊信息
			this.textHeight = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2
			// this.textTop = menuButtonInfo.top;
		},

		methods: {



			//点击显示动画
			oclikGifImage() {
				this.isShowGif = false;
			},
			//涂鸦
			ontuya() {
				this.$nextTick(() => {
					this.$refs['tuya'].open({
						data: this.data
					})
				})
			},

			//添加涂鸦
			tuyaimg(e) {
				console.log(e)
				let index = items.length;
				items.push({
					support_zoom: 1, // 0是不支持缩放，为1时支持缩放
					support_drag: 1, // 0是不支持拖动，为1时支持拖动
					is_under: 0, //贴图是否为背景图
					is_discount: 0, //贴图是否用0
					id: index + 1,
					type: 2, //0为图片，1为文字，2为素材
					material_id: 0,
					original_id: 0,
					index: index,
					font_family: '',
					font_style: '',
					font_size: '',
					font_color: '',
					under_color: '',
					content: e, // 图片地址
					top: this.editor_top - this.data.editorHeight / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
					left: this.data.editorWidth / 2 - this.data.editorWidth /
						2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
					x: this.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
					y: this.editor_top,
					scale: 1, // 缩放比例  1为不缩放
					lastScale: 1, // 上一次的绽放比例
					oScale: 1, // 缩放比例  1为不缩放
					angle: 0, // 旋转角度
					rotate: 0, // 旋转值
					active: false, // 判定点击状态
					width: this.data.editorWidth, // 预设生成图片的宽度
					height: this.data.editorHeight, // 预设生成图片的高度
					rScale: 1, // 图片原始缩放比例
					// 新增加默认属性
					activeguide: false, // 开启辅助线
					activescale: false, // 开启旋转状态
					activehorn: false, // 开启角状态
					activeedge: false, // 开启边状态
					initialScale: 1, // 图片缩放比例
					initialscaling: 1, // 图片初始时缩放比例
					initialScalex: 1, // 图片宽缩放比例
					initialScaley: 1, // 图片高缩放比例
					initialWidth: this.data.editorWidth, // 图片原始宽度
					initialHeight: this.data.editorHeight, // 图片原始高度
					frame_left: null, // 裁剪窗口x
					image_left: null, // 图片x
					frame_top: null, // 裁剪窗口y
					image_top: null, // 图片y
				})
				this.data.itemList = items
				this.saveSnapshot();
			},


			//切换商品
			changeGoods() {
				this.$refs['switchGoods'].open(this.machine_id);
			},

			//选择商品进来
			selectGoodItem(item) {
				items = [];
				this.data.itemList = [];
				this.data.goods_id = item.id;
				snapshot = []; // 操作历史记录清空
				snapshotIndex = -1;
				// 获取产品详情数据
				this.goodslist()
			},

			//壁纸推荐
			wallpaperOnclick() {
				this.isShowGif = false;
				var that = this
				homeservice.queryList({
					s: 'Material.randomMaterial',
					machine_id: that.machine_id,
					goods_id: that.data.goods_id
				}).then(result => {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					// 读取主图遮罩
					uni.getImageInfo({
						src: result.url,
						success: (image) => {
							// 清空历史记录
							items = []; // 当前显示的图片列表
							index = 0; // 所点击的图片的索引
							snapshot = []; // 操作历史记录清空
							snapshotIndex = -1;

							uni.hideLoading()
							let index = items.length;
							let width = 0
							let height = 0
							let top = 0
							let lef = 0
							let ratio = image.width / image.height
							let ratiowidth = (that.data.editorWidth * that.mix_scale) / image.width
							let ratioheight = (that.data.editorHeight * that.mix_scale) / image.height
							let resultmix_scale = result.mix_scale || 1
							// if (ratio >= 1) { //长方形
							width = that.data.editorWidth * that.mix_scale * resultmix_scale
							height = image.height * ratiowidth * resultmix_scale
							// } else if (ratio < 1) { //长高方形
							// 	height = that.data.editorHeight * that.mix_scale * resultmix_scale
							// 	width = image.width * ratioheight * resultmix_scale
							// }
							if (result.is_under == 1) { //贴图是否为背景图
								let number_index = 0
								for (var item of items) {
									if (item.is_under == 0) {
										item.index = item.index + 1;
									} else if (item.is_under == 1) {
										number_index++
									}
								}
								index = number_index
							}
							items.push({
								support_zoom: result.support_zoom, // 0是不支持缩放，为1时支持缩放
								support_drag: result.support_drag, // 0是不支持拖动，为1时支持拖动
								is_under: result.is_under, //贴图是否为背景图
								is_discount: result.is_discount, //贴图是否用卷
								id: items.length + 1,
								type: 2, //0图片 1文字 2贴图
								material_id: result.id, //贴图id
								original_id: result.id,
								index: index,
								font_family: '',
								font_style: '',
								font_size: '',
								font_color: '',
								under_color: '',
								content: result.url, // 贴图地址
								top: that.editor_top - height / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
								left: that.data.editorWidth / 2 - width /
									2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
								x: that.data.editorWidth /
									2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
								y: that.editor_top,
								scale: 1, // 缩放比例  1为不缩放
								lastScale: 1, // 上一次的绽放比例
								oScale: 1, // 缩放比例  1为不缩放
								angle: 0, // 旋转角度
								rotate: 0, // 旋转值
								active: false, // 判定点击状态
								width: width, // 预设生成图片的宽度
								height: height, // 预设生成图片的高度
								rScale: 1, // 贴图原始缩放比例
								activeguide: false, // 开启辅助线
								activescale: false, // 开启旋转状态
								activehorn: false, // 开启角状态
								activeedge: false, // 开启边状态
								// 分界线
								initialScale: 1, // 图片缩放比例
								initialscaling: 1, // 图片初始时缩放比例
								initialScalex: 1, // 图片宽缩放比例
								initialScaley: 1, // 图片高缩放比例
								initialWidth: width, // 图片原始宽度
								initialHeight: height, // 图片原始高度
								frame_left: null, // 裁剪窗口x
								image_left: null, // 图片x
								frame_top: null, // 裁剪窗口y
								image_top: null, // 图片y
							})
							//赋值
							that.data.itemList = items
							that.saveSnapshot();
							uni.hideLoading()
						},
						fail: function(err) {
							uni.hideLoading()
							uni.showToast({
								title: '暂无智能推荐',
								icon: 'none'
							});
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});
			},
			drawImg(e, res) {
				this.showtwo = true
			},
			//解决滚动穿透问题
			// myCatchTouch() {
			// 	return
			// },
			// 替换图片
			// addItemreplace() {
			// 	this.replaceimage()
			// },
			replaceimage() {
				this.$refs['replacebottom'].close()
				let item = items[index];
				var _this = this
				uni.chooseImage({
					sizeType: ['original'], //可以指定是original原图还是compressed压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					count: 1,
					success: (res) => {
						let tempFilePaths = res.tempFilePaths;
						var size = res.tempFiles[0].size;
						var path = res.tempFiles[0].path;
						var formatImage = path.split(".")[(path.split(".")).length - 1];
						if (formatImage != "png" && formatImage != "jpg" && formatImage != "jpeg") {
							return wx.showToast({
								title: '只能上传.png、.jpg、.jpep 格式',
								icon: 'none',
								image: '',
								duration: 2000,
								mask: true,
							})
						}
						let machine_id = _this.machine_id || 0
						let user_id = userService.getUserInfo().id || 0
						wx.request({
							url: _this.$Env.getDevBaseURL() + '/api/AliossSign/getSign?machine_id=' +
								machine_id + '&user_id=' + user_id,
							method: 'GET',
							data: '',
							header: {
								'content-type': 'application/x-www-form-urlencoded',
								'Accept': 'application/json'
							},
							success: function(res) {
								//这里是进度条
								_this.percent = 0
								var atter = res.data
								let time = new Date().getTime() + Math.floor((Math.random() *
									1000) + 1)
								var uploadTask = wx.uploadFile({
									url: atter.host.replace("http:", "https:"),
									filePath: tempFilePaths[0],
									name: 'file',
									formData: {
										'key': atter.dir + time + '.jpg',
										'OSSAccessKeyId': atter.accessid,
										'policy': atter.policy,
										'Signature': atter.signature,
										'success_action_status': '200',
										'callback': atter.callback,
									},
									success: function(res) {
										if (res.statusCode != 200) {
											// console.log({errCode: '599', msg:'其他错误'})
											return;
										}
										if (res.statusCode == 200) {
											_this.percent = 100
											uni.showToast({
												title: '上传成功',
												icon: 'none',
												duration: 3000
											})
											// console.log(atter.host + '/' + atter.dir + time + '.jpg')
											uni.getImageInfo({
												src: tempFilePaths[0],
												success: (image) => {
													// 替换图片的算法：
													// 图片的宽为W1，高为 H1 ,  图片宽高比为： R1 = W1/H1
													// 外框的宽为W2，高为 H2 ,  外框宽高比为： R2 = W2/H2
													// 当R1 > R2, 放入的图片宽度要适应外框的宽W2, 图片高度需要裁剪
													// 当R1 < R2, 放入的图片宽度要适应外框的高H2, 图片宽度需要裁剪
													let W1 = item.width
													let H1 = item.height
													let W2 = image.width
													let H2 = image.height
													let R1 = W1 / H1
													let R2 = W2 / H2
													// 替换图片，初始值
													item.image_left = 0
													item.image_top = 0
													item.initialScale = 1
													item.initialscaling = 1
													item.initialScalex = 1
													item.initialScaley = 1
													if (R1 > R2) {
														item.replace = 1
														item.content =
															atter.host +
															'/' + atter
															.dir + time +
															'.jpg'
														item.initialWidth =
															item.width
														item.initialHeight =
															W1 / W2 * image
															.height
														item.image_top = -(
															W1 / W2 *
															image
															.height -
															H1) / 2
													} else if (R1 < R2) {
														item.replace = 1
														item.content =
															atter.host +
															'/' + atter
															.dir + time +
															'.jpg'
														item.initialHeight =
															item.height
														item.initialWidth =
															H1 / H2 * image
															.width
														item.image_left = -
															(H1 / H2 *
																image
																.width - W1
															) / 2
													} else {
														item.content =
															atter.host +
															'/' + atter
															.dir + time +
															'.jpg'
													}
													item.type =
														0 //0为图片，1为文字，2为素材
													if (item.works_id !=
														undefined) {
														if (item.works_id >
															0) {
															_this.data
																.works_idlenght--
															item.material_id =
																0
															item.original_id =
																0
															item.works_id =
																0
														}
													} else {
														item.original_id =
															0
														item.material_id =
															0
													}
												}
											});
										}
									},
									fail: function(err) {
										wx.showToast({
											title: '上传失败！',
											icon: 'none',
											duration: 1200
										})
									},
									complete: function(err) {

									}
								})
								uploadTask.onProgressUpdate((res) => {
									_this.percent = res.progress - 1
								})
							}
						})
					}
				})
			},
			/* 上传图片 */
			addItem: async function(e) {
				this.showone = false
				var _this = this
				uni.chooseImage({
					sizeType: ['original'], //可以指定是original原图还是compressed压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					count: 1,
					success: (res) => {
						//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,
							})
						}
						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;
						//let tempFilePaths = 'http://ws.colorpark.cn/static/alioss/images/icon_picture.png';
						var size = res.tempFiles[0].size;
						var path = res.tempFiles[0].path;
						tempFilePaths[0] = path;
						//let tempFilePaths =res.tempFiles.path;
						//var size = res.tempFiles.size;
						//console.log("微信上传图片" + tempFilePaths + size + path)
						var formatImage = path.split(".")[(path.split(".")).length - 1];
						if (formatImage != "png" && formatImage != "jpg" && formatImage != "jpeg") {
							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是文件路径数组的长度
			 * machine_id=user_id=
			 */
			uploadDIY(tempFilePaths, successUp, failUp, i, length) {
				let machine_id = this.machine_id || 0
				let user_id = userService.getUserInfo().id || 0
				var _this = this
				wx.request({
					url: _this.$Env.getDevBaseURL() + '/api/AliossSign/getSign?machine_id=' + machine_id +
						'&user_id=' + user_id,
					method: 'GET',
					data: '',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Accept': 'application/json'
					},
					success: function(res) {
						//这里是进度条
						_this.percent = 0
						var atter = res.data
						let time = new Date().getTime() + Math.floor((Math.random() * 1000) + 1)
						var uploadTask = wx.uploadFile({
							url: atter.host.replace("http:", "https:"),
							filePath: tempFilePaths[i],
							name: 'file',
							formData: {
								'key': atter.dir + time + '.jpg',
								'OSSAccessKeyId': atter.accessid,
								'policy': atter.policy,
								'Signature': atter.signature,
								'success_action_status': '200',
								'callback': atter.callback,
							},
							success: function(res) {
								//console.log(res);
								//console.log("上传图片"+successUp+"res.statusCode="+res.statusCode)
								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
											// }
											// console.log(width)
											// } 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
											// 	}
											// }
											_this.isShowGif = true;
											let index = items.length;
											items.push({
												support_zoom: 1, // 0是不支持缩放，为1时支持缩放
												support_drag: 1, // 0是不支持拖动，为1时支持拖动
												is_under: 0, //贴图是否为背景图
												is_discount: 0, //贴图是否用卷
												id: index + 1,
												type: 0, //0为图片，1为文字，2为素材
												material_id: 0,
												original_id: 0,
												index: index,
												font_family: '',
												font_style: '',
												font_size: '',
												font_color: '',
												under_color: '',
												content: atter.host + '/' +
													atter.dir + time +
													'.jpg', // 图片地址
												top: _this.editor_top -
													height /
													2, // 初始图片Y坐标，根据画布高/2-图片高/2
												left: _this.data.editorWidth /
													2 - width /
													2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
												x: _this.data.editorWidth /
													2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
												y: _this.editor_top,
												scale: 1, // 缩放比例  1为不缩放
												lastScale: 1, // 上一次的绽放比例
												oScale: 1, // 缩放比例  1为不缩放
												angle: 0, // 旋转角度
												rotate: 0, // 旋转值
												active: false, // 判定点击状态
												width: width, // 预设生成图片的宽度
												height: height, // 预设生成图片的高度
												rScale: 1, // 图片原始缩放比例
												// 新增加默认属性
												activeguide: false, // 开启辅助线
												activescale: false, // 开启旋转状态
												activehorn: false, // 开启角状态
												activeedge: false, // 开启边状态
												initialScale: 1, // 图片缩放比例
												initialscaling: 1, // 图片初始时缩放比例
												initialScalex: 1, // 图片宽缩放比例
												initialScaley: 1, // 图片高缩放比例
												initialWidth: width, // 图片原始宽度
												initialHeight: height, // 图片原始高度
												frame_left: null, // 裁剪窗口x
												image_left: null, // 图片x
												frame_top: null, // 裁剪窗口y
												image_top: null, // 图片y
											})
											_this.data.itemList = items
											_this.saveSnapshot();
										}
									});
								}
								// console.log(atter.host + '/' + atter.dir + time + '.jpg')
							},
							fail: function(err) {
								failUp++;
								wx.showToast({
									title: '上传失败！',
									icon: 'none',
									duration: 1200
								})
							},
							complete: function(err) {
								// console.log('总共' + successUp + '张上传成功,' + failUp + '张上传失败！');
							}
						})
						uploadTask.onProgressUpdate((res) => {
							// console.log('上传进度', res.progress + " " + new Date())// console.log('已经上传的数据长度', res.totalBytesSent)// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
							_this.percent = res.progress - 1
						})
					}
				})
			},
			// 移除遮罩形状
			empty() {
				if (this.shape_image != '') {
					uni.showToast({
						title: '形状已移除',
						icon: 'none'
					});
				}
				this.$refs['showshare'].close()
				this.shape_image = ''
				this.shape_id = ''
				this.shape_price = ''
				this.delete_wrap_state = true
			},
			// 替换图片取消
			cancel_replace() {
				this.$refs['replacebottom'].close()
			},
			/*    生成作品     */
			createWorks(e) {
				this.isShowGif = false;
				var that = this
				if (this.$base.isclick == true) {
					this.$base.isclick = false;
					this.$refs['textsettingsshare'].close()
					// 获取商品库存信息
					homeservice.WorksList({
						s: 'machine.getProductAttribute',
						goods_id: this.data.goods_id
					}).then(res => {
						this.sizelist = res
						if (this.sizelist.length > 0) {
							this.sizetext_id = this.sizelist[0].goods_id
							this.sizetext = this.sizelist[0].title
							this.dict_id = this.sizelist[0].dict_id
						}
					}).catch(err => {
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					});
					var that = this
					if (this.machine_id != undefined && this.machine_id != null && this.machine_id != '') {

						// 判断设备是否正常
						that.isComeDelivery = false;
						// 判断设备是否正常
						homeservice.WorksList({
							s: 'machine.detail',
							//s: 'machine.newDetail',
							machine_id: this.machine_id
						}).then(res => {
							that.machine_item = res

							//判断配送版
							if (res.delivery == 1 && res.machine_category_id == "64") {
								//this.key = 1;
								this.isComeDelivery = true;
							} //key:null,//1直营配送站 2 万能通用版 3色彩自助站

							this.support_pay = res.support_pay //单机版是否支付
							// 先登陆
							uni.login({
								provider: 'weixin',
								success: (weixinres) => {
									userService.login({
										s: 'Init.init',
										code: weixinres.code,
										appcode: that.$Env.getappcode()
									}).then(r => {
										that.createWorks_one(e)
									}).catch(err => {
										that.$refs.Signin.init();
									});
								},
								fail: (weixinres) => {
									uni.showToast({
										title: weixinres.msg,
										icon: 'none'
									})
								}
							});
						}).catch(err => {
							uni.showToast({
								title: '当前打印站正在维护',
								icon: 'none'
							});
						});
					} else {
						uni.showToast({
							title: '啊嘞，色彩定制站必须扫码才能使用',
							icon: 'none'
						});
					}
					//定时器
					setTimeout(function() {
						that.$base.isclick = true;
					}, 1500);
				}
			},
			// 创建订单
			createWorks_one(e) {
				let pixelRate = this.data.pixelRate;
				let components = [];
				let scalePos = {};
				let width = 0.00;
				let height = 0.00;
				let left = 0.00;
				let top = 0.00;
				// 循环当前的组件数据
				for (var item of this.data.itemList) {
					item.rotate = item.angle
					width = (item.width * item.scale) / pixelRate;
					height = (item.height * item.scale) / pixelRate;
					if (item.scale == 1) {
						scalePos = this.calNoScalePos(item.left, item.top, item.width, item.height);
						left = item.left / pixelRate;
						top = item.top / pixelRate;
					} else {
						scalePos = this.calScalePos(item.scale, item.left, item.top, item.width, item.height);
						left = scalePos.leftTopX / pixelRate;
						top = scalePos.leftTopY / pixelRate;
					}
					if (item.rotate != 0) {
						scalePos = this.calRocatePos(scalePos, {
							x: item.x,
							y: item.y
						}, item.rotate);
					}
					var comlist = {
						support_zoom: item.support_zoom, // 0是不支持缩放，为1时支持缩放
						support_drag: item.support_drag, // 0是不支持拖动，为1时支持拖动
						is_under: item.is_under ? item.is_under : 0, //贴图是否为背景图
						is_discount: item.is_discount ? item.is_discount : 0, //贴图是否用卷
						id: item.idone ? item.idone : null,
						type: item.type,
						material_id: item.material_id,
						works_id: item.works_id ? item.works_id : null,
						original_id: item.original_id,
						index: item.index,
						font_family: item.font_family + '.ttf',
						font_dict_id: item.font_dict_id,
						// font_style: item.font_style == "normal" ? "regular" : "bold",
						font_style: "regular",
						font_size: item.font_size / pixelRate / this.design_widthrate,
						font_color: item.font_color,
						under_color: item.under_color ? item.under_color : "#00000000",
						width: width / this.design_widthrate,
						height: height / this.design_heightrate,
						top: top / this.design_heightrate,
						left: left / this.design_widthrate,
						zoom: item.scale,
						rotate: item.rotate,
						content: item.content,
						upper_left_x: scalePos.leftTopX / pixelRate / this.design_widthrate,
						upper_left_y: scalePos.leftTopY / pixelRate / this.design_heightrate,
						upper_right_x: scalePos.rightTopX / pixelRate / this.design_widthrate,
						upper_right_y: scalePos.rightTopY / pixelRate / this.design_heightrate,
						lower_left_x: scalePos.leftBottomX / pixelRate / this.design_widthrate,
						lower_left_y: scalePos.leftBottomY / pixelRate / this.design_heightrate,
						lower_right_x: scalePos.rightBottomX / pixelRate / this.design_widthrate,
						lower_right_y: scalePos.rightBottomY / pixelRate / this.design_heightrate,
						center_x: item.x / pixelRate / this.design_widthrate,
						center_y: item.y / pixelRate / this.design_heightrate,
					}
					// type: 0, //0为图片，1为文字，2为素材
					if (item.type == 0) {
						// 新添加的参数
						comlist.image_left = item.image_left ? (item.image_left + item.left) / pixelRate / this
							.design_widthrate : (left / this.design_widthrate) // 图片的x
						comlist.image_top = item.image_top ? (item.image_top + item.top) / pixelRate / this
							.design_heightrate : (top / this.design_heightrate) // 图片的y
						comlist.image_width = item.initialWidth * item.initialScale / pixelRate / this
							.design_widthrate // 图片宽度
						comlist.image_height = item.initialHeight * item.initialScale / pixelRate / this
							.design_heightrate // 图片高度
					}
					// 创建组件数据
					components.push(comlist);
					this.Workcomponents = components
				}
				if (this.data.works_idlenght == 0 && this.works_id == null) {
					this.data.template = null //源作品id
					this.data.template_price = null //源作品sales_price
					this.data.template_user_id = null //源作品user_id
				}
				this.loading = false
				if (this.loading) return;
				if (components.length <= 0) {
					uni.showToast({
						title: '啊嘞，作品还是一片荒漠！',
						icon: 'none'
					});
					return false;
				}
				this.loading = true
				if (this.loading) {
					uni.showLoading({
						title: '色彩正在绘制',
						mask: true
					})
					homeservice.cheshi({
						s: 'Works.save',
						components: this.Workcomponents,
						works_id: this.works_id,
						goods_id: this.data.goods_id,
						template: this.data.template, //源作品id
						template_price: this.data.template_price, //源作品sales_price
						template_user_id: this.data.template_user_id, //源作品user_id
						user_id: this.data.user_id,
						platform: 3,
						shape_image: this.shape_image, //形状图片
						shape_id: this.shape_id, //形状id
						shape_price: this.shape_price, //形状价格
						machine_id: this.machine_id, //设备idmachine_id
						background_color: this.background_color, //手机壳背景颜色
					}).then(result => {
						uni.hideLoading();
						uni.showToast({
							title: '作品绘制成功',
							icon: 'none',
							mask: true
						});
						homeservice.setCate({
							goodid: result.id,
							machine_id: this.machine_id,
							goods_id: this.data.goods_id,
							goods_images_type: 0, //0 主图，1 副图
						})
						this.goods_images_type = 0
						/*if(this.support_pay == 1){
							uni.navigateTo({
								url: '../mine/order?goodid=' + result.id +
									'&machine_id=' + this.machine_id +
									'&goods_id=' + this.data.goods_id +
									'&sn=' + this.sn
							})
						}else{ */
						this.self_help(this.loading, result.id)
						/* } */
					}).catch(err => {
						uni.hideLoading();
						this.loading = false;
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '网络超时，请重试！',
							success: function() {}
						});
					});
				}
			},
			self_help(loading, works_id) {
				let data = {
					s: 'Order.create',
					type: this.key, //1：配送版，2：单机版，3：自助版
					machine_id: this.machine_id, //设备
					goods_id: this.data.goods_id, //产品
					works_id: works_id, //作品
					channel_no: this.channel_no, //货道
					dict_id: this.dict_id, //属性字典id
					goods_size: this.sizetext, //产品尺寸
					works_num: null, //作品数量
					shop_id: null, //商铺
					sn: null, //前端查询标志
					coupon_id: null, //优惠券id，支付多个id( 1-2-3)
					user_address: null, //收货地址
					goods_images_type: this.goods_images_type
				}
				uni.showLoading({
					title: '正在生成订单...',
					mask: true
				})
				homeservice.WorksList(data).then(result => {
					uni.navigateTo({
						url: '../mall/lineUp?machine_id=' + this.machine_id + '&key=' + this.key
					})
					uni.hideLoading();
				}).catch(err => {
					this.loading = false;
					uni.hideLoading();
					uni.showToast({
						title: err.msg || err.data,
						icon: 'none'
					});
				});
			},
			onok(item) {
				this.state = false
				//赋值就移动了
				items[index] = item
				// 初始化的位置
				drag.initPos(items[index])
				drag.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos, item)
				this.data.itemList = items
			},
			oncancle() {
				this.state = false
			},
			touchMove(ev) {
				ev.preventDefault();
				// 获取当前选中的部件
				var item = items[index];
				// 点击
				if (ev.touches.length == 1 && item != undefined) {
					if (item.typetext == "left-top" || item.typetext == "left-bottom" || item.typetext == "right-top" ||
						item.typetext == "right-bottom") {
						// 四角缩放
						drag.scaleMove(ev, item, this.data)
					} else if (item.typetext == "left" || item.typetext == "right" || item.typetext == "top" || item
						.typetext == "bottom") {
						// 四边伸缩
						drag.edgeMove(ev, item, this.data)
					}
				} else if (ev.touches.length == 2 && ev.touches.length == 2) {
					// 双指头操作
				}
			},
			touchEnd(ev) {
				// 获取当前选中的部件
				var item = items[index];
				if (item != undefined) {
					item.typetext = null
				}
			},
			// 边框移动
			edgeStart(e, type) {
				// 获取当前选中的部件
				var item = items[index];
				item.typetext = type //判断边框
				//获取作为移动前坐标
				item.edgestartX = e.touches[0].clientX;
				item.edgestartY = e.touches[0].clientY;
				item.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) {
					//''console.log("进来壁纸")
					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
					}
				} else if (this.e_active == 99) {
					that.Worksdetaildata(item)
				}
			},
			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'
				} else if (this.e_active == 99) {
					s_data = 'Material'
				}
				uni.showLoading({
					title: '正在加载中...',
					mask: true
				})
				homeservice.queryList({
					s: s_data + '.detail',
					id: item.id
				}).then(result => {
					if (this.e_active == 1) { //作品保留提交数据
						this.data.template = result.id
						this.data.template_price = result.sales_price
						this.data.template_user_id = result.user_id
						this.data.works_idlenght = result.component.length
						var components = result.component;
						for (var i = 0; i < components.length; i++) {
							var item = components[i];
							var top = item.upper_left_y;
							var left = item.upper_left_x;
							let pixelRate = this.data.pixelRate;
							if (item.rotate != 0.00) {
								left = item.center_x - (item.width / 2);
								top = item.center_y - (item.height / 2);
							}
							items.push({
								support_zoom: item.support_zoom, // 0是不支持缩放，为1时支持缩放
								support_drag: item.support_drag, // 0是不支持拖动，为1时支持拖动
								is_under: result.is_under || 0, //贴图是否为背景图
								is_discount: item.is_discount, //贴图是否用卷
								idone: item.id,
								id: i + 1,
								type: item.type.value,
								material_id: item.material_id,
								index: item.index,
								font_family: item.font_family,
								font_style: item.font_style,
								font_size: item.font_size * pixelRate * this.design_widthrate,
								font_color: item.font_color,
								under_color: item.under_color,
								content: item.content, // 图片地址
								top: top * pixelRate * this.design_heightrate, // 初始图片Y坐标，根据画布高/2-图片高/2
								left: left * pixelRate * this
									.design_widthrate, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
								x: item.center_x * pixelRate * this
									.design_widthrate, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
								y: item.center_y * pixelRate * this.design_heightrate,
								scale: 1, // 缩放比例 1为不缩放
								lastScale: 1, // 上一次的绽放比例
								oScale: 1, // 缩放比例  1为不缩放
								angle: parseFloat(item.rotate), // 旋转角度
								rotate: parseFloat(item.rotate), // 旋转值
								active: false, // 判定点击状态
								usedwidth: item.width * pixelRate * this.design_widthrate, // 预设生成图片的宽度
								usedheight: item.height * pixelRate * this.design_heightrate, // 预设生成图片的高度
								width: item.width * pixelRate * this.design_widthrate, // 预设生成图片的宽度
								height: item.height * pixelRate * this.design_heightrate, // 预设生成图片的高度
								rScale: 1, // 图片原始缩放比例
								works_id: item.works_id, //模板id
								original_id: item.works_id,
								activeguide: false, // 开启辅助线
								activescale: false, // 开启旋转状态
								activehorn: false, // 开启角状态
								activeedge: false, // 开启边状态
								// 分界线
								initialScale: 1, // 图片缩放比例
								initialscaling: 1, // 图片初始时缩放比例
								initialScalex: 1, // 图片宽缩放比例
								initialScaley: 1, // 图片高缩放比例
								initialWidth: item.width * pixelRate * this.design_widthrate, // 图片原始宽度
								initialHeight: item.height * pixelRate * this.design_heightrate, // 图片原始高度
								frame_left: null, // 裁剪窗口x
								image_left: null, // 图片x
								frame_top: null, // 裁剪窗口y
								image_top: null, // 图片y
							});
						}
						//赋值
						this.data.itemList = items
						this.saveSnapshot();
						uni.hideLoading();
					} else if (this.e_active == 2 || this.e_active == 23 || this.e_active == 99) { //贴图
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						// 读取主图遮罩
						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
								}

								//this.isShowGif = true;

								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'
					});
				});
			},
			isLeft(flag = null) {
				// uni.showLoading({
				// 	title: '正在加载中...'
				// })
				// homeservice.WorksList(this.queryPage).then(result => {
				// 	if (this.e_active == 1) {
				// 		this.Works_categorydatalist = this.Works_categorydatalist.concat(result.data)
				// 		this.datalist = this.datalist.concat(result.data)
				// 	} else if (this.e_active == 2) {
				// 		this.Material_categorydatalist = this.Material_categorydatalist.concat(result.data)
				// 		this.datalist = this.datalist.concat(result.data)
				// 	}
				// 	this.queryPage.page += 1;
				// 	if (flag == 'more') {
				// 		if (Math.ceil(result.total / result.per_page) <= this.queryPage.page) {
				// 			return setTimeout(() => {
				// 				uni.showToast({
				// 					title: '没有更多数据了！',
				// 					icon: 'none'
				// 				});
				// 			}, 500);
				// 		}
				// 	}
				// 	uni.hideLoading();
				// }).catch(err => {
				// 	uni.showToast({
				// 		title: err.msg,
				// 		icon: 'none'
				// 	})
				// 	uni.hideLoading();
				// });
			},
			bgColorAssembly(bg) {
				this.background_color = bg
				this.$refs['showshare'].close()
			},
			bgColorClick() {
				this.queryPage.page = 1
				this.backgroundColor = !this.backgroundColor
				if (this.backgroundColor) {
					this.$nextTick(() => {
						this.$refs['bgColor'].open()
					})
				} else {
					this.$nextTick(() => {
						this.$refs['scrollList'].open({
							e: this.e_active,
							queryPage: this.queryPage,
						})
					})
				}
			},


			////打开弹框 1模板 2贴图 3字体 4编辑 22添加相框 23壁纸
			material_series_handleScroll(index, item) {
				this.queryPage.page = 1
				this.material_series_currentId = item.id
				this.queryPage.material_series_id = item.id
				if (this.e_active == 23) { //壁纸
					this.wallpaper_material_series_currentId = item.id;
				} else if (this.e_active == 2) { //贴图
					this.mapping_material_series_currentId = item.id;
				}
				this.$nextTick(() => {
					this.$refs['scrollList'].open({
						e: this.e_active,
						queryPage: this.queryPage,
					})
				})
			},


			handleScroll(index, item) { //选中
				this.queryPage.material_series_id = 0
				this.material_series_currentId = 0
				this.backgroundColor = false
				//判断系列
				if (this.e_active == 23) {
					this.wallpaper_material_series_currentId = 0;
				} else if (this.e_active == 2) {
					this.mapping_material_series_currentId = 0;
				}
				if (this.e_active == 1) {
					// this.currentId_Works = index;
					// this.currentIndex_Works = Math.max(0, index - 1);
					// this.Works_categorydatalist = []
					// this.queryPage.page = 1
					// this.Works_category_id = item.id
					// if (this.brands[this.currentId_Works].title == '热门') {
					// 	this.queryPage.is_hot = 1
					// 	this.queryPage.is_new = null
					// 	this.queryPage.works_category_id = null
					// } else if (this.brands[this.currentId_Works].title == '最新') {
					// 	this.queryPage.is_new = 1
					// 	this.queryPage.is_hot = null
					// 	this.queryPage.works_category_id = null
					// } else {
					// 	this.queryPage.is_hot = null
					// 	this.queryPage.is_new = null
					// 	this.queryPage.works_category_id = item.id
					// }
				} else if (this.e_active == 2) { //贴图
					this.currentId_Material = index;
					this.currentIndex_Material = Math.max(0, index - 1);
					this.Material_categorydatalist = []
					this.queryPage.page = 1
					this.Material_category_id = item.id
					if (this.brands[this.currentId_Material].title == '热门') {
						this.classificationHeight = 0
						this.material_series_list = []
						this.queryPage.is_hot = '1'
						this.queryPage.is_new = null
						this.queryPage.material_category_id = null
					} else if (this.brands[this.currentId_Material].title == '最新') {
						this.classificationHeight = 0
						this.material_series_list = []
						this.queryPage.is_new = '1'
						this.queryPage.is_hot = null
						this.queryPage.material_category_id = null
					} else {
						this.queryPage.is_hot = null
						this.queryPage.is_new = null
						this.queryPage.material_category_id = item.id
					}
					this.currentId = index;
					this.currentIndex = Math.max(0, index - 1);
					if (this.brands[this.currentId_Material].title == '我的') {
						this.classificationHeight = 0
						this.material_series_list = []
						this.$nextTick(() => {
							this.$refs['scrollList'].open({
								e: this.e_active,
								queryPage: {
									s: 'Material.myMaterial',
									page: 1,
									per_page: 50
								},
							})
						})
					} else {
						this.MaterialseriesList()
						this.$nextTick(() => {
							this.$refs['scrollList'].open({
								e: this.e_active,
								queryPage: this.queryPage,
							})
						})
					}
				} 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,
						})
					})
				} else if (this.e_active == 99) { //收藏
					this.currentId = index;
					this.currentIndex = Math.max(0, index - 1);
					//this.collection_currentId =	this.currentId
					//this.currentIndex = this.currentIndex;
					this.collection_currentId = this.currentId;
					this.collection_currentIndex = this.currentIndex;

					this.$nextTick(() => {
						setTimeout(function() {
							this.$refs['scrollList'].open({
								e: this.e_active,
								queryPage: {
									currentId: this.currentId,
								},
							})
						}.bind(this), 500)
					})
				}
			},


			MaterialseriesList() { //查询分类下二级分类
				this.material_series_list = []
				homeservice.queryList({
					s: 'Material.seriesList',
					category_id: this.queryPage.material_category_id,
				}).then(result => {
					this.queryPage.material_series_id = 0
					this.material_series_list = result
					if (this.material_series_list.length > 0) {
						if (this.e_active == 23) {
							if (this.wallpaper_material_series_currentId != 0) {
								this.queryPage.material_series_id = this.wallpaper_material_series_currentId;
								this.material_series_currentId = this.wallpaper_material_series_currentId
							} else {
								this.queryPage.material_series_id = this.material_series_list[0].id
								this.material_series_currentId = this.material_series_list[0].id
							}
						} else if (this.e_active == 2) {
							if (this.mapping_material_series_currentId != 0) {
								this.queryPage.material_series_id = this.mapping_material_series_currentId
								this.material_series_currentId = this.mapping_material_series_currentId
							} else {
								this.queryPage.material_series_id = this.material_series_list[0].id
								this.material_series_currentId = this.material_series_list[0].id
							}
						} else {
							this.queryPage.material_series_id = this.material_series_list[0].id
							this.material_series_currentId = this.material_series_list[0].id
						}
						let that = this
						setTimeout(function() {
							var query = wx.createSelectorQuery();
							query.select('#classification').boundingClientRect();
							query.exec(function(res) {
								that.classificationHeight = res[0].height
								that.setData({
									classificationHeight: that.classificationHeight
								})
								// console.log('height' + that.classificationHeight)
							})
						}.bind(this), 100)
					} else {
						this.classificationHeight = 0
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});
			},


			//打开弹框 1模板 2贴图 3字体 4编辑 22添加相框 23壁纸
			showPopup(e) {
				this.isShowGif = false;
				this.material_series_list = []
				this.queryPage.material_series_id = 0
				this.material_series_currentId = 0
				this.delete_wrap_state = false
				this.showone = false
				this.e_active = e
				this.togglePopup('bottom', 'share')
				this.$refs['textsettingsshare'].close()
				this.queryPage.page = 1
				if (e == 1) { //模板

				} else if (e == 2) { //贴图
					this.Adlists = this.diy_bannerList
					this.queryPage.goods_id = this.data.goods_id
					this.brands = this.Material_category
					this.currentId = this.currentId_Material;
					this.currentIndex = this.currentIndex_Material;
					this.queryPage.s = 'Material.list'
					this.queryPage.works_category_id = null
					this.queryPage.material_category_id = null
					if (this.brands[this.currentId].title == '热门') {
						this.queryPage.is_hot = '1'
						this.queryPage.is_new = null
					} else if (this.brands[this.currentId].title == '最新') {
						this.queryPage.is_new = '1'
						this.queryPage.is_hot = null
					} else {
						this.queryPage.is_hot = null
						this.queryPage.is_new = null
						this.queryPage.material_category_id = this.Material_category[0].id
						if (this.Material_category_id) {
							this.queryPage.material_category_id = this.Material_category_id
						}
					}
					if (this.mapping_material_series_currentId != 0) {
						this.queryPage.material_series_id = this.mapping_material_series_currentId
						this.material_series_currentId = this.mapping_material_series_currentId
					}
					this.MaterialseriesList()
					this.$nextTick(() => {
						this.$refs['scrollList'].open({
							e: e,
							queryPage: this.queryPage,
						})
					})
				} else if (e == 3) { //文本
					index = null
					this.addtext = true
					this.data.currentText = ''
					this.$nextTick(() => {
						this.$refs['textsettings'].open({
							data: this.data,
							bg_text_color: this.bg_text_color
						})
					})
				} else if (e == 4) { //文本
					this.addtext = false
					this.$nextTick(() => {
						this.$refs['textsettings'].open({
							data: this.data,
							bg_text_color: this.bg_text_color
						})
					})
				} else if (e == 22) { //形状

				} else if (e == 23) { //壁纸
					this.Adlists = this.diy_backList
					this.queryPage.goods_id = this.data.goods_id
					this.brands = this.wallpaper_category //壁纸分类
					this.currentId = this.currentId_wallpaper; /* 控制被选中 */
					this.currentIndex = this.currentIndex_wallpaper; /* 控制位置 */
					this.queryPage.s = 'Material.list'
					this.queryPage.works_category_id = null //作品选中分类id
					this.queryPage.material_category_id = null //贴图选中分类
					if (this.wallpaper_material_series_currentId != 0) {
						this.queryPage.material_series_id = this.wallpaper_material_series_currentId
						this.material_series_currentId = this.wallpaper_material_series_currentId
					}
					//console.log("brands="+this.currentId); /* this.brands.length */
					if (this.brands[this.currentId].title == '热门') {
						this.queryPage.is_hot = '1'
						this.queryPage.is_new = null
					} else if (this.brands[this.currentId].title == '最新') {
						this.queryPage.is_new = '1'
						this.queryPage.is_hot = null
					} else {
						this.queryPage.is_hot = null
						this.queryPage.is_new = null
						this.queryPage.material_category_id = this.wallpaper_category[0].id
						if (this.wallpaper_category_id) {
							this.queryPage.material_category_id = this.wallpaper_category_id
						}
					}
					this.MaterialseriesList()
					this.$nextTick(() => {
						this.$refs['scrollList'].open({
							e: e,
							queryPage: this.queryPage,
						})
					})
				} else if (e == 24) {
					this.Adlists = this.diy_bannerList
					this.backgroundColor = true;
					this.$nextTick(() => {
						this.$refs['bgColor'].open()
					})
				} else if (e == 99) { //收藏
					this.Adlists = this.diy_bannerList
					this.brands = [{
							icon: "../../static/icon/my.png",
							icon_click: "../../static/icon/my-o.png",
							title: "我的"
						},
						{
							icon: "../../static/icon/icon_collection_@2x.png",
							icon_click: "../../static/icon/icon_collection_@2x.png",
							title: "收藏"
						},
						{
							icon: "../../static/icon/icon_good@2x.png",
							icon_click: "../../static/icon/icon_good@2x.png",
							title: "点赞"
						},
					]
					if (this.collection_currentId != 0) {
						this.currentId = this.collection_currentId;
						this.currentIndex = this.collection_currentIndex;
					} else {
						this.currentId = 0;
						this.currentIndex = 0; /* 控制位置 */
					}

					this.$nextTick(() => {
						this.$refs['scrollList'].open({
							e: e,
							queryPage: {
								currentId: this.currentId,
							}
						})
					})
				}
			},


			//打开弹框 1模板 2贴图 3字体
			/*showPopup(e) {
				this.delete_wrap_state = false
				this.showone = false
				this.e_active = e
				this.togglePopup('bottom', 'share')
				this.$refs['textsettingsshare'].close()
				this.queryPage.page = 1
				if (e == 1) { //模板
					
				} else if (e == 2) { //贴图
					this.backgroundColor = false
					this.Adlists = this.diy_bannerList
					this.queryPage.goods_id = null;
					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
						}
					}
					this.MaterialseriesList()
					this.$nextTick(() => {
						this.$refs['scrollList'].open({
							e: e,
							queryPage: this.queryPage,
						})
					})

				} else if (e == 3) { //文本
					index = null
					this.addtext = true
					this.data.currentText = ''
					this.$nextTick(() => {
						this.$refs['textsettings'].open({
							data: this.data,
							bg_text_color: this.bg_text_color
						})
					})
				} else if (e == 4) {
					this.addtext = false
					this.$nextTick(() => {
						this.$refs['textsettings'].open({
							data: this.data,
							bg_text_color: this.bg_text_color
						})
					})
				} else if (e == 22) { //形状
					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 = 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 
					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()
					this.$nextTick(() => {
						this.$refs['scrollList'].open({
							e: e,
							queryPage: this.queryPage,
						})
					})
				} else if (e == 25) {
					this.Adlists = this.diy_bannerList
					this.queryPage.goods_id = null
					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
						}
					}
					this.MaterialseriesList()
					this.e_active = 2
					this.queryPage.page = 1
					this.backgroundColor = true
					this.$nextTick(() => {
						this.$refs['bgColor'].open()
					})
				} else if (e == 28) {
					this.Adlists = this.diy_backList
					this.backgroundColor = true
					this.$nextTick(() => {
						setTimeout(function() {
							this.$refs['bgColor'].open()
						}.bind(this), 200)
					})
				}
			}, */

			cancel(type) { //关闭弹框
				this.isShowGif = false;
				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.font_style = item.font_style == "" ? "bold" : ""
				} else {
					uni.showToast({
						title: '啊嘞，你还没有输入内容哦',
						icon: 'none'
					})
				}
				this.saveSnapshot();
			},

			//文本颜色
			workcolor(color) {
				// 获取当前选中的部件
				var item = items[index];
				if (item != undefined) {
					if (this.bg_text_color) {
						item.under_color = color == item.under_color ? '' : color
					} else {
						item.font_color = color == item.font_color ? '#000000' : color
					}
				} else {
					uni.showToast({
						title: '啊嘞，你还没有输入内容哦',
						icon: 'none'
					})
				}
				this.saveSnapshot();
			},

			/**
			 * 通过旧坐标、旋转角度、圆心计算旋转后点的新坐标
			 * @param origin  原始坐标对象
			 * @param center  圆心坐标对象
			 * @param angle   旋转角度
			 * @return {{x: string, y: string}}
			 */
			calNewPos: function(origin, center, angle) {
				// 计算
				let radian = Math.PI / 180 * angle;
				let newX = (origin.x - center.x) * Math.cos(radian) - (origin.y - center.y) * Math.sin(radian) + center
					.x;
				let newY = (origin.y - center.y) * Math.cos(radian) + (origin.x - center.x) * Math.sin(radian) + center
					.y;
				// 取10位小数
				newX = newX.toFixed(10);
				newY = newY.toFixed(10);
				return {
					x: newX,
					y: newY
				};
			},

			/**
			 * 通当新坐标、旋转角度、圆心计算旋转后点的旧坐标
			 * @param origin  原始坐标对象
			 * @param center  圆心坐标对象
			 * @param angle   旋转角度
			 * @return {{x: string, y: string}}
			 */
			calOldPos: function(origin, center, angle) {
				// 计算
				let radian = -Math.PI / 180 * angle;
				let oldX = (origin.x - center.x) * Math.cos(radian) - (origin.y - center.y) * Math.sin(radian) + center
					.x;
				let oldY = (origin.y - center.y) * Math.cos(radian) + (origin.x - center.x) * Math.sin(radian) + center
					.y;
				// 取10位小数
				oldX = oldX.toFixed(10);
				oldY = oldY.toFixed(10);
				return {
					x: oldX,
					y: oldY
				};
			},
			/**
			 * 计算伸缩后的四个顶部坐标
			 *
			 * @param scale  放大倍部
			 * @param left   左上顶点的左距离
			 * @param top    左上顶点的上距离
			 * @param width  部件宽度
			 * @param height 部件高度
			 * @return {{leftTopY: string, rightTopX: string, leftTopX: string, leftBottomY: string, rightBottomX: string, rightTopY: string, leftBottomX: string, rightBottomY: string}}
			 */
			calScalePos: function(scale, left, top, width, height) {
				// 计算单边需要伸缩的比例，可为正可为负
				let rate = (scale - 1) / 2;
				// 通过比例计算宽和高的差值
				let widthDiff = rate * width;
				let heightDiff = rate * height;
				// 左上顶点的坐标
				let leftTopX = left - widthDiff;
				let leftTopY = top - heightDiff;
				// 右上顶点的坐标
				let rightTopX = (left + width) + widthDiff;
				let rightTopY = leftTopY;
				// 左下顶点的坐标
				let leftBottomX = leftTopX;
				let leftBottomY = (top + height) + heightDiff;
				// 右下顶点的坐标
				let rightBottomX = rightTopX;
				let rightBottomY = leftBottomY;
				// 返回所有的8个坐标
				return {
					leftTopX: leftTopX.toFixed(10),
					leftTopY: leftTopY.toFixed(10),
					rightTopX: rightTopX.toFixed(10),
					rightTopY: rightTopY.toFixed(10),
					leftBottomX: leftBottomX.toFixed(10),
					leftBottomY: leftBottomY.toFixed(10),
					rightBottomX: rightBottomX.toFixed(10),
					rightBottomY: rightBottomY.toFixed(10),
					centerX: (rightTopX - leftTopX) / 2,
					centerY: (rightTopY - leftTopY) / 2
				};
			},
			/**
			 * 计算未伸缩时的四个顶点坐标
			 *
			 * @param left   左上顶点的左距离
			 * @param top    左上顶点的上距离
			 * @param width  部件宽度
			 * @param height 部件高度
			 * @return {{leftTopY: string, rightTopX: string, leftTopX: string, leftBottomY: string, rightBottomX: string, rightTopY: string, leftBottomX: string, rightBottomY: string}}
			 */
			calNoScalePos: function(left, top, width, height) {
				// 左上顶点的坐标
				let leftTopX = left;
				let leftTopY = top;
				// 右上顶点的坐标
				let rightTopX = left + width;
				let rightTopY = leftTopY;
				// 左下顶点的坐标
				let leftBottomX = leftTopX;
				let leftBottomY = top + height;
				// 右下顶点的坐标
				let rightBottomX = rightTopX;
				let rightBottomY = leftBottomY;
				// 返回所有的8个坐标
				return {
					leftTopX: leftTopX.toFixed(10),
					leftTopY: leftTopY.toFixed(10),
					rightTopX: rightTopX.toFixed(10),
					rightTopY: rightTopY.toFixed(10),
					leftBottomX: leftBottomX.toFixed(10),
					leftBottomY: leftBottomY.toFixed(10),
					rightBottomX: rightBottomX.toFixed(10),
					rightBottomY: rightBottomY.toFixed(10),
					centerX: (rightTopX - leftTopX) / 2,
					centerY: (rightTopY - leftTopY) / 2
				};
			},
			/**
			 * 计算四个顶点旋转后的坐标系
			 * @param scalePos  四个顶点未旋转前的坐标系
			 * @param center    中心点位置
			 * @param angle     旋转角度
			 * @return {{leftTopY: string, rightTopX: string, leftTopX: string, leftBottomY: string, rightBottomX: string, rightTopY: string, leftBottomX: string, rightBottomY: string}}
			 */
			calRocatePos: function(scalePos, center, angle) {
				// 左上顶点的坐标
				let leftTop = this.calNewPos({
					x: scalePos.leftTopX,
					y: scalePos.leftTopY
				}, center, angle);
				// 右上顶点的坐标
				let rightTop = this.calNewPos({
					x: scalePos.rightTopX,
					y: scalePos.rightTopY
				}, center, angle);
				// 左下顶点的坐标
				let leftBottom = this.calNewPos({
					x: scalePos.leftBottomX,
					y: scalePos.leftBottomY
				}, center, angle);
				// 右下顶点的坐标
				let rightBottom = this.calNewPos({
					x: scalePos.rightBottomX,
					y: scalePos.rightBottomY
				}, center, angle);
				// 返回所有的8个坐标
				return {
					leftTopX: leftTop.x,
					leftTopY: leftTop.y,
					rightTopX: rightTop.x,
					rightTopY: rightTop.y,
					leftBottomX: leftBottom.x,
					leftBottomY: leftBottom.y,
					rightBottomX: rightBottom.x,
					rightBottomY: rightBottom.y,
					centerX: (scalePos.rightTopX - scalePos.leftTopX) / 2,
					centerY: (scalePos.rightTopY - scalePos.leftTopY) / 2
				};
			},
			/**
			 * 计算四个顶点旋转后的旧坐标
			 * @param scalePos  四个顶点未旋转前的坐标系
			 * @param center    中心点位置
			 * @param angle     旋转角度
			 * @return {{leftTopY: string, rightTopX: string, leftTopX: string, leftBottomY: string, rightBottomX: string, rightTopY: string, leftBottomX: string, rightBottomY: string}}
			 */
			calOldRocatePos: function(scalePos, center, angle) {
				// 左上顶点的坐标
				let leftTop = this.calOldPos({
					x: scalePos.leftTopX,
					y: scalePos.leftTopY
				}, center, angle);
				// 右上顶点的坐标
				let rightTop = this.calOldPos({
					x: scalePos.rightTopX,
					y: scalePos.rightTopY
				}, center, angle);
				// 左下顶点的坐标
				let leftBottom = this.calOldPos({
					x: scalePos.leftBottomX,
					y: scalePos.leftBottomY
				}, center, angle);
				// 右下顶点的坐标
				let rightBottom = this.calOldPos({
					x: scalePos.rightBottomX,
					y: scalePos.rightBottomY
				}, center, angle);
				// 返回所有的8个坐标
				return {
					leftTopX: leftTop.x,
					leftTopY: leftTop.y,
					rightTopX: rightTop.x,
					rightTopY: rightTop.y,
					leftBottomX: leftBottom.x,
					leftBottomY: leftBottom.y,
					rightBottomX: rightBottom.x,
					rightBottomY: rightBottom.y,
					centerX: (rightTopX - leftTopX) / 2,
					centerY: (rightTopY - leftTopY) / 2
				};
			},
			// 读取图片操作
			loadImage(e) {
				var id = e.currentTarget.dataset.id;
				var width = e.detail.width * this.data.pixelRate * this.design_widthrate; //获取图片真实宽度
				var height = e.detail.height * this.data.pixelRate * this.design_widthrate; //获取图片真实高度
				var rScale = width / items[id - 1]['width'];
				items[id - 1]['height'] = height / rScale;
				items[id - 1]['top'] = items[id - 1]['y'] - (items[id - 1]['height'] / 2);
			},
			/* 部件点击事件 */
			itemClick(e) {
				this.isShowGif = false;
				// 循环数据找到点击点
				for (let i = 0; i < items.length; i++) {
					//关闭点击属性
					items[i].active = false; //选中状态
					items[i].activeguide = false // 辅助线状态
					items[i].activescale = false // 旋转状态
					items[i].activehorn = false // 角状态
					items[i].activeedge = false // 边状态
					if (e.currentTarget.dataset.id == items[i].id) {
						//记录下标
						index = i;
						//开启点击属性
						items[index].active = true; //选中状态
						items[index].activeguide = false // 辅助线状态
						items[index].activescale = true // 旋转状态
						items[index].activehorn = true // 角状态
						items[index].activeedge = true // 边状态
					}
				}
				this.active = true
				this.data.listActive = true
				this.data.cidx = index
				// 初始化的位置
				drag.initPos(items[index])
			},
			/** 点击画布区域取消聚焦 */
			itemCancel(e) {
				this.isShowGif = false;
				if (items.length > 0) {
					for (let i = 0; i < items.length; i++) {
						items[i].active = false;
						items[i].active = false //辅助线
						items[i].activeguide = false //辅助线
						items[i].activescale = false // 旋转状态
						items[i].activehorn = false // 角状态
						items[i].activeedge = false // 边状态
					}
					this.data.itemList = items
					//赋值 取消边框显示
					this.data.listActive = false
					// this.setData({itemList: items});
					this.active = false
				}
			},
			/* 获取编辑区域左边距 */
			getLeft: function() {
				//return this.data.bgWidth * 0.3;
				// return 235 * this.data.pixelRate;
				return (750 - this.design_width) / 2 * this.data.pixelRate;
			},
			/* 获取编辑区域上边距 */
			getTop: function() {
				// return this.data.bgHeight * 0.25;
				return (this.data.bgHeight - this.data.editorHeight) / 2;
			},
			/* 图片拖动开始事件 */
			dragStart: function(e) {
				// 剪切数据
				this.properties = items[index]
				// 点击选中部件
				this.itemClick(e);
				// 获取当前选中的部件
				var item = items[index];
				if (e.touches.length > 1) {
					//获取作为移动前角度的坐标
					item.touchX = e.touches[0].clientX;
					item.touchY = e.touches[0].clientY;
					// 当两根手指放上去的时候，将距离(distance)初始化。
					let xMove = e.touches[1].clientX - e.touches[0].clientX;
					let yMove = e.touches[1].clientY - e.touches[0].clientY;
					//计算开始触发两个手指坐标的距离
					item.distance = Math.sqrt(xMove * xMove + yMove * yMove);
					//获取图片半径
					item.r = this.computeDistance(item.x, item.y, item.left, item.top);
				} else {
					// 记录点击时的坐标值
					item.startX = e.touches[0].clientX;
					item.startY = e.touches[0].clientY;
				}
				var currentText = '';
				if (item.type == 1) {
					currentText = item.content;
				}
				//赋值
				this.data.listActive = true
				this.data.cidx = index
				this.data.currentText = currentText
				this.data.itemList = items
			},
			/* 图片拖动中事件 */
			dragMove: function(e) {
				// 获取当前选中的部件
				var item = items[index];
				if (e.touches.length > 1) {
					// //记录移动后的位置
					// item.touchMoveX = e.touches[0].clientX;
					// item.touchMoveY = e.touches[0].clientY;
					// //双手指运动 x移动后的坐标和y移动后的坐标
					// let xMove = e.touches[1].clientX - e.touches[0].clientX;
					// let yMove = e.touches[1].clientY - e.touches[0].clientY;
					// //双手指运动新的 ditance
					// let distance = Math.sqrt(xMove * xMove + yMove * yMove);
					// //计算移动的过程中实际移动了多少的距离
					// let distanceDiff = distance - item.distance;
					// item.scale = item.scale + 0.001 * distanceDiff;
					// //设置最大缩放为10倍
					// if (Math.abs(item.scale) > 10) {
					// 	item.scale = 10;
					// }
					// //设置最小缩放为0.3倍
					// if (Math.abs(item.scale) < 0.3) {
					// 	item.scale = 0.3;
					// }
					// //图片放大响应的右下角按钮同比缩小
					// item.oScale = 1 / item.scale;
				} else {
					drag.dragMove(e, item, this.data, this.editor_top)
					this.guide_left = true // 开启辅助线
					this.guide_top = true // 开启辅助线
					this.delete_wrap_state = true
					if (e.changedTouches[0].pageY + 80 > this.deleteTop) { //如果图片容器底部距离大于删除框顶部距离就删除图片
						this.deleteWrap = true
					} else {
						this.deleteWrap = false
					}
				}
				this.data.itemList = items //赋值就移动了
			},
			/* 拖动结束事件 */
			dragEnd: function(e) {
				//赋值
				this.guide_top = false
				this.guide_left = false
				// 获取当前选中的部件
				var item = items[index];
				item.lastScale = item.scale;
				//属性
				item.active = true //辅助线
				item.activeguide = false //辅助线
				item.activescale = true // 旋转状态
				item.activehorn = true // 角状态
				item.activeedge = true // 边状态
				// 恢复
				if (item.heart_startX != undefined) {
					item.startX = item.heart_startX;
					item.startY = item.heart_startY;
				}
				if (item.xheart != undefined) {
					item.x = item.xheart
					item.y = item.yheart
				}
				//赋值就移动了
				this.data.itemList = items
				//赋值
				// this.data.listActive = false
				this.saveSnapshot();
			},
			/* 部件缩放开始事件*/
			scaleStart(e, type) {
				this.itemClick(e); // 点击选中部件
				var item = items[index]; // 获取当前选中的部件
				if (item.support_zoom == 0) return; // 0不支持缩放，1时支持缩放
				item.typetext = type
				//获取作为移动前角度的坐标
				item.touchX = e.touches[0].clientX;
				item.touchY = e.touches[0].clientY;
				//获取图片半径
				item.r = this.computeDistance(item.x, item.y, item.left, item.top);
				// 记录坐标
				item.scaleone = item.width / item.height
				item.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: function(e) {
				// 点击选中部件
				this.itemClick(e);
				// 获取当前选中的部件
				var item = items[index];
				item.typetext = 'rotate';
				//获取作为移动前角度的坐标
				item.touchX = e.touches[0].clientX;
				item.touchY = e.touches[0].clientY;
				// 获取编辑框的左边距和上边距
				var mLeft = this.getLeft();
				var mTop = this.getTop();
				//移动前的角度
				item.anglePre = this.computeAngle(item.x, item.y, item.touchX - mLeft, item.touchY - mTop);
				//获取图片半径
				item.r = this.computeDistance(item.x, item.y, item.left, item.top);
				//赋值
				this.data.listActive = true
			},
			/* 部件缩放中事件 */
			scaleMove: function(e) {
				// 获取当前选中的部件
				var item = items[index];
				if (item.support_zoom == 0) return; // 0不支持缩放，1时支持缩放
				//记录移动后的位置
				item.touchMoveX = e.touches[0].clientX;
				item.touchMoveY = e.touches[0].clientY;
				//属性
				item.active = false //辅助线
				item.activeguide = false //辅助线
				item.activescale = false // 旋转状态
				item.activehorn = true // 角状态
				item.activeedge = false // 边状态
				// 获取编辑框的左边距和上边距
				var mLeft = this.getLeft();
				var mTop = this.getTop();
				//移动的点到圆心的距离
				item.disPtoO = this.computeDistance(item.x, item.y, item.touchMoveX - mLeft, item.touchMoveY - mTop)
				//手指滑动的点到圆心的距离与半径的比值作为图片的放大比例
				item.scale = item.disPtoO / item.r;
				//设置最大缩放为10倍
				if (Math.abs(item.scale) > 10) {
					item.scale = 10;
				}
				//设置最小缩放为0.3倍
				if (Math.abs(item.scale) < 0.3) {
					item.scale = 0.3;
				}
				//图片放大响应的右下角按钮同比缩小
				item.oScale = 1 / item.scale;
				drag.initPos(item)
				//赋值setData渲染
				this.data.itemList = items
			},
			/* 部件旋转中事件 */
			rotateMove: function(e) {
				// 获取当前选中的部件
				var item = items[index];
				//记录移动后的位置
				item.touchMoveX = e.touches[0].clientX;
				item.touchMoveY = e.touches[0].clientY;
				// 获取编辑框的左边距和上边距
				var mLeft = this.getLeft();
				var mTop = this.getTop();
				//移动的点到圆心的距离
				item.disPtoO = this.computeDistance(item.x, item.y, item.touchMoveX - mLeft, item.touchMoveY - mTop);
				//移动后位置的角度
				item.angleNext = this.computeAngle(item.x, item.y, item.touchMoveX - mLeft, item.touchMoveY - mTop);
				//角度差
				item.new_rotate = item.angleNext - item.anglePre;
				//叠加的角度差
				item.rotate += item.new_rotate;
				item.angle = item.rotate; //赋值
				//用过移动后的坐标赋值为移动前坐标
				item.touchX = e.touches[0].clientX;
				item.touchY = e.touches[0].clientY;
				item.anglePre = this.computeAngle(item.x, item.y, item.touchX - mLeft, item.touchY - mTop);
				//属性
				item.active = false //辅助线
				item.activeguide = true //开启辅助线
				item.activescale = true // 旋转状态
				item.activehorn = false // 角状态
				item.activeedge = false // 边状态
				// 角度计算
				let roat = Math.abs(item.angle) % 360
				if (item.angle < 0) {
					let multiple = Math.ceil(Math.abs(item.angle) / 360)
					roat = item.angle + multiple * 360
				}
				drag.initPos(item)
				if (roat <= 5 || roat >= 355) {
					item.angle = 0.00
					if (item.angle == 0) {
						wx.vibrateShort(); // 使手机振动15ms
					}
				} else if (roat <= 50 && roat >= 40) {
					item.angle = 45
					if (item.angle == 45) {
						wx.vibrateShort(); // 使手机振动15ms
					}
				} else if (roat <= 95 && roat >= 85) {
					item.angle = 90
					if (item.angle == 90) {
						wx.vibrateShort(); // 使手机振动15ms
					}
				} else if (roat <= 140 && roat >= 130) {
					item.angle = 135
					if (item.angle == 135) {
						wx.vibrateShort(); // 使手机振动15ms
					}
				} else if (roat <= 185 && roat >= 175) {
					item.angle = 180
					if (item.angle == 180) {
						wx.vibrateShort(); // 使手机振动15ms
					}
				} else if (roat <= 230 && roat >= 220) {
					item.angle = 225
					if (item.angle == 225) {
						wx.vibrateShort(); // 使手机振动15ms
					}
				} else if (roat <= 275 && roat >= 265) {
					item.angle = 270
					if (item.angle == 270) {
						wx.vibrateShort(); // 使手机振动15ms
					}
				} else if (roat <= 320 && roat >= 310) {
					item.angle = 315
					if (item.angle == 315) {
						wx.vibrateShort(); // 使手机振动15ms
					}
				}
				//赋值setData渲染
				this.data.itemList = items
			},
			/* 部件缩放结束事件 */
			scaleEnd: function(e) {
				// 获取当前选中的部件
				var item = items[index];
				if (item.support_zoom == 0) return; // 0不支持缩放，1时支持缩放
				item.typetext = null
				//关闭点击属性
				item.active = true //辅助线
				item.activeguide = false // 辅助线状态
				item.activescale = true // 旋转状态
				item.activehorn = true // 角状态
				item.activeedge = true // 边状态
				//赋值
				// this.data.listActive = false
				drag.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos,
					item)
				this.saveSnapshot();
			},
			/* 部件旋转结束事件*/
			rotateEnd: function(e) {
				// 获取当前选中的部件
				var item = items[index];
				item.typetext = null;
				//赋值
				// this.data.listActive = false
				//关闭点击属性
				item.active = true //辅助线
				item.activeguide = false // 辅助线状态
				item.activescale = true // 旋转状态
				item.activehorn = true // 角状态
				item.activeedge = true // 边状态
				this.saveSnapshot();
			},
			/**
			 * 计算手点击坐标到圆心的角度
			 * @param centerX   圆心的 x 坐标
			 * @param centerY   圆心的 y 坐标
			 * @param x         手点击的 x 坐标
			 * @param y         手点击的 y 坐标
			 * @returns {number}
			 */
			computeAngle: function(centerX, centerY, x, y) {
				var diffX = x - centerX;
				var diffY = y - centerY;
				var rate = Math.abs(diffX / diffY);
				//鼠标相对于旋转中心的角度
				var angle = Math.atan(rate) / (2 * Math.PI) * 360;
				if (diffX < 0 && diffY < 0) { // 右下角，第四象限
					angle = -angle;
				} else if (diffX <= 0 && diffY >= 0) { // 左下角，第三象限
					angle = -(180 - angle)
				} else if (diffX > 0 && diffY < 0) { // 右上角，第一象限
					angle = angle;
				} else if (diffX > 0 && diffY > 0) { // 左上角，第二象限
					angle = 180 - angle;
				}
				return angle;
			},
			/**
			 * 计算触摸点到圆心的距离
			 * @param centerX   圆心的 x 坐标
			 * @param centerY   圆心的 y 坐标
			 * @param x         手点击的 x 坐标
			 * @param y         手点击的 y 坐标
			 * @returns {number}
			 */
			computeDistance: function(centerX, centerY, x, y) {
				var diffX = x - centerX;
				var diffY = y - centerY;
				return Math.sqrt(diffX * diffX + diffY * diffY);
			},
			// 移除图片
			removedeleteItem(item, ix) {
				//this.active = false;
				//this.guide_left = false
				if (!this.active) {
					index = items.length - 1
					items.splice(index, 1); // 删除指定的部件
					this.setData({
						'data': this.data
					});
					this.saveSnapshot();
					this.active = false;
				} else {
					this.deleteItem(item, ix);
				}
			},
			/* 删除部件 */
			deleteItem: function(item, ix) {
				// 当前选中的部件
				var currentItem = items[index];
				if (currentItem != null) {
					// 判断删除的是否是模板组件
					if (currentItem.hasOwnProperty("works_id") && 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_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
					})
					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();
				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
				})
			},
			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();
					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
					})
				}
			},
			/* 保存当前作品的快照 */
			saveSnapshot: function() {
				var currentSnapshot = JSON.stringify(this.data);
				var lastSnapshot = "";
				if (snapshot.length > 0) {
					lastSnapshot = JSON.stringify(snapshot[snapshotIndex]);
				}
				if (currentSnapshot != lastSnapshot) {
					// 清除当前步骤后面的所有步骤
					if (snapshot.length > 0 && (snapshot.length - 1 > snapshotIndex)) {
						for (var i = snapshotIndex + 1; i < snapshot.length; i++) {
							snapshot.pop();
						}
					}
					// 加入快照
					snapshot.push(currentSnapshot);
					snapshotIndex = snapshotIndex + 1;
				}
			},
			/* 上一步功能 */
			prev: function() {
				if (snapshotIndex > 0) {
					snapshotIndex = snapshotIndex - 1;
					this.data = JSON.parse(snapshot[snapshotIndex]);
					items = this.data.itemList;
					index = this.data.cidx;
				} else {
					wx.showToast({
						title: '已是最上一步',
						icon: 'success',
						duration: 2000
					});
				}
			},
			/* 下一步 */
			next: function() {
				if (snapshotIndex < snapshot.length - 1) {
					snapshotIndex = snapshotIndex + 1;
					this.data = JSON.parse(snapshot[snapshotIndex]);
					items = this.data.itemList;
					index = this.data.cidx;
				} else {
					wx.showToast({
						title: '已是最下一步',
						icon: 'success',
						duration: 2000
					});
				}
			},

			//设置数据
			setData(obj) {
				let that = this;
				let keys = [];
				let val, data;
				Object.keys(obj).forEach(function(key) {
					keys = key.split('.');
					val = obj[key];
					data = that.$data;
					keys.forEach(function(key2, index) {
						if (index + 1 == keys.length) {
							that.$set(data, key2, val);
						} else {
							if (!data[key2]) {
								that.$set(data, key2, {});
							}
						}
						data = data[key2];
					})
				});
			},

			//获取产品详情数据
			goodslist() {
				this.front_image_long = false
				homeservice.queryList({
					s: 'Product.detail',
					id: this.data.goods_id
				}).then(result => {
					this.titlename = result.alias_name //修改头部名称
					/*homeservice.newqueryList({
						s:'Product.getDat'
					}).then(result => { */
					//this.data.goods_id = result.id // 商品id
					//this.queryPage.goods_category_id = result.goods_category_id //星形接口列表增加，产品分类参数
					//读取背景图
					uni.getImageInfo({
						src: result.front_image_old,
						success: (front_image) => {
							// this.data.bgHeight = (front_image.height + 600) * (this.data.bgWidth / front_image.width) // 画布高度
							this.data.bgHeight = this.data.bgHeight // 画布高度
							this.editory = (this.data.bgHeight - (result.design_height * this.data
								.pixelRate)) / 2; //辅助线距离
							this.data.editorWidth = result.design_width * this.data.pixelRate // 设计宽度
							this.data.editorHeight = result.design_height * this.data.pixelRate // 设计高度
							this.editor_top = this.data.editorHeight * Number(this
								.location_scale) //辅助线距离
							this.design_widthrate = (result.design_width / result
								.print_width) // 设计区放大宽度比率
							this.design_heightrate = (result.design_height / result
								.print_height) // 设计区放大高度比率
							this.front_image_long = true
						}
					})


					console.log("this.data.bgHeight=" + this.data.bgHeight);
					this.data.bgImage = result.front_image // 背景图
					this.data.bgImage_old = result.front_image_old // 旧背景图
					this.data.bgImage_thumbnail = result.thumbnail // 介绍图片（主图遮罩）
					this.design_color = result.design_color // 背景颜色
					this.mix_scale = result.mix_scale //上传图片比率
					this.design_height = result.design_height // 设计高度
					this.design_width = result.design_width // 设计宽度
					this.print_height = result.print_height // 设计基础宽度
					this.print_width = result.print_width // 设计基础高度
					this.center_scale = result.center_scale //设计器中心点位置对应底图高度占比（居中=0.5）
					this.location_scale = result.location_scale //参考线中心点对应设计器高度占比（居中=0.5）
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});
			},
			category() {

				//查询贴图分类 key=0贴图
				homeservice.queryList({
					s: 'Material.category',
					machine_id: this.machine_id,
					key: 0,
				}).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: "最新"
					}, )
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				});

				//查询壁纸分类 key=1壁纸
				homeservice.queryList({
					s: 'Material.category',
					machine_id: this.machine_id,
					key: 1,
				}).then(result => {
					console.log("壁纸")
					this.wallpaper_category = result
					this.wallpaper_category.unshift({
						icon: "../../static/image/icon_new_default.png",
						icon_click: "../../static/image/icon_new_pressed.png",
						title: "最新"
					}, )

				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				});

				/* homeservice.queryList({
					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.queryList({
					s: 'Material.category',
					'machine_id': this.machine_id || null
				}).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: "最新"
					}, )
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				}); */
			},


			itemlongtap(e) { //长按事件
				var item = items[index]; // 获取当前选中的部件
				// if(!this.isRotate && this.system_config.golf_diy.value == 1){
				// 	if (item.type != 1) {
				// 		this.$nextTick(() => {
				// 			this.$refs['replacebottom'].open()
				// 		})
				// 	}
				// }
			},
			itemTouchStart: infoListTouchEvent.start.bind(infoListTouchEvent),
			itemTouchMove: infoListTouchEvent.move.bind(infoListTouchEvent),
			itemTouchEnd: infoListTouchEvent.end.bind(infoListTouchEvent),
			itemTouchCancel: infoListTouchEvent.cancel.bind(infoListTouchEvent)
		},
		onLoad(options) {
			// machine_id=100036&key=2
			// console.log(options)
			items = []
			this.data.goods_id = options.good_id;
			//console.log("this.data.goods_id="+options.good_id)
			let that = this;
			wx.createSelectorQuery().select('.delete-wrap').boundingClientRect(function(rect) {
				if (rect != null) {
					that.setData({
						deleteTop: rect.top,
					})
				} else {
					that.setData({
						deleteTop: 500,
					})
				}
			}).exec();
			this.infoListTouchEvent = infoListTouchEvent;
			this.infoListTouchEvent.bind({
				doubleTap: function(e) {
					this.isShowGif = false;
					if (items[index].type == 0) {
						that.state = true
						that.$refs.index.init();
					}
				},
				tap: function(e) {
					 if (items == null || items.length == 0) {
						that.active = false;
						that.guide_left = false
					} else { 
						that.isShowGif = false;
						var curTime = e.timeStamp
						var lastTime = e.currentTarget.dataset
							.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据
						if (curTime - lastTime > 0) {
							if (curTime - lastTime < 300) { //是双击事件
								if (items[index].type == 0) {
									that.state = true
									that.$refs.index.init();
								}
							} else {
								// 点击选中部件
								that.itemClick(e);
							}
						}
						that.lastTapTime = curTime
					 } 
				},
				touchStart: function(e) {
					that.isRotate = e.touches.length > 1;
					that.dragStart(e);
					//底部删除框出现动画
					that.animation.bottom(0).step()
					that.setData({
						animationData: that.animation.export()
					})
					that.deleteWrap = false
				},
				touchEnd: function(e) {
					that.dragEnd(e)
					let item = items[index];
					if (item.scale != 1) {
						// 初始化的位置
						drag.initPosscale(item)
						drag.getTransferPositionangle(item.left, item.top, item.width, item.height, item.angle,
							item.centerPos, item)
						// 缩放
						item.scale = 1;
						item.lastScale = 1
						// //图片放大响应的右下角按钮同比缩小
						item.oScale = 1 / item.scale;
					}
					//底部删除框出现动画
					that.animation.bottom(-100).step()
					that.setData({
						animationData: that.animation.export()
					})
					if (that.deleteWrap == true) {
						//that.deleteItem()
						that.removedeleteItem();
						that.deleteWrap = false
					}
				},
				touchCancel: function(e) {

					that.isShowGif = false;
				
					that.$refs['textsettingsshare'].close()
					if (items.length > 0) {
						let item = items[index];
						item.active = false
						item.activeguide = false //辅助线
						item.activescale = false // 旋转状态
						item.activeedge = false // 边状态
						that.data.itemList = items
						that.data.listActive = false
						that.active = false
						that.guide_left = false;
						that.deleteWrap = false
						that.animation.bottom(-100).step()
						that.setData({
							animationData: that.animation.export()
						})
					}

				}.bind(this),
				rotate: function(e) { //双指缩放
					let item = items[index];
					if (item.support_zoom == 0) return; // 0不支持缩放，1时支持缩放
					var oldWidth = (item.width * item.scale) * e.scale
					if (oldWidth > 1000) {
						return;
					}
					var newScale = Math.max(e.scale * item.lastScale, .01);
					newScale || (newScale = item.lastScale);
					// 角度
					item.rotate += e.angle;
					item.angle = item.rotate;
					// 缩放
					item.scale = newScale;
					// //图片放大响应的右下角按钮同比缩小
					item.oScale = 1 / item.scale;
					item.active = false //辅助线
					item.activeguide = true //开启辅助线
					item.activescale = false // 旋转状态
					item.activehorn = false // 角状态
					item.activeedge = false // 边状态
					//赋值setData渲染
					this.data.itemList = items
				}.bind(this),
				pressMove: function(e) { //拖拽中
					let item = items[index];
					if (item.support_drag == 0) return; // 0不支持拖动，1支持拖动
					if (!that.isRotate) {
						that.dragMove(e);
					}
				}
			})
			//console.log("machine_id="+options.machine_id);
			//获取屏幕宽高
			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) // 画布高度 高度比率 * (861 / 1196)
					that.data.pixelRate = pixelRate // 屏幕宽度比率
					//if(options.machine_id != undefined) { // 判断是从设备进来
					that.machine_id = options.machine_id || null // 设备id
					that.queryPage.machine_id = options.machine_id || null // 设备id
					//that.data.goods_id = 100 // 商品id
					that.key = 2
					that.goodslist() // 获取产品详情数据
					//}
					that.category() // 作品分类 贴图分类	
				}
			})
		},
		onShow() {
			var _this = this
			wx.request({
				url: _this.$Env.getDevBaseURL() + '/api/system_config/detail',
				method: 'GET',
				data: {},
				success: function(res) {
					_this.system_config = res.data.data
				}
			})
			var animation = wx.createAnimation({
				duration: 1000,
				timingFunction: 'ease',
			})
			this.animation = animation
			// 壁纸广告KEY：diy_back，贴纸广告KEY：diy_banner
			homeservice.queryList({
				s: 'Ad.list',
				ad_position_key: 'diy_back',
				machine_id: this.machine_id
			}).then(result => {
				this.diy_backList = result
			}).catch(err => {});
			// 贴纸广告KEY：diy_banner
			homeservice.queryList({
				s: 'Ad.list',
				ad_position_key: 'diy_banner',
				machine_id: this.machine_id
			}).then(result => {
				this.diy_bannerList = result
			}).catch(err => {});
		},
		onUnload() { // 卸载程序
			items = []; // 当前显示的图片列表
			index = 0; // 所点击的图片的索引
			snapshot = []; // 操作历史记录
			snapshotIndex = -1;
			homeservice.setSnapshot(items)
		}
	};
</script>

<style lang="scss">
	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%;
		//height: calc(100% - 150upx);
		/* height: calc(100% - 80upx); */
		/* padding-top: 80upx; */
		/* margin-top: 100upx; */
		// justify-content: center;
	}

	/* 部件列表和部件操作列表 */
	.item-list,
	.operate-list {
		width: 240rpx;
		height: 340rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		// bottom:0;
		margin: auto;
	}

	.item-list {
		overflow: hidden;
	}

	.item-text {
		font-family: '思源黑体 CN';
	}

	.list-active {
		// outline: #ccc solid 1px;
	}

	.item-box {
		position: absolute;
	}

	.active {
		// outline: 0.5upx solid #4EE2AE;
	}

	/* 删除、缩放、旋转操作按钮 */
	.rotate,
	.rotate-red,
	.scale,
	.close {
		width: 28px;
		height: 28px;
		position: absolute;
		z-index: 99;
		cursor: pointer;
	}

	.rotate {
		background-image: url(../../static/icon/icon_refresh.png);
		background-size: 100%;
		right: 0;
		left: 0;
		margin: auto;
	}

	.rotate-red {
		background-image: url(../../static/icon/icon_refresh_red.png);
		background-size: 100%;
		right: 0;
		left: 0;
		margin: auto;
	}

	.scale {
		background-image: url(../../static/icon/icon_zoom.png);
		background-size: 100%;
		transform-origin: center;
	}

	.frame-left-top-wrap {
		position: absolute;
		z-index: 100;
		width: 60upx;
		height: 60upx;
		left: -30upx;
		top: -30upx;
	}


	.frame-left-top {
		position: absolute;
		z-index: 100;
		width: 30upx;
		height: 30upx;
		left: 24upx;
		top: 24upx;
		border-left: 6upx solid #5CE6B5;
		border-top: 6upx solid #5CE6B5;
	}

	.frame-left-top::after,
	.frame-right-top::after,
	.frame-left-bottom::after,
	.frame-right-bottom::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		transform: scale(1.5);
	}

	.frame-right-top-wrap {
		position: absolute;
		z-index: 100;
		width: 60upx;
		height: 60upx;
		right: -30upx;
		top: -30upx;
	}

	.frame-right-top {
		position: absolute;
		z-index: 100;
		width: 30upx;
		height: 30upx;
		right: 24upx;
		top: 24upx;
		border-right: 6upx solid #5CE6B5;
		border-top: 6upx solid #5CE6B5;
	}

	.frame-left-bottom-wrap {
		position: absolute;
		z-index: 100;
		width: 60upx;
		height: 60upx;
		left: -30upx;
		bottom: -30upx;
	}

	.frame-left-bottom {
		position: absolute;
		z-index: 100;
		width: 30upx;
		height: 30upx;
		left: 24upx;
		bottom: 24upx;
		border-left: 6upx solid #5CE6B5;
		border-bottom: 6upx solid #5CE6B5;
	}

	.frame-right-bottom-wrap {
		position: absolute;
		z-index: 100;
		width: 60upx;
		height: 60upx;
		right: -30upx;
		bottom: -30upx;
	}

	.frame-right-bottom {
		position: absolute;
		z-index: 100;
		width: 30upx;
		height: 30upx;
		right: 24upx;
		bottom: 24upx;
		border-right: 6upx solid #5CE6B5;
		border-bottom: 6upx solid #5CE6B5;
	}

	// 四边
	.left_edge-wrap {
		position: absolute;
		z-index: 99;
		left: -30upx;
		width: 40upx;
		height: 100%;
		top: 0;
		background: transparent;
	}


	.left_edge {
		position: absolute;
		z-index: 99;
		left: 4upx;
		/* width: 6upx; */
		height: 40upx;
		/* background: #5CE6B5; */
		top: calc(50% - 20upx);
	}

	.left_edge::after,
	.rightedge::after,
	.topedge::after,
	.bottomedge::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		transform: scale(2);
	}

	.rightedge-wrap {
		position: absolute;
		z-index: 99;
		right: -30upx;
		width: 40upx;
		height: 100%;
		background: transparent;
		top: 0;
	}

	.rightedge {
		position: absolute;
		z-index: 99;
		right: 4upx;
		/* 	width: 6upx; */
		height: 40upx;
		/* 	background: #5CE6B5; */
		top: calc(50% - 20upx);
	}

	.topedge-wrap {
		position: absolute;
		z-index: 99;
		top: -30upx;
		width: 100%;
		height: 40upx;
		background: transparent;
		left: 0;
		right: 0;
		margin: auto;
	}

	.topedge {
		position: absolute;
		z-index: 99;
		top: 4upx;
		width: 40upx;
		/* 	height: 6upx;
		background: #5CE6B5; */
		left: 0;
		right: 0;
		margin: auto;
	}

	.bottomedge-wrap {
		position: absolute;
		z-index: 99;
		bottom: -30upx;
		width: 100%;
		height: 40upx;
		background: transparent;
		left: 0;
		right: 0;
		margin: auto;
	}

	.bottomedge {
		position: absolute;
		z-index: 99;
		bottom: 4upx;
		width: 40upx;
		/* 	height: 6upx;
		background: #5CE6B5; */
		left: 0;
		right: 0;
		margin: auto;
	}

	// 上一步、下一步按钮
	.operation {
		display: flex;
		justify-items: center;
		align-items: center;
		z-index: 99;
		position: fixed;
		bottom: 120upx;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.operation_top {
		overflow: hidden;
		width: 89upx;
		height: 88upx;
		border-radius: 50%;
	}

	.operation_bottom {
		overflow: hidden;
		width: 89upx;
		height: 88upx;
		border-radius: 50%;
	}

	.operation_icon {
		font-size: 40upx;
		line-height: 100upx;
		display: block;
		text-align: center;
	}

	.toolLeft {
		position: fixed;
		top: 400upx;
		left: 0;
		width: 100upx;

		.tool_li {
			width: 100%;
			height: 100upx;

			.tool_li_img {
				width: 40upx;
				height: 40upx;
				display: block;
				margin: auto;
			}

			// .tool_li_text {
			// 	text-align: center;
			// 	color: #FFFFFF;
			// 	font-size: 15upx;
			// 	margin-top: 10upx;
			// }
		}
	}

	// 底部工具栏
	.toolRight {
		position: fixed;
		top: 220upx;
		right: 0;
		width: 120upx;
		z-index: 99;

		.tool_li {
			width: 100%;
			height: 115upx;

			.tool_li_img {
				width: 53upx;
				height: 48upx;
				display: block;
				margin: auto;
			}

			.tool_li_text {
				text-align: center;
				color: #333333;
				font-size: 22upx;
				margin-top: 10upx;
			}
		}
	}

	.toolBottom {
		position: fixed;
		bottom: 0;
		z-index: 1000;
		// width: 100%;
		display: flex;
		align-items: center;
		height: 98upx;
		right: 0;
		// 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: 207upx;
			background: #F29F3D;
			line-height: 98upx;
			text-align: center;
			color: #FFFFFF;

			box-shadow: 0upx 0upx 16upx 0upx rgba(0, 0, 0, 0.08);
			border-radius: 49upx 50upx 0upx 49upx;

			font-size: 36upx;
			font-weight: 500;
			color: #FFFFFF;
			margin-left: auto;
			/* 	box-shadow: 0 0 16upx 0 rgba(0, 0, 0, 0.08);
			border-radius: 60upx 0 0 5upx; */
		}

		.grey {
			background: #8F8F94 !important;
		}
	}

	// 底部工具栏
	.tool {
		position: fixed;
		bottom: 0;
		z-index: 1000;
		width: 100%;
		display: flex;
		align-items: center;
		height: 160upx;
		background: #292933;

		.tool_li {
			width: 25%;

			.tool_li_img {
				width: 44upx;
				height: 40upx;
				display: block;
				margin: auto;
			}

			.tool_li_text {
				text-align: center;
				color: #FFFFFF;
				font-size: 22upx;
				margin-top: 10upx;
			}
		}

		.tool_add {
			width: 210upx;
			background: #F56364;
			line-height: 160upx;
			text-align: center;
			color: #FFFFFF;
			font-size: 36upx;
			font-weight: 500;
		}

		.grey {
			background: #8F8F94 !important;
		}
	}

	.tooltext {
		position: fixed;
		bottom: 0;
		z-index: 1000;
		width: 100%;
		display: flex;
		align-items: center;
		height: 160upx;
		background: #292933;

		.tooltext_li {
			width: 25%;

			.tooltext_li_image {
				width: 50upx;
				height: 50upx;
				display: block;
				margin: auto;
			}

			.tooltext_li_text {
				text-align: center;
				color: #FFFFFF;
				font-size: 22upx;
				margin-top: 10upx;
			}
		}
	}

	/* 底部分享 */
	.uni-share {
		position: relative;
		display: flex;
		flex-direction: column;
		z-index: 9999;
	}

	// 分类
	.scroll-container {
		box-sizing: border-box;
		white-space: nowrap;

		.scroll-item {
			text-align: center;
			height: 80upx;
		}
	}

	.material-series-scroll-item {
		text-align: center;
		padding: 10upx 20upx;
		color: #FFFFFF;
		background: #000;
		border-radius: 40upx;
		float: left;
		margin: 0 10upx 5upx;
		font-size: 21upx;
	}

	.material-series-scroll-item-active {
		background: #864BC3;
	}

	// 尺码
	.size {
		width: 85upx;
		height: 85upx;
		background: #1E1E2A;
		text-align: center;
		line-height: 85upx;
		color: #888888;
		border-radius: 5upx;
		margin-right: 26upx;
		border: 1upx solid #1E1E2A;
		font-size: 32upx;
	}

	.sizeactive {
		background: #EF6262 !important;
		border: 1upx solid #EF6262 !important;
		color: #FFFFFF !important;
	}

	// placeholder属性
	.place-holder {
		color: #FFFFFF;
		font-size: 40upx !important;
	}

	// 删除
	.delete-wrap {
		width: 100%;
		height: 80px;
		text-align: center;
		font-size: 38rpx;
		background: red;
		color: #fff;
		// position: absolute;
		position: fixed;
		bottom: -80px;
		z-index: 999999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.delete-wrap-active {
		box-shadow: 0 0 15px #FFFFFF;
	}
</style>
