<template>
	<div class="christmasCardCAll" :key="timer" @click="hiddenBoederClick()">
		<div class="topDivAll"></div>
		<div class="centerDiv" ref="centerDivRef" :style="'backgroundImage: url(' + centerDivBg + ');'">
			<div class="rulePrizeDivAll" v-if="step == '1' || step == '2'">
				<div class="ruleDiv" @click.stop="ruleClick()"></div>
				<div class="prizeDiv" @click.stop="openPizePopUp()"></div>
			</div>

			<div v-if="step == '1'">
				<div class="openAndNumDivAll">
					<div class="openDiv" @click.stop="openSupriseClick()"></div>
					<div class="numDiv" @click.stop="getDoChangeClick()"></div>
				</div>

				<div class="wishDivAll"><div class="wish" @click.stop="myWishClick()"></div></div>
			</div>

			<div v-if="step == '2'">
				<div class="goDoWishDivAll"><div class="goDoWishDiv" @click.stop="goDoWishClick()"></div></div>
				<div class="wishDivAll2"><div class="wish2" @click.stop="myWishClick()"></div></div>
			</div>

			<div v-if="step == '3'" class="stepDivAll3">
				<div class="backBtnDiv" @click.stop="backClick(24)"></div>
				<div class="wishBgDivAll" ref="wishBgRef">
					<img class="wzImage" :src="wzImageUrl" />
					<div class="psSelectImg" v-if="psSelectListData.length >= 1">
						<div
							v-show="showborder1"
							class="borderDiv"
							:style="{
								width: (psSelectListData[0].width) + 'rem',
								
								transform:
									'translate(' +
									psSelectListData[0].posX +
									'rem,' +
									psSelectListData[0].posY +
									'rem) translateZ(0px) scale(' +
									psSelectListData[0].dis +
									')  rotate(' +
									psSelectListData[0].angle +
									'deg)'
							}"
						>
							<div class="addDiv" @click.stop="operClick(1, 0)">
								<img src="//img10.360buyimg.com/imgzone/jfs/t1/31493/29/18685/1927/639024d6E68d2636f/331345d0434ddf5f.png" />
							</div>
							<div class="reduceDiv" @click.stop="operClick(2, 0)">
								<img src="//img10.360buyimg.com/imgzone/jfs/t1/7470/36/19708/1467/639024d6E7c22eaf7/f8b057499f8be467.png" />
							</div>
							<div class="rotateDiv" @click.stop="operClick(3, 0)">
								<img src="//img10.360buyimg.com/imgzone/jfs/t1/57584/16/22528/3941/639024dfE8cb726b9/c576e1e3f87141c4.png" />
							</div>
						</div>
						<img
							v-if="psSelectListData.length >= 1"
							ref="wishImgRef0"
							:src="psSelectListData[0].imageUrl"
							@touchstart.stop.prevent="touchstart($event, 0)"
							@touchmove.stop.prevent="touchmove($event, 0)"
							:style="{
								zIndex: psSelectListData[0].zindex,
								width: psSelectListData[0].width + 'rem',
								height: psSelectListData[0].height + 'rem',
								transform:
									'translate(' +
									psSelectListData[0].posX +
									'rem,' +
									psSelectListData[0].posY +
									'rem) translateZ(0px) scale(' +
									psSelectListData[0].dis +
									')  rotate(' +
									psSelectListData[0].angle +
									'deg)'
							}"
						/>
					</div>
					<div class="psSelectImg" v-if="psSelectListData.length >= 2">
						<div
							v-show="showborder2"
							class="borderDiv"
							:style="{
								width: psSelectListData[1].width + 'rem',
								
								transform:
									'translate(' +
									psSelectListData[1].posX +
									'rem,' +
									psSelectListData[1].posY +
									'rem) translateZ(0px) scale(' +
									psSelectListData[1].dis +
									')  rotate(' +
									psSelectListData[1].angle +
									'deg)'
							}"
						>
							<div class="addDiv" @click.stop="operClick(1, 1)">
								<img src="//img10.360buyimg.com/imgzone/jfs/t1/31493/29/18685/1927/639024d6E68d2636f/331345d0434ddf5f.png" />
							</div>
							<div class="reduceDiv" @click.stop="operClick(2, 1)">
								<img src="//img10.360buyimg.com/imgzone/jfs/t1/7470/36/19708/1467/639024d6E7c22eaf7/f8b057499f8be467.png" />
							</div>
							<div class="rotateDiv" @click.stop="operClick(3, 1)">
								<img src="//img10.360buyimg.com/imgzone/jfs/t1/57584/16/22528/3941/639024dfE8cb726b9/c576e1e3f87141c4.png" />
							</div>
						</div>
						<img
							v-if="psSelectListData.length >= 2"
							ref="wishImgRef1"
							:src="psSelectListData[1].imageUrl"
							@touchstart.stop.prevent="touchstart($event, 1)"
							@touchmove.stop.prevent="touchmove($event, 1)"
							:style="{
								zIndex: psSelectListData[1].zindex,
								width: psSelectListData[1].width + 'rem',
								height: psSelectListData[1].height + 'rem',
								transform:
									'translate(' +
									psSelectListData[1].posX +
									'rem,' +
									psSelectListData[1].posY +
									'rem) translateZ(0px) scale(' +
									psSelectListData[1].dis +
									')  rotate(' +
									psSelectListData[1].angle +
									'deg)'
							}"
						/>
					</div>
					<div class="psSelectImg" v-if="psSelectListData.length >= 3">
						<div
							v-show="showborder3"
							class="borderDiv"
							:style="{
								width: psSelectListData[2].width + 'rem',
								
								transform:
									'translate(' +
									psSelectListData[2].posX +
									'rem,' +
									psSelectListData[2].posY +
									'rem) translateZ(0px) scale(' +
									psSelectListData[2].dis +
									')  rotate(' +
									psSelectListData[1].angle +
									'deg)'
							}"
						>
							<div class="addDiv" @click.stop="operClick(1, 2)">
								<img src="//img10.360buyimg.com/imgzone/jfs/t1/31493/29/18685/1927/639024d6E68d2636f/331345d0434ddf5f.png" />
							</div>
							<div class="reduceDiv" @click.stop="operClick(2, 2)">
								<img src="//img10.360buyimg.com/imgzone/jfs/t1/7470/36/19708/1467/639024d6E7c22eaf7/f8b057499f8be467.png" />
							</div>
							<div class="rotateDiv" @click.stop="operClick(3, 2)">
								<img src="//img10.360buyimg.com/imgzone/jfs/t1/57584/16/22528/3941/639024dfE8cb726b9/c576e1e3f87141c4.png" />
							</div>
						</div>
						<img
							v-if="psSelectListData.length >= 3"
							ref="wishImgRef2"
							:src="psSelectListData[2].imageUrl"
							@touchstart.stop.prevent="touchstart($event, 2)"
							@touchmove.stop.prevent="touchmove($event, 2)"
							:style="{
								zIndex: psSelectListData[2].zindex,
								width: psSelectListData[2].width + 'rem',
								height: psSelectListData[2].height + 'rem',
								transform:
									'translate(' +
									psSelectListData[2].posX +
									'rem,' +
									psSelectListData[2].posY +
									'rem) translateZ(0px) scale(' +
									psSelectListData[2].dis +
									')  rotate(' +
									psSelectListData[2].angle +
									'deg)'
							}"
						/>
					</div>
				</div>
				<div class="saveWishDivAll" @click.stop="saveWishImgClick()"></div>
				<div :class="['wishDataDivAll', wishTitleType == '1' ? 'wishDataDivAll' : 'wishDataDivAll2']">
					<div class="titleDivAll">
						<div :class="['leftTitleDiv', wishTitleType == '1' ? 'selectTitleDiv' : '']" @click.stop="wistSelect('1')">心愿袜样式</div>
						<div :class="['rightTitleDiv', wishTitleType == '2' ? 'selectTitleDiv' : '']" @click.stop="wistSelect('2')">个性配饰</div>
					</div>

					<div class="wzListData" v-if="wishTitleType == '1'">
						<div
							v-for="(item, index) in wzListData"
							:key="index"
							@click="wzItemClick(item, index)"
							:class="['wzItemData', wzSelectIndex == index ? 'wzSelectDiv' : '']"
						>
							<img :src="item.imageUrl" />
						</div>
					</div>

					<div class="psListData" v-if="wishTitleType == '2'">
						<div class="psItemDataAll" @scroll="scrollRuleEvent">
							<div
								class="psItemData"
								v-for="(item, index) in accessoriesListData"
								:key="index"
								@click.stop="psSelectClick(item, index)"
								:class="['wzItemData', item.select ? 'psSelectDiv' : '']"
							>
								<img :style="{ width: item.width + 'rem', height: item.height + 'rem' }" :src="item.imageUrl" />
							</div>
						</div>

						<div class="__rule_pops_scroll_line cc_abs"><div class="cc_abs" :style="{ marginLeft: `${ruleScrollTransform}%` }"></div></div>
					</div>
				</div>
			</div>

			<div v-if="step == '4'" class="stepDivAll4">
				<div class="backBtnDiv" @click.stop="backClick(4)"></div>
				<div class="letterBg"></div>
				<div class="letterContent">
					<img class="wishImageDiv" :src="wishImageUrl" />
					<div class="wishTextarea">
						<!-- :style="'height:' + textAreaHeight + 'rem'" -->
						<textarea ref="textareaRef" maxlength="1000" v-model="wishContent" placeholder="写下您的心愿祝福吧~ "></textarea>
					</div>
				</div>
				<div class="letterFont"></div>
				<div class="bottomBtnDiv">
					<div class="backBtnDiv1" @click.stop="backClick(4)"></div>
					<div class="finishBtnDiv" @click.stop="finishWishClick()"></div>
				</div>
			</div>

			<div v-if="step == '8' && isShowTaskDetailPop" class="stepDivAll8">
				<div class="topDiv">
					<div class="backBtnDiv" @click.stop="backClick(9)"></div>
					<div class="ruleAndPrizeDiv">
						<div class="ruleDiv" @click.stop="ruleClick()"></div>
						<div class="myPrizeDiv" @click.stop="openPizePopUp()"></div>
					</div>
				</div>

				<taskDetailPop></taskDetailPop>
				<div class="wishDivAll2"><div class="wish2" @click.stop="myWishClick()"></div></div>
			</div>
		</div>

		<div class="bottomDiv"></div>

		<div class="bottomDiv"></div>
		<popUp :popData="popData" v-if="show" @closePop="backClick"></popUp>
		<sharePop v-if="isShowSharePop" :chance="chance" :sourse="sourse" @closePop="backClick" :christmasCardId="christmasCardId" :uid="uid"></sharePop>
		<taskPop v-if="isShowTaskPop" @closePop="backClick" @getNeed="getNeed"></taskPop>
		<rulePop v-if="isShowRulePop" @closePop="backClick"></rulePop>
		<getWishPop v-if="isShowGetWishPop" @closePop="backClick" :christmasCardId="christmasCardId"></getWishPop>
		<winPopUp v-if="winShow" @closePop="backClick"></winPopUp>
		<taskPopUp v-if="taskShow" @closePop="backClick" :addNeed="need"></taskPopUp>
	</div>
