order.vue

<template>
	<view class="full-width full-height">
		<!-- 礼花 -->
		<firework ref="firework" v-if="isReady" style="position: fixed;z-index: 9999;"></firework>
		<scroll-view scroll-y style="height:100%;width: 100%; overflow: hidden; overflow-y: scroll; position: relative;">
			<view :style="{transform: 'translateX(' + translateX + 'px)'}" 
			style="position: absolute;transition: all 1.5s; height:100%;width: 100%;">
				<!-- 设计区底图 -->
				<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
					<image src="https://img.colorpark.cn/wechat/track/shejiqu_2.png" mode="widthFix" style="width: 100%;"></image>
				</view>
				<!-- 付款区底图 -->
				<view style="position: absolute; top: 0; left: 100%; width: 100%; height: 100%;overflow: hidden;">
					<image src="https://img.colorpark.cn/wechat/track/fukuanqu_2.png" mode="widthFix" style="width: 100%;"></image>
				</view>
			</view>
			<!-- 3D动画 -->
			
			<!-- @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd" -->
			<view class='crate-wrapper'  >
				<view class="brush" :style="{transform: 'translateX(' + activebrushX + 'px) scale(' + transformscale + ')'}">
					<view class='crate' :class="{crateactive:crateactivestate}" 
					:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
					transform: 'rotateX(-15deg) rotateY(' + coordinate.numberY +'deg)'}">
						<!-- <view class='side top'>
							<image src="../../static/img/c.png" mode=""
								style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
						</view> -->
						<!-- <view class='side bottom' 
						:style="{'-webkit-transform': 'translateY(' + (data.editorHeight - 20) + 'px) rotateX(90deg)',
						transform: 'translateY(' + (data.editorHeight - 20) + 'px) rotateX(90deg)'}">
							<image src="../../static/img/c.png" mode=""
								style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
						</view> -->
						<!-- <view class='side left'>
							<image src="../../static/img/b.png" mode=""
								style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
						</view> -->
						<!-- <view class='side right' 
						:style="{'-webkit-transform': 'translateX(' + (data.editorWidth - 20) + 'px) rotateY(90deg)',
						transform: 'translateX(' + (data.editorWidth - 20) + 'px) rotateY(90deg)'}">
							<image src="../../static/img/b.png" mode=""
								style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
						</view> -->
						<!-- style="background: #178CE6; width: 500upx; height: 500upx;justify-content: center; align-items: center;" -->
						 <view class='side front' style="width:460upx; height: 460upx; ">
							<!-- <image :src="background_surface_image + '?x-oss-process=image/resize,lfit,w_1500'" mode=""
							style="position: absolute; width: 100%; height: 98%; left: 0; top: 0;"></image> -->
							<image 
							style="width: 200upx; height: 200upx;  position: absolute; left: calc( 50% - 100upx) ; top: calc( 50% - 100upx) ; background: #FFFFFF;"></image>
							<image :src="( good.icon ? good.icon : good.image + '?x-oss-process=image/resize,lfit,w_120' )" mode="aspectFit"
							style="width: 120upx; height: 120upx;  position: absolute; left: calc( 50% - 60upx) ; top: calc( 50% - 60upx) ; "></image>
							<image :src="good.goods.front_image " mode="aspectFit" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
						</view> 
						<!-- <view class='side back'>
							<image src="../../static/img/a.png" mode=""
								style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></image>
						</view> -->
					</view>
					 <view style="margin-top: 200upx; text-align: center;" >
						<!-- <view style="font-size: 40upx; font-weight: bold;">
							<text style="color: #FFFFFF;">{{good.goods.name || '**'}}</text>
						</view>
						<view style="margin-top: 25upx;">
							<text style="color: #F56364;">
								￥<text style="font-size: 46upx;" v-if="good">{{add}}</text>
							</text>
						</view> -->
					</view> 
				</view>
			</view>
			
		   <view
				style="display: flex; flex-direction: column; position: absolute; bottom:  100upx; width: 100%; text-align: center;"
				:style="{opacity:titlestate ? 1:0}" >
				<view style="font-size: 40upx; font-weight: bold;">
					<text style="color: #FFFFFF;">{{good.goods.name || '**'}}</text>
				</view>
				<view style="margin-top: 25upx;">
					<text style="color: #F56364;">
						￥<text style="font-size: 46upx;" v-if="good">{{add}}</text>
					</text>
				</view>
			</view> 
			
		</scroll-view>
		<view style="background: #282932; height: 100upx; position: fixed; width: 100%; bottom: 0; z-index: 999;">
			<view style="width: 100%; height: 100upx; 
			background: linear-gradient(-90deg, #178CE6, #984ACE); font-size: 36upx; 
			font-weight: 400; text-align: center; line-height: 100upx; float: right; color: #FFFFFF;" @click="commitOrder">支付领取</view>
		</view>
	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js'
	import uniPopup from '../index/common/uni-popup/uni-popup.vue'
	import Enums from '@/util/Enums';
	import md5 from 'js-md5';
	import firework from '@/components/ay-firework/firework.vue';//礼花
	export default {
		components: {
			uniPopup,
			firework
		},
		computed: {
			// 相加
			add(arg1, arg2) {
				if(this.good != null && this.coupon != null){
					if(this.coupon.discount_amount != undefined){
						return (Math.round(this.good.sales_price * 100) + Math.round(this.good.goods.sales_price * 100) - Math.round(this.coupon.discount_amount * 100)) / 100;
					}else{
						return (Math.round(this.good.sales_price * 100) + Math.round(this.good.goods.sales_price * 100)) / 100;
					}
					
				}else{
					return ''
				}
			},
			// 相乘
			multiple(arg1, arg2) {
			    return (Math.round(arg1 * 100) * Math.round(arg2 * 100)) / 10000;
			},
		},
		data() {
			return {
				coupon_flag_desc:null,
				type: 'bottom',
				tabletext:true, // true设备 false快递
				good:null, //商品数据
				equipmentlist:[],//设备列表数据
				machine_id:null,//设备id
				machine_item:null,//设备信息
				goods_id:null,//商品id
				works_id:null,//作品id
				sizetext_id:null,
				sizetext:null,//选中设备的尺码
				give_sizetext:null,//选中配送的尺码
				give_dict_id:null,//属性字典id
				sizestock:null,//尺码库存
				channel_no:null,//货道
				dict_id:null,//属性字典id
				coupon:null,//优惠劵
				stock:null,//尺码
				machine_pages:true,//设备进来的状态
				myadress:{},
				loading: false,
				
				orderIdone:null,//订单号
				orderIdtwo:null,//订单号
				resultpayone:null,
				resultpaytwo:null,
				listtmplIds:[],
				sn:null, //前端查询标志
				activebrushX: -400,//动画进来出去
				crateactivestate: false,//开始自转
				titlestate: false,
				isReady: false,//礼花
				
				data: {
					windowWidth: 0, // 屏幕宽度
					windowHeight: 0, // 屏幕高度
					pixelRate: 0, // 屏幕宽度比率
					editorWidth: 0, // 设计宽度
					editorHeight: 0, // 设计高度
					render_cove_width:null,
					render_cove_height:null,
					render_left:null,
					render_top:null,
				},
				teststate:false,//开启测试模式 false  true
				translateX:0,
				coordinate:{
					startX:0,
					startY:0,
					touchMoveX:0,
					touchMoveY:0,
					numberY:0,
					state:false,
				},
				transformscale:1,//整体缩小
				key:null,
				//background_surface_image:null,//定制壳手机壳底色
			};
		},
		methods: {
			dragStart(e) {
				if(!this.coordinate.state) return;	// 记录点击时的坐标值
				this.coordinate.startX = e.touches[0].clientX;
				this.coordinate.startY = e.touches[0].clientY;
			},
			dragMove(e) {
				if(!this.coordinate.state) return;
				this.coordinate.touchMoveX = e.touches[0].clientX;
				this.coordinate.touchMoveY = e.touches[0].clientY;
				if(this.coordinate.touchMoveX > this.coordinate.startX){
					this.coordinate.numberY += this.coordinate.touchMoveX - this.coordinate.startX
				}else{
					this.coordinate.numberY -= this.coordinate.startX - this.coordinate.touchMoveX
				}
				this.coordinate.startX = e.touches[0].clientX;
				this.coordinate.startY = e.touches[0].clientY;
			},
			// 拖动结束事件
			dragEnd(e) {
				if(!this.coordinate.state) return;
			},
			
			/* let data = {
				s: 'Order.create',
				// type: this.key, //1：配送版，2：单机版，3：自助版
				type: 2, //1：配送版，2：单机版，3：自助版
				machine_id: this.machine_id, //设备
				goods_id: this.data.goods_id, //产品
				works_id: works_id, //作品
				channel_no: null, //货道
				dict_id: null, //属性字典id
				goods_size: null, //产品尺寸
				works_num: null, //作品
				shop_id: null, //商铺
				sn: null, //前端查询标志
				coupon_id: null, //优惠券id，支付多个id( 1-2-3)
				user_address: null, //地址
				support_pay: this.support_pay, //单机版是否支付
				surface_type: this.$base.surfaceData.surface_type, //材质类型 0：默认 1：自带壳 2：定制壳
				surface_id: this.$base.surfaceData.surface_id, //材质对应的编号，没有的话就为0或者不传
				surface_color_series_id: this.$base.surfaceData.surface_color_series_id, //选择的色系编号，没有的话就不传或者为0
				surface_color_id: this.$base.surfaceData.surface_color_id, //选择的颜色编号，没有的话就不传或者为0
			} */
	
			//创建订单
			self_help() {
				let data = {
					s: 'Order.create',
					type: this.key, //1：配送版，2：单机版，3：自助版
					//type: 2, //1：配送版，2：单机版，3：自助版
					//type:3, //新增字段
					machine_id: this.machine_id, //设备
					goods_id: this.goods_id, //产品
					works_id: this.works_id, //作品
					channel_no: null, //货道
					dict_id: null, //属性字典id
					goods_size: this.good.goods.name, //产品尺寸
					works_num: null, //作品
					shop_id: null, //商铺
					sn: null, //前端查询标志
					coupon_id: null, //优惠券id，支付多个id( 1-2-3)
					user_address: null ,//地址
					support_pay:this.machine_item.support_pay,
					surface_type:0, //材质类型 0：默认 1：自带壳 2：定制壳
					//surface_id: this.$base.surfaceData.surface_id,//材质对应的编号，没有的话就为0或者不传
					//surface_color_series_id:this.$base.surfaceData.surface_color_series_id, //选择的色系编号，没有的话就不传或者为0
					//surface_color_id:this.$base.surfaceData.surface_color_id,//选择的颜色编号，没有的话就不传或者为0
				}
				if(this.coupon.ids != undefined){
					data.coupon_id = this.coupon.ids.join("-")
				}
				uni.showLoading({title: '正在生成订单...',mask: true})
				homeservice.WorksList(data).then(result => {
					this.paymentself_help(result.pay,result.order_id)
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({title: err.msg || err.data,icon: 'none'});
				});
			},
			paymentself_help(params,order_id) {
				let seft = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: params.timeStamp.toString(),
					nonceStr: params.nonceStr,
					package: params.package,
					signType: 'MD5',
					paySign: params.sign,
					success: (res) => {
						//console.log('success:' + JSON.stringify(res));
						uni.showToast({ title: '支付成功', duration: 3000, icon: 'none' });
						setTimeout(() => {
							uni.navigateTo({
								url: '../mall/lineUp?machine_id=' + seft.machine_id + '&key=' + seft.key
							})
						}, 500)
					},
					fail: (err = {}) => {
						console.log('fail00:' + JSON.stringify(err || ''));
						if (err.errMsg && err.errMsg.indexOf('cancel') === -1 || (!err.errMsg)) uni.showToast({ title: '网络异常,请稍后再试', icon: 'none', duration: 3000 });
					}
				});
			},
			commitOrder(){
				console.log(this.machine_item.support_pay)
				if(this.key == 2 && this.machine_item.support_pay == 1){
					this.self_help()
				}else{
					// if(this.teststate){
					// 	// 滑动出去
					// 	this.activebrushX = ((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth)
					// 	setTimeout(function(){
					// 		uni.navigateTo({ url: './self_help_payment_details?orderId=161819487100005361&type=null&machine_id=100012' })
					// 	}.bind(this), 3000)
					// }
					let _this = this
					if((this.orderIdone != null && this.tabletext) || (this.orderIdtwo != null && !this.tabletext)){
						if(this.tabletext){
							this.payment(this.resultpayone.pay,this.orderIdone)
						}else{
							this.payment(this.resultpaytwo.pay,this.orderIdtwo)
						}
					}else{
						if (this.loading) return;
						if (!this.machine_id && this.tabletext) {
							uni.showToast({ title: '请选择附近色彩站！', icon: 'none' });
							return false;
						}
						if(_this.listtmplIds.length == 0){
							_this.zhifu()
						}else{
							uni.requestSubscribeMessage({
							  tmplIds: _this.listtmplIds,
							  success (res) {  
								  _this.zhifu()
								},  
								fail (res) {
									if (res.errCode === 20004) {
										wx.showModal({
											title: "温馨提示",
											content: "您已拒绝授权，将无法在微信中收到回复通知！",
											showCancel: false,
											success: res => {
												if (res.confirm) {
													_this.zhifu()
												}
											}
										});
									}
									_this.zhifu()
								} 
							})
						}
					}
				}
			},
			zhifu(){
				let data = {
					s:'Order.create',
					type: this.tabletext ? 3 : 1,//1：配送版，2：单机版，3：自助版
					machine_id:this.machine_id,//设备
					goods_id:this.goods_id,//产品
					channel_no:this.tabletext ? this.channel_no : null,//货道
					dict_id:this.tabletext ? this.dict_id : this.give_dict_id,//属性字典id
					goods_size:this.tabletext ? this.sizetext : this.give_sizetext,//产品尺寸
					works_id:this.works_id,//作品
					works_num:null,//作品
					shop_id:this.tabletext ? this.machine_item.shop_id : null,//商铺
					sn:this.sn,//前端查询标志
					coupon_id:null,//优惠券id，支付多个id( 1-2-3)
					user_address:null, // 用户下单地址
					terminal:this.$base.terminal,// 下单渠道
					promoter_id:this.$base.promoter_id ,// 推广的员的编号
					
					surface_type:0, //材质类型 0：默认 1：自带壳 2：定制壳
					//surface_id: this.$base.surfaceData.surface_id,//材质对应的编号，没有的话就为0或者不传
					//surface_color_series_id:this.$base.surfaceData.surface_color_series_id, //选择的色系编号，没有的话就不传或者为0
					//surface_color_id:this.$base.surfaceData.surface_color_id,//选择的颜色编号，没有的话就不传或者为0
				}
				if(this.coupon.ids != undefined){
					data.coupon_id = this.coupon.ids.join("-")
				}
				this.loading = true; //防止多次点击支付
				let seft = this
				uni.showLoading({title: '正在提交中...'})
				homeservice.WorksList(data).then(result => {
					console.log('result', result)
					if(this.tabletext){
						this.resultpayone = result
						this.orderIdone = result.order_id
					}else{
						this.resultpaytwo = result
						this.orderIdtwo = result.order_id
					}
					this.coupon_flag_desc = result.coupon_flag_desc
					this.payment(result.pay,result.order_id)
					uni.hideLoading();
				}).catch(err => {
					seft.loading = false;
					uni.hideLoading();
					uni.showToast({ title: err.msg || err.data, icon: 'none' });
				});
			},
			payment(params,order_id) {
				let seft = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: params.timeStamp.toString(),
					nonceStr: params.nonceStr,
					package: params.package,
					signType: 'MD5',
					paySign: params.sign,
					success: (res) => {
						console.log('success:' + JSON.stringify(res));
						// 滑动出去
						this.activebrushX = ((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth)
						uni.showToast({ title: '支付成功，即将打印', duration: 3000, icon: 'none' });
						let type =  this.tabletext ? 3 : 1//1：配送版，2：单机版，3：自助版
						setTimeout(() => {
							uni.navigateTo({ url: './self_help_payment_details?orderId=' + order_id + '&type=' + type + '&machine_id=' + seft.machine_id })
						}, 3000)
						setTimeout(() => {
							seft.loading = false;
						}, 10000)
					},
					fail: (err = {}) => {
						console.log('fail00:' + JSON.stringify(err || ''));
						if (err.errMsg && err.errMsg.indexOf('cancel') === -1 || (!err.errMsg)) uni.showToast({ title: '网络异常,请稍后再试', icon: 'none', duration: 3000 });
						setTimeout(() => {
							seft.loading = false;
						}, 2000)
					}
				});
			},
			
		
			// 获取库存与优惠券信息
			getMachineStock(){
				homeservice.queryList({
					s: 'Machine.getMachineStock',
					machine_id:this.machine_id,
					// key: this.tabletext ? 3 : 1
					key: this.key
				}).then(result => {
					this.coupon = result.coupon
					/* this.stock = result.stock
					// machine_id=100012&goods_id=33&goodid=8628&sn=1617263541425371
					// 读出锁库存储存信息
					this.sizetext_id = this.$base.lockInventory.id
					this.sizetext = this.$base.lockInventory.goods_size
					this.sizestock = this.$base.lockInventory.stock
					this.channel_no = this.$base.lockInventory.channel_no
					this.dict_id = this.$base.lockInventory.dict_id */
				}).catch(err => {
					uni.showToast({title: err.msg,icon: 'none'});
				});
			}, 
			// 设备进来的
			machine_pageslist(e){
				this.machine_pages = false
				homeservice.WorksList({
					s: 'machine.detail',
					machine_id: this.machine_id,
				}).then(res => {
					this.machine_item = res
					this.machine_item.category.forEach(item=>{
						if(item.id ==  this.machine_item.machine_category_id){
							this.machine_item.machine_category_text = item.title
							this.key = item.key
						}
					})
					this.getMachineStock()
				}).catch(err => {
					uni.showToast({title: err.msg,icon: 'none'})
				});
			},
			Worksdetail(){// 获取作品详情
				homeservice.WorksList({
						s: 'Works.detail',
						id:this.works_id,
						//surface_type:this.$base.surfaceData.surface_type, //材质类型 0：默认 1：自带壳 2：定制壳
						//surface_id: this.$base.surfaceData.surface_id,//材质对应的编号，没有的话就为0或者不传
				}).then(result => {
					this.good = result
					this.data.editorWidth = result.goods.design_width * this.data.pixelRate // 设计宽度
					this.data.editorHeight = result.goods.design_height * this.data.pixelRate // 设计高度
					this.data.render_cove_width = result.goods.render_cove_width * (result.goods.design_width / result.goods.render_width) * this.data.pixelRate + 30 // 设计高度
					this.data.render_cove_height = result.goods.render_cove_height * (result.goods.design_height / result.goods.render_height) * this.data.pixelRate + 30 // 设计高度
					this.data.render_left = result.goods.render_left * (result.goods.design_width / result.goods.render_width)  * this.data.pixelRate // 设计高度
					this.data.render_top = result.goods.render_top * (result.goods.design_height / result.goods.render_height) * this.data.pixelRate // 设计高度
					this.data.activebrushX = -((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth ) 
					this.data.printingStartX = -((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth)
					this.activebrushX = -((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth +150)
					this.$base.mobilePhoneCaseSize = this.data
					//背景图移动 1.5s
					setTimeout(function(){
						this.translateX = -this.data.windowWidth
					}.bind(this),1000)
					// 手机壳进去页面 1.5s
					setTimeout(function(){
						this.activebrushX = -60;
					}.bind(this),2500)
					// 震动 1s
					setTimeout(function(){
						this.isReady = true;
						wx.vibrateLong()
						this.titlestate = true
					}.bind(this),4000)
					// 开始自转 1s
					//this.crateactivestate = true
					/* setTimeout(function(){
						this.crateactivestate = true
					}.bind(this),4500) */
					// 开启手动旋转 10s
					/* setTimeout(function(){
						this.coordinate.state = true
					}.bind(this),14500) */
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.showToast({ title: err.msg || err.data, icon: 'none' });
				});
			},
		},
		// 下拉加载
		onPullDownRefresh() {},
		// 上拉加载
		onReachBottom() {},
		onLoad(options) {
			var that = this;
			//获取屏幕宽高
			wx.getSystemInfo({
				success: function(res) {
					let pixelRate = res.windowWidth / 750;
					that.data.windowWidth = res.windowWidth // 屏幕宽度
					that.data.windowHeight = res.windowHeight // 屏幕高度
					that.data.pixelRate = pixelRate // 屏幕宽度比率
				}
			})
			console.log(options)
			// machine_id=100013&goods_id=37&goodid=9843
			if(options.sn){
				this.sn = options.sn
			}
			/* if(options.goods_id != 'null'){ 
				this.goods_id = options.goods_id
				homeservice.queryList({
					s: 'Product.detail',
					id: this.goods_id
				}).then(result => {
					this.background_surface_image = result.surface_pic
				}).catch(err => {
					uni.showToast({title: err.msg,icon: 'none'});
				});
			} */
			if(options.machine_id != 'null'){ //设备进来的
				this.machine_id = options.machine_id
				this.machine_pageslist() // 默认有设备进来的
			}
			if(options.goodid != 'null'){
				this.works_id = options.goodid
				this.Worksdetail()// 获取作品
			}
		},
		onShow() {},
		onUnload() {}
	};
</script>

<style lang="scss">
	page {
		background: #131319 !important;
	}
	
	// 3D动画 
	.crate-wrapper {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		// background-color: #232323;
	}
	
	.crate {
		// width: 200px;
		// height: 370px;
		position: relative;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform: rotateX(-15deg);
		transform: rotateX(-15deg);
	}
	
	.crateactive{
		-webkit-animation: crate-spin 10s linear 1;/* linear	动画从头到尾的速度是相同的。 */
		animation: crate-spin 10s linear 1;/* infinite	规定动画应该无限次播放。 */
	}
	
	.brush{
		transition: all 1.5s;
		transform: translateX(-400px);
	}
	
	.crate .side {
		width: 100%;
		height: 100%;
		position: absolute;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		/* background-color: #d07f2c; */
		/* outline: 1px solid #a66523; */
	}
	
	/* 上 */
	.crate .side.top {
		width: 100%;
		height: 40px;
		-webkit-transform: translateY(calc(-40px/2)) rotateX(90deg);
		transform: translateY(calc(-40px/2)) rotateX(90deg);
	}
	
	/* 下 */
	.crate .side.bottom {
		width: 100%;
		height: 40px;
		// -webkit-transform: translateY(calc(720px/2)) rotateX(90deg);
		// transform: translateY(calc(720px/2)) rotateX(90deg);
	}
	// 左
	.crate .side.left {
		width: 40px;
		height: 100%;
		-webkit-transform: translateX(calc(-40px/2)) rotateY(-90deg);
		transform: translateX(calc(-40px/2)) rotateY(-90deg);
	}
	// 右
	.crate .side.right {
		width: 40px;
		height: 100%;
		// -webkit-transform: translateX(calc(100%/2)) rotateY(90deg);
		// transform: translateX(calc(100%/2)) rotateY(90deg);
	}
	
	/* 前 */
	.crate .side.front {
		-webkit-transform: translateZ(calc(30px/2));
		transform: translateZ(calc(30px/2));
	}
	
	/* 后 */
	.crate .side.back {
		-webkit-transform: translateZ(calc(-40px/2)) rotateY(180deg);
		transform: translateZ(calc(-40px/2)) rotateY(180deg);
	}
	
	// @-webkit-keyframes crate-spin {
	// 	from {
	// 		-webkit-transform: rotateX(-15deg) rotateY(0deg);
	// 		transform: rotateX(-15deg) rotateY(0deg);
	// 	}
	
	// 	to {
	// 		-webkit-transform: rotateX(-15deg) rotateY(-360deg);
	// 		transform: rotateX(-15deg) rotateY(-360deg);
	// 	}
	// }
	
	@keyframes crate-spin {
		from {
			-webkit-transform: rotateX(-15deg) rotateY(0deg);
			transform: rotateX(-15deg) rotateY(0deg);
		}
	
		to {
			-webkit-transform: rotateX(-15deg) rotateY(-360deg);
			transform: rotateX(-15deg) rotateY(-360deg);
		}
	}
</style>