更新代码

components/xing-refresh/xing-refresh.vue

@@ -82,6 +82,13 @@
 			this.diff = this.interruptPosition - this.topHeight;
 		},
 		methods: {
+			
+			scrollTopPostion(e) {
+				setTimeout(() => {
+					this.top = e
+				}, 50);
+			}, 
+			
 			change(e) {
 				//为3即是正在回弹状态
 				if (this.status == 3 || !this.isTouch) return;
@@ -153,11 +160,10 @@
 				else if (this.status == 1) this.$emit('backToInterrupt');
 			},
 			scrollTop() {
-				
+				//console.log("进来");
 				setTimeout(() => {
 						   this.top =  this.scrollTop
 				}, 80);
-				
 				//this.top = this.scrollTop;
 			}
 		}

package.json

@@ -15,9 +15,11 @@
     "browserslist": "^4.14.1",
     "build": "^0.1.4",
     "caniuse-lite": "^1.0.30001124",
+    "crypto-js": "^4.1.1",
     "echarts": "^4.9.0",
     "flyio": "^0.6.14",
     "font-awesome": "^4.7.0",
+    "js-base64": "^3.7.5",
     "js-md5": "^0.7.3",
     "jssha": "^2.4.2",
     "jweixin-module": "^1.6.0",
@@ -30,7 +32,6 @@
   },
   "devDependencies": {
     "webpack": "^3.12.0",
-    "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^2.11.5"
   },
   "repository": {

pages.json

@@ -20,6 +20,20 @@
 				"navigationBarTitleText": "",
 				"navigationStyle": "custom" //禁用uni-app默认的头部导航
 			}
+		},
+		{
+			"path": "pages/index/index_diy",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom" //禁用uni-app默认的头部导航
+			}
+		},
+		{
+			"path": "pages/index/index_order",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom" //禁用uni-app默认的头部导航
+			}
 		}
 	],
 	"globalStyle": {
@@ -51,36 +65,8 @@
 				{
 					"path": "size",
 					"style": {
-						"navigationBarTitleText": "自定义尺寸",
-						"enablePullDownRefresh": false,
-						"navigationBarTextStyle": "#ffffff",
-						"navigationBarBackgroundColor": "#101014",
-						"backgroundColor": "#101014"
-					   //"navigationStyle": "custom"
-					}
-				}
-			]
-		},
-		{
-			"root": "pages/mine",
-			"pages": [{
-					"path": "self_help_payment_details",
-					"style": {
-						"navigationBarTitleText": "打印",
-						"navigationStyle": "custom"
-					}
-				},
-				{
-					"path": "self_help_payment_details_new",
-					"style": {
-						"navigationBarTitleText": "打印",
-						"navigationStyle": "custom"
-					}
-				},
-				{
-					"path": "order",
-					"style": {
-						"navigationBarTitleText": "付款区"
+						"navigationBarTitleText": "",
+						"navigationStyle": "custom" //禁用uni-app默认的头部导航
 					}
 				}
 			]

pages/index/Signin.vue

@@ -15,8 +15,7 @@
 					 style="width: 109upx; height: 98upx; display: block; margin: 36upx auto 25upx;"></image>
 				<view style="text-align: center; font-size: 32upx; font-weight: 500; color: #131319;">
 					欢迎来到{{startText}}小程序 </view>
-				<view
-					style="margin-top: 10upx; text-align: center; font-size: 24upx; font-weight: 500; color: #888888;">
+				<view style="margin-top: 10upx; text-align: center; font-size: 24upx; font-weight: 500; color: #888888;">
 					为了更好的服务，需要得到您的授权 </view>
 				<!-- 小程序登录、用户信息相关接口调整 -->
 				<button class="buttonGetUserInfo cssbut" hover-class="hover-class-bg" v-if="canIUseGetUserProfile"

pages/index/components/NumSlider.vue

@@ -5,7 +5,7 @@
 		<view style=" transform: translateX(-50%); " class="u-slider-handle" ref="right"
 			@touchstart.stop.prevent="onRightMouseDown" @touchmove.stop.prevent="onRightMouseMove"
 			:style="{left: right +'px'}">
-			<view style="color: #F29F3D; font-size: 30upx;"> {{defalutFilletData}} </view>
+			<view style="color: #F29F3D; font-size: 28upx;"> {{defalutFilletData}} </view>
 		</view>
 	</view>
 </template>
@@ -14,27 +14,27 @@
 	export default {
 		name: 'NumSlider',
 		props: {
-			min: { // 滑动输入条最小值
+			min: { //滑动输入条最小值
 				type: Number,
 				default: 0
 			},
-			max: { // 滑动输入条最大值
+			max: { //滑动输入条最大值
 				type: Number,
 				default: 100
 			},
-			initialMin: { // 滑动输入条初始最小值，默认在最左侧
+			initialMin: { //滑动输入条初始最小值，默认在最左侧
 				type: Number,
 				default: 0
 			},
-			width: { // 滑动输入条在页面中的宽度
+			width: { //滑动输入条在页面中的宽度
 				type: Number,
 				default: 600
 			},
-			disabled: { // 是否禁用
+			disabled: { //是否禁用
 				type: Boolean,
 				default: false
 			},
-			range: { // 是否双滑块模式
+			range: { //是否双滑块模式
 				type: Boolean,
 				default: false
 			},
@@ -68,30 +68,21 @@
 			}
 		},
 		watch: {
-
 			low(to) {
 				this.$emit('lowChange', to) // 左滑块对应数字回调
 			},		 
-
 			high(to) {
-				//右滑块对应数字回调
 				this.defalutFilletData = Math.floor(to * this.filletScale);
 				this.$emit('highChange', to)
 			}
 		},
-
 		mounted() {
 			this.left = this.range ? (this.initialMin - this.min) * this.scale : 0
 			this.right = (this.initialMax - this.min) * this.scale
 		},
-
 		methods: {
-
 			//初始化默认圆角
 			initFilletRadius(filletRadius, filletScale) {
-				
-				//console.log("filletScale="+filletScale);
-				
 				this.initialMax = filletRadius
 				this.filletScale = filletScale
 				this.left = this.range ? (this.initialMin - this.min) * this.scale : 0
@@ -158,7 +149,7 @@
 		}
 
 		.u-slider-handle {
-			// 滑块
+			//滑块
 			position: absolute;
 			z-index: 999;
 			width: 25px;

pages/index/components/scrollView.vue

+<template>
+	<!-- 贴图 -->
+	<view class="content" style="width: 100%; height: 100%; position: relative;"
+		:style="{height: (windowHeight - classificationHeight) +'px',background:backColorVal}">
+		<refresh ref="refresh" @interrupt="interrupt" @pushToInterrupt="pushToInterrupt" @finished="finished"
+			@scrolltolower="g" :scrollHeight="(windowHeight - classificationHeight)" scrollTop="scrollViewTop"
+			@scroll="scroll">
+			<template slot="top">
+				<view style="color: #FFFFFF;position: absolute;  top: 0;width: 100%; text-align: center;"
+					:style="'height:' + 40 + 'px; line-height:' + 40 + 'px;'">{{tip}}</view>
+			</template>
+			<template slot="content">
+				<view style="width:100%; margin: auto; height:calc(100% - 40upx); overflow: hidden;">
+					<view style="float: left; width: calc(100% / 3); margin: 40upx 0 0;"
+						v-for="(item, index) in datalist" :key="index" @click="Worksdetail(item)">
+						<view style="width: 139upx; height: 255upx; margin: auto; position: relative;">
+							<image
+								style="width: 139upx; height: 255upx; margin: auto; border-radius: 14px; overflow: hidden;"
+								:src="(item.image ? item.image:item.url) + '?x-oss-process=image/resize,lfit,w_112'"
+								mode="aspectFit">
+							</image>
+						</view>
+					</view>
+					<view class="align-center"
+						style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
+						v-if="datalist.length == 0">
+						<span class="iconfont icon-wushuju"
+							style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
+						<view style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">啊嘞，还是一片荒漠
+						</view>
+					</view>
+				</view>
+			</template>
+			<template slot="bottom">
+				<view>
+					没有更多数据了
+				</view>
+			</template>
+		</refresh>
+	</view>
+</template>
+
+<script>
+	import homeservice from '@/service/homeservice.js';
+	import refresh from '@/components/xing-refresh/xing-refresh.vue';
+	export default {
+		props: {
+			windowHeight: {
+				type: Number,
+				default: 563
+			},
+			classificationHeight: {
+				type: Number,
+				default: 0
+			},
+		},
+		components: {
+			refresh
+		},
+		data() {
+			return {
+				queryPage: {
+					s: 'Material.list',
+					page: 1,
+					per_page: 50,
+					is_revise: '1', //可调整
+					is_edit: '1', //模板属性
+					is_new: null, //最新
+					is_hot: null, //热门
+					machine_id: null, //设备id
+					material_category_id: "", //
+					material_series_id: "",
+				},
+				queryCollectionPage: {
+
+				},
+				Material_categorydatalist: [], //作品、贴图列表
+				datalist: [], //作品、贴图列表
+				Material_category: [], //贴图分类
+				currentId: -1,
+				/* 控制被选中 */
+				currentIndex: null,
+				/* 控制位置 */
+				tip: '',
+				showState: false,
+				type: 0, //默认 0
+				item: null,
+				scrollViewTop: 0, //滚动距离
+				oldScrollViewTop: 0, //旧数据到顶部位置
+				e: 0, //   弹窗类型	
+				isWork: false, //是否作品
+				historyQueryPage: {
+					goods_id: "", //产品Id
+					s: 'Works.myWorksList',
+					custom_width: "",
+					custom_height: "",
+				}, //历史对象
+				backColorVal: ""
+			};
+		},
+		mounted() {
+			//this.getShapeList()
+		},
+		/**
+		 * 组件的公有方法列表
+		 */
+		methods: {
+
+			scroll(e) {
+				if (e.detail.scrollTop > 1) {
+					this.oldScrollViewTop = e.detail.scrollTop - 0.02
+				}
+			},
+
+			Worksdetail(item) {
+				item.isWork = this.isWork;
+				this.$emit('Worksdetail', item)
+			},
+
+			g(e) {
+				if (this.type == 99) {
+					this.getExcellentMaterialMore(this.item.queryPage)
+				} else {
+					uni.showLoading({
+						title: '正在加载中...'
+					})
+					homeservice.WorksList(this.queryPage).then(result => {
+						this.Material_categorydatalist = this.Material_categorydatalist.concat(result.data)
+						this.datalist = this.datalist.concat(result.data)
+						this.queryPage.page += 1;
+						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();
+					});
+				}
+			},
+
+			interrupt(e) {
+				this.tip = '刷新中'
+				setTimeout(e, 500);
+				this.tip = '刷新成功';
+				this.queryPage.page = 1
+				if (this.type == 99) {
+					this.queryCollectionPage.page = 1;
+					this.getExcellentMaterial(this.item.queryPage)
+				} else {
+					this.getShapeList()
+				}
+			},
+
+			pushToInterrupt() {
+				this.tip = '释放刷新';
+			},
+
+			finished() {
+				this.tip = '下拉刷新';
+			},
+
+			open(item) {
+				if (item.val) {
+					this.backColorVal = item.val
+				} else {
+					this.backColorVal = ""
+				}
+	
+				if (this.e != item.e) {
+					this.datalist = [];
+				}
+				this.isWork = false;
+				this.e = item.e;
+				this.scrollViewTop = 0;
+				this.type = 0;
+				this.showState = false;
+				let loadData = false;
+				if (item.e == 23 || item.e == 2) {
+					if (this.queryPage.material_category_id == item.queryPage.material_category_id) {
+						if (this.queryPage.material_series_id != item.queryPage.material_series_id) {
+							loadData = true;
+						}
+					} else {
+						loadData = true;
+					}
+
+					if (this.datalist == null || this.datalist.length == 0) {
+						loadData = true;
+					}
+				} else if (item.e == 99) {
+					if (this.currentId != item.queryPage.currentId || this.currentId == -1) {
+						loadData = true;
+					}
+					if (this.datalist == null || this.datalist.length == 0) {
+						loadData = true;
+					}
+				}
+				this.queryPage = {
+					s: item.queryPage.s,
+					page: item.queryPage.page, //分页
+					per_page: item.queryPage.per_page, //分页
+					is_revise: item.queryPage.is_revise, //可调整
+					is_edit: item.queryPage.is_edit, //模板属性
+					machine_id: item.queryPage.machine_id, //设备id
+					goods_category_id: item.queryPage.goods_category_id, //星形接口列表增加，产品分类参数
+					material_category_id: item.queryPage.material_category_id, //贴图壁纸选择值一级分类
+					material_series_id: item.queryPage.material_series_id, //贴图壁纸选择值二级分类
+					is_new: item.queryPage.is_new, //最新
+					is_hot: item.queryPage.is_hot, //热门
+					goods_id: item.queryPage.goods_id, //商品id
+					is_under: item.queryPage.is_under, //贴图是否为背景图
+					partner_id: item.queryPage.partner_id, //代理
+					goods_feature_id: this.$base.goods_feature_id
+				}
+				if (item.e == 2) { //贴图
+					if (loadData) {
+						this.queryPage.is_under = '0' //贴图标识
+						this.scrollViewTop = 0;
+						this.oldScrollViewTop = 0;
+						this.getShapeList()
+					} else {
+						this.scrollViewTop = this.oldScrollViewTop
+						this.$nextTick(() => {
+							this.$refs.refresh.scrollTopPostion(this.scrollViewTop);
+						});
+						this.showState = true;
+					}
+				} else if (item.e == 23) { //壁纸
+					if (loadData) {
+						this.queryPage.page = 1;
+						this.queryPage.is_under = '1' //壁纸标识
+						this.oldScrollViewTop = 0;
+						this.scrollViewTop = 0;
+						this.getShapeList()
+					} else {
+						this.scrollViewTop = this.oldScrollViewTop
+						this.$nextTick(() => {
+							this.$refs.refresh.scrollTopPostion(this.scrollViewTop);
+						});
+						this.showState = true;
+					}
+				} else if (item.e == 24) { //背景底色
+					this.queryPage.is_under = '1' //壁纸标识
+					this.queryPage.surface_color_series_id = this.$base.surfaceData.surface_color_series_id //色系编号
+					this.getShapeList()
+					this.oldScrollViewTop = 0;
+					this.scrollViewTop = 0;
+				} else if (item.e == 99) { //点赞贴图
+					this.type = 99;
+					if (loadData) {
+						this.scrollViewTop = 0;
+						this.oldScrollViewTop = 0;
+						this.queryCollectionPage = {
+							page: 1,
+							limit: 25
+						}
+						this.datalist = [];
+						this.item = item;
+						this.getExcellentMaterial(item.queryPage)
+					} else {
+						if (item.queryPage.currentId == 0) {
+							this.isWork = true;
+						}
+						this.scrollViewTop = this.oldScrollViewTop
+						this.$nextTick(() => {
+							this.$refs.refresh.scrollTopPostion(this.scrollViewTop);
+						});
+						this.showState = true;
+					}
+				}
+			},
+
+			getExcellentMaterial(e) {
+				this.datalist = []
+				uni.showLoading({
+					title: '正在加载中...'
+				})
+
+				let url = ''
+				this.currentId = e.currentId;
+				if (e.currentId == 0) {
+					this.isWork = true;
+					this.historyQueryPage.goods_id = this.item.goods_id;
+					this.historyQueryPage.custom_width = this.item.custom_width;
+					this.historyQueryPage.custom_height = this.item.custom_height;
+					homeservice.WorksList(this.historyQueryPage).then(result => {
+						this.datalist = result.data
+						uni.hideLoading();
+					}).catch(err => {
+						uni.showToast({
+							title: err.msg,
+							icon: 'none'
+						})
+						uni.hideLoading();
+					});
+				} else {
+					this.isWork = false;
+					if (e.currentId == 1) {
+						url = '/douyin/Material/getMeMaterial'
+					} else if (e.currentId == 2) {
+						url = '/douyin/Material/getMeCollection'
+					} else if (e.currentId == 3) {
+						url = '/douyin/Material/getFollowMaterials'
+					}
+					this.$http.post(url, this.queryCollectionPage).then(result => {
+
+						uni.hideLoading();
+						//this.datalist = [];
+						if (result.data != null && result.data != "") {
+							this.Material_categorydatalist = result.data.data
+							this.datalist = result.data.data;
+							this.queryCollectionPage.page += 1;
+						}
+
+						// this.Material_categorydatalist = result.data.data
+						// this.datalist = result.data.data;
+						// this.queryCollectionPage.page += 1;
+						// uni.hideLoading();
+						this.tip = '';
+					}).catch(err => {
+						uni.showToast({
+							title: err.msg,
+							icon: 'none'
+						})
+						uni.hideLoading();
+					});
+				}
+			},
+
+
+			getExcellentMaterialMore(e) {
+				if (e.currentId == 0) {
+
+				} else {
+					let url = ''
+					uni.showLoading({
+						title: '正在加载中...'
+					})
+					if (e.currentId == 1) {
+						url = '/douyin/Material/getMeMaterial'
+					} else if (e.currentId == 2) {
+						url = '/douyin/Material/getMeCollection'
+					} else if (e.currentId == 3) {
+						url = '/douyin/Material/getFollowMaterials'
+					}
+					this.$http.post(url, this.queryCollectionPage).then(result => {
+						this.showState = true
+						if (result.data == null || result.data == "") {
+							uni.showToast({
+								title: '没有更多数据了！',
+								icon: 'none'
+							});
+						} else {
+							this.Material_categorydatalist = this.Material_categorydatalist.concat(result.data
+								.data);
+							this.datalist = this.datalist.concat(result.data.data);
+							this.queryCollectionPage.page += 1;
+							if (Math.ceil(result.total / result.per_page) <= this.queryCollectionPage.page) {
+								return setTimeout(() => {
+									uni.showToast({
+										title: '没有更多数据了！',
+										icon: 'none'
+									});
+								}, 500);
+							}
+						}
+						uni.hideLoading();
+					}).catch(err => {
+						this.showState = true
+						uni.showToast({
+							title: err.msg,
+							icon: 'none'
+						})
+						uni.hideLoading();
+					});
+				}
+			},
+
+			//贴图列表
+			getShapeList() {
+				this.datalist = []
+				uni.showLoading({
+					title: '正在加载中...'
+				})
+				homeservice.WorksList(this.queryPage).then(result => {
+					this.Material_categorydatalist = result.data
+					this.datalist = result.data
+					console.log(this.datalist.length);
+					this.queryPage.page += 1;
+					uni.hideLoading();
+					this.tip = '';
+				}).catch(err => {
+					uni.showToast({
+						title: err.msg,
+						icon: 'none'
+					})
+					uni.hideLoading();
+				});
+			}
+		},
+	}
+</script>
+<style lang="scss">
+</style>
\ No newline at end of file

pages/index/components/shapeScrollView.vue

+<template>
+	<!-- 相框 -->
+	<view class="content" style="width: 100%; height: 100%; position: relative;">
+		<refresh @interrupt="interrupt" @pushToInterrupt="pushToInterrupt" @finished="finished" @scrolltolower="g" :scrollHeight="windowHeight">
+			<template slot="top">
+				<view style="color: #FFFFFF;position: absolute;  top: 0;width: 100%; text-align: center;" 
+				:style="'height:' + 40 + 'px; line-height:' + 40 + 'px;'">{{tip}}</view>
+			</template>
+			<template slot="content">
+				<view style="width:100%; margin: auto; height:calc(90% - 160upx); overflow: hidden;">
+					<view style="float: left; width: calc(100% / 3); margin: 40upx 0 0;" v-for="(item, index) in datalist" :key="index" @click="Worksdetail(item)">
+						<view style="width: 148.5upx; height: 204.6upx;margin: auto; position: relative;">
+							<view v-if="item.name == '清除'">
+								<image style="width: 148.5upx; height: 148.5upx;margin: auto;" 
+								src="../../../static/icon/diy_icon_remove_normal.png" mode=""></image>
+							</view>
+							<view v-else :style="{'mask-image':' url(' + item.image + '?x-oss-process=image/resize,lfit,w_112)','-webkit-mask-image':' url(' + item.image + '?x-oss-process=image/resize,lfit,w_112)',}"
+							style="width: 100%; height: 100%; overflow: hidden; mask-size: 80%; -webkit-mask-size: 80%;mask-repeat:no-repeat;-webkit-mask-repeat: no-repeat;">
+								<image style="width: 148.5upx; height: 204.6upx; margin: auto;" :src="item.compose_image  + '?x-oss-process=image/resize,lfit,w_112'"
+								 mode="aspectFill"></image>
+							</view>
+							<!-- <view v-if="Number(item.sales_price) > 0" style="min-width: 39upx; position: absolute; top: 0; right: 0; 
+							background: #EF5354; border-radius: 8upx 0upx 11upx 8upx; text-align: center; padding: 2upx 8upx;
+							font-size: 18upx; font-weight: bold; color: #FFFFFF;">￥{{item.sales_price}}</view> -->
+						</view>
+					</view>
+					<view class="align-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
+					 v-if="datalist.length == 0">
+						<span class="iconfont icon-wushuju" style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
+						<view style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">啊嘞，还是一片荒漠</view>
+					</view>
+				</view>
+			</template>
+			<template slot="bottom">
+				<view>
+				没有更多数据了
+				</view>
+			</template>
+		</refresh>
+	</view>
+</template>
+
+<script>
+	import homeservice from '@/service/homeservice.js';
+	import refresh from '@/components/xing-refresh/xing-refresh.vue';
+	export default {
+		props: {
+			windowHeight: {
+				type: Number,
+				default: 563
+			}
+		},
+		components: {
+			refresh
+		},
+		data() {
+			return {
+				queryPage: {
+					s: 'Material.getShapeList',
+					page: 1,
+					per_page: 50,
+					shape_category_id: null, //分类
+					goods_category_id:null,//星形接口列表增加，产品分类参数
+					total: 0,
+					machine_id: null, //设备id
+				},
+				datalist: [], //作品、贴图列表
+				Material_category:[] ,//贴图分类
+				currentId: 0,/* 控制被选中 */
+				currentIndex:null,/* 控制位置 */
+				tip: ''
+			};
+		},
+		mounted() {
+			// this.getShapeList()
+		},
+		/**
+		 * 组件的公有方法列表
+		 */
+		methods: {
+			Worksdetail(item){
+				console.log(item)
+				this.$emit('Worksdetail',item)
+			},
+			g(e){
+				uni.showLoading({
+					title: '正在加载中...'
+				})
+				homeservice.WorksList(this.queryPage).then(result => {
+					this.datalist = this.datalist.concat(result.data)
+					this.queryPage.page += 1;
+					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();
+				});
+			},
+			interrupt(e) {
+				this.tip = '刷新中'
+				//模拟发送请求
+				setTimeout(e, 500);
+				this.tip = '刷新成功';
+				this.queryPage.page = 1
+				this.getShapeList()
+			},
+			pushToInterrupt() {
+				this.tip = '释放刷新';
+			},
+			finished() {
+				this.tip = '下拉刷新';
+			},
+			open(queryPage) {
+				this.queryPage = {
+					page:queryPage.page,
+					per_page:queryPage.per_page,
+					s:queryPage.s,
+					shape_category_id:queryPage.shape_category_id,
+					goods_category_id:queryPage.goods_category_id,
+					machine_id: queryPage.machine_id, //设备id
+				}
+				this.getShapeList()
+			},
+			// 模板形状列表
+			getShapeList(){
+				console.log(this.windowHeight)
+				this.datalist = []
+				uni.showLoading({title: '正在加载中...'})
+				homeservice.WorksList(this.queryPage).then(result => {
+					this.datalist = result.data
+					// this.datalist.unshift(
+					// 	{
+					// 		compose_image: "../../static/icon/diy_icon_remove_normal.png",
+					// 		id: null,
+					// 		image: "",
+					// 		name: "清除",
+					// 		sales_price: null,
+					// 		shape_category_id: null,
+					// 	}
+					// )
+					this.queryPage.page += 1;
+					uni.hideLoading();
+					this.tip = '';
+				}).catch(err => {
+					uni.showToast({title: err.msg,icon: 'none'})
+					uni.hideLoading();
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	
+</style>

pages/index/components/switchBrands.vue

+<template>
+	<view>
+		<view style="width:630upx; margin:auto; display: flex; flex-direction: column;">
+			<view style="width:100%; min-height: 741upx; background: #282932; border-radius: 10upx; position: relative;">
+				<view @click="cancel()" style="position: absolute; top: 0upx; right: 0upx;">
+					<image src="../../static/mine/icon_guanbi.png" mode=""
+					style="height: 23upx; width: 23upx; padding: 21upx 33upx;"></image>
+				</view>
+				<!-- 品牌 -->
+				<view v-if="sizelist.length == 0">
+					<view style="margin:46upx auto 52upx;font-size: 36upx; color: #FFFFFF; text-align: center;">
+						请选择定制手机壳品牌
+					</view>
+					<!-- 无数据 -->
+					<view v-if="catrgoryList.length == null" style="text-align: center; color: #BEBEBE;">该设备没有库存</view>
+					
+					<scroll-view scroll-y scroll-with-animation style="box-sizing: border-box;white-space: nowrap;
+					width: 288upx; margin:30upx auto; height: 600upx; overflow: hidden;">
+						<view v-for="(item,index) in catrgoryList" :key="index" @click="brandclick(item)"
+						:class="[brandtext == item.title ? 'brandactive':'' ]"
+						style="margin-bottom: 10upx; display: flex;align-items: center;
+						background: #373743;border-radius: 10upx;height: 90upx; line-height: 90upx; justify-content: center; overflow: hidden;">
+							<view style="width: 45%;">
+								<image :src="item.icon" mode="aspectFit" style="width: 30%; height: 60upx; margin-right: 26upx; float: right;"></image>
+							</view>
+							<view style="width: 55%;">
+								<view style="text-align: left; color: #FFFFFF; font-size: 28upx;" >{{item.title}} </view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+				<!-- 机型 -->
+				<view v-if="sizelist.length > 0">
+					<view style="margin:46upx auto 52upx;font-size: 36upx; color: #FFFFFF; text-align: center;">
+						请选择手机壳型号
+					</view>
+					<scroll-view scroll-y scroll-with-animation style="box-sizing: border-box;white-space: nowrap;
+					width: calc(100% - 60upx); margin:30upx auto; height: 500upx; overflow: hidden;">
+						<view v-for="(item,index) in sizelist" :key="index" style="float: left; margin-bottom: 20upx;">
+							<view class="model" :class="[modeltext == item.title ? 'modelactive':'' ]" @click="modelclick(item)">{{item.title}} </view>
+						</view>
+					</scroll-view>
+					<view style="width:100%; display: flex; height: 100upx; align-items: center;border-radius:0 0 10upx 10upx; position: relative;z-index: 3; margin-bottom: 20upx;">
+						<view @click.stop="cancel_center()"  style="width:50%;">
+							<view class="canbutton">返回</view>
+						</view>
+						<view @click.stop="changeChannel()" style="width:50%;">
+							<view class="experiencebutton" style="margin: auto;">
+								确定
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import homeservice from '@/service/homeservice.js';
+	export default {
+		props: {
+			// sn: {
+			// 	type: Number
+			// }
+		},
+		components: {
+			
+		},
+		data() {
+			return {
+				queryPage: {
+					s: 'Material.list',
+				},
+				long: null,
+				catrgoryList:null,
+				sizelist: [],
+				brandtext:null,
+				modeltext:null,
+				goods_id:null,
+				dict_id:null,
+				machine_id:null,
+				key:null,//1直营配送站 2 万能通用版 3色彩自助站
+				goods_id_e:null,
+				sn:null
+			};
+		},
+		mounted() {
+			
+		},
+		/**
+		 * 组件的公有方法列表
+		 */
+		methods: {
+			cancel(){
+				this.$emit('brandscenterclose')
+			},
+			open(options) {
+				this.catrgoryList = this.$base.productfind
+				//console.log(options)
+				if (options.machine_id != 'null') {
+					this.machine_id = options.machine_id;
+					this.key = options.key;
+					this.goods_id = options.goods_id;
+					this.sn = options.sn;
+				}
+				// 查询手机壳品牌
+				this.Customize_now()
+			},
+			brandclick(e){
+				this.brandtext = e.title
+				this.sizelist = e.sub
+			},
+			modelclick(e){
+				this.modeltext = e.title
+				this.goods_id = e.id
+				this.dict_id = e.dict_id
+				this.goods_id_e = e
+			},
+			// 手机壳品牌
+			Customize_now(){
+				homeservice.queryList({
+					s: 'product.find',
+					machine_id:this.machine_id,
+					key:this.key
+				}).then(result => {
+					this.catrgoryList = result[0].brand;
+					this.$base.productfind = result[0].brand
+					console.log(result)
+				}).catch(err => {
+					uni.showToast({title: err.msg,icon: 'none'});
+				});
+				this.sizelist = []
+				this.brandtext = null
+				this.modeltext = null
+				this.goods_id = null
+				this.dict_id = null
+			},
+			cancel_center(){
+				this.modeltext = null
+				this.goods_id = null
+				this.dict_id = null
+				this.sizelist = []
+			},
+			changeChannel(){
+				// 释放锁定库存
+				// homeservice.queryList({
+				// 	// s: 'Order.lockAttrStock',
+				// 	s: 'Order.newLockAttrStock',
+				// 	machine_id:this.machine_id, //设备id
+				// 	goods_id:null, //产品
+				// 	dict_id:null,//产品属性id
+				// 	old_sn:null,
+				// 	onlyClear:1
+				// }).then(result => {
+					
+				// }).catch(err => {
+				// 	uni.showToast({title: err.msg || err.data,icon: 'none'});
+				// });
+				var loading = false
+				if (loading) return;
+				if (this.goods_id == null) {
+					uni.showToast({title: '请选择手机壳型号！',icon: 'none'});
+					return false;
+				}
+				loading = true
+				if (loading) {
+					// 有设备判断设备是否正常
+					if(this.machine_id != undefined && this.machine_id != null && this.machine_id != ''){
+						if(this.key == 2){
+							this.$emit('goodsbrands',{
+								sn:this.sn,
+								goods_id_e:this.goods_id_e
+							})
+						}else{
+							// 锁定库存
+							homeservice.queryList({
+								//s: 'Order.lockAttrStock',
+								s: 'Order.newLockAttrStock',
+								machine_id:this.machine_id, //设备id
+								goods_id:this.goods_id, //产品
+								dict_id:this.dict_id,//产品属性id
+								old_sn:this.sn
+							}).then(result => {
+								this.$base.lockInventory = result //锁库存储存信息
+								//console.log(result.sn)
+								this.sn = result.sn
+								uni.setStorage({
+								    key: 'setgood',
+								    data: {
+										sn:this.sn,
+										brandtext:this.brandtext,
+										modeltext: this.modeltext,
+										goods_id: this.goods_id
+									},
+								    success: function () {
+								        console.log('success');
+								    }
+								});
+								this.$emit('goodsbrands',{
+									sn:this.sn,
+									goods_id_e:this.goods_id_e
+								})
+							}).catch(err => {
+								uni.showToast({title: err.msg || err.data,icon: 'none'});
+							});
+						}
+					}else{
+						this.$emit('goodsbrands',{
+							sn:this.sn,
+							goods_id_e:this.goods_id_e
+						})
+					}
+				}
+			}
+		},
+		onShow(options) {
+			
+		},
+	}
+</script>
+
+<style lang="scss">
+	.experiencebutton{
+		width: 230upx; height: 70upx; line-height: 70upx; text-align: center; color: #FFFFFF;
+		margin:40upx auto 0; border-radius: 35upx; background: linear-gradient(to right,#834DC4,#1983D7);
+		font-size: 26upx;
+	}
+	.canbutton{
+			color: #FFFFFF;
+			font-size: 26upx;
+			width: 218upx;
+			height: 58upx; 
+			line-height: 58upx;
+			border: 1px transparent solid;
+			border-radius: 30px;
+			position: relative;
+			margin: auto;
+			background: #292933;
+			text-align: center;
+	}
+	.canbutton:after{
+			content:'';
+			position: absolute;
+			top: -3px; bottom: -3px;
+			left: -3px; right: -3px;
+			background: linear-gradient(to right,#834DC4,#1983D7);
+			border-radius: 30px;
+			content: '';
+			z-index: -1;
+	}
+	// 品牌
+	.brandactive{
+		background: #141319 !important;
+		color: #FFFFFF !important;
+	}
+	// 型号
+	.model{
+		padding: 0upx 20upx;
+		height: 60upx;
+		line-height: 60upx;
+		background: #141319; 
+		text-align: center;
+		color: #FFFFFF; 
+		border-radius: 30upx;
+		margin-right: 20upx;
+		font-size: 28upx;
+	}
+	.modelactive{
+		color: #1A7DCD;
+	}
+</style>

pages/index/components/textsettings.vue

+<template>
+	<view>
+		
+		<view style="position: fixed;width: 100%" :style="{bottom: inputBottom+'px'}">
+			<view v-if="show && text != 'typeface'" style="width: 100%; height: 95upx; display: flex; flex-direction: row; ">
+				<view style="width: 280upx; height: 100%; background: #292933; border-top-right-radius: 60upx;display: flex; flex-direction: row; ">
+			     <image  v-if="bg_text_color" style="width: 47upx; height: 47upx; display: block;margin-top: 45upx; margin-left:45upx;"
+			      src="../../../static/img/icon_qiehuan_on.png"
+			      mode="aspectFill" @click="bgtextcolor"></image>
+				  <image  v-else style="width: 47upx; height: 47upx; display: block;margin-top: 45upx; margin-left:45upx;"
+				   src="../../../static/img/icon_qiehuan.png"
+				   mode="aspectFill" @click="bgtextcolor"></image>
+				   <view style="width: 80upx; margin-top: 50upx;margin-left: 50upx;" @click="typefaceshow('share')">
+				   	<text style="font-size: 34upx; color: #FFFFFF;">字体</text>
+				   </view>
+			</view>
+		</view>
+		
+		<view style="width: 100% ;background: #292933;">
+			<!-- 字体 -->
+			<view v-if="show && text != 'typeface'" style="display: flex;align-items: center; justify-items: center; border-bottom: 2upx solid #000000;
+			height: 98upx; ">
+				<view style="width: 601upx; height: 57upx; background: rgb(255,255,255,0.1); margin: 21upx 41upx 21upx 21upx; border-radius: 10upx;">
+					<input :fixed="true" :auto-height="true" :show-confirm-bar="false" :cursor-spacing="73" :adjust-position="false"
+					 type="text" maxlength="22" @input="textInput" v-model="data.currentText" @focus="focusTextarea" @blur="blurTextarea"
+					 placeholder="请输入文字内容..." style="font-size: 34upx; font-weight: 400; height: 57upx; line-height: 57upx; padding: 0upx 0 0upx 20upx; color: #FFFFFF;" />
+				</view>
+				<view style="width: 1px; height: 28upx; background: #FFFFFF;"></view>
+				<image style="width: 43upx; height: 30upx; display: block;margin: auto;" src="../../../static/icon/icon_determine.png"
+				 mode="aspectFill" @click="cancel('share')"></image>
+			</view>
+			<view v-if="text == 'typeface'" style="border-bottom: 2upx solid #000000;">
+				<scroll-view style="width: calc(100% - 40upx); margin: auto; height:598upx; overflow: hidden;" scroll-y scroll-with-animation >
+					<view v-for="(item, index) in typefacedata"
+					:style="{'font-family':item.textlong == true ? item.key : item.key + 'ttf','color': data.itemList[data.cidx].font_dict_id == item.id ? '#F56364 !important' : 'none'}" 
+					@click="typefaceClick(item, index)"
+					:key="index" style="font-size: 36upx; color: #FFFFFF; padding:22upx 0 21upx; text-align: center;">
+						<text style="font-size: 20upx;" >
+							<text style="font-size: 32upx;" 
+							:style="{'color': data.itemList[data.cidx].font_dict_id == item.id ? '#F56364 !important' : '#ffffff'}">
+								色彩公园
+							</text>
+							<text v-if="item.remark != ''">
+								{{item.long == true ? '' : '(点击加载)'}}
+							</text>
+							<text v-if="item.remark != ''" style="color: #F56364;">
+								{{item.textlong == false ? '(下载失败,点击重新下载)' : ''}}
+							</text>
+						</text>
+					 </view>
+				</scroll-view>
+			</view>
+			
+			<view v-if="show && text != 'typeface'" style="display: flex; height: 100upx; padding: 38upx 0 41upx; align-items: center;">
+				<!-- 颜色 开始-->
+				<scroll-view style="box-sizing: border-box; white-space: nowrap; 
+				  margin-left: 35upx; margin-right: 35upx;margin-bottom: 30upx; margin-top: 40upx; width: calc(100% - 70upx);" scroll-x
+					scroll-with-animation>
+					<view style="text-align: center; display: inline-block; padding-left: 20upx;"
+						v-for="(item,index) in colorList" :key="index" @click.stop="workcolor(item.color)">
+						<view v-if="data.itemList[data.cidx]">
+							<view v-if="data.itemList[data.cidx].font_color == item.color && !bg_text_color"
+								style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #854AC2; border-radius: 50%;"
+								:style="{background:item.color}"></view>
+							<view
+								v-else-if="data.itemList[data.cidx].under_color == item.color && bg_text_color"
+								style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #854AC2; border-radius: 50%;"
+								:style="{background:item.color}"></view>
+							<view v-else style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #ffffff; border-radius: 50%;"
+								:style="{background:item.color}"></view>
+						</view>
+						<view v-else style="width: 68upx; height: 68upx; background: #000000; border: 4upx solid #ffffff; border-radius: 50%;"
+							:style="{background:item.color}"></view>
+					</view>
+				</scroll-view>
+				<!-- 颜色 结束-->
+			
+			<!-- 字体 -->
+			 </view>
+			<view v-if="!show" style="position: absolute; bottom: 100upx; width: 100%; background: #292933;">
+				<!-- 修改 -->
+				<view v-if="text == 'modify'" 
+				style="display: flex;align-items: center; justify-items: center; border-bottom: 1upx solid #000000;
+				height: 99upx;">
+					<view style="width: 710upx; height: 57upx; background: rgb(255,255,255,0.1); margin: 20upx 40upx 20upx 20upx; border-radius: 10upx;">
+						<input :fixed="true" :auto-height="true" :show-confirm-bar="false" :cursor-spacing="73" :adjust-position="false"
+						 type="text" maxlength="32" @input="textInput" v-model="data.currentText" @focus="focusTextarea" @blur="blurTextarea"
+						 placeholder="请输入文字内容..." style="font-size: 34upx; font-weight: 400; height: 57upx; line-height: 57upx; padding: 0upx 0 0upx 20upx; color: #FFFFFF;" />
+					</view>
+				</view>
+				<!-- 字体 -->
+				<view v-if="text == 'typeface'" style="border-bottom: 1upx solid #000000;">
+					<scroll-view style="width: calc(100% - 40upx); margin: auto; height:300upx; overflow: hidden;" scroll-y scroll-with-animation >
+						<view v-for="(item, index) in textlist"
+						:style="{'font-family': item.fontname,'color': data.itemList[data.cidx].font_family == item.fontname ? '#F56364' : 'none'}" 
+						@click="typefaceClick(item,index)"
+						:key="index" style="font-size: 40upx; color: #FFFFFF; margin: 10upx;">
+							 {{item.text}}
+							 <text style="font-size: 20upx; color: #F56364;">{{item.textlong ? '' : '(该字体加载失败)'}}</text>
+						 </view>
+					</scroll-view>
+				</view>
+				<!-- 颜色 -->
+				<view v-if="text == 'color'" style="display: flex; height: 68upx; padding: 38upx 0 41upx;border-bottom: 1upx solid #000000;">
+					<!-- 背景 -->
+					<view style="width: calc(100% / 7);" @click="bgtextcolor">
+						<image style="width: 69upx; height: 69upx; display: block;margin: auto;" :src="bg_text_color ? '../../../static/icon/icon_qiehuan_one.png' : '../../../static/icon/icon_qiehuan.png'"
+						 mode="aspectFill"></image>
+					</view>
+					<!-- 颜色 -->
+					<view style="width: calc(100% / 7);" @click.stop="workcolor('#000000')">
+						<view v-if="data.itemList[data.cidx].font_color == '#000000' && !bg_text_color" style="width: 60upx; height: 60upx; background: #000000; border: 4upx solid #EF6262; border-radius: 50%;"></view>
+						<view v-else-if="data.itemList[data.cidx].under_color == '#000000' && bg_text_color" style="width: 60upx; height: 60upx; background: #000000; border: 4upx solid #EF6262; border-radius: 50%;"></view>
+						<view v-else style="width: 68upx; height: 68upx; background: #000000; border-radius: 50%;"></view>
+					</view>
+					<view style="width: calc(100% / 7);" @click.stop="workcolor('#FFFFFF')">
+						<view v-if="data.itemList[data.cidx].font_color == '#FFFFFF' && !bg_text_color" style="width: 60upx; height: 60upx; background: #FFFFFF; border: 4upx solid #EF6262; border-radius: 50%;"></view>
+						<view v-else-if="data.itemList[data.cidx].under_color == '#FFFFFF' && bg_text_color" style="width: 60upx; height: 60upx; background: #FFFFFF; border: 4upx solid #EF6262; border-radius: 50%;"></view>
+						<view v-else style="width: 68upx; height: 68upx; background: #FFFFFF; border-radius: 50%;"></view>
+					</view>
+					<view style="width: calc(100% / 7);" @click.stop="workcolor('#E60012')">
+						<view v-if="data.itemList[data.cidx].font_color == '#E60012' && !bg_text_color" style="width: 60upx; height: 60upx; background: #E60012; border: 4upx solid #EF6262; border-radius: 50%;"></view>
+						<view v-else-if="data.itemList[data.cidx].under_color == '#E60012' && bg_text_color" style="width: 60upx; height: 60upx; background: #E60012; border: 4upx solid #EF6262; border-radius: 50%;"></view>
+						<view v-else style="width: 68upx; height: 68upx; background: #E60012; border-radius: 50%;"></view>
+					</view>
+					<view style="width: calc(100% / 7);" @click.stop="workcolor('#060CDE')">
+						<view v-if="data.itemList[data.cidx].font_color == '#060CDE' && !bg_text_color" style="width: 60upx; height: 60upx; background: #060CDE; border: 4upx solid #EF6262; border-radius: 50%;"></view>
+						<view v-else-if="data.itemList[data.cidx].under_color == '#060CDE' && bg_text_color" style="width: 60upx; height: 60upx; background: #060CDE; border: 4upx solid #EF6262; border-radius: 50%;"></view>
+						<view v-else style="width: 68upx; height: 68upx; background: #060CDE; border-radius: 50%;"></view>
+					</view>
+					<view style="width: calc(100% / 7);" @click.stop="workcolor('#E65C00')">
+						<view v-if="data.itemList[data.cidx].font_color == '#E65C00' && !bg_text_color" style="width: 60upx; height: 60upx; background: #E65C00; border: 4upx solid #EF6262; border-radius: 50%;"></view>
+						<view v-else-if="data.itemList[data.cidx].under_color == '#E65C00' && bg_text_color" style="width: 60upx; height: 60upx; background: #E65C00; border: 4upx solid #EF6262; border-radius: 50%;"></view>
+						<view v-else style="width: 68upx; height: 68upx; background: #E65C00; border-radius: 50%;"></view>
+					</view>
+					<!-- 加粗 -->
+					<view style="width: calc(100% / 7);" @click.stop='workweight'>
+						<view v-if="data.itemList[data.cidx].font_style != 'bold'" style="width: 68upx; height: 68upx; text-align: center; background: #282A32; border-radius: 5px;">
+							<text style="font-size: 34upx; font-weight: 800; color: #666666; line-height: 68upx;">B</text>
+						</view>
+						<view v-else style="width: 68upx; height: 68upx; text-align: center; background: #F56364;  border-radius: 5px;">
+							<text style="font-size: 34upx; font-weight: 800; color: #fff; line-height: 68upx;">B</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!-- 切换 -->
+			<view v-if="!show" class="tooltextone">
+				<view style="width: calc(100% - 125upx);display: flex; justify-content: center;">
+					<view class="tooltext_li"@click="modify('modify')">
+						<image style="width: 50upx; height: 50upx; display: block;margin: auto;" src="../../../static/icon/diy_icon_editor_default.png"
+						 mode=""></image>
+						<view class="tooltext_li_text">修改</view>
+					</view>
+					<view class="tooltext_li" @click="color('color')">
+						<image style="width: 50upx; height: 50upx; display: block;margin: auto;" src="../../../static/icon/replace.png"
+						 mode=""></image>
+						<view class="tooltext_li_text">颜色</view>
+					</view>
+					<view class="tooltext_li" @click="keyboard">
+						<image style="width: 50upx; height: 50upx; display: block;margin: auto;" src="../../../static/icon/diy_icon_on_default.png"
+						 mode=""></image>
+						<view class="tooltext_li_text">键盘</view>
+					</view>
+				</view>
+				<view style="width: 125upx;" @click="cancel('share')">
+					<view style="display: flex; padding:36upx 0;">
+						<view style="width: 1px; height: 28upx; background: #FFFFFF;"></view>
+						<image style="width: 43upx; height: 30upx; display: block;margin: auto;" src="../../../static/icon/icon_determine.png"
+						 mode="aspectFill"></image>
+					</view>
+				 </view>
+			 </view>
+			 
+			 
+		   </view> 
+		</view>
+	</view>
+</template>
+
+<script>
+	import loadFont from '@/util/loadFont.js'
+	import homeservice from '@/service/homeservice.js';
+	var app = getApp(); // 当前APP实例
+	
+	export default {
+		props: {
+
+		},
+		components: {
+
+		},
+		data() {
+			return {
+				show:true,
+				data: null,
+				bg_text_color: null,
+				inputBottom: 0,
+				text:'modify',
+				textlist:[
+					{text:'仓耳小丸子',url:'url("https://tprint.refinecolor.com/text/CangErXiaoWanZi.ttf")',fontname:'仓耳小丸子',lineheight:1.26,long:false,textlong:null},
+					{text:'千图小兔体',url:'url("https://tprint.refinecolor.com/text/Qiantu_rabbit.ttf")',fontname:'千图小兔体',lineheight:1.2,long:false,textlong:null},
+					{text:'站酷酷黑',url:'url("https://tprint.refinecolor.com/text/Stand_cool_black.ttf")',fontname:'站酷酷黑',lineheight:1.14,long:false,textlong:null},
+					{text:'站酷快乐体',url:'url("https://tprint.refinecolor.com/text/Standing_cool_happy_body.ttf")',fontname:'站酷快乐体',lineheight:1.14,long:false,textlong:null},
+					{text:'站酷庆科黄油体',url:'url("https://tprint.refinecolor.com/text/ZhankuQingkeButterBody.ttf")',fontname:'站酷庆科黄油体',lineheight:1.18,long:false,textlong:null},
+					{text:'字体视界法棍体',url:'url("https://tprint.refinecolor.com/text/Font_horizon_method_stick_body.ttf")',fontname:'字体视界法棍体',lineheight:1.14,long:false,textlong:null},
+				],
+				typefacedata:null,
+				colorList: [{
+						color: '#000000',
+						index: '01'
+					},
+					{
+						color: '#FFFFFF',
+						index: '01'
+					},
+					{
+						color: '#7f2a3f',
+						index: '01'
+					}, {
+						color: '#e24187',
+						index: '03'
+					}, {
+						color: '#f5305d',
+						index: '04'
+					}, {
+						color: '#de4156',
+						index: '05'
+					}, {
+						color: '#fe42cd',
+						index: '06'
+					}, {
+						color: '#f48b9a',
+						index: '07'
+					}, {
+						color: '#ec8191',
+						index: '08'
+					}, {
+						color: '#f9aeb5',
+						index: '09'
+					}, {
+						color: '#f21d5f',
+						index: '10'
+					}, {
+						color: '#cc3739',
+						index: '11'
+					}, {
+						color: '#dd5047',
+						index: '12'
+					}, {
+						color: '#e24187',
+						index: '13'
+					}, {
+						color: '#fa6449',
+						index: '14'
+					}, {
+						color: '#e8495b',
+						index: '15'
+					}, {
+						color: '#fb7162',
+						index: '16'
+					}, {
+						color: '#f6afd1',
+						index: '17'
+					}, {
+						color: '#fbb6b9',
+						index: '18'
+					}, {
+						color: '#db6f27',
+						index: '21'
+					}, {
+						color: '#ed702e',
+						index: '22'
+					}, {
+						color: '#f99627',
+						index: '23'
+					}, {
+						color: '#eb8926',
+						index: '24'
+					}, {
+						color: '#edc3aa',
+						index: '25'
+					}, {
+						color: '#e1d8cf',
+						index: '26'
+					}, {
+						color: '#deebc5',
+						index: '27'
+					}, {
+						color: '#fccdc7',
+						index: '28'
+					}, {
+						color: '#dbbdd2',
+						index: '29'
+					}, {
+						color: '#e8a321',
+						index: '31'
+					}, {
+						color: '#db6f27',
+						index: '32'
+					}, {
+						color: '#edb74b',
+						index: '33'
+					}, {
+						color: '#e8b741',
+						index: '34'
+					}, {
+						color: '#fef052',
+						index: '35'
+					}, {
+						color: '#ffd684',
+						index: '36'
+					}, {
+						color: '#e2d958',
+						index: '37'
+					}, {
+						color: '#e2e5d0',
+						index: '38'
+					}, {
+						color: '#ba9431',
+						index: '41'
+					}, {
+						color: '#797f5d',
+						index: '42'
+					}, {
+						color: '#536d50',
+						index: '43'
+					}, {
+						color: '#d8b53f',
+						index: '44'
+					}, {
+						color: '#d4c172',
+						index: '45'
+					}, {
+						color: '#32b75c',
+						index: '46'
+					}, {
+						color: '#90D15B',
+						index: '47'
+					}, {
+						color: '#c5d52a',
+						index: '48'
+					}, {
+						color: '#e8e098',
+						index: '49'
+					}, {
+						color: '#1b6661',
+						index: '50'
+					}, {
+						color: '#3b4f4d',
+						index: '51'
+					}, {
+						color: '#336559',
+						index: '52'
+					}, {
+						color: '#01776e',
+						index: '53'
+					}, {
+						color: '#2e7662',
+						index: '54'
+					}, {
+						color: '#439877',
+						index: '55'
+					}, {
+						color: '#0ba066',
+						index: '56'
+					}, {
+						color: '#318488',
+						index: '57'
+					}, {
+						color: '#6fd3c9',
+						index: '58'
+					}, {
+						color: '#b9d3ac',
+						index: '59'
+					}, {
+						color: '#0e898e',
+						index: '61'
+					}, {
+						color: '#317194',
+						index: '62'
+					}, {
+						color: '#029bc7',
+						index: '63'
+					}, {
+						color: '#2a8ec9',
+						index: '64'
+					}, {
+						color: '#57c9d3',
+						index: '65'
+					}, {
+						color: '#65b3df',
+						index: '67'
+					}, {
+						color: '#8bd0d7',
+						index: '68'
+					}, {
+						color: '#4B4881',
+						index: '69'
+					}, {
+						color: '#77A1CB',
+						index: '70'
+					}, {
+						color: '#3051BB',
+						index: '71'
+					}, {
+						color: '#2E41A7',
+						index: '72'
+					}, {
+						color: '#704CAE',
+						index: '73'
+					}, {
+						color: '#385BD1',
+						index: '74'
+					}, {
+						color: '#E0DFED',
+						index: '75'
+					}, {
+						color: '#A6BDE9',
+						index: '76'
+					}, {
+						color: '#B3B9DD',
+						index: '77'
+					}, {
+						color: '#7942A8',
+						index: '81'
+					}, {
+						color: '#8F52BA',
+						index: '82'
+					}, {
+						color: '#9680C0',
+						index: '83'
+					}, {
+						color: '#CD82BB',
+						index: '84'
+					}, {
+						color: '#8E2A80',
+						index: '85'
+					}, {
+						color: '#E24CB0',
+						index: '86'
+					}, {
+						color: '#CC2A75',
+						index: '87'
+					}, {
+						color: '#ED89D2',
+						index: '88'
+					}, {
+						color: '#F562B6',
+						index: '89'
+					}, {
+						color: '#8B3B32',
+						index: '91'
+					}, {
+						color: '#593A35',
+						index: '92'
+					}, {
+						color: '#7A3C2D',
+						index: '93'
+					}, {
+						color: '#7D2E21',
+						index: '94'
+					}, {
+						color: '#935A47',
+						index: '95'
+					}, {
+						color: '#A05047',
+						index: '96'
+					}, {
+						color: '#E39476',
+						index: '97'
+					}, {
+						color: '#4E3F3C',
+						index: '98'
+					}, {
+						color: '#5A4939',
+						index: '99'
+					}, {
+						color: '#EDE8EC',
+						index: '100'
+					}, {
+						color: '#C0813A',
+						index: '101'
+					}, {
+						color: '#77432E',
+						index: '102'
+					}, {
+						color: '#C17748',
+						index: '103'
+					}, {
+						color: '#C7AC39',
+						index: '104'
+					}, {
+						color: '#DBA179',
+						index: '107'
+					}, {
+						color: '#D8D3D0',
+						index: '109'
+					}, {
+						color: '#091A22',
+						index: '120'
+					}, {
+						color: '#CA3A32',
+						index: '121'
+					}, {
+						color: '#FAAB60',
+						index: '122'
+					}, {
+						color: '#CADEAD',
+						index: '123'
+					}, {
+						color: '#C7D858',
+						index: '124'
+					}, {
+						color: '#F264D0',
+						index: '125'
+					}, {
+						color: '#F77ADC',
+						index: '126'
+					}, {
+						color: '#FAE7D9',
+						index: '131'
+					}, {
+						color: '#E6D9D1',
+						index: '132'
+					}, {
+						color: '#EBCDB1',
+						index: '133'
+					}, {
+						color: '#E2DCCC',
+						index: '134'
+					}, {
+						color: '#FAD9D2',
+						index: '135'
+					}, {
+						color: '#E1C2BD',
+						index: '136'
+					}, {
+						color: '#E5BBCF',
+						index: '137'
+					}, {
+						color: '#F7BACC',
+						index: '138'
+					}, {
+						color: '#E9CBC1',
+						index: '139'
+					}, {
+						color: '#EBB89F',
+						index: '140'
+					}, {
+						color: '#E6D09E',
+						index: '141'
+					}, {
+						color: '#E2B78D',
+						index: '142'
+					}, {
+						color: '#D1E4EB',
+						index: '143'
+					}, {
+						color: '#B9D9EE',
+						index: '144'
+					}, {
+						color: '#CFD0E2',
+						index: '145'
+					}, {
+						color: '#CECFF0',
+						index: '146'
+					}, {
+						color: '#D6C3E3',
+						index: '147'
+					}, {
+						color: '#E3F0C5',
+						index: '163'
+					}, {
+						color: '#DAD792',
+						index: '164'
+					}, {
+						color: '#D4D4BC',
+						index: '166'
+					}, {
+						color: '#C0D0AB',
+						index: '167'
+					}, {
+						color: '#D7C6A8',
+						index: '169'
+					}, {
+						color: '#D9E9E8',
+						index: '171'
+					}, {
+						color: '#B4E0C7',
+						index: '172'
+					}, {
+						color: '#D6E2BA',
+						index: '173'
+					}, {
+						color: '#E3E5D0',
+						index: '174'
+					}, {
+						color: '#C1D39A',
+						index: '175'
+					}, {
+						color: '#AFE4E6',
+						index: '178'
+					}, {
+						color: '#92DDE2',
+						index: '179'
+					}, {
+						color: '#DBE0E6',
+						index: '182'
+					}, {
+						color: '#8FBFF0',
+						index: '183'
+					}, {
+						color: '#9DCDE1',
+						index: '185'
+					}, {
+						color: '#BBC4BF',
+						index: '196'
+					}, {
+						color: '#E484A9',
+						index: '198'
+					}, {
+						color: '#BBC4BF',
+						index: 'GG3'
+					}, {
+						color: '#494A4C',
+						index: 'CG9'
+					}, {
+						color: '#C2CEDA',
+						index: 'BG1'
+					}, {
+						color: '#C1C3D3',
+						index: 'BG3'
+					}, {
+						color: '#8696A3',
+						index: 'BG5'
+					}, {
+						color: '#646A76',
+						index: 'BG7'
+					}, {
+						color: '#415361',
+						index: 'BG9'
+					}, {
+						color: '#DFDEE3',
+						index: 'WG.5'
+					}, {
+						color: '#CBC6CC',
+						index: 'WG1'
+					}, {
+						color: '#B6B0B2',
+						index: 'WG2'
+					}, {
+						color: '#C5BBBA',
+						index: 'WG3'
+					}, {
+						color: '#958A92',
+						index: 'WG4'
+					}, {
+						color: '#837477',
+						index: 'WG5'
+					}, {
+						color: '#8A7E7E',
+						index: 'WG6'
+					}, {
+						color: '#4D4342',
+						index: 'WG9'
+					}
+				],
+			};
+		},
+		onShow() {
+			
+		},
+		onLoad() {
+			
+		},
+		
+		mounted() {
+			
+		},
+		/**
+		 * 组件的公有方法列表
+		 */
+		methods: {
+			
+			//过滤字符串
+			filterTextInput(textStr) {
+				let content = textStr.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\，\-\——\=\;\@\！\!\+\$\%\*\(\)\#\&\*]/g, '');
+				let that = this;
+				setTimeout(function() {
+					that.data.currentText = content;
+					that.$emit('textInput', content)
+				}, 0);
+			},
+			
+			typefaceshow(e){
+				this.$emit('typefaceshow', e)
+			},
+			keyboard(e) {
+				this.inputBottom = 0
+			},
+			typeface(e) {
+				this.text = e
+				this.inputBottom = 0
+			},
+			typefaceClick(e,index) {
+				if((index + 1) == this.typefacedata.length){
+					if(e.textlong == true){
+						this.$emit('typefaceClick', e)
+					}else{
+						if(e.remark != ''){
+							this.loadFont(e)
+						}else{
+							this.$emit('typefaceClick', e)
+						}
+					}
+				}else{
+					this.$emit('typefaceClick', e)
+				}
+			},
+			loadFont(textlist) {
+				let that = this;
+				uni.showLoading({
+					title: '字体下载中...',
+					mask: true,
+				});
+				wx.loadFontFace({
+					global:true,
+					family: textlist.key,
+					source: 'url(' + textlist.remark + ')',
+					desc: {
+						weight: 100
+					},
+					success: function(message) {
+						textlist.textlong = true
+					},
+					fail: function(message) {
+						textlist.textlong = false
+					},
+					complete(res) {
+						uni.hideLoading();
+						textlist.long = true
+						that.setData({typefacedata: that.typefacedata});
+						that.$emit('typefaceClick', textlist)
+					}
+				})
+			},
+			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];
+					})
+				});
+			},
+			color(e) {
+				this.text = e
+				this.inputBottom = 0
+			},
+			modify(e) {
+				this.text = e
+				this.inputBottom = 0
+			},
+			focusTextarea(e) {
+				this.inputBottom = e.detail.height;
+			},
+			blurTextarea(e) {
+				this.inputBottom = 0;
+			},
+			textInput(e) {
+				this.filterTextInput(e.detail.value)
+			},
+			cancel(e) {
+				this.$emit('cancel', e)
+			},
+			workcolor(e) {
+				this.$emit('workcolor', e)
+			},
+			workweight(e) {
+				this.$emit('workweight', e)
+			},
+			bgtextcolor(e) {
+				this.$emit('bgtextcolor', e)
+			},
+			open(data) {
+				this.data = data.data
+				this.bg_text_color = data.bg_text_color
+				this.text = data.text
+				if(this.text == 'typeface'){
+					this.typeface('typeface')
+					this.inputBottom = 'none'
+				}
+				if(this.$base.typefacedata.length > 0){
+					this.typefacedata = this.$base.typefacedata
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.tooltextone {
+		position: absolute;
+		bottom: 0;
+		z-index: 1000;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		height: 100upx;
+		background: #292933;
+		.tooltext_li {
+			width: 25%;
+			.tooltext_li_top {
+				border-radius: 50%;
+				text-align: center;
+				width: 41upx;
+				height: 41upx;
+				border: 1upx solid #FFFFFF;
+				display: block;
+				padding: 2upx;
+				margin: 2upx auto;
+				.tooltext_li_top_icon {
+					color: #FFFFFF;
+					font-size: 26upx;
+					line-height: 41upx;
+					text-align: center;
+				}
+			}
+			.tooltext_li_text {
+				text-align: center;
+				color: #FFFFFF;
+				font-size: 22upx;
+			}
+		}
+	}
+	@font-face{
+		font-family: 'Stand_cool_blackttf';
+		src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
+		font-weight: normal;
+		font-style: normal;
+		font-display: swap;
+	}
+	
+	@font-face{
+		font-family: 'CangErXiaoWanZittf';
+		src: url('data:font/truetype;charset=utf-8;base64,AAEAAAAOAIAAAwBgRkZUTYxgdxUAAAyYAAAAHEdERUYAKQANAAAMeAAAAB5PUy8ypWh5tAAAAWgAAABgY21hcAIIjDUAAAHgAAABWmN2dCAAIQJ5AAADPAAAAARnYXNw//8AAwAADHAAAAAIZ2x5Znpt8q4AAANQAAACPGhlYWQZqZPqAAAA7AAAADZoaGVhB4cC4AAAASQAAAAkaG10eAxuALkAAAHIAAAAFmxvY2EBcAICAAADQAAAABBtYXhwAA8AYQAAAUgAAAAgbmFtZXh/J3gAAAWMAAAGlHBvc3T3xaShAAAMIAAAAFAAAQAAAAEAALFcJkBfDzz1AAsD6AAAAADa24hUAAAAANvgx7gAIf+pA60DUAAAAAgAAgAAAAAAAAABAAAD2P7zAAAD6AAAAAADrQABAAAAAAAAAAAAAAAAAAAABAABAAAABwAxAAcAAAAAAAIAAAAAAAAAAAAAAC4AAAAAAAQD6AGQAAUAAAKKAlgAAABLAooCWAAAAV4AMgFBAAACAgQAAAAAAAAAgAAAAxAAAAAAAAASAAAAAFRTQU4AQFFsgnIDcP+IAAAD2AENAAQAAQAAAAACFwLJAAAAIAABA+gAIQAAAAAD6AAAA+gARwBgAFEAVgAAAAAAAwAAAAMAAAAcAAEAAAAAAFQAAwABAAAAHAAEADgAAAAKAAgAAgACUWxW7V9pgnL//wAAUWxW7V9pgnL//66XqRegnH2UAAEAAAAAAAAAAAAAAAABBgAAAQAAAAAAAAABAgAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACECeQAAACoAKgAqAF4AkADoAR4AAgAhAAABKgKaAAMABwAusQEALzyyBwQA7TKxBgXcPLIDAgDtMgCxAwAvPLIFBADtMrIHBgH8PLIBAgDtMjMRIREnMxEjIQEJ6MfHApr9ZiECWAAAAwBH/6kDrQNDAAMAEQAYAAATJxMXARMHJwUnNzYTFwIHJScDFhcGByYDm1TNXAEthVgo/dsHJGNoqmNrAUAsJ7HOLz+yeQFwKgGoIP3H/uwsYTVdA9MBPSr+/9gYawJ+4HVGJJgBHQAEAGD/7gOKAwgAAwASABYAGgAAASE1IQUjNSEVIxUzNxUhESMDIwEhESEXIREhAkr+tAFM/rNTAf1lMFL+8yI0mgIM/coCNrf81gMqAkM/v0BA8lR3ARX+2wIj/XxPAxoAAAAABwBR/7wDoAM/AAMADAAQABQAKAAsADAAAAETFwsBFwcnNwcnNxcnFwcnNyclFwMXBycVIxEHJxMjNTM1MxUzFSMVBScTFxMBJwEB9XaigulvSGkGUSRHM6tMSj0DNAEjUySWPW5yfUekrs5yo6MBBT/WSin+8TkBAwGyASMy/tABGRvRJBQVjBN8QYIhiBmElnz+QY4+evYBAcIwAQQ/Pz8/QBIvATQn/u/+xzgBLwAEAFb/zQONA1AAAwAHAAsAHAAAAQcFNxcjFTMhMzUjARUhESclFwchNxcHMxEhESEBNHoBL3Mmnp7+om9vAmn83RQA/zscASUnPqbP/f0BwgLMcwF0sbCw/mKwAnUd8S0aJzmf/tb+yQAAAAAAABwBVgABAAAAAAAAACQAVAABAAAAAAABAAkAjwABAAAAAAACAAcAqQABAAAAAAADAB0A7QABAAAAAAAEAAkBIQABAAAAAAAFADsBowABAAAAAAAGAAoB9QABAAAAAAAHAEsCmAABAAAAAAAIABQDFgABAAAAAAAJABQDXQABAAAAAAAKABwDrAABAAAAAAALABYD9wABAAAAAAAMABYEPAABAAAAAAANAEQE+QADAAEECQAAAFIAAAADAAEECQABABQAeQADAAEECQACAA4AmQADAAEECQADADoAsQADAAEECQAEABQBCwADAAEECQAFAHYBKwADAAEECQAGABQB3wADAAEECQAHAJYCAAADAAEECQAIADAC5AADAAEECQAJADADKwADAAEECQAKADgDcgADAAEECQALACwDyQADAAEECQAMACwEDgADAAEECQANAKQEUwCpAFMAFwBOAKwATgDTAIAAMwBlAIcAWwBXAGIAgABnAC8AZwAJAJYAUABRAGwAUwD4ADAAAgBPAN0AdQBZAGIAQABnAAkAZwBDAFIAKQAwAAIAAKlTF07CTu4zZVtXYmcvZwlQUWxTvzACT3VZYkBnCWdDUikwAgAATgDTAIAAMwBcAA8ATgA4AFsAUAAATu4zXA9OOFtQAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAAAxAC4AMAAwADAAOwBUAFMAQQBOADsAVABzAGEAbgBnAGUAcgBYAFcAWgA7AFQAUwBBAE4ARwBFAFIAADEuMDAwO1RTQU47VHNhbmdlclhXWjtUU0FOR0VSAABOANMAgAAzAFwADwBOADgAWwBQAABO7jNcD044W1AAAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAwADAAOwBQAFMAIAAxAC4AMAAwADEAOwBoAG8AdABjAG8AbgB2ACAAMQAuADAALgA4ADgAOwBtAGEAawBlAG8AdABmAC4AbABpAGIAMgAuADUALgA2ADQANwA4ADAAMAAAVmVyc2lvbiAxLjAwMDtQUyAxLjAwMTtob3Rjb252IDEuMC44ODttYWtlb3RmLmxpYjIuNS42NDc4MDAAAFQAcwBhAG4AZwBlAHIAWABXAFoAAFRzYW5nZXJYV1oAAFQAcwBhAG4AZwBlAHIAWABXAFoAIABpAHMAIABhACAAdAByAGEAZABlAG0AYQByAGsAIABvAGYAIABCAGUAaQBqAGkAbgBnACAAVABzAGEAbgBnAGUAcgAgAEMAaABhAHIAYQBjAHQAZQByACAAVABlAGMAaABuAG8AbABvAGcAeQAgAEMAbwAuACwAIABMAHQAZAAuAABUc2FuZ2VyWFdaIGlzIGEgdHJhZGVtYXJrIG9mIEJlaWppbmcgVHNhbmdlciBDaGFyYWN0ZXIgVGVjaG5vbG9neSBDby4sIEx0ZC4AAFMAFwBOAKwATgDTAIAAMwBlAIcAWwBXAGIAgABnAC8AZwAJAJYAUABRAGwAUwD4AABTF07CTu4zZVtXYmcvZwlQUWxTvwAAUwAXAE4ArABOANMAgAAzAGUAhwBbAFcAYgCAAGcALwBnAAkAlgBQAFEAbABTAPgAAFMXTsJO7jNlW1diZy9nCVBRbFO/AABDAGgAaQBuAGUAcwBlACAAZgBvAG4AdAAgAGYAbwByACAAYQBuAHkAIABzAHkAcwB0AGUAbQAuAABDaGluZXNlIGZvbnQgZm9yIGFueSBzeXN0ZW0uAAByAG8AZABnAGUAcgAuAGwAaQB1AEAAbwB1AHQAbABvAG8AawAuAGMAbwBtAAByb2RnZXIubGl1QG91dGxvb2suY29tAAByAG8AZABnAGUAcgAuAGwAaQB1AEAAbwB1AHQAbABvAG8AawAuAGMAbwBtAAByb2RnZXIubGl1QG91dGxvb2suY29tAABlAOAAiwC6AGAAqABOAOUATwBVAHkAzQBlALkAXwAPAE8AfwB1ACgAiwDlAFsAVwBPAFMA/wAMAGAAqABfAMUAmAB7AE4AiwBRAEgAgwC3AF8AlwBTABcATgCsAE4A0wCAADMAZQCHAFsAVwBiAIAAZwAvAGcACQCWAFAAUQBsAFMA+AB2AIQAawBjAF8ADwBOAGYAlwBiAIsAuABTAO8AMAACAABliLxgrE6MT1V56mVfD09/dSiMW1dPU9gMYKxfgXtOUUjhX1MXTsJO7jNlW1diZy9nCVBRbFO/dmtjXw9OZmL8U5UwAgAAAgAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAHAAAAAQACAQIBAwEEAQUHdW5pNTE2Qwd1bmk1NkVEB3VuaTVGNjkHdW5pODI3MgAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAYAAQAEAAAAAgAAAAAAAAABAAAAANWkJwgAAAAA2tuIVAAAAADb4Me4') format('truetype');
+		font-weight: normal;
+		font-style: normal;
+		font-display: swap;
+	}
+	
+	@font-face{
+		font-family: 'horizon_method_stick_bodyttf';
+		src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
+		font-weight: normal;
+		font-style: normal;
+		font-display: swap;
+	}
+	@font-face{
+		font-family: 'Qiantu_rabbitttf';
+		src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
+		font-weight: normal;
+		font-style: normal;
+		font-display: swap;
+	}
+	
+	@font-face{
+		font-family: 'Standing_cool_happy_bodyttf';
+		src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
+		font-weight: normal;
+		font-style: normal;
+		font-display: swap;
+	}
+</style>

pages/index/components/vue-ruler-tool.vue

+<template>
+	<view v-show="rulerToggle" :style="{width : windowWidth + 'px',height : windowHeight + 'px',position:position }"
+		class="ScaleBox" @touchmove.stop.prevent="dottedLineMove" @touchend.stop.prevent="dottedLineUp">
+
+		<view id="levelRuler" class="ScaleRuler_h" @touchstart.stop.prevent="levelDragRuler"
+			:style="{transform:'scaleX(' + zoomAndBigScan + ')', right: getWidthCalibrationData()}">
+			<span v-for="(item,index) in xScale" :key="index" :style="{right:index * 50 + 2 + 'px'}"
+				class="n">{{ item.id }}</span>
+		</view>
+
+		<view id="verticalRuler" class="ScaleRuler_v" @touchstart.stop.prevent="verticalDragRuler"
+			:style="{transform:'scaleY(' + zoomAndBigScan + ')', bottom: getHeightCalibrationData() }">
+			<span v-for="(item,index) in yScale" :key="index" :style="{bottom:index * 50 + 2 + 'px'}"
+				class="n">{{ item.id }}</span>
+		</view>
+		<view id="levelDottedLine" :style="{top:(verticalDottedTop - 8)  + 'px'}" class="RefDot_h" style="right:18px;">
+			<view
+				style="position: absolute; left: 0; color: #4AFFFF;font-size: 26upx; height: 25px; top: -12.5px;padding-top: 6px; "
+				v-if="isSelectMoveY">
+				{{showYLine}}
+			</view>
+		</view>
+
+		<view id="verticalDottedLine" :style="{left:(levelDottedLeft - 8)  + 'px'}" class="RefDot_v"
+			style="bottom:18px ">
+			<view
+				style="position: absolute; top:0;color: #4AFFFF;font-size: 26upx;left: -12.5px;width: 25px; text-align: center;"
+				v-if="isSelectMoveX">
+				{{showXLine}}
+			</view>
+		</view>
+
+		<view v-for="item in levelLineList" :id="item.id" :title="item.title" :style="{top:item.top+'px'}"
+			:key="item.id" class="RefLine_h" @touchstart.stop.prevent="dragLevelLine(item.id)"
+			style="height: 25px; right:18px;">
+			<view v-if="isShowDistance"
+				style="position: absolute; left: 0;color: #4AFFFF;font-size: 26upx; height: 25px;text-align: center;  top: -1.5px;padding-top: 6px; ">
+				{{ getRealPxData(item.top,2) }}
+			</view>
+		</view>
+		<view v-for="item in verticalLineList" :id="item.id" :title="item.title" :style="{left:item.left+'px'}"
+			:key="item.id" class="RefLine_v" @touchstart.stop.prevent="dragVerticalLine(item.id)"
+			style=" width: 25px; bottom:18px ">
+			<view v-if="isShowDistance"
+				style="position: absolute; top: 0;color: #4AFFFF;font-size: 26upx; width: 25px;text-align: center; left: -1.5px;">
+				{{ getRealPxData(item.left,1) }}
+			</view>
+		</view>
+		<view id="content" :style="{left: contentLayout.left + 'px',top: contentLayout.top + 'px'}"
+			style="padding: 18px;">
+		</view>
+	</view>
+
+</template>
+
+<script>
+	//var window;
+	export default {
+		name: 'VueRulerTool',
+		components: {},
+		props: {
+			position: {
+				type: String,
+				default: 'relative',
+				validator: function(val) {
+					return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1
+				}
+			},
+			//规定元素的定位类型
+			isHotKey: {
+				type: Boolean,
+				default: true
+			}, //热键开关
+			isScaleRevise: {
+				type: Boolean,
+				default: false
+			},
+			isShowDistance: {
+				type: Boolean,
+				default: true
+			}, //显示距离
+			presetLine: {
+				type: Array,
+				default: () => {
+					return [] // { type: 'l', site: 50 }, { type: 'v', site: 180 }
+				}
+			},
+			//预置参考线
+			contentLayout: {
+				type: Object,
+				default: () => {
+					return {
+						top: 0,
+						left: 0
+					}
+				}
+			}, //内容部分布局
+			parent: {
+				type: Boolean,
+				default: false
+			},
+			//窗口宽度
+			windowWidth: {
+				type: Number,
+				default: 10,
+			},
+			windowHeight: {
+				type: Number,
+				default: 0,
+			},
+			//上间距
+			topSpacing: {
+				type: Number,
+				default: 10,
+			},
+			//左间距
+			leftSpacing: {
+				type: Number,
+				default: 10,
+			},
+			xScale: {
+				type: Array,
+				default: () => {
+					return [] // { type: 'l', site: 50 }, { type: 'v', site: 180 }
+				}
+			},
+			yScale: {
+				type: Array,
+				default: () => {
+					return [] // { type: 'l', site: 50 }, { type: 'v', site: 180 }
+				}
+			},
+			presetLine: {
+				type: Array,
+				default: () => {
+					return [] // { type: 'l', site: 50 }, { type: 'v', site: 180 }
+				}
+			},
+			//尺子间距
+			ruleSpacing: {
+				type: Number,
+				default: 50,
+			},
+			//尺子宽度放大比例
+			ruleWidthScale: {
+				type: Number,
+				default: 1,
+			},
+			//尺子高度放大比例
+			ruleHeightScale: {
+				type: Number,
+				default: 1,
+			},
+			//对比后缩放比例
+			zoomAndBigScan: {
+				type: Number,
+				default: 1,
+			},
+		},
+		data() {
+			return {
+				isDrag: false,
+				dragFlag: '', // 拖动开始标记，可能值x(从水平标尺开始拖动),y(从垂直标尺开始拖动)
+				levelLineList: [], // 生成的水平线列表
+				verticalLineList: [], // 生成的垂直线列表
+				levelDottedLeft: -999, // 水平虚线位置
+				verticalDottedTop: -999, // 垂直虚线位置
+				rulerWidth: 0, // 垂直标尺的宽度
+				rulerHeight: 0, // 水平标尺的高度
+				dragLineId: '', // 被移动线的ID
+				keyCode: {
+					r: 82
+				}, // 快捷键参数
+				rulerToggle: true, // 标尺辅助线显示开关
+				stickerList: [], //贴纸集合
+				showXLine: "", //显示x轴数据
+				showYLine: "", //显示Y轴数据
+				isSelectMoveX: false, //是否选中移动
+				isSelectMoveY: false, //是否选中移动
+			}
+		},
+
+		watch: {
+
+		},
+
+		mounted() {
+			this.init()
+			const self = this // 绑定窗口调整大小onresize事件
+		},
+
+		beforeDestroy: function() {
+
+		},
+
+		methods: {
+
+			//生成坐标点数据
+			generateGuides(XList, YList) {
+				this.verticalLineList = [];
+				this.levelLineList = [];
+				//添加横线
+				if (XList != null) {
+					for (let topDataInit of XList) {
+						this.addNewHorizontalLineList(topDataInit);
+					}
+				}
+				//添加竖线
+				if (YList != null) {
+					for (let leftDataInit of YList) {
+						this.addNewVerticalLineList(leftDataInit);
+					}
+				}
+
+			},
+
+			//新添加横线参考线
+			addNewHorizontalLineList(topDataInit) {
+				let topData = (this.windowHeight - 30.5 - (this.ruleWidthScale * topDataInit)).toFixed(0);
+				this.levelLineList.push({
+					id: 'levelLine' + this.levelLineList.length + 1,
+					title: topData + 'px',
+					top: topData,
+				})
+			},
+
+			//新添加竖线参考线
+			addNewVerticalLineList(leftDataInit) {
+				let leftData = (this.windowWidth - 30.5 - (this.ruleWidthScale * leftDataInit)).toFixed(0);
+				this.verticalLineList.push({
+					id: 'verticalLine' + this.verticalLineList.length + 1,
+					title: leftData + 'px',
+					left: leftData
+				})
+			},
+
+			//保留两位小数点
+			keepTwoNumber(num) {
+				try {
+					num = Number(num.toString().match(/^\d+(?:\.\d{0,6})?/))
+				} catch (e) {
+					//TODO handle the exception
+				}
+				return num
+			},
+
+			//获取宽度校准数据
+			getWidthCalibrationData() {
+				let distance = this.keepTwoNumber(this.windowWidth * (1 - this.zoomAndBigScan) / 2);
+				let widthData = (18 - distance) + "px";
+				return widthData;
+			},
+
+			//获取高度校准数据
+			getHeightCalibrationData() {
+				let distance = this.keepTwoNumber(this.windowHeight * (1 - this.zoomAndBigScan) / 2);
+				let heightData = (18 - distance) + "px";
+				return heightData;
+			},
+
+			//获取水平线列表
+			getlevelLineList() {
+				return this.levelLineList;
+			},
+
+			//生成的垂直线列表
+			getverticalLineList() {
+				return this.verticalLineList;
+			},
+
+			//获取精确像素点 //type=1 ,type =2  //1竖线 2 横线
+			getRealPxData(date, type) {
+				var data;
+				if (type == 1) {
+					data = Math.floor(((this.windowWidth - 30.5 - date) / this.ruleWidthScale))
+				} else {
+					data = Math.floor(((this.windowHeight - 30.5 - date) / this.ruleWidthScale))
+				}
+				return data;
+			},
+
+			//初始化盒子数据
+			init() {
+				this.box()
+			},
+
+			//盒子数据
+			box() {
+				this.rulerWidth = 18;
+				this.rulerHeight = 18;
+			},
+
+			//获取是否参考线
+			getRulerLineIs() {
+				this.$emit('getRulerLineIs', this.levelLineList, this.verticalLineList)
+			},
+
+
+			//获取窗口宽与高生成刻数字
+			scaleCalc() {
+				for (let i = 0; i < this.windowWidth; i += 1) {
+					if (i % 50 === 0) {
+						this.xScale.push({
+							id: i
+						})
+					}
+				}
+				for (let i = 0; i < this.windowHeight; i += 1) {
+					if (i % 50 === 0) {
+						this.yScale.push({
+							id: i
+						})
+					}
+				}
+			},
+
+
+			//添加横线参考线
+			addHorizontalLineList(topDataInit) {
+				let topData = (this.windowHeight - 30.5 - (this.ruleWidthScale * topDataInit)).toFixed(0);
+				// let realTopData = this.getRealPxData(topData, 2);
+				// let distance = realTopData - topDataInit;
+				// if (distance > 0) {
+				// 	distance = distance * this.ruleWidthScale;
+				// 	topData = (1 - distance) + parseFloat(topData)
+				// } else if (distance < 0) {
+				// 	distance = distance * this.ruleWidthScale;
+				// 	topData = (distance) + parseFloat(topData)
+				// }
+				this.levelLineList.push({
+					id: 'levelLine' + this.levelLineList.length + 1,
+					title: topData + 'px',
+					top: topData,
+				})
+				this.getRulerLineIs()
+			},
+
+
+			//添加竖线参考线
+			addVerticalLineList(leftDataInit) {
+				let leftData = (this.windowWidth - 30.5 - (this.ruleWidthScale * leftDataInit)).toFixed(0);
+				// let realLeftData = this.getRealPxData(leftData, 1);
+				// let distance = realLeftData - leftDataInit;
+				// if (distance > 0) {
+				// 	distance = distance * this.ruleWidthScale;
+				// 	leftData = (1 - leftData) + parseFloat(leftData)
+				// } else if (distance < 0) {
+				// 	distance = distance * this.ruleWidthScale;
+				// 	leftData = (distance) + parseFloat(leftData)
+				// }
+				this.verticalLineList.push({
+					id: 'verticalLine' + this.verticalLineList.length + 1,
+					title: leftData + 'px',
+					left: leftData
+				})
+				this.getRulerLineIs()
+			},
+
+
+			//移动开始计算距离
+			dottedLineMove($event) {
+				if (!this.isShowDistance) {
+					return;
+				}
+				switch (this.dragFlag) {
+					case 'x':
+						if (this.isDrag) {
+							this.isSelectMoveY = true;
+							this.verticalDottedTop = $event.changedTouches[0].pageY - this.topSpacing
+							this.showYLine = Math.floor((this.windowHeight - 11.5 - this.verticalDottedTop) / this
+								.ruleWidthScale)
+						} else {
+							this.showYLine = "";
+							this.isSelectMoveY = false;
+						}
+						break
+					case 'y':
+						if (this.isDrag) {
+							this.isSelectMoveX = true;
+							this.levelDottedLeft = $event.changedTouches[0].pageX - this.leftSpacing
+							this.showXLine = Math.floor((this.windowWidth - 11.5 - this.levelDottedLeft) / this
+								.ruleWidthScale)
+
+						} else {
+							this.isSelectMoveX = false;
+							this.showXLine = "";
+						}
+						break
+					case 'l':
+						if (this.isDrag) {
+							this.isSelectMoveY = true;
+							this.verticalDottedTop = $event.changedTouches[0].pageY - this.topSpacing
+							this.showYLine = Math.floor((this.windowHeight - 11.5 - this.verticalDottedTop) / this
+								.ruleWidthScale)
+						} else {
+							this.isSelectMoveY = false;
+							this.showYLine = "";
+						}
+						break
+					case 'v':
+						if (this.isDrag) {
+							this.isSelectMoveX = true;
+							this.levelDottedLeft = $event.changedTouches[0].pageX - this.leftSpacing
+							this.showXLine = Math.floor((this.windowWidth - 11.5 - this.levelDottedLeft) / this
+								.ruleWidthScale)
+
+						} else {
+							this.isSelectMoveX = false;
+							this.showXLine = "";
+						}
+						break
+					default:
+						break
+				}
+			},
+
+
+			//抬起事件
+			dottedLineUp($event) {
+				if (!this.isShowDistance) {
+					return;
+				}
+				if (this.isDrag) {
+					this.isDrag = false
+					switch (this.dragFlag) {
+						case 'x':
+							this.isSelectMoveY = false;
+							if ($event.changedTouches[0].pageY - this.topSpacing < -15) { //超出边界不添加
+								let Index, id
+								this.levelLineList.forEach((item, index) => {
+									if (item.id === this.dragLineId) {
+										Index = index
+										id = item.id
+									}
+								})
+								this.levelLineList.splice(Index, 1, {
+									id: id,
+									title: -600 + 'px',
+									top: -600
+								})
+							} else {
+								this.levelLineList.push({
+									id: 'levelLine' + this.levelLineList.length + 1,
+									title: $event.changedTouches[0].pageY - 1 - this.topSpacing - 18 + 'px',
+									top: $event.changedTouches[0].pageY - 1 - this.topSpacing - 18
+								})
+								this.getRulerLineIs()
+							}
+							break
+						case 'y':
+							this.isSelectMoveX = false;
+							if ($event.changedTouches[0].pageX - this.leftSpacing < -15) { //超出边界不添加
+								//不添加尺子测量线
+								let Index, id
+								this.verticalLineList.forEach((item, index) => {
+									if (item.id === this.dragLineId) {
+										Index = index
+										id = item.id
+									}
+								})
+								this.verticalLineList.splice(Index, 1, {
+									id: id,
+									title: -600 + 'px',
+									left: -600
+								})
+							} else {
+								this.verticalLineList.push({
+									id: 'verticalLine' + this.verticalLineList.length + 1,
+									title: $event.changedTouches[0].pageX - 1 - this.leftSpacing - 18 + 'px',
+									left: $event.changedTouches[0].pageX - 1 - this.leftSpacing - 18
+								})
+								this.getRulerLineIs()
+							}
+							break
+						case 'l':
+							this.isSelectMoveY = false;
+							if ($event.changedTouches[0].pageY - this.topSpacing < -15) {
+								let Index, id
+								this.levelLineList.forEach((item, index) => {
+									if (item.id === this.dragLineId) {
+										Index = index
+										id = item.id
+									}
+								})
+								this.levelLineList.splice(Index, 1, {
+									id: id,
+									title: -600 + 'px',
+									top: -600
+								})
+							} else {
+								let Index, id
+								let top = 0;
+								this.levelLineList.forEach((item, index) => {
+									if (item.id === this.dragLineId) {
+										Index = index
+										id = item.id
+										top = item.top
+									}
+								})
+								let distance = Math.abs(($event.changedTouches[0].pageY - this.topSpacing) - top);
+								if (distance > 18) {
+									this.levelLineList.splice(Index, 1, {
+										id: id,
+										title: $event.changedTouches[0].pageY - 1 - this.topSpacing - 18 + 'px',
+										top: $event.changedTouches[0].pageY - 1 - this.topSpacing - 18
+									})
+									this.getRulerLineIs()
+								}
+							}
+							break
+						case 'v':
+							this.isSelectMoveX = false;
+							if ($event.changedTouches[0].pageX - this.leftSpacing < -15) {
+								let Index, id
+								this.verticalLineList.forEach((item, index) => {
+									if (item.id === this.dragLineId) {
+										Index = index
+										id = item.id
+									}
+								})
+								this.verticalLineList.splice(Index, 1, {
+									id: id,
+									title: -600 + 'px',
+									left: -600
+								})
+							} else {
+								let Index, id
+								let left = 0;
+								this.verticalLineList.forEach((item, index) => {
+									if (item.id === this.dragLineId) {
+										Index = index
+										id = item.id
+										left = item.left
+									}
+								})
+								let distance = Math.abs(($event.changedTouches[0].pageX - this.leftSpacing) - left);
+								if (distance > 18) {
+									this.verticalLineList.splice(Index, 1, {
+										id: id,
+										title: $event.changedTouches[0].pageX - 1 - this.leftSpacing - 18 + 'px',
+										left: $event.changedTouches[0].pageX - 1 - this.leftSpacing - 18
+									})
+									this.getRulerLineIs()
+								}
+							}
+							break
+						default:
+							break
+					}
+					this.verticalDottedTop = this.levelDottedLeft = -10
+				}
+			},
+
+			//虚线松开
+			levelDragRuler() {
+				this.newLevelLine()
+			},
+
+			//水平标尺处按下鼠标
+			verticalDragRuler() {
+				this.newVerticalLine()
+			},
+
+			//垂直标尺处按下鼠标
+			dragLevelLine(id) {
+				//console.log("按下垂直")
+				this.isDrag = true
+				this.dragFlag = 'l'
+				this.dragLineId = id
+			},
+
+			//水平线处按下鼠标
+			dragVerticalLine(id) {
+				this.isDrag = true
+				this.dragFlag = 'v'
+				this.dragLineId = id
+			},
+
+			//生成新参看线
+			newLevelLine() {
+				this.isDrag = true
+				this.dragFlag = 'x'
+			},
+
+			//生成一个水平参考线
+			newVerticalLine() {
+				this.isDrag = true
+				this.dragFlag = 'y'
+			}, //生成一个垂直参考线
+
+			//垂直线处按下鼠标
+			keyboard($event) {
+				if (this.isHotKey) {
+					switch ($event.keyCode) {
+						case this.keyCode.r:
+							this.rulerToggle = !this.rulerToggle
+							break
+					}
+				}
+			},
+
+			//键盘抬起事件
+			quickGeneration(params) {
+				if (params !== []) {
+					params.forEach(item => {
+						switch (item.type) {
+							case 'l':
+								this.levelLineList.push({
+									id: 'levelLine' + this.levelLineList.length + 1,
+									title: item.site + 'px',
+									top: item.site
+								})
+								break
+							case 'v':
+								this.verticalLineList.push({
+									id: 'verticalLine' + this.verticalLineList.length + 1,
+									title: item.site + 'px',
+									left: item.site
+								})
+								break
+							default:
+								break
+						}
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		width: 100%;
+		height: 100%;
+	}
+
+	.ScaleBox {
+		right: 0;
+		bottom: 0;
+		// left: 0;
+		// top: 0;
+		z-index: 999;
+	}
+
+	.ScaleRuler_h,
+	.ScaleRuler_v,
+	.RefLine_v,
+	.RefLine_h,
+	.RefDot_h,
+	.RefDot_v {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		/*left: 0;
+		top: 0; */
+		//overflow: hidden;
+		z-index: 999;
+	}
+
+	.ScaleRuler_h {
+		width: 100%;
+		height: 18px;
+		right: 18px;
+		opacity: 0.8;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAASCAMAAAAuTX21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACNJREFUeNpiYCAdMDKRCka1jGoBA2JZZGshiaCXFpIBQIABAAplBkCmQpujAAAAAElFTkSuQmCC) repeat-x;
+		background-position: 100% 0%
+			/*./image/ruler_h.png*/
+	}
+
+	.ScaleRuler_v {
+		width: 18px;
+		height: 100%;
+		bottom: 18px;
+		right: 0px;
+		opacity: 0.8;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC) repeat-y;
+		background-position: 50% 100%
+			/*./image/ruler_v.png*/
+	}
+
+	.ScaleRuler_v .n,
+	.ScaleRuler_h .n {
+		position: absolute;
+		font: 10px/1 Arial, sans-serif;
+		color: #333;
+		cursor: default;
+	}
+
+	.ScaleRuler_v .n {
+		width: 6px;
+		left: 3px;
+		word-wrap: break-word;
+	}
+
+	.ScaleRuler_h .n {
+		top: 1px;
+	}
+
+	.RefLine_v,
+	.RefLine_h,
+	.RefDot_h,
+	.RefDot_v {
+		z-index: 998;
+	}
+
+	.RefLine_h {
+		width: 100%;
+		height: 3px;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYIACgAADAAAJAAE0lmO3AAAAAElFTkSuQmCC) repeat-x left center;
+		/*./image/line_h.png*/
+		cursor: n-resize;
+		/*url(./image/cur_move_h.cur), move*/
+	}
+
+	.RefLine_v {
+		width: 3px;
+		height: 100%;
+		_height: 9999px;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAMAAAAPxGVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYEAFAAEGAAAQAAGePof9AAAAAElFTkSuQmCC) repeat-y center top;
+		/*./image/line_v.png*/
+		cursor: w-resize;
+		/*url(./image/cur_move_v.cur), move*/
+	}
+
+	.RefDot_h {
+		width: 100%;
+		height: 3px;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==) repeat-x left 1px;
+		/*./image/line_dot.png*/
+		cursor: n-resize;
+		/*url(./image/cur_move_h.cur), move*/
+		top: -10px;
+	}
+
+	.RefDot_v {
+		width: 3px;
+		height: 100%;
+		_height: 9999px;
+		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==) repeat-y 1px top;
+		/*./image/line_dot.png*/
+		cursor: w-resize;
+		/*url(./image/cur_move_v.cur), move*/
+		left: -10px;
+	}
+
+	#content {
+		position: absolute;
+	}
+</style>

pages/index/components/wallpaper.vue

+<template>
+	<view>
+		<view style="width:630upx; margin:auto; display: flex; flex-direction: column;">
+			<view style="width:100%; min-height: 741upx; background: #282932; border-radius: 10upx; position: relative;">
+				<view @click="cancel()" style="position: absolute; top: 0upx; right: 0upx;">
+					<image src="../../static/mine/icon_guanbi.png" mode=""
+					style="height: 23upx; width: 23upx; padding: 21upx 33upx;"></image>
+				</view>
+				<!-- 品牌 -->
+				<view v-if="sizelist.length == 0">
+					<view style="margin:46upx auto 52upx;font-size: 36upx; color: #FFFFFF; text-align: center;">
+						请选择定制手机壳品牌
+					</view>
+					<!-- 无数据 -->
+					<view v-if="catrgoryList.length == null" style="text-align: center; color: #BEBEBE;">该设备没有库存</view>
+					<scroll-view scroll-y scroll-with-animation style="box-sizing: border-box;white-space: nowrap;
+					width: 288upx; margin:30upx auto; height: 600upx; overflow: hidden;">
+						<view v-for="(item,index) in catrgoryList" :key="index" @click="brandclick(item)"
+						:class="[brandtext == item.title ? 'brandactive':'' ]"
+						style="margin-bottom: 10upx; display: flex;align-items: center;
+						background: #373743;border-radius: 10upx;height: 90upx; line-height: 90upx; justify-content: center; overflow: hidden;">
+							<view style="width: 45%;">
+								<image :src="item.icon" mode="aspectFit" style="width: 30%; height: 60upx; margin-right: 26upx; float: right;"></image>
+							</view>
+							<view style="width: 55%;">
+								<view style="text-align: left; color: #FFFFFF; font-size: 28upx;" >{{item.title}} </view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+				<!-- 机型 -->
+				<!-- <view v-if="sizelist.length > 0">
+					<view style="margin:46upx auto 52upx;font-size: 36upx; color: #FFFFFF; text-align: center;">
+						请选择手机壳型号
+					</view>
+					<scroll-view scroll-y scroll-with-animation style="box-sizing: border-box;white-space: nowrap;
+					width: calc(100% - 60upx); margin:30upx auto; height: 500upx; overflow: hidden;">
+						<view v-for="(item,index) in sizelist" :key="index" style="float: left; margin-bottom: 20upx;">
+							<view class="model" :class="[modeltext == item.title ? 'modelactive':'' ]" @click="modelclick(item)">{{item.title}} </view>
+						</view>
+					</scroll-view>
+					<view style="width:100%; display: flex; height: 100upx; align-items: center;border-radius:0 0 10upx 10upx; position: relative;z-index: 3; margin-bottom: 20upx;">
+						<view @click.stop="cancel_center()"  style="width:50%;">
+							<view class="canbutton">返回</view>
+						</view>
+						<view @click.stop="changeChannel()" style="width:50%;">
+							<view class="experiencebutton" style="margin: auto;">
+								确定
+							</view>
+						</view>
+					</view>
+				</view> -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import homeservice from '@/service/homeservice.js';
+	export default {
+		props: {
+		
+		},
+		components: {
+			
+		},
+		data() {
+			return {
+				queryPage: {
+					s: 'Material.list',
+				},
+				long: null,
+				catrgoryList:null,
+				sizelist: [],
+				brandtext:null,
+				modeltext:null,
+				goods_id:null,
+				dict_id:null,
+				key:null,//1直营配送站 2 万能通用版 3色彩自助站
+				machine_id:null,
+				goods_id_e:null,
+			};
+		},
+		mounted() {
+			
+		},
+		/**
+		 * 组件的公有方法列表
+		 */
+		methods: {
+			cancel(){
+				this.$emit('brandscenterclose')
+			},
+			open(options) {
+				this.catrgoryList = this.$base.productfind
+				console.log(options)
+				if (options.machine_id != 'null') {
+					this.machine_id = options.machine_id;
+					this.goods_id = options.goods_id;
+					this.Customize_now()// 随机壁纸
+				}
+			},
+			brandclick(e){
+				this.brandtext = e.title
+				this.sizelist = e.sub
+			},
+			//随机壁纸
+			Customize_now(){
+				homeservice.queryList({
+					s: 'Material.randomMaterial',
+					machine_id:this.machine_id,
+					goods_id:this.goods_id
+				}).then(result => {
+					
+				}).catch(err => {
+					uni.showToast({title: err.msg,icon: 'none'});
+				});
+				//查询颜色列表
+				homeservice.queryList({
+					s: 'Material.colorList',
+					page:1,
+					per_page:20,
+				}).then(result => {
+					console.log(result)
+				}).catch(err => {
+					uni.showToast({title: err.msg,icon: 'none'});
+				});
+				//查询分类
+				homeservice.queryList({
+					s: 'Material.category',
+					machine_id:this.machine_id,
+					key:0
+				}).then(result => {
+					console.log(result)
+				}).catch(err => {
+					uni.showToast({title: err.msg,icon: 'none'});
+				});
+				//查询分类下系列
+				homeservice.queryList({
+					s: 'Material.seriesList',
+					category_id:33,
+				}).then(result => {
+					console.log(result)
+				}).catch(err => {
+					uni.showToast({title: err.msg,icon: 'none'});
+				});
+				//查询分类下面列表
+				homeservice.queryList({
+					s: 'Material.list',
+					machine_id:this.machine_id,//设备id
+					material_category_id:0, //一级分类
+					material_series_id:0,//二级分类
+					is_new:1,//最新
+					is_hot:1,//热门
+					is_recommend:1,//推荐
+					is_under:0, //贴图是否为背景图
+					partner_id:14, 
+					goods_id:24, //商品id
+					page:1,//分页
+					per_page:20,//分页
+				}).then(result => {
+					console.log(result)
+				}).catch(err => {
+					uni.showToast({title: err.msg,icon: 'none'});
+				});
+			}
+		},
+		onShow(options) {
+			
+		},
+	}
+</script>
+
+<style lang="scss">
+	.experiencebutton{
+		width: 230upx; height: 70upx; line-height: 70upx; text-align: center; color: #FFFFFF;
+		margin:40upx auto 0; border-radius: 35upx; background: linear-gradient(to right,#834DC4,#1983D7);
+		font-size: 26upx;
+	}
+	.canbutton{
+			color: #FFFFFF;
+			font-size: 26upx;
+			width: 218upx;
+			height: 58upx; 
+			line-height: 58upx;
+			border: 1px transparent solid;
+			border-radius: 30px;
+			position: relative;
+			margin: auto;
+			background: #292933;
+			text-align: center;
+	}
+	.canbutton:after{
+			content:'';
+			position: absolute;
+			top: -3px; bottom: -3px;
+			left: -3px; right: -3px;
+			background: linear-gradient(to right,#834DC4,#1983D7);
+			border-radius: 30px;
+			content: '';
+			z-index: -1;
+	}
+	//品牌
+	.brandactive{
+		background: #141319 !important;
+		color: #FFFFFF !important;
+	}
+	//型号
+	.model{
+		padding: 0upx 20upx;
+		height: 60upx;
+		line-height: 60upx;
+		background: #141319; 
+		text-align: center;
+		color: #FFFFFF; 
+		border-radius: 30upx;
+		margin-right: 20upx;
+		font-size: 28upx;
+	}
+	.modelactive{
+		color: #1A7DCD;
+	}
+</style>

pages/index/index.vue

@@ -16,20 +16,15 @@
 		<view v-show="!state" class="full-width content-color full-height" :style="{background: design_color }">
 
 			<!-- 取消选中 -->
-			<view class="full-width full-height" style="position: absolute; top: 0; left: 0;" @click.stop="itemCancel">
-			</view>
+			<view class="full-width full-height" style="position: absolute; top: 0; left: 0;" @click.stop="itemCancel"></view>
 
 			<view class="container" @click='itemCancel' @touchmove.stop="touchMove" @touchend.stop="touchEnd">
-
 				<view :style="{width: data.bgWidth +'px',height: data.bgHeight +'px'}" style="position: relative; ">
-
-					<!-- 底色 -->
 					<view
 						:style="{width: data.editorWidth  + 'px',height: data.editorHeight +'px',
 						background:background_color ? background_color : '#F5F5F5' ,borderRadius: isShowCircular ? '50%' : defalutFillet + 'px'  }"
 						style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 1;">
 					</view>
-
 					<!-- 辅助线  -->
 					<view v-if="guide_left"
 						style="border-left: 1px dashed #F29F3D;position: absolute; height: 100%; z-index: 999;"
@@ -71,7 +66,7 @@
 										<!--图片 @load="loadImage"-->
 										<image v-else-if="item.type == 0" mode='aspectFill'
 											style="min-height: 5px;min-width: 5zlzlpx;"
-											:src="item.content + '?x-oss-process=image/resize,lfit,w_1500'"
+											:src="item.content"
 											:data-id="item.id" :style="{width: item.initialWidth * item.initialScale + 'px',
 											height: item.initialHeight * item.initialScale +'px',
 											'margin-top': item.image_top +'px','margin-left': item.image_left +'px'}"></image>
@@ -107,7 +102,6 @@
 											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">
@@ -119,7 +113,6 @@
 											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">
@@ -131,7 +124,6 @@
 											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">
@@ -143,7 +135,6 @@
 											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">
@@ -209,7 +200,6 @@
 
 				<!-- 计算字体大小 -->
 				<view class='item-box' style='top:-1000px;left:-1000px;'>
-					<!-- <view class='item-box' style='top:100px;left:100px;background: #007AFF;'> -->
 					<view class='item-box-in'
 						:style="{width:data.editorWidth + 'px' ,height: data.itemList[data.cidx].height +'px'}"
 						style="text-align: center;">
@@ -253,8 +243,7 @@
 			</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;"
+				<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;">
@@ -284,54 +273,44 @@
 			<!-- 菜单栏目  -->
 			<view v-if="!active && !guide_left" class="toolRight">
 				<view class="tool_li">
-
 					<view class="tool_li" @click="showPopup(99)">
 						<image class="tool_li_img" src="../../static/img/icon_history_image.png" mode=""></image>
 						<view class="tool_li_text">历史作品</view>
 					</view>
-
-
 					<view class="tool_li" @click="showPopup(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="showone = !showone" v-if="diy_upload_menu == 1">
 						<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.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>
-
 				</view>
 			</view>
 
@@ -344,6 +323,17 @@
 						src="../../static/diy_icon_middle_default.png" mode=""></image>
 					<view class="tool_li_text">移除</view>
 				</view>
+
+				<!-- AI图像 -->
+				<view v-if="data.itemList.length > 0">
+					<view class="tool_li" @click.stop='showAiChange()'
+						v-if="data.itemList[data.cidx].type == 0 && data.itemList[data.cidx].isUpLoadImage">
+						<image class="tool_li_img" style="width: 51upx; height: 38upx;"
+							src="../../static/icon_diy_ai.png" mode=""></image>
+						<view class="tool_li_text">图像</view>
+					</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;"
@@ -364,14 +354,13 @@
 					:class="['tool_add',!machine_id ? 'grey' : '']">立即下单</view>
 			</view>
 
-
 			<!-- 预览 -->
 			<view v-if="showtwo">
 				<view
 					style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
 					@click.stop="showtwo = !showtwo"></view>
-				<view style="position: fixed; top:calc((100% - 550upx) / 2); left:calc((100% - 600upx) / 2);
-				z-index:1000; width: 600upx; min-height: 550upx; border-radius: 12upx;">
+				<view
+					style="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;">
@@ -436,9 +425,7 @@
 					<!-- 正文 -->
 					<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>
+						<view style="width: 120upx; height: 188upx;"></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"
@@ -447,15 +434,23 @@
 								<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;"
+										style="width: 60upx; height: 60upx; display: block;margin:auto; padding: 18upx;z-index:1 "
 										:src="index == currentId ? item.icon_click : item.icon" mode="aspectFill">
 									</image>
+									<view v-if="item.update_flag == 1" style="width: 20upx; height: 20upx;
+									     margin-left: 80upx;
+									     background: #ff0000; 
+									     z-index:10;
+									     border-radius: 50%;
+									     margin-top: -80upx;
+									     position: absolute;">
+									</view>
 								</view>
 							</scroll-view>
 						</view>
 					</view>
-					<view style="position: absolute; bottom: 0upx; left: 120upx; height: 100%; width: calc(100% - 240upx); 
-					z-index: 999; overflow: hidden; background: #282932; ">
+					<view
+						style="position: 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"
@@ -468,16 +463,12 @@
 								</swiper-item>
 							</swiper>
 						</view>
-
-
 						<view id="classification" v-if="e_active == 2 || e_active == 23  || e_active == 99"
-							style="width: 100%; position: relative; z-index: 99;  "  >
+							style="width: 100%; position: relative; z-index: 99;  ">
 							<view style="overflow: hidden;" v-if="material_series_list.length > 0">
-								<view
-								  @tap="material_series_handleScroll(index,item)"
+								<view @tap="material_series_handleScroll(index,item)"
 									: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"
-									>
+									:id="'s' + index" v-for="(item, index) in material_series_list" :key="index">
 									<view>{{item.title}}</view>
 								</view>
 							</view>
@@ -486,18 +477,18 @@
 						<!-- 贴图 -->
 						<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>
+							: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>
 
-				<!-- <view v-if="e_active == 0" style="width: 100%; height:100%;  opacity: 1;"></view> -->
-
-
 			</uni-popup>
 			<uni-popup ref="showpicture" type="bottom" @change="change" style="position: fixed; z-index: 9999;">
 				<view class="uni-share"
@@ -523,8 +514,39 @@
 				</view>
 			</uni-popup>
 
-			<switchGoods ref="switchGoods" @selectGoodItem="selectGoodSizeItem" @toCustomSize="toCustomSize">
-			</switchGoods>
+            <!-- Ai转换 -->
+            <uni-popup ref="showAiChange" type="center" style="position: fixed; z-index: 9999; ">
+            	<view style="height: 600upx;border-radius:20upx; background: #fff;width: 600upx;">
+            		<image src="../../static/img/icon_close_image.png" style="width: 30upx;
+            		  padding: 30upx; 
+            		  position: absolute; 
+            		  right:0; 
+            		  top:0;
+            		  z-index: 999;" mode="widthFix" @click="showAiChangeClose()">
+            		</image>
+            		<view style="height: 400upx; padding-top: 80upx;width: 100%;
+            		align-items: center;
+            		display: flex;
+            		flex-direction: row; 
+            		justify-content: center;">
+            			<view style="align-items: center;">
+            				<image style="width:160upx;height:160upx;" src="../../static/icon_diy_anime_style.png"
+            					@click="showAiChangeType(1)"></image>
+            				<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;"> 动漫风格
+            				</view>
+            			</view>
+            			<view style="align-items: center;margin-left: 100upx;">
+            				<image style="width:160upx;height:160upx; " src="../../static/icon_diy_sketch_style.png"
+            					@click="showAiChangeType(2)"></image>
+            				<view style="width:160upx;height:160upx;text-align: center;line-height: 160upx;"> 素描风格
+            				</view>
+            			</view>
+            		</view>
+            		<view style="font-size: 30upx;color:#333; width:100%;text-align: center;margin: auto; ">
+            			选中的图片必须带有清晰人物头像 </view>
+            	</view>
+            </uni-popup>
+			<switchGoods ref="switchGoods" @selectGoodItem="selectGoodSizeItem" @toCustomSize="toCustomSize"></switchGoods>
 			<!--商品弹框 -->
 
 		</view>
@@ -547,6 +569,9 @@
 	import myhead from './head/head.vue'; // 页眉
 	import switchGoods from '../index/switchGoods.vue'; //选择商品
 	import tuya from './tuya.vue'; // 
+	import client from '../../util/script.js' // 封装全局变量
+	import {Base64} from "js-base64"
+	import CryptoJS from 'crypto-js';
 
 	/* 色彩公园图片 DIY 功能页 */
 	var app = getApp(); // 当前APP实例
@@ -574,6 +599,7 @@
 		computed: {},
 		data() {
 			return {
+				
 				collection_currentId: 0, //点赞选中Id
 				collection_currentIndex: null, //点赞选中坐标
 
@@ -743,6 +769,7 @@
 				design_bgwidthrate: 1, //背景宽度比率
 				design_bgheightrate: 1, //背景高度比率
 				pixel_scale: 1,
+				history_bannerList: [] //历史作品banner
 			};
 		},
 
@@ -754,6 +781,186 @@
 
 		methods: {
     
+			showAiChangeClose() {
+				 this.selectChangeType = 1;
+				 this.$refs["showAiChange"].close();
+			},
+			
+			//显示Ai转换
+			showAiChange() {
+				this.selectChangeType = 1;
+				this.$refs["showAiChange"].open();
+			},
+			
+			showAiChangeType(type) {
+				this.selectChangeType = type
+				this.changeHumanPortrait();
+			},
+			
+			//人画像
+			changeHumanPortrait() {
+				var item = this.data.itemList[this.data.cidx];
+				if (item == null) {
+					return
+				}
+				let imageUrl = item.content + "?x-oss-process=image/resize,lfit,w_1000";
+				if (item.isChangeAi) {
+					imageUrl = item.contentOld + "?x-oss-process=image/resize,lfit,w_1000";
+				}
+			
+				uni.showLoading({
+					title: 'AI图像处理中...',
+					mask: true
+				})
+				setTimeout(function() {
+					uni.hideLoading();
+				}, 6000);
+				let that = this;
+				this.getOssStsToken(function(result) {
+					wx.downloadFile({
+						url: imageUrl,
+						success: function(res) {
+							if (res.statusCode === 200) {
+								that.uploadToTempOss(result.Data, res.tempFilePath, ".jpg",
+									function(resultImage) {
+										client.callRecognizeBankCard(resultImage, wx, that.selectChangeType,
+											function(result) {
+												uni.hideLoading();
+												if (result.Code) {
+													uni.showToast({
+														icon: "none",
+														title: "处理失败！图片中无清晰的真人头像",
+														duration: 2000
+													});
+												} else {
+													if (result.Data) {
+														let imageURL = result.Data.ImageURL;
+														imageURL = imageURL.replace("http:",
+															"https:")
+														if (!item.isChangeAi) {
+															item.contentOld = item.content;
+														}
+														item.content = imageURL;
+														item.isChangeAi = true
+														that.data.itemList[that.data.cidx];
+													}
+												}
+												that.$refs["showAiChange"].close();
+											}.bind(this));
+									  }
+								  );
+							 }
+						 }
+					  })
+			    })
+			},
+			
+				
+			getOssStsToken(callback) {
+				//这里endpoint为API访问域名，与类目相关，具体类目的API访问域名请参考：https://help.aliyun.com/document_detail/143103.html
+				const endpoint = "viapiutils.cn-shanghai.aliyuncs.com";
+				const Action = "GetOssStsToken";
+				//API_VERSION为API版本，与类目相关，具体类目的API版本请参考：https://help.aliyun.com/document_detail/464194.html
+				const API_VERSION = "2020-04-01";
+				const API_HTTP_METHOD = "POST";
+				const request_ = {};
+				//系统参数
+				request_["SignatureMethod"] = "HMAC-SHA1";
+				request_["SignatureNonce"] = client.signNRandom();
+				request_["AccessKeyId"] = "LTAI5tDPiEBZgfqNcWBqaFEc";
+				request_["SignatureVersion"] = "1.0";
+				request_["Timestamp"] = client.getTimestamp();
+				request_["Format"] = "JSON";
+				request_["RegionId"] = "cn-shanghai";
+				request_["Version"] = API_VERSION;
+				request_["Action"] = Action;
+				const url = client.generateUrl(request_, API_HTTP_METHOD, endpoint, "amI84BLFbHz6dhOVbuArrERmeemmnx");
+				wx.request({
+					url: url,
+					method: 'POST',
+					header: {
+						"ContentType": "application/json"
+					},
+					success: (result) => {
+						//获取结果
+						return typeof callback == "function" && callback(result.data)
+					},
+					fail: (error) => {
+						//获取报错信息
+						return typeof callback == "function" && callback(error.data)
+					}
+				 })
+			},
+			
+			
+			//使用oss-client-sdk进行文件上传
+			uploadToTempOss(ossStsToken, tempFilePath, fileName, callback) {
+				const host = 'https://viapi-customer-temp.oss-cn-shanghai.aliyuncs.com';
+				let formDataParams = this.getFormDataParams(ossStsToken.AccessKeyId, ossStsToken.AccessKeySecret,
+					ossStsToken.SecurityToken);
+				const signature = formDataParams.signature;
+				const ossAccessKeyId = ossStsToken.AccessKeyId;
+				const policy = formDataParams.policy;
+				const key = "LTAI5tDPiEBZgfqNcWBqaFEc" + '/' + this.getNonce(6) + '/' + fileName;
+				const securityToken = formDataParams['x-oss-security-token'];
+				wx.uploadFile({
+					url: host, // 开发者服务器的URL。
+					filePath: tempFilePath,
+					name: 'file', // 必须填file。
+					formData: {
+						'key': key,
+						'OSSAccessKeyId': ossAccessKeyId,
+						'policy': policy,
+						'Signature': signature,
+						'x-oss-security-token': securityToken
+					},
+					success: (res) => {
+						if (res.statusCode === 204 || res.statusCode === '204') {
+							let result = 'https://viapi-customer-temp.oss-cn-shanghai.aliyuncs.com/' + key;
+							//console.log(result)
+							callback && callback(result);
+						} else {
+							//console.log('upload error', res);
+						}
+					},
+					fail: err => {
+						//console.log(err);
+					}
+			 	});
+			},
+			
+			//随机字符串
+			getNonce(length) {
+				var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+				var result = '';
+				for (var i = length; i > 0; --i) {
+					result += str[Math.floor(Math.random() * str.length)];
+				}
+				return result;
+			},
+			
+			//计算上传OSS的计算签名
+			getFormDataParams(stsAccessKeyId, stsAccessKeySecret, securityToken) {
+				const date = new Date();
+				date.setHours(date.getHours() + 1);
+				const policyText = {
+					expiration: date.toISOString(), // 设置policy过期时间。
+					conditions: [
+						// 限制上传大小。
+						["content-length-range", 0, 1024 * 1024 * 1024],
+					],
+				};
+				const policy = Base64.encode(JSON.stringify(policyText)) // policy必须为base64的string。
+				const signature = CryptoJS.enc.Base64.stringify(CryptoJS.HmacSHA1(policy, stsAccessKeySecret));
+				const formData = {
+					OSSAccessKeyId: stsAccessKeyId,
+					signature,
+					policy,
+					'x-oss-security-token': securityToken
+				}
+				return formData
+			},
+
 			//自定义尺寸
 			toCustomSize() {
 				uni.navigateTo({
@@ -798,7 +1005,6 @@
 			//添加涂鸦
 			tuyaimg(e) {
 				let index = items.length;
-
 				items.push({
 					support_zoom: 1, // 0是不支持缩放，为1时支持缩放
 					support_drag: 1, // 0是不支持拖动，为1时支持拖动
@@ -816,8 +1022,7 @@
 					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是相对定位，所以计算是要多减一次移动的距离
+					left: this.data.editorWidth / 2 - this.data.editorWidth / 2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
 					x: this.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
 					y: this.editor_top,
 					scale: 1, // 缩放比例  1为不缩放
@@ -882,7 +1087,6 @@
 					uni.getImageInfo({
 						src: result.url,
 						success: (image) => {
-							//清空历史记录
 							items = []; // 当前显示的图片列表
 							index = 0; // 所点击的图片的索引
 							snapshot = []; // 操作历史记录清空
@@ -927,10 +1131,8 @@
 								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之后又宽高和初始的图片位置得出
+								left: that.data.editorWidth / 2 - width / 2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
+								x: that.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
 								y: that.editor_top,
 								scale: 1, // 缩放比例  1为不缩放
 								lastScale: 1, // 上一次的绽放比例
@@ -982,7 +1184,7 @@
 				this.showtwo = true
 			},
 
-			/* 上传图片 */
+			/*上传图片 */
 			addItem: async function(e) {
 				this.isUpLoadImage = true;
 				this.showone = false
@@ -1010,7 +1212,7 @@
 				})
 			},
 
-			/* 上传图片拍照 */
+			/*上传图片拍照 */
 			addItemFromCamera: async function(e) {
 				this.isUpLoadImage = true;
 				this.showone = false
@@ -1022,7 +1224,6 @@
 					success: (res) => {
 						this.$refs['showpicture'].close();
 						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];
@@ -1039,7 +1240,8 @@
 					}
 				})
 			},
-			/* 上传图片从相册 */
+			
+			/*上传图片从相册 */
 			addItemFromAlbum: async function(e) {
 				this.isUpLoadImage = true;
 				this.showone = false
@@ -1051,7 +1253,6 @@
 					success: (res) => {
 						this.$refs['showpicture'].close();
 						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];
@@ -1068,7 +1269,8 @@
 					}
 				})
 			},
-			/* 上传图片重微信 */
+			
+			/*上传图片重微信 */
 			addItemFromeWx: async function() {
 				this.showone = false
 				var _this = this
@@ -1168,13 +1370,9 @@
 											let top = 0
 											let lef = 0
 											let ratio = image.width / image.height
-											let ratiowidth = (_this.data.editorWidth *
-												_this.mix_scale) / image.width
-											let ratioheight = (_this.data
-													.editorHeight * _this.mix_scale) /
-												image.height
-											width = _this.data.editorWidth * _this
-												.mix_scale
+											let ratiowidth = (_this.data.editorWidth *_this.mix_scale) / image.width
+											let ratioheight = (_this.data.editorHeight * _this.mix_scale) / image.height
+											width = _this.data.editorWidth * _this.mix_scale
 											height = image.height * ratiowidth
 											_this.isShowGif = true;
 											let index = items.length;
@@ -1193,17 +1391,10 @@
 												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之后又宽高和初始的图片位置得出
+												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, // 上一次的绽放比例
@@ -1229,6 +1420,7 @@
 												image_left: 0, // 图片x
 												frame_top: 0, // 裁剪窗口y
 												image_top: 0, // 图片y
+												isUpLoadImage: true
 											})
 											_this.isUpLoadImage = false;
 											_this.data.itemList = items;
@@ -1243,6 +1435,7 @@
 								wx.showToast({
 									title: '上传失败！',
 									icon: 'none',
+									
 									duration: 1200
 								})
 							},
@@ -1576,36 +1769,32 @@
 			},
 			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") {
-						// 四边伸缩
+					} 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 != null) {
 					item.typetext = null
 				}
 			},
-			// 边框移动
+			//边框移动
 			edgeStart(e, type) {
-				// 获取当前选中的部件
+				//获取当前选中的部件
 				var item = items[index];
 				item.typetext = type //判断边框
 				//获取作为移动前坐标
@@ -1619,19 +1808,18 @@
 				if (item.min_height == 50) {
 					item.min_height = 55
 				}
-				// 记录坐标
+				//记录坐标
 				item.scaleone = item.width / item.height
-
-				// 获取编辑框的左边距和上边距
+				//获取编辑框的左边距和上边距
 				var mLeft = this.getLeft();
 				var mTop = this.getTop();
 				item.mLeft = mLeft
 				item.mTop = mTop
 				drag.recordPressDownData(item);
 			},
-			// 边框移动结束
+			//边框移动结束
 			edgeEnd(e) {
-				// 获取当前选中的部件
+				//获取当前选中的部件
 				var item = items[index];
 				item.typetext = null
 				//属性
@@ -1640,8 +1828,6 @@
 				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();
 			},
@@ -1652,7 +1838,7 @@
 				// 获取产品详情数据
 				this.goodslist()
 			},
-			// 获取作品详情
+			//获取作品详情
 			Worksdetail(item) {
 				this.delete_wrap_state = true
 				if (wx.pageScrollTo) {
@@ -1682,14 +1868,12 @@
 						that.Worksdetaildata(item)
 					}
 				} else if (this.e_active == 2 || this.e_active == 23) {
-					//''console.log("进来壁纸")
 					that.Worksdetaildata(item)
 				} else if (this.e_active == 22) { //特效
 					this.shape_image = item.image
 					this.shape_id = item.id
 					this.shape_price = item.sales_price
 					if (this.shape_image != '' && this.data.itemList.length == 0) {
-						// console.log(this.data.itemList.length)
 						this.showone = !this.showone
 					}
 				} else if (this.e_active == 99) {
@@ -1748,10 +1932,8 @@
 								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之后又宽高和初始的图片位置得出
+								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, // 上一次的绽放比例
@@ -1770,7 +1952,6 @@
 								activescale: false, // 开启旋转状态
 								activehorn: false, // 开启角状态
 								activeedge: false, // 开启边状态
-								// 分界线
 								initialScale: 1, // 图片缩放比例
 								initialscaling: 1, // 图片初始时缩放比例
 								initialScalex: 1, // 图片宽缩放比例
@@ -1792,7 +1973,6 @@
 							title: '加载中...',
 							mask: true
 						})
-
 						let support_zoom = 1; // 0是不支持缩放，为1时支持缩放
 						let support_drag = 1; // 0是不支持拖动，为1时支持拖动
 						let is_under = 0; //贴图是否为背景图
@@ -1800,7 +1980,6 @@
 						let urlData;
 						let material_id = 0; //贴图id
 						let original_id = 0;
-
 						if (isWork) {
 							urlData = result.image
 							result.mix_scale = 1;
@@ -1813,11 +1992,10 @@
 							is_discount = result.is_discount; //贴图是否用卷
 						}
 
-						// 读取主图遮罩
+						//读取主图遮罩
 						uni.getImageInfo({
 							src: urlData,
 							success: (image) => {
-
 								if (this.e_active == 23) {
 									// 清空历史记录
 									items = []; // 当前显示的图片列表
@@ -1833,8 +2011,7 @@
 								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 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
@@ -1901,7 +2078,6 @@
 									frame_top: null, // 裁剪窗口y
 									image_top: null, // 图片y
 								})
-
 								// 提示用户此贴图可用卷
 								if (result.is_discount == '1') {
 									if (this.$base.coupon_flag_desc == '') return;
@@ -1932,13 +2108,16 @@
 					});
 				});
 			},
+			
 			isLeft(flag = null) {
 
 			},
+			
 			bgColorAssembly(bg) {
 				this.background_color = bg
 				this.$refs['showshare'].close()
 			},
+			
 			bgColorClick() {
 				this.queryPage.page = 1
 				this.backgroundColor = !this.backgroundColor
@@ -1956,9 +2135,8 @@
 				}
 			},
 
-			////打开弹框 1模板 2贴图 3字体 4编辑 22添加相框 23壁纸
+			//打开弹框 1模板 2贴图 3字体 4编辑 22添加相框 23壁纸
 			material_series_handleScroll(index, item) {
-				console.log("点击" + index)
 				this.queryPage.page = 1
 				this.material_series_currentId = item.id
 				this.queryPage.material_series_id = item.id
@@ -1971,6 +2149,7 @@
 					this.$refs['scrollList'].open({
 						e: this.e_active,
 						queryPage: this.queryPage,
+						val: this.brands[this.currentId_Material].val
 					})
 				})
 			},
@@ -2031,6 +2210,7 @@
 							this.$refs['scrollList'].open({
 								e: this.e_active,
 								queryPage: this.queryPage,
+								val: this.brands[this.currentId_Material].val
 							})
 						})
 					}
@@ -2046,9 +2226,6 @@
 					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);
@@ -2084,8 +2261,6 @@
 				} 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(() => {
@@ -2102,6 +2277,7 @@
 				}
 			},
 
+
 			MaterialseriesList() { //查询分类下二级分类
 				this.material_series_list = []
 				homeservice.queryList({
@@ -2140,7 +2316,6 @@
 								that.setData({
 									classificationHeight: that.classificationHeight
 								})
-								// console.log('height' + that.classificationHeight)
 							})
 						}.bind(this), 100)
 					} else {
@@ -2154,8 +2329,10 @@
 				});
 			},
 
+
 			//打开弹框 1模板 2贴图 3字体 4编辑 22添加相框 23壁纸
 			showPopup(e) {
+				//console.log("进来数据")
 				this.isShowGif = false;
 				this.material_series_list = []
 				this.queryPage.material_series_id = 0
@@ -2169,11 +2346,7 @@
 				if (e == 1) { //模板
 
 				} else if (e == 2) { //贴图
-
-
 					this.category(2);
-
-
 				} else if (e == 3) { //文本
 					index = null
 					this.addtext = true
@@ -2195,10 +2368,7 @@
 				} else if (e == 22) { //形状
 
 				} else if (e == 23) { //壁纸
-
 					this.category(23);
-
-
 				} else if (e == 24) {
 					this.Adlists = this.diy_bannerList
 					this.backgroundColor = true;
@@ -2206,7 +2376,7 @@
 						this.$refs['bgColor'].open()
 					})
 				} else if (e == 99) { //收藏
-					this.Adlists = this.diy_bannerList
+					this.Adlists = this.history_bannerList
 					this.brands = [{
 							icon: "../../static/img/icon_history_sticker.png",
 							icon_click: "../../static/img/icon_history_sticker-o.png",
@@ -2248,7 +2418,6 @@
 			},
 
 			cancel(type) { //关闭弹框
-				console.log("关闭弹框")
 				this.e_active = 0
 				this.isShowGif = false;
 				try {
@@ -2268,10 +2437,9 @@
 			},
 
 			typefaceshow(type) { //关闭弹框
-				// 获取当前选中的部件
+				//获取当前选中的部件
 				var item = items[index];
 				if (item != undefined && item.type == 1) {
-					// 字体
 					this.$refs['textsettingsshare'].open()
 					this.$nextTick(() => {
 						this.$refs['textsettingstwo'].open({
@@ -2427,7 +2595,7 @@
 					.x;
 				let newY = (origin.y - center.y) * Math.cos(radian) + (origin.x - center.x) * Math.sin(radian) + center
 					.y;
-				// 取10位小数
+				//取10位小数
 				newX = newX.toFixed(10);
 				newY = newY.toFixed(10);
 				return {
@@ -2971,8 +3139,7 @@
 				item.activehorn = true // 角状态
 				item.activeedge = true // 边状态
 				//赋值
-				drag.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos,
-					item)
+				drag.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos,item)
 				this.saveSnapshot();
 			},
 			/* 部件旋转结束事件*/
@@ -3046,15 +3213,15 @@
 				// 当前选中的部件
 				var currentItem = items[index];
 				if (currentItem != null) {
-					// 判断删除的是否是模板组件
+					//判断删除的是否是模板组件
 					if (currentItem.works_id) {
 						this.data.works_idlenght--
 					}
 					let zIndex = items[index].index;
 					let zid = items[index].id;
-					// 删除指定的部件
+					//删除指定的部件
 					items.splice(index, 1);
-					// 后面的部件index需要减1
+					//后面的部件index需要减1
 					for (var item of items) {
 						if (item.index > zIndex) {
 							item.index = item.index - 1;
@@ -3072,8 +3239,8 @@
 				this.saveSnapshot();
 				this.active = false
 			},
-			/* 检测文字的输入 */
-			textInput(e) {
+			/*检测文字的输入 */
+			textInput(content) {
 				if (this.addtext) {
 					let index_id = items.length;
 					items.push({
@@ -3091,7 +3258,7 @@
 						font_size: '50',
 						font_color: '#000000',
 						under_color: '',
-						content: e.detail.value, // 文本
+						content: content, // 文本
 						top: this.editor_top / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
 						left: 0, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
 						x: this.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
@@ -3115,14 +3282,14 @@
 					this.setData({
 						data: this.data
 					})
-					this.text_awaitone(e)
+					this.text_awaitone(content)
 				} else {
-					this.text_await(e)
+					this.text_await(content)
 				}
 			},
-			async text_awaitone(e) {
+			async text_awaitone(content) {
 				// 获取当前选中的部件
-				if (e.detail.value == '' || e.detail.value == null) {
+				if (content == '' || contente == null) {
 					var item = items[index];
 					if (item != null) {
 						this.deleteItem();
@@ -3130,10 +3297,10 @@
 					return;
 				}
 				var item = items[index];
-				item.content = e.detail.value;
+				item.content = content;
 				var that = this;
 				//赋值
-				this.data.currentText = e.detail.value
+				this.data.currentText = content
 				this.data.itemList = items
 				await this.setData({
 					data: this.data
@@ -3160,14 +3327,14 @@
 					that.data.itemList = items
 				})
 			},
-			async text_await(e) {
-				// 获取当前选中的部件
+			async text_await(content) {
+				//获取当前选中的部件
 				var item = items[index];
-				if (e.detail.value != item.content) {
-					item.content = e.detail.value;
+				if (content != item.content) {
+					item.content = content;
 					var that = this;
 					//赋值
-					this.data.currentText = e.detail.value
+					this.data.currentText = content
 					this.data.itemList = items
 					await this.setData({
 						data: this.data
@@ -3178,7 +3345,6 @@
 						var width = res[0].width;
 						var rate = item.width / width;
 						var tmpSize = item.font_size * rate;
-						/* console.log("输入tmpSize大小=" + tmpSize) */
 						if (tmpSize > maxFontSize) {
 							item.font_size = maxFontSize;
 							item.height = maxFontSize * heightRate;
@@ -3188,7 +3354,6 @@
 							item.height = item.height * rate;
 							item.top = item.y - (item.height / 2);
 						}
-						// that.setData({itemList:items});
 						that.setData({
 							data: that.data
 						})
@@ -3279,16 +3444,13 @@
 					if (this.options.WidthIndex > (this.data.windowWidth * this.pixelScale)) {
 						  this.pixel_scale = (this.data.windowWidth * this.pixelScale) / this.options.WidthIndex
 					} else {
-						if (this.options.WidthIndex < (this.data.windowWidth * this.pixelScale) && this.options
-							.HeightIndex < (this.data.windowHeight * this.pixelScale)) {
+						if (this.options.WidthIndex < (this.data.windowWidth * this.pixelScale) && this.options.HeightIndex < (this.data.windowHeight * this.pixelScale)) {
 							this.pixel_scale = 1
 						}
 					}
 					if (this.options.HeightIndex > (this.data.windowHeight * this.pixelScale)) {
-						if ((this.data.windowHeight * this.pixelScale) / this.options.HeightIndex < this
-							.pixel_scale) {
-							this.pixel_scale = (this.data.windowHeight * this.pixelScale) / this.options
-								.HeightIndex
+						if ((this.data.windowHeight * this.pixelScale) / this.options.HeightIndex < this.pixel_scale) {
+							this.pixel_scale = (this.data.windowHeight * this.pixelScale) / this.options.HeightIndex
 						}
 					} else {
 						if (this.options.WidthIndex < (this.data.windowWidth * this.pixelScale) && this.options
@@ -3298,8 +3460,7 @@
 					}
 
 					this.design_width = (this.options.WidthIndex * this.pixel_scale) / this.data.pixelRate // 设计宽度
-					this.design_height = (this.options.HeightIndex * this.pixel_scale) / this.data
-						.pixelRate // 设计高度
+					this.design_height = (this.options.HeightIndex * this.pixel_scale) / this.data.pixelRate // 设计高度
 					uni.getImageInfo({
 						src: result.front_image_old,
 						success: (front_image) => {
@@ -3379,6 +3540,7 @@
 						}
 					})
 
+					this.$base.goods_feature_id = result.goods_feature_id
 					this.data.bgImage = result.front_image // 背景图
 					this.data.bgImage_old = result.front_image_old // 旧背景图
 					this.data.bgImage_thumbnail = result.thumbnail // 介绍图片（主图遮罩）
@@ -3400,7 +3562,6 @@
 			},
 
 			category(type) {
-
 				if (type == 2) {
 					//查询贴图分类 key=0贴图
 					homeservice.queryList({
@@ -3409,15 +3570,7 @@
 						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: "最新"
-						}, )
 						this.Adlists = this.diy_bannerList
-
-						//console.log(this.Adlists)
-
 						this.queryPage.goods_id = this.data.goods_id
 						this.brands = this.Material_category
 						this.currentId = this.currentId_Material;
@@ -3448,6 +3601,7 @@
 							this.$refs['scrollList'].open({
 								e: 2,
 								queryPage: this.queryPage,
+								val: this.brands[this.currentId].value
 							 })
 						})
 					}).catch(err => {
@@ -3466,12 +3620,11 @@
 						key: 1,
 					}).then(result => {
 						this.wallpaper_category = result
-						this.wallpaper_category.unshift({
-							icon: "../../static/image/icon_new_default.png",
-							icon_click: "../../static/image/icon_new_pressed.png",
-							title: "最新"
-						}, )
-
+						// this.wallpaper_category.unshift({
+						// 	icon: "../../static/image/icon_new_default.png",
+						// 	icon_click: "../../static/image/icon_new_pressed.png",
+						// 	title: "最新"
+						// }, )
 						this.Adlists = this.diy_backList
 						this.queryPage.goods_id = this.data.goods_id
 						this.brands = this.wallpaper_category //壁纸分类
@@ -3512,9 +3665,7 @@
 						});
 					});
 				}
-
 			},
-
 			itemlongtap(e) { //长按事件
 				var item = items[index]; // 获取当前选中的部件
 			},
@@ -3530,7 +3681,6 @@
 			this.real_width = options.real_width
 			this.data.goods_id = options.good_id;
 			this.options = options;
-
 			let that = this;
 			if (options.type) {
 				if (options.type == 2) {
@@ -3745,6 +3895,14 @@
 			}).then(result => {
 				this.diy_bannerList = result
 			}).catch(err => {});
+			homeservice.queryList({
+				s: 'Ad.list',
+				ad_position_key: 'history_works',
+				machine_id: this.machine_id
+			}).then(result => {
+				this.history_bannerList = result
+			}).catch(err => {});
+
 		},
 		onUnload() { // 卸载程序
 			items = []; // 当前显示的图片列表

pages/index/js/drag.js

@@ -3,6 +3,7 @@ const drag = {
 	 * 部件缩放中事件四角缩放
 	 */
 	scaleMove(e, item, data, allLineListData, designWidth, designHeight) {
+        //console.log(item)
 		item.isShowLineV = false; //初始化默认不显示
 		item.isShowLineH = false; //初始化默认不显示
 		var minwwidth = 20
@@ -66,7 +67,6 @@ const drag = {
 			item.elmW += diffX; //计算高度
 			item.elmH = item.elmW / scale; //计算宽度 对应比例
 		}
-
 		item.isDrag = true;
 		if (item.elmW < minwwidth) {
 			item.elmW = minwwidth //设置最小宽度
@@ -102,6 +102,173 @@ const drag = {
 		item.width = item.elmW //重新设置宽度
 		item.height = item.elmH //重新设置高度
 
+		if (item.typetext == "left-top") {
+			let distance = 0; //相差距离
+			if (item.type == 0 && item.newRotate == 0) {
+				var chosenGuides = this.getIshasDrawData(item, allLineListData)
+				if (chosenGuides.left.dist <= 4) {
+					item.isShowLineV = true;
+					item.selectLineLeft = chosenGuides.left.guide.left;
+					distance = item.left - (chosenGuides.left.guide.left - chosenGuides.left.offset); //计算相差距离
+				} else if (chosenGuides.top.dist <= 4) {
+					item.isShowLineH = true;
+					item.selectLineTop = chosenGuides.top.guide.top
+					distance = item.top - (chosenGuides.top.guide.top - chosenGuides.top.offset); //计算相差距离
+				}
+				if (item.isShowLineV) {
+					item.elmX = item.elmX - distance;
+					item.elmY = item.elmY - (distance * scale);
+					item.elmW = item.elmW + distance;
+					item.elmH = item.elmH + (distance * scale);
+				} else if (item.isShowLineH) {
+					item.elmX = item.elmX - (distance / scale);
+					item.elmY = item.elmY - distance;
+					item.elmW = item.elmW + (distance / scale);
+					item.elmH = item.elmH + distance;
+				} else if (item.left > -4 && item.left < 4 && item.left != 0) {
+					distance = item.left
+					item.elmX = item.elmX - distance;
+					item.elmY = item.elmY - (distance * scale);
+					item.elmW = item.elmW + distance;
+					item.elmH = item.elmH + (distance * scale);
+					item.isShowLineV = true
+					item.selectLineLeft = item.elmX;
+				} else if (item.top > -4 && item.top < 4 && item.top != 0) {
+					distance = item.top
+					item.elmX = item.elmX - (distance / scale);
+					item.elmY = item.elmY - distance;
+					item.elmW = item.elmW + (distance / scale);
+					item.elmH = item.elmH + distance;
+					item.isShowLineH = true
+					item.selectLineTop = item.elmY;
+				}
+				item.left = item.elmX; //重新赋值左上角x位置
+				item.top = item.elmY; //重新赋值左上角y位置
+				item.width = item.elmW //重新设置宽度
+				item.height = item.elmH //重新设置高度
+			}
+		} else if (item.typetext == "left-bottom") {
+			let distance = 0;
+			if (item.type == 0 && item.newRotate == 0) {
+				var chosenGuides = this.getIshasDrawData(item, allLineListData)
+				if (chosenGuides.left.dist <= 4) {
+					item.isShowLineV = true;
+					item.selectLineLeft = chosenGuides.left.guide.left;
+					distance = item.left - (chosenGuides.left.guide.left - chosenGuides.left.offset); //计算相差距离
+				} else if (chosenGuides.top.dist <= 4) {
+					item.isShowLineH = true;
+					item.selectLineTop = chosenGuides.top.guide.top
+					distance = (chosenGuides.top.guide.top - chosenGuides.top.offset) - item.top; //计算相差距离
+				}
+				let buttom = designHeight - (item.top + item.height);
+				if (item.isShowLineV) {
+					item.elmX = item.elmX - distance;
+					item.elmW = item.elmW + distance;
+					item.elmH = item.elmH + (distance * scale);
+				} else if (item.isShowLineH) {
+					item.elmX = item.elmX - (distance / scale);
+					item.elmW = item.elmW + (distance / scale);
+					item.elmH = item.elmH + distance;
+				} else if (item.left > -4 && item.left < 4 && item.left != 0) {
+					distance = item.left
+					item.elmX = item.elmX - distance;
+					item.elmW = item.elmW + distance;
+					item.elmH = item.elmH + (distance * scale);
+					item.isShowLineV = true
+					item.selectLineLeft = item.elmX;
+				} else if (buttom > -4 && buttom < 4 && buttom != 0) {
+					distance = buttom
+					item.elmX = item.elmX - (distance / scale);
+					item.elmW = item.elmW + (distance / scale);
+					item.elmH = item.elmH + distance;
+					item.isShowLineH = true
+					item.selectLineTop = designHeight - 1;
+				}
+				item.left = item.elmX; //重新赋值左上角x位置
+				item.top = item.elmY; //重新赋值左上角y位置
+				item.width = item.elmW //重新设置宽度
+				item.height = item.elmH //重新设置高度
+			}
+		} else if (item.typetext == "right-top") {
+			let distance = 0;
+			if (item.type == 0 && item.newRotate == 0) {
+				var chosenGuides = this.getIshasDrawData(item, allLineListData)
+				if (chosenGuides.left.dist <= 4) {
+					item.isShowLineV = true;
+					item.selectLineLeft = chosenGuides.left.guide.left;
+					distance = (chosenGuides.left.guide.left - chosenGuides.left.offset) - item.left; //计算相差距离
+				} else if (chosenGuides.top.dist <= 4) {
+					item.isShowLineH = true;
+					item.selectLineTop = chosenGuides.top.guide.top
+					distance = item.top - (chosenGuides.top.guide.top - chosenGuides.top.offset); //计算相差距离
+				}
+				let right = designWidth - (item.left + item.width);
+				if (item.isShowLineV) {
+					item.elmY = item.elmY - (distance * scale);
+					item.elmH = item.elmH + (distance * scale);
+					item.elmW = item.elmW + distance;
+				} else if (item.isShowLineH) {
+					item.elmY = item.elmY - distance;
+					item.elmW = item.elmW + (distance / scale);
+					item.elmH = item.elmH + distance;
+				} else if (right > -4 && right < 4 && right != 0) {
+					distance = right
+					item.elmY = item.elmY - (distance * scale);
+					item.elmW = item.elmW + distance;
+					item.elmH = item.elmH + (distance * scale);
+					item.isShowLinV = true
+					item.selectLineLeft = designWidth - 0.5;
+				} else if (item.top > -4 && item.top < 4 && item.top != 0) {
+					distance = item.top
+					item.elmY = item.elmY - distance;
+					item.elmW = item.elmW + (distance / scale);
+					item.elmH = item.elmH + distance;
+					item.isShowLineH = true
+					item.selectLineTop = item.elmY;
+				}
+				item.left = item.elmX; //重新赋值左上角x位置
+				item.top = item.elmY; //重新赋值左上角y位置
+				item.width = item.elmW //重新设置宽度
+				item.height = item.elmH //重新设置高度
+			}
+		} else if (item.typetext == "right-bottom") {
+			let distance = 0;
+			if (item.type == 0 && item.newRotate == 0) {
+				var chosenGuides = this.getIshasDrawData(item, allLineListData)
+				if (chosenGuides.left.dist <= 4) {
+					item.isShowLineV = true;
+					item.selectLineLeft = chosenGuides.left.guide.left;
+					distance = (chosenGuides.left.guide.left - chosenGuides.left.offset) - item.elmX; //计算相差距离
+				} else if (chosenGuides.top.dist <= 4) {
+					item.isShowLineH = true;
+					item.selectLineTop = chosenGuides.top.guide.top
+					distance = (chosenGuides.top.guide.top - chosenGuides.top.offset) - item.elmY; //计算相差距离
+				}
+				let right = designWidth - (item.left + item.width);
+				let buttom = designHeight - (item.top + item.height);
+				if (item.isShowLineV) {
+					item.elmH = item.elmH + (distance * scale);
+					item.elmW = item.elmW + distance;
+				} else if (item.isShowLineH) {
+					item.elmW = item.elmW + (distance / scale);
+					item.elmH = item.elmH + distance;
+				} else if (right > -4 && right < 4 && right != 0) {
+					distance = right
+					item.elmW = item.elmW + distance;
+					item.elmH = item.elmH + (distance * scale);
+					item.isShowLineV = true
+					item.selectLineLeft = designWidth - 0.5;
+				} else if (buttom > -4 && buttom < 4 && buttom != 0) {
+					distance = buttom
+					item.elmW = item.elmW + (distance / scale);
+					item.elmH = item.elmH + distance;
+					item.isShowLineH = true
+					item.selectLineTop = designHeight - 1;
+				}
+				item.width = item.elmW //重新设置宽度
+				item.height = item.elmH //重新设置高度
+			}
+		}
 		let newScale = item.elmH / item.lastElmH //计算新比例
 		item.initialScale = item.lastInitialScale * newScale //乘以对应之前比例
 		item.initialscaling = item.lastInitialscaling * newScale //乘以对应之前比例
@@ -168,6 +335,7 @@ const drag = {
 		}
 	},
 
+
 	/**
 	 * @description: 记录按下数据
 	 */
@@ -214,6 +382,7 @@ const drag = {
 				y: 'top'
 			}
 		}
+
 		//记录对应坐标点坐标
 		if (fixed != null) {
 			//初始化盒子上下左右位置
@@ -229,6 +398,7 @@ const drag = {
 		}
 	},
 
+
 	//计算旋转后坐标点
 	rotatedPoint(rect, rotate, point) {
 		let {
@@ -255,6 +425,7 @@ const drag = {
 
 	//四边伸缩
 	edgeMove(e, item, data, allLineListData, designWidth, designHeight) {
+
 		//修改属性状态
 		item.active = true //辅助线
 		item.activeguide = false //辅助线
@@ -322,7 +493,22 @@ const drag = {
 
 		let newScale = 1;
 		if (item.typetext == "right") {
+			let distance = 0;
 			let right = designWidth - (item.left + item.width);
+			if (item.newRotate == 0) {
+				var chosenGuides = this.getIshasDrawData(item, allLineListData)
+				if (chosenGuides.left.dist <= 4) {
+					item.isShowLineV = true;
+					item.selectLineLeft = chosenGuides.left.guide.left;
+					distance = (chosenGuides.left.guide.left - chosenGuides.left.offset) - item.left; //计算相差距离
+					item.elmW = item.elmW + distance;
+				} else if (right > -4 && right < 4 && right != 0) {
+					distance = right
+					item.elmW = item.elmW + distance;
+					item.isShowLineV = true;
+					item.selectLineLeft = designWidth - 0.5;
+				}
+			}
 			item.left = item.elmX; //重新赋值左上角x位置
 			item.width = item.elmW //重新设置宽度
 			newScale = item.elmW / item.lastElmW //计算新比例
@@ -333,6 +519,27 @@ const drag = {
 			}
 
 		} else if (item.typetext == "left") {
+
+			let distance = 0;
+			if (item.newRotate == 0) {
+				var chosenGuides = this.getIshasDrawData(item, allLineListData)
+				if (chosenGuides.left.dist <= 4) {
+					item.isShowLineV = true;
+					item.selectLineLeft = chosenGuides.left.guide.left;
+					distance = item.left - (chosenGuides.left.guide.left - chosenGuides.left.offset); //计算相差距离
+					item.elmX = item.elmX - distance;
+					item.elmW = item.elmW + distance;
+				} else if (item.left > -4 && item.left < 4 && item.left != 0) {
+					distance = item.left
+					item.elmX = item.elmX - distance
+					item.elmW = item.elmW + distance;
+					item.isShowLineV = true;
+					item.selectLineLeft = 0;
+				}
+				item.left = item.elmX; //重新赋值左上角x位置
+				item.width = item.elmW //重新设置宽度
+			}
+
 			newScale = item.elmW / item.lastElmW //计算新比例
 			let distanceLeft = 0
 			if (item.lastImageLeft > 0) {
@@ -350,6 +557,26 @@ const drag = {
 			}
 
 		} else if (item.typetext == "top") {
+			let distance = 0;
+			if (item.newRotate == 0) {
+				var chosenGuides = this.getIshasDrawData(item, allLineListData)
+				if (chosenGuides.top.dist <= 4) {
+					item.isShowLineH = true;
+					item.selectLineTop = chosenGuides.top.guide.top
+					distance = item.top - (chosenGuides.top.guide.top - chosenGuides.top.offset); //计算相差距离
+					item.elmY = item.elmY - distance;
+					item.elmH = item.elmH + distance;
+				} else if (item.top > -4 && item.top < 4 && item.top != 0) {
+					distance = item.top
+					item.elmY = item.elmY - distance
+					item.elmH = item.elmH + distance;
+					item.isShowLineH = true;
+					item.selectLineTop = item.elmY;
+				}
+				item.top = item.elmY; //重新赋值左上角x位置
+				item.height = item.elmH //重新设置宽度
+			}
+
 			newScale = item.elmH / item.lastElmH //计算新比例
 			let distanceTop = 0
 			if (item.lastImageTop > 0) {
@@ -357,6 +584,7 @@ const drag = {
 			} else {
 				distanceTop = item.lastImageTop + (item.elmH - item.lastElmH);
 			}
+
 			if (distanceTop < 0) {
 				item.image_top = distanceTop;
 			} else {
@@ -367,7 +595,24 @@ const drag = {
 			}
 
 		} else if (item.typetext == "bottom") {
+			let distance = 0;
 			let buttom = designHeight - (item.top + item.height);
+			if (item.newRotate == 0) {
+				var chosenGuides = this.getIshasDrawData(item, allLineListData)
+				if (chosenGuides.top.dist <= 4) {
+					item.isShowLineH = true;
+					item.selectLineTop = chosenGuides.top.guide.top
+					distance = (chosenGuides.top.guide.top - chosenGuides.top.offset) - item.top; //计算相差距离
+					item.elmH = item.elmH + distance;
+				} else if (buttom > -4 && buttom < 4 && buttom != 0) {
+					distance = buttom
+					item.elmH = item.elmH + distance;
+					item.isShowLineH = true;
+					item.selectLineTop = designHeight - 0.6;
+				}
+				item.top = item.elmY; //重新赋值左上角x位置
+				item.height = item.elmH //重新设置宽度
+			}
 			newScale = item.elmH / item.lastElmH //计算新比例
 			if (newScale > 1) { //开始放大处理
 				let newHeightScale = Math.abs((item.elmH - item.lastElmH) / item.initialHeight);
@@ -387,15 +632,10 @@ const drag = {
 			x: item.left + item.width / 2,
 			y: item.top + item.height / 2
 		}
-
 		item.x = item.centerPos.x;
 		item.y = item.centerPos.y;
-
-		//计算圆角
-		this.getConterScale(item)
 	},
 
-
 	/**
 	 * @description: 初始化targetObj的位置
 	 */
@@ -419,8 +659,10 @@ const drag = {
 	getRotatedPoint(curPos, centerPos, angle) {
 		let radian = Math.PI / 180 * angle;
 		return {
-			x: Math.floor((curPos.x - centerPos.x) * Math.cos(radian) - (curPos.y - centerPos.y) * Math.sin(radian) + centerPos.x),
-			y: Math.floor((curPos.y - centerPos.y) * Math.cos(radian) + (curPos.x - centerPos.x) * Math.sin(radian) + centerPos.y)
+			x: Math.floor((curPos.x - centerPos.x) * Math.cos(radian) - (curPos.y - centerPos.y) * Math.sin(
+				radian) + centerPos.x),
+			y: Math.floor((curPos.y - centerPos.y) * Math.cos(radian) + (curPos.x - centerPos.x) * Math.sin(
+				radian) + centerPos.y)
 		}
 	},
 
@@ -478,7 +720,7 @@ const drag = {
 	 * @description: 计算变换后的方框四个角的位置
 	 */
 	getTransferPositionangle(left, top, width, height, angle, center, item) {
-
+		// 计算变换后的方框四个角的位置
 	},
 
 	/**
@@ -571,7 +813,7 @@ const drag = {
 	/**
 	 * 图片拖动中事件
 	 */
-	dragMove(e, item, data, editor_top) {
+	dragMove(e, item, data, editor_top, allLineListData, margin_left, editory) {
 		item.isShowLineV = false;
 		item.isShowLineH = false;
 		let mouseX = e.touches[0].clientX;
@@ -588,26 +830,42 @@ const drag = {
 		item.elmY += diffY
 		item.left = item.elmX
 		item.top = item.elmY
+		var chosenGuides = this.getIshasDrawData(item, allLineListData);
+		if (chosenGuides.left.dist <= 4) {
+			item.elmX = chosenGuides.left.guide.left - chosenGuides.left.offset;
+			item.isShowLineV = true;
+			item.selectLineLeft = chosenGuides.left.guide.left;
+		} else {
+
 			if (item.newRotate == 0) {
 				if (item.left > (data.editorWidth / 2 - 5) && item.left < (data.editorWidth / 2 + 5)) {
 					/* 辅助线左侧磁性吸附 */
 					item.elmX = data.editorWidth / 2
-			} else if (item.left > (data.editorWidth / 2 - item.width - 5) && item.left < (data.editorWidth / 2 - item.width + 5)) {
+				} else if (item.left > (data.editorWidth / 2 - item.width - 5) && item.left < (data.editorWidth /
+						2 - item.width + 5)) {
 					/* 辅助线右侧磁性吸附 */
 					item.elmX = data.editorWidth / 2 - item.width
 				} else if (item.left > -5 && item.left < 5) {
 					//裁剪区左边框磁性吸附
 					item.elmX = 0
-			} else if (item.left > data.editorWidth - item.width - 5 && item.left < data.editorWidth - item.width + 5) {
+				} else if (item.left > data.editorWidth - item.width - 5 && item.left < data.editorWidth - item
+					.width + 5) {
 					// 裁剪区右边框磁性吸附
 					item.elmX = data.editorWidth - item.width
-			} else if (item.left > ((data.editorWidth - item.width) / 2 - 5) && item.left < ((data.editorWidth - item.width) / 2 + 5)) {
+				} else if (item.left > ((data.editorWidth - item.width) / 2 - 5) && item.left < ((data.editorWidth -
+						item.width) / 2 + 5)) {
 					/* 辅助线居中磁性吸附 */
 					item.elmX = (data.editorWidth - item.width) / 2
 					//wx.vibrateShort();
 				}
 			}
+		}
 
+		if (chosenGuides.top.dist <= 4) {
+			item.elmY = chosenGuides.top.guide.top - chosenGuides.top.offset;
+			item.isShowLineH = true;
+			item.selectLineTop = chosenGuides.top.guide.top
+		} else {
 			if (item.newRotate == 0) {
 				if (item.top > (editor_top - item.height - 5) && item.top < (editor_top - item.height + 5)) {
 					/*辅助线下边框磁性吸附 */
@@ -624,6 +882,7 @@ const drag = {
 					//wx.vibrateShort();
 				}
 			}
+		}
 
 		item.left = item.elmX
 		item.top = item.elmY
@@ -740,7 +999,7 @@ const drag = {
 
 	/* 通过旧坐标、旋转角度、圆心计算旋转后点的新坐标 */
 	calNewPos(origin, center, angle) {
-		// 计算
+		//计算
 		let radian = Math.PI / 180 * angle;
 		let newX = (origin.x - center.x) * Math.cos(radian) - (origin.y - center.y) *
 			Math.sin(radian) + center.x;
@@ -794,17 +1053,17 @@ const drag = {
 
 	//计算圆角缩放比例
 	getConterScale(item) {
-		let scale = 0;
-		if (item.isFillet) {
-			let imageWid = item.width
-			let imageHei = item.height
-			if (imageHei > imageWid) {
-				scale = imageHei / 2;
-			} else {
-				scale = imageWid / 2;
-			}
-		}
-		item.conterScale = scale;
+		// let scale = 0;
+		// if (item.isFillet) {
+		// 	let imageWid = item.width
+		// 	let imageHei = item.height
+		// 	if (imageHei > imageWid) {
+		// 		scale = imageHei / 2;
+		// 	} else {
+		// 		scale = imageWid / 2;
+		// 	}
+		// }
+		// item.conterScale = scale;
 	},
 
 }

pages/index/mall.vue

 <template>
 	<view class="full-width full-height">
 
-		<view v-if="system_config.baking_diy.value == 0" @tap="doubleTap" @touchstart="touchStart" @touchend="touchEnd"
-			style="position: fixed; z-index: 99; right: 0; bottom: 524upx; display: flex;align-items: center;justify-content: center;
+		<view v-if="system_config.baking_diy.value == 0"  @tap="doubleTap" @touchstart="touchStart" @touchend="touchEnd" style="position: fixed; z-index: 99; right: 0; bottom: 524upx; display: flex;align-items: center;justify-content: center;
 		   width: 100upx; height: 88upx; background: #F29F3D; border-radius: 44upx 0px 0px 44upx;">
 			<view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;">
 				<view>定制</view>
@@ -81,7 +80,10 @@
 						success: function(res) {
 							console.log(res)
 							if (res.scanType == 'QR_CODE') {
-								if (that.getQueryString(res.result, 'machine_id') && that.getQueryString(res.result, 'machine_id') != "" && that.getQueryString(res.result, 'machine_id') != null && that.getQueryString(res.result,'machine_id') != "null") {
+								if (that.getQueryString(res.result, 'machine_id') && that.getQueryString(res
+										.result, 'machine_id') != "" && that.getQueryString(res.result,
+										'machine_id') != null && that.getQueryString(res.result,
+										'machine_id') != "null") {
 									uni.navigateTo({
 										url: '../index/machineDetail?machine_id=' + that
 											.getQueryString(
@@ -96,8 +98,10 @@
 								}
 							} else {
 								if (res.path) {
-									if (that.getQueryString(res.path, 'machine_id') && that.getQueryString(res.path, 'machine_id') != "" && that.getQueryString(res
-											.path, 'machine_id') != null && that.getQueryString(res.path,'machine_id') != "null") {
+									if (that.getQueryString(res.path, 'machine_id') && that.getQueryString(res
+											.path, 'machine_id') != "" && that.getQueryString(res
+											.path, 'machine_id') != null && that.getQueryString(res.path,
+											'machine_id') != "null") {
 										uni.navigateTo({
 											url: '../index/machineDetail?machine_id=' + that
 												.getQueryString(res.path, 'machine_id')
@@ -132,8 +136,10 @@
 				this.touchEndTime = e.timeStamp;
 			},
 			doubleTap(e) {
+				//console.log("点击")
 				// 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
 				if (this.touchEndTime - this.touchStartTime < 350) {
+					//console.log("点击1")
 					// 当前点击的时间
 					const currentTime = e.timeStamp;
 					const lastTapTime = this.lastTapTime;
@@ -143,7 +149,12 @@
 					if (currentTime - lastTapTime > 300) {
 						if (!this.$AppContext.checkLogin()) {
 							this.tologo('navigateTo')
+							//console.log("点击2")
+							// uni.navigateTo({
+							// 	url: '../index/machineDetail?machine_id=' + this.$Env.getmachineId()
+							// });
 						} else {
+							//console.log("点击3")
 							if (this.$Env.getmachineId() && this.$Env.getmachineId() != "") {
 								uni.navigateTo({
 									url: '../index/machineDetail?machine_id=' + this.$Env.getmachineId()
@@ -153,6 +164,7 @@
 					}
 				}
 			},
+
 			tologo(e) {
 				//先登陆
 				let that = this;
@@ -162,15 +174,15 @@
 						userService.login({
 							s: 'Init.init',
 							code: res.code,
-							appcode: that.$Env.getappcode()
+							appcode: 'lite'
 						}).then(r => {
 							if (e == 'navigateTo') {
 								uni.navigateTo({
-									url: '../mall/machineDetail?machine_id=' + that.$Env.getmachineId() + '&worksid=0'
+									url: '../index/machineDetail?machine_id=' + that.$Env.getmachineId() + '&worksid=0'
 								});
 							}
 						}).catch(err => {
-							that.$refs.Signin.init()
+							that.$refs.Signin.init();
 						});
 					},
 					fail: (res) => {
@@ -181,6 +193,57 @@
 					}
 				});
 			},
+
+			//tologo(e) {
+			// 	//先登陆
+			// 	let that = this;
+			// 	uni.login({
+			// 		provider: 'weixin',
+			// 		success: (res) => {
+			// 				//console.log(res)
+			// 			userService.login({
+			// 				s: 'Init.init',
+			// 				code: res.code,
+			// 				appcode: that.$Env.getappcode()
+			// 			}).then(r => {
+			// 				//console.log(r )
+			// 				//console.log("点击4")
+			// 				// if (e == 'navigateTo') {
+			// 				// 	uni.navigateTo({
+			// 				// 		url: '../index/machineDetail?machine_id=' + that.$Env
+			// 				// 			.getmachineId() + '&worksid=0'
+			// 				// 	});
+			// 				// }
+			// 			}).catch(err => {
+			// 				console.log(err )
+			// 				that.$refs.Signin.init()
+			// 			});
+			// 		},
+			// 		fail: (res) => {
+			// 			console.log(res)
+			// 			uni.showToast({
+			// 				title: res.msg,
+			// 				icon: 'none'
+			// 			})
+			// 		}
+			// 	});
+			// },
+
+			//登录跳进去
+			logoToHome() {
+				const that = this
+				uni.getSetting({
+					success(res) {
+						if (res.authSetting['scope.userLocation']) { //用户同意授权获取定位信息
+							that.getLocation()
+						} else { //用户拒绝授权再次请求授权
+							that.getAuthorize()
+						}
+					}
+				})
+			},
+
+
 			systemConfig() {
 				var _this = this
 				wx.request({

pages/index/scrollView.vue

 <template>
 	<!-- 贴图 -->
 	<view class="content" style="width: 100%; height: 100%; position: relative;"
-		:style="{height: (windowHeight - classificationHeight) +'px'}">
+		:style="{height: (windowHeight - classificationHeight) +'px',background:backColorVal}">
 		<refresh @interrupt="interrupt" @pushToInterrupt="pushToInterrupt" @finished="finished" @scrolltolower="g"
 			:scrollHeight="(windowHeight - classificationHeight)" :scrollTop="scrollViewTop" @scroll="scroll">
 			<template slot="top">
@@ -21,7 +21,7 @@
 					</view>
 					<view class="align-center"
 						style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
-						v-if="datalist.length == 0">
+						v-if=" datalist!=null && datalist.length == 0">
 						<span class="iconfont icon-wushuju"
 							style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
 						<view style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">啊嘞，还是一片荒漠
@@ -72,7 +72,6 @@
 					material_series_id: "",
 				},
 				Material_categorydatalist: [], //作品、贴图列表
-
 				historyQueryPage: {
 					goods_id: "", //产品Id
 					s: 'Works.myList',
@@ -88,6 +87,7 @@
 				scrollViewTop: 0, //滑动高度
 				e: 0, //弹窗类型
 				isWork: false, //是否作品
+				backColorVal: ""
 			};
 		},
 		mounted() {
@@ -97,9 +97,9 @@
 		 * 组件的公有方法列表
 		 */
 		methods: {
+			
 			//作品详情
 			Worksdetail(item) {
-				//console.log(item)
 				item.isWork = this.isWork
 				this.$emit('Worksdetail', item)
 			},
@@ -161,6 +161,11 @@
 			},
 
 			open(item) {
+				if (item.val) {
+					this.backColorVal = item.val
+				} else {
+					this.backColorVal = ""
+				}
 				if (this.e != item.e) {
 					this.datalist = [];
 				}
@@ -177,11 +182,9 @@
 					} else {
 						loadData = true;
 					}
-
 					if (this.datalist == null || this.datalist.length == 0) {
 						loadData = true;
 					}
-
 				} else if (item.e == 99) {
 					if (this.currentId != item.queryPage.currentId || this.currentId == -1) {
 						loadData = true;
@@ -190,7 +193,6 @@
 						loadData = true;
 					}
 				}
-
 				this.queryPage = {
 					s: item.queryPage.s,
 					page: item.queryPage.page, //分页
@@ -205,7 +207,8 @@
 					is_hot: item.queryPage.is_hot, //热门
 					goods_id: "", //商品id
 					is_under: item.queryPage.is_under, //贴图是否为背景图
-					partner_id: item.queryPage.partner_id //代理
+					partner_id: item.queryPage.partner_id ,//代理
+					goods_feature_id:this.$base.goods_feature_id
 				}
 				if (item.e == 2) {
 					if (loadData) {
@@ -244,7 +247,7 @@
 				}
 			},
 
-			// 贴图列表
+			//贴图列表
 			getShapeList() {
 				this.datalist = []
 				uni.showLoading({
@@ -290,8 +293,7 @@
 								icon: 'none'
 							});
 						} else {
-							this.Material_categorydatalist = this.Material_categorydatalist.concat(result.data
-								.data);
+							this.Material_categorydatalist = this.Material_categorydatalist.concat(result.data.data);
 							this.datalist = this.datalist.concat(result.data.data);
 							this.queryCollectionPage.page += 1;
 							if (Math.ceil(result.total / result.per_page) <= this.queryCollectionPage.page) {
@@ -320,7 +322,6 @@
 				uni.showLoading({
 					title: '正在加载中...'
 				})
-
 				let url = ''
 				this.currentId = e.currentId;
 				if (e.currentId == 0) {

pages/index/switchGoods.vue

 <template>
-	<view v-if="isShow" style="  width: 100%; ">
+	<view v-if="isShow" style="width: 100%; ">
 
-		<view
-			style="position: absolute;  top: 0; width: 100%; height: 100%; background: #999999; z-index:997; opacity: 0.5;  "
+		<view style="position: absolute;  top: 0; width: 100%; height: 100%; background: #999999; z-index:997; opacity: 0.5;  "
 			@click="closeView()">
 		</view>
 
@@ -13,40 +12,44 @@
 			  left:50%;
 			  top:50%;
 			  transform: translate(-50%,-50%);
-			  position: absolute; "/>
+			  position: absolute;"/>
 
 			<view style="position: absolute;  
 			  width: 562upx; height:720upx;
-			top: 0; ">
-				<view style="
+			  top: 0;">
+			
+			 <!--<view style="
 				 width: 200upx;
 				 height: 120upx;
 				 font-size: 34upx;
 				 font-weight: 500;
 				 color: #000; margin: 0 auto; 
-				 text-align: center;line-height: 120upx;">蛋糕形状</view>
+				 text-align: center;line-height: 120upx;">蛋糕形状</view>-->
 
-				<view style="height: 280upx; ">
+				<view style="height: 280upx;margin-top: 130upx;">
 					<view v-for="(item,index) in goods" :key="index" @click="goodclick(item,index)">
 						<view style="
 					  margin-left: 70upx;
 					 float: left;
 					 border-radius: 15upx; 
 					 position: relative;
-					 width: 180upx">
+					 width: 180upx;">
 							<image mode="widthFix"
 								:class="[goodCurrentIndexTop == index? 'good-item-select':'good-item-no-select' ]"
 								:src="item.goods_pic + '?x-oss-process=image/resize,lfit,w_180'"></image>
-							<view style="text-align: center; font-size: 30upx; width: 100%; 
-							color:#000;  margin-top: 30upx;">
+							<view style="
+							   text-align: center;
+							   font-size: 30upx; 
+							   width: 100%; 
+							   color:#000; 
+							   margin-top: 30upx;">
 								{{item !=null ? item.name : ''}}
 							</view>
 						</view>
 					</view>
 				</view>
 
-				<view
-					style="margin-top: 50upx; width: 100%;  display: flex; flex-direction: row; justify-content: center;">
+				<view style="margin-top: 50upx; width: 100%;  display: flex; flex-direction: row; justify-content: center;">
 					<view v-for="(item,index) in selectGood.attribute" :key="index" @click="sizeclick(item,index)">
 						<view style="
 					    border-radius: 15upx; 
@@ -59,7 +62,8 @@
 					</view>
 			   </view>
 
-			<view @click="saveGood()" style="width: 289upx;
+			   <view @click="saveGood()" 
+			    style="width: 289upx;
                 height: 84upx;
                 background: #F29F3D;
                 border-radius: 42px; 
@@ -70,7 +74,8 @@
                 margin-top:60upx;
                 text-align: center;">确定</view>
 
-				<view v-if="isShowCustomize"  @click="toCustomSize()" style="width: 289upx;
+				<view v-if="isShowCustomize"  @click="toCustomSize()" 
+				style="width: 289upx;
                height: 84upx;
                color: #F29F3D;
                font-size: 32upx;
@@ -143,14 +148,12 @@
 				}
 			},
 
-
 			//商品点击事件
 			sizeclick(item, index) {
 				this.selectGoodSize = item
 				this.sizeCurrentIndexTop = index;
 			},
 
-
 			//打开页面
 			open(machineId, isShowCustomize) {
 				if (isShowCustomize) {
@@ -162,7 +165,6 @@
 				this.getGooods();
 			},
 
-
 			//获取商品列表
 			getGooods() {
 				let that = this;
@@ -208,13 +210,11 @@
 
 		},
 		
-		
 		options(options){
 			
 		},
 		
 
-
 	}
 </script>
 

pages/index/textsettings.vue

@@ -24,7 +24,7 @@
 			height: 98upx;">
 				<view style="width: 601upx; height: 57upx; background: rgb(255,255,255,0.1); margin: 21upx 41upx 21upx 21upx; border-radius: 10upx;">
 					<input :fixed="true" :auto-height="true" :show-confirm-bar="false" :cursor-spacing="73" :adjust-position="false"
-					 type="text" maxlength="20" @input="textInput" :value="data.currentText" @focus="focusTextarea" @blur="blurTextarea"
+					 type="text" maxlength="20" @input="textInput"  v-model="data.currentText" @focus="focusTextarea" @blur="blurTextarea"
 					 placeholder="请输入文字内容..." style="font-size: 34upx; font-weight: 400; height: 57upx; line-height: 57upx; padding: 0upx 0 0upx 20upx; color: #FFFFFF;" />
 				</view>
 				<view style="width: 1px; height: 28upx; background: #FFFFFF;"></view>
@@ -148,7 +148,7 @@
 				height: 99upx;">
 					<view style="width: 710upx; height: 57upx; background: rgb(255,255,255,0.1); margin: 20upx 40upx 20upx 20upx; border-radius: 10upx;">
 						<input :fixed="true" :auto-height="true" :show-confirm-bar="false" :cursor-spacing="73" :adjust-position="false"
-						 type="text" maxlength="32" @input="textInput" :value="data.currentText" @focus="focusTextarea" @blur="blurTextarea"
+						 type="text" maxlength="32" @input="textInput" v-model="data.currentText" @focus="focusTextarea" @blur="blurTextarea"
 						 placeholder="请输入文字内容..." style="font-size: 34upx; font-weight: 400; height: 57upx; line-height: 57upx; padding: 0upx 0 0upx 20upx; color: #FFFFFF;" />
 					</view>
 				</view>
@@ -752,6 +752,18 @@
 		 * 组件的公有方法列表
 		 */
 		methods: {
+			
+			
+			//过滤字符串
+			filterTextInput(textStr) {
+				let content = textStr.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\，\-\——\=\;\@\！\!\+\$\%\*\(\)\#\&\*]/g, '');
+				let that = this;
+				setTimeout(function() {
+					that.data.currentText = content;
+					that.$emit('textInput', content)
+				}, 0);
+			},
+			
 			typefaceshow(e){
 				this.$emit('typefaceshow', e)
 			},
@@ -840,7 +852,8 @@
 				this.inputBottom = 0;
 			},
 			textInput(e) {
-				this.$emit('textInput', e)
+				this.filterTextInput(e.detail.value)
+				//this.$emit('textInput', e)
 			},
 			cancel(e) {
 				this.$emit('cancel', e)

pages/mall/lineUp.vue

@@ -15,33 +15,37 @@
 						<view class="noData_but" @click="tomain()">去定制</view>
 					</view>
 				</view>
-				<view v-else v-for="(designer, index) in LoupanList" :key="index" style=" width: 690upx; height: 185upx;
-				   margin: 20upx auto; border-radius: 10upx; " @click="self_help_payment(designer)"
+				<view v-else v-for="(designer, index) in LoupanList" :key="index" 
+				style=" width: 690upx; height: 185upx; margin: 20upx auto; border-radius: 10upx; " @click="self_help_payment(designer)"
 					:style="{background: designer.status.value == 1 ? '#ffffff' :'#EEEEEE;'}">
 					<view style="  display: flex; align-items: center;">
 						<view v-if="designer.user_id != userId"
 							style="margin:20upx 20upx;width: 380upx; height: 140upx; position: relative; overflow: hidden; opacity: 0.3;  ">
-							<view style="width: 140upx; height: 140upx;border-radius: 20upx; background: #FFFFFF;">
-							</view>
+							<view style="width: 140upx; height: 140upx;border-radius: 20upx; background: #FFFFFF;"></view>
 							<image style="width: 90upx; height: 90upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
-							margin: auto; z-index:2;" :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'" mode="aspectFit"></image>
+							margin: auto; z-index:2;" :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"
+								mode="aspectFit"></image>
 						</view>
 						<view v-if="designer.user_id == userId"
 							style="margin:20upx 20upx;width: 380upx; height: 140upx; position: relative; overflow: hidden; ">
 							<view style="width: 140upx; height: 140upx;border-radius: 20upx; background: #FFFFFF;"></view>
-							<image style="width: 90upx; height: 90upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
-							margin: auto; z-index:2;" :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"mode="aspectFit"></image>
+							<image style="width: 90upx; height: 90upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0;  margin: auto; z-index:2;" :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"
+								  mode="aspectFit"></image>
 						</view>
 						<view style="width: 100% ;  margin-top: -40upx;">
 							<view v-if="designer.status.value == 1">
-								<view style="text-align: left; font-size: 29upx; color: #F29F3D ; line-height: 80upx;font-weight: 600;"> 打印中
+								<view style="text-align: left; font-size: 29upx; color: #F29F3D ; line-height: 80upx;font-weight: 600;">
+									打印中
+								</view>
 							</view>
+							<view v-else>
+								<view style="text-align: left; font-size: 30upx; color: #333; line-height: 80upx;font-weight: 600; margin-top: 20upx;">
+									排队中
 								 </view>
-							<view v-else >
-								<view style="text-align: left; font-size: 30upx; color: #333; line-height: 80upx;font-weight: 600; margin-top: 20upx;"> 排队中</view>
 							</view>
 							<view style="font-size: 29upx; color: #333333; margin-top: 20upx; font-weight: 600;">
-							{{ designer.customize_size_id == 0  ? designer.goods_name || '' : ''}}    {{designer.goods_specs || ''}}
+								{{ designer.customize_size_id == 0  ? designer.goods_name || '' : ''}}
+								{{designer.goods_specs || ''}}
 							</view>
 						</view>
 						<view style="width: 90%;font-size: 28upx; margin-top: 70upx; font-weight: 550; text-align: right; font-size: 36upx; color: #333; margin-right: 30upx;">
@@ -53,7 +57,8 @@
 
 			<!-- 提示 -->
 			<view v-if="sighstate && designer != null">
-				<view style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
+				<view
+					style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
 					@click.stop="sighstate = false"></view>
 				<view style="position: fixed; z-index: 1000; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
 				width: 558upx; height: 490upx; background: #FFFFFF; border-radius: 10upx;
@@ -78,7 +83,7 @@
 						 text-align: center;
 						 padding:auto;
 						 padding-top: 20upx; 
-						margin-top: 15upx;" >查看详情</view>
+						 margin-top: 15upx;">查看详情</view>
 					</view>
 				</view>
 			</view>
@@ -91,7 +96,7 @@
 	import userService from '@/service/UserService';
 	import homeservice from '@/service/homeservice.js'
 	import Enums from '@/util/Enums';
-	import myhead from './head/head.vue'; // 页眉
+	import myhead from './head/head.vue';    //页眉
 	export default {
 		components: {
 			myhead
@@ -141,10 +146,10 @@
 					},
 					envVersion: envVersionName,
 					success(res) {
-						// 打开成功
+						//打开成功
 					},
 					fail(res) {
-						console.log("打开小程序失败")
+						//console.log("打开小程序失败")
 					}
 				});
 			},
@@ -157,11 +162,9 @@
 					machine_id: this.queryPage.machine_id,
 					s: 'machine.newDetail',
 				}).then(res => {
-					
 					if (this.sighstate == true) return;
 					this.designer = designer
 					this.sighstate = true
-				
 				}).catch(err => {
 					uni.showToast({
 						title: '设备休息中',
@@ -211,9 +214,7 @@
 					//数据加载状态处理 false
 					this.dataLoadState.pullDownRefresh = false;
 					this.dataLoadState.reachBottom = false;
-
 					this.stateindex = true
-					// uni.hideLoading();
 				}).catch(err => {
 					// 停止当前页面下拉刷新
 					if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
@@ -290,20 +291,9 @@
 		//卸载程序
 		onUnload() {
 			this.clearIntervalTime()
-			let pages = getCurrentPages();
-			if (pages[pages.length - 2].route == "pages/mine/order") {
 			uni.reLaunch({
 				url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id
 			})
-			} else if (pages[pages.length - 2].route == "pages/mine/orderNew") {
-				uni.reLaunch({
-					url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id
-				})
-			} else if (pages[pages.length - 2].route == "pages/index/index") {
-				uni.reLaunch({
-					url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id
-				})
-			}
 		}
 
 	};
@@ -321,4 +311,5 @@
 			padding-top: 50upx;
 		}
 	}
+	
 </style>
\ No newline at end of file

pages/mall/size.vue

 <template>
-	<view class="edit-address full-height full-width">
 
+	<view class="full-width  full-height" style="overflow: hidden;">
 		<view class="form full-width">
-			<view style="width: 100%; height: 70upx; display: flex;align-items: center; justify-content: center;   ">
-				<view style="display: flex;font-size: 30upx; margin:auto;
-				width: 300upx; height: 70upx; background: #282932; border-radius: 50upx; color: #FFFFFF;">
-					<view :class="{'previewAxtiveLeft':!preview}" @click=" onclickTitle(false) "
-						style="line-height: 70upx; text-align: center; width: 150upx;">
+
+			<view style="width: 100%;  display: flex;align-items: center; justify-content: center;"
+				:style="{height: titleHeight +'px'}">
+				<view @click="backUpperPage" style="position: absolute; left: 20upx;  ">
+					<image src="../../static/recommend/icon_back.png" mode="aspectFit"
+						style="width: 28upx; height: 42upx; margin-top: calc((32px - 42upx)/2);margin-left: auto; margin-right: auto;">
+					</image>
+				</view>
+				<view style="display: flex;
+				 font-size: 27upx;width: 380upx;
+				 height: 80upx; background: #282932; 
+				 border-radius: 50upx; 
+				 color: #FFFFFF; 
+				 margin-top: 10upx;">
+					<view :class="{'previewAxtiveLeft':!preview}" @click="onclickTitle(false)"
+						style="line-height: 80upx; text-align: center; width: 220upx;font-size: 24upx;">
 						自定义
 					</view>
-					<view :class="{'previewAxtiveRight':preview}" @click="onclickTitle(true)  "
-						style="line-height: 70upx; text-align: center; width: 150upx;">
-						预置尺寸
+					<view :class="{'previewAxtiveRight':preview}" @click="onclickTitle(true)"
+						style="line-height: 80upx; text-align: center; width: 220upx;font-size: 24upx;">
+						模板
 					</view>
 				</view>
 			</view>
 
-			<!-- 宽{{pixel_Width}}高:{{pixel_Height}}比例{{pixel_scale}} -->
-			<view v-if="!preview" class="full-width" scroll-y style="height: calc(100% - 160upx);overflow: scroll;">
-				<view style=" height: 700upx; overflow: scroll;
+			<view v-if="!preview" class="full-width" scroll-y style="overflow: scroll">
+				<view style="
+				height: 710upx; 
+				overflow: scroll; 
 				overflow: hidden;
-				 margin:0upx auto 40upx;display: flex; margin-top: 10upx;
-				justify-content: center; align-items: center;  "
-					:style="{width: (pixel_Width * pixel_scale) +'px', borderRadius:  defalutFillet + 'px'}">
+				margin:11upx auto 47upx;
+				display: flex;
+				justify-content: center;
+				align-items: center; "
+					:style="{width: (pixel_Width * pixel_scale) +'px', borderRadius: (defalutFillet * (pixel_Width * pixel_scale / inputWidth) ) + 'px'}">
 					<view
-						:style="{width: (pixel_Width * pixel_scale) +'px',height: (pixel_Height * pixel_scale) +'px', borderRadius: defalutFillet + 'px'}"
+						:style="{width: (pixel_Width*pixel_scale) +'px',height: (pixel_Height*pixel_scale) +'px', borderRadius: (defalutFillet * (pixel_Width * pixel_scale / inputWidth) ) + 'px'}"
 						style="background: #FFFFFF; margin:auto; box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);">
 					</view>
 				</view>
 				<view style="position: relative;">
-					<!-- 自定义高度 -->
-					<view style="display: flex; align-items: center; justify-content: center; margin-top: 5upx;">
+					<view style="display: flex; align-items: center; justify-content: center; margin-top: 10upx;">
 						<view style="font-size: 30upx; font-weight: 400; color: #FFFFFF; width: 180upx;">物料宽度：</view>
 						<view style="width: 282upx; height: 66upx; background: #282932; border-radius: 30upx; 
 						display: flex; align-items: center;">
@@ -49,71 +62,134 @@
 							<view style="color: #898989; font-size: 26upx; width: 82upx;">{{companyValue}}</view>
 						</view>
 					</view>
-					<view style="display: flex; align-items: center;justify-content: center;  margin-top: 25upx;">
+					<view style="display: flex; align-items: center;justify-content: center;  margin-top: 15upx;">
 						<view style="font-size: 30upx; font-weight: 400; color: #FFFFFF; width: 180upx;">圆角半径：</view>
 						<view style="width: 282upx; height: 66upx; 
 							display: flex; align-items: center; margin-top: 5upx;">
-							<!-- 滑块封装 -->
 							<NumSlider ref="NumSlider" :min="0" :max="100" :width="sliderdefaultWith" :disabled="false"
-								:range="false" @highChange="highChange" :leftX="sliderdefaultWith" />
+								:range="false" @highChange="highChange" :leftX="sliderdefaultWith"
+								:defalutFillet="defalutFillet" />
 						</view>
 					</view>
 				</view>
 			</view>
+
 			<!-- 预置 -->
-			<view v-if="preview" class="full-width">
-				<view
-					style="height: 90upx; display: flex; align-items: center;width: calc(100% - 60upx); margin: auto;">
-					<view style="display: flex;align-items: center; font-size: 28upx;">
-						<view :class="{'classificationLeft':!Specifications}" @click="OnclickSpecifications(0)" style="line-height: 60upx; text-align: center; width: 131upx;
-							height: 60upx; background: #282932; border-radius: 30upx;">
-							内置
+			<view style="width: 100%;height: calc(100% - 140upx);overflow:scroll;margin-top: 30upx;">
+				<view style="width: calc(100% - 40upx) ;
+			  height: calc(100% - 120upx);
+			  margin-left: 20upx;
+			  margin-right: 20upx;">
+					<view v-if="preview" class="full-width" style="width: 100%; 
+					 display: inline-grid; 
+					 grid-template-columns: 33.33% 33.33% 33.33%;
+					 margin-bottom: 100upx;">
+						<view v-for="(item, index) in LoupanList" :key="index" @click.preven="hasManyInGoood(2,item)"
+							style="width: 100%; display: inline-block;text-align:center;margin-top: 15upx;">
+							<image :src="item.thumbnail" style="width: 80%;" mode="widthFix"> </image>
+							<view style="margin-top: 10upx;">{{item.name}}</view>
 						</view>
-						<view :class="{'classificationRight':Specifications}" @click="OnclickSpecifications(1)" style="line-height: 60upx; text-align: center; width: 131upx; margin-left: 20upx;
-						height: 60upx; background: #282932; border-radius: 30upx;">
-							常用
 					</view>
 				</view>
 			</view>
-
-				<view class="full-width">
-					<!-- 动态数据 -->
-					<view scroll-y @scrolltolower="loadMore()" class="full-width">
-						<view v-for="(item, index) in LoupanList" :key="index" class="eq_list"
-							@click.preven="refundNumorder(item)" @touchstart.preven="touchstart(item,index)"
-							@touchend.prevent="touchend">
-							<view class="eq_list_div">
-								<view style="font-size: 30upx;font-weight: 500;">{{item.name}}</view>
-								<view style="margin-left: auto; margin-right: 20upx;">
-									<label class="fa fa-angle-right align-right sub-color"
-										style="font-size: 40upx;"></label>
 		</view>
+		<mpvue-picker ref="mpvuePicker" :themeColor="'#53B2B0'" :mode="mode" :pickerValueDefault="pickerValueDefault"
+			@onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray">
+		</mpvue-picker>
+		<view class="footer" v-if="!preview">
+			<view class="footer_but" hover-class="hover-class-bg" @click="hasManyInGoood(1,null)">确认定制</view>
 		</view>
+		<!-- 显示商品弹框 -->
+		<uni-popup ref="showManyGood" type="center">
+			<view v-if="manyGoodSelectData != null &&  manyGoodSelectData != '' && manyGoodSelectData.length > 1" style="width: 100%;
+			  height: 480upx;
+			 background: #FFFFFF; 
+			 border-radius: 10upx;
+			 align-items: center;
+			 display: flex;
+			 flex-direction: column; 
+			 justify-content: center;
+			 font-size: 24upx;">
+				<view v-if="manyGoodSelectData.length  == 2" style="width:550upx;
+				    background: #FFFFFF; 
+				    align-items:
+					center;display: flex;
+					flex-direction: row; 
+					justify-content: center;
+					font-size: 24upx;">
+					<view style="width: 160upx; 
+				     height: 220upx;
+					  display: flex;
+					  flex-direction: column; 
+					  text-align: center; 
+					  font-size: 20upx;">
+						<image style="width: 160upx; 
+					height: 160upx;
+					background: #999999; 
+					border-radius: 10upx;
+				    margin-bottom: 15upx;" @click="saveToMake(1)" :src="manyGoodSelectData[0].goods_pic">
+						</image>
+						{{manyGoodSelectData[0].name}}
 					</view>
-						<!-- 暂无相关信息 -->
-						<view class="align-center content-color"
-							style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
-							v-if="LoupanList.length == 0 || LoupanList.length == null">
-							<span class="iconfont icon-wushuju"
-								style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
-							<view style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 23upx;">
-								暂无相关信息</view>
+					<view style="width: 160upx; 
+				    height: 220upx; display: flex;flex-direction: column; margin-left: 30upx;text-align: center;font-size: 20upx;">
+						<image style="width: 160upx; 
+						height: 160upx;background: #999999; 
+						border-radius: 10upx;
+						margin-bottom: 15upx;" :src="manyGoodSelectData[1].goods_pic " @click="saveToMake(2)">
+						</image>
+						{{manyGoodSelectData[1].name}}
 					</view>
 				</view>
-					<!-- 动态数据完 -->
+				<view v-if="manyGoodSelectData.length  == 3" style="width:600upx;
+				    background: #FFFFFF; 
+				    align-items:
+					center;display: flex;
+					flex-direction: row; 
+					justify-content: center;
+					font-size: 24upx;">
+					<view style="width: 190upx; 
+				     height: 220upx;
+					  display: flex;
+					  flex-direction: column; 
+					  text-align: center; 
+					  font-size: 20upx;
+					  justify-content: center;
+					   align-items: center;">
+						<image style="width: 150upx; 
+					height: 150upx;
+					background: #999999; 
+					border-radius: 10upx;
+				    margin-bottom: 15upx;" @click="saveToMake(1)" :src="manyGoodSelectData[0].goods_pic">
+						</image>
+						{{manyGoodSelectData[0].name}}
 					</view>
-				<!-- 返回顶部 -->
-				<view class="to-top content-color" @click="totop()">
-					<view class="fa fa-angle-right to-top-icon"></view>
+					<view style="width: 190upx; 
+				    height: 220upx; display: flex;flex-direction: column;text-align: center;font-size: 20upx;justify-content: center;align-items: center;">
+						<image style="width: 150upx; 
+						height: 150upx;background: #999999; 
+						border-radius: 10upx;
+						margin-bottom: 15upx;" :src="manyGoodSelectData[1].goods_pic " @click="saveToMake(2)">
+						</image>
+						{{manyGoodSelectData[1].name}}
 					</view>
+					<view style="width: 190upx;
+					height: 220upx; display: flex;flex-direction: column;text-align: center;font-size: 20upx;justify-content: center;
+					align-items: center;">
+						<image style="width: 150upx; 
+						height: 150upx;background: #999999; 
+						border-radius: 10upx;
+						margin-bottom: 15upx;" :src="manyGoodSelectData[2].goods_pic " @click="saveToMake(3)">
+						</image>
+						{{manyGoodSelectData[2].name}}
 					</view>
 				</view>
-		<mpvue-picker ref="mpvuePicker" :themeColor="'#53B2B0'" :mode="mode" :pickerValueDefault="pickerValueDefault"
-			@onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray">
-		</mpvue-picker>
-		<view class="footer" v-if="!preview">
-			<view class="footer_but" hover-class="hover-class-bg" @click="onSave()">确认定制</view>
+				<view style="color:#333333;
+				font-size:26upx;
+				margin-top: 60upx;
+				height: 50upx;" @click="toGoodDetail()">什么是白墨 + 彩墨 + 光油?</view>
 			</view>
+		</uni-popup>
 
 	</view>
 </template>
@@ -124,7 +200,7 @@
 	import userService from '@/service/UserService';
 	import homeservice from '@/service/homeservice.js';
 	import uniPopup from '../index/common/uni-popup/uni-popup.vue';
-	import NumSlider from '../index/components/NumSlider.vue'
+	import NumSlider from '../index/components/NumSlider.vue';
 	import myhead from './head/head.vue'; // 页眉
 
 	export default {
@@ -167,8 +243,8 @@
 				render_cove_width: 0, //最大宽度
 				render_cove_height: 0, //最大高度
 				data: {
-					windowWidth: null, // 屏幕宽度
-					windowHeight: null, // 屏幕高度
+					windowWidth: null, //屏幕宽度
+					windowHeight: null, //屏幕高度
 					pixelRate: null // 屏幕宽度比率
 				},
 				preview: false, //自定义预览
@@ -177,6 +253,10 @@
 					pullDownRefresh: false,
 					reachBottom: false
 				},
+				queryPage: {
+					s: 'CanvasSize.newList',
+					machine_id: null,
+				},
 				LoupanList: [],
 				Specifications: false, //预置分类
 				//判断是否为长按
@@ -190,42 +270,29 @@
 				},
 				manyGoodSelectData: [], //查询更多商品
 				type: 1, //类型 1 自定义 2 选择列表
-				selectItemData: null, // 选中对象
+				selectItemData: null, //选中对象
 				sliderdefaultWith: 120,
 				defalutFillet: 0, //默认圆角大小
 				initialMax: 0,
 				heiPixelRate: null, //屏幕宽度比率
-				filletScale: 1, //比例
-				newDefalutFilletData: 0,
-				headheight: 0, //头部高度
-				queryPage: {},
-				good_id: "217", //产品Id
-				isFirstPage: true,
-				machineDetail: null, //设备对象
-				pixelScale: 0.6, //比例
+				pixelScale: 0.62,
+				pixel_scale: 1,
+				titleHeight: 0, //标题高度
 			}
 		},
 
-
 		methods: {
 
+			//返回上一级页面
+			backUpperPage() {
+				uni.navigateBack();
+			},
+
 			onclickTitle(preview) {
 				this.preview = preview
 				if (this.preview) {
 					this.defalutFillet = 0
-					this.newDefalutFilletData = 0;
-					if (!this.Specifications) {
-						this.dataLoadState = {
-							pullDownRefresh: false,
-							reachBottom: false
-						}
-						this.LoupanList = []
-						this.queryPage.page = 1;
-						this.queryPage.total = 0;
-						this.Specifications = false
-						this.queryPage.s = 'CanvasSize.list'
-						this.loadGoodsList(Enums.DATA_DIRECTION.UP);
-					}
+					this.OnclickSpecifications();
 				}
 			},
 
@@ -245,11 +312,197 @@
 				}
 			},
 
-			highChange(val, value) {
-				this.newDefalutFilletData = val;
-				let defalutFilletValue = Math.floor(this.newDefalutFilletData * this.filletScale)
-				this.defalutFillet = Math.floor(defalutFilletValue * (this.pixel_Width * this.pixel_scale / this
-					.inputWidth))
+			highChange(val) {
+				this.defalutFillet = val;
+			},
+
+			//点击确认
+			saveToMake(typeData) {
+				this.closeManyGoodPop();
+				if (this.type == 1) {
+					let unit = null
+					let real_width = null
+					let real_height = null
+					if (this.companyValue == '毫米') {
+						unit = 'mm'
+						real_width = this.inputWidth
+						real_height = this.inputHeight
+					} else if (this.companyValue == '厘米') {
+						unit = 'cm'
+						real_width = this.inputWidth
+						real_height = this.inputHeight
+					}
+					let nameStr = real_width + ' x ' + real_height + '（' + this.companyValue + '）';
+					if (this.defalutFillet > 0) {
+						nameStr = real_width + ' x ' + real_height + ' - ' + this.defalutFillet + '（' + this.companyValue +'）';
+					}
+					let WidthIndex = real_width * this.OldConvert_rate
+					let HeightIndex = real_height * this.OldConvert_rate
+					let minWidthAanHeight = 0;
+					let defalutFilletData = this.defalutFillet;
+					if (this.inputHeight > this.inputWidth) {
+						minWidthAanHeight = this.inputWidth
+					} else {
+						minWidthAanHeight = this.inputHeight
+					}
+					if (this.defalutFillet > minWidthAanHeight / 2) {
+						defalutFilletData = Math.floor(minWidthAanHeight / 2)
+					}
+					uni.navigateTo({
+						url: '../index/index_diy?machine_id=' + this.parameter.machine_id +
+							'&WidthIndex=' + WidthIndex + '&HeightIndex=' + HeightIndex +
+							'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + unit +
+							'&name=' + nameStr +
+							'&pixel_scale=' + this.pixel_scale +
+							'&real_width=' + real_width +
+							'&real_height=' + real_height +
+							"&type=" + typeData +
+							"&defalutFillet=" + defalutFilletData +
+							"&maxWidth=" + this.render_cove_width / this.OldConvert_rate +
+							"&maxHeight=" + this.render_cove_height / this.OldConvert_rate
+					})
+				} else if (this.type == 2) {
+					let item = this.selectItemData;
+					let real_radius = Number(item.real_radius);
+					let real_height = Number(item.real_height);
+					let real_width = Number(item.real_width);
+					let minWidthAanHeight = 0;
+					if (real_height > real_width) {
+						minWidthAanHeight = real_width
+					} else {
+						minWidthAanHeight = real_height
+					}
+					if (real_radius > minWidthAanHeight / 2) {
+						real_radius = Math.floor(minWidthAanHeight / 2)
+					}
+					let nameStr = item.real_width + " x " + item.real_height + " (毫米)";
+					if (this.nav) {
+						uni.navigateTo({
+							url: '../index/index_diy?machine_id=' + this.parameter.machine_id +
+								'&WidthIndex=' + item.width + '&HeightIndex=' + item.height +
+								'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + item.unit +
+								'&name=' + nameStr + '&pixel_scale=' + this.pixel_scale +
+								'&real_width=' + item.real_width +
+								'&real_height=' + item.real_height +
+								"&type=" + typeData +
+								"&defalutFillet=" + real_radius +
+								"&maxWidth=" + this.render_cove_width / this.OldConvert_rate +
+								"&maxHeight=" + this.render_cove_height / this.OldConvert_rate +
+								"&itemData=" + JSON.stringify(item)
+						})
+					}
+				} else if (this.type == 3) {
+					let item = this.selectItemData;
+					let real_radius = Number(item.real_radius);
+					let real_height = Number(item.real_height);
+					let real_width = Number(item.real_width);
+					//判断是否超过对应宽高比
+					let minWidthAanHeight = 0;
+					if (real_height > real_width) {
+						minWidthAanHeight = real_width
+					} else {
+						minWidthAanHeight = real_height
+					}
+					if (real_radius > minWidthAanHeight / 2) {
+						real_radius = Math.floor(minWidthAanHeight / 2)
+					}
+					let nameStr = item.real_width + " x " + item.real_height + " (毫米)";
+					if (this.nav) {
+						uni.navigateTo({
+							url: '../index/index_diy?machine_id=' + this.parameter.machine_id +
+								'&WidthIndex=' + item.width + '&HeightIndex=' + item.height +
+								'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + item.unit +
+								'&name=' + nameStr + '&pixel_scale=' + this.pixel_scale +
+								'&real_width=' + item.real_width +
+								'&real_height=' + item.real_height +
+								"&type=" + typeData +
+								"&defalutFillet=" + real_radius +
+								"&maxWidth=" + this.render_cove_width / this.OldConvert_rate +
+								"&maxHeight=" + this.render_cove_height / this.OldConvert_rate +
+								"&itemData=" + JSON.stringify(item)
+						})
+					}
+				}
+			},
+
+			//点击商品
+			hasManyInGoood(typeData, item) {
+				//获取自定义产品信息
+				//getCustomSizeInfo() {
+					// 	var data = {
+					// 		s: 'Product.getCustomize',
+					// 		machine_id: this.queryPage.machine_id
+					// 	};
+					// 	homeservice.queryList(data).then(res => {
+					// 		let width = this.render_cove_width / this.OldConvert_rate
+					// 		let height = this.render_cove_height / this.OldConvert_rate
+					// 		//this.render_cove_width = this.machineDetail.size.width * this.OldConvert_rate //最大宽度
+					// 		//this.render_cove_height = this.machineDetail.size.height * this.OldConvert_rate //最大高度
+					// 		this.good_id = res.id
+					// 		this.good = res
+					// 		this.wValue = width * this.OldConvert_rate //固定宽高比率计算(像素)
+					// 		this.hValue = height * this.OldConvert_rate //固定宽高比率计算(像素)
+					// 		this.previewWidth = width * this.OldConvert_rate //基础(像素)
+					// 		this.previewHeight = height * this.OldConvert_rate //基础(像素)
+					// 		this.inputWidth = width //文本(毫米)
+					// 		this.inputHeight = height //文本(毫米)
+					// 		this.pixel_Width = width * this.OldConvert_rate //实际(像素)
+					// 		this.pixel_Height = height * this.OldConvert_rate //实际(像素)
+					// 		//this.getWindowScale();
+
+					// 		//if (this.pixel_Width > (this.data.windowWidth * 0.5)) {
+					// 		// 	this.pixel_scale = (this.data.windowWidth * 0.5) / this.pixel_Width
+					// 		// } else {
+					// 		// 	if (this.pixel_Width < (this.data.windowWidth * 0.5) &&
+					// 		// 		this.pixel_Height < (this.data.windowHeight * 0.5)) {
+					// 		// 		this.pixel_scale = 1
+					// 		// 	 }
+					// 		// }
+					// 		// if (this.pixel_Height > (this.data.windowHeight * 0.5)) {
+					// 		// 	if ((this.data.windowHeight * 0.5) / this.pixel_Height < 1) {
+					// 		// 		this.pixel_scale = (this.data.windowHeight * 0.5) / this.pixel_Height
+					// 		//  }
+					// 		// } else {
+					// 		// 	if (this.pixel_Width < (this.data.windowWidth * 0.5) && this.pixel_Height < (this.data
+					// 		// 			.windowHeight * this.pixelScale)) {
+					// 		// 		this.pixel_scale = 1
+					// 		// 	 }
+					// 		// }
+					// 		let real_width = Number(this.inputWidth);
+					// 		let real_height = Number(this.inputHeight);
+					// 		if (real_width > real_height) {
+					// 			this.filletScale = real_width / 100;
+					// 		} else {
+					// 			this.filletScale = real_height / 100;
+					// 		}
+					// 		this.$refs['NumSlider'].initFilletRadius(that.newDefalutFilletData, that.filletScale);
+
+					// 	}).catch(err => {
+
+					// 	});
+					// },
+
+
+					// homeservice.queryList({
+					// 	s: 'Product.getCommonGoodsList',
+					// 	machine_id: this.parameter.machine_id || null,
+					// }).then(result => {
+					// 	if (result == undefined || result.length <= 0) {
+					// 		uni.showToast({
+					// 			title: "产品数据不能为空",
+					// 			icon: 'none'
+					// 		});
+					// 		return
+					// 	}
+					// 	this.manyGoodSelectData = result;
+						if (typeData == 1) {
+							this.onSave();
+						} else {
+							this.refundNumorder(item)
+						}
+					// }).catch(err => {
+
+					// });
 			},
 
 			//显示商品弹框
@@ -263,6 +516,14 @@
 			},
 
 			refundNumorder(item) {
+				// if (this.manyGoodSelectData != null && this.manyGoodSelectData != '' && this.manyGoodSelectData.length >
+				// 	1) {
+				// 	this.selectItemData = item
+				// 	this.type = 2
+				// 	this.showManyGoodPop();
+				// 	return
+				// }
+				// if (this.nav) {
 					let real_radius = Number(item.real_radius);
 					let real_height = Number(item.real_height);
 					let real_width = Number(item.real_width);
@@ -276,51 +537,25 @@
 					if (real_radius > minWidthAanHeight / 2) {
 						real_radius = Math.floor(minWidthAanHeight / 2)
 					}
-				let WidthIndex = item.real_width * this.OldConvert_rate
-				let HeightIndex = item.real_height * this.OldConvert_rate
-				let nameStr = item.name
-				let unit = item.unit;
-				let customize_size_id = item.id
-				//console.log(item)
-				if (this.isFirstPage && this.isFirstPage == "true") {
-					uni.redirectTo({
-						url: '../index/index?machine_id=' + this.parameter.machine_id +
-							'&WidthIndex=' + WidthIndex + '&HeightIndex=' + HeightIndex +
-							'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + unit +
-							'&title=' + nameStr +
-							'&pixel_scale=' + this.pixel_scale +
-							'&real_width=' + real_width +
-							'&real_height=' + real_height +
+					let nameStr = item.real_width + " x " + item.real_height + "  (毫米)";
+					uni.navigateTo({
+						url: '../index/index_diy?machine_id=' + this.parameter.machine_id +
+							'&WidthIndex=' + item.width + '&HeightIndex=' + item.height +
+							'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + item.unit +
+							'&name=' + nameStr + '&pixel_scale=' + this
+							.pixel_scale +
+							'&real_width=' + item.real_width +
+							'&real_height=' + item.real_height +
+							"&type = 1" +
 							"&defalutFillet=" + real_radius +
-							"&good_id=" + this.good_id +
-							"&type=2" +
-							"&customize_size_id=" + customize_size_id
+							"&maxWidth=" + this.render_cove_width / this.OldConvert_rate +
+							"&maxHeight=" + this.render_cove_height / this.OldConvert_rate +
+							"&itemData=" + JSON.stringify(item)
 					})
-				} else {
-					//console.log("defalutFilletData=" + defalutFilletData)
-					let pages = getCurrentPages();
-					var prevPage = pages[pages.length - 2]; //上一个页面
-					//let machineDetail = encodeURIComponent(JSON.stringify(this.machineDetail));
-					var data = {
-						WidthIndex: WidthIndex,
-						HeightIndex: HeightIndex,
-						defalutFillet: real_radius,
-						real_width: real_width,
-						real_height: real_height,
-						title: nameStr,
-						OldConvert_rate: this.OldConvert_rate,
-						unit: unit,
-						type: 2,
-						goods_id: this.good_id,
-						customize_size_id: customize_size_id
-					}
-					prevPage.$vm.options = data;
-					uni.navigateBack({
-						delta: 1
-					});
-				}
+				// }
 			},
 
+			//1像素 = 10毫米
 			onSave() {
 				if (this.inputWidth == "") {
 					uni.showToast({
@@ -336,6 +571,12 @@
 					});
 					return;
 				}
+				//if (this.manyGoodSelectData != null && this.manyGoodSelectData != '' && this.manyGoodSelectData.length > 1) {
+				// 	this.type = 1;
+				// 	this.showManyGoodPop();
+				// 	return
+				//}
+				//创建或者更新画布信息
 				let unit = null
 				let real_width = null
 				let real_height = null
@@ -350,149 +591,45 @@
 				}
 				//210 X 297 - 8 （毫米
 				let nameStr = real_width + ' x ' + real_height + '（' + this.companyValue + '）';
-
-				let defalutFilletData = Math.floor(this.newDefalutFilletData * this.filletScale);
-
-				if (defalutFilletData > 0) {
-					nameStr = real_width + ' x ' + real_height + ' - ' + defalutFilletData + '（' + this.companyValue + '）';
+				if (this.defalutFillet > 0) {
+					nameStr = real_width + ' x ' + real_height + ' - ' + this.defalutFillet + '（' + this.companyValue + '）';
 				}
-
 				let WidthIndex = real_width * this.OldConvert_rate
 				let HeightIndex = real_height * this.OldConvert_rate
-
 				//判断是否超过对应宽高比
 				let minWidthAanHeight = 0;
-
+				let defalutFilletData = this.defalutFillet;
 				if (this.inputHeight > this.inputWidth) {
 					minWidthAanHeight = this.inputWidth
 				} else {
 					minWidthAanHeight = this.inputHeight
 				}
-				if (defalutFilletData > minWidthAanHeight / 2) {
+				if (this.defalutFillet > minWidthAanHeight / 2) {
 					defalutFilletData = Math.floor(minWidthAanHeight / 2)
 				}
-
-				homeservice.queryList({
-					s: 'CanvasSize.save',
-					id: null,
-					name: nameStr,
-					real_width: real_width,
-					real_height: real_height,
-					unit: unit,
-					real_radius: defalutFilletData
-				}).then(result => {
-					uni.showToast({
-						icon: "success",
-						title: '创建成功!',
-						duration: 2000
-					});
-					if (this.isFirstPage && this.isFirstPage == "true") {
-						uni.redirectTo({
-							url: '../index/index?machine_id=' + this.parameter.machine_id +
+				uni.navigateTo({
+					url: '../index/index_diy?machine_id=' + this.parameter.machine_id +
 						'&WidthIndex=' + WidthIndex + '&HeightIndex=' + HeightIndex +
 						'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + unit +
-								'&title=' + nameStr +
+						'&name=' + nameStr +
 						'&pixel_scale=' + this.pixel_scale +
 						'&real_width=' + real_width +
 						'&real_height=' + real_height +
+						"&type = 1" +
 						"&defalutFillet=" + defalutFilletData +
-								"&good_id=" + this.good_id +
-								"&type=2" +
-								"&customize_size_id=" + result.id
+						"&maxWidth=" + this.render_cove_width / this.OldConvert_rate +
+						"&maxHeight=" + this.render_cove_height / this.OldConvert_rate
 				})
-					} else {
-						let pages = getCurrentPages();
-						var prevPage = pages[pages.length - 2]; //上一个页面
-						//let machineDetail = encodeURIComponent(JSON.stringify(this.machineDetail));
-						var data = {
-							WidthIndex: WidthIndex,
-							HeightIndex: HeightIndex,
-							defalutFillet: defalutFilletData,
-							real_width: real_width,
-							real_height: real_height,
-							title: nameStr,
-							OldConvert_rate: this.OldConvert_rate,
-							unit: unit,
-							type: 2,
-							goods_id: this.good_id,
-							customize_size_id: result.id
-						}
-						prevPage.$vm.options = data;
-						uni.navigateBack({
-							delta: 1
-						});
-					}
-				}).catch(err => {
-					uni.showToast({
-						title: err.msg,
-						icon: 'none'
-					});
-				});
 			},
 
-			touchstart(item, index) {
-				let that = this;
-				that.nav = true
-				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
-				this.Loop = setTimeout(function() {
-					that.nav = false
-					console.log(that.nav)
-					uni.showModal({
-						title: '删除',
-						content: '确认要删除当前尺码吗？',
-						confirmText: '删除',
-						confirmColor: '#ff3b32',
-						success: async function(res) {
-							if (res.confirm) {
-								that.LoupanList.splice(index, 1)
-								homeservice.newqueryList({
-									s: 'CanvasSize.del',
-									ids: item.id
-								}).then(result => {
-									uni.showToast({
-										icon: "success",
-										title: '删除成功!',
-										duration: 2000
-									});
-								}).catch(err => {
-									uni.showToast({
-										title: err.msg,
-										icon: 'none'
-									});
-								});
-							} else if (res.cancel) {
-								// console.log('用户点击取消')
-							}
-						}
-					});
-				}.bind(this), 500);
-			},
-
-			touchend() {
-				clearInterval(this.Loop);
-			},
-
-			OnclickSpecifications(e) {
-				this.dataLoadState = {
-					pullDownRefresh: false,
-					reachBottom: false
-				}
-				this.LoupanList = []
-				this.queryPage.page = 1;
-				this.queryPage.total = 0;
-				if (e == 0) {
-					this.Specifications = false
-					this.queryPage.s = 'CanvasSize.list'
-				} else {
+			OnclickSpecifications() {
 				this.Specifications = true
-					this.queryPage.s = 'CanvasSize.mylist'
-				}
+				this.queryPage.s = 'CanvasSize.newList'
 				this.loadGoodsList(Enums.DATA_DIRECTION.UP);
 			},
 
 			direction() { //横屏竖屏
 				this.directionState = !this.directionState
-				// 赋值
 				let w = this.pixel_Width
 				let h = this.pixel_Height
 				this.pixel_Width = h
@@ -504,7 +641,8 @@
 				this.hValue = w
 			},
 
-			equalRatio() { //固定比率
+			equalRatio() {
+				//固定比率
 				this.equalRatioState = !this.equalRatioState
 				//固定比率
 				this.wValue = this.pixel_Width
@@ -536,7 +674,7 @@
 			moneyChangeWidth(event) {
 				let Width = this.moneyone(event.detail.value);
 				let Height = null
-				// 赋值
+				//赋值
 				this.setData({
 					inputWidth: Width
 				}); //文本
@@ -571,40 +709,7 @@
 				this.previewHeight = this.inputHeight * this.convert_rate
 				this.pixel_Width = this.previewWidth
 				this.pixel_Height = this.previewHeight
-
-
-				this.getWindowScale();
-
-				// if (this.pixel_Width > (this.data.windowWidth * this.pixelScale)) {
-				// 	this.pixel_scale = (this.data.windowWidth * this.pixelScale) / this.pixel_Width
-				// } else {
-				// 	if (this.pixel_Width < (this.data.windowWidth * this.pixelScale) && this.pixel_Height < (this.data
-				// 			.windowHeight * this.pixelScale)) {
-				// 		this.pixel_scale = 1
-				// 	}
-				// }
-				// if (this.pixel_Height > (this.data.windowHeight * this.pixelScale)) {
-				// 	if ((this.data.windowHeight * this.pixelScale) / this.pixel_Height < this.pixel_scale) {
-				// 		this.pixel_scale = (this.data.windowHeight * this.pixelScale) / this.pixel_Height
-				// 	}
-				// } else {
-				// 	if (this.pixel_Width < (this.data.windowWidth * this.pixelScale) && this.pixel_Height < (this.data.windowHeight * this.pixelScale)) {
-				// 		this.pixel_scale = 1
-				// 	}
-				// }
-				//console.log("pixel_scale="+this.pixel_scale+"pixel_Width="+this.pixel_Width)
-
-				let real_width = Number(this.inputWidth);
-				let real_height = Number(this.inputHeight);
-				if (real_width > real_height) {
-					this.filletScale = real_width / 100;
-				} else {
-					this.filletScale = real_height / 100;
-				}
-				let defalutFilletValue = Math.floor(this.newDefalutFilletData * this.filletScale)
-				this.defalutFillet = Math.floor(defalutFilletValue * (this.pixel_Width * this.pixel_scale / this
-					.inputWidth));
-				this.$refs['NumSlider'].initFilletRadius(this.newDefalutFilletData, this.filletScale);
+				this.getPixelScale();
 				return Width
 			},
 
@@ -645,69 +750,10 @@
 				this.previewHeight = this.inputHeight * this.convert_rate
 				this.pixel_Width = this.previewWidth
 				this.pixel_Height = this.previewHeight
-
-				this.getWindowScale();
-
-				// if (this.pixel_Width > (this.data.windowWidth * 0.5)) {
-				// 	this.pixel_scale = (this.data.windowWidth * 0.5) / this.pixel_Width
-				// } else {
-				// 	if (this.pixel_Width < (this.data.windowWidth * 0.5) && this.pixel_Height < (this.data
-				// 			.windowHeight * 0.5)) {
-				// 		this.pixel_scale = 1
-				// 	}
-				// }
-				// if (this.pixel_Height > (this.data.windowHeight * 0.5)) {
-				// 	if ((this.data.windowHeight * 0.5) / this.pixel_Height < this
-				// 		.pixel_scale) {
-				// 		this.pixel_scale = (this.data.windowHeight * 0.5) / this.pixel_Height
-				// 	}
-				// } else {
-				// 	if (this.pixel_Width < (this.data.windowWidth * 0.5) && this.pixel_Height < (this.data
-				// 			.windowHeight * this.pixelScale)) {
-				// 		this.pixel_scale = 1
-				// 	}
-				// }
-				let real_width = Number(this.inputWidth);
-				let real_height = Number(this.inputHeight);
-				if (real_width > real_height) {
-					this.filletScale = real_width / 100;
-				} else {
-					this.filletScale = real_height / 100;
-				}
-				let defalutFilletValue = Math.floor(this.newDefalutFilletData * this.filletScale)
-				this.defalutFillet = Math.floor(defalutFilletValue * (this.pixel_Width * this.pixel_scale / this
-					.inputWidth));
-				this.$refs['NumSlider'].initFilletRadius(this.newDefalutFilletData, this.filletScale);
+				this.getPixelScale();
 				return Height
 			},
 
-
-			//获取屏幕比例
-			getWindowScale() {
-
-				if (this.pixel_Width > (this.data.windowWidth * this.pixelScale)) {
-					this.pixel_scale = (this.data.windowWidth * this.pixelScale) / this.pixel_Width
-				} else {
-					if (this.pixel_Width < (this.data.windowWidth * this.pixelScale) && this.pixel_Height < (this.data
-							.windowHeight * this.pixelScale)) {
-						this.pixel_scale = 1
-					}
-				}
-				if (this.pixel_Height > (this.data.windowHeight * this.pixelScale)) {
-					if ((this.data.windowHeight * this.pixelScale) / this.pixel_Height < this.pixel_scale) {
-						this.pixel_scale = (this.data.windowHeight * this.pixelScale) / this.pixel_Height
-					}
-				} else {
-					if (this.pixel_Width < (this.data.windowWidth * this.pixelScale) && this.pixel_Height < (this.data
-							.windowHeight * this.pixelScale)) {
-						this.pixel_scale = 1
-					}
-				}
-
-
-			},
-
-
 			setData(obj) {
 				let that = this;
 				let keys = [];
@@ -729,6 +775,16 @@
 				});
 			},
 
+			//保留两位小数点
+			keepTwoNumber(num) {
+				try {
+					num = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/))
+				} catch (e) {
+					//TODO handle the exception
+				}
+				return num
+			},
+
 			//验证输入金额
 			moneyone(val) {
 				let num = val.toString(); //先转换成字符串类型
@@ -747,6 +803,11 @@
 				return num
 			},
 
+			//选择单位
+			companyOn() {
+				this.$refs.mpvuePicker.show();
+			},
+
 			onChange(e) {
 
 			},
@@ -755,169 +816,88 @@
 
 			},
 
-			//返回顶部
-			totop() {
-				uni.pageScrollTo({
-					scrollTop: 0,
-					duration: 300
-				})
+			//获取最终比例
+			getPixelScale() {
+				let WidthIndex = this.inputWidth * this.OldConvert_rate;
+				let HeightIndex = this.inputHeight * this.OldConvert_rate;
+				if (WidthIndex > (this.data.windowWidth * this.pixelScale)) {
+					this.pixel_scale = (this.data.windowWidth * this.pixelScale) / WidthIndex
+				} else {
+					if (WidthIndex < (this.data.windowWidth * this.pixelScale) && HeightIndex < (this.data.windowHeight *
+							this.pixelScale)) {
+						this.pixel_scale = 1
+					}
+				}
+				if (HeightIndex > (this.data.windowHeight * this.pixelScale)) {
+					if ((this.data.windowHeight * this.pixelScale) / HeightIndex < this.pixel_scale) {
+						this.pixel_scale = (this.data.windowHeight * this.pixelScale) / HeightIndex
+					}
+				} else {
+					if (WidthIndex < (this.data.windowWidth * this.pixelScale) && HeightIndex < (this.data.windowHeight *
+							this.pixelScale)) {
+						this.pixel_scale = 1
+					}
+				}
+				this.pixel_scale = this.keepTwoNumber(this.pixel_scale);
+				let getReserveWid = this.pixel_Width * this.pixel_scale;
+				var widthAndHeightScan = getReserveWid / this.inputWidth;
+				var editorHeightAndWidNum = Math.floor(50 / widthAndHeightScan);
+				var newScan = 1; //重新分配比例
+				let scaleWidth = 1;
+				newScan = Math.round(editorHeightAndWidNum / 10);
+				scaleWidth = (newScan * 10) / editorHeightAndWidNum;
+				this.pixel_scale = this.pixel_scale / scaleWidth
+				var widthAndHeightScan = (this.pixel_Width * this.pixel_scale) / this.inputWidth;
+				var editorHeightAndWidNum = Math.floor(50 / widthAndHeightScan);
+				let surplusNumber = editorHeightAndWidNum % 10;
+				if (surplusNumber > 0) {
+					this.pixel_scale = this.pixel_scale * 1.1;
+				}
 			},
 
 			loadGoodsList(direction) {
-				if (this.dataLoadState.pullDownRefresh || this.dataLoadState.reachBottom) return;
+				this.LoupanList = [];
 				uni.showLoading({
 					title: '正在加载中...',
 					mask: true
 				})
-				this.dataLoadState.pullDownRefresh = direction === Enums.DATA_DIRECTION.UP;
-				this.dataLoadState.reachBottom = direction === Enums.DATA_DIRECTION.DOWN;
-				if (this.dataLoadState.reachBottom) {
-					if (Math.ceil(this.queryPage.total / this.queryPage.per_page) < this.queryPage.page) {
-						return setTimeout(() => {
-							uni.showToast({
-								title: '没有更多数据了！',
-								icon: 'none'
-							});
-						}, 500);
-					}
-				}
 				homeservice.queryList(this.queryPage).then(result => {
 					let newList = this.LoupanList.concat(result.data)
 					this.LoupanList = newList
-					// 分页对象处理
-					this.queryPage.total = result.total;
-					this.queryPage.per_page = result.per_page;
-					// 停止当前页面下拉刷新
-					if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
-					// 数据加载状态处理 false
-					this.dataLoadState.pullDownRefresh = false;
-					this.dataLoadState.reachBottom = false;
 					uni.hideLoading();
 				}).catch(err => {
-					// 停止当前页面下拉刷新
-					if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
-					// 数据加载状态处理 false
-					this.dataLoadState.pullDownRefresh = false;
-					this.dataLoadState.reachBottom = false;
 					uni.hideLoading();
 				});
 			},
 
 			//做滚动加载使用
 			loadMore() {
-				//this.queryPage.page = this.queryPage.page + 1;
-				//this.loadGoodsList(Enums.DATA_DIRECTION.DOWN);
+				this.loadGoodsList(Enums.DATA_DIRECTION.DOWN);
 			},
 
-			//获取自定义产品信息
-			getCustomSizeInfo() {
-				var data = {
-					s: 'Product.getCustomize',
-					machine_id: this.queryPage.machine_id
-				};
-				homeservice.queryList(data).then(res => {
-					let width = this.render_cove_width / this.OldConvert_rate
-					let height = this.render_cove_height / this.OldConvert_rate
-					//this.render_cove_width = this.machineDetail.size.width * this.OldConvert_rate //最大宽度
-					//this.render_cove_height = this.machineDetail.size.height * this.OldConvert_rate //最大高度
-					this.good_id = res.id
-					this.good = res
-					this.wValue = width * this.OldConvert_rate //固定宽高比率计算(像素)
-					this.hValue = height * this.OldConvert_rate //固定宽高比率计算(像素)
-					this.previewWidth = width * this.OldConvert_rate //基础(像素)
-					this.previewHeight = height * this.OldConvert_rate //基础(像素)
-					this.inputWidth = width //文本(毫米)
-					this.inputHeight = height //文本(毫米)
-					this.pixel_Width = width * this.OldConvert_rate //实际(像素)
-					this.pixel_Height = height * this.OldConvert_rate //实际(像素)
-
-					this.getWindowScale();
-
-					// if (this.pixel_Width > (this.data.windowWidth * 0.5)) {
-					// 	this.pixel_scale = (this.data.windowWidth * 0.5) / this.pixel_Width
-					// } else {
-					// 	if (this.pixel_Width < (this.data.windowWidth * 0.5) &&
-					// 		this.pixel_Height < (this.data.windowHeight * 0.5)) {
-					// 		this.pixel_scale = 1
-					// 	}
-					// }
-					// if (this.pixel_Height > (this.data.windowHeight * 0.5)) {
-					// 	if ((this.data.windowHeight * 0.5) / this.pixel_Height < 1) {
-					// 		this.pixel_scale = (this.data.windowHeight * 0.5) / this.pixel_Height
-					// 	}
-					// } else {
-					// 	if (this.pixel_Width < (this.data.windowWidth * 0.5) && this.pixel_Height < (this.data
-					// 			.windowHeight * this.pixelScale)) {
-					// 		this.pixel_scale = 1
-					// 	}
-					// }
-
-					let real_width = Number(this.inputWidth);
-					let real_height = Number(this.inputHeight);
-					if (real_width > real_height) {
-						this.filletScale = real_width / 100;
-					} else {
-						this.filletScale = real_height / 100;
-					}
-
-					this.$refs['NumSlider'].initFilletRadius(that.newDefalutFilletData, that.filletScale);
-
-				}).catch(err => {
-
-				});
 		},
 
-			//查设备明细
-			getDetailMachine() {
-				//this.OldConvert_rate = 10
-				this.getCustomSizeInfo();
-				// homeservice.WorksList({
-				// 	machine_id: this.queryPage.machine_id,
-				// 	s: 'machine.detail'
-				// }).then(res => {
-				// 	//console.log("getDetailMachine")
-				// 	this.OldConvert_rate = res.convert_rate
-				// 	this.render_cove_width = res.size.width * this.OldConvert_rate //最大宽度
-				// 	this.render_cove_height = res.size.height * this.OldConvert_rate //最大高度
-				// 	this.getCustomSizeInfo();
-				// }).catch(err => {
-
-				// });
-			},
+		//下拉加载
+		onPullDownRefresh() {
+			this.LoupanList = []
+			this.loadGoodsList(Enums.DATA_DIRECTION.UP);
 		},
 
-
 		//上拉加载
 		onReachBottom() {
-			//console.log("加载更多")
-			//console.log("加载更多22this.LoupanList.length"+this.LoupanList.length)
-			if (this.LoupanList.length < 12) {
-				return setTimeout(() => {
-					uni.showToast({
-						title: '没有更多数据了！',
-						icon: 'none'
-					});
-				}, 500);
-			}
-			this.queryPage.page = this.queryPage.page + 1;
-			this.loadGoodsList(Enums.DATA_DIRECTION.DOWN);
-		},
 
+		},
 
 		onLoad(options) {
+			//设备信息
+			let app = uni.getSystemInfoSync();
+			//胶囊信息
+			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+			this.titleHeight = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2
 			//获取屏幕宽高
 			this.sliderdefaultWith = uni.upx2px(280) + 22;
 			let that = this;
-
-			if (options) {
-				this.machineDetail = JSON.parse(options.machineDetail);
-				if (this.machineDetail) {
-					this.render_cove_width = this.machineDetail.size.width * this.OldConvert_rate //最大宽度
-					this.render_cove_height = this.machineDetail.size.height * this.OldConvert_rate //最大高度
-				}
-			}
-
-			wx.getSystemInfo({
+			uni.getSystemInfo({
 				success: function(res) {
 					let pixelRate = res.windowWidth / 750;
 					that.data.windowWidth = res.windowWidth // 屏幕宽度
@@ -925,35 +905,59 @@
 					let heiPixelRate = res.windowHeight / 1452;
 					that.heiPixelRate = heiPixelRate
 					that.data.pixelRate = pixelRate // 屏幕宽度比率
-					if (options) { // 判断是从设备进来
+					if (options) {
+						//判断是从设备进来 
 						that.queryPage.machine_id = options.machine_id // 设备id
 						that.parameter.machine_id = options.machine_id // 设备id
 						//画布接口/查询布置画布列表
 						that.LoupanList = []
+						that.loadGoodsList(Enums.DATA_DIRECTION.UP);
+						homeservice.WorksList({
+							machine_id: that.parameter.machine_id,
+							s: 'machine.detail'
+						}).then(res => {
+							console.log(res);
+							res.convert_rate = 10;
+							that.OldConvert_rate = res.convert_rate
+							//console.log(res.convert_rate);
+							that.render_cove_width = res.size.width * that.OldConvert_rate //最大宽度
+							that.render_cove_height = res.size.height * that.OldConvert_rate //最大高度
+							//获取通用商品详情
+							homeservice.queryList({
+								s: 'Product.getCustomize',
+								machine_id: that.parameter.machine_id
+							}).then(result => {
+								that.good = result
+								that.wValue = res.size.width * that.OldConvert_rate //固定宽高比率计算(像素)
+								that.hValue = res.size.height * that.OldConvert_rate //固定宽高比率计算(像素)
+								that.previewWidth = res.size.width * that.OldConvert_rate //基础(像素)
+								that.previewHeight = res.size.height * that.OldConvert_rate //基础(像素)
+								that.inputWidth = 100 //文本(毫米)
+								that.inputHeight = 100 //文本(毫米)
+								that.pixel_Width = 100 * that.OldConvert_rate //实际(像素)
+								that.pixel_Height = 100 * that.OldConvert_rate //实际(像素)
+								that.getPixelScale();
+								uni.stopPullDownRefresh();
+							}).catch(err => {
+								uni.stopPullDownRefresh();
+								uni.showToast({
+									title: err.msg,
+									icon: 'none'
+								});
+							});
+						}).catch(err => {
 
-						that.getDetailMachine()
-
-						if (options.isFirstPage) {
-							that.isFirstPage = options.isFirstPage
-						}
-
-
+						});
 					}
 				}
 			});
 		},
 
-		created() {
-			//设备信息
-			let app = uni.getSystemInfoSync();
-			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
-			this.headheight = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app
-				.statusBarHeight) * 2;
-		},
-
 		onShow() {
-
+			this.preview = false;
+			this.type = 1;
 		}
+
 	}
 </script>
 
@@ -963,30 +967,30 @@
 	}
 
 	.equalRatioAxtive {
-		color: #E6B01A !important;
-		border-color: #E6B01A !important;
+		color: #2a82e4 !important;
+		border-color: #2a82e4 !important;
 	}
 
 	.directionAxtive {
-		border-color: #E6B01A !important;
+		border-color: #2a82e4 !important;
 	}
 
 	.classificationLeft {
-		background: #E6B01A !important;
+		background: #E7BE16 !important;
 	}
 
 	.classificationRight {
-		background: #E6B01A !important;
+		background: #E7BE16 !important;
 	}
 
 	.previewAxtiveLeft {
-		background: #E6B01A;
+		background: linear-gradient(92deg, #F29F3D, #F29F3D);
 		box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
 		border-radius: 50upx 50upx 0px 50upx;
 	}
 
 	.previewAxtiveRight {
-		background: #E6B01A;
+		background: linear-gradient(92deg, #F29F3D, #F29F3D);
 		box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
 		border-radius: 50upx 50upx 50upx 0px;
 	}
@@ -999,16 +1003,14 @@
 		color: #FFFFFF;
 
 		.eq_list_div {
-			// background: #FFFFFF;
 			padding: 40upx 20upx;
 			display: flex;
 			align-items: center;
 			border-bottom: 1px solid #282932;
 		}
-
 	}
 
-	// 返回顶部
+	//返回顶部
 	.to-top {
 		position: fixed;
 		bottom: 150upx;
@@ -1018,7 +1020,6 @@
 		border-radius: 50%;
 		text-align: center;
 		line-height: 80upx;
-		// box-shadow: 5upx 5upx 5upx #ebeef5;
 		transform: rotate(-90deg);
 		background: #000;
 		opacity: 0.5;
@@ -1029,10 +1030,9 @@
 		color: #FFFFFF;
 	}
 
-	.edit-address {
-
 	.form {
-			height: 100%;
+		margin-top: 15px;
+		height: calc(100% - 90upx);
 		color: #FFFFFF;
 
 		.item {
@@ -1073,10 +1073,9 @@
 			line-height: 88upx;
 			width: 300upx;
 			height: 88upx;
-				background: linear-gradient(92deg, #E6B01A, #F29F3D);
+			background: linear-gradient(92deg, #F29F3D, #F29F3D);
 			box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
 			border-radius: 50upx;
 		}
 	}
-	}
 </style>
\ No newline at end of file

pages/mine/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>

pages/mine/self_help_payment_details.vue

-<template>
-	<view class="full-width full-height" :style="{overflow: isReady ? 'hidden' : 'scroll' }" style="overflow: hidden;background: #FFFFFF; ">
-		
-		<myhead  :title="ddddd" :color="'#131319'" :titleShow="true" :backShow="true"
-			:background="'#fff'"></myhead>
-		
-		
-	
-		<!-- 打印机音乐 -->
-		<audio src="https://img.colorpark.cn/wechat/ring2.m4a" :action="ringaction" controls loop
-			style="opacity: 0; position: absolute;"></audio>
-		<!-- 继续定制 -->
-		<view @click="tomall" style="position: fixed; right: 0; bottom: 100upx; display: flex;
-		align-items: center;justify-content: center; width: 100upx; height: 88upx; 
-		background: #43cf7c; border-radius: 44upx 0px 0px 44upx; z-index: 999;">
-			<view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;">
-				<view>继续</view>
-				<view>定制</view>
-			</view>
-		</view>
-		<!-- https://img.colorpark.cn/wechat/track/dayinquGolf.png
-		https://img.colorpark.cn/wechat/track/fukuanquGolf.png
-		https://img.colorpark.cn/wechat/track/paiduiquGolf.png
-		https://img.colorpark.cn/wechat/track/shejiquGolf.png -->
-		<view style="height:100%;width: 100%; overflow: hidden; margin-top: 280upx;">
-			<!-- goods.status.value 订单状态(0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成)  "-->
-			<view :animation="BoxTwoAnimation" style="width: 100%; height: 100%;"
-				v-if="(orderOrderStatusData.status == 0 || orderOrderStatusData.status == 1 || orderOrderStatusData.status == 10 || orderOrderStatusData.status == 2) && type != 1 && LoadState">
-				<!-- 排队中-付款区底图 -->
-				<view v-if="orderOrderStatusData.status == 0"
-					style="position: absolute; top: 0; right: 200%; width: 100%; height: 100%;overflow: hidden;">
-					<image src="https://img.colorpark.cn/wechat/track/fukuanquGolf.png" mode="widthFix"
-						style="width: 100%;"></image>
-				</view>
-				<!-- 排队中 -->
-				<view v-if="orderOrderStatusData.status == 0"
-					style="position: absolute; width: 100%; height: 100%; overflow: hidden; right: 100%;">
-					<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
-						<image src="https://img.colorpark.cn/wechat/track/paiduiquGolf.png" mode="widthFix"
-							style="width: 100%;"></image>
-					</view>
-					<view style="position: relative; width: 100%; height: 100%;overflow: hidden;">
-						<view class='crate-wrapper'>
-							<view style="display: flex;position: relative;">
-
-								<view style="position: relative;transition: all 3s; z-index: 2;" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
-								transform: 'translateX(' + data.activebrushX + 'px)'}">
-									<view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; 
-									margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view>
-									<!-- 作品图 -->
-									<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" style="display: flex; align-items: center; justify-content: center;
-									position: absolute; width: 100%; height: 100%; left: 0; top: 0;
-									right: 0; margin: auto; bottom: 0;">
-										<view style="width: 90%; height: 90%; display: flex;">
-											<view style="width: calc(100% / 4);" 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: 50%; height: 50%; position: absolute; 
-													top: 0; left: 0; right: 0; bottom: 0;
-													margin: auto; z-index:0;" :src="goods.works_image + '?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="goods.goods.front_image" mode="aspectFit"></image>
-												</view>
-											</view>
-										</view>
-									</view>
-								</view>
-
-							</view>
-						</view>
-					</view>
-				</view>
-
-				<!-- 打印中---付款区底图 -->
-				<view v-if="orderOrderStatusData.status == 1"
-					style="position: absolute; top: 0; right: 100%; width: 100%; height: 100%;overflow: hidden;">
-					<image src="https://img.colorpark.cn/wechat/track/fukuanquGolf.png" mode="widthFix"
-						style="width: 100%;"></image>
-				</view>
-				<!-- 生产中打印 1-->
-				<view
-					style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">
-					<!-- 背景图 打印图和出货区-->
-					<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
-						<view style="position: relative; width: 100%;">
-							<image src="https://img.colorpark.cn/wechat/track/dayinquGolf.png" mode="widthFix"
-								style="width: 100%;"></image>
-						</view>
-						<view style="position: relative; width: 100%; margin-top: -13px;">
-							<image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix"
-								style="width: 100%;"></image>
-						</view>
-					</view>
-					<view style="position: relative;width: 100%; height: 100%;overflow: hidden;"
-						:animation="printingEnd">
-						<view class='crate-wrapper'>
-							<!-- style="overflow: hidden;" -->
-							<view class="brush" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
-								transform: 'translateX(' + data.printingStartX + 'px)'}">
-
-								<view :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}"
-									style="position: relative;overflow: hidden;">
-									<!-- 底图 -->
-									<view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; 
-									margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view>
-									<!-- 底图 -->
-									<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" style="display: flex; align-items: center; justify-content: center;
-									position: absolute; width: 100%; height: 100%; left: 0; top: 0;
-									right: 0; margin: auto; bottom: 0;">
-										<view style="width: 90%; height: 90%; display: flex;">
-											<view style="width: calc(100% / 4);" 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: 100%; height: 100%;position: absolute; 
-													top: 0; left: 0; right: 0; bottom: 0; 
-													margin:auto; z-index: 1;" :src="goods.goods.front_image_old" mode="aspectFit"></image>
-												</view>
-											</view>
-										</view>
-									</view>
-									<!-- 作品图 -->
-									<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 3:0}" style="display: flex; align-items: center; justify-content: center;
-									position: absolute; width: 100%; height: 100%; left: 0; top: 0;
-									right: 0; margin: auto; bottom: 0;">
-										<view style="width: 90%; height: 90%; display: flex;">
-											<view style="width: calc(100% / 4);" 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: 50%; height: 50%; position: absolute; 
-													top: 0; left: 0; right: 0; bottom: 0;
-													margin: auto; z-index:0;" :src="goods.works_image + '?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="goods.goods.front_image" mode="aspectFit"></image> -->
-												</view>
-											</view>
-										</view>
-									</view>
-									<!-- 刷子白图 -->
-									<view
-										:style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
-										style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 4;">
-										<view :style="{width: leftx +'px',height: data.render_cove_height +'px'}"
-											style="position: absolute; left: 0; top: 0;background: #fff;">
-										</view>
-									</view>
-									<!-- 底图 -->
-									<view :style="{width: leftx +'px',height: data.render_cove_height +'px'}"
-										style="overflow: hidden; position: absolute;left: 0; top: 0; bottom: 0; z-index: 5;">
-										<view
-											:style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
-											style="display: flex; align-items: center; justify-content: center;
-										position: absolute; left: 0; top: 0;
-										right: 0; margin: auto; bottom: 0;">
-											<view style="width: 90%; height: 90%; display: flex;">
-												<view style="width: calc(100% / 4);" 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: 100%; height: 100%;position: absolute; 
-														top: 0; left: 0; right: 0; bottom: 0; 
-														margin:auto; z-index: 1;" :src="goods.goods.front_image_old" mode="aspectFit"></image>
-													</view>
-												</view>
-											</view>
-										</view>
-									</view>
-									<!-- 色彩公园Lite球图 -->
-									<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 6:0}" style="display: flex; align-items: center; justify-content: center;
-									position: absolute; width: 100%; height: 100%; left: 0; top: 0;
-									right: 0; margin: auto; bottom: 0;">
-										<view style="width: 90%; height: 90%; display: flex;">
-											<view style="width: calc(100% / 4);" 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: 100%; height: 100%;position: absolute; 
-													top: 0; left: 0; right: 0; bottom: 0; 
-													margin:auto; z-index: 1;" :src="goods.goods.front_image" mode="aspectFit"></image>
-												</view>
-											</view>
-										</view>
-									</view>
-								</view>
-								<!-- 刷子范围 -->
-								<view
-									:style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
-									style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 10;">
-									<view class="item-text" :animation="animMaind" :class="{printer:printer}"
-										:style="{left: leftx +'px',opacity: printer ? 1 : 0}"
-										style="width:40px; height:100px; position:absolute; top: -50px;">
-										<image src="../../static/img/shua.png" mode=""
-											style="width:40px; height:100px;"></image>
-									</view>
-								</view>
-							</view>
-
-						</view>
-					</view>
-				</view>
-				<!-- 取货状态 10,2-->
-				<view style="position: relative; width: 100%; height: 100%; overflow: hidden;">
-					<!-- 底图 -->
-					<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
-						<view style="position: relative; width: 100%;">
-							<image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix"
-								style="width: 100%;"></image>
-						</view>
-						<view style="position: relative; width: 100%; margin-top: -13px;">
-							<image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix"
-								style="width: 100%;"></image>
-						</view>
-					</view>
-					<view class='crate-wrapper'>
-						<view class="twobrush" :animation="PickUpStart" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
-						transform: 'translateY(' + -(data.editorHeight + (data.windowHeight - data.editorHeight)/2) + 'px)'}">
-							<!-- 底图 -->
-							<!-- <view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; 
-							margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view> -->
-							<!-- 作品图 -->
-							<!-- <view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}"
-							style="display: flex; align-items: center; justify-content: center;
-							position: absolute; width: 100%; height: 100%; left: 0; top: 0;
-							right: 0; margin: auto; bottom: 0;">
-								<view style="width: 90%; height: 90%; display: flex;">
-									<view style="width: calc(100% / 4);" 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: 50%; height: 50%; position: absolute; 
-											top: 0; left: 0; right: 0; bottom: 0;
-											margin: auto; z-index:0;"
-											:src="goods.works_image + '?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="goods.goods.front_image" mode="aspectFit"></image>
-										</view>
-									</view>
-								</view>
-							</view> -->
-							<view :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}"
-								style="position: relative;overflow: hidden;">
-								<!-- 底色 -->
-								<view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; 
-								margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view>
-								<!-- 底图 -->
-								<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" style="display: flex; align-items: center; justify-content: center;
-								position: absolute; width: 100%; height: 100%; left: 0; top: 0;
-								right: 0; margin: auto; bottom: 0;">
-									<view style="width: 90%; height: 90%; display: flex;">
-										<view style="width: calc(100% / 4);" 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: 100%; height: 100%;position: absolute; 
-												top: 0; left: 0; right: 0; bottom: 0; 
-												margin:auto; z-index: 1;" :src="goods.goods.front_image_old" mode="aspectFit"></image>
-											</view>
-										</view>
-									</view>
-								</view>
-								<!-- 作品图 -->
-								<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 3:0}" style="display: flex; align-items: center; justify-content: center;
-								position: absolute; width: 100%; height: 100%; left: 0; top: 0;
-								right: 0; margin: auto; bottom: 0;">
-									<view style="width: 90%; height: 90%; display: flex;">
-										<view style="width: calc(100% / 4);" 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: 50%; height: 50%; position: absolute; 
-												top: 0; left: 0; right: 0; bottom: 0;
-												margin: auto; z-index:0;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
-													mode="aspectFit"></image>
-											</view>
-										</view>
-									</view>
-								</view>
-								<!-- 色彩公园Lite球图 -->
-								<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 5:0}" style="display: flex; align-items: center; justify-content: center;
-								position: absolute; width: 100%; height: 100%; left: 0; top: 0;
-								right: 0; margin: auto; bottom: 0;">
-									<view style="width: 90%; height: 90%; display: flex;">
-										<view style="width: calc(100% / 4);" 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: 100%; height: 100%;position: absolute; 
-												top: 0; left: 0; right: 0; bottom: 0; 
-												margin:auto; z-index: 1;" :src="goods.goods.front_image" mode="aspectFit"></image>
-											</view>
-										</view>
-									</view>
-								</view>
-							</view>
-
-						</view>
-					</view>
-				</view>
-			</view>
-			<!-- 暂时缺货、订单已取消 -->
-			<view
-				style="width: 100%; height: 100%; position: absolute; top: 0; z-index: 2;background: #131319 !important;"
-				v-if="(orderOrderStatusData.status == 3 || orderOrderStatusData.status == -3) && type != 1">
-				<view style="padding-bottom: 32px">
-					<view style="width: 220upx; margin:90upx auto 40upx;">
-						<image style="width: 220upx; height: 220upx; border-radius: 50%;"
-							src="../../static/icon_close.png" mode="aspectFill"></image>
-					</view>
-					<view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;">
-						暂时缺货、订单已取消
-					</view>
-					<view style="margin-top: 378upx; display: flex;align-items: center; justify-content: center;">
-						<view style="width: 187upx; position: relative; border-radius: 10upx;"
-							@click="previewImg(goods,0)">
-							<view
-								style="width: 128upx; height: 128upx;margin:auto; display: block; position: relative; overflow: hidden;">
-								<view style="width: 50%; height: 50%; background: #FFFFFF; position: absolute; top: 0; 
-								left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;"></view>
-								<image
-									style="width: 50%; height: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
-									:src="goods.works_image + '?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: 10;"
-									:src="goods.goods.front_image" mode="aspectFit"></image>
-							</view>
-						</view>
-						<view style="margin-left: 19upx; margin-top: 5upx; ">
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
-								<text> 订单编号： </text>
-								<text style="color: #888888;"> {{goods.id}} </text>
-								<text @click="tosetClipboardData(goods.id)"
-									style="margin-left: 5upx;font-size: 22upx;">复制</text>
-							</view>
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 15upx;">
-								<text> 产品尺寸： </text>
-								<text style="color: #888888;"> {{goods.goods.name || ''}} </text>
-							</view>
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
-								<text> 下单时间： </text>
-								<text style="color: #888888;"> {{goods.create_time}} </text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-			<!-- 设备故障状态 -->
-			<view
-				style="width: 100%; height: 100%; position: absolute; top: 0; z-index: 2;background: #131319 !important;"
-				v-if="orderOrderStatusData.status == -2 && type != 1">
-				<view class="start" style="padding-bottom: 100upx; padding-top: 200upx;">
-					<image src="../../static/icon_guaqi.png" mode="aspectFill" class="start_img"></image>
-					<view class="start_text">{{msg || ''}}</view>
-					<view>
-						<view class="start_text">联系客服</view>
-						<view class="start_text" style="display: flex; justify-content: center; align-items: center;">
-							<image src="../../static/phone.png" mode=""
-								style="width: 32upx; height: 32upx; margin-right: 5upx;"></image>
-							{{phone || '18938664545'}}
-						</view>
-					</view>
-				</view>
-				<image src="../../static/logo.jpg" mode="aspectFill"
-					style="width: 664upx; height: 757upx; opacity: 0.03; position: absolute; left: 0; bottom: 0; z-index: -1;">
-				</image>
-			</view>
-			<!-- 取货完成状态 -->
-			<view v-if="orderOrderStatusData.status == 7 && type != 1">
-				<view style="padding-bottom: 32px">
-					<view style="width: 220upx; margin:90upx auto 40upx;">
-						<image style="width: 220upx; height: 220upx; border-radius: 50%;"
-							src="../../static/mine/Pick-up.png" mode="aspectFill"></image>
-					</view>
-					<view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;">
-						打印完成
-					</view>
-					<view style="height: 378upx; text-align: center;">
-						<text style="font-size: 36upx; line-height: 378upx;font-weight: bold;">
-							{{goods.order_queue.id || ''}}
-						</text>
-					</view>
-					<view style="display: flex;align-items: center; justify-content: center;">
-						<view style="width: 187upx; position: relative; border-radius: 10upx;"
-							@click="previewImg(goods,0)">
-							<view
-								style="width: 128upx; height: 128upx;margin:auto; display: block; position: relative; overflow: hidden;">
-								<view
-									style="width: 50%; height: 50%; background: #FFFFFF; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;">
-								</view>
-								<image
-									style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 10;"
-									:src="goods.goods.front_image" mode="aspectFit"></image>
-								<image
-									style="width: 50%; height: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
-									:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
-									mode="aspectFit"></image>
-							</view>
-						</view>
-						<view style="margin-left: 19upx; margin-top: 5upx; ">
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
-								<text> 订单编号： </text>
-								<text style="color: #888888;"> {{goods.id}} </text>
-								<text @click="tosetClipboardData(goods.id)"
-									style="margin-left: 5upx;font-size: 22upx;">复制</text>
-							</view>
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 15upx;">
-								<text> 产品尺寸： </text>
-								<text style="color: #888888;"> {{goods.goods.name || ''}} </text>
-							</view>
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
-								<text> 下单时间： </text>
-								<text style="color: #888888;"> {{goods.create_time}} </text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import homeservice from '@/service/homeservice.js'
-	import myhead from '../index/head/head.vue'; // 页眉
-
-	
-	export default {
-		components: {myhead},
-		computed: {},
-		data() {
-			return {
-				goods: {},
-				queryPage: {
-					s: 'Order.detail',
-					id: null
-				},
-				machine_id: null, //设备id
-				type: null, //1：配送版，2：单机版，3：自助版
-
-				lineUpState: false, //排队状态----横向进入滑动动画
-				leaveUpState: false, //排队状态----横向离开滑动动画
-
-				printingStart: false, //打印状态----横向进来滑动动画 Printing start
-				printingEnd: {}, ///打印状态----纵向离开动画 Printing end
-				initstate: false, //打印状态----显示刷子
-				PickUpStart: {}, //取货状态-----手机壳从上面动画出来
-				PickUpTopBottom: null, //定时器----取货上下浮动
-				statetime: null, //定时器----打印机动画
-				orderOrderStatusTime: null, //定时器---查询订单状态
-				OrderOrderRankingTime: null, //定时器---排队定时器
-				leftx: 0, //x轴-----刷子打印
-				topy: -20, //y-----刷子打印
-				animMaind: {}, //动画----刷子上下动画
-				animMaind_time: 577, //800动画时间----刷子上下动画时间
-				isReady: false, //礼花开关
-				BoxTwoAnimation: {}, //排队-打印-取货流程图架构
-				oldRankinglist: [], //上次排队队列
-				rankinglist: [], //排队队列
-				teststate: false, //开启测试模式 false  true
-				orderOrderStatusData: null, //订单状态
-				ringaction: { //打印机音乐状态
-					method: 'pause' //method: 'pause'method: 'play'
-				},
-				printer: false, //打印机状态
-
-				data: {
-					windowWidth: 0, // 屏幕宽度
-					windowHeight: 0, // 屏幕高度
-					pixelRate: 0, // 屏幕宽度比率
-					editorWidth: 0, // 设计宽度
-					editorHeight: 0, // 设计高度
-					render_cove_width: null,
-					render_cove_height: null,
-					activebrushX: -500, //排队盒子动画坐标
-					printingStartX: -500, //生产中盒子动画坐标
-				},
-
-				tomallstate: true, //防止返回触动页面销毁事件
-				LoadState: false, //加载完成
-				orderCurrentOrder: null,
-				orderCurrentOrderTime: null
-			};
-		},
-		onReady() {
-
-		},
-		methods: {
-			tomall() {
-				this.tomallstate = false
-				wx.navigateBack({
-					delta: 1
-				})
-			},
-			init() {
-				this.printer = true
-				this.isReady = false
-				this.leftx = this.data.render_cove_width
-				// this.topy = -20
-				setTimeout(function() {
-					this.updata()
-				}.bind(this), 2000)
-			},
-			updata() {
-				setTimeout(function() {
-					this.ringaction.method = 'play' //开启音乐
-					console.log('5开启音乐')
-				}.bind(this), this.animMaind_time)
-				// 无限循环动画
-				var animation = wx.createAnimation({
-					duration: this.animMaind_time, // 动画执行时间
-					timingFunction: 'linear', // 动画执行效果
-				})
-				var state = true // 控制上下滑动setTimeout setInterval
-				this.statetime = setInterval(function() {
-					if (state == true) {
-						animation.translate(0, (this.data.render_cove_height)).step(); //向下移动
-					} else {
-						animation.translate(0, 0).step(); //向上移动
-					}
-					state = !state
-					// 减慢打印时间
-					if (this.leftx <= 10) {
-						if (this.orderOrderStatusData.status == 10 || this.orderOrderStatusData.status == 2) {
-							this.leftx -= 2
-						} else {
-							this.leftx -= 0.1
-						}
-					} else {
-						this.leftx -= 1
-					}
-					this.setData({
-						animMaind: animation.export(),
-						leftx: this.leftx
-					})
-					// 打印完成----清除定时器
-					if (this.leftx <= 0) {
-						this.ringaction.method = 'pause' //暂停音乐
-						console.log('5暂停音乐')
-						clearInterval(this.statetime)
-						this.statetime = null
-						this.isReady = true;
-						this.printer = false
-						uni.showToast({
-							title: '打印完成，即将出货',
-							icon: 'none',
-							duration: 2000
-						});
-						setTimeout(function() {
-							this.boxinit({
-								duration: 3000, // 动画执行时间
-								axisX: 0, // x轴移动
-								axisY: this.data.windowHeight, // y轴移动
-								settimeout: 3500, // 定时器时间
-							}) // 触发打印完成--手机壳下移消失
-						}.bind(this), 2000)
-					}
-				}.bind(this), this.animMaind_time)
-			},
-			// 打印完成--手机壳下移消失
-			boxinit(data) {
-				var animation = wx.createAnimation({
-					duration: data.duration, // 动画执行时间
-					timingFunction: 'linear', // 动画执行效果
-				})
-				animation.translate(data.axisX, data.axisY).step();
-				this.setData({
-					printingEnd: animation.export(),
-				})
-				setTimeout(function() {
-					this.Box_Two_Animation({
-						duration: 2000, // 动画执行时间
-						axisX: 0, // x轴移动
-						axisY: -this.data.windowHeight, // y轴移动
-						settimeout: 2500, // 定时器时间
-						settimeoutState: true, //开启下一步
-					})
-				}.bind(this), data.settimeout)
-			},
-			// 取货页面----底部向上滑动动画
-			Box_Two_Animation(data) {
-				var animation = wx.createAnimation({
-					duration: data.duration, // 动画执行时间
-					timingFunction: 'linear', // 动画执行效果
-				})
-				animation.translate(data.axisX, data.axisY).step();
-				this.setData({
-					BoxTwoAnimation: animation.export(),
-				})
-				if (!data.settimeoutState) return;
-				wx.setNavigationBarTitle({
-					title: '取货区'
-				})
-				setTimeout(function() {
-					let boxinitY = (this.data.windowHeight - ((this.data.windowHeight - this.data.editorHeight) /
-						2)) - (this.data.editorHeight / 3 * 1)
-					this.Two_Brush_Animation({
-						duration: 5000, // 动画执行时间
-						axisX: 0, // x轴移动
-						axisY: boxinitY, // y轴移动
-						settimeout: 5000, // 定时器时间
-					})
-				}.bind(this), data.settimeout)
-			},
-			// 取货手机壳动画
-			Two_Brush_Animation(data) {
-				let animation = wx.createAnimation({
-					duration: data.duration, // 动画执行时间
-					timingFunction: 'linear', // 动画执行效果
-				})
-				animation.translate(data.axisX, data.axisY).step();
-				this.setData({
-					PickUpStart: animation.export(),
-				})
-				// 上下浮动
-				clearInterval(this.PickUpTopBottom)
-				this.PickUpTopBottom = null
-				setTimeout(function() {
-					uni.showToast({
-						title: '已出货，请在出货口取货吧',
-						icon: 'none',
-						duration: 2000
-					});
-					var state = true
-					let animation = wx.createAnimation({
-						duration: 2000, // 动画执行时间
-						timingFunction: 'linear', // 动画执行效果
-					})
-					this.PickUpTopBottom = setInterval(function() {
-						if (state == true) {
-							animation.translate(data.axisX, (data.axisY + 40)).step();
-						} else {
-							animation.translate(data.axisX, data.axisY).step();
-						}
-						state = !state
-						this.setData({
-							PickUpStart: animation.export(),
-						})
-					}.bind(this), 2000)
-				}.bind(this), data.settimeout)
-			},
-			loadData() {
-				uni.showLoading({
-					title: '正在加载中...'
-				})
-				homeservice.WorksList(this.queryPage).then(result => {
-					this.goods = result
-					/* if (this.$base.mobilePhoneCaseSize) {
-						this.data = this.$base.mobilePhoneCaseSize
-					} else { */
-						result.goods.design_width = 277.5 / this.data.pixelRate
-						result.goods.design_height = 210 / this.data.pixelRate
-						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_cove_width = result.goods.design_width * this.data.pixelRate // 设计高度
-						this.data.render_cove_height = result.goods.design_height * this.data.pixelRate // 设计高度
-						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 + 50)
-						this.data.printingStartX = -((this.data.windowWidth - this.data.editorWidth) / 2 + this
-							.data.editorWidth + 50)
-						//this.$base.mobilePhoneCaseSize = this.data
-					/* } */
-					this.leftx = this.data.render_cove_width
-					// status.value 订单状态 0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成 -->
-					// type.value 1直营配送站 2 万能通用版 3色彩自助站
-					if (this.teststate) {
-						result.status.value = 1 //1：生产中
-						result.type.value = 2 //2单机版
-					}
-					this.type = result.type.value
-					// 单机版查询当前设备打印订单
-					if (this.type == 2) {
-						this.anb() //查询排队列表
-						this.leaveto(3)
-
-						// clearInterval(this.orderCurrentOrderTime)
-						// this.orderCurrentOrderTime = setInterval(function(){
-						// 	this.OrdercurrentOrder() //单机版查询设备打印订单
-						// 	this.anbtwo() //记录排队人数
-						// }.bind(this),10000)
-						// setTimeout(function(){
-						// 	this.OrdercurrentOrder() //单机版查询设备打印订单
-						// 	// this.anbtwo() //记录排队人数
-						// }.bind(this),10000)
-					} else {
-						this.OrderOrderStatusInit()
-					}
-					uni.hideLoading();
-					uni.stopPullDownRefresh();
-				}).catch(err => {
-					uni.hideLoading();
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			anb() {
-				homeservice.WorksList({
-					s: 'Order.orderStatus',
-					order_id: this.queryPage.id
-				}).then(result => {
-					this.orderOrderStatusData = result
-					this.orderOrderStatusData.status = 0
-					// wx.setNavigationBarTitle({title: '排队区' })
-					// this.anbone()
-				}).catch(err => {
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			anbone() {
-				homeservice.WorksList({
-					s: 'Order.orderRanking',
-					order_id: this.queryPage.id,
-					machine_id: this.machine_id
-				}).then(result => {
-					this.oldRankinglist = [] // 第一次进来记录排队人数
-					for (var i = 0; i < result.ranking; i++) {
-						this.oldRankinglist.push({
-							w: 30,
-							x: 0
-						})
-					}
-					this.rankinglist = this.oldRankinglist
-					this.Box_Two_Animation({
-						duration: 0, // 动画执行时间
-						axisX: this.data.windowWidth + this.data.windowWidth, // x轴移动
-						axisY: 0, // y轴移动
-						settimeout: 0, // 定时器时间
-						settimeoutState: false, //开启下一步
-					})
-					this.LoadState = true
-					setTimeout(function() {
-						this.Box_Two_Animation({
-							duration: 3000, // 动画执行时间
-							axisX: this.data.windowWidth, // x轴移动
-							axisY: 0, // y轴移动
-							settimeout: 0, // 定时器时间
-							settimeoutState: false, //开启下一步
-						})
-					}.bind(this), 1000)
-					//排队状态----盒子横向进入滑动动画时间3s
-					setTimeout(function() {
-						this.lineUpState = true
-						this.data.activebrushX = 0
-					}.bind(this), 4500)
-				}).catch(err => {
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			// anbtwo(){
-			// 	homeservice.WorksList({
-			// 		s:'Order.orderRanking',
-			// 		order_id:this.queryPage.id,
-			// 		machine_id:this.machine_id
-			// 	}).then(result => {
-			// 		this.oldRankinglist = []// 第一次进来记录排队人数
-			// 		for(var i =0;i<result.ranking;i++){
-			// 			this.oldRankinglist.push({
-			// 				w:30,x:0
-			// 			})
-			// 		}
-			// 		this.rankinglist = this.oldRankinglist
-			// 	}).catch(err => {
-			// 		uni.showToast({title: err.msg || err.data,icon: 'none'});
-			// 	});
-			// },
-			OrdercurrentOrder() {
-				console.log('单机版查询设备打印订单')
-				homeservice.WorksList({
-					s: 'Order.currentOrder',
-					machine_id: this.machine_id
-				}).then(result => {
-					this.orderCurrentOrder = result.order_id
-					if (this.teststate) {
-						this.orderCurrentOrder = this.queryPage.id // 测试
-					}
-					// if(this.orderCurrentOrder == this.queryPage.id){
-					// 	console.log('清除定时器---')
-					// 	clearInterval(this.orderCurrentOrderTime)
-					// 	this.leaveto(0)
-					// }
-					console.log('清除定时器---')
-					clearInterval(this.orderCurrentOrderTime)
-				}).catch(err => {
-					uni.hideLoading();
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			OrderOrderStatusInit(e) {
-				homeservice.WorksList({
-					s: 'Order.orderStatus',
-					order_id: this.queryPage.id
-				}).then(result => {
-					//result.status -1：订单不存在 0：待打印 1：打印中 10：打印完成 2：生产完成 3：取消生产
-					if (this.teststate || e == 2) {
-						result.status = -2 // 测试
-					}
-					this.orderOrderStatusData = result
-					if (result.status == 0) { //0：待打印排队中
-						wx.setNavigationBarTitle({
-							title: '排队区'
-						})
-						this.OrderOrderRankingInit(4)
-						if (this.teststate) {
-							// setTimeout(function(){
-							// 	this.OrderOrderRankingInit(1)
-							// }.bind(this),5000)
-							// setTimeout(function(){
-							// 	this.OrderOrderRankingInit(-1)
-							// }.bind(this),10000)
-						}
-						if (this.type != 2) {
-							if (!this.teststate && e != 2) { // 排队定时器  测试需要关闭
-								clearInterval(this.OrderOrderRankingTime)
-								this.OrderOrderRankingTime = setInterval(function() {
-									this.OrderOrderRankingInit()
-								}.bind(this), 10000)
-							}
-						}
-					} else if (result.status == 1) { // 1：打印中
-						wx.setNavigationBarTitle({
-							title: '打印区'
-						})
-						// 打开排队页面
-						this.Box_Two_Animation({
-							duration: 0, // 动画执行时间
-							axisX: this.data.windowWidth, // x轴移动
-							axisY: 0, // y轴移动
-							settimeout: 0, // 定时器时间
-							settimeoutState: false, //开启下一步
-						})
-						this.LoadState = true
-						setTimeout(function() {
-							this.Box_Two_Animation({
-								duration: 3000, // 动画执行时间
-								axisX: 0, // x轴移动
-								axisY: 0, // y轴移动
-								settimeout: 0, // 定时器时间
-								settimeoutState: false, //开启下一步
-							})
-						}.bind(this), 1000)
-						// 打印状态滑动进来
-						setTimeout(function() {
-							this.printingStart = true //打印状态----横向进来滑动动画 3s
-							this.data.printingStartX = 0
-						}.bind(this), 4500)
-						setTimeout(function() {
-							this.initstate = true //打印状态----显示刷子
-							this.init()
-						}.bind(this), 7500)
-						if (!this.teststate) {
-							// 定时器查询订单状态
-							clearInterval(this.orderOrderStatusTime)
-							this.orderOrderStatusTime = setInterval(function() {
-								this.orderOrderStatusGet()
-							}.bind(this), 10000)
-						} else {
-							// 定时器查询订单状态
-							clearInterval(this.orderOrderStatusTime)
-							this.orderOrderStatusTime = setInterval(function() {
-								this.orderOrderStatusGet()
-							}.bind(this), 30000)
-						}
-					} else if (result.status == 2 || result.status == 10) { //2：生产完成 10：打印完成
-						this.LoadState = true
-						wx.setNavigationBarTitle({
-							title: '取货区'
-						})
-						this.Box_Two_Animation({
-							duration: 2000, // 动画执行时间
-							axisX: 0, // x轴移动
-							axisY: -this.data.windowHeight, // y轴移动
-							settimeout: 2500, // 定时器时间
-							settimeoutState: true, //开启下一步
-						})
-					} else if (result.status == 3 || result.status == -3) {
-						wx.setNavigationBarTitle({
-							title: '取消生产'
-						})
-					} else if (result.status == -2) {
-						wx.setNavigationBarTitle({
-							title: '设备故障'
-						})
-					} else if (result.status == 7) {
-						wx.setNavigationBarTitle({
-							title: '取货完成'
-						})
-					}
-				}).catch(err => {
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			// -1：订单不存在 0：待打印 1：打印中 10：打印完成 2：生产完成 3：取消生产
-			// 打印状态滑动进来
-			orderOrderStatusGet() {
-				homeservice.WorksList({
-					s: 'Order.orderStatus',
-					order_id: this.queryPage.id
-				}).then(result => {
-					if (this.teststate) {
-						result.status = 2
-					}
-					this.orderOrderStatusData = result
-					if (result.status == 10 || result.status == 2) {
-						clearInterval(this.statetime)
-						this.statetime = null
-						clearInterval(this.orderOrderStatusTime)
-						this.orderOrderStatusTime = null
-						let animMaind_time = (5 / this.leftx) * 1000
-						// 导出动画
-						this.setData({
-							animMaind_time: animMaind_time || 200,
-						})
-						this.updata()
-					} else if (result.status == 3 || result.status == -3) {
-						this.ringaction.method = 'pause' //暂停音乐
-						console.log('5暂停音乐')
-						wx.setNavigationBarTitle({
-							title: '取消生产'
-						})
-						clearInterval(this.statetime)
-						this.statetime = null
-						clearInterval(this.orderOrderStatusTime)
-						this.orderOrderStatusTime = null
-					} else if (result.status == -2) {
-						this.ringaction.method = 'pause' //暂停音乐
-						console.log('5暂停音乐')
-						wx.setNavigationBarTitle({
-							title: '设备故障'
-						})
-						clearInterval(this.statetime)
-						this.statetime = null
-						clearInterval(this.orderOrderStatusTime)
-						this.orderOrderStatusTime = null
-					} else if (result.status == 7) {
-						this.ringaction.method = 'pause' //暂停音乐
-						console.log('5暂停音乐')
-						wx.setNavigationBarTitle({
-							title: '取货完成'
-						})
-						clearInterval(this.statetime)
-						this.statetime = null
-						clearInterval(this.orderOrderStatusTime)
-						this.orderOrderStatusTime = null
-					}
-				}).catch(err => {
-					console.log(err)
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			// 查询排队
-			// 如果订单不存单，或者订单已经打印完成，那么返回的排名是-1
-			// 如果订单当前正在打印。返回的排名是0
-			// 如果前面有一个订单就返回1，前面有两个订单就返回2
-			OrderOrderRankingInit(state) {
-				homeservice.WorksList({
-					s: 'Order.orderRanking',
-					order_id: this.queryPage.id,
-					machine_id: this.machine_id
-				}).then(result => {
-					if (this.teststate) {
-						result.ranking = state //例子
-					}
-					if (result.ranking >= 0) {
-						if (this.oldRankinglist.length > 0) {
-							if (this.rankinglist.length > result.ranking) {
-								// 排队消失列表效果
-								this.rankinglist[(this.rankinglist.length - 1)].x = 200
-								setTimeout(function() {
-									this.rankinglist[(this.rankinglist.length - 1)].w = 0
-								}.bind(this), 1000)
-								setTimeout(function() {
-									this.rankinglist.pop()
-									if (this.rankinglist.length == 0) {
-										this.leaveto(0)
-									}
-								}.bind(this), 2500)
-							}
-						} else {
-							this.oldRankinglist = [] // 第一次进来记录排队人数
-							for (var i = 0; i < result.ranking; i++) {
-								this.oldRankinglist.push({
-									w: 30,
-									x: 0
-								})
-							}
-							this.rankinglist = this.oldRankinglist
-							// 当排队人数等于0就开始打印
-							if (this.rankinglist.length == 0) {
-								this.leaveto(1)
-							} else {
-								// 快速切换--排队状态设计区底图
-								this.Box_Two_Animation({
-									duration: 0, // 动画执行时间
-									axisX: this.data.windowWidth + this.data.windowWidth, // x轴移动
-									axisY: 0, // y轴移动
-									settimeout: 0, // 定时器时间
-									settimeoutState: false, //开启下一步
-								})
-								this.LoadState = true
-								setTimeout(function() {
-									this.Box_Two_Animation({
-										duration: 3000, // 动画执行时间
-										axisX: this.data.windowWidth, // x轴移动
-										axisY: 0, // y轴移动
-										settimeout: 0, // 定时器时间
-										settimeoutState: false, //开启下一步
-									})
-								}.bind(this), 1000)
-								//排队状态----盒子横向进入滑动动画时间3s
-								setTimeout(function() {
-									this.lineUpState = true
-									this.data.activebrushX = 0
-								}.bind(this), 4500)
-							}
-						}
-					} else {
-						this.leaveto(1)
-					}
-				}).catch(err => {
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			leaveto(e) { //e== 1无排队切换打印 0有排队切换打印
-				clearInterval(this.OrderOrderRankingTime)
-				this.OrderOrderRankingTime = null
-				let time = 3500 //时间
-				if (e == 1) { //无排队切换打印
-					// 快速切换--设计区底图
-					this.Box_Two_Animation({
-						duration: 0, // 动画执行时间
-						axisX: this.data.windowWidth, // x轴移动
-						axisY: 0, // y轴移动
-						settimeout: 0, // 定时器时间
-						settimeoutState: false, //开启下一步
-					})
-					this.LoadState = true
-					setTimeout(function() {
-						this.Box_Two_Animation({
-							duration: 3000, // 动画执行时间
-							axisX: 0, // x轴移动
-							axisY: 0, // y轴移动
-							settimeout: 0, // 定时器时间
-							settimeoutState: false, //开启下一步
-						})
-					}.bind(this), 1000)
-					time = 4500 //无时间
-					wx.setNavigationBarTitle({
-						title: '打印区'
-					})
-				} else if (e == 0) { //有排队切换打印
-					this.LoadState = true
-					this.leaveUpState = true //排队状态----横向离开滑动动画 时间3s
-					this.data.activebrushX = (this.data.windowWidth - this.data.editorWidth) / 2 + this.data.editorWidth +
-						50 //排队状态----横向离开滑动动画 3s
-					setTimeout(function() { // 排队页面滑出---打印页面进入
-						this.Box_Two_Animation({
-							duration: 3000, // 动画执行时间
-							axisX: 0, // x轴移动
-							axisY: 0, // y轴移动
-							settimeout: 0, // 定时器时间
-							settimeoutState: false, //开启下一步
-						})
-					}.bind(this), time)
-					wx.setNavigationBarTitle({
-						title: '打印区'
-					})
-				} else if (e == 3) {
-					// 快速切换--设计区底图
-					this.Box_Two_Animation({
-						duration: 0, // 动画执行时间
-						axisX: this.data.windowWidth, // x轴移动
-						axisY: 0, // y轴移动
-						settimeout: 0, // 定时器时间
-						settimeoutState: false, //开启下一步
-					})
-					this.LoadState = true
-					setTimeout(function() {
-						this.Box_Two_Animation({
-							duration: 3000, // 动画执行时间
-							axisX: 0, // x轴移动
-							axisY: 0, // y轴移动
-							settimeout: 0, // 定时器时间
-							settimeoutState: false, //开启下一步
-						})
-					}.bind(this), 1000)
-					time = 500 //无时间
-					wx.setNavigationBarTitle({
-						title: '打印区'
-					})
-				}
-
-				setTimeout(function() {
-					this.printingStart = true //打印状态----横向进来滑动动画
-					this.data.printingStartX = 0
-				}.bind(this), (time + 3500))
-				// 刷子开始打印手机壳
-				setTimeout(function() {
-					this.initstate = true
-					this.init()
-				}.bind(this), (time + 6500))
-				// 开启定时器查询打印状态
-				if (this.teststate) {
-					clearInterval(this.orderOrderStatusTime)
-					this.orderOrderStatusTime = setInterval(function() {
-						this.orderOrderStatusGet()
-					}.bind(this), 15000)
-				} else {
-					clearInterval(this.orderOrderStatusTime)
-					this.orderOrderStatusTime = setInterval(function() {
-						this.orderOrderStatusGet()
-					}.bind(this), 10000)
-				}
-			},
-			clearIntervalTime() { // 清除定时器
-				clearInterval(this.statetime)
-				this.statetime = null
-				clearInterval(this.orderOrderStatusTime)
-				this.orderOrderStatusTime = null
-				clearInterval(this.OrderOrderRankingTime)
-				this.OrderOrderRankingTime = null
-			},
-			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];
-					})
-				});
-			},
-			tosetClipboardData(id) { // 复制成功
-				uni.setClipboardData({
-					data: id,
-					success: function() {
-						uni.showToast({
-							title: '复制成功',
-							icon: 'none',
-				 		duration: 2000
-						});
-					}
-				});
-			},
-			previewImg(goods, index) { //预览图片
-				let img = goods.works_image
-				uni.previewImage({
-					current: index,
-					urls: [img]
-				});
-			},
-		},
-		onLoad(options) {
-			console.log(options)
-			// orderId=163496137000007749&type=2&machine_id=100022
-			this.clearIntervalTime()
-			this.queryPage.id = options.orderId
-			this.type = options.type
-			this.machine_id = options.machine_id
-			/* if(this.$base.mobilePhoneCaseSize){
-				this.data = this.$base.mobilePhoneCaseSize
-				this.leftx = this.data.render_cove_width
-			}else{ */
-			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 // 屏幕宽度比率
-				}
-			})
-			/* } */
-			this.loadData();
-		},
-		onshow() {
-			this.data.activebrushX = '-500' //排队盒子动画坐标
-			this.printingStart = false
-			this.data.printingStartX = '-500' //生产中盒子动画坐标
-		},
-		onUnload() {
-			this.clearIntervalTime()
-		}
-	};
-</script>
-
-<style lang="scss">
-	page {
-		background: #131319 !important;
-		color: #fff;
-	}
-
-	// 3D动画
-	.crate-wrapper {
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.brush {
-		position: relative;
-		transition: all 3s;
-		transform: translateX(-400px);
-	}
-
-
-	.twobrush {
-		position: relative;
-		transition: all 3s;
-	}
-
-	.item-text {
-		transition: all 2s;
-		transform: translateX(400px);
-	}
-
-	.printer {
-		transform: translateX(0px);
-	}
-
-	// 错误提示信息
-	.start {
-		.start_img {
-			width: 260upx;
-			height: 260upx;
-			display: block;
-			margin: 0upx auto 102upx;
-		}
-
-		.start_title {
-			font-size: 30upx;
-			text-align: center;
-			color: #FFFFFF;
-		}
-
-		.start_text {
-			width: 70%;
-			text-align: center;
-			font-size: 28upx;
-			font-weight: 400;
-			color: #FFFFFF;
-			margin: 22upx auto 0;
-			line-height: 28upx;
-		}
-	}
-</style>

pages/mine/self_help_payment_details_new.vue

-<template>
-	<view class="full-width full-height" :style="{overflow: isReady ? 'hidden' : 'scroll' }">
-
-		<myhead :title="headTitle" :color="'#131319'" :titleShow="true" :backShow="true" :background="'#fff'"></myhead>
-
-		<!-- 音乐 -->
-		<!-- https://img.colorpark.cn/wechat/stitch.m4a -->
-		<!-- https://img.colorpark.cn/wechat/ring.m4a -->
-		<!-- https://img.colorpark.cn/wechat/ring2.m4a -->
-		<audio src="https://img.colorpark.cn/wechat/ring2.m4a" :action="ringaction" controls loop
-			   style="opacity: 0; position: absolute;"></audio>
-
-		<!-- 继续定制 -->
-		<view @click="tomall" style="position: fixed; right: 0; bottom: 100upx; display: flex;
-		align-items: center;justify-content: center; width: 100upx; height: 88upx; 
-		background: #43cf7c; border-radius: 44upx 0px 0px 44upx; z-index: 999;">
-			<view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;">
-				<view>继续</view>
-				<view>定制</view>
-			</view>
-		</view>
-		<view style="height:100%;width: 100%; overflow: hidden;">
-			<!-- goods.status.value 订单状态(0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成)  "-->
-			<view :animation="BoxTwoAnimation" style="width: 100%; height: 100%;"
-				v-if="(orderOrderStatusData.status == 0 || orderOrderStatusData.status == 1 || orderOrderStatusData.status == 10 || orderOrderStatusData.status == 2) < 2 && type != 1 && LoadState">
-				<!-- 排队中-付款区底图 -->
-				<view v-if="orderOrderStatusData.status == 0"
-					style="position: absolute; top: 0; right: 200%; 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 v-if="orderOrderStatusData.status == 0"
-					style="position: absolute; width: 100%; height: 100%; overflow: hidden; right: 100%;">
-					<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
-						<image src="https://img.colorpark.cn/wechat/track/paiduiqu_2.png" mode="widthFix"
-							style="width: 100%;"></image>
-					</view>
-					<view style="position: relative; width: 100%; height: 100%;overflow: hidden;">
-						<view class='crate-wrapper'>
-							<view style="display: flex;position: relative;">
-								<view style="position: relative;transition: all 3s; z-index: 2;" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
-									transform: 'translateX(' + data.activebrushX + 'px)'}">
-									<image :src="goods.goods.surface_pic + '?x-oss-process=image/resize,lfit,w_1000'"
-										mode=""
-										style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; margin: auto; bottom: 0; z-index: 1;">
-									</image>
-									<!-- <view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; margin: auto; bottom: 0; background: #fff; z-index: 1;"></view> -->
-									<image :src="goods.works_image" mode=""
-										  style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; margin: auto; bottom: 0; z-index: 2;">
-									</image>
-									<image :src="goods.goods.front_image" mode=""
-										style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; margin: auto;z-index: 3; overflow: hidden;">
-									</image>
-								</view>
-								<image v-for="(item,index) in rankinglist" :key="index" v-if="index < 3"
-									style="transition: all 1s;" :style="{height: data.editorHeight +'px',width:item.w +'px',
-									transform: 'translateX(' +  item.x + 'px)'}" src="../../static/img/d.png" mode=""></image>
-								<!-- 刷子 -->
-								<!-- <view :style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
-									 style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 3;">
-										<view :style="{width: leftx +'px',height: data.render_cove_height +'px'}"
-										style="position: absolute; left: 0; top: 0;background: #fff;">
-										</view>
-								</view> -->
-							</view>
-						</view>
-					</view>
-				</view>
-				<!-- 打印中-付款区底图 -->
-				<view v-if="orderOrderStatusData.status == 1"
-					style="position: absolute; top: 0; right: 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>
-				<!-- 生产中打印 1-->
-				<view
-					style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">
-					<!-- 背景图 -->
-					<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
-						<view style="position: relative; width: 100%;">
-							<image src="https://img.colorpark.cn/wechat/track/dayinqu_2.png" mode="widthFix"
-							 	  style="width: 100%;"></image>
-						</view>
-						<view style="position: relative; width: 100%; margin-top: -13px;">
-							<image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix"
-								style="width: 100%;"></image>
-						</view>
-					</view>
-					<view style="position: relative;width: 100%; height: 100%;overflow: hidden;"
-						:animation="printingEnd">
-						<view class='crate-wrapper'>
-							<view class="brush" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
-									transform: 'translateX(' + data.printingStartX + 'px)'}" style="background: #FFFFFF;">
-								<view :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}"
-									style="position: relative;overflow: hidden;">
-							
-									<!-- 作品图 -->
-									<image v-if="initstate" :src="goods.works_image +'?x-oss-process=image/resize,lfit,w_300'  "
-										:style="{'z-index': data.render_cove_width ? 2:0, width: data.render_cove_width +'px'} "
-										style="position: absolute;  
-										left: 50%; top: 50%;
-										transform:translate(-50%,-50%);"   mode="widthFix"
-										>
-									</image>
-									<!-- 刷子 -->
-									<view
-										:style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
-										style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 3;">
-										<view
-											:style="{width: leftx +'px',height: data.render_cove_height +'px',background: goods.goods.design_color}"
-											style="position: absolute; left: 0; top: 0;">
-										</view>
-									</view>
-									<!-- left: 50%; top: 50%;			
-									transform:translate(-50%,-50%); -->
-									<!-- 手机壳 -->
-									<image :src="goods.goods.front_image" style="position: absolute; width: 99%;
-									 left: 50%; top: 50%;
-									transform:translate(-50%,-50%);
-									z-index: 4; overflow: hidden;" mode="widthFix"></image>
-								</view>
-								<!-- 刷子范围 -->
-								<view
-									:style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
-									style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 5;">
-									<view class="item-text" :animation="animMaind" :class="{printer:printer}"
-										:style="{left: leftx +'px',opacity: printer ? 1 : 0}"
-										style="width:40px; height:100px; position:absolute; top: -50px;">
-										<image src="../../static/img/shua.png" mode=""
-											style="width:40px; height:100px;"></image>
-									</view>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-				<!-- 取货状态 10,2-->
-				<view style="position: relative; width: 100%; height: 100%; overflow: hidden;">
-					<!-- 底图 -->
-					<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
-						<view style="position: relative; width: 100%;">
-							<image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix"
-								style="width: 100%;"></image>
-						</view>
-						<view style="position: relative; width: 100%; margin-top: -13px;">
-							<image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix"
-								style="width: 100%;"></image>
-						</view>
-					</view>
-					<view class='crate-wrapper'>
-						<view class="twobrush" :animation="PickUpStart" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
-							transform: 'translateY(' + -(data.editorHeight + (data.windowHeight - data.editorHeight)/2) + 'px)'}">
-							<view :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}"
-								style="position: relative;overflow: hidden; background: #FFFFFF;">
-							
-							<!-- 作品图 -->
-							<image v-if="initstate" :src="goods.works_image +'?x-oss-process=image/resize,lfit,w_300'  "
-								:style="{'z-index': data.render_cove_width ? 2:0, width: data.render_cove_width +'px'} "
-								style="position: absolute;  
-								left: 50%; top: 50%;
-								transform:translate(-50%,-50%);"   mode="widthFix">
-							</image>
-					
-							<!-- left: 50%; top: 50%;			
-							transform:translate(-50%,-50%); -->
-							<!-- 手机壳 -->
-							<image :src="goods.goods.front_image" style="position: absolute; width: 99%;
-							 left: 50%; top: 50%;
-							transform:translate(-50%,-50%);
-							z-index: 4; overflow: hidden;" mode="widthFix"></image>
-							</view>
-							
-							<!-- 底图 -->
-							<!-- <image :src="goods.goods.surface_pic + '?x-oss-process=image/resize,lfit,w_1000'" 	:style="{width: data.render_cove_width +'px'} "  mode=""
-								style="position: absolute; width: 98%; height: 98%; right: 0; margin: auto; bottom: 0; z-index: 1;
-								position: absolute;
-								left: 50%; top: 50%;
-								transform:translate(-50%,-50%);">
-							</image> -->
-							<!-- <view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; margin: auto; bottom: 0; background: #fff; z-index: 1;"></view> -->
-							<!-- <image :src="goods.works_image" mode="" style="position: absolute; width: 100%; 
-								height: 100%; bottom: 0; z-index: 2;position: absolute;
-								left: 50%; top: 50%;
-								transform:translate(-50%,-50%);" :style="{width: data.render_cove_width +'px'} " ></image>
-							<image :src="goods.goods.front_image" mode="" style="position: absolute; width: 99%;
-									 left: 50%; top: 50%;
-									transform:translate(-50%,-50%);
-									z-index: 4; overflow: hidden;" mode="widthFix"></image> -->
-						</view>
-					</view>
-				</view>
-			</view>
-			<!-- 暂时缺货、订单已取消 -->
-			<view
-				style="width: 100%; height: 100%; position: absolute; top: 0; z-index: 2;background: #131319 !important;"
-				v-if="(orderOrderStatusData.status == 3 || orderOrderStatusData.status == -3) && type != 1">
-				<view style="padding-bottom: 32px">
-					<view style="width: 220upx; margin:90upx auto 40upx;">
-						<image style="width: 220upx; height: 220upx; border-radius: 50%;"
-							src="../../static/icon_close.png" mode="aspectFill"></image>
-					</view>
-					<view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;">
-						暂时缺货、订单已取消
-					</view>
-					<view style="margin-top: 378upx; display: flex;align-items: center; justify-content: center;">
-						<view style="width: 187upx; position: relative; border-radius: 10upx;"
-							@click="previewImg(goods,0)">
-							<view
-								style="width: 128upx; height: 236upx;margin:auto; display: block; position: relative; overflow: hidden;">
-								<view
-									style="width: 95%; height: 95%; background: #FFFFFF; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;">
-								</view>
-								<image
-									style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 10;"
-									:src="goods.goods.front_image" mode="aspectFit"></image>
-								<image
-									style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
-									:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
-									mode="aspectFit"></image>
-							</view>
-						</view>
-						<view style="margin-left: 19upx; margin-top: 5upx; ">
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
-								<text> 订单编号： </text>
-								<text style="color: #888888;"> {{goods.id}} </text>
-								<text @click="tosetClipboardData(goods.id)"
-									style="margin-left: 5upx;font-size: 22upx;">复制</text>
-							</view>
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 15upx;">
-								<text> 产品尺寸： </text>
-								<text style="color: #888888;" v-if="type == 2"> {{goods.goods.name || ''}} </text>
-								<text style="color: #888888;" v-if="type != 2">
-									{{goods.order_goods.goods_name || ''}}
-									<text v-if="goods.used_applets != '4'">{{goods.order_goods.goods_specs || ''}}
-									</text>
-								</text>
-							</view>
-							<view v-if="type != 2"
-								style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
-								<text> 支付金额： </text>
-								<text style="color: #888888;"> ￥{{goods.real_amount}} </text>
-							</view>
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
-								<text> 下单时间： </text>
-								<text style="color: #888888;"> {{goods.create_time}} </text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-			<!-- 设备故障状态 -->
-			<view
-				style="width: 100%; height: 100%; position: absolute; top: 0; z-index: 2;background: #131319 !important;"
-				v-if="orderOrderStatusData.status == -2 && type != 1">
-				<view class="start" style="padding-bottom: 100upx; padding-top: 200upx;">
-					<image src="../../static/icon_guaqi.png" mode="aspectFill" class="start_img"></image>
-					<view class="start_text">{{msg || ''}}</view>
-					<view>
-						<view class="start_text">联系客服</view>
-						<view class="start_text" style="display: flex; justify-content: center; align-items: center;">
-							<image src="../../static/phone.png" mode=""
-								style="width: 32upx; height: 32upx; margin-right: 5upx;"></image>
-							{{phone || '18938664545'}}
-						</view>
-					</view>
-				</view>
-				<image src="../../static/logo.jpg" mode="aspectFill"
-					style="width: 664upx; height: 757upx; opacity: 0.03; position: absolute; left: 0; bottom: 0; z-index: -1;">
-				</image>
-			</view>
-			<!-- 取货完成状态 -->
-			<view v-if="orderOrderStatusData.status == 7 && type != 1">
-				<view style="padding-bottom: 32px">
-					<view style="width: 220upx; margin:90upx auto 40upx;">
-						<image style="width: 220upx; height: 220upx; border-radius: 50%;"
-							src="../../static/mine/Pick-up.png" mode="aspectFill"></image>
-					</view>
-					<view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;">
-						打印完成
-					</view>
-					<view style="height: 378upx; text-align: center;">
-						<text v-if="type == 2" style="font-size: 36upx; line-height: 378upx;font-weight: bold;">
-							{{goods.order_queue.id || ''}}
-						</text>
-					</view>
-					<view style="display: flex;align-items: center; justify-content: center;">
-						<view style="width: 187upx; position: relative; border-radius: 10upx;"
-							@click="previewImg(goods,0)">
-							<view
-								style="width: 128upx; height: 236upx;margin:auto; display: block; position: relative; overflow: hidden;">
-								<view
-									style="width: 95%; height: 95%; background: #FFFFFF; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;">
-								</view>
-								<image
-									style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 10;"
-									:src="goods.goods.front_image" mode="aspectFit"></image>
-								<image
-									style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
-									:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
-									mode="aspectFit"></image>
-							</view>
-						</view>
-						<view style="margin-left: 19upx; margin-top: 5upx; ">
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
-								<text> 订单编号： </text>
-								<text style="color: #888888;"> {{goods.id}} </text>
-								<text @click="tosetClipboardData(goods.id)"
-									style="margin-left: 5upx;font-size: 22upx;">复制</text>
-							</view>
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 15upx;">
-								<text> 产品尺寸： </text>
-								<text style="color: #888888;" v-if="type == 2"> {{goods.goods.name || ''}} </text>
-								<text style="color: #888888;" v-if="type != 2">
-									{{goods.order_goods.goods_name || ''}}
-									<text v-if="goods.used_applets != '4'">{{goods.order_goods.goods_specs || ''}}
-									</text>
-								</text>
-							</view>
-							<view v-if="type != 2"
-								style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
-								<text> 支付金额： </text>
-								<text style="color: #888888;"> ￥{{goods.real_amount}} </text>
-							</view>
-							<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
-								<text> 下单时间： </text>
-								<text style="color: #888888;"> {{goods.create_time}} </text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-			<!-- -----------快递发货----------- -->
-			<!-- 生产中 -->
-			<view style="position: relative;" v-if="goods.status.value <= 8 && type == 1">
-				<view style="width: 300upx; min-height: 300upx; margin:90upx auto 66upx; position: relative;
-					border-radius: 10upx;" :style="{background: goods.goods.design_color }" @click="previewImg(goods,0)">
-					<!-- 手机壳 -->
-					<view
-						style="width: 206upx; height: 224upx;padding: 38upx 0; margin:auto; display: block; position: relative; overflow: hidden;">
-						<image
-							style="width: 206upx; height: 224upx; margin:auto; display: block;position: relative; z-index: 10;"
-							:src="goods.goods.front_image" mode="aspectFit"></image>
-						<image
-							style="width: 206upx; height: 224upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
-							:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'" mode="widthFix"></image>
-					</view>
-				</view>
-				<view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;">
-					<text v-if="goods.is_pay.value == 0">支付失败</text>
-					<text v-if="goods.is_pay.value == 1">
-						<!-- <text v-if="goods.status.value == 0">等待生产</text> -->
-						<text v-if="goods.status.value < 8 && goods.status.value >= 0">生产中</text>
-						<text v-if="goods.status.value == 8">已发货</text>
-					</text>
-				</view>
-				<view
-					style="font-size: 24upx; font-weight: 400; color: #CCCCCC; margin-top: 20upx; text-align: center;">
-					<text v-if="goods.is_pay.value == 0">作品支付失败</text>
-					<text v-if="goods.is_pay.value == 1">
-						<!-- <text v-if="goods.status.value == 0">作品正在等待生产</text> -->
-						<text v-if="goods.status.value < 8 && goods.status.value >= 0">色彩正在加急冲印，请留意最新的状态通知</text>
-					</text>
-					<text v-if="goods.status.value == 8">色彩正在配送路上，请留意最新的配送状态</text>
-					<view v-if="goods.status.value == 8">{{goods.order_express.express_name || ''}}</view>
-					<view v-if="goods.status.value == 8">快递单号： {{goods.order_express.express_no || ''}}</view>
-				</view>
-				<view style="margin-top: 104upx; margin-left: 20%; width: 60%;">
-					<view style=" font-size: 24upx; font-weight: 400; color: #FFFFFF;">
-						<text> 订单编号： </text> <text style="color: #888888;"> {{goods.id || ''}} </text>
-						<text @click="tosetClipboardData(goods.id)"
-							style="margin-left: 5upx;font-size: 22upx;">复制</text>
-					</view>
-					<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 10upx;">
-						<text> 产品尺寸： </text>
-						<text style="color: #888888;">
-							{{goods.order_goods.goods_name || ''}}
-							<text v-if="goods.used_applets != '4'">{{goods.order_goods.goods_specs || ''}} </text>
-						</text>
-					</view>
-					<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 10upx;">
-						<text> 支付金额： </text> <text style="color: #888888;"> ￥{{goods.real_amount || ''}} </text>
-					</view>
-					<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 10upx;">
-						<text> 下单时间： </text> <text style="color: #888888;"> {{goods.create_time || ''}} </text>
-					</view>
-					<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 10upx;">
-						<text> 收件信息： </text>
-						<text style="color: #888888;">{{goods.order_express.receivor || ''}}
-							{{goods.order_express.phone || ''}} {{goods.order_express.address || ''}}</text>
-					</view>
-				</view>
-			</view>
-			<!-- 收货成功 -->
-			<view v-if="goods.status.value == 9 && type == 1">
-				<view style="width: 220upx; margin:90upx auto 40upx;">
-					<image style="width: 220upx; height: 220upx; border-radius: 50%;"
-						src="../../static/mine/Pick-up.png" mode="aspectFill"></image>
-				</view>
-				<view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;">
-					收货成功
-				</view>
-				<view style="margin-top: 104upx; margin-left: 25%; width: 50%;">
-					<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 10upx;">
-						<text> 快递公司： </text> <text style="color: #888888;"> {{goods.order_express.express_name || ''}}
-						</text>
-					</view>
-					<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 10upx;">
-						<text> 快递单号： </text> <text style="color: #888888;"> {{goods.order_express.express_no || ''}}
-						</text>
-					</view>
-					<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 10upx;">
-						<text> 收件信息： </text>
-						<text style="color: #888888;">{{goods.order_express.receivor || ''}}
-							{{goods.order_express.phone || ''}} {{goods.order_express.address || ''}}</text>
-					</view>
-				</view>
-				<view style="margin-top: 104upx; display: flex; align-items: center; justify-content: center;">
-					<view style="width: 187upx; position: relative; border-radius: 10upx;"
-						:style="{background: goods.goods.design_color }" @click="previewImg(goods,0)">
-						<!-- 手机壳 -->
-						<view
-							style="width: 128upx; height: 141upx;padding: 38upx 0; margin:auto; display: block; position: relative; overflow: hidden;">
-							<image
-								style="width: 128upx; height: 141upx; margin:auto; display: block;position: relative; z-index: 10;"
-								:src="goods.goods.front_image" mode="aspectFit"></image>
-							<image
-								style="width: 128upx; height: 141upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
-								:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'" mode="widthFix">
-							</image>
-						</view>
-					</view>
-					<view style="margin-left: 19upx; margin-top: 5upx;">
-						<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
-							<text> 订单编号： </text>
-							<text style="color: #888888;"> {{goods.id || ''}} </text>
-							<text @click="tosetClipboardData(goods.id)"
-								style="margin-left: 5upx;font-size: 22upx;">复制</text>
-						</view>
-						<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 15upx;">
-							<text> 产品尺寸： </text>
-							<text style="color: #888888;">
-								{{goods.order_goods.goods_name || ''}}
-								<text v-if="goods.used_applets != '4'">{{goods.order_goods.goods_specs || ''}} </text>
-							</text>
-						</view>
-						<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
-							<text> 支付金额： </text>
-							<text style="color: #888888;"> ￥{{goods.real_amount || ''}} </text>
-						</view>
-						<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
-							<text> 下单时间： </text>
-							<text style="color: #888888;"> {{goods.create_time || ''}} </text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view v-if="rankinglist.length > 0 && type != 2" style="position: fixed; bottom: 30upx;
-		margin: auto; left: 0; right: 0;
-		 text-align: center;color: #FFFFFF;font-size: 34upx; font-weight: 400;">
-			当前还有{{rankinglist.length || 0}}个手机壳正在打印
-		</view>
-	</view>
-</template>
-
-<script>
-	import homeservice from '@/service/homeservice.js'
-	import firework from '@/components/ay-firework/firework.vue'; //礼花
-	import myhead from '../index/head/head.vue'; // 页眉	
-
-	export default {
-		components: {
-			firework,
-			myhead
-		},
-		computed: {},
-		data() {
-			return {
-				goods: {},
-				queryPage: {
-					s: 'Order.detail',
-					id: null
-				},
-				machine_id: null, //设备id
-				type: null, //1：配送版，2：单机版，3：自助版
-
-				lineUpState: false, //排队状态----横向进入滑动动画
-				leaveUpState: false, //排队状态----横向离开滑动动画
-
-				printingStart: false, //打印状态----横向进来滑动动画 Printing start
-				printingEnd: {}, ///打印状态----纵向离开动画 Printing end
-				initstate: false, //打印状态----显示刷子
-				PickUpStart: {}, //取货状态-----手机壳从上面动画出来
-				PickUpTopBottom: null, //定时器----取货上下浮动
-				statetime: null, //定时器----打印机动画
-				orderOrderStatusTime: null, //定时器---查询订单状态
-				OrderOrderRankingTime: null, //定时器---排队定时器
-				leftx: 0, //x轴-----刷子打印
-				topy: -20, //y-----刷子打印
-				animMaind: {}, //动画----刷子上下动画
-				animMaind_time: 800, //动画时间----刷子上下动画时间
-				isReady: false, //礼花开关
-				BoxTwoAnimation: {}, //排队-打印-取货流程图架构
-				oldRankinglist: [], //上次排队队列
-				rankinglist: [], //排队队列
-				teststate: false, //开启测试模式 false  true
-				orderOrderStatusData: null, //订单状态
-				ringaction: { //打印机音乐状态
-					method: 'pause' //method: 'pause'method: 'play'
-				},
-				stitchaction: { //履带音乐状态
-					method: 'pause' //method: 'pause'method: 'play'
-				},
-				printer: false, //打印机状态
-
-				data: {
-					windowWidth: 0, // 屏幕宽度
-					windowHeight: 0, // 屏幕高度
-					pixelRate: 0, // 屏幕宽度比率
-					editorWidth: 0, // 设计宽度
-					editorHeight: 0, // 设计高度
-					render_cove_width: null,
-					render_cove_height: null,
-					activebrushX: -500, //排队盒子动画坐标
-					printingStartX: -500, //生产中盒子动画坐标
-				},
-
-				tomallstate: true, //防止返回触动页面销毁事件
-				LoadState: false, //加载完成
-				orderCurrentOrder: null,
-				orderCurrentOrderTime: null,
-				background_surface_image: null, //定制壳手机壳底色
-				headTitle: "", //头部标题文字
-			};
-		},
-		onReady() {
-
-		},
-		methods: {
-			tomall() {
-				this.tomallstate = false
-			
-				uni.reLaunch({
-					url: '/pages/index/machineDetail?machine_id=' + this.machine_id 
-				});
-			
-				/* wx.navigateBack({
-					delta: 3
-				}) */
-			},
-			init() {
-				this.printer = true
-				this.isReady = false
-				this.leftx = this.data.render_cove_width
-				// this.topy = -20
-				setTimeout(function() {
-					this.updata()
-				}.bind(this), 2000)
-			},
-			updata() {
-				setTimeout(function() {
-					this.ringaction.method = 'play' //开启音乐
-					console.log('5开启音乐')
-				}.bind(this), this.animMaind_time)
-				// 无限循环动画
-				var animation = wx.createAnimation({
-					duration: this.animMaind_time, // 动画执行时间
-					timingFunction: 'linear', // 动画执行效果
-				})
-				var state = true // 控制上下滑动setTimeout setInterval
-				this.statetime = setInterval(function() {
-					if (state == true) {
-						animation.translate(0, (this.data.render_cove_height)).step(); //向下移动
-					} else {
-						animation.translate(0, 0).step(); //向上移动
-					}
-					state = !state
-					// 减慢打印时间
-					if (this.leftx <= 10) {
-						if (this.orderOrderStatusData.status == 10 || this.orderOrderStatusData.status == 2) {
-							this.leftx -= 2
-						} else {
-							this.leftx -= 0.1
-						}
-					} else {
-						this.leftx -= 1
-					}
-					this.setData({
-						animMaind: animation.export(),
-						leftx: this.leftx
-					})
-					// 打印完成----清除定时器
-					if (this.leftx <= 0) {
-						this.ringaction.method = 'pause' //暂停音乐
-						console.log('5暂停音乐')
-						clearInterval(this.statetime)
-						this.statetime = null
-						this.isReady = true;
-						this.printer = false
-						uni.showToast({
-							title: '打印完成，即将出货',
-							icon: 'none',
-							duration: 2000
-						});
-						setTimeout(function() {
-							this.boxinit({
-								duration: 3000, // 动画执行时间
-								axisX: 0, // x轴移动
-								axisY: this.data.windowHeight, // y轴移动
-								settimeout: 3500, // 定时器时间
-							}) // 触发打印完成--手机壳下移消失
-						}.bind(this), 2000)
-					}
-				}.bind(this), this.animMaind_time)
-			},
-			// 打印完成--手机壳下移消失
-			boxinit(data) {
-				var animation = wx.createAnimation({
-					duration: data.duration, // 动画执行时间
-					timingFunction: 'linear', // 动画执行效果
-				})
-				animation.translate(data.axisX, data.axisY).step();
-				this.setData({
-					printingEnd: animation.export(),
-				})
-				setTimeout(function() {
-					this.Box_Two_Animation({
-						duration: 2000, // 动画执行时间
-						axisX: 0, // x轴移动
-						axisY: -this.data.windowHeight, // y轴移动
-						settimeout: 2500, // 定时器时间
-						settimeoutState: true, //开启下一步
-					})
-				}.bind(this), data.settimeout)
-			},
-			// 取货页面----底部向上滑动动画
-			Box_Two_Animation(data) {
-				var animation = wx.createAnimation({
-					duration: data.duration, // 动画执行时间
-					timingFunction: 'linear', // 动画执行效果
-				})
-				animation.translate(data.axisX, data.axisY).step();
-				this.setData({
-					BoxTwoAnimation: animation.export(),
-				})
-				if (!data.settimeoutState) return;
-				this.headTitle = "取货区";
-				//wx.setNavigationBarTitle({title: '取货区' })
-				setTimeout(function() {
-					let boxinitY = (this.data.windowHeight - ((this.data.windowHeight - this.data.editorHeight) /
-						2)) - (this.data.editorHeight / 3 * 1)
-					this.Two_Brush_Animation({
-						duration: 5000, // 动画执行时间
-						axisX: 0, // x轴移动
-						axisY: boxinitY, // y轴移动
-						settimeout: 5000, // 定时器时间
-					})
-				}.bind(this), data.settimeout)
-			},
-			// 取货手机壳动画
-			Two_Brush_Animation(data) {
-				let animation = wx.createAnimation({
-					duration: data.duration, // 动画执行时间
-					timingFunction: 'linear', // 动画执行效果
-				})
-				animation.translate(data.axisX, data.axisY).step();
-				this.setData({
-					PickUpStart: animation.export(),
-				})
-				// 上下浮动
-				clearInterval(this.PickUpTopBottom)
-				this.PickUpTopBottom = null
-				setTimeout(function() {
-					uni.showToast({
-						title: '已出货，请在出货口取货吧',
-						icon: 'none',
-						duration: 2000
-					});
-					var state = true
-					let animation = wx.createAnimation({
-						duration: 2000, // 动画执行时间
-						timingFunction: 'linear', // 动画执行效果
-					})
-					this.PickUpTopBottom = setInterval(function() {
-						if (state == true) {
-							animation.translate(data.axisX, (data.axisY + 40)).step();
-						} else {
-							animation.translate(data.axisX, data.axisY).step();
-						}
-						state = !state
-						this.setData({
-							PickUpStart: animation.export(),
-						})
-					}.bind(this), 2000)
-				}.bind(this), data.settimeout)
-			},
-			loadData() {
-				uni.showLoading({
-					title: '正在加载中...'
-				})
-				homeservice.WorksList(this.queryPage).then(result => {
-					this.goods = result
-					/* if(this.$base.mobilePhoneCaseSize){
-						this.data = this.$base.mobilePhoneCaseSize
-					}else{ */
-					this.background_surface_image = result.goods.surface_pic
-					result.goods.design_width = 200 / this.data.pixelRate
-					result.goods.design_height = 370 / this.data.pixelRate
-					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 + 50)
-					this.data.printingStartX = -((this.data.windowWidth - this.data.editorWidth) / 2 + this.data
-						.editorWidth + 50)
-					//this.$base.mobilePhoneCaseSize = this.data
-					/* } */
-					this.leftx = this.data.render_cove_width
-					// status.value 订单状态 0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成 -->
-					// type.value 1直营配送站 2 万能通用版 3色彩自助站
-					if (this.teststate) {
-						result.status.value = 1 //1：生产中
-						result.type.value = 2 //2单机版
-					}
-					this.type = result.type.value
-					// 单机版查询当前设备打印订单
-					if (this.type == 2) {
-						this.anb() //查询排队列表
-						// clearInterval(this.orderCurrentOrderTime)
-						// this.orderCurrentOrderTime = setInterval(function(){
-						// 	this.OrdercurrentOrder() //单机版查询设备打印订单
-						// 	this.anbtwo() //记录排队人数
-						// }.bind(this),10000)
-						// setTimeout(function(){
-						// 	this.OrdercurrentOrder() //单机版查询设备打印订单
-						// 	// this.anbtwo() //记录排队人数
-						// }.bind(this),10000)
-						this.leaveto(3)
-					} else {
-						this.OrderOrderStatusInit()
-					}
-					uni.hideLoading();
-					uni.stopPullDownRefresh();
-				}).catch(err => {
-					uni.hideLoading();
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			anb() {
-				homeservice.WorksList({
-					s: 'Order.orderStatus',
-					order_id: this.queryPage.id
-				}).then(result => {
-					this.orderOrderStatusData = result
-					this.orderOrderStatusData.status = 0
-					// wx.setNavigationBarTitle({title: '排队区' })
-					// this.anbone()
-				}).catch(err => {
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			anbone() {
-				homeservice.WorksList({
-					s: 'Order.orderRanking',
-					order_id: this.queryPage.id,
-					machine_id: this.machine_id
-				}).then(result => {
-					this.oldRankinglist = [] // 第一次进来记录排队人数
-					for (var i = 0; i < result.ranking; i++) {
-						this.oldRankinglist.push({
-							w: 30,
-							x: 0
-						})
-					}
-					this.rankinglist = this.oldRankinglist
-					this.Box_Two_Animation({
-						duration: 0, // 动画执行时间
-						axisX: this.data.windowWidth + this.data.windowWidth, // x轴移动
-						axisY: 0, // y轴移动
-						settimeout: 0, // 定时器时间
-						settimeoutState: false, //开启下一步
-					})
-					this.LoadState = true
-					setTimeout(function() {
-						this.Box_Two_Animation({
-							duration: 3000, // 动画执行时间
-							axisX: this.data.windowWidth, // x轴移动
-							axisY: 0, // y轴移动
-							settimeout: 0, // 定时器时间
-							settimeoutState: false, //开启下一步
-						})
-					}.bind(this), 1000)
-					//排队状态----盒子横向进入滑动动画时间3s
-					setTimeout(function() {
-						this.lineUpState = true
-						this.data.activebrushX = 0
-					}.bind(this), 4500)
-				}).catch(err => {
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			// anbtwo(){
-			// 	homeservice.WorksList({
-			// 		s:'Order.orderRanking',
-			// 		order_id:this.queryPage.id,
-			// 		machine_id:this.machine_id
-			// 	}).then(result => {
-			// 		this.oldRankinglist = []// 第一次进来记录排队人数
-			// 		for(var i =0;i<result.ranking;i++){
-			// 			this.oldRankinglist.push({
-			// 				w:30,x:0
-			// 			})
-			// 		}
-			// 		this.rankinglist = this.oldRankinglist
-			// 	}).catch(err => {
-			// 		uni.showToast({title: err.msg || err.data,icon: 'none'});
-			// 	});
-			// },
-			OrdercurrentOrder() {
-				console.log('单机版查询设备打印订单')
-				homeservice.WorksList({
-					s: 'Order.currentOrder',
-					machine_id: this.machine_id
-				}).then(result => {
-					this.orderCurrentOrder = result.order_id
-					if (this.teststate) {
-						this.orderCurrentOrder = this.queryPage.id // 测试
-					}
-					// if(this.orderCurrentOrder == this.queryPage.id){
-					// 	console.log('清除定时器---')
-					// 	clearInterval(this.orderCurrentOrderTime)
-					// 	this.leaveto(0)
-					// }
-					console.log('清除定时器---')
-					clearInterval(this.orderCurrentOrderTime)
-					// this.leaveto(3)
-				}).catch(err => {
-					uni.hideLoading();
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			OrderOrderStatusInit(e) {
-				homeservice.WorksList({
-					s: 'Order.orderStatus',
-					order_id: this.queryPage.id
-				}).then(result => {
-					//result.status -1：订单不存在 0：待打印 1：打印中 10：打印完成 2：生产完成 3：取消生产
-					if (this.teststate || e == 2) {
-						result.status = 0 // 测试
-					}
-					this.orderOrderStatusData = result
-					if (result.status == 0) { //0：待打印排队中
-						this.headTitle = "排队区";
-						//wx.setNavigationBarTitle({title: '排队区' })
-						this.OrderOrderRankingInit(4)
-						if (this.teststate) {
-							// setTimeout(function(){
-							// 	this.OrderOrderRankingInit(1)
-							// }.bind(this),5000)
-							// setTimeout(function(){
-							// 	this.OrderOrderRankingInit(-1)
-							// }.bind(this),10000)
-						}
-						if (this.type != 2) {
-							if (!this.teststate && e != 2) { // 排队定时器  测试需要关闭
-								clearInterval(this.OrderOrderRankingTime)
-								this.OrderOrderRankingTime = setInterval(function() {
-									this.OrderOrderRankingInit()
-								}.bind(this), 10000)
-							}
-						}
-					} else if (result.status == 1) { // 1：打印中
-						this.headTitle = "打印区";
-						//wx.setNavigationBarTitle({title: '打印区' })
-						// 打开排队页面
-						this.Box_Two_Animation({
-							duration: 0, // 动画执行时间
-							axisX: this.data.windowWidth, // x轴移动
-							axisY: 0, // y轴移动
-							settimeout: 0, // 定时器时间
-							settimeoutState: false, //开启下一步
-						})
-						this.LoadState = true
-						setTimeout(function() {
-							this.Box_Two_Animation({
-								duration: 3000, // 动画执行时间
-								axisX: 0, // x轴移动
-								axisY: 0, // y轴移动
-								settimeout: 0, // 定时器时间
-								settimeoutState: false, //开启下一步
-							})
-						}.bind(this), 1000)
-						// 打印状态滑动进来
-						setTimeout(function() {
-							this.printingStart = true //打印状态----横向进来滑动动画 3s
-							this.data.printingStartX = 0
-						}.bind(this), 4500)
-						setTimeout(function() {
-							this.initstate = true //打印状态----显示刷子
-							this.init()
-						}.bind(this), 7500)
-						if (!this.teststate) {
-							// 定时器查询订单状态
-							clearInterval(this.orderOrderStatusTime)
-							this.orderOrderStatusTime = setInterval(function() {
-								this.orderOrderStatusGet()
-							}.bind(this), 10000)
-						} else {
-							// 定时器查询订单状态
-							clearInterval(this.orderOrderStatusTime)
-							this.orderOrderStatusTime = setInterval(function() {
-								this.orderOrderStatusGet()
-							}.bind(this), 30000)
-						}
-					} else if (result.status == 2 || result.status == 10) { //2：生产完成 10：打印完成
-						this.LoadState = true
-						this.headTitle = "取货区";
-						//wx.setNavigationBarTitle({title: '取货区' })
-						this.Box_Two_Animation({
-							duration: 2000, // 动画执行时间
-							axisX: 0, // x轴移动
-							axisY: -this.data.windowHeight, // y轴移动
-							settimeout: 2500, // 定时器时间
-							settimeoutState: true, //开启下一步
-						})
-					} else if (result.status == 3 || result.status == -3) {
-						this.headTitle = "取消生产";
-						/* wx.setNavigationBarTitle({
-							title: '取消生产'
-						}) */
-					} else if (result.status == -2) {
-						this.headTitle = "设备故障";
-						/* 	wx.setNavigationBarTitle({
-								title: '设备故障'
-							}) */
-					} else if (result.status == 7) {
-						this.headTitle = "取货完成";
-						/* wx.setNavigationBarTitle({
-							title: '取货完成'
-						}) */
-					}
-				}).catch(err => {
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			// -1：订单不存在 0：待打印 1：打印中 10：打印完成 2：生产完成 3：取消生产
-			// 打印状态滑动进来
-			orderOrderStatusGet() {
-				homeservice.WorksList({
-					s: 'Order.orderStatus',
-					order_id: this.queryPage.id
-				}).then(result => {
-					if (this.teststate) {
-						result.status = 2
-					}
-					this.orderOrderStatusData = result
-					if (result.status == 10 || result.status == 2) {
-						clearInterval(this.statetime)
-						this.statetime = null
-						clearInterval(this.orderOrderStatusTime)
-						this.orderOrderStatusTime = null
-						let animMaind_time = (5 / this.leftx) * 1000
-						// 导出动画
-						this.setData({
-							animMaind_time: animMaind_time || 200,
-						})
-						this.updata()
-					} else if (result.status == 3 || result.status == -3) {
-						this.ringaction.method = 'pause' //暂停音乐
-						//console.log('5暂停音乐')
-						this.headTitle = "取消生产";
-						/* wx.setNavigationBarTitle({
-							title: '取消生产'
-						}) */
-						clearInterval(this.statetime)
-						this.statetime = null
-						clearInterval(this.orderOrderStatusTime)
-						this.orderOrderStatusTime = null
-					} else if (result.status == -2) {
-						this.ringaction.method = 'pause' //暂停音乐
-						//console.log('5暂停音乐')
-						this.headTitle = "设备故障";
-						/* wx.setNavigationBarTitle({
-							title: '设备故障'
-						}) */
-						clearInterval(this.statetime)
-						this.statetime = null
-						clearInterval(this.orderOrderStatusTime)
-						this.orderOrderStatusTime = null
-					} else if (result.status == 7) {
-						this.ringaction.method = 'pause' //暂停音乐
-						this.headTitle = "取货完成";
-						//console.log('5暂停音乐')
-						/* wx.setNavigationBarTitle({
-							title: '取货完成'
-						}) */
-						clearInterval(this.statetime)
-						this.statetime = null
-						clearInterval(this.orderOrderStatusTime)
-						this.orderOrderStatusTime = null
-					}
-				}).catch(err => {
-					console.log(err)
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			// 查询排队
-			// 如果订单不存单，或者订单已经打印完成，那么返回的排名是-1
-			// 如果订单当前正在打印。返回的排名是0
-			// 如果前面有一个订单就返回1，前面有两个订单就返回2
-			OrderOrderRankingInit(state) {
-				homeservice.WorksList({
-					s: 'Order.orderRanking',
-					order_id: this.queryPage.id,
-					machine_id: this.machine_id
-				}).then(result => {
-					if (this.teststate) {
-						result.ranking = state //例子
-					}
-					if (result.ranking >= 0) {
-						if (this.oldRankinglist.length > 0) {
-							if (this.rankinglist.length > result.ranking) {
-								// 排队消失列表效果
-								this.rankinglist[(this.rankinglist.length - 1)].x = 200
-								setTimeout(function() {
-									this.rankinglist[(this.rankinglist.length - 1)].w = 0
-								}.bind(this), 1000)
-								setTimeout(function() {
-									this.rankinglist.pop()
-									if (this.rankinglist.length == 0) {
-										this.leaveto(0)
-									}
-								}.bind(this), 2500)
-							}
-						} else {
-							this.oldRankinglist = [] // 第一次进来记录排队人数
-							for (var i = 0; i < result.ranking; i++) {
-								this.oldRankinglist.push({
-									w: 30,
-									x: 0
-								})
-							}
-							this.rankinglist = this.oldRankinglist
-							// 当排队人数等于0就开始打印
-							if (this.rankinglist.length == 0) {
-								this.leaveto(1)
-							} else {
-								// 快速切换--排队状态设计区底图
-								this.Box_Two_Animation({
-									duration: 0, // 动画执行时间
-									axisX: this.data.windowWidth + this.data.windowWidth, // x轴移动
-									axisY: 0, // y轴移动
-									settimeout: 0, // 定时器时间
-									settimeoutState: false, //开启下一步
-								})
-								this.LoadState = true
-								setTimeout(function() {
-									this.Box_Two_Animation({
-										duration: 3000, // 动画执行时间
-										axisX: this.data.windowWidth, // x轴移动
-										axisY: 0, // y轴移动
-										settimeout: 0, // 定时器时间
-										settimeoutState: false, //开启下一步
-									})
-								}.bind(this), 1000)
-								//排队状态----盒子横向进入滑动动画时间3s
-								setTimeout(function() {
-									this.lineUpState = true
-									this.data.activebrushX = 0
-								}.bind(this), 4500)
-							}
-						}
-					} else {
-						this.leaveto(1)
-					}
-				}).catch(err => {
-					uni.showToast({
-						title: err.msg || err.data,
-						icon: 'none'
-					});
-				});
-			},
-			leaveto(e) { //e== 1无排队切换打印 0有排队切换打印
-				clearInterval(this.OrderOrderRankingTime)
-				this.OrderOrderRankingTime = null
-				let time = 3500 //时间
-				if (e == 1) { //无排队切换打印
-					// 快速切换--设计区底图
-					this.Box_Two_Animation({
-						duration: 0, // 动画执行时间
-						axisX: this.data.windowWidth, // x轴移动
-						axisY: 0, // y轴移动
-						settimeout: 0, // 定时器时间
-						settimeoutState: false, //开启下一步
-					})
-					this.LoadState = true
-					setTimeout(function() {
-						this.Box_Two_Animation({
-							duration: 3000, // 动画执行时间
-							axisX: 0, // x轴移动
-							axisY: 0, // y轴移动
-							settimeout: 0, // 定时器时间
-							settimeoutState: false, //开启下一步
-						})
-					}.bind(this), 1000)
-					time = 4500 //无时间
-					this.headTitle = "打印区";
-					/* wx.setNavigationBarTitle({
-						title: '打印区'
-					}) */
-				} else if (e == 0) { //有排队切换打印
-					this.LoadState = true
-					this.leaveUpState = true //排队状态----横向离开滑动动画 时间3s
-					this.data.activebrushX = (this.data.windowWidth - this.data.editorWidth) / 2 + this.data.editorWidth +
-						50 //排队状态----横向离开滑动动画 3s
-					setTimeout(function() { // 排队页面滑出---打印页面进入
-						this.Box_Two_Animation({
-							duration: 3000, // 动画执行时间
-							axisX: 0, // x轴移动
-							axisY: 0, // y轴移动
-							settimeout: 0, // 定时器时间
-							settimeoutState: false, //开启下一步
-						})
-					}.bind(this), time)
-					this.headTitle = "打印区";
-					/* wx.setNavigationBarTitle({
-						title: '打印区'
-					}) */
-				} else if (e == 3) {
-					// 快速切换--设计区底图
-					this.Box_Two_Animation({
-						duration: 0, // 动画执行时间
-						axisX: this.data.windowWidth, // x轴移动
-						axisY: 0, // y轴移动
-						settimeout: 0, // 定时器时间
-						settimeoutState: false, //开启下一步
-					})
-					this.LoadState = true
-					setTimeout(function() {
-						this.Box_Two_Animation({
-							duration: 3000, // 动画执行时间
-							axisX: 0, // x轴移动
-							axisY: 0, // y轴移动
-							settimeout: 0, // 定时器时间
-							settimeoutState: false, //开启下一步
-						})
-					}.bind(this), 1000)
-					time = 500 //无时间
-					this.headTitle = "打印区";
-					/* 	wx.setNavigationBarTitle({
-							title: '打印区'
-						}) */
-				}
-
-				setTimeout(function() {
-					this.printingStart = true //打印状态----横向进来滑动动画
-					this.data.printingStartX = 0
-				}.bind(this), (time + 3500))
-				// 刷子开始打印手机壳
-				setTimeout(function() {
-					this.initstate = true
-					this.init()
-				}.bind(this), (time + 6500))
-				// 开启定时器查询打印状态
-				if (this.teststate) {
-					clearInterval(this.orderOrderStatusTime)
-					this.orderOrderStatusTime = setInterval(function() {
-						this.orderOrderStatusGet()
-					}.bind(this), 15000)
-				} else {
-					clearInterval(this.orderOrderStatusTime)
-					this.orderOrderStatusTime = setInterval(function() {
-						this.orderOrderStatusGet()
-					}.bind(this), 10000)
-				}
-			},
-			clearIntervalTime() { // 清除定时器
-				clearInterval(this.statetime)
-				this.statetime = null
-				clearInterval(this.orderOrderStatusTime)
-				this.orderOrderStatusTime = null
-				clearInterval(this.OrderOrderRankingTime)
-				this.OrderOrderRankingTime = null
-			},
-			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];
-					})
-				});
-			},
-			tosetClipboardData(id) { // 复制成功
-				uni.setClipboardData({
-					data: id,
-					success: function() {
-						uni.showToast({
-							title: '复制成功',
-							icon: 'none',
-							duration: 2000
-						});
-					}
-				});
-			},
-			callPhone(phone) { //拨打电话
-				uni.makePhoneCall({
-					phoneNumber: '18938664545'
-				})
-			},
-			previewImg(goods, index) { //预览图片
-				let img = goods.works_image
-				uni.previewImage({
-					current: index,
-					urls: [img]
-				});
-			},
-		},
-		onLoad(options) {
-			console.log(options)
-			// orderId=161819487100005361&type=null&machine_id=100012
-			// orderId=161819487100005361&type=2&machine_id=100022
-			// 例子 2021/12/17
-			// orderId=163964142100008177&type=3&machine_id=100012
-			this.clearIntervalTime()
-			this.queryPage.id = options.orderId
-			this.type = options.type
-			this.machine_id = options.machine_id
-			/* if(this.$base.mobilePhoneCaseSize){
-				this.data = this.$base.mobilePhoneCaseSize
-				this.leftx = this.data.render_cove_width
-			}else{ */
-			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 // 屏幕宽度比率
-				}
-			})
-			/* } */
-			this.loadData();
-		},
-		onshow() {
-			this.data.activebrushX = '-500' //排队盒子动画坐标
-			this.printingStart = false
-			this.data.printingStartX = '-500' //生产中盒子动画坐标
-		},
-		onUnload() {
-			this.clearIntervalTime()
-			let pages = getCurrentPages();
-			// console.log(pages)
-			if (this.tomallstate) {
-				if (pages[pages.length - 2].route == "pages/mine/order") {
-					wx.navigateBack({
-						delta: 3
-					})
-				} else if (pages[pages.length - 2].route == "pages/index/index") {
-					wx.navigateBack({
-						delta: 2
-					})
-				}
-			}
-		}
-	};
-</script>
-
-<style lang="scss">
-	page {
-		background: #131319 !important;
-		color: #fff;
-	}
-
-	.stepsmain {
-		margin: 0upx 30upx 87upx;
-		padding: 20upx 20upx;
-		background: #282932;
-		border-radius: 10upx;
-	}
-
-	.steps {
-		position: relative;
-		counter-reset: step;
-		/*创建步骤数字计数器*/
-		overflow: hidden;
-	}
-
-	/*步骤描述*/
-	.steps .li {
-		list-style-type: none;
-		font-size: 12px;
-		text-align: center;
-		width: calc(100% / 6);
-		position: relative;
-		float: left;
-
-		.steps_img {
-			position: relative;
-			z-index: 9;
-			border: 1upx solid #FFFFFF;
-			background: #282932;
-			width: 56upx;
-			height: 56upx;
-			border-radius: 50%;
-			margin: auto;
-
-			.steps_image {
-				width: 27upx;
-				height: 27upx;
-				margin: 15upx auto;
-			}
-		}
-
-		.steps_text {
-			text-align: center;
-			font-size: 24upx;
-			font-weight: 400;
-			color: #888888;
-			margin-top: 15upx;
-		}
-	}
-
-	.steps .li.active .steps_img {
-		background: #864BC3;
-		border: 1upx solid #864BC3;
-	}
-
-	.steps .li.red .steps_img {
-		background: #864BC3;
-		border: 1upx solid #864BC3;
-	}
-
-	/*连接线*/
-	.steps .li~.li:after {
-		content: '';
-		width: 100%;
-		height: 1px;
-		background-color: #fff;
-		position: absolute;
-		left: -50%;
-		top: 15px;
-		z-index: 1;
-		/*放置在数字后面*/
-	}
-
-	.steps .li.red~.li.red:after {
-		background-color: #864BC3;
-	}
-
-	.steps .li.red~.li.active:after {
-		background-color: #864BC3;
-	}
-
-	.steps .li.red~.li.wait:after {
-		background-color: #864BC3;
-	}
-
-	.steps .li.active~.li.wait:after {
-		background-color: #864BC3;
-	}
-
-	.steps .li.wait~.li.wait:after {
-		background-color: #B6B6B6;
-	}
-
-	// 3D动画
-	.crate-wrapper {
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.brush {
-		position: relative;
-		transition: all 3s;
-		transform: translateX(-400px);
-	}
-
-
-	.twobrush {
-		position: relative;
-		transition: all 3s;
-	}
-
-	.item-text {
-		transition: all 2s;
-		transform: translateX(400px);
-	}
-
-	.printer {
-		transform: translateX(0px);
-	}
-
-	// 错误提示信息
-	.start {
-		.start_img {
-			width: 260upx;
-			height: 260upx;
-			display: block;
-			margin: 0upx auto 102upx;
-		}
-
-		.start_title {
-			font-size: 30upx;
-			text-align: center;
-			color: #FFFFFF;
-		}
-
-		.start_text {
-			width: 70%;
-			text-align: center;
-			font-size: 28upx;
-			font-family: Source Han Sans CN;
-			font-weight: 400;
-			color: #FFFFFF;
-			margin: 22upx auto 0;
-			line-height: 28upx;
-		}
-	}
-</style>

util/base.js

@@ -12,5 +12,6 @@ export default {
 	machine_id:0,//用户进入设备id
 	coupon_flag_desc:'',//提示，如：当前贴图为“森之谷”IP图，需提前领取代金券方可使用，如未领券请前往XXX领券。
 	lockInventory:null,//锁库存储存信息
+		goods_feature_id:null, //属性
 }
 // this.$base.promoter_id
\ No newline at end of file

util/script.js

+import CryptoJS from 'crypto-js';
+/**
+ * ========================================================================================================================
+ * 以RecognizeBankCard为例。
+ * 这里只是为了小程序端演示流程，所以将代码写在了小程序端
+ * 真正上线不建议将ACCESS_KEY_ID和ACCESS_KEY_SECRET写在小程序端，会有泄漏风险，建议将请求API接口代码写到您的服务端
+ * 请求银行卡识别：https://help.aliyun.com/document_detail/151893.html
+ * ========================================================================================================================
+ */
+// 参数说明：
+// miniProgramType：小程序类型，比如：微信小程序传参数：wx，支付宝传参数：my，钉钉传参数：dd，注意不要传字符串;
+// callback：结果的回调
+// type 1: 人物动漫化 2:人物素描化
+
+function callRecognizeBankCard(imageURL,miniProgramType,type,callback) {
+	
+const accessKeyId = "LTAI5tDPiEBZgfqNcWBqaFEc";
+  //AccessKeySecret
+  const accessKeySecret = "amI84BLFbHz6dhOVbuArrERmeemmnx";
+  //这里endpoint为API访问域名，与类目相关，具体类目的API访问域名请参考：https://help.aliyun.com/document_detail/143103.html
+  const endpoint = "facebody.cn-shanghai.aliyuncs.com";
+  //API Action，能力名称，请参考具体算法文档详情页中的Action参数，这里以银行卡识别为例：https://help.aliyun.com/document_detail/151893.html
+  let Action = "GenerateHumanAnimeStyle";
+  
+  //API_HTTP_METHOD推荐使用POST
+  const API_HTTP_METHOD = "POST";
+  //API_VERSION为API版本，与类目相关，具体类目的API版本请参考：https://help.aliyun.com/document_detail/464194.html
+  const API_VERSION = "2019-12-30";
+  const request_ = {};
+  
+  if(type == 2 ){
+  	  Action = "GenerateHumanSketchStyle";
+	  request_["ReturnType"] = "full";
+  }else{
+	   request_["AlgoType"] = "handdrawn";
+  }
+  
+  //系统参数
+  request_["SignatureMethod"] = "HMAC-SHA1";
+  request_["SignatureNonce"] = signNRandom(); 
+  request_["AccessKeyId"] = accessKeyId;
+  request_["SignatureVersion"] = "1.0";
+  request_["Timestamp"] = getTimestamp();
+  request_["Format"] = "JSON";
+  request_["RegionId"] = "cn-shanghai";
+  request_["Version"] = API_VERSION;
+  request_["ImageURL"] = imageURL;
+  request_["Action"] = Action;
+  callApiRequest(miniProgramType, request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback);
+};
+
+//请求数据
+function callApiRequest(miniProgramType, request_, API_HTTP_METHOD, endpoint, accessKeySecret, callback) {
+  const url = generateUrl(request_, API_HTTP_METHOD, endpoint, accessKeySecret);
+  miniProgramType.request({
+    url: url,
+    method: 'POST',
+    header: {
+      "ContentType": "application/json"
+    },
+    success: (result) => {
+      // 获取结果
+      return typeof callback == "function" && callback(result.data)
+    },
+    fail: (error) => {
+      // 获取报错信息
+      return typeof callback == "function" && callback(error.data)
+    }
+  })
+};
+
+/**
+ * ========================================================================================================================
+ * 以下代码仅仅为了调用服务端接口计算签名，其逻辑可参考文档：https://help.aliyun.com/document_detail/144904.html
+ * 这里只是为了Web前端演示，所以将代码写在了Web前端
+ * 真正上线不建议将ACCESS_KEY_ID和ACCESS_KEY_SECRET写在Web前端上，会有泄漏风险，建议将请求API接口代码写到您的服务端
+ * ========================================================================================================================
+ */
+//随机数字
+function signNRandom() {
+  const Rand = Math.random()
+  const mineId = Math.round(Rand * 100000000000000)
+  return mineId;
+};
+//Timestamp
+function getTimestamp() {
+  let date = new Date();
+  let YYYY = pad2(date.getUTCFullYear());
+  let MM = pad2(date.getUTCMonth() + 1);
+  let DD = pad2(date.getUTCDate());
+  let HH = pad2(date.getUTCHours());
+  let mm = pad2(date.getUTCMinutes());
+  let ss = pad2(date.getUTCSeconds());
+  return `${YYYY}-${MM}-${DD}T${HH}:${mm}:${ss}Z`;
+};
+
+function pad2(num) {
+  if (num < 10) {
+    return '0' + num;
+  }
+  return '' + num;
+};
+
+function ksort(params) {
+  let keys = Object.keys(params).sort();
+  let newParams = {};
+  keys.forEach((key) => {
+  newParams[key] = params[key];
+  });
+  return newParams;
+};
+
+function createHmac(stringToSign, key) {
+  const CrypStringToSign = CryptoJS.HmacSHA1(CryptoJS.enc.Utf8.parse(stringToSign), key);
+  const base64 = CryptoJS.enc.Base64.stringify(CrypStringToSign);
+  return base64;
+};
+
+function encode(str) {
+  var result = encodeURIComponent(str);
+  return result.replace(/!/g, '%21')
+  .replace(/'/g, '%27')
+  .replace(/\(/g, '%28')
+  .replace(/\)/g, '%29')
+  .replace(/\*/g, '%2A');
+};
+
+function sha1(stringToSign, key) {
+  return createHmac(stringToSign, key);
+};
+
+function getSignature(signedParams, method, secret) {
+  var stringToSign = `${method}&${encode('/')}&${encode(signedParams)}`;
+  const key = secret + "&";
+  return sha1(stringToSign, key);
+};
+
+//参数拼接
+function objToParam(param) {
+  if (Object.prototype.toString.call(param) !== '[object Object]') {
+    return '';
+  }
+  let queryParam = '';
+  for (let key in param) {
+    if (param.hasOwnProperty(key)) {
+      let value = param[key];
+      queryParam += toQueryPair(key, value);
+    }
+  }
+  return queryParam;
+};
+
+function toQueryPair(key, value) {
+  if (typeof value == 'undefined') {
+    return `&${key}=`;
+  }
+  return `&${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+};
+
+function generateUrl(request, httpMethod, endpoint, accessKeySecret) {
+  //参数中key排序
+  const sortParams = ksort(request);
+  //拼成参数
+  const sortQueryStringTmp = objToParam(sortParams);
+  const sortedQueryString = sortQueryStringTmp.substring(1);// 去除第一个多余的&符号
+  //构造待签名的字符串
+  const Signture = getSignature(sortedQueryString, httpMethod, accessKeySecret)
+  //签名最后也要做特殊URL编码
+  request["Signature"] = encodeURIComponent(Signture);
+
+  //最终生成出合法请求的URL
+  const finalUrl = "https://" + endpoint + "/?Signature=" + encodeURIComponent(Signture) + sortQueryStringTmp;
+  return finalUrl;
+};
+
+//导出方法
+module.exports = {
+  callRecognizeBankCard: callRecognizeBankCard,
+  signNRandom:signNRandom,
+  getTimestamp:getTimestamp,
+  generateUrl:generateUrl,
+  createHmac:createHmac
+}