Commit aa2ffcc4 by huahua

提交

parent 6de8d270
......@@ -104,24 +104,24 @@
"navigationBarTitleText": "查看尺码"
}
},
{
/* {
"path": "self_help_payment_details",
"style": {
"navigationBarTitleText": "打印"
}
},
{
}, */
/* {
"path": "self_help_payment_details_new",
"style": {
"navigationBarTitleText": "打印"
}
},
{
}, */
/* {
"path": "nothingmachineid",
"style": {
"navigationBarTitleText": "手机壳打印"
}
},
}, */
{
"path": "goodsordersize",
"style": {
......
<template>
<view class="full-width content-color full-height" style="overflow: hidden;">
<!-- 自定义头部 -->
<myhead :worksid="works_id" :title="titlename" :color="'#61D119'" :titleShow="true" :backShow="true" :background="'#131319'"></myhead>
<myhead :worksid="works_id" :title="titlename" :color="'#61D119'" :titleShow="true" :backShow="true"
:background="'#131319'"></myhead>
<!-- 登录弹框 -->
<Signin ref="Signin"></Signin>
<!-- 裁剪图片 -->
<view class="full-width content-color full-height" style="background: black;c" v-show="state">
<kps-image-cutter @ok="onok" @cancel="oncancle" ref="index" :fixed="false" :properties="properties"></kps-image-cutter>
<kps-image-cutter @ok="onok" @cancel="oncancle" ref="index" :fixed="false"
:properties="properties"></kps-image-cutter>
</view>
<!-- 设计区域 -->
<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="container" :style="{height: data.windowHeight + 'px'}" @touchmove.stop="touchMove" @touchend.stop="touchEnd" @click.stop="itemCancel">
<view class="full-width full-height" style="position: absolute; top: 0; left: 0;" @click.stop="itemCancel">
</view>
<view class="container" :style="{height: data.windowHeight + 'px'}" @touchmove.stop="touchMove"
@touchend.stop="touchEnd" @click.stop="itemCancel">
<!-- 辅助线 -->
<view v-if="guide_left" style="border-left: 1px dashed #61D119;position: absolute; height: 100%; z-index: 999; left: calc(50% - 0.5px);"></view>
<view v-if="guide_left"
style="border-left: 1px dashed #61D119;position: absolute; height: 100%; z-index: 999; left: calc(50% - 0.5px);">
</view>
<view :style="{width: data.bgWidth +'px',height: data.editorHeight +'px'}" style="position: relative;">
<!-- 辅助线 -->
<view v-if="guide_top"
style="width: 100%; border-top: 1px dashed #61D119;position: absolute; z-index: 999;"
......@@ -42,10 +48,10 @@
</view>
<!-- 白底图 -->
<view
<view
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',background: (background_color && background_color != 'none' && background_color != null ) ? background_color : '#fff'}"
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 0; ">
</view>
</view>
<view
:style="{'margin-top': (data.editorHeight * (1 - mix_scale) / 2) +'px',width: data.editorWidth * mix_scale +'px',height: data.editorHeight * mix_scale +'px','mask-image':shape_image ? 'url(' + shape_image + ')' : 'none', '-webkit-mask-image':shape_image ? 'url(' + shape_image + ')' : 'none',}"
......@@ -91,46 +97,48 @@
</view>
</block>
</view>
<!-- 手机壳图 -->
<image :src="data.bgImage + '?x-oss-process=image/resize,lfit,w_400' " mode=""
@load="loadbgImage"
style="position: absolute;
@load="loadbgImage" style="position: absolute;
z-index: 9;
top: 0px;
bottom: 0;
left: 0px;
right: 0px;
margin: auto;"
:style="{width: (data.editorWidth ) +'px',height: (data.editorHeight ) +'px', visibility : !isCustomize ? 'visible' : 'hidden' }">
margin: auto;" :style="{width: (data.editorWidth ) +'px',height: (data.editorHeight ) +'px', visibility : !isCustomize ? 'visible' : 'hidden' }">
</image>
<!-- 旧——手机壳图 -->
<image :animation="translateHide "
:src="data.bgImage + '?x-oss-process=image/resize,lfit,w_400'" mode="" @load="loadbgImage" @error="loadbgImageError" v-if="!isCustomize"
:src="data.bgImage + '?x-oss-process=image/resize,lfit,w_400'" mode="" @load="loadbgImage"
@error="loadbgImageError" v-if="!isCustomize"
style="position: absolute;z-index: 10;top: 0px; bottom: 0; left: 0px; right: 0;margin: auto"
:style="{width: (data.editorWidth + 1 ) +'px',height: (data.editorHeight +1) +'px'}">
</image>
<image :animation="translateHide "
:src="data.bgImage + '?x-oss-process=image/resize,lfit,w_400'" mode="" @load="loadbgImage" @error="loadbgImageError" v-if="!isCustomize"
:src="data.bgImage + '?x-oss-process=image/resize,lfit,w_400'" mode="" @load="loadbgImage"
@error="loadbgImageError" v-if="!isCustomize"
style="position: absolute;z-index: 11;top: 0px; bottom: 0; left: 0px; right: 0;margin: auto"
:style="{width: (data.editorWidth + 1 ) +'px',height: (data.editorHeight+1 ) +'px'}">
</image>
<image :animation="translateHide "
:src="data.bgImage + '?x-oss-process=image/resize,lfit,w_400'" mode="" @load="loadbgImage" @error="loadbgImageError" v-if="!isCustomize"
:src="data.bgImage + '?x-oss-process=image/resize,lfit,w_400'" mode="" @load="loadbgImage"
@error="loadbgImageError" v-if="!isCustomize"
style="position: absolute;z-index: 12;top: 0px; bottom: 0; left: 0px; right: 0;margin: auto"
:style="{width: (data.editorWidth + 1 ) +'px',height: (data.editorHeight+1 ) +'px'}">
</image>
<image :animation="translateHide "
:src="data.bgImage + '?x-oss-process=image/resize,lfit,w_400'" mode="" @load="loadbgImage" @error="loadbgImageError" v-if="!isCustomize"
:src="data.bgImage + '?x-oss-process=image/resize,lfit,w_400'" mode="" @load="loadbgImage"
@error="loadbgImageError" v-if="!isCustomize"
style="position: absolute;z-index: 13;top: 0px; bottom: 0; left: 0px; right: 0;margin: auto"
:style="{width: (data.editorWidth + 1) +'px',height: (data.editorHeight +1 ) +'px'}">
</image>
</view>
<!-- 操作列表 ,top: editory +'px' v-if="editory" front_image_long-->
<view v-if="front_image_long" :class="['operate-list', { 'list-active': data.listActive == true }]"
style="z-index: 10;" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}">
......@@ -229,10 +237,11 @@
<!-- 图片旋转 -->
<view v-if="item.activescale"
:class="[item.typetext =='rotate' ? 'rotate-red' : 'rotate']"
style="transform-origin:center;" :style="{transform: item.typetext =='rotate' ? 'scale(' + item.oScale * 1.5 + ')' : 'scale(' + item.oScale + ')',
top: item.height + 20 - (28 - 28*(item.typetext == 'rotate' ? item.oScale * 1.5 : item.oScale))/2 + 'px'}"
:data-id='item.id' @touchstart.stop.prevent='rotateStart'
@touchmove.stop.prevent='rotateMove' @touchend.stop.prevent='rotateEnd'>
style="transform-origin:center;"
:style="{transform: item.typetext =='rotate' ? 'scale(' + item.oScale * 1.5 + ')' : 'scale(' + item.oScale + ')',
top: item.height + 20 - (28 - 28*(item.typetext == 'rotate' ? item.oScale * 1.5 : item.oScale))/2 + 'px'}" :data-id='item.id'
@touchstart.stop.prevent='rotateStart' @touchmove.stop.prevent='rotateMove'
@touchend.stop.prevent='rotateEnd'>
</view>
<!-- 辅助线 -->
<view v-if="item.activeguide" style="border-left: 1px dashed #61D119;
......@@ -262,9 +271,10 @@
{{data.itemList[data.cidx].content}}
</view>
</view>
<image :src="upLoadImageUrl" mode="scaleToFill" @load="upLoadIImageLoad" @error="upLoadIImageLoadErr"></image>
<image :src="upLoadImageUrl" mode="scaleToFill" @load="upLoadIImageLoad"
@error="upLoadIImageLoadErr"></image>
</view>
<view v-if="!guide_left"
style="position: fixed; left:12upx; font-size: 25upx; color: #FFFFFF; bottom: 260upx;opacity: 0;">
<view>{{drag_text_context}}</view>
......@@ -287,7 +297,8 @@
<!-- 图片提示 -->
<view v-if="showone">
<view style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
<view
style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
@click.stop="showone = !showone"></view>
<view style="position: fixed; background: #FFFFFF; top:calc((100% - 621upx) / 2); left:calc((100% - 560upx) / 2);
z-index:1000; width: 560upx; min-height: 621upx; border-radius: 12upx;">
......@@ -305,7 +316,7 @@
color: #FFFFFF; text-align: center; line-height: 82upx; margin: 46upx auto 46upx; ">好的</view>
</view>
</view>
<!-- 进度条 -->
<view v-if="percent > 0 && percent < 100"
style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;">
......@@ -315,7 +326,7 @@
<ProgressBar :Width="percent" Type="candy"></ProgressBar>
</view>
</view>
<!-- 菜单栏目 -->
<!-- <view v-if="!active && !guide_left" class="toolRight" >
<view class="tool_li" @click="selectPicturePop()" style="margin-top: 22upx;">
......@@ -335,30 +346,29 @@
<image @click="cancel('share')" class="tool_li_img"
src="../../static/icon_diy_ai.png" mode="aspectFit" style="width: 50upx;height: 50upx;"></image>
<view class="tool_li_text">优化图片</view>
</view>
</view>
</view> -->
<view v-if="!active && !guide_left" class="toolRight" >
<view class="tool_li" @click="selectPicturePop()" >
<image class="tool_li_img" src="../../static/icon_make_diy_back_color.png"
mode="aspectFit"></image>
<view class="tool_li_text">上传相片</view>
</view>
<view class="tool_li" @click="showPopup(3)">
<image class="tool_li_img" src="../../static/icon/icon_typeface.png" mode="aspectFit"></image>
<view class="tool_li_text">添加文字</view>
</view>
<view class="tool_li" @click="showPopup(2)">
<view v-if="!active && !guide_left" class="toolRight">
<view class="tool_li" @click="selectPicturePop()">
<image class="tool_li_img" src="../../static/icon_make_diy_back_color.png" mode="aspectFit"></image>
<view class="tool_li_text">上传相片</view>
</view>
<view class="tool_li" @click="showPopup(3)">
<image class="tool_li_img" src="../../static/icon/icon_typeface.png" mode="aspectFit"></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="aspectFit"></image>
<view class="tool_li_text">推荐图片</view>
</view>
<view class="tool_li" @click="showAiChange()">
<image @click="cancel('share')" class="tool_li_img"
src="../../static/icon_diy_ai.png" mode="aspectFit"></image>
<view class="tool_li_text">优化图片</view>
</view>
<view class="tool_li_text">推荐图片</view>
</view>
<view class="tool_li" @click="showAiChange()">
<image @click="cancel('share')" class="tool_li_img" src="../../static/icon_diy_ai.png"
mode="aspectFit"></image>
<view class="tool_li_text">优化图片</view>
</view>
</view>
<tuya ref="tuya" @tuyaimg="tuyaimg"></tuya>
<!-- 编辑文字跟图片按钮 -->
......@@ -367,44 +377,46 @@
<view style="width: 100%;height: 130upx; display: flex; flex-direction: row;justify-content: flex-end ">
<!-- 点击画布区域取消聚焦 -->
<view style="width: 110upx;height: 60upx;margin-right: 0upx;" @click.stop="itemCancel">
<view style="width: 110upx;height: 60upx;margin-right: 0upx;" @click.stop="itemCancel">
<image style="width: 52upx; height: 70upx;margin-top: 15upx; "
src="../../static/icon_confirm.png" mode="aspectFit"></image>
</view>
</view>
<!-- AI图像 -->
<view v-if="data.itemList.length > 0 && data.itemList[data.cidx].type == 1" style="width: 110upx;margin-right: 10upx;">
<view v-if="data.itemList.length > 0 && data.itemList[data.cidx].type == 1"
style="width: 110upx;margin-right: 10upx;">
<view style="height: 52upx;width: 100%;margin-left: 25upx;" @click="showPopup(4)">
<image class="tool_li_img" style="width: 50upx; height: 44upx; "
src="../../static/icon/diy_icon_editor_default.png" mode="aspectFit" ></image>
<image class="tool_li_img" style="width: 50upx; height: 44upx;"
src="../../static/icon/diy_icon_editor_default.png" mode="aspectFit"></image>
</view>
<view style="text-align: center;
<view style="text-align: center;
color: #FFFFFF;
font-size: 22upx; width: 100upx;">编辑</view>
</view>
</view>
<view v-if="data.itemList.length > 0" style="width: 120upx; height: 100%;
display: flex; flex-direction: column;">
<view style="height: 52upx; margin-left: 19upx;" @click="showAiChange()">
<image class="tool_li_img" style="width: 44upx;height: 44upx; margin-left: 17upx;"
src="../../static/icon_diy_ai.png" mode="aspectFit" ></image>
src="../../static/icon_diy_ai.png" mode="aspectFit"></image>
</view>
<view style="text-align: right;
<view style="text-align: right;
color: #FFFFFF;
font-size: 22upx; width: 100upx;">优化图片</view>
</view>
</view>
</view>
<view v-if="!active && !guide_left " @click="topagecategory(0)"
<view v-if="!active && !guide_left" @click="topagecategory(0)"
style="z-index: 99;position: fixed; left: 12upx; top: 160upx;">
<image style="width: 115upx; height: 140upx; display: block; margin: auto;"
src="../../static/qiehuan.png" mode=""></image>
</view>
<!-- v-if="data.itemList.length > 0 && !guide_left" -->
<view class="toolLeft" style=" z-index: 99; top: 325upx; width: 80upx; margin-left: 4upx;" @click.stop="removedeleteItem">
<!-- v-if="data.itemList.length > 0 && !guide_left" -->
<view class="toolLeft" style=" z-index: 99; top: 325upx; width: 80upx; margin-left: 4upx;"
@click.stop="removedeleteItem">
<image style=" width: 48upx;
height: 48upx;
display: block;
......@@ -414,21 +426,8 @@
font-size: 18upx;
margin-top: 8upx;">移除图片</view>
</view>
<!-- <view class="toolLeft" style="margin-left: 10upx; margin-top: 110upx"
v-if="(background_color && background_color != 'none') && (surface_type == 0 || surface_type == 2) && !guide_left"
@click.stop="eliminateBackgroundColor()">
<image style="width: 50upx;
height: 50upx;
display: block;
margin: auto;" src="../../static/diy_icon_replace_default.png" mode=""></image>
<view style="text-align: center;
color: #F56364;
font-size: 20upx;
margin-top: 10upx;">清空底色</view>
</view>
-->
<view v-if="!guide_left" class="toolBottom" >
<view v-if="!guide_left" class="toolBottom">
<view @click.stop="createWorks" hover-class="hover-class-bg"
:class="['tool_add',available == 0 ? 'grey' : '']"> {{createWorkstext}} </view>
</view>
......@@ -443,7 +442,7 @@
</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'}">
......@@ -462,13 +461,13 @@
</view>
<!-- 贴图、模板形状 -->
<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'}">
class="uni-share full-width" :style="{height: data.windowHeight +'px'}">
<!-- 遮罩 -->
<view style="position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; z-index: 997; opacity: 0.8;"
@click="cancel('share')"/>
<!-- <view style="position: absolute; bottom: 0upx; left: 0; height: 100%; width: calc(100% - 120upx); z-index: 998; background: linear-gradient(0deg, #1B294F, #4E2761, #E73231); opacity: 0.8;"></view> -->
<view
style="
style="position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; z-index: 997; opacity: 0.8;"
@click="cancel('share')" />
<!-- <view style="position: absolute; bottom: 0upx; left: 0; height: 100%; width: calc(100% - 120upx); z-index: 998; background: linear-gradient(0deg, #1B294F, #4E2761, #E73231); opacity: 0.8;"></view> -->
<view style="
position: absolute;
bottom: 0upx;
left: 0;
......@@ -478,17 +477,17 @@
background: #1A1D33;
overflow: hidden;">
<view style="width: 120upx; height: 188upx;">
<view :style="{ height: headheight + 'px'}" style="width: 100%;">
<view class="back" @click="cancel('share')">
<image src="../../static/recommend/icon_back.png" mode="aspectFit" style="width: 42upx; height: 42upx;
<view :style="{ height: headheight + 'px'}" style="width: 100%;">
<view class="back" @click="cancel('share')">
<image src="../../static/recommend/icon_back.png" mode="aspectFit" style="width: 42upx; height: 42upx;
margin-left: 20upx;" :style="{ marginTop: menuButtonInfoTop + 10 + 'px'}"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 一级分类 -->
<view style="width: 120upx;" :style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}"
<!-- 一级分类 -->
<view style="width: 120upx;" :style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}"
v-if="e_active == 2 || e_active == 23 || e_active == 99">
<scroll-view class="scroll-container"
:style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}" scroll-y
......@@ -497,8 +496,8 @@
:style="{background: index == currentId ? '#282932':''}"
v-for="(item, index) in brands" :key="index" @tap="handleScroll(index,item)">
<image
style="width: 60upx; height: 60upx; display: block;margin:auto; padding: 18upx;"
:src="index == currentId ? item.icon_click : item.icon" mode="aspectFill">
style="width: 60upx; height: 60upx; display: block;margin:auto; padding: 18upx;"
:src="index == currentId ? item.icon_click : item.icon" mode="aspectFill">
</image>
</view>
</scroll-view>
......@@ -615,51 +614,57 @@
<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 style="font-size: 30upx;color:#333; width:100%;text-align: center;margin: auto;">
选中的图片必须带有清晰人物头像</view>
</view>
</uni-popup>
<view v-if="isShowPop"
style="z-index: 999999; width: 100%;background: #55ff7f; height: 100%; position: absolute; top: 0upx; left: 0upx" :style="{height: data.windowHeight +'px'}">
<view class="uni-share full-width" :style="{height: data.windowHeight +'px'}" style="background: #fff;">
<view style="position: absolute; bottom: 0upx; left: 0;height: 100%; width: 120upx; z-index: 7; overflow: hidden;">
<view style="width: 120upx; height: 190upx;">
<view :style="{ height: headheight + 'px'}" style="width: 100%; z-index: 9999;">
<view class="back" @tap="cancel('share')">
<image src="../../static/recommend/icon_back.png" mode="aspectFit" style="width: 42upx; height: 42upx;
<view v-if="isShowPop"
style="z-index: 999999; width: 100%;background: #55ff7f; height: 100%; position: absolute; top: 0upx; left: 0upx"
:style="{height: data.windowHeight +'px'}">
<view class="uni-share full-width" :style="{height: data.windowHeight +'px'}" style="background: #fff;">
<view
style="position: absolute; bottom: 0upx; left: 0;height: 100%; width: 120upx; z-index: 7; overflow: hidden;">
<view style="width: 120upx; height: 190upx;">
<view :style="{ height: headheight + 'px'}" style="width: 100%; z-index: 9999;">
<view class="back" @tap="cancel('share')">
<image src="../../static/recommend/icon_back.png" mode="aspectFit" style="width: 42upx; height: 42upx;
margin-left: 20upx;" :style="{ marginTop: menuButtonInfoTop + 10 + 'px'}"></image>
</view>
</view>
</view>
</view>
</view>
<view style="width: 112upx; padding-left: 8upx;" :style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}">
<scroll-view class="scroll-container"
:style="{height: (data.windowHeight - 160 * data.pixelRate) +'px'}" scroll-y
scroll-with-animation v-if="brandList.length > 0" >
<view :id="'s' + index" style="height: 140upx;"
:class="[index == brandCurrentId ? 'scroll-item-select' : 'scroll-item-no-select']"
v-for="(item, index) in brandList" :key="index" @tap="brandclick(index,item)" >
<image
style="width: 60upx; height: 100upx; display: block;margin:auto; padding: 18upx;"
:src="item.icon" mode="aspectFit">
</image>
<view style="width: 112upx; padding-left: 8upx;"
:style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}">
<scroll-view class="scroll-container"
:style="{height: (data.windowHeight - 160 * data.pixelRate) +'px'}" scroll-y
scroll-with-animation v-if="brandList.length > 0">
<view :id="'s' + index" style="height: 140upx;"
:class="[index == brandCurrentId ? 'scroll-item-select' : 'scroll-item-no-select']"
v-for="(item, index) in brandList" :key="index" @tap="brandclick(index,item)">
<image
style="width: 60upx; height: 100upx; display: block;margin:auto; padding: 18upx;"
:src="item.icon" mode="aspectFit">
</image>
</view>
</scroll-view>
</view>
</scroll-view>
</view>
</view>
<view style="position: absolute; bottom: 0upx; left: 116upx; height: 100%; width: 100%;z-index: 8; overflow: hidden; ">
<view style="width: calc(100% - 150upx); height: calc(100% - 180upx); position: relative; overflow: hidden;
</view>
<view
style="position: absolute; bottom: 0upx; left: 116upx; height: 100%; width: 100%;z-index: 8; overflow: hidden; ">
<view style="width: calc(100% - 150upx); height: calc(100% - 180upx); position: relative; overflow: hidden;
border: 5upx solid #61D119; margin-top: 140upx; margin-right: 10upx;">
<veiw>
<scroll-view scroll-y style="width:100%; margin: auto; height:calc(100% - 50upx); overflow: hidden; margin-top: 10upx;">
<view style="float: left; width: calc(100% / 4); margin: 5upx 0 5upx; "
v-for="(item, index) in datalist" :key="index" @click="modeDetail(item)">
<view style="width: 135upx; height: 255upx; margin: auto; position: relative;">
<view style="display: flex;flex-direction: column;">
<image
style="width: 132upx; height: 175upx; margin: auto; border-radius: 14px; overflow: hidden;"
:src="item.goods_pic + '?x-oss-process=image/resize,lfit,w_112'"
mode="aspectFit"></image>
<text style="
<veiw>
<scroll-view scroll-y
style="width:100%; margin: auto; height:calc(100% - 50upx); overflow: hidden; margin-top: 10upx;">
<view style="float: left; width: calc(100% / 4); margin: 5upx 0 5upx; "
v-for="(item, index) in datalist" :key="index" @click="modeDetail(item)">
<view style="width: 135upx; height: 255upx; margin: auto; position: relative;">
<view style="display: flex;flex-direction: column;">
<image
style="width: 132upx; height: 175upx; margin: auto; border-radius: 14px; overflow: hidden;"
:src="item.goods_pic + '?x-oss-process=image/resize,lfit,w_112'"
mode="aspectFit"></image>
<text style="
margin-top: 3upx;
text-align: center;
font-size: 24upx;
......@@ -667,43 +672,46 @@
font-weight:bold;
word-break: break-word;
white-space: normal">{{item.name}}</text>
</view>
</view>
</view>
<view class="align-center"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
v-if="datalist.length == 0">
<span class="iconfont icon-wushuju"
style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
<view style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">啊嘞,还是一片荒漠
</view>
</view>
</scroll-view>
</veiw>
</view>
<view style="position: absolute;
</view>
</view>
</view>
<view class="align-center"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
v-if="datalist.length == 0">
<span class="iconfont icon-wushuju"
style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
<view
style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">
啊嘞,还是一片荒漠
</view>
</view>
</scroll-view>
</veiw>
</view>
<view style="position: absolute;
bottom: 0upx;
left: 0;
height: 100%;
width: 5upx;
z-index: 9;
overflow: hidden;">
<view style="width: 10upx; margin-top: 190upx; " :style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}">
<scroll-view class="scroll-container"
:style="{height: (data.windowHeight - 160 * data.pixelRate) +'px'}" scroll-y
scroll-with-animation v-if="brandList.length > 0" >
<view :id="'s' + index" style="height: 140upx;"
:class="[index == brandCurrentId ? 'scroll-item-buttom-select' : 'scroll-item-buttom-no-select']"
v-for="(item, index) in brandList" :key="index" @tap="brandclick(index,item)" >
<view style="width: 10upx; margin-top: 190upx; "
:style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}">
<scroll-view class="scroll-container"
:style="{height: (data.windowHeight - 160 * data.pixelRate) +'px'}" scroll-y
scroll-with-animation v-if="brandList.length > 0">
<view :id="'s' + index" style="height: 140upx;"
:class="[index == brandCurrentId ? 'scroll-item-buttom-select' : 'scroll-item-buttom-no-select']"
v-for="(item, index) in brandList" :key="index" @tap="brandclick(index,item)">
</view>
</scroll-view>
</view>
</scroll-view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
......@@ -728,7 +736,9 @@
import firework from '@/components/ay-firework/firework.vue'; //礼花
import bgColor from './components/bgColor.vue'; //手机壳颜色
import client from '../../util/script.js' // 封装全局变量
import {Base64} from "js-base64"
import {
Base64
} from "js-base64"
import CryptoJS from 'crypto-js';
/*** 色彩公园图片 DIY 功能页*/
......@@ -741,7 +751,7 @@
var snapshotIndex = -1;
var infoListTouchEvent = new WxTouchEvent(); //在 Page外实例化函数,可以直接复制给 Page 中的回调函数
var isclick = true
export default {
components: {
uniPopup,
......@@ -756,7 +766,7 @@
firework,
bgColor,
tuya,
isShowPop:false
isShowPop: false
},
computed: {},
data() {
......@@ -942,19 +952,19 @@
history_bannerList: [], //历史作品banner
baseSetting: null, //获取开关信息
loadImageFailCount: 0,
brandList:[],
coupon: null, //优惠劵
brandList: [],
coupon: null, //优惠劵
sizetext_id: "",
sizetext: "",
sizestock: "",
channel_no: "",
dict_id: "",
goods_id_e:{},
datalist:[],
isShowPop:false,
goods_id_e: {},
datalist: [],
isShowPop: false,
brandCurrentId: 0,
upLoadImageUrl:"",
menuButtonInfoTop:0
upLoadImageUrl: "",
menuButtonInfoTop: 0
};
},
......@@ -966,17 +976,17 @@
},
methods: {
upLoadIImageLoadErr(e){
upLoadIImageLoadErr(e) {
uni.showToast({
title: '上传失败',
icon: 'none',
duration: 3000
})
},
upLoadIImageLoad(e) {
if(this.upLoadImageUrl == "" || this.upLoadImageUrl == null ){
if (this.upLoadImageUrl == "" || this.upLoadImageUrl == null) {
return;
}
uni.showToast({
......@@ -986,8 +996,8 @@
})
var id = e.currentTarget.dataset.id;
var image = {
width : e.detail.width,
height: e.detail.height
width: e.detail.width,
height: e.detail.height
}
let width = 0
let height = 0
......@@ -995,18 +1005,18 @@
let lef = 0
let ratio = image.width / image.height
let ratiowidth = (this.data.editorWidth * this.mix_scale) / image.width
let ratioheight = (this.data.editorHeight * this.mix_scale) /image.height
let ratioheight = (this.data.editorHeight * this.mix_scale) / image.height
//if (ratio >= 1) { //长方形
//width = this.data.editorWidth * this.mix_scale * resultmix_scale
//height = image.height * ratiowidth * resultmix_scale
//} else if (ratio < 1) { //长高方形
height = this.data.editorHeight * this.mix_scale
width = image.width * ratioheight
height = this.data.editorHeight * this.mix_scale
width = image.width * ratioheight
//}
//width = this.data.editorWidth * this.mix_scale
//height = image.height * ratiowidth
if (height / 2 > this.editor_top) {
width = width * (this.editor_top * 2 / height)
width = width * (this.editor_top * 2 / height)
height = this.editor_top * 2
}
this.isShowGif = true;
......@@ -1061,14 +1071,14 @@
this.isUpLoadImage = false;
this.saveSnapshot();
},
brandclick(index,item) {
brandclick(index, item) {
this.brandCurrentId = index
item.machine_id = this.machine_id
this.open(item)
},
open(item) {
open(item) {
this.machine_id = item.machine_id
homeservice.queryList({
s: 'Product.getBrandProducts', //新接口
......@@ -1085,8 +1095,8 @@
icon: 'none'
});
});
},
},
modeDetail(item) {
this.brandsitem = item
homeservice.queryList({
......@@ -1103,16 +1113,18 @@
goods_id: this.brandsitem.id, // 产品id
dict_id: result.dict_id, // 产品属性
}
this.goodsbrands({goods_id_e: this.goods_id_e})
this.goodsbrands({
goods_id_e: this.goods_id_e
})
}).catch(err => {
});
},
cancelshowBrandShare(){
this.$refs["showBrandShare"].close();
cancelshowBrandShare() {
this.$refs["showBrandShare"].close();
},
/**
* 读取图片失败操作
* @param e object 事件
......@@ -1129,7 +1141,7 @@
//显示Ai转换
showAiChange() {
if(this.data == null ){
if (this.data == null) {
uni.showToast({
icon: "none",
title: "上传人物图片",
......@@ -1137,25 +1149,26 @@
});
return
}
if(this.data.itemList == null || this.data.itemList.length == 0){
if (this.data.itemList == null || this.data.itemList.length == 0) {
uni.showToast({
icon: "none",
title: "上传人物图片",
duration: 2000
});
return
}
if(this.data.itemList[this.data.itemList.length-1].type == 0 && this.data.itemList[this.data.itemList.length-1].isUpLoadImage){
this.selectChangeType = 1;
this.$refs["showAiChange"].open();
}else{
}
if (this.data.itemList[this.data.itemList.length - 1].type == 0 && this.data.itemList[this.data.itemList
.length - 1].isUpLoadImage) {
this.selectChangeType = 1;
this.$refs["showAiChange"].open();
} else {
uni.showToast({
icon: "none",
title: "Ai必须是上传图片类型",
duration: 2000
});
}
}
},
showAiChangeType(type) {
......@@ -1188,7 +1201,8 @@
if (res.statusCode === 200) {
that.uploadToTempOss(result.Data, res.tempFilePath, ".jpg",
function(resultImage) {
client.callRecognizeBankCard(resultImage, wx, that.selectChangeType,
client.callRecognizeBankCard(resultImage, wx, that
.selectChangeType,
function(result) {
uni.hideLoading();
if (result.Code) {
......@@ -1200,7 +1214,8 @@
} else {
if (result.Data) {
let imageURL = result.Data.ImageURL;
imageURL = imageURL.replace("http:","https:")
imageURL = imageURL.replace("http:",
"https:")
if (!item.isChangeAi) {
item.contentOld = item.content;
}
......@@ -1211,8 +1226,8 @@
}
that.$refs["showAiChange"].close();
}.bind(this));
}
);
}
);
}
}
})
......@@ -1257,7 +1272,8 @@
//使用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);
let formDataParams = this.getFormDataParams(ossStsToken.AccessKeyId, ossStsToken.AccessKeySecret,
ossStsToken.SecurityToken);
const signature = formDataParams.signature;
const ossAccessKeyId = ossStsToken.AccessKeyId;
const policy = formDataParams.policy;
......@@ -1375,32 +1391,32 @@
content: e, // 图片地址
top: this.editor_top - this.data.editorHeight / 2, // 初始图片Y坐标,根据画布高/2-图片高/2
left: this.data.editorWidth / 2 - this.data.editorWidth / 2, // 初始图片X坐标,因为div是相对定位,所以计算是要多减一次移动的距离
x: this.data.editorWidth / 2, // 初始圆心位置,可再downImg之后又宽高和初始的图片位置得出
x: this.data.editorWidth / 2, // 初始圆心位置,可再downImg之后又宽高和初始的图片位置得出
y: this.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
angle: 0, // 旋转角度
rotate: 0, // 旋转值
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
angle: 0, // 旋转角度
rotate: 0, // 旋转值
active: false, // 判定点击状态
width: this.data.editorWidth, // 预设生成图片的宽度
width: this.data.editorWidth, // 预设生成图片的宽度
height: this.data.editorHeight, // 预设生成图片的高度
rScale: 1, // 图片原始缩放比例
// 新增加默认属性
activeguide: false, // 开启辅助线
activescale: false, // 开启旋转状态
activehorn: false, // 开启角状态
activeedge: false, // 开启边状态
initialScale: 1, // 图片缩放比例
initialscaling: 1, // 图片初始时缩放比例
initialScalex: 1, // 图片宽缩放比例
initialScaley: 1, // 图片高缩放比例
initialWidth: this.data.editorWidth, // 图片原始宽度
activehorn: false, // 开启角状态
activeedge: false, // 开启边状态
initialScale: 1, // 图片缩放比例
initialscaling: 1, // 图片初始时缩放比例
initialScalex: 1, // 图片宽缩放比例
initialScaley: 1, // 图片高缩放比例
initialWidth: this.data.editorWidth, // 图片原始宽度
initialHeight: this.data.editorHeight, // 图片原始高度
frame_left: null, // 裁剪窗口x
image_left: null, // 图片x
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
})
this.data.itemList = items
this.saveSnapshot();
......@@ -1483,8 +1499,10 @@
under_color: '',
content: result.url, // 贴图地址
top: that.editor_top - height / 2, // 初始图片Y坐标,根据画布高/2-图片高/2
left: that.data.editorWidth / 2 - width /2, // 初始图片X坐标,因为div是相对定位,所以计算是要多减一次移动的距离
x: that.data.editorWidth /2, // 初始圆心位置,可再downImg之后又宽高和初始的图片位置得出
left: that.data.editorWidth / 2 - width /
2, // 初始图片X坐标,因为div是相对定位,所以计算是要多减一次移动的距离
x: that.data.editorWidth /
2, // 初始圆心位置,可再downImg之后又宽高和初始的图片位置得出
y: that.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
......@@ -1654,18 +1672,28 @@
'/' + atter
.dir + time +
'.jpg'
item.initialHeight = item.height
item.initialWidth = H1 / H2 * image.width
item.image_left = -(H1 / H2 * image.width - W1) / 2
item.initialHeight =
item.height
item.initialWidth =
H1 / H2 * image
.width
item.image_left = -
(H1 / H2 *
image
.width - W1
) / 2
} else {
item.content = atter.host + '/' + atter.dir + time + '.jpg'
item.content =
atter.host +
'/' + atter
.dir + time +
'.jpg'
}
item.type = 0 //0为图片,1为文字,2为素材
if (item.works_id !=
undefined) {
if (item.works_id != undefined) {
if (item.works_id > 0) {
_this.data.works_idlenght--
item.material_id =0
item.material_id = 0
item.original_id = 0
item.works_id = 0
}
......@@ -1707,39 +1735,37 @@
count: 1,
success: (res) => {
let tempFilePaths = res.tempFilePaths;
//let tempFilePaths = 'http://ws.colorpark.cn/static/alioss/images/icon_picture.png';
var size = res.tempFiles[0].size;
var path = res.tempFiles[0].path;
var formatImage = path.split(".")[(path.split(".")).length - 1];
//var formatImage = path.split(".")[(path.split(".")).length - 1];
if (formatImage != "png" &&
formatImage != "jpg" &&
formatImage != "jpeg" &&
formatImage != "webp" &&
formatImage != "gif" &&
formatImage != "bmp" &&
formatImage != "tiff" &&
formatImage != "tif"
) {
return uni.showToast({
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length,formatImage);
if (formatImage != "png" &&
formatImage != "jpg" &&
formatImage != "jpeg" &&
formatImage != "webp" &&
formatImage != "gif" &&
formatImage != "bmp" &&
formatImage != "tiff" &&
formatImage != "tif" &&
formatImage != "heic"
) {
return uni.showToast({
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif、.heic格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length, formatImage);
}
})
},
/* 上传图片拍照 */
addItemFromCamera: async function(e) {
//console.log(e);
this.showone = false
this.isUpLoadImage = true;
var _this = this
//console.log(e);
uni.chooseImage({
sizeType: ['original'], //可以指定是original原图还是compressed压缩图,默认二者都有
sourceType: ['camera'], //从相册选择
......@@ -1751,30 +1777,32 @@
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" &&
if (formatImage != "png" &&
formatImage != "jpg" &&
formatImage != "jpeg" &&
formatImage != "webp" &&
formatImage != "gif" &&
formatImage != "bmp" &&
formatImage != "gif" &&
formatImage != "bmp" &&
formatImage != "tiff" &&
formatImage != "tif"
) {
formatImage != "tif" &&
formatImage != "heic" ) {
return uni.showToast({
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif格式',
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif、.heic格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length,formatImage);
},fail(res) {
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length, formatImage);
},
fail(res) {
console.log(res);
}
})
},
/* 上传图片从相册 */
/*上传图片从相册 */
addItemFromAlbum: async function(e) {
this.isUpLoadImage = true;
this.showone = false
......@@ -1796,17 +1824,18 @@
formatImage != "gif" &&
formatImage != "bmp" &&
formatImage != "tiff" &&
formatImage != "tif"
formatImage != "tif" &&
formatImage != "heic"
) {
return uni.showToast({
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif格式',
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif、.heic格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length,formatImage)
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length, formatImage)
}
})
},
......@@ -1832,18 +1861,20 @@
formatImage != "gif" &&
formatImage != "bmp" &&
formatImage != "tiff" &&
formatImage != "tif"
formatImage != "tif" &&
formatImage != "heic"
) {
return uni.showToast({
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif格式',
title: '只能上传.png、.jpg、.jpep、.webp、.gif、. bmp、. tiff、. tif、.heic格式',
icon: 'none',
image: '',
duration: 2000,
mask: true,
})
}
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length,formatImage);
},fail: (res)=>{
this.uploadDIY(tempFilePaths, 0, 0, 0, tempFilePaths.length, formatImage);
},
fail: (res) => {
//console.log(res)
}
})
......@@ -1867,7 +1898,7 @@
* i是文件路径数组的指标->0
* length是文件路径数组的长度
*/
uploadDIY(tempFilePaths, successUp, failUp, i, length,formatImage) {
uploadDIY(tempFilePaths, successUp, failUp, i, length, formatImage) {
let machine_id = this.machine_id || 0
let user_id = userService.getUserInfo().id || 0
var _this = this
......@@ -1904,13 +1935,15 @@
}
if (res.statusCode == 200) {
_this.percent = 100
var imageUrl = atter.host + '/' + atter.dir + time + '.' + formatImage;
var imageUrl = atter.host + '/' + atter.dir + time + '.' +
formatImage;
_this.upLoadImageUrl = imageUrl
if (
formatImage == "bmp" ||
formatImage == "tiff" ||
formatImage == "tif"){
_this.upLoadImageUrl = imageUrl + "?x-oss-process=image/format,png"
formatImage == "tif") {
_this.upLoadImageUrl = imageUrl +
"?x-oss-process=image/format,png"
}
/*console.log(_this.upLoadImageUrl); */
/*uni.showToast({
......@@ -1987,7 +2020,7 @@
_this.saveSnapshot();
}
});*/
}
}
},
fail: function(err) {
//console.log(err)
......@@ -2009,9 +2042,9 @@
}
})
},
goodsbrands(obj) {
this.isShowPop =false;
this.isShowPop = false;
this.isCustomize = false; //充值自定义
this.filletSize = 0 //设置圆角
this.isCustomizeComplete = false
......@@ -2029,7 +2062,7 @@
this.goodslist() // 获取产品详情数据
this.orderNewLockAttrStock()
},
orderNewLockAttrStock() {
homeservice.queryList({ // 释放锁定库存
s: 'Order.newLockAttrStock',
......@@ -2151,7 +2184,7 @@
title: weixinres.msg,
icon: 'none'
})
}
}
});
}
}
......@@ -2228,8 +2261,10 @@
//type: 0, //0为图片,1为文字,2为素材
if (item.type == 0) {
//新添加的参数
comlist.image_left = item.image_left ? (item.image_left + item.left) / widScale : ( left / widScale) // 图片的x
comlist.image_top = item.image_top ? (item.image_top + item.top) / heiScale : (top / heiScale) // 图片的y
comlist.image_left = item.image_left ? (item.image_left + item.left) / widScale : (left /
widScale) // 图片的x
comlist.image_top = item.image_top ? (item.image_top + item.top) / heiScale : (top /
heiScale) // 图片的y
comlist.image_width = item.initialWidth * item.initialScale / widScale // 图片宽度
comlist.image_height = item.initialHeight * item.initialScale / heiScale // 图片高度
}
......@@ -2325,7 +2360,8 @@
icon: 'none',
mask: true
});
if (this.createWorkstext == '生成' || this.createWorkstext == '立即下单' || this.createWorkstext == '保存' || this.createWorkstext == '更新') {
if (this.createWorkstext == '生成' || this.createWorkstext == '立即下单' || this
.createWorkstext == '保存' || this.createWorkstext == '更新') {
homeservice.setCate({
goodid: result.id,
machine_id: this.machine_id,
......@@ -2335,9 +2371,9 @@
if (result.customize_size_id) {
this.customize_size_id = result.customize_size_id;
}
this.self_help(loading, result.id)
this.self_help(loading, result.id)
} else {
}
}).catch(err => {
uni.hideLoading();
......@@ -2352,13 +2388,13 @@
});
}
},
self_help(loading, works_id) {
var type = 3;
var support_pay = 1;
if(this.baseSetting){
support_pay = this.baseSetting.support_pay
if(support_pay == 0){
if (this.baseSetting) {
support_pay = this.baseSetting.support_pay
if (support_pay == 0) {
type = 2
}
}
......@@ -2369,11 +2405,11 @@
machine_id: this.machine_id, //设备
goods_id: this.data.goods_id, //产品
works_id: works_id, //作品
channel_no: this.channel_no , //货道
dict_id: this.dict_id, //属性字典id
goods_size: this.sizetext, //产品尺寸
channel_no: this.channel_no, //货道
dict_id: this.dict_id, //属性字典id
goods_size: this.sizetext, //产品尺寸
works_num: null, //作品
shop_id: this.machineDetail.shop_id , //商铺
shop_id: this.machineDetail.shop_id, //商铺
sn: this.sn, //前端查询标志
coupon_id: null, //优惠券id,支付多个id( 1-2-3)
user_address: null, //地址
......@@ -2384,9 +2420,9 @@
}
homeservice.WorksList(data).then(result => {
//关闭当前页面,跳转到应用内的某个页面。
if(support_pay == 1){
this.payment(result.pay, result.order_id)
}else{
if (support_pay == 1) {
this.payment(result.pay, result.order_id)
} else {
uni.navigateTo({
url: '../mall/lineUp?machine_id=' + this.machine_id
})
......@@ -2403,8 +2439,8 @@
isclick = true;
});
},
payment(params, order_id) {
let seft = this
uni.requestPayment({
......@@ -2433,30 +2469,30 @@
icon: 'none',
duration: 3000
});
}
});
},
//切换手机
topagecategory(e) {
homeservice.queryList({
s: 'Product.getBrands', //新接口
machine_id: this.machine_id,
key:"3"
}).then(result => {
this.brandList = result;
if(this.brandList != null && this.brandList.length > 0 ){
this.brandclick(0,this.brandList[0])
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
homeservice.queryList({
s: 'Product.getBrands', //新接口
machine_id: this.machine_id,
key: "3"
}).then(result => {
this.brandList = result;
if (this.brandList != null && this.brandList.length > 0) {
this.brandclick(0, this.brandList[0])
}
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
},
onok(item) {
this.state = false
//赋值就移动了
......@@ -2549,7 +2585,7 @@
//获取作品详情
Worksdetail(item) {
if(item == null){
if (item == null) {
return;
}
this.delete_wrap_state = true
......@@ -2635,7 +2671,7 @@
idone: item.id,
id: i + 1,
//type: 0,
type: item.type.value ,
type: item.type.value,
material_id: item.material_id,
index: item.index,
font_family: item.font_family,
......@@ -2711,7 +2747,7 @@
original_id = result.id;
material_id = result.id;
}
//读取主图遮罩
uni.getImageInfo({
src: urlData,
......@@ -2731,14 +2767,15 @@
let lef = 0
let ratio = image.width / image.height
let ratiowidth = (this.data.editorWidth * this.mix_scale) / image.width
let ratioheight = (this.data.editorHeight * this.mix_scale) / image.height
let ratioheight = (this.data.editorHeight * this.mix_scale) / image
.height
let resultmix_scale = result.mix_scale || 1
//if (ratio >= 1) { //长方形
//width = this.data.editorWidth * this.mix_scale * resultmix_scale
//height = image.height * ratiowidth * resultmix_scale
// } else if (ratio < 1) { //长高方形
height = this.data.editorHeight * this.mix_scale * resultmix_scale
width = image.width * ratioheight * resultmix_scale
height = this.data.editorHeight * this.mix_scale * resultmix_scale
width = image.width * ratioheight * resultmix_scale
// }
if (result.is_under == 1) {
let number_index = 0
......@@ -2769,8 +2806,10 @@
under_color: '',
content: urlData, // 贴图地址
top: this.editor_top - height / 2, // 初始图片Y坐标,根据画布高/2-图片高/2
left: this.data.editorWidth / 2 - width / 2, // 初始图片X坐标,因为div是相对定位,所以计算是要多减一次移动的距离
x: this.data.editorWidth / 2, // 初始圆心位置,可再downImg之后又宽高和初始的图片位置得出
left: this.data.editorWidth / 2 - width /
2, // 初始图片X坐标,因为div是相对定位,所以计算是要多减一次移动的距离
x: this.data.editorWidth /
2, // 初始圆心位置,可再downImg之后又宽高和初始的图片位置得出
y: this.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
......@@ -3175,7 +3214,7 @@
})
}
},
//关闭所有弹窗回调事件
change(e) {
if (items != null && items.length >= 1) {
......@@ -3192,7 +3231,7 @@
}
}
},
togglePopup(type, open) { //打开弹框
switch (type) {
case 'bottom':
......@@ -3204,7 +3243,7 @@
this.$refs['show' + open].open()
})
},
bgtextcolor() {
this.bg_text_color = !this.bg_text_color
this.$nextTick(() => {
......@@ -3214,7 +3253,7 @@
})
})
},
//文本字体
typefaceClick(typeface) {
//获取当前选中的部件
......@@ -3265,7 +3304,7 @@
}
this.saveSnapshot();
},
//文本加粗
workweight() {
//获取当前选中的部件
......@@ -3280,7 +3319,7 @@
}
this.saveSnapshot();
},
//文本颜色
workcolor(color) {
//获取当前选中的部件
......@@ -3299,7 +3338,7 @@
}
this.saveSnapshot();
},
/**
* 通过旧坐标、旋转角度、圆心计算旋转后点的新坐标
* @param origin 原始坐标对象
......@@ -3322,7 +3361,7 @@
y: newY
};
},
/**
* 通当新坐标、旋转角度、圆心计算旋转后点的旧坐标
* @param origin 原始坐标对象
......@@ -3345,7 +3384,7 @@
y: oldY
};
},
/**
* 计算伸缩后的四个顶部坐标
* @param scale 放大倍部
......@@ -3387,7 +3426,7 @@
centerY: (rightTopY - leftTopY) / 2
};
},
/**
* 计算未伸缩时的四个顶点坐标
* @param left 左上顶点的左距离
......@@ -3423,7 +3462,7 @@
centerY: (rightTopY - leftTopY) / 2
};
},
/**
* 计算四个顶点旋转后的坐标系
* @param scalePos 四个顶点未旋转前的坐标系
......@@ -3471,7 +3510,7 @@
centerY: (scalePos.rightTopY - scalePos.leftTopY) / 2
};
},
/*
* 计算四个顶点旋转后的旧坐标
* @param scalePos 四个顶点未旋转前的坐标系
......@@ -3518,7 +3557,7 @@
centerY: (rightTopY - leftTopY) / 2
};
},
/*
* 读取图片操作
* @param e object 事件
......@@ -3532,7 +3571,7 @@
this.data.loadbgImageheight = height / rScale
this.data.loadbgImageheightstate = true
},
/*
* 部件点击事件
* @param e object 事件
......@@ -3608,7 +3647,7 @@
// return 235 * this.data.pixelRate;
return (750 - this.design_width) / 2 * this.data.pixelRate;
},
/* 获取编辑区域上边距 */
getTop: function() {
// return this.data.bgHeight * 0.25;
......@@ -3659,7 +3698,7 @@
// 获取当前选中的部件
var item = items[index];
if (e.touches.length > 1) {
} else {
drag.dragMove(e, item, this.data, this.editor_top)
this.guide_left = true // 开启辅助线
......@@ -3889,10 +3928,11 @@
item.activehorn = true // 角状态
item.activeedge = true // 边状态
//赋值
drag.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos,item)
drag.getTransferPosition(item.left, item.top, item.width, item.height, item.angle, item.centerPos,
item)
this.saveSnapshot();
},
/* 部件旋转结束事件*/
rotateEnd: function(e) {
//获取当前选中的部件
......@@ -4127,7 +4167,7 @@
snapshotIndex = snapshotIndex + 1;
}
},
//上一步功能
prev: function() {
if (snapshotIndex > 0) {
......@@ -4143,7 +4183,7 @@
});
}
},
//下一步
next: function() {
if (snapshotIndex < snapshot.length - 1) {
......@@ -4159,7 +4199,7 @@
});
}
},
//下一层
lowerIndex() {
var currentItem = items[index]; // 当前选中的部件
......@@ -4210,7 +4250,7 @@
}
}
},
//上一层
upperIndex() {
//当前选中的部件
......@@ -4296,8 +4336,10 @@
uni.getImageInfo({
src: result.front_image,
success: (front_image) => {
this.data.bgHeight = front_image.height * (this.data.bgWidth / front_image.width) // 画布高度
this.editory = result.center_scale * (this.data.bgWidth / front_image.width) //辅助线距离
this.data.bgHeight = front_image.height * (this.data.bgWidth / front_image
.width) // 画布高度
this.editory = result.center_scale * (this.data.bgWidth / front_image
.width) //辅助线距离
this.front_image_long = true
},
fail(err) {
......@@ -4317,7 +4359,8 @@
this.data.bgImage = result.front_image // 背景图
this.data.bgImage_old = result.front_image_old // 旧背景图
if (this.$base.surfaceData.surface_type == 0 || this.$base.surfaceData.surface_type == 2) { //默认
if (this.$base.surfaceData.surface_type == 0 || this.$base.surfaceData.surface_type ==
2) { //默认
this.background_color = 'none' //手机底色
}
this.$base.goods_feature_id = result.goods_feature_id
......@@ -4375,8 +4418,10 @@
uni.getImageInfo({
src: result.front_image,
success: (front_image) => {
this.data.bgHeight = front_image.height * (this.data.bgWidth / front_image.width) // 画布高度
this.editory = result.center_scale * (this.data.bgWidth / front_image.width) //辅助线距离
this.data.bgHeight = front_image.height * (this.data.bgWidth / front_image
.width) // 画布高度
this.editory = result.center_scale * (this.data.bgWidth / front_image
.width) //辅助线距离
this.front_image_long = true
},
fail(err) {
......@@ -4389,7 +4434,8 @@
}) //修改头部名称
this.data.bgImage = result.front_image // 背景图
this.data.bgImage_old = result.front_image_old // 旧背景图
if (this.$base.surfaceData.surface_type == 0 || this.$base.surfaceData.surface_type == 2) { //默认
if (this.$base.surfaceData.surface_type == 0 || this.$base.surfaceData.surface_type ==
2) { //默认
this.background_color = 'none' //手机底色
this.background_surface_image = result.surface_pic
}
......@@ -4439,8 +4485,10 @@
uni.getImageInfo({
src: result.front_image,
success: (front_image) => {
this.data.bgHeight = front_image.height * (this.data.bgWidth / front_image.width) // 画布高度
this.editory = result.center_scale * (this.data.bgWidth / front_image.width) //辅助线距离
this.data.bgHeight = front_image.height * (this.data.bgWidth / front_image
.width) // 画布高度
this.editory = result.center_scale * (this.data.bgWidth / front_image
.width) //辅助线距离
this.front_image_long = true
},
fail(err) {
......@@ -4458,7 +4506,8 @@
}) //修改头部名称
this.data.bgImage = result.front_image // 背景图
this.data.bgImage_old = result.front_image_old // 旧背景图
if (this.$base.surfaceData.surface_type == 0 || this.$base.surfaceData.surface_type == 2) { //默认
if (this.$base.surfaceData.surface_type == 0 || this.$base.surfaceData.surface_type ==
2) { //默认
this.background_color = 'none' //手机底色
this.background_surface_image = result.surface_pic
}
......@@ -4675,17 +4724,17 @@
});
}.bind(this), 120000)
},
//获取作品明细
getWorkDetail() {
},
itemTouchStart: infoListTouchEvent.start.bind(infoListTouchEvent),
itemTouchMove: infoListTouchEvent.move.bind(infoListTouchEvent),
itemTouchEnd: infoListTouchEvent.end.bind(infoListTouchEvent),
itemTouchCancel: infoListTouchEvent.cancel.bind(infoListTouchEvent),
//获取库存与优惠券信息
getMachineStock() {
homeservice.queryList({
......@@ -4706,7 +4755,7 @@
});
});
},
getDetail() {
uni.showLoading({
title: '正在加载中...',
......@@ -4786,7 +4835,8 @@
if (item.scale != 1) {
//初始化的位置
drag.initPosscale(item)
drag.getTransferPositionangle(item.left, item.top, item.width, item.height, item.angle,item.centerPos, item)
drag.getTransferPositionangle(item.left, item.top, item.width, item.height, item.angle,
item.centerPos, item)
//缩放
item.scale = 1;
item.lastScale = 1
......@@ -4854,7 +4904,7 @@
this.data.itemList = items
}.bind(this),
})
if (options.machine_id != undefined) { // 判断是从设备进来
this.machine_id = options.machine_id // 设备id
this.queryPage.machine_id = options.machine_id // 设备id
......@@ -4867,13 +4917,13 @@
} catch (e) {
//TODO handle the exception
}
}else{
} else {
var url = Env.getBaseURL();
if (url.indexOf("refinecolor") != -1) {
if (options.machine_id == undefined) { // 判断是从设备进来
this.machine_id = 100022 // 设备id
this.queryPage.machine_id = 100022 // 设备id
}
if (options.machine_id == undefined) { // 判断是从设备进来
this.machine_id = 100022 // 设备id
this.queryPage.machine_id = 100022 // 设备id
}
}
this.getDetail();
}
......@@ -4963,13 +5013,15 @@
s: 'Works.detail',
id: options.works_id
}).then(result => {
that.background_color = result.background_color == 'none' ? null : result.background_color
that.background_color = result.background_color == 'none' ? null : result
.background_color
that.data.goods_id = result.goods_id
that.data.user_id = result.user_id
that.shape_image = result.shape_image
that.shape_id = result.shape_id //形状id
that.shape_price = result.shape_price //形状价格
that.queryPage.goods_category_id = result.goods.goods_category_id //星形接口列表增加,产品分类参数
that.queryPage.goods_category_id = result.goods
.goods_category_id //星形接口列表增加,产品分类参数
that.titlename = result.goods.name
wx.setNavigationBarTitle({
title: result.goods.name
......@@ -4980,13 +5032,16 @@
that.design_width = result.goods.design_width // 设计高度
that.print_width = result.goods.print_width // 设计基础宽度
that.print_height = result.goods.print_height // 设计基础高度
that.design_widthrate = result.goods.design_width / result.goods.print_width // 设计区放大宽度比率
that.design_heightrate = result.goods.design_height / result.goods.print_height // 设计区放大高度比率
that.design_widthrate = result.goods.design_width / result.goods
.print_width // 设计区放大宽度比率
that.design_heightrate = result.goods.design_height / result.goods
.print_height // 设计区放大高度比率
that.data.editorWidth = that.design_width * pixelRate // 设计宽度
that.data.editorHeight = that.design_height * pixelRate // 设计高度
that.center_scale = result.goods.center_scale // 设计区中心点比率
that.location_scale = result.goods.location_scale // 辅助线比率
that.editor_top = that.data.editorHeight * Number(that.location_scale) - 0.5 //辅助线距离
that.editor_top = that.data.editorHeight * Number(that.location_scale) -
0.5 //辅助线距离
if (options.pages == 'mine') { //设计师页面进来
that.data.template = result.template
that.data.template_price = result.template_price
......@@ -5030,28 +5085,38 @@
}
items.push({
support_zoom: item.support_zoom, // 0是不支持缩放,为1时支持缩放
support_drag: item.support_drag, // 0是不支持拖动,为1时支持拖动
is_under: item.is_under ? item.is_under : 0, //贴图是否为背景图
support_zoom: item
.support_zoom, // 0是不支持缩放,为1时支持缩放
support_drag: item
.support_drag, // 0是不支持拖动,为1时支持拖动
is_under: item.is_under ? item
.is_under : 0, //贴图是否为背景图
is_discount: item.is_discount, //贴图是否用卷
idone: item.id,
id: i + 1,
type: item.type.value,
material_id: item.material_id,
works_id: item.works_id ? item.works_id : null,
works_id: item.works_id ? item
.works_id : null,
original_id: item.original_id,
index: item.index,
font_family: item.font_family.replace('.ttf', ''),
font_family: item.font_family.replace(
'.ttf', ''),
font_dict_id: item.font_dict_id,
font_style: item.font_style,
font_size: item.font_size * pixelRate * that.design_widthrate,
font_size: item.font_size * pixelRate *
that.design_widthrate,
font_color: item.font_color,
under_color: item.under_color,
content: item.content, // 图片地址
top: top * pixelRate * that.design_heightrate,
left: left * pixelRate * that.design_widthrate,
x: item.center_x * pixelRate * that.design_widthrate,
y: item.center_y * pixelRate * that.design_heightrate,
top: top * pixelRate * that
.design_heightrate,
left: left * pixelRate * that
.design_widthrate,
x: item.center_x * pixelRate * that
.design_widthrate,
y: item.center_y * pixelRate * that
.design_heightrate,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
......@@ -5076,12 +5141,20 @@
initialscaling: 1, // 图片初始时缩放比例
initialScalex: 1, // 图片宽缩放比例
initialScaley: 1, // 图片高缩放比例
initialWidth: item.image_width * pixelRate * that.design_widthrate, // 图片原始宽度
initialHeight: item.image_height * pixelRate * that.design_heightrate, // 图片原始高度
initialWidth: item.image_width *
pixelRate * that
.design_widthrate, // 图片原始宽度
initialHeight: item.image_height *
pixelRate * that
.design_heightrate, // 图片原始高度
frame_left: null, // 裁剪窗口x
image_left: (item.image_left - left) * pixelRate * that.design_widthrate, // 图片x
image_left: (item.image_left - left) *
pixelRate * that
.design_widthrate, // 图片x
frame_top: null, // 裁剪窗口y
image_top: (item.image_top - top) * pixelRate * that.design_heightrate, // 图片y
image_top: (item.image_top - top) *
pixelRate * that
.design_heightrate, // 图片y
});
}
}
......@@ -5102,7 +5175,7 @@
});
this.getMachineStock()
},
onShow(obj) {
if (this.machine_id != null && this.machine_id != "") {
this.machineGetBaseSetting();
......@@ -5113,7 +5186,7 @@
this.data.goods_id = this.options.goods_id // 商品id
}
}
if (this.isCustomize) {
if (!this.isUpLoadImage) {
this.getCustomDetail();
......@@ -5121,7 +5194,7 @@
} else {
if (obj) {
this.data.goods_id = obj //商品id
if(this.data.goods_id == undefined || this.data.goods_id == "" ){
if (this.data.goods_id == undefined || this.data.goods_id == "") {
this.data.goods_id = 301
}
this.goodslist()
......@@ -5249,9 +5322,7 @@
position: absolute;
}
.active {
}
.active {}
/* 删除、缩放、旋转操作按钮 */
.rotate,
......@@ -5531,7 +5602,7 @@
}
/*position: fixed;
/*position: fixed;
top: 440upx;
right: 0;
width: 120upx;
......@@ -5546,7 +5617,7 @@
bottom: 0;
width: calc(100% - 230upx);
display: flex;
flex-direction: row;
flex-direction: row;
.tool_li {
width: 130upx;
......@@ -5701,31 +5772,28 @@
.delete-wrap-active {
box-shadow: 0 0 15px #FFFFFF;
}
.scroll-item-select{
.scroll-item-select {
//border: 1upx solid #61D119;
border-top: 5upx solid #61D119;
border-bottom: 5upx solid #61D119;
border-left: 5upx solid #61D119;
border-right: 5upx solid #fff;
}
.scroll-item-no-select{
.scroll-item-no-select {
border: 1upx solid #00000000;
}
.scroll-item-buttom-select{
.scroll-item-buttom-select {
border: 5upx solid #fff;
}
.scroll-item-buttom-no-select{
.scroll-item-buttom-no-select {
border: 1upx solid #00000000;
}
</style>
\ No newline at end of file
<template>
<view class="full-width full-height">
<view v-if="showType == 0" @tap="doubleTap" @touchstart="touchStart" @touchend="touchEnd"
<view v-if="showType == 0" @tap="doubleTap" @touchstart="touchStart" @touchend="touchEnd"
style="position: fixed; z-index: 99; right: 0; bottom: 550upx; display: flex;align-items: center;justify-content: center;
width: 100upx; height: 88upx; background: linear-gradient(92deg, #64DD17, #64DD17); border-radius: 44upx 0px 0px 44upx;">
<view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;">
......
......@@ -52,12 +52,12 @@
<image src="../../static/icon_guaqi.png" mode="aspectFill" class="start_img"></image>
<view class="start_text" style="margin-top: -80upx;font-size: 31upx;">{{machine_id || ''}}</view>
<view class="start_text" style="margin-top: 100upx;">{{msg || ''}}</view>
<view @click="tomakePhoneCall">
<view @click="tomakePhoneCall" v-if="phone">
<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'}}
{{phone }}
</view>
</view>
</view>
......@@ -71,10 +71,9 @@
</view>
</view>
<view v-if="isShowPop"
<view v-if="isShowPop"
style="z-index: 999999; width: 100%; height: 100%; position: absolute; top: 0upx; left: 0upx" :style="{height: data.windowHeight +'px'}">
<view class="uni-share full-width" :style="{height: data.windowHeight +'px'}" style="background: #fff;">
<view style="position: absolute; bottom: 0upx; left: 0;
height: 100%; width: 120upx;
z-index: 7;
......@@ -151,8 +150,8 @@
<view :id="'s' + index" style="height: 140upx;"
:class="[index == currentId ? 'scroll-item-buttom-select' : 'scroll-item-buttom-no-select']"
v-for="(item, index) in brandList" :key="index" @tap="brandclick(index,item)" >
<!-- <view style="width: 20upx; background: #fff;margin-left: 0upx ;height: 140upx" :style="{background: index == currentId ? '#fff' :'#00000000' }"> </view> -->
</view>
</view>
</scroll-view>
</view>
</view>
......@@ -213,7 +212,7 @@
msg: null,
worksid: 3111,
statusloading: null, //加载状态
phone: '18938664545',
phone: '',
isLoad: false, //是否加载
baseSetting: null, //配置信息
moduleInfo: null, //识别型号信息
......@@ -268,7 +267,6 @@
},
open(item) {
this.machine_id = item.machine_id
homeservice.queryList({
s: 'Product.getBrandProducts', //新接口
......@@ -287,7 +285,6 @@
});
},
getBrandList() {
homeservice.queryList({
s: 'Product.getBrands', //新接口
......@@ -415,7 +412,7 @@
mask: true
})
uni.makePhoneCall({
phoneNumber: this.phone || '18938664545', //仅为示例
phoneNumber: this.phone, //仅为示例
success(res) {
uni.hideLoading();
},
......@@ -485,8 +482,7 @@
uni.openSetting({
success(res) {
that.getAuthorize()
},
fail(err) {
},fail(err) {
}
})
......@@ -630,7 +626,6 @@
this.$base.lockInventory = result //锁库存储存信息
this.$base.lockInventory.dict_id = this.dict_id
this.sn = result.sn
uni.navigateTo({
url: '../index/index?machine_id=' + this.machine_id + '&goods_id=' + this.goods_id +
'&key=' + this.key + '&sn=' + this.sn + '&dict_id=' + this.dict_id +
......
......@@ -6,7 +6,7 @@
<view class="start_title">壳小站</view>
<view class="start_text">{{startText}}</view>
<view class="longTitle">
<!-- <view>壳小站,把爱穿在身上、棒在手心</view> -->
<!--<view>壳小站,把爱穿在身上、棒在手心</view> -->
你的第一份爱的定制在这里开始
</view>
<view class="footer_but">
......@@ -68,8 +68,8 @@
}
})
let that = this;
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
//推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
//开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
lang:'zh_CN',
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
......@@ -239,12 +239,11 @@
//console.log('wx.getUserProfile')
//console.log(wx.getUserProfile)
if (wx.getUserProfile) {
console.log('wx.getUserProfile可以使用')
this.canIUseGetUserProfile = true
//console.log('wx.getUserProfile可以使用')
this.canIUseGetUserProfile = true
}
// // 判断用户有没有登录
// if (!this.$AppContext.checkLogin()) {
// } else {
// //先登陆
// let stat = this;
......
......@@ -22,13 +22,8 @@
<view style="color: #fff; display: flex; align-items: center; justify-content: center;">
<view v-if="designer.user_id != userId" class="border-image-pesudo-no">
<view class="border-image-pesudo-in-no">
<!-- <image style="width: 100%;height: 100%;" src="../../static/img/icon_line_up_back.png"
mode="aspectFit"></image>
<image
style="width: 141upx; height: 132upx; margin:auto; display: block;position: absolute; z-index: 10;"
:src="designer.front_image" mode="aspectFit"></image> -->
<image
style="width: 141upx; height: 132upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
style="width: 141upx; height: 132upx; position: absolute; top: 0; left: -23upx; right: 0; bottom: 0; margin: auto; z-index:8;"
:src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"
mode="aspectFit">
</image>
......@@ -36,13 +31,8 @@
</view>
<view v-if="designer.user_id == userId" class="border-image-pesudo">
<view class="border-image-pesudo-in">
<!-- <image style="width: 100%;height: 100%;" src="../../static/img/icon_line_up_back.png"
mode="aspectFit"></image>
<image
style="width: 141upx; height: 132upx; margin:auto; display: block;position: absolute; z-index: 10;"
:src="designer.front_image" mode="aspectFit"></image> -->
<image
style="width: 141upx; height: 132upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
style="width: 141upx; height: 132upx; position: absolute; top: 0; left: -23upx; right: 0; bottom: 0; margin: auto; z-index:8;"
:src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"
mode="aspectFit">
</image>
......@@ -62,7 +52,6 @@
<text style="font-size: 40upx;font-weight: bold;" v-if="designer.status.value == 1">{{designer.id || ''}}</text>
</view>
</view>
<view style="margin-right: 20upx; margin-left: auto; padding-top:20upx">
<view v-if="designer.status.value == 1"
style="width: 136upx; height: 60upx;background: #61D119;border-radius:30upx;opacity: 0.86; ">
......@@ -79,11 +68,9 @@
</view>
</view>
</view>
<!-- 提示 -->
<view v-if="sighstate">
<!-- background:rgba(0,0,0,0.6); -->
<view
style="position: fixed; z-index:999; width: 100%; height: 100%; top: 0; background:rgba(0,0,0,0.6); justify-content: center;"
@click.stop="sighstate = false"></view>
......@@ -95,25 +82,18 @@
<image src="../../static/icon_guanbi.png" mode=""
style="width: 26upx; height: 26upx; padding: 20upx; "></image>
</view>
<view
style="width: 558upx;">
<view style="width: 558upx;">
<view style="display: flex; align-items: center; justify-content: center;
width: 100%; height: 360upx; ">
<image :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_100'" mode="aspectFit" style="width:360upx; "></image>
<!-- <image :src="designer.back_image + '?x-oss-process=image/resize,lfit,w_290'" mode="aspectFit" style=" width: 300upx;margin-left: -200upx;"></image> -->
</view>
<view style="text-align: center; font-size: 36upx; margin-top: 58upx;">作品排队中</view>
<view style="text-align: center; font-size: 36upx;">如需要打印可与客服确认</view>
<view style="text-align: center; font-size: 36upx;">如有故障请联系客服</view>
</view>
</view>
</view>
</view>
</view>
</template>
......@@ -175,13 +155,12 @@
machine_id: this.queryPage.machine_id,
s: 'machine.newDetail',
}).then(res => {
/* uni.showToast({
/*uni.showToast({
title: 'jjjjj',
icon: 'none',
duration: 2000
}) */
//this.$refs["showLineUpPop"].open();
//this.$refs['showLineUpPop'].open();
this.designer = designer
this.sighstate = true
......@@ -293,7 +272,7 @@
//console.log("userId=" + userService.getCacheAppUser().userInfo.id);
},
// 卸载程序
//卸载程序
onUnload() {
this.clearIntervalTime()
let pages = getCurrentPages();
......@@ -327,16 +306,15 @@
height: 150upx;
background: #131319;
margin: 25upx 35upx;
margin-left: 0upx;
margin-left: 20upx;
position: relative;
overflow: hidden;
//clip-path: inset(0 round 8upx);
.border-image-pesudo-in {
width: 100%;
height: 100%;
background: #fff;
//background-color: rgba(255,255,255,0.7);
}
}
......@@ -346,9 +324,7 @@
height: 150upx;
background: #fff;
margin: 25upx 35upx;
margin-left: 0upx;
margin-left: 20upx;
position: relative;
overflow: hidden;
opacity: 0.2;
......@@ -357,35 +333,11 @@
width: 100%;
height: 100%;
background: #fff;
//background-color: rgba(255,255,255,0.7);
}
}
/* .border-image-pesudo::before {
content: "";
position: absolute;
width: 140upx;
height: 140upx;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 10upx solid;
background: #131319;
border: 5upx solid;
border-image: linear-gradient(0deg, #178CE6, #984ACE) 2 2;
} */
.colletion {
/* .cart-ticket-null {
padding-top: 50upx;
} */
.content {}
}
</style>
<template>
<view class="full-width full-height" style="padding-top: 90upx;">
<view style="width: 220upx; margin:0 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="width: 430upx;
height: 90upx;
background: rgb(40, 41, 50,0.67);
border-radius: 45upx;
margin: 119upx auto 0;
font-size: 36upx;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 90upx;
text-align: center;
color: #FFFFFF;" @click="login()">
立即查看
</view>
</view>
</template>
<script>
import homeservice from '@/service/homeservice.js'
export default {
components: {},
computed: {},
data() {
return {
};
},
methods: {
login() {
// develop 开发版
// trial 体验版
// release 正式版
wx.navigateToMiniProgram({
appId: 'wx55b5b6d95c648041',
path: '/pages/index/mine',
extraData: {
foo: 'bar'
},
envVersion: 'trial',
success(res) {
// 打开成功
}
})
}
},
onPullDownRefresh() {
},
onLoad(options) {
},
onShow() {
}
};
</script>
<style lang="scss">
page {
background: #131319 !important;
color: #fff;
}
</style>
......@@ -122,24 +122,28 @@
numberY: 0,
state: false,
},
transformscale: 1, //整体缩小
transformscale: 1, //整体缩小
key: null,
background_surface_image: null, //定制壳手机壳底色
machineDetail: null, //设备详情
customize_size_id: "", //自定以产品Id
machineDetail: null, //设备详情
customize_size_id: "", //自定以产品Id
};
},
methods: {
dragStart(e) {
},
dragMove(e) {
},
//拖动结束事件
dragEnd(e) {
//if (!this.coordinate.state) return;
},
//创建订单
self_help() {
let data = {
......@@ -269,6 +273,7 @@
}
}
},
zhifu() {
let data = {
s: 'Order.create',
......@@ -286,7 +291,6 @@
user_address: null, // 用户下单地址
terminal: this.$base.terminal, // 下单渠道
promoter_id: this.$base.promoter_id, // 推广的员的编号
surface_type: this.$base.surfaceData.surface_type, //材质类型 0:默认 1:自带壳 2:定制壳
surface_id: this.$base.surfaceData.surface_id, //材质对应的编号,没有的话就为0或者不传
surface_color_series_id: this.$base.surfaceData.surface_color_series_id, //选择的色系编号,没有的话就不传或者为0
......@@ -298,14 +302,11 @@
}
this.loading = true; //防止多次点击支付
let seft = this
//console.log("打印22")
uni.showLoading({
title: '正在提交中...'
})
homeservice.WorksList(data).then(result => {
//console.log('result', result)
if (this.tabletext) {
this.resultpayone = result
this.orderIdone = result.order_id
......@@ -325,6 +326,7 @@
});
});
},
payment(params, order_id) {
let seft = this
uni.requestPayment({
......@@ -346,12 +348,10 @@
});
let type = this.tabletext ? 3 : 1 //1:配送版,2:单机版,3:自助版
setTimeout(() => {
uni.navigateTo({
url: '../mall/lineUp?machine_id=' + seft.machine_id + '&key=' +
seft.key
})
/* uni.navigateTo({
url: './self_help_payment_details?orderId=' + order_id +
'&type=' + type + '&machine_id=' + seft.machine_id
......@@ -374,7 +374,8 @@
}
});
},
// 获取库存与优惠券信息
//获取库存与优惠券信息
getMachineStock() {
homeservice.queryList({
s: 'Machine.getMachineStock',
......@@ -396,30 +397,16 @@
});
});
},
//设备进来的
machine_pageslist(e) {
this.machine_pages = false
this.machine_item = this.machineDetail
this.machine_item.machine_category_text = this.machineDetail.category.title
this.key = this.machineDetail.category.key
this.getMachineStock()
// homeservice.WorksList({
// s: 'machine.detail',
// machine_id: this.machine_id,
// }).then(res => {
// this.machine_item = res
// this.machine_item.category.forEach(item=>{
// if(item.id == this.machine_item.machine_category_id){
// this.machine_item.machine_category_text = item.title
// this.key = item.key
// }
// })
// this.getMachineStock()
// }).catch(err => {
// uni.showToast({title: err.msg,icon: 'none'})
// });
},
Worksdetail() { //获取作品详情
homeservice.WorksList({
s: 'Works.detail',
......
......@@ -98,7 +98,6 @@
</view>
</view>
</scroll-view>
<view style="background: #282932; height: 100upx; position: fixed; width: 100%; bottom: 0; z-index: 999;">
<view v-if="support_pay == 1" style="width: 100%; height: 100upx;
......@@ -106,14 +105,13 @@
font-weight: 400; text-align: center; line-height: 100upx; float: right; color: #FFFFFF;" @click="commitOrder">
支付领取
</view>
<view v-if="support_pay == 0" style="width: 100%; height: 100upx;
background: linear-gradient(-90deg, #178CE6, #984ACE); font-size: 36upx;
font-weight: 400; text-align: center; line-height: 100upx; float: right; color: #FFFFFF;" @click="commitOrder">
免费领取
</view>
</view>
</view>
</template>
......@@ -173,7 +171,6 @@
machine_pages: true, //设备进来的状态
myadress: {},
loading: false,
orderIdone: null, //订单号
orderIdtwo: null, //订单号
resultpayone: null,
......@@ -184,7 +181,6 @@
crateactivestate: false, //开始自转
titlestate: false,
isReady: false, //礼花
data: {
windowWidth: 0, // 屏幕宽度
windowHeight: 0, // 屏幕高度
......@@ -213,7 +209,6 @@
support_pay: 1 ,//0 不支付 1 支付
machineDetail:null,//设备详情
customize_size_id: "", //自定以产品Id
};
},
methods: {
......@@ -234,7 +229,8 @@
this.coordinate.startX = e.touches[0].clientX;
this.coordinate.startY = e.touches[0].clientY;
},
// 拖动结束事件
//拖动结束事件
dragEnd(e) {
if (!this.coordinate.state) return;
},
......@@ -275,8 +271,7 @@
data.user_address = {
receivor: this.addresslist.receivor,
phone: this.addresslist.phone,
address: this.addresslist.province + this.addresslist.city + this.addresslist.county + this
.addresslist.detail
address: this.addresslist.province + this.addresslist.city + this.addresslist.county + this.addresslist.detail
}
}
uni.showLoading({
......
<template>
<view class="full-width full-height" :style="{overflow: isReady ? 'hidden' : 'scroll' }">
<!-- 音乐 -->
<audio src="https://img.colorpark.cn/wechat/stitch.m4a" :action="stitchaction" controls loop
style="opacity: 0; position: absolute;"></audio>
<audio src="https://img.colorpark.cn/wechat/ring2.m4a" :action="ringaction" controls loop
style="opacity: 0; position: absolute;"></audio>
<!-- 礼花 -->
<firework ref="firework" v-if="isReady" style="position: fixed;z-index: 9999;"></firework>
<!-- 继续定制 -->
<view @click="tomall"
style="position: fixed; right: 0; bottom: 100upx; display: flex;align-items: center;justify-content: center; width: 100upx; height: 88upx; background: linear-gradient(92deg, #178CE6, #984ACE); 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)'}">
<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.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)'}">
<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: #fff; z-index: 1;"></view>
<!-- <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> -->
<!-- 作品图 -->
<image v-if="initstate" :src="goods.works_image" mode=""
:style="{'z-index': data.render_cove_width ? 2:0}"
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; margin: auto; bottom: 0;">
</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>
<!-- 手机壳 -->
<image :src="goods.goods.front_image" mode="" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;
right: 0; margin: auto;z-index: 4; overflow: hidden;"></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: 95%; height: 95%; background: #FFFFFF; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;">
</view>
<!-- 底图 -->
<!-- <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: 4; overflow: hidden;"></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'; //礼花
export default {
components: {
firework
},
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, //定制壳手机壳底色
};
},
onReady() {
},
methods: {
tomall() {
this.tomallstate = false
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;
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
//this.goods.status = 8
/*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
result.goods.render_cove_width = 270 / this.data.pixelRate
result.goods.render_cove_height = 640 / 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 = this.data.editorWidth - 40 // 设计高度
this.data.render_cove_height = this.data.editorHeight - 40 // 设计高度
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
//}
//console.log(this.$base.mobilePhoneCaseSize)
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
//this.orderOrderStatusData.status = 1
//this.orderOrderStatusData = 1
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
});
}
});
},
callPhone(phone) { //拨打电话
uni.makePhoneCall({
phoneNumber: this.phone || '18938664545'
})
},
previewImg(goods, index) { //预览图片
let img = goods.works_image
uni.previewImage({
current: index,
urls: [img]
});
},
getDetail() {
homeservice.WorksList({
machine_id: this.machine_id,
s: 'machine.newDetail'
}).then(res => {
if (res) {
this.phone = res.phone;
}
//uni.stopPullDownRefresh();
//uni.hideLoading();
}).catch(err => {
this.msg = err.msg
uni.stopPullDownRefresh();
uni.hideLoading();
this.myheadtext = '歇一歇' //头部标题栏
});
},
},
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.getDetail();
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>
\ No newline at end of file
<template>
<view class="full-width full-height">
<view style="min-height: 100%;">
<view style="padding-bottom: 60upx; padding-top: 40upx;">
<!-- 自助版:定制、支付、生产中、取货 //1:配送版,2:单机版,3:自助版-->
<view class="stepsmain" v-if="type == 3 && goods.status.value != 7 && goods.status.value != 3">
<view class="steps">
<!-- <view class="li red" style="width: calc(100% / 4);">
<view class="steps_img">
<image style="width: 31upx; height: 22upx;margin:17upx auto;" src="../../static/mine/icon_confirm.png" mode=""></image>
</view>
<view class="steps_text">定制</view>
</view> -->
<view class="li red" style="width: calc(100% / 3);">
<view class="steps_img">
<!-- 成功 是否支付 0:未付款 1:已付款,2:取消,3:过期-->
<image v-if="goods.is_pay.value == 1" style="width: 31upx; height: 22upx;margin:17upx auto;" src="../../static/mine/icon_confirm.png" mode=""></image>
<!-- 失败 -->
<image v-if="goods.is_pay.value == 0" class="steps_image" src="../../static/mine/icon_guanbi.png" mode=""></image>
</view>
<view class="steps_text">支付</view>
</view>
<!-- 支付成功 -->
<view v-if="goods.is_pay.value == 1" class="li" style="width: calc(100% / 3);" :class="[goods.status.value > 1 ? 'red':'active']">
<view class="steps_img">
<image v-if="goods.status.value <= 1" class="steps_image" src="../../static/mine/icon_three.png" mode=""></image>
<image v-if="goods.status.value > 1" style="width: 31upx; height: 22upx;margin:17upx auto;" src="../../static/mine/icon_confirm.png" mode=""></image>
</view>
<view class="steps_text">打印</view>
</view>
<!-- 支付失败 -->
<view v-if="goods.is_pay.value == 0" class="li wait" style="width: calc(100% / 3);">
<view class="steps_img">
<image class="steps_image" src="../../static/mine/icon_three.png" mode=""></image>
</view>
<view class="steps_text">打印</view>
</view>
<view class="li" style="width: calc(100% / 3);" :class="[goods.status.value > 1 ? 'active':'wait' ]">
<view class="steps_img">
<view style="text-align: center; line-height: 56upx; font-size: 22upx; font-weight: 500; color: #FFFFFF;"></view>
</view>
<view class="steps_text">取货</view>
</view>
</view>
</view>
<!-- 配送版:定制、支付、待生产、生产中、发货、收货-->
<view class="stepsmain" v-if="type == 1">
<view class="steps">
<!-- <view class="li red" style="width: calc(100% / 5);">
<view class="steps_img">
<image style="width: 31upx; height: 22upx;margin:17upx auto;" src="../../static/mine/icon_confirm.png" mode=""></image>
</view>
<view class="steps_text">定制</view>
</view> -->
<view class="li red" style="width: calc(100% / 4);">
<view class="steps_img">
<!-- 成功 是否支付 0:未付款 1:已付款,2:取消,3:过期-->
<image v-if="goods.is_pay.value == 1" style="width: 31upx; height: 22upx;margin:17upx auto;" src="../../static/mine/icon_confirm.png" mode=""></image>
<!-- 失败 -->
<image v-if="goods.is_pay.value == 0" class="steps_image" src="../../static/mine/icon_guanbi.png" mode=""></image>
<!-- 正常 -->
<!-- <image class="steps_image" src="../../static/mine/icon_one.png" mode=""></image> -->
</view>
<view class="steps_text">支付</view>
</view>
<!-- <view v-if="goods.is_pay.value == 1" class="li" :class="[goods.status.value > 0 ? 'red':'',goods.status.value == 0 ? 'active': '',goods.status.value < 0 ? 'wait': '']">
<view class="steps_img">
<image v-if="goods.status.value <= 0" class="steps_image" src="../../static/mine/icon_two.png" mode=""></image>
<image v-if="goods.status.value > 0" style="width: 31upx; height: 22upx;margin:17upx auto;" src="../../static/mine/icon_confirm.png" mode=""></image>
</view>
<view class="steps_text">待生产</view>
</view>
<view v-if="goods.is_pay.value == 0" class="li wait">
<view class="steps_img">
<image class="steps_image" src="../../static/mine/icon_two.png" mode=""></image>
</view>
<view class="steps_text">待生产</view>
</view> -->
<view class="li" style="width: calc(100% / 4);" :class="[goods.status.value > 1 ? 'red':'',goods.status.value == 1 ? 'active': '',goods.status.value < 1 ? 'wait': '']">
<view class="steps_img">
<image v-if="goods.status.value <= 1" class="steps_image" src="../../static/mine/icon_three.png" mode=""></image>
<image v-if="goods.status.value > 1" style="width: 31upx; height: 22upx;margin:17upx auto;" src="../../static/mine/icon_confirm.png" mode=""></image>
</view>
<view class="steps_text">打印</view>
</view>
<view class="li" style="width: calc(100% / 4);" :class="[goods.status.value > 8 ? 'red':'',goods.status.value == 8 ? 'active': '',goods.status.value < 8 ? 'wait': '']">
<view class="steps_img" >
<image v-if="goods.status.value <= 8" class="steps_image" src="../../static/mine/icon_four.png" mode=""></image>
<image v-if="goods.status.value > 8" style="width: 31upx; height: 22upx;margin:17upx auto;" src="../../static/mine/icon_confirm.png" mode=""></image>
</view>
<view class="steps_text">发货</view>
</view>
<view class="li" style="width: calc(100% / 4);" :class="[goods.status.value > 9 ? 'red':'',goods.status.value == 9 ? 'active': '',goods.status.value < 9 ? 'wait': '']">
<view class="steps_img" >
<image class="steps_image" src="../../static/mine/icon_five.png" mode=""></image>
</view>
<view class="steps_text">收货</view>
</view>
</view>
</view>
<!-- 单机版:定制、生产中、取货 -->
<view class="stepsmain" v-if="type == 2 && goods.status.value != 7 && goods.status.value != 3">
<view class="steps">
<!-- <view class="li red" style="width: calc(100% / 3);">
<view class="steps_img">
<image style="width: 31upx; height: 22upx;margin:17upx auto;" src="../../static/mine/icon_confirm.png" mode=""></image>
</view>
<view class="steps_text">定制</view>
</view> -->
<view class="li" style="width: calc(100% / 2);" :class="[goods.status.value > 1 ? 'red':'active']">
<view class="steps_img">
<image v-if="goods.status.value <= 1" class="steps_image" src="../../static/mine/icon_three.png" mode=""></image>
<image v-if="goods.status.value > 1" style="width: 31upx; height: 22upx;margin:17upx auto;" src="../../static/mine/icon_confirm.png" mode=""></image>
</view>
<view class="steps_text">打印</view>
</view>
<view class="li" style="width: calc(100% / 2);" :class="[goods.status.value > 1 ? 'active':'wait' ]">
<view class="steps_img">
<view style="text-align: center; line-height: 56upx; font-size: 22upx; font-weight: 500; color: #FFFFFF;"></view>
</view>
<view class="steps_text">取货</view>
</view>
</view>
</view>
<!-- --------------------------------------------------------------------------------------------------------------------------------------------------- -->
<!-- 必须先支付 goods.is_pay.value == 0未支付 1支付-->
<!-- goods.status.value 订单状态 0:等待生产,1:生产中,2: 生产完成,3:取消生产,4:出料中(弃用),5: 等待取料(弃用),
6:待入货(弃用),7:取货完成,8:已发货,9:订单完成 -->
<!-- 生产中 -->
<view style="position: relative;" v-if="goods.status.value <= 1 && type != 1">
<!-- 衣服 -->
<view v-if="goods.used_applets == '3' || goods.used_applets == '2'"
style="width: 300upx; min-height: 300upx; padding: 38upx 0; margin:0 auto 66upx; border-radius: 10upx;" @click="previewImg(goods,0)">
<!-- <image style="width: 206upx; padding: 38upx 0; height: 224upx; margin:auto; display: block;position: relative;" :src="goods.goods.front_image" mode="widthFix"></image>
<image style="width: 110upx; height: 255upx; position: absolute; top: 150upx; margin: auto;left: 0;right: 0;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_132'" mode="widthFix"></image> -->
<view v-if="editory" style="position: relative; margin: auto;" :style="{width: bgWidth +'px',height: bgHeight +'px'}">
<view :style="{background: goods.goods.design_color}" style="width: 95%; height: 95%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;"></view>
<!-- 背景图 -->
<image :src="goods.goods.front_image" :style="{width: bgWidth +'px',height: bgHeight +'px'}"
style="position: absolute; z-index: 1; top: 0;left: 0; right: 0; top: 0; margin: auto;"
mode="widthFix"></image>
<view :style="{width: editorWidth +'px',height: editorHeight +'px',top: editory +'px'}"
style="position: absolute;left: 0; right: 0; top: 0; margin: auto;" >
<image :style="{width: editorWidth +'px',height: editorHeight +'px'}"
:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_132'"
mode="widthFix" class="full-width full-height"></image>
</view>
</view>
</view>
<!-- 手机壳 -->
<!-- <view v-if="goods.used_applets == '4'" 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 v-if="goods.used_applets == '4'" style="width: 300upx; min-height: 300upx; margin:90upx auto 66upx; position: relative; border-radius: 10upx;">
<view style="width: 189upx; height:350upx; 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%; margin:auto; 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="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.wait.ranking == 0">生产中</text>
<text v-if="goods.wait.ranking > 0">排队中</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.wait.ranking == 0">作品正在加急生产,请留意最新的状态通知</text>
<text v-if="goods.wait.ranking > 0">还有{{goods.wait.ranking}}件作品正在打印中,请销等</text>
</text>
</view>
<view style="height: 172upx; text-align: center;">
<text v-if="type == 2" style="font-size: 36upx; line-height: 172upx;font-weight: bold;">
{{goods.order_queue.id || ''}}
</text>
</view>
<view style="margin-left: 216upx;">
<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
<text> 订单编号: </text> <text style="color: #888888;"> {{goods.id || ''}} </text>
</view>
<!-- <view v-if="type != 1" style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 24upx;">
<text> 设备编号: </text> <text style="color: #888888;"> {{goods.machine_id || ''}} </text>
</view> -->
<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 24upx;">
<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>
<!-- <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: 24upx;">
<text> 支付金额: </text> <text style="color: #888888;">{{goods.real_amount || ''}} </text>
</view>
<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 24upx;">
<text> 下单时间: </text> <text style="color: #888888;"> {{goods.create_time || ''}} </text>
</view>
</view>
</view>
<!-------------- 取货 ---------------------->
<view v-if="goods.status.value == 2 && type != 1">
<!-- 衣服 -->
<view v-if="goods.used_applets == '3' || goods.used_applets == '2'"
style="width: 300upx; min-height: 300upx; padding: 38upx 0; margin:0 auto 66upx; border-radius: 10upx;" @click="previewImg(goods,0)">
<view v-if="editory" style="position: relative; margin: auto;" :style="{width: bgWidth +'px',height: bgHeight +'px'}">
<view :style="{background: goods.goods.design_color}" style="width: 95%; height: 95%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;"></view>
<!-- 背景图 -->
<image :src="goods.goods.front_image" :style="{width: bgWidth +'px',height: bgHeight +'px'}"
style="position: absolute;z-index: 1; top: 0;left: 0; right: 0; top: 0; margin: auto;" mode="widthFix"></image>
<view :style="{width: editorWidth +'px',height: editorHeight +'px',top: editory +'px'}" style="position: absolute;left: 0; right: 0; top: 0; margin: auto;" >
<image :style="{width: editorWidth +'px',height: editorHeight +'px'}" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_132'" mode="widthFix" class="full-width full-height"></image>
</view>
</view>
</view>
<!-- 手机壳 -->
<view v-if="goods.used_applets == '4'" style="width: 300upx; min-height: 300upx; margin:90upx auto 66upx; position: relative; border-radius: 10upx;">
<view style="width: 189upx; height:350upx; 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%; margin:auto; 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="width: 337upx; margin:90upx auto 65upx;">
<image style="width: 337upx; height: 309upx;" src="../../static/mine/qy.png" mode="aspectFill"></image>
</view> -->
<view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;">
打印完成
</view>
<view style="font-size: 24upx; font-weight: 400; color: #CCCCCC; margin-top: 20upx; text-align: center;">
<text v-if="goods.used_applets == '3' || goods.used_applets == '2'" >取货后,揭开包装盒底部,有更多惊喜哦</text>
<text v-if="goods.used_applets == '4'" >色彩已冲印完成,请及时取走</text>
</view>
<view style="height: 162upx; text-align: center;">
<text v-if="type == 2" style="font-size: 36upx; line-height: 162upx;font-weight: bold;">
{{goods.order_queue.id || ''}}
</text>
</view>
<view style="margin-left: 216upx;">
<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
<text> 订单编号: </text> <text style="color: #888888;"> {{goods.id || ''}} </text>
</view>
<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 24upx;">
<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 v-if="type != 2" style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 24upx;">
<text> 支付金额: </text> <text style="color: #888888;">{{goods.real_amount || ''}} </text>
</view>
<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 24upx;">
<text> 下单时间: </text> <text style="color: #888888;"> {{goods.create_time || ''}} </text>
</view>
</view>
<!-- <view style="display: flex; align-items: center; justify-content: center;">
<view v-if="goods.used_applets == '3' || goods.used_applets == '2'"
style="width: 187upx; min-height: 187upx; border-radius: 10upx; padding: 23upx 0;"
:style="{background: goods.goods.design_color }" @click="previewImg(goods,0)">
<view v-if="editory" style="position: relative; margin: auto;" :style="{width: bgWidth +'px',height: bgHeight +'px'}">
<image :src="goods.goods.front_image" :style="{width: bgWidth +'px',height: bgHeight +'px'}"
style="position: absolute; top: 0;left: 0; right: 0; top: 0; margin: auto;"
mode="widthFix"></image>
<view :style="{width: editorWidth +'px',height: editorHeight +'px',top: editory +'px'}"
style="position: absolute;left: 0; right: 0; top: 0; margin: auto;" >
<image :style="{width: editorWidth +'px',height: editorHeight +'px'}"
:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_132'"
mode="widthFix" class="full-width full-height"></image>
</view>
</view>
</view>
<view v-if="goods.used_applets == '4'" style="width: 187upx; min-height: 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;">
<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
<text> 订单编号: </text>
<text style="color: #888888;"> {{goods.id}} </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 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 v-if="goods.status.value == 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="font-size: 24upx; font-weight: 400; color: #CCCCCC; margin-top: 20upx; text-align: center;">
<text v-if="goods.used_applets == '3' || goods.used_applets == '2'" >取货后,揭开包装盒底部,有更多惊喜哦</text>
<text v-if="goods.used_applets == '4'" >色彩已冲印完成,请及时取走</text>
</view>
<view style="height: 334upx; text-align: center;">
<text v-if="type == 2" style="font-size: 36upx; line-height: 162upx;font-weight: bold;">
{{goods.order_queue.id || ''}}
</text>
</view>
<view style="display: flex;align-items: center; justify-content: center;">
<!-- 衣服 -->
<view v-if="goods.used_applets == '3' || goods.used_applets == '2'"
style="width: 187upx; min-height: 187upx; border-radius: 10upx; padding: 23upx 0;" @click="previewImg(goods,0)">
<!-- <image style="width: 128upx; padding: 23upx 0; height: 141upx; margin:auto; display: block;position: relative;" :src="goods.goods.front_image" mode="widthFix"></image>
<image style="width: 47upx; height: 63upx; position: absolute; top: 61upx; left: 70upx;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_132'" mode="widthFix"></image> -->
<view v-if="editory" style="position: relative; margin: auto;" :style="{width: bgWidth +'px',height: bgHeight +'px'}">
<view :style="{background: goods.goods.design_color}" style="width: 95%; height: 95%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;"></view>
<image :src="goods.goods.front_image" :style="{width: bgWidth +'px',height: bgHeight +'px'}"
style="position: absolute;z-index: 1; top: 0;left: 0; right: 0; top: 0; margin: auto;" mode="widthFix"></image>
<view :style="{width: editorWidth +'px',height: editorHeight +'px',top: editory +'px'}" style="position: absolute;left: 0; right: 0; top: 0; margin: auto;" >
<image :style="{width: editorWidth +'px',height: editorHeight +'px'}" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_132'" mode="widthFix" class="full-width full-height"></image>
</view>
</view>
</view>
<!-- 手机壳 :style="{background: goods.goods.design_color }"-->
<view v-if="goods.used_applets == '4'" style="width: 187upx; position: relative; border-radius: 10upx;" @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 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>
</view>
<!-- <view v-if="type != 1" style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
<text> 设备编号: </text> <text style="color: #888888;"> {{goods.machine_id || ''}} </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>
<!-- <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 v-if="goods.status.value == 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 v-if="goods.used_applets == '3' || goods.used_applets == '2'"
style="width: 187upx; min-height: 187upx; border-radius: 10upx; padding: 23upx 0;" @click="previewImg(goods,0)">
<!-- <image style="width: 128upx; padding: 23upx 0; height: 141upx; margin:auto; display: block;position: relative;" :src="goods.goods.front_image" mode="widthFix"></image>
<image style="width: 47upx; height: 63upx; position: absolute; top: 61upx; left: 70upx;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_132'" mode="widthFix"></image> -->
<view v-if="editory" style="position: relative; margin: auto;" :style="{width: bgWidth +'px',height: bgHeight +'px'}">
<view :style="{background: goods.goods.design_color}" style="width: 95%; height: 95%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;"></view>
<image :src="goods.goods.front_image" :style="{width: bgWidth +'px',height: bgHeight +'px'}"
style="position: absolute;z-index: 1; top: 0;left: 0; right: 0; top: 0; margin: auto;"
mode="widthFix"></image>
<view :style="{width: editorWidth +'px',height: editorHeight +'px',top: editory +'px'}"
style="position: absolute;left: 0; right: 0; top: 0; margin: auto;" >
<image :style="{width: editorWidth +'px',height: editorHeight +'px'}"
:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_132'"
mode="widthFix" class="full-width full-height"></image>
</view>
</view>
</view>
<!-- 手机壳 :style="{background: goods.goods.design_color }"-->
<view v-if="goods.used_applets == '4'" 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 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>
</view>
<!-- <view v-if="type != 1" style="font-size: 24upx; font-weight: 400; color: #FFFFFF;margin-top: 15upx;">
<text> 设备编号: </text> <text style="color: #888888;"> {{goods.machine_id || ''}} </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>
<!-- <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 v-if="goods.used_applets == '3' || goods.used_applets == '2'" 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)">
<image style="width: 206upx; padding: 38upx 0; height: 224upx; margin:auto; display: block;position: relative;" :src="goods.goods.front_image" mode="widthFix"></image>
<!-- <image style="width: 75upx; height: 101upx; position: absolute; top: 98upx; left: 113upx;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_132'" mode="widthFix"></image> -->
<image style="width: 75upx; height: 101upx; position: absolute; top: 150upx; margin: auto;left: 0;right: 0;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_132'" mode="widthFix"></image>
</view>
<!-- 手机壳 -->
<view v-if="goods.used_applets == '4'" 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>
</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 v-if="goods.used_applets == '3' || goods.used_applets == '2'" style="width: 187upx; position: relative; border-radius: 10upx;" :style="{background: goods.goods.design_color }" @click="previewImg(goods,0)">
<image style="width: 128upx; padding: 23upx 0; height: 141upx; margin:auto; display: block;position: relative;" :src="goods.goods.front_image" mode="widthFix"></image>
<image style="width: 47upx; height: 63upx; position: absolute; top: 61upx; left: 70upx;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_132'" mode="widthFix"></image>
</view>
<!-- 手机壳 -->
<view v-if="goods.used_applets == '4'" 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>
</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 style="font-size: 24upx; font-weight: 400; color: #CCCCCC; text-align: center;">
<view v-if="goods.status.value == 3 && type != 1" @click="callPhone()">客服电话:0755-28307302</view>
</view> -->
</view>
</view>
<view style="margin-top: -50upx;text-align: center;color: #888888;font-size: 24upx; font-weight: 400;">
下拉可获取打印最新状态
</view>
</view>
</template>
<script>
import homeservice from '@/service/homeservice.js'
export default {
components: {},
computed: {},
data() {
return {
goods: {},
queryPage: {
s: 'Order.detail',
id: null
},
machine_id:null,
type:null ,//1:配送版,2:单机版,3:自助版
pixelRate:null,//屏幕宽度比率
bgHeight:null,
bgWidth:null,
editory:null,
editorWidth:null,
editorHeight:null,
zoomratio:null,
};
},
methods: {
callPhone (phone) {
uni.makePhoneCall({
phoneNumber: '0755-28307302'
})
},
previewImg(goods, index) {
let img = goods.works_image
uni.previewImage({
current: index,
urls: [img]
});
},
loadData() {
uni.showLoading({
title: '正在加载中...'
})
homeservice.WorksList(this.queryPage).then(result => {
this.goods = result
// <!-- result.status.value 订单状态 0:等待生产,1:生产中,2: 生产完成,3:取消生产,4:出料中(弃用),5: 等待取料(弃用),
// 6:待入货(弃用),7:取货完成,8:已发货,9:订单完成 -->
//result.type.value 1直营配送站 2 万能通用版 3色彩自助站
// result.status.value = 7
// result.type.value = 3
this.type = result.type.value
if(result.status.value == 0){
if(result.type.value == 1){
// wx.setNavigationBarTitle({title: '等待生产' })
wx.setNavigationBarTitle({title: '打印中' })
}
// 缩放比率
this.zoomratio = 103 / this.bgWidth
this.bgWidth = 103
}else if(result.status.value == 1){
wx.setNavigationBarTitle({title: '打印中' })
// 缩放比率
this.zoomratio = 103 / this.bgWidth
this.bgWidth = 103
}else if(result.status.value == 2){
wx.setNavigationBarTitle({title: '打印完成' })
if(result.type.value == 1){
wx.setNavigationBarTitle({title: '等待发货' })
}
// 缩放比率
this.zoomratio = 103 / this.bgWidth
this.bgWidth = 103
}else if(result.status.value == 3){
wx.setNavigationBarTitle({title: '订单取消' })
if(result.type.value == 1){
wx.setNavigationBarTitle({title: '等待发货' })
}
// 缩放比率
this.zoomratio = 64 / this.bgWidth
this.bgWidth = 64
}else if(result.status.value == 7){
wx.setNavigationBarTitle({title: '打印完成' })
if(result.type.value == 1){
wx.setNavigationBarTitle({title: '等待发货' })
}
// 缩放比率
this.zoomratio = 64 / this.bgWidth
this.bgWidth = 64
}else if(result.status.value == 8){
wx.setNavigationBarTitle({title: '已发货' })
}else if(result.status.value == 9){
wx.setNavigationBarTitle({title: '收货成功' })
}
// 读取背景图
uni.getImageInfo({
src: this.goods.goods.front_image,
success: (front_image) => {
this.bgHeight = front_image.height * (this.bgWidth / front_image.width) // 画布高度
this.editory = this.goods.goods.center_scale * (this.bgWidth / front_image.width) //设计图位置
console.log(this.editory)
}
})
this.editorWidth = this.goods.goods.design_width * this.pixelRate * this.zoomratio
this.editorHeight = this.goods.goods.design_height * this.pixelRate * this.zoomratio
uni.hideLoading();
uni.stopPullDownRefresh();
}).catch(err => {
uni.hideLoading();
uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
});
}
},
onPullDownRefresh() {
this.editory = null
// 获取屏幕宽高
var that = this
wx.getSystemInfo({
success: function(res) {
that.pixelRate = res.windowWidth / 750 // 屏幕宽度比率
that.bgWidth = res.windowWidth // 画布宽度
that.bgHeight = res.windowHeight // 画布高度 高度比率
that.loadData();
},
})
},
onLoad(options) {
console.log(options)
// orderId=161104445900004798&type=null&machine_id=100028
this.queryPage.id = options.orderId
this.type = options.type
this.machine_id = options.machine_id
// 获取屏幕宽高
var that = this
wx.getSystemInfo({
success: function(res) {
that.pixelRate = res.windowWidth / 750 // 屏幕宽度比率
that.bgWidth = res.windowWidth // 画布宽度
that.bgHeight = res.windowHeight // 画布高度 高度比率
that.loadData();
},
})
},
onShow() {
},
onUnload() {
// 色彩公园
let pages = getCurrentPages();
if(pages[pages.length - 2].route == "pages/mine/order"){
// uni.switchTab({ url: '../index/mall'})
wx.navigateBack({
delta: 4
})
}else if(pages[pages.length - 2].route == "pages/index/mall"){
uni.switchTab({ url: '../index/mall'})
}else if(pages[pages.length - 2].route == "pages/index/index"){
uni.navigateTo({url: '../mall/machineDetail?machine_id=' + this.machine_id});
}else if(pages[pages.length - 2].route == "pages/mine/myorder"){
uni.navigateTo({url: 'pages/mine/myorder'});
}else{
uni.switchTab({ url: '../index/mine'})
}
}
};
</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: #5CE6B5;
border: 1upx solid #5CE6B5;
}
.steps .li.red .steps_img{
background: #F56464;
border: 1upx solid #F56464;
}
/*连接线*/
.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: #F56464;
}
.steps .li.red ~ .li.active:after {
background-color: #F56464;
}
.steps .li.red ~ .li.wait:after {
background-color: #F56464;
}
.steps .li.active ~ .li.wait:after {
background-color: #5CE6B5;
}
.steps .li.wait ~ .li.wait:after {
background-color: #B6B6B6;
}
</style>
<template>
<view class="qiun-columns">
<!-- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
<view class="qiun-title-dot-light">饼状图</view>
</view> -->
<view class="qiun-charts">
<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
</view>
</view>
</template>
<script>
import uCharts from '@/js_sdk/u-charts/u-charts.js';
var _self;
var canvaPie = null;
export default {
data() {
return {
cWidth: '',
cHeight: '',
pixelRatio: 1,
serverData: '',
}
},
onLoad() {
_self = this;
this.cWidth = uni.upx2px(750);
this.cHeight = uni.upx2px(500);
this.getServerData();
},
methods: {
getServerData() {
let Pie = {
series: [
{"name": "黄色","data": 50,color: "#ffa974"},
{"name": "白色","data": 30,color: "#8543e0"},
{"name": "粉色","data": 20,color: "#90ed7d"},
{"name": "黑色","data": 18,color: "#ffa974"},
{"name": "蓝色","data": 8,color: "#2fc25b"},
]
};
_self.showPie("canvasPie", Pie);
},
showPie(canvasId, chartData) {
canvaPie = new uCharts({
$this: _self,
canvasId: canvasId,
type: 'pie',
fontSize: 11,
background: '#FFFFFF',
pixelRatio: _self.pixelRatio,
series: chartData.series,
animation: true,
width: _self.cWidth * _self.pixelRatio,
height: _self.cHeight * _self.pixelRatio,
legend:false,//图例设置,是否显示图表下方各类别的标识
dataLabel: false,//是否在图表中显示数据标签内容值
dataPointShape: false,//是否在图表中显示数据点图形标识
extra: {
pie: {
lableWidth: 15
}
},
});
},
touchPie(e) {
canvaPie.showToolTip(e, {
format: function(item) {
//console.log(item)
return item.name + ':' + item.data
}
});
},
}
}
</script>
<style>
page {
background: #F2F2F2;
width: 750upx;
overflow-x: hidden;
}
.qiun-padding {
padding: 2%;
width: 96%;
}
.qiun-wrap {
display: flex;
flex-wrap: wrap;
}
.qiun-rows {
display: flex;
flex-direction: row !important;
}
.qiun-columns {
display: flex;
flex-direction: column !important;
}
.qiun-common-mt {
margin-top: 10upx;
}
.qiun-bg-white {
background: #FFFFFF;
}
.qiun-title-bar {
width: 96%;
padding: 10upx 2%;
flex-wrap: nowrap;
}
.qiun-title-dot-light {
border-left: 10upx solid #0ea391;
padding-left: 10upx;
font-size: 32upx;
color: #000000
}
.qiun-charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
.charts {
width: 750upx;
height: 500upx;
background-color: #FFFFFF;
}
</style>
static/home_icon_default_no.png

20.6 KB | W: | H:

static/home_icon_default_no.png

4.13 KB | W: | H:

static/home_icon_default_no.png
static/home_icon_default_no.png
static/home_icon_default_no.png
static/home_icon_default_no.png
  • 2-up
  • Swipe
  • Onion skin
static/icon_default_no.png

20.6 KB | W: | H:

static/icon_default_no.png

4.13 KB | W: | H:

static/icon_default_no.png
static/icon_default_no.png
static/icon_default_no.png
static/icon_default_no.png
  • 2-up
  • Swipe
  • Onion skin
static/icon_diy_anime_style.png

37.3 KB | W: | H:

static/icon_diy_anime_style.png

7.54 KB | W: | H:

static/icon_diy_anime_style.png
static/icon_diy_anime_style.png
static/icon_diy_anime_style.png
static/icon_diy_anime_style.png
  • 2-up
  • Swipe
  • Onion skin
static/icon_diy_enhance_style.png

34.7 KB | W: | H:

static/icon_diy_enhance_style.png

6.02 KB | W: | H:

static/icon_diy_enhance_style.png
static/icon_diy_enhance_style.png
static/icon_diy_enhance_style.png
static/icon_diy_enhance_style.png
  • 2-up
  • Swipe
  • Onion skin
static/icon_diy_matting_style.png

28.8 KB | W: | H:

static/icon_diy_matting_style.png

5.31 KB | W: | H:

static/icon_diy_matting_style.png
static/icon_diy_matting_style.png
static/icon_diy_matting_style.png
static/icon_diy_matting_style.png
  • 2-up
  • Swipe
  • Onion skin
static/icon_diy_sketch_style.png

17.5 KB | W: | H:

static/icon_diy_sketch_style.png

4 KB | W: | H:

static/icon_diy_sketch_style.png
static/icon_diy_sketch_style.png
static/icon_diy_sketch_style.png
static/icon_diy_sketch_style.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -5,8 +5,8 @@ if(!accountInfo.miniProgram.envVersion){
const baseApi = {
//开发版
develop: "https://kxz.refinecolor.com",
//develop: "https://print.kexiaozhan.cn",
//develop: "https://kxz.refinecolor.com",
develop: "https://print.kexiaozhan.cn",
//体验版
trial: "https://kxz.refinecolor.com",
//正式版
......
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