</template>
<script>
//引入alloyfinger
import AlloyFinger from 'alloyfinger';

import html2canvas from 'html2canvas';
import sharePop from '../components/sharePop.vue';
import popUp from '../components/popUp.vue';
import taskPop from '../components/taskPop.vue';
import taskDetailPop from '../components/taskDetailPop.vue';
import rulePop from '../components/rulePop.vue';
import getWishPop from '../components/getWishPop.vue';
import winPopUp from '../components/wnPopUp.vue';
import taskPopUp from '../components/taskPopUp.vue';
import apis from '../api/api.js';
let { activity, check, saveWin, uploadImage, getTaskList, task, saveLog } = apis;
import { toastPopComService } from '../../../../util/comCreate.js';
var QRCode = require('qrcode');
export default {
	components: {
		sharePop,
		popUp,
		taskPop,
		taskDetailPop,
		rulePop,
		getWishPop,
		winPopUp,
		taskPopUp
	},
	watch: {
		wishContent(nv, ov) {
			if (nv === ov) {
				return;
			}
			this.wishContent = nv;
			// console.log('value changed');
			this.changeHeight();
		}
	},

	data() {
		return {
			textAreaHeight: 'auto', //祝福语默认高度
			timer: new Date().getTime(),
			step: '', //1001打开他的心愿祝福 1 活动主页 2引导页 3 制作业 4 心愿袜完成写祝福 5分享弹窗 6diy次数不足弹窗提示 7 任务弹窗 8 任务明细
			centerDivBg: '', //中间部分背景图
			wishTitleType: '1', //1 心愿袜样式 2个性配饰
			wzListData: [
				{
					imageUrl: '//img10.360buyimg.com/imgzone/jfs/t1/109643/38/33247/65347/638feb6cEe9fbc1b2/3e90d98ca60ed203.png'
				},
				{
					imageUrl: '//img10.360buyimg.com/imgzone/jfs/t1/160617/13/33756/75145/638feb6cE85a5daff/29ffa7b522d65bf3.png'
				},
				{
					imageUrl: '//img10.360buyimg.com/imgzone/jfs/t1/9728/24/20960/78695/638feb6cEc30098c7/7330511993544d66.png'
				}
			], //心愿袜样式

			wzSelectIndex: 0,
			wzImageUrl: '', //选中的袜子样式
			//配饰的数据
			accessoriesListData: [
				{
					id: 1,
					select: false,
					width: 1.16,
					height: 0.79,
					posX: 0, //X轴移动距离
					posY: 0, //Y轴移动距离
					dis: 1, //缩放倍数
					angle: 0, //旋转角度
					imageUrl: '//img10.360buyimg.com/imgzone/jfs/t1/205665/35/28635/16004/637b3be9Ee9b5cfe8/c1a497db22488b16.png'
				},
				{
					id: 2,
					select: false,
					width: 1.02,
					height: 0.97,
					posX: 0.01, //X轴移动距离
					posY: 0.01, //Y轴移动距离
					dis: 1, //缩放倍数
					angle: 0, //旋转角度
					imageUrl: '//img10.360buyimg.com/imgzone/jfs/t1/65654/25/20163/11337/637b3be9E0ade85a4/a0526344d3332c5f.png'
				},
				{
					id: 3,
					select: false,
					width: 1.04,
					height: 1.0,
					// posX: 0, //X轴移动距离
					// posY: 0, //Y轴移动距离
					dis: 1, //缩放倍数
					angle: 0, //旋转角度
					imageUrl: '//img10.360buyimg.com/imgzone/jfs/t1/152653/40/29036/8551/63858060E026d8ec1/18c5731c9385c964.png'
				},
				{
					id: 4,
					select: false,
					width: 0.96,
					height: 0.93,
					// posX: 0, //X轴移动距离
					// posY: 0, //Y轴移动距离
					dis: 1, //缩放倍数
					angle: 0, //旋转角度
					imageUrl: '//img10.360buyimg.com/imgzone/jfs/t1/120458/27/32098/10086/63847728Ee9819327/69ef8ab6f93ff537.png'
				},
				{
					id: 5,
					select: false,
					width: 0.82,
					height: 1.01,
					// posX: 0, //X轴移动距离
					// posY: 0, //Y轴移动距离
					dis: 1, //缩放倍数
					angle: 0, //旋转角度
					imageUrl: '//img10.360buyimg.com/imgzone/jfs/t1/151480/25/29195/1563/63847728Ec5abd67d/f4ddd3ed245e94df.png'
				},
				{
					id: 6,
					select: false,
					width: 0.81,
					height: 0.81,
					// posX: 0, //X轴移动距离
					// posY: 0, //Y轴移动距离
					dis: 1, //缩放倍数
					angle: 0, //旋转角度
					imageUrl: '//img10.360buyimg.com/imgzone/jfs/t1/70329/38/24016/1345/63847728Ebeca4572/01730246e289d558.png'
				}
			],
			//已选择的配饰样式
			psSelectListData: [],

			//滚动条
			ruleTextTransform: 0,
			ruleScrollTransform: 0,
			wishImageUrl: '', //生成的心愿袜样式图片
			isShowSharePop: false, //是否显示分享弹框
			isShowTaskPop: false, //是否显示任务弹框
			isShowTaskDetailPop: false, //是否显示任务明细
			isShowRulePop: false, //是否显示活动规则
			isShowGetWishPop: false, //是否显示收到的心愿祝福弹框
			wishContent: '', //祝福语
			christmasCardId: '', //圣诞贺卡唯一标识
			chance: 1, //可以制作贺卡的次数
			uid: '', //分享shareUserId
			show: false, //是否显示公用弹框
			winShow: false, // 是否显示心愿弹窗
			taskShow: false, // 是否显示加购弹窗

			popData: {
				popUpTilte: false, // myPrize\hint\wish\upDateFail\
				popUpHeight: '7.26rem', // 大的7.26rem,小的4.36rem'
				text: '您还没心愿奖品哟~',
				addressText: false, // 地址弹窗
				popUptext: false, // 文字提示弹窗
				popUpTable: false, // 我的奖品
				memberText: false, //不是会员弹窗
				prizeWinning: false, // 中奖弹窗
				prizeFail: false, //带logo文字按钮弹窗
				prizeFailBut: 0 // 1是logo文字按钮弹窗两个按钮，2是完成任务按钮
			},
			need: '' ,//加购有礼加购几件送次数（3次）
			showborder1:false,//是否显示图片1的border
			showborder2:false,//是否显示图片2的border
			showborder3:false,//是否显示图片3的border
			
		};
	},
	created() {
		this.christmasCardId = sessionStorage.getItem('christmasCardId'); //'417'; //
		this.shareUserId = sessionStorage.getItem('shareUserId');

		this.initData();
		this.getTaskList();
		if (this.shareUserId) {
			this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/74217/36/24204/324692/6388118aE9e7323c3/60bebd751b83e003.png';
		} else {
			this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/128853/15/29134/190902/6388118aEde2fe0a6/92c91df9f87cc30c.png';
		}
	},
	mounted() {
		document.addEventListener('visibilitychange', this.handleVisiable);
	},
	destroyed() {
		document.removeEventListener('visibilitychange', this.handleVisiable);
	},
	methods: {
		hiddenBoederClick(){
			this.showborder1 = false;
			this.showborder2 = false;
			this.showborder3 = false;
		},
		//缩放旋转操作
		operClick(type, index) {
			console.log(type, '缩放旋转操作');
			if (type == 1) {
				console.log('增加缩放');
				if(this.psSelectListData[index].dis > 1.5){
					this.$toast('缩放达到最大值，无法再放大');
					return;
				}
				this.psSelectListData[index].dis = this.psSelectListData[index].dis + 0.1;
			} else if (type == 2) {
				console.log('减小缩放');
				
				if(this.psSelectListData[index].dis < 0.5){
					this.$toast('缩放达到最小值，无法再缩小');
					return;
				}
				this.psSelectListData[index].dis = this.psSelectListData[index].dis - 0.1;
			}
			if (type == 3) {
				console.log('旋转');
				this.psSelectListData[index].angle = this.psSelectListData[0].angle + 5;
			}
		},
		//监听直播次数事件
		handleVisiable(e) {
			//如果缓存中存在flag再执行判断visibilityState
			switch (e.target.visibilityState) {
				case 'visible':
					console.log('visible');
					if (window.taskCallback) {
						window.taskCallback();
						window.taskCallback = null;
					}
					// console.log('处于正常打开');
					break;
			}
		},
		initData() {
			activity(this.$route.query.activityId, '', data => {
				if(data.resp_code == '50002'){
					this.show = true;
					this.popData = {
						popUpTilte:"activityStatus",
						popUptext:true,
						prizeFail: false,
						text: '活动已结束',
						prizeFailBut: 4,
						popUpHeight: '4.36rem'
					};
					return;
				}else if(data.resp_code == '50003'){
					this.show = true;
					this.popData = {
						popUpTilte:"activityStatus",
						prizeFail: false,
						popUptext:true,
						text:'活动未开始',
						prizeFailBut: 4,
						popUpHeight: '4.36rem'
					};
					return;
				}
				sessionStorage.setItem('pin', data.data.pin);
				this.chance = data.data.chance;
				sessionStorage.setItem('chance', this.chance); //制作圣诞贺卡的机会
				this.uid = data.data.uid;
				// data.data.openCardStatus = 2;
				//埋点访问次数
				let param1 = {
					eleId: 'pv'
				};
				saveLog(param1, callbackData => {});

				if (data.data.openCardStatus == 2) {
					//未入会
					this.isShowGetWishPop = false;
					this.show = true;
					this.popData.memberText = true;
					return;
				}

				if (this.shareUserId) {
					//接收祝福者
					this.step = '1001';
					// this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/74217/36/24204/324692/6388118aE9e7323c3/60bebd751b83e003.png';
					this.isShowGetWishPop = true;
				} else {
					this.step = sessionStorage.getItem('step') ? sessionStorage.getItem('step') : '1';
					//如果在分享页面刷新页面则重新进入首页
					// if (this.step == '5') {
					this.step = '1';
					sessionStorage.setItem('step', '1');
					this.wishContent = '';
					this.sourse = null;
					// this.step = '5';
					// this.isShowSharePop = true;
					// this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/31575/40/19012/280922/6388118aE5a2c9891/e7eaff9702906fd0.png';
					// sessionStorage.setItem('step', '1');
					// }
					// if (this.step == '1') {
					// this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/128853/15/29134/190902/6388118aEde2fe0a6/92c91df9f87cc30c.png';

					// } else if (this.step == '2') {
					// 	this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/212632/37/23311/224835/6388118bE50414059/79b10ffc0d874394.png';
					// 	this.wishContent = '';
					// } else if (this.step == '3') {
					// 	this.wishContent = '';
					// 	this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/191931/14/31528/268823/6388118bE1177fea7/843a6830c553d685.png';

					// } else if (this.step == '4') {
					// 	this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/31575/40/19012/280922/6388118aE5a2c9891/e7eaff9702906fd0.png';
					// }
					this.wzImageUrl = this.wzListData[this.wzSelectIndex].imageUrl; //袜子样式默认第一个
				}
			});
		},
		//活动规则
		ruleClick() {
			this.sourse = null;
			this.isShowRulePop = true;
		},
		//获取滚动条滚动
		scrollRuleEvent(e) {
			this.ruleScrollTransform = (e.srcElement.scrollLeft / ((e.srcElement.scrollWidth - e.srcElement.clientWidth) / (1 - 50 / 262.0))) * 100;
			// console.log(this.ruleScrollTransform,'scrollRuleEvent');
		},

		//开启心愿惊喜
		openSupriseClick() {
			this.sourse = null;
			console.log('开启心愿惊喜');
			sessionStorage.setItem('step', '2');
			this.step = '2';
			this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/212632/37/23311/224835/6388118bE50414059/79b10ffc0d874394.png';
		},
		//获取更多次数
		getDoChangeClick() {
			this.sourse = null;
			console.log('获取更多次数');
			this.isShowTaskPop = true;
		},
		//开始制作心愿袜
		goDoWishClick() {
			this.sourse = null;
			console.log('开始制作心愿袜');
			this.chance = sessionStorage.getItem('chance');
			//清空已选择的配饰
			sessionStorage.removeItem('psSelectListData');
			sessionStorage.removeItem('wishImageUrl');
			this.psSelectListData = []; //已选择的样式为空
			this.wzSelectIndex = 0;
			this.wishTitleType = 1;
			this.wzImageUrl = this.wzListData[this.wzSelectIndex].imageUrl; //袜子样式默认第一个
			for (var i = 0; i < this.accessoriesListData.length; i++) {
				this.accessoriesListData[i].select = false;
			}

			if (this.chance == 0) {
				this.popData = {
					prizeFail: true,
					popUpHeight: '7.26rem',
					prizeFailBut: '2',
					text: '糟糕\n您已无剩余DIY次数~'
				};
				this.show = true;
				return;
			}
			sessionStorage.setItem('step', '3');
			this.step = '3';
			this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/191931/14/31528/268823/6388118bE1177fea7/843a6830c553d685.png';
		},
		//我的心愿袜
		myWishClick() {
			this.sourse = null;
			console.log('我的心愿袜');
			this.winShow = true;
		},
		//心愿袜选择 1 心愿袜样式 2个性配饰
		wistSelect(type) {
			this.wishTitleType = type;
			if (type == '1') {
				console.log('心愿袜样式 ');
			} else if (type == '2') {
				console.log('个性配饰');
			}
		},
		//袜子样式的选择
		wzItemClick(item, index) {
			console.log(index, '袜子样式的选择');
			this.wzSelectIndex = index;
			this.wzImageUrl = item.imageUrl;
		},
		//配饰选择
		psSelectClick(item, index) {
			console.log(index, 'indexindex');

			if (!this.wzImageUrl) {
				this.$toast('请选择心愿袜样式');
				return;
			}
			if (this.psSelectListData.length >= 3 && !item.select) {
				this.$toast('最多选择3种装饰品');
				return;
			}

			item.select = !item.select;

			if (item.select) {
				//选中样式
				item.posX = 0.5;
				item.posY = 0.1;
				this.psSelectListData = this.psSelectListData.concat(item);
				console.log(this.psSelectListData.length)
				if(this.psSelectListData.length == 1){
					this.showborder1 = true;
					this.showborder2 = false;
					this.showborder3 = false;
				}else if(this.psSelectListData.length == 2){
					this.showborder1 = false;
					this.showborder2 = true;
					this.showborder3 = false;
				}if(this.psSelectListData.length == 3){
					this.showborder1 = false;
					this.showborder2 = false;
					this.showborder3 = true;
				}
				console.log(this.showborder1,'this.showborder1');
				
			} else {
				//删除样式
				for (var j = 0; j < this.psSelectListData.length; j++) {
					if (this.psSelectListData[j].id == item.id) {
						// console.log(j, this.accessoriesListData[j].id);
						item.posX = 0;
						item.posY = 0;
						item.dis = 1; //缩放倍数
						item.angle = 0; //旋转角度
						this.psSelectListData.splice(j, 1);
					}
				}
			}
			// setTimeout(() => {
			// 	this.initImage(index);
			// }, 200);

			this.$forceUpdate();
			console.log(this.accessoriesListData, '选中配饰选择');
		},

		//返回修改 4 从祝福语返回制作页面修改 5从分享弹窗返回引导页面 6 diy次数不足提示 7 关闭任务弹窗 8关闭任务弹窗 查看任务明细 9 任务明细的返回关闭任务明细打开任务列表弹窗 10关闭活动规则弹窗 11我雅瑶DIY心愿袜子 24从制作业返回
		backClick(step) {
			console.log(step, '返回');
			// console.log(typeof(step), '返回');

			if (step == '4') {
				//从写祝福语返回到心愿袜制作
				this.wishContent = '';
				this.step = '3';
				sessionStorage.setItem('step', '3');
				this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/191931/14/31528/268823/6388118bE1177fea7/843a6830c553d685.png';

				this.psSelectListData = sessionStorage.getItem('psSelectListData') ? JSON.parse(sessionStorage.getItem('psSelectListData')) : [];

				for (var i = 0; i < this.accessoriesListData.length; i++) {
					for (var j = 0; j < this.psSelectListData.length; j++) {
						if (this.accessoriesListData[i].id == this.psSelectListData[j].id) {
							this.accessoriesListData[i].select = true;
						}
					}
				}
				console.log(this.psSelectListData, 'this.psSelectListData');
			} else if (step == '5') {
				//祝福语审核提示
				this.wishContent = '';
				this.step = '1';
				this.isShowSharePop = false;
				sessionStorage.setItem('step', '1');
				this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/128853/15/29134/190902/6388118aEde2fe0a6/92c91df9f87cc30c.png';
			} else if (step == '6') {
				this.show = true;
				this.popData = {
					prizeFail: true,
					text: '糟糕\n您已无剩余DIY次数~',
					prizeFailBut: 2,
					popUpHeight: '7.26rem'
				};
				//diy次数不足提示
			} else if (step == '7') {
				//任务弹窗
				this.isShowTaskPop = false;
				this.step = sessionStorage.getItem('step');
				if (this.step == '1') {
					this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/128853/15/29134/190902/6388118aEde2fe0a6/92c91df9f87cc30c.png';
					this.wishContent = '';
				} else if (this.step == '2') {
					this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/212632/37/23311/224835/6388118bE50414059/79b10ffc0d874394.png';
					this.wishContent = '';
				} else if (this.step == '4') {
					this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/31575/40/19012/280922/6388118aE5a2c9891/e7eaff9702906fd0.png';
					this.wishContent = '';
				} else if (this.step == '5') {
					this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/31575/40/19012/280922/6388118aE5a2c9891/e7eaff9702906fd0.png';
					this.wishContent = '';
				}
			} else if (step == '8') {
				//关闭任务弹窗 查看任务明细
				this.isShowTaskPop = false;
				this.isShowTaskDetailPop = true;
				this.isShowSharePop = false;
				this.step = '8';
				this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/74217/36/24204/324692/6388118aE9e7323c3/60bebd751b83e003.png';
			} else if (step == '9') {
				sessionStorage.removeItem('psSelectListData');
				this.psSelectListData = []; //已选择的样式为空
				this.wzSelectIndex = 0;
				this.wishTitleType = 1;
				this.wzImageUrl = this.wzListData[this.wzSelectIndex].imageUrl; //袜子样式默认第一个
				for (var i = 0; i < this.accessoriesListData.length; i++) {
					this.accessoriesListData[i].select = false;
				}
				this.wishContent = '';
				console.log(sessionStorage.getItem('step'), 'zxczxczxczxc');

				//关闭查看任务明细
				if (sessionStorage.getItem('step') == '5') {
					console.log('1111111111111');
					//分享页面打开的任务
					this.step = '5';
					sessionStorage.setItem('step', '5');
					this.isShowSharePop = true;
					this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/31575/40/19012/280922/6388118aE5a2c9891/e7eaff9702906fd0.png';
					this.isShowTaskPop = true;
					this.isShowTaskDetailPop = false;
				} else if (sessionStorage.getItem('step') == '2') {
					//引导页面打开的任务
					this.step = '2';
					sessionStorage.removeItem('wishImageUrl');
					sessionStorage.setItem('step', '2');
					this.isShowSharePop = false;
					this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/212632/37/23311/224835/6388118bE50414059/79b10ffc0d874394.png';
					this.wishContent = '';
					this.isShowTaskPop = true;
					this.isShowTaskDetailPop = false;
				} else {
					//首页打开的任务
					sessionStorage.removeItem('wishImageUrl');
					this.step = '1';
					sessionStorage.setItem('step', '1');
					this.isShowTaskPop = true;
					this.isShowTaskDetailPop = false;
				}
			} else if (step == '10') {
				this.isShowRulePop = false;
			} else if (step == '11') {
				sessionStorage.removeItem('psSelectListData');
				sessionStorage.removeItem('wishImageUrl');
				this.psSelectListData = []; //已选择的样式为空
				this.wzSelectIndex = 0;
				this.wishTitleType = 1;
				this.wzImageUrl = this.wzListData[this.wzSelectIndex].imageUrl; //袜子样式默认第一个
				for (var i = 0; i < this.accessoriesListData.length; i++) {
					this.accessoriesListData[i].select = false;
				}

				this.isShowGetWishPop = false;
				this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/128853/15/29134/190902/6388118aEde2fe0a6/92c91df9f87cc30c.png';
				this.step = '1';
				sessionStorage.setItem('step', '1');
			} else if (step == '12') {
				// 地址弹窗
				this.show = true;
				this.popData = {
					addressText: true,
					popUpHeight: '7.26rem'
				};
			} else if (step == '13') {
				// 实物中奖弹窗
				this.show = true;
				this.popData = {
					addressText: true,
					popUpHeight: '7.26rem',
					addressStatus: 3
				};
			} else if (step == '14') {
				// 保存贺卡修改文字
				this.step = '4';
				this.show = false;
				sessionStorage.setItem('step', '4');
			} else if (step == '15') {
				// 加购商品
				this.taskShow = true;
				this.isShowTaskPop = false;
			} else if (step == '16') {
				// 加购商品关闭
				this.taskShow = false;
				this.isShowTaskPop = true;
			} else if (step == '17') {
				// 抽奖
				this.show = true;
				this.popData = {
					draw: true
				};
			} else if (step == '18') {
				// 抽奖没中
				this.show = true;
				this.popData = {
					prizeFail: true,
					text: '很遗憾\n这次什么都没抽中',
					prizeFailBut: 1,
					popUpHeight: '7.26rem'
				};
			} else if (step == '19') {
				// 没中奖返回制作

				sessionStorage.removeItem('psSelectListData');
				sessionStorage.removeItem('wishImageUrl');
				this.psSelectListData = []; //已选择的样式为空
				this.wzSelectIndex = 0;
				this.wishTitleType = 1;
				this.wzImageUrl = this.wzListData[this.wzSelectIndex].imageUrl; //袜子样式默认第一个
				for (var i = 0; i < this.accessoriesListData.length; i++) {
					this.accessoriesListData[i].select = false;
				}

				this.wishContent = '';
				this.show = false;
				this.step = '1';
				this.isShowSharePop = false;
				sessionStorage.setItem('step', '1');
				this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/128853/15/29134/190902/6388118aEde2fe0a6/92c91df9f87cc30c.png';
			} else if (step == '20') {
				this.show = false;
				this.isShowTaskPop = true;
			} else if (step == '22') {
				this.show = false;
				this.chance = sessionStorage.getItem('chance'); //制作贺卡机会
				//没有抽奖机会
				if (this.chance > 0) {
					//有制作机会 进入制作页面
					sessionStorage.removeItem('psSelectListData');
					sessionStorage.removeItem('wishImageUrl');
					this.psSelectListData = []; //已选择的样式为空
					this.wzSelectIndex = 0;
					this.wishTitleType = 1;
					this.wzImageUrl = this.wzListData[this.wzSelectIndex].imageUrl; //袜子样式默认第一个
					for (var i = 0; i < this.accessoriesListData.length; i++) {
						this.accessoriesListData[i].select = false;
					}
					// console.log(this.chance,'ccccc');
					this.isShowSharePop = false;
					this.step = '3';
					sessionStorage.setItem('step', '3');
					this.wishContent = '';
					this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/191931/14/31528/268823/6388118bE1177fea7/843a6830c553d685.png';
				} else {
					//没有制作机会 打开任务弹窗
					this.isShowTaskPop = true;
				}
			} else if (step == '23') {
				this.checkWishText();
			} else if (step == '24') {
				this.step = '2';
				sessionStorage.setItem('step', '2');
				this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/212632/37/23311/224835/6388118bE50414059/79b10ffc0d874394.png';
				this.wishContent = '';
			} else if (step == '25') {
				//首页我的心愿袜
				this.step = '1';
				sessionStorage.setItem('step', '1');
				this.isShowSharePop = false;
				this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/128853/15/29134/190902/6388118aEde2fe0a6/92c91df9f87cc30c.png';
				this.isShowTaskPop = false;
				this.isShowTaskDetailPop = false;
				this.winShow = true;
			} else if (step == '26') {
				//引导页我的心愿袜子
				this.step = '2';
				sessionStorage.setItem('step', '2');
				this.isShowSharePop = false;
				this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/212632/37/23311/224835/6388118bE50414059/79b10ffc0d874394.png';
				this.isShowTaskPop = false;
				this.isShowTaskDetailPop = false;
				this.winShow = true;
			} else {
				let stepType = typeof step;
				if (stepType == 'object') {
					// let step = step.step;
					if (step.step == '21') {
						sessionStorage.removeItem('psSelectListData');
						this.psSelectListData = []; //已选择的样式为空
						this.wzSelectIndex = 0;
						this.wzImageUrl = this.wzListData[this.wzSelectIndex].imageUrl; //袜子样式默认第一个
						for (var i = 0; i < this.accessoriesListData.length; i++) {
							this.accessoriesListData[i].select = false;
						}

						//我的心愿的查看贺卡详情
						let itemData = step.itemData;
						this.step = 5;
						if (sessionStorage.getItem('step') == '1') {
							this.sourse = 'myWish1';
						} else if (sessionStorage.getItem('step') == '2') {
							this.sourse = 'myWish2';
						}

						sessionStorage.setItem('step', '5');
						let content = JSON.parse(itemData.content);
						sessionStorage.setItem('wishImageUrl', content.wishImageUrl);
						this.isShowSharePop = true;
						this.winShow = false;
						this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/31575/40/19012/280922/6388118aE5a2c9891/e7eaff9702906fd0.png';
						this.christmasCardId = itemData.id;
						this.chance = sessionStorage.getItem('chance');
					}
				} else {
					this.show = false;
					this.winShow = false;
				}
			}
			this.timer = new Date().getTime();
			// console.log(this.step, 'this.step');
		},
		//校验贺卡提示语
		checkWishText() {
			let content = JSON.stringify({ wishImageUrl: this.wishImageUrl, wishContent: this.wishContent });
			let paraam = {
				activityId: this.$route.query.activityId,
				content: this.wishContent,
				type: 1
			};

			check(paraam, data => {
				if (data.data) {
					this.show = false;
					saveWin(content, data => {
						if (data.data.status == 1) {
							this.step = 5;
							sessionStorage.setItem('step', '5');
							this.isShowSharePop = true;
							this.christmasCardId = data.data.id; //圣诞贺卡唯一标识
							let changeAll = sessionStorage.getItem('chance');
							this.chance = changeAll - 1;
							sessionStorage.setItem('chance', this.chance);
							this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/31575/40/19012/280922/6388118aE5a2c9891/e7eaff9702906fd0.png';

							//埋点参与制作贺卡人数
							let param1 = {
								eleId: 'make'
							};
							saveLog(param1, callbackData1 => {});
						} else if (data.data.status == 2) {
							this.$toast('没有次数~');
						} else if (data.data.status == 3) {
							this.$toast('制作失败~');
						}
					});
				} else {
					this.show = true;
					this.popData = {
						popUpTilte: 'upDateFail',
						popUptext: true,
						text: '您输入的文字可能有违禁\n内容，请修改文字',
						butImg: '//img10.360buyimg.com/imgzone/jfs/t1/38358/35/18976/8058/637b411eE6bcb23d6/1a1983c94a66327f.png',
						source: 'saveWin'
					};
				}
			});
		},
		//完成制作心愿袜
		finishWishClick() {
			this.sourse = null;
			if (!this.wishContent) {
				this.$toast('请输入您的心愿祝福');
				return;
			}
			this.show = true;

			this.popData = {
				popUpTilte: 'prompt',
				prizeFail: false,
				popUptext: true,
				text: '心愿袜DIY确认完成后\n将无法更改哦~ ',
				prizeFailBut: 0,
				popUpHeight: '4.36rem',
				butImg: '//img10.360buyimg.com/imgzone/jfs/t1/44137/29/22051/6671/6388078cE1b8f8548/458aa3d935c19e21.png',
				source: 'wxts'
			};
		},

		//生成心愿袜保存图片
		saveWishImgClick() {
			console.log('生成心愿袜子');
			this.showborder1 = false;
			this.showborder2 = false;
			this.showborder3 = false;
			
			setTimeout(()=>{
				window.pageYoffset = 0;
				document.documentElement.scrollTop = 0;
				document.body.scrollTop = 0;
				let wishBgRef = this.$refs.wishBgRef;
				console.log(wishBgRef, '生成心愿袜子1');
				let offsetWidth = wishBgRef.offsetWidth;
				let offsetHeight = wishBgRef.offsetHeight;
				console.log(offsetWidth, offsetHeight);
				
				(window.html2canvas || html2canvas)(wishBgRef, {
					width: offsetWidth, //画布的宽
					height: offsetHeight, //画布的高
					// scale:1,//处理模糊问题
					useCORS: true,
					allowTaint: true,
					background: 'transparent',
					backgroundColor: null
				})
					.then(canvas => {
						console.log(canvas, '生成心愿袜子2');
						// 转成图片，生成图片地址
						let html2canvasImgUrl = canvas.toDataURL('image/png'); //将 canvas 转为 base64 格式
						// this.dataURLtoFile(html2canvasImgUrl);
						this.uploadPreviewImg(this.dataURLtoFile(html2canvasImgUrl));
					})
					.catch(err => {
						console.log(err, '生成心愿袜子3');
					});
			},200)

		},
		//将base64转换为文件
		dataURLtoFile(dataurl, filename = 'file') {
			// console.log(ataurl, 'base64dataurl');
			let arr = dataurl.split(',');
			let mime = arr[0].match(/:(.*?);/)[1];
			let suffix = mime.split('/')[1];
			let bstr = atob(arr[1]);
			let n = bstr.length;
			let u8arr = new Uint8Array(n);
			while (n--) {
				u8arr[n] = bstr.charCodeAt(n);
			}
			return new File([u8arr], `${filename}.${suffix}`, {
				type: mime
			});
		},

		uploadPreviewImg(params) {
			console.log(form, '生成心愿袜子4');
			// 根据后台需求数据格式
			const form = new FormData();
			// 文件对象
			form.append('file', params);
			// console.log(form, '生成图片');
			// console.log(params, '生成图片params');
			uploadImage(form, calllBack => {
				console.log(form, '生成心愿袜子5');
				if (calllBack.resp_code == 0) {
					sessionStorage.setItem('wishImageUrl', calllBack.data);
					sessionStorage.setItem('psSelectListData', JSON.stringify(this.psSelectListData));
					this.wishImageUrl = calllBack.data;
					sessionStorage.setItem('step', '4');
					this.step = 4;
					this.centerDivBg = '//img10.360buyimg.com/imgzone/jfs/t1/31575/40/19012/280922/6388118aE5a2c9891/e7eaff9702906fd0.png';
				} else {
					this.$toast('生成贺卡失败');
				}
			});
		},
		changeHeight() {
			let _this = this;
			this.$nextTick(() => {
				var textArea = _this.$refs.textareaRef;
				var scrollHeight = textArea.scrollHeight; // 控件所有的高度，包含滚动的那部分(不可见也会有高度)
				var height = textArea.offsetHeight; // 屏幕上显示的高度
				console.log(height, 'height');
				console.log(scrollHeight, 'scrollHeight');

				if (height <= scrollHeight) {
					textArea.style.height = 'auto'; // 恢复默认值，这个作用就是根据内容自适应textarea高度
					if (this.wishContent.length > 60) {
						textArea.style.height = textArea.scrollHeight + 32 + 'px'; // 拿到最新的高度改变textarea的高度
					} else {
						textArea.style.height = textArea.scrollHeight + 'px'; // 拿到最新的高度改变textarea的高度
					}
				}
			});
		},

		// 我的奖品
		openPizePopUp() {
			this.sourse = null;
			this.show = true;
			this.popData = {
				popUpTable: true,
				popUpTilte: 'myPrize',
				popUpHeight: '4.36rem',
				popUpWidth: '6.46rem',
				listTitle: [{ name: '奖项名称' }, { name: '中奖时间' }, { name: '奖品状态' }]
			};
		},
		getNeed(val) {
			this.need = val;
		},
		//获取任务接口
		async getTaskList() {
			getTaskList(sessionStorage.getItem('activityId'), data => {
				this.taskList = data.data;
				this.checkTask();
			});
		},
		//检查观看直播任务是否达到20s
		async checkTask() {
			const task1 = window.localStorage.getItem('doTask');
			console.log(task1, '检查观看直播任务是否达到20s915');
			if (!task1) return;
			window.localStorage.removeItem('doTask');
			// console.log('axzxzxxaaaaaaaaaaaaaaaaa');
			const newItem = JSON.parse(task1);
			const newTime = new Date().getTime();
			const num = newItem.taskId === 'scanlive' ? 20000 : 15000;
			const toastName = newItem.taskId === 'scanlive' ? '观看直播' : '浏览店铺';
			const downTime = newTime - newItem.time >= num;
			if (downTime) {
				let param = {
					activityId: sessionStorage.getItem('activityId'),
					taskId: newItem.taskId,
					param: null
				};
				task(param, data => {
					if (data.resp_code == 0) {
						if (data.data && data.data.chance) {
							let changeAll = parseInt(sessionStorage.getItem('chance')) + parseInt(data.data.chance);
							sessionStorage.setItem('chance', changeAll);
							this.chance = changeAll;
						}
					} else {
						this.$toast(data.resp_msg);
					}
				});
			} else {
				let toastMessage = toastName + '未到' + parseInt(num / 1000) + 's';
				toastPopComService.create(toastMessage, submit => {
					toastPopComService.close();
				});
			}
		},
		// initImage(index) {
		// 	let that = this;
		// 	// let psImageDivAllRef = this.$refs.psImageDivAllRef;
		// 	console.log(index, 'index');
		// 	// let psImageDivAllRef = this.$refs.psImageDivAllRef;
		// 	// this.startX this.wishBgTop this.startY this.wishBgLeft,
		// 	let wishImgRef0 = this.$refs.wishImgRef0;
		// 	let wishImgRef1 = this.$refs.wishImgRef1;
		// 	let wishImgRef2 = this.$refs.wishImgRef2;

		// 	if (wishImgRef0) {
		// 		this.af = new AlloyFinger(wishImgRef0, {
		// 			rotate: function(evt) {
		// 				console.log(evt, '实现旋转');
		// 				that.psSelectListData[0].angle += evt.angle;
		// 			},
		// 			pinch: function(evt) {
		// 				console.log(evt, '实现缩放');
		// 				if (evt.zoom > 1.4 || evt.zoom < 0.5) {
		// 					return;
		// 				}

		// 				that.psSelectListData[0].dis = evt.zoom;
		// 			}
		// 		});
		// 	}

		// 	if (wishImgRef1) {
		// 		this.af = new AlloyFinger(wishImgRef1, {
		// 			rotate: function(evt) {
		// 				console.log('实现旋转');
		// 				that.psSelectListData[1].angle += evt.angle;
		// 			},
		// 			pinch: function(evt) {
		// 				console.log('实现缩放');
		// 				if (evt.zoom > 1.4 || evt.zoom < 0.5) {
		// 					return;
		// 				}
		// 				that.psSelectListData[1].dis = evt.zoom;
		// 			}
		// 		});
		// 	}

		// 	if (wishImgRef2) {
		// 		this.af = new AlloyFinger(wishImgRef2, {
		// 			rotate: function(evt) {
		// 				console.log('实现旋转');
		// 				that.psSelectListData[2].angle += evt.angle;
		// 			},
		// 			pinch: function(evt) {
		// 				console.log('实现缩放');
		// 				if (evt.zoom > 1.4 || evt.zoom < 0.5) {
		// 					return;
		// 				}
		// 				that.psSelectListData[2].dis = evt.zoom;
		// 			}
		// 		});
		// 	}
		// },
		
		touchstart(e, index) {
			console.log(index, 'index11111111');
			this.index = index;
			if(index == 0){
				this.showborder1 = true;
				this.showborder2 = false;
				this.showborder3 = false;
				
			}else if(index == 1){
				this.showborder1 = false;
				this.showborder2 = true;
				this.showborder3 = false;
				
			}if(index == 2){
				this.showborder1 = false;
				this.showborder2 = false;
				this.showborder3 = true;
			}
			// console.log(this.index, 'this.index');
			let imageUrl1 = JSON.parse(JSON.stringify(this.psSelectListData[index]));
			// console.log(imageUrl1, 'imageUrl1');

			//获取心愿袜外框的位置
			this.wishBgTop = (this.$refs.wishBgRef.offsetTop * 100) / 10000;
			this.wishBgLeft = (this.$refs.wishBgRef.offsetLeft * 100) / 10000;

			// console.log(this.$refs.wishImgRef[index].offsetLeft,'wishImgRef');
			// console.log(this.wishBgLeft, 'offsetLeft1');
			// imageUrl1.zIndex = this.zindex + 2; //在最高层级上+1

			this.startX = (parseInt(e.touches[0].pageX) * 100) / 10000;
			this.startY = (parseInt(e.touches[0].pageY) * 100) / 10000;
			// imageUrl1.posX = this.startX;
			// imageUrl1.posY = this.posY;

			this.xx = imageUrl1.posX;
			this.yy = imageUrl1.posY;
			this.selectImgWidth = imageUrl1.width;
			this.selectImgHeigth = imageUrl1.height;

			// console.log(this.startX, '1112开始位置'); //开始的位置
			// console.log(this.startY, 'this.startY');
		},

		touchmove(e, index) {
			// console.log(document.documentElement.clientWidth,'touchmove')
			//   let clientWidth = document.documentElement.clientWidth;//屏幕宽度
			//   let clientHeight = document.documentElement.clientHeight;//屏幕高度
			// console.log(this.startX, '1112开始位置'); //开始的位置
			//结束的位置
			const endX = (parseInt(e.touches[0].pageX) * 100) / 10000; //转换成rem
			const endY = (parseInt(e.touches[0].pageY) * 100) / 10000; //转换成rem
			// console.log(endX, '1112结束位置'); //开始的位置

			// posX posY
			//移动的位置1.84-1.92 = -0.08
			var aX = endX - this.startX;
			var aY = endY - this.startY;

			//开始的位置加上移动的位置是
			this.translateX = this.xx + aX;
			this.translateY = this.yy + aY;
			// console.log(this.translateX, '1112移动位置');

			// 屏幕的宽度减去图片的宽度

			if (this.translateX > 1.6 || this.translateX < -1.5 || this.translateY < -0.7 || this.translateY > 0.8) {
				return;
			}

			this.psSelectListData[index].posX = this.translateX;
			this.psSelectListData[index].posY = this.translateY;
			// console.log( this.imageUrlArr[index],'imageUrl1index');
			this.$forceUpdate();
		}
	}
};
</script>

