Skip to content

W
wechat_currency
Commit 828b15c5 by huahua
Options

更新代码

parent a6e04c53
Showing with 602 additions and 3218 deletions
components/toolbar/toolbar.vue
......@@ -4,13 +4,13 @@
<view class="tool-item" v-for="(item, index) in toolArr" :key="index">
<block v-if="item.url === 'share'">
<button open-type="share" class="tool-btn">
<image class="icon" :src="item.select?item.selectIcon:item.icon" mode="aspectFit"></image>
<!-- <image class="icon" :src="item.select?item.selectIcon:item.icon" mode="aspectFit"></image> -->
<text class="title" :class="{'title-select': item.select}">{{item.title}}</text>
</button>
</block>
<block v-else>
<button @click="toolItemAction(index)" class="tool-btn">
<image class="icon" :src="item.select?item.selectIcon:item.icon" mode="aspectFit"></image>
<!-- <image class="icon" :src="item.select?item.selectIcon:item.icon" mode="aspectFit"></image> -->
<text class="title" :class="{'title-select': item.select}">{{item.title}}</text>
</button>
</block>
......@@ -23,23 +23,16 @@
<view style="width: 67upx;height: 67upx; display: flex; align-items: center; justify-content: center;"
:style="{ backgroundColor: item.color}"
@click="selectColor(item,index)">
<image v-if="index == selectColorIndex" src="../../static/mine/icon_confirm.png" mode=""
style="width: 31upx; height: 22upx;"></image>
<image v-if="index == selectColorIndex" src="../../static/mine/icon_confirm.png" mode="" style="width: 31upx; height: 22upx;"></image>
</view>
</view>
</scroll-view>
</view>
<view class="pen-section">
<view style="display: flex; align-items: center; justify-content: center;">
<!-- <view class="pen" :style="{backgroundColor: penColor, height: lineWidth}"></view>
<view class="triangle-right"
:style="{'border-top': (lineValue / 2) + 'px solid transparent',
'border-left': lineValue + 'px solid' + penColor,
'border-bottom': (lineValue / 2) + 'px solid transparent',}"></view> -->
<view style="font-size: 25upx; margin-right: 16upx; color: #FFFFFF;">画笔大小</view>
</view>
<slider min="1" max="20" :value="lineValue" block-size="25" activeColor="#FFFFFF" class="pen-slider" @change="penWidthChange"/>
<!-- <view class="pen-txt">{{lineWidth}}</view> -->
</view>
</view>
</template>
......@@ -592,7 +585,7 @@
}
},
methods: {
// 常用颜色选择
//常用颜色选择
selectColor(color,index) {
this.selectColorIndex = index
this.$emit('colorPickTap', color);
......@@ -601,7 +594,6 @@
this.$emit('toolItemTap', index);
},
penWidthChange (e) {
// console.log('滑块滚动:' + JSON.stringify(e));
this.lineWidth = e.detail.value + 'px';
this.lineValue = e.detail.value;
this.$emit('penWidthChange', this.lineValue);
......
package-lock.json
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -15,9 +15,12 @@
"browserslist": "^4.14.1",
"build": "^0.1.4",
"caniuse-lite": "^1.0.30001124",
"crypto-js": "^4.1.1",
"echarts": "^4.9.0",
"element-ui": "^2.15.13",
"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",
......@@ -29,8 +32,6 @@
"vuex": "^3.5.1"
},
"devDependencies": {
"webpack": "^3.12.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^2.11.5"
},
"repository": {
......
pages.json
......@@ -36,8 +36,7 @@
"navigationBarTitleText": "色彩高尔夫"
}
}]
},
{
},{
"root": "pages/mall",
"pages": [
{
......@@ -49,30 +48,30 @@
}
}
]
},
{
},{
"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": "付款区"
}
}
]
}
]
"pages": [
// {
// "path": "self_help_payment_details",
// "style": {
// "navigationBarTitleText": "打印",
// "navigationStyle": "custom"
// }
// },
// {
// "path": "self_help_payment_details_new",
// "style": {
// "navigationBarTitleText": "打印",
// "navigationStyle": "custom"
// }
// },
// {
// "path": "order",
// "style": {
// "navigationBarTitleText": "付款区"
// }
// }
]
}
]
}
pages/index/index.vue
<template>
<view class="full-width full-height" style="background: #FFFFFF; ">
<!-- 自定义头部 -->
<!-- <myhead :worksid="works_id" :title="titlename" :color="'#fff'" :titleShow="true" :backShow="true" :background="'none'"></myhead> -->
<myhead :worksid="works_id" :title="titlename" :color="'#131319'" :titleShow="true" :backShow="true"
:background="'#fff'"></myhead>
<myhead :worksid="works_id" :title="titlename" :color="'#131319'" :titleShow="true" :backShow="true" :background="'#fff'"></myhead>
<!-- 登录弹框 -->
<Signin ref="Signin"></Signin>
......@@ -14,47 +12,23 @@
</view>
<!-- 设计区域 -->
<view v-show="!state" class="full-width content-color full-height" :style="{background: design_color }"
style=" ">
<!-- margin-top: 170upx; -->
<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">
<!-- style="justify-content:center;" -->
<!-- :style="{height: data.windowHeight + 'px'}" -->
<!-- style="background: #aa0000; height: 1000upx; " -->
<!-- :style="{height: data.windowHeight +'400px'}" -->
<!-- style=" display:flex;
justify-content:center;" -->
<!-- margin-top: 100upx; -->
<!--view style="width: 100%; height: 80upx; background: #FFFFFF;"></view> -->
<view :style="{width: data.bgWidth +'px',height: data.bgHeight +'px' }" style="position: relative; ">
<!-- background: #ffaa00; -->
<!-- 底图 -->
<!-- <image :src="data.bgImage_old" mode="widthFix"
:style="{width: data.bgWidth +'px',height: data.bgWidth +'px' }"
style="position: absolute; z-index: 0; top: 0; bottom: 0; margin: auto;"></image> -->
<!-- 底图 -->
<image :src="data.bgImage_old" mode="widthFix"
:style="{width: (data.bgWidth - 30) +'px',height: data.bgWidth +'px' ,left: '15px'}"
style="position: absolute; z-index: 0; top: 0; bottom: 0; margin: auto;"></image>
<!-- background: #007AFF; -->
<!-- 底色 -->
<!--<view :style="{width: data.editorWidth * 1.1 +'px',height: data.editorHeight * 1.1 +'px',
background:background_color ? background_color : ''}"
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 1;">
</view> -->
<!-- 底色 -->
<view :style="{width: data.editorWidth + 'px',height: data.editorHeight +'px',
background:background_color ? background_color : ''}"
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 1;">
</view>
<!-- <image :src="data.bgImage" mode="widthFix"
:style="{width: data.bgWidth +'px',height: data.bgWidth +'px'}"
style="position: absolute; z-index: 2; top: 0; bottom: 0; margin: auto;"></image> -->
<!-- 遮罩图 -->
<image :src="data.bgImage" mode="widthFix"
:style="{width: (data.bgWidth - 30 ) +'px',height: data.bgWidth +'px',left: '15px'}"
......@@ -100,7 +74,7 @@
<!--图片 @load="loadImage"-->
<image v-else-if="item.type == 0" mode='aspectFill'
style="min-height: 50px;min-width: 50px;"
:src="item.content + '?x-oss-process=image/resize,lfit,w_1500'"
: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>
......@@ -114,7 +88,7 @@
</block>
</view>
</view>
<!-- 操作列表 -->
<!-- 操作列表 -->
<view v-if="editory" class='operate-list' style="z-index: 10;"
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',top: editory +'px'}">
<block v-for="(item,idx) in data.itemList" :key="idx">
......@@ -136,7 +110,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">
......@@ -148,7 +121,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">
......@@ -160,7 +132,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">
......@@ -172,7 +143,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">
......@@ -236,21 +206,19 @@
</view>
</view>
<!-- , maxWidth: data.editorWidth + 'px' -->
<!-- data.itemList[data.cidx].width -->
<!-- 计算字体大小 -->
<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;">
<view id="item-text" class="item-text" :style="{'font-weight': data.itemList[data.cidx].font_style ,
<view ref="itemText" id="item-text" class="item-text" :style="{'font-weight': data.itemList[data.cidx].font_style ,
'font-size': data.itemList[data.cidx].font_size+ 'px',color:data.itemList[data.cidx].font_color,
'background-color': data.itemList[data.cidx].under_color }"
style="margin:auto;white-space:nowrap;display:table;">{{data.itemList[data.cidx].content}}
</view>
</view>
</view>
<!-- 上一步、下一步按钮 -->
<view class="operation" v-if="!active && !guide_left">
<view class="operation_top">
......@@ -273,13 +241,14 @@
</view>
</view>
</view>
<!-- 图片提示 -->
<view v-if="showone">
<view
style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
@click.stop="showone = !showone"></view>
<view style="position: fixed; background: #FFFFFF; top:calc((100% - 621upx) / 2); left:calc((100% - 560upx) / 2);
z-index:1000; width: 560upx; min-height: 621upx; border-radius: 12upx;">
z-index:1000; width: 560upx; min-height: 621upx; border-radius: 12upx;">
<image style="width: 560upx; height: 298upx; display: block;margin: auto;"
src="../../static/image/remind_picture.png" mode="aspectFill"></image>
<view v-if="shape_image != '' && data.itemList.length == 0"
......@@ -290,11 +259,8 @@
style="text-align: center; font-size: 28upx; font-weight: 500; color: #333333; line-height: 45upx; margin-top: 62upx;">
请选择手机拍摄或尺寸较大的图片<br>以体验最佳冲印效果
</view>
<!-- <view @click.stop='addItem' style="width: 466upx; height: 82upx; background: #F56364; border-radius: 10upx; font-size: 36upx;
font-weight: 400; color: #FFFFFF; text-align: center; line-height: 82upx; margin: 46upx auto 46upx; ">好的</view> -->
<view @click="selectPicturePop()" style="width: 466upx; height: 82upx; background: #F29F3D; border-radius: 10upx; font-size: 36upx; font-weight: 400;
color: #FFFFFF; text-align: center; line-height: 82upx; margin: 46upx auto 46upx; ">
好的</view>
color: #FFFFFF; text-align: center; line-height: 82upx; margin: 46upx auto 46upx; ">好的</view>
</view>
</view>
<!-- 上传进度条 -->
......@@ -306,6 +272,7 @@
<ProgressBar :Width="percent" Type="candy"></ProgressBar>
</view>
</view>
<!-- 菜单栏目 -->
<view v-if="!active && !guide_left" class="toolRight">
<view class="tool_li">
......@@ -319,6 +286,7 @@
<image class="tool_li_img" src="../../static/icon_diy_wallpaper.png" mode=""></image>
<view class="tool_li_text">全幅壁纸</view>
</view>
<view class="tool_li" @click="showPopup(2)">
<image class="tool_li_img" src="../../static/icon/icon_stickers.png" mode=""></image>
<view class="tool_li_text">贴图素材</view>
......@@ -369,8 +337,8 @@
<image v-if="isShowGif && !guide_left" src="../../static/img/icon_finger_stretch.gif" style="width: 450upx; height: 450upx; left:calc(50% - 225upx); position: fixed;
top: calc(50% - 225upx);
z-index: 1000;
display: flex;
align-items: center;" @click="oclikGifImage()" @touchstart="oclikGifImage()">
display: flex;
align-items: center;" @click="oclikGifImage()" @touchstart="oclikGifImage()">
</image>
</view>
......@@ -385,6 +353,16 @@
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;"
......@@ -392,11 +370,13 @@
<view class="tool_li_text">编辑</view>
</view>
</view>
<!-- 点击画布区域取消聚焦 -->
<view class="tool_li" @click.stop="itemCancel">
<image class="tool_li_img" style="width: 51upx; height: 51upx;" src="../../static/icon_confirm.png"
mode=""></image>
</view>
</view>
<!-- 生成作品 -->
......@@ -417,7 +397,7 @@
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;">
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;">
......@@ -427,7 +407,8 @@
<image style="width: 36%; height: 36%; position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto; z-index:0;" src="https://img.colorpark.cn/yun/11636_16349613693433.png?x-oss-process=image/resize,lfit,w_300"
mode="aspectFit"></image>
mode="aspectFit">
</image>
<image style="width: 100%; height: 100%;position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin:auto; z-index: 1;" src="https://img.colorpark.cn/back/16351440306176515e7f196.png" mode="aspectFit">
......@@ -465,7 +446,6 @@
</textsettings>
</view>
</uni-popup>
<!-- 文本，贴图，相框 1模板 2贴图 3字体 4编辑 22添加相框 -->
<uni-popup ref="showshare" :type="type" @change="change"
style="position: relative; z-index: 9998; width: 100%;" :style="{height: data.windowHeight +'px'}">
......@@ -483,7 +463,8 @@
</view>
</view>
<!-- 贴图/模板形状 -->
<view v-else class="uni-share full-width" :style="{height: data.windowHeight +'px'}">
<view v-if="e_active == 2 || e_active == 23 || e_active == 99 || e_active == 24"
class="uni-share full-width" :style="{height: data.windowHeight +'px'}">
<!-- 遮罩 -->
<view class="full-width"
style="position: absolute; bottom: 0; left: 0; height: 100%; z-index: 997; opacity: 0.8;"
......@@ -491,20 +472,8 @@
<!-- 正文 -->
<view
style="position: absolute; bottom: 0upx; left: 0; height: 100%; width: 120upx; z-index: 999; background: #1A1D33; overflow: hidden;">
<view style="width: 120upx; height: 188upx;">
<!-- <view style="position: relative;width: 120upx; height: 188upx;" v-if="e_active == 2 || e_active == 23"
@click="bgColorClick()">
<image v-if="backgroundColor" src="../../static/dise.png" mode=""
style="width: 66upx; height: 398upx; margin: auto; display: block;
position: absolute; top: -210upx; left: 0; right: 0;"></image>
<view v-if="backgroundColor" style="text-align: center; position: absolute; left: 0; right: 0; bottom: 10upx; color: #FFFFFF;">底<br/>色</view>
<image v-if="!backgroundColor" src="../../static/bizhi.png" mode=""
style="width: 66upx; height: 231upx; margin: auto; display: block;
position: absolute; top: -40upx; left: 0; right: 0;"></image>
<view v-if="!backgroundColor" style="text-align: center; position: absolute; left: 0; right: 0; bottom: 10upx; color: #000;">贴<br/>图</view>
</view> -->
</view>
<view style="width: 120upx;" :style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}"
<view style="width: 120upx; margin-top:190upx "
:style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}"
v-if="e_active == 2 || e_active == 23 || e_active == 99 ">
<scroll-view class="scroll-container"
:style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}" scroll-y
......@@ -512,15 +481,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;"
: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;">
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"
......@@ -533,8 +510,6 @@
</swiper-item>
</swiper>
</view>
<!-- material_series_list 二级分类 -->
<!-- <view style="font-size: 40upx;color: #007AFF;">11111{{ material_series_list.length}}<view> -->
<view id="classification" v-if="e_active == 2 || e_active == 23 || e_active == 99"
style="width: 100%; position: relative; z-index: 99; ">
<view style="overflow: hidden;" v-if="material_series_list.length > 0">
......@@ -546,13 +521,12 @@
</view>
</view>
</view>
<!-- 特效添加相框 -->
<!-- <shapeScrollView v-if="e_active == 22" ref="shapeScrollView" @Worksdetail="Worksdetail"
:windowHeight="(data.windowHeight * 0.8 - 160 * data.pixelRate)"></shapeScrollView> -->
<!-- 贴图 -->
<scrollList v-if=" e_active == 2 || e_active == 23 || e_active == 99 " ref="scrollList"
@Worksdetail="Worksdetail" :classificationHeight="classificationHeight"
:windowHeight="(data.windowHeight - 210 * data.pixelRate)"></scrollList>
<!-- 背景颜色 -->
<bgColor v-if="e_active == 24 && backgroundColor" ref="bgColor"
@bgColorAssembly="bgColorAssembly" :classificationHeight="classificationHeight"
......@@ -585,6 +559,39 @@
</view>
</view>
</uni-popup>
<!-- 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="selectGoodItem"></switchGoods>
<!--商品弹框 -->
......@@ -609,7 +616,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实例
......@@ -620,6 +629,8 @@
var snapshot = []; // 操作历史记录
var snapshotIndex = -1;
var infoListTouchEvent = new WxTouchEvent(); //在 Page外实例化函数，可以直接复制给 Page 中的回调函数
var textQuery;//文字选择器
export default {
components: {
uniPopup,
......@@ -637,30 +648,24 @@
computed: {},
data() {
return {
collection_currentId: 0, //点赞选中Id
collection_currentIndex: null, //点赞选中坐标
wallpaper_currentId: 0, //壁纸选中Id
wallpaper_currentIndex: null, //壁纸选中坐标
wallpaper_material_series_currentId: null, //壁纸系列选中
mapping_currentId: 0, //贴图选中Id
mapping_currentIndex: null, //贴图选中坐标
mapping_material_series_currentId: null, //贴纸系列选中
classificationHeight: 0,
backgroundColor: false, //控制底色
Adlists: [],
diy_backList: [],
diy_bannerList: [],
textHeight: null, //设备头部高度
system_config: null, //控制是否上传图片
type: '',
content: '底部弹出 popup',
active: false,
currentId: 0,
/* 控制被选中 */
currentIndex: null,
......@@ -677,9 +682,7 @@
/* 控制被选中 */
currentIndex_wallpaper: null,
/* 控制位置 */
material_series_currentId: null,
/* 控制位置 */
brands: [], //贴图分类
e_active: null, //判断弹框是贴图还是文本
......@@ -776,9 +779,7 @@
deleteTop: 0,
deleteWrap: false,
delete_wrap_state: true,
background_color: null,
translateX: -400,
translateXState: 1,
translateLeft: null,
......@@ -787,7 +788,6 @@
transformscale: 0.5, //整体缩小
functionScale: null, //整体缩小
isReady: false, //礼花
//画布
canvasHidden: false, //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
shareImgPath: '', //用于储存canvas生成的图片
......@@ -796,6 +796,8 @@
material_series_list: [], //系列分类
material_series_currentId: 0,
isShowGif: false, //是否显示
history_bannerList: [] ,//历史banner集合
selectChangeType:1
};
},
......@@ -803,11 +805,189 @@
let app = uni.getSystemInfoSync(); //设备信息
let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); //胶囊信息
this.textHeight = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2
// this.textTop = menuButtonInfo.top;
},
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;
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
},
//点击显示动画
oclikGifImage() {
this.isShowGif = false;
......@@ -824,7 +1004,7 @@
//添加涂鸦
tuyaimg(e) {
console.log(e)
this.e_active = 0
let index = items.length;
items.push({
support_zoom: 1, // 0是不支持缩放，为1时支持缩放
......@@ -844,7 +1024,7 @@
content: e, // 图片地址
top: this.editor_top - this.data.editorHeight / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: this.data.editorWidth / 2 - this.data.editorWidth /
2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: this.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: this.editor_top,
scale: 1, // 缩放比例 1为不缩放
......@@ -874,9 +1054,10 @@
})
this.data.itemList = items
this.saveSnapshot();
this.$refs['showshare'].close()
this.delete_wrap_state = true
},
//切换商品
changeGoods() {
this.$refs['switchGoods'].open(this.machine_id);
......@@ -1382,37 +1563,10 @@
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 ratioheight = (_this.data.editorHeight * _this.mix_scale) / image.height
width = _this.data.editorWidth * _this.mix_scale
height = image.height * ratiowidth
// if (height / 2 > _this.editor_top) {
// width = width * (_this.editor_top * 2 /
// height)
// height = _this.editor_top * 2
// }
// console.log(_this.mix_scale)
// if (ratio >= 1) { //长方形
//width = _this.data.editorWidth * _this.mix_scale
//height = image.height * ratiowidth
// if (height / 2 > _this.editor_top) {
// width = width * (_this.editor_top * 2 / height)
// height = _this.editor_top * 2
// }
// console.log(width)
// } else if (ratio < 1) { //窄高方形
// height = _this.data.editorHeight * _this.mix_scale
// width = image.width * ratioheight
// if (height / 2 > _this.editor_top) {
// width = width * (_this.editor_top * 2 / height)
// height = _this.editor_top * 2
// }
// }
_this.isShowGif = true;
let index = items.length;
items.push({
......@@ -1466,6 +1620,7 @@
image_left: null, // 图片x
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
isUpLoadImage:true
})
_this.data.itemList = items
_this.saveSnapshot();
......@@ -1511,7 +1666,7 @@
cancel_replace() {
this.$refs['replacebottom'].close()
},
/* 生成作品 */
/*生成作品*/
createWorks(e) {
this.isShowGif = false;
var that = this
......@@ -2080,9 +2235,9 @@
content: urlData, // 贴图地址
top: this.editor_top - height / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: this.data.editorWidth / 2 - width /
2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: this.data.editorWidth /
2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: this.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
......@@ -2108,8 +2263,7 @@
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
})
// 提示用户此贴图可用卷
//提示用户此贴图可用卷
if (result.is_discount == '1') {
if (this.$base.coupon_flag_desc == '') return;
uni.showToast({
......@@ -2207,6 +2361,7 @@
this.$refs['scrollList'].open({
e: this.e_active,
queryPage: this.queryPage,
val: this.brands[this.currentId_Material].val
})
})
},
......@@ -2285,6 +2440,7 @@
this.$refs['scrollList'].open({
e: this.e_active,
queryPage: this.queryPage,
val: this.brands[this.currentId_Material].val
})
})
}
......@@ -2300,7 +2456,6 @@
this.queryPage.shape_category_id = item.id
this.currentId = index;
this.currentIndex = Math.max(0, index - 1);
} else if (this.e_active == 23) { //壁纸
this.currentId_wallpaper = index;
this.currentIndex_wallpaper = Math.max(0, index - 1);
......@@ -2336,8 +2491,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(() => {
......@@ -2354,7 +2507,6 @@
}
},
MaterialseriesList() { //查询分类下二级分类
this.material_series_list = []
homeservice.queryList({
......@@ -2393,7 +2545,6 @@
that.setData({
classificationHeight: that.classificationHeight
})
// console.log('height' + that.classificationHeight)
})
}.bind(this), 100)
} else {
......@@ -2423,12 +2574,7 @@
if (e == 1) { //模板
} else if (e == 2) { //贴图
this.category(2)
} else if (e == 3) { //文本
index = null
this.addtext = true
......@@ -2450,11 +2596,7 @@
} else if (e == 22) { //形状
} else if (e == 23) { //壁纸
this.category(23)
} else if (e == 24) {
this.Adlists = this.diy_bannerList
this.backgroundColor = true;
......@@ -2462,7 +2604,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",
......@@ -2506,7 +2648,6 @@
cancel(type) { //关闭弹框
this.isShowGif = false;
try {
......@@ -2524,10 +2665,10 @@
},
typefaceshow(type) { //关闭弹框
// 获取当前选中的部件
//获取当前选中的部件
var item = items[index];
if (item != undefined && item.type == 1) {
// 字体
//字体
this.$refs['textsettingsshare'].open()
this.$nextTick(() => {
this.$refs['textsettingstwo'].open({
......@@ -2605,11 +2746,14 @@
heightRate = 1.14
}
var that = this;
var query = wx.createSelectorQuery();
//let itemText = this.$refs.itemText;
//console.log("文字大小:"+itemText)
//var query = wx.createSelectorQuery();
query.select('#item-text').boundingClientRect();
query.exec(function(res) {
//console.log(res)
var width = res[0].width;
uni.createSelectorQuery().in(this).select('#item-text').boundingClientRect(res => {
//console.log(data.height)
//console.log(data.width)
var width = res.width;
var rate = item.width / width;
var tmpSize = item.font_size * rate;
if (tmpSize > maxFontSize) {
......@@ -2625,7 +2769,28 @@
data: that.data
})
that.data.itemList = items
})
}).exec()
// query.exec(function(res) {
// //console.log(res)
// var width = res[0].width;
// var rate = item.width / width;
// var tmpSize = item.font_size * rate;
// if (tmpSize > maxFontSize) {
// item.font_size = maxFontSize;
// item.height = maxFontSize * heightRate;
// item.top = item.y - (item.height / 2);
// } else {
// item.font_size = item.font_size * rate;
// item.height = item.height * rate;
// item.top = item.y - (item.height / 2);
// }
// that.setData({
// data: that.data
// })
// that.data.itemList = items
// })
} else {
uni.showToast({
title: '啊嘞，你还没有输入内容哦',
......@@ -2971,11 +3136,11 @@
if (item.type == 1) {
currentText = item.content;
}
item.mLeft = item.left;
item.mTop = item.top;
drag.recordPressDownData(item);
//赋值
this.data.listActive = true
this.data.cidx = index
......@@ -3069,7 +3234,7 @@
var mTop = this.getTop();
item.mLeft = mLeft
item.mTop = mTop
drag.recordPressDownData(item);
//赋值
this.data.listActive = true
......@@ -3326,7 +3491,7 @@
this.active = false
},
/* 检测文字的输入 */
textInput(e) {
textInput(content) {
if (this.addtext) {
let index_id = items.length;
items.push({
......@@ -3344,7 +3509,7 @@
font_size: '50',
font_color: '#000000',
under_color: '',
content: e.detail.value, // 文本
content: content, // 文本
top: this.editor_top - 74 / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: 0, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: this.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
......@@ -3368,14 +3533,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 == '' || content == null) {
var item = items[index];
if (item != null) {
this.deleteItem();
......@@ -3383,18 +3548,16 @@
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
})
var query = wx.createSelectorQuery();
query.select('#item-text').boundingClientRect();
query.exec(function(res) {
/* console.log(res) */
textQuery.select('#item-text').boundingClientRect();
textQuery.exec(function(res) {
var width = res[0].width;
var rate = item.width / width;
var tmpSize = item.font_size * rate;
......@@ -3414,23 +3577,20 @@
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
})
var query = wx.createSelectorQuery();
query.select('#item-text').boundingClientRect();
query.exec(function(res) {
//console.log(res)
textQuery.select('#item-text').boundingClientRect();
textQuery.exec(function(res) {
var width = res[0].width;
var rate = item.width / width;
var tmpSize = item.font_size * rate;
......@@ -3443,7 +3603,6 @@
item.height = item.height * rate;
item.top = item.y - (item.height / 2);
}
that.setData({
data: that.data
})
......@@ -3531,7 +3690,6 @@
id: this.data.goods_id
}).then(result => {
this.titlename = result.name //修改头部名称
//读取背景图
uni.getImageInfo({
src: result.front_image_old,
......@@ -3546,9 +3704,9 @@
this.front_image_long = true
}
})
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_old = result.front_image;
this.data.bgImage_thumbnail = result.thumbnail // 介绍图片（主图遮罩）
this.design_color = result.design_color // 背景颜色
this.mix_scale = result.mix_scale //上传图片比率
......@@ -3565,8 +3723,8 @@
});
});
},
category(type) {
//查询贴图分类 key=0贴图
if (type == 2) {
homeservice.queryList({
......@@ -3575,11 +3733,6 @@
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
this.queryPage.goods_id = this.data.goods_id
this.brands = this.Material_category
......@@ -3611,9 +3764,9 @@
this.$refs['scrollList'].open({
e: 2,
queryPage: this.queryPage,
val: this.brands[this.currentId].val
})
})
}).catch(err => {
uni.showToast({
title: err.msg,
......@@ -3630,12 +3783,6 @@
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.Adlists = this.diy_backList
this.queryPage.goods_id = this.data.goods_id
this.brands = this.wallpaper_category //壁纸分类
......@@ -3717,7 +3864,6 @@
this.center_scale = result.center_scale // 设计区中心点比率
this.location_scale = result.location_scale // 辅助线比率
this.editor_top = this.data.editorHeight * Number(this.location_scale) //辅助线距离
let scaleWidth = this.data.editorWidth / 100;
let scaleHeight = this.data.editorHeight / 185;
this.real_print_height = (this.options.HeightIndex / 3) * scaleWidth; // 设计宽度
......@@ -3727,7 +3873,6 @@
this.clipTop = (this.data.editorHeight - this.real_print_height) / 2;
this.clipButtom = this.clipTop;
this.filletSize = (this.options.fillet / 3) * scaleWidth;
if (snapshot.length > 0) {
let listSnapshot = []
snapshot.forEach((item, index) => {
......@@ -3757,19 +3902,9 @@
},
onLoad(options) {
items = []
textQuery = wx.createSelectorQuery();
this.data.goods_id = options.good_id;
let that = this;
wx.createSelectorQuery().select('.delete-wrap').boundingClientRect(function(rect) {
if (rect != null) {
that.setData({
deleteTop: rect.top,
})
} else {
that.setData({
deleteTop: 500,
})
}
}).exec();
this.infoListTouchEvent = infoListTouchEvent;
this.infoListTouchEvent.bind({
doubleTap: function(e) {
......@@ -3830,7 +3965,6 @@
animationData: that.animation.export()
})
if (that.deleteWrap == true) {
//that.deleteItem()
that.removedeleteItem();
that.deleteWrap = false
}
......@@ -3854,7 +3988,6 @@
animationData: that.animation.export()
})
}
}.bind(this),
rotate: function(e) { //双指缩放
let item = items[index];
......@@ -3865,12 +3998,12 @@
}
var newScale = Math.max(e.scale * item.lastScale, .01);
newScale || (newScale = item.lastScale);
// 角度
//角度
item.rotate += e.angle;
item.angle = item.rotate;
// 缩放
//缩放
item.scale = newScale;
// //图片放大响应的右下角按钮同比缩小
//图片放大响应的右下角按钮同比缩小
item.oScale = 1 / item.scale;
item.active = false //辅助线
item.activeguide = true //开启辅助线
......@@ -3895,6 +4028,7 @@
let pixelRate = res.windowWidth / 750
that.data.windowWidth = res.windowWidth // 屏幕宽度
that.data.windowHeight = res.windowHeight // 屏幕高度
that.deleteTop = res.windowHeight // 屏幕高度
that.data.bgWidth = res.windowWidth // 画布宽度
that.data.bgHeight = res.windowHeight // (861 / 1196) // 画布高度 高度比率 * (861 / 1196)
that.data.pixelRate = pixelRate // 屏幕宽度比率
......@@ -3905,7 +4039,7 @@
}
})
},
onShow() {
var _this = this
wx.request({
......@@ -3937,6 +4071,13 @@
}).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 = []; // 当前显示的图片列表
......@@ -3974,11 +4115,6 @@
align-items: center;
width: 100%;
height: 100%;
//height: calc(100% - 150upx);
/* height: calc(100% - 80upx); */
/* padding-top: 80upx; */
/* margin-top: 100upx; */
// justify-content: center;
}
/* 部件列表和部件操作列表 */
......@@ -4299,7 +4435,7 @@
// 底部工具栏
.toolRight {
position: fixed;
top: 220upx;
top: 210upx;
right: 0;
width: 120upx;
z-index: 99;
......@@ -4510,4 +4646,4 @@
.delete-wrap-active {
box-shadow: 0 0 15px #FFFFFF;
}
</style>
</style>
\ No newline at end of file
pages/index/machineDetail.vue
......@@ -21,9 +21,6 @@
style="width: 15upx; height: 15upx; margin-left: 10upx;"></image>
<image else src="../../static/icon_banner_select_dot.png"
style="width: 15upx; height: 15upx; margin-left: 10upx;"></image>
<!-- <view class="dot iconfont"
:class="[index == currentSwiper ? 'iconsanjiaoxing':'iconxingzhuang-sanjiaoxing' ]">
</view> -->
</view>
</view>
</view>
......@@ -33,12 +30,11 @@
background: linear-gradient(92deg, #F29F3D, #67C4CA);
box-shadow: 0px 19px 48px 1px rgba(20, 31, 62, 0.35);
border-radius: 40px;">
<view
style=" text-align: center; line-height: 100upx; font-size: 36upx; font-weight: 500; color: #FFFFFF;">
<view style=" text-align: center; line-height: 100upx; font-size: 36upx; font-weight: 500; color: #FFFFFF;">
立即定制</view>
</view>
</view>
<!-- 错误提示信息 -->
<view v-if="statusloading == 2" style="min-height: 100%;background: #131319 !important;">
<view class="start" style="padding-bottom: 100upx; padding-top: 200upx;">
......@@ -47,8 +43,7 @@
<view @click="tomakePhoneCall">
<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>
<image src="../../static/phone.png" mode="" style="width: 32upx; height: 32upx; margin-right: 5upx;"></image>
{{phone || '18938664545'}}
</view>
</view>
......@@ -170,20 +165,11 @@
uni.login({
provider: 'weixin',
success: (res) => {
//console.log(res)
userService.login({
s: 'Init.init',
code: res.code
}).then(r => {
that.getDetail();
if (type == 1) {
that.$refs['switchGoods'].open(that.machine_id);
} else {
uni.navigateTo({
url: '../mall/lineUp?machine_id=' + that.machine_id +
'&key=' + that.key
})
}
that.$refs['switchGoods'].open(that.machine_id);
}).catch(err => {
that.$refs.Signin.init();
});
......@@ -223,7 +209,7 @@
this.msg = err.msg
this.statusloading = 2;
this.phone = err.data.phone || '18938664545'
this.myheadtext = '歇一歇' //头部标题栏
this.myheadtext = '歇一歇'
uni.stopPullDownRefresh();
uni.hideLoading();
});
......@@ -261,7 +247,7 @@
//分享转发
onShareAppMessage(options) {
var that = this;
// 设置转发内容
//设置转发内容
var shareObj = {
title: this.$Env.getmalltext(),
path: '/pages/mall/machineDetail?machine_id=' + this.machine_id, // 默认是当前页面，必须是以‘/’开头的完整路径
......@@ -280,7 +266,8 @@
this.myheadtext = this.machine_id + "-定制";
this.$base.machine_id = this.machine_id
this.statusloading = 1;
this.Adlist() // 轮播图
this.Adlist() //轮播图
this.getDetail() //获取数据
},
onShow() {},
......
pages/index/mall.vue
<template>
<view class="full-width full-height">
<!-- v-if="system_config.golf_diy.value == 0" -->
<!-- v-if="system_config.golf_diy.value == 0" -->
<view v-if="system_config.lite_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: #43cf7c; border-radius: 44upx 0px 0px 44upx;">
......@@ -29,6 +28,7 @@
</view>
<view style="color: #333333 ; font-weight: bold;font-size: 33upx;">开始扫码定制</view>
</view>
<!-- 登录弹框 -->
<Signin ref="Signin"></Signin>
</view>
......@@ -57,100 +57,6 @@
};
},
methods: {
// Uploadpictures(){
// var that = this
// wx.chooseMessageFile({
// count: 1,
// type: 'image',
// success(res) {
// console.log(res);
// // tempFilePath可以作为img标签的src属性显示图片
// let tempFilePaths = [];
// res.tempFiles.forEach(item => {
// tempFilePaths.push(item.path)
// })
// var size = res.tempFiles[0].size;
// var path = res.tempFiles[0].path;
// var formatImage = path.split(".")[(path.split(".")).length - 1];
// if (formatImage != "png" && formatImage != "jpg" && formatImage != "jpeg") {
// return wx.showToast({
// title: '只能上传.png、.jpg、.jpep 格式',
// icon: 'none',
// image: '',
// duration: 2000,
// mask: true,
// })
// }
// that.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length);
// }
// })
// },
/* 函数描述：作为上传文件时递归上传的函数体体；
* 参数描述：
* filePaths是文件路径数组
* successUp是成功上传的个数->0
* failUp是上传失败的个数->0
* i是文件路径数组的指标->0
* length是文件路径数组的长度
* machine_id=user_id=
*/
// uploadDIY(tempFilePaths, successUp, failUp, i, length) {
// let machine_id = this.machine_id || 0
// let user_id = userService.getUserInfo().id || 0
// var _this = this
// wx.request({
// url: this.$Env.getDevBaseURL() + '/api/AliossSign/getSign?machine_id=' + machine_id + '&user_id=' + user_id,
// method: 'GET',
// data:'',
// header: {
// 'content-type':'application/x-www-form-urlencoded',
// 'Accept': 'application/json'
// },
// success: function (res) {
// //这里是进度条
// _this.percent = 0
// var atter = res.data
// let time = new Date().getTime() + Math.floor((Math.random() * 1000) + 1)
// var uploadTask = wx.uploadFile({
// url: atter.host.replace("http:", "https:"),
// filePath: tempFilePaths[i],
// name: 'file',
// formData: {
// 'key': atter.dir + time + '.jpg',
// 'OSSAccessKeyId': atter.accessid,
// 'policy': atter.policy,
// 'Signature': atter.signature,
// 'success_action_status': '200',
// 'callback':atter.callback,
// },
// success: function(res) {
// successUp++;
// if (res.statusCode != 200) {
// // console.log({errCode: '599', msg:'其他错误'})
// return;
// }
// if (res.statusCode == 200){
// _this.percent = 100
// uni.showToast({ title: '上传成功', icon: 'none',duration: 3000 })
// console.log(atter.host + '/' + atter.dir + time + '.jpg')
// }
// },
// fail: function(err) {
// failUp++;
// wx.showToast({title: '上传失败！',icon: 'none',duration: 1200})
// },
// complete: function(err) {
// console.log('总共' + successUp + '张上传成功,' + failUp + '张上传失败！');
// }
// })
// uploadTask.onProgressUpdate((res) => {
// console.log('上传进度', res.progress + " " + new Date())
// console.log('已经上传的数据长度', res.totalBytesSent)
// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
// })
// }
// })
// },
getQueryString(url, name) {
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
var r = url.substr(1).match(reg)
......@@ -222,7 +128,6 @@
this.touchEndTime = e.timeStamp;
},
doubleTap(e) {
//console.log("doubleTap=");
// 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
if (this.touchEndTime - this.touchStartTime < 350) {
// 当前点击的时间
......@@ -235,13 +140,9 @@
if (!this.$AppContext.checkLogin()) {
this.tologo('navigateTo')
} else {
//console.log("进来=");
uni.navigateTo({
url: '../index/machineDetail?machine_id=' + this.$Env.getmachineId()
});
//uni.navigateTo({
// url: '../index/index',
//})
}
}
}
......
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:backColorValue}">
<refresh @interrupt="interrupt" @pushToInterrupt="pushToInterrupt" @finished="finished" @scrolltolower="g"
:scrollHeight="(windowHeight - classificationHeight)" :scrollTop="scrollViewTop" @scroll="scroll">
<template slot="top">
......@@ -17,7 +17,6 @@
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"
......@@ -25,8 +24,7 @@
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 style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">啊嘞，还是一片荒漠</view>
</view>
</view>
</template>
......@@ -73,7 +71,6 @@
material_series_id: "",
},
Material_categorydatalist: [], //作品、贴图列表
historyQueryPage: {
goods_id: "", //产品Id
s: 'Works.myList',
......@@ -90,6 +87,7 @@
scrollViewTop: 0, //滑动高度
e: 0, //弹窗类型
isWork: false, //是否作品
backColorValue:""
};
},
mounted() {
......@@ -99,6 +97,7 @@
* 组件的公有方法列表
*/
methods: {
//作品详情
Worksdetail(item) {
//console.log(item)
......@@ -163,6 +162,11 @@
},
open(item) {
if(item.val){
this.backColorValue = item.val
}else{
this.backColorValue = ""
}
if (this.e != item.e) {
this.datalist = [];
}
......@@ -179,7 +183,6 @@
} else {
loadData = true;
}
if (this.datalist == null || this.datalist.length == 0) {
loadData = true;
}
......@@ -207,7 +210,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) {
......
pages/index/textsettings.vue
......@@ -12,7 +12,7 @@
src="../../static/img/icon_qiehuan.png"
mode="aspectFill" @click="bgtextcolor"></image>
<view style="width: 80upx; margin-top: 45upx;margin-left: 45upx;" @click="typefaceshow('share')">
<text style="font-size: 36upx; color: #FFFFFF;">字体</text>
<text style="font-size: 36upx; color: #FFFFFF;">字体</text>
</view>
</view>
</view>
......@@ -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>
......@@ -43,15 +43,11 @@
:style="{'color': data.itemList[data.cidx].font_dict_id == item.id ? '#F56364 !important' : '#ffffff'}">
色彩公园
</text>
<!-- <text v-if="item.remark != ''">
{{item.long ? '' : '(下载该字体)'}}
</text> -->
<text v-if="item.remark != ''">
{{item.long == true ? '' : '(点击加载)'}}
</text>
<!-- <text v-if="item.remark != ''" style="color: #864BC3;">
{{item.textlong == true ? '(加载成功)' : ''}}
</text> -->
<text v-if="item.remark != ''" style="color: #F56364;">
{{item.textlong == false ? '(下载失败,点击重新下载)' : ''}}
</text>
......@@ -61,23 +57,7 @@
</scroll-view>
</view>
<view v-if="show && text != 'typeface'" style="display: flex; height: 90upx; padding: 38upx 0 41upx; align-items: center;">
<!-- 背景 -->
<!-- <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> -->
<!-- 颜色 开始-->
<!-- <scroll-view style="box-sizing: border-box; white-space: nowrap; margin: 10upx 0; " 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: 60upx; height: 60upx; background: #000000; border: 4upx solid #EF6262; 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: 60upx; height: 60upx; background: #000000; border: 4upx solid #EF6262; border-radius: 50%;" :style="{background:item.color}" ></view>
<view v-else style="width: 68upx; height: 68upx; border-radius: 50%;" :style="{background:item.color}" ></view>
</view>
<view v-else style="width: 68upx; height: 68upx; border-radius: 50%;" :style="{background:item.color}"></view>
</view>
</scroll-view> -->
<!-- 颜色 结束-->
<!-- 颜色 开始-->
<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
......@@ -101,45 +81,6 @@
</scroll-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 style="width: calc(100% / 7); text-align: center;" @click="typefaceshow('share')">
<text style="font-size: 24upx; color: #FFFFFF;">字体</text>
</view> -->
</view>
<view v-if="!show" style="position: absolute; bottom: 100upx; width: 100%; background: #292933;">
<!-- 修改 -->
......@@ -148,7 +89,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 +693,17 @@
* 组件的公有方法列表
*/
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)
},
......@@ -779,16 +731,6 @@
}else{
this.$emit('typefaceClick', e)
}
// if(e.textlong == true){
// this.$emit('typefaceClick', e)
// }else{
// if(e.remark != ''){
// this.loadFont(e)
// }else{
// this.$emit('typefaceClick', e)
// }
// }
},
loadFont(textlist) {
let that = this;
......@@ -853,7 +795,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/index/tuya.vue
......@@ -96,7 +96,6 @@
hollowCircleMode: false,
lastHollowRect: {},
lastHollowCircle: {},
MobilePhoneHeight: 0,
MobilePhoneWidth: 0,
pixelRate: 1,
......@@ -204,7 +203,6 @@
})
},
colorPickTapHandler(obj) {
// console.log('我点击的颜色:' + JSON.stringify(obj));
this.colorPanelShow = false;
this.toolArr.forEach(item => {
item.select = false;
......@@ -221,7 +219,6 @@
this.drawContext.strokeStyle = obj.color;
},
penWidthChangeHandler(width) {
// console.log('画笔宽度:' + width);
this.lineWidth = width;
this.drawContext.setLineWidth(width);
this.drawContext.setLineCap('round') // 让线条圆润
......
pages/mine/self_help_payment_details.vue deleted 100644 → 0
<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 deleted 100644 → 0
<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>
static/icon/designer-f.png
static/icon/designer-f.png

1.72 KB | W: | H:

static/icon/designer-f.png

656 Bytes | W: | H:

static/icon/designer-f.png
static/icon/designer-f.png
static/icon/designer-f.png
static/icon/designer-f.png
  • 2-up
  • Swipe
  • Onion skin
static/icon/designer-o.png
static/icon/designer-o.png

1.57 KB | W: | H:

static/icon/designer-o.png

481 Bytes | W: | H:

static/icon/designer-o.png
static/icon/designer-o.png
static/icon/designer-o.png
static/icon/designer-o.png
  • 2-up
  • Swipe
  • Onion skin
static/icon/diy_icon_editor_default.png
static/icon/diy_icon_editor_default.png

1.43 KB | W: | H:

static/icon/diy_icon_editor_default.png

901 Bytes | W: | H:

static/icon/diy_icon_editor_default.png
static/icon/diy_icon_editor_default.png
static/icon/diy_icon_editor_default.png
static/icon/diy_icon_editor_default.png
  • 2-up
  • Swipe
  • Onion skin
static/icon/diy_icon_editor_pressed.png
static/icon/diy_icon_editor_pressed.png

1.41 KB | W: | H:

static/icon/diy_icon_editor_pressed.png

882 Bytes | W: | H:

static/icon/diy_icon_editor_pressed.png
static/icon/diy_icon_editor_pressed.png
static/icon/diy_icon_editor_pressed.png
static/icon/diy_icon_editor_pressed.png
  • 2-up
  • Swipe
  • Onion skin
static/icon/diy_icon_on_default.png
static/icon/diy_icon_on_default.png

948 Bytes | W: | H:

static/icon/diy_icon_on_default.png

533 Bytes | W: | H:

static/icon/diy_icon_on_default.png
static/icon/diy_icon_on_default.png
static/icon/diy_icon_on_default.png
static/icon/diy_icon_on_default.png
  • 2-up
  • Swipe
  • Onion skin
static/icon/diy_icon_remove_normal.png
static/icon/diy_icon_remove_normal.png

2.22 KB | W: | H:

static/icon/diy_icon_remove_normal.png

1.11 KB | W: | H:

static/icon/diy_icon_remove_normal.png
static/icon/diy_icon_remove_normal.png
static/icon/diy_icon_remove_normal.png
static/icon/diy_icon_remove_normal.png
  • 2-up
  • Swipe
  • Onion skin
static/icon/diy_icon_up_default.png
static/icon/diy_icon_up_default.png

943 Bytes | W: | H:

static/icon/diy_icon_up_default.png

553 Bytes | W: | H:

static/icon/diy_icon_up_default.png
static/icon/diy_icon_up_default.png
static/icon/diy_icon_up_default.png
static/icon/diy_icon_up_default.png
  • 2-up
  • Swipe
  • Onion skin
static/icon/home-f.png
static/icon/home-f.png

1.21 KB | W: | H:

static/icon/home-f.png

294 Bytes | W: | H:

static/icon/home-f.png
static/icon/home-f.png
static/icon/home-f.png
static/icon/home-f.png
  • 2-up
  • Swipe
  • Onion skin
static/icon/home-o.png
static/icon/home-o.png

1.19 KB | W: | H:

static/icon/home-o.png

232 Bytes | W: | H:

static/icon/home-o.png
static/icon/home-o.png
static/icon/home-o.png
static/icon/home-o.png
  • 2-up
  • Swipe
  • Onion skin
static/icon/icon_close.png
static/icon/icon_close.png

1.55 KB | W: | H:

static/icon/icon_close.png

725 Bytes | W: | H:

static/icon/icon_close.png
static/icon/icon_close.png
static/icon/icon_close.png
static/icon/icon_close.png
  • 2-up
  • Swipe
  • Onion skin
static/image/icon_confirm.png
static/image/icon_confirm.png

1014 Bytes | W: | H:

static/image/icon_confirm.png

701 Bytes | W: | H:

static/image/icon_confirm.png
static/image/icon_confirm.png
static/image/icon_confirm.png
static/image/icon_confirm.png
  • 2-up
  • Swipe
  • Onion skin
static/image/icon_hot_default.png
static/image/icon_hot_default.png

2.04 KB | W: | H:

static/image/icon_hot_default.png

1.14 KB | W: | H:

static/image/icon_hot_default.png
static/image/icon_hot_default.png
static/image/icon_hot_default.png
static/image/icon_hot_default.png
  • 2-up
  • Swipe
  • Onion skin
static/image/icon_hot_pressed.png
static/image/icon_hot_pressed.png

2.15 KB | W: | H:

static/image/icon_hot_pressed.png

1.27 KB | W: | H:

static/image/icon_hot_pressed.png
static/image/icon_hot_pressed.png
static/image/icon_hot_pressed.png
static/image/icon_hot_pressed.png
  • 2-up
  • Swipe
  • Onion skin
static/image/icon_new_default.png
static/image/icon_new_default.png

2.09 KB | W: | H:

static/image/icon_new_default.png

1.14 KB | W: | H:

static/image/icon_new_default.png
static/image/icon_new_default.png
static/image/icon_new_default.png
static/image/icon_new_default.png
  • 2-up
  • Swipe
  • Onion skin
static/image/icon_new_pressed.png
static/image/icon_new_pressed.png

2.26 KB | W: | H:

static/image/icon_new_pressed.png

1.23 KB | W: | H:

static/image/icon_new_pressed.png
static/image/icon_new_pressed.png
static/image/icon_new_pressed.png
static/image/icon_new_pressed.png
  • 2-up
  • Swipe
  • Onion skin
static/image/remind_picture.png
static/image/remind_picture.png

40.9 KB | W: | H:

static/image/remind_picture.png

10.8 KB | W: | H:

static/image/remind_picture.png
static/image/remind_picture.png
static/image/remind_picture.png
static/image/remind_picture.png
  • 2-up
  • Swipe
  • Onion skin
util/Env.js
......@@ -13,12 +13,10 @@ const baseApi = {
release: "https://tprint.colorpark.cn",
};
const baseURL = baseApi[accountInfo.miniProgram.envVersion]
//console.log(accountInfo.miniProgram.envVersion)
//console.log(baseURL)
const Env = {
getDevBaseURL: () => baseURL,
getBaseURL: () => baseURL,
getmachineId: () => '100055', //线上100086 //测试 422001' //100086 //100055
getmachineId: () => '100055', //线上111001
getappcode: () => 'lite',
getmalltext: () => "色彩公园Lite",
getAppID: () => "wx1c777ee874c39b0b",
......@@ -27,7 +25,5 @@ const Env = {
getappId: () => "wx55b5b6d95c648041",
//getenvVersion: () => "trial",
getenvVersion: () => "release",
}
export default Env
\ No newline at end of file
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/request.js
......@@ -10,14 +10,14 @@ request.interceptors.request.use((config, promise) => {
//超时设置
if (config._timeout) config.timeout = 60000;
//从环境变量中取 BASE_UR
console.log(process)
//console.log(process)
if (process.env.NODE_ENV === 'development') config.baseURL = Env.getDevBaseURL()
else config.baseURL = Env.getBaseURL()
//JSON格式化，未指定时，默认true
config.parseJson = $n._isNotNull(config.parseJson) ? config.parseJson : true
// 如指定_token == true，则在headers中跟上相关token信息
if (config._token) config.headers['token'] = store.getters.appUser.token;
console.warn('####### API Request: ', config)
//console.warn('####### API Request: ', config)
return config
})
......@@ -41,7 +41,7 @@ request.interceptors.response.use(
},
(error, promise) => {
let msg = $n._caseValue(error.code, 0, '网络连接异常', 1, '网络连接超时', 401, '请求服务未授权', error.msg)
console.error('####### API Response error: ', error)
//console.error('####### API Response error: ', error)
if (error.status == 401 ) {
uni.showModal({
title: '',
......@@ -60,8 +60,6 @@ request.interceptors.response.use(
})
} else return promise.reject(msg)
},
)
export default request
\ No newline at end of file
util/script.js 0 → 100644
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)
}
})
};
//随机数字
function signNRandom() {
const Rand = Math.random()
const mineId = Math.round(Rand * 100000000000000)
return mineId;
};
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
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment