Skip to content

W
wechat_currency
Commit ad6e9815 by huahua
Options

修改

parent a1dc8ef5
Showing with 4397 additions and 1119 deletions
components/toolbar/toolbar.vue 0 → 100644
<template>
<view class="toolbar" :class="{'toolbar-black': theme === 'dark'}">
<view class="tool-section">
<view class="tool-item" v-for="(item, index) in toolArr" :key="index">
<block v-if="item.url === 'share'">
<button open-type="share" class="tool-btn">
<image class="icon" :src="item.select?item.selectIcon:item.icon" mode="aspectFit"></image>
<text class="title" :class="{'title-select': item.select}">{{item.title}}</text>
</button>
</block>
<block v-else>
<button @click="toolItemAction(index)" class="tool-btn">
<image class="icon" :src="item.select?item.selectIcon:item.icon" mode="aspectFit"></image>
<text class="title" :class="{'title-select': item.select}">{{item.title}}</text>
</button>
</block>
</view>
</view>
<view>
<!-- 颜色 -->
<scroll-view style="box-sizing: border-box; white-space: nowrap; margin: 10upx 0;" scroll-x scroll-with-animation >
<view style="text-align: center; display: inline-block;" class="t-alternative__item" v-for="(item,index) in colorList" :key="index">
<view style="width: 67upx;height: 67upx; display: flex; align-items: center; justify-content: center;"
:style="{ backgroundColor: item.color}"
@click="selectColor(item,index)">
<image v-if="index == selectColorIndex" src="../../static/mine/icon_confirm.png" mode=""
style="width: 31upx; height: 22upx;"></image>
</view>
</view>
</scroll-view>
</view>
<view class="pen-section">
<view style="display: flex; align-items: center; justify-content: center;">
<!-- <view class="pen" :style="{backgroundColor: penColor, height: lineWidth}"></view>
<view class="triangle-right"
:style="{'border-top': (lineValue / 2) + 'px solid transparent',
'border-left': lineValue + 'px solid' + penColor,
'border-bottom': (lineValue / 2) + 'px solid transparent',}"></view> -->
<view style="font-size: 25upx; margin-right: 16upx; color: #FFFFFF;">画笔大小</view>
</view>
<slider min="1" max="20" :value="lineValue" block-size="25" activeColor="#FFFFFF" class="pen-slider" @change="penWidthChange"/>
<!-- <view class="pen-txt">{{lineWidth}}</view> -->
</view>
</view>
</template>
<script>
export default {
props: {
theme: {
type: String,
default () {
return 'light';
}
},
toolArr: {
type: Array,
default () {
return [
{
title: '清空',
icon: '../../static/png/tool_clear.png',
selectIcon: '../../static/png/tool_clear_s.png',
select: false,
url: 'clear'
}, {
title: '橡皮',
icon: '../../static/png/tool_eraser.png',
selectIcon: '../../static/png/tool_eraser_s.png',
select: false,
url: 'eraser'
}, {
title: '画笔',
icon: '../../static/png/tool_pen.png',
selectIcon: '../../static/png/tool_pen_s.png',
select: true,
url: 'pen'
}, {
title: '颜色',
icon: '../../static/png/tool_color.png',
selectIcon: '../../static/png/tool_color_s.png',
select: false,
url: 'color'
}, {
title: '保存',
icon: '../../static/png/tool_download.png',
selectIcon: '../../static/png/tool_download_s.png',
select: false,
url: 'save'
}, {
title: '矩形',
icon: '../../static/png/tool_rect.png',
selectIcon: '../../static/png/tool_rect_s.png',
select: false,
url: 'hollowRect'
}, {
title: '圆形',
icon: '../../static/png/tool_circle.png',
selectIcon: '../../static/png/tool_circle_s.png',
select: false,
url: 'hollowCircle'
}, {
title: '矩形',
icon: '../../static/png/tool_rect_solid.png',
selectIcon: '../../static/png/tool_rect_solid_s.png',
select: false,
url: 'rect'
}, {
title: '圆形',
icon: '../../static/png/tool_circle_solid.png',
selectIcon: '../../static/png/tool_circle_solid_s.png',
select: false,
url: 'circle'
}, {
title: '分享',
icon: '../../static/png/tool_share.png',
selectIcon: '../../static/png/tool_share_s.png',
select: false,
url: 'share'
}
]
}
},
penColor: {
type: String,
default () {
return '#000';
}
}
},
data() {
return {
lineWidth: '6px',
lineValue: 6,
colorList:[
{
color: '#000',
index: '01'
},{
color: '#7f2a3f',
index: '01'
}, {
color: '#e24187',
index: '03'
}, {
color: '#f5305d',
index: '04'
}, {
color: '#de4156',
index: '05'
}, {
color: '#fe42cd',
index: '06'
}, {
color: '#f48b9a',
index: '07'
}, {
color: '#ec8191',
index: '08'
}, {
color: '#f9aeb5',
index: '09'
}, {
color: '#f21d5f',
index: '10'
}, {
color: '#cc3739',
index: '11'
}, {
color: '#dd5047',
index: '12'
}, {
color: '#e24187',
index: '13'
}, {
color: '#fa6449',
index: '14'
}, {
color: '#e8495b',
index: '15'
}, {
color: '#fb7162',
index: '16'
}, {
color: '#f6afd1',
index: '17'
}, {
color: '#fbb6b9',
index: '18'
}, {
color: '#db6f27',
index: '21'
}, {
color: '#ed702e',
index: '22'
}, {
color: '#f99627',
index: '23'
}, {
color: '#eb8926',
index: '24'
}, {
color: '#edc3aa',
index: '25'
}, {
color: '#e1d8cf',
index: '26'
}, {
color: '#deebc5',
index: '27'
}, {
color: '#fccdc7',
index: '28'
}, {
color: '#dbbdd2',
index: '29'
}, {
color: '#e8a321',
index: '31'
}, {
color: '#db6f27',
index: '32'
}, {
color: '#edb74b',
index: '33'
}, {
color: '#e8b741',
index: '34'
}, {
color: '#fef052',
index: '35'
}, {
color: '#ffd684',
index: '36'
}, {
color: '#e2d958',
index: '37'
}, {
color: '#e2e5d0',
index: '38'
}, {
color: '#ba9431',
index: '41'
}, {
color: '#797f5d',
index: '42'
}, {
color: '#536d50',
index: '43'
}, {
color: '#d8b53f',
index: '44'
}, {
color: '#d4c172',
index: '45'
}, {
color: '#32b75c',
index: '46'
}, {
color: '#90D15B',
index: '47'
}, {
color: '#c5d52a',
index: '48'
}, {
color: '#e8e098',
index: '49'
}, {
color: '#1b6661',
index: '50'
}, {
color: '#3b4f4d',
index: '51'
}, {
color: '#336559',
index: '52'
}, {
color: '#01776e',
index: '53'
}, {
color: '#2e7662',
index: '54'
}, {
color: '#439877',
index: '55'
}, {
color: '#0ba066',
index: '56'
}, {
color: '#318488',
index: '57'
}, {
color: '#6fd3c9',
index: '58'
}, {
color: '#b9d3ac',
index: '59'
}, {
color: '#0e898e',
index: '61'
}, {
color: '#317194',
index: '62'
}, {
color: '#029bc7',
index: '63'
}, {
color: '#2a8ec9',
index: '64'
}, {
color: '#57c9d3',
index: '65'
}, {
color: '#65b3df',
index: '67'
}, {
color: '#8bd0d7',
index: '68'
}, {
color: '#4B4881',
index: '69'
}, {
color: '#77A1CB',
index: '70'
}, {
color: '#3051BB',
index: '71'
}, {
color: '#2E41A7',
index: '72'
}, {
color: '#704CAE',
index: '73'
}, {
color: '#385BD1',
index: '74'
}, {
color: '#E0DFED',
index: '75'
}, {
color: '#A6BDE9',
index: '76'
}, {
color: '#B3B9DD',
index: '77'
}, {
color: '#7942A8',
index: '81'
}, {
color: '#8F52BA',
index: '82'
}, {
color: '#9680C0',
index: '83'
}, {
color: '#CD82BB',
index: '84'
}, {
color: '#8E2A80',
index: '85'
}, {
color: '#E24CB0',
index: '86'
}, {
color: '#CC2A75',
index: '87'
}, {
color: '#ED89D2',
index: '88'
}, {
color: '#F562B6',
index: '89'
}, {
color: '#8B3B32',
index: '91'
}, {
color: '#593A35',
index: '92'
}, {
color: '#7A3C2D',
index: '93'
}, {
color: '#7D2E21',
index: '94'
}, {
color: '#935A47',
index: '95'
}, {
color: '#A05047',
index: '96'
}, {
color: '#E39476',
index: '97'
}, {
color: '#4E3F3C',
index: '98'
}, {
color: '#5A4939',
index: '99'
}, {
color: '#EDE8EC',
index: '100'
}, {
color: '#C0813A',
index: '101'
}, {
color: '#77432E',
index: '102'
}, {
color: '#C17748',
index: '103'
}, {
color: '#C7AC39',
index: '104'
}, {
color: '#DBA179',
index: '107'
}, {
color: '#D8D3D0',
index: '109'
}, {
color: '#091A22',
index: '120'
}, {
color: '#CA3A32',
index: '121'
}, {
color: '#FAAB60',
index: '122'
}, {
color: '#CADEAD',
index: '123'
}, {
color: '#C7D858',
index: '124'
}, {
color: '#F264D0',
index: '125'
}, {
color: '#F77ADC',
index: '126'
}, {
color: '#FAE7D9',
index: '131'
}, {
color: '#E6D9D1',
index: '132'
}, {
color: '#EBCDB1',
index: '133'
}, {
color: '#E2DCCC',
index: '134'
}, {
color: '#FAD9D2',
index: '135'
}, {
color: '#E1C2BD',
index: '136'
}, {
color: '#E5BBCF',
index: '137'
}, {
color: '#F7BACC',
index: '138'
}, {
color: '#E9CBC1',
index: '139'
}, {
color: '#EBB89F',
index: '140'
}, {
color: '#E6D09E',
index: '141'
}, {
color: '#E2B78D',
index: '142'
}, {
color: '#D1E4EB',
index: '143'
}, {
color: '#B9D9EE',
index: '144'
}, {
color: '#CFD0E2',
index: '145'
}, {
color: '#CECFF0',
index: '146'
}, {
color: '#D6C3E3',
index: '147'
}, {
color: '#E3F0C5',
index: '163'
}, {
color: '#DAD792',
index: '164'
}, {
color: '#D4D4BC',
index: '166'
}, {
color: '#C0D0AB',
index: '167'
}, {
color: '#D7C6A8',
index: '169'
}, {
color: '#D9E9E8',
index: '171'
}, {
color: '#B4E0C7',
index: '172'
}, {
color: '#D6E2BA',
index: '173'
}, {
color: '#E3E5D0',
index: '174'
}, {
color: '#C1D39A',
index: '175'
}, {
color: '#AFE4E6',
index: '178'
}, {
color: '#92DDE2',
index: '179'
}, {
color: '#DBE0E6',
index: '182'
}, {
color: '#8FBFF0',
index: '183'
}, {
color: '#9DCDE1',
index: '185'
}, {
color: '#BBC4BF',
index: '196'
}, {
color: '#E484A9',
index: '198'
}, {
color: '#BBC4BF',
index: 'GG3'
}, {
color: '#494A4C',
index: 'CG9'
}, {
color: '#C2CEDA',
index: 'BG1'
}, {
color: '#C1C3D3',
index: 'BG3'
}, {
color: '#8696A3',
index: 'BG5'
}, {
color: '#646A76',
index: 'BG7'
}, {
color: '#415361',
index: 'BG9'
}, {
color: '#DFDEE3',
index: 'WG.5'
}, {
color: '#CBC6CC',
index: 'WG1'
}, {
color: '#B6B0B2',
index: 'WG2'
}, {
color: '#C5BBBA',
index: 'WG3'
}, {
color: '#958A92',
index: 'WG4'
}, {
color: '#837477',
index: 'WG5'
}, {
color: '#8A7E7E',
index: 'WG6'
}, {
color: '#4D4342',
index: 'WG9'
}
],
selectColorIndex:0
}
},
methods: {
// 常用颜色选择
selectColor(color,index) {
this.selectColorIndex = index
this.$emit('colorPickTap', color);
},
toolItemAction (index) {
this.$emit('toolItemTap', index);
},
penWidthChange (e) {
// console.log('滑块滚动:' + JSON.stringify(e));
this.lineWidth = e.detail.value + 'px';
this.lineValue = e.detail.value;
this.$emit('penWidthChange', this.lineValue);
}
}
}
</script>
<style lang="scss">
.toolbar {
background-color: #282932;
height: 264upx;
padding-bottom: 70upx;
.tool-section {
display: flex;
flex-wrap: wrap;
height: 75upx;
justify-content: space-between;
.tool-item {
width: 20%;
height: 100%;
.tool-btn {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
.icon {
width: 26upx;
height: 27upx;
}
.title {
font-size: 25upx;
margin-left: 8upx;
color: #FFFFFF;
}
.title-select {
color: #F56364;
}
}
}
}
.pen-section {
display: flex;
justify-content: center;
align-items: center;
padding: 0 30upx;
height: 75upx;
width: calc(100% - 60upx);
overflow-x: hidden;
// .pen {
// width: 80upx;
// border-radius: 5upx 0 0 5upx;
// }
// .triangle-right {
// width: 0;
// height: 0;
// border-top: 50px solid transparent;
// border-left: 100px solid red;
// border-bottom: 50px solid transparent;
// }
.pen-slider {
width: 75%;
margin: auto;
}
// .pen-txt {
// font-size: 28upx;
// }
}
}
.toolbar-black {
background-color: #202d1c;
}
.t-alternative__item {
// margin-left: 12upx;
width: 67upx;
height: 67upx;
// border-radius: 50%;
overflow: hidden;
}
.t-alternative__item-content {
width: 67upx;
height: 67upx;
display: flex;
align-items: center;
justify-content: center;
}
.t-alternative__item:active {
transition: all 0.3s;
transform: scale(1.1);
}
wx-slider .wx-slider-handle-wrapper{
height:20rpx;
}
button {
padding: 0upx;
margin: 0upx;
border: none;
border-radius: 0upx;
box-sizing: border-box;
background-color: transparent;
}
button.button-hover {
transform: translate(3rpx, 3rpx);
background-color: transparent;
}
button::after {
border: none
}
</style>
main.js
...@@ -6,6 +6,7 @@ import nothing from './util/nothing' ...@@ -6,6 +6,7 @@ import nothing from './util/nothing'
import AppContext from './util/AppContext' import AppContext from './util/AppContext'
import Env from './util/Env' import Env from './util/Env'
import base from './util/base.js' import base from './util/base.js'
import http from './util/http.js';
import './css/uni.css' import './css/uni.css'
import './css/main.css' import './css/main.css'
...@@ -17,6 +18,7 @@ Vue.prototype.$nothing = nothing ...@@ -17,6 +18,7 @@ Vue.prototype.$nothing = nothing
Vue.prototype.$AppContext = AppContext Vue.prototype.$AppContext = AppContext
Vue.prototype.$Env = Env Vue.prototype.$Env = Env
Vue.prototype.$base = base Vue.prototype.$base = base
Vue.prototype.$http = http
App.mpType = 'app' App.mpType = 'app'
......
pages.json
{ {
"pages": [ "pages": [
/* { /*{
"path": "pages/index/mall", "path": "pages/index/mall",
"style": { "style": {
"navigationBarTitleText": "色彩高尔夫", "navigationBarTitleText": "色彩高尔夫",
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
"enablePullDownRefresh": true "enablePullDownRefresh": true
} }
}, */ }, */
/* { /*{
"path": "pages/index/machineDetail", "path": "pages/index/machineDetail",
"style": { "style": {
"navigationBarTitleText": "色彩高尔夫", "navigationBarTitleText": "色彩高尔夫",
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
"enablePullDownRefresh": true "enablePullDownRefresh": true
} }
} */ } */
{ {
"path": "pages/index/machineDetail", "path": "pages/index/machineDetail",
"style": { "style": {
...@@ -25,7 +24,6 @@ ...@@ -25,7 +24,6 @@
} }
}, },
{ {
"path": "pages/index/index", "path": "pages/index/index",
"style": { "style": {
...@@ -39,8 +37,8 @@ ...@@ -39,8 +37,8 @@
"globalStyle": { "globalStyle": {
"navigationBarTextStyle": "#ffffff", "navigationBarTextStyle": "#ffffff",
"navigationBarTitleText": "定制", "navigationBarTitleText": "定制",
"navigationBarBackgroundColor": "#141319", "navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#141319" "backgroundColor": "#ffffff"
}, },
"subPackages": [{ "subPackages": [{
"root": "pages/login", "root": "pages/login",
...@@ -54,31 +52,34 @@ ...@@ -54,31 +52,34 @@
{ {
"root": "pages/mall", "root": "pages/mall",
"pages": [ "pages": [
/* {
"path": "machineDetail",
"style": {
"navigationBarTitleText": "色彩站详情",
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
}, */
{ {
"path": "lineUp", "path": "lineUp",
"style": { "style": {
"navigationBarTitleText": "排队列表", "navigationBarTitleText": "排队列表",
"enablePullDownRefresh": true "enablePullDownRefresh": true,
"navigationStyle": "custom"
} }
} }
] ]
}, },
{ {
"root": "pages/mine", "root": "pages/mine",
"pages": [{ "pages": [
{
"path": "self_help_payment_details", "path": "self_help_payment_details",
"style": { "style": {
"navigationBarTitleText": "打印" "navigationBarTitleText": "打印"
} }
}, },
{
"path": "self_help_payment_details_new",
"style": {
"navigationBarTitleText": "打印"
}
},
{ {
"path": "order", "path": "order",
"style": { "style": {
......
pages/index/css/css.css
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
} }
.noData_title { .noData_title {
color: #FFFFFF; color: #333333;
text-align: center; text-align: center;
font-size: 36upx; font-size: 36upx;
} }
...@@ -39,8 +39,8 @@ ...@@ -39,8 +39,8 @@
height: 70upx; height: 70upx;
line-height: 70upx; line-height: 70upx;
text-align: center; text-align: center;
color: #F56364; color: #F29F3D ;
margin:140upx auto 0; margin:140upx auto 0;
border: 1upx solid #F56364; border: 1upx solid #F29F3D;
border-radius: 35upx; border-radius: 35upx;
} }
\ No newline at end of file
pages/index/head/head.vue
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<view :style="{ height: height + 'px', background:background}" style="position: fixed; z-index: 888;"> <view :style="{ height: height + 'px', background:background}" style="position: fixed; z-index: 888;">
<view class="head" :style="{ height: height + 'px', background:background}"> <view class="head" :style="{ height: height + 'px', background:background}">
<view class="back" @click="back" v-if="backShow" :style="{ top: top + 'px', color:color }"> <view class="back" @click="back" v-if="backShow" :style="{ top: top + 'px', color:color }">
<image src="../../../static/recommend/icon_back.png" mode="aspectFit" <image src="../../../static/recommend/icon_back_black.png" mode="aspectFit"
style="width: 23upx; height: 39upx; margin-top: calc((32px - 39upx)/2);margin-left: auto; margin-right: auto;"></image> style="width: 32upx; height: 32upx; margin-top: calc((32px - 39upx)/2);margin-left: auto; margin-right: auto;"></image>
</view> </view>
<view class="title" v-if="titleShow" :style="{ top: top + 'px', color:color, 'font-size': size + 'rpx' }">{{title}}</view> <view class="title" v-if="titleShow" :style="{ top: top + 'px', color:color, 'font-size': size + 'rpx' }">{{title}}</view>
</view> </view>
......
pages/index/index.vue
<template> <template>
<view class="full-width content-color full-height" style="overflow: hidden;"> <view class="full-width content-color full-height" style="overflow: hidden;background: #FFFFFF; ">
<!-- 自定义头部 --> <!-- 自定义头部 -->
<!-- <myhead :worksid="works_id" :title="titlename" :color="'#fff'" :titleShow="true" :backShow="true" :background="'none'"></myhead> --> <!-- <myhead :worksid="works_id" :title="titlename" :color="'#fff'" :titleShow="true" :backShow="true" :background="'none'"></myhead> -->
<myhead :worksid="works_id" :title="titlename" :color="'#fff'" :titleShow="true" :backShow="true" <myhead :worksid="works_id" :title="titlename" :color="'#131319'" :titleShow="true" :backShow="true"
:background="'#131319'"></myhead> :background="'#fff'"></myhead>
<!-- 登录弹框 --> <!-- 登录弹框 -->
<Signin ref="Signin"></Signin> <Signin ref="Signin"></Signin>
...@@ -12,35 +12,41 @@ ...@@ -12,35 +12,41 @@
<view class="full-width content-color full-height" style="background: black;" v-show="state"> <view class="full-width content-color full-height" style="background: black;" v-show="state">
<kps-image-cutter @ok="onok" @cancel="oncancle" ref="index" :properties="properties"></kps-image-cutter> <kps-image-cutter @ok="onok" @cancel="oncancle" ref="index" :properties="properties"></kps-image-cutter>
</view> </view>
<!-- 设计区域 --> <!-- 设计区域 -->
<view v-show="!state" class="full-width content-color full-height" :style="{background: design_color }" > <view v-show="!state" class="full-width content-color full-height" :style="{background: design_color }"
style=" ">
<!-- margin-top: 170upx; -->
<!-- 取消选中 --> <!-- 取消选中 -->
<view class="full-width full-height" style="position: absolute; top: 0; left: 0;" @click.stop="itemCancel"> <view class="full-width full-height" style="position: absolute; top: 0; left: 0;" @click.stop="itemCancel">
</view> </view>
<view class="container" :style="{height: data.windowHeight +'px'}" @click='itemCancel' <view class="container" @click='itemCancel' @touchmove.stop="touchMove" @touchend.stop="touchEnd"
@touchmove.stop="touchMove" @touchend.stop="touchEnd" > style="justify-content:center;">
<!-- :style="{height: data.windowHeight + 'px'}" -->
<!-- style="background: #aa0000; height: 1000upx; " -->
<!-- :style="{height: data.windowHeight +'400px'}" -->
<!-- style=" display:flex; <!-- style=" display:flex;
justify-content:center;" --> justify-content:center;" -->
<!-- margin-top: 100upx; --> <!-- margin-top: 100upx; -->
<view :style="{width: data.bgWidth +'px',height: data.bgHeight +'px' }" style="position: relative; " > <!--view style="width: 100%; height: 80upx; background: #FFFFFF;"></view> -->
<view :style="{width: data.bgWidth +'px',height: data.bgHeight +'px' }" style="position: relative; ">
<!-- background: #ffaa00; -->
<!-- 底图 --> <!-- 底图 -->
<image :src="data.bgImage_old" mode="widthFix" <image :src="data.bgImage_old" mode="widthFix"
:style="{width: data.bgWidth +'px',height: data.bgWidth +'px'}" :style="{width: data.bgWidth +'px',height: data.bgWidth +'px'}"
style="position: absolute; z-index: 0; top: 0; bottom: 0; margin: auto; "></image> style="position: absolute; z-index: 0; top: 0; bottom: 0; margin: auto;"></image>
<!-- background: #007AFF; -->
<!-- 底色 --> <!-- 底色 -->
<!--<view :style="{width: data.editorWidth * 1.1 +'px',height: data.editorHeight * 1.1 +'px', <!--<view :style="{width: data.editorWidth * 1.1 +'px',height: data.editorHeight * 1.1 +'px',
background:background_color ? background_color : ''}" background:background_color ? background_color : ''}"
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 1;"> style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 1;">
</view> --> </view> -->
<!-- 底色 --> <!-- 底色 -->
<view :style="{width: data.editorWidth + 'px',height: data.editorHeight +'px', <view :style="{width: data.editorWidth + 'px',height: data.editorHeight +'px',
background:background_color ? background_color : ''}" background:background_color ? background_color : ''}"
style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 1;"> style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;margin: auto;z-index: 1;">
</view> </view>
<!-- 遮罩图 --> <!-- 遮罩图 -->
<image :src="data.bgImage" mode="widthFix" <image :src="data.bgImage" mode="widthFix"
:style="{width: data.bgWidth +'px',height: data.bgWidth +'px'}" :style="{width: data.bgWidth +'px',height: data.bgWidth +'px'}"
...@@ -244,6 +250,14 @@ ...@@ -244,6 +250,14 @@
style="width: 89upx; height: 88upx;"></image> style="width: 89upx; height: 88upx;"></image>
</view> </view>
</view> </view>
<!-- 切换商品 -->
<!-- <view :class="operation" v-if="!active && !guide_left" @click="changeGoods()"
style="display:flex;z-index: 99;position: fixed; left: 0; bottom:300upx; ">
<image src="../../static/icon_change_good.png" mode="aspectFill"
style="width: 84upx; height: 98upx;"></image>
</view> -->
<!-- 拖拽删除图库 --> <!-- 拖拽删除图库 -->
<view v-if="delete_wrap_state" class="delete-wrap" :class="{'delete-wrap-active':deleteWrap}" <view v-if="delete_wrap_state" class="delete-wrap" :class="{'delete-wrap-active':deleteWrap}"
:animation="animationData"> :animation="animationData">
...@@ -290,28 +304,41 @@ ...@@ -290,28 +304,41 @@
<!-- 菜单栏目 --> <!-- 菜单栏目 -->
<view v-if="!active && !guide_left" class="toolRight"> <view v-if="!active && !guide_left" class="toolRight">
<view class="tool_li"> <view class="tool_li">
<view class="tool_li" @click="showPopup(99)">
<image class="tool_li_img" src="../../static/icon_diy_shoucang.png" mode=""></image>
<view class="tool_li_text">收藏</view>
</view>
<view class="tool_li" @click="showPopup(23)">
<image class="tool_li_img" src="../../static/icon_diy_wallpaper.png" mode=""></image>
<view class="tool_li_text">壁纸</view>
</view>
<view class="tool_li" @click="showPopup(2)"> <view class="tool_li" @click="showPopup(2)">
<image class="tool_li_img" src="../../static/icon/icon_stickers.png" mode=""></image> <image class="tool_li_img" src="../../static/icon/icon_stickers.png" mode=""></image>
<view class="tool_li_text">贴图素材</view> <view class="tool_li_text">贴图素材</view>
</view> </view>
<view class="tool_li" @click="showPopup(28)"> <view class="tool_li" @click="showPopup(24)" v-if="surface_type != 1">
<image class="tool_li_img" src="../../static/icon_make_diy_uplaod_image.png" mode=""></image> <image class="tool_li_img" src="../../static/icon_make_diy_uplaod_image.png" mode=""></image>
<view class="tool_li_text">背景底色</view> <view class="tool_li_text">背景底色</view>
</view> </view>
<!-- <view class="tool_li" @click="showPopup(28)">
<image class="tool_li_img" src="../../static/icon_make_diy_uplaod_image.png" mode=""></image>
<view class="tool_li_text">背景底色</view>
</view> -->
<view class="tool_li" @click="showone = !showone"> <view class="tool_li" @click="showone = !showone">
<image @click="cancel('share')" class="tool_li_img" <image @click="cancel('share')" class="tool_li_img"
src="../../static/icon_make_diy_back_color.png" mode=""></image> src="../../static/icon_make_diy_back_color.png" mode=""></image>
<view @click="cancel()" class="tool_li_text">上传图片</view> <view @click="cancel()" class="tool_li_text">照片</view>
</view> </view>
<view class="tool_li" @click="showPopup(3)">
<!-- <view class="tool_li" @click="showone = !showone" v-if="system_config.golf_diy.value == 1"> <image class="tool_li_img" src="../../static/icon_diy_typeface.png"
<image @click="cancel('share')" class="tool_li_img" src="../../static/icon/icon_zuopin.png" mode=""></image> style="width: 45upx; height: 40upx;" mode=""></image>
<view @click="cancel('share')" class="tool_li_text">上传相片</view> <view @click="cancel()" class="tool_li_text">文字</view>
</view> --> </view>
<view class="tool_li" @click="showPopup(3)" v-if="system_config.golf_diy.value == 1"> <view class="tool_li" @click="ontuya()" v-if="machine_id">
<image class="tool_li_img" src="../../static/icon/icon_typeface.png" mode=""></image> <image class="tool_li_img" style="width: 62upx; height: 55upx;" src="../../static/icon_tuya.png"
<view class="tool_li_text">添加文字</view> mode=""></image>
<view class="tool_li_text">涂鸦</view>
</view> </view>
<view class="tool_li" @click="wallpaperOnclick()" v-if="machine_id"> <view class="tool_li" @click="wallpaperOnclick()" v-if="machine_id">
<image class="tool_li_img" style="width: 71upx; height: 59upx;" <image class="tool_li_img" style="width: 71upx; height: 59upx;"
...@@ -323,7 +350,7 @@ ...@@ -323,7 +350,7 @@
src="../../static/diy_icon_middle_default.png" mode=""></image> src="../../static/diy_icon_middle_default.png" mode=""></image>
<view class="tool_li_text">移除图片</view> <view class="tool_li_text">移除图片</view>
</view> </view>
<view class="tool_li" style="height: 77upx;" v-if="background_color" <view class="tool_li" style="height: 70upx;" v-if="background_color"
@click.stop="background_color = null"> @click.stop="background_color = null">
<image class="tool_li_img" style="width: 51upx; height: 51upx;" <image class="tool_li_img" style="width: 51upx; height: 51upx;"
src="../../static/diy_icon_replace_default.png" mode=""></image> src="../../static/diy_icon_replace_default.png" mode=""></image>
...@@ -343,6 +370,9 @@ ...@@ -343,6 +370,9 @@
</view> --> </view> -->
</view> </view>
</view> </view>
<tuya ref="tuya" @tuyaimg="tuyaimg"></tuya>
<!-- 菜单栏目 --> <!-- 菜单栏目 -->
<view v-if="active && !guide_left" class="toolRight"> <view v-if="active && !guide_left" class="toolRight">
<view class="tool_li" @click.stop='deleteItem'> <view class="tool_li" @click.stop='deleteItem'>
...@@ -364,19 +394,18 @@ ...@@ -364,19 +394,18 @@
</view> </view>
</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" <view @click.stop="createWorks" hover-class="hover-class-bg"
:class="['tool_add',!machine_id ? 'grey' : '']">立即下单</view> :class="['tool_add',!machine_id ? 'grey' : '']">立即下单</view>
</view> </view>
<!-- 单指可拖拽 --> <!-- 单指可拖拽 -->
<view v-if="!guide_left && data.itemList.length > 0" <!-- && data.itemList.length > 0 -->
style="position: fixed; left:34.5upx; font-size: 25upx; top: 0; color: #FFFFFF;" <view v-if="!guide_left "
:style="{ top: textHeight + 'px'}"> style="position: fixed; font-size: 22upx; color: #999999; bottom: 340upx;left: 50%;transform: translate(-50%, 0%);z-index: 999; ">
<view>单指可拖拽</view> <view>可用单指拖动，双指缩放</view>
<view>双指可缩放</view> <!-- <view>双指可缩放</view>
<view>双击可裁剪</view> <view>双击可裁剪</view> -->
</view> </view>
...@@ -440,9 +469,6 @@ ...@@ -440,9 +469,6 @@
</view> </view>
</uni-popup> </uni-popup>
<!-- 文本，贴图，相框 1模板 2贴图 3字体 4编辑 22添加相框 --> <!-- 文本，贴图，相框 1模板 2贴图 3字体 4编辑 22添加相框 -->
<uni-popup ref="showshare" :type="type" @change="change" <uni-popup ref="showshare" :type="type" @change="change"
style="position: relative; z-index: 9998; width: 100%;" :style="{height: data.windowHeight +'px'}"> style="position: relative; z-index: 9998; width: 100%;" :style="{height: data.windowHeight +'px'}">
...@@ -482,7 +508,7 @@ ...@@ -482,7 +508,7 @@
</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"> v-if="e_active == 2 || e_active == 23 || e_active == 99 ">
<scroll-view class="scroll-container" <scroll-view class="scroll-container"
:style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}" scroll-y :style="{height: (data.windowHeight - 188 * data.pixelRate) +'px'}" scroll-y
scroll-with-animation v-if="brands.length > 0" :scroll-into-view="'s' + currentIndex"> scroll-with-animation v-if="brands.length > 0" :scroll-into-view="'s' + currentIndex">
...@@ -512,10 +538,7 @@ ...@@ -512,10 +538,7 @@
</view> </view>
<!-- material_series_list 二级分类 --> <!-- material_series_list 二级分类 -->
<!-- <view style="font-size: 40upx;color: #007AFF;">11111{{ material_series_list.length}}<view> --> <!-- <view style="font-size: 40upx;color: #007AFF;">11111{{ material_series_list.length}}<view> -->
<view id="classification" v-if="e_active == 2 || e_active == 23 || e_active == 99"
<view id="classification" v-if="e_active == 2 || (e_active == 23 && !backgroundColor)"
style="width: 100%; position: relative; z-index: 99; "> style="width: 100%; position: relative; z-index: 99; ">
<view style="overflow: hidden;" v-if="material_series_list.length > 0"> <view style="overflow: hidden;" v-if="material_series_list.length > 0">
<view <view
...@@ -528,16 +551,17 @@ ...@@ -528,16 +551,17 @@
</view> </view>
<!-- 特效添加相框 --> <!-- 特效添加相框 -->
<!-- <shapeScrollView v-if="e_active == 22" ref="shapeScrollView" @Worksdetail="Worksdetail" <!-- <shapeScrollView v-if="e_active == 22" ref="shapeScrollView" @Worksdetail="Worksdetail"
:windowHeight="(data.windowHeight * 0.8 - 160 * data.pixelRate)"></shapeScrollView> --> :windowHeight="(data.windowHeight * 0.8 - 160 * data.pixelRate)"></shapeScrollView> -->
<!-- 贴图 --> <!-- 贴图 -->
<scrollList v-if="(e_active == 2 || e_active == 23) && !backgroundColor" ref="scrollList" <scrollList v-if=" e_active == 2 || e_active == 23 || e_active == 99 " ref="scrollList"
@Worksdetail="Worksdetail" :classificationHeight="classificationHeight" @Worksdetail="Worksdetail" :classificationHeight="classificationHeight"
:windowHeight="(data.windowHeight - 210 * data.pixelRate)"></scrollList> :windowHeight="(data.windowHeight - 210 * data.pixelRate)"></scrollList>
<!-- 背景颜色 --> <!-- 背景颜色 -->
<bgColor v-if="e_active == 28 && backgroundColor" ref="bgColor" <bgColor v-if="e_active == 24 && backgroundColor" ref="bgColor"
@bgColorAssembly="bgColorAssembly" :classificationHeight="classificationHeight" @bgColorAssembly="bgColorAssembly" :classificationHeight="classificationHeight"
:windowHeight="(data.windowHeight)"> :windowHeight="(data.windowHeight)">
</bgColor> </bgColor>
</view> </view>
</view> </view>
</uni-popup> </uni-popup>
...@@ -564,6 +588,10 @@ ...@@ -564,6 +588,10 @@
</view> </view>
</view> </view>
</uni-popup> </uni-popup>
<switchGoods ref="switchGoods" @selectGoodItem="selectGoodItem"></switchGoods>
<!--商品弹框 -->
</view> </view>
</view> </view>
</template> </template>
...@@ -582,6 +610,10 @@ ...@@ -582,6 +610,10 @@
import drag from './js/drag.js'; // 封装 import drag from './js/drag.js'; // 封装
import bgColor from './components/bgColor.vue'; // 相框 import bgColor from './components/bgColor.vue'; // 相框
import myhead from './head/head.vue'; // 页眉 import myhead from './head/head.vue'; // 页眉
import switchGoods from '../index/switchGoods.vue'; //选择商品
import tuya from './tuya.vue'; //
/* 色彩公园图片 DIY 功能页 */ /* 色彩公园图片 DIY 功能页 */
var app = getApp(); // 当前APP实例 var app = getApp(); // 当前APP实例
var items = []; // 当前显示的图片列表 var items = []; // 当前显示的图片列表
...@@ -601,11 +633,25 @@ ...@@ -601,11 +633,25 @@
Signin, Signin,
textsettings, textsettings,
bgColor, bgColor,
myhead myhead,
switchGoods,
tuya,
}, },
computed: {}, computed: {},
data() { data() {
return { return {
collection_currentId: 0, //点赞选中Id
collection_currentIndex: null, //点赞选中坐标
wallpaper_currentId: 0, //壁纸选中Id
wallpaper_currentIndex: null, //壁纸选中坐标
wallpaper_material_series_currentId: null, //壁纸系列选中
mapping_currentId: 0, //贴图选中Id
mapping_currentIndex: null, //贴图选中坐标
mapping_material_series_currentId: null, //贴纸系列选中
classificationHeight: 0, classificationHeight: 0,
backgroundColor: false, //控制底色 backgroundColor: false, //控制底色
Adlists: [], Adlists: [],
...@@ -617,6 +663,7 @@ ...@@ -617,6 +663,7 @@
type: '', type: '',
content: '底部弹出 popup', content: '底部弹出 popup',
active: false, active: false,
currentId: 0, currentId: 0,
/* 控制被选中 */ /* 控制被选中 */
currentIndex: null, currentIndex: null,
...@@ -629,6 +676,14 @@ ...@@ -629,6 +676,14 @@
/* 控制被选中 */ /* 控制被选中 */
currentIndex_Material: null, currentIndex_Material: null,
/* 控制位置 */ /* 控制位置 */
currentId_wallpaper: 0,
/* 控制被选中 */
currentIndex_wallpaper: null,
/* 控制位置 */
material_series_currentId: null,
/* 控制位置 */
brands: [], //贴图分类 brands: [], //贴图分类
e_active: null, //判断弹框是贴图还是文本 e_active: null, //判断弹框是贴图还是文本
addtext: false, //判断加减文字 addtext: false, //判断加减文字
...@@ -656,7 +711,6 @@ ...@@ -656,7 +711,6 @@
is_new: null, //最新 is_new: null, //最新
is_hot: null, //热门 is_hot: null, //热门
goods_id: null, //商品id goods_id: null, //商品id
// is_recommend:'1',//推荐
is_under: 0, //贴图是否为背景图 is_under: 0, //贴图是否为背景图
partner_id: null partner_id: null
}, },
...@@ -745,6 +799,8 @@ ...@@ -745,6 +799,8 @@
material_series_list: [], //系列分类 material_series_list: [], //系列分类
material_series_currentId: 0, material_series_currentId: 0,
}; };
}, },
created() { //设备信息 created() { //设备信息
...@@ -754,7 +810,89 @@ ...@@ -754,7 +810,89 @@
// this.textTop = menuButtonInfo.top; // this.textTop = menuButtonInfo.top;
}, },
methods: { methods: {
// 壁纸推荐
//涂鸦
ontuya() {
this.$nextTick(() => {
this.$refs['tuya'].open({
data: this.data
})
})
},
//添加涂鸦
tuyaimg(e) {
console.log(e)
let index = items.length;
items.push({
support_zoom: 1, // 0是不支持缩放，为1时支持缩放
support_drag: 1, // 0是不支持拖动，为1时支持拖动
is_under: 0, //贴图是否为背景图
is_discount: 0, //贴图是否用0
id: index + 1,
type: 2, //0为图片，1为文字，2为素材
material_id: 0,
original_id: 0,
index: index,
font_family: '',
font_style: '',
font_size: '',
font_color: '',
under_color: '',
content: e, // 图片地址
top: this.editor_top - this.data.editorHeight / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: this.data.editorWidth / 2 - this.data.editorWidth /
2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: this.data.editorWidth / 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
y: this.editor_top,
scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例
oScale: 1, // 缩放比例 1为不缩放
angle: 0, // 旋转角度
rotate: 0, // 旋转值
active: false, // 判定点击状态
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, // 图片原始宽度
initialHeight: this.data.editorHeight, // 图片原始高度
frame_left: null, // 裁剪窗口x
image_left: null, // 图片x
frame_top: null, // 裁剪窗口y
image_top: null, // 图片y
})
this.data.itemList = items
this.saveSnapshot();
},
//切换商品
changeGoods() {
this.$refs['switchGoods'].open(this.machine_id);
},
//选择商品进来
selectGoodItem(item) {
items = [];
this.data.itemList = [];
this.data.goods_id = item.id;
snapshot = []; // 操作历史记录清空
snapshotIndex = -1;
// 获取产品详情数据
this.goodslist()
},
//壁纸推荐
wallpaperOnclick() { wallpaperOnclick() {
var that = this var that = this
homeservice.queryList({ homeservice.queryList({
...@@ -770,7 +908,6 @@ ...@@ -770,7 +908,6 @@
uni.getImageInfo({ uni.getImageInfo({
src: result.url, src: result.url,
success: (image) => { success: (image) => {
// 清空历史记录 // 清空历史记录
items = []; // 当前显示的图片列表 items = []; // 当前显示的图片列表
index = 0; // 所点击的图片的索引 index = 0; // 所点击的图片的索引
...@@ -822,12 +959,10 @@ ...@@ -822,12 +959,10 @@
under_color: '', under_color: '',
content: result.url, // 贴图地址 content: result.url, // 贴图地址
top: that.editor_top - height / 2, // 初始图片Y坐标，根据画布高/2-图片高/2 top: that.editor_top - height / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
// top: this.data.editorHeight / 2 - height / 2, // 初始图片Y坐标，根据画布高/2-图片高/2
left: that.data.editorWidth / 2 - width / left: that.data.editorWidth / 2 - width /
2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离 2, // 初始图片X坐标,因为div是相对定位，所以计算是要多减一次移动的距离
x: that.data.editorWidth / x: that.data.editorWidth /
2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出 2, // 初始圆心位置，可再downImg之后又宽高和初始的图片位置得出
// y: this.data.editorHeight / 2,
y: that.editor_top, y: that.editor_top,
scale: 1, // 缩放比例 1为不缩放 scale: 1, // 缩放比例 1为不缩放
lastScale: 1, // 上一次的绽放比例 lastScale: 1, // 上一次的绽放比例
...@@ -1198,7 +1333,8 @@ ...@@ -1198,7 +1333,8 @@
let user_id = userService.getUserInfo().id || 0 let user_id = userService.getUserInfo().id || 0
var _this = this var _this = this
wx.request({ wx.request({
url: _this.$Env.getDevBaseURL() + '/api/AliossSign/getSign?machine_id=' + machine_id +'&user_id=' + user_id, url: _this.$Env.getDevBaseURL() + '/api/AliossSign/getSign?machine_id=' + machine_id +
'&user_id=' + user_id,
method: 'GET', method: 'GET',
data: '', data: '',
header: { header: {
...@@ -1223,6 +1359,8 @@ ...@@ -1223,6 +1359,8 @@
'callback': atter.callback, 'callback': atter.callback,
}, },
success: function(res) { success: function(res) {
//console.log(res);
//console.log("上传图片"+successUp+"res.statusCode="+res.statusCode)
successUp++; successUp++;
if (res.statusCode != 200) { if (res.statusCode != 200) {
// console.log({errCode: '599', msg:'其他错误'}) // console.log({errCode: '599', msg:'其他错误'})
...@@ -1243,11 +1381,15 @@ ...@@ -1243,11 +1381,15 @@
let top = 0 let top = 0
let lef = 0 let lef = 0
let ratio = image.width / image.height let ratio = image.width / image.height
let ratiowidth = (_this.data.editorWidth *_this.mix_scale) / image.width let ratiowidth = (_this.data.editorWidth *
let ratioheight = (_this.data.editorHeight * _this.mix_scale) /image.height _this.mix_scale) / image.width
let ratioheight = (_this.data
.editorHeight * _this.mix_scale) /
image.height
// console.log(_this.mix_scale) // console.log(_this.mix_scale)
// if (ratio >= 1) { //长方形 // if (ratio >= 1) { //长方形
width = _this.data.editorWidth * _this.mix_scale width = _this.data.editorWidth * _this
.mix_scale
height = image.height * ratiowidth height = image.height * ratiowidth
// if (height / 2 > _this.editor_top) { // if (height / 2 > _this.editor_top) {
// width = width * (_this.editor_top * 2 / height) // width = width * (_this.editor_top * 2 / height)
...@@ -1733,7 +1875,7 @@ ...@@ -1733,7 +1875,7 @@
this.$refs['showshare'].close() this.$refs['showshare'].close()
var that = this var that = this
if (this.e_active == 1) { if (this.e_active == 1) {
if (items.length > 0) { if (items.length > 0) { //模板
uni.showModal({ uni.showModal({
title: '温馨提示', title: '温馨提示',
content: '更换当前模版会清空DIY区域内容，确认要更新吗？', content: '更换当前模版会清空DIY区域内容，确认要更新吗？',
...@@ -1744,16 +1886,17 @@ ...@@ -1744,16 +1886,17 @@
if (res.confirm) { if (res.confirm) {
that.Worksdetaildata(item) that.Worksdetaildata(item)
} else if (res.cancel) { } else if (res.cancel) {
} }
} }
}); });
} else { } else {
that.Worksdetaildata(item) that.Worksdetaildata(item)
} }
} else if (this.e_active == 2) { } else if (this.e_active == 2 || this.e_active == 23) {
//''console.log("进来壁纸")
that.Worksdetaildata(item) that.Worksdetaildata(item)
} else if (this.e_active == 22) { } else if (this.e_active == 22) { //特效
// console.log(item) // console.log(item)
this.shape_image = item.image this.shape_image = item.image
this.shape_id = item.id this.shape_id = item.id
...@@ -1762,13 +1905,17 @@ ...@@ -1762,13 +1905,17 @@
// console.log(this.data.itemList.length) // console.log(this.data.itemList.length)
this.showone = !this.showone this.showone = !this.showone
} }
} else if (this.e_active == 99) {
that.Worksdetaildata(item)
} }
}, },
Worksdetaildata(item) { Worksdetaildata(item) { //this.e_active 1模板 2贴图 3字体 4编辑 22添加相框
let s_data = 'Works' let s_data = 'Works'
if (this.e_active == 1) { if (this.e_active == 1) {
items = [] items = []
} else if (this.e_active == 2) { } else if (this.e_active == 2 || this.e_active == 23) {
s_data = 'Material'
} else if (this.e_active == 99) {
s_data = 'Material' s_data = 'Material'
} }
uni.showLoading({ uni.showLoading({
...@@ -1850,18 +1997,26 @@ ...@@ -1850,18 +1997,26 @@
this.data.itemList = items this.data.itemList = items
this.saveSnapshot(); this.saveSnapshot();
uni.hideLoading(); uni.hideLoading();
} else if (this.e_active == 2) { //贴图 } else if (this.e_active == 2 || this.e_active == 23 || this.e_active == 99) { //贴图
uni.showLoading({ uni.showLoading({
title: '加载中...', title: '加载中...',
mask: true mask: true
}) })
let index = items.length;
// 读取主图遮罩 // 读取主图遮罩
uni.getImageInfo({ uni.getImageInfo({
src: result.url, src: result.url,
success: (image) => { success: (image) => {
if (this.e_active == 23) {
// 清空历史记录
items = []; // 当前显示的图片列表
index = 0; // 所点击的图片的索引
snapshot = []; // 操作历史记录清空
snapshotIndex = -1;
}
uni.hideLoading() uni.hideLoading()
// console.log(image) let index = items.length;
let width = 0 let width = 0
let height = 0 let height = 0
let top = 0 let top = 0
...@@ -1871,14 +2026,13 @@ ...@@ -1871,14 +2026,13 @@
let ratioheight = (this.data.editorHeight * this.mix_scale) / image let ratioheight = (this.data.editorHeight * this.mix_scale) / image
.height .height
let resultmix_scale = result.mix_scale || 1 let resultmix_scale = result.mix_scale || 1
// console.log(this.mix_scale) if (ratio >= 1) { //长方形
// if (ratio >= 1) { //长方形 width = this.data.editorWidth * this.mix_scale * resultmix_scale
width = this.data.editorWidth * this.mix_scale * resultmix_scale height = image.height * ratiowidth * resultmix_scale
height = image.height * ratiowidth * resultmix_scale } else if (ratio < 1) { //长高方形
// } else if (ratio < 1) { //窄高方形 height = this.data.editorHeight * this.mix_scale * resultmix_scale
// height = this.data.editorHeight * this.mix_scale * resultmix_scale width = image.width * ratioheight * resultmix_scale
// width = image.width * ratioheight * resultmix_scale }
// }
if (result.is_under == 1) { if (result.is_under == 1) {
let number_index = 0 let number_index = 0
for (var item of items) { for (var item of items) {
...@@ -1890,6 +2044,9 @@ ...@@ -1890,6 +2044,9 @@
} }
index = number_index index = number_index
} }
//this.isShowGif = true;
items.push({ items.push({
support_zoom: result.support_zoom, // 0是不支持缩放，为1时支持缩放 support_zoom: result.support_zoom, // 0是不支持缩放，为1时支持缩放
support_drag: result.support_drag, // 0是不支持拖动，为1时支持拖动 support_drag: result.support_drag, // 0是不支持拖动，为1时支持拖动
...@@ -1939,17 +2096,27 @@ ...@@ -1939,17 +2096,27 @@
frame_top: null, // 裁剪窗口y frame_top: null, // 裁剪窗口y
image_top: null, // 图片y image_top: null, // 图片y
}) })
// 提示用户此贴图可用卷
if (result.is_discount == '1') {
if (this.$base.coupon_flag_desc == '') return;
uni.showToast({
title: this.$base.coupon_flag_desc,
icon: 'none',
duration: 2000,
mask: false
});
}
this.data.itemList = items
this.saveSnapshot();
}, },
fail: function(err) { fail: function(err) {
uni.hideLoading() uni.hideLoading()
uni.showToast({ uni.showToast({
title: '加载失败', title: '图片不在以下 downloadFile 合法域名列表中',
icon: 'none' icon: 'none'
}); });
} }
}) })
this.data.itemList = items
this.saveSnapshot();
} }
}).catch(err => { }).catch(err => {
uni.hideLoading(); uni.hideLoading();
...@@ -2011,23 +2178,37 @@ ...@@ -2011,23 +2178,37 @@
}) })
} }
}, },
////打开弹框 1模板 2贴图 3字体 4编辑 22添加相框 23壁纸
material_series_handleScroll(index, item) { material_series_handleScroll(index, item) {
this.queryPage.page = 1 this.queryPage.page = 1
this.material_series_currentId = item.id this.material_series_currentId = item.id
this.queryPage.material_series_id = item.id this.queryPage.material_series_id = item.id
// if (this.e_active == 23) { //壁纸 if (this.e_active == 23) { //壁纸
this.wallpaper_material_series_currentId = item.id;
} else if (this.e_active == 2) { //贴图
this.mapping_material_series_currentId = item.id;
}
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['scrollList'].open({ this.$refs['scrollList'].open({
e: this.e_active, e: this.e_active,
queryPage: this.queryPage, queryPage: this.queryPage,
}) })
}) })
// }
}, },
handleScroll(index, item) { //选中 handleScroll(index, item) { //选中
this.queryPage.material_series_id = 0 this.queryPage.material_series_id = 0
this.material_series_currentId = 0 this.material_series_currentId = 0
this.backgroundColor = false this.backgroundColor = false
//判断系列
if (this.e_active == 23) {
this.wallpaper_material_series_currentId = 0;
} else if (this.e_active == 2) {
this.mapping_material_series_currentId = 0;
}
if (this.e_active == 1) { if (this.e_active == 1) {
// this.currentId_Works = index; // this.currentId_Works = index;
// this.currentIndex_Works = Math.max(0, index - 1); // this.currentIndex_Works = Math.max(0, index - 1);
...@@ -2047,22 +2228,22 @@ ...@@ -2047,22 +2228,22 @@
// this.queryPage.is_new = null // this.queryPage.is_new = null
// this.queryPage.works_category_id = item.id // this.queryPage.works_category_id = item.id
// } // }
// this.datalist = [] } else if (this.e_active == 2) { //贴图
// this.currentId = index;
// this.currentIndex = Math.max(0, index - 1);
// this.isLeft()
} else if (this.e_active == 2) {
this.currentId_Material = index; this.currentId_Material = index;
this.currentIndex_Material = Math.max(0, index - 1); this.currentIndex_Material = Math.max(0, index - 1);
this.Material_categorydatalist = [] this.Material_categorydatalist = []
this.queryPage.page = 1 this.queryPage.page = 1
this.Material_category_id = item.id this.Material_category_id = item.id
if (this.brands[this.currentId_Material].title == '热门') { if (this.brands[this.currentId_Material].title == '热门') {
this.queryPage.is_hot = 1 this.classificationHeight = 0
this.material_series_list = []
this.queryPage.is_hot = '1'
this.queryPage.is_new = null this.queryPage.is_new = null
this.queryPage.material_category_id = null this.queryPage.material_category_id = null
} else if (this.brands[this.currentId_Material].title == '最新') { } else if (this.brands[this.currentId_Material].title == '最新') {
this.queryPage.is_new = 1 this.classificationHeight = 0
this.material_series_list = []
this.queryPage.is_new = '1'
this.queryPage.is_hot = null this.queryPage.is_hot = null
this.queryPage.material_category_id = null this.queryPage.material_category_id = null
} else { } else {
...@@ -2072,27 +2253,29 @@ ...@@ -2072,27 +2253,29 @@
} }
this.currentId = index; this.currentId = index;
this.currentIndex = Math.max(0, index - 1); this.currentIndex = Math.max(0, index - 1);
/* if(this.brands[this.currentId_Material].title == '我的'){ if (this.brands[this.currentId_Material].title == '我的') {
this.classificationHeight = 0
this.material_series_list = []
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['scrollList'].open({ this.$refs['scrollList'].open({
e:this.e_active, e: this.e_active,
queryPage:{ queryPage: {
s: 'Material.myMaterial', s: 'Material.myMaterial',
page: 1, page: 1,
per_page: 50 per_page: 50
}, },
}) })
}) })
}else{ */ } else {
this.MaterialseriesList() this.MaterialseriesList()
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['scrollList'].open({ this.$refs['scrollList'].open({
e: this.e_active, e: this.e_active,
queryPage: this.queryPage, queryPage: this.queryPage,
})
}) })
}) }
/* } */ } else if (this.e_active == 22) { //相框
} else if (this.e_active == 22) {
this.currentId_Works = index; this.currentId_Works = index;
this.currentIndex_Works = Math.max(0, index - 1); this.currentIndex_Works = Math.max(0, index - 1);
this.Works_categorydatalist = [] this.Works_categorydatalist = []
...@@ -2104,9 +2287,9 @@ ...@@ -2104,9 +2287,9 @@
this.queryPage.shape_category_id = item.id this.queryPage.shape_category_id = item.id
this.currentId = index; this.currentId = index;
this.currentIndex = Math.max(0, index - 1); this.currentIndex = Math.max(0, index - 1);
this.$nextTick(() => { /* this.$nextTick(() => {
this.$refs['shapeScrollView'].open(this.queryPage) this.$refs['shapeScrollView'].open(this.queryPage)
}) }) */
} else if (this.e_active == 23) { //壁纸 } else if (this.e_active == 23) { //壁纸
this.currentId_wallpaper = index; this.currentId_wallpaper = index;
this.currentIndex_wallpaper = Math.max(0, index - 1); this.currentIndex_wallpaper = Math.max(0, index - 1);
...@@ -2114,10 +2297,14 @@ ...@@ -2114,10 +2297,14 @@
this.queryPage.page = 1 this.queryPage.page = 1
this.wallpaper_category_id = item.id //记录壁纸选中分类 this.wallpaper_category_id = item.id //记录壁纸选中分类
if (this.brands[this.currentId_wallpaper].title == '热门') { if (this.brands[this.currentId_wallpaper].title == '热门') {
this.classificationHeight = 0
this.material_series_list = []
this.queryPage.is_hot = '1' this.queryPage.is_hot = '1'
this.queryPage.is_new = null this.queryPage.is_new = null
this.queryPage.material_category_id = null this.queryPage.material_category_id = null
} else if (this.brands[this.currentId_wallpaper].title == '最新') { } else if (this.brands[this.currentId_wallpaper].title == '最新') {
this.classificationHeight = 0
this.material_series_list = []
this.queryPage.is_new = '1' this.queryPage.is_new = '1'
this.queryPage.is_hot = null this.queryPage.is_hot = null
this.queryPage.material_category_id = null this.queryPage.material_category_id = null
...@@ -2135,40 +2322,72 @@ ...@@ -2135,40 +2322,72 @@
queryPage: this.queryPage, queryPage: this.queryPage,
}) })
}) })
} else if (this.e_active == 99) { //收藏
this.currentId = index;
this.currentIndex = Math.max(0, index - 1);
//this.collection_currentId = this.currentId
//this.currentIndex = this.currentIndex;
this.collection_currentId = this.currentId;
this.collection_currentIndex = this.currentIndex;
this.$nextTick(() => {
setTimeout(function() {
this.$refs['scrollList'].open({
e: this.e_active,
queryPage: {
currentId: this.currentId,
},
})
}.bind(this), 500)
})
} }
}, },
MaterialseriesList() { //查询分类下二级分类 MaterialseriesList() { //查询分类下二级分类
this.material_series_list = [] this.material_series_list = []
console.log("this.material_series_currentId="+this.material_series_currentId);
homeservice.queryList({ homeservice.queryList({
s: 'Material.seriesList', s: 'Material.seriesList',
category_id: this.queryPage.material_category_id, category_id: this.queryPage.material_category_id,
}).then(result => { }).then(result => {
this.queryPage.material_series_id = null this.queryPage.material_series_id = 0
this.material_series_list = result this.material_series_list = result
//console.log("this.material_series_currentId=" + this.material_series_currentId);
//console.log("material_series_list="+this.material_series_list.length)
if (this.material_series_list.length > 0) { if (this.material_series_list.length > 0) {
if (this.e_active == 23) {
if (this.material_series_currentId == null || this.material_series_currentId == "") { if (this.wallpaper_material_series_currentId != 0) {
this.queryPage.material_series_id = this.wallpaper_material_series_currentId;
this.material_series_currentId = this.wallpaper_material_series_currentId
} else {
this.queryPage.material_series_id = this.material_series_list[0].id
this.material_series_currentId = this.material_series_list[0].id
}
} else if (this.e_active == 2) {
if (this.mapping_material_series_currentId != 0) {
this.queryPage.material_series_id = this.mapping_material_series_currentId
this.material_series_currentId = this.mapping_material_series_currentId
} else {
this.queryPage.material_series_id = this.material_series_list[0].id
this.material_series_currentId = this.material_series_list[0].id
}
} else {
this.queryPage.material_series_id = this.material_series_list[0].id this.queryPage.material_series_id = this.material_series_list[0].id
this.material_series_currentId = this.material_series_list[0].id this.material_series_currentId = this.material_series_list[0].id
} }
} let that = this
// console.log(result) setTimeout(function() {
let that = this var query = wx.createSelectorQuery();
setTimeout(function() { query.select('#classification').boundingClientRect();
var query = wx.createSelectorQuery(); query.exec(function(res) {
query.select('#classification').boundingClientRect(); that.classificationHeight = res[0].height
query.exec(function(res) { that.setData({
console.log(res) classificationHeight: that.classificationHeight
that.classificationHeight = res[0].height })
that.setData({ // console.log('height' + that.classificationHeight)
classificationHeight: that.classificationHeight
}) })
console.log(that.classificationHeight) }.bind(this), 100)
}) } else {
}.bind(this), 100) this.classificationHeight = 0
}
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.msg, title: err.msg,
...@@ -2176,10 +2395,15 @@ ...@@ -2176,10 +2395,15 @@
}); });
}); });
}, },
showPopup(e) { //打开弹框 1模板 2贴图 3字体
//this.queryPage.material_series_id = 0
//this.material_series_currentId = 0
//console.log("good_id="+this.data.goods_id) //打开弹框 1模板 2贴图 3字体 4编辑 22添加相框 23壁纸
showPopup(e) {
this.isShowGif = false;
this.material_series_list = []
this.queryPage.material_series_id = 0
this.material_series_currentId = 0
this.delete_wrap_state = false this.delete_wrap_state = false
this.showone = false this.showone = false
this.e_active = e this.e_active = e
...@@ -2187,33 +2411,154 @@ ...@@ -2187,33 +2411,154 @@
this.$refs['textsettingsshare'].close() this.$refs['textsettingsshare'].close()
this.queryPage.page = 1 this.queryPage.page = 1
if (e == 1) { //模板 if (e == 1) { //模板
// this.queryPage.goods_id = this.data.goods_id
// this.brands = this.Works_category } else if (e == 2) { //贴图
// this.currentId = this.currentId_Works; this.Adlists = this.diy_bannerList
// this.currentIndex = this.currentIndex_Works; this.queryPage.goods_id = this.data.goods_id
// this.queryPage.s = 'Works.list' this.brands = this.Material_category
// this.queryPage.material_category_id = null this.currentId = this.currentId_Material;
// this.queryPage.works_category_id = null this.currentIndex = this.currentIndex_Material;
// if (this.brands[this.currentId].title == '热门') { this.queryPage.s = 'Material.list'
// this.queryPage.is_hot = 1 this.queryPage.works_category_id = null
// this.queryPage.is_new = null this.queryPage.material_category_id = null
// } else if (this.brands[this.currentId].title == '最新') { if (this.brands[this.currentId].title == '热门') {
// this.queryPage.is_new = 1 this.queryPage.is_hot = '1'
// this.queryPage.is_hot = null this.queryPage.is_new = null
// } else { } else if (this.brands[this.currentId].title == '最新') {
// this.queryPage.is_hot = null this.queryPage.is_new = '1'
// this.queryPage.is_new = null this.queryPage.is_hot = null
// this.queryPage.works_category_id = this.Works_category[0].id } else {
// if (this.Works_category_id) { this.queryPage.is_hot = null
// this.queryPage.works_category_id = this.Works_category_id this.queryPage.is_new = null
// } this.queryPage.material_category_id = this.Material_category[0].id
// } if (this.Material_category_id) {
// this.datalist = [] this.queryPage.material_category_id = this.Material_category_id
// this.isLeft() }
}
if (this.mapping_material_series_currentId != 0) {
this.queryPage.material_series_id = this.mapping_material_series_currentId
this.material_series_currentId = this.mapping_material_series_currentId
}
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: e,
queryPage: this.queryPage,
})
})
} else if (e == 3) { //文本
index = null
this.addtext = true
this.data.currentText = ''
this.$nextTick(() => {
this.$refs['textsettings'].open({
data: this.data,
bg_text_color: this.bg_text_color
})
})
} else if (e == 4) { //文本
this.addtext = false
this.$nextTick(() => {
this.$refs['textsettings'].open({
data: this.data,
bg_text_color: this.bg_text_color
})
})
} else if (e == 22) { //形状
} else if (e == 23) { //壁纸
this.Adlists = this.diy_backList
this.queryPage.goods_id = this.data.goods_id
this.brands = this.wallpaper_category //壁纸分类
this.currentId = this.currentId_wallpaper; /* 控制被选中 */
this.currentIndex = this.currentIndex_wallpaper; /* 控制位置 */
this.queryPage.s = 'Material.list'
this.queryPage.works_category_id = null //作品选中分类id
this.queryPage.material_category_id = null //贴图选中分类
if (this.wallpaper_material_series_currentId != 0) {
this.queryPage.material_series_id = this.wallpaper_material_series_currentId
this.material_series_currentId = this.wallpaper_material_series_currentId
}
//console.log("brands="+this.currentId); /* this.brands.length */
if (this.brands[this.currentId].title == '热门') {
this.queryPage.is_hot = '1'
this.queryPage.is_new = null
} else if (this.brands[this.currentId].title == '最新') {
this.queryPage.is_new = '1'
this.queryPage.is_hot = null
} else {
this.queryPage.is_hot = null
this.queryPage.is_new = null
this.queryPage.material_category_id = this.wallpaper_category[0].id
if (this.wallpaper_category_id) {
this.queryPage.material_category_id = this.wallpaper_category_id
}
}
this.MaterialseriesList()
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: e,
queryPage: this.queryPage,
})
})
} else if (e == 24) {
this.Adlists = this.diy_bannerList
this.backgroundColor = true;
this.$nextTick(() => {
this.$refs['bgColor'].open()
})
} else if (e == 99) { //收藏
this.Adlists = this.diy_bannerList
this.brands = [{
icon: "../../static/icon/my.png",
icon_click: "../../static/icon/my-o.png",
title: "我的"
},
{
icon: "../../static/icon/icon_collection_@2x.png",
icon_click: "../../static/icon/icon_collection_@2x.png",
title: "收藏"
},
{
icon: "../../static/icon/icon_good@2x.png",
icon_click: "../../static/icon/icon_good@2x.png",
title: "点赞"
},
]
if (this.collection_currentId != 0) {
this.currentId = this.collection_currentId;
this.currentIndex = this.collection_currentIndex;
} else {
this.currentId = 0;
this.currentIndex = 0; /* 控制位置 */
}
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: e,
queryPage: {
currentId: this.currentId,
}
})
})
}
},
//打开弹框 1模板 2贴图 3字体
/*showPopup(e) {
this.delete_wrap_state = false
this.showone = false
this.e_active = e
this.togglePopup('bottom', 'share')
this.$refs['textsettingsshare'].close()
this.queryPage.page = 1
if (e == 1) { //模板
} else if (e == 2) { //贴图 } else if (e == 2) { //贴图
this.backgroundColor = false this.backgroundColor = false
this.Adlists = this.diy_bannerList this.Adlists = this.diy_bannerList
//this.queryPage.goods_id = this.data.goods_id
this.queryPage.goods_id = null; this.queryPage.goods_id = null;
this.brands = this.Material_category this.brands = this.Material_category
this.currentId = this.currentId_Material; this.currentId = this.currentId_Material;
...@@ -2235,18 +2580,6 @@ ...@@ -2235,18 +2580,6 @@
this.queryPage.material_category_id = this.Material_category_id this.queryPage.material_category_id = this.Material_category_id
} }
} }
/* if (this.brands[this.currentId].title == '我的') {
this.$nextTick(() => {
this.$refs['scrollList'].open({
e: this.e_active,
queryPage: {
s: 'Material.myMaterial',
page: 1,
per_page: 50
},
})
})
} else { */
this.MaterialseriesList() this.MaterialseriesList()
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['scrollList'].open({ this.$refs['scrollList'].open({
...@@ -2254,7 +2587,7 @@ ...@@ -2254,7 +2587,7 @@
queryPage: this.queryPage, queryPage: this.queryPage,
}) })
}) })
/* } */
} else if (e == 3) { //文本 } else if (e == 3) { //文本
index = null index = null
this.addtext = true this.addtext = true
...@@ -2293,14 +2626,13 @@ ...@@ -2293,14 +2626,13 @@
}) })
} else if (e == 23) { //壁纸 } else if (e == 23) { //壁纸
this.Adlists = this.diy_backList this.Adlists = this.diy_backList
// this.queryPage.goods_id = null
this.queryPage.goods_id = this.data.goods_id this.queryPage.goods_id = this.data.goods_id
this.brands = this.wallpaper_category //壁纸分类 this.brands = this.wallpaper_category //壁纸分类
this.currentId = this.currentId_wallpaper; /* 控制被选中 */ this.currentId = this.currentId_wallpaper; /* 控制被选中 */
this.currentIndex = this.currentIndex_wallpaper; /* 控制位置 */ /* this.currentIndex = this.currentIndex_wallpaper; /* 控制位置 */
this.queryPage.s = 'Material.list' /* this.queryPage.s = 'Material.list'
this.queryPage.works_category_id = null //作品选中分类id this.queryPage.works_category_id = null
this.queryPage.material_category_id = null //贴图选中分类 this.queryPage.material_category_id = null
if (this.brands[this.currentId].title == '热门') { if (this.brands[this.currentId].title == '热门') {
this.queryPage.is_hot = '1' this.queryPage.is_hot = '1'
this.queryPage.is_new = null this.queryPage.is_new = null
...@@ -2316,18 +2648,12 @@ ...@@ -2316,18 +2648,12 @@
} }
} }
this.MaterialseriesList() this.MaterialseriesList()
/* if(this.backgroundColor){
this.$nextTick(() => {
this.$refs['bgColor'].open()
})
}else{ */
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['scrollList'].open({ this.$refs['scrollList'].open({
e: e, e: e,
queryPage: this.queryPage, queryPage: this.queryPage,
}) })
}) })
/* } */
} else if (e == 25) { } else if (e == 25) {
this.Adlists = this.diy_bannerList this.Adlists = this.diy_bannerList
this.queryPage.goods_id = null this.queryPage.goods_id = null
...@@ -2367,7 +2693,8 @@ ...@@ -2367,7 +2693,8 @@
}.bind(this), 200) }.bind(this), 200)
}) })
} }
}, }, */
cancel(type) { //关闭弹框 cancel(type) { //关闭弹框
this.$refs['show' + type].close() this.$refs['show' + type].close()
this.addtext = false this.addtext = false
...@@ -2378,6 +2705,7 @@ ...@@ -2378,6 +2705,7 @@
} }
this.delete_wrap_state = true this.delete_wrap_state = true
}, },
typefaceshow(type) { //关闭弹框 typefaceshow(type) { //关闭弹框
// 获取当前选中的部件 // 获取当前选中的部件
var item = items[index]; var item = items[index];
...@@ -2398,7 +2726,11 @@ ...@@ -2398,7 +2726,11 @@
}) })
} }
}, },
change(e) {},
change(e) {
},
togglePopup(type, open) { //打开弹框 togglePopup(type, open) { //打开弹框
switch (type) { switch (type) {
case 'bottom': case 'bottom':
...@@ -2410,6 +2742,7 @@ ...@@ -2410,6 +2742,7 @@
this.$refs['show' + open].open() this.$refs['show' + open].open()
}) })
}, },
bgtextcolor() { bgtextcolor() {
this.bg_text_color = !this.bg_text_color this.bg_text_color = !this.bg_text_color
this.$nextTick(() => { this.$nextTick(() => {
...@@ -2419,7 +2752,8 @@ ...@@ -2419,7 +2752,8 @@
}) })
}) })
}, },
// 文本字体
//文本字体
typefaceClick(typeface) { typefaceClick(typeface) {
// 获取当前选中的部件 // 获取当前选中的部件
var item = items[index]; var item = items[index];
...@@ -2469,7 +2803,8 @@ ...@@ -2469,7 +2803,8 @@
} }
this.saveSnapshot(); this.saveSnapshot();
}, },
// 文本加粗
//文本加粗
workweight() { workweight() {
// 获取当前选中的部件 // 获取当前选中的部件
var item = items[index]; var item = items[index];
...@@ -2483,7 +2818,8 @@ ...@@ -2483,7 +2818,8 @@
} }
this.saveSnapshot(); this.saveSnapshot();
}, },
// 文本颜色
//文本颜色
workcolor(color) { workcolor(color) {
// 获取当前选中的部件 // 获取当前选中的部件
var item = items[index]; var item = items[index];
...@@ -2501,9 +2837,9 @@ ...@@ -2501,9 +2837,9 @@
} }
this.saveSnapshot(); this.saveSnapshot();
}, },
/** /**
* 通过旧坐标、旋转角度、圆心计算旋转后点的新坐标 * 通过旧坐标、旋转角度、圆心计算旋转后点的新坐标
*
* @param origin 原始坐标对象 * @param origin 原始坐标对象
* @param center 圆心坐标对象 * @param center 圆心坐标对象
* @param angle 旋转角度 * @param angle 旋转角度
...@@ -2527,7 +2863,6 @@ ...@@ -2527,7 +2863,6 @@
/** /**
* 通当新坐标、旋转角度、圆心计算旋转后点的旧坐标 * 通当新坐标、旋转角度、圆心计算旋转后点的旧坐标
*
* @param origin 原始坐标对象 * @param origin 原始坐标对象
* @param center 圆心坐标对象 * @param center 圆心坐标对象
* @param angle 旋转角度 * @param angle 旋转角度
...@@ -3115,19 +3450,22 @@ ...@@ -3115,19 +3450,22 @@
}, },
// 移除图片 // 移除图片
removedeleteItem(item, ix) { removedeleteItem(item, ix) {
//this.active = false;
//this.guide_left = false
index = items.length - 1 index = items.length - 1
items.splice(index, 1); // 删除指定的部件 items.splice(index, 1); // 删除指定的部件
this.setData({ this.setData({
'data': this.data 'data': this.data
}); });
this.saveSnapshot(); this.saveSnapshot();
this.active = false;
}, },
/* 删除部件 */ /* 删除部件 */
deleteItem: function(item, ix) { deleteItem: function(item, ix) {
// 当前选中的部件 // 当前选中的部件
var currentItem = items[index]; var currentItem = items[index];
// 判断删除的是否是模板组件 // 判断删除的是否是模板组件
if (currentItem.works_id) { if (currentItem.hasOwnProperty("works_id") && currentItem.works_id) {
this.data.works_idlenght-- this.data.works_idlenght--
} }
let zIndex = items[index].index; let zIndex = items[index].index;
...@@ -3198,7 +3536,7 @@ ...@@ -3198,7 +3536,7 @@
} else { } else {
this.text_await(e) this.text_await(e)
} }
}, },
async text_awaitone(e) { async text_awaitone(e) {
// 获取当前选中的部件 // 获取当前选中的部件
var item = items[index]; var item = items[index];
...@@ -3316,7 +3654,7 @@ ...@@ -3316,7 +3654,7 @@
}); });
} }
}, },
//设置数据 //设置数据
setData(obj) { setData(obj) {
let that = this; let that = this;
...@@ -3338,27 +3676,28 @@ ...@@ -3338,27 +3676,28 @@
}) })
}); });
}, },
// 获取产品详情数据 //获取产品详情数据
goodslist() { goodslist() {
this.front_image_long = false this.front_image_long = false
homeservice.queryList({ homeservice.queryList({
s: 'Product.detail', s: 'Product.detail',
id: this.data.goods_id id: this.data.goods_id
}).then(result => { }).then(result => {
/* homeservice.newqueryList({ this.titlename = result.alias_name //修改头部名称
s: 'Product.getDat' /*homeservice.newqueryList({
}).then(result => { */ s: 'Product.getDat'
}).then(result => { */
//this.data.goods_id = result.id // 商品id //this.data.goods_id = result.id // 商品id
// this.queryPage.goods_category_id = result.goods_category_id //星形接口列表增加，产品分类参数 //this.queryPage.goods_category_id = result.goods_category_id //星形接口列表增加，产品分类参数
// 读取背景图 //读取背景图
uni.getImageInfo({ uni.getImageInfo({
src: result.front_image_old, src: result.front_image_old,
success: (front_image) => { success: (front_image) => {
// this.data.bgHeight = (front_image.height + 600) * (this.data.bgWidth / front_image.width) // 画布高度 // this.data.bgHeight = (front_image.height + 600) * (this.data.bgWidth / front_image.width) // 画布高度
this.data.bgHeight = this.data.bgHeight // 画布高度 this.data.bgHeight = this.data.bgHeight // 画布高度
this.editory = (this.data.bgHeight - (result.design_height * this.data this.editory = (this.data.bgHeight - (result.design_height * this.data
.pixelRate)) / 2 //辅助线距离 .pixelRate)) / 2; //辅助线距离
this.data.editorWidth = result.design_width * this.data.pixelRate // 设计宽度 this.data.editorWidth = result.design_width * this.data.pixelRate // 设计宽度
this.data.editorHeight = result.design_height * this.data.pixelRate // 设计高度 this.data.editorHeight = result.design_height * this.data.pixelRate // 设计高度
this.editor_top = this.data.editorHeight * Number(this this.editor_top = this.data.editorHeight * Number(this
...@@ -3389,7 +3728,48 @@ ...@@ -3389,7 +3728,48 @@
}); });
}, },
category() { category() {
//查询贴图分类 key=0贴图
homeservice.queryList({ homeservice.queryList({
s: 'Material.category',
machine_id: this.machine_id,
key: 0,
}).then(result => {
this.Material_category = result
this.Material_category.unshift({
icon: "../../static/image/icon_new_default.png",
icon_click: "../../static/image/icon_new_pressed.png",
title: "最新"
}, )
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
});
//查询壁纸分类 key=1壁纸
homeservice.queryList({
s: 'Material.category',
machine_id: this.machine_id,
key: 1,
}).then(result => {
console.log("壁纸")
this.wallpaper_category = result
this.wallpaper_category.unshift({
icon: "../../static/image/icon_new_default.png",
icon_click: "../../static/image/icon_new_pressed.png",
title: "最新"
}, )
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
/* homeservice.queryList({
s: 'Material.getShapeCategory', s: 'Material.getShapeCategory',
'machine_id': this.machine_id || null 'machine_id': this.machine_id || null
}).then(result => { }).then(result => {
...@@ -3406,18 +3786,19 @@ ...@@ -3406,18 +3786,19 @@
}).then(result => { }).then(result => {
this.Material_category = result this.Material_category = result
this.Material_category.unshift({ this.Material_category.unshift({
icon: "../../static/image/icon_new_default.png", icon: "../../static/image/icon_new_default.png",
icon_click: "../../static/image/icon_new_pressed.png", icon_click: "../../static/image/icon_new_pressed.png",
title: "最新" title: "最新"
}, }, )
)
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.msg, title: err.msg,
icon: 'none' icon: 'none'
}) })
}); }); */
}, },
itemlongtap(e) { //长按事件 itemlongtap(e) { //长按事件
var item = items[index]; // 获取当前选中的部件 var item = items[index]; // 获取当前选中的部件
// if(!this.isRotate && this.system_config.golf_diy.value == 1){ // if(!this.isRotate && this.system_config.golf_diy.value == 1){
...@@ -3438,14 +3819,20 @@ ...@@ -3438,14 +3819,20 @@
// console.log(options) // console.log(options)
items = [] items = []
this.data.goods_id = options.good_id; this.data.goods_id = options.good_id;
//console.log("this.data.goods_id="+options.good_id)
console.log("this.data.goods_id="+options.good_id)
let that = this; let that = this;
wx.createSelectorQuery().select('.delete-wrap').boundingClientRect(function(rect) { wx.createSelectorQuery().select('.delete-wrap').boundingClientRect(function(rect) {
that.setData({ if (rect != null) {
deleteTop: rect.top, that.setData({
}) deleteTop: rect.top,
})
} else {
that.setData({
deleteTop: 500,
})
}
}).exec(); }).exec();
//that.deleteTop = 480;
this.infoListTouchEvent = infoListTouchEvent; this.infoListTouchEvent = infoListTouchEvent;
this.infoListTouchEvent.bind({ this.infoListTouchEvent.bind({
doubleTap: function(e) { doubleTap: function(e) {
...@@ -3455,6 +3842,11 @@ ...@@ -3455,6 +3842,11 @@
} }
}, },
tap: function(e) { tap: function(e) {
//console.log("items="+items.length)
if (items == null || items.length == 0) {
that.active = false;
that.guide_left = false
}
var curTime = e.timeStamp var curTime = e.timeStamp
var lastTime = e.currentTarget.dataset var lastTime = e.currentTarget.dataset
.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据 .time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据
...@@ -3501,7 +3893,8 @@ ...@@ -3501,7 +3893,8 @@
animationData: that.animation.export() animationData: that.animation.export()
}) })
if (that.deleteWrap == true) { if (that.deleteWrap == true) {
that.deleteItem() //that.deleteItem()
that.removedeleteItem();
that.deleteWrap = false that.deleteWrap = false
} }
}, },
...@@ -3512,7 +3905,7 @@ ...@@ -3512,7 +3905,7 @@
let item = items[index]; let item = items[index];
if (item.support_zoom == 0) return; // 0不支持缩放，1时支持缩放 if (item.support_zoom == 0) return; // 0不支持缩放，1时支持缩放
var oldWidth = (item.width * item.scale) * e.scale var oldWidth = (item.width * item.scale) * e.scale
if (oldWidth > 1200) { if (oldWidth > 1000) {
return; return;
} }
var newScale = Math.max(e.scale * item.lastScale, .01); var newScale = Math.max(e.scale * item.lastScale, .01);
...@@ -3540,6 +3933,7 @@ ...@@ -3540,6 +3933,7 @@
} }
} }
}) })
//console.log("machine_id="+options.machine_id);
//获取屏幕宽高 //获取屏幕宽高
wx.getSystemInfo({ wx.getSystemInfo({
success: function(res) { success: function(res) {
...@@ -3554,7 +3948,6 @@ ...@@ -3554,7 +3948,6 @@
that.queryPage.machine_id = options.machine_id || null // 设备id that.queryPage.machine_id = options.machine_id || null // 设备id
//that.data.goods_id = 100 // 商品id //that.data.goods_id = 100 // 商品id
that.key = 2 that.key = 2
that.titlename = '色彩公园Lite定制' //修改头部名称
that.goodslist() // 获取产品详情数据 that.goodslist() // 获取产品详情数据
//} //}
that.category() // 作品分类 贴图分类 that.category() // 作品分类 贴图分类
...@@ -3625,6 +4018,10 @@ ...@@ -3625,6 +4018,10 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
//height: calc(100% - 150upx);
/* height: calc(100% - 80upx); */
/* padding-top: 80upx; */
/* margin-top: 100upx; */
// justify-content: center; // justify-content: center;
} }
...@@ -3838,9 +4235,9 @@ ...@@ -3838,9 +4235,9 @@
position: absolute; position: absolute;
z-index: 99; z-index: 99;
right: 4upx; right: 4upx;
/* width: 6upx; */ /* width: 6upx; */
height: 40upx; height: 40upx;
/* background: #5CE6B5; */ /* background: #5CE6B5; */
top: calc(50% - 20upx); top: calc(50% - 20upx);
} }
...@@ -3861,7 +4258,7 @@ ...@@ -3861,7 +4258,7 @@
z-index: 99; z-index: 99;
top: 4upx; top: 4upx;
width: 40upx; width: 40upx;
/* height: 6upx; /* height: 6upx;
background: #5CE6B5; */ background: #5CE6B5; */
left: 0; left: 0;
right: 0; right: 0;
...@@ -3885,7 +4282,7 @@ ...@@ -3885,7 +4282,7 @@
z-index: 99; z-index: 99;
bottom: 4upx; bottom: 4upx;
width: 40upx; width: 40upx;
/* height: 6upx; /* height: 6upx;
background: #5CE6B5; */ background: #5CE6B5; */
left: 0; left: 0;
right: 0; right: 0;
...@@ -3899,8 +4296,9 @@ ...@@ -3899,8 +4296,9 @@
align-items: center; align-items: center;
z-index: 99; z-index: 99;
position: fixed; position: fixed;
bottom: 346upx; bottom: 120upx;
left: 30upx; left: 50%;
transform: translate(-50%, -50%);
} }
.operation_top { .operation_top {
...@@ -3953,14 +4351,14 @@ ...@@ -3953,14 +4351,14 @@
// 底部工具栏 // 底部工具栏
.toolRight { .toolRight {
position: fixed; position: fixed;
top: 312upx; top: 220upx;
right: 0; right: 0;
width: 120upx; width: 120upx;
z-index: 99; z-index: 99;
.tool_li { .tool_li {
width: 100%; width: 100%;
height: 130upx; height: 115upx;
.tool_li_img { .tool_li_img {
width: 53upx; width: 53upx;
...@@ -3971,7 +4369,7 @@ ...@@ -3971,7 +4369,7 @@
.tool_li_text { .tool_li_text {
text-align: center; text-align: center;
color: #FFFFFF; color: #333333;
font-size: 22upx; font-size: 22upx;
margin-top: 10upx; margin-top: 10upx;
} }
...@@ -4009,16 +4407,20 @@ ...@@ -4009,16 +4407,20 @@
.tool_add { .tool_add {
width: 207upx; width: 207upx;
background: #0CA457; background: #F29F3D;
line-height: 98upx; line-height: 98upx;
text-align: center; text-align: center;
color: #FFFFFF; color: #FFFFFF;
box-shadow: 0upx 0upx 16upx 0upx rgba(0, 0, 0, 0.08);
border-radius: 49upx 50upx 0upx 49upx;
font-size: 36upx; font-size: 36upx;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #FFFFFF;
margin-left: auto; margin-left: auto;
box-shadow: 0 0 16upx 0 rgba(0, 0, 0, 0.08); /* box-shadow: 0 0 16upx 0 rgba(0, 0, 0, 0.08);
border-radius: 60upx 0 0 5upx; border-radius: 60upx 0 0 5upx; */
} }
.grey { .grey {
......
pages/index/js/drag.js
...@@ -6,7 +6,7 @@ const drag = { ...@@ -6,7 +6,7 @@ const drag = {
var minwwidth = 50 var minwwidth = 50
var minwheight = 50 var minwheight = 50
var shock = true var shock = true
console.log("type="+item.type)
if(item.type == 0 || item.type == 2){ if(item.type == 0 || item.type == 2){
minwwidth = 50 minwwidth = 50
minwheight = 50 minwheight = 50
...@@ -104,7 +104,6 @@ const drag = { ...@@ -104,7 +104,6 @@ const drag = {
item.height = newHeight item.height = newHeight
if(item.left != 0 && item.top != 0){ if(item.left != 0 && item.top != 0){
// console.log('top-left' + '-------' + item.top)
// 修改初始化原始图片比率-坐标 // 修改初始化原始图片比率-坐标
item.initialScale = item.initialScale * scaleWidth item.initialScale = item.initialScale * scaleWidth
item.initialscaling = item.initialscaling * scaleWidth item.initialscaling = item.initialscaling * scaleWidth
...@@ -715,6 +714,11 @@ const drag = { ...@@ -715,6 +714,11 @@ const drag = {
* @description: 初始化targetObj的位置 * @description: 初始化targetObj的位置
*/ */
initPos(item) { initPos(item) {
if(item == null){
//this.bg_initPos(item)
return
}
// 记录初始盒子位置右下 // 记录初始盒子位置右下
item.rightBottomPoint = { item.rightBottomPoint = {
x: item.width + item.left, x: item.width + item.left,
......
pages/index/machineDetail.vue
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
<myhead :worksid="worksid" :title="myheadtext" :color="'#fff'" :titleShow="true" :backShow="false" <myhead :worksid="worksid" :title="myheadtext" :color="'#fff'" :titleShow="true" :backShow="false"
:background="'none'"></myhead> :background="'none'"></myhead>
<view style="position: relative;width: 100%; height: 100%; z-index: 2;"> <view style="position: relative;width: 100%; height: 100%; z-index: 2;">
<!-- 轮播图 --> <!-- 轮播图 -->
<view v-if="statusloading == 1" class='swiper-box' style="width: 100%; height: 100%;"> <view v-if="statusloading == 1" class='swiper-box' style="width: 100%; height: 100%;">
<swiper :autoplay="true" :interval="3000" :duration="1000" @change="swiperChange" <swiper :autoplay="true" :interval="3000" :duration="1000" @change="swiperChange"
...@@ -11,8 +13,6 @@ ...@@ -11,8 +13,6 @@
<swiper-item v-for="(item, index) in Adlists" :key="index" class="swiper-item full-width"> <swiper-item v-for="(item, index) in Adlists" :key="index" class="swiper-item full-width">
<image style="width: 100%; height: 100%; margin: auto; display: block;" <image style="width: 100%; height: 100%; margin: auto; display: block;"
:src="item.content + '?x-oss-process=image/resize,lfit,w_750'" mode="aspectFill"></image> :src="item.content + '?x-oss-process=image/resize,lfit,w_750'" mode="aspectFill"></image>
<!-- <fr-image :src="item.content + '?x-oss-process=image/resize,lfit,w_750'"
mode="aspectFill" loading-ing-img="two-balls"/> -->
</swiper-item> </swiper-item>
</swiper> </swiper>
<view style="position: fixed; bottom: 232upx; text-align: center;left: 0; right: 0;"> <view style="position: fixed; bottom: 232upx; text-align: center;left: 0; right: 0;">
...@@ -24,20 +24,15 @@ ...@@ -24,20 +24,15 @@
</view> </view>
</view> </view>
</view> </view>
<!-- <view @click="Customize_now"
style="position: fixed; bottom: 112upx; left: 0; right: 0;
width: 200upx; height: 200upx; border-radius: 50%; margin: auto;"> <view @click="Customize_now" hover-class="hover-class-bg" style="position: fixed; bottom: 100upx; left: 0; right: 0; margin: auto;
<image src="../../static/golf.png" mode="" width: 300upx; height: 100upx;
style="width: 200upx; height: 200upx; border-radius: 50%; background: linear-gradient(92deg, #F29F3D, #67C4CA);
position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1;"></image> box-shadow: 0px 19px 48px 1px rgba(20, 31, 62, 0.35);
<view style="color: #43cf7c; text-align: center; line-height: 200upx;font-size: 30upx; font-weight: bold;">开始定制</view> border-radius: 40px;">
</view> --> <view style=" text-align: center; line-height: 100upx; font-size: 36upx; font-weight: 500; color: #FFFFFF;">
<view @click="Customize_now" hover-class="hover-class-bg" style="position: fixed; bottom: 160upx; left: 0; right: 0; margin: auto; 立即定制</view>
width: 300upx; height: 100upx; background: linear-gradient(92deg, #5CE6B5, #0CA457);
box-shadow: 0upx 19upx 48upx 1upx rgba(20, 31, 62, 0.86); border-radius: 50upx;">
<view
style=" text-align: center; line-height: 100upx; font-size: 36upx; font-weight: 500; color: #FFFFFF;">
开始定制</view>
</view> </view>
</view> </view>
<!-- 错误提示信息 --> <!-- 错误提示信息 -->
...@@ -65,26 +60,17 @@ ...@@ -65,26 +60,17 @@
</view> </view>
<!-- 登录弹框 --> <!-- 登录弹框 -->
<Signin ref="Signin"></Signin> <Signin ref="Signin"></Signin>
<!-- 排队信息 -->
<!-- <view v-if="statusloading == 1" @tap="game"
style="position: fixed; z-index: 99; right: 0; bottom: 524upx; display: flex;align-items: center;justify-content: center;
width: 100upx; height: 88upx; background: #43cf7c; border-radius: 44upx 0px 0px 44upx;">
<view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;">
<view>排队</view>
<view>信息</view>
</view>
</view> -->
<view v-if="statusloading == 1" @tap="toLineList" <view v-if="statusloading == 1" @tap="toLineList"
style="position: fixed; z-index: 99; right: 0; bottom: 318upx; width: 109upx; height: 123upx;"> style="position: fixed; z-index: 99; right: 0; bottom: 200upx; width: 109upx; height: 123upx;">
<image src="../../static/liebiao.png" mode="" style="width: 243upx; height: 123upx;"></image> <image src="../../static/liebiao.png" mode="" style="width: 243upx; height: 123upx;"></image>
</view> </view>
<switchGoods ref="switchGoods" @selectGoodItem="selectGoodItem"></switchGoods>
<switchGoods ref="switchGoods" @selectGoodItem="selectGoodItem"></switchGoods> <!-- //商品弹框 --> <!--//商品弹框 -->
</view> </view>
</template> </template>
<script> <script>
...@@ -93,15 +79,13 @@ ...@@ -93,15 +79,13 @@
import FrImage from '@/components/fr-image/fr-image.vue' import FrImage from '@/components/fr-image/fr-image.vue'
import Signin from '../index/Signin.vue'; import Signin from '../index/Signin.vue';
import myhead from './head/head.vue'; import myhead from './head/head.vue';
/*import uniPopup from './/common/uni-popup/uni-popup.vue' */ import switchGoods from '../index/switchGoods.vue'; //选择商品
import switchGoods from '../index/switchGoods.vue'; // 手机壳
export default { export default {
components: { components: {
myhead, myhead,
Signin, Signin,
FrImage, FrImage,
switchGoods, switchGoods,
}, },
computed: {}, computed: {},
...@@ -117,44 +101,43 @@ ...@@ -117,44 +101,43 @@
worksid: 1, worksid: 1,
statusloading: null, //加载状态 statusloading: null, //加载状态
phone: '18938664545', phone: '18938664545',
goods: [], //商品列表
currentIndex: 0,
selectItem: null, //选择对象
}; };
}, },
methods: { methods: {
//去排队列表 //去排队列表
toLineList() { toLineList() {
if (!this.$AppContext.checkLogin()) { if (!this.$AppContext.checkLogin()) {
this.tologo() this.tologo()
} else { } else {
uni.navigateTo({ uni.navigateTo({
url: '../mall/lineUp?machine_id=' + this.machine_id + '&key=' + this.key url: '../mall/lineUp?machine_id='+this.machine_id+'&key=' + this.key
}) })
} }
}, },
//选择商品进来 //选择商品进来
selectGoodItem(item) { selectGoodItem(item) {
uni.navigateTo({ uni.navigateTo({
url: '../index/index?machine_id=' + this.machine_id + " &good_id=" + item.id, url: '../index/index?machine_id='+this.machine_id+"&good_id=" +item.id,
}) })
}, },
// 立即定制 //立即定制
Customize_now() { Customize_now() {
let that = this;
if (!this.$AppContext.checkLogin()) { if (!this.$AppContext.checkLogin()) {
this.tologo() this.tologo()
} else { } else {
this.$nextTick(() => { this.$refs['switchGoods'].open(this.machine_id);
this.$refs['switchGoods'].open({
});
})
} }
}, },
// 打电话 //打电话
tomakePhoneCall() { tomakePhoneCall() {
uni.showLoading({ uni.showLoading({
title: '跳转中...', title: '跳转中...',
...@@ -175,6 +158,8 @@ ...@@ -175,6 +158,8 @@
} }
}); });
}, },
//授权登录
tologo() { tologo() {
// 先登陆 // 先登陆
let that = this; let that = this;
...@@ -199,9 +184,13 @@ ...@@ -199,9 +184,13 @@
} }
}); });
}, },
//轮播图轮动
swiperChange(e) { swiperChange(e) {
this.currentSwiper = e.detail.current this.currentSwiper = e.detail.current
}, },
//获取商品明细
getDetail() { getDetail() {
uni.showLoading({ uni.showLoading({
title: '正在加载中...', title: '正在加载中...',
...@@ -209,7 +198,6 @@ ...@@ -209,7 +198,6 @@
}) })
homeservice.WorksList({ homeservice.WorksList({
machine_id: this.machine_id, machine_id: this.machine_id,
// s: 'machine.detail'
s: 'machine.newDetail' s: 'machine.newDetail'
}).then(res => { }).then(res => {
this.statusloading = 1; this.statusloading = 1;
...@@ -228,7 +216,9 @@ ...@@ -228,7 +216,9 @@
uni.hideLoading(); uni.hideLoading();
}); });
}, },
Adlist() { // 轮播图
//获取轮播图
Adlist() {
homeservice.queryList({ homeservice.queryList({
s: 'Ad.list', s: 'Ad.list',
ad_position_key: 'currency_banner', ad_position_key: 'currency_banner',
...@@ -244,14 +234,23 @@ ...@@ -244,14 +234,23 @@
}); });
}); });
}, },
getQueryString(url, name) {
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i') //获取商品列表
var r = url.substr(1).match(reg) getGooods() {
if (r != null) { homeservice.queryList({
return r[2] s: 'Product.getCommonGoods', //新接口
} }).then(result => {
return null; this.goods = result;
} this.selectItem = this.goods[this.currentIndex];
//this.$refs['brandscenter'].open();
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
});
});
},
}, },
//上拉刷新 //上拉刷新
onReachBottom() {}, onReachBottom() {},
...@@ -273,14 +272,7 @@ ...@@ -273,14 +272,7 @@
}; };
return shareObj; return shareObj;
}, },
/* onShareTimeline() {
return {
title: this.$Env.getmalltext(),
path: '/pages/mall/machineDetail?machine_id=' + this.machine_id,
imageUrl:'',
query: 'kjbfrom=pyq'
}
}, */
onLoad(options) { onLoad(options) {
// console.log(options) // console.log(options)
//if(options.machine_id){ //if(options.machine_id){
...@@ -290,6 +282,7 @@ ...@@ -290,6 +282,7 @@
this.statusloading = 1; this.statusloading = 1;
//this.getDetail() //获取数据 //this.getDetail() //获取数据
this.Adlist() // 轮播图 this.Adlist() // 轮播图
this.getGooods()
// console.log("进来="+this.machine_id) // console.log("进来="+this.machine_id)
//} //}
/* if(options.worksid){ //控制导航返回 /* if(options.worksid){ //控制导航返回
...@@ -315,6 +308,10 @@ ...@@ -315,6 +308,10 @@
<style lang="scss"> <style lang="scss">
@import "../index/css/main.css"; @import "../index/css/main.css";
/* height: calc(100% - 400upx);
width: 100%;
position: absolute;
top: 200upx; */
page { page {
width: 100%; width: 100%;
...@@ -347,4 +344,37 @@ ...@@ -347,4 +344,37 @@
} }
} }
} }
.swiper-block {
height: calc(100% - 100upx);
width: 100%;
/* height: calc(100% - 300upx);
width: 100%;
position: absolute;
top: 150upx; */
}
.swiper-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: unset;
}
.slide-image {
height: calc(100% - 250upx);
width: 520upx;
border-radius: 20upx;
z-index: 1;
margin: 0upx 40upx;
background: #FFFFFF;
}
.active {
transform: scale(1.14);
transition: all 0.2s ease-in 0s;
z-index: 20;
}
</style> </style>
pages/index/scrollView.vue
<template> <template>
<!-- 贴图 --> <!-- 贴图 -->
<view class="content" style="width: 100%; height: 100%; position: relative;" :style="{height: (windowHeight - classificationHeight) +'px'}"> <view class="content" style="width: 100%; height: 100%; position: relative;"
<refresh @interrupt="interrupt" @pushToInterrupt="pushToInterrupt" @finished="finished" @scrolltolower="g" :style="{height: (windowHeight - classificationHeight) +'px'}">
:scrollHeight="(windowHeight - classificationHeight)" :scrollTop="scrollViewTop" @scroll="scroll"> <refresh @interrupt="interrupt" @pushToInterrupt="pushToInterrupt" @finished="finished" @scrolltolower="g"
:scrollHeight="(windowHeight - classificationHeight)" :scrollTop="scrollViewTop" @scroll="scroll">
<template slot="top"> <template slot="top">
<view style="color: #FFFFFF;position: absolute; top: 0;width: 100%; text-align: center;" <view style="color: #FFFFFF;position: absolute; top: 0;width: 100%; text-align: center;"
:style="'height:' + 40 + 'px; line-height:' + 40 + 'px;'">{{tip}}</view> :style="'height:' + 40 + 'px; line-height:' + 40 + 'px;'">{{tip}}</view>
</template> </template>
<template slot="content"> <template slot="content">
<view style="width:100%; margin: auto; height:calc(100% - 40upx); overflow: hidden;"> <view style="width:100%; margin: auto; height:calc(100% - 40upx); overflow: hidden;">
<view style="float: left; width: calc(100% / 3); margin: 40upx 0 0;" v-for="(item, index) in datalist" :key="index" @click="Worksdetail(item)"> <view style="float: left; width: calc(100% / 3); margin: 40upx 0 0;"
v-for="(item, index) in datalist" :key="index" @click="Worksdetail(item)">
<view style="width: 148.5upx; height: 204.6upx;margin: auto; position: relative;"> <view style="width: 148.5upx; height: 204.6upx;margin: auto; position: relative;">
<image style="width: 148.5upx; height: 148.5upx; margin: auto;" :src="(item.image ? item.image:item.url) + '?x-oss-process=image/resize,lfit,w_112'" <image style="width: 148.5upx; height: 148.5upx; margin: auto;"
mode="aspectFit"></image> :src="(item.image ? item.image:item.url) + '?x-oss-process=image/resize,lfit,w_112'"
mode="aspectFit"></image>
<view v-if="Number(item.price) > 0" style="min-width: 39upx; position: absolute; top: 0; right: 0; <view v-if="Number(item.price) > 0" style="min-width: 39upx; position: absolute; top: 0; right: 0;
background: #EF5354; border-radius: 8upx 0upx 11upx 8upx; text-align: center; padding: 2upx 8upx; background: #EF5354; border-radius: 8upx 0upx 11upx 8upx; text-align: center; padding: 2upx 8upx;
font-size: 18upx; font-weight: bold; color: #FFFFFF;">￥{{item.price}}</view> font-size: 18upx; font-weight: bold; color: #FFFFFF;">￥{{item.price}}</view>
</view> </view>
</view> </view>
<view class="align-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" <view class="align-center"
v-if="datalist.length == 0"> style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
<span class="iconfont icon-wushuju" style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span> v-if="datalist.length == 0">
<view style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">啊嘞，还是一片荒漠</view> <span class="iconfont icon-wushuju"
style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
<view style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">啊嘞，还是一片荒漠
</view>
</view> </view>
</view> </view>
</template> </template>
<template slot="bottom"> <template slot="bottom">
<view> <view>
没有更多数据了 没有更多数据了
</view> </view>
</template> </template>
</refresh> </refresh>
...@@ -37,6 +43,7 @@ ...@@ -37,6 +43,7 @@
<script> <script>
import homeservice from '@/service/homeservice.js'; import homeservice from '@/service/homeservice.js';
import refresh from '@/components/xing-refresh/xing-refresh.vue'; import refresh from '@/components/xing-refresh/xing-refresh.vue';
import http from '@/util/http.js';
export default { export default {
props: { props: {
windowHeight: { windowHeight: {
...@@ -60,17 +67,20 @@ ...@@ -60,17 +67,20 @@
is_revise: 1, //可调整 is_revise: 1, //可调整
is_edit: 1, //模板属性 is_edit: 1, //模板属性
total: 0, total: 0,
is_new: null,//最新 is_new: null, //最新
is_hot: null ,//热门 is_hot: null, //热门
machine_id: null, //设备id machine_id: null, //设备id
}, },
Material_categorydatalist: [], //作品、贴图列表 Material_categorydatalist: [], //作品、贴图列表
datalist: [], //作品、贴图列表 datalist: [], //作品、贴图列表
Material_category:[] ,//贴图分类 Material_category: [], //贴图分类
currentId: 0,/* 控制被选中 */ currentId: 0,
currentIndex:null,/* 控制位置 */ /* 控制被选中 */
currentIndex: null,
/* 控制位置 */
tip: '', tip: '',
scrollViewTop:0,//滑动高度 scrollViewTop: 0, //滑动高度
e: 0, // 弹窗类型
}; };
}, },
mounted() { mounted() {
...@@ -80,12 +90,41 @@ ...@@ -80,12 +90,41 @@
* 组件的公有方法列表 * 组件的公有方法列表
*/ */
methods: { methods: {
Worksdetail(item){
//作品详情
Worksdetail(item) {
console.log(item) console.log(item)
this.$emit('Worksdetail',item) this.$emit('Worksdetail', item)
}, },
g(e){
uni.showLoading({ g(e) {
if (this.type == 99) {
this.getExcellentMaterialMore(this.item.queryPage)
} else {
homeservice.WorksList(this.queryPage).then(result => {
this.Material_categorydatalist = this.Material_categorydatalist.concat(result.data)
this.datalist = this.datalist.concat(result.data)
this.queryPage.page += 1;
if (Math.ceil(result.total / result.per_page) <= this.queryPage.page) {
return setTimeout(() => {
uni.showToast({
title: '没有更多数据了！',
icon: 'none'
});
}, 500);
}
uni.hideLoading();
}).catch(err => {
uni.showToast({
title: err.msg,
icon: 'none'
})
uni.hideLoading();
});
}
/* uni.showLoading({
title: '正在加载中...',mask: true title: '正在加载中...',mask: true
}) })
homeservice.WorksList(this.queryPage).then(result => { homeservice.WorksList(this.queryPage).then(result => {
...@@ -101,8 +140,9 @@ ...@@ -101,8 +140,9 @@
}).catch(err => { }).catch(err => {
uni.showToast({title: err.msg,icon: 'none'}) uni.showToast({title: err.msg,icon: 'none'})
uni.hideLoading(); uni.hideLoading();
}); }); */
}, },
interrupt(e) { interrupt(e) {
this.tip = '刷新中' this.tip = '刷新中'
//模拟发送请求 //模拟发送请求
...@@ -111,26 +151,30 @@ ...@@ -111,26 +151,30 @@
this.queryPage.page = 1 this.queryPage.page = 1
this.getShapeList() this.getShapeList()
}, },
//释放刷新
pushToInterrupt() { pushToInterrupt() {
this.tip = '释放刷新'; this.tip = '释放刷新';
}, },
finished() { finished() {
this.tip = ''; this.tip = '';
}, },
scroll(e) { scroll(e) {
if (e.detail.scrollTop > 1) { if (e.detail.scrollTop > 1) {
this.oldScrollViewTop = e.detail.scrollTop - 0.01 this.oldScrollViewTop = e.detail.scrollTop - 0.01
} }
//this.oldScrollViewTop =e.detail.scrollTop;
//console.log("滚动距离="+e.detail.scrollTop)
}, },
open(item) { open(item) {
if (this.e != item.e) {
this.datalist = [];
let loadData = false; }
this.type = 0;
this.e = item.e;
this.scrollViewTop = 0;
/* let loadData = false;
if (this.queryPage.material_category_id != null && this.queryPage.material_category_id != "" ) { if (this.queryPage.material_category_id != null && this.queryPage.material_category_id != "" ) {
if (this.queryPage.material_category_id == item.queryPage.material_category_id) { if (this.queryPage.material_category_id == item.queryPage.material_category_id) {
if (this.queryPage.material_series_id != item.queryPage.material_series_id) { if (this.queryPage.material_series_id != item.queryPage.material_series_id) {
...@@ -143,63 +187,94 @@ ...@@ -143,63 +187,94 @@
if(this.datalist.length <= 0 ){ if(this.datalist.length <= 0 ){
loadData =true; loadData =true;
} }
} } */
//console.log(item) let loadData = false;
if (item.e == 23 || item.e == 2) {
if (this.queryPage.material_category_id != null && this.queryPage.material_category_id != "" && this
.queryPage.material_category_id != "null") {
if (this.queryPage.material_category_id == item.queryPage.material_category_id) {
if (this.queryPage.material_series_id != item.queryPage.material_series_id) {
loadData = true;
}
} else {
loadData = true;
}
} else {
if (this.datalist ==null || this.datalist.length <= 0) {
loadData = true;
}
}
} else if (item.e == 99) {
if (this.currentId != item.queryPage.currentId || this.currentId == -1) {
loadData = true;
}
if (this.datalist ==null || this.datalist.length <= 0) {
loadData = true;
}
}
if (this.datalist ==null || this.datalist.length <= 0) {
loadData = true;
}
this.queryPage = { this.queryPage = {
s: item.queryPage.s, s: item.queryPage.s,
page: item.queryPage.page,//分页 page: item.queryPage.page, //分页
per_page: item.queryPage.per_page,//分页 per_page: item.queryPage.per_page, //分页
is_revise: item.queryPage.is_revise, //可调整 is_revise: item.queryPage.is_revise, //可调整
is_edit: item.queryPage.is_edit, //模板属性 is_edit: item.queryPage.is_edit, //模板属性
machine_id: item.queryPage.machine_id, //设备id machine_id: item.queryPage.machine_id, //设备id
goods_category_id: item.queryPage.goods_category_id, //星形接口列表增加，产品分类参数 goods_category_id: item.queryPage.goods_category_id, //星形接口列表增加，产品分类参数
// works_category_id: item.queryPage.works_category_id, //作品选中分类id material_category_id: item.queryPage.material_category_id, //贴图壁纸选择值一级分类
material_category_id:item.queryPage.material_category_id, //贴图壁纸选择值一级分类 material_series_id: item.queryPage.material_series_id, //贴图壁纸选择值二级分类
material_series_id:item.queryPage.material_series_id,//贴图壁纸选择值二级分类 is_new: item.queryPage.is_new, //最新
is_new:item.queryPage.is_new,//最新 is_hot: item.queryPage.is_hot, //热门
is_hot:item.queryPage.is_hot,//热门 goods_id: item.queryPage.goods_id, //商品id
goods_id:item.queryPage.goods_id, //商品id is_under: item.queryPage.is_under, //贴图是否为背景图
// is_recommend:item.queryPage.is_recommend,//推荐 partner_id: item.queryPage.partner_id //代理
is_under:item.queryPage.is_under, //贴图是否为背景图
partner_id:item.queryPage.partner_id //代理
} }
if (item.e == 2) {
if(item.e == 2){
//this.queryPage.is_under = '0'
//this.getShapeList()
if (loadData) { if (loadData) {
//this.queryPage.page = 1; this.queryPage.is_under = '0' //贴纸标识
this.queryPage.is_under = '0'
this.getShapeList() this.getShapeList()
} else { } else {
//this.$refs['refresh'].scrollTop this.scrollViewTop = this.oldScrollViewTop
//console.log("进来数据")
this.scrollViewTop = this.oldScrollViewTop
this.showState = true; this.showState = true;
} }
}else if(item.e == 23){ } else if (item.e == 23) {
if (loadData) { if (loadData) {
//this.queryPage.page = 1; this.queryPage.is_under = '1' //壁纸标识
this.queryPage.is_under = '1'
this.getShapeList() this.getShapeList()
} else { } else {
this.scrollViewTop = this.oldScrollViewTop
this.scrollViewTop = this.oldScrollViewTop this.showState = true;
}
} else if (item.e == 99) { //点赞贴图
if (loadData) {
this.scrollViewTop = 0;
this.oldScrollViewTop = 0;
this.type = 99;
this.queryCollectionPage = {
page: 1,
limit: 25
}
this.item = item;
this.getExcellentMaterial(item.queryPage)
} else {
this.scrollViewTop = this.oldScrollViewTop
this.showState = true; this.showState = true;
} }
//this.queryPage.is_under = '1'
//this.getShapeList()
} }
}, },
// 贴图列表 // 贴图列表
getShapeList(){ getShapeList() {
//console.log(this.windowHeight)
this.datalist = [] this.datalist = []
uni.showLoading({title: '正在加载中...',mask: true}) uni.showLoading({
title: '正在加载中...',
mask: true
})
homeservice.WorksList(this.queryPage).then(result => { homeservice.WorksList(this.queryPage).then(result => {
this.Material_categorydatalist = result.data this.Material_categorydatalist = result.data
this.datalist = result.data this.datalist = result.data
...@@ -207,16 +282,46 @@ ...@@ -207,16 +282,46 @@
uni.hideLoading(); uni.hideLoading();
this.tip = ''; this.tip = '';
}).catch(err => { }).catch(err => {
uni.showToast({title: err.msg,icon: 'none'}) uni.showToast({
title: err.msg,
icon: 'none'
})
uni.hideLoading();
});
},
//获取条件
getExcellentMaterial(e) {
this.datalist = []
uni.showLoading({
title: '正在加载中...'
})
let url = ''
this.currentId = e.currentId;
if (e.currentId == 0) url = '/douyin/Material/getMeMaterial'
else if (e.currentId == 1) url = '/douyin/Material/getMeCollection'
else if (e.currentId == 2) url = '/douyin/Material/getFollowMaterials'
this.$http.post(url, this.queryCollectionPage).then(result => {
this.showState = true
this.Material_categorydatalist = result.data.data
this.datalist = result.data.data;
this.queryPage.page += 1;
uni.hideLoading();
this.tip = '';
}).catch(err => {
this.showState = true
uni.showToast({
title: err.msg,
icon: 'none'
})
uni.hideLoading(); uni.hideLoading();
}); });
},
} },
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">
</style> </style>
pages/index/switchGoods.vue
<template> <template>
<view> <view v-if="isShow" style=" position: absolute; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; " @click="closeView()">
<!-- 品牌 -->
<uni-popup ref="brandscenter" type="center" @change="change" :style="{height: (MobilePhoneHeight * 0.8) +'px'}"> <view
<view style="width: 690upx; margin:auto; display: flex; flex-direction: column;"> style="position: absolute; top: 0; width: 100%; height: 100%; background: #999999; z-index: 999; opacity: 0.5; ">
<view :style="{height: (MobilePhoneHeight * 0.8) +'px'}" </view>
style="width:100%; background: #FFFFFF; border-radius: 30upx; position: relative;">
<view @click="cancelBrand()" style="position: absolute; top: 0upx; right: 0upx;"> <view
<image src="../../../static/icon_guanbi.png" mode="" style=" position: absolute;
style="height: 23upx; width: 23upx; padding: 21upx 33upx;"></image> top: calc(50% - 400upx);
height: 800upx;
width: 100%;
margin:auto;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 999;">
<swiper class="swiper-block" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
circular='false' previous-margin='80rpx' next-margin='80rpx' :current="currentIndex"
@change="swiperChangeGood">
<swiper-item class="swiper-item" v-for="(item,index) in goods" :key="index" >
<view @click="goodclick(item)" :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill"
style="justify-content: center; align-items: center; ">
<image :src="item.front_image + '?x-oss-process=image/resize,lfit,w_450'"
style="width: 450upx; position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);"
mode="widthFix">
</image>
</view> </view>
<!-- <view style="margin:122upx auto 94upx;font-size: 36upx;text-align: center;"> <view
请选择手机品牌 style="width: 100%;font-size: 28upx;color: #333333;text-align: center; position: absolute; bottom: 100upx; z-index: 999; ">
</view> --> {{item !=null ? item.name : ''}}
<view style="margin:62upx auto 50upx;font-size: 36upx; text-align: center;">
请选择商品
</view> </view>
<scroll-view scroll-y scroll-with-animation </swiper-item>
:style="{height: (MobilePhoneHeight * 0.8) - 200*pixelRate +'px'}" style="box-sizing: border-box;white-space: nowrap; </swiper>
width: 510upx; margin:0 auto; overflow: hidden; margin-bottom: 50upx;"> </view>
<view v-for="(item,index) in goods" :key="index" @click="goodclick(item)">
<view style="float: left; margin: 10upx;
display: flex;align-items: center;
background: #EEEEEE;border-radius: 10upx;
height: 150upx; width: 150upx;" hover-class="brandactive" :class="[goodtext == item.name ? 'brandactive':'' ]">
<view style="width: 100%;">
<image :src="item.front_image"
style="width: 50%; height: 70upx; margin: auto; display: block;"></image>
<view style="text-align: center; font-size: 24upx; margin-top: 10upx; width: 95%; margin: auto;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;word-break:break-all;">
{{item.name || ''}}
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 无数据 -->
<view v-if="catrgoryList.length < 0" style="text-align: center; color: #BEBEBE;">该设备没有库存</view>
</view>
</view>
</uni-popup>
</view> </view>
</template> </template>
<script> <script>
import homeservice from '@/service/homeservice.js'; import homeservice from '@/service/homeservice.js';
import uniPopup from '../index/common/uni-popup/uni-popup.vue';
import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
var _self;
var canvaPie = null;
export default { export default {
props: {
// windowHeight: {
// type: Number,
// default: 1
// },
// pixelRate: {
// type: Number,
// default: 1
// },
},
components: {
uniPopup,
mpvuePicker
},
data() { data() {
return { return {
isShow: false, //是否显示
goodtext: '', //选择商品名称 goodtext: '', //选择商品名称
goods: [],
currentId: 0,
/* 控制被选中 */ /* 控制被选中 */
currentIndex: 0, currentIndex: 0,
/* 控制位置 */ /* 控制位置 */
...@@ -76,40 +51,49 @@ ...@@ -76,40 +51,49 @@
queryPage: { queryPage: {
s: 'Material.list', s: 'Material.list',
}, },
goods: [], //商品列表
machine_id:null, //机器码
}; };
}, },
mounted() {}, mounted() {},
methods: { methods: {
//关闭视图
closeView() {
this.isShow = false;
},
//商品列表滚
swiperChangeGood(event) {
this.currentIndex = event.detail.current
},
//商品点击事件 //商品点击事件
goodclick(e) { goodclick(e) {
this.isShow = false;
this.goodtext = e.name //选择商品名 this.goodtext = e.name //选择商品名
this.$refs['brandscenter'].close(); this.$emit('selectGoodItem',{
this.$emit('selectGoodItem', {
id: e.id, id: e.id,
name: e.name, //手机壳信息
}) })
}, },
//打开页面 //打开页面
open() { open(machineId) {
this.getGooods(); this.machine_id = machineId;
//this.$refs['brandscenter'].open(); this.getGooods();
}, },
//获取商品列表 //获取商品列表
getGooods() { getGooods() {
let that = this;
homeservice.queryList({ homeservice.queryList({
s: 'Product.getCommonGoods', //新接口 s: 'Product.getCommonGoods', //新接口
}).then(result => { }).then(result => {
this.goods = result; this.goods = result;
this.$refs['brandscenter'].open(); this.isShow = true;
}).catch(err => { }).catch(err => {
this.isShow = false;
uni.showToast({ uni.showToast({
title: err.msg, title: err.msg,
icon: 'none' icon: 'none'
...@@ -117,17 +101,56 @@ ...@@ -117,17 +101,56 @@
}); });
}, },
change(e) {}, change(e) {
},
}, },
onShow(options) {}, onShow(options) {
getGooods();
},
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.classification { .swiper-block {
height: 100%;
width: 100%;
/* height: calc(100% - 300upx);
width: 100%;
position: absolute;
top: 150upx; */
}
.swiper-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: unset;
}
.slide-image {
height: calc(100% - 100upx);
width: 520upx;
border-radius: 20upx;
z-index: 1;
margin: 0upx 40upx;
background: url("../../static/item_good_frame.png")
}
.active {
transform: scale(1.14);
transition: all 0.2s ease-in 0s;
z-index: 20;
}
/* .classification {
width: 300upx; width: 300upx;
height: 80upx; height: 80upx;
line-height: 80upx; line-height: 80upx;
...@@ -141,153 +164,7 @@ ...@@ -141,153 +164,7 @@
background: #864BC3 !important; background: #864BC3 !important;
color: #FFFFFF !important; color: #FFFFFF !important;
} }
} } */
// 分类 // 分类
.scroll-container {
box-sizing: border-box;
white-space: nowrap;
width: 540upx;
margin: auto;
.scroll-item {
width: 152upx;
height: 248upx;
background: #F5F5F5;
border-radius: 20upx;
text-align: center;
display: inline-block;
margin: 0 10upx;
border: 4upx solid #F5F5F5;
&.active {
background: #FFFFFF !important;
border: 4upx solid #864BC3;
}
// &.active::before {
// content: '...';
// position: absolute;
// left: calc(50% - 10px);
// top: 100%;
// width: 20px;
// margin-left: 0px;
// margin-top: -5px;
// border-top: 4px dotted #595959;
// }
}
}
.experiencebutton {
width: 230upx;
height: 70upx;
line-height: 70upx;
text-align: center;
color: #FFFFFF;
margin: 40upx auto 0;
border-radius: 35upx;
background: linear-gradient(to right, #834DC4, #1983D7);
font-size: 26upx;
}
.canbutton {
color: #FFFFFF;
font-size: 26upx;
width: 218upx;
height: 58upx;
line-height: 58upx;
border: 1px transparent solid;
border-radius: 30px;
position: relative;
margin: auto;
background: #292933;
text-align: center;
}
.canbutton:after {
content: '';
position: absolute;
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
background: linear-gradient(to right, #834DC4, #1983D7);
border-radius: 30px;
content: '';
z-index: -1;
}
// 品牌
.brandactive {
background: #E4D0F6 !important;
}
.backgroundColoractive {
border: 2upx #834DC4 solid !important;
}
.tooltiptext {
visibility: hidden;
min-width: 120upx;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6upx;
padding: 5upx 0;
font-size: 20upx;
/* 定位 */
position: fixed;
z-index: 1;
}
.tooltiptextactive {
visibility: visible;
}
// 型号
.model {
padding: 0upx 20upx;
height: 60upx;
line-height: 60upx;
background: #141319;
text-align: center;
color: #FFFFFF;
border-radius: 30upx;
margin-right: 20upx;
font-size: 28upx;
}
.modelactive {
color: #553177 !important;
}
.determineBut {
background: linear-gradient(92deg, #178CE6, #984ACE);
color: #FFFFFF;
position: fixed;
bottom: 110upx;
text-align: center;
left: 0;
right: 0;
width: 251upx;
height: 77upx;
line-height: 77upx;
border-radius: 38upx;
font-size: 31upx;
margin: auto;
}
.determineButtn {
width: 251upx;
margin: 34upx auto 0;
height: 77upx;
line-height: 77upx;
text-align: center;
background: linear-gradient(92deg, #178CE6, #984ACE);
opacity: 0.86;
border-radius: 38upx;
font-size: 31upx;
font-weight: 500;
color: #FFFFFF;
}
</style> </style>
pages/index/tuya.vue 0 → 100644
<template>
<view v-if="openState">
<!-- 品牌 -->
<uni-popup ref="brandscenter" type="center" @change="change"
:style="{height: MobilePhoneHeight +'px',width: MobilePhoneWidth +'px'}">
<view style="display: flex; flex-direction: column;">
<view :style="{height: MobilePhoneHeight +'px',width: MobilePhoneWidth +'px'}"
style="border-radius: 30upx; position: relative; overflow: hidden;">
<view class="board-container">
<!-- 遮罩 -->
<view class="board" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}"
:class="{'board-out':colorPanelShow}">
<canvas class="board-canvas" canvas-id="drawCanvas" disable-scroll="true"
@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
</view>
<!-- 工具 -->
<Toolbar :penColor="currentColor" @penWidthChange="penWidthChangeHandler"
@toolItemTap="toolItemTapHandler" @colorPickTap="colorPickTapHandler" :toolArr="toolArr"
style="position: fixed; bottom: 0; width: 100%; z-index: 101;"></Toolbar>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import Toolbar from '../../components/toolbar/toolbar.vue'
import uniPopup from './common/uni-popup/uni-popup.vue';
import Env from '@/util/Env.js';
export default {
components: {
Toolbar,
uniPopup
},
onShareAppMessage(res) {
return {
title: '你绝对看不出我画的是什么？',
path: '/pages/index/index'
}
},
data() {
return {
historylist: [],
colorPanelShow: false,
drawInfos: [],
curDrawArr: [],
startX: 0,
startY: 0,
drawContext: {},
currentColor: '#000',
begin: false,
bgColor: 'rgba(255, 255, 255, 0)',
toolArr: [
// {
// title: '清空',
// icon: '../../static/png/tool_clear.png',
// selectIcon: '../../static/png/tool_clear_s.png',
// select: false,
// url: 'clear'
// },
{
title: '撤销',
icon: '../../static/png/tool_eraser.png',
selectIcon: '../../static/png/tool_eraser.png',
select: false,
url: 'eraser'
},
// {
// title: '画笔',
// icon: '../../static/png/tool_pen.png',
// selectIcon: '../../static/png/tool_pen_s.png',
// select: true,
// url: 'pen'
// },
// {
// title: '颜色',
// icon: '../../static/png/tool_color.png',
// selectIcon: '../../static/png/tool_color_s.png',
// select: false,
// url: 'color'
// },
{
title: '确认',
icon: '../../static/png/icon_confirm.png',
selectIcon: '../../static/png/icon_confirm.png',
select: false,
url: 'save'
}
],
lineWidth: 6,
penMode: true,
rectMode: false,
hollowRectMode: false,
circleMode: false,
hollowCircleMode: false,
lastHollowRect: {},
lastHollowCircle: {},
MobilePhoneHeight: 0,
MobilePhoneWidth: 0,
pixelRate: 1,
data: {},
openState: false,
canvas_neto: []
}
},
onLoad() {
},
methods: {
uploadDIY(tempFilePaths) {
uni.showLoading({
title: '生成中...',
mask: true
})
var _this = this
wx.request({
url: Env.getDevBaseURL() + '/api/AliossSign/getSign',
method: 'GET',
data: '',
header: {
'content-type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
success: function(res) {
var atter = res.data
let time = new Date().getTime() + Math.floor((Math.random() * 1000) + 1)
wx.uploadFile({
url: atter.host.replace("http:", "https:"),
filePath: tempFilePaths,
name: 'file',
formData: {
'key': atter.dir + time + '.png',
'OSSAccessKeyId': atter.accessid,
'policy': atter.policy,
'Signature': atter.signature,
'success_action_status': '200',
'callback': atter.callback,
},
success: function(res) {
if (res.statusCode != 200) {
console.log({
errCode: '599',
msg: '其他错误'
})
return;
}
if (res.statusCode == 200) {
uni.showToast({
title: '生成涂鸦成功',
icon: 'none',
duration: 3000
})
// console.log(atter.host + '/' + atter.dir + time + '.png')
let url = atter.host + '/' + atter.dir + time + '.png'
_this.$emit('tuyaimg', url)
_this.$refs['brandscenter'].close()
_this.openState = false
}
},
fail: function(err) {
wx.showToast({
title: '生成涂鸦成功失败！',
icon: 'none',
duration: 1200
})
},
complete: function(err) {
// console.log('总共' + successUp + '张上传成功,' + failUp + '张上传失败！');
}
})
}
})
},
change() {},
cancelBrand() {
this.clearDrawBoard()
this.$refs['brandscenter'].close()
this.openState = false
},
open(e) {
this.canvas_neto = []
this.currentColor = '#000'
this.lineWidth = 6
this.openState = true
this.data = e.data
//获取屏幕宽高
let that = this
wx.getSystemInfo({
success: function(res) {
that.MobilePhoneHeight = res.windowHeight // 屏幕高度
that.MobilePhoneWidth = res.windowWidth // 屏幕高度
that.pixelRate = res.windowWidth / 750;
},
})
this.$nextTick(() => {
this.$refs['brandscenter'].open()
setTimeout(function() {
this.drawContext = uni.createCanvasContext('drawCanvas', this);
this.initBoard();
this.fillWelcomeBackground(this.drawContext);
}.bind(this), 500)
})
},
colorPickTapHandler(obj) {
// console.log('我点击的颜色:' + JSON.stringify(obj));
this.colorPanelShow = false;
this.toolArr.forEach(item => {
item.select = false;
if (item.title === '画笔') {
item.select = true;
}
})
this.rectMode = false;
this.hollowRectMode = false;
this.circleMode = false;
this.hollowCircleMode = false;
this.penMode = true;
this.currentColor = obj.color;
this.drawContext.strokeStyle = obj.color;
},
penWidthChangeHandler(width) {
// console.log('画笔宽度:' + width);
this.lineWidth = width;
this.drawContext.setLineWidth(width);
this.drawContext.setLineCap('round') // 让线条圆润
},
toolItemTapHandler(index) {
const that = this;
let url = this.toolArr[index]['url'];
switch (url) {
case 'clear':
this.clearDrawBoard();
break;
case 'eraser':
this.canvas_restore()
// this.drawContext.strokeStyle = 'rgba(255, 255, 255, 0)';
this.colorPanelShow = false;
break;
case 'pen':
this.drawContext.strokeStyle = this.currentColor;
this.colorPanelShow = false;
this.rectMode = false;
this.hollowRectMode = false;
this.circleMode = false;
this.hollowCircleMode = false;
this.penMode = true;
break;
case 'color':
this.colorPanelShow = !this.colorPanelShow;
// this.drawMode = this.colorPanelShow ? false : true;
break;
case 'save':
if (that.canvas_neto.length < 1) {
that.cancelBrand();
return false
}
uni.canvasToTempFilePath({
canvasId: 'drawCanvas',
success: function(res) {
// console.log('回调参数:' + JSON.stringify(res))
that.uploadDIY(res.tempFilePath);
// console.log('回调参数:' + JSON.stringify(res));
// 在H5平台下，tempFilePath 为 base64
// uni.saveImageToPhotosAlbum({
// filePath: res.tempFilePath,
// success: function(res) {
// console.log('回调参数:' + JSON.stringify(res))
// // console.log('成功回调参数:' + JSON.stringify(res));
// // that.$api.msgSuccess('保存成功');
// },
// fail: function(res) {
// console.log('回调参数:' + JSON.stringify(res))
// // console.log('失败回调参数:' + JSON.stringify(res));
// // that.$api.msgSuccess('保存成功');
// }
// });
},
fail: function(res) {
console.log('fail' + JSON.stringify(res));
}
}, that)
break;
case 'close':
this.cancelBrand();
break;
// case 'hollowRect':
// this.hollowRectMode = true;
// this.rectMode = false;
// this.circleMode = false;
// this.hollowCircleMode = false;
// this.penMode = false;
// this.colorPanelShow = false;
// this.drawContext.strokeStyle = this.currentColor;
// // this.drawContext.restore();
// break;
// case 'hollowCircle':
// this.hollowRectMode = false;
// this.rectMode = false;
// this.circleMode = false;
// this.hollowCircleMode = true;
// this.penMode = false;
// this.colorPanelShow = false;
// this.drawContext.strokeStyle = this.currentColor;
// break;
// case 'rect':
// this.hollowRectMode = false;
// this.rectMode = true;
// this.circleMode = false;
// this.hollowCircleMode = false;
// this.penMode = false;
// this.colorPanelShow = false;
// this.drawContext.strokeStyle = this.currentColor;
// break;
// case 'circle':
// this.hollowRectMode = false;
// this.rectMode = false;
// this.circleMode = true;
// this.hollowCircleMode = false;
// this.penMode = false;
// this.colorPanelShow = false;
// this.drawContext.strokeStyle = this.currentColor;
// break;
default:
break;
}
if (url === 'clear' || url === 'save' || url === 'share' || url === 'close' || url === 'eraser') {
return;
}
this.toolArr.forEach((item, indexPath) => {
item.select = false;
if (indexPath === index) {
item.select = true;
}
})
},
clearDrawBoard() {
this.canvas_neto = []
this.initBoard();
this.fillBackground(this.drawContext);
},
initBoard() {
this.drawContext.setLineCap('round') // 让线条圆润
this.drawContext.strokeStyle = this.currentColor;
this.drawContext.setLineWidth(this.lineWidth);
},
touchStart(e) {
this.initBoard();
if (this.penMode) {
// console.log('我能够进行绘制--touchStart---x' + e.touches[0].x + '----y----' + e.touches[0].y);
this.lineBegin(e.touches[0].x, e.touches[0].y)
this.canvas_neto.push({
point_x: e.touches[0].x,
point_y: e.touches[0].y,
currentColor: this.currentColor,
lineWidth: this.lineWidth,
list: [],
})
this.draw(true);
} else if (this.rectMode) {
// this.rectBegin(e.touches[0].x, e.touches[0].y)
} else if (this.hollowRectMode) {
// this.hollowRectBegin(e.touches[0].x, e.touches[0].y)
} else if (this.hollowCircleMode) {
// this.hollowCircleBegin(e.touches[0].x, e.touches[0].y)
} else if (this.circleMode) {
// this.circleBegin(e.touches[0].x, e.touches[0].y)
}
this.curDrawArr.push({
x: e.touches[0].x,
y: e.touches[0].y
});
},
touchMove(e) {
if (this.begin) {
if (this.penMode) {
// console.log('我能够进行绘制--touchMove----x' + e.touches[0].x + '----y----' + e.touches[0].y);
this.lineAddPoint(e.touches[0].x, e.touches[0].y);
this.draw(true);
this.canvas_neto[this.canvas_neto.length - 1].list.push({
x: e.touches[0].x,
y: e.touches[0].y
})
} else if (this.rectMode) {
// this.drawRect(e.touches[0].x, e.touches[0].y, true);
} else if (this.hollowRectMode) {
// this.drawHollowRect(e.touches[0].x, e.touches[0].y, true);
} else if (this.hollowCircleMode) {
// this.drawHollowCircle(e.touches[0].x, e.touches[0].y, true);
} else if (this.circleMode) {
// this.drawCircle(e.touches[0].x, e.touches[0].y, true);
}
this.curDrawArr.push({
x: e.touches[0].x,
y: e.touches[0].y
});
}
},
touchEnd(e) {
// console.log('结束的坐标x:' + e.changedTouches[0].x + '结束的坐标y:' + e.changedTouches[0].y );
if (this.penMode) {
// console.log('我能够进行绘制--touchEnd----x' + e.changedTouches[0].x + '----y----' + e.changedTouches[0].y);
this.canvas_neto[this.canvas_neto.length - 1].list.push({
x: e.changedTouches[0].x,
y: e.changedTouches[0].y
})
this.curDrawArr = [];
this.lineEnd();
} else if (this.rectMode) {
// this.drawRect(e.changedTouches[0].x, e.changedTouches[0].y, true);
} else if (this.hollowRectMode) {
// this.drawHollowRect(e.changedTouches[0].x, e.changedTouches[0].y, true);
} else if (this.hollowCircleMode) {
// this.drawHollowCircle(e.changedTouches[0].x, e.changedTouches[0].y, true);
} else if (this.circleMode) {
// this.drawCircle(e.changedTouches[0].x, e.changedTouches[0].y, true);
}
},
hollowRectBegin(x, y) {
this.begin = true;
this.drawContext.beginPath()
this.startX = x;
this.startY = y;
},
rectBegin(x, y) {
this.begin = true;
this.drawContext.beginPath()
this.startX = x;
this.startY = y;
},
hollowCircleBegin(x, y) {
this.begin = true;
this.drawContext.beginPath()
this.startX = x;
this.startY = y;
},
circleBegin(x, y) {
this.begin = true;
this.drawContext.beginPath()
this.startX = x;
this.startY = y;
},
/**
* 这里是画实体矩形
*/
// drawRect(x, y, isReverse) {
// let width = (x - this.startX) ? (x - this.startX) : (this.startX - x);
// let height = (y - this.startY) ? (y - this.startY) : (this.startY - y);
// this.drawContext.rect(this.startX, this.startY, width, height);
// this.drawContext.setFillStyle(this.currentColor);
// this.drawContext.fill();
// this.draw(isReverse);
// },
/**
* 这里是画空心矩形
* 方法是根据四个坐标点画
* 四条线进行连接
*/
// drawHollowRect(x, y, isReverse) {
// let pointLT = {};
// let pointRB = {};
// let pointRT = {};
// let pointLB = {};
// let center = {};
// pointLT.X = (this.startX <= x) ? this.startX : x;
// pointLT.Y = (this.startY <= y) ? this.startY : y;
// pointRB.X = (this.startX >= x) ? this.startX : x;
// pointRB.Y = (this.startY >= y) ? this.startY : y;
// pointRT.X = pointRB.X;
// pointRT.Y = pointLT.Y;
// pointLB.X = pointLT.X;
// pointLB.Y = pointRB.Y;
// let width = (x - this.startX) ? (x - this.startX) : (this.startX - x);
// let height = (y - this.startY) ? (y - this.startY) : (this.startY - y);
// this.drawContext.rect(this.startX, this.startY, width, height);
// this.drawContext.setStrokeStyle(this.currentColor);
// this.drawContext.stroke();
// this.draw(isReverse);
// this.lastHollowRect = {
// x: this.startX,
// y: this.startY,
// width: Math.abs(width),
// height: Math.abs(height),
// pointLT: pointLT
// }
// this.clearLastHollowRect();
// },
// clearLastHollowRect() {
// console.log('上一个矩形对象:' + JSON.stringify(this.lastHollowRect));
// this.drawContext.clearRect(this.lastHollowRect.pointLT.X + this.lineWidth / 2, this.lastHollowRect.pointLT.Y + this
// .lineWidth / 2, this.lastHollowRect.width - this.lineWidth, this.lastHollowRect.height - this.lineWidth);
// },
// clearLastHollowCircle(x, y, r, cxt) { //(x,y)为要清除的圆的圆心，r为半径，cxt为context
// var stepClear = 1; //别忘记这一步
// clearArc(x, y, r);
// function clearArc(x, y, radius) {
// var calcWidth = radius - stepClear;
// var calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);
// var posX = x - calcWidth;
// var posY = y - calcHeight;
// var widthX = 2 * calcWidth;
// var heightY = 2 * calcHeight;
// if (stepClear <= radius) {
// cxt.clearRect(posX, posY, widthX, heightY);
// stepClear += 1;
// clearArc(x, y, radius);
// }
// }
// },
/**
* 这里是画
* 实心圆
*/
// drawCircle(x, y, isReverse) {
// let pointLT = {};
// let pointRB = {};
// let pointRT = {};
// let pointLB = {};
// let center = {};
// pointLT.X = (this.startX <= x) ? this.startX : x;
// pointLT.Y = (this.startY <= y) ? this.startY : y;
// pointRB.X = (this.startX >= x) ? this.startX : x;
// pointRB.Y = (this.startY >= y) ? this.startY : y;
// pointRT.X = pointRB.X;
// pointRT.Y = pointLT.Y;
// pointLB.X = pointLT.X;
// pointLB.Y = pointRB.Y;
// center.X = (pointRB.X + pointLT.X) / 2;
// center.Y = (pointRB.Y + pointLT.Y) / 2;
// let dx = pointRB.X - pointLT.X;
// let dy = pointRB.Y - pointLT.Y;
// let r = Math.sqrt(dx * dx + dy * dy) / 2;
// // console.log('圆心坐标:' + JSON.stringify(center));
// // console.log('半径:' + JSON.stringify(r));
// this.drawContext.arc(center.X, center.Y, r, 0, 2 * Math.PI);
// this.drawContext.setFillStyle(this.currentColor);
// this.drawContext.fill();
// // this.drawContext.stroke();
// this.draw(isReverse);
// },
/**
* 这里是画
* 空心圆
*/
// drawHollowCircle(x, y, isReverse) {
// let pointLT = {};
// let pointRB = {};
// let center = {};
// pointLT.X = (this.startX <= x) ? this.startX : x;
// pointLT.Y = (this.startY <= y) ? this.startY : y;
// pointRB.X = (this.startX >= x) ? this.startX : x;
// pointRB.Y = (this.startY >= y) ? this.startY : y;
// center.X = (pointRB.X + pointLT.X) / 2;
// center.Y = (pointRB.Y + pointLT.Y) / 2;
// let dx = pointRB.X - pointLT.X;
// let dy = pointRB.Y - pointLT.Y;
// let r = Math.sqrt(dx * dx + dy * dy) / 2;
// // console.log('圆心坐标:' + JSON.stringify(center));
// // console.log('半径:' + JSON.stringify(r));
// this.drawContext.arc(center.X, center.Y, r, 0, 2 * Math.PI);
// // this.drawContext.setFillStyle(this.currentColor);
// // this.drawContext.fill();
// this.drawContext.stroke();
// this.drawContext.beginPath();
// this.drawContext.arc(center.X, center.Y, r - this.lineWidth / 2, 0, 2 * Math.PI);
// this.drawContext.setFillStyle(this.bgColor);
// this.drawContext.fill();
// this.draw(isReverse);
// // this.clearLastHollowCircle(center.X, center.Y, r - this.lineWidth / 2, this.drawContext);
// },
// 开始绘制线条
lineBegin: function(x, y) {
this.begin = true;
this.drawContext.beginPath()
this.startX = x;
this.startY = y;
this.drawContext.moveTo(this.startX, this.startY)
this.lineAddPoint(x, y);
},
// 绘制线条中间添加点
lineAddPoint: function(x, y) {
this.drawContext.moveTo(this.startX, this.startY)
this.drawContext.lineTo(x, y);
this.drawContext.stroke();
this.startX = x;
this.startY = y;
},
// 绘制线条结束
lineEnd: function() {
this.drawContext.closePath();
this.begin = false;
},
// canvas上下文设置背景为透明色
fillBackground: function(context) {
const query = uni.createSelectorQuery().in(this);
query.select('.board').boundingClientRect(data => {
// console.log("得到布局位置信息" + JSON.stringify(data));
context.setFillStyle(this.bgColor);
context.fillRect(0, 0, data.width, data.height); //TODO context的宽和高待定
context.fill();
context.draw();
}).exec();
},
// canvas上下文设置背景为透明色
fillWelcomeBackground: function(context) {
const query = uni.createSelectorQuery().in(this);
query.select('.board').boundingClientRect(data => {
// console.log("得到布局位置信息" + JSON.stringify(data));
context.setFillStyle(this.bgColor);
context.fillRect(0, 0, data.width, data.height); //TODO context的宽和高待定
context.fill();
let pikaqiuW = 318;
let pikaqiuH = 288;
let pikaqiuX = (data.width - 318) / 2;
let pikaqiuY = 80;
context.draw();
}).exec();
},
// 绘制canvas
// isReverse: 是否保留之前的像素
draw(isReverse = false, cb) {
this.drawContext.draw(isReverse, () => {
if (cb && typeof(cb) == "function") {
cb();
}
});
},
// 撤销方法
canvas_restore(e) {
// console.log(this.canvas_neto)
var that = this
var canvas_neto = that.canvas_neto
if (canvas_neto.length < 1) {
/* uni.showToast({
title: '不能再继续撤销了',
icon: 'none'
}); */
this.$refs['brandscenter'].close();
return false
}
this.drawContext.clearRect(0, 0, that.data.editorWidth, that.data.editorHeight)
canvas_neto.splice(canvas_neto.length - 1, 1);
for (let i = 0; i < canvas_neto.length; i++) {
this.drawContext.beginPath()
this.drawContext.moveTo(canvas_neto[i].point_x, canvas_neto[i].point_y)
this.drawContext.setLineCap('round') // 让线条圆润
this.drawContext.strokeStyle = canvas_neto[i].currentColor;
this.drawContext.setLineWidth(canvas_neto[i].lineWidth);
for (let j = 0; j < canvas_neto[i].list.length; j++) {
this.drawContext.lineTo(canvas_neto[i].list[j].x, canvas_neto[i].list[j].y)
this.drawContext.stroke()
}
}
this.drawContext.draw();
},
}
}
</script>
<style lang="scss">
.board-container {
height: 100%;
width: 100%;
.board {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
transform: translateY(0);
display: block;
z-index: 100;
.board-canvas {
width: 100%;
height: 100%;
z-index: 100;
}
}
.board-out {
transform: translateY(100%);
display: none;
}
}
</style>
pages/mall/head/head.vue
<template> <template>
<view :style="{ height: height + 'px', background:background}" style="position: fixed; z-index: 999;"> <view :style="{ height: height + 'px', background:background}" style="position: fixed; z-index: 888;">
<view class="head" :style="{ height: height + 'px', background:background}"> <view class="head" :style="{ height: height + 'px', background:background}">
<view class="back" @click="back" v-if="backShow" :style="{ top: top + 'px', color:color }"> <view class="back" @click="back" v-if="backShow" :style="{ top: top + 'px', color:color }">
<image v-if="worksid > 0" src="../../../static/recommend/house.png" mode="aspectFit" <image src="../../../static/recommend/icon_back_black.png" mode="aspectFit"
style="width: 39upx; height: 39upx; margin-top: calc((32px - 39upx)/2);margin-left: auto; margin-right: auto;"></image> style="width: 32upx; height: 32upx; margin-top: calc((32px - 39upx)/2);margin-left: auto; margin-right: auto;"></image>
<image v-else src="../../../static/recommend/icon_back.png" mode="aspectFit" style="width: 23upx; height: 39upx; margin-top: calc((32px - 39upx)/2);margin-left: auto; margin-right: auto;"></image>
</view> </view>
<view class="title" v-if="titleShow" :style="{ top: top + 'px', color:color, 'font-size': size + 'rpx' }">{{title}}</view> <view class="title" v-if="titleShow" :style="{ top: top + 'px', color:color, 'font-size': size + 'rpx' }">{{title}}</view>
</view> </view>
...@@ -14,10 +13,6 @@ ...@@ -14,10 +13,6 @@
<script> <script>
export default { export default {
props: { props: {
worksid:{
type: Number,
default: null
},
title: { title: {
type: String, type: String,
default: '自定义标题' default: '自定义标题'
...@@ -53,7 +48,6 @@ ...@@ -53,7 +48,6 @@
}, },
created() { created() {
// console.log('设备信息')
//设备信息 //设备信息
let app = uni.getSystemInfoSync(); let app = uni.getSystemInfoSync();
//胶囊信息 //胶囊信息
...@@ -63,11 +57,7 @@ ...@@ -63,11 +57,7 @@
}, },
methods: { methods: {
back(){ back(){
if(this.worksid > 0){ uni.navigateBack();
uni.redirectTo({ url: '../index/mall' })
}else{
uni.navigateBack();
}
} }
}, },
onLoad(options) { onLoad(options) {
......
pages/mall/lineUp.vue
<template> <template>
<view class="colletion full-width"> <view class="colletion full-width">
<view class="uni-tab-bar full-width">
<myhead :worksid="works_id" :title="'排队列表'" :color="'#131319'" :titleShow="true" :backShow="true"
:background="'#fff'"></myhead>
<!-- <view class="uni-tab-bar full-width">
<view class="content full-width" scroll-y> <view class="content full-width" scroll-y>
<view v-if="LoupanList.length == 0 && stateindex == true"> <view v-if="LoupanList.length == 0 && stateindex == true">
<view class="noData"> <view class="noData">
...@@ -11,30 +15,56 @@ ...@@ -11,30 +15,56 @@
</view> </view>
<view class="noData_but" @click="tomain()">去定制</view> <view class="noData_but" @click="tomain()">去定制</view>
</view> </view>
</view>-->
<!-- position: absolute; -->
<view class="uni-tab-bar full-width">
<!-- style="margin-top: 150upx;" -->
<view class="content full-width" scroll-y :style="{ marginTop : headheight + 'px'}">
<!-- :style="{ top: headheight + 'px'}" -->
<view v-if="LoupanList.length == 0 && stateindex == true ">
<view class="noData">
<image src="../../static/icon_default_no.png" mode="aspectFill" class="noData_img"></image>
<view class="noData_title">
啊嘞，当前还没有打印任务呢<br>
<view class="noData_text">去定制一个作品吧</view>
</view>
<view class="noData_but" @click="tomain()">去定制</view>
</view>
</view> </view>
<view v-else v-for="(designer, index) in LoupanList" :key="index" style="background: #282932 !important; width: 690upx; height: 180upx; <view v-else v-for="(designer, index) in LoupanList" :key="index" style=" width: 690upx;
margin: 10upx auto; border-radius: 10upx;" @click="self_help_payment(designer)"> margin: 20upx auto; border-radius: 10upx; " @click="self_help_payment(designer)"
:style="{background: designer.status.value == 1 ? '#ffffff' :'#EEEEEE;'}">
<view style="color: #fff; display: flex; align-items: center;"> <view style=" display: flex; align-items: center;">
<view v-if="designer.user_id != userId" <view v-if="designer.user_id != userId"
style="margin:10upx 20upx;width: 140upx; height: 140upx; position: relative; overflow: hidden; opacity: 0.2;"> style="margin:20upx 20upx;width: 140upx; height: 140upx; position: relative; overflow: hidden; opacity: 0.4; ">
<!-- <image style="width: 140upx; height: 140upx;position: absolute; top: 0; left: 0; right: 0; bottom: 0;margin:auto; z-index: 1;"/> --> <!-- <image style="width: 140upx; height: 140upx;position: absolute; top: 0; left: 0; right: 0; bottom: 0;margin:auto; z-index: 1;"/> -->
<image style="width: 100%;height: 100%;" src="../../static/img/icon_line_up_back.png" mode="aspectFit"> <view style="width: 100%; height: 100%;border-radius: 20upx; background: #FFFFFF;">
</imag :src="designer.front_image_old" mode="aspectFit">
</image> <!-- src="../../static/img/icon_line_up_back.png"
mode="aspectFit" -->
<!-- </imag :src="designer.front_image_old" mode="aspectFit"> -->
</view>
<image style="width: 70upx; height: 70upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; <image style="width: 70upx; height: 70upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
margin: auto; z-index:2;" :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"mode="aspectFit"></image> margin: auto; z-index:2;" :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"
mode="aspectFit"></image>
<!-- <image style="width: 140upx; height: 140upx;position: absolute; top: 0; left: 0; right: 0; bottom: 0; <!-- <image style="width: 140upx; height: 140upx;position: absolute; top: 0; left: 0; right: 0; bottom: 0;
margin:auto; z-index: 3;" :src="designer.front_image" mode="aspectFit"></image> --> margin:auto; z-index: 3;" :src="designer.front_image" mode="aspectFit"></image> -->
</view> </view>
<view v-if="designer.user_id == userId" <view v-if="designer.user_id == userId"
style="margin:10upx 20upx;width: 140upx; height: 140upx; position: relative; overflow: hidden; "> style="margin:20upx 20upx;width: 140upx; height: 140upx; position: relative; overflow: hidden; ">
<!-- <image style="width: 140upx; height: 140upx;position: absolute; top: 0; left: 0; right: 0; bottom: 0;
margin:auto; z-index: 1;"/> -->
<image style="width: 100%;height: 100%;" src="../../static/img/icon_line_up_back.png" <!-- <image style="width: 140upx; height: 140upx;position: absolute; top: 0; left: 0; right: 0; bottom: 0;margin:auto; z-index: 1;"/> -->
mode="aspectFit"></image> <view style="width: 100%; height: 100%;border-radius: 20upx; background: #FFFFFF;">
:src="designer.front_image_old" mode="aspectFit"></image>
</view>
<!-- :src="designer.front_image_old" mode="aspectFit"></image> -->
<image style="width: 70upx; height: 70upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; <image style="width: 70upx; height: 70upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
margin: auto; z-index:2;" :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'" margin: auto; z-index:2;" :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"
mode="aspectFit"></image> mode="aspectFit"></image>
...@@ -44,9 +74,9 @@ ...@@ -44,9 +74,9 @@
<view style="width: calc(100% - 360upx);"> <view style="width: calc(100% - 360upx);">
<view style="width: 90%;font-size: 28upx;"> <view style="width: 90%;font-size: 28upx;">
<text style="font-size: 40upx;font-weight: bold;">{{designer.id || ''}}</text> <text style="font-size: 36upx;">{{designer.id || ''}}</text>
</view> </view>
<view style="font-size: 24upx; color: #FFFFFF; margin-top: 30upx;"> <view style="font-size: 24upx; color: #333333; margin-top: 30upx;">
{{designer.goods_specs || ''}} {{designer.goods_specs || ''}}
</view> </view>
<!-- <view style="width: 90%;font-size: 32upx;"> <!-- <view style="width: 90%;font-size: 32upx;">
...@@ -54,13 +84,14 @@ ...@@ -54,13 +84,14 @@
</view> </view>
<view style="font-size: 24upx; color:#666666; margin-top: 30upx;">{{designer.create_time || ''}}</view> --> <view style="font-size: 24upx; color:#666666; margin-top: 30upx;">{{designer.create_time || ''}}</view> -->
</view> </view>
<view v-if="designer.status.value == 1" <view v-if="designer.status.value == 1" style="width: 136upx; height: 60upx;background: #F29F3D;
style="width: 136upx; height: 60upx;background: linear-gradient(92deg, #178CE6, #984ACE);opacity: 0.86;border-radius: 30upx; margin-top: 70upx;"> opacity: 0.86;
border-radius: 30px; margin-top: 70upx;">
<view style="text-align: center; font-size: 26upx; color: #FFFFFF; line-height: 60upx;"> 打印中 <view style="text-align: center; font-size: 26upx; color: #FFFFFF; line-height: 60upx;"> 打印中
</view> </view>
</view> </view>
<view v-else style="width: 136upx; height: 60upx;border-radius: 30upx;margin-top: 70upx;"> <view v-else style="width: 136upx; height: 60upx;border-radius: 30upx;margin-top: 70upx;">
<view style="text-align: center; font-size: 26upx; color: #FFFFFF; line-height: 60upx;"> 排队中 <view style="text-align: center; font-size: 26upx; color: #67C4CA; line-height: 60upx;"> 排队中
</view> </view>
</view> </view>
</view> </view>
...@@ -77,7 +108,7 @@ ...@@ -77,7 +108,7 @@
<view style="position: absolute; <view style="position: absolute;
top: 0; right: 0;" @click="sighstate = false"> top: 0; right: 0;" @click="sighstate = false">
<image src="../../static/icon_guanbi.png" mode="" <image src="../../static/icon_guanbi.png" mode=""
style="width: 26upx; height: 26upx; padding: 12upx 22upx;"></image> style="width: 26upx; height: 26upx; padding: 12upx 22upx;"></image>
</view> </view>
<view v-if=" designer.goods_name == '背包' " style="width: 558upx;"> <view v-if=" designer.goods_name == '背包' " style="width: 558upx;">
...@@ -113,12 +144,11 @@ ...@@ -113,12 +144,11 @@
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view style="text-align: center; font-size: 36upx; margin-top: 58upx;">作品排队中</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 v-if=" designer.goods_name == '单肩袋' " style="width: 558upx;"> <view v-if=" designer.goods_name == '单肩袋' " style="width: 558upx;">
<view style="display: flex; align-items: center; justify-content: center; <view style="display: flex; align-items: center; justify-content: center;
width: 100%; height: 360upx; "> width: 100%; height: 360upx; ">
...@@ -144,8 +174,6 @@ ...@@ -144,8 +174,6 @@
<view style="text-align: center; font-size: 36upx; margin-top: 58upx;">作品排队中</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> </view>
...@@ -157,7 +185,11 @@ ...@@ -157,7 +185,11 @@
import userService from '@/service/UserService'; import userService from '@/service/UserService';
import homeservice from '@/service/homeservice.js' import homeservice from '@/service/homeservice.js'
import Enums from '@/util/Enums'; import Enums from '@/util/Enums';
import myhead from './head/head.vue'; // 页眉
export default { export default {
components: {
myhead
},
computed: { computed: {
}, },
...@@ -182,6 +214,7 @@ ...@@ -182,6 +214,7 @@
animMaind_time: 10000, //动画时间----刷子上下动画时间 animMaind_time: 10000, //动画时间----刷子上下动画时间
designer: null, designer: null,
userId: null, //用户信息 userId: null, //用户信息
headheight: 0, //头部高度
}; };
}, },
methods: { methods: {
...@@ -191,22 +224,27 @@ ...@@ -191,22 +224,27 @@
} }
homeservice.WorksList({ homeservice.WorksList({
machine_id: this.queryPage.machine_id, machine_id: this.queryPage.machine_id,
// s: 'machine.detail'
s: 'machine.newDetail', s: 'machine.newDetail',
}).then(res => { }).then(res => {
if (designer.status.value == 1) { if (designer.status.value == 1) {
this.clearIntervalTime() if (designer.goods_name == "马卡龙") {
uni.navigateTo({ this.clearIntervalTime()
url: '../mine/self_help_payment_details?orderId=' + designer.order_id + uni.navigateTo({
'&type=' + this.key + '&machine_id=' + this.queryPage.machine_id url: '../mine/self_help_payment_details?orderId=' + designer.order_id +
}) '&type=' + this.key + '&machine_id=' + this.queryPage.machine_id
})
} else {
uni.navigateTo({
url: '../mine/self_help_payment_details_new?orderId=' + designer
.order_id +
'&type= 2' + '&machine_id=' + this.queryPage.machine_id
})
}
} else { } else {
if (this.sighstate == true) return; if (this.sighstate == true) return;
this.designer = designer this.designer = designer
this.sighstate = true this.sighstate = true
// setTimeout(function(){
// this.sighstate = false
// }.bind(this),2000)
} }
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
...@@ -216,9 +254,11 @@ ...@@ -216,9 +254,11 @@
}); });
}); });
}, },
tomain() { tomain() {
uni.navigateBack(); uni.navigateBack();
}, },
previewImg(designer, index) { previewImg(designer, index) {
let img = designer.works_image let img = designer.works_image
uni.previewImage({ uni.previewImage({
...@@ -226,6 +266,7 @@ ...@@ -226,6 +266,7 @@
urls: [img] urls: [img]
}); });
}, },
loadGoodsList(direction) { loadGoodsList(direction) {
// uni.showLoading({ title: '加载中...' }); // uni.showLoading({ title: '加载中...' });
if (this.dataLoadState.pullDownRefresh || this.dataLoadState.reachBottom) return; if (this.dataLoadState.pullDownRefresh || this.dataLoadState.reachBottom) return;
...@@ -246,8 +287,11 @@ ...@@ -246,8 +287,11 @@
let obj = index + 1 let obj = index + 1
item.lineup = obj < 10 ? "0" + obj : obj item.lineup = obj < 10 ? "0" + obj : obj
}) })
this.stateindex = true
this.LoupanList = result this.LoupanList = result
/* result.forEach((item, index) => {
this.LoupanList.push(item)
}) */
// 分页对象处理 // 分页对象处理
this.queryPage.total = result.total; this.queryPage.total = result.total;
this.queryPage.per_page = result.per_page; this.queryPage.per_page = result.per_page;
...@@ -256,6 +300,8 @@ ...@@ -256,6 +300,8 @@
// 数据加载状态处理 false // 数据加载状态处理 false
this.dataLoadState.pullDownRefresh = false; this.dataLoadState.pullDownRefresh = false;
this.dataLoadState.reachBottom = false; this.dataLoadState.reachBottom = false;
this.stateindex = true
// uni.hideLoading(); // uni.hideLoading();
}).catch(err => { }).catch(err => {
// 停止当前页面下拉刷新 // 停止当前页面下拉刷新
...@@ -263,27 +309,21 @@ ...@@ -263,27 +309,21 @@
// 数据加载状态处理 false // 数据加载状态处理 false
this.dataLoadState.pullDownRefresh = false; this.dataLoadState.pullDownRefresh = false;
this.dataLoadState.reachBottom = false; this.dataLoadState.reachBottom = false;
this.stateindex = true
}); });
}, },
// 做滚动加载使用
//做滚动加载使用
loadMore() { loadMore() {
//console.log('滚动加载')
// if (Math.ceil(this.queryPage.total / this.queryPage.per_page) < this.queryPage.page) {
// return setTimeout(() => {
// uni.showToast({
// title: '啊嘞,没有更多数据了！',
// icon: 'none'
// });
// }, 500);
// }
// this.queryPage.page = this.queryPage.page + 1;
// this.loadGoodsList(Enums.DATA_DIRECTION.DOWN);
}, },
clearIntervalTime() { clearIntervalTime() {
clearInterval(this.statetime) clearInterval(this.statetime)
this.statetime = null this.statetime = null
} }
}, },
// 下拉加载 // 下拉加载
onPullDownRefresh() { onPullDownRefresh() {
this.dataLoadState.pullDownRefresh = false; this.dataLoadState.pullDownRefresh = false;
...@@ -291,11 +331,13 @@ ...@@ -291,11 +331,13 @@
this.queryPage.page = 1; this.queryPage.page = 1;
this.queryPage.total = 0; this.queryPage.total = 0;
this.LoupanList = [] this.LoupanList = []
this.stateindex = false;
this.loadGoodsList(Enums.DATA_DIRECTION.UP); this.loadGoodsList(Enums.DATA_DIRECTION.UP);
}, },
// 上拉加载 // 上拉加载
onReachBottom() { onReachBottom() {
console.log('上拉加载') //console.log('上拉加载')
setTimeout(() => { setTimeout(() => {
uni.showToast({ uni.showToast({
title: '啊嘞,没有更多数据了！', title: '啊嘞,没有更多数据了！',
...@@ -303,8 +345,8 @@ ...@@ -303,8 +345,8 @@
}); });
}, 500); }, 500);
}, },
onLoad(options) { onLoad(options) {
//console.log("options.machine_id="+options.machine_id);
this.queryPage.machine_id = options.machine_id; this.queryPage.machine_id = options.machine_id;
this.key = options.key || 2; this.key = options.key || 2;
this.LoupanList = [] this.LoupanList = []
...@@ -323,26 +365,34 @@ ...@@ -323,26 +365,34 @@
this.loadGoodsList(Enums.DATA_DIRECTION.UP); this.loadGoodsList(Enums.DATA_DIRECTION.UP);
}.bind(this), this.animMaind_time) }.bind(this), this.animMaind_time)
}, },
onShow() {}, onShow() {},
// 卸载程序
created() {
//设备信息
let app = uni.getSystemInfoSync();
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
this.headheight = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2;
},
//卸载程序
onUnload() { onUnload() {
this.clearIntervalTime() this.clearIntervalTime()
let pages = getCurrentPages(); let pages = getCurrentPages();
//console.log(pages[pages.length - 2].route) if (pages[pages.length - 2].route == "pages/mine/order") {
if (pages[pages.length - 2].route == "pages/mine/order") { uni.reLaunch({
uni.reLaunch({
url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id + '&worksid=1' url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id + '&worksid=1'
}) })
} else if (pages[pages.length - 2].route == "pages/mine/orderNew") { } else if (pages[pages.length - 2].route == "pages/mine/orderNew") {
uni.reLaunch({ uni.reLaunch({
url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id + '&worksid=1' url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id + '&worksid=1'
}) })
} else if (pages[pages.length - 2].route == "pages/index/index") { } else if (pages[pages.length - 2].route == "pages/index/index") {
uni.reLaunch({ uni.reLaunch({
url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id + '&worksid=1' url: '../index/machineDetail?machine_id=' + this.queryPage.machine_id + '&worksid=1'
}) })
} }
} }
}; };
</script> </script>
...@@ -351,7 +401,7 @@ ...@@ -351,7 +401,7 @@
@import "../index/css/css.css"; @import "../index/css/css.css";
page { page {
background: #131319 !important; background: #F5F5F5 !important;
} }
.colletion { .colletion {
......
pages/mine/self_help_payment_details.vue
<template> <template>
<view class="full-width full-height" :style="{overflow: isReady ? 'hidden' : 'scroll' }"> <view class="full-width full-height" :style="{overflow: isReady ? 'hidden' : 'scroll' }">
<!-- 打印机音乐 --> <!-- 打印机音乐 -->
<audio src="https://img.colorpark.cn/wechat/ring2.m4a" <audio src="https://img.colorpark.cn/wechat/ring2.m4a" :action="ringaction" controls loop
:action="ringaction" controls loop style="opacity: 0; position: absolute;"></audio> style="opacity: 0; position: absolute;"></audio>
<!-- 继续定制 --> <!-- 继续定制 -->
<view @click="tomall" style="position: fixed; right: 0; bottom: 100upx; display: flex; <view @click="tomall" style="position: fixed; right: 0; bottom: 100upx; display: flex;
align-items: center;justify-content: center; width: 100upx; height: 88upx; align-items: center;justify-content: center; width: 100upx; height: 88upx;
background: #43cf7c; border-radius: 44upx 0px 0px 44upx; z-index: 999;"> background: #43cf7c; border-radius: 44upx 0px 0px 44upx; z-index: 999;">
<view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;"> <view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;">
<view>继续</view><view>定制</view> <view>继续</view>
<view>定制</view>
</view> </view>
</view> </view>
<!-- https://img.colorpark.cn/wechat/track/dayinquGolf.png <!-- https://img.colorpark.cn/wechat/track/dayinquGolf.png
...@@ -17,112 +18,114 @@ ...@@ -17,112 +18,114 @@
https://img.colorpark.cn/wechat/track/shejiquGolf.png --> https://img.colorpark.cn/wechat/track/shejiquGolf.png -->
<view style="height:100%;width: 100%; overflow: hidden;"> <view style="height:100%;width: 100%; overflow: hidden;">
<!-- goods.status.value 订单状态(0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成) "--> <!-- goods.status.value 订单状态(0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成) "-->
<view :animation="BoxTwoAnimation" <view :animation="BoxTwoAnimation" style="width: 100%; height: 100%;"
style="width: 100%; height: 100%;" v-if="(orderOrderStatusData.status == 0 || orderOrderStatusData.status == 1 || orderOrderStatusData.status == 10 || orderOrderStatusData.status == 2) && type != 1 && LoadState">
v-if="(orderOrderStatusData.status == 0 || orderOrderStatusData.status == 1 || orderOrderStatusData.status == 10 || orderOrderStatusData.status == 2) && type != 1 && LoadState">
<!-- 排队中-付款区底图 --> <!-- 排队中-付款区底图 -->
<view v-if="orderOrderStatusData.status == 0" style="position: absolute; top: 0; right: 200%; width: 100%; height: 100%;overflow: hidden;"> <view v-if="orderOrderStatusData.status == 0"
<image src="https://img.colorpark.cn/wechat/track/fukuanquGolf.png" mode="widthFix" style="width: 100%;"></image> style="position: absolute; top: 0; right: 200%; width: 100%; height: 100%;overflow: hidden;">
<image src="https://img.colorpark.cn/wechat/track/fukuanquGolf.png" mode="widthFix"
style="width: 100%;"></image>
</view> </view>
<!-- 排队中 --> <!-- 排队中 -->
<view v-if="orderOrderStatusData.status == 0" style="position: absolute; width: 100%; height: 100%; overflow: hidden; right: 100%;"> <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;"> <view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
<image src="https://img.colorpark.cn/wechat/track/paiduiquGolf.png" mode="widthFix" style="width: 100%;"></image> <image src="https://img.colorpark.cn/wechat/track/paiduiquGolf.png" mode="widthFix"
style="width: 100%;"></image>
</view> </view>
<view style="position: relative; width: 100%; height: 100%;overflow: hidden;"> <view style="position: relative; width: 100%; height: 100%;overflow: hidden;">
<view class='crate-wrapper'> <view class='crate-wrapper'>
<view style="display: flex;position: relative;"> <view style="display: flex;position: relative;">
<view style="position: relative;transition: all 3s; z-index: 2;" <view style="position: relative;transition: all 3s; z-index: 2;" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
transform: 'translateX(' + data.activebrushX + 'px)'}"> transform: 'translateX(' + data.activebrushX + 'px)'}">
<view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; <view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0;
margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view> margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view>
<!-- 作品图 --> <!-- 作品图 -->
<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" <view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" style="display: flex; align-items: center; justify-content: center;
style="display: flex; align-items: center; justify-content: center;
position: absolute; width: 100%; height: 100%; left: 0; top: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0;
right: 0; margin: auto; bottom: 0;"> right: 0; margin: auto; bottom: 0;">
<view style="width: 90%; height: 90%; display: flex;"> <view style="width: 90%; height: 90%; display: flex;">
<view style="width: calc(100% / 4);" v-for="item in 4" :key="a"> <view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
<view v-for="item in 3" :key="b" <view v-for="item in 3" :key="b"
style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;"> style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
<image style="width: 50%; height: 50%; position: absolute; <image style="width: 50%; height: 50%; position: absolute;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
margin: auto; z-index:0;" margin: auto; z-index:0;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'" mode="aspectFit"></image> mode="aspectFit"></image>
<image style="width: 100%; height: 100%;position: absolute; <image style="width: 100%; height: 100%;position: absolute;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
margin:auto; z-index: 1;" margin:auto; z-index: 1;" :src="goods.goods.front_image" mode="aspectFit"></image>
:src="goods.goods.front_image" mode="aspectFit"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 打印中---付款区底图 --> <!-- 打印中---付款区底图 -->
<view v-if="orderOrderStatusData.status == 1" style="position: absolute; top: 0; right: 100%; width: 100%; height: 100%;overflow: hidden;"> <view v-if="orderOrderStatusData.status == 1"
<image src="https://img.colorpark.cn/wechat/track/fukuanquGolf.png" mode="widthFix" style="width: 100%;"></image> style="position: absolute; top: 0; right: 100%; width: 100%; height: 100%;overflow: hidden;">
<image src="https://img.colorpark.cn/wechat/track/fukuanquGolf.png" mode="widthFix"
style="width: 100%;"></image>
</view> </view>
<!-- 生产中打印 1--> <!-- 生产中打印 1-->
<view style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;"> <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: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
<view style="position: relative; width: 100%;"> <view style="position: relative; width: 100%;">
<image src="https://img.colorpark.cn/wechat/track/dayinquGolf.png" mode="widthFix" style="width: 100%;"></image> <image src="https://img.colorpark.cn/wechat/track/dayinquGolf.png" mode="widthFix"
style="width: 100%;"></image>
</view> </view>
<view style="position: relative; width: 100%; margin-top: -13px;"> <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> <image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix"
style="width: 100%;"></image>
</view> </view>
</view> </view>
<view style="position: relative;width: 100%; height: 100%;overflow: hidden;" :animation="printingEnd"> <view style="position: relative;width: 100%; height: 100%;overflow: hidden;"
:animation="printingEnd">
<view class='crate-wrapper'> <view class='crate-wrapper'>
<!-- style="overflow: hidden;" --> <!-- style="overflow: hidden;" -->
<view class="brush" <view class="brush" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
transform: 'translateX(' + data.printingStartX + 'px)'}"> transform: 'translateX(' + data.printingStartX + 'px)'}">
<view :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}" <view :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}"
style="position: relative;overflow: hidden;"> style="position: relative;overflow: hidden;">
<!-- 底图 --> <!-- 底图 -->
<view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; <view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0;
margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view> margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view>
<!-- 底图 --> <!-- 底图 -->
<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" <view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" style="display: flex; align-items: center; justify-content: center;
style="display: flex; align-items: center; justify-content: center;
position: absolute; width: 100%; height: 100%; left: 0; top: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0;
right: 0; margin: auto; bottom: 0;"> right: 0; margin: auto; bottom: 0;">
<view style="width: 90%; height: 90%; display: flex;"> <view style="width: 90%; height: 90%; display: flex;">
<view style="width: calc(100% / 4);" v-for="item in 4" :key="a"> <view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
<view v-for="item in 3" :key="b" <view v-for="item in 3" :key="b"
style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;"> style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
<image style="width: 100%; height: 100%;position: absolute; <image style="width: 100%; height: 100%;position: absolute;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
margin:auto; z-index: 1;" margin:auto; z-index: 1;" :src="goods.goods.front_image_old" mode="aspectFit"></image>
:src="goods.goods.front_image_old" mode="aspectFit"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 作品图 --> <!-- 作品图 -->
<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 3:0}" <view v-if="initstate" :style="{'z-index': data.render_cove_width ? 3:0}" style="display: flex; align-items: center; justify-content: center;
style="display: flex; align-items: center; justify-content: center;
position: absolute; width: 100%; height: 100%; left: 0; top: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0;
right: 0; margin: auto; bottom: 0;"> right: 0; margin: auto; bottom: 0;">
<view style="width: 90%; height: 90%; display: flex;"> <view style="width: 90%; height: 90%; display: flex;">
<view style="width: calc(100% / 4);" v-for="item in 4" :key="a"> <view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
<view v-for="item in 3" :key="b" <view v-for="item in 3" :key="b"
style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;"> style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
<image style="width: 50%; height: 50%; position: absolute; <image style="width: 50%; height: 50%; position: absolute;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
margin: auto; z-index:0;" margin: auto; z-index:0;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'" mode="aspectFit"></image> mode="aspectFit"></image>
<!-- <image style="width: 100%; height: 100%;position: absolute; <!-- <image style="width: 100%; height: 100%;position: absolute;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
margin:auto; z-index: 1;" margin:auto; z-index: 1;"
...@@ -132,62 +135,62 @@ ...@@ -132,62 +135,62 @@
</view> </view>
</view> </view>
<!-- 刷子白图 --> <!-- 刷子白图 -->
<view :style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}" <view
style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 4;"> :style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 4;">
<view :style="{width: leftx +'px',height: data.render_cove_height +'px'}" <view :style="{width: leftx +'px',height: data.render_cove_height +'px'}"
style="position: absolute; left: 0; top: 0;background: #fff;"> style="position: absolute; left: 0; top: 0;background: #fff;">
</view> </view>
</view> </view>
<!-- 底图 --> <!-- 底图 -->
<view :style="{width: leftx +'px',height: data.render_cove_height +'px'}" <view :style="{width: leftx +'px',height: data.render_cove_height +'px'}"
style="overflow: hidden; position: absolute;left: 0; top: 0; bottom: 0; z-index: 5;"> style="overflow: hidden; position: absolute;left: 0; top: 0; bottom: 0; z-index: 5;">
<view <view
:style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}" :style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
style="display: flex; align-items: center; justify-content: center; style="display: flex; align-items: center; justify-content: center;
position: absolute; left: 0; top: 0; position: absolute; left: 0; top: 0;
right: 0; margin: auto; bottom: 0;"> right: 0; margin: auto; bottom: 0;">
<view style="width: 90%; height: 90%; display: flex;"> <view style="width: 90%; height: 90%; display: flex;">
<view style="width: calc(100% / 4);" v-for="item in 4" :key="a"> <view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
<view v-for="item in 3" :key="b" <view v-for="item in 3" :key="b"
style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;"> style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
<image style="width: 100%; height: 100%;position: absolute; <image style="width: 100%; height: 100%;position: absolute;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
margin:auto; z-index: 1;" margin:auto; z-index: 1;" :src="goods.goods.front_image_old" mode="aspectFit"></image>
:src="goods.goods.front_image_old" mode="aspectFit"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 色彩公园Lite球图 --> <!-- 色彩公园Lite球图 -->
<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 6:0}" <view v-if="initstate" :style="{'z-index': data.render_cove_width ? 6:0}" style="display: flex; align-items: center; justify-content: center;
style="display: flex; align-items: center; justify-content: center;
position: absolute; width: 100%; height: 100%; left: 0; top: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0;
right: 0; margin: auto; bottom: 0;"> right: 0; margin: auto; bottom: 0;">
<view style="width: 90%; height: 90%; display: flex;"> <view style="width: 90%; height: 90%; display: flex;">
<view style="width: calc(100% / 4);" v-for="item in 4" :key="a"> <view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
<view v-for="item in 3" :key="b" <view v-for="item in 3" :key="b"
style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;"> style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
<image style="width: 100%; height: 100%;position: absolute; <image style="width: 100%; height: 100%;position: absolute;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
margin:auto; z-index: 1;" margin:auto; z-index: 1;" :src="goods.goods.front_image" mode="aspectFit"></image>
:src="goods.goods.front_image" mode="aspectFit"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 刷子范围 --> <!-- 刷子范围 -->
<view :style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}" <view
style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 10;"> :style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 10;">
<view class="item-text" :animation="animMaind" :class="{printer:printer}" <view class="item-text" :animation="animMaind" :class="{printer:printer}"
:style="{left: leftx +'px',opacity: printer ? 1 : 0}" :style="{left: leftx +'px',opacity: printer ? 1 : 0}"
style="width:40px; height:100px; position:absolute; top: -50px;"> style="width:40px; height:100px; position:absolute; top: -50px;">
<image src="../../static/img/shua.png" mode="" style="width:40px; height:100px;"></image> <image src="../../static/img/shua.png" mode=""
style="width:40px; height:100px;"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
...@@ -196,15 +199,16 @@ ...@@ -196,15 +199,16 @@
<!-- 底图 --> <!-- 底图 -->
<view style="position: absolute; top: 0; left: 0; 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%;"> <view style="position: relative; width: 100%;">
<image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix" style="width: 100%;"></image> <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%; margin-top: -13px;"> <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> <image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix"
style="width: 100%;"></image>
</view> </view>
</view> </view>
<view class='crate-wrapper'> <view class='crate-wrapper'>
<view class="twobrush" :animation="PickUpStart" <view class="twobrush" :animation="PickUpStart" :style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
transform: 'translateY(' + -(data.editorHeight + (data.windowHeight - data.editorHeight)/2) + 'px)'}"> transform: 'translateY(' + -(data.editorHeight + (data.windowHeight - data.editorHeight)/2) + 'px)'}">
<!-- 底图 --> <!-- 底图 -->
<!-- <view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; <!-- <view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0;
...@@ -231,93 +235,96 @@ ...@@ -231,93 +235,96 @@
</view> </view>
</view> --> </view> -->
<view :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}" <view :style="{width: data.editorWidth +'px',height: data.editorHeight +'px'}"
style="position: relative;overflow: hidden;"> style="position: relative;overflow: hidden;">
<!-- 底色 --> <!-- 底色 -->
<view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; <view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0;
margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view> margin: auto; bottom: 0; background: #FFFFFF; z-index: 1;"></view>
<!-- 底图 --> <!-- 底图 -->
<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" <view v-if="initstate" :style="{'z-index': data.render_cove_width ? 2:0}" style="display: flex; align-items: center; justify-content: center;
style="display: flex; align-items: center; justify-content: center;
position: absolute; width: 100%; height: 100%; left: 0; top: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0;
right: 0; margin: auto; bottom: 0;"> right: 0; margin: auto; bottom: 0;">
<view style="width: 90%; height: 90%; display: flex;"> <view style="width: 90%; height: 90%; display: flex;">
<view style="width: calc(100% / 4);" v-for="item in 4" :key="a"> <view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
<view v-for="item in 3" :key="b" <view v-for="item in 3" :key="b"
style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;"> style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
<image style="width: 100%; height: 100%;position: absolute; <image style="width: 100%; height: 100%;position: absolute;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
margin:auto; z-index: 1;" margin:auto; z-index: 1;" :src="goods.goods.front_image_old" mode="aspectFit"></image>
:src="goods.goods.front_image_old" mode="aspectFit"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 作品图 --> <!-- 作品图 -->
<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 3:0}" <view v-if="initstate" :style="{'z-index': data.render_cove_width ? 3:0}" style="display: flex; align-items: center; justify-content: center;
style="display: flex; align-items: center; justify-content: center;
position: absolute; width: 100%; height: 100%; left: 0; top: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0;
right: 0; margin: auto; bottom: 0;"> right: 0; margin: auto; bottom: 0;">
<view style="width: 90%; height: 90%; display: flex;"> <view style="width: 90%; height: 90%; display: flex;">
<view style="width: calc(100% / 4);" v-for="item in 4" :key="a"> <view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
<view v-for="item in 3" :key="b" <view v-for="item in 3" :key="b"
style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;"> style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
<image style="width: 50%; height: 50%; position: absolute; <image style="width: 50%; height: 50%; position: absolute;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
margin: auto; z-index:0;" margin: auto; z-index:0;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'" mode="aspectFit"></image> mode="aspectFit"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 色彩公园Lite球图 --> <!-- 色彩公园Lite球图 -->
<view v-if="initstate" :style="{'z-index': data.render_cove_width ? 5:0}" <view v-if="initstate" :style="{'z-index': data.render_cove_width ? 5:0}" style="display: flex; align-items: center; justify-content: center;
style="display: flex; align-items: center; justify-content: center;
position: absolute; width: 100%; height: 100%; left: 0; top: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0;
right: 0; margin: auto; bottom: 0;"> right: 0; margin: auto; bottom: 0;">
<view style="width: 90%; height: 90%; display: flex;"> <view style="width: 90%; height: 90%; display: flex;">
<view style="width: calc(100% / 4);" v-for="item in 4" :key="a"> <view style="width: calc(100% / 4);" v-for="item in 4" :key="a">
<view v-for="item in 3" :key="b" <view v-for="item in 3" :key="b"
style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;"> style="width: 100%; height: calc(100% / 3); position: relative; overflow: hidden;">
<image style="width: 100%; height: 100%;position: absolute; <image style="width: 100%; height: 100%;position: absolute;
top: 0; left: 0; right: 0; bottom: 0; top: 0; left: 0; right: 0; bottom: 0;
margin:auto; z-index: 1;" margin:auto; z-index: 1;" :src="goods.goods.front_image" mode="aspectFit"></image>
:src="goods.goods.front_image" mode="aspectFit"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 暂时缺货、订单已取消 --> <!-- 暂时缺货、订单已取消 -->
<view style="width: 100%; height: 100%; position: absolute; top: 0; z-index: 2;background: #131319 !important;" <view
v-if="(orderOrderStatusData.status == 3 || orderOrderStatusData.status == -3) && type != 1"> 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="padding-bottom: 32px">
<view style="width: 220upx; margin:90upx auto 40upx;"> <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> <image style="width: 220upx; height: 220upx; border-radius: 50%;"
src="../../static/icon_close.png" mode="aspectFill"></image>
</view> </view>
<view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;"> <view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;">
暂时缺货、订单已取消 暂时缺货、订单已取消
</view> </view>
<view style="margin-top: 378upx; display: flex;align-items: center; justify-content: center;"> <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: 187upx; position: relative; border-radius: 10upx;"
<view style="width: 128upx; height: 128upx;margin:auto; display: block; position: relative; overflow: hidden;"> @click="previewImg(goods,0)">
<view
style="width: 128upx; height: 128upx;margin:auto; display: block; position: relative; overflow: hidden;">
<view style="width: 50%; height: 50%; background: #FFFFFF; position: absolute; top: 0; <view style="width: 50%; height: 50%; background: #FFFFFF; position: absolute; top: 0;
left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;"></view> left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;"></view>
<image style="width: 50%; height: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;" <image
:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'" mode="aspectFit"></image> style="width: 50%; height: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
<image style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 10;" :src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
:src="goods.goods.front_image" mode="aspectFit"></image> mode="aspectFit"></image>
<image
style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 10;"
:src="goods.goods.front_image" mode="aspectFit"></image>
</view> </view>
</view> </view>
<view style="margin-left: 19upx; margin-top: 5upx; "> <view style="margin-left: 19upx; margin-top: 5upx; ">
<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;"> <view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
<text> 订单编号： </text> <text> 订单编号： </text>
<text style="color: #888888;"> {{goods.id}} </text> <text style="color: #888888;"> {{goods.id}} </text>
<text @click="tosetClipboardData(goods.id)" style="margin-left: 5upx;font-size: 22upx;">复制</text> <text @click="tosetClipboardData(goods.id)"
style="margin-left: 5upx;font-size: 22upx;">复制</text>
</view> </view>
<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 15upx;"> <view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 15upx;">
<text> 产品尺寸： </text> <text> 产品尺寸： </text>
...@@ -331,27 +338,32 @@ ...@@ -331,27 +338,32 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 设备故障状态 --> <!-- 设备故障状态 -->
<view style="width: 100%; height: 100%; position: absolute; top: 0; z-index: 2;background: #131319 !important;" <view
v-if="orderOrderStatusData.status == -2 && type != 1"> 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;"> <view class="start" style="padding-bottom: 100upx; padding-top: 200upx;">
<image src="../../static/icon_guaqi.png" mode="aspectFill" class="start_img"></image> <image src="../../static/icon_guaqi.png" mode="aspectFill" class="start_img"></image>
<view class="start_text">{{msg || ''}}</view> <view class="start_text">{{msg || ''}}</view>
<view> <view>
<view class="start_text">联系客服</view> <view class="start_text">联系客服</view>
<view class="start_text" style="display: flex; justify-content: center; align-items: center;"> <view class="start_text" style="display: flex; justify-content: center; align-items: center;">
<image src="../../static/phone.png" mode="" style="width: 32upx; height: 32upx; margin-right: 5upx;"></image> <image src="../../static/phone.png" mode=""
style="width: 32upx; height: 32upx; margin-right: 5upx;"></image>
{{phone || '18938664545'}} {{phone || '18938664545'}}
</view> </view>
</view> </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> <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>
<!-- 取货完成状态 --> <!-- 取货完成状态 -->
<view v-if="orderOrderStatusData.status == 7 && type != 1"> <view v-if="orderOrderStatusData.status == 7 && type != 1">
<view style="padding-bottom: 32px"> <view style="padding-bottom: 32px">
<view style="width: 220upx; margin:90upx auto 40upx;"> <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> <image style="width: 220upx; height: 220upx; border-radius: 50%;"
src="../../static/mine/Pick-up.png" mode="aspectFill"></image>
</view> </view>
<view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;"> <view style="font-size: 36upx; font-weight: 400; color: #FFFFFF; text-align: center;">
打印完成 打印完成
...@@ -362,20 +374,28 @@ ...@@ -362,20 +374,28 @@
</text> </text>
</view> </view>
<view style="display: flex;align-items: center; justify-content: center;"> <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: 187upx; position: relative; border-radius: 10upx;"
<view style="width: 128upx; height: 128upx;margin:auto; display: block; position: relative; overflow: hidden;"> @click="previewImg(goods,0)">
<view style="width: 50%; height: 50%; background: #FFFFFF; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;"></view> <view
<image style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 10;" style="width: 128upx; height: 128upx;margin:auto; display: block; position: relative; overflow: hidden;">
:src="goods.goods.front_image" mode="aspectFit"></image> <view
<image style="width: 50%; height: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;" style="width: 50%; height: 50%; background: #FFFFFF; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;">
:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'" mode="aspectFit"></image> </view>
<image
style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 10;"
:src="goods.goods.front_image" mode="aspectFit"></image>
<image
style="width: 50%; height: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
:src="goods.works_image + '?x-oss-process=image/resize,lfit,w_300'"
mode="aspectFit"></image>
</view> </view>
</view> </view>
<view style="margin-left: 19upx; margin-top: 5upx; "> <view style="margin-left: 19upx; margin-top: 5upx; ">
<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;"> <view style="font-size: 24upx; font-weight: 400; color: #FFFFFF;">
<text> 订单编号： </text> <text> 订单编号： </text>
<text style="color: #888888;"> {{goods.id}} </text> <text style="color: #888888;"> {{goods.id}} </text>
<text @click="tosetClipboardData(goods.id)" style="margin-left: 5upx;font-size: 22upx;">复制</text> <text @click="tosetClipboardData(goods.id)"
style="margin-left: 5upx;font-size: 22upx;">复制</text>
</view> </view>
<view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 15upx;"> <view style="font-size: 24upx; font-weight: 400; color: #FFFFFF; margin-top: 15upx;">
<text> 产品尺寸： </text> <text> 产品尺寸： </text>
...@@ -405,169 +425,178 @@ ...@@ -405,169 +425,178 @@
s: 'Order.detail', s: 'Order.detail',
id: null id: null
}, },
machine_id:null,//设备id machine_id: null, //设备id
type:null ,//1：配送版，2：单机版，3：自助版 type: null, //1：配送版，2：单机版，3：自助版
lineUpState: false,//排队状态----横向进入滑动动画 lineUpState: false, //排队状态----横向进入滑动动画
leaveUpState: false,//排队状态----横向离开滑动动画 leaveUpState: false, //排队状态----横向离开滑动动画
printingStart: false,//打印状态----横向进来滑动动画 Printing start printingStart: false, //打印状态----横向进来滑动动画 Printing start
printingEnd:{}, ///打印状态----纵向离开动画 Printing end printingEnd: {}, ///打印状态----纵向离开动画 Printing end
initstate: false,//打印状态----显示刷子 initstate: false, //打印状态----显示刷子
PickUpStart:{}, //取货状态-----手机壳从上面动画出来 PickUpStart: {}, //取货状态-----手机壳从上面动画出来
PickUpTopBottom:null, //定时器----取货上下浮动 PickUpTopBottom: null, //定时器----取货上下浮动
statetime:null,//定时器----打印机动画 statetime: null, //定时器----打印机动画
orderOrderStatusTime:null,//定时器---查询订单状态 orderOrderStatusTime: null, //定时器---查询订单状态
OrderOrderRankingTime:null,//定时器---排队定时器 OrderOrderRankingTime: null, //定时器---排队定时器
leftx:0,//x轴-----刷子打印 leftx: 0, //x轴-----刷子打印
topy:-20,//y-----刷子打印 topy: -20, //y-----刷子打印
animMaind:{}, //动画----刷子上下动画 animMaind: {}, //动画----刷子上下动画
animMaind_time:577, //800动画时间----刷子上下动画时间 animMaind_time: 577, //800动画时间----刷子上下动画时间
isReady: false,//礼花开关 isReady: false, //礼花开关
BoxTwoAnimation:{}, //排队-打印-取货流程图架构 BoxTwoAnimation: {}, //排队-打印-取货流程图架构
oldRankinglist:[],//上次排队队列 oldRankinglist: [], //上次排队队列
rankinglist:[],//排队队列 rankinglist: [], //排队队列
teststate:false,//开启测试模式 false true teststate: false, //开启测试模式 false true
orderOrderStatusData:null,//订单状态 orderOrderStatusData: null, //订单状态
ringaction: { //打印机音乐状态 ringaction: { //打印机音乐状态
method: 'pause' //method: 'pause'method: 'play' method: 'pause' //method: 'pause'method: 'play'
}, },
printer:false,//打印机状态 printer: false, //打印机状态
data: { data: {
windowWidth: 0, // 屏幕宽度 windowWidth: 0, // 屏幕宽度
windowHeight: 0, // 屏幕高度 windowHeight: 0, // 屏幕高度
pixelRate: 0, // 屏幕宽度比率 pixelRate: 0, // 屏幕宽度比率
editorWidth: 0, // 设计宽度 editorWidth: 0, // 设计宽度
editorHeight: 0, // 设计高度 editorHeight: 0, // 设计高度
render_cove_width:null, render_cove_width: null,
render_cove_height:null, render_cove_height: null,
activebrushX:-500,//排队盒子动画坐标 activebrushX: -500, //排队盒子动画坐标
printingStartX:-500,//生产中盒子动画坐标 printingStartX: -500, //生产中盒子动画坐标
}, },
tomallstate:true,//防止返回触动页面销毁事件 tomallstate: true, //防止返回触动页面销毁事件
LoadState:false,//加载完成 LoadState: false, //加载完成
orderCurrentOrder:null, orderCurrentOrder: null,
orderCurrentOrderTime:null orderCurrentOrderTime: null
}; };
}, },
onReady() { onReady() {
}, },
methods: { methods: {
tomall(){ tomall() {
this.tomallstate = false this.tomallstate = false
wx.navigateBack({delta: 1}) wx.navigateBack({
delta: 1
})
}, },
init() { init() {
this.printer = true this.printer = true
this.isReady = false this.isReady = false
this.leftx = this.data.render_cove_width this.leftx = this.data.render_cove_width
// this.topy = -20 // this.topy = -20
setTimeout(function(){ setTimeout(function() {
this.updata() this.updata()
}.bind(this),2000) }.bind(this), 2000)
}, },
updata(){ updata() {
setTimeout(function(){ setTimeout(function() {
this.ringaction.method = 'play' //开启音乐 this.ringaction.method = 'play' //开启音乐
console.log('5开启音乐') console.log('5开启音乐')
}.bind(this),this.animMaind_time) }.bind(this), this.animMaind_time)
// 无限循环动画 // 无限循环动画
var animation = wx.createAnimation({ var animation = wx.createAnimation({
duration: this.animMaind_time,// 动画执行时间 duration: this.animMaind_time, // 动画执行时间
timingFunction: 'linear',// 动画执行效果 timingFunction: 'linear', // 动画执行效果
}) })
var state = true // 控制上下滑动setTimeout setInterval var state = true // 控制上下滑动setTimeout setInterval
this.statetime = setInterval(function(){ this.statetime = setInterval(function() {
if(state == true){ if (state == true) {
animation.translate(0,(this.data.render_cove_height)).step();//向下移动 animation.translate(0, (this.data.render_cove_height)).step(); //向下移动
}else{ } else {
animation.translate(0,0).step();//向上移动 animation.translate(0, 0).step(); //向上移动
} }
state = !state state = !state
// 减慢打印时间 // 减慢打印时间
if(this.leftx <= 10){ if (this.leftx <= 10) {
if(this.orderOrderStatusData.status == 10 || this.orderOrderStatusData.status == 2){ if (this.orderOrderStatusData.status == 10 || this.orderOrderStatusData.status == 2) {
this.leftx -= 2 this.leftx -= 2
}else{ } else {
this.leftx -= 0.1 this.leftx -= 0.1
} }
}else{ } else {
this.leftx -= 1 this.leftx -= 1
} }
this.setData({ this.setData({
animMaind: animation.export(), animMaind: animation.export(),
leftx:this.leftx leftx: this.leftx
}) })
// 打印完成----清除定时器 // 打印完成----清除定时器
if(this.leftx <= 0){ if (this.leftx <= 0) {
this.ringaction.method = 'pause' //暂停音乐 this.ringaction.method = 'pause' //暂停音乐
console.log('5暂停音乐') console.log('5暂停音乐')
clearInterval(this.statetime) clearInterval(this.statetime)
this.statetime = null this.statetime = null
this.isReady = true; this.isReady = true;
this.printer = false this.printer = false
uni.showToast({title: '打印完成，即将出货',icon: 'none',duration: 2000}); uni.showToast({
setTimeout(function(){ title: '打印完成，即将出货',
icon: 'none',
duration: 2000
});
setTimeout(function() {
this.boxinit({ this.boxinit({
duration:3000,// 动画执行时间 duration: 3000, // 动画执行时间
axisX:0,// x轴移动 axisX: 0, // x轴移动
axisY:this.data.windowHeight,// y轴移动 axisY: this.data.windowHeight, // y轴移动
settimeout:3500,// 定时器时间 settimeout: 3500, // 定时器时间
}) // 触发打印完成--手机壳下移消失 }) // 触发打印完成--手机壳下移消失
}.bind(this),2000) }.bind(this), 2000)
} }
}.bind(this),this.animMaind_time) }.bind(this), this.animMaind_time)
}, },
// 打印完成--手机壳下移消失 // 打印完成--手机壳下移消失
boxinit(data){ boxinit(data) {
var animation = wx.createAnimation({ var animation = wx.createAnimation({
duration: data.duration,// 动画执行时间 duration: data.duration, // 动画执行时间
timingFunction: 'linear',// 动画执行效果 timingFunction: 'linear', // 动画执行效果
}) })
animation.translate(data.axisX, data.axisY).step(); animation.translate(data.axisX, data.axisY).step();
this.setData({ this.setData({
printingEnd: animation.export(), printingEnd: animation.export(),
}) })
setTimeout(function(){ setTimeout(function() {
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:2000,// 动画执行时间 duration: 2000, // 动画执行时间
axisX:0,// x轴移动 axisX: 0, // x轴移动
axisY:-this.data.windowHeight,// y轴移动 axisY: -this.data.windowHeight, // y轴移动
settimeout:2500,// 定时器时间 settimeout: 2500, // 定时器时间
settimeoutState:true,//开启下一步 settimeoutState: true, //开启下一步
}) })
}.bind(this),data.settimeout) }.bind(this), data.settimeout)
}, },
// 取货页面----底部向上滑动动画 // 取货页面----底部向上滑动动画
Box_Two_Animation(data){ Box_Two_Animation(data) {
var animation = wx.createAnimation({ var animation = wx.createAnimation({
duration: data.duration,// 动画执行时间 duration: data.duration, // 动画执行时间
timingFunction: 'linear',// 动画执行效果 timingFunction: 'linear', // 动画执行效果
}) })
animation.translate(data.axisX, data.axisY).step(); animation.translate(data.axisX, data.axisY).step();
this.setData({ this.setData({
BoxTwoAnimation: animation.export(), BoxTwoAnimation: animation.export(),
}) })
if(!data.settimeoutState) return; if (!data.settimeoutState) return;
wx.setNavigationBarTitle({title: '取货区' }) wx.setNavigationBarTitle({
setTimeout(function(){ title: '取货区'
let boxinitY = (this.data.windowHeight - ((this.data.windowHeight - this.data.editorHeight)/2)) - ( this.data.editorHeight / 3 * 1) })
setTimeout(function() {
let boxinitY = (this.data.windowHeight - ((this.data.windowHeight - this.data.editorHeight) /
2)) - (this.data.editorHeight / 3 * 1)
this.Two_Brush_Animation({ this.Two_Brush_Animation({
duration:5000,// 动画执行时间 duration: 5000, // 动画执行时间
axisX:0,// x轴移动 axisX: 0, // x轴移动
axisY:boxinitY,// y轴移动 axisY: boxinitY, // y轴移动
settimeout:5000,// 定时器时间 settimeout: 5000, // 定时器时间
}) })
}.bind(this),data.settimeout) }.bind(this), data.settimeout)
}, },
// 取货手机壳动画 // 取货手机壳动画
Two_Brush_Animation(data){ Two_Brush_Animation(data) {
let animation = wx.createAnimation({ let animation = wx.createAnimation({
duration: data.duration,// 动画执行时间 duration: data.duration, // 动画执行时间
timingFunction: 'linear',// 动画执行效果 timingFunction: 'linear', // 动画执行效果
}) })
animation.translate(data.axisX, data.axisY).step(); animation.translate(data.axisX, data.axisY).step();
this.setData({ this.setData({
...@@ -576,33 +605,39 @@ ...@@ -576,33 +605,39 @@
// 上下浮动 // 上下浮动
clearInterval(this.PickUpTopBottom) clearInterval(this.PickUpTopBottom)
this.PickUpTopBottom = null this.PickUpTopBottom = null
setTimeout(function(){ setTimeout(function() {
uni.showToast({title: '已出货，请在出货口取货吧',icon: 'none',duration: 2000}); uni.showToast({
title: '已出货，请在出货口取货吧',
icon: 'none',
duration: 2000
});
var state = true var state = true
let animation = wx.createAnimation({ let animation = wx.createAnimation({
duration: 2000,// 动画执行时间 duration: 2000, // 动画执行时间
timingFunction: 'linear',// 动画执行效果 timingFunction: 'linear', // 动画执行效果
}) })
this.PickUpTopBottom = setInterval(function(){ this.PickUpTopBottom = setInterval(function() {
if(state == true){ if (state == true) {
animation.translate(data.axisX,(data.axisY + 40)).step(); animation.translate(data.axisX, (data.axisY + 40)).step();
}else{ } else {
animation.translate(data.axisX,data.axisY).step(); animation.translate(data.axisX, data.axisY).step();
} }
state = !state state = !state
this.setData({ this.setData({
PickUpStart: animation.export(), PickUpStart: animation.export(),
}) })
}.bind(this),2000) }.bind(this), 2000)
}.bind(this),data.settimeout) }.bind(this), data.settimeout)
}, },
loadData() { loadData() {
uni.showLoading({title: '正在加载中...'}) uni.showLoading({
title: '正在加载中...'
})
homeservice.WorksList(this.queryPage).then(result => { homeservice.WorksList(this.queryPage).then(result => {
this.goods = result this.goods = result
if(this.$base.mobilePhoneCaseSize){ /* if (this.$base.mobilePhoneCaseSize) {
this.data = this.$base.mobilePhoneCaseSize this.data = this.$base.mobilePhoneCaseSize
}else{ } else { */
result.goods.design_width = 277.5 / this.data.pixelRate result.goods.design_width = 277.5 / this.data.pixelRate
result.goods.design_height = 210 / this.data.pixelRate result.goods.design_height = 210 / this.data.pixelRate
this.data.editorWidth = result.goods.design_width * this.data.pixelRate // 设计宽度 this.data.editorWidth = result.goods.design_width * this.data.pixelRate // 设计宽度
...@@ -611,25 +646,29 @@ ...@@ -611,25 +646,29 @@
// this.data.render_cove_height = result.goods.render_cove_height * (result.goods.design_height / result.goods.render_height) * this.data.pixelRate + 30 // 设计高度 // this.data.render_cove_height = result.goods.render_cove_height * (result.goods.design_height / result.goods.render_height) * this.data.pixelRate + 30 // 设计高度
this.data.render_cove_width = result.goods.design_width * this.data.pixelRate // 设计高度 this.data.render_cove_width = result.goods.design_width * this.data.pixelRate // 设计高度
this.data.render_cove_height = result.goods.design_height * this.data.pixelRate // 设计高度 this.data.render_cove_height = result.goods.design_height * this.data.pixelRate // 设计高度
this.data.render_left = result.goods.render_left * (result.goods.design_width / result.goods.render_width) * this.data.pixelRate // 设计高度 this.data.render_left = result.goods.render_left * (result.goods.design_width / result
this.data.render_top = result.goods.render_top * (result.goods.design_height / result.goods.render_height) * this.data.pixelRate // 设计高度 .goods.render_width) * this.data.pixelRate // 设计高度
this.data.activebrushX = -((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth + 50) this.data.render_top = result.goods.render_top * (result.goods.design_height / result.goods
this.data.printingStartX = -((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth + 50) .render_height) * this.data.pixelRate // 设计高度
this.$base.mobilePhoneCaseSize = this.data this.data.activebrushX = -((this.data.windowWidth - this.data.editorWidth) / 2 + this.data
} .editorWidth + 50)
this.data.printingStartX = -((this.data.windowWidth - this.data.editorWidth) / 2 + this
.data.editorWidth + 50)
//this.$base.mobilePhoneCaseSize = this.data
/* } */
this.leftx = this.data.render_cove_width this.leftx = this.data.render_cove_width
// status.value 订单状态 0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成 --> // status.value 订单状态 0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成 -->
// type.value 1直营配送站 2 万能通用版 3色彩自助站 // type.value 1直营配送站 2 万能通用版 3色彩自助站
if(this.teststate){ if (this.teststate) {
result.status.value = 1 //1：生产中 result.status.value = 1 //1：生产中
result.type.value = 2 //2单机版 result.type.value = 2 //2单机版
} }
this.type = result.type.value this.type = result.type.value
// 单机版查询当前设备打印订单 // 单机版查询当前设备打印订单
if(this.type == 2){ if (this.type == 2) {
this.anb() //查询排队列表 this.anb() //查询排队列表
this.leaveto(3) this.leaveto(3)
// clearInterval(this.orderCurrentOrderTime) // clearInterval(this.orderCurrentOrderTime)
// this.orderCurrentOrderTime = setInterval(function(){ // this.orderCurrentOrderTime = setInterval(function(){
// this.OrdercurrentOrder() //单机版查询设备打印订单 // this.OrdercurrentOrder() //单机版查询设备打印订单
...@@ -639,66 +678,76 @@ ...@@ -639,66 +678,76 @@
// this.OrdercurrentOrder() //单机版查询设备打印订单 // this.OrdercurrentOrder() //单机版查询设备打印订单
// // this.anbtwo() //记录排队人数 // // this.anbtwo() //记录排队人数
// }.bind(this),10000) // }.bind(this),10000)
}else{ } else {
this.OrderOrderStatusInit() this.OrderOrderStatusInit()
} }
uni.hideLoading(); uni.hideLoading();
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
}).catch(err => { }).catch(err => {
uni.hideLoading(); uni.hideLoading();
uni.showToast({title: err.msg || err.data,icon: 'none'}); uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
}); });
}, },
anb(){ anb() {
homeservice.WorksList({ homeservice.WorksList({
s:'Order.orderStatus', s: 'Order.orderStatus',
order_id:this.queryPage.id order_id: this.queryPage.id
}).then(result => { }).then(result => {
this.orderOrderStatusData = result this.orderOrderStatusData = result
this.orderOrderStatusData.status = 0 this.orderOrderStatusData.status = 0
// wx.setNavigationBarTitle({title: '排队区' }) // wx.setNavigationBarTitle({title: '排队区' })
// this.anbone() // this.anbone()
}).catch(err => { }).catch(err => {
uni.showToast({title: err.msg || err.data,icon: 'none'}); uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
}); });
}, },
anbone(){ anbone() {
homeservice.WorksList({ homeservice.WorksList({
s:'Order.orderRanking', s: 'Order.orderRanking',
order_id:this.queryPage.id, order_id: this.queryPage.id,
machine_id:this.machine_id machine_id: this.machine_id
}).then(result => { }).then(result => {
this.oldRankinglist = []// 第一次进来记录排队人数 this.oldRankinglist = [] // 第一次进来记录排队人数
for(var i =0;i<result.ranking;i++){ for (var i = 0; i < result.ranking; i++) {
this.oldRankinglist.push({ this.oldRankinglist.push({
w:30,x:0 w: 30,
x: 0
}) })
} }
this.rankinglist = this.oldRankinglist this.rankinglist = this.oldRankinglist
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:0,// 动画执行时间 duration: 0, // 动画执行时间
axisX:this.data.windowWidth + this.data.windowWidth,// x轴移动 axisX: this.data.windowWidth + this.data.windowWidth, // x轴移动
axisY:0,// y轴移动 axisY: 0, // y轴移动
settimeout:0,// 定时器时间 settimeout: 0, // 定时器时间
settimeoutState:false,//开启下一步 settimeoutState: false, //开启下一步
}) })
this.LoadState = true this.LoadState = true
setTimeout(function(){ setTimeout(function() {
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:3000,// 动画执行时间 duration: 3000, // 动画执行时间
axisX:this.data.windowWidth,// x轴移动 axisX: this.data.windowWidth, // x轴移动
axisY:0,// y轴移动 axisY: 0, // y轴移动
settimeout:0,// 定时器时间 settimeout: 0, // 定时器时间
settimeoutState:false,//开启下一步 settimeoutState: false, //开启下一步
}) })
}.bind(this),1000) }.bind(this), 1000)
//排队状态----盒子横向进入滑动动画时间3s //排队状态----盒子横向进入滑动动画时间3s
setTimeout(function(){ setTimeout(function() {
this.lineUpState = true this.lineUpState = true
this.data.activebrushX = 0 this.data.activebrushX = 0
}.bind(this),4500) }.bind(this), 4500)
}).catch(err => { }).catch(err => {
uni.showToast({title: err.msg || err.data,icon: 'none'}); uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
}); });
}, },
// anbtwo(){ // anbtwo(){
...@@ -718,14 +767,14 @@ ...@@ -718,14 +767,14 @@
// uni.showToast({title: err.msg || err.data,icon: 'none'}); // uni.showToast({title: err.msg || err.data,icon: 'none'});
// }); // });
// }, // },
OrdercurrentOrder(){ OrdercurrentOrder() {
console.log('单机版查询设备打印订单') console.log('单机版查询设备打印订单')
homeservice.WorksList({ homeservice.WorksList({
s:'Order.currentOrder', s: 'Order.currentOrder',
machine_id:this.machine_id machine_id: this.machine_id
}).then(result => { }).then(result => {
this.orderCurrentOrder = result.order_id this.orderCurrentOrder = result.order_id
if(this.teststate){ if (this.teststate) {
this.orderCurrentOrder = this.queryPage.id // 测试 this.orderCurrentOrder = this.queryPage.id // 测试
} }
// if(this.orderCurrentOrder == this.queryPage.id){ // if(this.orderCurrentOrder == this.queryPage.id){
...@@ -737,23 +786,28 @@ ...@@ -737,23 +786,28 @@
clearInterval(this.orderCurrentOrderTime) clearInterval(this.orderCurrentOrderTime)
}).catch(err => { }).catch(err => {
uni.hideLoading(); uni.hideLoading();
uni.showToast({title: err.msg || err.data,icon: 'none'}); uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
}); });
}, },
OrderOrderStatusInit(e){ OrderOrderStatusInit(e) {
homeservice.WorksList({ homeservice.WorksList({
s:'Order.orderStatus', s: 'Order.orderStatus',
order_id:this.queryPage.id order_id: this.queryPage.id
}).then(result => { }).then(result => {
//result.status -1：订单不存在 0：待打印 1：打印中 10：打印完成 2：生产完成 3：取消生产 //result.status -1：订单不存在 0：待打印 1：打印中 10：打印完成 2：生产完成 3：取消生产
if(this.teststate || e == 2){ if (this.teststate || e == 2) {
result.status = -2 // 测试 result.status = -2 // 测试
} }
this.orderOrderStatusData = result this.orderOrderStatusData = result
if(result.status == 0){ //0：待打印排队中 if (result.status == 0) { //0：待打印排队中
wx.setNavigationBarTitle({title: '排队区' }) wx.setNavigationBarTitle({
title: '排队区'
})
this.OrderOrderRankingInit(4) this.OrderOrderRankingInit(4)
if(this.teststate){ if (this.teststate) {
// setTimeout(function(){ // setTimeout(function(){
// this.OrderOrderRankingInit(1) // this.OrderOrderRankingInit(1)
// }.bind(this),5000) // }.bind(this),5000)
...@@ -761,89 +815,102 @@ ...@@ -761,89 +815,102 @@
// this.OrderOrderRankingInit(-1) // this.OrderOrderRankingInit(-1)
// }.bind(this),10000) // }.bind(this),10000)
} }
if(this.type != 2){ if (this.type != 2) {
if(!this.teststate && e != 2){// 排队定时器 测试需要关闭 if (!this.teststate && e != 2) { // 排队定时器 测试需要关闭
clearInterval(this.OrderOrderRankingTime) clearInterval(this.OrderOrderRankingTime)
this.OrderOrderRankingTime = setInterval(function(){ this.OrderOrderRankingTime = setInterval(function() {
this.OrderOrderRankingInit() this.OrderOrderRankingInit()
}.bind(this),10000) }.bind(this), 10000)
} }
} }
}else if(result.status == 1){// 1：打印中 } else if (result.status == 1) { // 1：打印中
wx.setNavigationBarTitle({title: '打印区' }) wx.setNavigationBarTitle({
title: '打印区'
})
// 打开排队页面 // 打开排队页面
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:0,// 动画执行时间 duration: 0, // 动画执行时间
axisX:this.data.windowWidth,// x轴移动 axisX: this.data.windowWidth, // x轴移动
axisY:0,// y轴移动 axisY: 0, // y轴移动
settimeout:0,// 定时器时间 settimeout: 0, // 定时器时间
settimeoutState:false,//开启下一步 settimeoutState: false, //开启下一步
}) })
this.LoadState = true this.LoadState = true
setTimeout(function(){ setTimeout(function() {
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:3000,// 动画执行时间 duration: 3000, // 动画执行时间
axisX:0,// x轴移动 axisX: 0, // x轴移动
axisY:0,// y轴移动 axisY: 0, // y轴移动
settimeout:0,// 定时器时间 settimeout: 0, // 定时器时间
settimeoutState:false,//开启下一步 settimeoutState: false, //开启下一步
}) })
}.bind(this),1000) }.bind(this), 1000)
// 打印状态滑动进来 // 打印状态滑动进来
setTimeout(function(){ setTimeout(function() {
this.printingStart = true //打印状态----横向进来滑动动画 3s this.printingStart = true //打印状态----横向进来滑动动画 3s
this.data.printingStartX = 0 this.data.printingStartX = 0
}.bind(this),4500) }.bind(this), 4500)
setTimeout(function(){ setTimeout(function() {
this.initstate = true //打印状态----显示刷子 this.initstate = true //打印状态----显示刷子
this.init() this.init()
}.bind(this),7500) }.bind(this), 7500)
if(!this.teststate){ if (!this.teststate) {
// 定时器查询订单状态 // 定时器查询订单状态
clearInterval(this.orderOrderStatusTime) clearInterval(this.orderOrderStatusTime)
this.orderOrderStatusTime = setInterval(function(){ this.orderOrderStatusTime = setInterval(function() {
this.orderOrderStatusGet() this.orderOrderStatusGet()
}.bind(this),10000) }.bind(this), 10000)
}else{ } else {
// 定时器查询订单状态 // 定时器查询订单状态
clearInterval(this.orderOrderStatusTime) clearInterval(this.orderOrderStatusTime)
this.orderOrderStatusTime = setInterval(function(){ this.orderOrderStatusTime = setInterval(function() {
this.orderOrderStatusGet() this.orderOrderStatusGet()
}.bind(this),30000) }.bind(this), 30000)
} }
}else if(result.status == 2 || result.status == 10){ //2：生产完成 10：打印完成 } else if (result.status == 2 || result.status == 10) { //2：生产完成 10：打印完成
this.LoadState = true this.LoadState = true
wx.setNavigationBarTitle({title: '取货区' }) wx.setNavigationBarTitle({
title: '取货区'
})
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:2000,// 动画执行时间 duration: 2000, // 动画执行时间
axisX:0,// x轴移动 axisX: 0, // x轴移动
axisY:-this.data.windowHeight,// y轴移动 axisY: -this.data.windowHeight, // y轴移动
settimeout:2500,// 定时器时间 settimeout: 2500, // 定时器时间
settimeoutState:true,//开启下一步 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: '取货完成'
}) })
}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 => { }).catch(err => {
uni.showToast({title: err.msg || err.data,icon: 'none'}); uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
}); });
}, },
// -1：订单不存在 0：待打印 1：打印中 10：打印完成 2：生产完成 3：取消生产 // -1：订单不存在 0：待打印 1：打印中 10：打印完成 2：生产完成 3：取消生产
// 打印状态滑动进来 // 打印状态滑动进来
orderOrderStatusGet(){ orderOrderStatusGet() {
homeservice.WorksList({ homeservice.WorksList({
s:'Order.orderStatus', s: 'Order.orderStatus',
order_id:this.queryPage.id order_id: this.queryPage.id
}).then(result => { }).then(result => {
if(this.teststate){ if (this.teststate) {
result.status = 2 result.status = 2
} }
this.orderOrderStatusData = result this.orderOrderStatusData = result
if(result.status == 10 || result.status == 2){ if (result.status == 10 || result.status == 2) {
clearInterval(this.statetime) clearInterval(this.statetime)
this.statetime = null this.statetime = null
clearInterval(this.orderOrderStatusTime) clearInterval(this.orderOrderStatusTime)
...@@ -854,26 +921,32 @@ ...@@ -854,26 +921,32 @@
animMaind_time: animMaind_time || 200, animMaind_time: animMaind_time || 200,
}) })
this.updata() this.updata()
}else if(result.status == 3 || result.status == -3){ } else if (result.status == 3 || result.status == -3) {
this.ringaction.method = 'pause' //暂停音乐 this.ringaction.method = 'pause' //暂停音乐
console.log('5暂停音乐') console.log('5暂停音乐')
wx.setNavigationBarTitle({title: '取消生产' }) wx.setNavigationBarTitle({
title: '取消生产'
})
clearInterval(this.statetime) clearInterval(this.statetime)
this.statetime = null this.statetime = null
clearInterval(this.orderOrderStatusTime) clearInterval(this.orderOrderStatusTime)
this.orderOrderStatusTime = null this.orderOrderStatusTime = null
}else if(result.status == -2){ } else if (result.status == -2) {
this.ringaction.method = 'pause' //暂停音乐 this.ringaction.method = 'pause' //暂停音乐
console.log('5暂停音乐') console.log('5暂停音乐')
wx.setNavigationBarTitle({title: '设备故障' }) wx.setNavigationBarTitle({
title: '设备故障'
})
clearInterval(this.statetime) clearInterval(this.statetime)
this.statetime = null this.statetime = null
clearInterval(this.orderOrderStatusTime) clearInterval(this.orderOrderStatusTime)
this.orderOrderStatusTime = null this.orderOrderStatusTime = null
}else if(result.status == 7){ } else if (result.status == 7) {
this.ringaction.method = 'pause' //暂停音乐 this.ringaction.method = 'pause' //暂停音乐
console.log('5暂停音乐') console.log('5暂停音乐')
wx.setNavigationBarTitle({title: '取货完成' }) wx.setNavigationBarTitle({
title: '取货完成'
})
clearInterval(this.statetime) clearInterval(this.statetime)
this.statetime = null this.statetime = null
clearInterval(this.orderOrderStatusTime) clearInterval(this.orderOrderStatusTime)
...@@ -881,166 +954,180 @@ ...@@ -881,166 +954,180 @@
} }
}).catch(err => { }).catch(err => {
console.log(err) console.log(err)
uni.showToast({title: err.msg || err.data,icon: 'none'}); uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
}); });
}, },
// 查询排队 // 查询排队
// 如果订单不存单，或者订单已经打印完成，那么返回的排名是-1 // 如果订单不存单，或者订单已经打印完成，那么返回的排名是-1
// 如果订单当前正在打印。返回的排名是0 // 如果订单当前正在打印。返回的排名是0
// 如果前面有一个订单就返回1，前面有两个订单就返回2 // 如果前面有一个订单就返回1，前面有两个订单就返回2
OrderOrderRankingInit(state){ OrderOrderRankingInit(state) {
homeservice.WorksList({ homeservice.WorksList({
s:'Order.orderRanking', s: 'Order.orderRanking',
order_id:this.queryPage.id, order_id: this.queryPage.id,
machine_id:this.machine_id machine_id: this.machine_id
}).then(result => { }).then(result => {
if(this.teststate){ if (this.teststate) {
result.ranking = state //例子 result.ranking = state //例子
} }
if(result.ranking >= 0){ if (result.ranking >= 0) {
if(this.oldRankinglist.length > 0){ if (this.oldRankinglist.length > 0) {
if(this.rankinglist.length > result.ranking){ if (this.rankinglist.length > result.ranking) {
// 排队消失列表效果 // 排队消失列表效果
this.rankinglist[(this.rankinglist.length - 1)].x = 200 this.rankinglist[(this.rankinglist.length - 1)].x = 200
setTimeout(function(){ setTimeout(function() {
this.rankinglist[(this.rankinglist.length - 1)].w = 0 this.rankinglist[(this.rankinglist.length - 1)].w = 0
}.bind(this),1000) }.bind(this), 1000)
setTimeout(function(){ setTimeout(function() {
this.rankinglist.pop() this.rankinglist.pop()
if(this.rankinglist.length == 0){ if (this.rankinglist.length == 0) {
this.leaveto(0) this.leaveto(0)
} }
}.bind(this),2500) }.bind(this), 2500)
} }
}else{ } else {
this.oldRankinglist = []// 第一次进来记录排队人数 this.oldRankinglist = [] // 第一次进来记录排队人数
for(var i =0;i<result.ranking;i++){ for (var i = 0; i < result.ranking; i++) {
this.oldRankinglist.push({ this.oldRankinglist.push({
w:30,x:0 w: 30,
x: 0
}) })
} }
this.rankinglist = this.oldRankinglist this.rankinglist = this.oldRankinglist
// 当排队人数等于0就开始打印 // 当排队人数等于0就开始打印
if(this.rankinglist.length == 0){ if (this.rankinglist.length == 0) {
this.leaveto(1) this.leaveto(1)
}else{ } else {
// 快速切换--排队状态设计区底图 // 快速切换--排队状态设计区底图
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:0,// 动画执行时间 duration: 0, // 动画执行时间
axisX:this.data.windowWidth + this.data.windowWidth,// x轴移动 axisX: this.data.windowWidth + this.data.windowWidth, // x轴移动
axisY:0,// y轴移动 axisY: 0, // y轴移动
settimeout:0,// 定时器时间 settimeout: 0, // 定时器时间
settimeoutState:false,//开启下一步 settimeoutState: false, //开启下一步
}) })
this.LoadState = true this.LoadState = true
setTimeout(function(){ setTimeout(function() {
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:3000,// 动画执行时间 duration: 3000, // 动画执行时间
axisX:this.data.windowWidth,// x轴移动 axisX: this.data.windowWidth, // x轴移动
axisY:0,// y轴移动 axisY: 0, // y轴移动
settimeout:0,// 定时器时间 settimeout: 0, // 定时器时间
settimeoutState:false,//开启下一步 settimeoutState: false, //开启下一步
}) })
}.bind(this),1000) }.bind(this), 1000)
//排队状态----盒子横向进入滑动动画时间3s //排队状态----盒子横向进入滑动动画时间3s
setTimeout(function(){ setTimeout(function() {
this.lineUpState = true this.lineUpState = true
this.data.activebrushX = 0 this.data.activebrushX = 0
}.bind(this),4500) }.bind(this), 4500)
} }
} }
}else{ } else {
this.leaveto(1) this.leaveto(1)
} }
}).catch(err => { }).catch(err => {
uni.showToast({title: err.msg || err.data,icon: 'none'}); uni.showToast({
title: err.msg || err.data,
icon: 'none'
});
}); });
}, },
leaveto(e){ //e== 1无排队切换打印 0有排队切换打印 leaveto(e) { //e== 1无排队切换打印 0有排队切换打印
clearInterval(this.OrderOrderRankingTime) clearInterval(this.OrderOrderRankingTime)
this.OrderOrderRankingTime = null this.OrderOrderRankingTime = null
let time = 3500 //时间 let time = 3500 //时间
if(e == 1){ //无排队切换打印 if (e == 1) { //无排队切换打印
// 快速切换--设计区底图 // 快速切换--设计区底图
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:0,// 动画执行时间 duration: 0, // 动画执行时间
axisX:this.data.windowWidth,// x轴移动 axisX: this.data.windowWidth, // x轴移动
axisY:0,// y轴移动 axisY: 0, // y轴移动
settimeout:0,// 定时器时间 settimeout: 0, // 定时器时间
settimeoutState:false,//开启下一步 settimeoutState: false, //开启下一步
}) })
this.LoadState = true this.LoadState = true
setTimeout(function(){ setTimeout(function() {
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:3000,// 动画执行时间 duration: 3000, // 动画执行时间
axisX:0,// x轴移动 axisX: 0, // x轴移动
axisY:0,// y轴移动 axisY: 0, // y轴移动
settimeout:0,// 定时器时间 settimeout: 0, // 定时器时间
settimeoutState:false,//开启下一步 settimeoutState: false, //开启下一步
}) })
}.bind(this),1000) }.bind(this), 1000)
time = 4500 //无时间 time = 4500 //无时间
wx.setNavigationBarTitle({title: '打印区' }) wx.setNavigationBarTitle({
}else if(e == 0){ //有排队切换打印 title: '打印区'
})
} else if (e == 0) { //有排队切换打印
this.LoadState = true this.LoadState = true
this.leaveUpState = true //排队状态----横向离开滑动动画 时间3s this.leaveUpState = true //排队状态----横向离开滑动动画 时间3s
this.data.activebrushX = (this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth + 50 //排队状态----横向离开滑动动画 3s this.data.activebrushX = (this.data.windowWidth - this.data.editorWidth) / 2 + this.data.editorWidth +
setTimeout(function(){ // 排队页面滑出---打印页面进入 50 //排队状态----横向离开滑动动画 3s
setTimeout(function() { // 排队页面滑出---打印页面进入
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:3000,// 动画执行时间 duration: 3000, // 动画执行时间
axisX:0,// x轴移动 axisX: 0, // x轴移动
axisY:0,// y轴移动 axisY: 0, // y轴移动
settimeout:0,// 定时器时间 settimeout: 0, // 定时器时间
settimeoutState:false,//开启下一步 settimeoutState: false, //开启下一步
}) })
}.bind(this),time) }.bind(this), time)
wx.setNavigationBarTitle({title: '打印区' }) wx.setNavigationBarTitle({
}else if(e == 3){ title: '打印区'
})
} else if (e == 3) {
// 快速切换--设计区底图 // 快速切换--设计区底图
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:0,// 动画执行时间 duration: 0, // 动画执行时间
axisX:this.data.windowWidth,// x轴移动 axisX: this.data.windowWidth, // x轴移动
axisY:0,// y轴移动 axisY: 0, // y轴移动
settimeout:0,// 定时器时间 settimeout: 0, // 定时器时间
settimeoutState:false,//开启下一步 settimeoutState: false, //开启下一步
}) })
this.LoadState = true this.LoadState = true
setTimeout(function(){ setTimeout(function() {
this.Box_Two_Animation({ this.Box_Two_Animation({
duration:3000,// 动画执行时间 duration: 3000, // 动画执行时间
axisX:0,// x轴移动 axisX: 0, // x轴移动
axisY:0,// y轴移动 axisY: 0, // y轴移动
settimeout:0,// 定时器时间 settimeout: 0, // 定时器时间
settimeoutState:false,//开启下一步 settimeoutState: false, //开启下一步
}) })
}.bind(this),1000) }.bind(this), 1000)
time = 500 //无时间 time = 500 //无时间
wx.setNavigationBarTitle({title: '打印区' }) wx.setNavigationBarTitle({
title: '打印区'
})
} }
setTimeout(function(){ setTimeout(function() {
this.printingStart = true //打印状态----横向进来滑动动画 this.printingStart = true //打印状态----横向进来滑动动画
this.data.printingStartX = 0 this.data.printingStartX = 0
}.bind(this),(time + 3500)) }.bind(this), (time + 3500))
// 刷子开始打印手机壳 // 刷子开始打印手机壳
setTimeout(function(){ setTimeout(function() {
this.initstate = true this.initstate = true
this.init() this.init()
}.bind(this),(time + 6500)) }.bind(this), (time + 6500))
// 开启定时器查询打印状态 // 开启定时器查询打印状态
if(this.teststate){ if (this.teststate) {
clearInterval(this.orderOrderStatusTime) clearInterval(this.orderOrderStatusTime)
this.orderOrderStatusTime = setInterval(function(){ this.orderOrderStatusTime = setInterval(function() {
this.orderOrderStatusGet() this.orderOrderStatusGet()
}.bind(this),15000) }.bind(this), 15000)
}else{ } else {
clearInterval(this.orderOrderStatusTime) clearInterval(this.orderOrderStatusTime)
this.orderOrderStatusTime = setInterval(function(){ this.orderOrderStatusTime = setInterval(function() {
this.orderOrderStatusGet() this.orderOrderStatusGet()
}.bind(this),10000) }.bind(this), 10000)
} }
}, },
clearIntervalTime(){// 清除定时器 clearIntervalTime() { // 清除定时器
clearInterval(this.statetime) clearInterval(this.statetime)
this.statetime = null this.statetime = null
clearInterval(this.orderOrderStatusTime) clearInterval(this.orderOrderStatusTime)
...@@ -1068,19 +1155,19 @@ ...@@ -1068,19 +1155,19 @@
}) })
}); });
}, },
tosetClipboardData(id){ // 复制成功 tosetClipboardData(id) { // 复制成功
uni.setClipboardData({ uni.setClipboardData({
data: id, data: id,
success: function () { success: function() {
uni.showToast({ uni.showToast({
title: '复制成功', title: '复制成功',
icon:'none', icon: 'none',
duration: 2000 duration: 2000
}); });
} }
}); });
}, },
previewImg(goods, index) {//预览图片 previewImg(goods, index) { //预览图片
let img = goods.works_image let img = goods.works_image
uni.previewImage({ uni.previewImage({
current: index, current: index,
...@@ -1095,28 +1182,28 @@ ...@@ -1095,28 +1182,28 @@
this.queryPage.id = options.orderId this.queryPage.id = options.orderId
this.type = options.type this.type = options.type
this.machine_id = options.machine_id this.machine_id = options.machine_id
if(this.$base.mobilePhoneCaseSize){ /* if(this.$base.mobilePhoneCaseSize){
this.data = this.$base.mobilePhoneCaseSize this.data = this.$base.mobilePhoneCaseSize
this.leftx = this.data.render_cove_width this.leftx = this.data.render_cove_width
}else{ }else{ */
var that = this; var that = this;
wx.getSystemInfo({//获取屏幕宽高 wx.getSystemInfo({ //获取屏幕宽高
success: function(res) { success: function(res) {
let pixelRate = res.windowWidth / 750; let pixelRate = res.windowWidth / 750;
that.data.windowWidth = res.windowWidth // 屏幕宽度 that.data.windowWidth = res.windowWidth // 屏幕宽度
that.data.windowHeight = res.windowHeight // 屏幕高度 that.data.windowHeight = res.windowHeight // 屏幕高度
that.data.pixelRate = pixelRate // 屏幕宽度比率 that.data.pixelRate = pixelRate // 屏幕宽度比率
} }
}) })
} /* } */
this.loadData(); this.loadData();
}, },
onshow(){ onshow() {
this.data.activebrushX = '-500'//排队盒子动画坐标 this.data.activebrushX = '-500' //排队盒子动画坐标
this.printingStart = false this.printingStart = false
this.data.printingStartX = '-500'//生产中盒子动画坐标 this.data.printingStartX = '-500' //生产中盒子动画坐标
}, },
onUnload() { onUnload() {
this.clearIntervalTime() this.clearIntervalTime()
} }
}; };
...@@ -1127,6 +1214,7 @@ ...@@ -1127,6 +1214,7 @@
background: #131319 !important; background: #131319 !important;
color: #fff; color: #fff;
} }
// 3D动画 // 3D动画
.crate-wrapper { .crate-wrapper {
height: 100%; height: 100%;
...@@ -1134,26 +1222,28 @@ ...@@ -1134,26 +1222,28 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.brush{ .brush {
position: relative; position: relative;
transition: all 3s; transition: all 3s;
transform: translateX(-400px); transform: translateX(-400px);
} }
.twobrush{ .twobrush {
position: relative; position: relative;
transition: all 3s; transition: all 3s;
} }
.item-text{ .item-text {
transition: all 2s; transition: all 2s;
transform: translateX(400px); transform: translateX(400px);
} }
.printer{
.printer {
transform: translateX(0px); transform: translateX(0px);
} }
// 错误提示信息 // 错误提示信息
.start { .start {
.start_img { .start_img {
...@@ -1162,11 +1252,13 @@ ...@@ -1162,11 +1252,13 @@
display: block; display: block;
margin: 0upx auto 102upx; margin: 0upx auto 102upx;
} }
.start_title { .start_title {
font-size: 30upx; font-size: 30upx;
text-align: center; text-align: center;
color: #FFFFFF; color: #FFFFFF;
} }
.start_text { .start_text {
width: 70%; width: 70%;
text-align: center; text-align: center;
......
pages/mine/self_help_payment_details_new.vue 0 → 100644
<template>
<view class="full-width full-height" :style="{overflow: isReady ? 'hidden' : 'scroll' }">
<!-- 音乐 -->
<!-- https://img.colorpark.cn/wechat/stitch.m4a -->
<!-- https://img.colorpark.cn/wechat/ring.m4a -->
<!-- https://img.colorpark.cn/wechat/ring2.m4a -->
<audio src="https://img.colorpark.cn/wechat/ring2.m4a"
:action="ringaction" controls loop style="opacity: 0; position: absolute;"></audio>
<!-- 继续定制 -->
<view @click="tomall" style="position: fixed; right: 0; bottom: 100upx; display: flex;
align-items: center;justify-content: center; width: 100upx; height: 88upx;
background: #43cf7c; border-radius: 44upx 0px 0px 44upx; z-index: 999;">
<view style="font-size: 24upx; font-weight: 800; color: #FFFFFF;">
<view>继续</view><view>定制</view>
</view>
</view>
<view style="height:100%;width: 100%; overflow: hidden;">
<!-- goods.status.value 订单状态(0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成) "-->
<view :animation="BoxTwoAnimation"
style="width: 100%; height: 100%;"
v-if="(orderOrderStatusData.status == 0 || orderOrderStatusData.status == 1 || orderOrderStatusData.status == 10 || orderOrderStatusData.status == 2) < 2 && type != 1 && LoadState">
<!-- 排队中-付款区底图 -->
<view v-if="orderOrderStatusData.status == 0" style="position: absolute; top: 0; right: 200%; width: 100%; height: 100%;overflow: hidden;">
<image src="https://img.colorpark.cn/wechat/track/fukuanqu_2.png" mode="widthFix" style="width: 100%;"></image>
</view>
<!-- 排队中 -->
<view v-if="orderOrderStatusData.status == 0" style="position: absolute; width: 100%; height: 100%; overflow: hidden; right: 100%;">
<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
<image src="https://img.colorpark.cn/wechat/track/paiduiqu_2.png" mode="widthFix" style="width: 100%;"></image>
</view>
<view style="position: relative; width: 100%; height: 100%;overflow: hidden;">
<view class='crate-wrapper'>
<view style="display: flex;position: relative;">
<view style="position: relative;transition: all 3s; z-index: 2;"
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
transform: 'translateX(' + data.activebrushX + 'px)'}">
<image :src="goods.goods.surface_pic + '?x-oss-process=image/resize,lfit,w_1000'" mode=""
style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; margin: auto; bottom: 0; z-index: 1;"></image>
<!-- <view style="position: absolute; width: 98%; height: 98%; left: 0; top: 0; right: 0; margin: auto; bottom: 0; background: #fff; z-index: 1;"></view> -->
<image :src="goods.works_image" mode=""
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; margin: auto; bottom: 0; z-index: 2;"></image>
<image :src="goods.goods.front_image" mode=""
style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; right: 0; margin: auto;z-index: 3; overflow: hidden;"></image>
</view>
<image v-for="(item,index) in rankinglist" :key="index" v-if="index < 3"
style="transition: all 1s;"
:style="{height: data.editorHeight +'px',width:item.w +'px',
transform: 'translateX(' + item.x + 'px)'}"
src="../../static/img/d.png" mode=""></image>
<!-- 刷子 -->
<!-- <view :style="{width: data.render_cove_width +'px',height: data.render_cove_height +'px'}"
style="position: absolute; left: 0; top: 0; right: 0; margin: auto; bottom: 0;z-index: 3;">
<view :style="{width: leftx +'px',height: data.render_cove_height +'px'}"
style="position: absolute; left: 0; top: 0;background: #fff;">
</view>
</view> -->
</view>
</view>
</view>
</view>
<!-- 打印中-付款区底图 -->
<view v-if="orderOrderStatusData.status == 1" style="position: absolute; top: 0; right: 100%; width: 100%; height: 100%;overflow: hidden;">
<image src="https://img.colorpark.cn/wechat/track/fukuanqu_2.png" mode="widthFix" style="width: 100%;"></image>
</view>
<!-- 生产中打印 1-->
<view style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">
<!-- 背景图 -->
<view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;overflow: hidden;">
<view style="position: relative; width: 100%;">
<image src="https://img.colorpark.cn/wechat/track/dayinqu_2.png" mode="widthFix" style="width: 100%;"></image>
</view>
<view style="position: relative; width: 100%; margin-top: -13px;">
<image src="https://img.colorpark.cn/wechat/track/shuxiang_2.png" mode="widthFix" style="width: 100%;"></image>
</view>
</view>
<view style="position: relative;width: 100%; height: 100%;overflow: hidden;" :animation="printingEnd">
<view class='crate-wrapper'>
<view class="brush"
:style="{width: data.editorWidth +'px',height: data.editorHeight +'px',
transform: 'translateX(' + data.printingStartX + 'px)'}">
<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)'}">
<!-- 底图 -->
<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
/* if(this.$base.mobilePhoneCaseSize){
this.data = this.$base.mobilePhoneCaseSize
}else{ */
this.background_surface_image = result.goods.surface_pic
result.goods.design_width = 200 / this.data.pixelRate
result.goods.design_height = 370 / this.data.pixelRate
this.data.editorWidth = result.goods.design_width * this.data.pixelRate // 设计宽度
this.data.editorHeight = result.goods.design_height * this.data.pixelRate // 设计高度
this.data.render_cove_width = result.goods.render_cove_width * (result.goods.design_width / result.goods.render_width) * this.data.pixelRate + 30 // 设计高度
this.data.render_cove_height = result.goods.render_cove_height * (result.goods.design_height / result.goods.render_height) * this.data.pixelRate + 30 // 设计高度
this.data.render_left = result.goods.render_left * (result.goods.design_width / result.goods.render_width) * this.data.pixelRate // 设计高度
this.data.render_top = result.goods.render_top * (result.goods.design_height / result.goods.render_height) * this.data.pixelRate // 设计高度
this.data.activebrushX = -((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth + 50)
this.data.printingStartX = -((this.data.windowWidth - this.data.editorWidth)/2 + this.data.editorWidth + 50)
//this.$base.mobilePhoneCaseSize = this.data
/* } */
this.leftx = this.data.render_cove_width
// status.value 订单状态 0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用）， 6：待入货（弃用），7：取货完成，8：已发货，9：订单完成 -->
// type.value 1直营配送站 2 万能通用版 3色彩自助站
if(this.teststate){
result.status.value = 1 //1：生产中
result.type.value = 2 //2单机版
}
this.type = result.type.value
// 单机版查询当前设备打印订单
if(this.type == 2){
this.anb() //查询排队列表
// clearInterval(this.orderCurrentOrderTime)
// this.orderCurrentOrderTime = setInterval(function(){
// this.OrdercurrentOrder() //单机版查询设备打印订单
// this.anbtwo() //记录排队人数
// }.bind(this),10000)
// setTimeout(function(){
// this.OrdercurrentOrder() //单机版查询设备打印订单
// // this.anbtwo() //记录排队人数
// }.bind(this),10000)
this.leaveto(3)
}else{
this.OrderOrderStatusInit()
}
uni.hideLoading();
uni.stopPullDownRefresh();
}).catch(err => {
uni.hideLoading();
uni.showToast({title: err.msg || err.data,icon: 'none'});
});
},
anb(){
homeservice.WorksList({
s:'Order.orderStatus',
order_id:this.queryPage.id
}).then(result => {
this.orderOrderStatusData = result
this.orderOrderStatusData.status = 0
// wx.setNavigationBarTitle({title: '排队区' })
// this.anbone()
}).catch(err => {
uni.showToast({title: err.msg || err.data,icon: 'none'});
});
},
anbone(){
homeservice.WorksList({
s:'Order.orderRanking',
order_id:this.queryPage.id,
machine_id:this.machine_id
}).then(result => {
this.oldRankinglist = []// 第一次进来记录排队人数
for(var i =0;i<result.ranking;i++){
this.oldRankinglist.push({
w:30,x:0
})
}
this.rankinglist = this.oldRankinglist
this.Box_Two_Animation({
duration:0,// 动画执行时间
axisX:this.data.windowWidth + this.data.windowWidth,// x轴移动
axisY:0,// y轴移动
settimeout:0,// 定时器时间
settimeoutState:false,//开启下一步
})
this.LoadState = true
setTimeout(function(){
this.Box_Two_Animation({
duration:3000,// 动画执行时间
axisX:this.data.windowWidth,// x轴移动
axisY:0,// y轴移动
settimeout:0,// 定时器时间
settimeoutState:false,//开启下一步
})
}.bind(this),1000)
//排队状态----盒子横向进入滑动动画时间3s
setTimeout(function(){
this.lineUpState = true
this.data.activebrushX = 0
}.bind(this),4500)
}).catch(err => {
uni.showToast({title: err.msg || err.data,icon: 'none'});
});
},
// anbtwo(){
// homeservice.WorksList({
// s:'Order.orderRanking',
// order_id:this.queryPage.id,
// machine_id:this.machine_id
// }).then(result => {
// this.oldRankinglist = []// 第一次进来记录排队人数
// for(var i =0;i<result.ranking;i++){
// this.oldRankinglist.push({
// w:30,x:0
// })
// }
// this.rankinglist = this.oldRankinglist
// }).catch(err => {
// uni.showToast({title: err.msg || err.data,icon: 'none'});
// });
// },
OrdercurrentOrder(){
console.log('单机版查询设备打印订单')
homeservice.WorksList({
s:'Order.currentOrder',
machine_id:this.machine_id
}).then(result => {
this.orderCurrentOrder = result.order_id
if(this.teststate){
this.orderCurrentOrder = this.queryPage.id // 测试
}
// if(this.orderCurrentOrder == this.queryPage.id){
// console.log('清除定时器---')
// clearInterval(this.orderCurrentOrderTime)
// this.leaveto(0)
// }
console.log('清除定时器---')
clearInterval(this.orderCurrentOrderTime)
// this.leaveto(3)
}).catch(err => {
uni.hideLoading();
uni.showToast({title: err.msg || err.data,icon: 'none'});
});
},
OrderOrderStatusInit(e){
homeservice.WorksList({
s:'Order.orderStatus',
order_id:this.queryPage.id
}).then(result => {
//result.status -1：订单不存在 0：待打印 1：打印中 10：打印完成 2：生产完成 3：取消生产
if(this.teststate || e == 2){
result.status = 0 // 测试
}
this.orderOrderStatusData = result
if(result.status == 0){ //0：待打印排队中
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: '18938664545'
})
},
previewImg(goods, index) {//预览图片
let img = goods.works_image
uni.previewImage({
current: index,
urls: [img]
});
},
},
onLoad(options) {
console.log(options)
// orderId=161819487100005361&type=null&machine_id=100012
// orderId=161819487100005361&type=2&machine_id=100022
// 例子 2021/12/17
// orderId=163964142100008177&type=3&machine_id=100012
this.clearIntervalTime()
this.queryPage.id = options.orderId
this.type = options.type
this.machine_id = options.machine_id
/* if(this.$base.mobilePhoneCaseSize){
this.data = this.$base.mobilePhoneCaseSize
this.leftx = this.data.render_cove_width
}else{ */
var that = this;
wx.getSystemInfo({//获取屏幕宽高
success: function(res) {
let pixelRate = res.windowWidth / 750;
that.data.windowWidth = res.windowWidth // 屏幕宽度
that.data.windowHeight = res.windowHeight // 屏幕高度
that.data.pixelRate = pixelRate // 屏幕宽度比率
}
})
/* } */
this.loadData();
},
onshow(){
this.data.activebrushX = '-500'//排队盒子动画坐标
this.printingStart = false
this.data.printingStartX = '-500'//生产中盒子动画坐标
},
onUnload() {
this.clearIntervalTime()
let pages = getCurrentPages();
// console.log(pages)
if(this.tomallstate){
if(pages[pages.length - 2].route == "pages/mine/order"){
wx.navigateBack({delta: 3})
}else if(pages[pages.length - 2].route == "pages/index/index"){
wx.navigateBack({delta: 2})
}
}
}
};
</script>
<style lang="scss">
page {
background: #131319 !important;
color: #fff;
}
.stepsmain {
margin: 0upx 30upx 87upx;
padding: 20upx 20upx;
background: #282932;
border-radius: 10upx;
}
.steps {
position: relative;
counter-reset: step;
/*创建步骤数字计数器*/
overflow: hidden;
}
/*步骤描述*/
.steps .li {
list-style-type: none;
font-size: 12px;
text-align: center;
width: calc(100% / 6);
position: relative;
float: left;
.steps_img {
position: relative;
z-index: 9;
border: 1upx solid #FFFFFF;
background: #282932;
width: 56upx;
height: 56upx;
border-radius: 50%;
margin: auto;
.steps_image {
width: 27upx;
height: 27upx;
margin: 15upx auto;
}
}
.steps_text {
text-align: center;
font-size: 24upx;
font-weight: 400;
color: #888888;
margin-top: 15upx;
}
}
.steps .li.active .steps_img{
background: #864BC3;
border: 1upx solid #864BC3;
}
.steps .li.red .steps_img{
background: #864BC3;
border: 1upx solid #864BC3;
}
/*连接线*/
.steps .li~.li:after {
content: '';
width: 100%;
height: 1px;
background-color: #fff;
position: absolute;
left: -50%;
top: 15px;
z-index: 1;
/*放置在数字后面*/
}
.steps .li.red ~ .li.red:after {
background-color: #864BC3;
}
.steps .li.red ~ .li.active:after {
background-color: #864BC3;
}
.steps .li.red ~ .li.wait:after {
background-color: #864BC3;
}
.steps .li.active ~ .li.wait:after {
background-color: #864BC3;
}
.steps .li.wait ~ .li.wait:after {
background-color: #B6B6B6;
}
// 3D动画
.crate-wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.brush{
position: relative;
transition: all 3s;
transform: translateX(-400px);
}
.twobrush{
position: relative;
transition: all 3s;
}
.item-text{
transition: all 2s;
transform: translateX(400px);
}
.printer{
transform: translateX(0px);
}
// 错误提示信息
.start {
.start_img {
width: 260upx;
height: 260upx;
display: block;
margin: 0upx auto 102upx;
}
.start_title {
font-size: 30upx;
text-align: center;
color: #FFFFFF;
}
.start_text {
width: 70%;
text-align: center;
font-size: 28upx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
margin: 22upx auto 0;
line-height: 28upx;
}
}
</style>
static/icon_make_diy_back_color.png
static/icon_make_diy_back_color.png