<style lang="scss">
html,
body {
	margin: 0 !important;
	padding: 0 !important;
	height: 100% !important;
	width: 100% !important;
	overflow: hidden !important;
}

.christmasCardCAll {
	position: relative;
	min-height: 13.34rem;
	height: 100vh;
	overflow: hidden;

	* {
		::-webkit-scrollbar {
			/*隐藏滚轮*/
			display: none;
		}
	}

	.topDivAll {
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/166394/23/29264/36052/637af55bE06e99ede/49dd077ad7449f22.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 7.5rem;
		height: 3.8rem;
		position: absolute;
		bottom: calc(50% + 5.765rem);
		left: 0;
	}
	.centerDiv {
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/128853/15/29134/190902/6388118aEde2fe0a6/92c91df9f87cc30c.png');
		background-size: 100% 100%;
		width: 7.5rem;
		height: 11.53rem;
		background-repeat: no-repeat;
		position: absolute;
		top: calc(50% - 5.765rem);
		left: 0;
		.rulePrizeDivAll {
			margin-top: 0.65rem;
			.ruleDiv {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/105160/35/35030/4073/637b0bc6Ef946b226/e023a6b0b90e47c9.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 1.41rem;
				height: 0.48rem;
				margin-bottom: 0.13rem;
			}
			.prizeDiv {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/215906/18/23745/4192/637b0bc6Eff5dc629/73b4093d6de9ec2f.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 1.41rem;
				height: 0.48rem;
			}
		}
		.openAndNumDivAll {
			margin-top: 6.9rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.openDiv {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/62029/11/21411/8358/637b0bd1Ef3a4325a/3bc31bc3f72049df.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 3.81rem;
				height: 0.73rem;
				margin-bottom: 0.14rem;
			}
			.numDiv {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/191737/31/30596/9755/637b0bd1E8d614d83/ae76f9728a81e1e4.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 3.81rem;
				height: 0.73rem;
			}
		}
		.wishDivAll {
			margin-top: -0.36rem;
			.wish {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/164990/24/32295/21619/637b1204Ed164674e/227422d61981900d.png');
				background-size: 100% 100%;
				width: 1.47rem;
				height: 1.17rem;
				background-repeat: no-repeat;
			}
		}
		.goDoWishDivAll {
			margin-top: 7.88rem;
			display: flex;
			justify-content: center;
			align-items: center;
			.goDoWishDiv {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/163110/6/29193/7110/637b14ffE254de173/73b319f8f908333a.png');
				background-size: 100% 100%;
				width: 3.12rem;
				height: 0.73rem;
				background-repeat: no-repeat;
			}
		}
		.wishDivAll2 {
			display: flex;
			justify-content: end;
			margin-top: -0.6rem;
			.wish2 {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/124044/40/29116/21402/637b14e0E036322e3/0b648ee7aad46d6a.png');
				background-size: 100% 100%;
				width: 1.47rem;
				height: 1.17rem;
				background-repeat: no-repeat;
			}
		}
		.wishBgDivAll {
			margin-top: 3.32rem;
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/158087/33/28632/21866/637b236fE22699cc9/e13ba60993f93d2b.png');
			background-size: 100% 100%;
			width: 5.11rem;
			height: 3.3rem;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-left: calc(50% - 5.11rem / 2);
			position: relative;
			overflow: hidden;
			.wzImage {
				// position: absolute;
				// width: 2.7rem;
				height: 3.02rem;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.psSelectImg {
				position: absolute;
				display: flex;
				align-items: center;
				.borderDiv {
					position: absolute;
					border: 0.01rem solid #000000;
					box-sizing: inherit !important;
					padding-top: 100%;
					// z-index: 1;
					.addDiv {
						position: absolute;
						bottom: -0.15rem;
						right: -0.15rem;
						z-index: 12;
						width: 0.3rem;
						height: 0.3rem;
						background: #ffffff;
						border-radius: 50%;
						 touch-action: none;
						img {
							width: 0.3rem;
							height: 0.3rem;
						}
					}

					.reduceDiv {
						position: absolute;
						bottom: -0.15rem;
						left: -0.15rem;
						z-index: 12;
						width: 0.3rem;
						height: 0.3rem;
						background: #ffffff;
						border-radius: 50%;
						 touch-action: none;
						img {
							width: 0.3rem;
							height: 0.3rem;
						}
					}
					.rotateDiv {
						position: absolute;
						top: -0.15rem;
						right: -0.15rem;
						z-index: 12;
						width: 0.3rem;
						height: 0.3rem;
						background: #ffffff;
						border-radius: 50%;
						touch-action: none;
						img {
							width: 0.3rem;
							height: 0.3rem;
						}
					}
				}
			}
		}

		.saveWishDivAll {
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/214413/28/24161/8568/637b2379Ef3e65bc4/7d6b39fdeb9f14ae.png');
			background-size: 100% 100%;
			width: 3.3rem;
			height: 0.73rem;
			background-repeat: no-repeat;
			margin-left: calc(50% - 3.3rem / 2);
			margin-top: 0.35rem;
		}
		.wishDataDivAll {
			margin-top: 0.32rem;
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/212437/10/23832/54954/637b2ef1Ecc21d63a/b5ba7b5aaaba23f2.png');
			background-size: 100% 100%;
			width: 7.5rem;
			height: 3.62rem;
			background-repeat: no-repeat;
			.titleDivAll {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 0.34rem;
				line-height: 0.34rem;
				.leftTitleDiv {
					margin-left: 1.27rem;
					margin-top: 0.3rem;
				}
				.rightTitleDiv {
					margin-right: 1.67rem;
					margin-top: 0.35rem;
				}
				.selectTitleDiv {
					color: #ffffff;
					font-size: 0.38rem;
					line-height: 0.38rem;
				}
			}
			.wzListData {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 2.18rem;
				.wzItemData {
					width: 1.46rem;
					height: 1.46rem;
					border-radius: 0.25rem;
					margin: 0 0.26rem;
					background: #ffebba;
					display: flex;
					justify-content: center;
					align-items: center;

					img {
						border-radius: 0.25rem;
						width: 1.09rem;
						height: 1.17rem;
					}
				}
				.wzSelectDiv {
					width: 1.54rem;
					height: 1.54rem;
					border: 0.08rem solid #f2bb38;
				}
				.wzItemData::last-child {
					margin: 0;
				}
				.wzItemData::first-child {
					margin: 0;
				}
			}
			.psListData {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 2.18rem;
				flex-direction: column;
				position: relative;
				.psItemDataAll {
					display: flex;
					width: 5.11rem;
					overflow-x: scroll;
				}
				.__rule_pops_scroll_line {
					// top: 0.38rem;
					// right: 0.15rem;
					background-color: #ececec;
					border-radius: 0.02rem;
					width: 2.62rem;
					height: 0.04rem;
					position: absolute;
					bottom: 0.16rem;
				}
				.__rule_pops_scroll_line > div {
					width: 0.5rem;
					height: 100%;
					background-color: #ff4d27;
					// left: 0;
				}
				.psItemData {
					width: 1.46rem;
					height: 1.46rem;
					border-radius: 0.25rem;
					margin: 0 0.13rem;
					background: #ffebba;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-shrink: 0;
					img {
						border-radius: 0.25rem;
						width: 1.09rem;
						height: 1.17rem;
					}
				}
				.psSelectDiv {
					width: 1.54rem;
					height: 1.54rem;
					border: 0.08rem solid #f2bb38;
				}
				.psItemData::last-child {
					margin: 0;
				}
				.psItemData::first-child {
					margin: 0;
				}
			}
		}
		.wishDataDivAll2 {
			background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/213887/4/23371/54254/637b2ef1E70aa2d1c/c33dfb887d1f2cb2.png');
		}
		.stepDivAll3 {
			position: relative;
			.backBtnDiv {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/202575/30/26163/6636/637c44e9Ee6738ef7/26e693b49cf4269f.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 0.94rem;
				height: 0.94rem;
				margin-top: 0.72rem;
				position: absolute;
				top: -3.32rem;
				left: 0.06rem;
			}
		}
		.stepDivAll4 {
			.backBtnDiv {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/202575/30/26163/6636/637c44e9Ee6738ef7/26e693b49cf4269f.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 0.94rem;
				height: 0.94rem;
				margin-top: 0.72rem;
			}
			.letterBg {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/139384/33/31143/5198/637c4abaE492aa693/1828d949acb7b4e1.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 6.46rem;
				height: 4.63rem;
				// margin-top: 5.19rem;
				margin-left: calc(50% - 6.46rem / 2);
				position: absolute;
				bottom: 1.7rem;
			}
			.letterContent {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/179831/21/30287/8538/637c4abaE5cdc916b/97e2a50828ec86b7.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 6.46rem;
				height: 8.06rem;
				// margin-top: 5.19rem;
				margin-left: calc(50% - 6.46rem / 2);
				position: absolute;
				top: 1.74rem;
				.wishImageDiv {
					height: 3.3rem;
					// width: 4.8rem;
					margin-top: 0.38rem;
					border-radius: 0.16rem;
				}
				.wishTextarea {
					height: 2.4rem;
					width: 4.82rem;
					line-height: 0.4rem;
					margin-left: calc(50% - 4.82rem / 2);
					margin-top: 0.32rem;
					padding-bottom: 0.24rem;

					overflow-y: scroll;
					textarea {
						font-size: 0.24rem;
						min-height: 2.4rem;
						line-height: 0.5rem;
						width: 100%;
						// height: auto;
						background: linear-gradient(rgba(0, 0, 0, 0) 96%, #ae955a 1%);
						background-size: 100% 0.5rem;
						background-attachment: scroll;

						// text-decoration:underline;
						// text-underline-offset: 9px;
						// background: linear-gradient(rgba(0, 0, 0, 0) 96%, #ae955a 1%);
						// background-size: 100% 0.5rem;
					}
				}
			}
			.letterFont {
				background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/21005/1/19661/42678/637c4abaE4f2d4f08/eb413e6c9547990b.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 6.46rem;
				height: 2.95rem;
				// margin-top: 5.19rem;
				margin-left: calc(50% - 6.46rem / 2);
				position: absolute;
				bottom: 1.7rem;
			}
			.bottomBtnDiv {
				position: relative;
				display: flex;
				justify-content: center;
				margin-top: 8.5rem;
				.backBtnDiv1 {
					background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/101522/14/35445/8196/637c44e9Ef441c98b/337fcdaab4588857.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					width: 2.89rem;
					height: 0.73rem;
					margin-right: 0.15rem;
				}
				.finishBtnDiv {
					background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/115330/38/30845/7400/637c44e9E107dc3e1/dfc979181cd8952a.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					width: 2.89rem;
					height: 0.73rem;
					margin-left: 0.15rem;
				}
			}
		}
		.stepDivAll8 {
			.topDiv {
				display: flex;
				justify-content: space-between;
				.ruleAndPrizeDiv {
					margin-top: 0.65rem;
					.ruleDiv {
						background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/78344/40/17715/4146/637d857aEa3397128/f1acfcd7b927123f.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						width: 1.41rem;
						height: 0.48rem;
					}
					.myPrizeDiv {
						background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/172170/32/32126/4295/637d8579Ebb69cd37/1e2f18a26bd78a01.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						width: 1.41rem;
						height: 0.48rem;
						margin-top: 0.13rem;
					}
				}
				.backBtnDiv {
					background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/202575/30/26163/6636/637c44e9Ee6738ef7/26e693b49cf4269f.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					width: 0.94rem;
					height: 0.94rem;
					margin-top: 0.72rem;
					margin-left: 0.18rem;
				}
			}
			.wishDivAll2 {
				margin-top: -0.3rem;
			}
		}
	}
	.bottomDiv {
		background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/114232/19/33195/44828/637b11a8E860afdfc/cf31c9b796dc081c.png');
		background-size: 100% 100%;
		width: 7.5rem;
		height: 3.45rem;
		background-repeat: no-repeat;
		position: absolute;
		top: calc(50% + 5.763rem);
		left: 0;
	}
}
</style>