1.14 KB | W: | H:

static/icon_make_diy_back_color.png

2.47 KB | W: | H:

static/icon_make_diy_back_color.png
static/icon_make_diy_back_color.png
static/icon_make_diy_back_color.png
static/icon_make_diy_back_color.png
  • 2-up
  • Swipe
  • Onion skin
util/Env.js
...@@ -5,7 +5,7 @@ if(!accountInfo.miniProgram.envVersion){ ...@@ -5,7 +5,7 @@ if(!accountInfo.miniProgram.envVersion){
const baseApi = { const baseApi = {
// 开发版 // 开发版
develop: "https://tprint.refinecolor.com", develop: "https://tprint.refinecolor.com",
//develop: "https://tprint.colorpark.cn", //develop: "https://tprint.colorpark.cn",
// 体验版 // 体验版
trial: "https://tprint.refinecolor.com", trial: "https://tprint.refinecolor.com",
// trial: "https://tprint.colorpark.cn", // trial: "https://tprint.colorpark.cn",
...@@ -13,12 +13,12 @@ const baseApi = { ...@@ -13,12 +13,12 @@ const baseApi = {
release: "https://tprint.colorpark.cn", release: "https://tprint.colorpark.cn",
}; };
const baseURL = baseApi[accountInfo.miniProgram.envVersion] const baseURL = baseApi[accountInfo.miniProgram.envVersion]
console.log(accountInfo.miniProgram.envVersion) //console.log(accountInfo.miniProgram.envVersion)
// console.log(baseURL) //console.log(baseURL)
const Env = { const Env = {
getDevBaseURL: () => baseURL, getDevBaseURL: () => baseURL,
getBaseURL: () => baseURL, getBaseURL: () => baseURL,
getmachineId: () => '100054', //线上100086 //测试 422001' //100086 getmachineId: () => '100055', //线上100086 //测试 422001' //100086
getappcode: () => 'lite', getappcode: () => 'lite',
getmalltext: () => "色彩公园Lite", getmalltext: () => "色彩公园Lite",
getAppID: () => "wx1c777ee874c39b0b", getAppID: () => "wx1c777ee874c39b0b",
......
util/http.js
// const baseUrl = 'https://ws.refinecolor.com'; import Env from '@/util/Env.js'
const baseUrl = 'https://tprint.refinecolor.com';
import store from '../store' import store from '../store'
const baseUrl = Env.getBaseURL();
const http = ({ url = '', param = {}, ...other } = {}) => { const http = ({ url = '', param = {}, ...other } = {}) => {
wx.showLoading({ // wx.showLoading({
title: '啊嘞，色彩正在绘制' // title: '啊嘞，色彩正在绘制'
}); // });
let timeStart = Date.now(); let timeStart = Date.now();
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
wx.request({ wx.request({
url: getUrl(url), url: getUrl(url),
...@@ -20,7 +19,6 @@ const http = ({ url = '', param = {}, ...other } = {}) => { ...@@ -20,7 +19,6 @@ const http = ({ url = '', param = {}, ...other } = {}) => {
complete(res) { complete(res) {
wx.hideLoading(); wx.hideLoading();
console.log(`耗时${Date.now()} - timeStart`); console.log(`耗时${Date.now()} - timeStart`);
if(res.statusCode >= 200 && res.statusCode < 300){ if(res.statusCode >= 200 && res.statusCode < 300){
resolve(res.data); resolve(res.data);
}else{ }else{
...@@ -75,4 +73,14 @@ module.exports = { ...@@ -75,4 +73,14 @@ module.exports = {
post, post,
put, put,
del del
} }
\ No newline at end of file
// http.get('https://ccdcapi.alipay.com/validateAndCacheCardInfo.json',{
// _input_charset:'utf-8',
// cardNo:'6227003320240034988',
// cardBinCheck:true
// }).then(result => {
// console.log(result.bank)
// }).catch(err => {
// uni.showToast({ title: err.msg, icon: 'none' });
// })
\ No newline at end of file
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